client/src/app/+signup/+register/custom-stepper.component.html

   1 <section>
   2   <header *ngIf="steps.length > 2">
   3     <div class="header-steps">
   4       <ng-container *ngFor="let step of steps; let i = index; let isLast = last;">
   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)"
   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>
  17
  18           <div class="step-label">{{ step.label }}</div>
  19         </button>
  20
  21         <!-- Do no display if this is the last child -->
  22         <div *ngIf="!isLast" class="connector"></div>
  23       </ng-container>
  24     </div>
  25   </header>
  26
  27   <div class="margin-content" [style.display]="selected ? 'block' : 'none'">
  28     <ng-container [ngTemplateOutlet]="selected.content"></ng-container>
  29   </div>
  30
  31 </section>