build(aio): upgrade to @angular/{material,cdk}@2.0.0-beta.11 + md->mat migration (#19702)

all the non-npm changes were made by the angular-material-prefix-updater tool.

the tool missed a few things, which I'll fix in a separate commit to preserve the diff.

-rw-r--r--  1 iminar  eng   14942 Oct 13 13:09 dist/0.b19e913fbdd6507d346b.chunk.js
-rw-r--r--  1 iminar  eng    1535 Oct 13 13:09 dist/inline.0592c25ceb544d6aca3d.bundle.js
-rw-r--r--  1 iminar  eng  578250 Oct 13 13:09 dist/main.45d4edca3facc6d621e7.bundle.js
-rw-r--r--  1 iminar  eng   37402 Oct 13 13:09 dist/polyfills.f8409a9eb69060ac1aa6.bundle.js

PR Close #19702

aio/package.json

@@ -66,13 +66,13 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^5.0.0-beta.3",
-    "@angular/cdk": "^2.0.0-beta.8",
+    "@angular/cdk": "2.0.0-beta.11",
     "@angular/common": "^5.0.0-beta.3",
     "@angular/compiler": "^5.0.0-beta.3",
     "@angular/core": "^5.0.0-beta.3",
     "@angular/forms": "^5.0.0-beta.3",
     "@angular/http": "^5.0.0-beta.3",
-    "@angular/material": "^2.0.0-beta.8",
+    "@angular/material": "2.0.0-beta.11",
     "@angular/platform-browser": "^5.0.0-beta.3",
     "@angular/platform-browser-dynamic": "^5.0.0-beta.3",
     "@angular/platform-server": "^5.0.0-beta.3",

aio/src/app/app.component.html

@@ -1,30 +1,30 @@
 <div id="top-of-page"></div>
 
 <div *ngIf="isFetching" class="progress-bar-container">
-  <md-progress-bar mode="indeterminate" color="warn"></md-progress-bar>
+  <mat-progress-bar mode="indeterminate" color="warn"></mat-progress-bar>
 </div>
 
-<md-toolbar color="primary" class="app-toolbar">
+<mat-toolbar color="primary" class="app-toolbar">
-  <button class="hamburger" [class.starting]="isStarting" md-button
+  <button class="hamburger" [class.starting]="isStarting" mat-button
     (click)="sidenav.toggle()" title="Docs menu">
-    <md-icon [ngClass]="{'sidenav-open': !isSideBySide }" svgIcon="menu"></md-icon>
+    <mat-icon [ngClass]="{'sidenav-open': !isSideBySide }" svgIcon="menu"></mat-icon>
   </button>
   <a class="nav-link home" href="/"><img src="{{ homeImageUrl }}" title="Home" alt="Home"></a>
   <aio-top-menu *ngIf="isSideBySide" [nodes]="topMenuNodes"></aio-top-menu>
   <aio-search-box class="search-container" #searchBox (onSearch)="doSearch($event)" (onFocus)="doSearch($event)"></aio-search-box>
-</md-toolbar>
+</mat-toolbar>
 <aio-search-results #searchResultsView *ngIf="showSearchResults" [searchResults]="searchResults | async" (resultSelected)="hideSearchResults()"></aio-search-results>
 
-<md-sidenav-container class="sidenav-container" [class.starting]="isStarting" [class.has-floating-toc]="hasFloatingToc" role="main">
+<mat-sidenav-container class="sidenav-container" [class.starting]="isStarting" [class.has-floating-toc]="hasFloatingToc" role="main">
 
-  <md-sidenav [ngClass]="{'collapsed': !isSideBySide }" #sidenav class="sidenav" [opened]="isOpened" [mode]="mode" (open)="updateHostClasses()" (close)="updateHostClasses()">
+  <mat-sidenav [ngClass]="{'collapsed': !isSideBySide }" #sidenav class="sidenav" [opened]="isOpened" [mode]="mode" (open)="updateHostClasses()" (close)="updateHostClasses()">
     <aio-nav-menu *ngIf="!isSideBySide" [nodes]="topMenuNarrowNodes" [currentNode]="currentNodes?.TopBarNarrow" [isWide]="false"></aio-nav-menu>
     <aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNodes?.SideNav" [isWide]="isSideBySide"></aio-nav-menu>
 
     <div class="doc-version">
       <aio-select (change)="onDocVersionChange($event.index)" [options]="docVersions" [selected]="currentDocVersion"></aio-select>
     </div>
-  </md-sidenav>
+  </mat-sidenav>
 
   <section class="sidenav-content" [id]="pageId" role="content">
     <aio-mode-banner [mode]="deployment.mode" [version]="versionInfo"></aio-mode-banner>
@@ -32,7 +32,7 @@
     <aio-dt [on]="dtOn" [(doc)]="currentDocument"></aio-dt>
   </section>
 
-</md-sidenav-container>
+</mat-sidenav-container>
 
 <div *ngIf="hasFloatingToc" class="toc-container" [style.max-height.px]="tocMaxHeight" (mousewheel)="restrainScrolling($event)">
   <aio-toc></aio-toc>

aio/src/app/app.component.spec.ts

@@ -3,7 +3,7 @@ import { inject, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/cor
 import { Title } from '@angular/platform-browser';
 import { APP_BASE_HREF } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { MdProgressBar, MdSidenav } from '@angular/material';
+import { MatProgressBar, MatSidenav } from '@angular/material';
 import { By } from '@angular/platform-browser';
 
 import { of } from 'rxjs/observable/of';
@@ -51,7 +51,7 @@ describe('AppComponent', () => {
     docViewer = de.query(By.css('aio-doc-viewer')).nativeElement;
     hamburger = de.query(By.css('.hamburger')).nativeElement;
     locationService = de.injector.get(LocationService) as any as MockLocationService;
-    sidenav = de.query(By.css('md-sidenav')).nativeElement;
+    sidenav = de.query(By.css('mat-sidenav')).nativeElement;
     tocService = de.injector.get(TocService);
   };
 
@@ -376,7 +376,7 @@ describe('AppComponent', () => {
       });
 
       it('should set the css class of the host container based on the open/closed state of the side nav', () => {
-        const sideNav = fixture.debugElement.query(By.directive(MdSidenav));
+        const sideNav = fixture.debugElement.query(By.directive(MatSidenav));
 
         locationService.go('guide/pipes');
         fixture.detectChanges();
@@ -882,7 +882,7 @@ describe('AppComponent', () => {
 
     describe('initial rendering', () => {
       it('should initially add the starting class until the first document is rendered', fakeAsync(() => {
-        const getSidenavContainer = () => fixture.debugElement.query(By.css('md-sidenav-container'));
+        const getSidenavContainer = () => fixture.debugElement.query(By.css('mat-sidenav-container'));
 
         initializeTest();
 
@@ -909,7 +909,7 @@ describe('AppComponent', () => {
     describe('progress bar', () => {
       const SHOW_DELAY = 200;
       const HIDE_DELAY = 500;
-      const getProgressBar = () => fixture.debugElement.query(By.directive(MdProgressBar));
+      const getProgressBar = () => fixture.debugElement.query(By.directive(MatProgressBar));
       const initializeAndCompleteNavigation = () => {
         initializeTest();
         triggerDocRendered();

aio/src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component, ElementRef, HostBinding, HostListener, OnInit,
          QueryList, ViewChild, ViewChildren } from '@angular/core';
-import { MdSidenav } from '@angular/material';
+import { MatSidenav } from '@angular/material';
 
 import { CurrentNodes, NavigationService, NavigationNode, VersionInfo } from 'app/navigation/navigation.service';
 import { DocumentService, DocumentContents } from 'app/documents/document.service';
@@ -95,8 +95,8 @@ export class AppComponent implements OnInit {
   @ViewChild(SearchBoxComponent)
   searchBox: SearchBoxComponent;
 
-  @ViewChild(MdSidenav)
+  @ViewChild(MatSidenav)
-  sidenav: MdSidenav;
+  sidenav: MatSidenav;
 
   constructor(
     public deployment: Deployment,
@@ -291,7 +291,7 @@ export class AppComponent implements OnInit {
       const el = this.hostElement.nativeElement as Element;
       this.tocMaxHeightOffset =
           el.querySelector('footer').clientHeight +
-          el.querySelector('md-toolbar.app-toolbar').clientHeight +
+          el.querySelector('mat-toolbar.app-toolbar').clientHeight +
           24; //  fudge margin
     }
 

aio/src/app/app.module.ts

@@ -6,14 +6,14 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
 
 import {
-  MdButtonModule,
+  MatButtonModule,
-  MdIconModule,
+  MatIconModule,
-  MdIconRegistry,
+  MatIconRegistry,
-  MdInputModule,
+  MatInputModule,
-  MdProgressBarModule,
+  MatProgressBarModule,
-  MdSidenavModule,
+  MatSidenavModule,
-  MdTabsModule,
+  MatTabsModule,
-  MdToolbarModule,
+  MatToolbarModule,
   Platform
 } from '@angular/material';
 
@@ -77,13 +77,13 @@ export const svgIconProviders = [
     EmbeddedModule,
     HttpClientModule,
     BrowserAnimationsModule,
-    MdButtonModule,
+    MatButtonModule,
-    MdIconModule,
+    MatIconModule,
-    MdInputModule,
+    MatInputModule,
-    MdProgressBarModule,
+    MatProgressBarModule,
-    MdSidenavModule,
+    MatSidenavModule,
-    MdTabsModule,
+    MatTabsModule,
-    MdToolbarModule,
+    MatToolbarModule,
     SwUpdatesModule,
     SharedModule
   ],
@@ -107,7 +107,7 @@ export const svgIconProviders = [
     Location,
     { provide: LocationStrategy, useClass: PathLocationStrategy },
     LocationService,
-    { provide: MdIconRegistry, useClass: CustomMdIconRegistry },
+    { provide: MatIconRegistry, useClass: CustomMdIconRegistry },
     NavigationService,
     Platform,
     ScrollService,

aio/src/app/embedded/code/code-tabs.component.spec.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { Component, DebugElement, Input, NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MdTabGroup, MdTabsModule } from '@angular/material';
+import { MatTabGroup, MatTabsModule } from '@angular/material';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -50,7 +50,7 @@ describe('CodeTabsComponent', () => {
 
     beforeEach(() => {
       TestBed.configureTestingModule({
-        imports: [ MdTabsModule, NoopAnimationsModule ]
+        imports: [ MatTabsModule, NoopAnimationsModule ]
       });
     });
 
@@ -86,7 +86,7 @@ describe('CodeTabsComponent', () => {
 
     it('should disable ripple effect on tab labels', () => {
       createComponent();
-      const tabsGroupComponent = codeTabsDe.query(By.directive(MdTabGroup)).componentInstance;
+      const tabsGroupComponent = codeTabsDe.query(By.directive(MatTabGroup)).componentInstance;
 
       expect(tabsGroupComponent.disableRipple).toBe(true);
     });

aio/src/app/embedded/code/code-tabs.component.ts

@@ -21,9 +21,9 @@ export interface TabInfo {
 @Component({
   selector: 'code-tabs',
   template: `
-    <md-tab-group class="code-tab-group" disableRipple>
+    <mat-tab-group class="code-tab-group" disableRipple>
-      <md-tab style="overflow-y: hidden;" *ngFor="let tab of tabs">
+      <mat-tab style="overflow-y: hidden;" *ngFor="let tab of tabs">
-        <ng-template md-tab-label>
+        <ng-template mat-tab-label>
           <span class="{{ tab.class }}">{{ tab.title }}</span>
         </ng-template>
         <aio-code class="{{ tab.class }}"
@@ -34,8 +34,8 @@ export interface TabInfo {
           [region]="tab.region"
           [title]="tab.title">
         </aio-code>
-      </md-tab>
+      </mat-tab>
-    </md-tab-group>
+    </mat-tab-group>
   `
 })
 export class CodeTabsComponent implements OnInit {

aio/src/app/embedded/code/code.component.spec.ts

@@ -1,6 +1,6 @@
 import { Component, DebugElement } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MdSnackBarModule, MdSnackBar } from '@angular/material';
+import { MatSnackBarModule, MatSnackBar } from '@angular/material';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -42,7 +42,7 @@ describe('CodeComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [ MdSnackBarModule, NoopAnimationsModule ],
+      imports: [ MatSnackBarModule, NoopAnimationsModule ],
       declarations: [ CodeComponent, HostComponent ],
       providers: [
         PrettyPrinter,
@@ -243,7 +243,7 @@ describe('CodeComponent', () => {
     });
 
     it('should display a message when copy succeeds', () => {
-      const snackBar: MdSnackBar = TestBed.get(MdSnackBar);
+      const snackBar: MatSnackBar = TestBed.get(MatSnackBar);
       const copierService: CopierService = TestBed.get(CopierService);
       spyOn(snackBar, 'open');
       spyOn(copierService, 'copyText').and.returnValue(true);
@@ -252,7 +252,7 @@ describe('CodeComponent', () => {
     });
 
     it('should display an error when copy fails', () => {
-      const snackBar: MdSnackBar = TestBed.get(MdSnackBar);
+      const snackBar: MatSnackBar = TestBed.get(MatSnackBar);
       const copierService: CopierService = TestBed.get(CopierService);
       spyOn(snackBar, 'open');
       spyOn(copierService, 'copyText').and.returnValue(false);

aio/src/app/embedded/code/code.component.ts

@@ -2,7 +2,7 @@ import { Component, ElementRef, ViewChild, OnChanges, Input } from '@angular/cor
 import { Logger } from 'app/shared/logger.service';
 import { PrettyPrinter } from './pretty-printer.service';
 import { CopierService } from 'app/shared/copier.service';
-import { MdSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material';
 
 const defaultLineNumsCount = 10; // by default, show linenums over this number
 
@@ -100,7 +100,7 @@ export class CodeComponent implements OnChanges {
   @ViewChild('codeContainer') codeContainer: ElementRef;
 
   constructor(
-    private snackbar: MdSnackBar,
+    private snackbar: MatSnackBar,
     private pretty: PrettyPrinter,
     private copier: CopierService,
     private logger: Logger) {}

aio/src/app/embedded/contributor/contributor.component.ts

@@ -13,14 +13,14 @@ import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
 
             <div class="contributor-image" [style.background-image]="'url('+pictureBase+(person.picture || noPicture)+')'">
                 <div class="contributor-info">
-                    <a *ngIf="person.bio" md-button>
+                    <a *ngIf="person.bio" mat-button>
                         View Bio
                     </a>
-                    <a *ngIf="person.twitter" md-button class="icon"
+                    <a *ngIf="person.twitter" mat-button class="icon"
                         href="https://twitter.com/{{person.twitter}}" target="_blank" (click)="$event.stopPropagation()">
                         <span class="fa fa-twitter fa-2x"></span>
                     </a>
-                    <a *ngIf="person.website" md-button class="icon"
+                    <a *ngIf="person.website" mat-button class="icon"
                         href="{{person.website}}" target="_blank" (click)="$event.stopPropagation()">
                         <span class="fa fa-link fa-2x"></span>
                     </a>

aio/src/app/embedded/embedded.module.ts

@@ -9,7 +9,7 @@ import { PrettyPrinter } from './code/pretty-printer.service';
 // It is not enough just to import them inside the AppModule
 
 // Reusable components (used inside embedded components)
-import { MdIconModule, MdSnackBarModule, MdTabsModule } from '@angular/material';
+import { MatIconModule, MatSnackBarModule, MatTabsModule } from '@angular/material';
 import { CodeComponent } from './code/code.component';
 import { SharedModule } from 'app/shared/shared.module';
 
@@ -43,9 +43,9 @@ export class EmbeddedComponents {
 @NgModule({
   imports: [
     CommonModule,
-    MdIconModule,
+    MatIconModule,
-    MdSnackBarModule,
+    MatSnackBarModule,
-    MdTabsModule,
+    MatTabsModule,
     SharedModule
   ],
   declarations: [

aio/src/app/embedded/toc/toc.component.html

@@ -10,7 +10,7 @@
     aria-label="Expand/collapse contents"
     [attr.aria-pressed]="!isCollapsed">
     Contents
-    <md-icon class="rotating-icon" svgIcon="keyboard_arrow_right" [class.collapsed]="isCollapsed"></md-icon>
+    <mat-icon class="rotating-icon" svgIcon="keyboard_arrow_right" [class.collapsed]="isCollapsed"></mat-icon>
   </button>
 
   <ul class="toc-list" [class.embedded]="type !== 'Floating'">

aio/src/app/layout/nav-item/nav-item.component.html

@@ -9,14 +9,14 @@
   <a *ngIf="node.url != null" href="{{node.url}}" [ngClass]="classes" title="{{node.tooltip}}"
     (click)="headerClicked()" class="vertical-menu-item heading">
     {{node.title}}
-    <md-icon class="rotating-icon" svgIcon="keyboard_arrow_right"></md-icon>
+    <mat-icon class="rotating-icon" svgIcon="keyboard_arrow_right"></mat-icon>
   </a>
 
   <button *ngIf="node.url == null" type="button" [ngClass]="classes" title="{{node.tooltip}}"
     (click)="headerClicked()" class="vertical-menu-item heading"
     [attr.aria-pressed]="isExpanded">
     {{node.title}}
-    <md-icon class="rotating-icon" svgIcon="keyboard_arrow_right"></md-icon>
+    <mat-icon class="rotating-icon" svgIcon="keyboard_arrow_right"></mat-icon>
   </button>
 
   <div class="heading-children" [ngClass]="classes">

aio/src/app/shared/custom-md-icon-registry.spec.ts

@@ -1,4 +1,4 @@
-import { MdIconRegistry } from '@angular/material';
+import { MatIconRegistry } from '@angular/material';
 import { CustomMdIconRegistry, SvgIconInfo } from './custom-md-icon-registry';
 
 describe('CustomMdIconRegistry', () => {
@@ -24,15 +24,15 @@ describe('CustomMdIconRegistry', () => {
     const svgIcons: SvgIconInfo[] = [
       { name: 'test_icon', svgSource: svgSrc }
     ];
-    spyOn(MdIconRegistry.prototype, 'getNamedSvgIcon');
+    spyOn(MatIconRegistry.prototype, 'getNamedSvgIcon');
 
     const registry = new CustomMdIconRegistry(mockHttp, mockSanitizer, svgIcons);
 
     registry.getNamedSvgIcon('other_icon');
-    expect(MdIconRegistry.prototype.getNamedSvgIcon).toHaveBeenCalledWith('other_icon', undefined);
+    expect(MatIconRegistry.prototype.getNamedSvgIcon).toHaveBeenCalledWith('other_icon', undefined);
 
     registry.getNamedSvgIcon('other_icon', 'foo');
-    expect(MdIconRegistry.prototype.getNamedSvgIcon).toHaveBeenCalledWith('other_icon', 'foo');
+    expect(MatIconRegistry.prototype.getNamedSvgIcon).toHaveBeenCalledWith('other_icon', 'foo');
   });
 });
 

aio/src/app/shared/custom-md-icon-registry.ts

@@ -1,6 +1,6 @@
 import { InjectionToken, Inject, Injectable } from '@angular/core';
 import { of } from 'rxjs/observable/of';
-import { MdIconRegistry } from '@angular/material';
+import { MatIconRegistry } from '@angular/material';
 import { HttpClient } from '@angular/common/http';
 import { DomSanitizer } from '@angular/platform-browser';
 
@@ -45,7 +45,7 @@ function createFakeHttp(http: HttpClient): any {
  * us to provide preloaded icon SVG sources.
  */
 @Injectable()
-export class CustomMdIconRegistry extends MdIconRegistry {
+export class CustomMdIconRegistry extends MatIconRegistry {
   private preloadedSvgElements: SvgIconMap = {};
 
   constructor(http: HttpClient, sanitizer: DomSanitizer, @Inject(SVG_ICONS) svgIcons: SvgIconInfo[]) {

aio/src/app/shared/scroll.service.ts

@@ -17,7 +17,7 @@ export class ScrollService {
   // at the top (e.g. toolbar) + some margin
   get topOffset() {
     if (!this._topOffset) {
-      const toolbar = this.document.querySelector('md-toolbar.app-toolbar');
+      const toolbar = this.document.querySelector('mat-toolbar.app-toolbar');
       this._topOffset = (toolbar && toolbar.clientHeight || 0) + topMargin;
     }
     return this._topOffset;

aio/src/styles/1-layouts/_marketing-layout.scss

@@ -311,7 +311,7 @@ aio-shell {
     }
 
     @media (max-width: 600px) {
-      md-sidenav-container.sidenav-container {
+      mat-sidenav-container.sidenav-container {
         padding-top: 0;
       }
     }
@@ -336,7 +336,7 @@ aio-shell {
 }
 
 aio-shell:not(.view-SideNav) {
-  md-sidenav-container.sidenav-container {
+  mat-sidenav-container.sidenav-container {
     max-width: none;
   }
 }

aio/src/styles/1-layouts/_sidenav.scss

@@ -26,7 +26,7 @@ aio-nav-menu {
   }
 }
 
-md-sidenav.mat-sidenav.sidenav {
+mat-sidenav.mat-sidenav.sidenav {
   position: fixed;
   top: 64px;
   bottom: 0;
@@ -42,7 +42,7 @@ md-sidenav.mat-sidenav.sidenav {
   }
 }
 
-md-sidenav-container.sidenav-container {
+mat-sidenav-container.sidenav-container {
     min-height: 100%;
     height: auto !important;
     max-width: 100%;
@@ -54,7 +54,7 @@ md-sidenav-container.sidenav-container {
     }
 }
 
-md-sidenav-container div.mat-sidenav-content {
+mat-sidenav-container div.mat-sidenav-content {
     height: auto;
 }
 
@@ -176,7 +176,7 @@ aio-nav-menu.top-menu {
 }
 
 // Angular Version Selector
-md-sidenav .doc-version {
+mat-sidenav .doc-version {
   padding: 8px;
   border-top: 1px solid $lightgray;
 

aio/src/styles/1-layouts/_top-menu.scss

@@ -57,7 +57,7 @@ aio-top-menu {
 }
 
 // HOME PAGE OVERRIDE: TOPNAV TOOLBAR HAMBURGER MENU
-aio-shell.page-home md-toolbar.app-toolbar.mat-toolbar {
+aio-shell.page-home mat-toolbar.app-toolbar.mat-toolbar {
   background-color: transparent;
   transition: background-color .2s linear .3s;
 
@@ -67,7 +67,7 @@ aio-shell.page-home md-toolbar.app-toolbar.mat-toolbar {
 }
 
 // DOCS PAGE / STANDARD: TOPNAV TOOLBAR FIXED
-md-toolbar.mat-toolbar {
+mat-toolbar.mat-toolbar {
   position: fixed;
   top: 0;
   right: 0;
@@ -76,16 +76,16 @@ md-toolbar.mat-toolbar {
   padding: 0 16px 0 0;
   box-shadow: 0 2px 5px 0 rgba(0,0,0,0.30);
 
-  md-icon {
+  mat-icon {
     color: $white;
   }
 }
 
 // MARKETING PAGES OVERRIDE: TOPNAV TOOLBAR AND HAMBURGER
-aio-shell.page-home md-toolbar.mat-toolbar,
+aio-shell.page-home mat-toolbar.mat-toolbar,
-aio-shell.page-features md-toolbar.mat-toolbar,
+aio-shell.page-features mat-toolbar.mat-toolbar,
-aio-shell.page-events md-toolbar.mat-toolbar,
+aio-shell.page-events mat-toolbar.mat-toolbar,
-aio-shell.page-resources md-toolbar.mat-toolbar {
+aio-shell.page-resources mat-toolbar.mat-toolbar {
   // FIXED TOPNAV TOOLBAR FOR SMALL MOBILE
   @media (min-width: 481px) {
     position: absolute;
@@ -99,9 +99,9 @@ aio-shell.page-resources md-toolbar.mat-toolbar {
 }
 
 // REMOVE BOX SHADOW ON CERTAIN MARKETING PAGES
-aio-shell.page-home md-toolbar.mat-toolbar,
+aio-shell.page-home mat-toolbar.mat-toolbar,
-aio-shell.page-events md-toolbar.mat-toolbar,
+aio-shell.page-events mat-toolbar.mat-toolbar,
-aio-shell.page-resources md-toolbar.mat-toolbar {
+aio-shell.page-resources mat-toolbar.mat-toolbar {
   box-shadow: none;
 }
 

aio/src/styles/2-modules/_buttons.scss

@@ -105,6 +105,6 @@ a.filter-button {
   }
 }
 
-[md-button], [md-raised-button], [mat-button], [mat-raised-button] {
+[mat-button], [mat-raised-button], [mat-button], [mat-raised-button] {
   text-transform: uppercase;
 }

aio/src/styles/2-modules/_code.scss

@@ -4,7 +4,7 @@ code-example, code-tabs {
 }
 
 code-example,
-code-tabs md-tab-body {
+code-tabs mat-tab-body {
   &:not(.no-box) {
     background-color: rgba($backgroundgray, 0.2);
     border: 0.5px solid $lightgray;
@@ -49,8 +49,8 @@ code-example.avoidFile header {
 
 code-example.avoid,
 code-example.avoidFile,
-code-tabs.avoid md-tab-body,
+code-tabs.avoid mat-tab-body,
-code-tabs.avoidFile md-tab-body {
+code-tabs.avoidFile mat-tab-body {
   border: 0.5px solid $anti-pattern;
 }
 
@@ -58,7 +58,7 @@ code-tabs div .mat-tab-body-content {
   height: auto;
 }
 
-code-tabs .mat-tab-body-wrapper md-tab-body .mat-tab-body {
+code-tabs .mat-tab-body-wrapper mat-tab-body .mat-tab-body {
   overflow-y: hidden;
 }
 

aio/src/styles/2-modules/_contributor.scss

@@ -69,7 +69,7 @@ aio-contributor {
     opacity: 0;
     border-radius: 50%;
 
-    [md-button] {
+    [mat-button] {
       color: $white;
       font-size: 14px;
       font-weight: 500;

aio/src/styles/2-modules/_scrollbar.scss

@@ -1,13 +1,13 @@
-body::-webkit-scrollbar, md-sidenav.sidenav::-webkit-scrollbar, .mat-sidenav-content::-webkit-scrollbar {
+body::-webkit-scrollbar, mat-sidenav.sidenav::-webkit-scrollbar, .mat-sidenav-content::-webkit-scrollbar {
   height: 6px;
   width: 6px;
 }
 
-body::-webkit-scrollbar-track, md-sidenav.sidenav::-webkit-scrollbar-trac, .mat-sidenav-content::-webkit-scrollbar-trac {
+body::-webkit-scrollbar-track, mat-sidenav.sidenav::-webkit-scrollbar-trac, .mat-sidenav-content::-webkit-scrollbar-trac {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 }
 
-body::-webkit-scrollbar-thumb, md-sidenav.sidenav::-webkit-scrollbar-thumb, .mat-sidenav-content::-webkit-scrollbar-thumb {
+body::-webkit-scrollbar-thumb, mat-sidenav.sidenav::-webkit-scrollbar-thumb, .mat-sidenav-content::-webkit-scrollbar-thumb {
   background-color: $mediumgray;
   outline: 1px solid $darkgray;
 }

aio/src/styles/2-modules/_toc.scss

@@ -59,7 +59,7 @@ aio-toc {
   }
 
   button.toc-heading {
-    md-icon.rotating-icon {
+    mat-icon.rotating-icon {
       height: 18px;
       width: 18px;
       position: relative;

aio/yarn.lock

@@ -32,9 +32,9 @@
   dependencies:
     tslib "^1.7.1"
 
-"@angular/cdk@^2.0.0-beta.8":
+"@angular/cdk@2.0.0-beta.11":
-  version "2.0.0-beta.8"
+  version "2.0.0-beta.11"
-  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-2.0.0-beta.8.tgz#71961c851dfbeb19e085e898bf5e4461408f8b57"
+  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-2.0.0-beta.11.tgz#b9e799574786272c63b6334c837c5ee2445bc933"
   dependencies:
     tslib "^1.7.1"
 
@@ -140,9 +140,9 @@
   dependencies:
     tslib "^1.7.1"
 
-"@angular/material@^2.0.0-beta.8":
+"@angular/material@2.0.0-beta.11":
-  version "2.0.0-beta.8"
+  version "2.0.0-beta.11"
-  resolved "https://registry.yarnpkg.com/@angular/material/-/material-2.0.0-beta.8.tgz#a92852abc9261aea26c2401f576645470be2cf38"
+  resolved "https://registry.yarnpkg.com/@angular/material/-/material-2.0.0-beta.11.tgz#9124a1f50f3eb7dc28640317ee1e875f71da753a"
   dependencies:
     tslib "^1.7.1"