]>
Commit | Line | Data |
---|---|---|
1d5342ab | 1 | <section class="container"> |
09c55770 | 2 | <header *ngIf="steps.length > 2"> |
1d5342ab C |
3 | <ng-container *ngFor="let step of steps; let i = index; let isLast = last;"> |
4 | <div | |
40360c17 | 5 | class="step-info" [ngClass]="{ active: selectedIndex === i, completed: isCompleted(step), 'c-hand': isAccessible(i) }" [attr.aria-current]="selectedIndex === i" |
1d5342ab C |
6 | (click)="onClick(i)" |
7 | > | |
8 | <div class="step-index"> | |
1bab226f | 9 | <ng-container *ngIf="!isCompleted(step)"><span class="sr-only" i18n>Step</span> {{ i + 1 }}</ng-container> |
1d5342ab C |
10 | <my-global-icon *ngIf="isCompleted(step)" iconName="tick"></my-global-icon> |
11 | </div> | |
12 | ||
13 | <div class="step-label">{{ step.label }}</div> | |
14 | </div> | |
15 | ||
16 | <!-- Do no display if this is the last child --> | |
17 | <div *ngIf="!isLast" class="connector"></div> | |
18 | </ng-container> | |
19 | </header> | |
20 | ||
21 | <div [style.display]="selected ? 'block' : 'none'"> | |
22 | <ng-container [ngTemplateOutlet]="selected.content"></ng-container> | |
23 | </div> | |
24 | ||
25 | </section> |