@caribeng/ui 22.1.0 → 22.2.0

package/fesm2022/caribeng-ui-table.mjs

@@ -1,15 +1,20 @@
 import * as i0 from '@angular/core';
-import { input, inject, TemplateRef, Directive, contentChildren, model, output, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
+import { input, inject, TemplateRef, Directive, contentChildren, contentChild, viewChild, model, output, signal, computed, linkedSignal, DestroyRef, afterNextRender, afterEveryRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { CbIcon } from '@caribeng/ui/icon';
 import { CbPaginator } from '@caribeng/ui/paginator';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
 
+/** Plantilla de las celdas de una columna: `<ng-template cbTableCell="campo" let-row let-value="value">`. */
 class CbTableCellDirective {
     constructor() {
         this.cbTableCell = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "cbTableCell" }] : /* istanbul ignore next */ []));
         this.template = inject(TemplateRef);
     }
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTableCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: CbTableCellDirective, isStandalone: true, selector: "ng-template[cbTableCell]", inputs: { cbTableCell: { classPropertyName: "cbTableCell", publicName: "cbTableCell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
@@ -20,20 +25,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     standalone: true,
                 }]
         }], propDecorators: { cbTableCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "cbTableCell", required: true }] }] } });
+/** Contenido de la fila expandida: `<ng-template cbTableRowExpansion let-row>`. */
+class CbTableRowExpansion {
+    constructor() {
+        this.template = inject(TemplateRef);
+    }
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTableRowExpansion, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: CbTableRowExpansion, isStandalone: true, selector: "ng-template[cbTableRowExpansion]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTableRowExpansion, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[cbTableRowExpansion]',
+                    standalone: true,
+                }]
+        }] });
+/** Cabecera de grupo: `<ng-template cbTableGroupHeader let-valor let-count="count">`. */
+class CbTableGroupHeader {
+    constructor() {
+        this.template = inject(TemplateRef);
+    }
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTableGroupHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: CbTableGroupHeader, isStandalone: true, selector: "ng-template[cbTableGroupHeader]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTableGroupHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[cbTableGroupHeader]',
+                    standalone: true,
+                }]
+        }] });
+let nextId = 0;
+const MIN_COLUMN_WIDTH = 48;
 /**
  * Table de CaribeNG: tabla de datos con columnas declarativas, ordenación,
- * paginación y selección (simple/múltiple).
+ * filtros (global y por columna), paginación, selección (simple/múltiple),
+ * columnas redimensionables y fijas, cabecera fija, filas expandibles y
+ * agrupadas, exportación a CSV y carga desde el servidor (`lazy`).
  *
  * @example
  * ```html
- * <cb-table [value]="productos" [columns]="cols" [paginator]="true" [rows]="5"
- *           striped selectionMode="multiple" dataKey="id" [(selection)]="sel" />
+ * <input type="search" [(ngModel)]="busqueda" aria-label="Buscar" />
+ * <cb-table [value]="productos" [columns]="cols" [globalFilter]="busqueda" [paginator]="true" [rows]="5"
+ *           striped selectionMode="multiple" dataKey="id" [(selection)]="sel" resizableColumns>
+ *   <ng-template cbTableRowExpansion let-producto>{{ producto.descripcion }}</ng-template>
+ * </cb-table>
  * ```
  */
 class CbTable {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        /** Rellena `{0}`, `{1}`… de un texto traducido. */
+        this.fmt = cbFormat;
+        this.minColumnWidth = MIN_COLUMN_WIDTH;
+        this.document = inject(DOCUMENT);
         this.cellTemplates = contentChildren(CbTableCellDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "cellTemplates" }] : /* istanbul ignore next */ []));
+        /** Plantilla de fila expandida; si existe, se añade la columna de expandir. */
+        this.expansion = contentChild(CbTableRowExpansion, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expansion" }] : /* istanbul ignore next */ []));
+        /** Plantilla de cabecera de grupo (con `groupRowsBy`). */
+        this.groupHeader = contentChild(CbTableGroupHeader, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupHeader" }] : /* istanbul ignore next */ []));
+        this.tableRef = viewChild('table', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tableRef" }] : /* istanbul ignore next */ []));
         this.value = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this.columns = input([], /* @ts-ignore */
@@ -47,50 +109,194 @@ class CbTable {
         this.rowHover = input(true, { ...(ngDevMode ? { debugName: "rowHover" } : /* istanbul ignore next */ {}), transform: toBoolean });
         this.size = input('md', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-        this.emptyMessage = input('Sin datos', /* @ts-ignore */
+        this.emptyMessage = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+        /** Nombre accesible de la tabla. */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         /** `single`, `multiple` o `null` (sin selección). */
         this.selectionMode = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
-        /** Propiedad identificadora para comparar selección (si no, por referencia). */
+        /** Propiedad identificadora para comparar selección y filas expandidas (si no, por referencia). */
         this.dataKey = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dataKey" }] : /* istanbul ignore next */ []));
+        /** Texto del filtro global (two-way). Busca en `globalFilterFields`. */
+        this.globalFilter = model('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "globalFilter" }] : /* istanbul ignore next */ []));
+        /** Campos en los que busca el filtro global. Por defecto, los de todas las columnas. */
+        this.globalFilterFields = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "globalFilterFields" }] : /* istanbul ignore next */ []));
+        /** Permite cambiar el ancho de las columnas arrastrando o con el teclado. */
+        this.resizableColumns = input(false, { ...(ngDevMode ? { debugName: "resizableColumns" } : /* istanbul ignore next */ {}), transform: toBoolean });
+        /** Claves (`dataKey`) o filas expandidas (two-way). */
+        this.expandedRowKeys = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandedRowKeys" }] : /* istanbul ignore next */ []));
+        /** Alto máximo (CSS) de la tabla: hace scroll con la cabecera fija. */
+        this.scrollHeight = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollHeight" }] : /* istanbul ignore next */ []));
+        /** Agrupa las filas por este campo, con una fila de cabecera por grupo. */
+        this.groupRowsBy = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupRowsBy" }] : /* istanbul ignore next */ []));
+        /**
+         * Datos desde el servidor: la tabla no filtra, ordena ni pagina; emite `lazyLoad`
+         * y muestra `value` tal cual (la página actual).
+         */
+        this.lazy = input(false, { ...(ngDevMode ? { debugName: "lazy" } : /* istanbul ignore next */ {}), transform: toBoolean });
+        /** Total de filas en el servidor (modo `lazy`), para el paginador. */
+        this.totalRecords = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "totalRecords" }] : /* istanbul ignore next */ []));
+        /** Muestra la capa de carga y marca la tabla con `aria-busy`. */
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: toBoolean });
         this.selection = model(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
         this.sortChange = output();
-        this.first = signal(0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "first" }] : /* istanbul ignore next */ []));
+        this.filterChange = output();
+        this.columnResize = output();
+        this.rowExpand = output();
+        this.rowCollapse = output();
+        /** En modo `lazy`: página, orden y filtros que hay que pedir al servidor. */
+        this.lazyLoad = output();
         this.sortField = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sortField" }] : /* istanbul ignore next */ []));
         this.sortOrder = signal(1, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sortOrder" }] : /* istanbul ignore next */ []));
+        this.columnFilters = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columnFilters" }] : /* istanbul ignore next */ []));
+        this.widths = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "widths" }] : /* istanbul ignore next */ []));
+        /** Columnas en orden de pantalla: las fijas primero. */
+        this.displayColumns = computed(() => [
+            ...this.columns().filter((c) => c.frozen),
+            ...this.columns().filter((c) => !c.frozen),
+        ], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayColumns" }] : /* istanbul ignore next */ []));
+        this.hasFrozen = computed(() => this.columns().some((c) => c.frozen), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasFrozen" }] : /* istanbul ignore next */ []));
+        this.lastFrozen = computed(() => this.displayColumns().filter((c) => c.frozen).at(-1)?.field ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lastFrozen" }] : /* istanbul ignore next */ []));
+        /** Desplazamiento `left` (px) de cada celda fija, medido tras el render. */
+        this.frozenOffsets = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "frozenOffsets" }] : /* istanbul ignore next */ []));
+        this.hasColumnFilters = computed(() => this.columns().some((c) => c.filter), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasColumnFilters" }] : /* istanbul ignore next */ []));
+        this.isFiltering = computed(() => !!this.globalFilter().trim() || Object.values(this.columnFilters()).some((v) => !!v?.trim()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isFiltering" }] : /* istanbul ignore next */ []));
+        this.filtered = computed(() => {
+            if (this.lazy())
+                return this.value();
+            const global = normalize(this.globalFilter());
+            const globalFields = this.globalFilterFields() ?? this.columns().map((c) => c.field);
+            const columnFilters = Object.entries(this.columnFilters())
+                .map(([field, text]) => ({ field, text: normalize(text), mode: this.matchMode(field) }))
+                .filter((f) => f.text);
+            return this.value().filter((row) => (!global || globalFields.some((field) => matches(fieldValue(row, field), global, 'contains'))) &&
+                columnFilters.every((f) => matches(fieldValue(row, f.field), f.text, f.mode)));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []));
         this.sorted = computed(() => {
+            if (this.lazy())
+                return this.value();
             const field = this.sortField();
-            const data = [...this.value()];
-            if (!field)
+            const group = this.groupRowsBy();
+            const data = [...this.filtered()];
+            if (!field && !group)
                 return data;
             const order = this.sortOrder();
-            return data.sort((a, b) => this.compare(a, b, field) * order);
+            // Con grupos, primero se ordena por el campo del grupo para que sus filas queden juntas.
+            return data.sort((a, b) => (group ? this.compare(a, b, group) : 0) || (field ? this.compare(a, b, field) * order : 0));
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sorted" }] : /* istanbul ignore next */ []));
+        /** Filas totales: las del servidor en modo `lazy`, las filtradas si no. */
+        this.total = computed(() => (this.lazy() ? (this.totalRecords() ?? this.value().length) : this.sorted().length), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+        /** Primera fila de la página; vuelve a 0 al filtrar u ordenar (y, sin `lazy`, al cambiar los datos). */
+        this.first = linkedSignal({ ...(ngDevMode ? { debugName: "first" } : /* istanbul ignore next */ {}), source: () => [
+                this.sortField(),
+                this.sortOrder(),
+                this.globalFilter(),
+                this.columnFilters(),
+                this.lazy() ? null : this.value(),
+            ],
+            computation: () => 0 });
+        /** Filas por grupo en todos los datos (no solo en la página). */
+        this.groupCounts = computed(() => {
+            const field = this.groupRowsBy();
+            const counts = new Map();
+            if (!field)
+                return counts;
+            for (const row of this.sorted()) {
+                const key = fieldValue(row, field);
+                counts.set(key, (counts.get(key) ?? 0) + 1);
+            }
+            return counts;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupCounts" }] : /* istanbul ignore next */ []));
         this.pageRows = computed(() => {
             const data = this.sorted();
-            if (!this.paginator())
+            if (!this.paginator() || this.lazy())
                 return data;
             const start = Math.min(this.first(), Math.max(0, data.length - 1));
             return data.slice(start, start + this.rows());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pageRows" }] : /* istanbul ignore next */ []));
-        this.colspan = computed(() => this.columns().length + (this.selectionMode() ? 1 : 0), /* @ts-ignore */
+        this.colspan = computed(() => this.displayColumns().length + (this.selectionMode() ? 1 : 0) + (this.expansion() ? 1 : 0), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "colspan" }] : /* istanbul ignore next */ []));
-        this.allSelected = computed(() => {
-            const data = this.sorted();
-            if (!data.length)
-                return false;
+        this.selectedCount = computed(() => {
             const sel = Array.isArray(this.selection()) ? this.selection() : [];
-            return data.every((row) => sel.some((s) => this.same(s, row)));
+            return this.sorted().filter((row) => sel.some((s) => this.same(s, row))).length;
         }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedCount" }] : /* istanbul ignore next */ []));
+        this.allSelected = computed(() => this.sorted().length > 0 && this.selectedCount() === this.sorted().length, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
+        this.someSelected = computed(() => this.selectedCount() > 0 && !this.allSelected(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "someSelected" }] : /* istanbul ignore next */ []));
+        this.uid = `cb-table-${++nextId}`;
+        this.stopResize = null;
+        inject(DestroyRef).onDestroy(() => this.stopResize?.());
+        // En modo lazy, la primera página se pide al montar la tabla.
+        afterNextRender(() => {
+            if (this.lazy())
+                this.emitLazy();
+        });
+        // Columnas fijas: se miden los encabezados para saber dónde anclar cada una.
+        afterEveryRender(() => this.measureFrozen());
+    }
+    // --- Filtros ---------------------------------------------------------------
+    /** Aplica el filtro global (equivale a `[globalFilter]`). */
+    filterGlobal(text) {
+        this.globalFilter.set(text);
+        this.emitFilters();
+    }
+    /** Aplica el filtro de una columna. */
+    filterColumn(field, text) {
+        this.columnFilters.update((f) => ({ ...f, [field]: text }));
+        this.emitFilters();
+    }
+    /** Quita todos los filtros. */
+    clearFilters() {
+        this.globalFilter.set('');
+        this.columnFilters.set({});
+        this.emitFilters();
+    }
+    emitFilters() {
+        this.filterChange.emit({ global: this.globalFilter(), columns: this.columnFilters() });
+        this.emitLazy(0);
+    }
+    /** Pide al servidor la página actual (solo en modo `lazy`). */
+    emitLazy(first = this.first()) {
+        if (!this.lazy())
+            return;
+        this.lazyLoad.emit({
+            first,
+            rows: this.rows(),
+            sortField: this.sortField(),
+            sortOrder: this.sortOrder(),
+            globalFilter: this.globalFilter(),
+            filters: this.columnFilters(),
+        });
+    }
+    matchMode(field) {
+        return this.columns().find((c) => c.field === field)?.filterMatchMode ?? 'contains';
     }
     // --- Ordenación ------------------------------------------------------------
     onSort(col) {
@@ -103,8 +309,8 @@ class CbTable {
             this.sortField.set(col.field);
             this.sortOrder.set(1);
         }
-        this.first.set(0);
         this.sortChange.emit({ field: this.sortField(), order: this.sortOrder() });
+        this.emitLazy(0);
     }
     sortIcon(col) {
         if (this.sortField() !== col.field)
@@ -138,16 +344,138 @@ class CbTable {
         const sel = this.selection();
         return Array.isArray(sel) ? sel.some((s) => this.same(s, row)) : this.same(sel, row);
     }
+    // --- Filas expandibles -------------------------------------------------------
+    isExpanded(row) {
+        const key = this.keyOf(row);
+        return this.expandedRowKeys().some((k) => k === key);
+    }
+    /** Expande o contrae una fila. */
+    toggleExpansion(row) {
+        const key = this.keyOf(row);
+        if (this.isExpanded(row)) {
+            this.expandedRowKeys.update((keys) => keys.filter((k) => k !== key));
+            this.rowCollapse.emit(row);
+        }
+        else {
+            this.expandedRowKeys.update((keys) => [...keys, key]);
+            this.rowExpand.emit(row);
+        }
+    }
+    expansionId(index) {
+        return `${this.uid}-expansion-${index}`;
+    }
+    // --- Columnas redimensionables ---------------------------------------------------
+    columnWidth(col) {
+        const px = this.widths()[col.field];
+        return px != null ? `${px}px` : col.width || null;
+    }
+    startResize(event, col) {
+        event.preventDefault();
+        event.stopPropagation();
+        const th = event.target.closest('th');
+        const startX = event.clientX;
+        const startWidth = this.currentWidth(th, col);
+        const move = (e) => this.setWidth(col.field, startWidth + e.clientX - startX);
+        const up = () => {
+            this.stopResize?.();
+            this.columnResize.emit({ field: col.field, width: this.widths()[col.field] ?? startWidth });
+        };
+        this.stopResize?.();
+        this.document.addEventListener('pointermove', move);
+        this.document.addEventListener('pointerup', up);
+        this.stopResize = () => {
+            this.document.removeEventListener('pointermove', move);
+            this.document.removeEventListener('pointerup', up);
+            this.stopResize = null;
+        };
+    }
+    /** Flecha izquierda / derecha cambian el ancho (10 px; 50 px con Mayús). */
+    onResizerKeydown(event, col) {
+        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')
+            return;
+        event.preventDefault();
+        const step = (event.shiftKey ? 50 : 10) * (event.key === 'ArrowLeft' ? -1 : 1);
+        const th = event.target.closest('th');
+        this.setWidth(col.field, this.currentWidth(th, col) + step);
+        this.columnResize.emit({ field: col.field, width: this.widths()[col.field] ?? MIN_COLUMN_WIDTH });
+    }
+    currentWidth(th, col) {
+        return this.widths()[col.field] ?? (th?.getBoundingClientRect().width || parseFloat(col.width ?? '') || 120);
+    }
+    setWidth(field, width) {
+        this.widths.update((w) => ({ ...w, [field]: Math.max(MIN_COLUMN_WIDTH, Math.round(width)) }));
+    }
     // --- Paginación ------------------------------------------------------------
     onPageChange(state) {
         this.first.set(state.first);
         this.rows.set(state.rows);
+        this.emitLazy(state.first);
+    }
+    // --- Grupos --------------------------------------------------------------------
+    groupOf(row) {
+        const field = this.groupRowsBy();
+        return field ? fieldValue(row, field) : null;
+    }
+    groupCount(row) {
+        return this.groupCounts().get(this.groupOf(row)) ?? 0;
+    }
+    /** La fila abre grupo si es la primera de la página o cambia el valor del grupo. */
+    isGroupStart(index) {
+        const rows = this.pageRows();
+        return index === 0 || this.groupOf(rows[index - 1]) !== this.groupOf(rows[index]);
+    }
+    // --- Columnas fijas ----------------------------------------------------------------
+    frozenLeft(key) {
+        return this.hasFrozen() ? (this.frozenOffsets()[key] ?? 0) : null;
+    }
+    /** Suma los anchos de las celdas fijas anteriores (expandir, selección y columnas `frozen`). */
+    measureFrozen() {
+        const table = this.tableRef()?.nativeElement;
+        if (!table || !this.hasFrozen())
+            return;
+        const frozen = new Set(['__exp', '__sel', ...this.columns().filter((c) => c.frozen).map((c) => c.field)]);
+        const offsets = {};
+        let left = 0;
+        for (const th of Array.from(table.querySelectorAll('thead tr:first-child > th[data-key]'))) {
+            const key = th.dataset['key'];
+            if (!frozen.has(key))
+                break;
+            offsets[key] = Math.round(left);
+            left += th.getBoundingClientRect().width;
+        }
+        const current = this.frozenOffsets();
+        const changed = Object.keys(offsets).some((k) => current[k] !== offsets[k]) || Object.keys(current).length !== Object.keys(offsets).length;
+        if (changed)
+            this.frozenOffsets.set(offsets);
+    }
+    // --- Exportación ---------------------------------------------------------------------
+    /**
+     * Datos en CSV: columnas visibles (salvo `exportable: false`) y todas las filas
+     * filtradas y ordenadas (no solo la página), o las seleccionadas con `selectionOnly`.
+     */
+    toCSV(options = {}) {
+        const sep = options.separator ?? ',';
+        const cols = this.displayColumns().filter((c) => c.exportable !== false);
+        const rows = options.selectionOnly ? this.sorted().filter((row) => this.isSelected(row)) : this.sorted();
+        const cell = (v) => {
+            const text = v == null ? '' : String(v);
+            return /["\n\r]/.test(text) || text.includes(sep) ? `"${text.replace(/"/g, '""')}"` : text;
+        };
+        return [cols.map((c) => cell(c.header)).join(sep), ...rows.map((row) => cols.map((c) => cell(fieldValue(row, c.field))).join(sep))].join('\r\n');
+    }
+    /** Descarga el CSV (`nombre.csv`), con BOM para que Excel respete tildes y eñes. */
+    exportCSV(filename = 'datos', options = {}) {
+        const blob = new Blob(['\uFEFF' + this.toCSV(options)], { type: 'text/csv;charset=utf-8' });
+        const url = URL.createObjectURL(blob);
+        const link = this.document.createElement('a');
+        link.href = url;
+        link.download = filename.endsWith('.csv') ? filename : `${filename}.csv`;
+        link.click();
+        setTimeout(() => URL.revokeObjectURL(url));
     }
     // --- Helpers ---------------------------------------------------------------
     cellValue(row, col) {
-        return row != null && typeof row === 'object'
-            ? row[col.field]
-            : row;
+        return row != null && typeof row === 'object' ? row[col.field] : row;
     }
     cellTemplate(field) {
         return this.cellTemplates().find((cell) => cell.cbTableCell() === field);
@@ -162,6 +490,11 @@ class CbTable {
         }
         return index;
     }
+    /** Clave de una fila: su `dataKey` o la propia fila. */
+    keyOf(row) {
+        const key = this.dataKey();
+        return key && row != null && typeof row === 'object' ? row[key] : row;
+    }
     same(a, b) {
         if (a == null || b == null)
             return a === b;
@@ -183,193 +516,486 @@ class CbTable {
         return String(av).localeCompare(String(bv), undefined, { numeric: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTable, isStandalone: true, selector: "cb-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rows: "rowsChange", selection: "selectionChange", sortChange: "sortChange" }, host: { classAttribute: "cb-table-host" }, queries: [{ propertyName: "cellTemplates", predicate: CbTableCellDirective, isSignal: true }], ngImport: i0, template: `
-    <div class="cb-table__wrap">
-      <table class="cb-table" [class]="'cb-table--' + size()" [class.cb-table--striped]="striped()" [class.cb-table--hover]="rowHover()">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTable, isStandalone: true, selector: "cb-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, globalFilter: { classPropertyName: "globalFilter", publicName: "globalFilter", isSignal: true, isRequired: false, transformFunction: null }, globalFilterFields: { classPropertyName: "globalFilterFields", publicName: "globalFilterFields", isSignal: true, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: true, isRequired: false, transformFunction: null }, expandedRowKeys: { classPropertyName: "expandedRowKeys", publicName: "expandedRowKeys", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, groupRowsBy: { classPropertyName: "groupRowsBy", publicName: "groupRowsBy", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rows: "rowsChange", globalFilter: "globalFilterChange", expandedRowKeys: "expandedRowKeysChange", selection: "selectionChange", sortChange: "sortChange", filterChange: "filterChange", columnResize: "columnResize", rowExpand: "rowExpand", rowCollapse: "rowCollapse", lazyLoad: "lazyLoad" }, host: { classAttribute: "cb-table-host" }, queries: [{ propertyName: "cellTemplates", predicate: CbTableCellDirective, isSignal: true }, { propertyName: "expansion", first: true, predicate: CbTableRowExpansion, descendants: true, isSignal: true }, { propertyName: "groupHeader", first: true, predicate: CbTableGroupHeader, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tableRef", first: true, predicate: ["table"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-content select="[cbTableHeader]" />
+    <div class="cb-table__wrap" [class.cb-table__wrap--scroll]="!!scrollHeight()" [style.max-height]="scrollHeight()">
+      <table
+        #table
+        class="cb-table"
+        [class]="'cb-table--' + size()"
+        [class.cb-table--striped]="striped()"
+        [class.cb-table--hover]="rowHover()"
+        [class.cb-table--resizable]="resizableColumns()"
+        [class.cb-table--scroll]="!!scrollHeight()"
+        [attr.aria-label]="ariaLabel() || null"
+        [attr.aria-busy]="loading() || null"
+      >
         <thead>
           <tr>
+            @if (expansion()) {
+              <th class="cb-table__sel" scope="col" data-key="__exp" [class.cb-is-frozen]="hasFrozen()" [style.left.px]="frozenLeft('__exp')">
+                <span class="cb-table__sr">{{ t().details }}</span>
+              </th>
+            }
             @if (selectionMode() === 'multiple') {
-              <th class="cb-table__sel">
+              <th class="cb-table__sel" scope="col" data-key="__sel" [class.cb-is-frozen]="hasFrozen()" [style.left.px]="frozenLeft('__sel')">
                 <span
                   class="cb-table__check"
                   [class.cb-is-checked]="allSelected()"
+                  [class.cb-is-mixed]="someSelected()"
                   role="checkbox"
-                  [attr.aria-checked]="allSelected()"
+                  [attr.aria-checked]="allSelected() ? 'true' : someSelected() ? 'mixed' : 'false'"
+                  [attr.aria-label]="t().selectAllRows"
                   tabindex="0"
                   (click)="toggleAll()"
-                  (keydown.enter)="toggleAll()"
                   (keydown.space)="toggleAll(); $event.preventDefault()"
                 >
-                  @if (allSelected()) { <cb-icon name="check" [size]="13" aria-hidden="true" /> }
+                  @if (allSelected()) {
+                    <cb-icon name="check" [size]="13" aria-hidden="true" />
+                  } @else if (someSelected()) {
+                    <cb-icon name="minus" [size]="13" aria-hidden="true" />
+                  }
                 </span>
               </th>
             } @else if (selectionMode() === 'single') {
-              <th class="cb-table__sel"></th>
+              <th class="cb-table__sel" scope="col" data-key="__sel" [class.cb-is-frozen]="hasFrozen()" [style.left.px]="frozenLeft('__sel')">
+                <span class="cb-table__sr">{{ t().select }}</span>
+              </th>
             }
-            @for (col of columns(); track col.field) {
+            @for (col of displayColumns(); track col.field) {
               <th
                 class="cb-table__th"
+                scope="col"
+                [attr.data-key]="col.field"
+                [class.cb-is-frozen]="!!col.frozen"
+                [class.cb-is-frozen-last]="col.field === lastFrozen()"
+                [style.left.px]="col.frozen ? frozenLeft(col.field) : null"
                 [class.cb-is-sortable]="col.sortable"
-                [style.width]="col.width || null"
+                [style.width]="columnWidth(col)"
                 [style.text-align]="col.align || null"
                 [attr.aria-sort]="ariaSort(col)"
-                (click)="onSort(col)"
               >
-                <span class="cb-table__th-inner">
-                  {{ col.header }}
-                  @if (col.sortable) {
+                @if (col.sortable) {
+                  <button
+                    type="button"
+                    class="cb-table__th-inner cb-table__sort-btn"
+                    [attr.aria-label]="fmt(t().sortBy, col.header)"
+                    (click)="onSort(col)"
+                  >
+                    {{ col.header }}
                     <cb-icon class="cb-table__sort" [name]="sortIcon(col)" [size]="15" aria-hidden="true" />
-                  }
-                </span>
+                  </button>
+                } @else {
+                  <span class="cb-table__th-inner">{{ col.header }}</span>
+                }
+                @if (resizableColumns()) {
+                  <span
+                    class="cb-table__resizer"
+                    role="separator"
+                    aria-orientation="vertical"
+                    tabindex="0"
+                    [attr.aria-label]="fmt(t().resizeColumn, col.header)"
+                    [attr.aria-valuenow]="widths()[col.field] ?? null"
+                    [attr.aria-valuemin]="minColumnWidth"
+                    (pointerdown)="startResize($event, col)"
+                    (keydown)="onResizerKeydown($event, col)"
+                  ></span>
+                }
               </th>
             }
           </tr>
+          @if (hasColumnFilters()) {
+            <tr class="cb-table__filter-row">
+              @if (expansion()) {
+                <td class="cb-table__sel" [class.cb-is-frozen]="hasFrozen()" [style.left.px]="frozenLeft('__exp')"></td>
+              }
+              @if (selectionMode()) {
+                <td class="cb-table__sel" [class.cb-is-frozen]="hasFrozen()" [style.left.px]="frozenLeft('__sel')"></td>
+              }
+              @for (col of displayColumns(); track col.field) {
+                <td
+                  class="cb-table__filter-cell"
+                  [class.cb-is-frozen]="!!col.frozen"
+                  [class.cb-is-frozen-last]="col.field === lastFrozen()"
+                  [style.left.px]="col.frozen ? frozenLeft(col.field) : null"
+                >
+                  @if (col.filter) {
+                    <input
+                      type="search"
+                      class="cb-table__filter"
+                      [value]="columnFilters()[col.field] ?? ''"
+                      [placeholder]="col.filterPlaceholder ?? t().search"
+                      [attr.aria-label]="fmt(t().filterBy, col.header)"
+                      (input)="filterColumn(col.field, $any($event.target).value)"
+                    />
+                  }
+                </td>
+              }
+            </tr>
+          }
         </thead>
         <tbody>
-          @for (row of pageRows(); track rowKey(row, $index)) {
+          @for (row of pageRows(); track rowKey(row, $index); let i = $index) {
+            @if (groupRowsBy() && isGroupStart(i)) {
+              <tr class="cb-table__group">
+                <th scope="rowgroup" [attr.colspan]="colspan()">
+                  @if (groupHeader(); as gh) {
+                    <ng-container
+                      [ngTemplateOutlet]="gh.template"
+                      [ngTemplateOutletContext]="{ $implicit: groupOf(row), count: groupCount(row) }"
+                    />
+                  } @else {
+                    {{ groupOf(row) }} <span class="cb-table__group-count">({{ groupCount(row) }})</span>
+                  }
+                </th>
+              </tr>
+            }
             <tr
               class="cb-table__row"
               [class.cb-is-selected]="isSelected(row)"
               [class.cb-is-selectable]="!!selectionMode()"
               (click)="onRowClick(row)"
             >
+              @if (expansion()) {
+                <td class="cb-table__sel" [class.cb-is-frozen]="hasFrozen()" [style.left.px]="frozenLeft('__exp')">
+                  <button
+                    type="button"
+                    class="cb-table__expander"
+                    [attr.aria-expanded]="isExpanded(row)"
+                    [attr.aria-controls]="isExpanded(row) ? expansionId(first() + i) : null"
+                    [attr.aria-label]="fmt(t().expandRow, first() + i + 1)"
+                    (click)="toggleExpansion(row); $event.stopPropagation()"
+                  >
+                    <cb-icon [name]="isExpanded(row) ? 'chevron-down' : 'chevron-right'" [size]="15" aria-hidden="true" />
+                  </button>
+                </td>
+              }
               @if (selectionMode()) {
-                <td class="cb-table__sel">
-                  <span class="cb-table__check" [class.cb-is-checked]="isSelected(row)" aria-hidden="true">
-                    @if (isSelected(row)) { <cb-icon name="check" [size]="13" /> }
+                <td class="cb-table__sel" [class.cb-is-frozen]="hasFrozen()" [style.left.px]="frozenLeft('__sel')">
+                  <span
+                    class="cb-table__check"
+                    [class.cb-table__check--radio]="selectionMode() === 'single'"
+                    [class.cb-is-checked]="isSelected(row)"
+                    [attr.role]="selectionMode() === 'single' ? 'radio' : 'checkbox'"
+                    [attr.aria-checked]="isSelected(row)"
+                    [attr.aria-label]="fmt(t().selectRow, first() + i + 1)"
+                    tabindex="0"
+                    (keydown.space)="onRowClick(row); $event.preventDefault()"
+                  >
+                    @if (isSelected(row)) {
+                      <cb-icon name="check" [size]="13" aria-hidden="true" />
+                    }
                   </span>
                 </td>
               }
-              @for (col of columns(); track col.field) {
-                <td class="cb-table__td" [style.text-align]="col.align || null">
+              @for (col of displayColumns(); track col.field) {
+                <td
+                  class="cb-table__td"
+                  [class.cb-is-frozen]="!!col.frozen"
+                  [class.cb-is-frozen-last]="col.field === lastFrozen()"
+                  [style.left.px]="col.frozen ? frozenLeft(col.field) : null"
+                  [style.text-align]="col.align || null"
+                >
                   @if (cellTemplate(col.field); as cell) {
-                    <ng-container
-                      [ngTemplateOutlet]="cell.template"
-                      [ngTemplateOutletContext]="cellContext(row, col)"
-                    />
+                    <ng-container [ngTemplateOutlet]="cell.template" [ngTemplateOutletContext]="cellContext(row, col)" />
                   } @else {
                     {{ cellValue(row, col) }}
                   }
                 </td>
               }
             </tr>
+            @if (expansion(); as exp) {
+              @if (isExpanded(row)) {
+                <tr class="cb-table__expansion" [id]="expansionId(first() + i)">
+                  <td [attr.colspan]="colspan()">
+                    <ng-container
+                      [ngTemplateOutlet]="exp.template"
+                      [ngTemplateOutletContext]="{ $implicit: row, index: first() + i }"
+                    />
+                  </td>
+                </tr>
+              }
+            }
           } @empty {
             <tr>
-              <td class="cb-table__empty" [attr.colspan]="colspan()">{{ emptyMessage() }}</td>
+              <td class="cb-table__empty" [attr.colspan]="colspan()">{{ (emptyMessage() ?? t().noData) }}</td>
             </tr>
           }
         </tbody>
       </table>
+      @if (loading()) {
+        <div class="cb-table__loading" role="status">
+          <cb-icon name="loader" [size]="22" [spin]="true" aria-hidden="true" />
+          <span class="cb-table__sr">{{ t().loading }}</span>
+        </div>
+      }
     </div>
+    @if (isFiltering()) {
+      <span class="cb-table__sr" aria-live="polite">{{ fmt(t().resultsCount, total()) }}</span>
+    }
 
     @if (paginator()) {
       <cb-paginator
         class="cb-table__paginator"
-        [totalRecords]="sorted().length"
+        [totalRecords]="total()"
         [(first)]="first"
         [(rows)]="rows"
         [rowsPerPageOptions]="rowsPerPageOptions()"
         (pageChange)="onPageChange($event)"
       />
     }
-  `, isInline: true, styles: [":host{display:block;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-table__wrap{overflow-x:auto;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md)}.cb-table{width:100%;border-collapse:collapse;font-size:var(--cb-text-sm)}.cb-table__th,.cb-table__td,.cb-table__sel{padding:var(--cb-space-3) var(--cb-space-4);text-align:left;border-bottom:var(--cb-border-width) solid var(--cb-color-border);vertical-align:middle}.cb-table--sm .cb-table__th,.cb-table--sm .cb-table__td,.cb-table--sm .cb-table__sel{padding:var(--cb-space-2) var(--cb-space-3)}.cb-table--lg .cb-table__th,.cb-table--lg .cb-table__td,.cb-table--lg .cb-table__sel{padding:var(--cb-space-4) var(--cb-space-5)}.cb-table thead .cb-table__th,.cb-table thead .cb-table__sel{background-color:var(--cb-color-surface-50);color:var(--cb-color-text);font-weight:var(--cb-font-weight-semibold);white-space:nowrap;border-bottom-width:2px}.cb-table__th-inner{display:inline-flex;align-items:center;gap:var(--cb-space-1)}.cb-table__th.cb-is-sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.cb-table__th.cb-is-sortable:hover{background-color:var(--cb-color-surface-100)}.cb-table__sort{color:var(--cb-color-text-muted)}.cb-table tbody tr:last-child .cb-table__td,.cb-table tbody tr:last-child .cb-table__sel{border-bottom:none}.cb-table--striped tbody tr:nth-child(2n){background-color:var(--cb-color-surface-50)}.cb-table--hover tbody .cb-table__row:hover{background-color:var(--cb-color-surface-100)}.cb-table__row.cb-is-selectable{cursor:pointer}.cb-table__row.cb-is-selected{background-color:var(--cb-color-primary-50)!important}.cb-table__sel{width:1px;white-space:nowrap}.cb-table__check{display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);color:var(--cb-color-primary-contrast);outline:none}.cb-table__check:focus-visible{box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-table__check.cb-is-checked{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500)}.cb-table__empty{padding:var(--cb-space-6);text-align:center;color:var(--cb-color-text-muted)}.cb-table__paginator{margin-top:var(--cb-space-3)}:host-context([data-theme=\"dark\"]) .cb-table thead .cb-table__th,:host-context([data-theme=\"dark\"]) .cb-table thead .cb-table__sel{background-color:var(--cb-color-surface-100)}:host-context([data-theme=\"dark\"]) .cb-table--striped tbody tr:nth-child(2n){background-color:color-mix(in srgb,var(--cb-color-surface-200) 45%,transparent)}:host-context([data-theme=\"dark\"]) .cb-table--hover tbody .cb-table__row:hover{background-color:var(--cb-color-surface-200)}:host-context([data-theme=\"dark\"]) .cb-table__row.cb-is-selected{background-color:color-mix(in srgb,var(--cb-color-primary-500) 20%,transparent)!important}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbPaginator, selector: "cb-paginator", inputs: ["totalRecords", "rows", "first", "rowsPerPageOptions", "showReport", "maxPageLinks"], outputs: ["rowsChange", "firstChange", "pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-table__wrap{overflow-x:auto;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md)}.cb-table{width:100%;border-collapse:collapse;font-size:var(--cb-text-sm)}.cb-table__th,.cb-table__td,.cb-table__sel{padding:var(--cb-space-3) var(--cb-space-4);text-align:left;border-bottom:var(--cb-border-width) solid var(--cb-color-border);vertical-align:middle}.cb-table--sm .cb-table__th,.cb-table--sm .cb-table__td,.cb-table--sm .cb-table__sel{padding:var(--cb-space-2) var(--cb-space-3)}.cb-table--lg .cb-table__th,.cb-table--lg .cb-table__td,.cb-table--lg .cb-table__sel{padding:var(--cb-space-4) var(--cb-space-5)}.cb-table thead .cb-table__th,.cb-table thead .cb-table__sel{background-color:var(--cb-color-surface-subtle);color:var(--cb-color-text);font-weight:var(--cb-font-weight-semibold);white-space:nowrap;border-bottom-width:2px}.cb-table__th-inner{display:inline-flex;align-items:center;gap:var(--cb-space-1)}.cb-table__th{position:relative}.cb-table__th.cb-is-sortable:hover{background-color:var(--cb-color-surface-hover)}.cb-table__sort-btn{margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;background:none;border:none;border-radius:var(--cb-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.cb-table__sort-btn:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-table--resizable{table-layout:fixed}.cb-table--resizable .cb-table__th{overflow:hidden;text-overflow:ellipsis}.cb-table__resizer{position:absolute;top:0;right:0;width:.5rem;height:100%;cursor:col-resize;touch-action:none}.cb-table__resizer:after{content:\"\";position:absolute;top:25%;right:.2rem;width:2px;height:50%;background-color:var(--cb-color-border-strong);border-radius:1px}.cb-table__resizer:hover:after,.cb-table__resizer:focus-visible:after{background-color:var(--cb-color-primary-500)}.cb-table__resizer:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px}.cb-table__filter-row td{padding:var(--cb-space-2) var(--cb-space-4);background-color:var(--cb-color-surface-subtle);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-table__filter{box-sizing:border-box;width:100%;min-width:6rem;padding:var(--cb-space-1) var(--cb-space-2);font:inherit;font-size:var(--cb-text-sm);color:var(--cb-color-text);background-color:var(--cb-color-surface-0);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm)}.cb-table__filter:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-table__expander{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;color:var(--cb-color-text-muted);background:none;border:none;border-radius:var(--cb-radius-sm);cursor:pointer}.cb-table__expander:hover{background-color:var(--cb-color-surface-hover)}.cb-table__expander:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-table__expansion>td{padding:var(--cb-space-4);background-color:var(--cb-color-surface-subtle);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-table__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.cb-table__sort{color:var(--cb-color-text-muted)}.cb-table tbody tr:last-child .cb-table__td,.cb-table tbody tr:last-child .cb-table__sel{border-bottom:none}.cb-table--striped tbody tr:nth-child(2n){background-color:var(--cb-color-surface-subtle)}.cb-table--hover tbody .cb-table__row:hover{background-color:var(--cb-color-surface-hover)}.cb-table__row.cb-is-selectable{cursor:pointer}.cb-table__row.cb-is-selected{background-color:var(--cb-color-primary-50)!important}.cb-table__sel{width:1px;white-space:nowrap}.cb-table__check{display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);color:var(--cb-color-primary-contrast);outline:none}.cb-table__check:focus-visible{box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-table__check.cb-is-checked,.cb-table__check.cb-is-mixed{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500)}.cb-table__check--radio{border-radius:50%}.cb-table__empty{padding:var(--cb-space-6);text-align:center;color:var(--cb-color-text-muted)}.cb-table__paginator{margin-top:var(--cb-space-3)}:host-context([data-theme=\"dark\"]) .cb-table__row.cb-is-selected{background-color:color-mix(in srgb,var(--cb-color-primary-500) 20%,transparent)!important}.cb-table__wrap{position:relative}.cb-table__wrap--scroll{overflow:auto}.cb-table--scroll thead{position:sticky;top:0;z-index:2}.cb-is-frozen{position:sticky;z-index:1;background-color:var(--cb-color-surface-raised)}thead .cb-is-frozen{z-index:3;background-color:var(--cb-color-surface-subtle)}.cb-table--striped tbody tr:nth-child(2n) .cb-is-frozen{background-color:var(--cb-color-surface-subtle)}.cb-table--hover tbody .cb-table__row:hover .cb-is-frozen{background-color:var(--cb-color-surface-hover)}.cb-is-frozen-last{box-shadow:4px 0 6px -4px #00000040}.cb-table__group>th{padding:var(--cb-space-2) var(--cb-space-4);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-semibold);text-align:left;color:var(--cb-color-text-strong);background-color:var(--cb-color-surface-subtle);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-table__group-count{font-weight:var(--cb-font-weight-normal, 400);color:var(--cb-color-text-muted)}.cb-table__loading{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;color:var(--cb-color-primary-500);background-color:color-mix(in srgb,var(--cb-color-surface-raised) 65%,transparent)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbPaginator, selector: "cb-paginator", inputs: ["totalRecords", "rows", "first", "rowsPerPageOptions", "showReport", "maxPageLinks"], outputs: ["rowsChange", "firstChange", "pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTable, decorators: [{
             type: Component,
             args: [{ selector: 'cb-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon, CbPaginator, NgTemplateOutlet], host: { class: 'cb-table-host' }, template: `
-    <div class="cb-table__wrap">
-      <table class="cb-table" [class]="'cb-table--' + size()" [class.cb-table--striped]="striped()" [class.cb-table--hover]="rowHover()">
+    <ng-content select="[cbTableHeader]" />
+    <div class="cb-table__wrap" [class.cb-table__wrap--scroll]="!!scrollHeight()" [style.max-height]="scrollHeight()">
+      <table
+        #table
+        class="cb-table"
+        [class]="'cb-table--' + size()"
+        [class.cb-table--striped]="striped()"
+        [class.cb-table--hover]="rowHover()"
+        [class.cb-table--resizable]="resizableColumns()"
+        [class.cb-table--scroll]="!!scrollHeight()"
+        [attr.aria-label]="ariaLabel() || null"
+        [attr.aria-busy]="loading() || null"
+      >
         <thead>
           <tr>
+            @if (expansion()) {
+              <th class="cb-table__sel" scope="col" data-key="__exp" [class.cb-is-frozen]="hasFrozen()" [style.left.px]="frozenLeft('__exp')">
+                <span class="cb-table__sr">{{ t().details }}</span>
+              </th>
+            }
             @if (selectionMode() === 'multiple') {
-              <th class="cb-table__sel">
+              <th class="cb-table__sel" scope="col" data-key="__sel" [class.cb-is-frozen]="hasFrozen()" [style.left.px]="frozenLeft('__sel')">
                 <span
                   class="cb-table__check"
                   [class.cb-is-checked]="allSelected()"
+                  [class.cb-is-mixed]="someSelected()"
                   role="checkbox"
-                  [attr.aria-checked]="allSelected()"
+                  [attr.aria-checked]="allSelected() ? 'true' : someSelected() ? 'mixed' : 'false'"
+                  [attr.aria-label]="t().selectAllRows"
                   tabindex="0"
                   (click)="toggleAll()"
-                  (keydown.enter)="toggleAll()"
                   (keydown.space)="toggleAll(); $event.preventDefault()"
                 >
-                  @if (allSelected()) { <cb-icon name="check" [size]="13" aria-hidden="true" /> }
+                  @if (allSelected()) {
+                    <cb-icon name="check" [size]="13" aria-hidden="true" />
+                  } @else if (someSelected()) {
+                    <cb-icon name="minus" [size]="13" aria-hidden="true" />
+                  }
                 </span>
               </th>
             } @else if (selectionMode() === 'single') {
-              <th class="cb-table__sel"></th>
+              <th class="cb-table__sel" scope="col" data-key="__sel" [class.cb-is-frozen]="hasFrozen()" [style.left.px]="frozenLeft('__sel')">
+                <span class="cb-table__sr">{{ t().select }}</span>
+              </th>
             }
-            @for (col of columns(); track col.field) {
+            @for (col of displayColumns(); track col.field) {
               <th
                 class="cb-table__th"
+                scope="col"
+                [attr.data-key]="col.field"
+                [class.cb-is-frozen]="!!col.frozen"
+                [class.cb-is-frozen-last]="col.field === lastFrozen()"
+                [style.left.px]="col.frozen ? frozenLeft(col.field) : null"
                 [class.cb-is-sortable]="col.sortable"
-                [style.width]="col.width || null"
+                [style.width]="columnWidth(col)"
                 [style.text-align]="col.align || null"
                 [attr.aria-sort]="ariaSort(col)"
-                (click)="onSort(col)"
               >
-                <span class="cb-table__th-inner">
-                  {{ col.header }}
-                  @if (col.sortable) {
+                @if (col.sortable) {
+                  <button
+                    type="button"
+                    class="cb-table__th-inner cb-table__sort-btn"
+                    [attr.aria-label]="fmt(t().sortBy, col.header)"
+                    (click)="onSort(col)"
+                  >
+                    {{ col.header }}
                     <cb-icon class="cb-table__sort" [name]="sortIcon(col)" [size]="15" aria-hidden="true" />
-                  }
-                </span>
+                  </button>
+                } @else {
+                  <span class="cb-table__th-inner">{{ col.header }}</span>
+                }
+                @if (resizableColumns()) {
+                  <span
+                    class="cb-table__resizer"
+                    role="separator"
+                    aria-orientation="vertical"
+                    tabindex="0"
+                    [attr.aria-label]="fmt(t().resizeColumn, col.header)"
+                    [attr.aria-valuenow]="widths()[col.field] ?? null"
+                    [attr.aria-valuemin]="minColumnWidth"
+                    (pointerdown)="startResize($event, col)"
+                    (keydown)="onResizerKeydown($event, col)"
+                  ></span>
+                }
               </th>
             }
           </tr>
+          @if (hasColumnFilters()) {
+            <tr class="cb-table__filter-row">
+              @if (expansion()) {
+                <td class="cb-table__sel" [class.cb-is-frozen]="hasFrozen()" [style.left.px]="frozenLeft('__exp')"></td>
+              }
+              @if (selectionMode()) {
+                <td class="cb-table__sel" [class.cb-is-frozen]="hasFrozen()" [style.left.px]="frozenLeft('__sel')"></td>
+              }
+              @for (col of displayColumns(); track col.field) {
+                <td
+                  class="cb-table__filter-cell"
+                  [class.cb-is-frozen]="!!col.frozen"
+                  [class.cb-is-frozen-last]="col.field === lastFrozen()"
+                  [style.left.px]="col.frozen ? frozenLeft(col.field) : null"
+                >
+                  @if (col.filter) {
+                    <input
+                      type="search"
+                      class="cb-table__filter"
+                      [value]="columnFilters()[col.field] ?? ''"
+                      [placeholder]="col.filterPlaceholder ?? t().search"
+                      [attr.aria-label]="fmt(t().filterBy, col.header)"
+                      (input)="filterColumn(col.field, $any($event.target).value)"
+                    />
+                  }
+                </td>
+              }
+            </tr>
+          }
         </thead>
         <tbody>
-          @for (row of pageRows(); track rowKey(row, $index)) {
+          @for (row of pageRows(); track rowKey(row, $index); let i = $index) {
+            @if (groupRowsBy() && isGroupStart(i)) {
+              <tr class="cb-table__group">
+                <th scope="rowgroup" [attr.colspan]="colspan()">
+                  @if (groupHeader(); as gh) {
+                    <ng-container
+                      [ngTemplateOutlet]="gh.template"
+                      [ngTemplateOutletContext]="{ $implicit: groupOf(row), count: groupCount(row) }"
+                    />
+                  } @else {
+                    {{ groupOf(row) }} <span class="cb-table__group-count">({{ groupCount(row) }})</span>
+                  }
+                </th>
+              </tr>
+            }
             <tr
               class="cb-table__row"
               [class.cb-is-selected]="isSelected(row)"
               [class.cb-is-selectable]="!!selectionMode()"
               (click)="onRowClick(row)"
             >
+              @if (expansion()) {
+                <td class="cb-table__sel" [class.cb-is-frozen]="hasFrozen()" [style.left.px]="frozenLeft('__exp')">
+                  <button
+                    type="button"
+                    class="cb-table__expander"
+                    [attr.aria-expanded]="isExpanded(row)"
+                    [attr.aria-controls]="isExpanded(row) ? expansionId(first() + i) : null"
+                    [attr.aria-label]="fmt(t().expandRow, first() + i + 1)"
+                    (click)="toggleExpansion(row); $event.stopPropagation()"
+                  >
+                    <cb-icon [name]="isExpanded(row) ? 'chevron-down' : 'chevron-right'" [size]="15" aria-hidden="true" />
+                  </button>
+                </td>
+              }
               @if (selectionMode()) {
-                <td class="cb-table__sel">
-                  <span class="cb-table__check" [class.cb-is-checked]="isSelected(row)" aria-hidden="true">
-                    @if (isSelected(row)) { <cb-icon name="check" [size]="13" /> }
+                <td class="cb-table__sel" [class.cb-is-frozen]="hasFrozen()" [style.left.px]="frozenLeft('__sel')">
+                  <span
+                    class="cb-table__check"
+                    [class.cb-table__check--radio]="selectionMode() === 'single'"
+                    [class.cb-is-checked]="isSelected(row)"
+                    [attr.role]="selectionMode() === 'single' ? 'radio' : 'checkbox'"
+                    [attr.aria-checked]="isSelected(row)"
+                    [attr.aria-label]="fmt(t().selectRow, first() + i + 1)"
+                    tabindex="0"
+                    (keydown.space)="onRowClick(row); $event.preventDefault()"
+                  >
+                    @if (isSelected(row)) {
+                      <cb-icon name="check" [size]="13" aria-hidden="true" />
+                    }
                   </span>
                 </td>
               }
-              @for (col of columns(); track col.field) {
-                <td class="cb-table__td" [style.text-align]="col.align || null">
+              @for (col of displayColumns(); track col.field) {
+                <td
+                  class="cb-table__td"
+                  [class.cb-is-frozen]="!!col.frozen"
+                  [class.cb-is-frozen-last]="col.field === lastFrozen()"
+                  [style.left.px]="col.frozen ? frozenLeft(col.field) : null"
+                  [style.text-align]="col.align || null"
+                >
                   @if (cellTemplate(col.field); as cell) {
-                    <ng-container
-                      [ngTemplateOutlet]="cell.template"
-                      [ngTemplateOutletContext]="cellContext(row, col)"
-                    />
+                    <ng-container [ngTemplateOutlet]="cell.template" [ngTemplateOutletContext]="cellContext(row, col)" />
                   } @else {
                     {{ cellValue(row, col) }}
                   }
                 </td>
               }
             </tr>
+            @if (expansion(); as exp) {
+              @if (isExpanded(row)) {
+                <tr class="cb-table__expansion" [id]="expansionId(first() + i)">
+                  <td [attr.colspan]="colspan()">
+                    <ng-container
+                      [ngTemplateOutlet]="exp.template"
+                      [ngTemplateOutletContext]="{ $implicit: row, index: first() + i }"
+                    />
+                  </td>
+                </tr>
+              }
+            }
           } @empty {
             <tr>
-              <td class="cb-table__empty" [attr.colspan]="colspan()">{{ emptyMessage() }}</td>
+              <td class="cb-table__empty" [attr.colspan]="colspan()">{{ (emptyMessage() ?? t().noData) }}</td>
             </tr>
           }
         </tbody>
       </table>
+      @if (loading()) {
+        <div class="cb-table__loading" role="status">
+          <cb-icon name="loader" [size]="22" [spin]="true" aria-hidden="true" />
+          <span class="cb-table__sr">{{ t().loading }}</span>
+        </div>
+      }
     </div>
+    @if (isFiltering()) {
+      <span class="cb-table__sr" aria-live="polite">{{ fmt(t().resultsCount, total()) }}</span>
+    }
 
     @if (paginator()) {
       <cb-paginator
         class="cb-table__paginator"
-        [totalRecords]="sorted().length"
+        [totalRecords]="total()"
         [(first)]="first"
         [(rows)]="rows"
         [rowsPerPageOptions]="rowsPerPageOptions()"
         (pageChange)="onPageChange($event)"
       />
     }
-  `, styles: [":host{display:block;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-table__wrap{overflow-x:auto;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md)}.cb-table{width:100%;border-collapse:collapse;font-size:var(--cb-text-sm)}.cb-table__th,.cb-table__td,.cb-table__sel{padding:var(--cb-space-3) var(--cb-space-4);text-align:left;border-bottom:var(--cb-border-width) solid var(--cb-color-border);vertical-align:middle}.cb-table--sm .cb-table__th,.cb-table--sm .cb-table__td,.cb-table--sm .cb-table__sel{padding:var(--cb-space-2) var(--cb-space-3)}.cb-table--lg .cb-table__th,.cb-table--lg .cb-table__td,.cb-table--lg .cb-table__sel{padding:var(--cb-space-4) var(--cb-space-5)}.cb-table thead .cb-table__th,.cb-table thead .cb-table__sel{background-color:var(--cb-color-surface-50);color:var(--cb-color-text);font-weight:var(--cb-font-weight-semibold);white-space:nowrap;border-bottom-width:2px}.cb-table__th-inner{display:inline-flex;align-items:center;gap:var(--cb-space-1)}.cb-table__th.cb-is-sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.cb-table__th.cb-is-sortable:hover{background-color:var(--cb-color-surface-100)}.cb-table__sort{color:var(--cb-color-text-muted)}.cb-table tbody tr:last-child .cb-table__td,.cb-table tbody tr:last-child .cb-table__sel{border-bottom:none}.cb-table--striped tbody tr:nth-child(2n){background-color:var(--cb-color-surface-50)}.cb-table--hover tbody .cb-table__row:hover{background-color:var(--cb-color-surface-100)}.cb-table__row.cb-is-selectable{cursor:pointer}.cb-table__row.cb-is-selected{background-color:var(--cb-color-primary-50)!important}.cb-table__sel{width:1px;white-space:nowrap}.cb-table__check{display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);color:var(--cb-color-primary-contrast);outline:none}.cb-table__check:focus-visible{box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-table__check.cb-is-checked{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500)}.cb-table__empty{padding:var(--cb-space-6);text-align:center;color:var(--cb-color-text-muted)}.cb-table__paginator{margin-top:var(--cb-space-3)}:host-context([data-theme=\"dark\"]) .cb-table thead .cb-table__th,:host-context([data-theme=\"dark\"]) .cb-table thead .cb-table__sel{background-color:var(--cb-color-surface-100)}:host-context([data-theme=\"dark\"]) .cb-table--striped tbody tr:nth-child(2n){background-color:color-mix(in srgb,var(--cb-color-surface-200) 45%,transparent)}:host-context([data-theme=\"dark\"]) .cb-table--hover tbody .cb-table__row:hover{background-color:var(--cb-color-surface-200)}:host-context([data-theme=\"dark\"]) .cb-table__row.cb-is-selected{background-color:color-mix(in srgb,var(--cb-color-primary-500) 20%,transparent)!important}\n"] }]
-        }], propDecorators: { cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CbTableCellDirective), { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }, { type: i0.Output, args: ["rowsChange"] }], rowsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageOptions", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], rowHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHover", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }] } });
+  `, styles: [":host{display:block;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-table__wrap{overflow-x:auto;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md)}.cb-table{width:100%;border-collapse:collapse;font-size:var(--cb-text-sm)}.cb-table__th,.cb-table__td,.cb-table__sel{padding:var(--cb-space-3) var(--cb-space-4);text-align:left;border-bottom:var(--cb-border-width) solid var(--cb-color-border);vertical-align:middle}.cb-table--sm .cb-table__th,.cb-table--sm .cb-table__td,.cb-table--sm .cb-table__sel{padding:var(--cb-space-2) var(--cb-space-3)}.cb-table--lg .cb-table__th,.cb-table--lg .cb-table__td,.cb-table--lg .cb-table__sel{padding:var(--cb-space-4) var(--cb-space-5)}.cb-table thead .cb-table__th,.cb-table thead .cb-table__sel{background-color:var(--cb-color-surface-subtle);color:var(--cb-color-text);font-weight:var(--cb-font-weight-semibold);white-space:nowrap;border-bottom-width:2px}.cb-table__th-inner{display:inline-flex;align-items:center;gap:var(--cb-space-1)}.cb-table__th{position:relative}.cb-table__th.cb-is-sortable:hover{background-color:var(--cb-color-surface-hover)}.cb-table__sort-btn{margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;background:none;border:none;border-radius:var(--cb-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.cb-table__sort-btn:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-table--resizable{table-layout:fixed}.cb-table--resizable .cb-table__th{overflow:hidden;text-overflow:ellipsis}.cb-table__resizer{position:absolute;top:0;right:0;width:.5rem;height:100%;cursor:col-resize;touch-action:none}.cb-table__resizer:after{content:\"\";position:absolute;top:25%;right:.2rem;width:2px;height:50%;background-color:var(--cb-color-border-strong);border-radius:1px}.cb-table__resizer:hover:after,.cb-table__resizer:focus-visible:after{background-color:var(--cb-color-primary-500)}.cb-table__resizer:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px}.cb-table__filter-row td{padding:var(--cb-space-2) var(--cb-space-4);background-color:var(--cb-color-surface-subtle);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-table__filter{box-sizing:border-box;width:100%;min-width:6rem;padding:var(--cb-space-1) var(--cb-space-2);font:inherit;font-size:var(--cb-text-sm);color:var(--cb-color-text);background-color:var(--cb-color-surface-0);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm)}.cb-table__filter:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-table__expander{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;color:var(--cb-color-text-muted);background:none;border:none;border-radius:var(--cb-radius-sm);cursor:pointer}.cb-table__expander:hover{background-color:var(--cb-color-surface-hover)}.cb-table__expander:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-table__expansion>td{padding:var(--cb-space-4);background-color:var(--cb-color-surface-subtle);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-table__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.cb-table__sort{color:var(--cb-color-text-muted)}.cb-table tbody tr:last-child .cb-table__td,.cb-table tbody tr:last-child .cb-table__sel{border-bottom:none}.cb-table--striped tbody tr:nth-child(2n){background-color:var(--cb-color-surface-subtle)}.cb-table--hover tbody .cb-table__row:hover{background-color:var(--cb-color-surface-hover)}.cb-table__row.cb-is-selectable{cursor:pointer}.cb-table__row.cb-is-selected{background-color:var(--cb-color-primary-50)!important}.cb-table__sel{width:1px;white-space:nowrap}.cb-table__check{display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);color:var(--cb-color-primary-contrast);outline:none}.cb-table__check:focus-visible{box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-table__check.cb-is-checked,.cb-table__check.cb-is-mixed{background-color:var(--cb-color-primary-500);border-color:var(--cb-color-primary-500)}.cb-table__check--radio{border-radius:50%}.cb-table__empty{padding:var(--cb-space-6);text-align:center;color:var(--cb-color-text-muted)}.cb-table__paginator{margin-top:var(--cb-space-3)}:host-context([data-theme=\"dark\"]) .cb-table__row.cb-is-selected{background-color:color-mix(in srgb,var(--cb-color-primary-500) 20%,transparent)!important}.cb-table__wrap{position:relative}.cb-table__wrap--scroll{overflow:auto}.cb-table--scroll thead{position:sticky;top:0;z-index:2}.cb-is-frozen{position:sticky;z-index:1;background-color:var(--cb-color-surface-raised)}thead .cb-is-frozen{z-index:3;background-color:var(--cb-color-surface-subtle)}.cb-table--striped tbody tr:nth-child(2n) .cb-is-frozen{background-color:var(--cb-color-surface-subtle)}.cb-table--hover tbody .cb-table__row:hover .cb-is-frozen{background-color:var(--cb-color-surface-hover)}.cb-is-frozen-last{box-shadow:4px 0 6px -4px #00000040}.cb-table__group>th{padding:var(--cb-space-2) var(--cb-space-4);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-semibold);text-align:left;color:var(--cb-color-text-strong);background-color:var(--cb-color-surface-subtle);border-bottom:var(--cb-border-width) solid var(--cb-color-border)}.cb-table__group-count{font-weight:var(--cb-font-weight-normal, 400);color:var(--cb-color-text-muted)}.cb-table__loading{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;color:var(--cb-color-primary-500);background-color:color-mix(in srgb,var(--cb-color-surface-raised) 65%,transparent)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CbTableCellDirective), { isSignal: true }] }], expansion: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CbTableRowExpansion), { isSignal: true }] }], groupHeader: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CbTableGroupHeader), { isSignal: true }] }], tableRef: [{ type: i0.ViewChild, args: ['table', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }, { type: i0.Output, args: ["rowsChange"] }], rowsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageOptions", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], rowHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHover", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], globalFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilter", required: false }] }, { type: i0.Output, args: ["globalFilterChange"] }], globalFilterFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilterFields", required: false }] }], resizableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizableColumns", required: false }] }], expandedRowKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRowKeys", required: false }] }, { type: i0.Output, args: ["expandedRowKeysChange"] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], groupRowsBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupRowsBy", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }], rowExpand: [{ type: i0.Output, args: ["rowExpand"] }], rowCollapse: [{ type: i0.Output, args: ["rowCollapse"] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }] } });
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';
 }
+function fieldValue(row, field) {
+    return row != null && typeof row === 'object' ? row[field] : row;
+}
+/** Minúsculas y sin tildes, para que "jose" encuentre "José". */
+function normalize(text) {
+    return String(text ?? '')
+        .normalize('NFD')
+        .replace(/[̀-ͯ]/g, '')
+        .toLocaleLowerCase()
+        .trim();
+}
+function matches(value, text, mode) {
+    const v = normalize(value);
+    return mode === 'equals' ? v === text : mode === 'startsWith' ? v.startsWith(text) : v.includes(text);
+}
 
 /*
  * Public API Surface de @caribeng/ui/table
@@ -379,4 +1005,4 @@ function toBoolean(value) {
  * Generated bundle index. Do not edit.
  */
 
-export { CbTable, CbTableCellDirective };
+export { CbTable, CbTableCellDirective, CbTableGroupHeader, CbTableRowExpansion };