refactor: change the toolkit directive prefixes and remove Md prefix from toolkit classes (#2258)

* refactor: change the toolkit directive prefixes and remove Md prefix from toolkit classes

Renames the the component toolkit to use the `cdk-` prefix, in addition to removing the `Md` prefix from classes associated with the toolkit.
The following CSS classes have been renamed as well:

* `md-global-overlay-wrapper` -> `cdk-global-overlay-wrapper`
* `md-overlay-container` -> `cdk-overlay-container`
* `md-overlay-pane` -> `cdk-overlay-pane`
* `md-overlay-backdrop-showing` -> `cdk-overlay-backdrop-showing`
* `md-overlay-dark-backdrop` -> `cdk-overlay-dark-backdrop`
* `md-overlay-backdrop` -> `cdk-overlay-backdrop`
* `md-visually-hidden` -> `cdk-visually-hidden`

* Re-export Md prefixed classes as deprecated

* Fix linter errors.

* Change the overlay variable prefixes to `cdk-` and remove dependency on theming.

* Add backwards compatible selectors for core directives

Author: crisbeto

e2e/components/dialog/dialog.e2e.ts

@@ -91,7 +91,7 @@ describe('dialog', () => {
     browser.actions()
       // We need to move the cursor to the top left so
       // the dialog doesn't receive the click accidentally.
-      .mouseMove(element(by.css('.md-overlay-backdrop')).getWebElement(), { x: 0, y: 0 })
+      .mouseMove(element(by.css('.cdk-overlay-backdrop')).getWebElement(), { x: 0, y: 0 })
       .click()
       .perform();
   }

e2e/components/menu/menu-page.ts

@@ -14,7 +14,7 @@ export class MenuPage {
 
   triggerTwo() { return element(by.id('trigger-two')); }
 
-  backdrop() { return element(by.css('.md-overlay-backdrop')); }
+  backdrop() { return element(by.css('.cdk-overlay-backdrop')); }
 
   items(index: number) { return element.all(by.css('[md-menu-item]')).get(index); }
 

src/demo-app/button-toggle/button-toggle-demo.ts

@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
-import {MdUniqueSelectionDispatcher} from '@angular/material';
+import {UniqueSelectionDispatcher} from '@angular/material';
 
 @Component({
   moduleId: module.id,
   selector: 'button-toggle-demo',
   templateUrl: 'button-toggle-demo.html',
-  providers: [MdUniqueSelectionDispatcher],
+  providers: [UniqueSelectionDispatcher],
 })
 export class ButtonToggleDemo {
   isVertical = false;

src/demo-app/live-announcer/live-announcer-demo.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MdLiveAnnouncer} from '@angular/material';
+import {LiveAnnouncer} from '@angular/material';
 
 @Component({
   moduleId: module.id,
@@ -8,7 +8,7 @@ import {MdLiveAnnouncer} from '@angular/material';
 })
 export class LiveAnnouncerDemo {
 
-  constructor(private live: MdLiveAnnouncer) {}
+  constructor(private live: LiveAnnouncer) {}
 
   announceText(message: string) {
     this.live.announce(message);

src/demo-app/overlay/overlay-demo.html

@@ -6,25 +6,25 @@
   Pasta 2
 </button>
 
-<button overlay-origin (click)="openSpaghettiPanel()">
+<button cdk-overlay-origin (click)="openSpaghettiPanel()">
   Pasta 3
 </button>
 
 
-<button overlay-origin #trigger="overlayOrigin" (click)="isMenuOpen = !isMenuOpen">
+<button cdk-overlay-origin #trigger="cdkOverlayOrigin" (click)="isMenuOpen = !isMenuOpen">
   Open menu
 </button>
 
-<template connected-overlay [origin]="trigger" [width]="500" hasBackdrop [open]="isMenuOpen"
+<template cdk-connected-overlay [origin]="trigger" [width]="500" hasBackdrop [open]="isMenuOpen"
   (backdropClick)="isMenuOpen=false">
   <div style="background-color: mediumpurple" >
     This is the menu panel.
   </div>
 </template>
 
 <!-- Template to load into an overlay. -->
-<template portal>
+<template cdk-portal>
   <p class="demo-fusilli"> Fusilli </p>
 </template>
 
-<button (click)="openPanelWithBackdrop()">Backdrop panel</button>
+<button (click)="openPanelWithBackdrop()">Backdrop panel</button>

src/demo-app/overlay/overlay-demo.ts

@@ -82,7 +82,7 @@ export class OverlayDemo {
       .global()
       .centerHorizontally();
     config.hasBackdrop = true;
-    config.backdropClass = 'md-overlay-transparent-backdrop';
+    config.backdropClass = 'cdk-overlay-transparent-backdrop';
 
     let overlayRef = this.overlay.create(config);
     overlayRef.attach(this.templatePortals.first);

src/demo-app/platform/platform-demo.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MdPlatform, getSupportedInputTypes} from '@angular/material';
+import {Platform, getSupportedInputTypes} from '@angular/material';
 
 
 @Component({
@@ -10,5 +10,5 @@ import {MdPlatform, getSupportedInputTypes} from '@angular/material';
 export class PlatformDemo {
   supportedInputTypes = getSupportedInputTypes();
 
-  constructor(public platform: MdPlatform) {}
+  constructor(public platform: Platform) {}
 }

src/demo-app/portal/portal-demo.html

@@ -1,6 +1,6 @@
 <h2> The portal host is here: </h2>
 <div class="demo-portal-host">
-  <template [portalHost]="selectedPortal"></template>
+  <template [cdkPortalHost]="selectedPortal"></template>
 </div>
 
 <button type="button" (click)="selectedPortal = programmingJoke">
@@ -20,12 +20,12 @@ <h2> The portal host is here: </h2>
     referring to something *in* the template (such as #item in ngFor). As such, the component
     has to use @ViewChild / @ViewChildren to get these references.
     See https://github.com/angular/angular/issues/7158 -->
-<template portal>
+<template cdk-portal>
   <p> - Why don't jokes work in octal?</p>
   <p> - Because 7 10 11.</p>
 </template>
 
-<div *portal>
+<div *cdk-portal>
  <p> - Did you hear about this year's Fibonacci Conference? </p>
  <p> - It's going to be as big as the last two put together. </p>
 </div>

src/demo-app/projection/projection-demo.ts

@@ -7,7 +7,7 @@ import {DomProjectionHost, DomProjection} from '@angular/material';
   template: `
     <div class="demo-outer {{cssClass}}">
       Before
-      <dom-projection-host><ng-content></ng-content></dom-projection-host>
+      <cdk-dom-projection-host><ng-content></ng-content></cdk-dom-projection-host>
       After
     </div>
   `,

src/lib/button-toggle/button-toggle.html

@@ -1,5 +1,5 @@
 <label [attr.for]="inputId" class="md-button-toggle-label">
-  <input #input class="md-button-toggle-input md-visually-hidden"
+  <input #input class="md-button-toggle-input cdk-visually-hidden"
          [type]="_type"
          [id]="inputId"
          [checked]="checked"