@caribeng/ui 22.1.1 → 22.2.0

package/fesm2022/caribeng-ui-treetable.mjs

@@ -1,26 +1,289 @@
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, signal, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, inject, TemplateRef, Directive, ElementRef, output, contentChildren, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
+import { CbIcon } from '@caribeng/ui/icon';
 
+/** Plantilla para las celdas de una columna (`cbTreeTableCell="campo"`). */
+class CbTreeTableCellTemplate {
+    constructor() {
+        this.field = input.required({ ...(ngDevMode ? { debugName: "field" } : /* istanbul ignore next */ {}), alias: 'cbTreeTableCell' });
+        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: CbTreeTableCellTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: CbTreeTableCellTemplate, isStandalone: true, selector: "ng-template[cbTreeTableCell]", inputs: { field: { classPropertyName: "field", publicName: "cbTreeTableCell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTreeTableCellTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[cbTreeTableCell]' }]
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "cbTreeTableCell", required: true }] }] } });
+let nextUid = 0;
+/**
+ * Tabla jerárquica de CaribeNG (patrón *treegrid* de WAI-ARIA): niveles
+ * ilimitados con sangría, filas expandibles y navegación con teclado.
+ *
+ * @example
+ * ```html
+ * <cb-treetable [value]="nodes" [columns]="columns" ariaLabel="Archivos" />
+ * ```
+ */
 class CbTreeTable {
     constructor() {
+        this.t = injectCbTranslation();
+        this.fmt = cbFormat;
+        this.host = inject(ElementRef);
+        this.uid = `cb-treetable-${++nextUid}`;
+        /** Nodos raíz. */
         this.value = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Columnas; la primera muestra la jerarquía. */
         this.columns = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        /** Nombre accesible de la tabla. */
+        this.ariaLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Se emite al expandir una fila. */
+        this.nodeExpand = output();
+        /** Se emite al contraer una fila. */
+        this.nodeCollapse = output();
+        this.cellTemplates = contentChildren(CbTreeTableCellTemplate, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cellTemplates" }] : /* istanbul ignore next */ []));
         this.expanded = signal(new Set(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        this.activeKey = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []));
+        this.tabbableKey = computed(() => this.activeKey() ?? this.value()[0]?.key ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabbableKey" }] : /* istanbul ignore next */ []));
+        /** Filas visibles: las de las ramas expandidas, en orden. */
+        this.rows = computed(() => {
+            const out = [];
+            const walk = (nodes, level, parentKey) => nodes.forEach((node, i) => {
+                out.push({ node, level, parentKey, setSize: nodes.length, posInSet: i + 1 });
+                if (node.children?.length && this.expanded().has(node.key))
+                    walk(node.children, level + 1, node.key);
+            });
+            walk(this.value(), 1, null);
+            return out;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    }
+    /** Expande todas las filas. */
+    expandAll() {
+        const keys = new Set();
+        const walk = (nodes) => nodes.forEach((n) => {
+            if (n.children?.length) {
+                keys.add(n.key);
+                walk(n.children);
+            }
+        });
+        walk(this.value());
+        this.expanded.set(keys);
+    }
+    /** Contrae todas las filas. */
+    collapseAll() {
+        this.expanded.set(new Set());
+    }
+    hasChildren(node) {
+        return !!node.children?.length;
+    }
+    isExpanded(node) {
+        return this.expanded().has(node.key);
+    }
+    rowId(node) {
+        return `${this.uid}-${node.key}`;
+    }
+    /** Texto de la primera columna, para las etiquetas accesibles. */
+    label(node) {
+        const field = this.columns()[0]?.field;
+        return field ? String(node.data[field] ?? '') : node.key;
+    }
+    cellTemplate(field) {
+        return this.cellTemplates().find((c) => c.field() === field)?.template ?? null;
+    }
+    toggle(node) {
+        this.setExpanded(node, !this.isExpanded(node));
+    }
+    onKeydown(event) {
+        const rows = this.rows();
+        const index = rows.findIndex((r) => r.node.key === this.tabbableKey());
+        if (index < 0)
+            return;
+        const current = rows[index];
+        let target;
+        switch (event.key) {
+            case 'ArrowDown':
+                target = rows[index + 1];
+                break;
+            case 'ArrowUp':
+                target = rows[index - 1];
+                break;
+            case 'Home':
+                target = rows[0];
+                break;
+            case 'End':
+                target = rows[rows.length - 1];
+                break;
+            case 'ArrowRight':
+                if (this.hasChildren(current.node) && !this.isExpanded(current.node))
+                    this.setExpanded(current.node, true);
+                else if (this.isExpanded(current.node))
+                    target = rows[index + 1];
+                break;
+            case 'ArrowLeft':
+                if (this.isExpanded(current.node))
+                    this.setExpanded(current.node, false);
+                else if (current.parentKey)
+                    target = rows.find((r) => r.node.key === current.parentKey);
+                break;
+            case 'Enter':
+            case ' ':
+                if (this.hasChildren(current.node))
+                    this.toggle(current.node);
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        if (target) {
+            this.activeKey.set(target.node.key);
+            const id = this.rowId(target.node);
+            Array.from(this.host.nativeElement.querySelectorAll('tr[id]'))
+                .find((el) => el.id === id)
+                ?.focus();
+        }
+    }
+    setExpanded(node, open) {
+        if (open === this.isExpanded(node))
+            return;
+        const next = new Set(this.expanded());
+        if (open)
+            next.add(node.key);
+        else
+            next.delete(node.key);
+        this.expanded.set(next);
+        (open ? this.nodeExpand : this.nodeCollapse).emit(node);
     }
-    toggle(k) { const n = new Set(this.expanded()); n.has(k) ? n.delete(k) : n.add(k); this.expanded.set(n); }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTreeTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTreeTable, isStandalone: true, selector: "cb-treetable", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<table class="cb-treetable"><thead><tr>@for(col of columns();track col.field){<th>{{col.header}}</th>}</tr></thead><tbody>@for(node of value();track node.key){<tr><td>@if(node.children?.length){<button type="button" (click)="toggle(node.key)" [attr.aria-label]="expanded().has(node.key)?'Contraer':'Expandir'">{{expanded().has(node.key)?'−':'+'}}</button>}@for(col of columns();track col.field){<span [style.padding-left.px]="$first?12:0">{{node.data[col.field]}}</span>}</td>@for(col of columns().slice(1);track col.field){<td>{{node.data[col.field]}}</td>}</tr>@if(node.children?.length&&expanded().has(node.key)){@for(child of node.children;track child.key){<tr><td>@for(col of columns();track col.field){<span>{{child.data[col.field]}}</span>}</td>@for(col of columns().slice(1);track col.field){<td>{{child.data[col.field]}}</td>}</tr>}}}</tbody></table>`, isInline: true, styles: [":host{display:block;overflow:auto}.cb-treetable{width:100%;border-collapse:collapse;color:var(--cb-color-text,#111827)}th,td{padding:.7rem;text-align:left;border-bottom:1px solid var(--cb-color-border,#d1d5db)}button{margin-right:.5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTreeTable, isStandalone: true, selector: "cb-treetable", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse" }, host: { classAttribute: "cb-treetable-host" }, queries: [{ propertyName: "cellTemplates", predicate: CbTreeTableCellTemplate, isSignal: true }], ngImport: i0, template: `
+    <table class="cb-treetable" role="treegrid" [attr.aria-label]="ariaLabel() || null" (keydown)="onKeydown($event)">
+      <thead>
+        <tr>
+          @for (col of columns(); track col.field) {
+            <th scope="col">{{ col.header }}</th>
+          }
+        </tr>
+      </thead>
+      <tbody>
+        @for (row of rows(); track row.node.key) {
+          <tr
+            class="cb-treetable__row"
+            [id]="rowId(row.node)"
+            [attr.aria-level]="row.level"
+            [attr.aria-setsize]="row.setSize"
+            [attr.aria-posinset]="row.posInSet"
+            [attr.aria-expanded]="hasChildren(row.node) ? isExpanded(row.node) : null"
+            [attr.tabindex]="row.node.key === tabbableKey() ? 0 : -1"
+            (focus)="activeKey.set(row.node.key)"
+          >
+            @for (col of columns(); track col.field; let first = $first) {
+              <td [class.cb-treetable__first]="first">
+                @if (first) {
+                  <span
+                    class="cb-treetable__indent"
+                    [style.inline-size]="'calc(' + (row.level - 1) + ' * var(--cb-treetable-indent, 1.25rem))'"
+                    aria-hidden="true"
+                  ></span>
+                  @if (hasChildren(row.node)) {
+                    <button
+                      type="button"
+                      class="cb-treetable__toggler"
+                      tabindex="-1"
+                      [attr.aria-label]="fmt(isExpanded(row.node) ? t().collapseItem : t().expandItem, label(row.node))"
+                      (click)="toggle(row.node)"
+                    >
+                      <cb-icon name="chevron-right" [size]="14" [class.cb-is-open]="isExpanded(row.node)" aria-hidden="true" />
+                    </button>
+                  } @else {
+                    <span class="cb-treetable__spacer" aria-hidden="true"></span>
+                  }
+                }
+                @if (cellTemplate(col.field); as tpl) {
+                  <ng-container *ngTemplateOutlet="tpl; context: { $implicit: row.node.data[col.field], node: row.node, level: row.level }" />
+                } @else {
+                  {{ row.node.data[col.field] }}
+                }
+              </td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `, isInline: true, styles: [":host{display:block;overflow-x:auto;color:var(--cb-color-text);font-size:var(--cb-text-sm, .875rem)}.cb-treetable{width:100%;border-collapse:collapse}.cb-treetable th{padding:.65rem .85rem;text-align:left;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.04em;color:var(--cb-color-text-muted);border-bottom:1px solid var(--cb-color-border)}.cb-treetable td{padding:.55rem .85rem;border-bottom:1px solid var(--cb-color-border);vertical-align:middle}.cb-treetable__row{outline:none;transition:background var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-treetable__row:hover{background:color-mix(in srgb,var(--cb-color-text) 4%,transparent)}.cb-treetable__row:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring, var(--cb-color-primary-500))}.cb-treetable__first{white-space:nowrap}.cb-treetable__indent,.cb-treetable__spacer{display:inline-block;vertical-align:middle}.cb-treetable__spacer{width:1.5rem}.cb-treetable__toggler{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-inline-end:.25rem;padding:0;vertical-align:middle;border:0;border-radius:var(--cb-radius-sm, 4px);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-treetable__toggler:hover{color:var(--cb-color-text);background:color-mix(in srgb,var(--cb-color-text) 8%,transparent)}.cb-treetable__toggler cb-icon{transition:transform var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-treetable__toggler cb-icon.cb-is-open{transform:rotate(90deg)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTreeTable, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-treetable', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `<table class="cb-treetable"><thead><tr>@for(col of columns();track col.field){<th>{{col.header}}</th>}</tr></thead><tbody>@for(node of value();track node.key){<tr><td>@if(node.children?.length){<button type="button" (click)="toggle(node.key)" [attr.aria-label]="expanded().has(node.key)?'Contraer':'Expandir'">{{expanded().has(node.key)?'−':'+'}}</button>}@for(col of columns();track col.field){<span [style.padding-left.px]="$first?12:0">{{node.data[col.field]}}</span>}</td>@for(col of columns().slice(1);track col.field){<td>{{node.data[col.field]}}</td>}</tr>@if(node.children?.length&&expanded().has(node.key)){@for(child of node.children;track child.key){<tr><td>@for(col of columns();track col.field){<span>{{child.data[col.field]}}</span>}</td>@for(col of columns().slice(1);track col.field){<td>{{child.data[col.field]}}</td>}</tr>}}}</tbody></table>`, styles: [":host{display:block;overflow:auto}.cb-treetable{width:100%;border-collapse:collapse;color:var(--cb-color-text,#111827)}th,td{padding:.7rem;text-align:left;border-bottom:1px solid var(--cb-color-border,#d1d5db)}button{margin-right:.5rem}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }] } });
+            args: [{ selector: 'cb-treetable', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [NgTemplateOutlet, CbIcon], host: { class: 'cb-treetable-host' }, template: `
+    <table class="cb-treetable" role="treegrid" [attr.aria-label]="ariaLabel() || null" (keydown)="onKeydown($event)">
+      <thead>
+        <tr>
+          @for (col of columns(); track col.field) {
+            <th scope="col">{{ col.header }}</th>
+          }
+        </tr>
+      </thead>
+      <tbody>
+        @for (row of rows(); track row.node.key) {
+          <tr
+            class="cb-treetable__row"
+            [id]="rowId(row.node)"
+            [attr.aria-level]="row.level"
+            [attr.aria-setsize]="row.setSize"
+            [attr.aria-posinset]="row.posInSet"
+            [attr.aria-expanded]="hasChildren(row.node) ? isExpanded(row.node) : null"
+            [attr.tabindex]="row.node.key === tabbableKey() ? 0 : -1"
+            (focus)="activeKey.set(row.node.key)"
+          >
+            @for (col of columns(); track col.field; let first = $first) {
+              <td [class.cb-treetable__first]="first">
+                @if (first) {
+                  <span
+                    class="cb-treetable__indent"
+                    [style.inline-size]="'calc(' + (row.level - 1) + ' * var(--cb-treetable-indent, 1.25rem))'"
+                    aria-hidden="true"
+                  ></span>
+                  @if (hasChildren(row.node)) {
+                    <button
+                      type="button"
+                      class="cb-treetable__toggler"
+                      tabindex="-1"
+                      [attr.aria-label]="fmt(isExpanded(row.node) ? t().collapseItem : t().expandItem, label(row.node))"
+                      (click)="toggle(row.node)"
+                    >
+                      <cb-icon name="chevron-right" [size]="14" [class.cb-is-open]="isExpanded(row.node)" aria-hidden="true" />
+                    </button>
+                  } @else {
+                    <span class="cb-treetable__spacer" aria-hidden="true"></span>
+                  }
+                }
+                @if (cellTemplate(col.field); as tpl) {
+                  <ng-container *ngTemplateOutlet="tpl; context: { $implicit: row.node.data[col.field], node: row.node, level: row.level }" />
+                } @else {
+                  {{ row.node.data[col.field] }}
+                }
+              </td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `, styles: [":host{display:block;overflow-x:auto;color:var(--cb-color-text);font-size:var(--cb-text-sm, .875rem)}.cb-treetable{width:100%;border-collapse:collapse}.cb-treetable th{padding:.65rem .85rem;text-align:left;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.04em;color:var(--cb-color-text-muted);border-bottom:1px solid var(--cb-color-border)}.cb-treetable td{padding:.55rem .85rem;border-bottom:1px solid var(--cb-color-border);vertical-align:middle}.cb-treetable__row{outline:none;transition:background var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-treetable__row:hover{background:color-mix(in srgb,var(--cb-color-text) 4%,transparent)}.cb-treetable__row:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring, var(--cb-color-primary-500))}.cb-treetable__first{white-space:nowrap}.cb-treetable__indent,.cb-treetable__spacer{display:inline-block;vertical-align:middle}.cb-treetable__spacer{width:1.5rem}.cb-treetable__toggler{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-inline-end:.25rem;padding:0;vertical-align:middle;border:0;border-radius:var(--cb-radius-sm, 4px);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-treetable__toggler:hover{color:var(--cb-color-text);background:color-mix(in srgb,var(--cb-color-text) 8%,transparent)}.cb-treetable__toggler cb-icon{transition:transform var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-treetable__toggler cb-icon.cb-is-open{transform:rotate(90deg)}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeCollapse: [{ type: i0.Output, args: ["nodeCollapse"] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CbTreeTableCellTemplate), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CbTreeTable };
+export { CbTreeTable, CbTreeTableCellTemplate };

package/fesm2022/caribeng-ui-virtualscroller.mjs

@@ -1,34 +1,147 @@
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, TemplateRef, Directive, input, contentChild, viewChild, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 
+/** Plantilla de cada elemento de un `<cb-virtualscroller>`. */
+class CbVirtualItemTemplate {
+    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: CbVirtualItemTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: CbVirtualItemTemplate, isStandalone: true, selector: "ng-template[cbVirtualItem]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbVirtualItemTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[cbVirtualItem]' }]
+        }] });
+/**
+ * Lista virtualizada de CaribeNG: solo pinta los elementos visibles (más un
+ * margen) aunque la lista tenga miles. Cada elemento expone `aria-setsize` y
+ * `aria-posinset`, así el lector de pantalla conoce el total.
+ *
+ * @example
+ * ```html
+ * <cb-virtualscroller [items]="clientes" [itemSize]="48" [viewportHeight]="320" ariaLabel="Clientes">
+ *   <ng-template cbVirtualItem let-cliente let-i="index">{{ i + 1 }}. {{ cliente.nombre }}</ng-template>
+ * </cb-virtualscroller>
+ * ```
+ */
 class CbVirtualScroller {
     constructor() {
+        /** Elementos de la lista. */
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** Alto fijo de cada elemento, en píxeles. */
         this.itemSize = input(40, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "itemSize" }] : /* istanbul ignore next */ []));
+        /** Alto visible de la lista, en píxeles. */
         this.viewportHeight = input(240, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []));
-        this.start = signal(0, /* @ts-ignore */
+        /** Elementos extra que se pintan por encima y por debajo de lo visible (evita parpadeos al hacer scroll). */
+        this.buffer = input(4, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "buffer" }] : /* istanbul ignore next */ []));
+        /** Nombre accesible de la lista. */
+        this.ariaLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.itemTemplate = contentChild(CbVirtualItemTemplate, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+        this.viewport = viewChild.required('viewport');
+        this.scrollTop = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollTop" }] : /* istanbul ignore next */ []));
+        /** Índice del primer elemento pintado. */
+        this.start = computed(() => Math.max(0, Math.floor(this.scrollTop() / this.itemSize()) - this.buffer()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "start" }] : /* istanbul ignore next */ []));
-        this.visibleItems = computed(() => { const count = Math.ceil(this.viewportHeight() / this.itemSize()) + 2; return this.items().slice(this.start(), this.start() + count); }, /* @ts-ignore */
+        this.end = computed(() => Math.min(this.items().length, Math.ceil((this.scrollTop() + this.viewportHeight()) / this.itemSize()) + this.buffer()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "end" }] : /* istanbul ignore next */ []));
+        this.visibleItems = computed(() => this.items().slice(this.start(), this.end()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
         this.offset = computed(() => this.start() * this.itemSize(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
-        this.bottomSpace = computed(() => Math.max(0, this.items().length - this.start() - this.visibleItems().length) * this.itemSize(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "bottomSpace" }] : /* istanbul ignore next */ []));
+        this.totalHeight = computed(() => this.items().length * this.itemSize(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "totalHeight" }] : /* istanbul ignore next */ []));
+    }
+    /** Desplaza la lista hasta el elemento indicado (lo deja arriba). */
+    scrollToIndex(index) {
+        const top = Math.max(0, Math.min(index, this.items().length - 1)) * this.itemSize();
+        this.viewport().nativeElement.scrollTop = top;
+        this.scrollTop.set(top);
+    }
+    onScroll(event) {
+        this.scrollTop.set(event.target.scrollTop);
     }
-    onScroll(e) { this.start.set(Math.floor(e.target.scrollTop / this.itemSize())); }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbVirtualScroller, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbVirtualScroller, isStandalone: true, selector: "cb-virtualscroller", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, viewportHeight: { classPropertyName: "viewportHeight", publicName: "viewportHeight", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<div class="cb-virtualscroller" [style.height.px]="viewportHeight()" (scroll)="onScroll($event)" role="list"><div [style.height.px]="offset()"></div>@for(item of visibleItems();track $index){<div class="cb-virtualscroller__item" role="listitem" [style.height.px]="itemSize()">{{item}}</div>}<div [style.height.px]="bottomSpace()"></div></div>`, isInline: true, styles: [":host{display:block}.cb-virtualscroller{overflow:auto;border:1px solid var(--cb-color-border,#d1d5db);border-radius:.5rem}.cb-virtualscroller__item{box-sizing:border-box;display:flex;align-items:center;padding:0 .75rem;border-bottom:1px solid var(--cb-color-border,#e5e7eb);color:var(--cb-color-text,#111827)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbVirtualScroller, isStandalone: true, selector: "cb-virtualscroller", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, viewportHeight: { classPropertyName: "viewportHeight", publicName: "viewportHeight", isSignal: true, isRequired: false, transformFunction: null }, buffer: { classPropertyName: "buffer", publicName: "buffer", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cb-virtualscroller-host" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: CbVirtualItemTemplate, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      #viewport
+      class="cb-virtualscroller"
+      role="list"
+      tabindex="0"
+      [attr.aria-label]="ariaLabel() || null"
+      [style.height.px]="viewportHeight()"
+      (scroll)="onScroll($event)"
+    >
+      <div class="cb-virtualscroller__spacer" [style.height.px]="totalHeight()">
+        <div class="cb-virtualscroller__window" [style.transform]="'translateY(' + offset() + 'px)'">
+          @for (item of visibleItems(); track start() + $index; let i = $index) {
+            <div
+              class="cb-virtualscroller__item"
+              role="listitem"
+              [attr.aria-setsize]="items().length"
+              [attr.aria-posinset]="start() + i + 1"
+              [style.height.px]="itemSize()"
+            >
+              @if (itemTemplate(); as tpl) {
+                <ng-container *ngTemplateOutlet="tpl.template; context: { $implicit: item, index: start() + i }" />
+              } @else {
+                {{ item }}
+              }
+            </div>
+          }
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;box-sizing:border-box;width:100%}.cb-virtualscroller{overflow-y:auto;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, .5rem);background:var(--cb-color-surface-raised);color:var(--cb-color-text);outline:none}.cb-virtualscroller:focus-visible{box-shadow:0 0 0 2px var(--cb-color-focus-ring, var(--cb-color-primary-500))}.cb-virtualscroller__spacer{position:relative}.cb-virtualscroller__window{position:absolute;inset-inline:0;top:0;will-change:transform}.cb-virtualscroller__item{box-sizing:border-box;display:flex;align-items:center;padding:0 var(--cb-space-3, .75rem);border-bottom:1px solid var(--cb-color-border);font-size:var(--cb-text-sm, .875rem)}\n"], dependencies: [{ 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: CbVirtualScroller, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-virtualscroller', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `<div class="cb-virtualscroller" [style.height.px]="viewportHeight()" (scroll)="onScroll($event)" role="list"><div [style.height.px]="offset()"></div>@for(item of visibleItems();track $index){<div class="cb-virtualscroller__item" role="listitem" [style.height.px]="itemSize()">{{item}}</div>}<div [style.height.px]="bottomSpace()"></div></div>`, styles: [":host{display:block}.cb-virtualscroller{overflow:auto;border:1px solid var(--cb-color-border,#d1d5db);border-radius:.5rem}.cb-virtualscroller__item{box-sizing:border-box;display:flex;align-items:center;padding:0 .75rem;border-bottom:1px solid var(--cb-color-border,#e5e7eb);color:var(--cb-color-text,#111827)}\n"] }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: false }] }], viewportHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportHeight", required: false }] }] } });
+            args: [{ selector: 'cb-virtualscroller', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [NgTemplateOutlet], host: { class: 'cb-virtualscroller-host' }, template: `
+    <div
+      #viewport
+      class="cb-virtualscroller"
+      role="list"
+      tabindex="0"
+      [attr.aria-label]="ariaLabel() || null"
+      [style.height.px]="viewportHeight()"
+      (scroll)="onScroll($event)"
+    >
+      <div class="cb-virtualscroller__spacer" [style.height.px]="totalHeight()">
+        <div class="cb-virtualscroller__window" [style.transform]="'translateY(' + offset() + 'px)'">
+          @for (item of visibleItems(); track start() + $index; let i = $index) {
+            <div
+              class="cb-virtualscroller__item"
+              role="listitem"
+              [attr.aria-setsize]="items().length"
+              [attr.aria-posinset]="start() + i + 1"
+              [style.height.px]="itemSize()"
+            >
+              @if (itemTemplate(); as tpl) {
+                <ng-container *ngTemplateOutlet="tpl.template; context: { $implicit: item, index: start() + i }" />
+              } @else {
+                {{ item }}
+              }
+            </div>
+          }
+        </div>
+      </div>
+    </div>
+  `, styles: [":host{display:block;box-sizing:border-box;width:100%}.cb-virtualscroller{overflow-y:auto;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, .5rem);background:var(--cb-color-surface-raised);color:var(--cb-color-text);outline:none}.cb-virtualscroller:focus-visible{box-shadow:0 0 0 2px var(--cb-color-focus-ring, var(--cb-color-primary-500))}.cb-virtualscroller__spacer{position:relative}.cb-virtualscroller__window{position:absolute;inset-inline:0;top:0;will-change:transform}.cb-virtualscroller__item{box-sizing:border-box;display:flex;align-items:center;padding:0 var(--cb-space-3, .75rem);border-bottom:1px solid var(--cb-color-border);font-size:var(--cb-text-sm, .875rem)}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: false }] }], viewportHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportHeight", required: false }] }], buffer: [{ type: i0.Input, args: [{ isSignal: true, alias: "buffer", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CbVirtualItemTemplate), { isSignal: true }] }], viewport: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CbVirtualScroller };
+export { CbVirtualItemTemplate, CbVirtualScroller };