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"

src/lib/button-toggle/button-toggle.ts

@@ -21,7 +21,7 @@ import {
 import {NG_VALUE_ACCESSOR, ControlValueAccessor, FormsModule} from '@angular/forms';
 import {Observable} from 'rxjs/Observable';
 import {
-  MdUniqueSelectionDispatcher,
+  UniqueSelectionDispatcher,
   coerceBooleanProperty,
   DefaultStyleCompatibilityModeModule,
 } from '../core';
@@ -298,7 +298,7 @@ export class MdButtonToggle implements OnInit {
 
   constructor(@Optional() toggleGroup: MdButtonToggleGroup,
               @Optional() toggleGroupMultiple: MdButtonToggleGroupMultiple,
-              public buttonToggleDispatcher: MdUniqueSelectionDispatcher,
+              public buttonToggleDispatcher: UniqueSelectionDispatcher,
               private _renderer: Renderer) {
     this.buttonToggleGroup = toggleGroup;
 
@@ -445,7 +445,7 @@ export class MdButtonToggleModule {
   static forRoot(): ModuleWithProviders {
     return {
       ngModule: MdButtonToggleModule,
-      providers: [MdUniqueSelectionDispatcher]
+      providers: [UniqueSelectionDispatcher]
     };
   }
 }

src/lib/button/button.scss

@@ -81,7 +81,7 @@
   pointer-events: none;
   opacity: 0;
 
-  @include md-high-contrast {
+  @include cdk-high-contrast {
     // Note that IE will render this in the same way, no
     // matter whether the theme is light or dark. This helps
     // with the readability of focused buttons.
@@ -98,7 +98,7 @@
 }
 
 // Add an outline to make it more visible in high contrast mode.
-@include md-high-contrast {
+@include cdk-high-contrast {
   [md-button], [md-raised-button], [md-icon-button], [md-fab], [md-mini-fab] {
     outline: solid 1px;
   }

src/lib/card/card.scss

@@ -17,7 +17,7 @@ md-card {
   border-radius: $md-card-border-radius;
   font-family: $md-font-family;
 
-  @include md-high-contrast {
+  @include cdk-high-contrast {
     outline: solid 1px;
   }
 }

src/lib/checkbox/checkbox.html

@@ -1,7 +1,7 @@
 <label class="md-checkbox-layout">
   <div class="md-checkbox-inner-container">
     <input #input
-           class="md-checkbox-input md-visually-hidden" type="checkbox"
+           class="md-checkbox-input cdk-visually-hidden" type="checkbox"
            [id]="inputId"
            [required]="required"
            [checked]="checked"

src/lib/chips/chip.ts

@@ -9,7 +9,7 @@ import {
   Renderer
 } from '@angular/core';
 
-import {MdFocusable} from '../core/a11y/list-key-manager';
+import {Focusable} from '../core/a11y/list-key-manager';
 import {coerceBooleanProperty} from '../core/coercion/boolean-property';
 
 export interface MdChipEvent {
@@ -32,7 +32,7 @@ export interface MdChipEvent {
     '(click)': '_handleClick($event)'
   }
 })
-export class MdChip implements MdFocusable, OnInit, OnDestroy {
+export class MdChip implements Focusable, OnInit, OnDestroy {
 
   /* Whether or not the chip is disabled. */
   protected _disabled: boolean = null;

src/lib/core/_core.scss

@@ -17,8 +17,8 @@
   }
 
   @include md-ripple();
-  @include md-a11y();
-  @include md-overlay();
+  @include cdk-a11y();
+  @include cdk-overlay();
 }
 
 // Mixin that renders all of the core styles that depend on the theme.

src/lib/core/a11y/README.md

@@ -1,5 +1,5 @@
-# MdLiveAnnouncer
-`MdLiveAnnouncer` is a service, which announces messages to several screenreaders.
+# LiveAnnouncer
+`LiveAnnouncer` is a service, which announces messages to several screenreaders.
 
 ### Methods
 
@@ -12,11 +12,11 @@ The service can be injected in a component.
 ```ts
 @Component({
   selector: 'my-component'
-  providers: [MdLiveAnnouncer]
+  providers: [LiveAnnouncer]
 })
 export class MyComponent {
 
- constructor(live: MdLiveAnnouncer) {
+ constructor(live: LiveAnnouncer) {
    live.announce("Hey Google");
  }
 

src/lib/core/a11y/_a11y.scss

@@ -1,5 +1,5 @@
-@mixin md-a11y {
-  .md-visually-hidden {
+@mixin cdk-a11y {
+  .cdk-visually-hidden {
     border: 0;
     clip: rect(0 0 0 0);
     height: 1px;
@@ -17,7 +17,7 @@
  * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
  * attribute, however Chrome handles high contrast differently.
  */
-@mixin md-high-contrast {
+@mixin cdk-high-contrast {
   @media screen and (-ms-high-contrast: active) {
     @content;
   }

src/lib/core/a11y/focus-trap.spec.ts

@@ -3,7 +3,7 @@ import {By} from '@angular/platform-browser';
 import {Component} from '@angular/core';
 import {FocusTrap} from './focus-trap';
 import {InteractivityChecker} from './interactivity-checker';
-import {MdPlatform} from '../platform/platform';
+import {Platform} from '../platform/platform';
 
 
 describe('FocusTrap', () => {
@@ -12,12 +12,12 @@ describe('FocusTrap', () => {
 
     let fixture: ComponentFixture<FocusTrapTestApp>;
     let focusTrapInstance: FocusTrap;
-    let platform: MdPlatform = new MdPlatform();
+    let platform: Platform = new Platform();
 
     beforeEach(async(() => {
       TestBed.configureTestingModule({
         declarations: [FocusTrap, FocusTrapTestApp],
-        providers: [InteractivityChecker, MdPlatform]
+        providers: [InteractivityChecker, Platform]
       });
 
       TestBed.compileComponents();
@@ -57,7 +57,7 @@ describe('FocusTrap', () => {
     beforeEach(async(() => {
       TestBed.configureTestingModule({
         declarations: [FocusTrap, FocusTrapTargetTestApp],
-        providers: [InteractivityChecker, MdPlatform]
+        providers: [InteractivityChecker, Platform]
       });
 
       TestBed.compileComponents();
@@ -87,23 +87,23 @@ describe('FocusTrap', () => {
 
 @Component({
   template: `
-    <focus-trap>
+    <cdk-focus-trap>
       <input>
       <button>SAVE</button>
-    </focus-trap>
+    </cdk-focus-trap>
     `
 })
 class FocusTrapTestApp { }
 
 
 @Component({
   template: `
-    <focus-trap>
+    <cdk-focus-trap>
       <input>
-      <button id="last" md-focus-end></button>
-      <button id="first" md-focus-start>SAVE</button>
+      <button id="last" cdk-focus-end></button>
+      <button id="first" cdk-focus-start>SAVE</button>
       <input>
-    </focus-trap>
+    </cdk-focus-trap>
     `
 })
 class FocusTrapTargetTestApp { }

src/lib/core/a11y/focus-trap.ts

@@ -13,7 +13,7 @@ import {coerceBooleanProperty} from '../coercion/boolean-property';
  */
 @Component({
   moduleId: module.id,
-  selector: 'focus-trap',
+  selector: 'cdk-focus-trap, focus-trap',
   templateUrl: 'focus-trap.html',
   encapsulation: ViewEncapsulation.None,
 })
@@ -51,7 +51,7 @@ export class FocusTrap {
   /** Focuses the first tabbable element within the focus trap region. */
   focusFirstTabbableElement() {
     let rootElement = this.trappedContent.nativeElement;
-    let redirectToElement = rootElement.querySelector('[md-focus-start]') as HTMLElement ||
+    let redirectToElement = rootElement.querySelector('[cdk-focus-start]') as HTMLElement ||
                             this._getFirstTabbableElement(rootElement);
 
     if (redirectToElement) {
@@ -62,7 +62,7 @@ export class FocusTrap {
   /** Focuses the last tabbable element within the focus trap region. */
   focusLastTabbableElement() {
     let rootElement = this.trappedContent.nativeElement;
-    let focusTargets = rootElement.querySelectorAll('[md-focus-end]');
+    let focusTargets = rootElement.querySelectorAll('[cdk-focus-end]');
     let redirectToElement: HTMLElement = null;
 
     if (focusTargets.length) {

src/lib/core/a11y/index.ts

@@ -1,11 +1,11 @@
 import {NgModule, ModuleWithProviders} from '@angular/core';
 import {FocusTrap} from './focus-trap';
-import {MdLiveAnnouncer} from './live-announcer';
+import {LiveAnnouncer} from './live-announcer';
 import {InteractivityChecker} from './interactivity-checker';
 import {CommonModule} from '@angular/common';
 import {PlatformModule} from '../platform/index';
 
-export const A11Y_PROVIDERS = [MdLiveAnnouncer, InteractivityChecker];
+export const A11Y_PROVIDERS = [LiveAnnouncer, InteractivityChecker];
 
 @NgModule({
   imports: [CommonModule, PlatformModule],