COMPONENTE - JDA-FILTER

Introducción

En la Agencia Digital de Andalucía, estamos trabajando en la unificación de estilos y componentes para las webs de la Junta de Andalucía, con el objetivo de proporcionar una experiencia de usuario coherente y homogénea en todas nuestras plataformas digitales. Para lograrlo, hemos adoptado Angular como tecnología base y estamos desarrollando una biblioteca de componentes reutilizables que aseguren un estilo visual y funcional unificado en todos los proyectos.

Este trabajo se basa en el Modelo de Servicios Digitales, que nos guía en el diseño y la implementación de componentes que cumplen con estándares de accesibilidad, usabilidad y eficiencia. Gracias a este enfoque, cualquier proyecto puede integrar fácilmente componentes predefinidos y alineados con las directrices de estilo de la Junta de Andalucía. Puedes explorar el catálogo completo de componentes disponibles aquí.

Componente

El jda-input es un componente del elemento input configurable que permite definir su apariencia y seleccionar el tipo de input deseado. Cada uno de ellos está ya adaptado al MSD y cuenta con diferentes opciones para adaptarse a cualquier necesario requerido.

    <jda-input
    (inputEvent)="manejadorEventos($event)"
    [inputInput]="
      {
        'nombreFiltro': 'Total de remisiones',
        'identificadorFiltro': 'REG-ENTRADA',
        'tipo': 'text',
        'valor': 'Prueba de texto introducido',
        'delay': 2000,
        'placeholder': 'Escriba un registro de entrada válido',
        'requerido': false,
        'disabled': false,
        'validacion': '[A-Za-z]+',
        'info': {
            'titulo': 'Municipio',
            'contenido': 'Campo obligatorio: seleccione el municipio destino.'
        }
      }"
    style="width: 300px;"
  ></jda-input>

| Nombre del parámetro | Tipo de parámetro | Tipo | Requerido | Descripción | |-------------- |-------------- |-------------- |-------------- |-------------------------------------------------------------------------- | | nombreFiltro | Input | String | Sí | Nombre del input que se mostrará como principal | | identificadorFiltro | Input | String | Sí | Identificador del filtro usado para obtener los datos con los eventos | | tipo | Input | String | Sí | Tipo de input deseado | | valor | Input | String | No | Valor predeterminado cuando se cargue el componente. | | delay | Input | Number | No | Tiempo (ms) que tarda en enviar el evento. | | placeholder | Input | String | No | Texto placeholder para el componente. | | requerido | Input | Boolean | Sí | Indica si es un input obligatorio o no. | | disabled | Input | Boolean | No | Indica si el input se encuentra desactivado o no. | | validacion | Input | String | No | Pattern en formato REGEX usado para la validación del input | | opciones | Input | OpcionInputDTO | No | opciones permite añadir opciones seleccionables al filtro. | | info | Input | InfoDTO | No | Objeto usado para mostrar el Tooltip de ayuda. | | inputEvent | Output | EventEmitter | Sí | Cada vez que se escribe algo, envía un evento con el identificador. |

Cómo importarlo en tu proyecto

1. Instalar la dependencia del componente botón usando el siguiente comando: npm install jda-input@latest.
2. En caso de tener Angular < v17, añadir la dependencia de BrowserAnimationsModule al fichero appModule.
3. En caso de tener Angular >= v17, añadir en el fichero app.config en el parámetro de providers lo siguiente: [..., provideAnimations()].
4. Añadir el componente al módulo correspondiente donde se vaya a usar (import { JdaInputComponent } from 'jda-input').
5. Llamar al componente con sus respectivos parámetros para pintarlo en pantalla.