add stepper component

src/app/app.module.ts

@@ -10,7 +10,7 @@ import { HttpClientModule, HttpClientXsrfModule, HttpClient }    from '@angular/
 
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faInfoCircle, faGift, faTicketAlt } from '@fortawesome/free-solid-svg-icons'
+import { faInfoCircle, faGift, faTicketAlt, faCheck, faAddressCard, faFileAlt, faThumbsUp, faMoneyBill } from '@fortawesome/free-solid-svg-icons'
 import { faCalendarAlt, faCalendarPlus, faCalendarCheck, faCompass, faClock } from '@fortawesome/free-regular-svg-icons';
 import { faGoogle } from '@fortawesome/free-brands-svg-icons'
 import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
@@ -21,6 +21,7 @@ import { OverviewComponent } from './reservation/overview/overview.component';
 import { SuccessComponent } from './reservation/success/success.component';
 import { ReservationComponent } from './reservation/reservation.component';
 import { EventHeaderComponent } from './event-header/event-header.component';
+import { StepperComponent } from './stepper/stepper.component';
 
 
 
@@ -38,7 +39,8 @@ export function HttpLoaderFactory(http: HttpClient) {
     OverviewComponent,
     SuccessComponent,
     ReservationComponent,
-    EventHeaderComponent
+    EventHeaderComponent,
+    StepperComponent
   ],
   imports: [
     BrowserModule,
@@ -64,7 +66,7 @@ export function HttpLoaderFactory(http: HttpClient) {
 })
 export class AppModule { 
   constructor() {
-    library.add(faInfoCircle, faGift, faTicketAlt);
+    library.add(faInfoCircle, faGift, faTicketAlt, faCheck, faAddressCard, faFileAlt, faThumbsUp, faMoneyBill);
     library.add(faCalendarAlt, faCalendarPlus, faCalendarCheck, faCompass, faClock);
     library.add(faGoogle);
   }

src/app/reservation/booking/booking.component.html

@@ -1,4 +1,5 @@
-
+<hr>
+<app-stepper [currentStep]="2"></app-stepper>
 <hr>
 <div *ngIf="reservation">
   <form [formGroup]="contactAndTicketsForm" (submit)="submitForm(reservation.event.shortName, reservation.reservationId, contactAndTicketsForm.value)">

src/app/reservation/overview/overview.component.html

@@ -1,3 +1,6 @@
+<hr>
+<app-stepper [currentStep]="3"></app-stepper>
+
 <div *ngIf="overview">
 
   <form [formGroup]="overviewForm" (submit)="confirm(overview.event.shortName, overview.reservationId, overviewForm.value)">

src/app/stepper/stepper.component.html

@@ -0,0 +1,31 @@
+<div class="wizard2 center text-muted">
+    <div [ngClass]="{'wizard2-current': currentStep === 1}">
+        <div>
+          <span class="badge" [ngClass]="{'badge-success':  currentStep > 1 }"><fa-icon [icon]="['fas', 'check']"></fa-icon></span>
+          <span translate="breadcrumb.step1"></span>
+        </div>
+        <div class="wizard2-line"></div>
+    </div>
+    <div [ngClass]="{'wizard2-current': currentStep === 2}">
+        <div>
+          <span class="badge" [ngClass]="{'badge-success':  currentStep > 2 }"><fa-icon [icon]="currentStep > 2 ? ['fas', 'check'] : ['fas', 'address-card']"></fa-icon></span>
+          <span translate="breadcrumb.step2"></span>
+        </div>
+        <div class="wizard2-line"></div>
+    </div>
+    <div [ngClass]="{'wizard2-current': currentStep === 3}">
+        <div>
+          <span class="badge" [ngClass]="{'badge-success':  currentStep > 3 }">
+            <fa-icon *ngIf="free" [icon]="currentStep > 3 ? ['fas', 'check'] : ['fas', 'file-alt']"></fa-icon>
+            <fa-icon *ngIf="!free" [icon]="currentStep > 3 ? ['fas', 'check'] : ['fas', 'money-bill']"></fa-icon>
+          </span>
+          <span [translate]="'breadcrumb.step3'+(free ? '.free' : '')"></span></div>
+        <div class="wizard2-line"></div>
+    </div>
+    <div [ngClass]="{'wizard2-current': currentStep === 4}">
+        <div>
+          <span class="badge" [ngClass]="{'badge-success':  currentStep > 4 }"><fa-icon [icon]="['fas', 'thumbs-up']"></fa-icon></span>
+          <span translate="breadcrumb.step4"></span>
+        </div>
+    </div>
+</div>

src/app/stepper/stepper.component.scss

@@ -0,0 +1,59 @@
+/* based on https://material-ui.com/demos/steppers/ */
+.wizard2 {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    margin: 4rem 0;
+}
+
+.wizard2 > div {
+    flex: 1;
+    position:relative
+}
+
+.wizard2 > div > div:first-child {
+    flex-direction: column;
+    display: flex;
+    align-items: center;
+}
+
+.wizard2 .badge {
+    display: inline-block;
+    min-width: 35px;
+    padding: 3px 7px;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 2;
+    color: #fff;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: top;
+    background-color: #777;
+    border-radius: 17px;
+    min-height: 30px;
+}
+
+.wizard2 .wizard2-line {
+    top: 17px;
+    left: calc(50% + 20px);
+    right: calc(-50% + 20px);
+    position: absolute;
+    border-top: 1px solid #bdbdbd;
+}
+
+.badge-success {
+    background-color: #449d44 !important;
+}
+
+.wizard2 .wizard2-current .badge {
+    background-color: #007ACC;
+}
+
+.wizard2 span:nth-child(2) {
+    margin-top: 1em;
+}
+
+.wizard2 .wizard2-current span:nth-child(2) {
+    font-weight:bold;
+    color: black;
+}

src/app/stepper/stepper.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StepperComponent } from './stepper.component';
+
+describe('StepperComponent', () => {
+  let component: StepperComponent;
+  let fixture: ComponentFixture<StepperComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StepperComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StepperComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/stepper/stepper.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-stepper',
+  templateUrl: './stepper.component.html',
+  styleUrls: ['./stepper.component.scss']
+})
+export class StepperComponent implements OnInit {
+
+  @Input()
+  free: boolean = true;
+
+  @Input()
+  currentStep: number = 1;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}