compat: remove all md selectors, inputs, classnames, and exports

CODING_STANDARDS.md

@@ -49,16 +49,16 @@ In HTML code, use `<!-- ... -->` comments, which will be stripped when packaging
 
 For example, rather than doing this:
 ```html
-<md-button>Basic button</md-button>
-<md-button class="mat-fab">FAB</md-button>
-<md-button class="mat-icon-button">pony</md-button>
+<mat-button>Basic button</mat-button>
+<mat-button class="mat-fab">FAB</mat-button>
+<mat-button class="mat-icon-button">pony</mat-button>
 ```
 
 do this:
 ```html
-<md-button>Basic button</md-button>
-<md-fab>FAB</md-fab>
-<md-icon-button>pony</md-icon-button>
+<mat-button>Basic button</mat-button>
+<mat-fab>FAB</mat-fab>
+<mat-icon-button>pony</mat-icon-button>
 ```
 
 #### Prefer small, focused modules
@@ -191,7 +191,7 @@ and the return value:
    * @param config Dialog configuration options.
    * @returns Reference to the newly-opened dialog.
    */
-  open<T>(component: ComponentType<T>, config?: MdDialogConfig): MdDialogRef<T> { ... }
+  open<T>(component: ComponentType<T>, config?: MatDialogConfig): MatDialogRef<T> { ... }
 ```
 
 Boolean properties and return values should use "Whether..." as opposed to "True if...":
@@ -229,7 +229,7 @@ class UniqueSelectionDispatcher { }
 Avoid suffixing a class with "Service", as it communicates nothing about what the class does. Try to
 think of the class name as a person's job title.
 
-Classes that correspond to a directive with an `md-` prefix should also be prefixed with `Md`.
+Classes that correspond to a directive with an `mat-` prefix should also be prefixed with `Mat`.
 CDK classes should only have a `Cdk` prefix when the class is a directive with a `cdk` selector
 prefix.
 

e2e/components/button-toggle-e2e.spec.ts

@@ -6,7 +6,7 @@ describe('button-toggle', () => {
   beforeEach(() => browser.get('/button-toggle'));
 
   it('should show a button-toggle', async () => {
-    expect(element(by.tagName('md-button-toggle'))).toBeDefined();
+    expect(element(by.tagName('mat-button-toggle'))).toBeDefined();
     screenshot();
   });
 

e2e/components/card-e2e.spec.ts

@@ -1,12 +1,12 @@
 import {browser, by, element} from 'protractor';
 import {screenshot} from '../screenshot';
 
-describe('md-card', () => {
+describe('mat-card', () => {
 
   beforeEach(() => browser.get('/cards'));
 
   it('should show a card', async () => {
-    const card = element(by.tagName('md-card'));
+    const card = element(by.tagName('mat-card'));
     expect(card).toBeDefined();
 
     screenshot('fancy card example');

e2e/components/dialog-e2e.spec.ts

@@ -14,7 +14,7 @@ describe('dialog', () => {
 
   it('should open a dialog', () => {
     element(by.id('default')).click();
-    expectToExist('md-dialog-container');
+    expectToExist('mat-dialog-container');
     screenshot('simple dialog opened');
   });
 
@@ -29,40 +29,40 @@ describe('dialog', () => {
 
     await waitForDialog();
     clickOnBackrop();
-    expectToExist('md-dialog-container', false);
+    expectToExist('mat-dialog-container', false);
   });
 
   it('should close by pressing escape', async () => {
     element(by.id('default')).click();
 
     await waitForDialog();
     pressKeys(Key.ESCAPE);
-    expectToExist('md-dialog-container', false);
+    expectToExist('mat-dialog-container', false);
   });
 
   it('should close by pressing escape when the first tabbable element has lost focus',
     async () => {
       element(by.id('default')).click();
 
       await waitForDialog();
-      clickElementAtPoint('md-dialog-container', { x: 0, y: 0 });
+      clickElementAtPoint('mat-dialog-container', { x: 0, y: 0 });
       pressKeys(Key.ESCAPE);
-      expectToExist('md-dialog-container', false);
+      expectToExist('mat-dialog-container', false);
     });
 
   it('should close by clicking on the "close" button', async () => {
     element(by.id('default')).click();
 
     await waitForDialog();
     element(by.id('close')).click();
-    expectToExist('md-dialog-container', false);
+    expectToExist('mat-dialog-container', false);
   });
 
   it('should focus the first focusable element', async () => {
     element(by.id('default')).click();
 
     await waitForDialog();
-    expectFocusOn('md-dialog-container input');
+    expectFocusOn('mat-dialog-container input');
   });
 
   it('should restore focus to the element that opened the dialog', async () => {
@@ -88,19 +88,19 @@ describe('dialog', () => {
 
     await waitForDialog();
     clickOnBackrop();
-    expectToExist('md-dialog-container');
+    expectToExist('mat-dialog-container');
   });
 
   it('should be able to prevent closing by pressing escape', async () => {
     element(by.id('disabled')).click();
 
     await waitForDialog();
     pressKeys(Key.ESCAPE);
-    expectToExist('md-dialog-container');
+    expectToExist('mat-dialog-container');
   });
 
   function waitForDialog() {
-    return waitForElement('md-dialog-container');
+    return waitForElement('mat-dialog-container');
   }
 
   function clickOnBackrop() {

e2e/components/grid-list-e2e.spec.ts

@@ -6,11 +6,11 @@ describe('grid-list', () => {
   beforeEach(() => browser.get('/grid-list'));
 
   it('should render a grid list container', () => {
-    expectToExist('md-grid-list');
+    expectToExist('mat-grid-list');
     screenshot();
   });
 
   it('should render list items inside the grid list container', () => {
-    expectToExist('md-grid-list md-grid-tile');
+    expectToExist('mat-grid-list mat-grid-tile');
   });
 });

e2e/components/list-e2e.spec.ts

@@ -6,11 +6,11 @@ describe('list', () => {
   beforeEach(() => browser.get('/list'));
 
   it('should render a list container', () => {
-    expectToExist('md-list');
+    expectToExist('mat-list');
     screenshot();
   });
 
   it('should render list items inside the list container', () => {
-    expectToExist('md-list md-list-item');
+    expectToExist('mat-list mat-list-item');
   });
 });

e2e/components/menu-e2e.spec.ts

@@ -207,7 +207,7 @@ export class MenuPage {
   trigger = () => element(by.id('trigger'));
   triggerTwo = () => element(by.id('trigger-two'));
   backdrop = () => element(by.css('.cdk-overlay-backdrop'));
-  items = (index: number) => element.all(by.css('[md-menu-item]')).get(index);
+  items = (index: number) => element.all(by.css('[mat-menu-item]')).get(index);
   textArea = () => element(by.id('text'));
   beforeTrigger = () => element(by.id('before-t'));
   aboveTrigger = () => element(by.id('above-t'));

e2e/components/progress-bar-e2e.spec.ts

@@ -5,18 +5,18 @@ describe('progress-bar', () => {
   beforeEach(() => browser.get('/progress-bar'));
 
   it('should render a determinate progress bar', () => {
-    expectToExist('md-progress-bar[mode="determinate"]');
+    expectToExist('mat-progress-bar[mode="determinate"]');
   });
 
   it('should render a buffer progress bar', () => {
-    expectToExist('md-progress-bar[mode="buffer"]');
+    expectToExist('mat-progress-bar[mode="buffer"]');
   });
 
   it('should render a query progress bar', () => {
-    expectToExist('md-progress-bar[mode="query"]');
+    expectToExist('mat-progress-bar[mode="query"]');
   });
 
   it('should render a indeterminate progress bar', () => {
-    expectToExist('md-progress-bar[mode="indeterminate"]');
+    expectToExist('mat-progress-bar[mode="indeterminate"]');
   });
 });

e2e/components/progress-spinner-e2e.spec.ts

@@ -4,14 +4,14 @@ describe('progress-spinner', () => {
   beforeEach(() => browser.get('/progress-spinner'));
 
   it('should render a determinate progress spinner', () => {
-    expect(element(by.css('md-progress-spinner')).isPresent()).toBe(true);
+    expect(element(by.css('mat-progress-spinner')).isPresent()).toBe(true);
   });
 
   it('should render an indeterminate progress spinner', () => {
-    expect(element(by.css('md-progress-spinner[mode="indeterminate"]')).isPresent()).toBe(true);
+    expect(element(by.css('mat-progress-spinner[mode="indeterminate"]')).isPresent()).toBe(true);
   });
 
   it('should render a spinner', () => {
-    expect(element(by.css('md-spinner')).isPresent()).toBe(true);
+    expect(element(by.css('mat-spinner')).isPresent()).toBe(true);
   });
 });

e2e/components/sidenav-e2e.spec.ts

@@ -6,7 +6,7 @@ describe('sidenav', () => {
 
     beforeEach(() => {
       browser.get('/sidenav');
-      sidenav = element(by.tagName('md-sidenav'));
+      sidenav = element(by.tagName('mat-sidenav'));
     });
 
     it('should be closed', () => {

e2e/components/slide-toggle-e2e.spec.ts

@@ -10,7 +10,7 @@ describe('slide-toggle', () => {
   beforeEach(() => browser.get('slide-toggle'));
 
   it('should render a slide-toggle', () => {
-    expectToExist('md-slide-toggle');
+    expectToExist('mat-slide-toggle');
     screenshot();
   });
 

e2e/components/stepper-e2e.spec.ts

@@ -10,22 +10,22 @@ describe('stepper', () => {
   beforeEach(() => browser.get('/stepper'));
 
   it('should render a stepper', () => {
-    expectToExist('md-horizontal-stepper');
-    screenshot('md-horizontal-stepper');
+    expectToExist('mat-horizontal-stepper');
+    screenshot('mat-horizontal-stepper');
   });
 
   describe('basic behavior', () => {
     it('should change steps correctly when stepper button is clicked', async () => {
       const previousButton = element.all(by.buttonText('Back'));
       const nextButton = element.all(by.buttonText('Next'));
 
-      expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
+      expect(element(by.css('mat-step-header[aria-selected="true"]')).getText())
           .toBe('1\nFill out your name');
 
       screenshot('start');
       nextButton.get(0).click();
 
-      expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
+      expect(element(by.css('mat-step-header[aria-selected="true"]')).getText())
           .toBe('2\nFill out your address');
 
       await browser.wait(ExpectedConditions.not(
@@ -34,7 +34,7 @@ describe('stepper', () => {
 
       previousButton.get(0).click();
 
-      expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
+      expect(element(by.css('mat-step-header[aria-selected="true"]')).getText())
           .toBe('1\nFill out your name');
 
       await browser.wait(ExpectedConditions.not(
@@ -43,7 +43,7 @@ describe('stepper', () => {
     });
 
     it('should change focus with keyboard interaction', () => {
-      let stepHeaders = element.all(by.css('md-step-header'));
+      let stepHeaders = element.all(by.css('mat-step-header'));
       stepHeaders.get(0).click();
 
       expectFocusOn(stepHeaders.get(0));
@@ -77,7 +77,7 @@ describe('stepper', () => {
       let nextButton = element.all(by.buttonText('Next'));
       nextButton.get(0).click();
 
-      expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
+      expect(element(by.css('mat-step-header[aria-selected="true"]')).getText())
           .toBe('1\nFill out your name');
     });
   });

e2e/components/tabs-e2e.spec.ts

@@ -19,9 +19,9 @@ describe('tabs', () => {
 
     beforeEach(() => {
       browser.get('/tabs');
-      tabGroup = element(by.css('md-tab-group'));
+      tabGroup = element(by.css('mat-tab-group'));
       tabLabels = element.all(by.css('.mat-tab-label'));
-      tabBodies = element.all(by.css('md-tab-body'));
+      tabBodies = element.all(by.css('mat-tab-body'));
     });
 
     it('should change tabs when the label is clicked', async () => {

e2e/components/toolbar-e2e.spec.ts

@@ -1,12 +1,12 @@
 import {browser, by, element} from 'protractor';
 import {screenshot} from '../screenshot';
 
-describe('md-toolbar', () => {
+describe('mat-toolbar', () => {
 
   beforeEach(() => browser.get('/toolbar'));
 
   it('should show a toolbar', async () => {
-    expect(element(by.tagName('md-toolbar'))).toBeDefined();
+    expect(element(by.tagName('mat-toolbar'))).toBeDefined();
 
     screenshot('multiple toolbar components');
   });

guides/cdk-table.md

@@ -7,7 +7,7 @@ built. Because it enforces no opinions on these matters, developers have full co
 interaction patterns associated with the table.
 
 For a Material Design styled table, see the
-[documentation for `<md-table>`](https://material.angular.io/components/table) which builds on
+[documentation for `<mat-table>`](https://material.angular.io/components/table) which builds on
 top of the CDK data-table.
 
 <!-- example(cdk-table-basic) -->

guides/customizing-component-styles.md

@@ -30,7 +30,7 @@ You can read more about specificity and how it is calculated on the
 
 ##### Component location
 
-Some Angular Material components, specifically overlay-based ones like MdDialog, MdSnackbar, etc.,
+Some Angular Material components, specifically overlay-based ones like MatDialog, MatSnackbar, etc.,
 do not exist as children of your component. Often they are injected elsewhere in the DOM. This is
 important to keep in mind, since even using high specificity and shadow-piercing selectors will
 not target elements that are not direct children of your component. Global styles are recommended

guides/getting-started.md

@@ -55,11 +55,11 @@ export class PizzaPartyAppModule { }
 Import the NgModule for each component you want to use: 
 
 ```ts
-import {MdButtonModule, MdCheckboxModule} from '@angular/material';
+import {MatButtonModule, MatCheckboxModule} from '@angular/material';
 
 @NgModule({
   ...
-  imports: [MdButtonModule, MdCheckboxModule],
+  imports: [MatButtonModule, MatCheckboxModule],
   ...
 })
 export class PizzaPartyAppModule { }
@@ -70,11 +70,11 @@ Angular Material components that you will use in your application. You can then
 include this module wherever you'd like to use the components.
 
 ```ts
-import {MdButtonModule, MdCheckboxModule} from '@angular/material';
+import {MatButtonModule, MatCheckboxModule} from '@angular/material';
 
 @NgModule({
-  imports: [MdButtonModule, MdCheckboxModule],
-  exports: [MdButtonModule, MdCheckboxModule],
+  imports: [MatButtonModule, MatCheckboxModule],
+  exports: [MatButtonModule, MatCheckboxModule],
 })
 export class MyOwnCustomMaterialModule { }
 ```
@@ -100,7 +100,7 @@ For more information on theming and instructions on how to create a custom theme
 
 ### Step 5: Gesture Support
 
-Some components (`md-slide-toggle`, `md-slider`, `mdTooltip`) rely on
+Some components (`mat-slide-toggle`, `mat-slider`, `matTooltip`) rely on
 [HammerJS](http://hammerjs.github.io/) for gestures. In order to get the full feature-set of these
 components, HammerJS must be loaded into the application.
 
@@ -120,7 +120,7 @@ import 'hammerjs';
 
 ### Step 6 (Optional): Add Material Icons
 
-If you want to use the `md-icon` component with the official 
+If you want to use the `mat-icon` component with the official 
 [Material Design Icons](https://material.io/icons/), load the icon font in your `index.html`.
 
 ```html
@@ -130,7 +130,7 @@ If you want to use the `md-icon` component with the official
 For more information on using Material Icons, check out the
 [Material Icons Guide](https://google.github.io/material-design-icons/).
 
-Note that `md-icon` supports any font or svg icons; using Material Icons is one of many options.
+Note that `mat-icon` supports any font or svg icons; using Material Icons is one of many options.
 
 
 ### Appendix: Configuring SystemJS