Enable navigation bar reversal (#59)

- add a new input to the wizard and the navigation bar, which specifies the direction in which the steps should be layed out in the navigation bar
- add documentation for the new navBarDirection input to the README file

Author: madoar

README.md

@@ -83,6 +83,11 @@ The first three layouts are showing circles with or without a background, for ea
 The second two layouts `large-filled-symbols` and `large-empty-symbols` optionally add a symbol in the center of the circle, 
 for each step of your wizard, in the navigation bar, if such a symbol has been defined for the step.
 
+#### \[navBarDirection\]
+Normally the steps in the navigation bar are layed out from left to right or from top to bottom.
+In some cases, like with languages that are written from right to left, it may be required to change this direction to layout the steps from right to left.
+To layout the steps from right to left you can pass `right-to-left` to the `navBarDirection` input of the wizard component.
+
 #### \[navigationMode\]
 `ng2-archwizard` supports three different navigation modes:
 - **strict** navigation mode: 
@@ -119,6 +124,7 @@ Possible `<wizard>` parameters:
 | ---------------------- | ----------------------------------------------------------------------------------------------------- | ------------- |
 | [navBarLocation]       | `top` \| `bottom` \| `left` \| `right`                                                                | top           |
 | [navBarLayout]         | `small` \| `large-filled` \| `large-empty` \| `large-filled-symbols` \| `large-empty-symbols`         | small         |
+| [navBarDirection]      | `left-to-right` \| `right-to-left`                                                                    | left-to-right |
 | [navigationMode]       | `strict` \| `semi-strict` \| `free`                                                                   | strict        |
 | [defaultStepIndex]     | `number`                                                                                              | 0             |
 | [disableNavigationBar] | `boolean`                                                                                             | false         |

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

@@ -521,4 +521,16 @@ describe('WizardNavigationBarComponent', () => {
     expect(navigationLinks[1].nativeElement.innerText).toBe('STEPTITLE 2');
     expect(navigationLinks[2].nativeElement.innerText).toBe('STEPTITLE 3');
   });
+
+  it('should show the correct reversed step titles', () => {
+    wizardTest.wizard.navBarDirection = 'right-to-left';
+    wizardTestFixture.detectChanges();
+
+    let navigationLinks = wizardTestFixture.debugElement.queryAll(By.css('wizard-navigation-bar ul li a'));
+
+    expect(navigationLinks.length).toBe(3);
+    expect(navigationLinks[0].nativeElement.innerText).toBe('STEPTITLE 3');
+    expect(navigationLinks[1].nativeElement.innerText).toBe('STEPTITLE 2');
+    expect(navigationLinks[2].nativeElement.innerText).toBe('STEPTITLE 1');
+  });
 });

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

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {WizardStep} from '../util/wizard-step.interface';
 import {WizardState} from '../navigation/wizard-state.model';
 import {NavigationMode} from '../navigation/navigation-mode.interface';
@@ -22,6 +22,13 @@ import {NavigationMode} from '../navigation/navigation-mode.interface';
   styleUrls: ['wizard-navigation-bar.component.horizontal.less', 'wizard-navigation-bar.component.vertical.less']
 })
 export class WizardNavigationBarComponent {
+  /**
+   * The direction in which the wizard steps should be shown in the navigation bar.
+   * This value can be either `left-to-right` or `right-to-left`
+   */
+  @Input()
+  public direction = 'left-to-right';
+
   /**
    * The navigation mode
    *
@@ -45,7 +52,13 @@ export class WizardNavigationBarComponent {
    * @returns {Array<WizardStep>} An array containing all [[WizardStep]]s
    */
   get wizardSteps(): Array<WizardStep> {
-    return this.wizardState.wizardSteps;
+    switch (this.direction) {
+      case 'right-to-left':
+        return this.wizardState.wizardSteps.reverse();
+      case 'left-to-right':
+      default:
+        return this.wizardState.wizardSteps;
+    }
   }
 
   /**

src/components/wizard.component.html

@@ -1,4 +1,5 @@
 <wizard-navigation-bar
+  [direction]="navBarDirection"
   *ngIf="navBarLocation == 'top' || navBarLocation == 'left'"
   [ngClass]="{
     vertical: navBarLocation == 'left',
@@ -20,6 +21,7 @@
 </div>
 
 <wizard-navigation-bar
+  [direction]="navBarDirection"
   *ngIf="navBarLocation == 'bottom' || navBarLocation == 'right'"
   [ngClass]="{
     vertical: navBarLocation == 'right',

src/components/wizard.component.ts

@@ -70,7 +70,17 @@ export class WizardComponent implements AfterContentInit {
   public navBarLayout = 'small';
 
   /**
-   * The navigation mode used for transitioning between different steps
+   * The direction in which the steps inside the navigation bar should be shown.
+   * The direction can be either `left-to-right` or `right-to-left`
+   *
+   * @type {string}
+   */
+  @Input()
+  public navBarDirection = 'left-to-right';
+
+  /**
+   * The navigation mode used for transitioning between different steps.
+   * The navigation mode can be either `strict`, `semi-strict` or `free`
    *
    * @type {string}
    */
@@ -126,6 +136,7 @@ export class WizardComponent implements AfterContentInit {
 
   /**
    * Constructor
+   * @param {WizardState} model The model for this wizard component
    */
   constructor(public model: WizardState) {
   }