AmountFormatter

El componente AmountFormatter estandariza la representación visual de cifras monetarias, asegurando el uso correcto de separadores de miles, centavos obligatorios, divisas y soporte de ofuscación de datos sensibles.

Previsualización Rápida

$1.000,00

$1.00000

Propósito

Asegurar coherencia visual y lectura rápida en el despliegue de valores financieros (saldos disponibles, precios, consumos y transferencias) respetando las normativas de diseño del sistema.

Anatomía del Componente

Signo Semántico (Opcional): Indicador visual de ingreso (+) o egreso (-).
Divisa (Currency): Símbolo de moneda ($, USD, UVAs).
Parte Entera (integerValue): Cifra principal estructurada con puntos de miles (.).
Coma Decimadora: Separador explícito , cuando los centavos no están elevados.
Centavos / Parte Fraccionaria (fractionalValue): Cifra decimal de dos dígitos siempre presente.

Consideraciones de Diseño

1. Manejo de Centavos y Superscript

superscript = true: Eleva la posición tipográfica de los centavos y elimina automáticamente la coma ,. Reservado exclusivamente para la tarjeta de cuentas del Home en el ambiente de individuos.
superscript = false: Mantiene los centavos en la línea base precedidos por una coma ,. Es la opción por defecto para el resto de los módulos de la aplicación.

$15.000.00000

$15.000.000,00

2. Separación de Miles y Decimales

Los miles se separan siempre utilizando un punto (.).
El componente incluye centavos obligatoriamente (si no se declaran, se autocompletan en ,00).

3. Modos Especiales: Ofuscación (`isSecret`) y Valores Nulos (`NULL`)

Ofuscación (isSecret): Reemplaza las cifras numéricas por máscaras de seguridad (••••••) conservando la divisa visible.
Valor Nulled (NULL): Si el dato numérico no está disponible, el componente muestra el código de la divisa acompañado de un placeholder neutral.

$••••••

USD••••••

$--

4. Importes con Signo Semántico

Permite asociar intencionalidad financiera mediante el uso de símbolos y colorimetría de estado:

+$1.000,00

+USD1.000,00

-$1.000,00

Comportamiento Responsivo (Reducción Dinámica)

En contenedores ajustados o dispositivos móviles, el componente adapta su escala tipográfica dinámicamente de forma descendente en el siguiente orden de jerarquía:

N1 (30px) → N2 (22px) → N3 (16px) → N4 (14px) → N5 (10px)

Límite Mínimo (minType): Evita que la escala descienda más allá del tamaño tipográfico mínimo permitido antes de aplicar un salto de línea.