valtech-components 2.0.795 → 2.0.796

package/lib/components/atoms/price-tag/types.d.ts

@@ -0,0 +1,59 @@
+import { Color } from '@ionic/core';
+/**
+ * Metadata for the price tag component.
+ */
+export interface PriceTagMetadata {
+    /** Price amount */
+    amount: number;
+    /** Currency code (ISO 4217) */
+    currency?: string;
+    /** Currency symbol (overrides auto-detection) */
+    currencySymbol?: string;
+    /** Original price (for showing discounts) */
+    originalAmount?: number;
+    /** Discount percentage to show */
+    discountPercentage?: number;
+    /** Size variant */
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+    /** Display variant */
+    variant?: 'default' | 'highlight' | 'sale' | 'free' | 'badge';
+    /** Show currency code after amount */
+    showCurrencyCode?: boolean;
+    /** Decimal places */
+    decimals?: number;
+    /** Period/frequency label (e.g., "/mes", "por boleto") */
+    period?: string;
+    /** Prefix text (e.g., "Desde") */
+    prefix?: string;
+    /** Suffix text (e.g., "MXN") */
+    suffix?: string;
+    /** Component color */
+    color?: Color;
+    /** Custom CSS class */
+    cssClass?: string;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Show currency symbol */
+    showSymbol?: boolean;
+    /** Content key for prefix */
+    prefixContentKey?: string;
+    /** Content key for period */
+    periodContentKey?: string;
+    /** Content class for reactive content */
+    contentClass?: string;
+}
+/**
+ * Currency configuration.
+ */
+export interface CurrencyInfo {
+    code: string;
+    symbol: string;
+    symbolPosition: 'prefix' | 'suffix';
+    decimals: number;
+    thousandsSeparator: string;
+    decimalSeparator: string;
+}
+/**
+ * Common currency configurations.
+ */
+export declare const CURRENCY_INFO: Record<string, CurrencyInfo>;

package/lib/components/atoms/progress-bar/progress-bar.component.d.ts

@@ -0,0 +1,35 @@
+import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ProgressBarMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class ProgressBarComponent implements OnInit, OnChanges {
+    private presets;
+    /**
+     * Preset name to apply. Presets define reusable progress bar configurations
+     * that can be registered at app level via provideValtechPresets().
+     */
+    preset?: string;
+    /**
+     * Progress bar configuration object. Values here override preset values.
+     * @type {ProgressBarMetadata}
+     * @property progress - The progress value (0 to 1).
+     * @property size - The progress bar size ('small' | 'medium' | 'large' | 'xlarge').
+     * @property color - The progress bar color (Ionic color string).
+     * @property buffer - The buffer value for the bar.
+     * @property type - The type of progress bar ('determinate' | 'indeterminate').
+     * @property rounded - Whether the bar has rounded corners.
+     */
+    props: Partial<ProgressBarMetadata>;
+    /**
+     * Resolved props after merging preset + explicit props.
+     */
+    resolvedProps: ProgressBarMetadata;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Merge preset configuration with explicit props.
+     * Explicit props take precedence over preset values.
+     */
+    private resolveProps;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ProgressBarComponent, "val-progress-bar", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/atoms/progress-bar/types.d.ts

@@ -0,0 +1,19 @@
+import { Color } from '@ionic/core';
+/**
+ * Props for val-progress-bar component.
+ *
+ * @property progress - The progress value (0 to 1).
+ * @property size - The progress bar size ('small' | 'medium' | 'large' | 'xlarge').
+ * @property color - The progress bar color (Ionic color string).
+ * @property buffer - The buffer value for the bar.
+ * @property type - The type of progress bar ('determinate' | 'indeterminate').
+ * @property rounded - Whether the bar has rounded corners.
+ */
+export interface ProgressBarMetadata {
+    progress: number;
+    size: 'small' | 'medium' | 'large' | 'xlarge';
+    color: Color;
+    buffer: number;
+    type: 'determinate' | 'indeterminate';
+    rounded: boolean;
+}

package/lib/components/atoms/progress-ring/progress-ring.component.d.ts

@@ -0,0 +1,20 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { ProgressRingMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class ProgressRingComponent implements OnChanges {
+    props: ProgressRingMetadata;
+    size: number;
+    strokeWidth: number;
+    radius: number;
+    center: number;
+    circumference: number;
+    dashOffset: number;
+    labelFontSize: number;
+    ngOnChanges(changes: SimpleChanges): void;
+    getProgressColor(): string;
+    getTrackColor(): string;
+    private calculateDimensions;
+    private calculateProgress;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ProgressRingComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ProgressRingComponent, "val-progress-ring", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/atoms/progress-ring/types.d.ts

@@ -0,0 +1,24 @@
+import { Color } from '@ionic/core';
+/**
+ * Metadata for the progress ring component.
+ */
+export interface ProgressRingMetadata {
+    /** Progress value (0-100) */
+    value: number;
+    /** Size in pixels */
+    size?: number;
+    /** Stroke width */
+    strokeWidth?: number;
+    /** Progress color */
+    color?: Color;
+    /** Track (background) color */
+    trackColor?: Color;
+    /** Show percentage value */
+    showValue?: boolean;
+    /** Custom label (overrides percentage) */
+    label?: string;
+    /** Animate progress changes */
+    animated?: boolean;
+    /** Unique token identifier */
+    token?: string;
+}

package/lib/components/atoms/qr-code/qr-code.component.d.ts

@@ -0,0 +1,33 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { QrCodeMetadata, QrCodeActionEvent } from './types';
+import * as i0 from "@angular/core";
+export declare class QrCodeComponent implements OnInit {
+    props: QrCodeMetadata;
+    actionComplete: EventEmitter<QrCodeActionEvent>;
+    imageLoad: EventEmitter<void>;
+    imageError: EventEmitter<Error>;
+    canShare: boolean;
+    canCopy: boolean;
+    private qrService;
+    private i18n;
+    ngOnInit(): void;
+    getDisplaySize(): string;
+    getBorderRadius(): string;
+    getPadding(): string;
+    getQrBorderRadius(): string;
+    getContainerClasses(): string;
+    getContainerBackground(): string;
+    getShadow(): string;
+    getLabelFontSize(): string;
+    hasActions(): boolean;
+    getDownloadLabel(): string;
+    getCopyLabel(): string;
+    getShareLabel(): string;
+    onDownload(): Promise<void>;
+    onCopy(): Promise<void>;
+    onShare(): Promise<void>;
+    onImageLoad(): void;
+    onImageError(_event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<QrCodeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<QrCodeComponent, "val-qr-code", never, { "props": { "alias": "props"; "required": false; }; }, { "actionComplete": "actionComplete"; "imageLoad": "imageLoad"; "imageError": "imageError"; }, never, never, true, never>;
+}

package/lib/components/atoms/qr-code/types.d.ts

@@ -0,0 +1,124 @@
+import { QrResult } from '../../../services/qr-generator/types';
+/**
+ * Theme presets for quick styling.
+ */
+export type QrDisplayTheme = 'default' | 'minimal' | 'gradient-purple' | 'gradient-blue' | 'gradient-sunset' | 'gradient-mint' | 'dark' | 'neon';
+/**
+ * Label position options.
+ */
+export type QrLabelPosition = 'top' | 'bottom';
+/**
+ * Gradient direction options.
+ */
+export type QrGradientDirection = 'to-right' | 'to-left' | 'to-bottom' | 'to-top' | 'to-bottom-right' | 'to-bottom-left' | 'to-top-right' | 'to-top-left';
+/**
+ * Gradient configuration for backgrounds.
+ */
+export interface QrDisplayGradient {
+    /** Start color */
+    from: string;
+    /** End color */
+    to: string;
+    /** Optional middle color */
+    via?: string;
+    /** Gradient direction */
+    direction?: QrGradientDirection;
+}
+/**
+ * Label configuration for QR display.
+ */
+export interface QrLabelConfig {
+    /** Label text */
+    text: string;
+    /** Position (top or bottom) */
+    position?: QrLabelPosition;
+    /** Text color */
+    color?: string;
+    /** Font size in pixels */
+    fontSize?: number;
+    /** Font weight */
+    fontWeight?: 'normal' | 'medium' | 'semibold' | 'bold';
+    /** Icon name (ionicon) to show with label */
+    icon?: string;
+    /** Icon position */
+    iconPosition?: 'start' | 'end';
+}
+/**
+ * Metadata for the QR code display component.
+ */
+export interface QrCodeMetadata {
+    /** QR result from QrGeneratorService */
+    qr: QrResult;
+    /** Alt text for accessibility */
+    alt?: string;
+    /** Whether to show download button */
+    showDownload?: boolean;
+    /** Download button label */
+    downloadLabel?: string;
+    /** Whether to show copy button */
+    showCopy?: boolean;
+    /** Copy button label */
+    copyLabel?: string;
+    /** Whether to show share button */
+    showShare?: boolean;
+    /** Share button label */
+    shareLabel?: string;
+    /** Custom CSS class */
+    cssClass?: string;
+    /** Size override (will scale the image) */
+    displaySize?: number;
+    /** Border radius for the container */
+    borderRadius?: number;
+    /** Show border around QR */
+    showBorder?: boolean;
+    /** Border color */
+    borderColor?: string;
+    /** Padding around the QR code */
+    padding?: number;
+    /** Background color for container */
+    containerBackground?: string;
+    /** Loading state */
+    loading?: boolean;
+    /** Custom filename for download (without extension) */
+    downloadFilename?: string;
+    /** Share title */
+    shareTitle?: string;
+    /** Share text/description */
+    shareText?: string;
+    /** Custom filename for share */
+    shareFilename?: string;
+    /** Theme preset for quick styling */
+    theme?: QrDisplayTheme;
+    /** Label/caption configuration */
+    label?: QrLabelConfig;
+    /** Gradient background (overrides containerBackground) */
+    gradient?: QrDisplayGradient;
+    /** Box shadow (e.g., 'sm', 'md', 'lg', 'xl', or custom CSS) */
+    shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | string;
+    /** Glow effect color (for neon theme) */
+    glowColor?: string;
+    /** Enable pulse animation on hover */
+    pulseOnHover?: boolean;
+    /** Enable scale animation on hover */
+    scaleOnHover?: boolean;
+    /** QR image border radius (to round the QR itself) */
+    qrBorderRadius?: number;
+    /** Reactive content keys */
+    downloadLabelContentKey?: string;
+    copyLabelContentKey?: string;
+    shareLabelContentKey?: string;
+    contentClass?: string;
+}
+/**
+ * Event emitted after QR code action.
+ */
+export interface QrCodeActionEvent {
+    /** Action type */
+    action: 'download' | 'copy' | 'share';
+    /** Whether action was successful */
+    success: boolean;
+    /** QR result */
+    qr: QrResult;
+    /** Error if action failed */
+    error?: Error;
+}

package/lib/components/atoms/rights-footer/rights-footer.component.d.ts

@@ -0,0 +1,53 @@
+import { RightsFooterMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-rights-footer
+ *
+ * A simple component that displays copyright text with dynamic year.
+ * Useful for footers where you need to show "© 2024 Company. All rights reserved."
+ *
+ * @example
+ * <val-rights-footer></val-rights-footer>
+ *
+ * @example
+ * <val-rights-footer
+ *   [props]="{
+ *     companyName: 'My Company',
+ *     rightsText: 'All rights reserved.',
+ *     color: 'medium',
+ *     align: 'left'
+ *   }"
+ * ></val-rights-footer>
+ *
+ * @input props - Optional configuration (companyName, rightsText, color, align)
+ */
+export declare class RightsFooterComponent {
+    private i18n;
+    /**
+     * Optional configuration for the rights footer.
+     * Signal-based input for full reactivity with computed().
+     */
+    readonly props: import("@angular/core").InputSignal<RightsFooterMetadata>;
+    /**
+     * Current year for copyright.
+     */
+    currentYear: number;
+    /**
+     * Computed copyright text - reactive to both language AND props changes.
+     */
+    copyrightText: import("@angular/core").Signal<string>;
+    /**
+     * Computed helper for align prop in template.
+     */
+    propsAlign: import("@angular/core").Signal<"left" | "center" | "right">;
+    /**
+     * Computed helper for color prop in template.
+     */
+    propsColor: import("@angular/core").Signal<"medium" | "primary" | "secondary" | "tertiary" | "success" | "warning" | "danger" | "light" | "dark">;
+    /**
+     * Computed helper for withMargin prop in template.
+     */
+    propsWithMargin: import("@angular/core").Signal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RightsFooterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RightsFooterComponent, "val-rights-footer", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/components/atoms/rights-footer/types.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Configuration for the rights footer component.
+ */
+export interface RightsFooterMetadata {
+    /**
+     * Full custom text with {year} placeholder for dynamic year.
+     * When set, companyName and rightsText are ignored.
+     * @example "© {year}, Soluciones Valtech Ltda. Todos los derechos reservados."
+     */
+    fullText?: string;
+    /** Company name to display. Default: 'Valtech' */
+    companyName?: string;
+    /** Rights text. Default: 'Todos los derechos reservados.' */
+    rightsText?: string;
+    /** Text color. Default: 'dark' */
+    color?: 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'dark' | 'light' | 'medium';
+    /** Text alignment. Default: 'center' */
+    align?: 'left' | 'center' | 'right';
+    /** Apply margin-bottom spacing. Default: false */
+    withMargin?: boolean;
+}

package/lib/components/atoms/skeleton/skeleton.component.d.ts

@@ -0,0 +1,12 @@
+import { SkeletonMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class SkeletonComponent {
+    props: SkeletonMetadata;
+    getWidth(): string;
+    getHeight(): string;
+    getBorderRadius(): string;
+    isCircle(): boolean;
+    getLines(): number[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkeletonComponent, "val-skeleton", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/atoms/skeleton/types.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Skeleton type presets.
+ */
+export type SkeletonType = 'text' | 'avatar' | 'thumbnail' | 'card' | 'list-item' | 'paragraph' | 'custom';
+/**
+ * Metadata for the skeleton component.
+ */
+export interface SkeletonMetadata {
+    /** Skeleton type preset */
+    type?: SkeletonType;
+    /** Number of lines (for text/paragraph type) */
+    lines?: number;
+    /** Enable animation */
+    animated?: boolean;
+    /** Custom width */
+    width?: string;
+    /** Custom height */
+    height?: string;
+    /** Border radius */
+    borderRadius?: string;
+    /** Show as circle (for avatar) */
+    circle?: boolean;
+    /** Unique token identifier */
+    token?: string;
+}
+/**
+ * Preset configurations for skeleton types.
+ */
+export declare const SKELETON_PRESETS: Record<SkeletonType, Partial<SkeletonMetadata>>;

package/lib/components/atoms/text/text.component.d.ts

@@ -0,0 +1,33 @@
+import { TextMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class TextComponent {
+    /**
+     * Text configuration object.
+     * Signal-based input for full reactivity with computed().
+     */
+    readonly props: import("@angular/core").InputSignal<TextMetadata>;
+    /**
+     * Computed content that SE ACTUALIZA when props() changes.
+     */
+    displayContent: import("@angular/core").Signal<string>;
+    propsColor: import("@angular/core").Signal<import("@ionic/core").Color>;
+    propsSize: import("@angular/core").Signal<"small" | "medium" | "large" | "xlarge">;
+    propsBold: import("@angular/core").Signal<boolean>;
+    propsProcessLinks: import("@angular/core").Signal<boolean>;
+    propsAllowPartialBold: import("@angular/core").Signal<boolean>;
+    propsLinkConfig: import("@angular/core").Signal<import("valtech-components").LinkProcessorConfig>;
+    /**
+     * Check if content has partial bold tags.
+     */
+    hasPartialBold: import("@angular/core").Signal<boolean>;
+    /**
+     * Process partial bold tags in the content.
+     */
+    processPartialBold: import("@angular/core").Signal<string>;
+    /**
+     * Interpolate placeholders in content with provided values.
+     */
+    private interpolateContent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TextComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TextComponent, "val-text", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/components/atoms/text/types.d.ts

@@ -0,0 +1,42 @@
+import { Color } from '@ionic/core';
+import { LinkProcessorConfig } from '../../../services/link-processor.service';
+/**
+ * Props for val-text component.
+ *
+ * The component supports both static content and reactive content from the language service.
+ * Use either `content` for static text or `contentKey` + `contentClass` for reactive text.
+ *
+ * @property content - Static text to display (takes precedence over contentKey)
+ * @property contentKey - Key for dynamic content from language service
+ * @property contentClass - Component class name for content lookup (required with contentKey)
+ * @property contentFallback - Fallback text if contentKey is not found
+ * @property contentInterpolation - Values to interpolate into the content string
+ * @property color - The text color (Ionic color string)
+ * @property size - The text size ('small' | 'medium' | 'large' | 'xlarge')
+ * @property bold - Whether the text is bold
+ * @property processLinks - Whether to automatically process and convert links in the text (default: false)
+ * @property linkConfig - Configuration for link processing (colors, target behavior, etc.)
+ */
+export interface TextMetadata {
+    size: 'small' | 'medium' | 'large' | 'xlarge';
+    color: Color;
+    content?: string;
+    bold: boolean;
+    contentKey?: string;
+    contentClass?: string;
+    contentFallback?: string;
+    contentInterpolation?: Record<string, string | number>;
+    processLinks?: boolean;
+    linkConfig?: LinkProcessorConfig;
+    allowPartialBold?: boolean;
+}
+/**
+ * Configuration for reactive content in val-text component.
+ * Use this interface when you only need to specify content-related properties.
+ */
+export interface TextContentConfig {
+    contentKey: string;
+    contentClass: string;
+    contentFallback?: string;
+    contentInterpolation?: Record<string, string | number>;
+}

package/lib/components/atoms/title/title.component.d.ts

@@ -0,0 +1,21 @@
+import { TitleMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class TitleComponent {
+    /**
+     * Title configuration object.
+     * @type {TitleMetadata}
+     * @property content - Static title text.
+     * @property color - The title color (Ionic color string).
+     * @property size - The title size ('small' | 'medium' | 'large' | 'xlarge').
+     * @property bold - Whether the title is bold.
+     * @property thin - Whether the title is thin (optional).
+     */
+    props: TitleMetadata;
+    /**
+     * Returns the content to display.
+     * Uses static content, or contentFallback for backwards compatibility.
+     */
+    getDisplayContent(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TitleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TitleComponent, "val-title", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/atoms/title/types.d.ts

@@ -0,0 +1,36 @@
+import { Color } from '@ionic/core';
+/**
+ * Props for val-title component.
+ *
+ * @property content - Title text to display.
+ * @property color - The title color (Ionic color string).
+ * @property size - The title size ('small' | 'medium' | 'large' | 'xlarge').
+ * @property bold - Whether the title is bold.
+ * @property thin - Whether the title is thin (optional).
+ * @property contentFallback - Fallback text (deprecated, use content instead).
+ */
+export interface TitleMetadata {
+    content?: string;
+    size: 'small' | 'medium' | 'large' | 'xlarge';
+    color: Color;
+    bold: boolean;
+    thin?: boolean;
+    /** @deprecated Use content instead */
+    contentFallback?: string;
+}
+/**
+ * Factory function to create title props.
+ *
+ * @param styleConfig - Title styling configuration
+ * @param content - The title text
+ * @returns Complete TitleMetadata object
+ *
+ * @example
+ * ```typescript
+ * const props = createTitleProps(
+ *   { size: 'large', color: 'primary', bold: true },
+ *   'My Title'
+ * );
+ * ```
+ */
+export declare function createTitleProps(styleConfig: Pick<TitleMetadata, 'size' | 'color' | 'bold' | 'thin'>, content: string): TitleMetadata;

package/lib/components/atoms/user-avatar/types.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Configuración del componente `val-user-avatar`.
+ *
+ * Avatar smart con cadena de fallback:
+ *   foto (`avatarUrl`) → iniciales (de `name`/`email`) → icono persona.
+ *
+ * Diseñado para headers, perfiles, listas de usuarios y dropdowns.
+ *
+ * @example Con user completo (greeting hero):
+ * ```html
+ * <val-user-avatar [props]="{ user: auth.user(), size: 'medium' }" />
+ * ```
+ *
+ * @example Standalone fields:
+ * ```html
+ * <val-user-avatar [props]="{ name: 'Juan Pérez', avatarUrl: '/a.jpg', size: 'small' }" />
+ * ```
+ *
+ * @example Header avatar clickable (link a /profile):
+ * ```html
+ * <val-user-avatar [props]="{ user: auth.user() }" (onClick)="goToProfile()" />
+ * ```
+ */
+export interface UserAvatarMetadata {
+    /**
+     * User shape — pasa el resultado de `auth.user()` directamente. Cualquier
+     * combinación de `name`/`avatarUrl`/`email` se acepta. Tienen precedencia
+     * sobre los props sueltos (`name`, `email`, `avatarUrl`) abajo.
+     */
+    user?: {
+        name?: string;
+        avatarUrl?: string;
+        email?: string;
+        handle?: string;
+    } | null;
+    /** Nombre directo — usado si no hay `user` o si `user.name` está vacío. */
+    name?: string;
+    /** Email directo — usado si no hay `user` o si `user.email` está vacío. */
+    email?: string;
+    /** URL de avatar directa — usado si no hay `user` o si `user.avatarUrl` está vacío. */
+    avatarUrl?: string;
+    /**
+     * Tamaño:
+     * - `'xsmall'` 24px
+     * - `'small'` (default) 32px
+     * - `'medium'` 48px
+     * - `'large'` 72px
+     * - `'xlarge'` 96px
+     */
+    size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+    /**
+     * Forma:
+     * - `'circle'` (default) — redondo completo
+     * - `'square'` — bordes redondeados pero cuadrado
+     */
+    shape?: 'circle' | 'square';
+    /**
+     * Color de fondo para el modo iniciales/icono. Cuando no se provee, se
+     * derive deterministicamente del `name`/`email` (mismo input → mismo color)
+     * para que el mismo user tenga siempre el mismo color.
+     */
+    background?: string;
+    /** Color del texto/icono cuando no hay foto. Default `'#fff'`. */
+    foreground?: string;
+    /**
+     * Mostrar border. Útil para overlays sobre fotos o backgrounds dark.
+     * Default: `false`.
+     */
+    bordered?: boolean;
+    /** Habilita grayscale (e.g., user desactivado). Default: `false`. */
+    grayscale?: boolean;
+    /** Clase CSS extra. */
+    cssClass?: string;
+}