aquila

Aquila – Angular ブランドキットコンポーネントライブラリ

Aquila（オープンソース）／Angular Brand Kit（旧称 NDBX）は、Allianz Design System の Angular 向けコンポーネントライブラリです。 モダンな Angular（v19 以降）のパターンを使用します。 スタンドアロンコンポーネント、シグナル、新しい制御フロー（@if、@for）、inject() などです。

インポートルール

Aquila のコンポーネントはスタンドアロンです。コンポーネントを直接インポートします。

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

インポートパスのパターン：@allianz/ng-aquila/{component-name}

Aquila 固有のルール

• <input nxInput> を <nx-formfield> で囲まずに NxInputDirective を使用しないでください
• フォームフィールド内の検証メッセージには <nx-error nxFormfieldError> を使用します
• 誤ってフォームが送信されないよう、<button nxButton> には必ず type="button" を設定します
• Aquila のフォームコンポーネントではリアクティブフォームを優先します
• インライン CSS スタイルは使用せず、Aquila に組み込まれたスタイルを使用します

検証機能付きフォームフィールド（リアクティブフォーム）

<form [formGroup]="form">
  <nx-formfield label="Email">
    <input nxInput formControlName="email" type="email" />
    @if (form.controls.email.errors) {
      <nx-error nxFormfieldError>Please enter a valid email</nx-error>
    }
  </nx-formfield>
</form>

ドロップダウン

<nx-formfield label="Country">
  <nx-dropdown formControlName="country">
    <nx-dropdown-item value="DE">Germany</nx-dropdown-item>
    <nx-dropdown-item value="CH">Switzerland</nx-dropdown-item>
    <nx-dropdown-item value="AT">Austria</nx-dropdown-item>
  </nx-dropdown>
</nx-formfield>

モーダルダイアログ

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

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

グリッドシステム

12 列のレスポンシブグリッドです。nxCol は、tiny、small、medium、large、xlarge、2xlarge、3xlarge の順に、最大 7 つのブレークポイント値をカンマ区切りで指定できます。 値が 7 つ未満の場合、残りのブレークポイントには最後の値が繰り返し適用されます （例：nxCol="12,8" → 12,8,8,8,8,8,8）。

<div nxLayout="grid">
  <div nxRow>
    <div nxCol="12,12,6">Left</div>
    <div nxCol="12,12,6">Right</div>
  </div>
</div>

よく使われるコンポーネント

コンポーネント	セレクター
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

ユースケース別にコンポーネントを探す

• フォーム: autocomplete、checkbox、circle-toggle、code-input、datefield、dropdown、file-uploader、formfield、input、natural-language-form、phone-input、radio-toggle、rating、slider、switcher、timefield
• ナビゲーション: breadcrumb、header、menu、tabs、pagination
• テーブル: comparison-table、dynamic-table、table
• フィードバック: badge、indicator、message、modal、notification-panel、progress-stepper、progressbar、spinner、tooltip
• レイアウト: accordion、card、footer、grid、sidepanel、small-stage、toolbar
• オーバーレイ: modal、overlay、popover
• メディア: avatar、icon、image、video
• インタラクション: action、button、link、page-search、signal-button
• 選択: checkbox、circle-toggle、dropdown、radio-toggle、taglist

詳細な API

コンポーネント API（入力、出力、メソッド）の全容については、プロジェクトにインストールされているパッケージ内のコンポーネントドキュメントを参照してください。 通常は node_modules/@allianz/ng-aquila/mcp/generated/components/{component-name}.md にあります。プロジェクトの設定によっては、類似のパスにある場合もあります。 見つからない場合は、**/mcp/generated/**/ を使って glob 検索を実行してください。