Introduce a new interface NavigationSymbol (#104)

- integrate the previous navigation symbol string and its font family string inside the new struct - change the documentation to contain the changes
madoar · Feb 21, 2018 · 665e26d · 665e26d
1 parent 4d3c500
commit 665e26d
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -147,15 +147,16 @@ A wizard step needs to contain a title, which is shown in the navigation bar of
 To set the title of a step, add the `stepTitle` input attribute, with the choosen step title, to the definition of your wizard step. 
 
 #### \[navigationSymbol\]
-Sometimes it's useful to add a symbol in the center of the circle in the navigation bar, that belongs to the step.
-`ng2-archwizard` supports this through the `navigationSymbol` input attribute of the wizard step.
+Sometimes it's useful to add a symbol in the center of the circle in the navigation bar, which belongs to the step.
+`ng2-archwizard` supports this through the `[navigationSymbol]` input attribute of the wizard step.
 
-Be aware, that not all layouts display the symbols. Only the layouts `large-filled-symbols` and `large-empty-symbols` display the symbols.
+Be aware, that not all layouts display the symbols. 
+Only the layouts `large-filled-symbols` and `large-empty-symbols` display the symbols!
 
-If you want to add a `2` to the circle in the navigation bar belonging to the second step you can do it like this:
+If you want to add a `2` to the circle in the navigation bar belonging to the second step, you can do it like this:
 
 ```html
-<aw-wizard-step stepTitle="Second Step" navigationSymbol="2"></aw-wizard-step>
+<aw-wizard-step stepTitle="Second Step" [navigationSymbol]="{ symbol: '2' }"></aw-wizard-step>
 ```
 
 In addition to normal symbols it's also possible to use an icon from a font as a symbol.
@@ -164,15 +165,12 @@ Afterwards you can use the unicode in the [numeric character reference](https://
 format as the symbol for the step.
 In addition you need to specify the font family, to which the icon belongs, otherwise the symbol can't be displayed correctly.
 
-#### \[navigationSymbolFontFamily\]
-To specify the font family of the used symbol inside the center of the circle in the navigation bar, that belongs to a step, you need to set the 
-`navigationSymbolFontFamily` input attribute of the step.
-
-For example, if you want to show the icon with the unicode `\f2dd` of [FontAwesome](http://fontawesome.io/) inside a step circle in the navigation bar, then 
-you need to set the `navigationSymbol` input attribute of the step to `&#xf2dd;` and the `navigationSymbolFontFamily` to `FontAwesome`:
+The font family of the used symbol can be specified via the `fontFamily` field of the given `[navigationSymbol]` json input object.
+For example, if you want to show the icon with the unicode `\f2dd` of [FontAwesome](http://fontawesome.io/) inside a step circle in the navigation bar, then
+you can do this via the following `[navigationSymbol]` input attribute:
 
 ```html
-<aw-wizard-step stepTitle="Second Step" navigationSymbol="&#xf2dd;" navigationSymbolFontFamily="FontAwesome"></aw-wizard-step>
+<aw-wizard-step stepTitle="Second Step" [navigationSymbol]="{ symbol: '&#xf2dd;' fontFamily: 'FontAwesome' }"></aw-wizard-step>
 ```
 
 #### \[canEnter\]
@@ -218,7 +216,6 @@ Possible `<aw-wizard-step>` parameters:
 | [stepId]                      | `string`                                                                                             | null          |
 | [stepTitle]                   | `string`                                                                                             | null          |
 | [navigationSymbol]            | `string`                                                                                             | ''            |
-| [navigationSymbolFontFamily]  | `string`                                                                                             | null          |
 | [canEnter]                    | `function(MovingDirection): boolean` \| `function(MovingDirection): Promise<boolean>` \| `boolean`   | true          |
 | [canExit]                     | `function(MovingDirection): boolean` \| `function(MovingDirection): Promise<boolean>` \| `boolean`   | true          |
 | (stepEnter)                   | `function(MovingDirection): void`                                                                    | null          |
@@ -242,7 +239,6 @@ Possible `<aw-wizard-completion-step>` parameters:
 | [stepId]                      | `string`                                                                                             | null          |
 | [stepTitle]                   | `string`                                                                                             | null          |
 | [navigationSymbol]            | `string`                                                                                             | ''            |
-| [navigationSymbolFontFamily]  | `string`                                                                                             | null          |
 | [canEnter]                    | `function(MovingDirection): boolean` \| `function(MovingDirection): Promise<boolean>` \| `boolean`   | true          |
 | (stepEnter)                   | `function(MovingDirection): void`                                                                    | null          |
 
@@ -434,7 +430,6 @@ Possible `awWizardStep` parameters:
 | [stepId]                      | `string`                                                                                             | null          |
 | [stepTitle]                   | `string`                                                                                             | null          |
 | [navigationSymbol]            | `string`                                                                                             | ''            |
-| [navigationSymbolFontFamily]  | `string`                                                                                             | null          |
 | [canEnter]                    | `function(MovingDirection): boolean` \| `function(MovingDirection): Promise<boolean>` \| `boolean`   | true          |
 | [canExit]                     | `function(MovingDirection): boolean` \| `function(MovingDirection): Promise<boolean>` \| `boolean`   | true          |
 | (stepEnter)                   | `function(MovingDirection): void`                                                                    | null          |
@@ -464,7 +459,6 @@ Possible `awWizardCompletionStep` parameters:
 | [stepId]                      | `string`                                                                                             | null          |
 | [stepTitle]                   | `string`                                                                                             | null          |
 | [navigationSymbol]            | `string`                                                                                             | ''            |
-| [navigationSymbolFontFamily]  | `string`                                                                                             | null          |
 | [canEnter]                    | `function(MovingDirection): boolean` \| `function(MovingDirection): Promise<boolean>` \| `boolean`   | true          |
 | (stepEnter)                   | `function(MovingDirection): void`                                                                    | null          |
 

diff --git a/src/components/wizard-completion-step.component.ts b/src/components/wizard-completion-step.component.ts
@@ -16,8 +16,8 @@ import {WizardCompletionStep} from '../util/wizard-completion-step.interface';
  * ### Syntax
  *
  * ```html
- * <aw-wizard-completion-step [stepTitle]="title of the wizard step" [navigationSymbol]="navigation symbol"
- *    [navigationSymbolFontFamily]="navigation symbol font family"
+ * <aw-wizard-completion-step [stepTitle]="title of the wizard step"
+ *    [navigationSymbol]="{ symbol: 'navigation symbol', fontFamily: '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">
  *    ...
@@ -27,15 +27,15 @@ import {WizardCompletionStep} from '../util/wizard-completion-step.interface';
  * ### Example
  *
  * ```html
- * <aw-wizard-completion-step stepTitle="Step 1" navigationSymbol="1">
+ * <aw-wizard-completion-step stepTitle="Step 1" [navigationSymbol]="{ symbol: '1' }">
  *    ...
  * </aw-wizard-completion-step>
  * ```
  *
  * With a navigation symbol from the `font-awesome` font:
  *
  * ```html
- * <aw-wizard-completion-step stepTitle="Step 1" navigationSymbol="&#xf1ba;" navigationSymbolFontFamily="FontAwesome">
+ * <aw-wizard-completion-step stepTitle="Step 1" [navigationSymbol]="{ symbol: '&#xf1ba;', fontFamily: 'FontAwesome' }">
  *    ...
  * </aw-wizard-completion-step>
  * ```

diff --git a/src/components/wizard-navigation-bar.component.html b/src/components/wizard-navigation-bar.component.html
@@ -1,8 +1,8 @@
 <ul class="steps-indicator steps-{{numberOfWizardSteps}}">
   <li *ngFor="let step of wizardSteps"
-      [attr.step-symbol]="step.navigationSymbol"
+      [attr.step-symbol]="step.navigationSymbol.symbol"
       [ngStyle]="{
-        'font-family': step.navigationSymbolFontFamily
+        'font-family': step.navigationSymbol.fontFamily
       }"
       [ngClass]="{
         default: isDefault(step),

diff --git a/src/components/wizard-step.component.ts b/src/components/wizard-step.component.ts
@@ -9,7 +9,7 @@ import {WizardStep} from '../util/wizard-step.interface';
  * With `stepTitle` input:
  *
  * ```html
- * <aw-wizard-step [stepTitle]="step title" [navigationSymbol]="symbol" [navigationSymbolFontFamily]="font-family"
+ * <aw-wizard-step [stepTitle]="step title" [navigationSymbol]="{ symbol: 'symbol', fontFamily: 'font-family' }"
  *    [canExit]="deciding function" (stepEnter)="enter function" (stepExit)="exit function">
  *    ...
  * </aw-wizard-step>
@@ -18,7 +18,7 @@ import {WizardStep} from '../util/wizard-step.interface';
  * With `awWizardStepTitle` directive:
  *
  * ```html
- * <aw-wizard-step [navigationSymbol]="symbol" [navigationSymbolFontFamily]="font-family"
+ * <aw-wizard-step [navigationSymbol]="{ symbol: 'symbol', fontFamily: 'font-family' }"
  *    [canExit]="deciding function" (stepEnter)="enter function" (stepExit)="exit function">
  *    <ng-template awWizardStepTitle>
  *        step title
@@ -32,15 +32,15 @@ import {WizardStep} from '../util/wizard-step.interface';
  * With `stepTitle` input:
  *
  * ```html
- * <aw-wizard-step stepTitle="Address information" navigationSymbol="&#xf1ba;" navigationSymbolFontFamily="FontAwesome">
+ * <aw-wizard-step stepTitle="Address information" [navigationSymbol]="{ symbol: '&#xf1ba;', fontFamily: 'FontAwesome' }">
  *    ...
  * </aw-wizard-step>
  * ```
  *
  * With `awWizardStepTitle` directive:
  *
  * ```html
- * <aw-wizard-step navigationSymbol="&#xf1ba;" navigationSymbolFontFamily="FontAwesome">
+ * <aw-wizard-step [navigationSymbol]="{ symbol: '&#xf1ba;', fontFamily: 'FontAwesome' }">
  *    <ng-template awWizardStepTitle>
  *        Address information
  *    </ng-template>

diff --git a/src/directives/wizard-completion-step.directive.ts b/src/directives/wizard-completion-step.directive.ts
@@ -6,14 +6,14 @@ import {WizardCompletionStep} from '../util/wizard-completion-step.interface';
  * The `awWizardCompletionStep` directive can be used to define a completion/success step at the end of your wizard
  * After a [[WizardCompletionStep]] has been entered, it has the characteristic that the user is blocked from
  * leaving it again to a previous step.
- * In addition entering a [[WizardCompletionStep]] automatically sets the `wizard` amd all steps inside the `wizard`
+ * In addition entering a [[WizardCompletionStep]] automatically sets the `wizard`, and all steps inside the `wizard`,
  * as completed.
  *
  * ### Syntax
  *
  * ```html
- * <div awWizardCompletionStep [stepTitle]="title of the wizard step" [navigationSymbol]="navigation symbol"
- *    [navigationSymbolFontFamily]="navigation symbol font family"
+ * <div awWizardCompletionStep [stepTitle]="title of the wizard step"
+ *    [navigationSymbol]="{ symbol: 'navigation symbol', fontFamily: '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">
  *    ...
@@ -23,15 +23,15 @@ import {WizardCompletionStep} from '../util/wizard-completion-step.interface';
  * ### Example
  *
  * ```html
- * <div awWizardCompletionStep stepTitle="Step 1" navigationSymbol="1">
+ * <div awWizardCompletionStep stepTitle="Step 1" [navigationSymbol]="{ symbol: '1' }">
  *    ...
  * </div>
  * ```
  *
  * With a navigation symbol from the `font-awesome` font:
  *
  * ```html
- * <div awWizardCompletionStep stepTitle="Step 1" navigationSymbol="&#xf1ba;" navigationSymbolFontFamily="FontAwesome">
+ * <div awWizardCompletionStep stepTitle="Step 1" [navigationSymbol]="{ symbol: '&#xf1ba;', fontFamily: 'FontAwesome' }">
  *    ...
  * </div>
  * ```

diff --git a/src/directives/wizard-step.directive.ts b/src/directives/wizard-step.directive.ts
@@ -9,7 +9,7 @@ import {WizardStep} from '../util/wizard-step.interface';
  * With `stepTitle` input:
  *
  * ```html
- * <div awWizardStep [stepTitle]="step title" [navigationSymbol]="symbol" [navigationSymbolFontFamily]="font-family"
+ * <div awWizardStep [stepTitle]="step title" [navigationSymbol]="{ symbol: 'symbol', fontFamily: 'font-family' }"
  *    [canExit]="deciding function" (stepEnter)="enter function" (stepExit)="exit function">
  *    ...
  * </div>
@@ -18,7 +18,7 @@ import {WizardStep} from '../util/wizard-step.interface';
  * With `awWizardStepTitle` directive:
  *
  * ```html
- * <div awWizardStep [navigationSymbol]="symbol" [navigationSymbolFontFamily]="font-family"
+ * <div awWizardStep [navigationSymbol]="{ symbol: 'symbol', fontFamily: 'font-family' }"
  *    [canExit]="deciding function" (stepEnter)="enter function" (stepExit)="exit function">
  *    <ng-template awWizardStepTitle>
  *        step title
@@ -32,15 +32,15 @@ import {WizardStep} from '../util/wizard-step.interface';
  * With `stepTitle` input:
  *
  * ```html
- * <div awWizardStep stepTitle="Address information" navigationSymbol="&#xf1ba;" navigationSymbolFontFamily="FontAwesome">
+ * <div awWizardStep stepTitle="Address information" [navigationSymbol]="{ symbol: '&#xf1ba;', fontFamily: 'FontAwesome' }">
  *    ...
  * </div>
  * ```
  *
  * With `awWizardStepTitle` directive:
  *
  * ```html
- * <div awWizardStep navigationSymbol="&#xf1ba;" navigationSymbolFontFamily="FontAwesome">
+ * <div awWizardStep [navigationSymbol]="{ symbol: '&#xf1ba;', fontFamily: 'FontAwesome' }">
  *    <ng-template awWizardStepTitle>
  *        Address information
  *    </ng-template>

diff --git a/src/util/index.ts b/src/util/index.ts
@@ -1,4 +1,5 @@
 export {MovingDirection} from './moving-direction.enum';
+export {NavigationSymbol} from './navigation-symbol.interface';
 export * from './step-id.interface';
 export * from './step-index.interface';
 export * from './step-offset.interface';

diff --git a/src/util/navigation-symbol.interface.ts b/src/util/navigation-symbol.interface.ts
@@ -0,0 +1,17 @@
+/**
+ * A navigation symbol belonging to a wizard step.
+ * A navigation symbol consists of the symbol itself and a font family
+ *
+ * @author Marc Arndt
+ */
+export interface NavigationSymbol {
+  /**
+   * The symbol to be used for a navigation step
+   */
+  symbol: string
+
+  /**
+   * The font family to be used for this navigation symbol
+   */
+  fontFamily?: string
+}
diff --git a/src/util/wizard-step.interface.ts b/src/util/wizard-step.interface.ts
@@ -2,6 +2,7 @@ import {MovingDirection} from './moving-direction.enum';
 import {WizardStepTitleDirective} from '../directives/wizard-step-title.directive';
 import {ContentChild, EventEmitter, HostBinding, Input, Output} from '@angular/core';
 import {isBoolean} from 'util';
+import {NavigationSymbol} from './navigation-symbol.interface';
 
 /**
  * Basic functionality every type of wizard step needs to provide
@@ -32,17 +33,9 @@ export abstract class WizardStep {
 
   /**
    * A symbol property, which contains an optional symbol for the step inside the navigation bar.
-   * If no navigation symbol is specified, an empty string should be used
    */
   @Input()
-  public navigationSymbol = '';
-
-  /**
-   * The font family belonging to the `navigationSymbol`.
-   * If no font family is specified, null should be used
-   */
-  @Input()
-  public navigationSymbolFontFamily: string;
+  public navigationSymbol: NavigationSymbol = { symbol: '' };
 
   /**
    * A boolean describing if the wizard step has been completed