@caribeng/ui 22.1.1 → 22.4.0

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

@@ -1,28 +1,79 @@
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+import { CbConfirmSeverity } 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()"
+ * />
+ * ```
+ *
+ * Con `service` muestra las confirmaciones pedidas desde código con
+ * `CbConfirmationService` (como `ConfirmationService` de PrimeNG):
+ *
+ * ```html
+ * <cb-confirm-dialog service />
+ * ```
+ * ```ts
+ * inject(CbConfirmationService).confirm({ message: '¿Eliminar?', accept: () => this.eliminar() });
+ * ```
  */
 declare class CbConfirmDialog {
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
     private readonly document;
+    private readonly confirmation;
+    /** 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<CbConfirmSeverity>;
+    /**
+     * Muestra las confirmaciones pedidas con `CbConfirmationService`. Sin él, el
+     * componente solo responde a `[(visible)]` (así un diálogo declarativo no se
+     * abre con las confirmaciones de otra parte de la app).
+     */
+    readonly service: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Con `service`: atiende solo las confirmaciones con este mismo `key` (o sin key si no se indica). */
+    readonly key: _angular_core.InputSignal<string | undefined>;
     readonly accepted: _angular_core.OutputEmitterRef<void>;
     readonly rejected: _angular_core.OutputEmitterRef<void>;
     protected readonly titleId: string;
     protected readonly messageId: string;
+    /** Confirmación pedida con `CbConfirmationService` que se está mostrando. */
+    private readonly active;
+    /** Textos visibles: los de la confirmación del servicio, si la hay; si no, los inputs y el idioma. */
+    protected readonly shown: _angular_core.Signal<{
+        header: string;
+        message: string;
+        acceptLabel: string;
+        rejectLabel: string;
+        acceptSeverity: CbConfirmSeverity;
+    }>;
     /** Elemento enfocado antes de abrir; recibe el foco de vuelta al cerrar. */
     private previouslyFocused;
     constructor();
     protected onEscape(): void;
     protected confirm(): void;
     protected reject(): void;
+    /** Cierra y, si venía del servicio, lo libera y ejecuta su callback (que puede pedir otra confirmación). */
+    private finish;
     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; }; "service": { "alias": "service"; "required": false; "isSignal": true; }; "key": { "alias": "key"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; "accepted": "accepted"; "rejected": "rejected"; }, never, never, true, never>;
 }
 
 export { CbConfirmDialog };

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

@@ -1,16 +1,85 @@
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+import { CbConfirmSeverity } from '@caribeng/ui';
 
+/**
+ * Confirmación breve de CaribeNG. Ábrela anclada al botón que la dispara con
+ * `confirm($event)` (como PrimeNG), o en línea con `[(visible)]`. Escape o un
+ * clic fuera la cancelan; el foco vuelve al disparador al cerrarse.
+ *
+ * @example
+ * ```html
+ * <cb-button severity="danger" (click)="borrar.confirm($event)">Eliminar</cb-button>
+ * <cb-confirm-popup #borrar message="¿Eliminar este archivo?" (accepted)="eliminar()" />
+ * ```
+ *
+ * Con `service` muestra las confirmaciones de `CbConfirmationService` que traen
+ * `target` (como `ConfirmationService` de PrimeNG):
+ *
+ * ```html
+ * <cb-button (click)="borrar($event)">Eliminar</cb-button>
+ * <cb-confirm-popup service />
+ * ```
+ * ```ts
+ * borrar(event: Event) {
+ *   inject(CbConfirmationService).confirm({ target: event.currentTarget, message: '¿Eliminar?', accept: () => this.eliminar() });
+ * }
+ * ```
+ */
 declare class CbConfirmPopup {
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    private readonly overlay;
+    private readonly vcr;
+    private readonly injector;
+    private readonly confirmation;
+    protected readonly messageId: string;
+    /** Visibilidad (two-way). Con `[(visible)]` se muestra en línea. */
     readonly visible: _angular_core.ModelSignal<boolean>;
-    readonly message: _angular_core.InputSignal<string>;
-    readonly acceptLabel: _angular_core.InputSignal<string>;
-    readonly rejectLabel: _angular_core.InputSignal<string>;
+    /** Pregunta a confirmar. Por defecto, la 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<CbConfirmSeverity>;
+    /**
+     * Muestra las confirmaciones pedidas con `CbConfirmationService`. Sin él, el
+     * componente solo responde a `[(visible)]` (así un diálogo declarativo no se
+     * abre con las confirmaciones de otra parte de la app).
+     */
+    readonly service: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Con `service`: atiende solo las confirmaciones con este mismo `key` (o sin key si no se indica). */
+    readonly key: _angular_core.InputSignal<string | undefined>;
     readonly accepted: _angular_core.OutputEmitterRef<void>;
     readonly rejected: _angular_core.OutputEmitterRef<void>;
-    protected confirm(): void;
+    private readonly panel;
+    /** Abierta como overlay anclado a un disparador. */
+    protected readonly anchored: _angular_core.WritableSignal<boolean>;
+    private overlayRef;
+    private trigger;
+    /** Confirmación pedida con `CbConfirmationService` que se está mostrando. */
+    private readonly active;
+    /** Textos visibles: los de la confirmación del servicio, si la hay; si no, los inputs y el idioma. */
+    protected readonly shown: _angular_core.Signal<{
+        message: string;
+        acceptLabel: string;
+        rejectLabel: string;
+        acceptSeverity: CbConfirmSeverity;
+    }>;
+    constructor();
+    private readonly positions;
+    /** Abre la confirmación anclada al elemento que recibió el evento. */
+    confirm(event: Event): void;
+    /** Abre la confirmación anclada a `target`. */
+    show(target: HTMLElement): void;
+    protected accept(): void;
     protected reject(): void;
+    /** Cierra y, si venía del servicio, lo libera y ejecuta su callback (que puede pedir otra confirmación). */
+    private finish;
+    private close;
+    /** Quita el overlay sin devolver el foco. */
+    private dispose;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbConfirmPopup, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbConfirmPopup, "cb-confirm-popup", never, { "visible": { "alias": "visible"; "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<CbConfirmPopup, "cb-confirm-popup", never, { "visible": { "alias": "visible"; "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; }; "service": { "alias": "service"; "required": false; "isSignal": true; }; "key": { "alias": "key"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; "accepted": "accepted"; "rejected": "rejected"; }, never, never, true, never>;
 }
 
 export { CbConfirmPopup };

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

@@ -1,18 +1,28 @@
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+import { CbMenuCommandEvent } from '@caribeng/ui';
 
 interface CbContextMenuItem {
     label: string;
     icon?: string;
     disabled?: boolean;
     separator?: boolean;
+    /** Acción al elegir el item (además del evento de selección), como `command` en PrimeNG. */
+    command?: (event: CbMenuCommandEvent<CbContextMenuItem>) => void;
+    /** `false` oculta el item. */
+    visible?: boolean;
 }
 /** Context menu that opens at the pointer position on right click. */
 declare class CbContextMenu {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
     private readonly overlay;
     private readonly vcr;
     private readonly destroyRef;
     readonly items: _angular_core.InputSignal<readonly CbContextMenuItem[]>;
-    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Items sin los de `visible: false`. */
+    protected readonly visibleItems: _angular_core.Signal<CbContextMenuItem[]>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly itemSelect: _angular_core.OutputEmitterRef<CbContextMenuItem>;
     private readonly content;
     private overlayRef;

package/types/caribeng-ui-copy-button.d.ts

@@ -0,0 +1,90 @@
+import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+import { CbSeverity, CbSize } from '@caribeng/ui';
+import { CbButtonVariant } from '@caribeng/ui/button';
+
+/**
+ * Botón que copia un texto al portapapeles y confirma con un ✓ durante unos
+ * segundos. El resultado se anuncia a los lectores de pantalla.
+ *
+ * @example
+ * ```html
+ * <span>0012 3456 7890</span> <cb-copy-button value="001234567890" />
+ * <cb-copy-button [value]="apiKey" showLabel variant="outlined" />
+ * ```
+ */
+declare class CbCopyButton {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    private readonly clipboard;
+    private timer;
+    /** Texto que se copia. */
+    readonly value: _angular_core.InputSignal<string | number | null | undefined>;
+    /** Muestra el texto ("Copiar" / "Copiado") junto al icono. */
+    readonly showLabel: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Texto del botón y nombre accesible. Por defecto, "Copiar" del idioma activo. */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Texto tras copiar. Por defecto, "Copiado". */
+    readonly copiedLabel: _angular_core.InputSignal<string | undefined>;
+    /** Milisegundos que dura la confirmación. */
+    readonly timeout: _angular_core.InputSignal<number>;
+    readonly variant: _angular_core.InputSignal<CbButtonVariant>;
+    readonly severity: _angular_core.InputSignal<CbSeverity>;
+    readonly size: _angular_core.InputSignal<CbSize>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Texto copiado. */
+    readonly copied: _angular_core.OutputEmitterRef<string>;
+    /** El navegador no permitió copiar. */
+    readonly copyError: _angular_core.OutputEmitterRef<string>;
+    protected readonly state: _angular_core.WritableSignal<"idle" | "copied" | "error">;
+    protected readonly buttonLabel: _angular_core.Signal<string>;
+    protected readonly visibleLabel: _angular_core.Signal<string>;
+    protected readonly announcement: _angular_core.Signal<string>;
+    protected readonly iconSize: _angular_core.Signal<18 | 14 | 16>;
+    constructor();
+    /** Copia el valor y muestra la confirmación. Resuelve `true` si lo consiguió. */
+    copy(): Promise<boolean>;
+    private clearTimer;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbCopyButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbCopyButton, "cb-copy-button", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "copiedLabel": { "alias": "copiedLabel"; "required": false; "isSignal": true; }; "timeout": { "alias": "timeout"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "severity": { "alias": "severity"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "copied": "copied"; "copyError": "copyError"; }, never, never, true, never>;
+}
+
+/**
+ * Copia un texto al portapapeles al pulsar el elemento (botón, enlace, icono…).
+ * Para el aviso visual usa `cb-copy-button`, o reacciona a `copied`.
+ *
+ * @example
+ * ```html
+ * <button type="button" [cbCopy]="cuenta" (copied)="toast.add({ summary: 'Copiado' })">Copiar</button>
+ * ```
+ */
+declare class CbCopy {
+    private readonly clipboard;
+    /** Texto que se copia. */
+    readonly cbCopy: _angular_core.InputSignal<string | number | null | undefined>;
+    /** Texto copiado. */
+    readonly copied: _angular_core.OutputEmitterRef<string>;
+    /** El navegador no permitió copiar. */
+    readonly copyError: _angular_core.OutputEmitterRef<string>;
+    /** Copia el texto. Resuelve `true` si lo consiguió. */
+    copy(): Promise<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbCopy, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CbCopy, "[cbCopy]", never, { "cbCopy": { "alias": "cbCopy"; "required": false; "isSignal": true; }; }, { "copied": "copied"; "copyError": "copyError"; }, never, never, true, never>;
+}
+
+/**
+ * Portapapeles de CaribeNG. Usa la API asíncrona del navegador y, si no está
+ * disponible (HTTP sin contexto seguro, navegadores antiguos), un textarea
+ * temporal con `execCommand('copy')`.
+ */
+declare class CbClipboard {
+    private readonly doc;
+    /** Copia `text`. Resuelve `true` si se copió y `false` si el navegador lo impidió. */
+    copy(text: string): Promise<boolean>;
+    private copyWithTextarea;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbClipboard, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<CbClipboard>;
+}
+
+export { CbClipboard, CbCopy, CbCopyButton };
+//# sourceMappingURL=caribeng-ui-copy-button.d.ts.map

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

@@ -1,19 +1,79 @@
 import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+import { cbFormat } from '@caribeng/ui';
 
+/** Elemento con la forma de la presentación por defecto (título, categoría y descripción). */
 interface CbDataViewItem {
     id: string | number;
     title: string;
     description?: string;
     category?: string;
 }
+type CbDataViewLayout = 'grid' | 'list';
+/** Contexto de `<ng-template cbDataViewItem let-item let-layout="layout" let-index="index">`. */
+interface CbDataViewItemContext<T = any> {
+    $implicit: T;
+    layout: CbDataViewLayout;
+    index: number;
+}
+/** Plantilla de cada elemento de un `<cb-dataview>`. */
+declare class CbDataViewItemTemplate {
+    readonly template: TemplateRef<CbDataViewItemContext<any>>;
+    static ngTemplateContextGuard(_dir: CbDataViewItemTemplate, ctx: unknown): ctx is CbDataViewItemContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbDataViewItemTemplate, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CbDataViewItemTemplate, "ng-template[cbDataViewItem]", never, {}, {}, never, never, true, never>;
+}
+/** Contenido de la cabecera de un `<cb-dataview>` (título, filtros, acciones…). */
+declare class CbDataViewHeader {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbDataViewHeader, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CbDataViewHeader, "[cbDataViewHeader]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * DataView de CaribeNG: muestra una colección en lista o cuadrícula con la
+ * plantilla que definas, paginación opcional y botones para cambiar la vista.
+ * Sin plantilla, usa una tarjeta con título, categoría, descripción y botón
+ * de selección.
+ *
+ * @example
+ * ```html
+ * <cb-dataview [value]="productos" [(layout)]="vista" [rows]="6" showLayoutToggle>
+ *   <h3 cbDataViewHeader>Productos</h3>
+ *   <ng-template cbDataViewItem let-producto let-layout="layout">
+ *     <app-producto [producto]="producto" [compacto]="layout === 'list'" />
+ *   </ng-template>
+ * </cb-dataview>
+ * ```
+ */
 declare class CbDataView {
-    readonly value: _angular_core.InputSignal<readonly CbDataViewItem[]>;
-    readonly layout: _angular_core.ModelSignal<"grid" | "list">;
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    protected readonly fmt: typeof cbFormat;
+    /** Colección a mostrar. */
+    readonly value: _angular_core.InputSignal<readonly unknown[]>;
+    /** Vista: cuadrícula o lista (two-way). */
+    readonly layout: _angular_core.ModelSignal<CbDataViewLayout>;
+    /** Muestra los botones para cambiar entre lista y cuadrícula. */
+    readonly showLayoutToggle: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Elementos por página; 0 (por defecto) muestra todos sin paginador. */
+    readonly rows: _angular_core.InputSignal<number>;
+    /** Propiedad que identifica cada elemento (para el seguimiento y la selección). */
+    readonly dataKey: _angular_core.InputSignal<string>;
+    /** Elemento seleccionado con la presentación por defecto (two-way). */
     readonly selection: _angular_core.ModelSignal<CbDataViewItem | null>;
-    readonly emptyMessage: _angular_core.InputSignal<string>;
+    /** Mensaje cuando no hay elementos. Por defecto, el del idioma activo. */
+    readonly emptyMessage: _angular_core.InputSignal<string | undefined>;
+    protected readonly itemTemplate: _angular_core.Signal<CbDataViewItemTemplate | undefined>;
+    protected readonly header: _angular_core.Signal<CbDataViewHeader | undefined>;
+    /** Índice del primer elemento de la página actual; vuelve a 0 si cambia la colección. */
+    protected readonly first: _angular_core.WritableSignal<number>;
+    protected readonly page: _angular_core.Signal<readonly unknown[]>;
+    protected trackKey(item: unknown, index: number): unknown;
+    protected isSelected(item: unknown): boolean;
+    protected asItem(item: unknown): CbDataViewItem;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbDataView, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbDataView, "cb-dataview", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; }, { "layout": "layoutChange"; "selection": "selectionChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbDataView, "cb-dataview", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "showLayoutToggle": { "alias": "showLayoutToggle"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; }, { "layout": "layoutChange"; "selection": "selectionChange"; }, ["itemTemplate", "header"], ["[cbDataViewHeader]"], true, never>;
 }
 
-export { CbDataView };
+export { CbDataView, CbDataViewHeader, CbDataViewItemTemplate };
+export type { CbDataViewItem, CbDataViewItemContext, CbDataViewLayout };
 //# sourceMappingURL=caribeng-ui-dataview.d.ts.map