ehoandClaude Sonnet 5
43dc3210cd
The folder now equals the layer, as CLAUDE.md decision 2 requires. 33 directories move by git mv (25 flat, plus upload/'s 8 subfolders split across all three layers). 28 distinct @shared/ui/* specifiers rewrite across 73 files, longest-first. Five relative imports inside upload/ become @shared/ui aliases because their sibling now lives in a different layer; two stay relative because both ends stay in the same layer. Four .mdx docs get their seven broken story imports fixed; atomic-design.mdx's page-shell import is untouched, because layout/ does not move. No component, template, story title, or layer-tag comment changes. That is RD-28's job. Verified against the ticket's acceptance commands: the 26 flat directories become exactly 3 layer folders with the counts the ticket names, only three @shared/ui/* prefixes remain (atoms, molecules, organisms), the .mdx import count holds at 7, and the relative-import count inside ui/ drops from 7 to 2 as decision 4 requires. The @shared/ui/ occurrence count moves from 200 to 205: decision 4 mandates turning 5 of those 7 relative imports into @shared/ui/* aliases, which decision 3's "200 before, 200 after" check does not account for. The 5-occurrence gap is exactly the 5 conversions decision 4 names, not a lost or duplicated specifier. npm run ci --full passes: lint, typecheck, dep:check, format, tokens, seam, both apps' + both libraries' tests, both apps' localized build, audit, backend tests, all three generated-artifact drift checks, and both Storybook instances' build + axe-core a11y suite (67+45 suites, 198+112 tests, all green). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
86 lines
3.3 KiB
TypeScript
86 lines
3.3 KiB
TypeScript
import { Component, ElementRef, input, output, viewChild } from '@angular/core';
|
|
|
|
/** Molecule: the CIBG Huisstijl "stappenindicator" — numbered circles (`.step-list`),
|
|
visited steps clickable for back-only navigation, and the step title merged into
|
|
the same block (process name + "Stap X van Y: Titel", per the aanvraagproces
|
|
pattern). Domain-free; forward navigation only via the wizard's own buttons. */
|
|
@Component({
|
|
selector: 'app-stepper',
|
|
template: `
|
|
<div class="stepper">
|
|
<ol class="step-list order-1">
|
|
@for (label of steps(); track label; let i = $index) {
|
|
<li>
|
|
@if (i < current()) {
|
|
<a
|
|
href="#"
|
|
class="step visited"
|
|
(click)="select($event, i)"
|
|
[attr.aria-label]="terugNaar(i, label)"
|
|
>
|
|
<span class="visually-hidden" i18n="@@stepper.stap">Stap</span> {{ i + 1 }}
|
|
<span class="visually-hidden" i18n="@@stepper.voltooid">Voltooid</span>
|
|
</a>
|
|
} @else if (i === current()) {
|
|
<span
|
|
class="step active"
|
|
aria-current="step"
|
|
[attr.aria-label]="huidigeStap(i, label)"
|
|
>
|
|
<span class="visually-hidden" i18n="@@stepper.stap">Stap</span> {{ i + 1 }}
|
|
<span class="visually-hidden" i18n="@@stepper.huidig">Huidige stap</span>
|
|
</span>
|
|
} @else {
|
|
<span class="step" [attr.aria-label]="stap(i, label)">
|
|
<span class="visually-hidden" i18n="@@stepper.stap">Stap</span> {{ i + 1 }}
|
|
</span>
|
|
}
|
|
</li>
|
|
}
|
|
</ol>
|
|
<h2 #title tabindex="-1" class="h1 order-0">
|
|
@if (processName()) {
|
|
<span class="process-name">{{ processName() }}</span>
|
|
}
|
|
<ng-container i18n="@@stepper.stapVan"
|
|
>Stap {{ current() + 1 }}<span class="visually-hidden"> van {{ steps().length }}</span
|
|
>: {{ stepTitle() || steps()[current()] }}</ng-container
|
|
>
|
|
</h2>
|
|
</div>
|
|
`,
|
|
})
|
|
export class StepperComponent {
|
|
steps = input.required<string[]>();
|
|
current = input.required<number>();
|
|
/** Name of the overall process, shown above the step title (e.g. "Herregistratie aanvragen"). */
|
|
processName = input('');
|
|
/** Overrides the step label as the title; falls back to `steps()[current()]`. */
|
|
stepTitle = input('');
|
|
|
|
/** Emitted when a visited (earlier) step is clicked — back-navigation only. */
|
|
stepSelected = output<number>();
|
|
|
|
private titleEl = viewChild<ElementRef<HTMLElement>>('title');
|
|
|
|
/** wizard-shell calls this after a step change so the new title is announced. */
|
|
focusTitle(): void {
|
|
this.titleEl()?.nativeElement.focus();
|
|
}
|
|
|
|
protected select(ev: Event, i: number) {
|
|
ev.preventDefault(); // fragment href resolves against <base href>, not the route
|
|
this.stepSelected.emit(i);
|
|
}
|
|
|
|
protected stap(i: number, label: string) {
|
|
return $localize`:@@stepper.naarStap:Stap ${i + 1}:nummer: ${label}:label:`;
|
|
}
|
|
protected huidigeStap(i: number, label: string) {
|
|
return $localize`:@@stepper.huidigeStapLabel:Huidige stap, stap ${i + 1}:nummer: ${label}:label:`;
|
|
}
|
|
protected terugNaar(i: number, label: string) {
|
|
return $localize`:@@stepper.terugNaarStap:Terug naar stap ${i + 1}:nummer: ${label}:label:`;
|
|
}
|
|
}
|