lib-inputlib-input y lib-form-layoutLos importes y porcentajes necesitan una presentación y reglas de entrada específicas, pero deben conservar integración con Angular Forms, validación y el layout declarativo. lib-input incorpora ambos modos mediante su propiedad type, y form-layout los expone como controles del modelo de campos.
Se implementan currency y percent como modos de lib-input. Para ambos, el elemento nativo es de tipo text con inputmode="decimal"; así se evita la presentación del navegador para números y el componente controla formato y escritura.
FormatService.formatCurrency, usando la moneda de sesión (con fallback a COP), el locale configurado (fallback es-CO) y dos decimales por defecto. currencySymbol permite indicar el símbolo que se reconoce al parsear; el formato de salida sigue la configuración central de moneda.writeValue acepta texto o número, lo interpreta con parseCurrency y presenta el valor formateado. El cambio emitido por el control es el texto formateado (por ejemplo, $1.000,00), no un número.minValue y maxValue se comparan sobre el importe parseado. Una entrada no interpretable produce un error de importe inválido.%. writeValue elimina el símbolo si viene incluido../, y signo -; el componente emite ese texto sin agregar %.% en el sufijo. Mientras el campo tiene foco se oculta para dejar espacio a la edición.minValue y maxValue se validan sobre el valor numérico parseado.El modelo NebulaFieldControl incorpora los tipos 'currency' y 'percent'. form-layout.component.html los deriva a lib-input y transfiere el FormControl, placeholder, límites, contador, opción de limpiar, estado de solo lectura, error y bloqueo. Para percent, también entrega campo.pattern como admite.
En el ERP, cada modo se declara como un campo del form-layout; el name debe coincidir con el nombre del control del FormGroup.
{
name: 'valor',
control: 'currency',
labelKey: 'FACTURA.VALOR',
placeholderKey: 'COMMON.ENTER_VALUE',
minValue: 0,
maxValue: 1_000_000,
clearable: true
}
El campo presenta el valor con la moneda y locale configurados para la sesión, por ejemplo $1.000,00. El FormControl recibe una cadena formateada, no un número. Si el ERP requiere un número para el dominio o para construir el payload, debe convertir el valor en esa frontera con el parser compartido parseCurrency (projects/nebula-ui-kit/src/lib/utils/currency.utils.ts).
{
name: 'descuento',
control: 'percent',
labelKey: 'FACTURA.DESCUENTO',
placeholderKey: 'COMMON.ENTER_VALUE',
minValue: 0,
maxValue: 100,
pattern: '[\\d.,-]',
clearable: true
}
Durante la edición se muestra el valor numérico; al perder el foco aparece % como sufijo visual. El FormControl recibe una cadena sin %, por ejemplo "10". minValue y maxValue restringen el rango validado, y pattern se entrega al input para filtrar los caracteres admitidos.
En ambos modos también se pueden declarar propiedades comunes del campo como required, readonly, maxLength, charCount y hintKey, según el modelo de form-layout.
lib-input, sin componentes separados.% es solo visual y contextual al foco.projects/nebula-ui-kit/src/lib/components/input/input.component.ts: modos, escritura, entrada, formato y validaciones.projects/nebula-ui-kit/src/lib/components/input/input.component.html: sufijo de porcentaje y configuración de input.projects/nebula-ui-kit/src/lib/components/form-layout/form-layout.models.ts: tipos de control y propiedades de validación.projects/nebula-ui-kit/src/lib/components/form-layout/form-layout.component.html: renderizado de los casos currency y percent.projects/nebula-ui-kit/src/lib/services/format.service.ts y projects/nebula-ui-kit/src/lib/utils/currency.utils.ts: formato e interpretación de moneda.projects/nebula-ui-kit/src/lib/components/input/input.component.spec.ts: cobertura de los comportamientos de ambos modos.