@caribeng/ui 22.1.0 → 22.2.0

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

@@ -1,68 +1,493 @@
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
 
-type CbChartType = 'bar' | 'line' | 'doughnut' | 'pie';
+type CbChartType = 'bar' | 'line' | 'area' | 'horizontalBar' | 'waterfall' | 'doughnut' | 'pie' | 'radialBar' | 'gauge' | 'radar' | 'polarArea' | 'heatmap' | 'treemap';
 interface CbChartDataset {
     label: string;
     data: number[];
+    /** Color de la serie (barras, líneas, áreas, radar, medidor). */
     color?: string;
+    /** Colores por elemento (torta, dona, radial, área polar, treemap y cascada). */
+    colors?: string[];
+    /** En un gráfico `bar`, `'line'` dibuja esta serie como línea (gráfico combinado). */
+    type?: 'bar' | 'line';
+    /**
+     * En `waterfall`: posiciones que son subtotales o totales. Su barra va del 0 al
+     * acumulado y su valor en `data` se ignora.
+     */
+    sums?: number[];
 }
 interface CbChartData {
+    /** Categorías (eje X), ejes del radar o columnas del mapa de calor. */
     labels: string[];
+    /** Series; en `heatmap`, cada dataset es una fila. */
     datasets: CbChartDataset[];
 }
+/** Formato de los valores: opciones de `Intl.NumberFormat` o una función propia. */
+type CbChartValueFormat = Intl.NumberFormatOptions | ((value: number) => string);
+/** Elemento elegido con clic o Enter. */
+interface CbChartItemEvent {
+    index: number;
+    label: string;
+}
+/** Franja de color del medidor (`gauge`), p. ej. rojo de 0 a 40. */
+interface CbChartBand {
+    from: number;
+    to: number;
+    color: string;
+}
 /**
- * Chart de CaribeNG: gráficos vectoriales SVG accesibles sin dependencias externas
- * (soporta tipos `bar`, `line`, `doughnut` y `pie`).
+ * Ventana visible del eje X en sus unidades (ms en un eje de tiempo, número en uno
+ * lineal, posición en uno de categorías). `pinned`: pegada al final, avanza con los
+ * datos nuevos.
  */
-declare class CbChart {
-    readonly type: _angular_core.InputSignal<CbChartType>;
-    readonly data: _angular_core.InputSignal<CbChartData>;
-    readonly height: _angular_core.InputSignal<number>;
-    readonly showLegend: _angular_core.InputSignal<boolean>;
-    readonly ariaLabel: _angular_core.InputSignal<string>;
-    protected readonly gridLines: _angular_core.Signal<number[]>;
-    private readonly maxValue;
-    protected readonly xLabels: _angular_core.Signal<{
-        index: number;
-        text: string;
+interface CbChartWindow {
+    start: number;
+    end: number;
+    pinned: boolean;
+}
+interface ShapeBase {
+    cls: string;
+    /** Posición del elemento navegable al que pertenece (para atenuar / resaltar). */
+    item?: number;
+}
+type ChartShape = (ShapeBase & {
+    k: 'rect';
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    rx?: number;
+    fill?: string;
+}) | (ShapeBase & {
+    k: 'path';
+    d: string;
+    fill?: string;
+    stroke?: string;
+    pathLength?: number;
+}) | (ShapeBase & {
+    k: 'circle';
+    cx: number;
+    cy: number;
+    r: number;
+    rActive: number;
+    fill?: string;
+}) | (ShapeBase & {
+    k: 'line';
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    stroke?: string;
+}) | (ShapeBase & {
+    k: 'text';
+    x: number;
+    y: number;
+    text: string;
+    anchor?: 'start' | 'middle' | 'end';
+    baseline?: 'central' | 'auto' | 'hanging';
+    fill?: string;
+});
+/** Zona invisible que recibe el ratón y el clic de un elemento. */
+type ChartHit = {
+    k: 'rect';
+    item: number;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+} | {
+    k: 'path';
+    item: number;
+    d: string;
+};
+interface ChartTooltipRow {
+    label: string;
+    value: string;
+    color: string;
+}
+/** Elemento que se recorre con el teclado y muestra tooltip (categoría, sector, celda…). */
+interface ChartItem {
+    /** Índice que se emite en `itemSelect`. */
+    index: number;
+    label: string;
+    title: string;
+    rows: ChartTooltipRow[];
+    /** Punto de anclaje del tooltip (unidades del SVG). */
+    x: number;
+    y: number;
+    /** Línea guía vertical al activarlo (cartesianos). */
+    cursor?: {
         x: number;
-    }[]>;
-    protected readonly bars: _angular_core.Signal<{
-        key: string;
+        y1: number;
+        y2: number;
+    };
+    /** Valor de X (modo composable): sincroniza el cursor entre gráficas de un grupo. */
+    key?: number;
+}
+interface ChartLegendEntry {
+    index: number;
+    label: string;
+    color: string;
+}
+interface ChartScene {
+    shapes: ChartShape[];
+    /** Datos detrás de la guía del elemento activo (barras, áreas, velas). Se recortan a `clip`. */
+    data?: ChartShape[];
+    /** Formas que van encima de la guía del elemento activo (líneas y puntos). Se recortan a `clip`. */
+    front?: ChartShape[];
+    /** Área de dibujo: recorta los datos (zoom) y sirve para convertir el ratón en posición. */
+    clip?: {
         x: number;
         y: number;
         w: number;
         h: number;
-        color: string;
-        title: string;
-    }[]>;
-    protected readonly lines: _angular_core.Signal<{
-        label: string;
-        color: string;
-        points: {
-            key: string;
-            x: number;
-            y: number;
-            title: string;
+    };
+    /** Hay más datos fuera de la ventana visible (zoom activo). */
+    zoomed?: boolean;
+    /** Dominio completo del eje X y la parte visible (modo composable). */
+    domain?: readonly [number, number];
+    window?: readonly [number, number];
+    /** Distancia mínima entre dos valores de X: limita el zoom a unos pocos datos. */
+    step?: number;
+    hits: ChartHit[];
+    items: ChartItem[];
+    /** Columnas de una cuadrícula navegable (mapa de calor): flechas arriba / abajo saltan filas. */
+    columns?: number;
+    legend: ChartLegendEntry[];
+    table: {
+        head: string[] | null;
+        rows: {
+            label: string;
+            cells: string[];
         }[];
-        pointsAttr: string;
-    }[]>;
-    protected readonly circularRadius: _angular_core.Signal<38 | 62>;
-    protected readonly circularSegments: _angular_core.Signal<{
-        key: string;
-        color: string;
-        dashArray: string;
-        dashOffset: string;
+    };
+    center?: {
+        x: number;
+        y: number;
+        text: string;
+        sub?: string;
+    };
+}
+
+/**
+ * Chart de CaribeNG: gráficos SVG accesibles y sin dependencias.
+ *
+ * - Cartesianos: `bar`, `horizontalBar`, `line`, `area` y `waterfall` (cascada).
+ * - Circulares: `pie`, `doughnut`, `radialBar` y `gauge` (medidor).
+ * - Radiales: `radar` y `polarArea`. Matrices: `heatmap` y `treemap`.
+ * - `stacked` apila barras y áreas; en `bar`, una serie con `type: 'line'` se dibuja como línea.
+ * - `sparkline` quita ejes, rejilla y leyenda (minigráfico para tarjetas o tablas).
+ * - `valueFormat` y `locale` formatean los valores.
+ * - Tooltip con ratón y teclado (flechas), leyenda que oculta series y una tabla de
+ *   datos para lectores de pantalla.
+ *
+ * Cada tipo lo dibuja un renderer (`renderers/`) que devuelve una escena: formas,
+ * zonas de clic y elementos navegables. Este componente solo la pinta.
+ *
+ * @example
+ * ```html
+ * <cb-chart type="bar" [data]="ventas" [valueFormat]="{ style: 'currency', currency: 'COP' }" />
+ * <cb-chart type="radar" [data]="evaluacion" />
+ * <cb-chart type="gauge" [data]="{ labels: ['Cumplimiento'], datasets: [{ label: 'Meta', data: [72] }] }" />
+ * ```
+ */
+declare class CbChart {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    protected readonly instructionsId: string;
+    protected readonly clipId: string;
+    readonly type: _angular_core.InputSignal<CbChartType>;
+    /**
+     * Datos. En el modo rápido, `{ labels, datasets }`. En el modo composable (con
+     * series hijas como `<cb-chart-line>`), un array de registros.
+     */
+    readonly data: _angular_core.InputSignal<CbChartData | readonly Readonly<Record<string, unknown>>[]>;
+    /** Alto del gráfico en píxeles; el ancho se adapta al contenedor. */
+    readonly height: _angular_core.InputSignal<number>;
+    readonly showLegend: _angular_core.InputSignal<boolean>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Apila las series de barras o áreas. */
+    readonly stacked: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Minigráfico sin ejes, rejilla ni leyenda. */
+    readonly sparkline: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Formato de los valores (ejes, tooltip y tabla). */
+    readonly valueFormat: _angular_core.InputSignal<CbChartValueFormat | undefined>;
+    /** Locale BCP 47 para el formato (por defecto, el del navegador). */
+    readonly locale: _angular_core.InputSignal<string | undefined>;
+    /** Valor mínimo del medidor (`gauge`). */
+    readonly min: _angular_core.InputSignal<number>;
+    /** Valor que representa el 100 % en `radialBar` y el máximo del medidor (`gauge`). */
+    readonly max: _angular_core.InputSignal<number>;
+    /** Franjas de color del medidor (`gauge`), p. ej. `[{ from: 0, to: 40, color: 'red' }]`. */
+    readonly bands: _angular_core.InputSignal<readonly CbChartBand[]>;
+    /** Animación de entrada (se desactiva sola con `prefers-reduced-motion`). */
+    readonly animate: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Modo composable: zoom y desplazamiento en el eje X (rueda, arrastre, `+` / `-` / `0`). */
+    readonly zoom: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Modo composable: muestra al inicio solo los últimos `xWindow` del eje X (ms en un
+     * eje de tiempo, categorías…). Con datos en tiempo real la vista avanza con ellos.
+     */
+    readonly xWindow: _angular_core.InputSignal<number | undefined>;
+    /** Clic o Enter sobre una categoría, un segmento o una celda. */
+    readonly itemSelect: _angular_core.OutputEmitterRef<CbChartItemEvent>;
+    /** Series, ejes y referencias declarados como hijos (modo composable). */
+    private readonly seriesDefs;
+    private readonly axisDefs;
+    private readonly lineDefs;
+    private readonly bandDefs;
+    private readonly noteDefs;
+    /** Posición del elemento activo en `scene().items`. */
+    protected readonly active: _angular_core.WritableSignal<number | null>;
+    /** Series o elementos ocultos desde la leyenda. */
+    protected readonly hidden: _angular_core.WritableSignal<ReadonlySet<number>>;
+    /** Ventana elegida con zoom (modo composable, sin grupo). */
+    private readonly localWindow;
+    /** Ancho real del área del gráfico (px); hasta medirlo, el ancho lógico por defecto. */
+    protected readonly width: _angular_core.WritableSignal<number>;
+    private readonly plotRef;
+    protected dragging: {
+        x: number;
+        window: readonly [number, number];
+    } | null;
+    private readonly group;
+    private readonly document;
+    private readonly host;
+    constructor();
+    protected readonly name: _angular_core.Signal<string>;
+    protected readonly composed: _angular_core.Signal<boolean>;
+    protected readonly zoomEnabled: _angular_core.Signal<boolean>;
+    /** Datos del modo rápido (en el composable, `data` es un array de registros). */
+    private readonly chartData;
+    protected readonly isEmpty: _angular_core.Signal<boolean>;
+    private readonly numberFormat;
+    private readonly percentFormat;
+    private formatter;
+    /** Lo declarado en los hijos, como datos planos para el renderer. */
+    private readonly composedSpec;
+    private readonly context;
+    /** Lo que se dibuja: lo calcula el renderer del tipo (o el composable si hay series hijas). */
+    protected readonly scene: _angular_core.Signal<ChartScene>;
+    /**
+     * Elemento resaltado: el activo de este gráfico o, en un grupo, el del mismo
+     * valor de X activo en otra gráfica.
+     */
+    protected readonly shown: _angular_core.Signal<number | null>;
+    protected readonly activeItem: _angular_core.Signal<ChartItem | null>;
+    protected readonly tooltip: _angular_core.Signal<{
         title: string;
-    }[]>;
-    protected readonly legendItems: _angular_core.Signal<{
-        label: string;
-        color: string;
-    }[]>;
+        rows: ChartTooltipRow[];
+        left: number;
+        top: number;
+    } | null>;
+    /** Ventana elegida con zoom: la del grupo si lo hay, si no la propia. */
+    protected readonly window: _angular_core.Signal<CbChartWindow | null>;
+    private setWindow;
+    /** Acerca (`factor` < 1) o aleja la ventana alrededor de `anchor` (0–1 dentro del área). */
+    zoomBy(factor: number, anchor?: number): void;
+    /** Vuelve a la vista inicial (todo, o los últimos `xWindow`). */
+    resetZoom(): void;
+    /** Posición del ratón dentro del área de dibujo (0–1). */
+    private pointerFraction;
+    protected onWheel(event: WheelEvent): void;
+    protected onPointerDown(event: PointerEvent): void;
+    protected onPointerMove(event: PointerEvent): void;
+    /** Lo que anuncia el lector de pantalla al recorrer el gráfico con el teclado (solo el propio). */
+    protected readonly announcement: _angular_core.Signal<string>;
+    /** Clases de una forma: atenuada si hay otro elemento activo, resaltada si es el activo. */
+    protected shapeClass(s: ChartShape): string;
+    /**
+     * El gráfico como SVG autocontenido: estilos y colores resueltos (incluido el tema),
+     * fondo y leyenda. Solo en el navegador.
+     */
+    toSvg(): string;
+    /** El gráfico como imagen PNG (`scale` multiplica la resolución). */
+    toPng(scale?: number): Promise<Blob>;
+    /** Descarga el gráfico como PNG o SVG. */
+    download(format?: 'png' | 'svg', fileName?: string): Promise<void>;
+    protected hover(item: number | undefined): void;
+    protected onFocus(): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    protected select(position: number | undefined): void;
+    /** Oculta o muestra una serie (o un elemento en los circulares). */
+    toggle(index: number): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbChart, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbChart, "cb-chart", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbChart, "cb-chart", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "stacked": { "alias": "stacked"; "required": false; "isSignal": true; }; "sparkline": { "alias": "sparkline"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "bands": { "alias": "bands"; "required": false; "isSignal": true; }; "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "zoom": { "alias": "zoom"; "required": false; "isSignal": true; }; "xWindow": { "alias": "xWindow"; "required": false; "isSignal": true; }; }, { "itemSelect": "itemSelect"; }, ["seriesDefs", "axisDefs", "lineDefs", "bandDefs", "noteDefs"], never, true, never>;
+}
+
+/** Un registro de datos del modo composable: cada serie elige sus campos. */
+type CbChartRecord = Readonly<Record<string, unknown>>;
+/** Forma de unir los puntos de una línea o un área. */
+type CbChartCurve = 'linear' | 'smooth' | 'step';
+/** Eje vertical al que se asocia una serie o una referencia. */
+type CbChartYAxis = 'left' | 'right';
+/** Tipo de eje: `auto` lo deduce de los datos (texto → categorías, número → lineal, `Date` → tiempo). */
+type CbChartAxisType = 'auto' | 'category' | 'linear' | 'time';
+/** Valor de una referencia: número en un eje Y; número, fecha o categoría en el eje X. */
+type CbChartRefValue = number | string | Date;
+/**
+ * Base de las series del modo composable (`<cb-chart>` con hijos). Cada serie lee
+ * de `data` (la del gráfico o la suya) los campos que indique.
+ */
+declare abstract class CbChartSeries {
+    abstract readonly kind: 'bar' | 'line' | 'area' | 'scatter' | 'rangeArea' | 'candlestick';
+    /** Nombre en la leyenda, el tooltip y la tabla accesible. */
+    readonly name: _angular_core.InputSignal<string>;
+    /** Campo con el valor del eje X (categoría, número o fecha). */
+    readonly x: _angular_core.InputSignal<string>;
+    readonly color: _angular_core.InputSignal<string | undefined>;
+    /** Eje Y de la serie. */
+    readonly axis: _angular_core.InputSignal<CbChartYAxis>;
+    /** Datos propios; si se omite, usa los del gráfico. */
+    readonly data: _angular_core.InputSignal<readonly Readonly<Record<string, unknown>>[] | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbChartSeries, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CbChartSeries, never, never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "x": { "alias": "x"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "axis": { "alias": "axis"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** Barras. Las series con el mismo `stack` se apilan. */
+declare class CbChartBar extends CbChartSeries {
+    readonly kind: "bar";
+    /** Campo del valor. */
+    readonly y: _angular_core.InputSignal<string>;
+    /** Grupo de apilado: las barras con el mismo valor se apilan. */
+    readonly stack: _angular_core.InputSignal<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbChartBar, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CbChartBar, "cb-chart-bar", never, { "y": { "alias": "y"; "required": false; "isSignal": true; }; "stack": { "alias": "stack"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** Línea. */
+declare class CbChartLine extends CbChartSeries {
+    readonly kind: "line";
+    readonly y: _angular_core.InputSignal<string>;
+    readonly curve: _angular_core.InputSignal<CbChartCurve>;
+    /** Trazo discontinuo (p. ej. para una proyección o una media). */
+    readonly dashed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Dibuja un punto en cada dato. */
+    readonly points: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbChartLine, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CbChartLine, "cb-chart-line", never, { "y": { "alias": "y"; "required": false; "isSignal": true; }; "curve": { "alias": "curve"; "required": false; "isSignal": true; }; "dashed": { "alias": "dashed"; "required": false; "isSignal": true; }; "points": { "alias": "points"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** Área: una línea con relleno hasta el 0 (o hasta la serie de debajo si se apila). */
+declare class CbChartArea extends CbChartSeries {
+    readonly kind: "area";
+    readonly y: _angular_core.InputSignal<string>;
+    readonly curve: _angular_core.InputSignal<CbChartCurve>;
+    /** Grupo de apilado: las áreas con el mismo valor se apilan. */
+    readonly stack: _angular_core.InputSignal<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbChartArea, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CbChartArea, "cb-chart-area", never, { "y": { "alias": "y"; "required": false; "isSignal": true; }; "curve": { "alias": "curve"; "required": false; "isSignal": true; }; "stack": { "alias": "stack"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** Dispersión: un punto por registro. */
+declare class CbChartScatter extends CbChartSeries {
+    readonly kind: "scatter";
+    readonly y: _angular_core.InputSignal<string>;
+    /** Radio de los puntos. */
+    readonly size: _angular_core.InputSignalWithTransform<number, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbChartScatter, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CbChartScatter, "cb-chart-scatter", never, { "y": { "alias": "y"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** Banda entre un mínimo y un máximo (rango, intervalo de confianza…). */
+declare class CbChartRangeArea extends CbChartSeries {
+    readonly kind: "rangeArea";
+    readonly low: _angular_core.InputSignal<string>;
+    readonly high: _angular_core.InputSignal<string>;
+    readonly curve: _angular_core.InputSignal<CbChartCurve>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbChartRangeArea, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CbChartRangeArea, "cb-chart-range-area", never, { "low": { "alias": "low"; "required": false; "isSignal": true; }; "high": { "alias": "high"; "required": false; "isSignal": true; }; "curve": { "alias": "curve"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** Velas japonesas u OHLC (apertura, máximo, mínimo y cierre). */
+declare class CbChartCandlestick extends CbChartSeries {
+    readonly kind: "candlestick";
+    readonly open: _angular_core.InputSignal<string>;
+    readonly high: _angular_core.InputSignal<string>;
+    readonly low: _angular_core.InputSignal<string>;
+    readonly close: _angular_core.InputSignal<string>;
+    /** `candle`: cuerpo relleno; `ohlc`: barra con marcas de apertura y cierre. */
+    readonly variant: _angular_core.InputSignal<"candle" | "ohlc">;
+    /** Color cuando cierra por encima de la apertura. */
+    readonly upColor: _angular_core.InputSignal<string>;
+    /** Color cuando cierra por debajo. */
+    readonly downColor: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbChartCandlestick, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CbChartCandlestick, "cb-chart-candlestick", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "high": { "alias": "high"; "required": false; "isSignal": true; }; "low": { "alias": "low"; "required": false; "isSignal": true; }; "close": { "alias": "close"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "upColor": { "alias": "upColor"; "required": false; "isSignal": true; }; "downColor": { "alias": "downColor"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** Configuración de un eje: posición, tipo, rango, formato y título. */
+declare class CbChartAxis {
+    /** `bottom` es el eje X; `left` y `right`, los ejes Y. */
+    readonly position: _angular_core.InputSignal<"bottom" | CbChartYAxis>;
+    /** Solo para el eje X. */
+    readonly type: _angular_core.InputSignal<CbChartAxisType>;
+    readonly min: _angular_core.InputSignal<number | undefined>;
+    readonly max: _angular_core.InputSignal<number | undefined>;
+    /** Título del eje. */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Formato de las marcas (por defecto, el `valueFormat` del gráfico en los ejes Y). */
+    readonly format: _angular_core.InputSignal<CbChartValueFormat | undefined>;
+    /** Líneas de rejilla en las marcas (por defecto, solo el eje Y principal). */
+    readonly grid: _angular_core.InputSignal<boolean | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbChartAxis, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CbChartAxis, "cb-chart-axis", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "grid": { "alias": "grid"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** Línea de referencia (meta, umbral, media…) en un valor de un eje. */
+declare class CbChartReferenceLine {
+    readonly value: _angular_core.InputSignal<CbChartRefValue>;
+    /** `left` / `right`: línea horizontal en ese eje Y; `x`: línea vertical. */
+    readonly axis: _angular_core.InputSignal<"x" | CbChartYAxis>;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly color: _angular_core.InputSignal<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbChartReferenceLine, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CbChartReferenceLine, "cb-chart-reference-line", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "axis": { "alias": "axis"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** Franja de referencia entre dos valores de un eje (rango objetivo, horario…). */
+declare class CbChartReferenceBand {
+    readonly from: _angular_core.InputSignal<CbChartRefValue>;
+    readonly to: _angular_core.InputSignal<CbChartRefValue>;
+    readonly axis: _angular_core.InputSignal<"x" | CbChartYAxis>;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly color: _angular_core.InputSignal<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbChartReferenceBand, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CbChartReferenceBand, "cb-chart-reference-band", never, { "from": { "alias": "from"; "required": true; "isSignal": true; }; "to": { "alias": "to"; "required": true; "isSignal": true; }; "axis": { "alias": "axis"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** Anotación: marca un punto (x, y) con una etiqueta, p. ej. "Máximo de la sesión". */
+declare class CbChartAnnotation {
+    /** Valor de X (número, fecha o categoría). */
+    readonly x: _angular_core.InputSignal<CbChartRefValue>;
+    /** Valor en el eje Y. */
+    readonly y: _angular_core.InputSignal<number>;
+    readonly axis: _angular_core.InputSignal<CbChartYAxis>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly color: _angular_core.InputSignal<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbChartAnnotation, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CbChartAnnotation, "cb-chart-annotation", never, { "x": { "alias": "x"; "required": true; "isSignal": true; }; "y": { "alias": "y"; "required": true; "isSignal": true; }; "axis": { "alias": "axis"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Estado compartido por las gráficas de un `<cb-chart-group>`. */
+declare class CbChartGroupState {
+    /** Valor de X activo (cursor) en cualquiera de las gráficas. */
+    readonly key: _angular_core.WritableSignal<number | null>;
+    /** Ventana visible común del eje X (zoom y desplazamiento). */
+    readonly window: _angular_core.WritableSignal<CbChartWindow | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbChartGroupState, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<CbChartGroupState>;
+}
+/**
+ * Agrupa gráficas del modo composable que comparten el eje X: el cursor, el
+ * tooltip y el zoom se sincronizan (p. ej. precio, volumen y spread).
+ *
+ * @example
+ * ```html
+ * <cb-chart-group ariaLabel="PRIM/USD">
+ *   <cb-chart [data]="velas" zoom [height]="260"><cb-chart-candlestick x="ts" /></cb-chart>
+ *   <cb-chart [data]="velas" zoom [height]="100"><cb-chart-bar x="ts" y="volumen" /></cb-chart>
+ * </cb-chart-group>
+ * ```
+ */
+declare class CbChartGroup {
+    /** Nombre accesible del conjunto. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbChartGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbChartGroup, "cb-chart-group", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-export { CbChart };
-export type { CbChartData, CbChartDataset, CbChartType };
+export { CbChart, CbChartAnnotation, CbChartArea, CbChartAxis, CbChartBar, CbChartCandlestick, CbChartGroup, CbChartGroupState, CbChartLine, CbChartRangeArea, CbChartReferenceBand, CbChartReferenceLine, CbChartScatter, CbChartSeries };
+export type { CbChartAxisType, CbChartBand, CbChartCurve, CbChartData, CbChartDataset, CbChartItemEvent, CbChartRecord, CbChartRefValue, CbChartType, CbChartValueFormat, CbChartWindow, CbChartYAxis };
 //# sourceMappingURL=caribeng-ui-chart.d.ts.map

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

@@ -1,10 +1,16 @@
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+import { cbFormat } from '@caribeng/ui';
 
 /**
  * Chip de CaribeNG: píldora compacta para representar entidades, filtros o etiquetas
  * individuales con imagen, icono y botón de cierre opcional.
  */
 declare class CbChip {
+    /** 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 label: _angular_core.InputSignal<string>;
     readonly icon: _angular_core.InputSignal<string>;
     readonly image: _angular_core.InputSignal<string>;

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

@@ -1,6 +1,6 @@
-import * as _caribeng_ui from '@caribeng/ui';
-import { CbSize } from '@caribeng/ui';
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+import { cbFormat, CbSize } from '@caribeng/ui';
 import { ControlValueAccessor } from '@angular/forms';
 
 /**
@@ -13,6 +13,10 @@ import { ControlValueAccessor } from '@angular/forms';
  * ```
  */
 declare class CbChips 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 value: _angular_core.ModelSignal<string[]>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly size: _angular_core.InputSignal<CbSize>;

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

@@ -1,6 +1,6 @@
+import * as _angular_core from '@angular/core';
 import * as _caribeng_ui from '@caribeng/ui';
 import { CbSize } from '@caribeng/ui';
-import * as _angular_core from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { ConnectedPosition } from '@angular/cdk/overlay';
 
@@ -15,6 +15,8 @@ import { ConnectedPosition } from '@angular/cdk/overlay';
  * ```
  */
 declare class CbColorPicker implements ControlValueAccessor {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
     /** Color seleccionado (hex `#rrggbb`). Two-way opcional fuera de Forms. */
     readonly value: _angular_core.ModelSignal<string>;
     readonly size: _angular_core.InputSignal<CbSize>;

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

@@ -1,16 +1,35 @@
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
 
 /**
  * Diálogo de confirmación (`role="alertdialog"`) con trampa de foco, cierre con
- * Escape (equivale a cancelar) y restauración del foco al cerrarse.
+ * Escape (equivale a cancelar) y restauración del foco al cerrarse. Al abrirse,
+ * el foco va al botón de cancelar (la opción segura).
+ *
+ * @example
+ * ```html
+ * <cb-confirm-dialog
+ *   [(visible)]="confirmar"
+ *   header="Eliminar cuenta"
+ *   message="Esta acción no se puede deshacer."
+ *   acceptSeverity="danger"
+ *   (accepted)="eliminar()"
+ * />
+ * ```
  */
 declare class CbConfirmDialog {
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
     private readonly document;
+    /** Visibilidad (two-way). */
     readonly visible: _angular_core.ModelSignal<boolean>;
-    readonly header: _angular_core.InputSignal<string>;
-    readonly message: _angular_core.InputSignal<string>;
-    readonly acceptLabel: _angular_core.InputSignal<string>;
-    readonly rejectLabel: _angular_core.InputSignal<string>;
+    /** Título. Por defecto, "Confirmar" del idioma activo. */
+    readonly header: _angular_core.InputSignal<string | undefined>;
+    /** Mensaje. Por defecto, "¿Deseas continuar?" del idioma activo. */
+    readonly message: _angular_core.InputSignal<string | undefined>;
+    readonly acceptLabel: _angular_core.InputSignal<string | undefined>;
+    readonly rejectLabel: _angular_core.InputSignal<string | undefined>;
+    /** Severidad del botón de aceptar (p. ej. `danger` para acciones destructivas). */
+    readonly acceptSeverity: _angular_core.InputSignal<"primary" | "danger" | "success" | "warning">;
     readonly accepted: _angular_core.OutputEmitterRef<void>;
     readonly rejected: _angular_core.OutputEmitterRef<void>;
     protected readonly titleId: string;
@@ -22,7 +41,7 @@ declare class CbConfirmDialog {
     protected confirm(): void;
     protected reject(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbConfirmDialog, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbConfirmDialog, "cb-confirm-dialog", never, { "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "acceptLabel": { "alias": "acceptLabel"; "required": false; "isSignal": true; }; "rejectLabel": { "alias": "rejectLabel"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; "accepted": "accepted"; "rejected": "rejected"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbConfirmDialog, "cb-confirm-dialog", never, { "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "acceptLabel": { "alias": "acceptLabel"; "required": false; "isSignal": true; }; "rejectLabel": { "alias": "rejectLabel"; "required": false; "isSignal": true; }; "acceptSeverity": { "alias": "acceptSeverity"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; "accepted": "accepted"; "rejected": "rejected"; }, never, never, true, never>;
 }
 
 export { CbConfirmDialog };