Replace text buttons and reset method

README.MD

@@ -54,7 +54,7 @@ Once your library is imported, you can use form-wizard and wizard-step component
 
 ```xml
 <form-wizard>
-  <wizard-step [title]="'Step1'" [isValid]="emailForm.form.valid" (onNext)="onStep1Next($event)">
+  <wizard-step [title]="'Step1'" [nextText]="'Next'" [previousText]="'Previous'" [doneText]="'Done'" [isValid]="emailForm.form.valid" (onNext)="onStep1Next($event)">
     <h1>Step1</h1>
     <form #emailForm="ngForm">
       <div class="form-group">

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "angular2-wizard",
-  "version": "0.3.0",
+  "name": "@3dluis/angular2-wizard",
+  "version": "0.4.0",
   "scripts": {
     "build": "ngc -p tsconfig.json",
     "lint": "tslint src/**/*.ts",
@@ -16,6 +16,7 @@
     "name": "Maiyaporn Phanich",
     "email": "p.maiyaporn@gmail.com"
   },
+  "typings": "./dist/index.d.ts",
   "keywords": [
     "angular2-wizard",
     "form-wizard",
@@ -33,18 +34,18 @@
     "bootstrap": "^4.0.0-alpha.6"
   },
   "devDependencies": {
-    "@angular/common": "^2.3.1",
-    "@angular/compiler": "^2.3.1",
-    "@angular/compiler-cli": "^2.3.1",
-    "@angular/core": "^2.3.1",
-    "@angular/platform-browser": "^2.3.1",
-    "@angular/platform-browser-dynamic": "^2.3.1",
-    "@angular/platform-server": "^2.3.1",
+    "@angular/common": "^4.0.2",
+    "@angular/compiler": "^4.0.2",
+    "@angular/compiler-cli": "^4.0.2",
+    "@angular/core": "^4.0.2",
+    "@angular/platform-browser": "^4.0.2",
+    "@angular/platform-browser-dynamic": "^4.0.2",
+    "@angular/platform-server": "^4.0.2",
     "@types/es6-shim": "^0.31.32",
     "@types/jasmine": "^2.5.42",
-    "@types/selenium-webdriver": "^2.53.39",
+    "@types/selenium-webdriver": "^3.0.1",
     "awesome-typescript-loader": "^3.0.4-rc.2",
-    "codelyzer": "^0.0.28",
+    "codelyzer": "^2.1.1",
     "istanbul-instrumenter-loader": "^2.0.0",
     "jasmine-core": "^2.5.2",
     "karma": "^1.4.1",
@@ -55,15 +56,18 @@
     "karma-remap-coverage": "^0.1.4",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^2.0.2",
-    "rxjs": "^5.0.1",
-    "source-map-loader": "^0.1.6",
+    "rxjs": "^5.1.0",
+    "source-map-loader": "^0.2.1",
     "ts-helpers": "^1.1.2",
-    "tslint": "^3.15.1",
-    "typescript": "^2.1.6",
+    "tslint": "~4.0.0",
+    "typescript": "^2.2.1",
     "webpack": "^2.2.1",
-    "zone.js": "0.7.2"
+    "zone.js": "0.8.5"
   },
   "engines": {
     "node": ">=0.8.0"
+  },
+  "_comment01": {
+    "typings": "./dist/index.d.ts"
   }
 }

src/wizard-step.component.spec.ts

@@ -14,15 +14,13 @@ describe('Wizard Step Component', () => {
         TestBed.compileComponents();
     });
 
-    describe('when create wizard step', () => {
-        it('should have a title', () => {
-            let fixture = TestBed.createComponent(WizardStepComponent);
-            fixture.componentInstance.title = 'Step1';
+it('should have a title', () => {
+    let fixture = TestBed.createComponent(WizardStepComponent);
+    fixture.componentInstance.title = 'Step1';
 
-            fixture.detectChanges();
+    fixture.detectChanges();
 
-            expect(fixture.componentInstance.title).toBe('Step1');
-        });
-    });
+    expect(fixture.componentInstance.title).toBe('Step1');
+});
 
 });

src/wizard-step.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import {Component, Input, Output, EventEmitter, OnInit} from '@angular/core';
 
 @Component({
   selector: 'wizard-step',
@@ -9,7 +9,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
     </div>
   `
 })
-export class WizardStepComponent {
+export class WizardStepComponent implements OnInit {
   @Input() title: string;
   @Input() hidden: boolean = false;
   @Input() isValid: boolean = true;
@@ -25,6 +25,10 @@ export class WizardStepComponent {
 
   constructor() { }
 
+    ngOnInit(){
+
+    }
+
   @Input('isActive')
   set isActive(isActive: boolean) {
     this._isActive = isActive;

src/wizard.component.spec.ts

@@ -14,10 +14,8 @@ describe('Wizard Component', () => {
         TestBed.compileComponents();
     });
 
-    describe('', () => {
-        it('', () => {
-            let fixture = TestBed.createComponent(WizardComponent);
-        });
+    it('should create the app', () => {
+        const fixture = TestBed.createComponent(WizardComponent);
     });
 
 });

src/wizard.component.ts

@@ -1,4 +1,4 @@
-import { Component, Output, EventEmitter, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
+import {Component, Output, Input, EventEmitter, ContentChildren, QueryList, AfterContentInit, OnInit} from '@angular/core';
 import { WizardStepComponent } from './wizard-step.component';
 
 @Component({
@@ -7,18 +7,19 @@ import { WizardStepComponent } from './wizard-step.component';
   `<div class="card">
     <div class="card-header">
       <ul class="nav nav-justified">
-        <li class="nav-item" *ngFor="let step of steps" [ngClass]="{'active': step.isActive, 'enabled': !step.isDisabled, 'disabled': step.isDisabled, 'completed': isCompleted}">
+        <li class="nav-item" *ngFor="let step of steps" 
+        [ngClass]="{'active': step.isActive, 'enabled': !step.isDisabled, 'disabled': step.isDisabled, 'completed': isCompleted}">
           <a (click)="goToStep(step)">{{step.title}}</a>
         </li>
       </ul>
     </div>
     <div class="card-block">
       <ng-content></ng-content>
     </div>
-    <div class="card-footer" [hidden]="isCompleted">
-        <button type="button" class="btn btn-secondary float-left" (click)="previous()" [hidden]="!hasPrevStep || !activeStep.showPrev">Previous</button>
-        <button type="button" class="btn btn-secondary float-right" (click)="next()" [disabled]="!activeStep.isValid" [hidden]="!hasNextStep || !activeStep.showNext">Next</button>
-        <button type="button" class="btn btn-secondary float-right" (click)="complete()" [disabled]="!activeStep.isValid" [hidden]="hasNextStep">Done</button>
+    <div class="card-footer" *ngIf="!isCompleted">
+        <button type="button" class="btn btn-default float-left" (click)="previous()" *ngIf="hasPrevStep || activeStep.showPrev">{{previousText}}</button>
+        <button type="button" class="btn btn-secondary float-right" (click)="next()" [disabled]="!activeStep.isValid" *ngIf="hasNextStep || activeStep.showNext">{{nextText}}</button>
+        <button type="button" class="btn btn-primary float-right" (click)="complete()" [disabled]="!activeStep.isValid" *ngIf="!hasNextStep">{{doneText}}</button>
     </div>
   </div>`
   ,
@@ -34,7 +35,7 @@ import { WizardStepComponent } from './wizard-step.component';
     '.completed { cursor: default; }'
   ]
 })
-export class WizardComponent implements AfterContentInit {
+export class WizardComponent implements OnInit, AfterContentInit {
   @ContentChildren(WizardStepComponent)
   wizardSteps: QueryList<WizardStepComponent>;
 
@@ -44,8 +45,22 @@ export class WizardComponent implements AfterContentInit {
   @Output()
   onStepChanged: EventEmitter<WizardStepComponent> = new EventEmitter<WizardStepComponent>();
 
+  @Input()
+  previousText: string = 'Previous';
+
+  @Input()
+  nextText: string = 'Next';
+
+  @Input()
+  doneText: string = 'Done';
+
+
   constructor() { }
 
+    ngOnInit(){
+
+    }
+
   ngAfterContentInit() {
     this.wizardSteps.forEach(step => this._steps.push(step));
     this.steps[0].isActive = true;
@@ -111,5 +126,24 @@ export class WizardComponent implements AfterContentInit {
     this.activeStep.onComplete.emit();
     this._isCompleted = true;
   }
+  /*
+   * 
+   */
+  public reset(force: boolean = false): void {
+    if (this._isCompleted || force) {
+      this.activeStep = this.steps[0];
+      this.steps.forEach((step) => {
+        step.isDisabled = true;
+      });
+
+      this._isCompleted = false;
+      this.activeStep.isDisabled = false;
+      this.activeStep.isActive = true;
+
+      setTimeout(() => {
+        this._isCompleted = false;
+      }, 1000);
+    }
+  }
 
 }