feat(stepper): add stepper component

projects/core/src/lib/step-content/step-content.component.html

@@ -0,0 +1,12 @@
+<div *ngIf="!isLast" class="timeline"></div>
+<fiv-expandable (didClose)="afterClose()" (didOpen)="afterOpen()" #self>
+  <fiv-step-header #header header [index]="index" [icon]="icon" (click)="self.open()">
+    <div class="header-title">{{title}}</div>
+    <div class="header-subtitle">{{subtitle}}</div>
+  </fiv-step-header>
+  <ng-container content>
+    <div class="step-content">
+      <ng-content></ng-content>
+    </div>
+  </ng-container>
+</fiv-expandable>

projects/core/src/lib/step-content/step-content.component.scss

@@ -0,0 +1,29 @@
+:host {
+    display: block;
+    width: 100%;
+    position: relative;
+}
+
+.step-content{
+    padding-left: 44px;
+    padding-bottom: 24px;
+
+}
+
+.timeline {
+    width: 1px;
+    height: calc(100% - 32px);
+    position: absolute;
+    background: var(--fiv-color-timeline, var(--ion-color-medium));
+    left: 27.5px;
+    top: 28px;
+}
+
+.header-title{
+    color: var(--fiv-color-title, var(--ion-color-dark));
+}
+
+.header-subtitle{
+    color: var(--fiv-color-subtitle, var(--ion-color-medium));
+    font-size: 0.8em;
+}

projects/core/src/lib/step-content/step-content.component.spec.ts

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

projects/core/src/lib/step-content/step-content.component.ts

@@ -0,0 +1,52 @@
+import { Component, OnInit, ViewChild, Input, Output, EventEmitter } from '@angular/core';
+import { StepHeaderComponent } from '../step-header/step-header.component';
+import { ExpandableComponent } from '../expandable/expandable.component';
+
+@Component({
+  selector: 'fiv-step-content',
+  templateUrl: './step-content.component.html',
+  styleUrls: ['./step-content.component.scss']
+})
+export class StepContentComponent implements OnInit {
+
+  @Input() index: number;
+  @Input() icon: string;
+  @Input() isLast = false;
+  @Input() title = '';
+  @Input() subtitle = '';
+  @Output() didOpen: EventEmitter<StepContentComponent> = new EventEmitter();
+  @Output() didClose: EventEmitter<StepContentComponent> = new EventEmitter();
+
+  @ViewChild('self') step: ExpandableComponent;
+  @ViewChild('header') header: StepHeaderComponent;
+
+  constructor() {
+  }
+
+  ngOnInit() { }
+
+  open() {
+    this.step.open();
+  }
+
+  close() {
+    this.step.close();
+  }
+
+  complete() {
+    this.header.complete();
+  }
+
+  reset() {
+    this.header.reset();
+  }
+
+  afterClose() {
+    this.didClose.emit(this);
+  }
+
+  afterOpen() {
+    this.didOpen.emit(this);
+  }
+
+}

projects/core/src/lib/step-header/step-header.component.html

@@ -0,0 +1,9 @@
+<div class="number-container">
+  <span *ngIf="index && !icon" [@rotateAnim]="iconState" (@rotateAnim.done)="changeIconAndReveal($event,'md-checkmark')">{{index}}</span>
+  <ion-icon *ngIf="icon" [@rotateAnim]="iconState" (@rotateAnim.done)="changeIconAndReveal($event,'md-checkmark')"
+    [name]="icon"></ion-icon>
+</div>
+<div class="step-content">
+  <ng-content>
+  </ng-content>
+</div>

projects/core/src/lib/step-header/step-header.component.scss

@@ -0,0 +1,27 @@
+:host {
+    display: block;
+    width: 100%;
+    height: 72px;
+    align-items: center;
+    position: relative;
+}
+
+.number-container {
+    width: 24px;
+    height: 24px;
+    border-radius: 100%;
+    position: absolute;
+    left: 16px;
+    background: var(--fiv-color-circle, var(--ion-color-primary));
+    color: var(--fiv-color-circle-color, var(--ion-color-light));
+    * {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%) rotateZ(0deg);
+    }
+}
+
+.step-content {
+    padding-left: 56px
+}

projects/core/src/lib/step-header/step-header.component.spec.ts

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

projects/core/src/lib/step-header/step-header.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { rotateAnimation } from '../animations/animations';
+
+@Component({
+  selector: 'fiv-step-header',
+  templateUrl: './step-header.component.html',
+  styleUrls: ['./step-header.component.scss'],
+  animations: [rotateAnimation]
+})
+export class StepHeaderComponent implements OnInit {
+
+  @Input() index: number;
+  @Input() icon: string;
+  iconState = 'normal';
+  tempIcon: string;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  changeIconAndReveal(event, icon: string) {
+    if (event.fromState === 'normal') {
+      this.tempIcon = this.icon;
+      this.icon = icon;
+      this.iconState = 'normal';
+    }
+  }
+
+  complete() {
+    this.iconState = 'rotate';
+  }
+
+  reset() {
+    this.icon = this.tempIcon;
+  }
+
+}

projects/core/src/lib/step/step.component.html

@@ -0,0 +1,3 @@
+<ng-template>
+  <ng-content></ng-content>
+</ng-template>

projects/core/src/lib/step/step.component.spec.ts

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

projects/core/src/lib/step/step.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit, Input, ViewChild, TemplateRef } from '@angular/core';
+
+@Component({
+  selector: 'fiv-step',
+  templateUrl: './step.component.html',
+  styleUrls: ['./step.component.scss']
+})
+export class StepComponent implements OnInit {
+
+  @Input() index: number;
+  @Input() icon: string;
+  @Input() isLast = false;
+  @Input() title = '';
+  @Input() subtitle = '';
+
+  @ViewChild(TemplateRef) content: TemplateRef<any>;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}