@caribeng/ui 22.1.1 → 22.4.0

package/types/caribeng-ui-tree.d.ts

@@ -1,19 +1,91 @@
 import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+import { cbFormat } from '@caribeng/ui';
 
+/** Nodo de un `<cb-tree>`. */
 interface CbTreeNode {
+    /** Identificador único en todo el árbol. */
     key: string;
     label: string;
+    /** Icono opcional (nombre del set de iconos). */
+    icon?: string;
+    /** El nodo no se puede seleccionar (sí expandir). */
+    disabled?: boolean;
     children?: readonly CbTreeNode[];
+    /** Datos propios, disponibles en la plantilla de nodo. */
+    data?: unknown;
 }
+/** Contexto de la plantilla `<ng-template cbTreeNode let-node let-level="level">`. */
+interface CbTreeNodeContext {
+    $implicit: CbTreeNode;
+    level: number;
+    expanded: boolean;
+    selected: boolean;
+}
+/** Plantilla para el contenido de cada nodo. */
+declare class CbTreeNodeTemplate {
+    readonly template: TemplateRef<CbTreeNodeContext>;
+    static ngTemplateContextGuard(_dir: CbTreeNodeTemplate, ctx: unknown): ctx is CbTreeNodeContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbTreeNodeTemplate, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CbTreeNodeTemplate, "ng-template[cbTreeNode]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Árbol jerárquico de CaribeNG con niveles ilimitados, selección simple y
+ * navegación con teclado según el patrón *tree* de WAI-ARIA.
+ *
+ * @example
+ * ```html
+ * <cb-tree [value]="nodes" [(selection)]="selected" ariaLabel="Documentos" />
+ *
+ * <cb-tree [value]="nodes">
+ *   <ng-template cbTreeNode let-node>{{ node.label }} ({{ node.children?.length ?? 0 }})</ng-template>
+ * </cb-tree>
+ * ```
+ */
 declare class CbTree {
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    protected readonly fmt: typeof cbFormat;
+    private readonly host;
+    private readonly uid;
+    /** Nodos raíz. */
     readonly value: _angular_core.InputSignal<readonly CbTreeNode[]>;
+    /** Nodo seleccionado (two-way). */
     readonly selection: _angular_core.ModelSignal<CbTreeNode | null>;
+    /** Nombre accesible del árbol. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Se emite al expandir un nodo. */
+    readonly nodeExpand: _angular_core.OutputEmitterRef<CbTreeNode>;
+    /** Se emite al contraer un nodo. */
+    readonly nodeCollapse: _angular_core.OutputEmitterRef<CbTreeNode>;
+    /** Se emite al seleccionar un nodo. */
+    readonly nodeSelect: _angular_core.OutputEmitterRef<CbTreeNode>;
+    protected readonly nodeTemplate: _angular_core.Signal<CbTreeNodeTemplate | undefined>;
     protected readonly expanded: _angular_core.WritableSignal<ReadonlySet<string>>;
-    protected toggle(key: string): void;
+    /** Último nodo enfocado por el usuario. */
+    protected readonly activeKey: _angular_core.WritableSignal<string | null>;
+    /** Nodo que recibe el foco con Tab (roving tabindex): el activo, el seleccionado o el primero. */
+    protected readonly tabbableKey: _angular_core.Signal<string>;
+    /** Nodos visibles en orden de lectura (solo ramas expandidas). */
+    private readonly visible;
+    /** Expande todos los nodos. */
+    expandAll(): void;
+    /** Contrae todos los nodos. */
+    collapseAll(): void;
+    protected hasChildren(node: CbTreeNode): boolean;
+    protected isExpanded(node: CbTreeNode): boolean;
+    protected isSelected(node: CbTreeNode): boolean;
+    protected itemId(node: CbTreeNode): string;
+    protected toggle(node: CbTreeNode, event?: Event): void;
+    protected onClick(event: Event, node: CbTreeNode): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    private select;
+    private setExpanded;
+    private focus;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbTree, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbTree, "cb-tree", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbTree, "cb-tree", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; "nodeExpand": "nodeExpand"; "nodeCollapse": "nodeCollapse"; "nodeSelect": "nodeSelect"; }, ["nodeTemplate"], never, true, never>;
 }
 
-export { CbTree };
-export type { CbTreeNode };
+export { CbTree, CbTreeNodeTemplate };
+export type { CbTreeNode, CbTreeNodeContext };
 //# sourceMappingURL=caribeng-ui-tree.d.ts.map

package/types/caribeng-ui-treeselect.d.ts

@@ -1,5 +1,6 @@
-import * as _caribeng_ui from '@caribeng/ui';
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+import { cbFormat } from '@caribeng/ui';
 import { ControlValueAccessor } from '@angular/forms';
 
 interface CbTreeSelectNode {
@@ -18,8 +19,12 @@ interface FlatTreeSelectNode {
  * TreeSelect de CaribeNG: selector desplegable jerárquico con soporte CVA.
  */
 declare class CbTreeSelect implements ControlValueAccessor {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    /** Rellena `{0}`, `{1}`… de un texto traducido. */
+    protected readonly fmt: typeof cbFormat;
     readonly nodes: _angular_core.InputSignal<CbTreeSelectNode[]>;
-    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
     readonly disabled: _angular_core.InputSignal<boolean>;
     /** Marca visual y ARIA de estado inválido (también se activa con Angular Forms). */
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -38,6 +43,9 @@ declare class CbTreeSelect implements ControlValueAccessor {
     registerOnChange(fn: (val: string | null) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
+    private readonly trigger;
+    /** Escape cierra el panel y devuelve el foco al disparador. */
+    protected closeOnEscape(event: Event): void;
     toggleOpen(): void;
     isExpanded(key: string): boolean;
     toggleNode(key: string, event: Event): void;

package/types/caribeng-ui-treetable.d.ts

@@ -1,23 +1,87 @@
+import * as _caribeng_ui from '@caribeng/ui';
+import { cbFormat } from '@caribeng/ui';
 import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
 
 interface CbTreeTableColumn {
     field: string;
     header: string;
 }
 interface CbTreeTableNode {
+    /** Identificador único en toda la tabla. */
     key: string;
     data: Record<string, unknown>;
     children?: readonly CbTreeTableNode[];
 }
+/** Contexto de `<ng-template cbTreeTableCell="campo" let-value let-node="node">`. */
+interface CbTreeTableCellContext {
+    $implicit: any;
+    node: CbTreeTableNode;
+    level: number;
+}
+/** Plantilla para las celdas de una columna (`cbTreeTableCell="campo"`). */
+declare class CbTreeTableCellTemplate {
+    readonly field: _angular_core.InputSignal<string>;
+    readonly template: TemplateRef<CbTreeTableCellContext>;
+    static ngTemplateContextGuard(_dir: CbTreeTableCellTemplate, ctx: unknown): ctx is CbTreeTableCellContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbTreeTableCellTemplate, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CbTreeTableCellTemplate, "ng-template[cbTreeTableCell]", never, { "field": { "alias": "cbTreeTableCell"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** Fila visible con su nivel y posición, en orden de lectura. */
+interface Row {
+    node: CbTreeTableNode;
+    level: number;
+    parentKey: string | null;
+    setSize: number;
+    posInSet: number;
+}
+/**
+ * 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" />
+ * ```
+ */
 declare class CbTreeTable {
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    protected readonly fmt: typeof cbFormat;
+    private readonly host;
+    private readonly uid;
+    /** Nodos raíz. */
     readonly value: _angular_core.InputSignal<readonly CbTreeTableNode[]>;
+    /** Columnas; la primera muestra la jerarquía. */
     readonly columns: _angular_core.InputSignal<readonly CbTreeTableColumn[]>;
+    /** Nombre accesible de la tabla. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Se emite al expandir una fila. */
+    readonly nodeExpand: _angular_core.OutputEmitterRef<CbTreeTableNode>;
+    /** Se emite al contraer una fila. */
+    readonly nodeCollapse: _angular_core.OutputEmitterRef<CbTreeTableNode>;
+    private readonly cellTemplates;
     protected readonly expanded: _angular_core.WritableSignal<ReadonlySet<string>>;
-    protected toggle(k: string): void;
+    protected readonly activeKey: _angular_core.WritableSignal<string | null>;
+    protected readonly tabbableKey: _angular_core.Signal<string>;
+    /** Filas visibles: las de las ramas expandidas, en orden. */
+    protected readonly rows: _angular_core.Signal<Row[]>;
+    /** Expande todas las filas. */
+    expandAll(): void;
+    /** Contrae todas las filas. */
+    collapseAll(): void;
+    protected hasChildren(node: CbTreeTableNode): boolean;
+    protected isExpanded(node: CbTreeTableNode): boolean;
+    protected rowId(node: CbTreeTableNode): string;
+    /** Texto de la primera columna, para las etiquetas accesibles. */
+    protected label(node: CbTreeTableNode): string;
+    protected cellTemplate(field: string): TemplateRef<CbTreeTableCellContext> | null;
+    protected toggle(node: CbTreeTableNode): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    private setExpanded;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbTreeTable, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbTreeTable, "cb-treetable", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbTreeTable, "cb-treetable", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "nodeExpand": "nodeExpand"; "nodeCollapse": "nodeCollapse"; }, ["cellTemplates"], never, true, never>;
 }
 
-export { CbTreeTable };
-export type { CbTreeTableColumn, CbTreeTableNode };
+export { CbTreeTable, CbTreeTableCellTemplate };
+export type { CbTreeTableCellContext, CbTreeTableColumn, CbTreeTableNode };
 //# sourceMappingURL=caribeng-ui-treetable.d.ts.map

package/types/caribeng-ui-virtualscroller.d.ts

@@ -1,17 +1,57 @@
 import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
 
+/** Contexto de `<ng-template cbVirtualItem let-item let-index="index">`. */
+interface CbVirtualItemContext<T = any> {
+    $implicit: T;
+    index: number;
+}
+/** Plantilla de cada elemento de un `<cb-virtualscroller>`. */
+declare class CbVirtualItemTemplate {
+    readonly template: TemplateRef<CbVirtualItemContext<any>>;
+    static ngTemplateContextGuard(_dir: CbVirtualItemTemplate, ctx: unknown): ctx is CbVirtualItemContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbVirtualItemTemplate, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CbVirtualItemTemplate, "ng-template[cbVirtualItem]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * 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>
+ * ```
+ */
 declare class CbVirtualScroller {
+    /** Elementos de la lista. */
     readonly items: _angular_core.InputSignal<readonly unknown[]>;
+    /** Alto fijo de cada elemento, en píxeles. */
     readonly itemSize: _angular_core.InputSignal<number>;
+    /** Alto visible de la lista, en píxeles. */
     readonly viewportHeight: _angular_core.InputSignal<number>;
-    private readonly start;
+    /** Elementos extra que se pintan por encima y por debajo de lo visible (evita parpadeos al hacer scroll). */
+    readonly buffer: _angular_core.InputSignal<number>;
+    /** Nombre accesible de la lista. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    protected readonly itemTemplate: _angular_core.Signal<CbVirtualItemTemplate | undefined>;
+    private readonly viewport;
+    private readonly scrollTop;
+    /** Índice del primer elemento pintado. */
+    protected readonly start: _angular_core.Signal<number>;
+    private readonly end;
     protected readonly visibleItems: _angular_core.Signal<unknown[]>;
     protected readonly offset: _angular_core.Signal<number>;
-    protected readonly bottomSpace: _angular_core.Signal<number>;
-    protected onScroll(e: Event): void;
+    protected readonly totalHeight: _angular_core.Signal<number>;
+    /** Desplaza la lista hasta el elemento indicado (lo deja arriba). */
+    scrollToIndex(index: number): void;
+    protected onScroll(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbVirtualScroller, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbVirtualScroller, "cb-virtualscroller", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "itemSize": { "alias": "itemSize"; "required": false; "isSignal": true; }; "viewportHeight": { "alias": "viewportHeight"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbVirtualScroller, "cb-virtualscroller", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "itemSize": { "alias": "itemSize"; "required": false; "isSignal": true; }; "viewportHeight": { "alias": "viewportHeight"; "required": false; "isSignal": true; }; "buffer": { "alias": "buffer"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, ["itemTemplate"], never, true, never>;
 }
 
-export { CbVirtualScroller };
+export { CbVirtualItemTemplate, CbVirtualScroller };
+export type { CbVirtualItemContext };
 //# sourceMappingURL=caribeng-ui-virtualscroller.d.ts.map