Merge branch 'master' into fix-cdk-stepper-coerceNumberProperty

Author: s2-abdo

.circleci/config.yml

@@ -152,9 +152,13 @@ jobs:
   e2e_tests:
     <<: *job_defaults
     resource_class: xlarge
+    environment:
+      GCP_DECRYPT_TOKEN: *gcp_decrypt_token
     steps:
       - *checkout_code
       - *restore_cache
+      - *copy_bazel_config
+      - *setup_bazel_remote_execution
 
       - run: bazel test e2e/...
 
@@ -299,11 +303,14 @@ jobs:
   publish_snapshots:
     <<: *job_defaults
     resource_class: xlarge
+    environment:
+      GCP_DECRYPT_TOKEN: *gcp_decrypt_token
     steps:
       - *checkout_code
       - *restore_cache
-      - *yarn_install
       - *attach_release_output
+      - *copy_bazel_config
+      - *setup_bazel_remote_execution
 
       # CircleCI has a config setting to enforce SSH for all github connections.
       # This is not compatible with our mechanism of using a Personal Access Token

.github/CODEOWNERS

@@ -197,7 +197,62 @@
 /.circleci/**                                      @jelbourn
 /scripts/**                                        @devversion @jelbourn
 /test/**                                           @devversion @jelbourn
-/tools/**                                          @devversion @jelbourn
+/tools/**/!(*.d.ts)                                @devversion @jelbourn
+
+# Public API golden files
+/tools/public_api_guard/cdk/a11y.d.ts              @jelbourn @devversion
+/tools/public_api_guard/cdk/accordion.d.ts         @josephperrott
+/tools/public_api_guard/cdk/bidi.d.ts              @jelbourn
+/tools/public_api_guard/cdk/cdk.d.ts               @jelbourn
+/tools/public_api_guard/cdk/coercion.d.ts          @jelbourn
+/tools/public_api_guard/cdk/collections.d.ts       @jelbourn @crisbeto @andrewseguin
+/tools/public_api_guard/cdk/drag-drop.d.ts         @crisbeto
+/tools/public_api_guard/cdk/keycodes.d.ts          @jelbourn
+/tools/public_api_guard/cdk/layout.d.ts            @josephperrott
+/tools/public_api_guard/cdk/observers.d.ts         @jelbourn @crisbeto
+/tools/public_api_guard/cdk/overlay.d.ts           @jelbourn @crisbeto
+/tools/public_api_guard/cdk/platform.d.ts          @jelbourn @devversion
+/tools/public_api_guard/cdk/scrolling.d.ts         @andrewseguin @crisbeto
+/tools/public_api_guard/cdk/stepper.d.ts           @mmalerba
+/tools/public_api_guard/cdk/table.d.ts             @andrewseguin
+/tools/public_api_guard/cdk/text-field.d.ts        @mmalerba
+/tools/public_api_guard/cdk/tree.d.ts              @jelbourn @andrewseguin
+/tools/public_api_guard/lib/autocomplete.d.ts      @crisbeto
+/tools/public_api_guard/lib/badge.d.ts             @jelbourn
+/tools/public_api_guard/lib/bottom-sheet.d.ts      @jelbourn @crisbeto
+/tools/public_api_guard/lib/button-toggle.d.ts     @jelbourn
+/tools/public_api_guard/lib/button.d.ts            @jelbourn @josephperrott
+/tools/public_api_guard/lib/card.d.ts              @jelbourn
+/tools/public_api_guard/lib/checkbox.d.ts          @jelbourn @devversion @josephperrott
+/tools/public_api_guard/lib/chips.d.ts             @jelbourn
+/tools/public_api_guard/lib/core.d.ts              @jelbourn
+/tools/public_api_guard/lib/datepicker.d.ts        @mmalerba
+/tools/public_api_guard/lib/dialog.d.ts            @jelbourn @crisbeto
+/tools/public_api_guard/lib/divider.d.ts           @jelbourn @crisbeto
+/tools/public_api_guard/lib/expansion.d.ts         @josephperrott @jelbourn
+/tools/public_api_guard/lib/form-field.d.ts        @mmalerba
+/tools/public_api_guard/lib/grid-list.d.ts         @jelbourn
+/tools/public_api_guard/lib/icon.d.ts              @jelbourn
+/tools/public_api_guard/lib/input.d.ts             @mmalerba
+/tools/public_api_guard/lib/list.d.ts              @jelbourn @crisbeto @devversion
+/tools/public_api_guard/lib/menu.d.ts              @crisbeto
+/tools/public_api_guard/lib/paginator.d.ts         @andrewseguin
+/tools/public_api_guard/lib/progress-bar.d.ts      @jelbourn @crisbeto @josephperrott
+/tools/public_api_guard/lib/progress-spinner.d.ts  @jelbourn @crisbeto @josephperrott
+/tools/public_api_guard/lib/radio.d.ts             @jelbourn @devversion
+/tools/public_api_guard/lib/select.d.ts            @crisbeto
+/tools/public_api_guard/lib/sidenav.d.ts           @mmalerba
+/tools/public_api_guard/lib/slide-toggle.d.ts      @devversion
+/tools/public_api_guard/lib/slider.d.ts            @mmalerba
+/tools/public_api_guard/lib/snack-bar.d.ts         @jelbourn @crisbeto @josephperrott
+/tools/public_api_guard/lib/sort.d.ts              @andrewseguin
+/tools/public_api_guard/lib/stepper.d.ts           @mmalerba
+/tools/public_api_guard/lib/table.d.ts             @andrewseguin
+/tools/public_api_guard/lib/tabs.d.ts              @andrewseguin
+/tools/public_api_guard/lib/toolbar.d.ts           @devversion
+/tools/public_api_guard/lib/tooltip.d.ts           @andrewseguin
+/tools/public_api_guard/lib/tree.d.ts              @jelbourn @andrewseguin
+/tools/public_api_guard/lib/lib.d.ts               @jelbourn
 
 # Misc
 /*                                                 @jelbourn

src/cdk/drag-drop/directives/drag.spec.ts

@@ -606,7 +606,8 @@ describe('CdkDrag', () => {
       dragElement.style.transform = 'scale(2)';
 
       dragElementViaMouse(fixture, dragElement, 50, 100);
-      expect(dragElement.style.transform).toBe('scale(2) translate3d(50px, 100px, 0px)');
+
+      expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px) scale(2)');
 
       fixture.componentInstance.dragInstance.reset();
       expect(dragElement.style.transform).toBe('scale(2)');

src/cdk/scrolling/scrollable.ts

@@ -95,13 +95,15 @@ export class CdkScrollable implements OnInit, OnDestroy {
 
     // Rewrite the bottom offset as a top offset.
     if (options.bottom != null) {
-      options.top = el.scrollHeight - el.clientHeight - options.bottom;
+      (options as _Without<_Bottom> & _Top).top =
+          el.scrollHeight - el.clientHeight - options.bottom;
     }
 
     // Rewrite the right offset as a left offset.
     if (isRtl && getRtlScrollAxisType() != RtlScrollAxisType.NORMAL) {
       if (options.left != null) {
-        options.right = el.scrollWidth - el.clientWidth - options.left;
+        (options as _Without<_Left> & _Right).right =
+            el.scrollWidth - el.clientWidth - options.left;
       }
 
       if (getRtlScrollAxisType() == RtlScrollAxisType.INVERTED) {
@@ -111,7 +113,8 @@ export class CdkScrollable implements OnInit, OnDestroy {
       }
     } else {
       if (options.right != null) {
-        options.left = el.scrollWidth - el.clientWidth - options.right;
+        (options as _Without<_Right> & _Left).left =
+            el.scrollWidth - el.clientWidth - options.right;
       }
     }
 

src/lib/list/list.spec.ts

@@ -1,10 +1,13 @@
-import {async, TestBed} from '@angular/core/testing';
+import {async, TestBed, fakeAsync, tick} from '@angular/core/testing';
 import {Component, QueryList, ViewChildren} from '@angular/core';
+import {defaultRippleAnimationConfig} from '@angular/material/core';
+import {dispatchMouseEvent} from '@angular/cdk/testing';
 import {By} from '@angular/platform-browser';
 import {MatListItem, MatListModule} from './index';
 
-
 describe('MatList', () => {
+  // Default ripple durations used for testing.
+  const {enterDuration, exitDuration} = defaultRippleAnimationConfig;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -207,6 +210,62 @@ describe('MatList', () => {
     expect(items.every(item => item._isRippleDisabled())).toBe(true);
   });
 
+  it('should disable item ripples when list ripples are disabled via the input in nav list',
+    fakeAsync(() => {
+      const fixture = TestBed.createComponent(NavListWithOneAnchorItem);
+      fixture.detectChanges();
+
+      const rippleTarget = fixture.nativeElement.querySelector('.mat-list-item-content');
+
+      dispatchMouseEvent(rippleTarget, 'mousedown');
+      dispatchMouseEvent(rippleTarget, 'mouseup');
+
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
+          .toBe(1, 'Expected ripples to be enabled by default.');
+
+      // Wait for the ripples to go away.
+      tick(enterDuration + exitDuration);
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
+          .toBe(0, 'Expected ripples to go away.');
+
+      fixture.componentInstance.disableListRipple = true;
+      fixture.detectChanges();
+
+      dispatchMouseEvent(rippleTarget, 'mousedown');
+      dispatchMouseEvent(rippleTarget, 'mouseup');
+
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
+          .toBe(0, 'Expected no ripples after list ripples are disabled.');
+    }));
+
+  it('should disable item ripples when list ripples are disabled via the input in an action list',
+    fakeAsync(() => {
+      const fixture = TestBed.createComponent(ActionListWithoutType);
+      fixture.detectChanges();
+
+      const rippleTarget = fixture.nativeElement.querySelector('.mat-list-item-content');
+
+      dispatchMouseEvent(rippleTarget, 'mousedown');
+      dispatchMouseEvent(rippleTarget, 'mouseup');
+
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
+          .toBe(1, 'Expected ripples to be enabled by default.');
+
+      // Wait for the ripples to go away.
+      tick(enterDuration + exitDuration);
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
+          .toBe(0, 'Expected ripples to go away.');
+
+      fixture.componentInstance.disableListRipple = true;
+      fixture.detectChanges();
+
+      dispatchMouseEvent(rippleTarget, 'mousedown');
+      dispatchMouseEvent(rippleTarget, 'mouseup');
+
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
+          .toBe(0, 'Expected no ripples after list ripples are disabled.');
+    }));
+
 });
 
 

src/lib/list/list.ts

@@ -17,6 +17,9 @@ import {
   Optional,
   QueryList,
   ViewEncapsulation,
+  OnChanges,
+  OnDestroy,
+  ChangeDetectorRef,
 } from '@angular/core';
 import {
   CanDisableRipple,
@@ -25,6 +28,8 @@ import {
   setLines,
   mixinDisableRipple,
 } from '@angular/material/core';
+import {Subject} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
 
 // Boilerplate for applying mixins to MatList.
 /** @docs-private */
@@ -52,7 +57,19 @@ export const _MatListItemMixinBase: CanDisableRippleCtor & typeof MatListItemBas
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatNavList extends _MatListMixinBase implements CanDisableRipple {}
+export class MatNavList extends _MatListMixinBase implements CanDisableRipple, OnChanges,
+  OnDestroy {
+  /** Emits when the state of the list changes. */
+  _stateChanges = new Subject<void>();
+
+  ngOnChanges() {
+    this._stateChanges.next();
+  }
+
+  ngOnDestroy() {
+    this._stateChanges.complete();
+  }
+}
 
 @Component({
   moduleId: module.id,
@@ -67,7 +84,10 @@ export class MatNavList extends _MatListMixinBase implements CanDisableRipple {}
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatList extends _MatListMixinBase implements CanDisableRipple {
+export class MatList extends _MatListMixinBase implements CanDisableRipple, OnChanges, OnDestroy {
+  /** Emits when the state of the list changes. */
+  _stateChanges = new Subject<void>();
+
   /**
    * @deprecated _elementRef parameter to be made required.
    * @breaking-change 8.0.0
@@ -94,6 +114,14 @@ export class MatList extends _MatListMixinBase implements CanDisableRipple {
 
     return null;
   }
+
+  ngOnChanges() {
+    this._stateChanges.next();
+  }
+
+  ngOnDestroy() {
+    this._stateChanges.complete();
+  }
 }
 
 /**
@@ -143,17 +171,20 @@ export class MatListSubheaderCssMatStyler {}
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatListItem extends _MatListItemMixinBase implements AfterContentInit,
-    CanDisableRipple {
+    CanDisableRipple, OnDestroy {
   private _isInteractiveList: boolean = false;
   private _list?: MatNavList | MatList;
+  private _destroyed = new Subject<void>();
 
   @ContentChildren(MatLine) _lines: QueryList<MatLine>;
   @ContentChild(MatListAvatarCssMatStyler) _avatar: MatListAvatarCssMatStyler;
   @ContentChild(MatListIconCssMatStyler) _icon: MatListIconCssMatStyler;
 
   constructor(private _element: ElementRef<HTMLElement>,
               @Optional() navList?: MatNavList,
-              @Optional() list?: MatList) {
+              @Optional() list?: MatList,
+              // @breaking-change 8.0.0 `_changeDetectorRef` to be made into a required parameter.
+              _changeDetectorRef?: ChangeDetectorRef) {
     super();
     this._isInteractiveList = !!(navList || (list && list._getListType() === 'action-list'));
     this._list = navList || list;
@@ -165,12 +196,26 @@ export class MatListItem extends _MatListItemMixinBase implements AfterContentIn
     if (element.nodeName.toLowerCase() === 'button' && !element.hasAttribute('type')) {
       element.setAttribute('type', 'button');
     }
+
+    // @breaking-change 8.0.0 Remove null check for _changeDetectorRef.
+    if (this._list && _changeDetectorRef) {
+      // React to changes in the state of the parent list since
+      // some of the item's properties depend on it (e.g. `disableRipple`).
+      this._list._stateChanges.pipe(takeUntil(this._destroyed)).subscribe(() => {
+        _changeDetectorRef.markForCheck();
+      });
+    }
   }
 
   ngAfterContentInit() {
     setLines(this._lines, this._element);
   }
 
+  ngOnDestroy() {
+    this._destroyed.next();
+    this._destroyed.complete();
+  }
+
   /** Whether this list item should show a ripple effect when clicked. */
   _isRippleDisabled() {
     return !this._isInteractiveList || this.disableRipple ||

src/lib/list/selection-list.spec.ts

@@ -982,6 +982,21 @@ describe('MatSelectionList with forms', () => {
         .toBe(true, 'Expected every list option to be unselected.');
     });
 
+    it('should deselect option whose value no longer matches', () => {
+      const option = listOptions[1];
+
+      fixture.componentInstance.formControl.setValue(['opt2']);
+      fixture.detectChanges();
+
+      expect(option.selected).toBe(true, 'Expected option to be selected.');
+
+      option.value = 'something-different';
+      fixture.detectChanges();
+
+      expect(option.selected).toBe(false, 'Expected option not to be selected.');
+      expect(fixture.componentInstance.formControl.value).toEqual([]);
+    });
+
     it('should mark options as selected when the value is set before they are initialized', () => {
       fixture.destroy();
       fixture = TestBed.createComponent(SelectionListWithFormControl);

src/lib/list/selection-list.ts

@@ -120,7 +120,16 @@ export class MatListOption extends _MatListOptionMixinBase
   @Input() checkboxPosition: 'before' | 'after' = 'after';
 
   /** Value of the option */
-  @Input() value: any;
+  @Input()
+  get value(): any { return this._value; }
+  set value(newValue: any) {
+    if (this.selected && newValue !== this.value) {
+      this.selected = false;
+    }
+
+    this._value = newValue;
+  }
+  private _value: any;
 
   /** Whether the option is disabled. */
   @Input()
@@ -272,7 +281,7 @@ export class MatListOption extends _MatListOptionMixinBase
   moduleId: module.id,
   selector: 'mat-selection-list',
   exportAs: 'matSelectionList',
-  inputs: ['disabled', 'disableRipple', 'tabIndex'],
+  inputs: ['disableRipple'],
   host: {
     'role': 'listbox',
     '[tabIndex]': 'tabIndex',

src/lib/stepper/stepper.scss

@@ -92,8 +92,7 @@ $mat-stepper-line-gap: 8px !default;
       display: none;
     }
 
-    & .mat-step-icon,
-    & .mat-step-icon-not-touched {
+    & .mat-step-icon {
       // Cleans margin both for ltr and rtl direction
       margin-right: 0;
       margin-left: 0;

src/lib/tabs/tab-header.ts

@@ -133,10 +133,10 @@ export class MatTabHeader extends _MatTabHeaderMixinBase
   private _selectedIndex: number = 0;
 
   /** Event emitted when the option is selected. */
-  @Output() readonly selectFocusedIndex = new EventEmitter();
+  @Output() readonly selectFocusedIndex: EventEmitter<number> = new EventEmitter<number>();
 
   /** Event emitted when a label is focused. */
-  @Output() readonly indexFocused = new EventEmitter();
+  @Output() readonly indexFocused: EventEmitter<number> = new EventEmitter<number>();
 
   constructor(private _elementRef: ElementRef,
               private _changeDetectorRef: ChangeDetectorRef,