valtech-components 2.0.794 → 2.0.795

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

@@ -1,59 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,21 +0,0 @@
-/**
- * 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

@@ -1,12 +0,0 @@
-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

@@ -1,29 +0,0 @@
-/**
- * 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

@@ -1,33 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,74 +0,0 @@
-/**
- * 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;
-}