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