Componentes Web Reutilizables (Custom Elements)
BaP Framework utiliza componentes web nativos basados en el estándar del W3C (Custom Elements). Esto permite encapsular estilos y lógica sin la sobrecarga de frameworks externos.
Registro e Instanciación
El orquestador central se encuentra en ./src/_components/customComponentsRegistration.js, el cual expone la función setCustomComponents() para darlos de alta en el DOM de forma dinámica y asíncrona.
1. <bap-chip>
Etiqueta visual pequeña para representar categorías o palabras clave.
| Atributo | Tipo | Requerido | Descripción |
|---|---|---|---|
id | String | Opcional | Identificador del elemento. |
| (inner HTML) | String | Sí | Contenido de la etiqueta. |
<!-- Declaración HTML -->
<bap-chip>Vanilla JS</bap-chip>2. <bap-dialog>
Modal premium con Glassmorphism, sanitización de datos y enlaces Base64 seguros.
| Atributo | Tipo | Requerido | Descripción |
|---|---|---|---|
id | String | Opcional | ID único del modal (autogenerado si se omite). |
title-top | String | Opcional | Sobre-título de cabecera. |
title-main | String | Opcional | Título destacado en H2. |
title-sub | String | Opcional | Subtítulo en H3. |
image-detail | String | Opcional | URL de la imagen del cuerpo. |
link-url-base64 | String | Opcional | URL de acción principal codificada en Base64. |
link-text-base64 | String | Opcional | Texto del botón codificado en Base64. |
<!-- URL: https://github.com -> aHR0cHM6Ly9naXRodWIuY29t -->
<!-- Texto: Ver Código -> VmVyIEPDs2RpZ28= -->
<bap-dialog
id="demo-modal"
title-main="Modal Premium"
link-url-base64="aHR0cHM6Ly9naXRodWIuY29t"
link-text-base64="VmVyIEPDs2RpZ28=">
Contenido HTML del modal sanitizado.
</bap-dialog>3. <bap-footer>
Pie de página adaptativo que incluye los metadatos y traducción asíncrona.
No recibe atributos HTML. Carga su lógica y traducciones directamente desde constantes.
<bap-footer></bap-footer>4. <bap-header>
Barra de navegación responsiva que controla el inicio de sesión y la conmutación de temas (Modo Claro / Modo Oscuro).
| Atributo | Tipo | Requerido | Descripción |
|---|---|---|---|
hide-actions | Boolean | Opcional | Oculta las acciones y botones. |
show-admin-actions | Boolean | Opcional | Habilita opciones de administración. |
is-admin-user | Boolean | Opcional | Marca visual de rol administrador. |
<bap-header show-admin-actions is-admin-user></bap-header>5. <bap-loading-state>
Capa opaca de bloqueo de pantalla completa con spinner animado.
| Atributo | Tipo | Requerido | Descripción |
|---|---|---|---|
sub-message | String | Opcional | Texto explicativo secundario. |
| (inner HTML) | String | Opcional | Mensaje principal del overlay. |
<bap-loading-state sub-message="Procesando..."></bap-loading-state>6. <bap-logo>
Renderiza el logotipo principal de la marca o un fallback vectorial SVG adaptable.
| Atributo | Tipo | Requerido | Descripción |
|---|---|---|---|
color-mode | String | Opcional | Tono cromático del SVG ("light" o "dark"). |
<bap-logo color-mode="dark"></bap-logo>7. <bap-notification>
Alertas visuales tipo Toast o Banner aisladas en su Shadow DOM.
| Atributo | Tipo | Requerido | Descripción |
|---|---|---|---|
type | String | Opcional | Tipo de caja: "toast" o "alert". |
severity | String | Opcional | Gravedad: "info", "warning", "error". |
show | Boolean | Opcional | Aplica animación para mostrar la alerta en pantalla. |
<bap-notification type="toast" severity="info" show>
Sincronización completada.
</bap-notification>8. <bap-spinner>
Loader circular animado puramente en CSS.
No recibe atributos HTML.
<bap-spinner></bap-spinner>9. <bap-svg-image>
Renderiza vectores desde una iconoteca estática.
| Atributo | Tipo | Requerido | Descripción |
|---|---|---|---|
name | String | Sí | Identificador único del icono en icons.js. |
size | String | Opcional | Tamaños: "xs", "s", "m", "l", "xl". |
mobile-size | String | Opcional | Tamaño en dispositivos móviles. |
<bap-svg-image name="close" size="l" mobile-size="s"></bap-svg-image>