fix rtl bugs

Author: mmalerba

Diff for: src/cdk/stepper/public_api.ts

@@ -11,9 +11,10 @@ import {CdkStepper, CdkStep} from './stepper';
 import {CommonModule} from '@angular/common';
 import {CdkStepLabel} from './step-label';
 import {CdkStepperNext, CdkStepperPrevious} from './stepper-button';
+import {BidiModule} from '@angular/cdk/bidi';
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [BidiModule, CommonModule],
   exports: [CdkStep, CdkStepper, CdkStepLabel, CdkStepperNext, CdkStepperPrevious],
   declarations: [CdkStep, CdkStepper, CdkStepLabel, CdkStepperNext, CdkStepperPrevious]
 })

Diff for: src/cdk/stepper/stepper.ts

@@ -21,12 +21,13 @@ import {
   ContentChild,
   ViewChild,
   TemplateRef,
-  ViewEncapsulation
+  ViewEncapsulation, Optional
 } from '@angular/core';
 import {LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE} from '@angular/cdk/keycodes';
 import {CdkStepLabel} from './step-label';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {AbstractControl} from '@angular/forms';
+import {Directionality} from '@angular/cdk/bidi';
 
 /** Used to generate unique ID for each stepper component. */
 let nextId = 0;
@@ -164,7 +165,7 @@ export class CdkStepper {
   /** Used to track unique ID for each stepper component. */
   _groupId: number;
 
-  constructor() {
+  constructor(@Optional() private _dir: Directionality) {
     this._groupId = nextId++;
   }
 
@@ -224,10 +225,18 @@ export class CdkStepper {
   _onKeydown(event: KeyboardEvent) {
     switch (event.keyCode) {
       case RIGHT_ARROW:
-        this._focusStep((this._focusIndex + 1) % this._steps.length);
+        if (this._dir && this._dir.value === 'rtl') {
+          this._focusStep((this._focusIndex + this._steps.length - 1) % this._steps.length);
+        } else {
+          this._focusStep((this._focusIndex + 1) % this._steps.length);
+        }
         break;
       case LEFT_ARROW:
-        this._focusStep((this._focusIndex + this._steps.length - 1) % this._steps.length);
+        if (this._dir && this._dir.value === 'rtl') {
+          this._focusStep((this._focusIndex + 1) % this._steps.length);
+        } else {
+          this._focusStep((this._focusIndex + this._steps.length - 1) % this._steps.length);
+        }
         break;
       case SPACE:
       case ENTER:

Diff for: src/lib/stepper/stepper.scss

@@ -43,6 +43,11 @@ $mat-stepper-line-gap: 8px !default;
   .mat-step-icon-not-touched {
     margin-right: $mat-stepper-line-gap;
     flex: none;
+
+    [dir="rtl"] & {
+      margin-right: 0;
+      margin-left: $mat-stepper-line-gap;
+    }
   }
 }
 
@@ -55,6 +60,11 @@ $mat-stepper-line-gap: 8px !default;
   .mat-step-icon,
   .mat-step-icon-not-touched {
     margin-right: $mat-vertical-stepper-content-margin - $mat-stepper-side-gap;
+
+    [dir="rtl"] & {
+      margin-right: 0;
+      margin-left: $mat-vertical-stepper-content-margin - $mat-stepper-side-gap;
+    }
   }
 }
 
@@ -75,6 +85,11 @@ $mat-stepper-line-gap: 8px !default;
   margin-left: $mat-vertical-stepper-content-margin;
   border: 0;
   position: relative;
+
+  [dir="rtl"] & {
+    margin-left: 0;
+    margin-right: $mat-vertical-stepper-content-margin;
+  }
 }
 
 .mat-stepper-vertical-line::before {
@@ -85,6 +100,11 @@ $mat-stepper-line-gap: 8px !default;
   left: 0;
   border-left-width: $mat-stepper-line-width;
   border-left-style: solid;
+
+  [dir="rtl"] & {
+    left: auto;
+    right: 0;
+  }
 }
 
 .mat-vertical-stepper-content {