Merge branch 'master' into tabs-template

Author: amcdnl

CODING_STANDARDS.md

@@ -43,6 +43,8 @@ use `//` style comments for everything else (explanations, background info, etc.
 
 In SCSS code, always use `//` style comments.
 
+In HTML code, use `<!-- ... -->` comments, which will be stripped when packaging a build.
+
 #### Prefer more focused, granular components vs. complex, configurable components.
 
 For example, rather than doing this:
@@ -198,6 +200,13 @@ Boolean properties and return values should use "Whether..." as opposed to "True
   disabled: boolean = false;
 ```
 
+#### Try-Catch
+
+Avoid `try-catch` blocks, instead preferring to prevent an error from being thrown in the first
+place. When impossible to avoid, the `try-catch` block must include a comment that explains the
+specific error being caught and why it cannot be prevented.
+
+
 #### Naming
 
 ##### General
@@ -221,7 +230,8 @@ Avoid suffixing a class with "Service", as it communicates nothing about what th
 think of the class name as a person's job title.
 
 Classes that correspond to a directive with an `md-` prefix should also be prefixed with `Md`.
-CDK classes should not have a prefix.
+CDK classes should only have a `Cdk` prefix when the class is a directive with a `cdk` selector
+prefix.
 
 ##### Methods
 The name of a method should capture the action that is performed *by* that method rather than
@@ -242,7 +252,8 @@ activateRipple() {
 #### Inheritance
 
 Avoid using inheritance to apply reusable behaviors to multiple components. This limits how many
-behaviors can be composed.
+behaviors can be composed. Instead, [TypeScript mixins][ts-mixins] can be used to compose multiple
+common behaviors into a single component.
 
 ### Angular
 
@@ -346,3 +357,5 @@ When it is not super obvious, include a brief description of what a class repres
 // Portion of the floating panel that sits, invisibly, on top of the input.
 .mat-datepicker-input-mask { }
 ```
+
+[ts-mixins]: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-2.html#support-for-mix-in-classes

e2e/components/stepper-e2e.spec.ts

@@ -0,0 +1,84 @@
+import {
+  browser, by, element, ElementFinder, ExpectedConditions
+} from 'protractor';
+import {expectFocusOn, expectToExist} from '../util/asserts';
+import {pressKeys} from '../util/actions';
+import {Key} from 'selenium-webdriver';
+import {screenshot} from '../screenshot';
+
+describe('stepper', () => {
+  beforeEach(() => browser.get('/stepper'));
+
+  it('should render a stepper', () => {
+    expectToExist('md-horizontal-stepper');
+    screenshot('md-horizontal-stepper');
+  });
+
+  describe('basic behavior', () => {
+    it('should change steps correctly when stepper button is clicked', async () => {
+      const previousButton = element.all(by.buttonText('Back'));
+      const nextButton = element.all(by.buttonText('Next'));
+
+      expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
+          .toBe('1\nFill out your name');
+
+      screenshot('start');
+      nextButton.get(0).click();
+
+      expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
+          .toBe('2\nFill out your address');
+
+      await browser.wait(ExpectedConditions.not(
+          ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
+      screenshot('click next');
+
+      previousButton.get(0).click();
+
+      expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
+          .toBe('1\nFill out your name');
+
+      await browser.wait(ExpectedConditions.not(
+          ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
+      screenshot('click back');
+    });
+
+    it('should change focus with keyboard interaction', () => {
+      let stepHeaders = element.all(by.css('md-step-header'));
+      stepHeaders.get(0).click();
+
+      expectFocusOn(stepHeaders.get(0));
+
+      pressKeys(Key.RIGHT);
+      expectFocusOn(stepHeaders.get(1));
+
+      pressKeys(Key.RIGHT);
+      expectFocusOn(stepHeaders.get(2));
+
+      pressKeys(Key.RIGHT);
+      expectFocusOn(stepHeaders.get(0));
+
+      pressKeys(Key.LEFT);
+      expectFocusOn(stepHeaders.get(2));
+
+      pressKeys(Key.SPACE, Key.ENTER);
+      expectFocusOn(stepHeaders.get(2));
+    });
+  });
+
+  describe('linear stepper', () => {
+    let linearButton: ElementFinder;
+
+    beforeEach(() => {
+      linearButton = element(by.id('toggle-linear'));
+      linearButton.click();
+    });
+
+    it('should not move to next step when stepper button is clicked', () => {
+      let nextButton = element.all(by.buttonText('Next'));
+      nextButton.get(0).click();
+
+      expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
+          .toBe('1\nFill out your name');
+    });
+  });
+});

src/cdk/a11y/focus-key-manager.md

@@ -0,0 +1,2 @@
+### FocusKeyManager
+`ListKeyManager` manages the focus of an item based on keyboard interaction.

src/cdk/bidi/bidi.md

@@ -6,16 +6,25 @@ text direction (RTL or LTR);
 #### Example
 ```ts
 @Component({ ... }) 
-export class MyWidget {
+export class MyWidget implements OnDestroy {
+
+  /** Whether the widget is in RTL mode or not. */
   private isRtl: boolean;
 
+  /** Subscription to the Directionality change EventEmitter. */
+  private _dirChangeSubscription = Subscription.EMPTY;  
+  
   constructor(dir: Directionality) {
     this.isRtl = dir.value === 'rtl';
 
-    dir.change.subscribe(() => {
+    _dirChangeSubscription = dir.change.subscribe(() => {
       this.flipDirection();
     });
   }
+  
+  ngOnDestroy() {
+    this._dirChangeSubscription.unsubscribe();
+  }
 }  
 ```
 

src/cdk/coercion/coercion.md

@@ -0,0 +1,3 @@
+### Coercion
+
+Utility functions for coercing `@Input`s into specific types.

src/cdk/collections/collections.md

@@ -0,0 +1,3 @@
+### Collections
+
+A set of utilities for managing collections.

src/cdk/keycodes/keycodes.md

@@ -0,0 +1,26 @@
+### KeyCodes
+ 
+Commonly used keycode constants.
+
+#### Example
+```ts
+import {Directive} from '@angular/core';
+import {UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW} from '@angular/cdk/keycodes';
+
+@Directive({
+  selector: '[count-arrows]'
+  host: {
+    (keypress): 'handleKeyPress($event)'
+  }
+})
+export class ArrowCounterDirective {
+  arrowPressCount = 0;
+
+  handleKeyPress(event: KeyboardEvent) {
+    if ([UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW].includes(event.keyCode)) {
+      this.arrowPresscount++;
+    }
+  }
+}
+```
+

src/cdk/observers/observers.md

@@ -0,0 +1,12 @@
+### Observers
+
+A directive for observing when the content of the host element changes. An event is emitted when a
+mutation to the content is observed.
+
+#### Example
+
+```html
+<div class="projected-content-wrapper" (cdkObserveContent)="projectContentChanged()">
+  <ng-content></ng-content>
+</div>
+```

src/cdk/overlay/overlay.md

@@ -0,0 +1,3 @@
+### Overlay
+
+A service used to manage overlays.

src/cdk/platform/platform.md

@@ -0,0 +1,3 @@
+### Platform
+
+A service for determing the current platform.

src/cdk/rxjs/rxjs.md

@@ -0,0 +1,27 @@
+### RxJS Usage
+When dealing with RxJS operators it is important to be aware that using the "patch" imports will
+pollute the global Observable object (e.g. `import "rxjs/add/operator/map"`).  When creating a
+component library, it is highly recommended to import the operator functions directly (e.g.
+`import "rxjs/operator/map"`):
+
+```ts
+// NO
+import 'rxjs/add/operator/map';
+someObservable.map(...).subscribe(...);
+
+// YES
+import {map} from 'rxjs/operator/map';
+map.call(someObservable, ...).subscribe(...);
+```
+
+#### RxChain
+Because this approach can be inflexible when dealing with long chains of operators. You should use
+the `RxChain` class to help with it:
+
+```ts
+// Before
+someObservable.filter(...).map(...).do(...);
+
+// After
+RxChain.from(someObservable).call(filter, ...).call(map, ...).subscribe(...);
+```

src/cdk/scrolling/scrolling.md

@@ -0,0 +1,3 @@
+### Scrolling
+
+Some things to help with scrollling.

src/cdk/scrolling/viewport.md

@@ -0,0 +1,3 @@
+### Viewport
+
+A utility for getting the bounds of the browser viewport.

src/cdk/stepper/stepper.ts

@@ -30,7 +30,7 @@ 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';
+import {Direction, Directionality} from '@angular/cdk/bidi';
 
 /** Used to generate unique ID for each stepper component. */
 let nextId = 0;
@@ -151,8 +151,7 @@ export class CdkStepper {
   @Input()
   get selected() { return this._steps[this.selectedIndex]; }
   set selected(step: CdkStep) {
-    let index = this._steps.toArray().indexOf(step);
-    this.selectedIndex = index;
+    this.selectedIndex = this._steps.toArray().indexOf(step);
   }
 
   /** Event emitted when the selected step has changed. */
@@ -192,12 +191,11 @@ export class CdkStepper {
   _getAnimationDirection(index: number): StepContentPositionState {
     const position = index - this._selectedIndex;
     if (position < 0) {
-      return 'previous';
+      return this._layoutDirection() === 'rtl' ? 'next' : 'previous';
     } else if (position > 0) {
-      return 'next';
-    } else {
-      return 'current';
+      return this._layoutDirection() === 'rtl' ? 'previous' : 'next';
     }
+    return 'current';
   }
 
   /** Returns the type of icon to be displayed. */
@@ -224,17 +222,17 @@ export class CdkStepper {
   _onKeydown(event: KeyboardEvent) {
     switch (event.keyCode) {
       case RIGHT_ARROW:
-        if (this._dir && this._dir.value === 'rtl') {
-          this._focusStep((this._focusIndex + this._steps.length - 1) % this._steps.length);
+        if (this._layoutDirection() === 'rtl') {
+          this._focusPreviousStep();
         } else {
-          this._focusStep((this._focusIndex + 1) % this._steps.length);
+          this._focusNextStep();
         }
         break;
       case LEFT_ARROW:
-        if (this._dir && this._dir.value === 'rtl') {
-          this._focusStep((this._focusIndex + 1) % this._steps.length);
+        if (this._layoutDirection() === 'rtl') {
+          this._focusNextStep();
         } else {
-          this._focusStep((this._focusIndex + this._steps.length - 1) % this._steps.length);
+          this._focusPreviousStep();
         }
         break;
       case SPACE:
@@ -248,17 +246,28 @@ export class CdkStepper {
     event.preventDefault();
   }
 
+  private _focusNextStep() {
+    this._focusStep((this._focusIndex + 1) % this._steps.length);
+  }
+
+  private _focusPreviousStep() {
+    this._focusStep((this._focusIndex + this._steps.length - 1) % this._steps.length);
+  }
+
   private _focusStep(index: number) {
     this._focusIndex = index;
     this._stepHeader.toArray()[this._focusIndex].nativeElement.focus();
   }
 
   private _anyControlsInvalid(index: number): boolean {
-    const stepsArray = this._steps.toArray();
-    stepsArray[this._selectedIndex].interacted = true;
-    if (this._linear) {
-      return stepsArray.slice(0, index).some(step => step.stepControl.invalid);
+    this._steps.toArray()[this._selectedIndex].interacted = true;
+    if (this._linear && index >= 0) {
+      return this._steps.toArray().slice(0, index).some(step => step.stepControl.invalid);
     }
     return false;
   }
+
+  private _layoutDirection(): Direction {
+    return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
+  }
 }

src/cdk/table/row.ts

@@ -141,6 +141,7 @@ export class CdkCellOutlet {
 
 /** Header template container that contains the cell outlet. Adds the right class and role. */
 @Component({
+  moduleId: module.id,
   selector: 'cdk-header-row',
   template: CDK_ROW_TEMPLATE,
   host: {
@@ -154,6 +155,7 @@ export class CdkHeaderRow { }
 
 /** Data row template container that contains the cell outlet. Adds the right class and role. */
 @Component({
+  moduleId: module.id,
   selector: 'cdk-row',
   template: CDK_ROW_TEMPLATE,
   host: {

src/cdk/table/table.ts

@@ -69,6 +69,7 @@ export const CDK_TABLE_TEMPLATE = `
  * a header row and data rows. Updates the rows when new data is provided by the data source.
  */
 @Component({
+  moduleId: module.id,
   selector: 'cdk-table',
   template: CDK_TABLE_TEMPLATE,
   host: {

src/cdk/table/tsconfig-build.json

@@ -1,7 +1,8 @@
 {
   "extends": "../tsconfig-build",
   "files": [
-    "public_api.ts"
+    "public_api.ts",
+    "../typings.d.ts"
   ],
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,