allianz/ng-aquila

Aquila – Biblioteca de Componentes Angular Brand Kit

Aquila (código abierto) / Angular Brand Kit (antes NDBX) es la biblioteca de componentes del sistema de diseño de Allianz para Angular. Usa patrones modernos de Angular (v19+): componentes independientes, señales, nuevo flujo de control (@if, @for), inject(), etc.

Reglas de Importación

Los componentes de Aquila son independientes. Importa el componente directamente:

import { NxButtonComponent } from '@allianz/ng-aquila/button';
import { NxFormfieldComponent } from '@allianz/ng-aquila/formfield';
import { NxInputDirective } from '@allianz/ng-aquila/input';

@Component({
  imports: [NxButtonComponent, NxFormfieldComponent, NxInputDirective],
})

Patrón de ruta de importación: @allianz/ng-aquila/{nombre-del-componente}

Reglas Específicas de Aquila

• Nunca uses NxInputDirective sin envolver <input nxInput> en <nx-formfield>
• Usa <nx-error nxFormfieldError> para mensajes de validación dentro de formfields
• Siempre establece type="button" en <button nxButton> para evitar el envío accidental de formularios
• Prefiere Formularios Reactivos con los componentes de formulario de Aquila
• No uses estilos CSS en línea; confía en el estilo integrado de Aquila

Formfield con Validación (Formularios Reactivos)

<form [formGroup]="form">
  <nx-formfield label="Correo electrónico">
    <input nxInput formControlName="email" type="email" />
    @if (form.controls.email.errors) {
      <nx-error nxFormfieldError>Por favor ingresa un correo válido</nx-error>
    }
  </nx-formfield>
</form>

Dropdown

<nx-formfield label="País">
  <nx-dropdown formControlName="country">
    <nx-dropdown-item value="DE">Alemania</nx-dropdown-item>
    <nx-dropdown-item value="CH">Suiza</nx-dropdown-item>
    <nx-dropdown-item value="AT">Austria</nx-dropdown-item>
  </nx-dropdown>
</nx-formfield>

Diálogo Modal

import { NxDialogService } from '@allianz/ng-aquila/modal';

const modalRef = inject(NxDialogService).open(MyDialogComponent);
modalRef.afterClosed().subscribe(result => { /* manejar resultado */ });

Sistema de Cuadrícula

Cuadrícula responsiva de 12 columnas. nxCol acepta hasta 7 valores de punto de interrupción separados por comas en orden: tiny, small, medium, large, xlarge, 2xlarge, 3xlarge.
Si se proporcionan menos de 7 valores, el último se repite para los puntos de interrupción restantes
(ej. nxCol="12,8" → 12,8,8,8,8,8,8).

<div nxLayout="grid">
  <div nxRow>
    <div nxCol="12,12,6">Izquierda</div>
    <div nxCol="12,12,6">Derecha</div>
  </div>
</div>

Componentes Más Utilizados

Componente	Selector
formfield	nx-formfield
input	input[nxInput]
button	button[nxButton]
icon	nx-icon
dropdown	nx-dropdown
checkbox	nx-checkbox
grid	[nxLayout]
headline	[nxHeadline]
copytext	[nxCopytext]
link	nx-link
accordion	nx-accordion
popover	[nxPopoverTriggerFor]
badge	nx-badge
datefield	input[nxDatefield]
modal	nx-modal
message	nx-message
data-display	nx-data-display
table	[nxHeaderCell]
tabs	nx-tab
list	ul[nxList]
radio-toggle	nx-radio-toggle
tooltip	[nxTooltip]
switcher	nx-switcher
spinner	nx-spinner
pagination	nx-pagination

Encuentra Componentes por Caso de Uso

• formulario: autocomplete, checkbox, circle-toggle, code-input, datefield, dropdown, file-uploader, formfield, input, natural-language-form, phone-input, radio-toggle, rating, slider, switcher, timefield
• navegación: breadcrumb, header, menu, tabs, pagination
• tabla: comparison-table, dynamic-table, table
• feedback: badge, indicator, message, modal, notification-panel, progress-stepper, progressbar, spinner, tooltip
• diseño: accordion, card, footer, grid, sidepanel, small-stage, toolbar
• superposición: modal, overlay, popover
• multimedia: avatar, icon, image, video
• interacción: action, button, link, page-search, signal-button
• selección: checkbox, circle-toggle, dropdown, radio-toggle, taglist

API Detallada

Para la API completa del componente (inputs, outputs, métodos) consulta la documentación del componente en el paquete instalado del proyecto: normalmente node_modules/@allianz/ng-aquila/mcp/generated/components/{nombre-del-componente}.md o en una ruta similar dependiendo de la configuración del proyecto. Alternativa: ejecuta una búsqueda global con **/mcp/generated/**/.