datacat/front-public/src/app/shared/breadcrumb/breadcrumb.component.ts

import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { RouterLink } from '@angular/router';

/** Un maillon du fil d'Ariane. `link` absent => élément courant (aria-current). */
export interface BreadcrumbItem {
  label: string;
  link?: string | unknown[];
}

/**
 * Fil d'Ariane DSFR générique (présentationnel). Chaque page construit sa liste
 * d'items et la passe ; le dernier item sans `link` est marqué comme courant.
 */
@Component({
  selector: 'app-breadcrumb',
  standalone: true,
  imports: [RouterLink],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <nav class="fr-breadcrumb fr-mb-3w" aria-label="vous êtes ici">
      <ol class="fr-breadcrumb__list">
        @for (item of items(); track $index) {
          <li>
            @if (item.link) {
              <a class="fr-breadcrumb__link" [routerLink]="item.link">{{ item.label }}</a>
            } @else {
              <a class="fr-breadcrumb__link" aria-current="page">{{ item.label }}</a>
            }
          </li>
        }
      </ol>
    </nav>
  `,
})
export class BreadcrumbComponent {
  items = input.required<BreadcrumbItem[]>();
}