V1.6.0 (#6)

- added a new directive "wizardStepTitle", which enables the developer to create his own title content for the navigation bar in html
- added tests for the new WizardStepTitleDirective
- expanded the documentation
- added typedoc to generate a documentation
- add a short introduction about the new wizard-step-title to the README

.gitignore

@@ -26,6 +26,7 @@
 /.sass-cache
 /connect.lock
 /coverage/*
+/docs/*
 /libpeerconnection.log
 npm-debug.log
 testem.log

README.md

@@ -189,6 +189,24 @@ Possible `<wizard-completion-step>` parameters:
 | [navigationSymbolFontFamily]  | string                                            | null          |
 | (stepEnter)                   | function(MovingDirection)                         | null          |
 
+### \[wizardStepTitle\]
+Sometimes it's not enough to define a title with the `title` attribute in `<wizard-step>` and `<wizard-completion-step>`.
+One example for such a case is, if the title should be written in another font.
+Another example would be if it's desired that the title should be choosen depending on the available width of your screen or window.
+In such cases you may want to specify the html for the title of a wizard step yourself.
+This can be achieved by using the `[wizardStepTitle]` directive inside a wizard step on a `ng-template` component.
+
+```html
+<wizard-step (stepEnter)="enterStep($event)">
+  <ng-template wizardStepTitle>
+    <span class="hidden-sm-down">Delivery address</span>
+    <span class="hidden-md-up">Address</span>
+  </ng-template>
+</wizard-step>
+```
+
+Be aware, that you can only use `[wizardStepTitle]` together with Angular, because `ng-template` was introduced in Angular 4.
+
 ### \[optionalStep\]
 If you need to define an optional step, that doesn't need to be done to continue to the next steps, you can define an optional step 
 by adding the `optionalStep` directive to the step you want to declare as optional. 

gulpfile.babel.js

@@ -2,6 +2,7 @@ import gulp from 'gulp';
 import ngc from 'gulp-ngc';
 import less from 'gulp-less';
 import inline from 'gulp-inline-ng2-template';
+import typedoc from 'gulp-typedoc';
 
 import rimraf from 'rimraf';
 
@@ -60,4 +61,23 @@ gulp.task('compile', ['inline'], () => {
   return ngc('tmp/tsconfig.aot.json');
 });
 
-gulp.task('default', ['cleanup', 'move-to-tmp', 'less', 'inline', 'compile']);
+/**
+ * create the typescript documentation in the "./doc" folder
+ */
+gulp.task('typedoc', ['compile'], () => {
+  return gulp
+    .src(["src/**/*.ts", '!src/**/*.spec.ts'])
+    .pipe(typedoc({
+      mode: "file",
+      module: "commonjs",
+      target: "es6",
+      out: "docs",
+      preserveConstEnums: true,
+      emitDecoratorMetadata: true,
+      moduleResolution: "node",
+      stripInternal: true,
+      experimentalDecorators: true
+    }));
+});
+
+gulp.task('default', ['cleanup', 'move-to-tmp', 'less', 'inline', 'compile', 'typedoc']);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng2-archwizard",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "license": "MIT",
   "description": "An angular 2 module containing a wizard component and its supporting components and directives",
   "homepage": "https://github.com/madoar/ng2-archwizard",
@@ -65,6 +65,7 @@
     "gulp-inline-ng2-template": "^4.0.0",
     "gulp-less": "^3.3.0",
     "gulp-ngc": "^0.3.0",
+    "gulp-typedoc": "^2.0.2",
     "html-loader": "^0.4.0",
     "html-webpack-plugin": "^2.28.0",
     "istanbul-instrumenter-loader": "^2.0.0",
@@ -96,6 +97,7 @@
     "ts-helpers": "^1.1.2",
     "tslint": "^5.0.0",
     "tslint-loader": "^3.5.1",
+    "typedoc": "^0.7.1",
     "typescript": "^2.2.2",
     "typings": "^2.1.0",
     "url-loader": "^0.5.6",

src/components/components/wizard-completion-step.component.ts

@@ -2,73 +2,143 @@
  * Created by marc on 20.05.17.
  */
 
-import {Component, EventEmitter, HostBinding, Input, Output} from '@angular/core';
+import {Component, ContentChild, EventEmitter, HostBinding, Input, Output} from '@angular/core';
 import {MovingDirection} from '../util/MovingDirection';
 import {WizardComponent} from './wizard.component';
 import {WizardStep} from '../util/WizardStep';
+import {WizardStepTitleDirective} from '../directives/wizard-step-title.directive';
 
+/**
+ * The `wizard-completion-step` component can be used to define a completion/success step at the end of your wizard
+ * After a `wizard-completion-step` has been entered, it has the characteristic that the user is blocked from
+ * leaving it again to a previous step.
+ * In addition entering a `wizard-completion-step` automatically sets the `wizard` amd all steps inside the `wizard`
+ * as completed.
+ *
+ * ### Syntax
+ *
+ * ```html
+ * <wizard-completion-step [title]="title of the wizard step" [navigationSymbol]="navigation symbol"
+ *    [navigationSymbolFontFamily]="navigation symbol font family"
+ *    (stepEnter)="event emitter to be called when the wizard step is entered"
+ *    (stepExit)="event emitter to be called when the wizard step is exited">
+ *    ...
+ * </wizard-completion-step>
+ * ```
+ *
+ * ### Example
+ *
+ * ```html
+ * <wizard-completion-step title="Step 1" navigationSymbol="1">
+ *    ...
+ * </wizard-completion-step>
+ * ```
+ *
+ * With a navigation symbol from the `font-awesome` font:
+ *
+ * ```html
+ * <wizard-completion-step title="Step 1" navigationSymbol="&#xf1ba;" navigationSymbolFontFamily="FontAwesome">
+ *    ...
+ * </wizard-completion-step>
+ * ```
+ *
+ * @author Marc Arndt
+ */
 @Component({
   selector: 'wizard-completion-step',
   templateUrl: 'wizard-completion-step.component.html',
   styleUrls: ['wizard-completion-step.component.css']
 })
 export class WizardCompletionStepComponent implements WizardStep {
   /**
-   * The visible title of this step in the navigation bar of this wizard
+   * @inheritDoc
+   */
+  @ContentChild(WizardStepTitleDirective)
+  public titleTemplate: WizardStepTitleDirective;
+
+  /**
+   * @inheritDoc
    */
   @Input()
   public title: string;
 
   /**
-   * The symbol which is visible inside the circle belonging to this wizard step in the navigation bar.
-   *
-   * @type {string}
+   * @inheritDoc
    */
   @Input()
   public navigationSymbol = '';
 
   /**
-   * The font in which the navigation symbol should be shown.
-   * If no font is specified the system one should be taken.
+   * @inheritDoc
    */
   @Input()
   public navigationSymbolFontFamily: string;
 
   /**
-   * This EventEmitter is called when this step is entered.
-   * The bound method should do initializing work.
+   * This EventEmitter is called when the step is entered.
+   * The bound method should be used to do initialization work.
    *
    * @type {EventEmitter<MovingDirection>}
    */
   @Output()
   public stepEnter = new EventEmitter<MovingDirection>();
 
   /**
-   * This EventEmitter is called when this step is exited.
+   * This EventEmitter is called when the step is exited.
+   * The bound method can be used to do cleanup work.
    *
    * @type {EventEmitter<MovingDirection>}
    */
   public stepExit = new EventEmitter<MovingDirection>();
 
+  /**
+   * Returns if this wizard step should be visible to the user.
+   * If the step should be visible to the user false is returned, otherwise true
+   *
+   * @returns {boolean}
+   */
   @HostBinding('hidden')
   public get hidden(): boolean {
     return !this.selected;
   }
 
+  /**
+   * @inheritDoc
+   */
   public completed: false;
+
+  /**
+   * @inheritDoc
+   */
   public selected = false;
+
+  /**
+   * @inheritDoc
+   */
   public optional = false;
 
+  /**
+   * @inheritDoc
+   */
   public canExit: ((direction: MovingDirection) => boolean) | boolean = false;
 
-  constructor(private wizard: WizardComponent) {
-  }
+  /**
+   * Constructor
+   * @param wizard The [[WizardComponent]], this completion step is contained inside
+   */
+  constructor(private wizard: WizardComponent) { }
 
+  /**
+   * @inheritDoc
+   */
   enter(direction: MovingDirection): void {
     this.wizard.completed = true;
     this.stepEnter.emit(direction);
   }
 
+  /**
+   * @inheritDoc
+   */
   exit(direction: MovingDirection): void {
     // do nothing
   }

src/components/components/wizard-navigation-bar.component.html

@@ -12,7 +12,10 @@
         optional: step.optional && !step.completed && !step.selected && !wizard.completed
   }">
     <div>
-      <a [goToStep]="step">{{step.title}}</a>
+      <a [goToStep]="step">
+        <ng-container *ngIf="step.titleTemplate" [ngTemplateOutlet]="step.titleTemplate.templateRef"></ng-container>
+        <ng-container *ngIf="!step.titleTemplate">{{step.title}}</ng-container>
+      </a>
     </div>
   </li>
 </ul>

src/components/components/wizard-navigation-bar.component.ts

@@ -2,19 +2,46 @@ import {Component} from '@angular/core';
 import {WizardComponent} from './wizard.component';
 import {WizardStep} from '../util/WizardStep';
 
+/**
+ * The `wizard-navigation-bar` component contains the navigation bar inside a [[WizardComponent]].
+ * To correctly display the navigation bar, it's required to set the right css classes for the navigation bar,
+ * otherwise it will look like a normal `ul` component.
+ *
+ * ### Syntax
+ *
+ * ```html
+ * <wizard-navigation-bar></wizard-navigation-bar>
+ * ```
+ *
+ * @author Marc Arndt
+ */
 @Component({
   selector: 'wizard-navigation-bar',
   templateUrl: 'wizard-navigation-bar.component.html',
   styleUrls: ['wizard-navigation-bar.component.horizontal.less', 'wizard-navigation-bar.component.vertical.less']
 })
 export class WizardNavigationBarComponent {
-
+  /**
+   * Constructor
+   *
+   * @param wizard The wizard, which includes this navigation bar
+   */
   constructor(private wizard: WizardComponent) { }
 
+  /**
+   * Returns all [[WizardStep]]s contained in the wizard
+   *
+   * @returns {Array<WizardStep>} An array containing all [[WizardStep]]s
+   */
   get wizardSteps(): Array<WizardStep> {
     return this.wizard.allSteps;
   }
 
+  /**
+   * Returns the number of wizard steps, that need to be displaced in the navigation bar
+   *
+   * @returns {number} The number of wizard steps to be displayed
+   */
   get numberOfWizardSteps(): number {
     return this.wizard.allSteps.length;
   }