@caribeng/ui 22.4.0 → 22.5.0

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

@@ -0,0 +1,32 @@
+import * as _angular_core from '@angular/core';
+
+/** Filas que ocupa un elemento de `height` px con un hueco de `gap` px debajo. */
+declare function masonrySpan(height: number, gap: number, row?: number): number;
+/**
+ * Masonry de CaribeNG: reparte los elementos proyectados en columnas de alturas distintas, sin
+ * huecos, como un tablero de Pinterest. Usa CSS Grid y mide la altura de cada elemento (también
+ * si cambia, p. ej. al cargar una imagen), así que el orden del DOM —el que siguen el teclado y
+ * los lectores de pantalla— es el orden visual por filas, a diferencia de las columnas de CSS.
+ *
+ * @example
+ * ```html
+ * <cb-masonry minColumnWidth="14rem" gap="12px" role="list">
+ *   @for (foto of fotos(); track foto.id) { <figure role="listitem">…</figure> }
+ * </cb-masonry>
+ * ```
+ */
+declare class CbMasonry {
+    private readonly host;
+    /** Número fijo de columnas (0 = las que quepan con `minColumnWidth`). */
+    readonly columns: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Ancho mínimo de columna cuando `columns` es 0. */
+    readonly minColumnWidth: _angular_core.InputSignal<string>;
+    /** Separación entre elementos (cualquier longitud CSS). */
+    readonly gap: _angular_core.InputSignal<string>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbMasonry, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbMasonry, "cb-masonry", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "minColumnWidth": { "alias": "minColumnWidth"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { CbMasonry, masonrySpan as cbMasonrySpan };
+//# sourceMappingURL=caribeng-ui-masonry.d.ts.map

package/types/caribeng-ui-media-player.d.ts

@@ -0,0 +1,140 @@
+import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+import { cbFormat } from '@caribeng/ui';
+
+/** Fuente del medio (varias para que el navegador elija el formato que soporte). */
+interface CbMediaSource {
+    readonly src: string;
+    /** Tipo MIME (`video/mp4`, `audio/mpeg`…). */
+    readonly type?: string;
+}
+/** Pista de texto: subtítulos, subtítulos para personas sordas (`captions`) o descripciones. */
+interface CbMediaTrack {
+    /** Archivo WebVTT. */
+    readonly src: string;
+    readonly kind?: 'subtitles' | 'captions' | 'descriptions' | 'chapters';
+    /** Idioma BCP 47 (`es`, `en`). */
+    readonly srclang: string;
+    readonly label: string;
+    readonly default?: boolean;
+}
+/** Velocidades por defecto. */
+declare const CB_MEDIA_RATES: readonly number[];
+/** "1:05" o "1:02:05" (con `total` de una hora o más, siempre con horas). */
+declare function formatTime(seconds: number, total?: number): string;
+
+/** Transcripción del medio (`<div cbMediaTranscript>…</div>`), en un desplegable bajo los controles. */
+declare class CbMediaTranscript {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbMediaTranscript, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CbMediaTranscript, "[cbMediaTranscript]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Reproductor de audio y vídeo de CaribeNG con controles propios y accesibles: reproducir,
+ * avanzar y retroceder, barra de progreso y volumen (sliders con su valor hablado), silencio,
+ * velocidad, subtítulos (WebVTT), imagen en imagen, pantalla completa, atajos de teclado como
+ * los de YouTube y transcripción desplegable. Los controles no se ocultan solos.
+ *
+ * @example
+ * ```html
+ * <cb-media-player src="/video/bienvenida.mp4" poster="/video/poster.jpg" [tracks]="subtitulos" heading="Bienvenida" />
+ * <cb-media-player kind="audio" src="/audio/podcast.mp3" heading="Episodio 12">
+ *   <div cbMediaTranscript>…</div>
+ * </cb-media-player>
+ * ```
+ */
+declare class CbMediaPlayer {
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    protected readonly fmt: typeof cbFormat;
+    private readonly host;
+    private readonly document;
+    protected readonly hintId: string;
+    /** Archivo a reproducir (o `sources` con varios formatos). */
+    readonly src: _angular_core.InputSignal<string>;
+    readonly sources: _angular_core.InputSignal<readonly CbMediaSource[]>;
+    readonly kind: _angular_core.InputSignal<"video" | "audio">;
+    readonly poster: _angular_core.InputSignal<string>;
+    /** Título: nombre del reproductor y, en audio, se muestra encima de los controles (no `title`, que daría un tooltip). */
+    readonly heading: _angular_core.InputSignal<string>;
+    /** Texto secundario en audio (autor, programa…). */
+    readonly subtitle: _angular_core.InputSignal<string>;
+    /** Subtítulos y descripciones (WebVTT). */
+    readonly tracks: _angular_core.InputSignal<readonly CbMediaTrack[]>;
+    readonly rates: _angular_core.InputSignal<readonly number[]>;
+    /** Segundos de los botones de retroceder y avanzar (0 los oculta). */
+    readonly skipSeconds: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly loop: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Empieza silenciado. */
+    readonly startMuted: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly preload: _angular_core.InputSignal<"none" | "metadata" | "auto">;
+    /** `anonymous` para subtítulos o medios de otro dominio con CORS. */
+    readonly crossorigin: _angular_core.InputSignal<"" | "anonymous" | "use-credentials">;
+    readonly errorMessage: _angular_core.InputSignal<string | undefined>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly played: _angular_core.OutputEmitterRef<void>;
+    readonly paused: _angular_core.OutputEmitterRef<void>;
+    readonly ended: _angular_core.OutputEmitterRef<void>;
+    /** Segundo actual, mientras se reproduce. */
+    readonly timeUpdate: _angular_core.OutputEmitterRef<number>;
+    readonly mediaError: _angular_core.OutputEmitterRef<MediaError | null>;
+    protected readonly transcript: _angular_core.Signal<CbMediaTranscript | undefined>;
+    private readonly mediaRef;
+    protected readonly playing: _angular_core.WritableSignal<boolean>;
+    protected readonly started: _angular_core.WritableSignal<boolean>;
+    protected readonly waiting: _angular_core.WritableSignal<boolean>;
+    protected readonly current: _angular_core.WritableSignal<number>;
+    protected readonly duration: _angular_core.WritableSignal<number>;
+    protected readonly volume: _angular_core.WritableSignal<number>;
+    protected readonly muted: _angular_core.WritableSignal<boolean>;
+    protected readonly rate: _angular_core.WritableSignal<number>;
+    protected readonly activeTrack: _angular_core.WritableSignal<number>;
+    protected readonly fullscreen: _angular_core.WritableSignal<boolean>;
+    protected readonly pip: _angular_core.WritableSignal<boolean>;
+    protected readonly error: _angular_core.WritableSignal<boolean>;
+    protected readonly announcement: _angular_core.WritableSignal<string>;
+    protected readonly pipSupported: boolean;
+    protected readonly sourceList: _angular_core.Signal<readonly CbMediaSource[]>;
+    protected readonly label: _angular_core.Signal<string>;
+    protected readonly progress: _angular_core.Signal<number>;
+    protected readonly seekText: _angular_core.Signal<string>;
+    constructor();
+    play(): Promise<void>;
+    pause(): void;
+    toggle(): void;
+    /** Salta al segundo indicado. */
+    seekTo(seconds: number): void;
+    seekBy(seconds: number): void;
+    protected percent(v: number): number;
+    protected timeText(seconds: number): string;
+    protected rateText(r: number): string;
+    private spoken;
+    protected onSeekInput(event: Event): void;
+    /** En la barra de progreso, las flechas saltan 5 s y Re Pág / Av Pág 10 s (el paso nativo sería casi nulo). */
+    protected onSeekKeydown(event: KeyboardEvent): void;
+    protected onVolumeInput(event: Event): void;
+    protected toggleMute(): void;
+    protected setRate(rate: number): void;
+    protected toggleCaptions(): void;
+    protected setTrack(index: number): void;
+    protected toggleFullscreen(): Promise<void>;
+    protected togglePip(): Promise<void>;
+    /** Atajos con el foco en el reproductor, salvo las teclas que ya usa el control enfocado. */
+    protected onKeydown(event: KeyboardEvent): void;
+    protected onPlay(): void;
+    protected onPause(): void;
+    protected onEnded(event: Event): void;
+    protected onTime(event: Event): void;
+    protected sync(event: Event): void;
+    protected onError(event: Event): void;
+    private run;
+    private media;
+    private syncFromMedia;
+    /** Un espacio duro alterno hace que el mismo texto cuente como cambio y se vuelva a anunciar. */
+    private announce;
+    private announceFlip;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbMediaPlayer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbMediaPlayer, "cb-media-player", never, { "src": { "alias": "src"; "required": false; "isSignal": true; }; "sources": { "alias": "sources"; "required": false; "isSignal": true; }; "kind": { "alias": "kind"; "required": false; "isSignal": true; }; "poster": { "alias": "poster"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "tracks": { "alias": "tracks"; "required": false; "isSignal": true; }; "rates": { "alias": "rates"; "required": false; "isSignal": true; }; "skipSeconds": { "alias": "skipSeconds"; "required": false; "isSignal": true; }; "loop": { "alias": "loop"; "required": false; "isSignal": true; }; "startMuted": { "alias": "muted"; "required": false; "isSignal": true; }; "preload": { "alias": "preload"; "required": false; "isSignal": true; }; "crossorigin": { "alias": "crossorigin"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "played": "played"; "paused": "paused"; "ended": "ended"; "timeUpdate": "timeUpdate"; "mediaError": "mediaError"; }, ["transcript"], ["[cbMediaTranscript]"], true, never>;
+}
+
+export { CB_MEDIA_RATES, CbMediaPlayer, CbMediaTranscript, formatTime as cbFormatMediaTime };
+export type { CbMediaSource, CbMediaTrack };
+//# sourceMappingURL=caribeng-ui-media-player.d.ts.map

package/types/caribeng-ui-notification-center.d.ts

@@ -0,0 +1,153 @@
+import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+import { cbFormat } from '@caribeng/ui';
+
+/** Acción propia de una notificación ("Aprobar", "Ver pedido"…). */
+interface CbNotificationAction {
+    readonly id: string;
+    readonly label: string;
+    /** `primary` para la acción principal; el resto se pinta como secundaria. */
+    readonly severity?: 'primary' | 'secondary';
+}
+/** Aviso del centro de notificaciones. */
+interface CbNotification {
+    readonly id: string;
+    readonly title: string;
+    /** Detalle en una o dos líneas. */
+    readonly text?: string;
+    /** Fecha (`Date` o ISO 8601). */
+    readonly date: Date | string;
+    readonly read?: boolean;
+    /** Persona que lo origina: se muestra su foto o sus iniciales en lugar del icono. */
+    readonly person?: {
+        readonly name: string;
+        readonly image?: string;
+    };
+    /** Icono (si no hay `person`); por defecto, según `severity`. */
+    readonly icon?: string;
+    /** Color del icono. */
+    readonly severity?: 'info' | 'success' | 'warning' | 'danger';
+    readonly actions?: readonly CbNotificationAction[];
+}
+/** Acción pulsada en una notificación. */
+interface CbNotificationActionEvent {
+    readonly notification: CbNotification;
+    readonly action: CbNotificationAction;
+}
+/** Qué muestra el panel. */
+type CbNotificationFilter = 'all' | 'unread';
+/** Grupo por fecha: hoy, ayer o antes. */
+type CbNotificationGroupKey = 'today' | 'yesterday' | 'earlier';
+interface CbNotificationGroup {
+    readonly key: CbNotificationGroupKey;
+    readonly items: readonly CbNotification[];
+}
+
+/**
+ * Centro de notificaciones de CaribeNG: campana con el número de avisos sin leer que abre un
+ * panel con la lista agrupada por fecha (Hoy, Ayer, Anteriores), filtro Todas / No leídas,
+ * marcar como leída (una o todas), eliminar y acciones propias en cada aviso. Con `inline` el
+ * panel se pinta en la página, sin campana.
+ *
+ * @example
+ * ```html
+ * <cb-notification-center [(notifications)]="avisos" (itemClick)="abrir($event)" />
+ * ```
+ */
+declare class CbNotificationCenter {
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    protected readonly fmt: typeof cbFormat;
+    private readonly host;
+    private readonly injector;
+    private readonly overlay;
+    private readonly vcr;
+    protected readonly panelId: string;
+    /** Avisos (el panel los ordena del más reciente al más antiguo). Se actualiza al leer o eliminar. */
+    readonly notifications: _angular_core.ModelSignal<readonly CbNotification[]>;
+    /** Todas o solo las no leídas. */
+    readonly filter: _angular_core.ModelSignal<CbNotificationFilter>;
+    /** Panel abierto (sin `inline`). */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Pinta el panel en la página, sin campana ni ventana flotante. */
+    readonly inline: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Agrupa por fecha: Hoy, Ayer y Anteriores. */
+    readonly groupByDate: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Muestra el botón de eliminar en cada aviso. */
+    readonly removable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Cierra el panel al elegir un aviso. */
+    readonly closeOnSelect: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Anuncia a los lectores de pantalla los avisos nuevos sin leer. Si la misma lista se muestra en
+     * dos centros (la campana y una página), desactívalo en uno para no oírlo dos veces.
+     */
+    readonly announceNew: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Muestra el pie con "Ver todas" (`viewAll`). */
+    readonly showViewAll: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** A partir de este número, la campana muestra "99+". */
+    readonly max: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Título del panel (por defecto, "Notificaciones"). No es `title` para no dar un tooltip al componente. */
+    readonly heading: _angular_core.InputSignal<string | undefined>;
+    /** Nivel del título (los grupos usan el siguiente). */
+    readonly headingLevel: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly emptyMessage: _angular_core.InputSignal<string | undefined>;
+    readonly panelWidth: _angular_core.InputSignal<string>;
+    /** Alto máximo de la lista (con scroll). */
+    readonly maxHeight: _angular_core.InputSignal<string>;
+    /** Aviso elegido (ya marcado como leído). */
+    readonly itemClick: _angular_core.OutputEmitterRef<CbNotification>;
+    readonly actionClick: _angular_core.OutputEmitterRef<CbNotificationActionEvent>;
+    /** Un aviso pasó a leído (`read: true`) o a no leído. */
+    readonly readChange: _angular_core.OutputEmitterRef<CbNotification>;
+    readonly markAll: _angular_core.OutputEmitterRef<void>;
+    readonly itemRemove: _angular_core.OutputEmitterRef<CbNotification>;
+    readonly viewAll: _angular_core.OutputEmitterRef<void>;
+    protected readonly unread: _angular_core.Signal<number>;
+    protected readonly badge: _angular_core.Signal<string>;
+    protected readonly bellLabel: _angular_core.Signal<string>;
+    private readonly now;
+    protected readonly groups: _angular_core.Signal<CbNotificationGroup[]>;
+    protected readonly announcement: _angular_core.WritableSignal<string>;
+    private readonly panelTpl;
+    private readonly bell;
+    private overlayRef;
+    /** El foco está (o estaba, si su elemento desapareció) dentro del panel. */
+    protected focusInside: boolean;
+    private readonly positions;
+    constructor();
+    toggle(): void;
+    show(): void;
+    hide(): void;
+    protected initials(name: string): string;
+    protected iconOf(n: CbNotification): string;
+    protected groupLabel(key: CbNotificationGroupKey): string;
+    protected itemId(n: CbNotification): string;
+    protected iso(date: Date | string): string;
+    protected full(date: Date | string): string;
+    protected rel(date: Date | string): string;
+    protected select(n: CbNotification): void;
+    protected runAction(n: CbNotification, action: CbNotificationAction): void;
+    protected setRead(n: CbNotification, read: boolean): void;
+    protected markAllRead(): void;
+    protected remove(n: CbNotification): void;
+    protected onViewAll(): void;
+    /** Escape cierra; Tab fuera del panel lo cierra y devuelve el foco a la campana. */
+    protected onPanelKeydown(event: KeyboardEvent): void;
+    /** Sale el foco hacia otro elemento de la página (no cuando su elemento desaparece). */
+    protected onPanelFocusOut(event: FocusEvent): void;
+    private patch;
+    /** Antes de quitar un aviso de la vista: foco al siguiente (o al anterior, o al título). */
+    private focusAfterRemoval;
+    private panelRoot;
+    private attach;
+    private detach;
+    /** Un espacio duro alterno hace que el mismo texto cuente como cambio y se vuelva a anunciar. */
+    private announce;
+    private announceFlip;
+    private focusLater;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbNotificationCenter, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbNotificationCenter, "cb-notification-center", never, { "notifications": { "alias": "notifications"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "groupByDate": { "alias": "groupByDate"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "announceNew": { "alias": "announceNew"; "required": false; "isSignal": true; }; "showViewAll": { "alias": "showViewAll"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; }, { "notifications": "notificationsChange"; "filter": "filterChange"; "open": "openChange"; "itemClick": "itemClick"; "actionClick": "actionClick"; "readChange": "readChange"; "markAll": "markAll"; "itemRemove": "itemRemove"; "viewAll": "viewAll"; }, never, never, true, never>;
+}
+
+export { CbNotificationCenter };
+export type { CbNotification, CbNotificationAction, CbNotificationActionEvent, CbNotificationFilter };
+//# sourceMappingURL=caribeng-ui-notification-center.d.ts.map

package/types/{caribeng-ui-caribe-off-canvas.d.ts → caribeng-ui-off-canvas.d.ts}

@@ -2,7 +2,7 @@ import * as _angular_core from '@angular/core';
 import * as _caribeng_ui from '@caribeng/ui';
 
 /**
- * Off-canvas de Caribe Design: panel lateral deslizable con cabecera, botón de
+ * Off-canvas: panel lateral deslizable con cabecera, botón de
  * cierre y contenido proyectado.
  *
  * @example
@@ -26,4 +26,4 @@ declare class CbOffCanvas {
 }
 
 export { CbOffCanvas };
-//# sourceMappingURL=caribeng-ui-caribe-off-canvas.d.ts.map
+//# sourceMappingURL=caribeng-ui-off-canvas.d.ts.map

package/types/{caribeng-ui-caribe-onboarding.d.ts → caribeng-ui-onboarding.d.ts}

@@ -3,7 +3,7 @@ import * as _caribeng_ui from '@caribeng/ui';
 import { cbFormat } from '@caribeng/ui';
 
 /**
- * Onboarding de Caribe Design: panel de bienvenida paso a paso con progreso y
+ * Onboarding: panel de bienvenida paso a paso con progreso y
  * navegación.
  *
  * @example
@@ -27,4 +27,4 @@ declare class CbOnboarding {
 }
 
 export { CbOnboarding };
-//# sourceMappingURL=caribeng-ui-caribe-onboarding.d.ts.map
+//# sourceMappingURL=caribeng-ui-onboarding.d.ts.map