Merge branch 'master' into tobiasschweizer/calendar-header-comp

# Conflicts:
#	src/lib/datepicker/datepicker-module.ts

Author: Tobias Schweizer

.github/ISSUE_TEMPLATE.md

@@ -8,9 +8,8 @@
 
 
 #### What are the steps to reproduce?
-Providing a StackBlitz/Plunker (or similar) is the *best* way to get the team to see your issue. <br/>
-Plunker starter (using on `@master`): https://goo.gl/uDmqyY<br/>
-StackBlitz starter (using latest `npm` release): https://goo.gl/wwnhMV<br/>
+Providing a StackBlitz reproduction is the *best* way to share your issue. <br/>
+StackBlitz starter: https://goo.gl/wwnhMV<br/>
 
 
 #### What is the use-case or motivation for changing an existing behavior?

.gitignore

@@ -6,6 +6,9 @@
 /deploy
 /screenshots
 
+# Example module file will be auto-generated.
+/src/material-examples/example-module.ts
+
 # dependencies
 node_modules
 /bower_components

CHANGELOG.md

@@ -63,8 +63,13 @@ You can use the `mat-color` function to extract a specific color from a palette.
 @import 'src/unicorn-app-theme.scss';
 
 // Use mat-color to extract individual colors from a palette as necessary.
+// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured
+// hues (default, lighter, darker), or any of the aforementioned prefixed with "-contrast".
+// For example a hue of "darker-contrast" gives a light color to contrast with a "darker" hue
+// Available color palettes: https://www.google.com/design/spec/style/color.html
 .candy-carousel {
   background-color: mat-color($candy-app-primary);
   border-color: mat-color($candy-app-accent, A400);
+  color: mat-color($candy-app-primary, darker);
 }
 ```

guides/theming-your-components.md

@@ -75,7 +75,7 @@ A typical theme file will look something like this:
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue.
+// hue. Available color palettes: https://www.google.com/design/spec/style/color.html
 $candy-app-primary: mat-palette($mat-indigo);
 $candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
 

guides/theming.md

@@ -20,7 +20,7 @@
     "docs": "gulp docs",
     "api": "gulp api-docs"
   },
-  "version": "5.1.0",
+  "version": "5.2.0-beta.0",
   "license": "MIT",
   "engines": {
     "node": ">= 5.4.1"
@@ -121,7 +121,7 @@
     "stylelint": "^8.4.0",
     "ts-node": "^3.0.4",
     "tsconfig-paths": "^2.3.0",
-    "tslint": "^5.8.0",
+    "tslint": "^5.9.1",
     "tsutils": "^2.6.0",
     "typescript": "~2.5.3",
     "uglify-js": "^2.8.14",

package-lock.json

@@ -5,7 +5,6 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-
 import {Platform, supportsPassiveEventListeners} from '@angular/cdk/platform';
 import {
   Directive,
@@ -56,7 +55,13 @@ export class FocusMonitor implements OnDestroy {
   private _lastTouchTarget: EventTarget | null;
 
   /** The timeout id of the touch timeout, used to cancel timeout later. */
-  private _touchTimeout: number;
+  private _touchTimeoutId: number;
+
+  /** The timeout id of the window focus timeout. */
+  private _windowFocusTimeoutId: number;
+
+  /** The timeout id of the origin clearing timeout. */
+  private _originTimeoutId: number;
 
   /** Map of elements being monitored to their info. */
   private _elementInfo = new Map<HTMLElement, MonitoredElementInfo>();
@@ -187,18 +192,18 @@ export class FocusMonitor implements OnDestroy {
     // we can't rely on the trick used above (setting timeout of 0ms). Instead we wait 650ms to
     // see if a focus happens.
     let documentTouchstartListener = (event: TouchEvent) => {
-      if (this._touchTimeout != null) {
-        clearTimeout(this._touchTimeout);
+      if (this._touchTimeoutId != null) {
+        clearTimeout(this._touchTimeoutId);
       }
       this._lastTouchTarget = event.target;
-      this._touchTimeout = setTimeout(() => this._lastTouchTarget = null, TOUCH_BUFFER_MS);
+      this._touchTimeoutId = setTimeout(() => this._lastTouchTarget = null, TOUCH_BUFFER_MS);
     };
 
     // Make a note of when the window regains focus, so we can restore the origin info for the
     // focused element.
     let windowFocusListener = () => {
       this._windowFocused = true;
-      setTimeout(() => this._windowFocused = false, 0);
+      this._windowFocusTimeoutId = setTimeout(() => this._windowFocused = false, 0);
     };
 
     // Note: we listen to events in the capture phase so we can detect them even if the user stops
@@ -217,6 +222,11 @@ export class FocusMonitor implements OnDestroy {
       document.removeEventListener('touchstart', documentTouchstartListener,
           supportsPassiveEventListeners() ? ({passive: true, capture: true} as any) : true);
       window.removeEventListener('focus', windowFocusListener);
+
+      // Clear timeouts for all potentially pending timeouts to prevent the leaks.
+      clearTimeout(this._windowFocusTimeoutId);
+      clearTimeout(this._touchTimeoutId);
+      clearTimeout(this._originTimeoutId);
     };
   }
 
@@ -251,7 +261,7 @@ export class FocusMonitor implements OnDestroy {
    */
   private _setOriginForCurrentEventQueue(origin: FocusOrigin): void {
     this._origin = origin;
-    setTimeout(() => this._origin = null, 0);
+    this._originTimeoutId = setTimeout(() => this._origin = null, 0);
   }
 
   /**

package.json

@@ -27,7 +27,7 @@ import {DOCUMENT} from '@angular/common';
  *
  * This class currently uses a relatively simple approach to focus trapping.
  * It assumes that the tab order is the same as DOM order, which is not necessarily true.
- * Things like tabIndex > 0, flex `order`, and shadow roots can cause to two to misalign.
+ * Things like `tabIndex > 0`, flex `order`, and shadow roots can cause to two to misalign.
  */
 export class FocusTrap {
   private _startAnchor: HTMLElement | null;

src/cdk/a11y/focus-monitor/focus-monitor.ts

@@ -346,9 +346,12 @@ describe('InteractivityChecker', () => {
         iframe.setAttribute('tabindex', '-1');
         iframe.contentDocument.body.appendChild(button);
 
-        Object.defineProperty(iframe.contentWindow, 'frameElement', {
-          get: () => { throw 'Access Denied!'; }
-        });
+        // Some browsers explicitly prevent overwriting of properties on a `Window` object.
+        if (!platform.SAFARI) {
+          Object.defineProperty(iframe.contentWindow, 'frameElement', {
+            get: () => { throw 'Access Denied!'; }
+          });
+        }
 
         expect(() => checker.isTabbable(button)).not.toThrow();
       });

src/cdk/a11y/focus-trap/focus-trap.ts

@@ -172,7 +172,7 @@ function isNativeFormElement(element: Node) {
       nodeName === 'textarea';
 }
 
-/** Gets whether an element is an <input type="hidden">. */
+/** Gets whether an element is an `<input type="hidden">`. */
 function isHiddenInput(element: HTMLElement): boolean {
   return isInputElement(element) && element.type == 'hidden';
 }

src/cdk/a11y/interactivity-checker/interactivity-checker.spec.ts

@@ -8,6 +8,12 @@
 // PascalCase is being used as Breakpoints is used like an enum.
 // tslint:disable-next-line:variable-name
 export const Breakpoints = {
+  XSmall: '(max-width: 599px)',
+  Small: '(min-width: 600px) and (max-width: 959px)',
+  Medium: '(min-width: 960px) and (max-width: 1279px)',
+  Large: '(min-width: 1280px) and (max-width: 1919px)',
+  XLarge: '(min-width: 1920px)',
+
   Handset: '(max-width: 599px) and (orientation: portrait), ' +
            '(max-width: 959px) and (orientation: landscape)',
   Tablet: '(min-width: 600px) and (max-width: 839px) and (orientation: portrait), ' +

src/cdk/a11y/interactivity-checker/interactivity-checker.ts

@@ -30,7 +30,7 @@ export function supportsPassiveEventListeners(): boolean {
 /** Cached result Set of input types support by the current browser. */
 let supportedInputTypes: Set<string>;
 
-/** Types of <input> that *might* be supported. */
+/** Types of `<input>` that *might* be supported. */
 const candidateInputTypes = [
   // `color` must come first. Chrome 56 shows a warning if we change the type to `color` after
   // first changing it to something else:

src/cdk/layout/breakpoints.ts

@@ -48,7 +48,7 @@ export type CdkPortalOutletAttachedRef = ComponentRef<any> | EmbeddedViewRef<any
  * directly attached to it, enabling declarative use.
  *
  * Usage:
- * <ng-template [cdkPortalOutlet]="greeting"></ng-template>
+ * `<ng-template [cdkPortalOutlet]="greeting"></ng-template>`
  */
 @Directive({
   selector: '[cdkPortalOutlet], [cdkPortalHost], [portalHost]',

src/cdk/platform/features.ts

@@ -180,6 +180,22 @@ describe('Scroll Dispatcher', () => {
           .toBe(4, 'Expected scrollable count to stay the same');
     });
 
+    it('should remove the global subscription on destroy', () => {
+      expect(scroll._globalSubscription).toBeNull('Expected no global listeners on init.');
+
+      const subscription = scroll.scrolled(0).subscribe(() => {});
+
+      expect(scroll._globalSubscription).toBeTruthy(
+          'Expected global listeners after a subscription has been added.');
+
+      scroll.ngOnDestroy();
+
+      expect(scroll._globalSubscription).toBeNull(
+          'Expected global listeners to have been removed after the subscription has stopped.');
+
+      subscription.unsubscribe();
+    });
+
   });
 });
 

src/cdk/portal/portal-directives.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ElementRef, Injectable, NgZone, Optional, SkipSelf} from '@angular/core';
+import {ElementRef, Injectable, NgZone, Optional, SkipSelf, OnDestroy} from '@angular/core';
 import {Platform} from '@angular/cdk/platform';
 import {Subject} from 'rxjs/Subject';
 import {Subscription} from 'rxjs/Subscription';
@@ -26,7 +26,7 @@ export const DEFAULT_SCROLL_TIME = 20;
  * Scrollable references emit a scrolled event.
  */
 @Injectable()
-export class ScrollDispatcher {
+export class ScrollDispatcher implements OnDestroy {
   constructor(private _ngZone: NgZone, private _platform: Platform) { }
 
   /** Subject for notifying that a registered scrollable reference element has been scrolled. */
@@ -97,14 +97,18 @@ export class ScrollDispatcher {
         subscription.unsubscribe();
         this._scrolledCount--;
 
-        if (this._globalSubscription && !this._scrolledCount) {
-          this._globalSubscription.unsubscribe();
-          this._globalSubscription = null;
+        if (!this._scrolledCount) {
+          this._removeGlobalListener();
         }
       };
     }) : observableOf<void>();
   }
 
+  ngOnDestroy() {
+    this._removeGlobalListener();
+    this.scrollContainers.forEach((_, container) => this.deregister(container));
+  }
+
   /**
    * Returns an observable that emits whenever any of the
    * scrollable ancestors of an element are scrolled.
@@ -146,12 +150,20 @@ export class ScrollDispatcher {
     return false;
   }
 
-  /** Sets up the global scroll and resize listeners. */
+  /** Sets up the global scroll listeners. */
   private _addGlobalListener() {
     this._globalSubscription = this._ngZone.runOutsideAngular(() => {
       return fromEvent(window.document, 'scroll').subscribe(() => this._scrolled.next());
     });
   }
+
+  /** Cleans up the global scroll listener. */
+  private _removeGlobalListener() {
+    if (this._globalSubscription) {
+      this._globalSubscription.unsubscribe();
+      this._globalSubscription = null;
+    }
+  }
 }
 
 /** @docs-private */

src/cdk/scrolling/scroll-dispatcher.spec.ts

@@ -126,7 +126,10 @@ export class CdkStep implements OnChanges {
   /** Resets the step to its initial state. Note that this includes resetting form data. */
   reset(): void {
     this.interacted = false;
-    this.completed = false;
+
+    if (this._customCompleted != null) {
+      this._customCompleted = false;
+    }
 
     if (this.stepControl) {
       this.stepControl.reset();
@@ -165,6 +168,11 @@ export class CdkStepper implements OnDestroy {
   get selectedIndex() { return this._selectedIndex; }
   set selectedIndex(index: number) {
     if (this._steps) {
+      // Ensure that the index can't be out of bounds.
+      if (index < 0 || index > this._steps.length - 1) {
+        throw Error('cdkStepper: Cannot assign out-of-bounds value to `selectedIndex`.');
+      }
+
       if (this._anyControlsInvalidOrPending(index) || index < this._selectedIndex &&
           !this._steps.toArray()[index].editable) {
         // remove focus from clicked step header if the step is not able to be selected
@@ -177,7 +185,7 @@ export class CdkStepper implements OnDestroy {
       this._selectedIndex = this._focusIndex = index;
     }
   }
-  private _selectedIndex: number = 0;
+  private _selectedIndex = 0;
 
   /** The step that is selected. */
   @Input()

src/cdk/scrolling/scroll-dispatcher.ts

@@ -31,7 +31,7 @@ <h4 mat-line>{{message.from}}</h4>
           <span>{{message.subject}} -- </span>
           <span class="demo-secondary-text">{{message.message}}</span>
         </p>
-        <mat-divider [inset]="true" *ngIf="!last"></mat-divider>
+        <mat-divider inset *ngIf="!last"></mat-divider>
       </mat-list-item>
       <mat-divider></mat-divider>
       <mat-list-item *ngFor="let message of messages">
@@ -87,10 +87,11 @@ <h2>Nav lists</h2>
       </mat-list-item>
     </mat-nav-list>
     <mat-nav-list>
-      <a mat-list-item *ngFor="let link of links" href="http://www.google.com">
+      <a mat-list-item *ngFor="let link of links; last as last" href="http://www.google.com">
         <mat-icon mat-list-icon>folder</mat-icon>
         <span mat-line>{{ link.name }}</span>
         <span mat-line class="demo-secondary-text"> Description </span>
+        <mat-divider inset *ngIf="!last"></mat-divider>
       </a>
     </mat-nav-list>
     <mat-nav-list dense>

src/cdk/stepper/stepper.ts

@@ -172,6 +172,24 @@ <h3>MatTable Example</h3>
   </mat-paginator>
 </div>
 
+<h3>MatTable with First/Last Buttons Example</h3>
+
+<div class="demo-table-container demo-mat-table-example mat-elevation-z4">
+
+  <table-header-demo>
+  </table-header-demo>
+
+  <h4 class="paginator-output">{{paginatorOutput | json}}</h4>
+
+  <mat-paginator #paginator
+                [length]="_peopleDatabase.data.length"
+                [pageSize]="10"
+                [pageSizeOptions]="[5, 10, 25, 100]"
+                showFirstLastButtons
+                (page)="handlePaginator($event)">
+  </mat-paginator>
+</div>
+
 <mat-card class="demo-table-card">
   <h3> MatTable Using 'When' Rows for Interactive Details</h3>
 
@@ -235,7 +253,8 @@ <h3>MatTable With MatTableDataSource Example</h3>
     selected
   </div>
 
-  <mat-table [dataSource]="matTableDataSource" [trackBy]="userTrackBy" matSort
+  <mat-table [dataSource]="matTableDataSource" [trackBy]="userTrackBy"
+             matSort matSortActive="progress" matSortDirection="asc"
              #sortForDataSource="matSort">
 
     <!-- Checkbox Column -->

guides/cdk-table.md renamed to src/cdk/table/table.md

@@ -141,3 +141,7 @@
     background: #f5f5f5;
   }
 }
+
+.paginator-output {
+  margin-left: 20px;
+}