@caribeng/ui 22.2.0 → 22.4.0

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

@@ -0,0 +1,36 @@
+import * as _angular_core from '@angular/core';
+
+/** Plataforma para la que se muestran las teclas. `auto` la detecta en el navegador. */
+type CbKbdPlatform = 'auto' | 'mac' | 'other';
+interface KeyLabel {
+    /** Texto visible. */
+    text: string;
+    /** Nombre leído por el lector de pantalla cuando el visible es un símbolo. */
+    spoken?: string;
+}
+/**
+ * Tecla o atajo de teclado de CaribeNG. Con contenido muestra una tecla; con
+ * `keys` muestra la combinación (⌘ K en Mac, Ctrl + K en el resto).
+ *
+ * @example
+ * ```html
+ * <cb-kbd>Esc</cb-kbd>
+ * <cb-kbd [keys]="['mod', 'K']" />
+ * ```
+ */
+declare class CbKbd {
+    private readonly doc;
+    /** Teclas de la combinación: nombres (`mod`, `shift`, `alt`, `enter`, `up`…) o texto libre (`K`, `F2`). */
+    readonly keys: _angular_core.InputSignal<readonly string[]>;
+    /** Plataforma a mostrar. `auto` la detecta (⌘ en Mac). */
+    readonly platform: _angular_core.InputSignal<CbKbdPlatform>;
+    readonly size: _angular_core.InputSignal<"sm" | "md">;
+    protected readonly isMac: _angular_core.Signal<boolean>;
+    protected readonly labels: _angular_core.Signal<KeyLabel[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbKbd, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbKbd, "cb-kbd", never, { "keys": { "alias": "keys"; "required": false; "isSignal": true; }; "platform": { "alias": "platform"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { CbKbd };
+export type { CbKbdPlatform };
+//# sourceMappingURL=caribeng-ui-kbd.d.ts.map

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

@@ -1,20 +1,29 @@
 import * as _angular_core from '@angular/core';
 import * as _caribeng_ui from '@caribeng/ui';
+import { CbMenuCommandEvent } from '@caribeng/ui';
 
 interface CbMegaMenuLink {
     label: string;
     url?: string;
     icon?: string;
     disabled?: boolean;
+    /** Acción al elegir el item (además del evento de selección), como `command` en PrimeNG. */
+    command?: (event: CbMenuCommandEvent<CbMegaMenuLink>) => void;
+    /** `false` oculta el item. */
+    visible?: boolean;
 }
 interface CbMegaMenuGroup {
     label: string;
     items: readonly CbMegaMenuLink[];
+    /** `false` oculta el elemento. */
+    visible?: boolean;
 }
 interface CbMegaMenuItem {
     label: string;
     icon?: string;
     groups: readonly CbMegaMenuGroup[];
+    /** `false` oculta el elemento. */
+    visible?: boolean;
 }
 /**
  * Menú de categorías con paneles de varias columnas (patrón *disclosure
@@ -34,6 +43,8 @@ declare class CbMegaMenu {
     protected readonly panelId: string;
     /** Categorías con sus grupos de enlaces. */
     readonly items: _angular_core.InputSignal<readonly CbMegaMenuItem[]>;
+    /** Items sin los de `visible: false`. */
+    protected readonly visibleItems: _angular_core.Signal<CbMegaMenuItem[]>;
     /** Nombre accesible de la navegación. Por defecto, "Categorías" del idioma activo. */
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     /** Se emite al elegir un enlace. */

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

@@ -0,0 +1,127 @@
+import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+import { CbRequiredIndicator } from '@caribeng/ui';
+import { ControlValueAccessor } from '@angular/forms';
+
+/** Persona, etiqueta o elemento que se puede mencionar. */
+interface CbMentionItem {
+    readonly id: string;
+    /** Texto que se inserta tras el disparador (`@Laura Gómez`). */
+    readonly label: string;
+    /** Texto secundario en la lista (cargo, correo…). */
+    readonly description?: string;
+    /** Imagen del avatar en la lista. */
+    readonly avatar?: string;
+    /** Disparador al que pertenece (`@` por defecto, `#` para etiquetas…). */
+    readonly trigger?: string;
+}
+/** Mención presente en el texto. */
+interface CbMention {
+    readonly id: string;
+    readonly label: string;
+    readonly trigger: string;
+}
+/** Búsqueda en curso (para pedir sugerencias al servidor). */
+interface CbMentionSearch {
+    readonly trigger: string;
+    readonly query: string;
+}
+/**
+ * Campo de texto con menciones de CaribeNG: al escribir `@` (u otro
+ * disparador como `#`) muestra sugerencias junto al cursor, que se filtran
+ * sin tildes y se eligen con el teclado o el ratón. Funciona con Angular Forms
+ * (el valor es el texto) y emite las menciones presentes con su `id`.
+ *
+ * @example
+ * ```html
+ * <cb-mentions label="Comentario" [suggestions]="equipo" formControlName="comentario" (mentionsChange)="menciones = $event" />
+ * ```
+ */
+declare class CbMentions implements ControlValueAccessor {
+    /** 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 injector;
+    private readonly fieldEl;
+    private readonly panelTpl;
+    private overlayRef;
+    protected readonly inputId: string;
+    protected readonly listId: string;
+    /** Texto (bidireccional y con Angular Forms). */
+    readonly value: _angular_core.ModelSignal<string>;
+    /** Elementos mencionables. Cada uno puede indicar su `trigger`. */
+    readonly suggestions: _angular_core.InputSignal<readonly CbMentionItem[]>;
+    /** Caracteres que abren las sugerencias. */
+    readonly triggers: _angular_core.InputSignal<readonly string[]>;
+    /** Filtra `suggestions` con lo escrito. Desactívalo si llegan ya filtradas del servidor. */
+    readonly filter: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Máximo de sugerencias visibles. */
+    readonly maxResults: _angular_core.InputSignal<number>;
+    /** Muestra "Cargando" mientras no hay sugerencias. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly hint: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Nombre accesible sin `label` visible. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly rows: _angular_core.InputSignal<number>;
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly requiredIndicator: _angular_core.InputSignal<CbRequiredIndicator | undefined>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Lo escrito tras el disparador (para pedir sugerencias). */
+    readonly search: _angular_core.OutputEmitterRef<CbMentionSearch>;
+    /** Menciones presentes en el texto, cada vez que cambian. */
+    readonly mentionsChange: _angular_core.OutputEmitterRef<CbMention[]>;
+    protected readonly fieldState: _caribeng_ui.CbFieldState;
+    private readonly cvaDisabled;
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
+    private readonly query;
+    protected readonly open: _angular_core.WritableSignal<boolean>;
+    protected readonly active: _angular_core.WritableSignal<number>;
+    protected readonly announcement: _angular_core.WritableSignal<string>;
+    /** Menciones elegidas (se conservan mientras su texto siga en el campo). */
+    private chosen;
+    private lastMentions;
+    protected readonly results: _angular_core.Signal<CbMentionItem[]>;
+    protected readonly activeId: _angular_core.Signal<string | null>;
+    private onChange;
+    private onTouched;
+    protected initials(item: CbMentionItem): string;
+    writeValue(value: string | null): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    protected onInput(event: Event): void;
+    protected onBlur(): void;
+    /** Busca un disparador justo antes del cursor y abre (o cierra) las sugerencias. */
+    detect(): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    /** Inserta la mención elegida en lugar de lo escrito tras el disparador. */
+    protected choose(item: CbMentionItem): void;
+    /** Quita las menciones cuyo texto ya no está y avisa si cambió la lista. */
+    private syncMentions;
+    private openPanel;
+    private position;
+    /** Cierra las sugerencias. */
+    close(): void;
+    private scrollActiveIntoView;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbMentions, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbMentions, "cb-mentions", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "suggestions": { "alias": "suggestions"; "required": false; "isSignal": true; }; "triggers": { "alias": "triggers"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "maxResults": { "alias": "maxResults"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "requiredIndicator": { "alias": "requiredIndicator"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "search": "search"; "mentionsChange": "mentionsChange"; }, never, never, true, never>;
+}
+
+/**
+ * Posición (px, relativa al campo) del carácter `index` de un textarea o
+ * input, con un div espejo invisible que copia su tipografía y su ancho.
+ * Sirve para abrir el panel de sugerencias justo bajo lo que se escribe.
+ */
+declare function cbCaretCoordinates(field: HTMLTextAreaElement | HTMLInputElement, index: number): {
+    top: number;
+    left: number;
+    height: number;
+};
+
+export { CbMentions, cbCaretCoordinates };
+export type { CbMention, CbMentionItem, CbMentionSearch };
+//# sourceMappingURL=caribeng-ui-mentions.d.ts.map

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

@@ -1,5 +1,6 @@
 import * as _angular_core from '@angular/core';
 import * as _caribeng_ui from '@caribeng/ui';
+import { CbMenuCommandEvent } from '@caribeng/ui';
 
 interface CbMenuItem {
     label: string;
@@ -8,6 +9,10 @@ interface CbMenuItem {
     target?: 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<CbMenuItem>) => void;
+    /** `false` oculta el item. */
+    visible?: boolean;
 }
 /** Popup menu anchored to any trigger element. */
 declare class CbMenu {
@@ -17,6 +22,8 @@ declare class CbMenu {
     private readonly vcr;
     private readonly destroyRef;
     readonly items: _angular_core.InputSignal<readonly CbMenuItem[]>;
+    /** Items sin los de `visible: false`. */
+    protected readonly visibleItems: _angular_core.Signal<CbMenuItem[]>;
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly itemSelect: _angular_core.OutputEmitterRef<CbMenuItem>;
     /** Se emite al cerrarse el menú (clic fuera, Escape o al elegir una opción). */

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

@@ -1,5 +1,6 @@
 import * as _angular_core from '@angular/core';
 import * as _caribeng_ui from '@caribeng/ui';
+import { CbMenuCommandEvent } from '@caribeng/ui';
 
 interface CbMenubarItem {
     label: string;
@@ -8,6 +9,10 @@ interface CbMenubarItem {
     target?: string;
     disabled?: boolean;
     items?: readonly CbMenubarItem[];
+    /** Acción al elegir el item (además del evento de selección), como `command` en PrimeNG. */
+    command?: (event: CbMenuCommandEvent<CbMenubarItem>) => void;
+    /** `false` oculta el item. */
+    visible?: boolean;
 }
 /** Horizontal navigation bar with optional one-level dropdown menus. */
 declare class CbMenubar {
@@ -16,6 +21,8 @@ declare class CbMenubar {
     private readonly host;
     private readonly injector;
     readonly items: _angular_core.InputSignal<readonly CbMenubarItem[]>;
+    /** Items sin los de `visible: false`. */
+    protected readonly visibleItems: _angular_core.Signal<CbMenubarItem[]>;
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly itemSelect: _angular_core.OutputEmitterRef<CbMenubarItem>;
     protected readonly openIndex: _angular_core.WritableSignal<number | null>;

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

@@ -21,6 +21,8 @@ declare class CbMessage {
     readonly icon: _angular_core.InputSignal<string | null>;
     /** Visibilidad (two-way). */
     readonly visible: _angular_core.ModelSignal<boolean>;
+    /** danger y warning se anuncian al momento (`alert`); el resto, sin interrumpir (`status`). */
+    protected readonly urgent: _angular_core.Signal<boolean>;
     /** Se emite al cerrar. */
     readonly closed: _angular_core.OutputEmitterRef<void>;
     protected readonly iconName: _angular_core.Signal<string>;

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

@@ -1,5 +1,6 @@
 import * as _angular_core from '@angular/core';
 import * as _caribeng_ui from '@caribeng/ui';
+import { CbMenuCommandEvent } from '@caribeng/ui';
 
 interface CbPanelMenuItem {
     label: string;
@@ -7,6 +8,10 @@ interface CbPanelMenuItem {
     url?: string;
     disabled?: boolean;
     items?: readonly CbPanelMenuItem[];
+    /** Acción al elegir el item (además del evento de selección), como `command` en PrimeNG. */
+    command?: (event: CbMenuCommandEvent<CbPanelMenuItem>) => void;
+    /** `false` oculta el item. */
+    visible?: boolean;
 }
 /** Vertical menu with collapsible sections. */
 declare class CbPanelMenu {
@@ -14,6 +19,8 @@ declare class CbPanelMenu {
     protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
     private readonly uid;
     readonly items: _angular_core.InputSignal<readonly CbPanelMenuItem[]>;
+    /** Items sin los de `visible: false`. */
+    protected readonly visibleItems: _angular_core.Signal<CbPanelMenuItem[]>;
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly multiple: _angular_core.InputSignal<boolean>;
     readonly itemSelect: _angular_core.OutputEmitterRef<CbPanelMenuItem>;

package/types/caribeng-ui-phone-input.d.ts

@@ -0,0 +1,168 @@
+import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+import { CbRequiredIndicator, CbSize } from '@caribeng/ui';
+import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
+
+/**
+ * Datos de numeración telefónica de un país (plan nacional, ITU-T E.164).
+ * El "número nacional" es el que va después del prefijo internacional, sin el
+ * 0 (o el dígito) que se marca dentro del país.
+ */
+interface CbPhoneCountry {
+    /** Código ISO 3166-1 alfa-2 (`CO`). */
+    readonly iso: string;
+    /** Prefijo internacional sin `+` (`57`). */
+    readonly dial: string;
+    /** Longitudes válidas del número nacional. */
+    readonly lengths: readonly number[];
+    /** Formato por longitud con `#` por dígito (`{ 10: '### ### ####' }`). Sin él, grupos de 3. */
+    readonly formats?: Readonly<Record<number, string>>;
+    /** Dígito que se marca delante dentro del país y se quita al guardar (`0`). */
+    readonly trunk?: string;
+    /** Comienzos del número nacional para distinguir países que comparten prefijo (+1). */
+    readonly leading?: readonly string[];
+    /** Ejemplo de número nacional (se usa como placeholder). */
+    readonly example?: string;
+}
+/**
+ * Países incluidos: América Latina y el Caribe, Norteamérica, la Europa más
+ * habitual y los mayores de Asia y Oceanía. Amplíalos con `[countries]`.
+ */
+declare const CB_PHONE_COUNTRIES: readonly CbPhoneCountry[];
+/** Emoji de bandera a partir del código ISO (indicadores regionales). */
+declare function cbFlagEmoji(iso: string): string;
+/** Aplica el formato del país al número nacional (solo dígitos), también a medio escribir. */
+declare function cbFormatNational(country: CbPhoneCountry, digits: string): string;
+interface CbParsedPhone {
+    readonly country: CbPhoneCountry | null;
+    /** Número nacional (solo dígitos, sin prefijo ni 0 nacional). */
+    readonly national: string;
+}
+/**
+ * Interpreta lo escrito o pegado. Con `+` o `00` detecta el país por el prefijo
+ * (el más largo que coincide; entre los que comparten prefijo, por el comienzo
+ * del número o, si no, el país actual). Sin prefijo, usa `current` y quita su 0 nacional.
+ */
+declare function cbParsePhone(text: string, current: CbPhoneCountry | null, countries: readonly CbPhoneCountry[]): CbParsedPhone;
+/** Número completo en formato E.164 (`+573001234567`), o `''` sin dígitos. */
+declare function cbToE164(country: CbPhoneCountry | null, national: string): string;
+/** Si la longitud del número nacional es válida para el país. */
+declare function cbIsValidPhone(country: CbPhoneCountry | null, national: string): boolean;
+
+/** Cambio del teléfono con todos sus datos. */
+interface CbPhoneChange {
+    /** Formato internacional E.164 (`+573001234567`), o `''`. */
+    readonly e164: string;
+    /** Número nacional (solo dígitos). */
+    readonly national: string;
+    /** Código ISO del país (`CO`). */
+    readonly country: string;
+    /** La longitud es válida para el país. */
+    readonly valid: boolean;
+}
+/**
+ * Teléfono internacional de CaribeNG: selector de país (bandera, nombre y
+ * prefijo, con buscador) y número que se formatea mientras se escribe. El
+ * valor es E.164 (`+573001234567`), listo para guardar o enviar. Al pegar un
+ * número con `+` o `00` detecta el país.
+ *
+ * Funciona con Angular Forms (`formControlName`, `ngModel`) y añade el error
+ * `{ phone: true }` si el número está incompleto o no es válido para el país.
+ *
+ * @example
+ * ```html
+ * <cb-phone-input label="Celular" formControlName="celular" country="CO" [preferredCountries]="['CO', 'MX', 'US']" />
+ * ```
+ */
+declare class CbPhoneInput implements ControlValueAccessor, Validator {
+    /** 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 injector;
+    private readonly triggerEl;
+    private readonly fieldEl;
+    private readonly searchEl;
+    private readonly panelTpl;
+    private overlayRef;
+    protected readonly inputId: string;
+    protected readonly listId: string;
+    /** Número en formato E.164 (`+573001234567`); `''` si está vacío. */
+    readonly value: _angular_core.ModelSignal<string>;
+    /** País seleccionado (código ISO). */
+    readonly country: _angular_core.ModelSignal<string>;
+    /** Países disponibles. Por defecto, `CB_PHONE_COUNTRIES`; puedes pasar otros o filtrar por código ISO. */
+    readonly countries: _angular_core.InputSignal<readonly (string | CbPhoneCountry)[]>;
+    /** Países que aparecen primero en la lista (código ISO). */
+    readonly preferredCountries: _angular_core.InputSignal<readonly string[]>;
+    /** Bloquea el país (solo se escribe el número). */
+    readonly countryLocked: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Muestra la bandera (emoji). En Windows algunos navegadores la muestran como letras. */
+    readonly showFlag: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly hint: _angular_core.InputSignal<string>;
+    /** Error a mostrar. Por defecto, "Número de teléfono incompleto o no válido" cuando lo es. */
+    readonly error: _angular_core.InputSignal<string | undefined>;
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly requiredIndicator: _angular_core.InputSignal<CbRequiredIndicator | undefined>;
+    /** Placeholder. Por defecto, un número de ejemplo del país. */
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    readonly size: _angular_core.InputSignal<CbSize>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Cada cambio con el número E.164, el nacional, el país y si es válido. */
+    readonly phoneChange: _angular_core.OutputEmitterRef<CbPhoneChange>;
+    protected readonly fieldState: _caribeng_ui.CbFieldState;
+    /** Número nacional (solo dígitos). */
+    private readonly national;
+    private readonly touched;
+    private readonly cvaDisabled;
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
+    protected readonly open: _angular_core.WritableSignal<boolean>;
+    protected readonly query: _angular_core.WritableSignal<string>;
+    protected readonly active: _angular_core.WritableSignal<number>;
+    private readonly displayNames;
+    protected readonly list: _angular_core.Signal<CbPhoneCountry[]>;
+    protected readonly selected: _angular_core.Signal<CbPhoneCountry | null>;
+    protected readonly filtered: _angular_core.Signal<CbPhoneCountry[]>;
+    protected readonly activeId: _angular_core.Signal<string | null>;
+    protected readonly display: _angular_core.Signal<string>;
+    protected readonly examplePlaceholder: _angular_core.Signal<string>;
+    protected readonly isValid: _angular_core.Signal<boolean>;
+    protected readonly showInvalid: _angular_core.Signal<boolean>;
+    protected readonly errorText: _angular_core.Signal<string>;
+    protected readonly countryLabel: _angular_core.Signal<string>;
+    protected readonly describedBy: _angular_core.Signal<string | null>;
+    private onChange;
+    private onTouched;
+    private onValidatorChange;
+    constructor();
+    protected flag(c: CbPhoneCountry): string;
+    protected name(c: CbPhoneCountry): string;
+    private normalize;
+    writeValue(value: string | null): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    validate(_control: AbstractControl): ValidationErrors | null;
+    registerOnValidatorChange(fn: () => void): void;
+    protected onInput(event: Event): void;
+    protected onBlur(): void;
+    /** Interpreta texto escrito, pegado o recibido (E.164 o nacional). */
+    private applyText;
+    private publish;
+    toggle(): void;
+    protected openFromKeyboard(event: Event): void;
+    private openPanel;
+    /** Cierra la lista de países. */
+    close(focusTrigger?: boolean): void;
+    protected choose(c: CbPhoneCountry): void;
+    protected onSearchKeydown(event: KeyboardEvent): void;
+    private scrollActiveIntoView;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbPhoneInput, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbPhoneInput, "cb-phone-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "country": { "alias": "country"; "required": false; "isSignal": true; }; "countries": { "alias": "countries"; "required": false; "isSignal": true; }; "preferredCountries": { "alias": "preferredCountries"; "required": false; "isSignal": true; }; "countryLocked": { "alias": "countryLocked"; "required": false; "isSignal": true; }; "showFlag": { "alias": "showFlag"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "requiredIndicator": { "alias": "requiredIndicator"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "country": "countryChange"; "phoneChange": "phoneChange"; }, never, never, true, never>;
+}
+
+export { CB_PHONE_COUNTRIES, CbPhoneInput, cbFlagEmoji, cbFormatNational, cbIsValidPhone, cbParsePhone, cbToE164 };
+export type { CbParsedPhone, CbPhoneChange, CbPhoneCountry };
+//# sourceMappingURL=caribeng-ui-phone-input.d.ts.map

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

@@ -3,10 +3,19 @@ import * as _caribeng_ui from '@caribeng/ui';
 
 /** Ciclo de facturación del selector de precios. */
 type CbPricingBilling = 'monthly' | 'annual';
-/** Una característica de un plan. Puede ser texto o un objeto con estado. */
+/**
+ * Disposición de los planes:
+ * - `grid`: tarjetas que se reparten en varias filas según el ancho.
+ * - `horizontal`: todas las tarjetas en una sola fila (con scroll si no caben),
+ *   selector de facturación a la derecha del título y precio anual expresado por mes.
+ * - `list`: cada plan es una fila (cabecera, características y CTA).
+ */
+type CbPricingLayout = 'grid' | 'horizontal' | 'list';
+/** Una característica de un plan. Puede ser texto o un objeto con estado e icono. */
 type CbPricingFeature = string | {
     label: string;
     included?: boolean;
+    icon?: string;
 };
 /** Definición de un plan de precios. */
 interface CbPricingPlan {
@@ -26,6 +35,8 @@ interface CbPricingPlan {
     features?: CbPricingFeature[];
     /** Resalta el plan (destacado). */
     featured?: boolean;
+    /** Etiqueta junto al nombre. En el plan destacado vale "Recomendado" si se omite; `''` la oculta. */
+    badge?: string;
     /** Texto del botón (por defecto "Elegir {name}"). */
     ctaLabel?: string;
 }
@@ -42,16 +53,27 @@ interface CbPricingPlan {
 declare class CbPricing {
     /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
     protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    private readonly host;
     /** Planes a mostrar. */
     readonly plans: _angular_core.InputSignal<readonly CbPricingPlan[]>;
     /** Ciclo activo (two-way). */
     readonly billing: _angular_core.ModelSignal<CbPricingBilling>;
     /** Muestra el selector Mensual/Anual. */
     readonly showToggle: _angular_core.InputSignal<boolean>;
-    /** Disposición de los planes: 'grid' (tarjetas) u 'horizontal' (filas). */
-    readonly layout: _angular_core.InputSignal<"grid" | "horizontal">;
+    /** Disposición de los planes (ver {@link CbPricingLayout}). */
+    readonly layout: _angular_core.InputSignal<CbPricingLayout>;
     /** Título opcional sobre la tabla. */
     readonly title: _angular_core.InputSignal<string>;
+    /** Texto de ayuda bajo el título (solo en `horizontal`). */
+    readonly subtitle: _angular_core.InputSignal<string>;
+    /** Etiqueta junto a la opción anual (p. ej. "25% OFF"; solo en `horizontal`). */
+    readonly annualBadge: _angular_core.InputSignal<string>;
+    /**
+     * Cómo se muestra el precio anual: `total` (importe del año, "/año") o `monthly`
+     * (equivalente mensual, "/mes", con el total facturado y el ahorro debajo).
+     * Por defecto `monthly` en `horizontal` y `total` en el resto.
+     */
+    readonly annualDisplay: _angular_core.InputSignal<"monthly" | "total" | undefined>;
     /** Símbolo de moneda. */
     readonly currency: _angular_core.InputSignal<string>;
     /** Etiquetas configurables. */
@@ -63,13 +85,28 @@ declare class CbPricing {
     readonly ctaLabel: _angular_core.InputSignal<string | undefined>;
     /** Emite el plan elegido. */
     readonly planSelect: _angular_core.OutputEmitterRef<CbPricingPlan>;
+    protected readonly choices: readonly CbPricingBilling[];
+    protected readonly horizontal: _angular_core.Signal<boolean>;
     protected readonly annual: _angular_core.Signal<boolean>;
+    private readonly annualMonthly;
+    /** El precio visible es mensual (ciclo mensual, o anual expresado por mes). */
+    protected readonly perMonthShown: _angular_core.Signal<boolean>;
+    private readonly numberFormat;
+    protected num(n: number): string;
+    private annualOf;
     protected priceOf(p: CbPricingPlan): number;
     protected oldPriceOf(p: CbPricingPlan): number | undefined;
+    protected billedOf(p: CbPricingPlan): string;
+    protected savingOf(p: CbPricingPlan): number;
+    protected savingLabel(p: CbPricingPlan): string;
+    protected badgeOf(p: CbPricingPlan): string;
     protected labelOf(f: CbPricingFeature): string;
     protected includedOf(f: CbPricingFeature): boolean;
+    protected iconOf(f: CbPricingFeature): string;
+    /** Flechas dentro del grupo de opciones de facturación (patrón radiogroup). */
+    protected onChoiceKey(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbPricing, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbPricing, "cb-pricing", never, { "plans": { "alias": "plans"; "required": false; "isSignal": true; }; "billing": { "alias": "billing"; "required": false; "isSignal": true; }; "showToggle": { "alias": "showToggle"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "currency": { "alias": "currency"; "required": false; "isSignal": true; }; "monthlyLabel": { "alias": "monthlyLabel"; "required": false; "isSignal": true; }; "annualLabel": { "alias": "annualLabel"; "required": false; "isSignal": true; }; "perMonthLabel": { "alias": "perMonthLabel"; "required": false; "isSignal": true; }; "perYearLabel": { "alias": "perYearLabel"; "required": false; "isSignal": true; }; "ctaLabel": { "alias": "ctaLabel"; "required": false; "isSignal": true; }; }, { "billing": "billingChange"; "planSelect": "planSelect"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbPricing, "cb-pricing", never, { "plans": { "alias": "plans"; "required": false; "isSignal": true; }; "billing": { "alias": "billing"; "required": false; "isSignal": true; }; "showToggle": { "alias": "showToggle"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "annualBadge": { "alias": "annualBadge"; "required": false; "isSignal": true; }; "annualDisplay": { "alias": "annualDisplay"; "required": false; "isSignal": true; }; "currency": { "alias": "currency"; "required": false; "isSignal": true; }; "monthlyLabel": { "alias": "monthlyLabel"; "required": false; "isSignal": true; }; "annualLabel": { "alias": "annualLabel"; "required": false; "isSignal": true; }; "perMonthLabel": { "alias": "perMonthLabel"; "required": false; "isSignal": true; }; "perYearLabel": { "alias": "perYearLabel"; "required": false; "isSignal": true; }; "ctaLabel": { "alias": "ctaLabel"; "required": false; "isSignal": true; }; }, { "billing": "billingChange"; "planSelect": "planSelect"; }, never, never, true, never>;
 }
 
 export { CbPricing };

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

@@ -0,0 +1,88 @@
+import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+
+/** Nivel de corrección de errores: recupera ~7 % (L), 15 % (M), 25 % (Q) o 30 % (H) del código. */
+type CbQrErrorCorrection = 'L' | 'M' | 'Q' | 'H';
+/** Matriz QR: `modules[y][x]` es `true` en los módulos oscuros. */
+interface CbQrMatrix {
+    /** Versión elegida (1–40). */
+    readonly version: number;
+    /** Módulos por lado (17 + 4 × versión). */
+    readonly size: number;
+    readonly errorCorrection: CbQrErrorCorrection;
+    /** Máscara aplicada (0–7). */
+    readonly mask: number;
+    readonly modules: readonly (readonly boolean[])[];
+}
+interface CbQrEncodeOptions {
+    /** Por defecto `M`. */
+    errorCorrection?: CbQrErrorCorrection;
+    /** Versión mínima (1–40). Por defecto 1. */
+    minVersion?: number;
+}
+/** Codewords de corrección de `data` (resto de la división por el generador). */
+declare function cbQrReedSolomon(data: readonly number[], degree: number): number[];
+/** 15 bits de formato (nivel + máscara), ya con la máscara XOR del estándar. */
+declare function cbQrFormatBits(ec: CbQrErrorCorrection, mask: number): number;
+/**
+ * Codifica `text` como matriz QR. Elige el modo más compacto, la versión más
+ * pequeña que lo contiene y la máscara con menor penalización.
+ *
+ * @throws RangeError si el texto no cabe en la versión 40 con ese nivel.
+ */
+declare function cbQrEncode(text: string, options?: CbQrEncodeOptions): CbQrMatrix;
+/** Niveles ordenados de menor a mayor corrección. */
+declare const CB_QR_ERROR_CORRECTION_LEVELS: readonly CbQrErrorCorrection[];
+
+/**
+ * Código QR de CaribeNG, generado en SVG con un codificador propio (sin
+ * dependencias). Elige solo la versión y la máscara; admite color, fondo,
+ * margen y un logo centrado.
+ *
+ * @example
+ * ```html
+ * <cb-qrcode value="https://caribeng.dev" [size]="180" />
+ * <cb-qrcode [value]="pago" errorCorrection="H" image="assets/logo.svg" />
+ * ```
+ */
+declare class CbQrcode {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    /** Texto o URL a codificar. */
+    readonly value: _angular_core.InputSignal<string>;
+    /** Lado en píxeles. */
+    readonly size: _angular_core.InputSignal<number>;
+    /** Corrección de errores. Usa `H` si pones un logo encima. */
+    readonly errorCorrection: _angular_core.InputSignal<CbQrErrorCorrection>;
+    /** Color de los módulos (cualquier color CSS). */
+    readonly color: _angular_core.InputSignal<string>;
+    /** Color de fondo. Mantén buen contraste con `color` para que se pueda leer. */
+    readonly background: _angular_core.InputSignal<string>;
+    /** Margen claro alrededor, en módulos (el estándar pide 4). */
+    readonly margin: _angular_core.InputSignal<number>;
+    /** Logo centrado (URL). Ocupa ~20 % del lado; combínalo con `errorCorrection="H"`. */
+    readonly image: _angular_core.InputSignal<string>;
+    /** Nombre accesible. Por defecto, "Código QR" del idioma activo. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Matriz codificada, o `null` si el valor está vacío o no cabe en un QR. */
+    readonly matrix: _angular_core.Signal<CbQrMatrix | null>;
+    protected readonly extent: _angular_core.Signal<number>;
+    protected readonly viewBox: _angular_core.Signal<string>;
+    protected readonly label: _angular_core.Signal<string>;
+    /** Módulos oscuros como un único path; une los consecutivos de cada fila. */
+    protected readonly path: _angular_core.Signal<string>;
+    /** Caja del logo (en módulos), centrada y alineada a la rejilla. */
+    protected readonly logo: _angular_core.Signal<{
+        box: number;
+        pad: number;
+        inset: number;
+    } | null>;
+    /** Marcado SVG del QR, p. ej. para descargarlo (`new Blob([qr.toSvg()], { type: 'image/svg+xml' })`). */
+    toSvg(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbQrcode, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbQrcode, "cb-qrcode", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "errorCorrection": { "alias": "errorCorrection"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "background": { "alias": "background"; "required": false; "isSignal": true; }; "margin": { "alias": "margin"; "required": false; "isSignal": true; }; "image": { "alias": "image"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { CB_QR_ERROR_CORRECTION_LEVELS, CbQrcode, cbQrEncode, cbQrFormatBits, cbQrReedSolomon };
+export type { CbQrEncodeOptions, CbQrErrorCorrection, CbQrMatrix };
+//# sourceMappingURL=caribeng-ui-qrcode.d.ts.map