@caribeng/ui 22.2.0 → 22.5.0

package/types/caribeng-ui-dynamic-form.d.ts

@@ -0,0 +1,409 @@
+import * as _caribeng_ui_dynamic_form from '@caribeng/ui/dynamic-form';
+import * as _caribeng_ui from '@caribeng/ui';
+import { cbFormat } from '@caribeng/ui';
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { ValidatorFn, FormGroup, AbstractControl, FormControl } from '@angular/forms';
+
+/** Tipo de campo (y control de CaribeNG que lo pinta). Un nombre propio usa la plantilla `cbFormField` con ese nombre. */
+type CbFormFieldType = 'text' | 'email' | 'password' | 'tel' | 'url' | 'number' | 'textarea' | 'select' | 'multiselect' | 'radio' | 'checkbox' | 'toggle' | 'date' | 'slider' | 'rating' | 'chips' | 'color' | 'buttons' | 'mask'
+/** Grupo de campos (objeto anidado) o, con `repeatable`, lista de grupos. */
+ | 'group'
+/** Elementos de diseño (sin valor). */
+ | 'heading' | 'paragraph' | 'divider' | (string & {});
+/** Texto fijo o traducido por idioma (`{ es: 'Nombre', en: 'Name' }`). */
+type CbFormText = string | Readonly<Record<string, string>>;
+/** Dónde va la etiqueta respecto al control. */
+type CbFormLabelPosition = 'top' | 'left' | 'right' | 'floating' | 'hidden';
+/** Tamaño de los controles. */
+type CbFormSize = 'sm' | 'md' | 'lg';
+/**
+ * Valor que cambia con el ancho del formulario: `base` (móvil), `sm` (≥ 30rem),
+ * `md` (≥ 40rem) y `lg` (≥ 60rem). Cada tamaño hereda el anterior.
+ */
+type CbFormResponsive<T> = T | {
+    readonly base?: T;
+    readonly sm?: T;
+    readonly md?: T;
+    readonly lg?: T;
+};
+/** Opción de `select`, `multiselect`, `radio` y `buttons`. */
+interface CbFormOption {
+    readonly label: CbFormText;
+    readonly value: unknown;
+    readonly disabled?: boolean;
+}
+/**
+ * Condición sobre el valor de otro campo (JSON puro). Con varias propiedades,
+ * se deben cumplir todas. También puede ser una función `(valor del formulario) => boolean`.
+ */
+interface CbFormConditionRule {
+    readonly field: string;
+    readonly equals?: unknown;
+    readonly notEquals?: unknown;
+    readonly in?: readonly unknown[];
+    /** `true`: tiene valor (no vacío, no `false`); `false`: está vacío. */
+    readonly filled?: boolean;
+}
+type CbFormCondition = CbFormConditionRule | readonly CbFormConditionRule[] | ((value: Record<string, unknown>) => boolean);
+/** Regla entre campos: compara el valor con el de otro campo. */
+interface CbFormRule {
+    readonly equalsField?: string;
+    readonly notEqualsField?: string;
+    /** Mayor o igual que otro campo (números o fechas). */
+    readonly gteField?: string;
+    readonly lteField?: string;
+    readonly gtField?: string;
+    readonly ltField?: string;
+    readonly message?: CbFormText;
+}
+/** Mensajes de error propios, por validador. */
+type CbFormMessages = Partial<Record<'required' | 'min' | 'max' | 'minLength' | 'maxLength' | 'email' | 'pattern' | 'rule' | string, CbFormText>>;
+/** Opciones de la etiqueta (en el formulario, en una sección o en un campo). */
+interface CbFormLabelOptions {
+    readonly labelPosition?: CbFormLabelPosition;
+    /** Alineación del texto de la etiqueta cuando va a un lado. */
+    readonly labelAlign?: 'start' | 'end';
+    /** Ancho de la etiqueta cuando va a un lado (`10rem` por defecto). */
+    readonly labelWidth?: string;
+}
+/** Campo del formulario (o elemento de diseño: `heading`, `paragraph`, `divider`). */
+interface CbFormField extends CbFormLabelOptions {
+    /** Propiedad del valor (obligatoria salvo en los elementos de diseño). */
+    readonly key?: string;
+    readonly type?: CbFormFieldType;
+    readonly label?: CbFormText;
+    readonly placeholder?: CbFormText;
+    /** Texto de ayuda bajo el campo. */
+    readonly hint?: CbFormText;
+    /** Contenido de `heading` y `paragraph`. */
+    readonly content?: CbFormText;
+    /** Valor inicial (en `date`, `Date` o texto `AAAA-MM-DD`; en un grupo repetible, lista de objetos). */
+    readonly default?: unknown;
+    readonly required?: boolean;
+    readonly min?: number;
+    readonly max?: number;
+    readonly step?: number;
+    readonly minLength?: number;
+    readonly maxLength?: number;
+    /** Expresión regular (texto) que debe cumplir el valor completo. */
+    readonly pattern?: string;
+    readonly options?: readonly CbFormOption[];
+    /** Opciones según el valor de otro campo: `{ field: 'pais', map: { CO: [...], PA: [...] } }`. */
+    readonly optionsFrom?: {
+        readonly field: string;
+        readonly map: Readonly<Record<string, readonly CbFormOption[]>>;
+    };
+    /** Nombre de un cargador de `loaders` (opciones de una API); se vuelve a llamar al cambiar `dependsOn`. */
+    readonly optionsLoader?: string;
+    readonly dependsOn?: readonly string[];
+    /** Fórmula de un campo calculado: `cantidad * precio`, `round(total * 0.19, 0)`, `sum(lineas.subtotal)`. */
+    readonly formula?: string;
+    /** Cálculo desde código (en vez de `formula`). */
+    readonly compute?: (value: Record<string, unknown>) => unknown;
+    /** Máscara de un campo `mask` (`9` dígito, `a` letra, `*` cualquiera): `999-9999`. */
+    readonly mask?: string;
+    /** Texto o símbolo antes y después del control (`$`, `%`, `kg`). */
+    readonly prefix?: CbFormText;
+    readonly suffix?: CbFormText;
+    /** Icono antes del control. */
+    readonly icon?: string;
+    /** Filas de un `textarea`. */
+    readonly rows?: number;
+    /** Columnas que ocupa (número o `full`), también por tamaño de pantalla. */
+    readonly colSpan?: CbFormResponsive<number | 'full'>;
+    /** Empieza una fila nueva. */
+    readonly newRow?: boolean;
+    /** Orden dentro de su sección (por defecto, el del esquema). */
+    readonly order?: number;
+    readonly size?: CbFormSize;
+    readonly disabled?: boolean;
+    readonly readonly?: boolean;
+    /** Solo se muestra (y se valida y se envía) si se cumple. */
+    readonly visibleWhen?: CbFormCondition;
+    /** Es obligatorio solo si se cumple. */
+    readonly requiredWhen?: CbFormCondition;
+    /** Se deshabilita si se cumple. */
+    readonly disabledWhen?: CbFormCondition;
+    /** Reglas entre campos (confirmar contraseña, fecha fin ≥ inicio). */
+    readonly rules?: readonly CbFormRule[];
+    /** Mensajes de error propios. */
+    readonly messages?: CbFormMessages;
+    /** Validadores extra (solo desde código). La clave del error elige el mensaje en `messages`. */
+    readonly validators?: readonly ValidatorFn[];
+    /** `radio`: disposición de las opciones. */
+    readonly orientation?: 'vertical' | 'horizontal';
+    /** `group`: sus campos. */
+    readonly fields?: readonly CbFormField[];
+    /** `group`: lista de grupos que se añaden y quitan. */
+    readonly repeatable?: boolean;
+    readonly minItems?: number;
+    readonly maxItems?: number;
+    /** Texto del botón de añadir (`Añadir contacto`). */
+    readonly addLabel?: CbFormText;
+    /** Título de cada elemento; `{n}` es su número (`Contacto {n}`). */
+    readonly itemLabel?: CbFormText;
+    /** Columnas dentro del grupo. */
+    readonly columns?: CbFormResponsive<number>;
+}
+/** Sección: un grupo de campos con título y sus propias columnas y etiquetas. */
+interface CbFormSection extends CbFormLabelOptions {
+    readonly title?: CbFormText;
+    readonly description?: CbFormText;
+    readonly columns?: CbFormResponsive<number>;
+    readonly size?: CbFormSize;
+    readonly fields: readonly CbFormField[];
+    readonly visibleWhen?: CbFormCondition;
+}
+/** Paso de un formulario por pasos. */
+interface CbFormStep {
+    readonly title: CbFormText;
+    readonly description?: CbFormText;
+    readonly fields?: readonly CbFormField[];
+    readonly sections?: readonly CbFormSection[];
+}
+/** Disposición de etiqueta y campo (atajo de `labelPosition`). */
+type CbFormLayout = 'vertical' | 'horizontal';
+/** Esquema completo. */
+interface CbFormSchema extends CbFormLabelOptions {
+    /** Campos sueltos (o usa `sections`, o `steps`). */
+    readonly fields?: readonly CbFormField[];
+    readonly sections?: readonly CbFormSection[];
+    /** Formulario por pasos (asistente): cada paso valida sus campos antes de seguir. */
+    readonly steps?: readonly CbFormStep[];
+    /** Columnas de la rejilla (1 por defecto), también por tamaño de pantalla. */
+    readonly columns?: CbFormResponsive<number>;
+    /** `vertical`: etiqueta encima; `horizontal`: a la izquierda. `labelPosition` lo precisa. */
+    readonly layout?: CbFormLayout;
+    readonly size?: CbFormSize;
+    readonly submitLabel?: CbFormText;
+    /** Texto del botón de restablecer; sin él no se muestra. */
+    readonly resetLabel?: CbFormText;
+    readonly nextLabel?: CbFormText;
+    readonly backLabel?: CbFormText;
+}
+/** Campos ordenados por `order` (los que no lo tienen, en su posición). */
+declare function ordered(fields: readonly CbFormField[]): CbFormField[];
+/**
+ * Evalúa una fórmula aritmética de forma segura (sin `eval`): números, campos,
+ * `+ - * /`, paréntesis y las funciones `round`, `floor`, `ceil`, `abs`, `min`,
+ * `max`, `sum` y `count` (estas tres aceptan listas: `sum(lineas.subtotal)`).
+ */
+declare function evaluateFormula(formula: string, scope: Record<string, unknown>): number;
+
+/** Contexto de una plantilla propia `<ng-template cbFormField="nombre" let-control let-field="field">`. */
+interface CbFormFieldContext {
+    $implicit: FormControl<unknown>;
+    field: CbFormField;
+    /** Id para el control (la etiqueta apunta a él con `for`). */
+    id: string;
+    /** Id de la etiqueta, para `aria-labelledby`. */
+    labelId: string;
+    error: string | null;
+    invalid: boolean;
+}
+/** Plantilla de un tipo de campo propio: el campo con `type: 'nombre'` la usa. */
+declare class CbFormFieldTemplate {
+    readonly name: _angular_core.InputSignal<string>;
+    readonly template: TemplateRef<CbFormFieldContext>;
+    static ngTemplateContextGuard(_dir: CbFormFieldTemplate, ctx: unknown): ctx is CbFormFieldContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbFormFieldTemplate, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CbFormFieldTemplate, "ng-template[cbFormField]", never, { "name": { "alias": "cbFormField"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** Cargador de opciones (API, catálogo): recibe el valor del formulario. */
+type CbFormOptionsLoader = (ctx: {
+    value: Record<string, unknown>;
+    field: CbFormField;
+}) => readonly CbFormOption[] | Promise<readonly CbFormOption[]>;
+/** Contexto de la rejilla (raíz, sección, grupo o elemento de una lista). */
+interface GridCtx {
+    readonly group: FormGroup;
+    readonly path: readonly (string | number)[];
+    readonly opts: Required<Pick<CbFormLabelOptions, 'labelPosition' | 'labelAlign' | 'labelWidth'>>;
+    readonly cols: {
+        base: number;
+        sm: number;
+        md: number;
+        lg: number;
+    };
+    readonly size: CbFormSize;
+}
+/**
+ * Formulario dinámico de CaribeNG: arma el formulario a partir de un esquema JSON.
+ *
+ * - Campos con tipo (texto, correo, número, lista, opciones, casilla, fecha, máscara…),
+ *   validación (`required`, `min`, `max`, `minLength`, `maxLength`, `pattern`, reglas
+ *   entre campos) y mensajes propios, traducibles (`{ es, en }`).
+ * - Etiquetas encima, a la izquierda, a la derecha, flotantes u ocultas, por
+ *   formulario, sección o campo; columnas por tamaño de pantalla, orden, filas,
+ *   títulos, textos y separadores.
+ * - Campos condicionales, opciones que dependen de otro campo o se cargan de una
+ *   API, campos calculados con fórmulas, grupos repetibles y formulario por pasos.
+ * - Tipos propios con plantillas (`<ng-template cbFormField="firma">`).
+ *
+ * @example
+ * ```html
+ * <cb-dynamic-form [schema]="esquema" [(value)]="datos" (formSubmit)="guardar($event)" />
+ * ```
+ */
+declare class CbDynamicForm {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    protected readonly fmt: typeof cbFormat;
+    protected readonly ordered: typeof ordered;
+    private readonly injector;
+    private readonly host;
+    protected readonly uid: string;
+    private readonly templates;
+    /** Esquema del formulario (campos, secciones o pasos, columnas, etiquetas…). */
+    readonly schema: _angular_core.InputSignal<CbFormSchema>;
+    /** Valor del formulario (bidireccional; los campos ocultos no se incluyen). */
+    readonly value: _angular_core.ModelSignal<Record<string, unknown>>;
+    /** Disposición (atajo de `labelPosition`); si no, la del esquema. */
+    readonly layout: _angular_core.InputSignal<CbFormLayout | undefined>;
+    /** Posición de las etiquetas; si no, la del esquema (encima por defecto). */
+    readonly labelPosition: _angular_core.InputSignal<CbFormLabelPosition | undefined>;
+    /** Columnas; si no, las del esquema (1 por defecto). */
+    readonly columns: _angular_core.InputSignal<CbFormResponsive<number> | undefined>;
+    /** Ancho de la etiqueta a un lado; si no, el del esquema (`10rem`). */
+    readonly labelWidth: _angular_core.InputSignal<string | undefined>;
+    /** Tamaño de los controles; si no, el del esquema (`md`). */
+    readonly size: _angular_core.InputSignal<CbFormSize | undefined>;
+    /** Cargadores de opciones por nombre (`optionsLoader` en el esquema). */
+    readonly loaders: _angular_core.InputSignal<Readonly<Record<string, CbFormOptionsLoader>>>;
+    /** Traduce los textos del esquema que son claves (`'clientes.nombre'` → `'Nombre'`). */
+    readonly translate: _angular_core.InputSignal<((text: string) => string) | null>;
+    /** Botones de enviar (y restablecer, si el esquema tiene `resetLabel`). */
+    readonly actions: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Deshabilita todo el formulario. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Muestra el botón de enviar cargando (mientras se guarda). */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Se envió el formulario y es válido: el valor (sin los campos ocultos). */
+    readonly formSubmit: _angular_core.OutputEmitterRef<Record<string, unknown>>;
+    /** Se envió (o se intentó pasar de paso) con errores: cuáles (`key` y mensaje). */
+    readonly formInvalid: _angular_core.OutputEmitterRef<{
+        key: string;
+        message: string;
+    }[]>;
+    readonly formReset: _angular_core.OutputEmitterRef<void>;
+    /** Cambio de paso (índice desde 0). */
+    readonly stepChange: _angular_core.OutputEmitterRef<number>;
+    protected readonly steps: _angular_core.Signal<readonly _caribeng_ui_dynamic_form.CbFormStep[]>;
+    protected readonly step: _angular_core.WritableSignal<number>;
+    protected readonly sections: _angular_core.Signal<readonly CbFormSection[]>;
+    private readonly fields;
+    protected readonly basePosition: _angular_core.Signal<CbFormLabelPosition>;
+    protected readonly labelWidthValue: _angular_core.Signal<string>;
+    protected readonly actionsLabelPosition: _angular_core.Signal<"top" | "left">;
+    private readonly sizeValue;
+    private readonly baseCols;
+    /** El `FormGroup` que se arma con el esquema. */
+    readonly form: _angular_core.WritableSignal<FormGroup<Record<string, AbstractControl<any, any, any>>>>;
+    /** Se incrementa con cada evento del formulario para recalcular estado y errores. */
+    private readonly tick;
+    /** Paso cuyos errores se muestran (tras intentar avanzar o enviar). */
+    private readonly attempted;
+    private readonly hidden;
+    private readonly required;
+    private readonly options;
+    private readonly depsKeys;
+    protected readonly announcement: _angular_core.WritableSignal<string>;
+    private lastEmitted;
+    private subscription;
+    private syncing;
+    private readonly texts;
+    /** Errores que se listan arriba tras un envío o un intento de avanzar fallido. */
+    protected readonly summary: _angular_core.Signal<{
+        id: string;
+        label: string;
+        message: string;
+    }[]>;
+    constructor();
+    /** Valida y, si todo está bien, emite `formSubmit`; si no, muestra el resumen de errores. */
+    submit(): void;
+    /** Pasa al paso siguiente si los campos del actual son válidos. */
+    next(): void;
+    /** Vuelve al paso anterior (sin validar). */
+    back(): void;
+    /** Vuelve a los valores iniciales del esquema. */
+    reset(): void;
+    /** Lleva el foco al control de un campo (por su `key` de primer nivel). */
+    focusField(key: string): void;
+    protected onSubmit(event: Event): void;
+    /** Texto del esquema resuelto: por idioma (`{ es, en }`) y con `translate`. */
+    tr(text: CbFormText | undefined | null): string;
+    protected rootCtx(section: CbFormSection): GridCtx;
+    protected childCtx(parent: GridCtx, f: CbFormField, group: FormGroup, index: number | null): GridCtx;
+    /** Columnas por tamaño: un número fijo `n` es 1 en móvil y `n` desde 40rem. */
+    private colsOf;
+    protected gridVars(cols: {
+        base: number;
+        sm: number;
+        md: number;
+        lg: number;
+    }): string;
+    /** Columnas que ocupa un elemento en cada tamaño (`full` o `span n`), y si empieza fila. */
+    protected cellVars(f: CbFormField, cols: {
+        base: number;
+        sm: number;
+        md: number;
+        lg: number;
+    }, wideByDefault: boolean): string;
+    protected kindOf(f: CbFormField): 'heading' | 'paragraph' | 'divider' | 'list' | 'group' | 'field';
+    protected controlKind(f: CbFormField): string;
+    protected customTemplate(f: CbFormField): TemplateRef<CbFormFieldContext> | null;
+    protected labelPos(f: CbFormField, ctx: GridCtx): CbFormLabelPosition;
+    protected placeholderOf(f: CbFormField, pos: CbFormLabelPosition): string;
+    protected sizeOf(f: CbFormField, ctx: GridCtx): CbFormSize;
+    protected isReadonly(f: CbFormField): boolean;
+    protected filled(ctrl: AbstractControl): boolean;
+    protected pathKey(path: readonly (string | number)[], key: string | undefined): string;
+    protected idOf(path: readonly (string | number)[], key: string | undefined): string;
+    private pathLabel;
+    protected isInline(f: CbFormField): boolean;
+    protected isLabelable(f: CbFormField): boolean;
+    protected ownsMessages(f: CbFormField): boolean;
+    protected inputType(f: CbFormField): 'text' | 'email' | 'tel' | 'url';
+    protected controlOf(group: FormGroup, f: CbFormField): FormControl<unknown>;
+    protected subGroup(group: FormGroup, f: CbFormField): FormGroup;
+    protected listItems(group: FormGroup, f: CbFormField): FormGroup[];
+    protected itemLabel(f: CbFormField, i: number): string;
+    protected isDisabledForm(): boolean;
+    protected isVisible(f: CbFormField, path: readonly (string | number)[], index: number): boolean;
+    protected sectionVisible(section: CbFormSection): boolean;
+    protected isRequired(path: readonly (string | number)[], key: string | undefined): boolean;
+    protected optionsOf(path: readonly (string | number)[], f: CbFormField): {
+        label: string;
+        value: unknown;
+        disabled?: boolean;
+    }[];
+    /** Mensaje de error de un campo, si ya se tocó, se cambió o se intentó enviar. */
+    protected errorOf(path: readonly (string | number)[], f: CbFormField, ctrl: AbstractControl): string | null;
+    protected addItem(group: FormGroup, f: CbFormField): void;
+    protected removeItem(group: FormGroup, f: CbFormField, i: number): void;
+    focusById(id: string): void;
+    private goTo;
+    /** Marca los campos de un paso y dice si son válidos (con `show`, muestra el resumen). */
+    private validateStep;
+    private build;
+    private buildGroup;
+    /** Aplica condiciones, cálculos, opciones y validaciones en todo el árbol. */
+    private sync;
+    private walk;
+    private setEnabled;
+    /** Opciones de `optionsFrom` / `optionsLoader`: se recalculan al cambiar las dependencias. */
+    private syncOptions;
+    private rawValue;
+    /** Valor sin los campos ocultos (en todos los niveles). */
+    private currentValue;
+    private emitValue;
+    private say;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbDynamicForm, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbDynamicForm, "cb-dynamic-form", never, { "schema": { "alias": "schema"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "loaders": { "alias": "loaders"; "required": false; "isSignal": true; }; "translate": { "alias": "translate"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "formSubmit": "formSubmit"; "formInvalid": "formInvalid"; "formReset": "formReset"; "stepChange": "stepChange"; }, ["templates"], never, true, never>;
+}
+
+export { CbDynamicForm, CbFormFieldTemplate, evaluateFormula };
+export type { CbFormCondition, CbFormConditionRule, CbFormField, CbFormFieldContext, CbFormFieldType, CbFormLabelOptions, CbFormLabelPosition, CbFormLayout, CbFormMessages, CbFormOption, CbFormOptionsLoader, CbFormResponsive, CbFormRule, CbFormSchema, CbFormSection, CbFormSize, CbFormStep, CbFormText };
+//# sourceMappingURL=caribeng-ui-dynamic-form.d.ts.map

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

@@ -1,7 +1,8 @@
 import * as _caribeng_ui from '@caribeng/ui';
-import { CbTranslation } from '@caribeng/ui';
+import { CbTranslation, cbFormat } from '@caribeng/ui';
 import * as _angular_core from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+import { CbCropRect } from '@caribeng/ui/image-cropper';
 
 interface CbCharGroup {
     label: (t: CbTranslation) => string;
@@ -32,14 +33,6 @@ declare function cbSanitizeHtml(html: string | null | undefined, options?: CbSan
 /** Texto plano del HTML (para contar caracteres o guardar un resumen). */
 declare function cbHtmlToText(html: string | null | undefined): string;
 
-/** Recuadro de recorte en fracciones de la imagen (0–1). */
-interface CbCropRect {
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-}
-
 /** Una tipografía del selector: nombre visible y pila CSS que se guarda en el HTML (`''` = predeterminada). */
 interface CbEditorFont {
     name: string;
@@ -59,8 +52,10 @@ declare const CB_EDITOR_FONTS: readonly CbEditorFontGroup[];
 /** Hoja de Google Fonts con las tipografías por defecto (regular, negrita y sus cursivas). */
 declare const CB_EDITOR_FONTS_HREF: string;
 
+declare function codeLanguageLabel(language: string): string;
+
 /** Herramientas de la barra; `'|'` es un separador y `'-'` empieza una fila nueva. */
-type CbEditorTool = 'heading' | 'fontFamily' | 'fontSize' | 'bold' | 'italic' | 'underline' | 'strike' | 'code' | 'subscript' | 'superscript' | 'textColor' | 'highlight' | 'bulletList' | 'orderedList' | 'taskList' | 'indent' | 'outdent' | 'quote' | 'codeBlock' | 'alignment' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'link' | 'image' | 'table' | 'horizontalRule' | 'clear' | 'undo' | 'redo' | 'source' | 'fullscreen' | 'specialChars' | 'findReplace' | '|' | '-';
+type CbEditorTool = 'heading' | 'fontFamily' | 'fontSize' | 'bold' | 'italic' | 'underline' | 'strike' | 'code' | 'subscript' | 'superscript' | 'textColor' | 'highlight' | 'bulletList' | 'orderedList' | 'taskList' | 'indent' | 'outdent' | 'quote' | 'codeBlock' | 'alignment' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'link' | 'image' | 'table' | 'horizontalRule' | 'clear' | 'undo' | 'redo' | 'source' | 'fullscreen' | 'specialChars' | 'findReplace' | 'details' | 'toc' | '|' | '-';
 /**
  * Barra por defecto, en dos filas: arriba el texto (bloque, fuente, tamaño, estilos y color);
  * abajo la estructura (listas, alineación, inserciones, buscar y vistas).
@@ -68,6 +63,17 @@ type CbEditorTool = 'heading' | 'fontFamily' | 'fontSize' | 'bold' | 'italic' |
 declare const CB_EDITOR_DEFAULT_TOOLBAR: readonly CbEditorTool[];
 /** Sube una imagen y devuelve su URL pública (p. ej. a tu servidor o a un bucket). */
 type CbEditorImageUpload = (file: File) => Promise<string>;
+/** Persona (o elemento) que se puede mencionar con `@`. */
+interface CbEditorMention {
+    /** Identificador que se guarda en el HTML (`data-mention`). */
+    readonly id: string;
+    /** Texto que se muestra tras la `@`. */
+    readonly label: string;
+    /** Texto secundario en la lista (cargo, correo…). */
+    readonly description?: string;
+}
+/** Lista fija de menciones o función que las busca (puede ser asíncrona, p. ej. contra tu API). */
+type CbEditorMentionSource = readonly CbEditorMention[] | ((query: string) => readonly CbEditorMention[] | Promise<readonly CbEditorMention[]>);
 /** Motivo por el que no se insertó una imagen. */
 interface CbEditorImageError {
     file: File;
@@ -171,8 +177,22 @@ declare class CbEditor implements ControlValueAccessor {
     readonly autolink: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Corrección tipográfica al escribir: `(c)` → ©, `...` → …, `->` → →, ` -- ` → –, `1/2` → ½. */
     readonly typography: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Menciones con `@`: una lista fija o una función que busca (síncrona o con
+     * promesa). Se guardan como `<span data-mention="id">@Nombre</span>`.
+     */
+    readonly mentions: _angular_core.InputSignal<CbEditorMentionSource | null>;
+    /**
+     * Guarda un borrador en este navegador (`localStorage`) mientras se escribe;
+     * al volver, ofrece restaurarlo. Usa una clave por documento (p. ej. `'acta-42'`).
+     */
+    readonly autosaveKey: _angular_core.InputSignal<string>;
+    /** Espera (ms) tras la última tecla antes de guardar el borrador. */
+    readonly autosaveDelay: _angular_core.InputSignalWithTransform<number, unknown>;
     /** HTML del contenido (saneado y normalizado; `''` si está vacío). */
     readonly value: _angular_core.ModelSignal<string>;
+    /** Se insertó una mención. */
+    readonly mentionAdd: _angular_core.OutputEmitterRef<CbEditorMention>;
     /** Una imagen no se pudo insertar (tipo, tamaño o error de subida). */
     readonly imageError: _angular_core.OutputEmitterRef<CbEditorImageError>;
     /** Estado de validación: inputs manuales + estado de Angular Forms. */
@@ -326,6 +346,42 @@ declare class CbEditor implements ControlValueAccessor {
         icon: string;
         label: (t: CbTranslation) => string;
     }[];
+    /** Bloque de código donde está el cursor (muestra su barra). */
+    protected readonly codeBlock: _angular_core.WritableSignal<HTMLElement | null>;
+    private readonly codeTick;
+    protected readonly codeLanguage: _angular_core.Signal<string>;
+    protected readonly codeLanguages: readonly ["", "typescript", "javascript", "html", "css", "scss", "json", "bash", "python", "sql"];
+    protected readonly codeCopied: _angular_core.WritableSignal<boolean>;
+    protected readonly languageLabel: typeof codeLanguageLabel;
+    protected readonly fmt: typeof cbFormat;
+    /** Qué se puede hacer con la celda actual: combinar a la derecha / abajo, separar. */
+    protected readonly cellActions: _angular_core.Signal<{
+        right: boolean;
+        down: boolean;
+        split: boolean;
+    }>;
+    protected readonly imageHasCaption: _angular_core.Signal<boolean>;
+    /** Menú de menciones: texto tras la `@`, opción activa y posición. */
+    protected readonly mention: _angular_core.WritableSignal<{
+        query: string;
+        active: number;
+        left: number;
+        top: number;
+    } | null>;
+    protected readonly mentionResults: _angular_core.WritableSignal<readonly CbEditorMention[]>;
+    private mentionAnchor;
+    private mentionToken;
+    protected readonly mentionListId: string;
+    /** Índice: firma de los títulos con la que se generó (no se reescribe si no cambian). */
+    private tocSignature;
+    /** Borrador guardado en este navegador que difiere del valor actual. */
+    protected readonly draft: _angular_core.WritableSignal<{
+        html: string;
+        savedAt: number;
+    } | null>;
+    /** Hora del último borrador guardado (se muestra al pie). */
+    protected readonly savedAt: _angular_core.WritableSignal<number | null>;
+    private draftTimer;
     /** Último HTML emitido o cargado: evita reescribir el DOM (y mover el cursor) con su propio valor. */
     private lastHtml;
     private onChange;
@@ -499,6 +555,48 @@ declare class CbEditor implements ControlValueAccessor {
     protected startResize(event: PointerEvent): void;
     /** Flechas, Inicio y Fin en las barras de tabla e imagen (patrón *toolbar*). */
     protected onContextKeydown(event: KeyboardEvent): void;
+    /** Lenguaje del bloque de código actual; si el lenguaje se conoce, lo colorea. */
+    setCodeLanguage(language: string): void;
+    protected copyCode(): Promise<void>;
+    /** Añade o quita el pie de la imagen seleccionada. */
+    toggleCaption(): void;
+    /** Enter en un pie de imagen o en el título de un desplegable: sigue en el bloque siguiente. */
+    private exitInlineBlock;
+    /** Inserta un desplegable (`<details>`) con su título seleccionado para escribirlo. */
+    insertDetails(): void;
+    /** Inserta el índice del documento: enlaces a los títulos, que se actualizan solos. */
+    insertToc(): void;
+    /**
+     * Inserta un bloque tras el bloque del cursor (o en su lugar, si es un párrafo
+     * vacío), con un párrafo detrás para seguir escribiendo. `insertHTML` del
+     * navegador parte los párrafos y descoloca estos bloques.
+     */
+    private insertBlock;
+    /** Mantiene al día los índices: ids en los títulos y enlaces a ellos. */
+    private refreshToc;
+    /** Tras escribir `@` al inicio de una palabra, abre la lista de menciones. */
+    private openMention;
+    private updateMention;
+    private searchMentions;
+    protected closeMention(): void;
+    protected mentionOptionId(index: number): string;
+    /** Cambia `@texto` por la mención (un bloque no editable) seguida de un espacio. */
+    protected applyMention(item: CbEditorMention): void;
+    private onMentionKeydown;
+    /** Ids de las personas mencionadas en el contenido (sin repetir). */
+    getMentions(): string[];
+    private draftStorageKey;
+    private loadDraft;
+    private scheduleDraft;
+    private saveDraft;
+    /** Recupera el borrador guardado en este navegador. */
+    restoreDraft(): void;
+    /** Descarta el borrador guardado. */
+    discardDraft(): void;
+    /** Borra el borrador de este navegador (llámalo tras guardar en tu servidor). */
+    clearDraft(): void;
+    protected draftDate(at: number): string;
+    protected draftTime(at: number): string;
     private toggleSource;
     /** Saneado con las opciones del editor (imágenes y tipografías permitidas). */
     private sanitize;
@@ -514,9 +612,9 @@ declare class CbEditor implements ControlValueAccessor {
     /** Lee el formato de la selección para marcar las herramientas activas. */
     private updateState;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbEditor, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbEditor, "cb-editor", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "wordCount": { "alias": "wordCount"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "toolbar": { "alias": "toolbar"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "images": { "alias": "images"; "required": false; "isSignal": true; }; "imageUpload": { "alias": "imageUpload"; "required": false; "isSignal": true; }; "maxImageSize": { "alias": "maxImageSize"; "required": false; "isSignal": true; }; "pastePlainText": { "alias": "pastePlainText"; "required": false; "isSignal": true; }; "fonts": { "alias": "fonts"; "required": false; "isSignal": true; }; "fontsHref": { "alias": "fontsHref"; "required": false; "isSignal": true; }; "bubbleMenu": { "alias": "bubbleMenu"; "required": false; "isSignal": true; }; "slashCommands": { "alias": "slashCommands"; "required": false; "isSignal": true; }; "autolink": { "alias": "autolink"; "required": false; "isSignal": true; }; "typography": { "alias": "typography"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "imageError": "imageError"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbEditor, "cb-editor", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "wordCount": { "alias": "wordCount"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "toolbar": { "alias": "toolbar"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "images": { "alias": "images"; "required": false; "isSignal": true; }; "imageUpload": { "alias": "imageUpload"; "required": false; "isSignal": true; }; "maxImageSize": { "alias": "maxImageSize"; "required": false; "isSignal": true; }; "pastePlainText": { "alias": "pastePlainText"; "required": false; "isSignal": true; }; "fonts": { "alias": "fonts"; "required": false; "isSignal": true; }; "fontsHref": { "alias": "fontsHref"; "required": false; "isSignal": true; }; "bubbleMenu": { "alias": "bubbleMenu"; "required": false; "isSignal": true; }; "slashCommands": { "alias": "slashCommands"; "required": false; "isSignal": true; }; "autolink": { "alias": "autolink"; "required": false; "isSignal": true; }; "typography": { "alias": "typography"; "required": false; "isSignal": true; }; "mentions": { "alias": "mentions"; "required": false; "isSignal": true; }; "autosaveKey": { "alias": "autosaveKey"; "required": false; "isSignal": true; }; "autosaveDelay": { "alias": "autosaveDelay"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "mentionAdd": "mentionAdd"; "imageError": "imageError"; }, never, never, true, never>;
 }
 
 export { CB_EDITOR_DEFAULT_TOOLBAR, CB_EDITOR_FONTS, CB_EDITOR_FONTS_HREF, CbEditor, cbHtmlToText, cbSanitizeHtml };
-export type { CbEditorFont, CbEditorFontGroup, CbEditorImageError, CbEditorImageUpload, CbEditorTool, CbSanitizeOptions };
+export type { CbEditorFont, CbEditorFontGroup, CbEditorImageError, CbEditorImageUpload, CbEditorMention, CbEditorMentionSource, CbEditorTool, CbSanitizeOptions };
 //# sourceMappingURL=caribeng-ui-editor.d.ts.map

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

@@ -16,4 +16,4 @@ declare class CbExpansionPanel {
 }
 
 export { CbExpansionPanel };
-//# sourceMappingURL=caribeng-ui-caribe-expansion-panel.d.ts.map
+//# sourceMappingURL=caribeng-ui-expansion-panel.d.ts.map

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

@@ -6,7 +6,7 @@ interface CbFabMenuItem {
     label: string;
 }
 /**
- * Fab-menu de Caribe Design: botón de acción flotante que despliega una lista
+ * Fab-menu: botón de acción flotante que despliega una lista
  * de acciones rápidas.
  *
  * @example
@@ -38,4 +38,4 @@ declare class CbFabMenu {
 
 export { CbFabMenu };
 export type { CbFabMenuItem };
-//# sourceMappingURL=caribeng-ui-caribe-fab-menu.d.ts.map
+//# sourceMappingURL=caribeng-ui-fab-menu.d.ts.map