import { FormControl, ValidatorFn } from '@angular/forms'; import { Color } from '@ionic/core'; import { ImageMetadata } from './atoms/image/types'; /** * Possible states for an interactive component. */ export type ComponentState = 'ENABLED' | 'DISABLED' | 'WORKING' | 'ERROR'; /** * Object containing all possible component states. */ export declare const ComponentStates: { ENABLED: "ENABLED"; DISABLED: "DISABLED"; WORKING: "WORKING"; ERROR: "ERROR"; }; /** * Types of actions that a button or link can perform. */ export declare enum ActionType { BROWSER_NEW_TAB = 0,// Open in a new browser tab BROWSER_DOWNLOAD = 1,// Download via browser NATIVE_DOWNLOAD = 2,// Download using native capabilities APP_NAVIGATION = 3,// Internal app navigation BROWSER_NAVIGATION = 4 } /** * Represents an executable action for a button or link. */ export type Action = { /** Action description */ description: string; /** Action type */ type: ActionType; /** Action source or destination */ source: string; }; /** * Supported input types for forms. */ export declare enum InputType { TEXT = 0, TEXTAREA = 1, EMAIL = 2, PASSWORD = 3, COMMENT = 4, NUMBER = 5, NUMBER_FROM_TO = 6, PIN_CODE = 7, DATE = 8, DATE_RANGE = 9, HOUR = 10, CHECK = 11, RADIO = 12, SELECT = 13, SEARCH_SELECT = 14, MULTI_SELECT = 15, MULTI_SELECT_SIMPLE = 16, FILE = 17, TOGGLE = 18, RANGE = 19, PHONE = 20, CURRENCY = 21, CHECKBOX_RADIO = 22, HANDLE = 23, ATTACHMENT = 24 } /** * Option for select, radio, etc. inputs. */ export type InputOption = { /** Unique option identifier */ id: string; /** Display name */ name: string; /** Whether the option is selected by default */ selected?: boolean; /** Display order */ order: number; }; /** * Metadata for a form field. */ export type InputMetadata = { /** Associated form control (optional, created internally by val-form) */ control?: FormControl; /** From control (only for NUMBER_FROM_TO type) */ fromControl?: FormControl; /** To control (only for NUMBER_FROM_TO type) */ toControl?: FormControl; /** Unique token for the input */ token: string; /** Display label */ label: string; /** Field name */ name: string; /** Help text (shown below input, for validation hints) */ hint: string; /** Description text (shown below label, explains the field purpose) */ description?: string; /** Input placeholder */ placeholder: string; /** Input type */ type: InputType; /** Display order */ order: number; /** Associated validators */ validators: ValidatorFn[]; /** Options (for select, radio, etc.) */ options?: InputOption[]; /** Allowed range (for number, date, etc.) */ range?: { min: number; max: number; }; /** Custom error messages */ errors: { [key: string]: string; }; /** Initial value for the field */ value?: string; /** Default value configuration - string for custom defaults, true for auto defaults */ withDefault?: string | boolean; /** Field state */ state: ComponentState; /** Label for "from" field (only for NUMBER_FROM_TO type) */ fromLabel?: string; /** Label for "to" field (only for NUMBER_FROM_TO type) */ toLabel?: string; /** Placeholder for "from" field (only for NUMBER_FROM_TO type) */ fromPlaceholder?: string; /** Placeholder for "to" field (only for NUMBER_FROM_TO type) */ toPlaceholder?: string; /** Key for content lookup */ contentKey?: string; /** Component class name for content lookup */ contentClass?: string; /** Fallback text if content key is not found */ contentFallback?: string; /** Custom header text for select modal */ modalHeader?: string; /** Custom cancel button text for select modal */ cancelText?: string; /** Custom OK button text for select modal */ okText?: string; /** Interface del ion-select (default: 'popover'). 'modal' para listas largas. */ selectInterface?: 'popover' | 'modal' | 'action-sheet' | 'alert'; /** Position of label for checkbox ('start' | 'end') */ labelPlacement?: 'start' | 'end'; /** Number of digits in PIN (default: 5, only for PIN_CODE type) */ length?: number; /** Size of the input boxes: 'small' | 'medium' | 'large' (default: 'medium', only for PIN_CODE type) */ size?: 'small' | 'medium' | 'large'; /** Allow only numbers (default: true, only for PIN_CODE type) */ allowNumbersOnly?: boolean; /** Mask input - show dots instead of characters (only for PIN_CODE type) */ mask?: boolean; /** Auto focus first input (only for PIN_CODE type) */ autoFocus?: boolean; /** Custom input styles (only for PIN_CODE type) */ inputStyles?: Record; /** Upload function (only for ATTACHMENT type). Receives a File, must resolve to the uploaded URL. */ uploadFn?: (file: File) => Promise; }; /** * A section in a form, grouping multiple fields. */ export type FormSection = { /** Section name */ name: string; /** Display order */ order: number; /** Fields included in the section */ fields: InputMetadata[]; }; /** * Data sent when submitting a form. */ export type FormSubmit = { /** Form field values as key-value pairs */ fields: Record; /** Optional token for the operation */ token?: string; }; /** * Metadata for a complete form. */ export type FormMetadata = { /** Form name */ name: string; /** Form sections */ sections: FormSection[]; /** * Configuración del botón de submit. Opcional: en modo `controlled` el form * no renderiza submit propio (lo maneja el host) y `actions` se ignora. */ actions?: ButtonMetadata; /** Global form state */ state: ComponentState; /** * Espacio vertical entre campos, en px. Si se omite, usa el default * responsivo de la lib (8px mobile / 12px desktop). Útil para formularios * densos o más aireados sin tocar CSS del consumer. */ fieldSpacing?: number; /** * Modo embebido: el form NO renderiza su button-group/footer de submit. * Solo campos + validación. Para wizards/hosts que controlan la navegación * y leen el estado del form vía `@ViewChild(FormComponent)` (signals públicos * `value`/`valid` + método `validate()`/`markAllTouched()`). * Cuando es `true`, ignora `stickyFooter`. */ controlled?: boolean; /** * Fija el button-group de submit al fondo (`position: sticky; bottom: 0`) * para modales largos con scroll. Solo aplica si NO es `controlled`. * Por defecto (sin flags) el submit es inline al final del form. */ stickyFooter?: boolean; }; /** * Possible action types for a toolbar. */ export declare enum ToolbarActionType { AVATAR = "AVATAR", ICON = "ICON", IMAGE = "IMAGE", BUTTON = "BUTTON" } /** * Toolbar action definition. */ export type ToolbarAction = { /** Action type */ type: 'AVATAR' | 'ICON' | 'IMAGE' | 'BUTTON'; /** Optional token identifier */ token?: string; /** Toolbar position */ position: 'left' | 'right' | 'center'; /** Optional description */ description?: string; /** Associated image (if any) */ image?: ImageMetadata; /** * User shape para el modo `AVATAR` — habilita fallback inteligente: * foto → iniciales (de `name`/`email`) → icono persona. Si se omite, el * toolbar solo muestra la imagen pasada en `description`. */ user?: { name?: string; email?: string; avatarUrl?: string; handle?: string; } | null; /** Controls avatar size when type is AVATAR. Defaults to 'small'. */ avatarSize?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'; }; /** * Metadata for an icon. */ export interface IconMetada { /** Icon name */ name: string; /** Icon slot position */ slot: 'start' | 'end'; } /** * Button configuration object. * Supports both static and reactive content. * @type {ButtonMetadata} * @property text - Static button label (takes precedence over textConfig). * @property textConfig - Reactive content configuration for button text. * @property color - The button color (Ionic color string). * @property icon - Icon to display (optional). * @property state - Button state (enabled, disabled, working, etc.). * @property expand, fill, size, shape, href, target, download, handler, etc. - See ButtonMetadata for all options. */ export interface ButtonMetadata { /** Associated action type */ actionType?: ActionType; /** Button expansion */ expand?: 'full' | 'block'; /** Associated link */ link?: string; /** Associated href link */ href?: string; /** Angular router link (SPA navigation, no reload) */ routerLink?: string | any[]; /** Link target */ target?: '_blank' | '_self' | '_parent' | '_top'; /** Download file name */ download?: string; /** Button color */ color: Color; /** Button state */ state: ComponentState; /** Static display text (takes precedence over reactive content) */ text?: string; /** Reactive content configuration for button text */ contentKey?: string; /** Component class name for content lookup (required with contentKey) */ contentClass?: string; /** Fallback text if contentKey is not found */ contentFallback?: string; /** Values to interpolate into the content string */ contentInterpolation?: Record; /** Associated icon */ icon?: IconMetada; /** Button shape */ shape?: 'round'; /** Button size */ size?: 'small' | 'default' | 'large'; /** Button fill */ fill?: 'clear' | 'outline' | 'solid' | 'default'; /** Button type */ type: 'button' | 'submit' | 'reset'; /** Optional token identifier */ token?: string; /** Optional reference */ ref?: any; /** Action handler */ handler?: (value: any) => any | Promise; } /** * Configuration for reactive content in val-button component. * Use this interface when you only need to specify content-related properties. * This follows the same pattern as TextContentConfig for consistency. */ export interface ButtonContentConfig { contentKey: string; contentClass: string; contentFallback?: string; contentInterpolation?: Record; }