valtech-components 2.0.691 → 2.0.692

package/lib/components/molecules/tabs/types.d.ts

@@ -0,0 +1,45 @@
+import { Color } from '@ionic/core';
+/**
+ * Single tab configuration.
+ */
+export interface TabMetadata {
+    /** Unique tab identifier */
+    value: string;
+    /** Tab label (static) */
+    label?: string;
+    /** Tab icon name */
+    icon?: string;
+    /** Badge text or number */
+    badge?: string | number;
+    /** Badge color */
+    badgeColor?: Color;
+    /** Whether the tab is disabled */
+    disabled?: boolean;
+    /** Reactive content key for label */
+    contentKey?: string;
+    /** Component class name for content lookup */
+    contentClass?: string;
+    /** Fallback for label */
+    contentFallback?: string;
+}
+/**
+ * Metadata for the tabs component.
+ */
+export interface TabsMetadata {
+    /** Tab items */
+    tabs: TabMetadata[];
+    /** Currently selected tab value */
+    selectedTab?: string;
+    /** Tabs color */
+    color?: Color;
+    /** Tab bar position */
+    position?: 'top' | 'bottom';
+    /** Tab layout */
+    layout?: 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'label-hide';
+    /** Unique token identifier */
+    token?: string;
+    /** Mode style */
+    mode?: 'ios' | 'md';
+    /** Translucent background */
+    translucent?: boolean;
+}

package/lib/components/molecules/testimonial-card/testimonial-card.component.d.ts

@@ -0,0 +1,41 @@
+import { TestimonialCardMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-testimonial-card
+ *
+ * A card component for testimonials with image, title, link, and action buttons.
+ * Supports dynamic background gradients and dark mode overlay.
+ *
+ * @example
+ * <val-testimonial-card
+ *   [props]="{
+ *     title: { title: 'John Doe', subtitle: 'CEO, Company' },
+ *     link: { text: 'Read full story', url: '#' },
+ *     image: { src: 'avatar.jpg', alt: 'John Doe' },
+ *     color: 'primary'
+ *   }"
+ * ></val-testimonial-card>
+ *
+ * @input props - Card configuration (title, link, image, color, background, actions)
+ */
+export declare class TestimonialCardComponent {
+    private theme;
+    /**
+     * Card configuration.
+     */
+    props: TestimonialCardMetadata;
+    /**
+     * Gets the effective color/background.
+     * Supports: Ionic color names (primary, secondary), CSS variables (--my-color),
+     * direct colors (#fff, rgb()), or url() for images.
+     */
+    private getColor;
+    /**
+     * Generates dynamic card styles with overlay based on theme.
+     */
+    cardStyle(): {
+        [key: string]: string;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<TestimonialCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TestimonialCardComponent, "val-testimonial-card", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/molecules/testimonial-card/types.d.ts

@@ -0,0 +1,25 @@
+import { ButtonGroupMetadata } from '../button-group/types';
+import { ImageMetadata } from '../../atoms/image/types';
+import { LinkMetadata } from '../link/types';
+import { TitleBlockMetada } from '../title-block/types';
+/**
+ * Configuration for the testimonial card component.
+ */
+export interface TestimonialCardMetadata {
+    /** Title block configuration */
+    title: TitleBlockMetada;
+    /** Optional link configuration */
+    link?: LinkMetadata;
+    /** Optional image configuration */
+    image?: ImageMetadata;
+    /** Background color (Ionic color, CSS color, or CSS variable) */
+    color?: string;
+    /** Background (url(...) for image, gradient, or color) */
+    background?: string;
+    /** Optional action buttons */
+    actions?: ButtonGroupMetadata;
+    /** Minimum height of the card. Default: '450px' */
+    minHeight?: string;
+    /** Minimum width of the card. Default: '300px' */
+    minWidth?: string;
+}

package/lib/components/molecules/text-input/text-input.component.d.ts

@@ -0,0 +1,42 @@
+import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { InputMetadata } from '../../types';
+import * as i0 from "@angular/core";
+export declare class TextInputComponent implements OnInit, OnChanges {
+    private presets;
+    /**
+     * Preset name to apply. Presets define reusable input configurations
+     * (size, fill, labelPosition, etc.) that can be registered at app level.
+     *
+     * @example
+     * <val-text-input preset="form-field" [props]="{ control: ctrl }"></val-text-input>
+     */
+    preset?: string;
+    /**
+     * Input configuration object. Values here override preset values.
+     * @type {InputMetadata}
+     * @property control - The Angular FormControl for the input.
+     * @property placeholder - The placeholder text.
+     * @property label, name, hint, type, validators, etc. - See InputMetadata for all options.
+     */
+    props: Partial<InputMetadata>;
+    /**
+     * Resolved props after merging preset + explicit props.
+     * Preset values are overridden by explicit props.
+     */
+    resolvedProps: InputMetadata;
+    states: {
+        ENABLED: "ENABLED";
+        DISABLED: "DISABLED";
+        WORKING: "WORKING";
+        ERROR: "ERROR";
+    };
+    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<TextInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TextInputComponent, "val-text-input", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/molecules/textarea-input/textarea-input.component.d.ts

@@ -0,0 +1,46 @@
+import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { TextareaInputMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class TextareaInputComponent implements OnInit, OnChanges {
+    private presets;
+    /**
+     * Preset name to apply. Presets define reusable textarea configurations
+     * that can be registered at app level via provideValtechPresets().
+     *
+     * @example
+     * <val-textarea-input preset="form-field" [props]="{ control: ctrl }"></val-textarea-input>
+     */
+    preset?: string;
+    /**
+     * Textarea configuration object. Values here override preset values.
+     */
+    props: Partial<TextareaInputMetadata>;
+    /**
+     * Resolved props after merging preset + explicit props.
+     */
+    resolvedProps: TextareaInputMetadata;
+    states: {
+        ENABLED: "ENABLED";
+        DISABLED: "DISABLED";
+        WORKING: "WORKING";
+        ERROR: "ERROR";
+    };
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Merge preset configuration with explicit props.
+     * Explicit props take precedence over preset values.
+     */
+    private resolveProps;
+    private applyDefaultValue;
+    getLabel(): string;
+    getPlaceholder(): string;
+    getHint(): string;
+    get hasError(): boolean;
+    getErrorMessage(): string;
+    getRemainingChars(): number;
+    getRemainingLabel(): string;
+    counterFormatter: (inputLength: number, maxLength: number) => string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TextareaInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TextareaInputComponent, "val-textarea-input", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/molecules/textarea-input/types.d.ts

@@ -0,0 +1,74 @@
+import { FormControl } from '@angular/forms';
+import { Color } from '@ionic/core';
+import { ComponentState } from '../../types';
+/**
+ * Metadata for the textarea input component.
+ */
+export interface TextareaInputMetadata {
+    /** Associated form control */
+    control: FormControl<string>;
+    /** Unique token for the input */
+    token?: string;
+    /** Display label */
+    label?: string;
+    /** Field name */
+    name?: string;
+    /** Help text */
+    hint?: string;
+    /** Input placeholder */
+    placeholder?: string;
+    /** Field state */
+    state?: ComponentState;
+    /** Initial value for the field */
+    value?: string;
+    /** Default value configuration */
+    withDefault?: string | boolean;
+    /** Number of visible rows */
+    rows?: number;
+    /** Minimum number of rows (for autoGrow) */
+    minRows?: number;
+    /** Maximum number of rows (for autoGrow) */
+    maxRows?: number;
+    /** Auto grow textarea based on content */
+    autoGrow?: boolean;
+    /** Maximum character count */
+    maxLength?: number;
+    /** Minimum character count */
+    minLength?: number;
+    /** Show character counter */
+    showCounter?: boolean;
+    /** Counter format: 'remaining' shows remaining chars, 'current' shows current/max */
+    counterFormat?: 'remaining' | 'current';
+    /** Disable resize */
+    disableResize?: boolean;
+    /** Input mode for virtual keyboard */
+    inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    /** Autocapitalize behavior */
+    autocapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
+    /** Enable spellcheck */
+    spellcheck?: boolean;
+    /** Wrap mode */
+    wrap?: 'hard' | 'soft' | 'off';
+    /** Component color */
+    color?: Color;
+    /** Fill style */
+    fill?: 'outline' | 'solid';
+    /** Label placement */
+    labelPlacement?: 'fixed' | 'floating' | 'stacked' | 'start' | 'end';
+    /** Show clear button */
+    clearOnEdit?: boolean;
+    /** Custom CSS class */
+    cssClass?: string;
+    /** Content key for reactive label */
+    labelContentKey?: string;
+    /** Content key for reactive placeholder */
+    placeholderContentKey?: string;
+    /** Content key for reactive hint */
+    hintContentKey?: string;
+    /** Component class name for content lookup */
+    contentClass?: string;
+    /** Custom error messages */
+    errors?: Record<string, string>;
+    /** Show validation errors */
+    showErrors?: boolean;
+}

package/lib/components/molecules/ticket-grid/ticket-grid.component.d.ts

@@ -0,0 +1,40 @@
+import { EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { TicketGridMetadata, TicketGridSelectionEvent, TicketGridClickEvent, TicketData, TicketGridLegendItem } from './types';
+import * as i0 from "@angular/core";
+export declare class TicketGridComponent implements OnInit, OnChanges {
+    props: TicketGridMetadata;
+    selectionChange: EventEmitter<TicketGridSelectionEvent>;
+    ticketClick: EventEmitter<TicketGridClickEvent>;
+    tickets: TicketData[];
+    displayedTickets: TicketData[];
+    selectedTickets: number[];
+    searchTerm: string;
+    highlightedNumbers: number[];
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private buildTickets;
+    private applySearch;
+    onSearch(event: CustomEvent): void;
+    isHighlighted(number: number): boolean;
+    isSelectable(ticket: TicketData): boolean;
+    onTicketClick(ticket: TicketData): void;
+    selectRandom(): void;
+    /**
+     * Clear all selections.
+     */
+    clearSelection(): void;
+    /**
+     * Get selected ticket numbers.
+     */
+    getSelectedTickets(): number[];
+    get availableCount(): number;
+    get soldCount(): number;
+    getLegendItems(): TicketGridLegendItem[];
+    formatNumber(num: number): string;
+    getTicketAriaLabel(ticket: TicketData): string;
+    getSearchPlaceholder(): string;
+    getRandomSelectLabel(): string;
+    getColor(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TicketGridComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TicketGridComponent, "val-ticket-grid", never, { "props": { "alias": "props"; "required": false; }; }, { "selectionChange": "selectionChange"; "ticketClick": "ticketClick"; }, never, never, true, never>;
+}

package/lib/components/molecules/ticket-grid/types.d.ts

@@ -0,0 +1,122 @@
+import { Color } from '@ionic/core';
+/**
+ * Ticket status in the grid.
+ */
+export type TicketStatus = 'available' | 'sold' | 'reserved' | 'selected' | 'disabled';
+/**
+ * Individual ticket data.
+ */
+export interface TicketData {
+    /** Ticket number */
+    number: number;
+    /** Ticket status */
+    status: TicketStatus;
+    /** Optional owner name (for sold tickets) */
+    owner?: string;
+    /** Optional custom label */
+    label?: string;
+}
+/**
+ * Legend item for ticket grid.
+ */
+export interface TicketGridLegendItem {
+    /** Status this legend represents */
+    status: TicketStatus;
+    /** Display label */
+    label: string;
+    /** Optional count */
+    count?: number;
+}
+/**
+ * Metadata for the ticket grid component.
+ */
+export interface TicketGridMetadata {
+    /** Total number of tickets */
+    totalTickets: number;
+    /** Starting ticket number (default: 1) */
+    startNumber?: number;
+    /** Numbers of sold tickets */
+    soldTickets?: number[];
+    /** Numbers of reserved tickets */
+    reservedTickets?: number[];
+    /** Numbers of disabled tickets */
+    disabledTickets?: number[];
+    /** Currently selected tickets */
+    selectedTickets?: number[];
+    /** Custom ticket data (overrides computed status) */
+    ticketData?: TicketData[];
+    /** Selection mode */
+    selectionMode?: 'single' | 'multiple' | 'none';
+    /** Maximum tickets that can be selected */
+    maxSelection?: number;
+    /** Minimum tickets required */
+    minSelection?: number;
+    /** Allow selecting sold/reserved tickets (for admin) */
+    allowSelectSold?: boolean;
+    /** Number of columns */
+    columns?: number;
+    /** Show legend */
+    showLegend?: boolean;
+    /** Legend position */
+    legendPosition?: 'top' | 'bottom';
+    /** Custom legend items */
+    legendItems?: TicketGridLegendItem[];
+    /** Show ticket count summary */
+    showSummary?: boolean;
+    /** Show search/filter input */
+    showSearch?: boolean;
+    /** Search placeholder */
+    searchPlaceholder?: string;
+    /** Ticket number padding (e.g., 3 = "001") */
+    numberPadding?: number;
+    /** Component color for selected state */
+    color?: Color;
+    /** Ticket size */
+    ticketSize?: 'small' | 'medium' | 'large';
+    /** Grid gap */
+    gap?: number;
+    /** Custom CSS class */
+    cssClass?: string;
+    /** Show random selection button */
+    showRandomSelect?: boolean;
+    /** Random selection count */
+    randomSelectCount?: number;
+    /** Random select button label */
+    randomSelectLabel?: string;
+    /** Content key for search placeholder */
+    searchPlaceholderContentKey?: string;
+    /** Content key for random select label */
+    randomSelectLabelContentKey?: string;
+    /** Content class for reactive content */
+    contentClass?: string;
+}
+/**
+ * Event emitted when selection changes.
+ */
+export interface TicketGridSelectionEvent {
+    /** Currently selected ticket numbers */
+    selectedTickets: number[];
+    /** Last changed ticket number */
+    changedTicket: number;
+    /** Whether the ticket was selected or deselected */
+    action: 'select' | 'deselect';
+    /** Total count of selected tickets */
+    count: number;
+    /** Whether max selection reached */
+    maxReached: boolean;
+}
+/**
+ * Event emitted when a ticket is clicked (regardless of selection).
+ */
+export interface TicketGridClickEvent {
+    /** Ticket number */
+    number: number;
+    /** Ticket status */
+    status: TicketStatus;
+    /** Whether it was selected/deselected (null if not selectable) */
+    selected: boolean | null;
+}
+/**
+ * Default legend labels in Spanish.
+ */
+export declare const DEFAULT_LEGEND_LABELS: Record<TicketStatus, string>;

package/lib/components/molecules/timeline/timeline.component.d.ts

@@ -0,0 +1,14 @@
+import { EventEmitter } from '@angular/core';
+import { TimelineMetadata, TimelineItemMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class TimelineComponent {
+    props: TimelineMetadata;
+    itemClick: EventEmitter<{
+        item: TimelineItemMetadata;
+        index: number;
+    }>;
+    getItemColor(item: TimelineItemMetadata): string;
+    onItemClick(item: TimelineItemMetadata, index: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TimelineComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TimelineComponent, "val-timeline", never, { "props": { "alias": "props"; "required": false; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
+}

package/lib/components/molecules/timeline/types.d.ts

@@ -0,0 +1,39 @@
+import { Color } from '@ionic/core';
+/**
+ * Timeline item configuration.
+ */
+export interface TimelineItemMetadata {
+    /** Item title */
+    title: string;
+    /** Item content/description */
+    content?: string;
+    /** Date or time label */
+    date?: string;
+    /** Item icon */
+    icon?: string;
+    /** Item color */
+    color?: Color;
+    /** Whether item is active/current */
+    active?: boolean;
+    /** Unique token identifier */
+    token?: string;
+}
+/**
+ * Metadata for the timeline component.
+ */
+export interface TimelineMetadata {
+    /** Timeline items */
+    items: TimelineItemMetadata[];
+    /** Timeline orientation */
+    orientation?: 'vertical' | 'horizontal';
+    /** Alternate items on both sides (vertical only) */
+    alternate?: boolean;
+    /** Show connector lines */
+    showConnectors?: boolean;
+    /** Default color for all items */
+    color?: Color;
+    /** Connector style */
+    connectorStyle?: 'solid' | 'dashed';
+    /** Unique token identifier */
+    token?: string;
+}

package/lib/components/molecules/title-block/title-block.component.d.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectorRef, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { TitleBlockMetada } from './types';
+import * as i0 from "@angular/core";
+export declare class TitleBlockComponent implements OnInit, OnChanges {
+    private cdr;
+    props: TitleBlockMetada;
+    constructor(cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TitleBlockComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TitleBlockComponent, "val-title-block", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/molecules/title-block/types.d.ts

@@ -0,0 +1,15 @@
+import { TitleMetadata } from '../../atoms/title/types';
+/**
+ * Title block configuration object.
+ * @type {TitleBlockMetada}
+ * @property title - Main title display configuration.
+ * @property aboveTitle - Title above the main title (optional).
+ * @property bellowTitle - Title below the main title (optional).
+ * @property position - Position of the block ('center', etc.).
+ */
+export type TitleBlockMetada = {
+    position: 'center' | 'left' | 'right' | 'leftocenter';
+    title?: TitleMetadata;
+    aboveTitle?: TitleMetadata;
+    bellowTitle?: TitleMetadata;
+};

package/lib/components/molecules/toggle-input/toggle-input.component.d.ts

@@ -0,0 +1,39 @@
+import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ToggleInputMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class ToggleInputComponent implements OnInit, OnChanges {
+    private presets;
+    /**
+     * Preset name to apply. Presets define reusable toggle input configurations
+     * that can be registered at app level via provideValtechPresets().
+     *
+     * @example
+     * <val-toggle-input preset="form-field" [props]="{ control: ctrl }"></val-toggle-input>
+     */
+    preset?: string;
+    /**
+     * Input configuration object. Values here override preset values.
+     * @type {ToggleInputMetadata}
+     */
+    props: Partial<ToggleInputMetadata>;
+    /**
+     * Resolved props after merging preset + explicit props.
+     */
+    resolvedProps: ToggleInputMetadata;
+    states: {
+        ENABLED: "ENABLED";
+        DISABLED: "DISABLED";
+        WORKING: "WORKING";
+        ERROR: "ERROR";
+    };
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Merge preset configuration with explicit props.
+     * Explicit props take precedence over preset values.
+     */
+    private resolveProps;
+    getDisplayLabel(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToggleInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToggleInputComponent, "val-toggle-input", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/molecules/toggle-input/types.d.ts

@@ -0,0 +1,30 @@
+import { FormControl } from '@angular/forms';
+import { Color } from '@ionic/core';
+import { ComponentState } from '../../types';
+/**
+ * Metadata for the toggle input component.
+ */
+export interface ToggleInputMetadata {
+    /** Associated form control */
+    control: FormControl<boolean>;
+    /** Unique token for the input */
+    token?: string;
+    /** Display label */
+    label?: string;
+    /** Label position relative to toggle */
+    labelPosition?: 'start' | 'end';
+    /** Toggle color */
+    color?: Color;
+    /** Component state */
+    state?: ComponentState;
+    /** Justify content alignment */
+    justify?: 'start' | 'end' | 'space-between';
+    /** Enable/disable toggle */
+    disabled?: boolean;
+    /** Reactive content key for label */
+    contentKey?: string;
+    /** Component class name for content lookup */
+    contentClass?: string;
+    /** Fallback text if contentKey is not found */
+    contentFallback?: string;
+}

package/lib/components/molecules/update-banner/update-banner.component.d.ts

@@ -0,0 +1,42 @@
+import { BannerMetadata } from '../../organisms/banner/types';
+import * as i0 from "@angular/core";
+/**
+ * val-update-banner
+ *
+ * Banner de actualización que aparece cuando hay una nueva versión disponible.
+ * Se cierra automáticamente cuando el usuario hace clic en "Actualizar" o en cerrar.
+ *
+ * @example
+ * ```html
+ * <!-- Uso básico -->
+ * <val-update-banner />
+ *
+ * <!-- El banner solo aparece si hay actualización disponible -->
+ * ```
+ */
+export declare class UpdateBannerComponent {
+    private appConfig;
+    private i18n;
+    /**
+     * Signal para controlar si el banner fue descartado por el usuario.
+     */
+    private dismissed;
+    /**
+     * Indica si el banner debe mostrarse.
+     */
+    readonly show: import("@angular/core").Signal<boolean>;
+    /**
+     * Props del banner calculadas reactivamente.
+     */
+    readonly bannerProps: import("@angular/core").Signal<BannerMetadata>;
+    /**
+     * Maneja el clic en acciones del banner.
+     */
+    onAction(token: string): void;
+    /**
+     * Descarta el banner temporalmente (hasta que se recargue la página).
+     */
+    dismiss(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UpdateBannerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UpdateBannerComponent, "val-update-banner", never, {}, {}, never, never, true, never>;
+}

package/lib/components/molecules/username-input/types.d.ts

@@ -0,0 +1,34 @@
+import { FormControl } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { ComponentState } from '../../types';
+/**
+ * Metadata for UsernameInputComponent.
+ */
+export interface UsernameInputMetadata {
+    /** FormControl para el valor del username */
+    control: FormControl<string>;
+    /** Label del campo */
+    label?: string;
+    /** Placeholder del input */
+    placeholder?: string;
+    /** Prefijo visual (default: '@') */
+    prefix?: string;
+    /** Longitud mínima permitida (default: 3) */
+    minLength?: number;
+    /** Longitud máxima permitida (default: 30) */
+    maxLength?: number;
+    /** Función para verificar disponibilidad del username */
+    checkAvailability?: (handle: string) => Observable<boolean>;
+    /** Mensajes de error personalizados */
+    errors?: Record<string, string>;
+    /** Estado del componente */
+    state?: ComponentState;
+    /** Mostrar indicador de disponibilidad (default: true) */
+    showAvailability?: boolean;
+    /** Debounce en ms para check de disponibilidad (default: 500) */
+    debounceTime?: number;
+}
+/**
+ * Estado de disponibilidad del username.
+ */
+export type UsernameAvailabilityStatus = 'idle' | 'checking' | 'available' | 'taken' | 'invalid';