From b959e1865dad065e2cf4c275c1357d5143ff871b Mon Sep 17 00:00:00 2001
From: tinayuangao <tinagao@google.com>
Date: Wed, 20 Jun 2018 10:53:48 -0700
Subject: [PATCH 01/44] fix(button-toggle): use native button and aria-pressed
 for button-toggle (#10990)

---
 src/lib/button-toggle/button-toggle.html    | 27 +++++-----
 src/lib/button-toggle/button-toggle.scss    | 10 ++++
 src/lib/button-toggle/button-toggle.spec.ts | 57 +++++++++++++--------
 src/lib/button-toggle/button-toggle.ts      | 42 ++++++---------
 4 files changed, 75 insertions(+), 61 deletions(-)

diff --git a/src/lib/button-toggle/button-toggle.html b/src/lib/button-toggle/button-toggle.html
index f487d13e4f93..f0389997704b 100644
--- a/src/lib/button-toggle/button-toggle.html
+++ b/src/lib/button-toggle/button-toggle.html
@@ -1,22 +1,19 @@
-<label [attr.for]="inputId" class="mat-button-toggle-label" #label>
-  <input #input class="mat-button-toggle-input cdk-visually-hidden"
-         [type]="_type"
-         [id]="inputId"
-         [checked]="checked"
-         [disabled]="disabled || null"
-         [attr.name]="name"
-         [attr.aria-label]="ariaLabel"
-         [attr.aria-labelledby]="ariaLabelledby"
-         (change)="_onInputChange($event)"
-         (click)="_onInputClick($event)">
-
+<button #button class="mat-button-toggle-button"
+        type="button"
+        [id]="buttonId"
+        [attr.aria-pressed]="checked"
+        [disabled]="disabled || null"
+        [attr.name]="name || null"
+        [attr.aria-label]="ariaLabel"
+        [attr.aria-labelledby]="ariaLabelledby"
+        (click)="_onButtonClick($event)">
   <div class="mat-button-toggle-label-content">
     <ng-content></ng-content>
   </div>
-</label>
-<div class="mat-button-toggle-focus-overlay"></div>
+</button>
 
+<div class="mat-button-toggle-focus-overlay"></div>
 <div class="mat-button-toggle-ripple" matRipple
-     [matRippleTrigger]="label"
+     [matRippleTrigger]="button"
      [matRippleDisabled]="this.disableRipple || this.disabled">
 </div>
diff --git a/src/lib/button-toggle/button-toggle.scss b/src/lib/button-toggle/button-toggle.scss
index 97b5bd456180..05a2edc6cfb8 100644
--- a/src/lib/button-toggle/button-toggle.scss
+++ b/src/lib/button-toggle/button-toggle.scss
@@ -100,3 +100,13 @@ $mat-button-toggle-border-radius: 2px !default;
   // Pointer events can be safely disabled because the ripple trigger element is the label element.
   pointer-events: none;
 }
+
+.mat-button-toggle-button {
+  border: 0;
+  background: none;
+  color: inherit;
+  padding: inherit;
+  margin: inherit;
+  font: inherit;
+  outline: none;
+}
diff --git a/src/lib/button-toggle/button-toggle.spec.ts b/src/lib/button-toggle/button-toggle.spec.ts
index 1bb11660d71a..76c025410f69 100644
--- a/src/lib/button-toggle/button-toggle.spec.ts
+++ b/src/lib/button-toggle/button-toggle.spec.ts
@@ -93,7 +93,7 @@ describe('MatButtonToggle with forms', () => {
       buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MatButtonToggle));
       buttonToggleInstances = buttonToggleDebugElements.map(debugEl => debugEl.componentInstance);
       buttonToggleLabels = buttonToggleDebugElements.map(
-        debugEl => debugEl.query(By.css('label')).nativeElement);
+        debugEl => debugEl.query(By.css('button')).nativeElement);
 
       fixture.detectChanges();
     }));
@@ -244,7 +244,7 @@ describe('MatButtonToggle without forms', () => {
       buttonToggleNativeElements = buttonToggleDebugElements
         .map(debugEl => debugEl.nativeElement);
 
-      buttonToggleLabelElements = fixture.debugElement.queryAll(By.css('label'))
+      buttonToggleLabelElements = fixture.debugElement.queryAll(By.css('button'))
         .map(debugEl => debugEl.nativeElement);
 
       buttonToggleInstances = buttonToggleDebugElements.map(debugEl => debugEl.componentInstance);
@@ -339,7 +339,7 @@ describe('MatButtonToggle without forms', () => {
       buttonToggleLabelElements[0].click();
       fixture.detectChanges();
       tick();
-      expect(changeSpy).toHaveBeenCalled();
+      expect(changeSpy).toHaveBeenCalledTimes(1);
 
       buttonToggleLabelElements[0].click();
       fixture.detectChanges();
@@ -447,7 +447,7 @@ describe('MatButtonToggle without forms', () => {
       buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MatButtonToggle));
       buttonToggleNativeElements = buttonToggleDebugElements
         .map(debugEl => debugEl.nativeElement);
-      buttonToggleLabelElements = fixture.debugElement.queryAll(By.css('label'))
+      buttonToggleLabelElements = fixture.debugElement.queryAll(By.css('button'))
         .map(debugEl => debugEl.nativeElement);
       buttonToggleInstances = buttonToggleDebugElements.map(debugEl => debugEl.componentInstance);
     }));
@@ -463,7 +463,7 @@ describe('MatButtonToggle without forms', () => {
     it('should check a button toggle when clicked', () => {
       expect(buttonToggleInstances.every(buttonToggle => !buttonToggle.checked)).toBe(true);
 
-      let nativeCheckboxLabel = buttonToggleDebugElements[0].query(By.css('label')).nativeElement;
+      let nativeCheckboxLabel = buttonToggleDebugElements[0].query(By.css('button')).nativeElement;
 
       nativeCheckboxLabel.click();
 
@@ -487,9 +487,9 @@ describe('MatButtonToggle without forms', () => {
     });
 
     it('should check a button toggle upon interaction with underlying native checkbox', () => {
-      let nativeCheckboxInput = buttonToggleDebugElements[0].query(By.css('input')).nativeElement;
+      let nativeCheckboxButton = buttonToggleDebugElements[0].query(By.css('button')).nativeElement;
 
-      nativeCheckboxInput.click();
+      nativeCheckboxButton.click();
       fixture.detectChanges();
 
       expect(groupInstance.value).toEqual(['eggs']);
@@ -562,6 +562,7 @@ describe('MatButtonToggle without forms', () => {
     let buttonToggleNativeElement: HTMLElement;
     let buttonToggleLabelElement: HTMLLabelElement;
     let buttonToggleInstance: MatButtonToggle;
+    let buttonToggleButtonElement: HTMLButtonElement;
 
     beforeEach(fakeAsync(() => {
       fixture = TestBed.createComponent(StandaloneButtonToggle);
@@ -569,8 +570,11 @@ describe('MatButtonToggle without forms', () => {
 
       buttonToggleDebugElement = fixture.debugElement.query(By.directive(MatButtonToggle));
       buttonToggleNativeElement = buttonToggleDebugElement.nativeElement;
-      buttonToggleLabelElement = fixture.debugElement.query(By.css('label')).nativeElement;
+      buttonToggleLabelElement = fixture.debugElement
+          .query(By.css('.mat-button-toggle-label-content')).nativeElement;
       buttonToggleInstance = buttonToggleDebugElement.componentInstance;
+      buttonToggleButtonElement =
+          buttonToggleNativeElement.querySelector('button')! as HTMLButtonElement;
     }));
 
     it('should toggle when clicked', fakeAsync(() => {
@@ -609,19 +613,30 @@ describe('MatButtonToggle without forms', () => {
     }));
 
     it('should focus on underlying input element when focus() is called', () => {
-      let nativeRadioInput = buttonToggleDebugElement.query(By.css('input')).nativeElement;
-      expect(document.activeElement).not.toBe(nativeRadioInput);
+      let nativeButton = buttonToggleDebugElement.query(By.css('button')).nativeElement;
+      expect(document.activeElement).not.toBe(nativeButton);
 
       buttonToggleInstance.focus();
       fixture.detectChanges();
 
-      expect(document.activeElement).toBe(nativeRadioInput);
+      expect(document.activeElement).toBe(nativeButton);
     });
 
     it('should not assign a name to the underlying input if one is not passed in', () => {
-      expect(buttonToggleNativeElement.querySelector('input')!.getAttribute('name')).toBeFalsy();
+      expect(buttonToggleButtonElement.getAttribute('name')).toBeFalsy();
     });
 
+    it('should have correct aria-pressed attribute', () => {
+      expect(buttonToggleButtonElement.getAttribute('aria-pressed'))
+          .toBe('false');
+
+      buttonToggleLabelElement.click();
+
+      fixture.detectChanges();
+
+      expect(buttonToggleButtonElement.getAttribute('aria-pressed'))
+        .toBe('true');
+    });
   });
 
   describe('aria-label handling ', () => {
@@ -629,46 +644,46 @@ describe('MatButtonToggle without forms', () => {
       let fixture = TestBed.createComponent(StandaloneButtonToggle);
       let checkboxDebugElement = fixture.debugElement.query(By.directive(MatButtonToggle));
       let checkboxNativeElement = checkboxDebugElement.nativeElement;
-      let inputElement = checkboxNativeElement.querySelector('input') as HTMLInputElement;
+      let buttonElement = checkboxNativeElement.querySelector('button') as HTMLButtonElement;
 
       fixture.detectChanges();
-      expect(inputElement.hasAttribute('aria-label')).toBe(false);
+      expect(buttonElement.hasAttribute('aria-label')).toBe(false);
     });
 
     it('should use the provided aria-label', () => {
       let fixture = TestBed.createComponent(ButtonToggleWithAriaLabel);
       let checkboxDebugElement = fixture.debugElement.query(By.directive(MatButtonToggle));
       let checkboxNativeElement = checkboxDebugElement.nativeElement;
-      let inputElement = checkboxNativeElement.querySelector('input') as HTMLInputElement;
+      let buttonElement = checkboxNativeElement.querySelector('button') as HTMLButtonElement;
 
       fixture.detectChanges();
-      expect(inputElement.getAttribute('aria-label')).toBe('Super effective');
+      expect(buttonElement.getAttribute('aria-label')).toBe('Super effective');
     });
   });
 
   describe('with provided aria-labelledby ', () => {
     let checkboxDebugElement: DebugElement;
     let checkboxNativeElement: HTMLElement;
-    let inputElement: HTMLInputElement;
+    let buttonElement: HTMLButtonElement;
 
     it('should use the provided aria-labelledby', () => {
       let fixture = TestBed.createComponent(ButtonToggleWithAriaLabelledby);
       checkboxDebugElement = fixture.debugElement.query(By.directive(MatButtonToggle));
       checkboxNativeElement = checkboxDebugElement.nativeElement;
-      inputElement = checkboxNativeElement.querySelector('input') as HTMLInputElement;
+      buttonElement = checkboxNativeElement.querySelector('button') as HTMLButtonElement;
 
       fixture.detectChanges();
-      expect(inputElement.getAttribute('aria-labelledby')).toBe('some-id');
+      expect(buttonElement.getAttribute('aria-labelledby')).toBe('some-id');
     });
 
     it('should not assign aria-labelledby if none is provided', () => {
       let fixture = TestBed.createComponent(StandaloneButtonToggle);
       checkboxDebugElement = fixture.debugElement.query(By.directive(MatButtonToggle));
       checkboxNativeElement = checkboxDebugElement.nativeElement;
-      inputElement = checkboxNativeElement.querySelector('input') as HTMLInputElement;
+      buttonElement = checkboxNativeElement.querySelector('button') as HTMLButtonElement;
 
       fixture.detectChanges();
-      expect(inputElement.getAttribute('aria-labelledby')).toBe(null);
+      expect(buttonElement.getAttribute('aria-labelledby')).toBe(null);
     });
   });
 
diff --git a/src/lib/button-toggle/button-toggle.ts b/src/lib/button-toggle/button-toggle.ts
index db15195cb4e7..b1b4ab0f0974 100644
--- a/src/lib/button-toggle/button-toggle.ts
+++ b/src/lib/button-toggle/button-toggle.ts
@@ -82,7 +82,7 @@ export class MatButtonToggleChange {
   ],
   inputs: ['disabled'],
   host: {
-    '[attr.role]': 'multiple ? "group" : "radiogroup"',
+    'role': 'group',
     'class': 'mat-button-toggle-group',
     '[class.mat-button-toggle-vertical]': 'vertical'
   },
@@ -353,13 +353,13 @@ export class MatButtonToggle extends _MatButtonToggleMixinBase implements OnInit
   /** Type of the button toggle. Either 'radio' or 'checkbox'. */
   _type: ToggleType;
 
-  @ViewChild('input') _inputElement: ElementRef<HTMLInputElement>;
+  @ViewChild('button') _buttonElement: ElementRef<HTMLButtonElement>;
 
   /** The parent button toggle group (exclusive selection). Optional. */
   buttonToggleGroup: MatButtonToggleGroup;
 
-  /** Unique ID for the underlying `input` element. */
-  get inputId(): string { return `${this.id}-input`; }
+  /** Unique ID for the underlying `button` element. */
+  get buttonId(): string { return `${this.id}-button`; }
 
   /** The unique ID for this button toggle. */
   @Input() id: string;
@@ -432,33 +432,25 @@ export class MatButtonToggle extends _MatButtonToggleMixinBase implements OnInit
 
   /** Focuses the button. */
   focus(): void {
-    this._inputElement.nativeElement.focus();
+    this._buttonElement.nativeElement.focus();
   }
 
-  /** Checks the button toggle due to an interaction with the underlying native input. */
-  _onInputChange(event: Event) {
+  /** Checks the button toggle due to an interaction with the underlying native button. */
+  _onButtonClick(event: Event) {
     event.stopPropagation();
 
-    this._checked = this._isSingleSelector ? true : !this._checked;
+    const newChecked = this._isSingleSelector ? true : !this._checked;
 
-    if (this.buttonToggleGroup) {
-      this.buttonToggleGroup._syncButtonToggle(this, this._checked, true);
-      this.buttonToggleGroup._onTouched();
-    }
-
-    // Emit a change event when the native input does.
-    this.change.emit(new MatButtonToggleChange(this, this.value));
-  }
+    if (newChecked !== this._checked) {
+      this._checked = newChecked;
+      if (this.buttonToggleGroup) {
+        this.buttonToggleGroup._syncButtonToggle(this, this._checked, true);
+        this.buttonToggleGroup._onTouched();
+      }
 
-  _onInputClick(event: Event) {
-    // We have to stop propagation for click events on the visual hidden input element.
-    // By default, when a user clicks on a label element, a generated click event will be
-    // dispatched on the associated input element. Since we are using a label element as our
-    // root container, the click event on the `slide-toggle` will be executed twice.
-    // The real click event will bubble up, and the generated click event also tries to bubble up.
-    // This will lead to multiple click events.
-    // Preventing bubbling for the second event will solve that issue.
-    event.stopPropagation();
+      // Emit a change event when the native button does.
+      this.change.emit(new MatButtonToggleChange(this, this.value));
+    }
   }
 
   /**

From d083d761ac184e314fbf50af04605f62f2c7f3ad Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 20 Jun 2018 19:54:47 +0200
Subject: [PATCH 02/44] fix(table): use solid color for sorting arrow (#11533)

Currently we use an rgba color for the table's sorting arrow which ends up looking weird, because the arrow is made up of multiple stacked elements. These changes add some logic that convert the arrow's color into a solid one so the individual pieces can blend into each other.

Fixes #11340.
---
 src/lib/sort/_sort-theme.scss | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/lib/sort/_sort-theme.scss b/src/lib/sort/_sort-theme.scss
index 9aaf2958b28a..667100201c09 100644
--- a/src/lib/sort/_sort-theme.scss
+++ b/src/lib/sort/_sort-theme.scss
@@ -1,4 +1,17 @@
-// Empty mixins to be consistent with all other components.
-@mixin mat-sort-theme($theme) { }
+@mixin mat-sort-theme($theme) {
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .mat-sort-header-arrow {
+    // Because the arrow is made up of multiple elements that are stacked on top of each other,
+    // we can't use the semi-trasparent color from the theme directly. We convert it into a solid
+    // color by taking the opacity from the rgba value and using the value to determine the
+    // percentage of the background to put into foreground when mixing the colors together.
+    $table-background: mat-color($background, 'card');
+    $text-color: mat-color($foreground, secondary-text);
+    $text-opacity: opacity($text-color);
+    color: mix($table-background, rgba($text-color, 1), (1 - $text-opacity) * 100%);
+  }
+}
 
 @mixin mat-sort-typography($config) { }

From 6c9c3fe21ee5233a136c8d25a1455c0819624bf1 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 20 Jun 2018 19:55:02 +0200
Subject: [PATCH 03/44] fix(select): don't blur label when trigger is blurred
 while the panel is opened (#11537)

Considers a select as focused as long as a its panel is open, even if the trigger loses focus. This avoids cases where the label can be seen blinking in the background when an option is toggled in multi-select mode.
---
 src/lib/select/select.spec.ts | 20 ++++++++++++++++++++
 src/lib/select/select.ts      | 16 +++++++++++++---
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
index ceb58b2de00c..cac35e08f50d 100644
--- a/src/lib/select/select.spec.ts
+++ b/src/lib/select/select.spec.ts
@@ -1071,6 +1071,26 @@ describe('MatSelect', () => {
         expect(document.querySelectorAll('.cdk-overlay-container mat-option').length)
             .toBeGreaterThan(0, 'Expected at least one option to be rendered.');
       }));
+
+      it('should not consider itself as blurred if the trigger loses focus while the ' +
+        'panel is still open', fakeAsync(() => {
+          const selectElement = fixture.nativeElement.querySelector('.mat-select');
+          const selectInstance = fixture.componentInstance.select;
+
+          dispatchFakeEvent(selectElement, 'focus');
+          fixture.detectChanges();
+
+          expect(selectInstance.focused).toBe(true, 'Expected select to be focused.');
+
+          selectInstance.open();
+          fixture.detectChanges();
+          flush();
+          dispatchFakeEvent(selectElement, 'blur');
+          fixture.detectChanges();
+
+          expect(selectInstance.focused).toBe(true, 'Expected select element to remain focused.');
+        }));
+
     });
 
     describe('selection logic', () => {
diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
index 513477de2cee..9172df03dd12 100644
--- a/src/lib/select/select.ts
+++ b/src/lib/select/select.ts
@@ -310,7 +310,17 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
   private _disableOptionCentering: boolean = false;
 
   /** Whether the select is focused. */
-  focused: boolean = false;
+  get focused(): boolean {
+    return this._focused || this._panelOpen;
+  }
+  /**
+   * @deprecated Setter to be removed as this property is intended to be readonly.
+   * @deletion-target 8.0.0
+   */
+  set focused(value: boolean) {
+    this._focused = value;
+  }
+  private _focused = false;
 
   /** A name for this control that can be used by `mat-form-field`. */
   controlType = 'mat-select';
@@ -718,7 +728,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
 
   _onFocus() {
     if (!this.disabled) {
-      this.focused = true;
+      this._focused = true;
       this.stateChanges.next();
     }
   }
@@ -728,7 +738,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
    * "blur" to the panel when it opens, causing a false positive.
    */
   _onBlur() {
-    this.focused = false;
+    this._focused = false;
 
     if (!this.disabled && !this.panelOpen) {
       this._onTouched();

From 671ad8298e5f4491c9b39ddcb4360805613585f8 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 20 Jun 2018 19:55:31 +0200
Subject: [PATCH 04/44] fix(menu): panel positions not changing if position is
 updated after first open (#11707)

Fixes the menu's panel position not being accurate if it's `xPosition` or `yPosition` is updated after it has been opened for the first time.

Fixes #11668.
---
 src/lib/menu/menu-trigger.ts | 52 ++++++++++++++++++------------------
 src/lib/menu/menu.spec.ts    | 47 +++++++++++++++++++++++++++-----
 2 files changed, 67 insertions(+), 32 deletions(-)

diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts
index 091a4bc60ec8..4b0f5ccff5e3 100644
--- a/src/lib/menu/menu-trigger.ts
+++ b/src/lib/menu/menu-trigger.ts
@@ -196,6 +196,7 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
     }
 
     const overlayRef = this._createOverlay();
+    this._setPosition(overlayRef.getConfig().positionStrategy as FlexibleConnectedPositionStrategy);
     overlayRef.attach(this._portal);
 
     if (this.menu.lazyContent) {
@@ -350,7 +351,9 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
    */
   private _getOverlayConfig(): OverlayConfig {
     return new OverlayConfig({
-      positionStrategy: this._getPosition(),
+      positionStrategy: this._overlay.position()
+          .flexibleConnectedTo(this._element)
+          .withTransformOriginOn('.mat-menu-panel'),
       hasBackdrop: this.menu.hasBackdrop == null ? !this.triggersSubmenu() : this.menu.hasBackdrop,
       backdropClass: this.menu.backdropClass || 'cdk-overlay-transparent-backdrop',
       scrollStrategy: this._scrollStrategy(),
@@ -375,11 +378,11 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
   }
 
   /**
-   * This method builds the position strategy for the overlay, so the menu is properly connected
-   * to the trigger.
-   * @returns ConnectedPositionStrategy
+   * Sets the appropriate positions on a position strategy
+   * so the overlay connects with the trigger correctly.
+   * @param positionStrategy Strategy whose position to update.
    */
-  private _getPosition(): FlexibleConnectedPositionStrategy {
+  private _setPosition(positionStrategy: FlexibleConnectedPositionStrategy) {
     let [originX, originFallbackX]: HorizontalConnectionPos[] =
         this.menu.xPosition === 'before' ? ['end', 'start'] : ['start', 'end'];
 
@@ -401,27 +404,24 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
       originFallbackY = overlayFallbackY === 'top' ? 'bottom' : 'top';
     }
 
-    return this._overlay.position()
-        .flexibleConnectedTo(this._element)
-        .withTransformOriginOn('.mat-menu-panel')
-        .withPositions([
-          {originX, originY, overlayX, overlayY, offsetY},
-          {originX: originFallbackX, originY, overlayX: overlayFallbackX, overlayY, offsetY},
-          {
-            originX,
-            originY: originFallbackY,
-            overlayX,
-            overlayY: overlayFallbackY,
-            offsetY: -offsetY
-          },
-          {
-            originX: originFallbackX,
-            originY: originFallbackY,
-            overlayX: overlayFallbackX,
-            overlayY: overlayFallbackY,
-            offsetY: -offsetY
-          }
-        ]);
+    positionStrategy.withPositions([
+      {originX, originY, overlayX, overlayY, offsetY},
+      {originX: originFallbackX, originY, overlayX: overlayFallbackX, overlayY, offsetY},
+      {
+        originX,
+        originY: originFallbackY,
+        overlayX,
+        overlayY: overlayFallbackY,
+        offsetY: -offsetY
+      },
+      {
+        originX: originFallbackX,
+        originY: originFallbackY,
+        overlayX: overlayFallbackX,
+        overlayY: overlayFallbackY,
+        offsetY: -offsetY
+      }
+    ]);
   }
 
   /** Cleans up the active subscriptions. */
diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts
index f1c23643f643..11c3850b5921 100644
--- a/src/lib/menu/menu.spec.ts
+++ b/src/lib/menu/menu.spec.ts
@@ -512,13 +512,13 @@ describe('MatMenu', () => {
 
   describe('positions', () => {
     let fixture: ComponentFixture<PositionedMenu>;
-    let panel: HTMLElement;
+    let trigger: HTMLElement;
 
     beforeEach(() => {
       fixture = createComponent(PositionedMenu);
       fixture.detectChanges();
 
-      const trigger = fixture.componentInstance.triggerEl.nativeElement;
+      trigger = fixture.componentInstance.triggerEl.nativeElement;
 
       // Push trigger to the bottom edge of viewport,so it has space to open "above"
       trigger.style.position = 'fixed';
@@ -526,13 +526,14 @@ describe('MatMenu', () => {
 
       // Push trigger to the right, so it has space to open "before"
       trigger.style.left = '100px';
+    });
 
+    it('should append mat-menu-before if the x position is changed', () => {
       fixture.componentInstance.trigger.openMenu();
       fixture.detectChanges();
-      panel = overlayContainerElement.querySelector('.mat-menu-panel') as HTMLElement;
-    });
 
-    it('should append mat-menu-before if the x position is changed', () => {
+      const panel = overlayContainerElement.querySelector('.mat-menu-panel') as HTMLElement;
+
       expect(panel.classList).toContain('mat-menu-before');
       expect(panel.classList).not.toContain('mat-menu-after');
 
@@ -544,6 +545,11 @@ describe('MatMenu', () => {
     });
 
     it('should append mat-menu-above if the y position is changed', () => {
+      fixture.componentInstance.trigger.openMenu();
+      fixture.detectChanges();
+
+      const panel = overlayContainerElement.querySelector('.mat-menu-panel') as HTMLElement;
+
       expect(panel.classList).toContain('mat-menu-above');
       expect(panel.classList).not.toContain('mat-menu-below');
 
@@ -564,12 +570,41 @@ describe('MatMenu', () => {
       newFixture.detectChanges();
       newFixture.componentInstance.trigger.openMenu();
       newFixture.detectChanges();
-      panel = overlayContainerElement.querySelector('.mat-menu-panel') as HTMLElement;
+      const panel = overlayContainerElement.querySelector('.mat-menu-panel') as HTMLElement;
 
       expect(panel.classList).toContain('mat-menu-below');
       expect(panel.classList).toContain('mat-menu-after');
     });
 
+    it('should be able to update the position after the first open', () => {
+      trigger.style.position = 'fixed';
+      trigger.style.top = '200px';
+
+      fixture.componentInstance.yPosition = 'above';
+      fixture.detectChanges();
+
+      fixture.componentInstance.trigger.openMenu();
+      fixture.detectChanges();
+
+      let panel = overlayContainerElement.querySelector('.mat-menu-panel') as HTMLElement;
+
+      expect(Math.floor(panel.getBoundingClientRect().bottom))
+          .toBe(Math.floor(trigger.getBoundingClientRect().bottom), 'Expected menu to open above');
+
+      fixture.componentInstance.trigger.closeMenu();
+      fixture.detectChanges();
+
+      fixture.componentInstance.yPosition = 'below';
+      fixture.detectChanges();
+
+      fixture.componentInstance.trigger.openMenu();
+      fixture.detectChanges();
+      panel = overlayContainerElement.querySelector('.mat-menu-panel') as HTMLElement;
+
+      expect(Math.floor(panel.getBoundingClientRect().top))
+          .toBe(Math.floor(trigger.getBoundingClientRect().top), 'Expected menu to open below');
+    });
+
   });
 
   describe('fallback positions', () => {

From 11f3993998d67e8bd04023316d157f5a5027e4d9 Mon Sep 17 00:00:00 2001
From: Joey Perrott <josephperrott.github@gmail.com>
Date: Wed, 20 Jun 2018 17:28:45 -0700
Subject: [PATCH 05/44] fix(progress-spinner): create internal default to force
 animations to always be on (#11462)

---
 src/lib/progress-spinner/progress-spinner.ts | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/lib/progress-spinner/progress-spinner.ts b/src/lib/progress-spinner/progress-spinner.ts
index db1678447dbb..2f0e6c038257 100644
--- a/src/lib/progress-spinner/progress-spinner.ts
+++ b/src/lib/progress-spinner/progress-spinner.ts
@@ -50,6 +50,11 @@ export interface MatProgressSpinnerDefaultOptions {
   diameter?: number;
   /** Width of the spinner's stroke. */
   strokeWidth?: number;
+  /**
+   * Whether the animations should be force to be enabled, ignoring if the current environment is
+   * using NoopAnimationsModule.
+   */
+  _forceAnimations?: boolean;
 }
 
 /** Injection token to be used to override the default options for `mat-progress-spinner`. */
@@ -102,7 +107,7 @@ const INDETERMINATE_ANIMATION_TEMPLATE = `
   host: {
     'role': 'progressbar',
     'class': 'mat-progress-spinner',
-    '[class._mat-animation-noopable]': `_animationMode === 'NoopAnimations'`,
+    '[class._mat-animation-noopable]': `_noopAnimations`,
     '[style.width.px]': 'diameter',
     '[style.height.px]': 'diameter',
     '[attr.aria-valuemin]': 'mode === "determinate" ? 0 : null',
@@ -131,6 +136,10 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
    */
   private static styleTag: HTMLStyleElement|null = null;
 
+  /** Whether the _mat-animation-noopable class should be applied, disabling animations.  */
+  _noopAnimations: boolean = this.animationMode === 'NoopAnimations' && (
+      !!this.defaults && !this.defaults._forceAnimations);
+
   /** The diameter of the progress spinner (will set width and height of svg). */
   @Input()
   get diameter(): number { return this._diameter; }
@@ -167,10 +176,10 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
   constructor(public _elementRef: ElementRef,
               platform: Platform,
               @Optional() @Inject(DOCUMENT) private _document: any,
-              // @deletion-target 7.0.0 _animationMode and defaults parameters to be made required.
-              @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string,
+              // @deletion-target 7.0.0 animationMode and defaults parameters to be made required.
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) private animationMode?: string,
               @Inject(MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS)
-                  defaults?: MatProgressSpinnerDefaultOptions) {
+                  private defaults?: MatProgressSpinnerDefaultOptions) {
 
     super(_elementRef);
     this._fallbackAnimation = platform.EDGE || platform.TRIDENT;
@@ -269,7 +278,7 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
     'role': 'progressbar',
     'mode': 'indeterminate',
     'class': 'mat-spinner mat-progress-spinner',
-    '[class._mat-animation-noopable]': `_animationMode === 'NoopAnimations'`,
+    '[class._mat-animation-noopable]': `_noopAnimations`,
     '[style.width.px]': 'diameter',
     '[style.height.px]': 'diameter',
   },

From 828b3c0537fa8b766ff948f9fb7682bf84812e0a Mon Sep 17 00:00:00 2001
From: tinayuangao <tinagao@google.com>
Date: Thu, 21 Jun 2018 17:54:51 -0700
Subject: [PATCH 06/44] fix(button-toggle): emit change event when button is
 clicked (#11886)

---
 src/lib/button-toggle/button-toggle.spec.ts | 5 ++---
 src/lib/button-toggle/button-toggle.ts      | 5 ++---
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/lib/button-toggle/button-toggle.spec.ts b/src/lib/button-toggle/button-toggle.spec.ts
index 76c025410f69..b2f200377863 100644
--- a/src/lib/button-toggle/button-toggle.spec.ts
+++ b/src/lib/button-toggle/button-toggle.spec.ts
@@ -345,9 +345,8 @@ describe('MatButtonToggle without forms', () => {
       fixture.detectChanges();
       tick();
 
-      // The default browser behavior is to not emit a change event, when the value was set
-      // to false. That's because the current input type is set to `radio`
-      expect(changeSpy).toHaveBeenCalledTimes(1);
+      // Always emit change event when button toggle is clicked
+      expect(changeSpy).toHaveBeenCalledTimes(2);
     }));
 
     it('should emit a change event from the button toggle group', fakeAsync(() => {
diff --git a/src/lib/button-toggle/button-toggle.ts b/src/lib/button-toggle/button-toggle.ts
index b1b4ab0f0974..1d3f5adaa789 100644
--- a/src/lib/button-toggle/button-toggle.ts
+++ b/src/lib/button-toggle/button-toggle.ts
@@ -447,10 +447,9 @@ export class MatButtonToggle extends _MatButtonToggleMixinBase implements OnInit
         this.buttonToggleGroup._syncButtonToggle(this, this._checked, true);
         this.buttonToggleGroup._onTouched();
       }
-
-      // Emit a change event when the native button does.
-      this.change.emit(new MatButtonToggleChange(this, this.value));
     }
+    // Emit a change event when it's the single selector
+    this.change.emit(new MatButtonToggleChange(this, this.value));
   }
 
   /**

From 3e99c4654d2da0699527f14e8c06a2f307550368 Mon Sep 17 00:00:00 2001
From: Martin Probst <martin@probst.io>
Date: Tue, 26 Jun 2018 02:35:58 +0200
Subject: [PATCH 07/44] fix(overlay): explicitly implement OverlayReference.
 (#11824)

`OverlayRef` structurally matches `OverlayReference`, but does not
explicitly implement it. That works in TypeScript, and should work in
Closure Compiler through the use of `@record`, but for unclear reasons
doesn't.

Explicitly implementing the interface makes this code clearer, and works
around the problem in Closure Compiler while that is being fixed.
---
 src/cdk/overlay/overlay-ref.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/cdk/overlay/overlay-ref.ts b/src/cdk/overlay/overlay-ref.ts
index 6db556d858b7..50fc7faa6bf8 100644
--- a/src/cdk/overlay/overlay-ref.ts
+++ b/src/cdk/overlay/overlay-ref.ts
@@ -14,6 +14,7 @@ import {take} from 'rxjs/operators';
 import {OverlayKeyboardDispatcher} from './keyboard/overlay-keyboard-dispatcher';
 import {OverlayConfig} from './overlay-config';
 import {coerceCssPixelValue, coerceArray} from '@angular/cdk/coercion';
+import {OverlayReference} from './overlay-reference';
 
 
 /** An object where all of its properties cannot be written. */
@@ -25,7 +26,7 @@ export type ImmutableObject<T> = {
  * Reference to an overlay that has been created with the Overlay service.
  * Used to manipulate or dispose of said overlay.
  */
-export class OverlayRef implements PortalOutlet {
+export class OverlayRef implements PortalOutlet, OverlayReference {
   private _backdropElement: HTMLElement | null = null;
   private _backdropClick: Subject<MouseEvent> = new Subject();
   private _attachments = new Subject<void>();

From 194b3c789be00fd7422457f75f87e40b081ea8f9 Mon Sep 17 00:00:00 2001
From: Louis Chandra <glouischandra@google.com>
Date: Tue, 26 Jun 2018 11:03:18 -0700
Subject: [PATCH 08/44] Update MatFormField outline DOM structure (#11771)

---
 .../form-field/_form-field-outline-theme.scss |  6 ----
 src/lib/form-field/form-field-outline.scss    |  8 +++--
 src/lib/form-field/form-field.html            | 29 ++++++++++---------
 3 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/src/lib/form-field/_form-field-outline-theme.scss b/src/lib/form-field/_form-field-outline-theme.scss
index fa738fb6f7f0..87a398243303 100644
--- a/src/lib/form-field/_form-field-outline-theme.scss
+++ b/src/lib/form-field/_form-field-outline-theme.scss
@@ -104,12 +104,6 @@ $mat-form-field-outline-dedupe: 0;
       padding: $infix-padding 0 $infix-padding 0;
     }
 
-    .mat-form-field-outline {
-      // We want the bottom of the outline to start at the end of the content box, not the padding
-      // box, so we move it up by the padding amount.
-      bottom: $wrapper-padding-bottom;
-    }
-
     .mat-form-field-label {
       top: $infix-margin-top + $infix-padding;
       margin-top: $outline-appearance-label-offset;
diff --git a/src/lib/form-field/form-field-outline.scss b/src/lib/form-field/form-field-outline.scss
index 2c91754c0a70..44f4725330b7 100644
--- a/src/lib/form-field/form-field-outline.scss
+++ b/src/lib/form-field/form-field-outline.scss
@@ -31,6 +31,7 @@ $mat-form-field-outline-subscript-padding:
   .mat-form-field-flex {
     padding: 0 $mat-form-field-outline-side-padding 0 $mat-form-field-outline-side-padding;
     margin-top: -$mat-form-field-outline-label-overlap;
+    position: relative;
   }
 
   .mat-form-field-prefix,
@@ -41,9 +42,10 @@ $mat-form-field-outline-subscript-padding:
   .mat-form-field-outline {
     display: flex;
     position: absolute;
-    top: 0;
+    top: $mat-form-field-outline-label-overlap;
     left: 0;
     right: 0;
+    bottom: 0;
     pointer-events: none;
   }
 
@@ -117,12 +119,12 @@ $mat-form-field-outline-subscript-padding:
   }
 
   &:not(.mat-form-field-disabled) .mat-form-field-flex:hover {
-    & ~ .mat-form-field-outline {
+    & .mat-form-field-outline {
       opacity: 0;
       transition: opacity 600ms $swift-ease-out-timing-function;
     }
 
-    & ~ .mat-form-field-outline-thick {
+    & .mat-form-field-outline-thick {
       opacity: 1;
     }
   }
diff --git a/src/lib/form-field/form-field.html b/src/lib/form-field/form-field.html
index 4323d75841c3..29ec0072caf5 100644
--- a/src/lib/form-field/form-field.html
+++ b/src/lib/form-field/form-field.html
@@ -1,6 +1,21 @@
 <div class="mat-form-field-wrapper">
   <div class="mat-form-field-flex" #connectionContainer
        (click)="_control.onContainerClick && _control.onContainerClick($event)">
+
+    <!-- Outline used for outline appearance. -->
+    <ng-container *ngIf="appearance == 'outline'">
+      <div class="mat-form-field-outline">
+        <div class="mat-form-field-outline-start" [style.width.px]="_outlineGapStart"></div>
+        <div class="mat-form-field-outline-gap" [style.width.px]="_outlineGapWidth"></div>
+        <div class="mat-form-field-outline-end"></div>
+      </div>
+      <div class="mat-form-field-outline mat-form-field-outline-thick">
+        <div class="mat-form-field-outline-start" [style.width.px]="_outlineGapStart"></div>
+        <div class="mat-form-field-outline-gap" [style.width.px]="_outlineGapWidth"></div>
+        <div class="mat-form-field-outline-end"></div>
+      </div>
+    </ng-container>
+
     <div class="mat-form-field-prefix" *ngIf="_prefixChildren.length">
       <ng-content select="[matPrefix]"></ng-content>
     </div>
@@ -53,20 +68,6 @@
           [class.mat-warn]="color == 'warn'"></span>
   </div>
 
-  <!-- Outline used for  outline appearance. -->
-  <ng-container *ngIf="appearance == 'outline'">
-    <div class="mat-form-field-outline">
-      <div class="mat-form-field-outline-start" [style.width.px]="_outlineGapStart"></div>
-      <div class="mat-form-field-outline-gap" [style.width.px]="_outlineGapWidth"></div>
-      <div class="mat-form-field-outline-end"></div>
-    </div>
-    <div class="mat-form-field-outline mat-form-field-outline-thick">
-      <div class="mat-form-field-outline-start" [style.width.px]="_outlineGapStart"></div>
-      <div class="mat-form-field-outline-gap" [style.width.px]="_outlineGapWidth"></div>
-      <div class="mat-form-field-outline-end"></div>
-    </div>
-  </ng-container>
-
   <div class="mat-form-field-subscript-wrapper"
        [ngSwitch]="_getDisplayedMessages()">
     <div *ngSwitchCase="'error'" [@transitionMessages]="_subscriptAnimationState">

From 548266b932f68ddc7204558ed098c0910cf083d3 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 26 Jun 2018 20:03:40 +0200
Subject: [PATCH 09/44] fix(menu): scrollable menu not scrolled to top when
 opened for the first time (#11859)

---
 src/lib/menu/menu-directive.ts | 10 ++++++++++
 src/lib/menu/menu.spec.ts      | 19 +++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/src/lib/menu/menu-directive.ts b/src/lib/menu/menu-directive.ts
index 46db8dcb40bd..b9363dfa3d27 100644
--- a/src/lib/menu/menu-directive.ts
+++ b/src/lib/menu/menu-directive.ts
@@ -385,5 +385,15 @@ export class MatMenu implements AfterContentInit, MatMenuPanel<MatMenuItem>, OnI
   _onAnimationDone(event: AnimationEvent) {
     this._animationDone.next(event);
     this._isAnimating = false;
+
+    // Scroll the content element to the top once the animation is done. This is necessary, because
+    // we move focus to the first item while it's still being animated, which can throw the browser
+    // off when it determines the scroll position. Alternatively we can move focus when the
+    // animation is done, however moving focus asynchronously will interrupt screen readers
+    // which are in the process of reading out the menu already. We take the `element` from
+    // the `event` since we can't use a `ViewChild` to access the pane.
+    if (event.toState === 'enter' && this._keyManager.activeItemIndex === 0) {
+      event.element.scrollTop = 0;
+    }
   }
 }
diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts
index 11c3850b5921..aa4076975c57 100644
--- a/src/lib/menu/menu.spec.ts
+++ b/src/lib/menu/menu.spec.ts
@@ -164,6 +164,23 @@ describe('MatMenu', () => {
     expect(document.activeElement).toBe(triggerEl);
   }));
 
+  it('should scroll the panel to the top on open, when it is scrollable', fakeAsync(() => {
+    const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
+    fixture.detectChanges();
+
+    // Add 50 items to make the menu scrollable
+    fixture.componentInstance.extraItems = new Array(50).fill('Hello there');
+    fixture.detectChanges();
+
+    const triggerEl = fixture.componentInstance.triggerEl.nativeElement;
+    dispatchFakeEvent(triggerEl, 'mousedown');
+    triggerEl.click();
+    fixture.detectChanges();
+    tick();
+
+    expect(overlayContainerElement.querySelector('.mat-menu-panel')!.scrollTop).toBe(0);
+  }));
+
   it('should set the proper focus origin when restoring focus after opening by keyboard',
     fakeAsync(() => {
       const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
@@ -1674,6 +1691,7 @@ describe('MatMenu default overrides', () => {
         <fake-icon>unicorn</fake-icon>
         Item with an icon
       </button>
+      <button *ngFor="let item of extraItems" mat-menu-item> {{item}} </button>
     </mat-menu>
   `
 })
@@ -1682,6 +1700,7 @@ class SimpleMenu {
   @ViewChild('triggerEl') triggerEl: ElementRef;
   @ViewChild(MatMenu) menu: MatMenu;
   @ViewChildren(MatMenuItem) items: QueryList<MatMenuItem>;
+  extraItems: string[] = [];
   closeCallback = jasmine.createSpy('menu closed callback');
   backdropClass: string;
 }

From cd32d7885452da1508b376babd7b6370c278c48a Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 26 Jun 2018 21:47:07 +0200
Subject: [PATCH 10/44] fix(select): reset option being marked as selected
 (#11934)

---
 src/lib/select/select.spec.ts | 12 ++++++++++++
 src/lib/select/select.ts      |  1 +
 2 files changed, 13 insertions(+)

diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
index cac35e08f50d..3b7432bc5e15 100644
--- a/src/lib/select/select.spec.ts
+++ b/src/lib/select/select.spec.ts
@@ -2580,6 +2580,18 @@ describe('MatSelect', () => {
       expect(trigger.textContent).not.toContain('None');
     }));
 
+    it('should not mark the reset option as selected ', fakeAsync(() => {
+      options[5].click();
+      fixture.detectChanges();
+      flush();
+
+      fixture.componentInstance.select.open();
+      fixture.detectChanges();
+      flush();
+
+      expect(options[5].classList).not.toContain('mat-selected');
+    }));
+
     it('should not reset when any other falsy option is selected', fakeAsync(() => {
       options[3].click();
       fixture.detectChanges();
diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
index 9172df03dd12..b5468157e5a0 100644
--- a/src/lib/select/select.ts
+++ b/src/lib/select/select.ts
@@ -881,6 +881,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     const wasSelected = this._selectionModel.isSelected(option);
 
     if (option.value == null && !this._multiple) {
+      option.deselect();
       this._selectionModel.clear();
       this._propagateChanges(option.value);
     } else {

From ab14539ab1827d72ea54091f6e0c12279395f490 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 26 Jun 2018 21:47:37 +0200
Subject: [PATCH 11/44] fix(list-key-manager): allow withWrap to be disabled
 (#11920)

---
 src/cdk/a11y/key-manager/list-key-manager.spec.ts | 14 ++++++++++++++
 src/cdk/a11y/key-manager/list-key-manager.ts      |  7 ++++---
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/cdk/a11y/key-manager/list-key-manager.spec.ts b/src/cdk/a11y/key-manager/list-key-manager.spec.ts
index 48db1161f948..b3c9c3b65e57 100644
--- a/src/cdk/a11y/key-manager/list-key-manager.spec.ts
+++ b/src/cdk/a11y/key-manager/list-key-manager.spec.ts
@@ -526,6 +526,20 @@ describe('Key managers', () => {
 
         keyManager.onKeydown(fakeKeyEvents.downArrow);
       });
+
+      it('should be able to disable wrapping', () => {
+        keyManager.withWrap();
+        keyManager.setFirstItemActive();
+        keyManager.onKeydown(fakeKeyEvents.upArrow);
+
+        expect(keyManager.activeItemIndex).toBe(itemList.items.length - 1);
+
+        keyManager.withWrap(false);
+        keyManager.setFirstItemActive();
+        keyManager.onKeydown(fakeKeyEvents.upArrow);
+
+        expect(keyManager.activeItemIndex).toBe(0);
+      });
     });
 
     describe('skip predicate', () => {
diff --git a/src/cdk/a11y/key-manager/list-key-manager.ts b/src/cdk/a11y/key-manager/list-key-manager.ts
index 15fb2838e558..fe653843579a 100644
--- a/src/cdk/a11y/key-manager/list-key-manager.ts
+++ b/src/cdk/a11y/key-manager/list-key-manager.ts
@@ -90,11 +90,12 @@ export class ListKeyManager<T extends ListKeyManagerOption> {
   }
 
   /**
-   * Turns on wrapping mode, which ensures that the active item will wrap to
+   * Configures wrapping mode, which determines whether the active item will wrap to
    * the other end of list when there are no more items in the given direction.
+   * @param shouldWrap Whether the list should wrap when reaching the end.
    */
-  withWrap(): this {
-    this._wrap = true;
+  withWrap(shouldWrap = true): this {
+    this._wrap = shouldWrap;
     return this;
   }
 

From 31c8f6b86f59aaa0a93d36a60ad89dd07e8da94c Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 26 Jun 2018 21:49:57 +0200
Subject: [PATCH 12/44] fix(aria-describer): clear duplicate container coming
 in from the server (#11900)

---
 .../aria-describer/aria-describer.spec.ts     | 11 +++++++++
 src/cdk/a11y/aria-describer/aria-describer.ts | 24 ++++++++++++++-----
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/cdk/a11y/aria-describer/aria-describer.spec.ts b/src/cdk/a11y/aria-describer/aria-describer.spec.ts
index 87d2cf8ab178..2a098fedfea3 100644
--- a/src/cdk/a11y/aria-describer/aria-describer.spec.ts
+++ b/src/cdk/a11y/aria-describer/aria-describer.spec.ts
@@ -121,6 +121,17 @@ describe('AriaDescriber', () => {
     const node: any = document.createComment('Not an element node');
     expect(() => ariaDescriber.describe(node, 'This looks like an element')).not.toThrow();
   });
+
+  it('should clear any pre-existing containers', () => {
+    const extraContainer = document.createElement('div');
+    extraContainer.id = MESSAGES_CONTAINER_ID;
+    document.body.appendChild(extraContainer);
+
+    ariaDescriber.describe(component.element1, 'Hello');
+
+    // Use `querySelectorAll` with an attribute since `getElementById` will stop at the first match.
+    expect(document.querySelectorAll(`[id='${MESSAGES_CONTAINER_ID}']`).length).toBe(1);
+  });
 });
 
 function getMessagesContainer() {
diff --git a/src/cdk/a11y/aria-describer/aria-describer.ts b/src/cdk/a11y/aria-describer/aria-describer.ts
index db23a516eb64..a63e15f397a4 100644
--- a/src/cdk/a11y/aria-describer/aria-describer.ts
+++ b/src/cdk/a11y/aria-describer/aria-describer.ts
@@ -127,7 +127,7 @@ export class AriaDescriber implements OnDestroy {
     messageElement.setAttribute('id', `${CDK_DESCRIBEDBY_ID_PREFIX}-${nextId++}`);
     messageElement.appendChild(this._document.createTextNode(message)!);
 
-    if (!messagesContainer) { this._createMessagesContainer(); }
+    this._createMessagesContainer();
     messagesContainer!.appendChild(messageElement);
 
     messageRegistry.set(message, {messageElement, referenceCount: 0});
@@ -145,11 +145,23 @@ export class AriaDescriber implements OnDestroy {
 
   /** Creates the global container for all aria-describedby messages. */
   private _createMessagesContainer() {
-    messagesContainer = this._document.createElement('div');
-    messagesContainer.setAttribute('id', MESSAGES_CONTAINER_ID);
-    messagesContainer.setAttribute('aria-hidden', 'true');
-    messagesContainer.style.display = 'none';
-    this._document.body.appendChild(messagesContainer);
+    if (!messagesContainer) {
+      const preExistingContainer = this._document.getElementById(MESSAGES_CONTAINER_ID);
+
+      // When going from the server to the client, we may end up in a situation where there's
+      // already a container on the page, but we don't have a reference to it. Clear the
+      // old container so we don't get duplicates. Doing this, instead of emptying the previous
+      // container, should be slightly faster.
+      if (preExistingContainer) {
+        preExistingContainer.parentNode!.removeChild(preExistingContainer);
+      }
+
+      messagesContainer = this._document.createElement('div');
+      messagesContainer.id = MESSAGES_CONTAINER_ID;
+      messagesContainer.setAttribute('aria-hidden', 'true');
+      messagesContainer.style.display = 'none';
+      this._document.body.appendChild(messagesContainer);
+    }
   }
 
   /** Deletes the global messages container. */

From df80dc6fdeb723ccceff294949c8b667a8d10aa3 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 26 Jun 2018 22:02:46 +0200
Subject: [PATCH 13/44] fix(button): not resetting all outlines on firefox
 (#11911)

---
 src/lib/core/style/_button-common.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/lib/core/style/_button-common.scss b/src/lib/core/style/_button-common.scss
index b75c21c1b77e..cfbfc4705738 100644
--- a/src/lib/core/style/_button-common.scss
+++ b/src/lib/core/style/_button-common.scss
@@ -7,4 +7,11 @@
   outline: none;
   border: none;
   -webkit-tap-highlight-color: transparent;
+
+  // The `outline: none` from above works on all browsers, however Firefox also
+  // adds a special `focus-inner` which we have to disable explicitly. See:
+  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Firefox
+  &::-moz-focus-inner {
+    border: 0;
+  }
 }

From 8a9a8bcd96244274d3a3880c65a0fd97ed4ba625 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 26 Jun 2018 22:28:40 +0200
Subject: [PATCH 14/44] fix(card): don't override vertical divider styles
 (#11899)

---
 src/lib/card/card.scss          |  2 +-
 src/lib/divider/divider.spec.ts | 32 ++++++++++++++++++++------------
 src/lib/divider/divider.ts      |  1 +
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/lib/card/card.scss b/src/lib/card/card.scss
index ebe404552f9a..5a7ec82f156c 100644
--- a/src/lib/card/card.scss
+++ b/src/lib/card/card.scss
@@ -16,7 +16,7 @@ $mat-card-header-size: 40px !default;
   padding: $mat-card-default-padding;
   border-radius: $mat-card-border-radius;
 
-  .mat-divider {
+  .mat-divider-horizontal {
     position: absolute;
     left: 0;
     width: 100%;
diff --git a/src/lib/divider/divider.spec.ts b/src/lib/divider/divider.spec.ts
index 9637ea39750f..112577a0d93b 100644
--- a/src/lib/divider/divider.spec.ts
+++ b/src/lib/divider/divider.spec.ts
@@ -1,4 +1,4 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {fakeAsync, ComponentFixture, TestBed} from '@angular/core/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {MatDividerModule} from './divider-module';
@@ -8,12 +8,10 @@ describe('MatDivider', () => {
 
   let fixture: ComponentFixture<MatDividerTestComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports: [MatDividerModule],
-      declarations: [
-        MatDividerTestComponent
-      ],
+      declarations: [MatDividerTestComponent],
     });
 
     TestBed.compileComponents();
@@ -25,8 +23,18 @@ describe('MatDivider', () => {
     fixture.detectChanges();
 
     const divider = fixture.debugElement.query(By.css('mat-divider'));
-    expect(divider.nativeElement.className).toContain('mat-divider');
-    expect(divider.nativeElement.className).toContain('mat-divider-vertical');
+    expect(divider.nativeElement.classList).toContain('mat-divider');
+    expect(divider.nativeElement.classList).toContain('mat-divider-vertical');
+  });
+
+  it('should apply horizontal class to horizontal divider', () => {
+    fixture.componentInstance.vertical = false;
+    fixture.detectChanges();
+
+    const divider = fixture.debugElement.query(By.css('mat-divider'));
+    expect(divider.nativeElement.classList).toContain('mat-divider');
+    expect(divider.nativeElement.classList).not.toContain('mat-divider-vertical');
+    expect(divider.nativeElement.classList).toContain('mat-divider-horizontal');
   });
 
   it('should apply inset class to inset divider', () => {
@@ -34,8 +42,8 @@ describe('MatDivider', () => {
     fixture.detectChanges();
 
     const divider = fixture.debugElement.query(By.css('mat-divider'));
-    expect(divider.nativeElement.className).toContain('mat-divider');
-    expect(divider.nativeElement.className).toContain('mat-divider-inset');
+    expect(divider.nativeElement.classList).toContain('mat-divider');
+    expect(divider.nativeElement.classList).toContain('mat-divider-inset');
   });
 
   it('should apply inset and vertical classes to vertical inset divider', () => {
@@ -44,9 +52,9 @@ describe('MatDivider', () => {
     fixture.detectChanges();
 
     const divider = fixture.debugElement.query(By.css('mat-divider'));
-    expect(divider.nativeElement.className).toContain('mat-divider');
-    expect(divider.nativeElement.className).toContain('mat-divider-inset');
-    expect(divider.nativeElement.className).toContain('mat-divider-vertical');
+    expect(divider.nativeElement.classList).toContain('mat-divider');
+    expect(divider.nativeElement.classList).toContain('mat-divider-inset');
+    expect(divider.nativeElement.classList).toContain('mat-divider-vertical');
   });
 
   it('should add aria roles properly', () => {
diff --git a/src/lib/divider/divider.ts b/src/lib/divider/divider.ts
index 97f4856a9d15..b90e0acafceb 100644
--- a/src/lib/divider/divider.ts
+++ b/src/lib/divider/divider.ts
@@ -16,6 +16,7 @@ import {coerceBooleanProperty} from '@angular/cdk/coercion';
     'role': 'separator',
     '[attr.aria-orientation]': 'vertical ? "vertical" : "horizontal"',
     '[class.mat-divider-vertical]': 'vertical',
+    '[class.mat-divider-horizontal]': '!vertical',
     '[class.mat-divider-inset]': 'inset',
     'class': 'mat-divider'
   },

From 8d6a9ae7c0cf1ca517829469085a645265d8672f Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Tue, 26 Jun 2018 22:29:05 +0200
Subject: [PATCH 15/44] fix(chips): ripples still showing up when globally
 disabled (#11918)

---
 src/lib/chips/chip.ts                   | 14 ++++++++++----
 src/lib/tabs/tab-nav-bar/tab-nav-bar.ts |  1 +
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/lib/chips/chip.ts b/src/lib/chips/chip.ts
index 5d257bfdc212..4a7413d98bed 100644
--- a/src/lib/chips/chip.ts
+++ b/src/lib/chips/chip.ts
@@ -114,21 +114,25 @@ export class MatChipTrailingIcon {}
 })
 export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDestroy, CanColor,
     CanDisable, CanDisableRipple, RippleTarget {
+
+  /** Reference to the RippleRenderer for the chip. */
+  private _chipRipple: RippleRenderer;
+
+  /** Whether the ripples are globally disabled through the RippleGlobalOptions */
+  private _ripplesGloballyDisabled = false;
+
   /**
    * Ripple configuration for ripples that are launched on pointer down.
    * @docs-private
    */
   rippleConfig: RippleConfig = {};
 
-  /** Reference to the RippleRenderer for the chip. */
-  private _chipRipple: RippleRenderer;
-
   /**
    * Whether ripples are disabled on interaction
    * @docs-private
    */
   get rippleDisabled(): boolean {
-    return this.disabled || this.disableRipple;
+    return this.disabled || this.disableRipple || this._ripplesGloballyDisabled;
   }
 
   /** Whether the chip has focus. */
@@ -225,6 +229,8 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
     this._chipRipple.setupTriggerEvents(_elementRef.nativeElement);
 
     if (globalOptions) {
+      this._ripplesGloballyDisabled = !!globalOptions.disabled;
+      // TODO(paul): Once the speedFactor is removed, we no longer need to copy each single option.
       this.rippleConfig = {
         speedFactor: globalOptions.baseSpeedFactor,
         animation: globalOptions.animation,
diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
index b19545ae94d0..e2ffb7c149cf 100644
--- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
+++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
@@ -227,6 +227,7 @@ export class MatTabLink extends _MatTabLinkMixinBase
     this.tabIndex = parseInt(tabIndex) || 0;
 
     if (globalOptions) {
+      // TODO(paul): Once the speedFactor is removed, we no longer need to copy each single option.
       this.rippleConfig = {
         terminateOnPointerUp: globalOptions.terminateOnPointerUp,
         speedFactor: globalOptions.baseSpeedFactor,

From 8e44f8995d2ce7d85702f5c57c17dd412c58f8dc Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 26 Jun 2018 22:43:02 +0200
Subject: [PATCH 16/44] fix(tabs): unable to set aria-label or aria-labelledby
 on tab (#11898)

---
 src/lib/tabs/tab-group.html    |  2 ++
 src/lib/tabs/tab-group.spec.ts | 54 ++++++++++++++++++++++++++++++++++
 src/lib/tabs/tab.ts            | 13 ++++++--
 3 files changed, 67 insertions(+), 2 deletions(-)

diff --git a/src/lib/tabs/tab-group.html b/src/lib/tabs/tab-group.html
index 2f84478496ca..53599f721e2e 100644
--- a/src/lib/tabs/tab-group.html
+++ b/src/lib/tabs/tab-group.html
@@ -11,6 +11,8 @@
        [attr.aria-setsize]="_tabs.length"
        [attr.aria-controls]="_getTabContentId(i)"
        [attr.aria-selected]="selectedIndex == i"
+       [attr.aria-label]="tab.ariaLabel || null"
+       [attr.aria-labelledby]="(!tab.ariaLabel && tab.ariaLabelledby) ? tab.ariaLabelledby : null"
        [class.mat-tab-label-active]="selectedIndex == i"
        [disabled]="tab.disabled"
        [matRippleDisabled]="tab.disabled || disableRipple"
diff --git a/src/lib/tabs/tab-group.spec.ts b/src/lib/tabs/tab-group.spec.ts
index bb760eb8bcee..89e0392a1e28 100644
--- a/src/lib/tabs/tab-group.spec.ts
+++ b/src/lib/tabs/tab-group.spec.ts
@@ -19,6 +19,7 @@ describe('MatTabGroup', () => {
         DisabledTabsTestApp,
         TabGroupWithSimpleApi,
         TemplateTabs,
+        TabGroupWithAriaInputs,
       ],
     });
 
@@ -233,6 +234,46 @@ describe('MatTabGroup', () => {
 
   });
 
+  describe('aria labelling', () => {
+    let fixture: ComponentFixture<TabGroupWithAriaInputs>;
+    let tab: HTMLElement;
+
+    beforeEach(fakeAsync(() => {
+      fixture = TestBed.createComponent(TabGroupWithAriaInputs);
+      fixture.detectChanges();
+      tick();
+      tab = fixture.nativeElement.querySelector('.mat-tab-label');
+    }));
+
+    it('should not set aria-label or aria-labelledby attributes if they are not passed in', () => {
+      expect(tab.hasAttribute('aria-label')).toBe(false);
+      expect(tab.hasAttribute('aria-labelledby')).toBe(false);
+    });
+
+    it('should set the aria-label attribute', () => {
+      fixture.componentInstance.ariaLabel = 'Fruit';
+      fixture.detectChanges();
+
+      expect(tab.getAttribute('aria-label')).toBe('Fruit');
+    });
+
+    it('should set the aria-labelledby attribute', () => {
+      fixture.componentInstance.ariaLabelledby = 'fruit-label';
+      fixture.detectChanges();
+
+      expect(tab.getAttribute('aria-labelledby')).toBe('fruit-label');
+    });
+
+    it('should not be able to set both an aria-label and aria-labelledby', () => {
+      fixture.componentInstance.ariaLabel = 'Fruit';
+      fixture.componentInstance.ariaLabelledby = 'fruit-label';
+      fixture.detectChanges();
+
+      expect(tab.getAttribute('aria-label')).toBe('Fruit');
+      expect(tab.hasAttribute('aria-labelledby')).toBe(false);
+    });
+  });
+
   describe('disable tabs', () => {
     let fixture: ComponentFixture<DisabledTabsTestApp>;
     beforeEach(() => {
@@ -661,3 +702,16 @@ class NestedTabs {}
   `,
  })
  class TemplateTabs {}
+
+
+ @Component({
+  template: `
+  <mat-tab-group>
+    <mat-tab [aria-label]="ariaLabel" [aria-labelledby]="ariaLabelledby"></mat-tab>
+  </mat-tab-group>
+  `
+})
+class TabGroupWithAriaInputs {
+  ariaLabel: string;
+  ariaLabelledby: string;
+}
diff --git a/src/lib/tabs/tab.ts b/src/lib/tabs/tab.ts
index 7d1270715947..79501d1fa767 100644
--- a/src/lib/tabs/tab.ts
+++ b/src/lib/tabs/tab.ts
@@ -53,10 +53,19 @@ export class MatTab extends _MatTabMixinBase implements OnInit, CanDisable, OnCh
   /** Template inside the MatTab view that contains an `<ng-content>`. */
   @ViewChild(TemplateRef) _implicitContent: TemplateRef<any>;
 
-  /** The plain text label for the tab, used when there is no template label. */
+  /** Plain text label for the tab, used when there is no template label. */
   @Input('label') textLabel: string = '';
 
-  /** The portal that will be the hosted content of the tab */
+  /** Aria label for the tab. */
+  @Input('aria-label') ariaLabel: string;
+
+  /**
+   * Reference to the element that the tab is labelled by.
+   * Will be cleared if `aria-label` is set at the same time.
+   */
+  @Input('aria-labelledby') ariaLabelledby: string;
+
+  /** Portal that will be the hosted content of the tab */
   private _contentPortal: TemplatePortal | null = null;
 
   /** @docs-private */

From c55c0e10da085233d4dfe024073a593ac4d1c3dd Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 26 Jun 2018 23:10:44 +0200
Subject: [PATCH 17/44] fix(overlay): clear timeout if the backdrop transition
 completes early (#11938)

---
 src/cdk/overlay/overlay-ref.ts  |  9 +++++++--
 src/cdk/overlay/overlay.spec.ts | 14 ++++++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/cdk/overlay/overlay-ref.ts b/src/cdk/overlay/overlay-ref.ts
index 50fc7faa6bf8..5805c062fd2c 100644
--- a/src/cdk/overlay/overlay-ref.ts
+++ b/src/cdk/overlay/overlay-ref.ts
@@ -332,6 +332,7 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
     let backdropToDetach = this._backdropElement;
 
     if (backdropToDetach) {
+      let timeoutId: number;
       let finishDetach = () => {
         // It may not be attached to anything in certain cases (e.g. unit tests).
         if (backdropToDetach && backdropToDetach.parentNode) {
@@ -344,6 +345,8 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
         if (this._backdropElement == backdropToDetach) {
           this._backdropElement = null;
         }
+
+        clearTimeout(timeoutId);
       };
 
       backdropToDetach.classList.remove('cdk-overlay-backdrop-showing');
@@ -352,7 +355,9 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
         this._toggleClasses(backdropToDetach, this._config.backdropClass, false);
       }
 
-      backdropToDetach.addEventListener('transitionend', finishDetach);
+      this._ngZone.runOutsideAngular(() => {
+        backdropToDetach!.addEventListener('transitionend', finishDetach);
+      });
 
       // If the backdrop doesn't have a transition, the `transitionend` event won't fire.
       // In this case we make it unclickable and we try to remove it after a delay.
@@ -361,7 +366,7 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
       // Run this outside the Angular zone because there's nothing that Angular cares about.
       // If it were to run inside the Angular zone, every test that used Overlay would have to be
       // either async or fakeAsync.
-      this._ngZone.runOutsideAngular(() => setTimeout(finishDetach, 500));
+      timeoutId = this._ngZone.runOutsideAngular(() => setTimeout(finishDetach, 500));
     }
   }
 
diff --git a/src/cdk/overlay/overlay.spec.ts b/src/cdk/overlay/overlay.spec.ts
index 0d5333faa7f9..dbcfc6b51d6a 100644
--- a/src/cdk/overlay/overlay.spec.ts
+++ b/src/cdk/overlay/overlay.spec.ts
@@ -9,6 +9,7 @@ import {
   EventEmitter,
 } from '@angular/core';
 import {Direction, Directionality} from '@angular/cdk/bidi';
+import {dispatchFakeEvent} from '@angular/cdk/testing';
 import {
   ComponentPortal,
   PortalModule,
@@ -292,6 +293,19 @@ describe('Overlay', () => {
     expect(overlayRef.backdropElement).toBeFalsy('Expected backdrop element not to be referenced.');
   }));
 
+  it('should clear the backdrop timeout if the transition finishes first', fakeAsync(() => {
+    const overlayRef = overlay.create({hasBackdrop: true});
+
+    overlayRef.attach(componentPortal);
+    overlayRef.detach();
+
+    const backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop')!;
+    dispatchFakeEvent(backdrop, 'transitionend');
+
+    // Note: we don't `tick` or `flush` here. The assertion is that
+    // `fakeAsync` will throw if we have an unflushed timer.
+  }));
+
   it('should be able to use the `Overlay` provider during app initialization', () => {
     /** Dummy provider that depends on `Overlay`. */
     @Injectable()

From 3acd2a49f6b9845157955a328ba03d6db7fb0ddf Mon Sep 17 00:00:00 2001
From: Silthus <m.silthus@gmail.com>
Date: Wed, 27 Jun 2018 17:39:47 +0200
Subject: [PATCH 18/44] feat(moment-dateadapter): add option to create utc
 dates (#11336)

---
 src/lib/datepicker/datepicker.md              | 11 ++++++
 src/material-moment-adapter/adapter/index.ts  | 11 +++++-
 .../adapter/moment-date-adapter.spec.ts       | 30 +++++++++++++-
 .../adapter/moment-date-adapter.ts            | 39 +++++++++++++++++--
 4 files changed, 84 insertions(+), 7 deletions(-)

diff --git a/src/lib/datepicker/datepicker.md b/src/lib/datepicker/datepicker.md
index 0c7c08f2c537..33f4d3fd8bbf 100644
--- a/src/lib/datepicker/datepicker.md
+++ b/src/lib/datepicker/datepicker.md
@@ -246,6 +246,17 @@ export class MyComponent {
 
 <!-- example(datepicker-moment) -->
 
+By default the `MomentDateAdapter` will creates dates in your time zone specific locale. You can change the default behaviour to parse dates as UTC by providing the `MAT_MOMENT_DATA_ADAPTER_OPTIONS` and setting it to `useUtc: true`.
+
+```ts
+@NgModule({
+  imports: [MatDatepickerModule, MatMomentDateModule],
+  providers: [
+    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
+  ]
+})
+```
+
 It is also possible to create your own `DateAdapter` that works with any date format your app
 requires. This is accomplished by subclassing `DateAdapter` and providing your subclass as the
 `DateAdapter` implementation. You will also want to make sure that the `MAT_DATE_FORMATS` provided
diff --git a/src/material-moment-adapter/adapter/index.ts b/src/material-moment-adapter/adapter/index.ts
index 3f4e7077d4d0..5add99fe0794 100644
--- a/src/material-moment-adapter/adapter/index.ts
+++ b/src/material-moment-adapter/adapter/index.ts
@@ -12,7 +12,10 @@ import {
   MAT_DATE_LOCALE,
   MAT_DATE_FORMATS
 } from '@angular/material';
-import {MomentDateAdapter} from './moment-date-adapter';
+import {
+  MomentDateAdapter,
+  MAT_MOMENT_DATE_ADAPTER_OPTIONS
+} from './moment-date-adapter';
 import {MAT_MOMENT_DATE_FORMATS} from './moment-date-formats';
 
 export * from './moment-date-adapter';
@@ -21,7 +24,11 @@ export * from './moment-date-formats';
 
 @NgModule({
   providers: [
-    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]}
+    {
+      provide: DateAdapter,
+      useClass: MomentDateAdapter,
+      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
+    }
   ],
 })
 export class MomentDateModule {}
diff --git a/src/material-moment-adapter/adapter/moment-date-adapter.spec.ts b/src/material-moment-adapter/adapter/moment-date-adapter.spec.ts
index feba4da338a9..5517df6da4c4 100644
--- a/src/material-moment-adapter/adapter/moment-date-adapter.spec.ts
+++ b/src/material-moment-adapter/adapter/moment-date-adapter.spec.ts
@@ -11,7 +11,7 @@ import {async, inject, TestBed} from '@angular/core/testing';
 import {DateAdapter, DEC, FEB, JAN, MAR, MAT_DATE_LOCALE} from '@angular/material/core';
 import * as moment from 'moment';
 import {MomentDateModule} from './index';
-import {MomentDateAdapter} from './moment-date-adapter';
+import {MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS} from './moment-date-adapter';
 
 
 describe('MomentDateAdapter', () => {
@@ -143,7 +143,8 @@ describe('MomentDateAdapter', () => {
   });
 
   it('should create Moment date', () => {
-    expect(adapter.createDate(2017, JAN, 1).format()).toEqual(moment([2017,  JAN,  1]).format());
+    expect(adapter.createDate(2017, JAN, 1).format())
+      .toEqual(moment([2017,  JAN,  1]).format());
   });
 
   it('should not create Moment date with month over/under-flow', () => {
@@ -164,6 +165,10 @@ describe('MomentDateAdapter', () => {
     expect(adapter.createDate(100, JAN, 1).year()).toBe(100);
   });
 
+  it('should not create Moment date in utc format', () => {
+    expect(adapter.createDate(2017, JAN, 5).isUTC()).toEqual(false);
+  });
+
   it("should get today's date", () => {
     expect(adapter.sameDate(adapter.today(), moment()))
         .toBe(true, "should be equal to today's date");
@@ -408,3 +413,24 @@ describe('MomentDateAdapter with LOCALE_ID override', () => {
     expect(adapter.format(moment([2017,  JAN,  2]), 'll')).toEqual('2 janv. 2017');
   });
 });
+
+describe('MomentDateAdapter with MAT_MOMENT_DATE_ADAPTER_OPTIONS override', () => {
+  let adapter: MomentDateAdapter;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MomentDateModule],
+      providers: [
+        { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(inject([DateAdapter], (d: MomentDateAdapter) => {
+    adapter = d;
+  }));
+
+  it('should create Moment date in utc format if option useUtc is set', () => {
+    expect(adapter.createDate(2017, JAN, 5).isUTC()).toBeTruthy();
+  });
+});
diff --git a/src/material-moment-adapter/adapter/moment-date-adapter.ts b/src/material-moment-adapter/adapter/moment-date-adapter.ts
index caf36dfbf6ad..96a9a64ad470 100644
--- a/src/material-moment-adapter/adapter/moment-date-adapter.ts
+++ b/src/material-moment-adapter/adapter/moment-date-adapter.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Inject, Injectable, Optional} from '@angular/core';
+import {Inject, Injectable, Optional, InjectionToken} from '@angular/core';
 import {DateAdapter, MAT_DATE_LOCALE} from '@angular/material';
 // Depending on whether rollup is used, moment needs to be imported differently.
 // Since Moment.js doesn't have a default export, we normally need to import using the `* as`
@@ -19,6 +19,31 @@ import {default as _rollupMoment, Moment} from 'moment';
 
 const moment = _rollupMoment || _moment;
 
+/** Configurable options for {@see MomentDateAdapter}. */
+export interface MatMomentDateAdapterOptions {
+  /**
+   * Turns the use of utc dates on or off.
+   * Changing this will change how Angular Material components like DatePicker output dates.
+   * {@default false}
+   */
+  useUtc: boolean;
+}
+
+/** InjectionToken for moment date adapter to configure options. */
+export const MAT_MOMENT_DATE_ADAPTER_OPTIONS = new InjectionToken<MatMomentDateAdapterOptions>(
+  'MAT_MOMENT_DATE_ADAPTER_OPTIONS', {
+    providedIn: 'root',
+    factory: MAT_MOMENT_DATE_ADAPTER_OPTIONS_FACTORY
+});
+
+
+/** @docs-private */
+export function MAT_MOMENT_DATE_ADAPTER_OPTIONS_FACTORY(): MatMomentDateAdapterOptions {
+  return {
+    useUtc: false
+  };
+}
+
 
 /** Creates an array and fills it with values. */
 function range<T>(length: number, valueFunction: (index: number) => T): T[] {
@@ -48,7 +73,10 @@ export class MomentDateAdapter extends DateAdapter<Moment> {
     narrowDaysOfWeek: string[]
   };
 
-  constructor(@Optional() @Inject(MAT_DATE_LOCALE) dateLocale: string) {
+  constructor(@Optional() @Inject(MAT_DATE_LOCALE) dateLocale: string,
+    @Optional() @Inject(MAT_MOMENT_DATE_ADAPTER_OPTIONS)
+    private options?: MatMomentDateAdapterOptions) {
+
     super();
     this.setLocale(dateLocale || moment.locale());
   }
@@ -130,7 +158,12 @@ export class MomentDateAdapter extends DateAdapter<Moment> {
       throw Error(`Invalid date "${date}". Date has to be greater than 0.`);
     }
 
-    let result = moment({year, month, date}).locale(this.locale);
+    let result;
+    if (this.options && this.options.useUtc) {
+      result = moment.utc({ year, month, date }).locale(this.locale);
+    } else {
+      result = moment({ year, month, date }).locale(this.locale);
+    }
 
     // If the result isn't valid, the date must have been out of bounds for this month.
     if (!result.isValid()) {

From 5aac678ae8d1cfd2b0cd69dbbce2b09b7d88ab1c Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Wed, 27 Jun 2018 23:34:29 +0200
Subject: [PATCH 19/44] docs(ripple): add note about NoopAnimationsModule
 (#11909)

---
 src/demo-app/toolbar/toolbar-demo.html | 62 +++++++++++++++-----------
 src/lib/core/ripple/ripple.md          |  3 ++
 src/lib/core/ripple/ripple.ts          | 18 +++++---
 3 files changed, 50 insertions(+), 33 deletions(-)

diff --git a/src/demo-app/toolbar/toolbar-demo.html b/src/demo-app/toolbar/toolbar-demo.html
index 2311c9569d20..7fe869b4ea3e 100644
--- a/src/demo-app/toolbar/toolbar-demo.html
+++ b/src/demo-app/toolbar/toolbar-demo.html
@@ -28,19 +28,6 @@
       <span>Primary Toolbar</span>
       <span class="demo-fill-remaining"></span>
 
-      <mat-form-field>
-        <mat-label>Select</mat-label>
-        <mat-select>
-          <mat-option value="1">One</mat-option>
-          <mat-option value="2">Two</mat-option>
-        </mat-select>
-      </mat-form-field>
-
-      <mat-form-field appearance="legacy">
-        <mat-label>Input</mat-label>
-        <input matInput>
-      </mat-form-field>
-
       <button mat-raised-button>Text</button>
       <button mat-raised-button color="accent">Accent</button>
       <button mat-stroked-button>Stroked</button>
@@ -56,19 +43,6 @@
       <span>Accent Toolbar</span>
       <span class="demo-fill-remaining"></span>
 
-      <mat-form-field>
-        <mat-label>Select</mat-label>
-        <mat-select>
-          <mat-option value="1">One</mat-option>
-          <mat-option value="2">Two</mat-option>
-        </mat-select>
-      </mat-form-field>
-
-      <mat-form-field appearance="legacy">
-        <mat-label>Input</mat-label>
-        <input matInput>
-      </mat-form-field>
-
       <button mat-button>Text</button>
       <button mat-flat-button>Flat</button>
       <button mat-mini-fab color="">
@@ -111,4 +85,40 @@
       </mat-toolbar-row>
     </mat-toolbar>
   </p>
+
+  <h3>Toolbar with form-fields</h3>
+
+  <p>
+    <mat-toolbar>
+      <mat-form-field>
+        <mat-label>Select</mat-label>
+        <mat-select>
+          <mat-option value="1">One</mat-option>
+          <mat-option value="2">Two</mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field appearance="legacy">
+        <mat-label>Input</mat-label>
+        <input matInput>
+      </mat-form-field>
+    </mat-toolbar>
+  </p>
+
+  <p>
+    <mat-toolbar color="primary">
+      <mat-form-field>
+        <mat-label>Select</mat-label>
+        <mat-select>
+          <mat-option value="1">One</mat-option>
+          <mat-option value="2">Two</mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field appearance="legacy">
+        <mat-label>Input</mat-label>
+        <input matInput>
+      </mat-form-field>
+    </mat-toolbar>
+  </p>
 </div>
diff --git a/src/lib/core/ripple/ripple.md b/src/lib/core/ripple/ripple.md
index ecd7be5a5750..74bf5736ea2b 100644
--- a/src/lib/core/ripple/ripple.md
+++ b/src/lib/core/ripple/ripple.md
@@ -118,6 +118,9 @@ const globalRippleConfig: RippleGlobalOptions = {
 };
 ```
 
+**Note**: Ripples will also have no animation if the `NoopAnimationsModule` is being used. This
+also means that the durations in the `animation` configuration won't be taken into account.
+
 ### Animation behavior
 
 There are two different animation behaviors for the fade-out of ripples shown in the Material
diff --git a/src/lib/core/ripple/ripple.ts b/src/lib/core/ripple/ripple.ts
index 22f2216b30c7..6a0f846b1492 100644
--- a/src/lib/core/ripple/ripple.ts
+++ b/src/lib/core/ripple/ripple.ts
@@ -31,8 +31,9 @@ export interface RippleGlobalOptions {
   disabled?: boolean;
 
   /**
-   * Configuration for the animation duration of the ripples.
-   * There are two phases with different durations for the ripples.
+   * Configuration for the animation duration of the ripples. There are two phases with different
+   * durations for the ripples. The animation durations will be overwritten if the
+   * `NoopAnimationsModule` is being used.
    */
   animation?: RippleAnimationConfig;
 
@@ -96,7 +97,8 @@ export class MatRipple implements OnInit, OnDestroy, RippleTarget {
 
   /**
    * Configuration for the ripple animation. Allows modifying the enter and exit animation
-   * duration of the ripples.
+   * duration of the ripples. The animation durations will be overwritten if the
+   * `NoopAnimationsModule` is being used.
    */
   @Input('matRippleAnimation') animation: RippleAnimationConfig;
 
@@ -137,10 +139,14 @@ export class MatRipple implements OnInit, OnDestroy, RippleTarget {
               ngZone: NgZone,
               platform: Platform,
               @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) globalOptions: RippleGlobalOptions,
-              @Optional() @Inject(ANIMATION_MODULE_TYPE) private _animationMode?: string) {
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
 
     this._globalOptions = globalOptions || {};
     this._rippleRenderer = new RippleRenderer(this, ngZone, _elementRef, platform);
+
+    if (animationMode === 'NoopAnimations') {
+      this._globalOptions.animation = {enterDuration: 0, exitDuration: 0};
+    }
   }
 
   ngOnInit() {
@@ -163,9 +169,7 @@ export class MatRipple implements OnInit, OnDestroy, RippleTarget {
       centered: this.centered,
       radius: this.radius,
       color: this.color,
-      animation: this._animationMode === 'NoopAnimations' ?
-          {enterDuration: 0, exitDuration: 0} :
-          {...this._globalOptions.animation, ...this.animation},
+      animation: {...this._globalOptions.animation, ...this.animation},
       terminateOnPointerUp: this._globalOptions.terminateOnPointerUp,
       speedFactor: this.speedFactor * (this._globalOptions.baseSpeedFactor || 1),
     };

From ee9ddfbd273e9bd0d0055b36f016022e08b33cee Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 27 Jun 2018 23:46:54 +0200
Subject: [PATCH 20/44] fix(autocomplete): don't override native autocomplete
 attribute (#11926)

---
 src/lib/autocomplete/autocomplete-trigger.ts |  8 +++++++-
 src/lib/autocomplete/autocomplete.spec.ts    | 20 ++++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts
index 7be99c44f356..5217d48597de 100644
--- a/src/lib/autocomplete/autocomplete-trigger.ts
+++ b/src/lib/autocomplete/autocomplete-trigger.ts
@@ -98,7 +98,7 @@ export function getMatAutocompleteMissingPanelError(): Error {
 @Directive({
   selector: `input[matAutocomplete], textarea[matAutocomplete]`,
   host: {
-    'autocomplete': 'off',
+    '[attr.autocomplete]': 'autocompleteAttribute',
     '[attr.role]': 'autocompleteDisabled ? null : "combobox"',
     '[attr.aria-autocomplete]': 'autocompleteDisabled ? null : "list"',
     '[attr.aria-activedescendant]': 'activeOption?.id',
@@ -153,6 +153,12 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
    */
   @Input('matAutocompleteConnectedTo') connectedTo: MatAutocompleteOrigin;
 
+  /**
+   * `autocomplete` attribute to be set on the input element.
+   * @docs-private
+   */
+  @Input('autocomplete') autocompleteAttribute: string = 'off';
+
   /**
    * Whether the autocomplete is disabled. When disabled, the element will
    * act as a regular input and the user won't be able to open the panel.
diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts
index 7d1240b602f4..eee9f95a03c8 100644
--- a/src/lib/autocomplete/autocomplete.spec.ts
+++ b/src/lib/autocomplete/autocomplete.spec.ts
@@ -522,6 +522,15 @@ describe('MatAutocomplete', () => {
     expect(boundingBox.getAttribute('dir')).toEqual('ltr');
   });
 
+  it('should be able to set a custom value for the `autocomplete` attribute', () => {
+    const fixture = createComponent(AutocompleteWithNativeAutocompleteAttribute);
+    const input = fixture.nativeElement.querySelector('input');
+
+    fixture.detectChanges();
+
+    expect(input.getAttribute('autocomplete')).toBe('changed');
+  });
+
   describe('forms integration', () => {
     let fixture: ComponentFixture<SimpleAutocomplete>;
     let input: HTMLInputElement;
@@ -2377,3 +2386,14 @@ class AutocompleteWithDifferentOrigin {
   selectedValue: string;
   values = ['one', 'two', 'three'];
 }
+
+
+@Component({
+  template: `
+    <input autocomplete="changed" [(ngModel)]="value" [matAutocomplete]="auto"/>
+    <mat-autocomplete #auto="matAutocomplete"></mat-autocomplete>
+  `
+})
+class AutocompleteWithNativeAutocompleteAttribute {
+  value: string;
+}

From 42dd82482e4ac812461de162c8719cf9961996ef Mon Sep 17 00:00:00 2001
From: Austin <amcdaniel2@gmail.com>
Date: Thu, 28 Jun 2018 13:42:19 -0500
Subject: [PATCH 21/44] fix(schematics): add parse5 dep (#11647)

---
 package.json                        | 3 +++
 src/lib/schematics/install/index.ts | 7 ++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b1f89784752e..868d46216d54 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,9 @@
     "tslib": "^1.9.0",
     "zone.js": "^0.8.26"
   },
+  "optionalDependencies": {
+    "parse5": "^5.0.0"
+  },
   "devDependencies": {
     "@angular-devkit/core": "^0.5.12",
     "@angular-devkit/schematics": "^0.5.12",
diff --git a/src/lib/schematics/install/index.ts b/src/lib/schematics/install/index.ts
index 649047033629..4539cfc7513d 100644
--- a/src/lib/schematics/install/index.ts
+++ b/src/lib/schematics/install/index.ts
@@ -1,4 +1,4 @@
-import {chain, noop, Rule, Tree, SchematicContext} from '@angular-devkit/schematics';
+import {chain, noop, Rule, Tree, SchematicContext, SchematicsException} from '@angular-devkit/schematics';
 import {NodePackageInstallTask} from '@angular-devkit/schematics/tasks';
 import {addModuleImportToRootModule, getStylesPath} from '../utils/ast';
 import {InsertChange} from '../utils/devkit-utils/change';
@@ -8,6 +8,7 @@ import {angularVersion, materialVersion} from '../utils/lib-versions';
 import {addPackageToPackageJson} from '../utils/package';
 import {Schema} from './schema';
 import {addThemeToAppStyles} from './theming';
+import * as parse5 from 'parse5';
 
 
 /**
@@ -17,6 +18,10 @@ import {addThemeToAppStyles} from './theming';
  *  - Adds Browser Animation to app.momdule
  */
 export default function(options: Schema): Rule {
+  if (!parse5) {
+    throw new SchematicsException('parse5 depedency not found! Please install parse5 from npm to continue.');
+  }
+
   return chain([
     options && options.skipPackageJson ? noop() : addMaterialToPackageJson(),
     addThemeToAppStyles(options),

From e69cf762db222abfd087702e255e8975cfc10589 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 28 Jun 2018 21:30:21 +0200
Subject: [PATCH 22/44] fix(slide-toggle): not updating model from toggle
 method (#11846)

---
 src/lib/slide-toggle/slide-toggle.spec.ts | 28 +++++++++++++++++------
 src/lib/slide-toggle/slide-toggle.ts      |  1 +
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/lib/slide-toggle/slide-toggle.spec.ts b/src/lib/slide-toggle/slide-toggle.spec.ts
index 08a97ade0a72..180c8ee49428 100644
--- a/src/lib/slide-toggle/slide-toggle.spec.ts
+++ b/src/lib/slide-toggle/slide-toggle.spec.ts
@@ -49,7 +49,6 @@ describe('MatSlideToggle without forms', () => {
     let labelElement: HTMLLabelElement;
     let inputElement: HTMLInputElement;
 
-    // This initialization is async() because it needs to wait for ngModel to set the initial value.
     beforeEach(fakeAsync(() => {
       fixture = TestBed.createComponent(SlideToggleBasic);
 
@@ -251,14 +250,17 @@ describe('MatSlideToggle without forms', () => {
       expect(testComponent.lastEvent.checked).toBe(true);
     }));
 
-    it('should support subscription on the change observable', () => {
-      slideToggle.change.subscribe((event: MatSlideToggleChange) => {
-        expect(event.checked).toBe(true);
-      });
+    it('should support subscription on the change observable', fakeAsync(() => {
+      const spy = jasmine.createSpy('change spy');
+      const subscription = slideToggle.change.subscribe(spy);
 
-      slideToggle.toggle();
+      labelElement.click();
       fixture.detectChanges();
-    });
+      tick();
+
+      expect(spy).toHaveBeenCalledWith(jasmine.objectContaining({checked: true}));
+      subscription.unsubscribe();
+    }));
 
     it('should show a ripple when focused by a keyboard action', fakeAsync(() => {
       expect(slideToggleElement.querySelectorAll('.mat-ripple-element').length)
@@ -739,6 +741,18 @@ describe('MatSlideToggle with forms', () => {
 
       expect(modelInstance.pristine).toBe(true);
     }));
+
+    it('should set the model value when toggling via the `toggle` method', fakeAsync(() => {
+      expect(testComponent.modelValue).toBe(false);
+
+      fixture.debugElement.query(By.directive(MatSlideToggle)).componentInstance.toggle();
+      fixture.detectChanges();
+      flushMicrotasks();
+
+      fixture.detectChanges();
+      expect(testComponent.modelValue).toBe(true);
+    }));
+
   });
 
   describe('with a FormControl', () => {
diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts
index 776091cb4daa..b7536af64850 100644
--- a/src/lib/slide-toggle/slide-toggle.ts
+++ b/src/lib/slide-toggle/slide-toggle.ts
@@ -252,6 +252,7 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
   /** Toggles the checked state of the slide-toggle. */
   toggle(): void {
     this.checked = !this.checked;
+    this.onChange(this.checked);
   }
 
   /** Function is called whenever the focus changes for the input element. */

From 96b389cb0795859b592c35305fab875ce3407cbc Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 28 Jun 2018 22:12:25 +0200
Subject: [PATCH 23/44] fix(icon): clearing all content when inserting a new
 SVG (#11956)

---
 src/lib/icon/icon.spec.ts | 26 ++++++++++++++++++++++++++
 src/lib/icon/icon.ts      | 13 +++++++++----
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/lib/icon/icon.spec.ts b/src/lib/icon/icon.spec.ts
index b12c4ea68ed8..d8df8da37346 100644
--- a/src/lib/icon/icon.spec.ts
+++ b/src/lib/icon/icon.spec.ts
@@ -51,6 +51,7 @@ describe('MatIcon', () => {
         IconWithAriaHiddenFalse,
         IconWithBindingAndNgIf,
         InlineIcon,
+        SvgIconWithUserContent,
       ]
     });
 
@@ -397,6 +398,26 @@ describe('MatIcon', () => {
 
       expect(icon.querySelector('svg')).toBeFalsy();
     });
+
+    it('should keep non-SVG user content inside the icon element', fakeAsync(() => {
+      iconRegistry.addSvgIcon('fido', trustUrl('dog.svg'));
+
+      const fixture = TestBed.createComponent(SvgIconWithUserContent);
+      const testComponent = fixture.componentInstance;
+      const iconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
+
+      testComponent.iconName = 'fido';
+      fixture.detectChanges();
+      http.expectOne('dog.svg').flush(FAKE_SVGS.dog);
+
+      const userDiv = iconElement.querySelector('div');
+
+      expect(userDiv).toBeTruthy();
+      expect(iconElement.textContent.trim()).toContain('Hello');
+
+      tick();
+    }));
+
   });
 
   describe('Icons from HTML string', () => {
@@ -706,3 +727,8 @@ class IconWithBindingAndNgIf {
 class InlineIcon {
   inline = false;
 }
+
+@Component({template: `<mat-icon [svgIcon]="iconName"><div>Hello</div></mat-icon>`})
+class SvgIconWithUserContent {
+  iconName: string | undefined = '';
+}
diff --git a/src/lib/icon/icon.ts b/src/lib/icon/icon.ts
index d07002ed220d..fc69c274f326 100644
--- a/src/lib/icon/icon.ts
+++ b/src/lib/icon/icon.ts
@@ -74,7 +74,6 @@ export const _MatIconMixinBase = mixinColor(MatIconBase);
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, CanColor {
-
   /**
    * Whether the icon should be inlined, automatically sizing the icon to match the font size of
    * the element the icon is contained in.
@@ -199,10 +198,16 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can
     const layoutElement: HTMLElement = this._elementRef.nativeElement;
     const childCount = layoutElement.childNodes.length;
 
-    // Remove existing child nodes and add the new SVG element. Note that we can't
-    // use innerHTML, because IE will throw if the element has a data binding.
+    // Remove existing non-element child nodes and SVGs, and add the new SVG element. Note that
+    // we can't use innerHTML, because IE will throw if the element has a data binding.
     for (let i = 0; i < childCount; i++) {
-      layoutElement.removeChild(layoutElement.childNodes[i]);
+      const child = layoutElement.childNodes[i];
+
+      // 1 corresponds to Node.ELEMENT_NODE. We remove all non-element nodes in order to get rid
+      // of any loose text nodes, as well as any SVG elements in order to remove any old icons.
+      if (child.nodeType !== 1 || child.nodeName.toLowerCase() === 'svg') {
+        layoutElement.removeChild(child);
+      }
     }
   }
 

From 79415c4883955de7753732d880b9f730c9e4e5ea Mon Sep 17 00:00:00 2001
From: Joey Perrott <josephperrott.github@gmail.com>
Date: Thu, 28 Jun 2018 14:12:02 -0700
Subject: [PATCH 24/44] fix(button-toggle): allow event bubbling for toggle
 button clicks (#11951)

---
 src/lib/button-toggle/button-toggle.html | 2 +-
 src/lib/button-toggle/button-toggle.ts   | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/lib/button-toggle/button-toggle.html b/src/lib/button-toggle/button-toggle.html
index f0389997704b..b0ddfb90e4c2 100644
--- a/src/lib/button-toggle/button-toggle.html
+++ b/src/lib/button-toggle/button-toggle.html
@@ -6,7 +6,7 @@
         [attr.name]="name || null"
         [attr.aria-label]="ariaLabel"
         [attr.aria-labelledby]="ariaLabelledby"
-        (click)="_onButtonClick($event)">
+        (click)="_onButtonClick()">
   <div class="mat-button-toggle-label-content">
     <ng-content></ng-content>
   </div>
diff --git a/src/lib/button-toggle/button-toggle.ts b/src/lib/button-toggle/button-toggle.ts
index 1d3f5adaa789..c9920a55c162 100644
--- a/src/lib/button-toggle/button-toggle.ts
+++ b/src/lib/button-toggle/button-toggle.ts
@@ -436,9 +436,7 @@ export class MatButtonToggle extends _MatButtonToggleMixinBase implements OnInit
   }
 
   /** Checks the button toggle due to an interaction with the underlying native button. */
-  _onButtonClick(event: Event) {
-    event.stopPropagation();
-
+  _onButtonClick() {
     const newChecked = this._isSingleSelector ? true : !this._checked;
 
     if (newChecked !== this._checked) {

From 0244afc452fff7af3ed5cf5b4b17dcf7d1304737 Mon Sep 17 00:00:00 2001
From: tinayuangao <tinagao@google.com>
Date: Thu, 28 Jun 2018 14:19:25 -0700
Subject: [PATCH 25/44] fix(checkbox): fix checkbox animation when moved
 between view containers (#10589)

---
 src/lib/checkbox/checkbox.spec.ts | 15 +++++++++++++++
 src/lib/checkbox/checkbox.ts      | 11 +++++++++++
 2 files changed, 26 insertions(+)

diff --git a/src/lib/checkbox/checkbox.spec.ts b/src/lib/checkbox/checkbox.spec.ts
index 6bcc2a4aa280..35fbc46ad1c0 100644
--- a/src/lib/checkbox/checkbox.spec.ts
+++ b/src/lib/checkbox/checkbox.spec.ts
@@ -221,6 +221,8 @@ describe('MatCheckbox', () => {
 
       expect(checkboxInstance.checked).toBe(false);
       expect(checkboxInstance.indeterminate).toBe(false);
+
+      flush();
     }));
 
     it('should add and remove disabled state', () => {
@@ -540,6 +542,19 @@ describe('MatCheckbox', () => {
       it('should not initially have any transition classes', () => {
         expect(checkboxNativeElement).not.toMatch(/^mat\-checkbox\-anim/g);
       });
+
+      it('should not have transition classes when animation ends', fakeAsync(() => {
+        testComponent.isIndeterminate = true;
+        fixture.detectChanges();
+
+        expect(checkboxNativeElement.classList)
+          .toContain('mat-checkbox-anim-unchecked-indeterminate');
+
+        flush();
+
+        expect(checkboxNativeElement.classList)
+          .not.toContain('mat-checkbox-anim-unchecked-indeterminate');
+      }));
     });
 
     describe(`when MAT_CHECKBOX_CLICK_ACTION is 'check'`, () => {
diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts
index f35f827fb757..1f206eda7a25 100644
--- a/src/lib/checkbox/checkbox.ts
+++ b/src/lib/checkbox/checkbox.ts
@@ -19,6 +19,7 @@ import {
   forwardRef,
   Inject,
   Input,
+  NgZone,
   OnDestroy,
   Optional,
   Output,
@@ -184,6 +185,7 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
   constructor(elementRef: ElementRef,
               private _changeDetectorRef: ChangeDetectorRef,
               private _focusMonitor: FocusMonitor,
+              private _ngZone: NgZone,
               @Attribute('tabindex') tabIndex: string,
               @Optional() @Inject(MAT_CHECKBOX_CLICK_ACTION)
                   private _clickAction: MatCheckboxClickAction,
@@ -307,6 +309,15 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
 
     if (this._currentAnimationClass.length > 0) {
       element.classList.add(this._currentAnimationClass);
+
+      // Remove the animation class to avoid animation when the checkbox is moved between containers
+      const animationClass = this._currentAnimationClass;
+
+      this._ngZone.runOutsideAngular(() => {
+        setTimeout(() => {
+          element.classList.remove(animationClass);
+        }, 1000);
+      });
     }
   }
 

From 47741aba400e0830c0064bea25796a69e9bcfb01 Mon Sep 17 00:00:00 2001
From: Piotr Tomiak <piotr.tomiak@jetbrains.com>
Date: Fri, 29 Jun 2018 17:34:45 +0200
Subject: [PATCH 26/44] Fix schematics collection JSON. (#11839)

---
 src/lib/schematics/collection.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/schematics/collection.json b/src/lib/schematics/collection.json
index 1024dff9c67c..bf615794d76c 100644
--- a/src/lib/schematics/collection.json
+++ b/src/lib/schematics/collection.json
@@ -7,28 +7,28 @@
       "description": "Adds Angular Material to the application without affecting any templates",
       "factory": "./install",
       "schema": "./install/schema.json",
-      "aliases": ["material-shell", "materialShell"]
+      "aliases": ["material-shell"]
     },
     // Create a dashboard component
     "dashboard": {
       "description": "Create a card-based dashboard component",
       "factory": "./dashboard/index",
       "schema": "./dashboard/schema.json",
-      "aliases": ["material-dashboard", "materialDashboard"]
+      "aliases": ["material-dashboard"]
     },
     // Creates a table component
     "table": {
       "description": "Create a component that displays data with a data-table",
       "factory": "./table/index",
       "schema": "./table/schema.json",
-      "aliases": ["material-table", "materialTable"]
+      "aliases": ["material-table"]
     },
     // Creates toolbar and navigation components
     "nav": {
       "description": "Create a component with a responsive sidenav for navigation",
       "factory": "./nav/index",
       "schema": "./nav/schema.json",
-      "aliases": [ "material-nav", "materialNav ]
+      "aliases": [ "material-nav"]
     },
     // Creates a address form component
     "addressForm": {

From c36e6f3f724d0bb2322f2bae527dc07081c11b29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Jawulski?= <mjawulski@gmail.com>
Date: Fri, 29 Jun 2018 17:48:46 +0200
Subject: [PATCH 27/44] fix: default config check is not  checking test builder
 (#11816)

---
 src/lib/schematics/install/theming.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/schematics/install/theming.ts b/src/lib/schematics/install/theming.ts
index e569f01227e1..61fd55cb28ee 100644
--- a/src/lib/schematics/install/theming.ts
+++ b/src/lib/schematics/install/theming.ts
@@ -95,10 +95,11 @@ function assertDefaultProjectConfig(project: Project) {
 /** Gets whether the Angular CLI project is using the default build configuration. */
 function isProjectUsingDefaultConfig(project: Project) {
   const defaultBuilder = '@angular-devkit/build-angular:browser';
+  const defaultTestBuilder = '@angular-devkit/build-angular:karma';
 
   return project.architect &&
       project.architect['build'] &&
       project.architect['build']['builder'] === defaultBuilder &&
       project.architect['test'] &&
-      project.architect['build']['builder'] === defaultBuilder;
+      project.architect['test']['builder'] === defaultTestBuilder;
 }

From 0e5b30ea26c571f79c22b5d71a773058959d9d81 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 29 Jun 2018 17:50:06 +0200
Subject: [PATCH 28/44] fix(schematics): error in generated unit test (#11884)

---
 .../__name@dasherize__.component.spec.ts                     | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts b/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts
index ad38814c940d..d2720df7d511 100644
--- a/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts
+++ b/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts
@@ -1,6 +1,6 @@
 
 import { fakeAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { MatSidenavModule } from '@angular/material/sidenav';
 import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component';
 
 describe('<%= classify(name) %>Component', () => {
@@ -9,7 +9,8 @@ describe('<%= classify(name) %>Component', () => {
 
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ <%= classify(name) %>Component ]
+      imports: [MatSidenavModule],
+      declarations: [<%= classify(name) %>Component]
     })
     .compileComponents();
 

From 11d708041ffd574b149479188f6062818828b032 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 29 Jun 2018 18:12:22 +0200
Subject: [PATCH 29/44] fix(select): support ctrl+a shortcut for multi-select
 (#11799)

---
 src/lib/select/select.spec.ts | 91 +++++++++++++++++++++++++++++++++++
 src/lib/select/select.ts      |  5 ++
 2 files changed, 96 insertions(+)

diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
index 3b7432bc5e15..a2df8f8545f1 100644
--- a/src/lib/select/select.spec.ts
+++ b/src/lib/select/select.spec.ts
@@ -9,6 +9,7 @@ import {
   SPACE,
   TAB,
   UP_ARROW,
+  A,
 } from '@angular/cdk/keycodes';
 import {OverlayContainer} from '@angular/cdk/overlay';
 import {Platform} from '@angular/cdk/platform';
@@ -3901,6 +3902,96 @@ describe('MatSelect', () => {
       expect(testInstance.control.value).toEqual([null, 'pizza-1', null]);
     }));
 
+    it('should select all options when pressing ctrl + a', () => {
+      const selectElement = fixture.nativeElement.querySelector('mat-select');
+      const options = fixture.componentInstance.options.toArray();
+
+      expect(testInstance.control.value).toBeFalsy();
+      expect(options.every(option => option.selected)).toBe(false);
+
+      fixture.componentInstance.select.open();
+      fixture.detectChanges();
+
+      const event = createKeyboardEvent('keydown', A, selectElement);
+      Object.defineProperty(event, 'ctrlKey', {get: () => true});
+      dispatchEvent(selectElement, event);
+      fixture.detectChanges();
+
+      expect(options.every(option => option.selected)).toBe(true);
+      expect(testInstance.control.value).toEqual([
+        'steak-0',
+        'pizza-1',
+        'tacos-2',
+        'sandwich-3',
+        'chips-4',
+        'eggs-5',
+        'pasta-6',
+        'sushi-7'
+      ]);
+    });
+
+    it('should select all options when pressing ctrl + a when some options are selected', () => {
+      const selectElement = fixture.nativeElement.querySelector('mat-select');
+      const options = fixture.componentInstance.options.toArray();
+
+      options[0].select();
+      fixture.detectChanges();
+
+      expect(testInstance.control.value).toEqual(['steak-0']);
+      expect(options.some(option => option.selected)).toBe(true);
+
+      fixture.componentInstance.select.open();
+      fixture.detectChanges();
+
+      const event = createKeyboardEvent('keydown', A, selectElement);
+      Object.defineProperty(event, 'ctrlKey', {get: () => true});
+      dispatchEvent(selectElement, event);
+      fixture.detectChanges();
+
+      expect(options.every(option => option.selected)).toBe(true);
+      expect(testInstance.control.value).toEqual([
+        'steak-0',
+        'pizza-1',
+        'tacos-2',
+        'sandwich-3',
+        'chips-4',
+        'eggs-5',
+        'pasta-6',
+        'sushi-7'
+      ]);
+    });
+
+    it('should deselect all options with ctrl + a if all options are selected', () => {
+      const selectElement = fixture.nativeElement.querySelector('mat-select');
+      const options = fixture.componentInstance.options.toArray();
+
+      options.forEach(option => option.select());
+      fixture.detectChanges();
+
+      expect(testInstance.control.value).toEqual([
+        'steak-0',
+        'pizza-1',
+        'tacos-2',
+        'sandwich-3',
+        'chips-4',
+        'eggs-5',
+        'pasta-6',
+        'sushi-7'
+      ]);
+      expect(options.every(option => option.selected)).toBe(true);
+
+      fixture.componentInstance.select.open();
+      fixture.detectChanges();
+
+      const event = createKeyboardEvent('keydown', A, selectElement);
+      Object.defineProperty(event, 'ctrlKey', {get: () => true});
+      dispatchEvent(selectElement, event);
+      fixture.detectChanges();
+
+      expect(options.some(option => option.selected)).toBe(false);
+      expect(testInstance.control.value).toEqual([]);
+    });
+
   });
 });
 
diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
index b5468157e5a0..0e9603421ace 100644
--- a/src/lib/select/select.ts
+++ b/src/lib/select/select.ts
@@ -19,6 +19,7 @@ import {
   RIGHT_ARROW,
   SPACE,
   UP_ARROW,
+  A,
 } from '@angular/cdk/keycodes';
 import {
   CdkConnectedOverlay,
@@ -705,6 +706,10 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     } else if ((keyCode === ENTER || keyCode === SPACE) && manager.activeItem) {
       event.preventDefault();
       manager.activeItem._selectViaInteraction();
+    } else if (this._multiple && keyCode === A && event.ctrlKey) {
+      event.preventDefault();
+      const hasDeselectedOptions = this.options.some(option => !option.selected);
+      this.options.forEach(option => hasDeselectedOptions ? option.select() : option.deselect());
     } else {
       const previouslyFocusedIndex = manager.activeItemIndex;
 

From 6b1f703aca58fb7503ac7705a5056860ad922448 Mon Sep 17 00:00:00 2001
From: Leibale Eidelman <leibale1998@gmail.com>
Date: Fri, 29 Jun 2018 19:34:43 +0300
Subject: [PATCH 30/44] fix(GlobalPositionStrategy): justifyContent center
 ignored when direction is RTL (#11877)

---
 .../position/global-position-strategy.spec.ts      | 14 ++++++++++++++
 .../overlay/position/global-position-strategy.ts   |  2 ++
 2 files changed, 16 insertions(+)

diff --git a/src/cdk/overlay/position/global-position-strategy.spec.ts b/src/cdk/overlay/position/global-position-strategy.spec.ts
index ffee929a135a..00941834c04f 100644
--- a/src/cdk/overlay/position/global-position-strategy.spec.ts
+++ b/src/cdk/overlay/position/global-position-strategy.spec.ts
@@ -270,6 +270,20 @@ describe('GlobalPositonStrategy', () => {
       expect(elementStyle.height).toBe('300px');
     });
 
+  it('should center the element in RTL', () => {
+      attachOverlay({
+          direction: 'rtl',
+          positionStrategy: overlay.position()
+              .global()
+              .centerHorizontally()
+              .centerVertically()
+      });
+
+      const parentStyle = (overlayRef.overlayElement.parentNode as HTMLElement).style;
+      expect(parentStyle.justifyContent).toBe('center');
+      expect(parentStyle.alignItems).toBe('center');
+  });
+
   it('should invert `justify-content` when using `left` in RTL', () => {
     attachOverlay({
       positionStrategy: overlay.position().global().left('0'),
diff --git a/src/cdk/overlay/position/global-position-strategy.ts b/src/cdk/overlay/position/global-position-strategy.ts
index d6f56820a036..389c67506288 100644
--- a/src/cdk/overlay/position/global-position-strategy.ts
+++ b/src/cdk/overlay/position/global-position-strategy.ts
@@ -169,6 +169,8 @@ export class GlobalPositionStrategy implements PositionStrategy {
 
     if (config.width === '100%') {
       parentStyles.justifyContent = 'flex-start';
+    } else if (this._justifyContent === 'center') {
+        parentStyles.justifyContent = 'center';
     } else if (this._overlayRef.getConfig().direction === 'rtl') {
       // In RTL the browser will invert `flex-start` and `flex-end` automatically, but we
       // don't want that because our positioning is explicitly `left` and `right`, hence

From de13ec9278dec94e073cbd05fd371ca0a3dc8a51 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 29 Jun 2018 18:35:23 +0200
Subject: [PATCH 31/44] fix(sort): arrow visible while parent row is being
 animated (#11827)

---
 src/lib/sort/sort-animations.ts | 6 +++---
 src/lib/sort/sort-header.scss   | 4 ++++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/lib/sort/sort-animations.ts b/src/lib/sort/sort-animations.ts
index b9b82ba7c5d8..7f0526a6773b 100644
--- a/src/lib/sort/sort-animations.ts
+++ b/src/lib/sort/sort-animations.ts
@@ -54,11 +54,11 @@ export const matSortAnimations: {
   arrowOpacity: trigger('arrowOpacity', [
     state('desc-to-active, asc-to-active, active', style({opacity: 1})),
     state('desc-to-hint, asc-to-hint, hint', style({opacity: .54})),
-    state('hint-to-desc, active-to-desc, desc, hint-to-asc, active-to-asc, asc',
+    state('hint-to-desc, active-to-desc, desc, hint-to-asc, active-to-asc, asc, void',
         style({opacity: 0})),
     // Transition between all states except for immediate transitions
-    transition('* => asc, * => desc, * => active, * => hint', animate('0ms')),
-    transition('* <=> *', animate(SORT_ANIMATION_TRANSITION))
+    transition('* => asc, * => desc, * => active, * => hint, * => void', animate('0ms')),
+    transition('* <=> *', animate(SORT_ANIMATION_TRANSITION)),
   ]),
 
   /**
diff --git a/src/lib/sort/sort-header.scss b/src/lib/sort/sort-header.scss
index 56420668bace..da758bf44c15 100644
--- a/src/lib/sort/sort-header.scss
+++ b/src/lib/sort/sort-header.scss
@@ -38,6 +38,10 @@ $mat-sort-header-arrow-hint-opacity: 0.38;
   position: relative;
   display: flex;
 
+  // Start off at 0 since the arrow may become visible while parent are animating.
+  // This will be overwritten when the arrow animations kick in. See #11819.
+  opacity: 0;
+
   &,
   [dir='rtl'] .mat-sort-header-position-before & {
     margin: 0 0 0 $mat-sort-header-arrow-margin;

From 243343947ec8b67762dedf1c3b951402661d56cf Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 29 Jun 2018 18:35:57 +0200
Subject: [PATCH 32/44] fix(overlay): don't dispatch key events to overlays
 that don't handle them (#11810)

---
 .../overlay-keyboard-dispatcher.spec.ts        | 16 +++++++++++++++-
 .../keyboard/overlay-keyboard-dispatcher.ts    | 18 +++++++++++++-----
 src/cdk/overlay/overlay-ref.ts                 | 14 +++++++++++++-
 src/lib/bottom-sheet/bottom-sheet-ref.ts       |  2 +-
 4 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/src/cdk/overlay/keyboard/overlay-keyboard-dispatcher.spec.ts b/src/cdk/overlay/keyboard/overlay-keyboard-dispatcher.spec.ts
index 0f89c8c1b545..3f8ddd4dca8b 100644
--- a/src/cdk/overlay/keyboard/overlay-keyboard-dispatcher.spec.ts
+++ b/src/cdk/overlay/keyboard/overlay-keyboard-dispatcher.spec.ts
@@ -53,7 +53,7 @@ describe('OverlayKeyboardDispatcher', () => {
     const overlayOne = overlay.create();
     const overlayTwo = overlay.create();
     const overlayOneSpy = jasmine.createSpy('overlayOne keyboard event spy');
-    const overlayTwoSpy = jasmine.createSpy('overlayOne keyboard event spy');
+    const overlayTwoSpy = jasmine.createSpy('overlayTwo keyboard event spy');
 
     overlayOne.keydownEvents().subscribe(overlayOneSpy);
     overlayTwo.keydownEvents().subscribe(overlayTwoSpy);
@@ -143,6 +143,20 @@ describe('OverlayKeyboardDispatcher', () => {
     expect(body.removeEventListener).toHaveBeenCalledWith('keydown', jasmine.any(Function), true);
   });
 
+  it('should skip overlays that do not have keydown event subscriptions', () => {
+    const overlayOne = overlay.create();
+    const overlayTwo = overlay.create();
+    const overlayOneSpy = jasmine.createSpy('overlayOne keyboard event spy');
+
+    overlayOne.keydownEvents().subscribe(overlayOneSpy);
+    keyboardDispatcher.add(overlayOne);
+    keyboardDispatcher.add(overlayTwo);
+
+    dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
+
+    expect(overlayOneSpy).toHaveBeenCalled();
+  });
+
 });
 
 
diff --git a/src/cdk/overlay/keyboard/overlay-keyboard-dispatcher.ts b/src/cdk/overlay/keyboard/overlay-keyboard-dispatcher.ts
index 89d5ab345d93..a0886b218a88 100644
--- a/src/cdk/overlay/keyboard/overlay-keyboard-dispatcher.ts
+++ b/src/cdk/overlay/keyboard/overlay-keyboard-dispatcher.ts
@@ -75,11 +75,19 @@ export class OverlayKeyboardDispatcher implements OnDestroy {
 
   /** Keyboard event listener that will be attached to the body. */
   private _keydownListener = (event: KeyboardEvent) => {
-    if (this._attachedOverlays.length) {
-      // Dispatch the keydown event to the top overlay. We want to target the most recent overlay,
-      // rather than trying to match where the event came from, because some components might open
-      // an overlay, but keep focus on a trigger element (e.g. for select and autocomplete).
-      this._attachedOverlays[this._attachedOverlays.length - 1]._keydownEvents.next(event);
+    const overlays = this._attachedOverlays;
+
+    for (let i = overlays.length - 1; i > -1; i--) {
+      // Dispatch the keydown event to the top overlay which has subscribers to its keydown events.
+      // We want to target the most recent overlay, rather than trying to match where the event came
+      // from, because some components might open an overlay, but keep focus on a trigger element
+      // (e.g. for select and autocomplete). We skip overlays without keydown event subscriptions,
+      // because we don't want overlays that don't handle keyboard events to block the ones below
+      // them that do.
+      if (overlays[i]._keydownEventSubscriptions > 0) {
+        overlays[i]._keydownEvents.next(event);
+        break;
+      }
     }
   }
 }
diff --git a/src/cdk/overlay/overlay-ref.ts b/src/cdk/overlay/overlay-ref.ts
index 5805c062fd2c..f55a36abcfb7 100644
--- a/src/cdk/overlay/overlay-ref.ts
+++ b/src/cdk/overlay/overlay-ref.ts
@@ -31,10 +31,22 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
   private _backdropClick: Subject<MouseEvent> = new Subject();
   private _attachments = new Subject<void>();
   private _detachments = new Subject<void>();
+  private _keydownEventsObservable: Observable<KeyboardEvent> = Observable.create(observer => {
+    const subscription = this._keydownEvents.subscribe(observer);
+    this._keydownEventSubscriptions++;
+
+    return () => {
+      subscription.unsubscribe();
+      this._keydownEventSubscriptions--;
+    };
+  });
 
   /** Stream of keydown events dispatched to this overlay. */
   _keydownEvents = new Subject<KeyboardEvent>();
 
+  /** Amount of subscriptions to the keydown events. */
+  _keydownEventSubscriptions = 0;
+
   constructor(
       private _portalOutlet: PortalOutlet,
       private _host: HTMLElement,
@@ -218,7 +230,7 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
 
   /** Gets an observable of keydown events targeted to this overlay. */
   keydownEvents(): Observable<KeyboardEvent> {
-    return this._keydownEvents.asObservable();
+    return this._keydownEventsObservable;
   }
 
   /** Gets the the current overlay configuration, which is immutable. */
diff --git a/src/lib/bottom-sheet/bottom-sheet-ref.ts b/src/lib/bottom-sheet/bottom-sheet-ref.ts
index 3c964abe9df4..9b7765884a31 100644
--- a/src/lib/bottom-sheet/bottom-sheet-ref.ts
+++ b/src/lib/bottom-sheet/bottom-sheet-ref.ts
@@ -62,7 +62,7 @@ export class MatBottomSheetRef<T = any, R = any> {
     if (!containerInstance.bottomSheetConfig.disableClose) {
       merge(
         _overlayRef.backdropClick(),
-        _overlayRef._keydownEvents.pipe(filter(event => event.keyCode === ESCAPE))
+        _overlayRef.keydownEvents().pipe(filter(event => event.keyCode === ESCAPE))
       ).subscribe(() => this.dismiss());
     }
   }

From 4f3cbfe7ecd0ca7ba3676ea47f0d5c0da28728dc Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Fri, 29 Jun 2018 18:36:37 +0200
Subject: [PATCH 33/44] fix(tab-nav-bar): ripples still showing up when
 globally disabled (#11865)

---
 src/lib/tabs/tab-nav-bar/tab-nav-bar.ts | 7 ++++++-
 tools/gulp/tasks/screenshots.ts         | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
index e2ffb7c149cf..889b3c057bce 100644
--- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
+++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
@@ -189,6 +189,9 @@ export class MatTabLink extends _MatTabLinkMixinBase
   /** Reference to the RippleRenderer for the tab-link. */
   protected _tabLinkRipple: RippleRenderer;
 
+  /** Whether the ripples are globally disabled through the RippleGlobalOptions */
+  private _ripplesGloballyDisabled = false;
+
   /** Whether the link is active. */
   @Input()
   get active(): boolean { return this._isActive; }
@@ -210,7 +213,8 @@ export class MatTabLink extends _MatTabLinkMixinBase
    * @docs-private
    */
   get rippleDisabled(): boolean {
-    return this.disabled || this.disableRipple || this._tabNavBar.disableRipple;
+    return this.disabled || this.disableRipple || this._tabNavBar.disableRipple ||
+      this._ripplesGloballyDisabled;
   }
 
   constructor(private _tabNavBar: MatTabNav,
@@ -227,6 +231,7 @@ export class MatTabLink extends _MatTabLinkMixinBase
     this.tabIndex = parseInt(tabIndex) || 0;
 
     if (globalOptions) {
+      this._ripplesGloballyDisabled = !!globalOptions.disabled;
       // TODO(paul): Once the speedFactor is removed, we no longer need to copy each single option.
       this.rippleConfig = {
         terminateOnPointerUp: globalOptions.terminateOnPointerUp,
diff --git a/tools/gulp/tasks/screenshots.ts b/tools/gulp/tasks/screenshots.ts
index 8d2f53d56b79..9ea5afe47ab0 100644
--- a/tools/gulp/tasks/screenshots.ts
+++ b/tools/gulp/tasks/screenshots.ts
@@ -89,7 +89,7 @@ function setFileResult(database: Database, prNumber: string, fileName: string, r
 
 /** Sets the full diff result for the current Pull Request that runs inside of Travis. */
 function setPullRequestResult(database: Database, prNumber: string, result: boolean) {
-  return getPullRequestRef(database, prNumber).child('result').child(pullRequestSha).set(result);
+  return getPullRequestRef(database, prNumber).child('result').child(pullRequestSha!).set(result);
 }
 
 /** Returns the Firebase Reference that contains all data related to the specified PR. */

From a3dba7690c4f17bba523b6ae6d3c37ee173b3046 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 29 Jun 2018 18:37:31 +0200
Subject: [PATCH 34/44] fix(select): not resuming keyboard selection after
 clicking on single-select option (#11882)

---
 src/lib/select/select.spec.ts | 22 ++++++++++++++++++++++
 src/lib/select/select.ts      |  6 ++++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
index a2df8f8545f1..be4159cd5c84 100644
--- a/src/lib/select/select.spec.ts
+++ b/src/lib/select/select.spec.ts
@@ -282,6 +282,28 @@ describe('MatSelect', () => {
               'Expected value from second option to have been set on the model.');
         }));
 
+        it('should resume focus from selected item after selecting via click', fakeAsync(() => {
+          const formControl = fixture.componentInstance.control;
+          const options = fixture.componentInstance.options.toArray();
+
+          expect(formControl.value).toBeFalsy('Expected no initial value.');
+
+          fixture.componentInstance.select.open();
+          fixture.detectChanges();
+          flush();
+
+          (overlayContainerElement.querySelectorAll('mat-option')[3] as HTMLElement).click();
+          fixture.detectChanges();
+          flush();
+
+          expect(formControl.value).toBe(options[3].value);
+
+          dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
+          fixture.detectChanges();
+
+          expect(formControl.value).toBe(options[4].value);
+        }));
+
         it('should select options via LEFT/RIGHT arrow keys on a closed select', fakeAsync(() => {
           const formControl = fixture.componentInstance.control;
           const options = fixture.componentInstance.options.toArray();
diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
index 0e9603421ace..cd11b499f569 100644
--- a/src/lib/select/select.ts
+++ b/src/lib/select/select.ts
@@ -892,12 +892,14 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     } else {
       option.selected ? this._selectionModel.select(option) : this._selectionModel.deselect(option);
 
+      if (isUserInput) {
+        this._keyManager.setActiveItem(option);
+      }
+
       if (this.multiple) {
         this._sortValues();
 
         if (isUserInput) {
-          this._keyManager.setActiveItem(option);
-
           // In case the user selected the option with their mouse, we
           // want to restore focus back to the trigger, in order to
           // prevent the select keyboard controls from clashing with

From 4ac64da9d1e82c0e746540e62d9529dad62f5d7a Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Fri, 29 Jun 2018 18:37:54 +0200
Subject: [PATCH 35/44] fix(selection-list): disabling list doesn't disable
 ripples of options (#11955)

---
 src/lib/list/selection-list.spec.ts | 21 ++++++++++++++++++-
 src/lib/list/selection-list.ts      | 32 +++++++++++++++++++++++++----
 2 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/src/lib/list/selection-list.spec.ts b/src/lib/list/selection-list.spec.ts
index 6d0e9837940f..c03e1b096817 100644
--- a/src/lib/list/selection-list.spec.ts
+++ b/src/lib/list/selection-list.spec.ts
@@ -13,6 +13,7 @@ import {
   ViewChildren,
 } from '@angular/core';
 import {async, ComponentFixture, fakeAsync, TestBed, tick, flush} from '@angular/core/testing';
+import {MatRipple} from '@angular/material/core';
 import {By} from '@angular/platform-browser';
 import {
   MatListModule,
@@ -626,6 +627,23 @@ describe('MatSelectionList without forms', () => {
 
       expect(selectList.selected.length).toBe(0);
     });
+
+    it('should update state of options if list state has changed', () => {
+      // To verify that the template of the list options has been re-rendered after the disabled
+      // property of the selection list has been updated, the ripple directive can be used.
+      // Inspecting the host classes of the options doesn't work because those update as part
+      // of the parent template (of the selection-list).
+      const listOptionRipple = listOption[2].query(By.directive(MatRipple)).injector.get(MatRipple);
+
+      expect(listOptionRipple.disabled)
+        .toBe(true, 'Expected ripples of list option to be disabled');
+
+      fixture.componentInstance.disabled = false;
+      fixture.detectChanges();
+
+      expect(listOptionRipple.disabled)
+        .toBe(false, 'Expected ripples of list option to be enabled');
+    });
   });
 
   describe('with checkbox position after', () => {
@@ -977,7 +995,7 @@ class SelectionListWithCheckboxPositionAfter {
 }
 
 @Component({template: `
-  <mat-selection-list id="selection-list-3" [disabled]=true>
+  <mat-selection-list id="selection-list-3" [disabled]="disabled">
     <mat-list-option checkboxPosition="after">
       Inbox (disabled selection-option)
     </mat-list-option>
@@ -992,6 +1010,7 @@ class SelectionListWithCheckboxPositionAfter {
     </mat-list-option>
   </mat-selection-list>`})
 class SelectionListWithListDisabled {
+  disabled: boolean = true;
 }
 
 @Component({template: `
diff --git a/src/lib/list/selection-list.ts b/src/lib/list/selection-list.ts
index 10d81fc7571c..0b15ee8f0d93 100644
--- a/src/lib/list/selection-list.ts
+++ b/src/lib/list/selection-list.ts
@@ -30,11 +30,9 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import {
-  CanDisable,
   CanDisableRipple,
   MatLine,
   MatLineSetter,
-  mixinDisabled,
   mixinDisableRipple,
 } from '@angular/material/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
@@ -43,7 +41,7 @@ import {Subscription} from 'rxjs';
 
 /** @docs-private */
 export class MatSelectionListBase {}
-export const _MatSelectionListMixinBase = mixinDisableRipple(mixinDisabled(MatSelectionListBase));
+export const _MatSelectionListMixinBase = mixinDisableRipple(MatSelectionListBase);
 
 /** @docs-private */
 export class MatListOptionBase {}
@@ -238,6 +236,15 @@ export class MatListOption extends _MatListOptionMixinBase
     this._changeDetector.markForCheck();
     return true;
   }
+
+  /**
+   * Notifies Angular that the option needs to be checked in the next change detection run. Mainly
+   * used to trigger an update of the list option if the disabled state of the selection list
+   * changed.
+   */
+  _markForCheck() {
+    this._changeDetector.markForCheck();
+  }
 }
 
 
@@ -265,7 +272,7 @@ export class MatListOption extends _MatListOptionMixinBase
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class MatSelectionList extends _MatSelectionListMixinBase implements FocusableOption,
-    CanDisable, CanDisableRipple, AfterContentInit, ControlValueAccessor, OnDestroy {
+    CanDisableRipple, AfterContentInit, ControlValueAccessor, OnDestroy {
 
   /** The FocusKeyManager which handles focus. */
   _keyManager: FocusKeyManager<MatListOption>;
@@ -287,6 +294,22 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu
    */
   @Input() compareWith: (o1: any, o2: any) => boolean;
 
+  /** Whether the selection list is disabled. */
+  @Input()
+  get disabled(): boolean { return this._disabled; }
+  set disabled(value: boolean) {
+    this._disabled = coerceBooleanProperty(value);
+
+    // The `MatSelectionList` and `MatListOption` are using the `OnPush` change detection
+    // strategy. Therefore the options will not check for any changes if the `MatSelectionList`
+    // changed its state. Since we know that a change to `disabled` property of the list affects
+    // the state of the options, we manually mark each option for check.
+    if (this.options) {
+      this.options.forEach(option => option._markForCheck());
+    }
+  }
+  private _disabled: boolean = false;
+
   /** The currently selected options. */
   selectedOptions: SelectionModel<MatListOption> = new SelectionModel<MatListOption>(true);
 
@@ -296,6 +319,7 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu
   /** Used for storing the values that were assigned before the options were initialized. */
   private _tempValues: string[]|null;
 
+  /** Subscription to sync value changes in the SelectionModel back to the SelectionList. */
   private _modelChanges = Subscription.EMPTY;
 
   /** View to model callback that should be called if the list or its options lost focus. */

From 8f3b316e8b744ce946816e1c89f578553b7eba4f Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 29 Jun 2018 18:38:28 +0200
Subject: [PATCH 36/44] fix(focus-monitor): allow native focus options to be
 passed through focusVia (#11962)

---
 .../a11y/focus-monitor/focus-monitor.spec.ts  | 13 ++++++++++++
 src/cdk/a11y/focus-monitor/focus-monitor.ts   | 20 +++++++++++++++----
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/cdk/a11y/focus-monitor/focus-monitor.spec.ts b/src/cdk/a11y/focus-monitor/focus-monitor.spec.ts
index 331e240434cf..5d443fb24610 100644
--- a/src/cdk/a11y/focus-monitor/focus-monitor.spec.ts
+++ b/src/cdk/a11y/focus-monitor/focus-monitor.spec.ts
@@ -212,6 +212,19 @@ describe('FocusMonitor', () => {
 
     expect(buttonElement.classList.length).toBe(0, 'button should not have any focus classes');
   }));
+
+  it('should pass focus options to the native focus method', fakeAsync(() => {
+    spyOn(buttonElement, 'focus');
+
+    focusMonitor.focusVia(buttonElement, 'program', {preventScroll: true});
+    fixture.detectChanges();
+    tick();
+
+    expect(buttonElement.focus).toHaveBeenCalledWith(jasmine.objectContaining({
+      preventScroll: true
+    }));
+  }));
+
 });
 
 
diff --git a/src/cdk/a11y/focus-monitor/focus-monitor.ts b/src/cdk/a11y/focus-monitor/focus-monitor.ts
index 5628a307be65..a2cb0c337197 100644
--- a/src/cdk/a11y/focus-monitor/focus-monitor.ts
+++ b/src/cdk/a11y/focus-monitor/focus-monitor.ts
@@ -29,6 +29,16 @@ export const TOUCH_BUFFER_MS = 650;
 export type FocusOrigin = 'touch' | 'mouse' | 'keyboard' | 'program' | null;
 
 
+/**
+ * Corresponds to the options that can be passed to the native `focus` event.
+ * via https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
+ */
+export interface FocusOptions {
+  /** Whether the browser should scroll to the element when it is focused. */
+  preventScroll?: boolean;
+}
+
+
 type MonitoredElementInfo = {
   unlisten: Function,
   checkChildren: boolean,
@@ -135,15 +145,17 @@ export class FocusMonitor implements OnDestroy {
 
   /**
    * Focuses the element via the specified focus origin.
-   * @param element The element to focus.
-   * @param origin The focus origin.
+   * @param element Element to focus.
+   * @param origin Focus origin.
+   * @param focusOption Options that can be used to configure the focus behavior.
    */
-  focusVia(element: HTMLElement, origin: FocusOrigin): void {
+  focusVia(element: HTMLElement, origin: FocusOrigin, options?: FocusOptions): void {
     this._setOriginForCurrentEventQueue(origin);
 
     // `focus` isn't available on the server
     if (typeof element.focus === 'function') {
-      element.focus();
+      // Cast the element to `any`, because the TS typings don't have the `options` parameter yet.
+      (element as any).focus(options);
     }
   }
 

From a7c4d0cceacfa8df330bad8aa9da17fa7c4d34bf Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 29 Jun 2018 19:43:58 +0200
Subject: [PATCH 37/44] fix(autocomplete): reposition the panel when the amount
 of options changes (#4469)

---
 src/lib/autocomplete/autocomplete-trigger.ts |  5 +++
 src/lib/autocomplete/autocomplete.spec.ts    | 33 ++++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts
index 5217d48597de..b7d90b210b10 100644
--- a/src/lib/autocomplete/autocomplete-trigger.ts
+++ b/src/lib/autocomplete/autocomplete-trigger.ts
@@ -453,6 +453,11 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
         switchMap(() => {
           this._resetActiveItem();
           this.autocomplete._setVisibility();
+
+          if (this.panelOpen) {
+            this._overlayRef!.updatePosition();
+          }
+
           return this.panelClosingActions;
         }),
         // when the first closing event occurs...
diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts
index eee9f95a03c8..60249655992d 100644
--- a/src/lib/autocomplete/autocomplete.spec.ts
+++ b/src/lib/autocomplete/autocomplete.spec.ts
@@ -1606,6 +1606,39 @@ describe('MatAutocomplete', () => {
       subscription!.unsubscribe();
     }));
 
+    it('should reposition the panel when the amount of options changes', fakeAsync(() => {
+      let formField = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement;
+      let inputReference = formField.querySelector('.mat-form-field-flex');
+      let input = inputReference.querySelector('input');
+
+      formField.style.bottom = '100px';
+      formField.style.position = 'fixed';
+
+      typeInElement('Cali', input);
+      fixture.detectChanges();
+      tick();
+      zone.simulateZoneExit();
+      fixture.detectChanges();
+
+      const inputBottom = inputReference.getBoundingClientRect().bottom;
+      const panel = overlayContainerElement.querySelector('.mat-autocomplete-panel')!;
+      const panelTop = panel.getBoundingClientRect().top;
+
+      expect(Math.floor(inputBottom)).toBe(Math.floor(panelTop),
+          `Expected panel top to match input bottom when there is only one option.`);
+
+      typeInElement('', input);
+      fixture.detectChanges();
+      tick();
+      fixture.detectChanges();
+
+      const inputTop = inputReference.getBoundingClientRect().top;
+      const panelBottom = panel.getBoundingClientRect().bottom;
+
+      expect(Math.floor(inputTop)).toBe(Math.floor(panelBottom),
+          `Expected panel switch to the above position if the options no longer fit.`);
+    }));
+
   });
 
   describe('panel closing', () => {

From ce90bede46a5c2e9b2f9b753d997037207a76886 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Fri, 29 Jun 2018 20:04:44 +0200
Subject: [PATCH 38/44] fix: parse5 not listed as dependency for material
 (#11981)

---
 package-lock.json    | 32 +++++++++++++++++---------------
 package.json         |  4 +---
 src/lib/package.json |  3 +++
 3 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index aaddad721364..4e7660b24361 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "material2-srcs",
-  "version": "6.2.1",
+  "version": "6.3.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -3304,7 +3304,7 @@
         "split": {
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
-          "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
+          "integrity": "sha1-YFvZvjA6pZ+zX5Ip++oN3snqB9k=",
           "dev": true,
           "requires": {
             "through": "2"
@@ -4759,7 +4759,7 @@
     },
     "event-stream": {
       "version": "3.3.4",
-      "resolved": "http://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz",
+      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz",
       "integrity": "sha1-SrTJoPWlTbkzi0w02Gv86PSzVXE=",
       "dev": true,
       "requires": {
@@ -5651,7 +5651,7 @@
         "google-auto-auth": {
           "version": "0.7.2",
           "resolved": "https://registry.npmjs.org/google-auto-auth/-/google-auto-auth-0.7.2.tgz",
-          "integrity": "sha512-ux2n2AE2g3+vcLXwL4dP/M12SFMRX5dzCzBfhAEkTeAB7dpyGdOIEj7nmUx0BHKaCcUQrRWg9kT63X/Mmtk1+A==",
+          "integrity": "sha1-v5NS1cSgiXvzH9nEkQKLdl++px4=",
           "dev": true,
           "requires": {
             "async": "^2.3.0",
@@ -5696,7 +5696,7 @@
         "tmp": {
           "version": "0.0.33",
           "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
-          "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
+          "integrity": "sha1-bTQzWIl2jSGyvNoKonfO07G/rfk=",
           "dev": true,
           "requires": {
             "os-tmpdir": "~1.0.2"
@@ -6015,14 +6015,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -6042,8 +6040,7 @@
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
@@ -6191,7 +6188,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -10536,6 +10532,12 @@
           "resolved": "https://registry.npmjs.org/acorn/-/acorn-2.7.0.tgz",
           "integrity": "sha1-q259nYhqrKiwhbwzEreaGYQz8Oc=",
           "dev": true
+        },
+        "parse5": {
+          "version": "1.5.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-1.5.1.tgz",
+          "integrity": "sha1-m387DeMr543CQBsXVzzK8Pb1nZQ=",
+          "dev": true
         }
       }
     },
@@ -13157,7 +13159,7 @@
     },
     "onetime": {
       "version": "1.1.0",
-      "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
       "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
       "dev": true
     },
@@ -13514,9 +13516,9 @@
       "dev": true
     },
     "parse5": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-1.5.1.tgz",
-      "integrity": "sha1-m387DeMr543CQBsXVzzK8Pb1nZQ=",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.0.0.tgz",
+      "integrity": "sha512-0ywuiUOnpWWeil5grH2rxjyTJoeQVwyBuO2si6QIU9dWtj2npjuyK1HaY1RbLnVfDhEbhyAPNUBKRK0Xj2xE0w==",
       "dev": true
     },
     "parsejson": {
diff --git a/package.json b/package.json
index 868d46216d54..5192dd0f6756 100644
--- a/package.json
+++ b/package.json
@@ -41,9 +41,6 @@
     "tslib": "^1.9.0",
     "zone.js": "^0.8.26"
   },
-  "optionalDependencies": {
-    "parse5": "^5.0.0"
-  },
   "devDependencies": {
     "@angular-devkit/core": "^0.5.12",
     "@angular-devkit/schematics": "^0.5.12",
@@ -119,6 +116,7 @@
     "minimist": "^1.2.0",
     "moment": "^2.18.1",
     "node-sass": "^4.5.3",
+    "parse5": "^5.0.0",
     "protractor": "^5.2.0",
     "request": "^2.83.0",
     "resolve-bin": "^0.4.0",
diff --git a/src/lib/package.json b/src/lib/package.json
index 34d53270ae6e..f0e82608d3cf 100644
--- a/src/lib/package.json
+++ b/src/lib/package.json
@@ -29,6 +29,9 @@
   "dependencies": {
     "tslib": "^1.7.1"
   },
+  "optionalDependencies": {
+    "parse5": "^5.0.0"
+  },
   "schematics": "./schematics/collection.json",
   "ng-update": {
     "migrations": "./schematics/migration.json",

From 1e164b658779d417c1c26a7a920a392c7035304b Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 29 Jun 2018 20:11:21 +0200
Subject: [PATCH 39/44] fix(tabs): maintain selected tab when new tabs are
 added or removed (#9132)

---
 src/lib/tabs/tab-group.spec.ts | 48 ++++++++++++++++++++++++++++++++--
 src/lib/tabs/tab-group.ts      | 10 +++++++
 2 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/src/lib/tabs/tab-group.spec.ts b/src/lib/tabs/tab-group.spec.ts
index 89e0392a1e28..77d762455b44 100644
--- a/src/lib/tabs/tab-group.spec.ts
+++ b/src/lib/tabs/tab-group.spec.ts
@@ -333,14 +333,17 @@ describe('MatTabGroup', () => {
         expect(tabs[3].origin).toBeGreaterThanOrEqual(0);
 
         // Add a new tab in the beginning and select it, expect an origin < than 0 (animate left)
-        fixture.componentInstance.tabs.push({label: 'New tab', content: 'to left of index'});
         fixture.componentInstance.selectedIndex = 0;
         fixture.detectChanges();
         tick();
 
+        fixture.componentInstance.tabs.push({label: 'New tab', content: 'to left of index'});
+        fixture.detectChanges();
+        tick();
+
         tabs = component._tabs.toArray();
         expect(tabs[0].origin).toBeLessThan(0);
-      }));
+    }));
 
 
     it('should update selected index if the last tab removed while selected', fakeAsync(() => {
@@ -360,6 +363,47 @@ describe('MatTabGroup', () => {
       expect(component.selectedIndex).toBe(numberOfTabs - 2);
     }));
 
+
+    it('should maintain the selected tab if a new tab is added', () => {
+      fixture.detectChanges();
+      const component: MatTabGroup =
+          fixture.debugElement.query(By.css('mat-tab-group')).componentInstance;
+
+      fixture.componentInstance.selectedIndex = 1;
+      fixture.detectChanges();
+
+      // Add a new tab at the beginning.
+      fixture.componentInstance.tabs.unshift({label: 'New tab', content: 'at the start'});
+      fixture.detectChanges();
+
+      expect(component.selectedIndex).toBe(2);
+      expect(component._tabs.toArray()[2].isActive).toBe(true);
+    });
+
+
+    it('should maintain the selected tab if a tab is removed', () => {
+      // Add a couple of tabs so we have more to work with.
+      fixture.componentInstance.tabs.push(
+        {label: 'New tab', content: 'with new content'},
+        {label: 'Another new tab', content: 'with newer content'}
+      );
+
+      // Select the second-to-last tab.
+      fixture.componentInstance.selectedIndex = 3;
+      fixture.detectChanges();
+
+      const component: MatTabGroup =
+          fixture.debugElement.query(By.css('mat-tab-group')).componentInstance;
+
+      // Remove a tab right before the selected one.
+      fixture.componentInstance.tabs.splice(2, 1);
+      fixture.detectChanges();
+
+      expect(component.selectedIndex).toBe(1);
+      expect(component._tabs.toArray()[1].isActive).toBe(true);
+    });
+
+
   });
 
   describe('async tabs', () => {
diff --git a/src/lib/tabs/tab-group.ts b/src/lib/tabs/tab-group.ts
index 5e9c4749fb79..5d45471f1ee7 100644
--- a/src/lib/tabs/tab-group.ts
+++ b/src/lib/tabs/tab-group.ts
@@ -200,6 +200,16 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn
     // Subscribe to changes in the amount of tabs, in order to be
     // able to re-render the content as new tabs are added or removed.
     this._tabsSubscription = this._tabs.changes.subscribe(() => {
+      const tabs = this._tabs.toArray();
+
+      // Maintain the previously-selected tab if a new tab is added or removed.
+      for (let i = 0; i < tabs.length; i++) {
+        if (tabs[i].isActive) {
+          this._indexToSelect = i;
+          break;
+        }
+      }
+
       this._subscribeToTabLabels();
       this._changeDetectorRef.markForCheck();
     });

From 80d9a9aba23d60ac39e34b418b0e10060ad215be Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 29 Jun 2018 23:03:50 +0200
Subject: [PATCH 40/44] fix(focus-trap): not attaching correctly if element is
 not in the DOM on init (#7665)

---
 src/cdk/a11y/focus-trap/focus-trap.ts | 55 ++++++++++++++++++---------
 1 file changed, 37 insertions(+), 18 deletions(-)

diff --git a/src/cdk/a11y/focus-trap/focus-trap.ts b/src/cdk/a11y/focus-trap/focus-trap.ts
index 8dbf83827aae..9e406e5fd6b3 100644
--- a/src/cdk/a11y/focus-trap/focus-trap.ts
+++ b/src/cdk/a11y/focus-trap/focus-trap.ts
@@ -17,6 +17,7 @@ import {
   Input,
   NgZone,
   OnDestroy,
+  DoCheck,
 } from '@angular/core';
 import {take} from 'rxjs/operators';
 import {InteractivityChecker} from '../interactivity-checker/interactivity-checker';
@@ -32,6 +33,7 @@ import {InteractivityChecker} from '../interactivity-checker/interactivity-check
 export class FocusTrap {
   private _startAnchor: HTMLElement | null;
   private _endAnchor: HTMLElement | null;
+  private _hasAttached = false;
 
   /** Whether the focus trap is active. */
   get enabled(): boolean { return this._enabled; }
@@ -72,30 +74,34 @@ export class FocusTrap {
   /**
    * Inserts the anchors into the DOM. This is usually done automatically
    * in the constructor, but can be deferred for cases like directives with `*ngIf`.
+   * @returns Whether the focus trap managed to attach successfuly. This may not be the case
+   * if the target element isn't currently in the DOM.
    */
-  attachAnchors(): void {
-    if (!this._startAnchor) {
-      this._startAnchor = this._createAnchor();
-    }
-
-    if (!this._endAnchor) {
-      this._endAnchor = this._createAnchor();
+  attachAnchors(): boolean {
+    // If we're not on the browser, there can be no focus to trap.
+    if (this._hasAttached) {
+      return true;
     }
 
     this._ngZone.runOutsideAngular(() => {
-      this._startAnchor!.addEventListener('focus', () => {
-        this.focusLastTabbableElement();
-      });
-
-      this._endAnchor!.addEventListener('focus', () => {
-        this.focusFirstTabbableElement();
-      });
+      if (!this._startAnchor) {
+        this._startAnchor = this._createAnchor();
+        this._startAnchor!.addEventListener('focus', () => this.focusLastTabbableElement());
+      }
 
-      if (this._element.parentNode) {
-        this._element.parentNode.insertBefore(this._startAnchor!, this._element);
-        this._element.parentNode.insertBefore(this._endAnchor!, this._element.nextSibling);
+      if (!this._endAnchor) {
+        this._endAnchor = this._createAnchor();
+        this._endAnchor!.addEventListener('focus', () => this.focusFirstTabbableElement());
       }
     });
+
+    if (this._element.parentNode) {
+      this._element.parentNode.insertBefore(this._startAnchor!, this._element);
+      this._element.parentNode.insertBefore(this._endAnchor!, this._element.nextSibling);
+      this._hasAttached = true;
+    }
+
+    return this._hasAttached;
   }
 
   /**
@@ -217,6 +223,13 @@ export class FocusTrap {
     return !!redirectToElement;
   }
 
+  /**
+   * Checks whether the focus trap has successfuly been attached.
+   */
+  hasAttached(): boolean {
+    return this._hasAttached;
+  }
+
   /** Get the first tabbable element from a DOM subtree (inclusive). */
   private _getFirstTabbableElement(root: HTMLElement): HTMLElement | null {
     if (this._checker.isFocusable(root) && this._checker.isTabbable(root)) {
@@ -313,7 +326,7 @@ export class FocusTrapFactory {
   selector: '[cdkTrapFocus]',
   exportAs: 'cdkTrapFocus',
 })
-export class CdkTrapFocus implements OnDestroy, AfterContentInit {
+export class CdkTrapFocus implements OnDestroy, AfterContentInit, DoCheck {
   private _document: Document;
 
   /** Underlying FocusTrap instance. */
@@ -364,4 +377,10 @@ export class CdkTrapFocus implements OnDestroy, AfterContentInit {
       this.focusTrap.focusInitialElementWhenReady();
     }
   }
+
+  ngDoCheck() {
+    if (!this.focusTrap.hasAttached()) {
+      this.focusTrap.attachAnchors();
+    }
+  }
 }

From 82016c2bc69adb05724d30ebcb0deb2bdd9bd28a Mon Sep 17 00:00:00 2001
From: Jeremy Elbourn <jelbourn@gmail.com>
Date: Fri, 29 Jun 2018 15:30:30 -0700
Subject: [PATCH 41/44] fix(sidenav): remove margin from content instead of
 setting zero (#11986)

---
 src/lib/sidenav/drawer.spec.ts | 32 +++++++++++++++++++++++++++++---
 src/lib/sidenav/drawer.ts      |  8 +++++++-
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/lib/sidenav/drawer.spec.ts b/src/lib/sidenav/drawer.spec.ts
index f76bbcf43ed8..fa849db920aa 100644
--- a/src/lib/sidenav/drawer.spec.ts
+++ b/src/lib/sidenav/drawer.spec.ts
@@ -564,7 +564,7 @@ describe('MatDrawerContainer', () => {
     fixture.detectChanges();
     tick();
 
-    expect(parseInt(contentElement.style.marginLeft)).toBeLessThan(initialMargin);
+    expect(contentElement.style.marginLeft).toBe('');
   }));
 
   it('should recalculate the margin if the drawer mode is changed', fakeAsync(() => {
@@ -584,7 +584,7 @@ describe('MatDrawerContainer', () => {
     fixture.componentInstance.mode = 'over';
     fixture.detectChanges();
 
-    expect(parseInt(contentElement.style.marginLeft)).toBeLessThan(initialMargin);
+    expect(contentElement.style.marginLeft).toBe('');
   }));
 
   it('should recalculate the margin if the direction has changed', fakeAsync(() => {
@@ -604,7 +604,7 @@ describe('MatDrawerContainer', () => {
     fixture.componentInstance.direction = 'rtl';
     fixture.detectChanges();
 
-    expect(parseInt(contentElement.style.marginLeft)).toBe(0);
+    expect(contentElement.style.marginLeft).toBe('');
     expect(parseInt(contentElement.style.marginRight)).toBe(margin);
   }));
 
@@ -651,6 +651,32 @@ describe('MatDrawerContainer', () => {
       discardPeriodicTasks();
     }));
 
+  it('should not set a style property if it would be zero', fakeAsync(() => {
+      const fixture = TestBed.createComponent(AutosizeDrawer);
+      fixture.detectChanges();
+
+      const content = fixture.debugElement.nativeElement.querySelector('.mat-drawer-content');
+      expect(content.style.marginLeft).toBe('', 'Margin should be omitted when drawer is closed');
+
+      // Open the drawer and resolve the open animation.
+      fixture.componentInstance.drawer.open();
+      fixture.detectChanges();
+      tick();
+      fixture.detectChanges();
+
+      expect(content.style.marginLeft).not.toBe('', 'Margin should be present when drawer is open');
+
+      // Close the drawer and resolve the close animation.
+      fixture.componentInstance.drawer.close();
+      fixture.detectChanges();
+      tick();
+      fixture.detectChanges();
+
+      expect(content.style.marginLeft).toBe('', 'Margin should be removed after drawer close.');
+
+      discardPeriodicTasks();
+    }));
+
     it('should be able to toggle whether the container has a backdrop', fakeAsync(() => {
       const fixture = TestBed.createComponent(BasicTestApp);
       fixture.detectChanges();
diff --git a/src/lib/sidenav/drawer.ts b/src/lib/sidenav/drawer.ts
index ef1aa22a0cdf..65ac4d5d093e 100644
--- a/src/lib/sidenav/drawer.ts
+++ b/src/lib/sidenav/drawer.ts
@@ -703,7 +703,13 @@ export class MatDrawerContainer implements AfterContentInit, DoCheck, OnDestroy
     }
 
     if (left !== this._contentMargins.left || right !== this._contentMargins.right) {
-      this._contentMargins = {left, right};
+      this._contentMargins = {
+        // If either `right` or `left` is zero, don't set a style to the element. This
+        // allows users to specify a custom size via CSS class in SSR scenarios where the
+        // measured widths will always be zero.
+        left: left || null,
+        right: right || null,
+      };
 
       // Pull back into the NgZone since in some cases we could be outside. We need to be careful
       // to do it only when something changed, otherwise we can end up hitting the zone too often.

From c4c4d5b7fbb441f56fd4a3833fe57cb34cf27358 Mon Sep 17 00:00:00 2001
From: Joey Perrott <josephperrott.github@gmail.com>
Date: Mon, 2 Jul 2018 10:58:46 -0700
Subject: [PATCH 42/44] chore: update changelog for 6.3.2 (#12019)

---
 CHANGELOG.md      | 64 +++++++++++++++++++++++++++++++++++++++++++++++
 package-lock.json |  2 +-
 package.json      |  2 +-
 3 files changed, 66 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6bc6f1021721..e4bbf541e53c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,67 @@
+<a name="6.3.2"></a>
+## [6.3.2](https://github.com/angular/material2/compare/6.3.0...6.3.2) (2018-07-02)
+
+
+### Bug Fixes
+
+* **aria-describer:** clear duplicate container coming in from the server ([#11900](https://github.com/angular/material2/issues/11900)) ([31c8f6b](https://github.com/angular/material2/commit/31c8f6b))
+* **autocomplete:** don't override native autocomplete attribute ([#11926](https://github.com/angular/material2/issues/11926)) ([ee9ddfb](https://github.com/angular/material2/commit/ee9ddfb))
+* **autocomplete:** reposition the panel when the amount of options changes ([#4469](https://github.com/angular/material2/issues/4469)) ([a7c4d0c](https://github.com/angular/material2/commit/a7c4d0c))
+* **button:** not resetting all outlines on firefox ([#11911](https://github.com/angular/material2/issues/11911)) ([df80dc6](https://github.com/angular/material2/commit/df80dc6))
+* **button-toggle:** allow event bubbling for toggle button clicks ([#11951](https://github.com/angular/material2/issues/11951)) ([79415c4](https://github.com/angular/material2/commit/79415c4))
+* **button-toggle:** emit change event when button is clicked ([#11886](https://github.com/angular/material2/issues/11886)) ([828b3c0](https://github.com/angular/material2/commit/828b3c0))
+* **button-toggle:** use native button and aria-pressed for button-toggle ([#10990](https://github.com/angular/material2/issues/10990)) ([b959e18](https://github.com/angular/material2/commit/b959e18))
+* **card:** don't override vertical divider styles ([#11899](https://github.com/angular/material2/issues/11899)) ([8a9a8bc](https://github.com/angular/material2/commit/8a9a8bc))
+* **checkbox:** fix checkbox animation when moved between view containers ([#10589](https://github.com/angular/material2/issues/10589)) ([0244afc](https://github.com/angular/material2/commit/0244afc))
+* **chips:** ripples still showing up when globally disabled ([#11918](https://github.com/angular/material2/issues/11918)) ([8d6a9ae](https://github.com/angular/material2/commit/8d6a9ae))
+* **focus-monitor:** allow native focus options to be passed through focusVia ([#11962](https://github.com/angular/material2/issues/11962)) ([8f3b316](https://github.com/angular/material2/commit/8f3b316))
+* **focus-trap:** not attaching correctly if element is not in the DOM on init ([#7665](https://github.com/angular/material2/issues/7665)) ([80d9a9a](https://github.com/angular/material2/commit/80d9a9a))
+* **GlobalPositionStrategy:** justifyContent center ignored when direction is RTL ([#11877](https://github.com/angular/material2/issues/11877)) ([6b1f703](https://github.com/angular/material2/commit/6b1f703))
+* **icon:** clearing all content when inserting a new SVG ([#11956](https://github.com/angular/material2/issues/11956)) ([96b389c](https://github.com/angular/material2/commit/96b389c))
+* **list-key-manager:** allow withWrap to be disabled ([#11920](https://github.com/angular/material2/issues/11920)) ([ab14539](https://github.com/angular/material2/commit/ab14539))
+* **menu:** panel positions not changing if position is updated after first open ([#11707](https://github.com/angular/material2/issues/11707)) ([671ad82](https://github.com/angular/material2/commit/671ad82)), closes [#11668](https://github.com/angular/material2/issues/11668)
+* **menu:** scrollable menu not scrolled to top when opened for the first time ([#11859](https://github.com/angular/material2/issues/11859)) ([548266b](https://github.com/angular/material2/commit/548266b))
+* **moment-dateadapter:** add option to create utc dates ([#11336](https://github.com/angular/material2/issues/11336)) ([3acd2a4](https://github.com/angular/material2/commit/3acd2a4))
+* **overlay:** clear timeout if the backdrop transition completes early ([#11938](https://github.com/angular/material2/issues/11938)) ([c55c0e1](https://github.com/angular/material2/commit/c55c0e1))
+* **overlay:** don't dispatch key events to overlays that don't handle them ([#11810](https://github.com/angular/material2/issues/11810)) ([2433439](https://github.com/angular/material2/commit/2433439))
+* **overlay:** explicitly implement OverlayReference. ([#11824](https://github.com/angular/material2/issues/11824)) ([3e99c46](https://github.com/angular/material2/commit/3e99c46))
+* **progress-spinner:** create internal default to force animations to always be on ([#11462](https://github.com/angular/material2/issues/11462)) ([11f3993](https://github.com/angular/material2/commit/11f3993))
+* **schematics:** add parse5 dep ([#11647](https://github.com/angular/material2/issues/11647)) ([42dd824](https://github.com/angular/material2/commit/42dd824))
+* **schematics:** error in generated unit test ([#11884](https://github.com/angular/material2/issues/11884)) ([0e5b30e](https://github.com/angular/material2/commit/0e5b30e))
+* **select:** don't blur label when trigger is blurred while the panel is opened ([#11537](https://github.com/angular/material2/issues/11537)) ([6c9c3fe](https://github.com/angular/material2/commit/6c9c3fe))
+* **select:** not resuming keyboard selection after clicking on single-select option ([#11882](https://github.com/angular/material2/issues/11882)) ([a3dba76](https://github.com/angular/material2/commit/a3dba76))
+* **select:** reset option being marked as selected ([#11934](https://github.com/angular/material2/issues/11934)) ([cd32d78](https://github.com/angular/material2/commit/cd32d78))
+* **select:** support ctrl+a shortcut for multi-select ([#11799](https://github.com/angular/material2/issues/11799)) ([11d7080](https://github.com/angular/material2/commit/11d7080))
+* **selection-list:** disabling list doesn't disable ripples of options ([#11955](https://github.com/angular/material2/issues/11955)) ([4ac64da](https://github.com/angular/material2/commit/4ac64da))
+* **sidenav:** remove margin from content instead of setting zero ([#11986](https://github.com/angular/material2/issues/11986)) ([82016c2](https://github.com/angular/material2/commit/82016c2))
+* default config check is not  checking test builder ([#11816](https://github.com/angular/material2/issues/11816)) ([c36e6f3](https://github.com/angular/material2/commit/c36e6f3))
+* parse5 not listed as dependency for material ([#11981](https://github.com/angular/material2/issues/11981)) ([ce90bed](https://github.com/angular/material2/commit/ce90bed))
+* **slide-toggle:** not updating model from toggle method ([#11846](https://github.com/angular/material2/issues/11846)) ([e69cf76](https://github.com/angular/material2/commit/e69cf76))
+* **sort:** arrow visible while parent row is being animated ([#11827](https://github.com/angular/material2/issues/11827)) ([de13ec9](https://github.com/angular/material2/commit/de13ec9))
+* **tab-nav-bar:** ripples still showing up when globally disabled ([#11865](https://github.com/angular/material2/issues/11865)) ([4f3cbfe](https://github.com/angular/material2/commit/4f3cbfe))
+* **table:** use solid color for sorting arrow ([#11533](https://github.com/angular/material2/issues/11533)) ([d083d76](https://github.com/angular/material2/commit/d083d76)), closes [#11340](https://github.com/angular/material2/issues/11340)
+* **tabs:** maintain selected tab when new tabs are added or removed ([#9132](https://github.com/angular/material2/issues/9132)) ([1e164b6](https://github.com/angular/material2/commit/1e164b6))
+* **tabs:** unable to set aria-label or aria-labelledby on tab ([#11898](https://github.com/angular/material2/issues/11898)) ([8e44f89](https://github.com/angular/material2/commit/8e44f89))
+* **tree:** fix dynamic tree example and demo not closing children ([#11148](https://github.com/angular/material2/issues/11148)) [#11728](https://github.com/angular/material2/issues/11728) ([128e2a0](https://github.com/angular/material2/commit/128e2a0))
+
+
+<a name="6.3.1"></a>
+## [6.3.1 string-sole](https://github.com/angular/material2/compare/6.3.0...6.3.1) (2018-06-26)
+
+
+### Bug Fixes
+
+* **button-toggle:** emit change event when button is clicked ([#11886](https://github.com/angular/material2/issues/11886)) ([828b3c0](https://github.com/angular/material2/commit/828b3c0))
+* **button-toggle:** use native button and aria-pressed for button-toggle ([#10990](https://github.com/angular/material2/issues/10990)) ([b959e18](https://github.com/angular/material2/commit/b959e18))
+* **menu:** panel positions not changing if position is updated after first open ([#11707](https://github.com/angular/material2/issues/11707)) ([671ad82](https://github.com/angular/material2/commit/671ad82)), closes [#11668](https://github.com/angular/material2/issues/11668)
+* **overlay:** explicitly implement OverlayReference. ([#11824](https://github.com/angular/material2/issues/11824)) ([3e99c46](https://github.com/angular/material2/commit/3e99c46))
+* **progress-spinner:** create internal default to force animations to always be on ([#11462](https://github.com/angular/material2/issues/11462)) ([11f3993](https://github.com/angular/material2/commit/11f3993))
+* **select:** don't blur label when trigger is blurred while the panel is opened ([#11537](https://github.com/angular/material2/issues/11537)) ([6c9c3fe](https://github.com/angular/material2/commit/6c9c3fe))
+* **table:** use solid color for sorting arrow ([#11533](https://github.com/angular/material2/issues/11533)) ([d083d76](https://github.com/angular/material2/commit/d083d76)), closes [#11340](https://github.com/angular/material2/issues/11340)
+* **tree:** fix dynamic tree example and demo not closing children ([#11148](https://github.com/angular/material2/issues/11148)) [#11728](https://github.com/angular/material2/issues/11728) ([128e2a0](https://github.com/angular/material2/commit/128e2a0))
+
+
+
 <a name="6.3.0"></a>
 # [6.3.0 tourmaline-transom](https://github.com/angular/material2/compare/6.2.0...6.3.0) (2018-06-18)
 
diff --git a/package-lock.json b/package-lock.json
index 4e7660b24361..d545f1c15110 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "material2-srcs",
-  "version": "6.3.0",
+  "version": "6.3.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 5192dd0f6756..47703ca26a3a 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "docs": "gulp docs",
     "api": "gulp api-docs"
   },
-  "version": "6.3.0",
+  "version": "6.3.2",
   "license": "MIT",
   "engines": {
     "node": ">= 5.4.1"

From ce76a6227ede3b4febab9e381686d578d629d7f1 Mon Sep 17 00:00:00 2001
From: Pavel Agarkov <pavel.agarkov@gmail.com>
Date: Thu, 5 Jul 2018 14:59:38 +0300
Subject: [PATCH 43/44] reverse for loop when removing child nodes

when `mat-icon` element has more than one child node (like when `mat-badge` is used) then child nodes should be removed in the reversed order otherwise you will attempt to get node by index which is not correct any more since you've deleted some nodes already in the previous iterations.
---
 src/lib/icon/icon.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/icon/icon.ts b/src/lib/icon/icon.ts
index fc69c274f326..9b7cdfcfc9ec 100644
--- a/src/lib/icon/icon.ts
+++ b/src/lib/icon/icon.ts
@@ -200,7 +200,7 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can
 
     // Remove existing non-element child nodes and SVGs, and add the new SVG element. Note that
     // we can't use innerHTML, because IE will throw if the element has a data binding.
-    for (let i = 0; i < childCount; i++) {
+    for (let i = childCount - 1; i >= 0; i--) {
       const child = layoutElement.childNodes[i];
 
       // 1 corresponds to Node.ELEMENT_NODE. We remove all non-element nodes in order to get rid

From 0f82c5ee7bd7541754db5e17ac2a104444e5ddcc Mon Sep 17 00:00:00 2001
From: Pavel Agarkov <pavel.agarkov@gmail.com>
Date: Thu, 5 Jul 2018 21:59:54 +0300
Subject: [PATCH 44/44] optimizing reverse loop

---
 src/lib/icon/icon.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/icon/icon.ts b/src/lib/icon/icon.ts
index 9b7cdfcfc9ec..531ff777788f 100644
--- a/src/lib/icon/icon.ts
+++ b/src/lib/icon/icon.ts
@@ -200,8 +200,8 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can
 
     // Remove existing non-element child nodes and SVGs, and add the new SVG element. Note that
     // we can't use innerHTML, because IE will throw if the element has a data binding.
-    for (let i = childCount - 1; i >= 0; i--) {
-      const child = layoutElement.childNodes[i];
+    while (childCount--) { // reverse loop
+      const child = layoutElement.childNodes[childCount];
 
       // 1 corresponds to Node.ELEMENT_NODE. We remove all non-element nodes in order to get rid
       // of any loose text nodes, as well as any SVG elements in order to remove any old icons.