import { FormControl } from '@angular/forms'; import { Color } from '@ionic/core'; import { ComponentState } from '../../types'; /** * Size options for PIN input component. */ export type PinInputSize = 'small' | 'medium' | 'large'; /** * Metadata for the PIN input component. */ export interface PinInputMetadata { /** Form control for the PIN value (stores string, optional when used in val-form) */ control?: FormControl; /** Unique token for the input */ token?: string; /** Display label */ label?: string; /** Field name */ name?: string; /** Help text */ hint?: string; /** Field state */ state?: ComponentState; /** Number of digits in PIN (default: 5) */ length?: number; /** Size of the input boxes: 'small' | 'medium' | 'large' (default: 'medium') */ size?: PinInputSize; /** Allow only numbers */ allowNumbersOnly?: boolean; /** Mask input (show dots instead of characters) */ mask?: boolean; /** Mask character to display */ maskChar?: string; /** Disable paste functionality */ disablePaste?: boolean; /** Auto focus first input */ autoFocus?: boolean; /** Auto submit when complete */ autoSubmit?: boolean; /** Component color */ color?: Color; /** Custom CSS class */ cssClass?: string; /** Input box styles */ inputStyles?: Record; /** Input box class */ inputClass?: string; /** Content key for reactive label */ contentKey?: string; /** Component class name for content lookup */ contentClass?: string; /** Fallback text if content key is not found */ contentFallback?: string; /** Custom error messages */ errors?: Record; /** Show validation errors */ showErrors?: boolean; } /** * Event emitted when PIN input changes. */ export interface PinInputChangeEvent { /** Current PIN value */ value: string; /** Whether the PIN is complete */ isComplete: boolean; /** Number of digits entered */ length: number; }