allianz/ng-aquila

Aquila – Bibliothèque de composants Angular Brand Kit

Aquila (open source) / Angular Brand Kit (anciennement NDBX) est la bibliothèque de composants du Design System Allianz pour Angular. Utilisez les schémas Angular modernes (v19+) : composants autonomes, signaux, nouveau contrôle de flux (@if, @for), inject(), etc.

Règles d'Importation

Les composants Aquila sont autonomes. Importez le composant directement :

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],
})

Motif du chemin d'importation : @allianz/ng-aquila/{nom-du-composant}

Règles spécifiques à Aquila

• N'utilisez jamais NxInputDirective sans encapsuler <input nxInput> dans <nx-formfield>
• Utilisez <nx-error nxFormfieldError> pour les messages de validation dans les champs de formulaire
• Définissez toujours type="button" sur <button nxButton> pour éviter les soumissions de formulaire accidentelles
• Préférez les formulaires réactifs avec les composants de formulaire Aquila
• N'utilisez pas de styles CSS en ligne ; fiez-vous au style intégré d'Aquila

Champ de formulaire avec validation (formulaires réactifs)

<form [formGroup]="form">
  <nx-formfield label="Email">
    <input nxInput formControlName="email" type="email" />
    @if (form.controls.email.errors) {
      <nx-error nxFormfieldError>Veuillez saisir un email valide</nx-error>
    }
  </nx-formfield>
</form>

Liste déroulante

<nx-formfield label="Pays">
  <nx-dropdown formControlName="country">
    <nx-dropdown-item value="DE">Allemagne</nx-dropdown-item>
    <nx-dropdown-item value="CH">Suisse</nx-dropdown-item>
    <nx-dropdown-item value="AT">Autriche</nx-dropdown-item>
  </nx-dropdown>
</nx-formfield>

Dialogue modal

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

const modalRef = inject(NxDialogService).open(MyDialogComponent);
modalRef.afterClosed().subscribe(result => { /* gérer le résultat */ });

Système de grille

Grille réactive à 12 colonnes. nxCol accepte jusqu'à 7 valeurs de points de rupture séparées par des virgules dans l'ordre : tiny, small, medium, large, xlarge, 2xlarge, 3xlarge. Si moins de 7 valeurs sont fournies, la dernière se répète pour les points de rupture restants (par ex. nxCol="12,8" → 12,8,8,8,8,8,8).

<div nxLayout="grid">
  <div nxRow>
    <div nxCol="12,12,6">Gauche</div>
    <div nxCol="12,12,6">Droite</div>
  </div>
</div>

Composants les plus utilisés

Composant	Sélecteur
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

Trouver des composants par cas d'utilisation

• formulaire : autocomplete, checkbox, circle-toggle, code-input, datefield, dropdown, file-uploader, formfield, input, natural-language-form, phone-input, radio-toggle, rating, slider, switcher, timefield
• navigation : breadcrumb, header, menu, tabs, pagination
• tableau : comparison-table, dynamic-table, table
• feedback : badge, indicator, message, modal, notification-panel, progress-stepper, progressbar, spinner, tooltip
• disposition : accordion, card, footer, grid, sidepanel, small-stage, toolbar
• superposition : modal, overlay, popover
• média : avatar, icon, image, video
• interaction : action, button, link, page-search, signal-button
• sélection : checkbox, circle-toggle, dropdown, radio-toggle, taglist

API détaillée

Pour l'API complète des composants (entrées, sorties, méthodes), lisez la documentation du composant dans le package installé du projet : généralement node_modules/@allianz/ng-aquila/mcp/generated/components/{nom-du-composant}.md ou dans un chemin similaire selon la configuration du projet. Solution de repli : effectuez une recherche glob avec **/mcp/generated/**/.