Step symbol template (#149)

* Provide ability to define step navigation symbol in the form of Angular template.

For example:

```
<div awWizardStep>
   <ng-template awWizardStepTitle>
       Address information
   </ng-template>
   <ng-template awWizardStepSymbol>
       <i class="fa fa-taxi"></i>
   </ng-template>
</div>
```

TODO:
- Document in the main README.md
- Add an example in the [demo app](https://github.com/madoar/angular-archwizard-demo/)

* Rewrite HTML template more concisely

src/archwizard.module.ts

@@ -10,6 +10,7 @@ import {NextStepDirective} from './directives/next-step.directive';
 import {PreviousStepDirective} from './directives/previous-step.directive';
 import {OptionalStepDirective} from './directives/optional-step.directive';
 import {GoToStepDirective} from './directives/go-to-step.directive';
+import {WizardStepSymbolDirective} from './directives/wizard-step-symbol.directive';
 import {WizardStepTitleDirective} from './directives/wizard-step-title.directive';
 import {EnableBackLinksDirective} from './directives/enable-back-links.directive';
 import {WizardStepDirective} from './directives/wizard-step.directive';
@@ -32,6 +33,7 @@ import {ResetWizardDirective} from './directives/reset-wizard.directive';
     NextStepDirective,
     PreviousStepDirective,
     OptionalStepDirective,
+    WizardStepSymbolDirective,
     WizardStepTitleDirective,
     EnableBackLinksDirective,
     WizardStepDirective,
@@ -51,6 +53,7 @@ import {ResetWizardDirective} from './directives/reset-wizard.directive';
     NextStepDirective,
     PreviousStepDirective,
     OptionalStepDirective,
+    WizardStepSymbolDirective,
     WizardStepTitleDirective,
     EnableBackLinksDirective,
     WizardStepDirective,

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

@@ -13,7 +13,10 @@
         <ng-container *ngIf="step.stepTitleTemplate" [ngTemplateOutlet]="step.stepTitleTemplate.templateRef"></ng-container>
         <ng-container *ngIf="!step.stepTitleTemplate">{{step.stepTitle}}</ng-container>
       </div>
-      <div class="step-indicator" [ngStyle]="{ 'font-family': step.navigationSymbol.fontFamily }">{{step.navigationSymbol.symbol}}</div>
+      <div class="step-indicator" [ngStyle]="{ 'font-family': step.stepSymbolTemplate ? '' : step.navigationSymbol.fontFamily }">
+        <ng-container *ngIf="step.stepSymbolTemplate" [ngTemplateOutlet]="step.stepSymbolTemplate.templateRef"></ng-container>
+        <ng-container *ngIf="!step.stepSymbolTemplate">{{step.navigationSymbol.symbol}}</ng-container>
+      </div>
     </a>
   </li>
 </ul>

src/components/wizard-step.component.ts

@@ -6,7 +6,7 @@ import {WizardStep} from '../util/wizard-step.interface';
  *
  * ### Syntax
  *
- * With `stepTitle` input:
+ * With `stepTitle` and `navigationSymbol` inputs:
  *
  * ```html
  * <aw-wizard-step [stepTitle]="step title" [navigationSymbol]="{ symbol: 'symbol', fontFamily: 'font-family' }"
@@ -15,35 +15,41 @@ import {WizardStep} from '../util/wizard-step.interface';
  * </aw-wizard-step>
  * ```
  *
- * With `awWizardStepTitle` directive:
+ * With `awWizardStepTitle` and `awWizardStepSymbol` directives:
  *
  * ```html
- * <aw-wizard-step [navigationSymbol]="{ symbol: 'symbol', fontFamily: 'font-family' }"
+ * <aw-wizard-step"
  *    [canExit]="deciding function" (stepEnter)="enter function" (stepExit)="exit function">
  *    <ng-template awWizardStepTitle>
  *        step title
  *    </ng-template>
+ *    <ng-template awWizardStepSymbol>
+ *        symbol
+ *    </ng-template>
  *    ...
  * </aw-wizard-step>
  * ```
  *
  * ### Example
  *
- * With `stepTitle` input:
+ * With `stepTitle` and `navigationSymbol` inputs:
  *
  * ```html
  * <aw-wizard-step stepTitle="Address information" [navigationSymbol]="{ symbol: '&#xf1ba;', fontFamily: 'FontAwesome' }">
  *    ...
  * </aw-wizard-step>
  * ```
  *
- * With `awWizardStepTitle` directive:
+ * With `awWizardStepTitle` and `awWizardStepSymbol` directives:
  *
  * ```html
- * <aw-wizard-step [navigationSymbol]="{ symbol: '&#xf1ba;', fontFamily: 'FontAwesome' }">
+ * <aw-wizard-step>
  *    <ng-template awWizardStepTitle>
  *        Address information
  *    </ng-template>
+ *    <ng-template awWizardStepSymbol>
+ *        <i class="fa fa-taxi"></i>
+ *    </ng-template>
  * </aw-wizard-step>
  * ```
  *

src/directives/wizard-step-symbol.directive.spec.ts

@@ -0,0 +1,54 @@
+import {ViewChild, Component} from '@angular/core';
+import {TestBed, async, ComponentFixture} from '@angular/core/testing';
+import {By} from '@angular/platform-browser';
+
+import {WizardComponent} from '../components/wizard.component';
+import {ArchwizardModule} from '../archwizard.module';
+
+
+@Component({
+  selector: 'aw-test-wizard',
+  template: `
+    <aw-wizard>
+      <aw-wizard-step stepTitle='Step A'>
+        <ng-template awWizardStepSymbol>A</ng-template>
+        Step A content
+      </aw-wizard-step>
+      <aw-wizard-completion-step stepTitle='Step B'>
+        <ng-template awWizardStepSymbol>B</ng-template>
+        Step B content
+      </aw-wizard-completion-step>
+    </aw-wizard>
+  `
+})
+class WizardTestComponent {
+  @ViewChild(WizardComponent)
+  public wizard: WizardComponent;
+}
+
+describe('WizardStepSymbolDirective', () => {
+  let wizardTest: WizardTestComponent;
+  let wizardTestFixture: ComponentFixture<WizardTestComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [WizardTestComponent],
+      imports: [ArchwizardModule]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    wizardTestFixture = TestBed.createComponent(WizardTestComponent);
+    wizardTestFixture.detectChanges();
+
+    wizardTest = wizardTestFixture.componentInstance;
+  });
+
+  it('should create an instance', () => {
+    let navigationSymbols = wizardTestFixture.debugElement.queryAll(By.css('aw-wizard-navigation-bar ul li .step-indicator'));
+
+    expect(navigationSymbols.length).toBe(2);
+    expect(navigationSymbols[0].nativeElement.innerText).toBe('A');
+    expect(navigationSymbols[1].nativeElement.innerText).toBe('B');
+  });
+});

src/directives/wizard-step-symbol.directive.ts

@@ -0,0 +1,25 @@
+import {Directive, TemplateRef} from '@angular/core';
+
+/**
+ * The `awWizardStepSymbol` directive can be used as an alternative to the `navigationSymbol` input of a [[WizardStep]]
+ * to define the step symbol inside the navigation bar.  This way step symbol may contain arbitrary content.
+ *
+ * ### Syntax
+ *
+ * ```html
+ * <ng-template awWizardStepSymbol>
+ *     ...
+ * </ng-template>
+ * ```
+ */
+@Directive({
+  selector: 'ng-template[awStepSymbol], ng-template[awWizardStepSymbol]'
+})
+export class WizardStepSymbolDirective {
+  /**
+   * Constructor
+   *
+   * @param templateRef A reference to the content of the `ng-template` that contains this [[WizardStepSymbolDirective]]
+   */
+  constructor(public templateRef: TemplateRef<any>) { }
+}

src/directives/wizard-step.directive.ts

@@ -6,7 +6,7 @@ import {WizardStep} from '../util/wizard-step.interface';
  *
  * ### Syntax
  *
- * With `stepTitle` input:
+ * With `stepTitle` and `navigationSymbol` inputs:
  *
  * ```html
  * <div awWizardStep [stepTitle]="step title" [navigationSymbol]="{ symbol: 'symbol', fontFamily: 'font-family' }"
@@ -15,35 +15,40 @@ import {WizardStep} from '../util/wizard-step.interface';
  * </div>
  * ```
  *
- * With `awWizardStepTitle` directive:
+ * With `awWizardStepTitle` and `awWizardStepSymbol` directives:
  *
  * ```html
- * <div awWizardStep [navigationSymbol]="{ symbol: 'symbol', fontFamily: 'font-family' }"
- *    [canExit]="deciding function" (stepEnter)="enter function" (stepExit)="exit function">
+ * <div awWizardStep [canExit]="deciding function" (stepEnter)="enter function" (stepExit)="exit function">
  *    <ng-template awWizardStepTitle>
  *        step title
  *    </ng-template>
+ *    <ng-template awWizardStepSymbol>
+ *        symbol
+ *    </ng-template>
  *    ...
  * </div>
  * ```
  *
  * ### Example
  *
- * With `stepTitle` input:
+ * With `stepTitle` and `navigationSymbol` inputs:
  *
  * ```html
  * <div awWizardStep stepTitle="Address information" [navigationSymbol]="{ symbol: '&#xf1ba;', fontFamily: 'FontAwesome' }">
  *    ...
  * </div>
  * ```
  *
- * With `awWizardStepTitle` directive:
+ * With `awWizardStepTitle` and `awWizardStepSymbol` directives:
  *
  * ```html
- * <div awWizardStep [navigationSymbol]="{ symbol: '&#xf1ba;', fontFamily: 'FontAwesome' }">
+ * <div awWizardStep>
  *    <ng-template awWizardStepTitle>
  *        Address information
  *    </ng-template>
+ *    <ng-template awWizardStepSymbol>
+ *        <i class="fa fa-taxi"></i>
+ *    </ng-template>
  * </div>
  * ```
  *

src/util/wizard-step.interface.ts

@@ -3,6 +3,7 @@ import {WizardStepTitleDirective} from '../directives/wizard-step-title.directiv
 import {ContentChild, EventEmitter, HostBinding, Input, Output} from '@angular/core';
 import {isBoolean} from 'util';
 import {NavigationSymbol} from './navigation-symbol.interface';
+import {WizardStepSymbolDirective} from '../directives/wizard-step-symbol.directive';
 
 /**
  * Basic functionality every type of wizard step needs to provide
@@ -18,6 +19,13 @@ export abstract class WizardStep {
   @ContentChild(WizardStepTitleDirective)
   public stepTitleTemplate: WizardStepTitleDirective;
 
+  /**
+   * A step symbol property that, if defined, overrides `navigationSymbol`.
+   * Allows to display arbitrary content as a step symbol instead of plain text.
+   */
+  @ContentChild(WizardStepSymbolDirective)
+  public stepSymbolTemplate: WizardStepSymbolDirective;
+
   /**
    * A step id, unique to the step
    */
@@ -33,6 +41,7 @@ export abstract class WizardStep {
 
   /**
    * A symbol property, which contains an optional symbol for the step inside the navigation bar.
+   * Takes effect when `stepSymbolTemplate` is not defined or null.
    */
   @Input()
   public navigationSymbol: NavigationSymbol = { symbol: '' };