@caribeng/ui 22.4.0 → 22.5.0

package/fesm2022/caribeng-ui-datagrid.mjs

@@ -0,0 +1,1635 @@
+import * as i0 from '@angular/core';
+import { inject, Injector, ElementRef, model, input, booleanAttribute, output, signal, computed, effect, untracked, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { cbFormatAmount, injectCbTranslation, cbFormat, CB_CONFIG, cbSummarize } from '@caribeng/ui';
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { CbIcon } from '@caribeng/ui/icon';
+import { currencySymbol, cbDownloadXlsx } from '@caribeng/ui/xlsx';
+
+function rangeOf(a, b) {
+    return { r1: Math.min(a.r, b.r), r2: Math.max(a.r, b.r), c1: Math.min(a.c, b.c), c2: Math.max(a.c, b.c) };
+}
+function inRange(range, r, c) {
+    return r >= range.r1 && r <= range.r2 && c >= range.c1 && c <= range.c2;
+}
+function isEmpty(value) {
+    return value === null || value === undefined || value === '';
+}
+const TRUE_WORDS = new Set(['true', '1', 'x', 'sí', 'si', 'yes', 'y', 's', 'verdadero', '✓']);
+const FALSE_WORDS = new Set(['false', '0', 'no', 'n', 'falso', '']);
+/**
+ * Convierte el texto escrito o pegado en el valor de la columna. Devuelve
+ * `error` cuando el texto no se puede interpretar (no es un número, una fecha…).
+ */
+function parseCell(col, text, texts) {
+    const raw = text.trim();
+    switch (col.type ?? 'text') {
+        case 'number': {
+            if (!raw)
+                return { value: null };
+            // Admite coma decimal y separadores de miles: "1.234,5", "1,234.5", "1234,5".
+            let s = raw.replace(/\s/g, '');
+            const comma = s.lastIndexOf(',');
+            const dot = s.lastIndexOf('.');
+            if (comma > dot)
+                s = s.replace(/\./g, '').replace(',', '.');
+            else
+                s = s.replace(/,/g, '');
+            const n = Number(s);
+            return Number.isFinite(n) ? { value: n } : { value: text, error: texts.number };
+        }
+        case 'checkbox': {
+            const w = raw.toLowerCase();
+            if (TRUE_WORDS.has(w))
+                return { value: true };
+            if (FALSE_WORDS.has(w))
+                return { value: false };
+            return { value: false };
+        }
+        case 'select':
+        case 'autocomplete': {
+            if (!raw)
+                return { value: null };
+            const opt = findOption(col.options ?? [], raw);
+            return opt ? { value: opt.value } : { value: text, error: texts.option };
+        }
+        case 'date': {
+            if (!raw)
+                return { value: null };
+            const iso = /^(\d{4})-(\d{1,2})-(\d{1,2})/.exec(raw);
+            const dmy = /^(\d{1,2})[/.-](\d{1,2})[/.-](\d{4})$/.exec(raw);
+            const [y, m, d] = iso ? [+iso[1], +iso[2], +iso[3]] : dmy ? [+dmy[3], +dmy[2], +dmy[1]] : [NaN, NaN, NaN];
+            const date = new Date(y, m - 1, d);
+            if (Number.isNaN(date.getTime()) || date.getMonth() !== m - 1 || date.getDate() !== d)
+                return { value: text, error: texts.date };
+            return { value: isoDate(date) };
+        }
+        default:
+            return { value: text };
+    }
+}
+/** Minúsculas y sin tildes. */
+function fold(text) {
+    return text.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase().trim();
+}
+/**
+ * Opción que corresponde a un texto escrito o pegado: por valor, por etiqueta
+ * exacta o por el código con el que empieza la etiqueta ("110505" → "110505 Caja general").
+ */
+function findOption(options, text) {
+    const q = fold(text);
+    if (!q)
+        return undefined;
+    const usable = options.filter((o) => !o.disabled);
+    return (usable.find((o) => fold(String(o.value)) === q) ??
+        usable.find((o) => fold(o.label) === q) ??
+        usable.find((o) => fold(o.label).startsWith(q + ' ')));
+}
+/**
+ * Opciones de `autocomplete` que coinciden con lo escrito: primero las que
+ * empiezan por el texto (por código), después las que lo contienen; sin tildes.
+ */
+function searchOptions(options, text, limit = 50) {
+    const q = fold(text);
+    if (!q)
+        return options.slice(0, limit);
+    const starts = [];
+    const contains = [];
+    for (const o of options) {
+        const label = fold(o.label);
+        if (label.startsWith(q) || fold(String(o.value)).startsWith(q))
+            starts.push(o);
+        else if (label.includes(q) || (o.description && fold(o.description).includes(q)))
+            contains.push(o);
+    }
+    return [...starts, ...contains].slice(0, limit);
+}
+function isoDate(d) {
+    const pad = (n) => String(n).padStart(2, '0');
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+/** Mensaje de error de una celda (obligatoria, límites y validación propia) o `null`. */
+function validateCell(col, value, row, texts) {
+    // Vacía: obligatoria, o la validación propia (puede exigirla según la fila).
+    if (isEmpty(value))
+        return col.required ? texts.required : (col.validate?.(value, row) ?? null);
+    const type = col.type ?? 'text';
+    if (type === 'number') {
+        if (typeof value !== 'number')
+            return texts.number;
+        if (col.min !== undefined && value < col.min)
+            return texts.min.replace('{0}', String(col.min));
+        if (col.max !== undefined && value > col.max)
+            return texts.max.replace('{0}', String(col.max));
+    }
+    if ((type === 'select' || type === 'autocomplete') && !(col.options ?? []).some((o) => o.value === value))
+        return texts.option;
+    if (type === 'date' && (typeof value !== 'string' || !/^\d{4}-\d{2}-\d{2}$/.test(value)))
+        return texts.date;
+    return col.validate?.(value, row) ?? null;
+}
+/** Texto plano de una celda: el que se ve, se copia y se ordena. */
+function cellText(col, value, row, locale, yesNo, amount = {}) {
+    if (col.format)
+        return col.format(value, row);
+    if (isEmpty(value))
+        return '';
+    switch (col.type ?? 'text') {
+        case 'number': {
+            if (typeof value !== 'number')
+                return String(value);
+            const currency = typeof col.currency === 'string' ? col.currency : col.currency ? (amount.currency ?? null) : null;
+            const negative = col.negative ?? amount.negative ?? 'minus';
+            const numberLocale = amount.locale ?? locale;
+            if (currency || col.decimals !== undefined || negative === 'parens')
+                return cbFormatAmount(value, numberLocale, { currency, decimals: col.decimals, negative });
+            return new Intl.NumberFormat(numberLocale).format(value);
+        }
+        case 'checkbox':
+            return value ? yesNo[0] : yesNo[1];
+        case 'select':
+        case 'autocomplete':
+            return (col.options ?? []).find((o) => o.value === value)?.label ?? String(value);
+        case 'date': {
+            const m = typeof value === 'string' ? /^(\d{4})-(\d{2})-(\d{2})$/.exec(value) : null;
+            return m ? new Intl.DateTimeFormat(locale, { dateStyle: 'medium' }).format(new Date(+m[1], +m[2] - 1, +m[3])) : String(value);
+        }
+        default:
+            return String(value);
+    }
+}
+/** Texto que se pone en el portapapeles: los números sin separador de miles para que se vuelvan a pegar bien. */
+function copyText(col, value, row, locale, yesNo) {
+    if (isEmpty(value))
+        return '';
+    if ((col.type ?? 'text') === 'number' && typeof value === 'number')
+        return String(value);
+    if (col.type === 'date' && typeof value === 'string')
+        return value;
+    return cellText(col, value, row, locale, yesNo);
+}
+/** Compara dos valores de una columna para ordenar (vacíos al final). */
+function compareCells(col, a, b, locale) {
+    if (isEmpty(a) || isEmpty(b))
+        return isEmpty(a) === isEmpty(b) ? 0 : isEmpty(a) ? 1 : -1;
+    if (typeof a === 'number' && typeof b === 'number')
+        return a - b;
+    if (typeof a === 'boolean' && typeof b === 'boolean')
+        return Number(a) - Number(b);
+    if (col.type === 'select' || col.type === 'autocomplete') {
+        const label = (v) => (col.options ?? []).find((o) => o.value === v)?.label ?? String(v);
+        return label(a).localeCompare(label(b), locale, { numeric: true, sensitivity: 'base' });
+    }
+    return String(a).localeCompare(String(b), locale, { numeric: true, sensitivity: 'base' });
+}
+/** Matriz de textos a TSV (el formato de Excel y Google Sheets al copiar). */
+function toTsv(rows) {
+    const quote = (s) => (/[\t\n"\r]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s);
+    return rows.map((r) => r.map(quote).join('\t')).join('\n');
+}
+/** TSV (lo que llega al pegar de una hoja de cálculo) a matriz de textos. */
+function fromTsv(text) {
+    const out = [];
+    let row = [];
+    let cell = '';
+    let quoted = false;
+    const src = text.replace(/\r\n?/g, '\n');
+    for (let i = 0; i < src.length; i++) {
+        const ch = src[i];
+        if (quoted) {
+            if (ch === '"' && src[i + 1] === '"') {
+                cell += '"';
+                i++;
+            }
+            else if (ch === '"')
+                quoted = false;
+            else
+                cell += ch;
+        }
+        else if (ch === '"' && cell === '')
+            quoted = true;
+        else if (ch === '\t') {
+            row.push(cell);
+            cell = '';
+        }
+        else if (ch === '\n') {
+            row.push(cell);
+            out.push(row);
+            row = [];
+            cell = '';
+        }
+        else
+            cell += ch;
+    }
+    if (cell !== '' || row.length) {
+        row.push(cell);
+        out.push(row);
+    }
+    return out;
+}
+
+/** Pasos de RePág / AvPág. */
+const PAGE = 10;
+/** Cambios que se pueden deshacer. */
+const HISTORY = 100;
+/** Posiciones de la lista de `autocomplete`: debajo de la celda o, si no cabe, encima. */
+const LIST_POSITIONS = [
+    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 2 },
+    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -2 },
+];
+let nextUid = 0;
+let nextKey = 0;
+/**
+ * Data Grid editable de CaribeNG: una tabla que se edita como una hoja de cálculo.
+ *
+ * - Celdas con tipo (texto, número, lista, fecha, casilla), validación por columna
+ *   (`required`, `min`, `max`, `validate`) y marca de las celdas cambiadas.
+ * - Teclado de hoja de cálculo: flechas, Mayús + flechas para seleccionar, Enter o
+ *   F2 para editar, escribir para reemplazar, Supr para borrar, Ctrl + Z / Y,
+ *   Ctrl + D para rellenar hacia abajo.
+ * - Copiar, cortar y pegar rangos en el formato de Excel y Google Sheets (TSV).
+ * - Añadir y eliminar filas, ordenar por columna y deshacer cualquier cambio.
+ *
+ * @example
+ * ```html
+ * <cb-data-grid [(rows)]="filas" [columns]="columnas" dataKey="id" (cellChange)="guardar($event)" />
+ * ```
+ */
+class CbDataGrid {
+    constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.fmt = cbFormat;
+        this.injector = inject(Injector);
+        this.host = inject(ElementRef);
+        this.uid = `cb-data-grid-${++nextUid}`;
+        /** Filas (bidireccional: se actualiza con cada edición, pegado, alta o baja). */
+        this.rows = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        this.columns = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        /** Campo que identifica cada fila. */
+        this.dataKey = input('id', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dataKey" }] : /* istanbul ignore next */ []));
+        /** `false` deja todo el grid de solo lectura (se sigue navegando, seleccionando y copiando). */
+        this.editable = input(true, { ...(ngDevMode ? { debugName: "editable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Columna con el número de fila (y para seleccionar filas enteras). */
+        this.rowNumbers = input(true, { ...(ngDevMode ? { debugName: "rowNumbers" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Barra con Añadir fila, Eliminar, Deshacer, Rehacer y el resumen de errores. */
+        this.toolbar = input(true, { ...(ngDevMode ? { debugName: "toolbar" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Alto máximo del área con scroll (la cabecera y los números de fila quedan fijos). */
+        this.scrollHeight = input('28rem', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollHeight" }] : /* istanbul ignore next */ []));
+        /** Crea la fila nueva al añadir o al pegar más filas de las que hay. */
+        this.newRow = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "newRow" }] : /* istanbul ignore next */ []));
+        this.emptyMessage = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Moneda de las columnas con `currency: true` (si no, la de `provideCaribeNG({ currency })`). */
+        this.currency = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
+        /** Negativos con signo o entre paréntesis (si no, el de `provideCaribeNG({ negativeStyle })`). */
+        this.negativeStyle = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "negativeStyle" }] : /* istanbul ignore next */ []));
+        /** Una celda cambió de valor (al editar, pegar, borrar o rellenar; una vez por celda). */
+        this.cellChange = output();
+        this.rowAdd = output();
+        this.rowsDelete = output();
+        this.sort = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
+        this.active = signal({ r: 0, c: 0 }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        this.anchor = signal({ r: 0, c: 0 }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []));
+        this.editing = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []));
+        this.announcement = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+        this.dragging = false;
+        this.undoStack = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "undoStack" }] : /* istanbul ignore next */ []));
+        this.redoStack = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "redoStack" }] : /* istanbul ignore next */ []));
+        this.canUndo = computed(() => this.undoStack().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canUndo" }] : /* istanbul ignore next */ []));
+        this.canRedo = computed(() => this.redoStack().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canRedo" }] : /* istanbul ignore next */ []));
+        /** Filas tal como estaban al cargar o en el último `markClean()`. */
+        this.baseline = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseline" }] : /* istanbul ignore next */ []));
+        this.range = computed(() => rangeOf(this.anchor(), this.active()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+        this.selectedRowCount = computed(() => {
+            const r = this.range();
+            return this.view().length ? r.r2 - r.r1 + 1 : 0;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedRowCount" }] : /* istanbul ignore next */ []));
+        /** Filas en el orden en que se ven. */
+        this.view = computed(() => {
+            const rows = this.rows();
+            const s = this.sort();
+            const col = s && this.columns().find((c) => c.field === s.field);
+            if (!s || !col)
+                return rows;
+            const locale = this.t().intlLocale;
+            return [...rows].sort((a, b) => compareCells(col, this.get(a, s.field), this.get(b, s.field), locale) * s.order);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+        this.texts = computed(() => {
+            const t = this.t();
+            return { required: t.dataGridRequired, min: t.dataGridMin, max: t.dataGridMax, number: t.dataGridInvalidNumber, date: t.dataGridInvalidDate, option: t.dataGridInvalidOption };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "texts" }] : /* istanbul ignore next */ []));
+        /** Errores de validación de todas las celdas, en el orden de la vista. */
+        this.errors = computed(() => {
+            const texts = this.texts();
+            const out = [];
+            for (const row of this.view()) {
+                for (const col of this.columns()) {
+                    const message = validateCell(col, this.get(row, col.field), row, texts);
+                    if (message)
+                        out.push({ key: this.keyOf(row), field: col.field, message });
+                }
+            }
+            return out;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+        this.errorIndex = computed(() => {
+            const map = new Map();
+            for (const e of this.errors()) {
+                if (!map.has(e.key))
+                    map.set(e.key, new Map());
+                map.get(e.key).set(e.field, e.message);
+            }
+            return map;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "errorIndex" }] : /* istanbul ignore next */ []));
+        /** Celdas cambiadas desde la carga (o el último `markClean()`), contando las filas nuevas. */
+        this.dirtyCount = computed(() => {
+            const base = this.baseline();
+            if (!base)
+                return 0;
+            let n = 0;
+            for (const row of this.rows())
+                for (const col of this.columns())
+                    if (this.isDirty(row, col))
+                        n++;
+            return n;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dirtyCount" }] : /* istanbul ignore next */ []));
+        this.config = inject(CB_CONFIG);
+        this.amount = computed(() => ({ currency: this.currency() ?? this.config.currency ?? null, negative: this.negativeStyle() ?? this.config.negativeStyle ?? 'minus', locale: this.config.numberLocale }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "amount" }] : /* istanbul ignore next */ []));
+        this.hasFooterText = computed(() => this.columns().some((c) => c.footer), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasFooterText" }] : /* istanbul ignore next */ []));
+        this.hasFooter = computed(() => this.hasFooterText() || this.columns().some((c) => c.summary), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
+        /** Columna de la etiqueta "Total": la primera sin total. */
+        this.labelColumn = computed(() => Math.max(0, this.columns().findIndex((c) => !c.summary)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelColumn" }] : /* istanbul ignore next */ []));
+        /** Totales del pie (columnas con `summary`), sobre todas las filas. */
+        this.totals = computed(() => {
+            const rows = this.rows();
+            const out = {};
+            for (const col of this.columns()) {
+                if (!col.summary)
+                    continue;
+                out[col.field] = typeof col.summary === 'function' ? col.summary(rows) : cbSummarize(rows.map((r) => this.get(r, col.field)), col.summary);
+            }
+            return out;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "totals" }] : /* istanbul ignore next */ []));
+        this.tableWidth = computed(() => `calc(${[this.rowNumbers() ? '3rem' : '0rem', ...this.columns().map((c) => this.widthOf(c))].join(' + ')})`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tableWidth" }] : /* istanbul ignore next */ []));
+        this.listPositions = LIST_POSITIONS;
+        /** Opciones de `autocomplete` que coinciden con lo escrito en el editor. */
+        this.matches = computed(() => {
+            const e = this.editing();
+            const col = e ? this.columns()[e.c] : null;
+            if (!e || col?.type !== 'autocomplete')
+                return [];
+            return searchOptions(col.options ?? [], e.text);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "matches" }] : /* istanbul ignore next */ []));
+        // La primera vez que llegan filas se guardan como estado original.
+        effect(() => {
+            const rows = this.rows();
+            if (rows.length && untracked(this.baseline) === null)
+                untracked(() => this.markClean());
+        });
+        // Si cambian las filas o columnas desde fuera, la celda activa sigue dentro.
+        effect(() => {
+            const rows = this.view().length;
+            const cols = this.columns().length;
+            untracked(() => {
+                const clamp = (p) => ({ r: Math.max(0, Math.min(p.r, rows - 1)), c: Math.max(0, Math.min(p.c, cols - 1)) });
+                const a = this.active();
+                const b = clamp(a);
+                if (a.r !== b.r || a.c !== b.c)
+                    this.active.set(b);
+                const n = this.anchor();
+                const m = clamp(n);
+                if (n.r !== m.r || n.c !== m.c)
+                    this.anchor.set(m);
+            });
+        });
+    }
+    // --- API pública -------------------------------------------------------------------------
+    /** Toma las filas actuales como estado original: borra las marcas de cambio. */
+    markClean() {
+        this.baseline.set(new Map(this.rows().map((row) => [this.keyOf(row), row])));
+    }
+    /** Filas añadidas, modificadas y eliminadas desde la carga o el último `markClean()`. */
+    getChanges() {
+        const base = this.baseline() ?? new Map();
+        const keys = new Set();
+        const added = [];
+        const updated = [];
+        for (const row of this.rows()) {
+            const key = this.keyOf(row);
+            keys.add(key);
+            const before = base.get(key);
+            if (!before)
+                added.push(row);
+            else if (before !== row && this.columns().some((c) => this.get(before, c.field) !== this.get(row, c.field)))
+                updated.push(row);
+        }
+        const removed = [...base.entries()].filter(([key]) => !keys.has(key)).map(([, row]) => row);
+        return { added, updated, removed };
+    }
+    /**
+     * Hoja de Excel con las filas en el orden en que se ven: números y fechas como
+     * valores con formato, listas con su etiqueta, casillas como Sí / No y totales.
+     */
+    toExcelSheet(options = {}) {
+        const t = this.t();
+        const amount = this.amount();
+        const locale = this.config.numberLocale ?? t.intlLocale;
+        const cols = this.columns();
+        return {
+            name: options.sheetName ?? this.ariaLabel() ?? 'Datos',
+            title: options.title,
+            columns: cols.map((c) => {
+                const currency = typeof c.currency === 'string' ? c.currency : c.currency ? amount.currency : null;
+                const type = c.type === 'number' ? (currency ? 'currency' : 'number') : c.type === 'date' ? 'date' : 'text';
+                return { header: c.header, type, decimals: c.decimals, negative: c.negative ?? amount.negative, symbol: currency ? currencySymbol(currency, locale) : undefined };
+            }),
+            rows: this.view().map((row) => cols.map((c) => {
+                const v = this.get(row, c.field);
+                if (c.type === 'number' || c.type === 'date')
+                    return typeof v === 'number' || typeof v === 'string' ? v : null;
+                return this.text(row, c);
+            })),
+            totals: this.hasFooter() ? cols.map((c, i) => (c.footer ?? (i === this.labelColumn() && !this.hasFooterText() ? t.tableTotal : (this.totals()[c.field] ?? null)))) : undefined,
+        };
+    }
+    /** Descarga las filas en Excel (`nombre.xlsx`). */
+    exportExcel(filename = 'datos', options = {}) {
+        cbDownloadXlsx(filename, this.toExcelSheet(options));
+    }
+    /** `true` si ninguna celda tiene errores de validación. */
+    isValid() {
+        return this.errors().length === 0;
+    }
+    undo() {
+        const stack = this.undoStack();
+        if (!stack.length)
+            return;
+        this.cancelEdit();
+        this.redoStack.update((s) => [...s, this.rows()]);
+        this.undoStack.set(stack.slice(0, -1));
+        this.rows.set(stack[stack.length - 1]);
+        this.say(this.t().dataGridUndone);
+    }
+    redo() {
+        const stack = this.redoStack();
+        if (!stack.length)
+            return;
+        this.cancelEdit();
+        this.undoStack.update((s) => [...s, this.rows()]);
+        this.redoStack.set(stack.slice(0, -1));
+        this.rows.set(stack[stack.length - 1]);
+        this.say(this.t().dataGridRedone);
+    }
+    /** Añade una fila al final y lleva el foco a su primera celda. */
+    addRow() {
+        if (!this.editable())
+            return;
+        this.commit(null);
+        const row = this.createRow();
+        this.pushHistory();
+        this.sort.set(null);
+        this.rows.update((rows) => [...rows, row]);
+        this.rowAdd.emit(row);
+        this.select({ r: this.rows().length - 1, c: 0 });
+        this.say(this.t().dataGridRowAdded);
+    }
+    /** Elimina las filas de la selección. */
+    deleteRows() {
+        if (!this.editable() || !this.view().length)
+            return;
+        this.commit(null);
+        const { r1, r2 } = this.range();
+        const gone = this.view().slice(r1, r2 + 1);
+        const drop = new Set(gone);
+        this.pushHistory();
+        this.rows.update((rows) => rows.filter((row) => !drop.has(row)));
+        this.rowsDelete.emit(gone);
+        this.select({ r: Math.min(r1, this.view().length - 1), c: this.active().c });
+        this.say(this.fmt(this.t().dataGridRowsDeleted, gone.length));
+    }
+    // --- Plantilla ---------------------------------------------------------------------------
+    keyOf(row) {
+        return this.get(row, this.dataKey());
+    }
+    get(row, field) {
+        return row[field];
+    }
+    cellId(r, c) {
+        return `${this.uid}-${r}-${c}`;
+    }
+    widthOf(col) {
+        return col.width ?? (col.type === 'checkbox' ? '5rem' : col.type === 'number' ? '8rem' : col.type === 'date' ? '10rem' : '10rem');
+    }
+    alignOf(col) {
+        return col.align ?? (col.type === 'number' ? 'end' : col.type === 'checkbox' ? 'center' : 'start');
+    }
+    canEdit(col) {
+        return this.editable() && col.editable !== false;
+    }
+    isSelected(r, c) {
+        return inRange(this.range(), r, c);
+    }
+    text(row, col) {
+        const t = this.t();
+        return cellText(col, this.get(row, col.field), row, t.intlLocale, [t.yes, t.no], this.amount());
+    }
+    isNegative(value, col) {
+        return col.type === 'number' && typeof value === 'number' && value < 0;
+    }
+    totalText(col) {
+        const value = this.totals()[col.field];
+        if (value === undefined || value === null)
+            return '';
+        if (col.summary === 'count' || typeof value !== 'number')
+            return typeof value === 'number' ? new Intl.NumberFormat(this.config.numberLocale ?? this.t().intlLocale).format(value) : String(value);
+        const t = this.t();
+        return cellText({ ...col, type: 'number', format: undefined }, value, {}, t.intlLocale, [t.yes, t.no], this.amount());
+    }
+    errorOf(row, col) {
+        return this.errorIndex().get(this.keyOf(row))?.get(col.field) ?? null;
+    }
+    isNew(row) {
+        const base = this.baseline();
+        return !!base && !base.has(this.keyOf(row));
+    }
+    isDirty(row, col) {
+        const base = this.baseline();
+        if (!base)
+            return false;
+        const before = base.get(this.keyOf(row));
+        if (!before)
+            return true;
+        return before !== row && this.get(before, col.field) !== this.get(row, col.field);
+    }
+    setActive(i) {
+        this.editing.update((e) => (e ? { ...e, active: i } : e));
+    }
+    /** Elige una opción de `autocomplete` con el ratón. */
+    pick(option) {
+        if (option.disabled)
+            return;
+        const e = this.editing();
+        if (!e)
+            return;
+        this.editing.set({ ...e, text: option.label, active: this.matches().indexOf(option) });
+        this.commit('down');
+    }
+    editorKind(col) {
+        if (col.type === 'autocomplete')
+            return 'autocomplete';
+        const mode = this.editing()?.mode;
+        if (col.type === 'select' && mode === 'native')
+            return 'select';
+        if (col.type === 'date' && mode === 'native')
+            return 'date';
+        return 'text';
+    }
+    toggleSort(col) {
+        this.commit(null);
+        const s = this.sort();
+        this.sort.set(s?.field !== col.field ? { field: col.field, order: 1 } : s.order === 1 ? { field: col.field, order: -1 } : null);
+    }
+    selectAll() {
+        this.anchor.set({ r: 0, c: 0 });
+        this.active.set({ r: Math.max(0, this.view().length - 1), c: Math.max(0, this.columns().length - 1) });
+        this.focusActive();
+    }
+    selectRow(r, event) {
+        event.preventDefault();
+        this.commit(null);
+        const last = this.columns().length - 1;
+        if (event.shiftKey)
+            this.anchor.set({ r: this.anchor().r, c: 0 });
+        else
+            this.anchor.set({ r, c: 0 });
+        this.active.set({ r, c: last });
+        this.focusActive();
+    }
+    goToFirstError() {
+        const e = this.errors()[0];
+        if (!e)
+            return;
+        const r = this.view().findIndex((row) => this.keyOf(row) === e.key);
+        const c = this.columns().findIndex((col) => col.field === e.field);
+        if (r >= 0 && c >= 0)
+            this.select({ r, c });
+    }
+    // --- Ratón -------------------------------------------------------------------------------
+    onCellPointerDown(event, r, c) {
+        if (event.button !== 0 || event.target.closest('.cb-dg__editor'))
+            return;
+        const e = this.editing();
+        if (e && (e.r !== r || e.c !== c))
+            this.commit(null);
+        if (event.shiftKey)
+            this.active.set({ r, c });
+        else
+            this.select({ r, c }, false);
+        this.dragging = true;
+        this.focusActive();
+    }
+    onCellPointerEnter(r, c) {
+        if (!this.dragging || this.editing())
+            return;
+        this.active.set({ r, c });
+    }
+    toggleCheck(r, c) {
+        const col = this.columns()[c];
+        const row = this.view()[r];
+        if (!col || !row || !this.canEdit(col))
+            return;
+        this.apply([{ row, field: col.field, value: !this.get(row, col.field) }]);
+    }
+    // --- Teclado -----------------------------------------------------------------------------
+    onKeydown(event) {
+        if (event.target.closest('thead, .cb-dg__editor'))
+            return;
+        if (this.editing()) {
+            // Teclas que llegan a la celda antes de que el editor tenga el foco (al escribir rápido).
+            if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+                event.preventDefault();
+                this.editing.update((e) => (e && e.mode === 'text' ? { ...e, text: e.text + event.key, active: this.firstEnabled(e.c, e.text + event.key) } : e));
+            }
+            else if (['Enter', 'Tab', 'Escape'].includes(event.key))
+                this.onEditorKeydown(event);
+            return;
+        }
+        const rows = this.view().length;
+        const cols = this.columns().length;
+        if (!rows || !cols)
+            return;
+        const { r, c } = this.active();
+        const mod = event.ctrlKey || event.metaKey;
+        const key = event.key;
+        let to = null;
+        switch (key) {
+            case 'ArrowUp':
+                to = { r: mod ? 0 : r - 1, c };
+                break;
+            case 'ArrowDown':
+                to = { r: mod ? rows - 1 : r + 1, c };
+                break;
+            case 'ArrowLeft':
+                to = { r, c: mod ? 0 : c - 1 };
+                break;
+            case 'ArrowRight':
+                to = { r, c: mod ? cols - 1 : c + 1 };
+                break;
+            case 'Home':
+                to = { r: mod ? 0 : r, c: 0 };
+                break;
+            case 'End':
+                to = { r: mod ? rows - 1 : r, c: cols - 1 };
+                break;
+            case 'PageUp':
+                to = { r: r - PAGE, c };
+                break;
+            case 'PageDown':
+                to = { r: r + PAGE, c };
+                break;
+            case 'Tab': {
+                const i = r * cols + c + (event.shiftKey ? -1 : 1);
+                if (i < 0 || i >= rows * cols)
+                    return; // En los extremos el Tab sale del grid.
+                event.preventDefault();
+                this.select({ r: Math.floor(i / cols), c: i % cols });
+                return;
+            }
+            case 'Enter':
+            case 'F2':
+                event.preventDefault();
+                if (this.columns()[c].type === 'checkbox')
+                    this.toggleCheck(r, c);
+                else
+                    this.startEdit(r, c);
+                return;
+            case 'Delete':
+            case 'Backspace':
+                event.preventDefault();
+                this.clearRange();
+                return;
+            case 'Escape':
+                if (this.range().r1 !== this.range().r2 || this.range().c1 !== this.range().c2) {
+                    event.preventDefault();
+                    this.select({ r, c });
+                }
+                return;
+        }
+        if (to) {
+            event.preventDefault();
+            const next = { r: Math.max(0, Math.min(rows - 1, to.r)), c: Math.max(0, Math.min(cols - 1, to.c)) };
+            if (event.shiftKey) {
+                this.active.set(next);
+                this.focusActive();
+            }
+            else
+                this.select(next);
+            return;
+        }
+        if (key === ' ' && event.shiftKey) {
+            event.preventDefault();
+            this.anchor.set({ r: this.anchor().r, c: 0 });
+            this.active.set({ r, c: cols - 1 });
+            return;
+        }
+        if (key === ' ' && mod) {
+            event.preventDefault();
+            this.anchor.set({ r: 0, c: this.anchor().c });
+            this.active.set({ r: rows - 1, c });
+            return;
+        }
+        if (mod && !event.altKey) {
+            const k = key.toLowerCase();
+            if (k === 'z' && !event.shiftKey) {
+                event.preventDefault();
+                this.undo();
+            }
+            else if (k === 'y' || (k === 'z' && event.shiftKey)) {
+                event.preventDefault();
+                this.redo();
+            }
+            else if (k === 'd') {
+                event.preventDefault();
+                this.fillDown();
+            }
+            else if (k === 'a') {
+                event.preventDefault();
+                this.selectAll();
+            }
+            return;
+        }
+        if (key === ' ' && this.columns()[c].type === 'checkbox') {
+            event.preventDefault();
+            this.toggleCheck(r, c);
+            return;
+        }
+        // Escribir un carácter empieza a editar y reemplaza el valor.
+        if (key.length === 1 && !event.altKey) {
+            const col = this.columns()[c];
+            if (!this.canEdit(col) || col.type === 'checkbox')
+                return;
+            event.preventDefault();
+            if (col.type === 'select') {
+                const low = key.toLowerCase();
+                const opt = (col.options ?? []).find((o) => o.label.toLowerCase().startsWith(low));
+                this.startEdit(r, c, opt?.label ?? '', 'native');
+            }
+            else
+                this.startEdit(r, c, key, 'text');
+        }
+    }
+    onEditorKeydown(event) {
+        event.stopPropagation();
+        const e = this.editing();
+        if (!e)
+            return;
+        switch (event.key) {
+            case 'Enter':
+                event.preventDefault();
+                this.commit(event.shiftKey ? 'up' : 'down');
+                break;
+            case 'Tab':
+                event.preventDefault();
+                this.commit(event.shiftKey ? 'left' : 'right');
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.cancelEdit();
+                this.focusActive();
+                break;
+            case 'ArrowUp':
+            case 'ArrowDown':
+                // En `autocomplete`, las flechas recorren la lista (saltando las deshabilitadas).
+                if (this.columns()[e.c]?.type === 'autocomplete') {
+                    event.preventDefault();
+                    const list = this.matches();
+                    if (!list.length)
+                        break;
+                    const step = event.key === 'ArrowDown' ? 1 : -1;
+                    let i = e.active;
+                    for (let n = 0; n < list.length; n++) {
+                        i = (i + step + list.length) % list.length;
+                        if (!list[i].disabled)
+                            break;
+                    }
+                    this.setActive(i);
+                    this.host.nativeElement.ownerDocument.getElementById(`${this.uid}-opt-${i}`)?.scrollIntoView?.({ block: 'nearest' });
+                    break;
+                }
+                // Si se empezó escribiendo, las flechas confirman y se mueven (como en Excel).
+                if (e.mode === 'text') {
+                    event.preventDefault();
+                    this.commit(event.key === 'ArrowUp' ? 'up' : 'down');
+                }
+                break;
+        }
+    }
+    editText(event) {
+        const value = event.target.value;
+        this.editing.update((e) => (e ? { ...e, text: value, error: null, active: this.firstEnabled(e.c, value) } : e));
+    }
+    /** Primera opción elegible de `autocomplete` para un texto. */
+    firstEnabled(c, text) {
+        const col = this.columns()[c];
+        if (col?.type !== 'autocomplete')
+            return 0;
+        return Math.max(0, searchOptions(col.options ?? [], text).findIndex((o) => !o.disabled));
+    }
+    // --- Edición -----------------------------------------------------------------------------
+    /** Abre el editor de una celda (con `initial`, reemplaza el valor por ese texto). */
+    startEdit(r, c, initial, mode) {
+        const col = this.columns()[c];
+        const row = this.view()[r];
+        if (!col || !row || !this.canEdit(col) || col.type === 'checkbox')
+            return;
+        const value = this.get(row, col.field);
+        let text = initial;
+        if (text === undefined) {
+            const t = this.t();
+            text = col.type === 'date' ? (isEmpty(value) ? '' : String(value)) : copyText(col, value, row, t.intlLocale, [t.yes, t.no]);
+            if (col.type === 'number' && typeof value === 'number')
+                text = this.localNumber(value);
+        }
+        this.select({ r, c }, false);
+        this.editing.set({ r, c, text, mode: mode ?? (initial === undefined ? 'native' : 'text'), error: null, active: this.firstEnabled(c, initial ?? '') });
+        afterNextRender(() => {
+            const input = this.host.nativeElement.querySelector(`#${this.cellId(r, c)} .cb-dg__editor`);
+            input?.focus();
+            if (input instanceof HTMLInputElement && input.type === 'text')
+                input.setSelectionRange(input.value.length, input.value.length);
+        }, { injector: this.injector });
+    }
+    /** Confirma la edición en curso y, si se indica, se mueve a la celda vecina. */
+    commit(move) {
+        const e = this.editing();
+        if (!e)
+            return;
+        const col = this.columns()[e.c];
+        const row = this.view()[e.r];
+        if (!col || !row) {
+            this.editing.set(null);
+            return;
+        }
+        // En `autocomplete`, con Enter o Tab se elige la opción resaltada (al salir, solo si coincide).
+        const highlighted = col.type === 'autocomplete' && move !== null ? this.matches()[e.active] : undefined;
+        const parsed = highlighted && !highlighted.disabled && e.text.trim() ? { value: highlighted.value } : parseCell(col, e.text, this.texts());
+        if ('error' in parsed && parsed.error) {
+            // Al salir con un valor que no se entiende, se descarta; con Enter o Tab se avisa.
+            if (move === null)
+                this.editing.set(null);
+            else
+                this.editing.set({ ...e, error: parsed.error });
+            return;
+        }
+        this.editing.set(null);
+        if (parsed.value !== this.get(row, col.field))
+            this.apply([{ row, field: col.field, value: parsed.value }]);
+        if (move) {
+            const rows = this.view().length;
+            const cols = this.columns().length;
+            const { r, c } = e;
+            const to = move === 'down' ? { r: Math.min(rows - 1, r + 1), c }
+                : move === 'up' ? { r: Math.max(0, r - 1), c }
+                    : move === 'right' ? (c + 1 < cols ? { r, c: c + 1 } : { r: Math.min(rows - 1, r + 1), c: 0 })
+                        : c > 0 ? { r, c: c - 1 } : { r: Math.max(0, r - 1), c: cols - 1 };
+            this.select(to);
+        }
+        else if (this.host.nativeElement.contains(document.activeElement) || document.activeElement === document.body) {
+            this.focusActive();
+        }
+    }
+    cancelEdit() {
+        this.editing.set(null);
+    }
+    /** Borra los valores del rango seleccionado. */
+    clearRange() {
+        const patches = [];
+        this.forRange((row, col) => {
+            if (!this.canEdit(col))
+                return;
+            const value = col.type === 'checkbox' ? false : null;
+            if (this.get(row, col.field) !== value && !(isEmpty(value) && isEmpty(this.get(row, col.field))))
+                patches.push({ row, field: col.field, value });
+        });
+        if (!patches.length)
+            return;
+        this.apply(patches);
+        this.say(this.fmt(this.t().dataGridCleared, patches.length));
+    }
+    /** Ctrl + D: copia la primera fila del rango en las demás (o la de arriba si es una sola fila). */
+    fillDown() {
+        const { r1, r2, c1, c2 } = this.range();
+        const view = this.view();
+        const from = r1 === r2 ? r1 - 1 : r1;
+        if (from < 0)
+            return;
+        const source = view[from];
+        const patches = [];
+        for (let r = r1 === r2 ? r1 : r1 + 1; r <= r2; r++) {
+            for (let c = c1; c <= c2; c++) {
+                const col = this.columns()[c];
+                if (!this.canEdit(col))
+                    continue;
+                const value = this.get(source, col.field);
+                if (this.get(view[r], col.field) !== value)
+                    patches.push({ row: view[r], field: col.field, value });
+            }
+        }
+        if (patches.length)
+            this.apply(patches);
+    }
+    // --- Portapapeles ------------------------------------------------------------------------
+    onCopy(event, cut) {
+        if (this.editing() || !event.clipboardData || !this.view().length)
+            return;
+        const { r1, r2, c1, c2 } = this.range();
+        const t = this.t();
+        const matrix = [];
+        for (let r = r1; r <= r2; r++) {
+            const row = this.view()[r];
+            const line = [];
+            for (let c = c1; c <= c2; c++) {
+                const col = this.columns()[c];
+                line.push(copyText(col, this.get(row, col.field), row, t.intlLocale, [t.yes, t.no]));
+            }
+            matrix.push(line);
+        }
+        event.clipboardData.setData('text/plain', toTsv(matrix));
+        event.preventDefault();
+        const cells = (r2 - r1 + 1) * (c2 - c1 + 1);
+        if (cut && this.editable())
+            this.clearRange();
+        else
+            this.say(this.fmt(t.dataGridCopied, cells));
+    }
+    onPaste(event) {
+        if (this.editing() || !this.editable() || !event.clipboardData)
+            return;
+        const text = event.clipboardData.getData('text/plain');
+        if (!text)
+            return;
+        event.preventDefault();
+        this.paste(fromTsv(text));
+    }
+    /** Pega una matriz de textos desde la esquina del rango (un único valor rellena todo el rango). */
+    paste(matrix) {
+        if (!matrix.length)
+            return;
+        const range = this.range();
+        const single = matrix.length === 1 && matrix[0].length === 1;
+        const height = single ? range.r2 - range.r1 + 1 : matrix.length;
+        const width = single ? range.c2 - range.c1 + 1 : Math.max(...matrix.map((m) => m.length));
+        const cols = this.columns();
+        // Si se pegan más filas de las que hay, se añaden (sin orden, para que queden al final).
+        const missing = range.r1 + height - this.view().length;
+        const added = [];
+        if (missing > 0) {
+            for (let i = 0; i < missing; i++)
+                added.push(this.createRow());
+            this.pushHistory();
+            this.sort.set(null);
+            this.rows.update((rows) => [...rows, ...added]);
+        }
+        const view = this.view();
+        const patches = [];
+        for (let i = 0; i < height; i++) {
+            const row = view[range.r1 + i];
+            if (!row)
+                break;
+            for (let j = 0; j < width; j++) {
+                const col = cols[range.c1 + j];
+                if (!col || !this.canEdit(col))
+                    continue;
+                const raw = single ? matrix[0][0] : (matrix[i][j] ?? '');
+                const parsed = parseCell(col, raw, this.texts());
+                // Lo que no se entiende se pega tal cual y queda marcado como error.
+                if (parsed.value !== this.get(row, col.field))
+                    patches.push({ row, field: col.field, value: parsed.value });
+            }
+        }
+        if (patches.length)
+            this.apply(patches, added.length === 0);
+        for (const row of added)
+            this.rowAdd.emit(row);
+        this.anchor.set({ r: range.r1, c: range.c1 });
+        this.active.set({ r: Math.min(view.length - 1, range.r1 + height - 1), c: Math.min(cols.length - 1, range.c1 + width - 1) });
+        this.focusActive();
+        this.say(this.fmt(this.t().dataGridPasted, height * width));
+    }
+    // --- Internos ----------------------------------------------------------------------------
+    forRange(fn) {
+        const { r1, r2, c1, c2 } = this.range();
+        const view = this.view();
+        for (let r = r1; r <= r2; r++)
+            for (let c = c1; c <= c2; c++)
+                if (view[r] && this.columns()[c])
+                    fn(view[r], this.columns()[c]);
+    }
+    /** Aplica cambios de celdas como un único paso de deshacer. */
+    apply(patches, history = true) {
+        if (history)
+            this.pushHistory();
+        const byRow = new Map();
+        for (const p of patches) {
+            const copy = byRow.get(p.row) ?? { ...p.row };
+            copy[p.field] = p.value;
+            // Campos que cambian con esta celda (`onEdit`), en el mismo paso.
+            const extra = this.columns().find((c) => c.field === p.field)?.onEdit?.(p.value, copy);
+            if (extra)
+                Object.assign(copy, extra);
+            byRow.set(p.row, copy);
+        }
+        const next = this.rows().map((row) => byRow.get(row) ?? row);
+        this.rows.set(next);
+        for (const p of patches) {
+            this.cellChange.emit({ row: byRow.get(p.row), field: p.field, value: p.value, previous: this.get(p.row, p.field) });
+        }
+    }
+    pushHistory() {
+        this.undoStack.update((s) => [...s.slice(-(HISTORY - 1)), this.rows()]);
+        this.redoStack.set([]);
+    }
+    createRow() {
+        const factory = this.newRow();
+        if (factory)
+            return factory();
+        const row = { [this.dataKey()]: `${Date.now().toString(36)}-${++nextKey}` };
+        for (const col of this.columns())
+            if (!(col.field in row))
+                row[col.field] = col.type === 'checkbox' ? false : null;
+        return row;
+    }
+    /** Mueve la celda activa (y la selección a esa sola celda). */
+    select(pos, focus = true) {
+        this.anchor.set(pos);
+        this.active.set(pos);
+        if (focus)
+            this.focusActive();
+    }
+    focusActive() {
+        afterNextRender(() => {
+            const { r, c } = this.active();
+            const cell = this.host.nativeElement.querySelector(`#${this.cellId(r, c)}`);
+            if (!cell || cell.contains(document.activeElement))
+                return;
+            cell.focus({ preventScroll: true });
+            cell.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+        }, { injector: this.injector });
+    }
+    localNumber(value) {
+        // El separador decimal del idioma, sin separador de miles: se edita como se escribe.
+        const sep = new Intl.NumberFormat(this.t().intlLocale).formatToParts(1.5).find((p) => p.type === 'decimal')?.value ?? '.';
+        return String(value).replace('.', sep);
+    }
+    say(message) {
+        this.announcement.set('');
+        queueMicrotask(() => this.announcement.set(message));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDataGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbDataGrid, isStandalone: true, selector: "cb-data-grid", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, rowNumbers: { classPropertyName: "rowNumbers", publicName: "rowNumbers", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, newRow: { classPropertyName: "newRow", publicName: "newRow", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, negativeStyle: { classPropertyName: "negativeStyle", publicName: "negativeStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rows: "rowsChange", cellChange: "cellChange", rowAdd: "rowAdd", rowsDelete: "rowsDelete" }, host: { listeners: { "document:pointerup": "dragging = false" }, properties: { "class.cb-data-grid--readonly": "!editable()" }, classAttribute: "cb-data-grid" }, ngImport: i0, template: `
+    @if (toolbar()) {
+      <div class="cb-dg__toolbar" role="toolbar" [attr.aria-label]="ariaLabel() || t().dataGridToolbar" [attr.aria-controls]="uid">
+        @if (editable()) {
+          <button type="button" class="cb-dg__btn" (click)="addRow()">
+            <cb-icon name="plus" [size]="16" aria-hidden="true" />
+            {{ t().dataGridAddRow }}
+          </button>
+          <button type="button" class="cb-dg__btn" [disabled]="!view().length" (click)="deleteRows()">
+            <cb-icon name="trash" [size]="16" aria-hidden="true" />
+            {{ selectedRowCount() > 1 ? fmt(t().dataGridDeleteRows, selectedRowCount()) : t().dataGridDeleteRow }}
+          </button>
+          <span class="cb-dg__sep" aria-hidden="true"></span>
+          <button type="button" class="cb-dg__icon-btn" [attr.aria-label]="t().undo" [disabled]="!canUndo()" (click)="undo()">
+            <cb-icon name="undo" [size]="16" aria-hidden="true" />
+          </button>
+          <button type="button" class="cb-dg__icon-btn" [attr.aria-label]="t().redo" [disabled]="!canRedo()" (click)="redo()">
+            <cb-icon name="redo" [size]="16" aria-hidden="true" />
+          </button>
+        }
+        <span class="cb-dg__spacer"></span>
+        @if (errors().length) {
+          <button type="button" class="cb-dg__errors" (click)="goToFirstError()">
+            <cb-icon name="circle-alert" [size]="16" aria-hidden="true" />
+            {{ errors().length === 1 ? t().dataGridOneError : fmt(t().dataGridErrors, errors().length) }}
+          </button>
+        }
+        @if (dirtyCount()) {
+          <span class="cb-dg__dirty">{{ fmt(t().dataGridChanged, dirtyCount()) }}</span>
+        }
+      </div>
+    }
+
+    <div class="cb-dg__scroll" [style.max-height]="scrollHeight()">
+      <table
+        class="cb-dg__table"
+        role="grid"
+        [id]="uid"
+        [style.width]="tableWidth()"
+        [attr.aria-label]="ariaLabel() || null"
+        [attr.aria-rowcount]="view().length + 1"
+        [attr.aria-colcount]="columns().length + (rowNumbers() ? 1 : 0)"
+        [attr.aria-multiselectable]="true"
+        [attr.aria-readonly]="!editable() || null"
+        [attr.aria-describedby]="uid + '-help'"
+        (keydown)="onKeydown($event)"
+        (copy)="onCopy($event, false)"
+        (cut)="onCopy($event, true)"
+        (paste)="onPaste($event)"
+      >
+        <colgroup>
+          @if (rowNumbers()) {
+            <col style="width: 3rem" />
+          }
+          @for (col of columns(); track col.field) {
+            <col [style.width]="widthOf(col)" />
+          }
+        </colgroup>
+        <thead>
+          <tr role="row" aria-rowindex="1">
+            @if (rowNumbers()) {
+              <th class="cb-dg__corner" scope="col">
+                <button type="button" class="cb-dg__corner-btn" tabindex="-1" [attr.aria-label]="t().selectAll" (click)="selectAll()"></button>
+              </th>
+            }
+            @for (col of columns(); track col.field; let c = $index) {
+              <th
+                class="cb-dg__head"
+                scope="col"
+                [class.cb-dg__head--active]="range().c1 <= c && c <= range().c2"
+                [class]="'cb-dg__align--' + alignOf(col)"
+                [attr.aria-sort]="sort()?.field === col.field ? (sort()!.order === 1 ? 'ascending' : 'descending') : null"
+              >
+                @if (col.sortable !== false) {
+                  <button type="button" class="cb-dg__sort" (click)="toggleSort(col)">
+                    <span class="cb-dg__head-text">{{ col.header }}@if (col.required) {<span class="cb-dg__req" aria-hidden="true"> *</span>}</span>
+                    <cb-icon
+                      class="cb-dg__sort-icon"
+                      [class.cb-dg__sort-icon--on]="sort()?.field === col.field"
+                      [name]="sort()?.field === col.field && sort()!.order === -1 ? 'arrow-down' : 'arrow-up'"
+                      [size]="14"
+                      aria-hidden="true"
+                    />
+                  </button>
+                } @else {
+                  <span class="cb-dg__head-text">{{ col.header }}@if (col.required) {<span class="cb-dg__req" aria-hidden="true"> *</span>}</span>
+                }
+              </th>
+            }
+          </tr>
+        </thead>
+        <tbody>
+          @for (row of view(); track keyOf(row); let r = $index) {
+            <tr role="row" [attr.aria-rowindex]="r + 2" [class.cb-dg__row--active]="active().r === r">
+              @if (rowNumbers()) {
+                <th
+                  class="cb-dg__num"
+                  scope="row"
+                  [class.cb-dg__num--active]="range().r1 <= r && r <= range().r2"
+                  [class.cb-dg__num--new]="isNew(row)"
+                  (pointerdown)="selectRow(r, $event)"
+                >
+                  {{ r + 1 }}
+                </th>
+              }
+              @for (col of columns(); track col.field; let c = $index) {
+                <td
+                  role="gridcell"
+                  class="cb-dg__cell"
+                  [id]="cellId(r, c)"
+                  [class]="'cb-dg__align--' + alignOf(col)"
+                  [class.cb-dg__cell--active]="active().r === r && active().c === c"
+                  [class.cb-dg__cell--selected]="isSelected(r, c)"
+                  [class.cb-dg__cell--readonly]="!canEdit(col)"
+                  [class.cb-dg__cell--dirty]="isDirty(row, col)"
+                  [class.cb-dg__cell--invalid]="!!errorOf(row, col)"
+                  [class.cb-dg__cell--editing]="editing()?.r === r && editing()?.c === c"
+                  [class.cb-dg__cell--negative]="isNegative(get(row, col.field), col)"
+                  [attr.tabindex]="active().r === r && active().c === c ? 0 : -1"
+                  [attr.aria-selected]="isSelected(r, c)"
+                  [attr.aria-readonly]="!canEdit(col) || null"
+                  [attr.aria-invalid]="errorOf(row, col) ? true : null"
+                  [attr.aria-colindex]="c + (rowNumbers() ? 2 : 1)"
+                  [attr.title]="errorOf(row, col)"
+                  (pointerdown)="onCellPointerDown($event, r, c)"
+                  (pointerenter)="onCellPointerEnter(r, c)"
+                  (dblclick)="startEdit(r, c)"
+                >
+                  @if (editing()?.r === r && editing()?.c === c) {
+                    @switch (editorKind(col)) {
+                      @case ('autocomplete') {
+                        <input
+                          #acInput
+                          class="cb-dg__editor"
+                          type="text"
+                          role="combobox"
+                          autocomplete="off"
+                          aria-autocomplete="list"
+                          aria-expanded="true"
+                          [attr.aria-label]="col.header"
+                          [attr.aria-controls]="uid + '-list'"
+                          [attr.aria-activedescendant]="matches().length ? uid + '-opt-' + editing()!.active : null"
+                          [attr.aria-invalid]="editing()!.error ? true : null"
+                          [attr.aria-describedby]="editing()!.error ? uid + '-editor-error' : null"
+                          [value]="editing()!.text"
+                          (input)="editText($event)"
+                          (keydown)="onEditorKeydown($event)"
+                          (blur)="commit(null)"
+                        />
+                        <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="acInput" [cdkConnectedOverlayOpen]="true" [cdkConnectedOverlayPositions]="listPositions" [cdkConnectedOverlayMinWidth]="acInput.offsetWidth">
+                          <ul class="cb-dg__list" role="listbox" [id]="uid + '-list'" [attr.aria-label]="col.header">
+                            @for (o of matches(); track $index; let i = $index) {
+                              <li
+                                class="cb-dg__option"
+                                role="option"
+                                [id]="uid + '-opt-' + i"
+                                [class.cb-dg__option--active]="i === editing()!.active"
+                                [attr.aria-selected]="i === editing()!.active"
+                                [attr.aria-disabled]="o.disabled || null"
+                                (mousedown)="$event.preventDefault()"
+                                (mouseenter)="setActive(i)"
+                                (click)="pick(o)"
+                              >
+                                <span class="cb-dg__option-label">{{ o.label }}</span>
+                                @if (o.description) {
+                                  <span class="cb-dg__option-desc">{{ o.description }}</span>
+                                }
+                              </li>
+                            } @empty {
+                              <li class="cb-dg__option cb-dg__option--empty" role="option" aria-disabled="true">{{ t().noResults }}</li>
+                            }
+                          </ul>
+                        </ng-template>
+                      }
+                      @case ('select') {
+                        <select class="cb-dg__editor" [attr.aria-label]="col.header" (change)="editText($event)" (keydown)="onEditorKeydown($event)" (blur)="commit(null)">
+                          <option value="" [selected]="editing()!.text === ''"></option>
+                          @for (o of col.options ?? []; track $index) {
+                            <option [value]="o.label" [selected]="o.label === editing()!.text">{{ o.label }}</option>
+                          }
+                        </select>
+                      }
+                      @default {
+                        <input
+                          class="cb-dg__editor"
+                          [type]="editorKind(col) === 'date' ? 'date' : 'text'"
+                          [attr.inputmode]="col.type === 'number' ? 'decimal' : null"
+                          [attr.aria-label]="col.header"
+                          [attr.aria-invalid]="editing()!.error ? true : null"
+                          [attr.aria-describedby]="editing()!.error ? uid + '-editor-error' : null"
+                          [value]="editing()!.text"
+                          (input)="editText($event)"
+                          (keydown)="onEditorKeydown($event)"
+                          (blur)="commit(null)"
+                        />
+                      }
+                    }
+                    @if (editing()!.error) {
+                      <span class="cb-dg__editor-error" [id]="uid + '-editor-error'" role="alert">{{ editing()!.error }}</span>
+                    }
+                  } @else if (col.type === 'checkbox') {
+                    <span class="cb-dg__check" [class.cb-dg__check--on]="!!get(row, col.field)" aria-hidden="true" (click)="toggleCheck(r, c)">
+                      @if (get(row, col.field)) {
+                        <cb-icon name="check" [size]="12" />
+                      }
+                    </span>
+                    <span class="cb-dg__sr">{{ text(row, col) }}</span>
+                  } @else {
+                    <span class="cb-dg__text">{{ text(row, col) }}</span>
+                    @if ((col.type === 'select' || col.type === 'autocomplete') && canEdit(col)) {
+                      <cb-icon class="cb-dg__caret" name="chevron-down" [size]="14" aria-hidden="true" />
+                    }
+                  }
+                  @if (errorOf(row, col); as err) {
+                    @if (!(editing()?.r === r && editing()?.c === c)) {
+                      <span class="cb-dg__sr">. {{ err }}</span>
+                    }
+                  }
+                </td>
+              }
+            </tr>
+          } @empty {
+            <tr>
+              <td class="cb-dg__empty" [attr.colspan]="columns().length + (rowNumbers() ? 1 : 0)">{{ emptyMessage() || t().noData }}</td>
+            </tr>
+          }
+        </tbody>
+        @if (hasFooter() && view().length) {
+          <tfoot>
+            <tr class="cb-dg__foot">
+              @if (rowNumbers()) {
+                <td class="cb-dg__num cb-dg__num--foot"></td>
+              }
+              @for (col of columns(); track col.field; let c = $index) {
+                @if (col.footer || (c === labelColumn() && !hasFooterText())) {
+                  <th scope="row" class="cb-dg__total" [class]="'cb-dg__align--' + alignOf(col)">{{ col.footer || t().tableTotal }}</th>
+                } @else {
+                  <td class="cb-dg__total" [class]="'cb-dg__align--' + alignOf(col)" [class.cb-dg__cell--negative]="isNegative(totals()[col.field], col)">{{ totalText(col) }}</td>
+                }
+              }
+            </tr>
+          </tfoot>
+        }
+      </table>
+    </div>
+    <p class="cb-dg__sr" [id]="uid + '-help'">{{ editable() ? t().dataGridInstructions : t().dataGridReadonlyInstructions }}</p>
+    <div class="cb-dg__sr" role="status">{{ announcement() }}</div>
+  `, isInline: true, styles: [":host{--cb-dg-row: 2.25rem;--cb-dg-accent: var(--cb-color-primary-500);--cb-dg-selected: color-mix(in srgb, var(--cb-color-primary-500) 12%, transparent);--cb-dg-invalid: var(--cb-color-danger-500, #ef4444);display:flex;flex-direction:column;gap:var(--cb-space-2, .5rem);width:100%;min-width:0;color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-dg__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}.cb-dg__btn,.cb-dg__icon-btn,.cb-dg__errors{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;height:2rem;padding:0 .75rem;border:1px solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text);font:inherit;cursor:pointer}.cb-dg__icon-btn{width:2rem;padding:0;border-color:transparent}.cb-dg__btn:hover:not(:disabled),.cb-dg__icon-btn:hover:not(:disabled){background:var(--cb-color-surface-hover)}.cb-dg__btn:disabled,.cb-dg__icon-btn:disabled{opacity:.45;cursor:default}.cb-dg__sep{width:1px;height:1.25rem;margin:0 .25rem;background:var(--cb-color-border)}.cb-dg__spacer{flex:1}.cb-dg__errors{border-color:color-mix(in srgb,var(--cb-dg-invalid) 45%,transparent);background:color-mix(in srgb,var(--cb-dg-invalid) 8%,transparent);color:var(--cb-color-danger-text, #dc2626)}.cb-dg__dirty{color:var(--cb-color-text-muted)}:is(.cb-dg__btn,.cb-dg__icon-btn,.cb-dg__errors,.cb-dg__sort):focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-dg__scroll{position:relative;overflow:auto;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-bg);scroll-padding-top:var(--cb-dg-row);scroll-padding-left:3rem}.cb-dg__table{min-width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0}.cb-dg__table th,.cb-dg__table td{height:var(--cb-dg-row);padding:0 .6rem;border-right:1px solid var(--cb-color-border);border-bottom:1px solid var(--cb-color-border);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-dg__table thead th{position:sticky;top:0;z-index:2;background:var(--cb-color-surface-subtle);font-weight:var(--cb-font-weight-semibold, 600);text-align:start}.cb-dg__head--active{box-shadow:inset 0 -2px 0 var(--cb-dg-accent)}.cb-dg__sort{display:flex;align-items:center;gap:.3rem;width:100%;height:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:inherit;cursor:pointer}.cb-dg__align--end .cb-dg__sort{flex-direction:row-reverse}.cb-dg__align--center .cb-dg__sort{justify-content:center}.cb-dg__head-text{min-width:0;overflow:hidden;text-overflow:ellipsis}.cb-dg__req{color:var(--cb-dg-invalid)}.cb-dg__sort-icon{flex:none;opacity:0;color:var(--cb-color-text-muted)}.cb-dg__sort:hover .cb-dg__sort-icon{opacity:.6}.cb-dg__sort-icon--on,.cb-dg__sort:hover .cb-dg__sort-icon--on{opacity:1;color:var(--cb-dg-accent)}.cb-dg__corner,.cb-dg__num{position:sticky;left:0;z-index:1;padding:0!important;background:var(--cb-color-surface-subtle);color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:400;text-align:center!important}.cb-dg__corner{z-index:3!important}.cb-dg__corner-btn{display:block;width:100%;height:100%;border:0;background:none;cursor:pointer}.cb-dg__num{cursor:pointer;-webkit-user-select:none;user-select:none}.cb-dg__num--active{background:color-mix(in srgb,var(--cb-dg-accent) 14%,var(--cb-color-surface-subtle));color:var(--cb-color-text)}.cb-dg__num--new{box-shadow:inset 3px 0 0 var(--cb-color-success-500, #10b981)}.cb-dg__cell{position:relative;outline:none;background:var(--cb-color-bg);cursor:cell;-webkit-user-select:none;user-select:none}.cb-dg__align--end{text-align:end!important}.cb-dg__align--center{text-align:center!important}.cb-dg__cell--readonly{color:var(--cb-color-text-muted)}.cb-dg__cell--selected{background:var(--cb-dg-selected)}.cb-dg__cell--active{box-shadow:inset 0 0 0 2px var(--cb-dg-accent)}.cb-dg__table:not(:focus-within) .cb-dg__cell--active:not(.cb-dg__cell--editing){box-shadow:inset 0 0 0 1px var(--cb-color-border-strong)}.cb-dg__table:not(:focus-within) .cb-dg__cell--selected:not(.cb-dg__cell--invalid){background:color-mix(in srgb,var(--cb-color-primary-500) 6%,transparent)}.cb-dg__cell--negative{color:var(--cb-color-danger-text, #dc2626)}.cb-dg__table tfoot th,.cb-dg__table tfoot td{position:sticky;bottom:0;z-index:2;border-top:2px solid var(--cb-color-border-strong);border-bottom:0;background:var(--cb-color-surface-subtle);font-weight:var(--cb-font-weight-semibold, 600);font-variant-numeric:tabular-nums}.cb-dg__total{text-align:start}.cb-dg__table tfoot .cb-dg__num--foot{z-index:3}.cb-dg__list{max-height:16rem;margin:0;padding:.25rem;overflow:auto;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised, var(--cb-color-bg));box-shadow:var(--cb-shadow-lg, 0 10px 24px rgb(0 0 0 / .14));list-style:none;color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-dg__option{display:grid;gap:.1rem;padding:.4rem .6rem;border-radius:var(--cb-radius-sm, 4px);cursor:pointer}.cb-dg__option--active{background:color-mix(in srgb,var(--cb-color-primary-500) 12%,transparent)}.cb-dg__option[aria-disabled=true]{color:var(--cb-color-text-muted);cursor:default}.cb-dg__option-desc{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-dg__cell--dirty:before{position:absolute;top:0;left:0;border-top:7px solid var(--cb-dg-accent);border-right:7px solid transparent;content:\"\"}.cb-dg__cell--invalid{background:color-mix(in srgb,var(--cb-dg-invalid) 7%,var(--cb-color-bg))}.cb-dg__cell--invalid:after{position:absolute;top:0;right:0;border-top:8px solid var(--cb-dg-invalid);border-left:8px solid transparent;content:\"\"}.cb-dg__cell--selected.cb-dg__cell--invalid{background:color-mix(in srgb,var(--cb-dg-invalid) 7%,var(--cb-dg-selected))}.cb-dg__cell--editing{padding:0!important;overflow:visible!important;box-shadow:inset 0 0 0 2px var(--cb-dg-accent)}.cb-dg__caret{position:absolute;top:50%;right:.35rem;opacity:0;color:var(--cb-color-text-muted);transform:translateY(-50%)}.cb-dg__cell:hover .cb-dg__caret,.cb-dg__cell--active .cb-dg__caret{opacity:1}.cb-dg__check{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;border:1.5px solid var(--cb-color-border-strong);border-radius:4px;background:var(--cb-color-bg);color:var(--cb-color-primary-contrast, #fff);vertical-align:middle}.cb-dg__check--on{border-color:var(--cb-dg-accent);background:var(--cb-dg-accent)}.cb-dg__editor{box-sizing:border-box;width:100%;height:var(--cb-dg-row);padding:0 .6rem;border:0;outline:none;background:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;text-align:inherit}.cb-dg__editor[aria-invalid=true]{box-shadow:inset 0 0 0 2px var(--cb-dg-invalid)}.cb-dg__editor-error{position:absolute;top:100%;left:0;z-index:4;padding:.25rem .5rem;border-radius:var(--cb-radius-sm, 4px);background:var(--cb-dg-invalid);color:#fff;font-size:var(--cb-text-xs, .75rem);white-space:nowrap}.cb-dg__empty{height:6rem!important;color:var(--cb-color-text-muted);text-align:center}.cb-dg__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(forced-colors:active){.cb-dg__cell--active,.cb-dg__cell--editing{outline:2px solid Highlight;outline-offset:-2px}.cb-dg__cell--selected{background:Highlight;color:HighlightText}.cb-dg__cell--invalid{text-decoration:wavy underline}}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDataGrid, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-data-grid', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon, OverlayModule], host: {
+                        class: 'cb-data-grid',
+                        '[class.cb-data-grid--readonly]': '!editable()',
+                        '(document:pointerup)': 'dragging = false',
+                    }, template: `
+    @if (toolbar()) {
+      <div class="cb-dg__toolbar" role="toolbar" [attr.aria-label]="ariaLabel() || t().dataGridToolbar" [attr.aria-controls]="uid">
+        @if (editable()) {
+          <button type="button" class="cb-dg__btn" (click)="addRow()">
+            <cb-icon name="plus" [size]="16" aria-hidden="true" />
+            {{ t().dataGridAddRow }}
+          </button>
+          <button type="button" class="cb-dg__btn" [disabled]="!view().length" (click)="deleteRows()">
+            <cb-icon name="trash" [size]="16" aria-hidden="true" />
+            {{ selectedRowCount() > 1 ? fmt(t().dataGridDeleteRows, selectedRowCount()) : t().dataGridDeleteRow }}
+          </button>
+          <span class="cb-dg__sep" aria-hidden="true"></span>
+          <button type="button" class="cb-dg__icon-btn" [attr.aria-label]="t().undo" [disabled]="!canUndo()" (click)="undo()">
+            <cb-icon name="undo" [size]="16" aria-hidden="true" />
+          </button>
+          <button type="button" class="cb-dg__icon-btn" [attr.aria-label]="t().redo" [disabled]="!canRedo()" (click)="redo()">
+            <cb-icon name="redo" [size]="16" aria-hidden="true" />
+          </button>
+        }
+        <span class="cb-dg__spacer"></span>
+        @if (errors().length) {
+          <button type="button" class="cb-dg__errors" (click)="goToFirstError()">
+            <cb-icon name="circle-alert" [size]="16" aria-hidden="true" />
+            {{ errors().length === 1 ? t().dataGridOneError : fmt(t().dataGridErrors, errors().length) }}
+          </button>
+        }
+        @if (dirtyCount()) {
+          <span class="cb-dg__dirty">{{ fmt(t().dataGridChanged, dirtyCount()) }}</span>
+        }
+      </div>
+    }
+
+    <div class="cb-dg__scroll" [style.max-height]="scrollHeight()">
+      <table
+        class="cb-dg__table"
+        role="grid"
+        [id]="uid"
+        [style.width]="tableWidth()"
+        [attr.aria-label]="ariaLabel() || null"
+        [attr.aria-rowcount]="view().length + 1"
+        [attr.aria-colcount]="columns().length + (rowNumbers() ? 1 : 0)"
+        [attr.aria-multiselectable]="true"
+        [attr.aria-readonly]="!editable() || null"
+        [attr.aria-describedby]="uid + '-help'"
+        (keydown)="onKeydown($event)"
+        (copy)="onCopy($event, false)"
+        (cut)="onCopy($event, true)"
+        (paste)="onPaste($event)"
+      >
+        <colgroup>
+          @if (rowNumbers()) {
+            <col style="width: 3rem" />
+          }
+          @for (col of columns(); track col.field) {
+            <col [style.width]="widthOf(col)" />
+          }
+        </colgroup>
+        <thead>
+          <tr role="row" aria-rowindex="1">
+            @if (rowNumbers()) {
+              <th class="cb-dg__corner" scope="col">
+                <button type="button" class="cb-dg__corner-btn" tabindex="-1" [attr.aria-label]="t().selectAll" (click)="selectAll()"></button>
+              </th>
+            }
+            @for (col of columns(); track col.field; let c = $index) {
+              <th
+                class="cb-dg__head"
+                scope="col"
+                [class.cb-dg__head--active]="range().c1 <= c && c <= range().c2"
+                [class]="'cb-dg__align--' + alignOf(col)"
+                [attr.aria-sort]="sort()?.field === col.field ? (sort()!.order === 1 ? 'ascending' : 'descending') : null"
+              >
+                @if (col.sortable !== false) {
+                  <button type="button" class="cb-dg__sort" (click)="toggleSort(col)">
+                    <span class="cb-dg__head-text">{{ col.header }}@if (col.required) {<span class="cb-dg__req" aria-hidden="true"> *</span>}</span>
+                    <cb-icon
+                      class="cb-dg__sort-icon"
+                      [class.cb-dg__sort-icon--on]="sort()?.field === col.field"
+                      [name]="sort()?.field === col.field && sort()!.order === -1 ? 'arrow-down' : 'arrow-up'"
+                      [size]="14"
+                      aria-hidden="true"
+                    />
+                  </button>
+                } @else {
+                  <span class="cb-dg__head-text">{{ col.header }}@if (col.required) {<span class="cb-dg__req" aria-hidden="true"> *</span>}</span>
+                }
+              </th>
+            }
+          </tr>
+        </thead>
+        <tbody>
+          @for (row of view(); track keyOf(row); let r = $index) {
+            <tr role="row" [attr.aria-rowindex]="r + 2" [class.cb-dg__row--active]="active().r === r">
+              @if (rowNumbers()) {
+                <th
+                  class="cb-dg__num"
+                  scope="row"
+                  [class.cb-dg__num--active]="range().r1 <= r && r <= range().r2"
+                  [class.cb-dg__num--new]="isNew(row)"
+                  (pointerdown)="selectRow(r, $event)"
+                >
+                  {{ r + 1 }}
+                </th>
+              }
+              @for (col of columns(); track col.field; let c = $index) {
+                <td
+                  role="gridcell"
+                  class="cb-dg__cell"
+                  [id]="cellId(r, c)"
+                  [class]="'cb-dg__align--' + alignOf(col)"
+                  [class.cb-dg__cell--active]="active().r === r && active().c === c"
+                  [class.cb-dg__cell--selected]="isSelected(r, c)"
+                  [class.cb-dg__cell--readonly]="!canEdit(col)"
+                  [class.cb-dg__cell--dirty]="isDirty(row, col)"
+                  [class.cb-dg__cell--invalid]="!!errorOf(row, col)"
+                  [class.cb-dg__cell--editing]="editing()?.r === r && editing()?.c === c"
+                  [class.cb-dg__cell--negative]="isNegative(get(row, col.field), col)"
+                  [attr.tabindex]="active().r === r && active().c === c ? 0 : -1"
+                  [attr.aria-selected]="isSelected(r, c)"
+                  [attr.aria-readonly]="!canEdit(col) || null"
+                  [attr.aria-invalid]="errorOf(row, col) ? true : null"
+                  [attr.aria-colindex]="c + (rowNumbers() ? 2 : 1)"
+                  [attr.title]="errorOf(row, col)"
+                  (pointerdown)="onCellPointerDown($event, r, c)"
+                  (pointerenter)="onCellPointerEnter(r, c)"
+                  (dblclick)="startEdit(r, c)"
+                >
+                  @if (editing()?.r === r && editing()?.c === c) {
+                    @switch (editorKind(col)) {
+                      @case ('autocomplete') {
+                        <input
+                          #acInput
+                          class="cb-dg__editor"
+                          type="text"
+                          role="combobox"
+                          autocomplete="off"
+                          aria-autocomplete="list"
+                          aria-expanded="true"
+                          [attr.aria-label]="col.header"
+                          [attr.aria-controls]="uid + '-list'"
+                          [attr.aria-activedescendant]="matches().length ? uid + '-opt-' + editing()!.active : null"
+                          [attr.aria-invalid]="editing()!.error ? true : null"
+                          [attr.aria-describedby]="editing()!.error ? uid + '-editor-error' : null"
+                          [value]="editing()!.text"
+                          (input)="editText($event)"
+                          (keydown)="onEditorKeydown($event)"
+                          (blur)="commit(null)"
+                        />
+                        <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="acInput" [cdkConnectedOverlayOpen]="true" [cdkConnectedOverlayPositions]="listPositions" [cdkConnectedOverlayMinWidth]="acInput.offsetWidth">
+                          <ul class="cb-dg__list" role="listbox" [id]="uid + '-list'" [attr.aria-label]="col.header">
+                            @for (o of matches(); track $index; let i = $index) {
+                              <li
+                                class="cb-dg__option"
+                                role="option"
+                                [id]="uid + '-opt-' + i"
+                                [class.cb-dg__option--active]="i === editing()!.active"
+                                [attr.aria-selected]="i === editing()!.active"
+                                [attr.aria-disabled]="o.disabled || null"
+                                (mousedown)="$event.preventDefault()"
+                                (mouseenter)="setActive(i)"
+                                (click)="pick(o)"
+                              >
+                                <span class="cb-dg__option-label">{{ o.label }}</span>
+                                @if (o.description) {
+                                  <span class="cb-dg__option-desc">{{ o.description }}</span>
+                                }
+                              </li>
+                            } @empty {
+                              <li class="cb-dg__option cb-dg__option--empty" role="option" aria-disabled="true">{{ t().noResults }}</li>
+                            }
+                          </ul>
+                        </ng-template>
+                      }
+                      @case ('select') {
+                        <select class="cb-dg__editor" [attr.aria-label]="col.header" (change)="editText($event)" (keydown)="onEditorKeydown($event)" (blur)="commit(null)">
+                          <option value="" [selected]="editing()!.text === ''"></option>
+                          @for (o of col.options ?? []; track $index) {
+                            <option [value]="o.label" [selected]="o.label === editing()!.text">{{ o.label }}</option>
+                          }
+                        </select>
+                      }
+                      @default {
+                        <input
+                          class="cb-dg__editor"
+                          [type]="editorKind(col) === 'date' ? 'date' : 'text'"
+                          [attr.inputmode]="col.type === 'number' ? 'decimal' : null"
+                          [attr.aria-label]="col.header"
+                          [attr.aria-invalid]="editing()!.error ? true : null"
+                          [attr.aria-describedby]="editing()!.error ? uid + '-editor-error' : null"
+                          [value]="editing()!.text"
+                          (input)="editText($event)"
+                          (keydown)="onEditorKeydown($event)"
+                          (blur)="commit(null)"
+                        />
+                      }
+                    }
+                    @if (editing()!.error) {
+                      <span class="cb-dg__editor-error" [id]="uid + '-editor-error'" role="alert">{{ editing()!.error }}</span>
+                    }
+                  } @else if (col.type === 'checkbox') {
+                    <span class="cb-dg__check" [class.cb-dg__check--on]="!!get(row, col.field)" aria-hidden="true" (click)="toggleCheck(r, c)">
+                      @if (get(row, col.field)) {
+                        <cb-icon name="check" [size]="12" />
+                      }
+                    </span>
+                    <span class="cb-dg__sr">{{ text(row, col) }}</span>
+                  } @else {
+                    <span class="cb-dg__text">{{ text(row, col) }}</span>
+                    @if ((col.type === 'select' || col.type === 'autocomplete') && canEdit(col)) {
+                      <cb-icon class="cb-dg__caret" name="chevron-down" [size]="14" aria-hidden="true" />
+                    }
+                  }
+                  @if (errorOf(row, col); as err) {
+                    @if (!(editing()?.r === r && editing()?.c === c)) {
+                      <span class="cb-dg__sr">. {{ err }}</span>
+                    }
+                  }
+                </td>
+              }
+            </tr>
+          } @empty {
+            <tr>
+              <td class="cb-dg__empty" [attr.colspan]="columns().length + (rowNumbers() ? 1 : 0)">{{ emptyMessage() || t().noData }}</td>
+            </tr>
+          }
+        </tbody>
+        @if (hasFooter() && view().length) {
+          <tfoot>
+            <tr class="cb-dg__foot">
+              @if (rowNumbers()) {
+                <td class="cb-dg__num cb-dg__num--foot"></td>
+              }
+              @for (col of columns(); track col.field; let c = $index) {
+                @if (col.footer || (c === labelColumn() && !hasFooterText())) {
+                  <th scope="row" class="cb-dg__total" [class]="'cb-dg__align--' + alignOf(col)">{{ col.footer || t().tableTotal }}</th>
+                } @else {
+                  <td class="cb-dg__total" [class]="'cb-dg__align--' + alignOf(col)" [class.cb-dg__cell--negative]="isNegative(totals()[col.field], col)">{{ totalText(col) }}</td>
+                }
+              }
+            </tr>
+          </tfoot>
+        }
+      </table>
+    </div>
+    <p class="cb-dg__sr" [id]="uid + '-help'">{{ editable() ? t().dataGridInstructions : t().dataGridReadonlyInstructions }}</p>
+    <div class="cb-dg__sr" role="status">{{ announcement() }}</div>
+  `, styles: [":host{--cb-dg-row: 2.25rem;--cb-dg-accent: var(--cb-color-primary-500);--cb-dg-selected: color-mix(in srgb, var(--cb-color-primary-500) 12%, transparent);--cb-dg-invalid: var(--cb-color-danger-500, #ef4444);display:flex;flex-direction:column;gap:var(--cb-space-2, .5rem);width:100%;min-width:0;color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-dg__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}.cb-dg__btn,.cb-dg__icon-btn,.cb-dg__errors{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;height:2rem;padding:0 .75rem;border:1px solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text);font:inherit;cursor:pointer}.cb-dg__icon-btn{width:2rem;padding:0;border-color:transparent}.cb-dg__btn:hover:not(:disabled),.cb-dg__icon-btn:hover:not(:disabled){background:var(--cb-color-surface-hover)}.cb-dg__btn:disabled,.cb-dg__icon-btn:disabled{opacity:.45;cursor:default}.cb-dg__sep{width:1px;height:1.25rem;margin:0 .25rem;background:var(--cb-color-border)}.cb-dg__spacer{flex:1}.cb-dg__errors{border-color:color-mix(in srgb,var(--cb-dg-invalid) 45%,transparent);background:color-mix(in srgb,var(--cb-dg-invalid) 8%,transparent);color:var(--cb-color-danger-text, #dc2626)}.cb-dg__dirty{color:var(--cb-color-text-muted)}:is(.cb-dg__btn,.cb-dg__icon-btn,.cb-dg__errors,.cb-dg__sort):focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-dg__scroll{position:relative;overflow:auto;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-bg);scroll-padding-top:var(--cb-dg-row);scroll-padding-left:3rem}.cb-dg__table{min-width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0}.cb-dg__table th,.cb-dg__table td{height:var(--cb-dg-row);padding:0 .6rem;border-right:1px solid var(--cb-color-border);border-bottom:1px solid var(--cb-color-border);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-dg__table thead th{position:sticky;top:0;z-index:2;background:var(--cb-color-surface-subtle);font-weight:var(--cb-font-weight-semibold, 600);text-align:start}.cb-dg__head--active{box-shadow:inset 0 -2px 0 var(--cb-dg-accent)}.cb-dg__sort{display:flex;align-items:center;gap:.3rem;width:100%;height:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:inherit;cursor:pointer}.cb-dg__align--end .cb-dg__sort{flex-direction:row-reverse}.cb-dg__align--center .cb-dg__sort{justify-content:center}.cb-dg__head-text{min-width:0;overflow:hidden;text-overflow:ellipsis}.cb-dg__req{color:var(--cb-dg-invalid)}.cb-dg__sort-icon{flex:none;opacity:0;color:var(--cb-color-text-muted)}.cb-dg__sort:hover .cb-dg__sort-icon{opacity:.6}.cb-dg__sort-icon--on,.cb-dg__sort:hover .cb-dg__sort-icon--on{opacity:1;color:var(--cb-dg-accent)}.cb-dg__corner,.cb-dg__num{position:sticky;left:0;z-index:1;padding:0!important;background:var(--cb-color-surface-subtle);color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:400;text-align:center!important}.cb-dg__corner{z-index:3!important}.cb-dg__corner-btn{display:block;width:100%;height:100%;border:0;background:none;cursor:pointer}.cb-dg__num{cursor:pointer;-webkit-user-select:none;user-select:none}.cb-dg__num--active{background:color-mix(in srgb,var(--cb-dg-accent) 14%,var(--cb-color-surface-subtle));color:var(--cb-color-text)}.cb-dg__num--new{box-shadow:inset 3px 0 0 var(--cb-color-success-500, #10b981)}.cb-dg__cell{position:relative;outline:none;background:var(--cb-color-bg);cursor:cell;-webkit-user-select:none;user-select:none}.cb-dg__align--end{text-align:end!important}.cb-dg__align--center{text-align:center!important}.cb-dg__cell--readonly{color:var(--cb-color-text-muted)}.cb-dg__cell--selected{background:var(--cb-dg-selected)}.cb-dg__cell--active{box-shadow:inset 0 0 0 2px var(--cb-dg-accent)}.cb-dg__table:not(:focus-within) .cb-dg__cell--active:not(.cb-dg__cell--editing){box-shadow:inset 0 0 0 1px var(--cb-color-border-strong)}.cb-dg__table:not(:focus-within) .cb-dg__cell--selected:not(.cb-dg__cell--invalid){background:color-mix(in srgb,var(--cb-color-primary-500) 6%,transparent)}.cb-dg__cell--negative{color:var(--cb-color-danger-text, #dc2626)}.cb-dg__table tfoot th,.cb-dg__table tfoot td{position:sticky;bottom:0;z-index:2;border-top:2px solid var(--cb-color-border-strong);border-bottom:0;background:var(--cb-color-surface-subtle);font-weight:var(--cb-font-weight-semibold, 600);font-variant-numeric:tabular-nums}.cb-dg__total{text-align:start}.cb-dg__table tfoot .cb-dg__num--foot{z-index:3}.cb-dg__list{max-height:16rem;margin:0;padding:.25rem;overflow:auto;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised, var(--cb-color-bg));box-shadow:var(--cb-shadow-lg, 0 10px 24px rgb(0 0 0 / .14));list-style:none;color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-dg__option{display:grid;gap:.1rem;padding:.4rem .6rem;border-radius:var(--cb-radius-sm, 4px);cursor:pointer}.cb-dg__option--active{background:color-mix(in srgb,var(--cb-color-primary-500) 12%,transparent)}.cb-dg__option[aria-disabled=true]{color:var(--cb-color-text-muted);cursor:default}.cb-dg__option-desc{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-dg__cell--dirty:before{position:absolute;top:0;left:0;border-top:7px solid var(--cb-dg-accent);border-right:7px solid transparent;content:\"\"}.cb-dg__cell--invalid{background:color-mix(in srgb,var(--cb-dg-invalid) 7%,var(--cb-color-bg))}.cb-dg__cell--invalid:after{position:absolute;top:0;right:0;border-top:8px solid var(--cb-dg-invalid);border-left:8px solid transparent;content:\"\"}.cb-dg__cell--selected.cb-dg__cell--invalid{background:color-mix(in srgb,var(--cb-dg-invalid) 7%,var(--cb-dg-selected))}.cb-dg__cell--editing{padding:0!important;overflow:visible!important;box-shadow:inset 0 0 0 2px var(--cb-dg-accent)}.cb-dg__caret{position:absolute;top:50%;right:.35rem;opacity:0;color:var(--cb-color-text-muted);transform:translateY(-50%)}.cb-dg__cell:hover .cb-dg__caret,.cb-dg__cell--active .cb-dg__caret{opacity:1}.cb-dg__check{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;border:1.5px solid var(--cb-color-border-strong);border-radius:4px;background:var(--cb-color-bg);color:var(--cb-color-primary-contrast, #fff);vertical-align:middle}.cb-dg__check--on{border-color:var(--cb-dg-accent);background:var(--cb-dg-accent)}.cb-dg__editor{box-sizing:border-box;width:100%;height:var(--cb-dg-row);padding:0 .6rem;border:0;outline:none;background:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;text-align:inherit}.cb-dg__editor[aria-invalid=true]{box-shadow:inset 0 0 0 2px var(--cb-dg-invalid)}.cb-dg__editor-error{position:absolute;top:100%;left:0;z-index:4;padding:.25rem .5rem;border-radius:var(--cb-radius-sm, 4px);background:var(--cb-dg-invalid);color:#fff;font-size:var(--cb-text-xs, .75rem);white-space:nowrap}.cb-dg__empty{height:6rem!important;color:var(--cb-color-text-muted);text-align:center}.cb-dg__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(forced-colors:active){.cb-dg__cell--active,.cb-dg__cell--editing{outline:2px solid Highlight;outline-offset:-2px}.cb-dg__cell--selected{background:Highlight;color:HighlightText}.cb-dg__cell--invalid{text-decoration:wavy underline}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }, { type: i0.Output, args: ["rowsChange"] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], rowNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowNumbers", required: false }] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], newRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "newRow", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], negativeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "negativeStyle", required: false }] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], rowAdd: [{ type: i0.Output, args: ["rowAdd"] }], rowsDelete: [{ type: i0.Output, args: ["rowsDelete"] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/datagrid
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbDataGrid };