From 1d5342abc43df02cf0bd69b1e865c0f179182eef Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 29 May 2019 11:03:01 +0200
Subject: Multi step registration

---
 .../src/app/signup/custom-stepper.component.html   | 25 ++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 client/src/app/signup/custom-stepper.component.html

(limited to 'client/src/app/signup/custom-stepper.component.html')

diff --git a/client/src/app/signup/custom-stepper.component.html b/client/src/app/signup/custom-stepper.component.html
new file mode 100644
index 000000000..bf507fc4f
--- /dev/null
+++ b/client/src/app/signup/custom-stepper.component.html
@@ -0,0 +1,25 @@
+<section class="container">
+  <header>
+    <ng-container *ngFor="let step of steps; let i = index; let isLast = last;">
+      <div
+        class="step-info" [ngClass]="{ active: selectedIndex === i, completed: isCompleted(step) }"
+        (click)="onClick(i)"
+      >
+        <div class="step-index">
+          <ng-container *ngIf="!isCompleted(step)">{{ i + 1 }}</ng-container>
+          <my-global-icon *ngIf="isCompleted(step)" iconName="tick"></my-global-icon>
+        </div>
+
+        <div class="step-label">{{ step.label }}</div>
+      </div>
+
+      <!-- Do no display if this is the last child -->
+      <div *ngIf="!isLast" class="connector"></div>
+    </ng-container>
+  </header>
+
+  <div [style.display]="selected ? 'block' : 'none'">
+    <ng-container [ngTemplateOutlet]="selected.content"></ng-container>
+  </div>
+
+</section>
-- 
cgit v1.2.3