angular · Feb 4, 2019 · Feb 4, 2019 · Feb 4, 2019 · Feb 4, 2019 · Feb 4, 2019
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -197,7 +197,7 @@
 /.circleci/**                                      @jelbourn
 /scripts/**                                        @devversion @jelbourn
 /test/**                                           @devversion @jelbourn
-/tools/**/!(*.d.ts)                                @devversion @jelbourn
+/tools/**                                          @devversion @jelbourn
 
 # Public API golden files
 /tools/public_api_guard/cdk/a11y.d.ts              @jelbourn @devversion

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,25 @@
+## 7.3.1 "liquidcrystal-sandwich" (2019-02-04)
+
+
+### Bug Fixes
+
+* **button:** not updating DOM node name if group name changes ([#14963](https://github.com/angular/material2/issues/14963)) ([37732cb](https://github.com/angular/material2/commit/37732cb))
+* **cdk-stepper:** coercing selectedIndex value to a Number ([#14817](https://github.com/angular/material2/issues/14817)) ([b64c08d](https://github.com/angular/material2/commit/b64c08d))
+* **checkbox:** not marked as touched immediately on blur with OnPush change detection ([#15001](https://github.com/angular/material2/issues/15001)) ([916c532](https://github.com/angular/material2/commit/916c532)), closes [#14980](https://github.com/angular/material2/issues/14980)
+* **chips:** newly-added chips not being disabled when added to a disable list ([#14976](https://github.com/angular/material2/issues/14976)) ([c23512a](https://github.com/angular/material2/commit/c23512a))
+* **examples:** fix form-field custom control `disabled` input ([#14957](https://github.com/angular/material2/issues/14957)) ([ce3926d](https://github.com/angular/material2/commit/ce3926d)), closes [/github.com/angular/angular/blob/e2c98fbe11272295c3827b0e54f859d283cd32bf/packages/forms/src/directives/reactive_errors.ts#L64](https://github.com//github.com/angular/angular/blob/e2c98fbe11272295c3827b0e54f859d283cd32bf/packages/forms/src/directives/reactive_errors.ts/issues/L64)
+* **list:** selection list not picking up indirect descendants ([#15003](https://github.com/angular/material2/issues/15003)) ([6a07d0d](https://github.com/angular/material2/commit/6a07d0d)), closes [#15000](https://github.com/angular/material2/issues/15000)
+* **MatPseudoCheckbox:** fix checkmark pseudo-element box-sizing ([#14971](https://github.com/angular/material2/issues/14971)) ([ba6b405](https://github.com/angular/material2/commit/ba6b405))
+* **overlay:** unnecessarily pushing overlay if it is exactly as wide as the viewport ([#14975](https://github.com/angular/material2/issues/14975)) ([f4b4e61](https://github.com/angular/material2/commit/f4b4e61)), closes [#14968](https://github.com/angular/material2/issues/14968)
+* **radio:** not updating DOM node name if group name changes ([#14950](https://github.com/angular/material2/issues/14950)) ([4d5c5d5](https://github.com/angular/material2/commit/4d5c5d5))
+* **radio:** unable to click to select button if text is marked ([#14967](https://github.com/angular/material2/issues/14967)) ([81380d2](https://github.com/angular/material2/commit/81380d2)), closes [#14753](https://github.com/angular/material2/issues/14753)
+* **slider:** focus ring showing when ancestor has focus monitoring ([#14960](https://github.com/angular/material2/issues/14960)) ([2ec9dff](https://github.com/angular/material2/commit/2ec9dff)), closes [#14958](https://github.com/angular/material2/issues/14958)
+* **table:** allow for a caption to be projected ([#14965](https://github.com/angular/material2/issues/14965)) ([a8a6617](https://github.com/angular/material2/commit/a8a6617)), closes [#14948](https://github.com/angular/material2/issues/14948)
+* **table:** Clarify unknown table column error ([#14947](https://github.com/angular/material2/issues/14947)) ([2782273](https://github.com/angular/material2/commit/2782273))
+* **tree,scrolling:** don't require user DataSource to extend DataSource ([#14966](https://github.com/angular/material2/issues/14966)) ([0f9926a](https://github.com/angular/material2/commit/0f9926a))
+
+
+
 # 7.3.0 "pyrite-pixie" (2019-01-28)
 
 

diff --git a/WORKSPACE b/WORKSPACE
@@ -5,24 +5,24 @@ load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
 # Add NodeJS rules (explicitly used for sass bundle rules)
 http_archive(
   name = "build_bazel_rules_nodejs",
-  url = "https://github.com/bazelbuild/rules_nodejs/archive/0.16.4.zip",
-  strip_prefix = "rules_nodejs-0.16.4",
+  url = "https://github.com/bazelbuild/rules_nodejs/archive/0.16.5.zip",
+  strip_prefix = "rules_nodejs-0.16.5",
 )
 
 # Add TypeScript rules
 http_archive(
   name = "build_bazel_rules_typescript",
   # Explicitly depend on https://github.com/bazelbuild/rules_typescript/pull/327 which fixes the devserver
   # for windows. Once this has been reviewed and merged, we can switch back to a normal release.
-  url = "https://github.com/bazelbuild/rules_typescript/archive/1bb017e2f9c58f96bac8ddda2ed4a170282bc58e.zip",
-  strip_prefix = "rules_typescript-1bb017e2f9c58f96bac8ddda2ed4a170282bc58e",
+  url = "https://github.com/bazelbuild/rules_typescript/archive/2e761b53ca465a140c4a265cb80887e7bcf61eb9.zip",
+  strip_prefix = "rules_typescript-2e761b53ca465a140c4a265cb80887e7bcf61eb9",
 )
 
 # Add Angular source and Bazel rules.
 http_archive(
   name = "angular",
-  url = "https://github.com/angular/angular/archive/7.1.3.zip",
-  strip_prefix = "angular-7.1.3",
+  url = "https://github.com/angular/angular/archive/7.2.1.zip",
+  strip_prefix = "angular-7.2.1",
 )
 
 # Add RxJS as repository because those are needed in order to build Angular from source.

diff --git a/guides/creating-a-custom-form-field-control.md b/guides/creating-a-custom-form-field-control.md
@@ -307,22 +307,14 @@ make up our component.
 
 ```ts
 @Input()
-get disabled() {
-  return this._disabled;
-}
-set disabled(dis) {
-  this._disabled = coerceBooleanProperty(dis);
+get disabled(): boolean { return this._disabled; }
+set disabled(value: boolean) {
+  this._disabled = coerceBooleanProperty(value);
+  this._disabled ? this.parts.disable() : this.parts.enable();
   this.stateChanges.next();
 }
 private _disabled = false;
 ```
-```html
-<input class="area" formControlName="area" size="3" [disabled]="disabled">
-<span>&ndash;</span>
-<input class="exchange" formControlName="exchange" size="3" [disabled]="disabled">
-<span>&ndash;</span>
-<input class="subscriber" formControlName="subscriber" size="4" [disabled]="disabled">
-```
 
 #### `errorState`
 

diff --git a/guides/creating-a-custom-stepper-using-the-cdk-stepper.md b/guides/creating-a-custom-stepper-using-the-cdk-stepper.md
@@ -22,15 +22,6 @@ Now we are ready to create our custom stepper component. Therefore, we need to c
   providers: [{ provide: CdkStepper, useExisting: CustomStepperComponent }]
 })
 export class CustomStepperComponent extends CdkStepper {
-  /** Whether the validity of previous steps should be checked or not */
-  linear: boolean;
-
-  /** The index of the selected step. */
-  selectedIndex: number;
-
-  /** The list of step components that the stepper is holding. */
-  steps: QueryList<CdkStep>;
-
   onClick(index: number): void {
     this.selectedIndex = index;
   }
@@ -47,12 +38,10 @@ This is the HTML template of our custom stepper component:
 <section class="container">
   <header><h2>Step {{selectedIndex + 1}}/{{steps.length}}</h2></header>
 
-  <section *ngFor="let step of steps; let i = index;">
-    <div [style.display]="selectedIndex === i ? 'block' : 'none'">
-      <!-- Content from the CdkStep is projected here -->
-      <ng-container [ngTemplateOutlet]="step.content"></ng-container>
-    </div>
-  </section>
+  <div [style.display]="selected ? 'block' : 'none'">
+    <!-- Content from the CdkStep is projected here -->
+    <ng-container [ngTemplateOutlet]="selected.content"></ng-container>
+  </div>
 
   <footer class="step-navigation-bar">
     <button class="nav-button" cdkStepperPrevious>&larr;</button>

diff --git a/guides/theming-your-components.md b/guides/theming-your-components.md
@@ -19,7 +19,7 @@ For example, if building a custom carousel component:
 
   // Define any styles affected by the theme.
   .candy-carousel {
-    // Use mat-color to extract individual colors a palette.
+    // Use mat-color to extract individual colors from a palette.
     background-color: mat-color($primary);
     border-color: mat-color($accent, A400);
   }

diff --git a/package.json b/package.json
@@ -26,39 +26,39 @@
     "check-release-output": "ts-node --project tools/release tools/release/check-release-output.ts",
     "preinstall": "node ./tools/npm/check-npm.js"
   },
-  "version": "7.3.0",
+  "version": "7.3.1",
   "requiredAngularVersion": ">=7.0.0",
   "dependencies": {
-    "@angular/animations": "^7.1.3",
-    "@angular/common": "^7.1.3",
-    "@angular/compiler": "^7.1.3",
-    "@angular/core": "^7.1.3",
-    "@angular/elements": "^7.1.3",
-    "@angular/forms": "^7.1.3",
-    "@angular/platform-browser": "^7.1.3",
+    "@angular/animations": "^7.2.1",
+    "@angular/common": "^7.2.1",
+    "@angular/compiler": "^7.2.1",
+    "@angular/core": "^7.2.1",
+    "@angular/elements": "^7.2.1",
+    "@angular/forms": "^7.2.1",
+    "@angular/platform-browser": "^7.2.1",
     "@webcomponents/custom-elements": "^1.1.0",
-    "core-js": "^2.6.0",
+    "core-js": "^2.6.1",
     "rxjs": "^6.3.3",
     "systemjs": "0.19.43",
     "tsickle": "^0.34.0",
     "tslib": "^1.9.3",
     "zone.js": "^0.8.29"
   },
   "devDependencies": {
-    "@angular-devkit/core": "^7.1.2",
-    "@angular-devkit/schematics": "^7.1.2",
-    "@angular/bazel": "^7.1.3",
-    "@angular/compiler-cli": "^7.1.3",
-    "@angular/http": "^7.1.3",
-    "@angular/platform-browser-dynamic": "^7.1.3",
-    "@angular/platform-server": "^7.1.3",
-    "@angular/router": "^7.1.3",
+    "@angular-devkit/core": "7.1.2",
+    "@angular-devkit/schematics": "7.1.2",
+    "@angular/bazel": "^7.2.1",
+    "@angular/compiler-cli": "^7.2.1",
+    "@angular/http": "^7.2.1",
+    "@angular/platform-browser-dynamic": "^7.2.1",
+    "@angular/platform-server": "^7.2.1",
+    "@angular/router": "^7.2.1",
     "@bazel/ibazel": "^0.9.0",
-    "@bazel/karma": "0.22.0",
-    "@bazel/typescript": "0.22.0",
+    "@bazel/karma": "0.22.1",
+    "@bazel/typescript": "0.22.1",
     "@firebase/app-types": "^0.3.2",
     "@octokit/rest": "^15.9.4",
-    "@schematics/angular": "^7.1.2",
+    "@schematics/angular": "7.1.2",
     "@types/browser-sync": "^0.0.42",
     "@types/chalk": "^0.4.31",
     "@types/fs-extra": "^4.0.3",

diff --git a/src/cdk/a11y/a11y.md b/src/cdk/a11y/a11y.md
@@ -93,7 +93,7 @@ details.
 
 ## LiveAnnouncer
 `LiveAnnouncer` is used to announce messages for screen-reader users using an `aria-live` region.
-See [the W3C's WAI-ARIA](https://www.w3.org/TR/wai-aria/states_and_properties#aria-live)
+See [the W3C's WAI-ARIA](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-live)
 for more information on aria-live regions.
 
 ### Example

diff --git a/src/cdk/collections/data-source.ts b/src/cdk/collections/data-source.ts
@@ -29,3 +29,11 @@ export abstract class DataSource<T> {
    */
   abstract disconnect(collectionViewer: CollectionViewer): void;
 }
+
+/** Checks whether an object is a data source. */
+export function isDataSource(value: any): value is DataSource<any> {
+  // Check if the value is a DataSource by observing if it has a connect function. Cannot
+  // be checked as an `instanceof DataSource` since people could create their own sources
+  // that match the interface, but don't extend DataSource.
+  return value && typeof value.connect === 'function';
+}
diff --git a/src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts b/src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts
@@ -1261,6 +1261,9 @@ describe('FlexibleConnectedPositionStrategy', () => {
         ]);
 
         attachOverlay({
+          // Set a large max-width to override the one that comes from the
+          // overlay structural styles. Otherwise the `width` will stop at the viewport width.
+          maxWidth: '200vw',
           width: viewport.getViewportRect().width + 100,
           positionStrategy
         });
@@ -1292,6 +1295,9 @@ describe('FlexibleConnectedPositionStrategy', () => {
         ]);
 
         attachOverlay({
+          // Set a large max-width to override the one that comes from the
+          // overlay structural styles. Otherwise the `width` will stop at the viewport width.
+          maxWidth: '200vw',
           width: viewport.getViewportRect().width + 100,
           positionStrategy
         });
@@ -1869,6 +1875,58 @@ describe('FlexibleConnectedPositionStrategy', () => {
       document.body.removeChild(veryLargeElement);
     });
 
+    it('should not push the overlay if it is exactly as wide as the viewport', () => {
+      originElement.style.position = 'fixed';
+      originElement.style.top = '100px';
+      originElement.style.right = '0';
+
+      positionStrategy
+        .withFlexibleDimensions()
+        .withPush(true)
+        .withPositions([{
+          originX: 'center',
+          originY: 'bottom',
+          overlayX: 'center',
+          overlayY: 'top',
+        }]);
+
+      attachOverlay({
+        width: viewport.getViewportRect().width,
+        positionStrategy
+      });
+
+      const originRect = originElement.getBoundingClientRect();
+      const overlayRect = overlayRef.overlayElement.getBoundingClientRect();
+
+      expect(Math.floor(overlayRect.right)).toBe(Math.floor(originRect.right));
+    });
+
+    it('should not push the overlay if it is exactly as tall as the viewport', () => {
+      originElement.style.position = 'fixed';
+      originElement.style.left = '100px';
+      originElement.style.bottom = '0';
+
+      positionStrategy
+        .withFlexibleDimensions()
+        .withPush(true)
+        .withPositions([{
+          originX: 'start',
+          originY: 'bottom',
+          overlayX: 'start',
+          overlayY: 'bottom',
+        }]);
+
+      attachOverlay({
+        width: viewport.getViewportRect().height,
+        positionStrategy
+      });
+
+      const originRect = originElement.getBoundingClientRect();
+      const overlayRect = overlayRef.overlayElement.getBoundingClientRect();
+
+      expect(Math.floor(overlayRect.bottom)).toBe(Math.floor(originRect.bottom));
+    });
+
   });
 
   describe('onPositionChange with scrollable view properties', () => {

diff --git a/src/cdk/overlay/position/flexible-connected-position-strategy.ts b/src/cdk/overlay/position/flexible-connected-position-strategy.ts
@@ -630,13 +630,13 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
     // If the overlay fits completely within the bounds of the viewport, push it from whichever
     // direction is goes off-screen. Otherwise, push the top-left corner such that its in the
     // viewport and allow for the trailing end of the overlay to go out of bounds.
-    if (overlay.width < viewport.width) {
+    if (overlay.width <= viewport.width) {
       pushX = overflowLeft || -overflowRight;
     } else {
       pushX = start.x < this._viewportMargin ? (viewport.left - scrollPosition.left) - start.x : 0;
     }
 
-    if (overlay.height < viewport.height) {
+    if (overlay.height <= viewport.height) {
       pushY = overflowTop || -overflowBottom;
     } else {
       pushY = start.y < this._viewportMargin ? (viewport.top - scrollPosition.top) - start.y : 0;

diff --git a/src/cdk/scrolling/virtual-for-of.ts b/src/cdk/scrolling/virtual-for-of.ts
@@ -6,7 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ArrayDataSource, CollectionViewer, DataSource, ListRange} from '@angular/cdk/collections';
+import {
+  ArrayDataSource,
+  CollectionViewer,
+  DataSource,
+  ListRange,
+  isDataSource,
+} from '@angular/cdk/collections';
 import {
   Directive,
   DoCheck,
@@ -82,7 +88,7 @@ export class CdkVirtualForOf<T> implements CollectionViewer, DoCheck, OnDestroy
   }
   set cdkVirtualForOf(value: DataSource<T> | Observable<T[]> | NgIterable<T>) {
     this._cdkVirtualForOf = value;
-    const ds = value instanceof DataSource ? value :
+    const ds = isDataSource(value) ? value :
         // Slice the value if its an NgIterable to ensure we're working with an array.
         new ArrayDataSource<T>(
             value instanceof Observable ? value : Array.prototype.slice.call(value || []));

diff --git a/src/cdk/stepper/stepper.ts b/src/cdk/stepper/stepper.ts
@@ -8,7 +8,7 @@
 
 import {FocusableOption, FocusKeyManager} from '@angular/cdk/a11y';
 import {Direction, Directionality} from '@angular/cdk/bidi';
-import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import {coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion';
 import {END, ENTER, HOME, SPACE, hasModifierKey} from '@angular/cdk/keycodes';
 import {
   AfterViewInit,
@@ -276,19 +276,21 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
   @Input()
   get selectedIndex() { return this._selectedIndex; }
   set selectedIndex(index: number) {
+    const newIndex = coerceNumberProperty(index);
+
     if (this.steps) {
       // Ensure that the index can't be out of bounds.
-      if (index < 0 || index > this.steps.length - 1) {
+      if (newIndex < 0 || newIndex > this.steps.length - 1) {
         throw Error('cdkStepper: Cannot assign out-of-bounds value to `selectedIndex`.');
       }
 
-      if (this._selectedIndex != index &&
-          !this._anyControlsInvalidOrPending(index) &&
-          (index >= this._selectedIndex || this.steps.toArray()[index].editable)) {
+      if (this._selectedIndex != newIndex &&
+          !this._anyControlsInvalidOrPending(newIndex) &&
+          (newIndex >= this._selectedIndex || this.steps.toArray()[newIndex].editable)) {
         this._updateSelectedItemIndex(index);
       }
     } else {
-      this._selectedIndex = index;
+      this._selectedIndex = newIndex;
     }
   }
   private _selectedIndex = 0;