angular · jelbourn · Sep 21, 2017 · Sep 21, 2017 · Sep 21, 2017
diff --git a/src/lib/button/button.html b/src/lib/button/button.html
@@ -1,7 +1,7 @@
 <span class="mat-button-wrapper"><ng-content></ng-content></span>
-<div md-ripple class="mat-button-ripple"
+<div mat-ripple class="mat-button-ripple"
      [class.mat-button-ripple-round]="_isRoundButton || _isIconButton"
-     [mdRippleDisabled]="_isRippleDisabled()"
-     [mdRippleCentered]="_isIconButton"
-     [mdRippleTrigger]="_getHostElement()"></div>
+     [matRippleDisabled]="_isRippleDisabled()"
+     [matRippleCentered]="_isIconButton"
+     [matRippleTrigger]="_getHostElement()"></div>
 <div class="mat-button-focus-overlay"></div>
diff --git a/src/lib/button/button.ts b/src/lib/button/button.ts
@@ -24,6 +24,7 @@ import {
   CanColor,
   CanDisable,
   CanDisableRipple,
+  MATERIAL_COMPATIBILITY_MODE,
   mixinColor,
   mixinDisabled,
   mixinDisableRipple
@@ -130,6 +131,7 @@ export const _MdButtonMixinBase = mixinColor(mixinDisabled(mixinDisableRipple(Md
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
 })
 export class MdButton extends _MdButtonMixinBase
     implements OnDestroy, CanDisable, CanColor, CanDisableRipple {

diff --git a/src/lib/checkbox/checkbox.html b/src/lib/checkbox/checkbox.html
@@ -15,10 +15,10 @@
            [attr.aria-labelledby]="ariaLabelledby"
            (change)="_onInteractionEvent($event)"
            (click)="_onInputClick($event)">
-    <div md-ripple class="mat-checkbox-ripple"
-         [mdRippleTrigger]="label"
-         [mdRippleDisabled]="_isRippleDisabled()"
-         [mdRippleCentered]="true"></div>
+    <div mat-ripple class="mat-checkbox-ripple"
+         [matRippleTrigger]="label"
+         [matRippleDisabled]="_isRippleDisabled()"
+         [matRippleCentered]="true"></div>
     <div class="mat-checkbox-frame"></div>
     <div class="mat-checkbox-background">
       <svg version="1.1"

diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts
@@ -26,7 +26,7 @@ import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {
   CanColor,
   CanDisable,
-  CanDisableRipple,
+  CanDisableRipple, MATERIAL_COMPATIBILITY_MODE,
   MdRipple,
   mixinColor,
   mixinDisabled,
@@ -104,6 +104,7 @@ export const _MdCheckboxMixinBase =
     '[class.mat-checkbox-label-before]': 'labelPosition == "before"',
   },
   providers: [MD_CHECKBOX_CONTROL_VALUE_ACCESSOR],
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
   inputs: ['disabled', 'disableRipple', 'color'],
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,

diff --git a/src/lib/core/option/option.html b/src/lib/core/option/option.html
@@ -1,12 +1,10 @@
-<span [ngSwitch]="_isCompatibilityMode" *ngIf="multiple">
-  <mat-pseudo-checkbox class="mat-option-pseudo-checkbox" *ngSwitchCase="true"
+<span *ngIf="multiple">
+  <mat-pseudo-checkbox class="mat-option-pseudo-checkbox"
       [state]="selected ? 'checked' : ''" [disabled]="disabled"></mat-pseudo-checkbox>
-  <md-pseudo-checkbox class="mat-option-pseudo-checkbox" *ngSwitchDefault
-      [state]="selected ? 'checked' : ''" [disabled]="disabled"></md-pseudo-checkbox>
 </span>
 
 <ng-content></ng-content>
-<div class="mat-option-ripple" md-ripple
-     [mdRippleTrigger]="_getHostElement()"
-     [mdRippleDisabled]="disabled || disableRipple">
+<div class="mat-option-ripple" mat-ripple
+     [matRippleTrigger]="_getHostElement()"
+     [matRippleDisabled]="disabled || disableRipple">
 </div>
diff --git a/src/lib/core/option/option.ts b/src/lib/core/option/option.ts
@@ -13,7 +13,6 @@ import {
   Input,
   Output,
   ViewEncapsulation,
-  Inject,
   Optional,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -59,6 +58,7 @@ export class MdOptionSelectionChange {
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
 })
 export class MdOption {
   private _selected: boolean = false;
@@ -107,8 +107,7 @@ export class MdOption {
   constructor(
     private _element: ElementRef,
     private _changeDetectorRef: ChangeDetectorRef,
-    @Optional() public readonly group: MdOptgroup,
-    @Optional() @Inject(MATERIAL_COMPATIBILITY_MODE) public _isCompatibilityMode: boolean) {}
+    @Optional() public readonly group: MdOptgroup) {}
 
   /**
    * Whether or not the option is currently active and ready to be selected.

diff --git a/src/lib/core/ripple/ripple.ts b/src/lib/core/ripple/ripple.ts
@@ -137,7 +137,7 @@ export class MdRipple implements OnChanges, OnDestroy {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes['trigger'] && this.trigger) {
+    if ((changes['trigger'] || changes['_matRippleTrigger']) && this.trigger) {
       this._rippleRenderer.setTriggerElement(this.trigger);
     }
 

diff --git a/src/lib/datepicker/calendar.html b/src/lib/datepicker/calendar.html
@@ -1,40 +1,19 @@
 <div class="mat-calendar-header">
   <div class="mat-calendar-controls">
-    <!--
-      TODO(mmalerba): Clean up duplicated compatibility mode code when we have a better way to do
-      this.
-    -->
-
-    <!-- Check for compatibility mode and use correct prefix for md-button. -->
-    <button *ngIf="!_isCompatibilityMode" md-button class="mat-calendar-period-button"
-            (click)="_currentPeriodClicked()"  [attr.aria-label]="_periodButtonLabel">
-      {{_periodButtonText}}
-      <div class="mat-calendar-arrow" [class.mat-calendar-invert]="!_monthView"></div>
-    </button>
-    <button *ngIf="_isCompatibilityMode" mat-button class="mat-calendar-period-button"
+    <button mat-button class="mat-calendar-period-button"
             (click)="_currentPeriodClicked()"  [attr.aria-label]="_periodButtonLabel">
       {{_periodButtonText}}
       <div class="mat-calendar-arrow" [class.mat-calendar-invert]="!_monthView"></div>
     </button>
 
     <div class="mat-calendar-spacer"></div>
 
-    <!-- Check for compatibility mode and use correct prefix for md-icon-button. -->
-    <button *ngIf="!_isCompatibilityMode" md-icon-button class="mat-calendar-previous-button"
-            [disabled]="!_previousEnabled()" (click)="_previousClicked()"
-            [attr.aria-label]="_prevButtonLabel">
-    </button>
-    <button *ngIf="_isCompatibilityMode" mat-icon-button class="mat-calendar-previous-button"
+    <button mat-icon-button class="mat-calendar-previous-button"
             [disabled]="!_previousEnabled()" (click)="_previousClicked()"
             [attr.aria-label]="_prevButtonLabel">
     </button>
 
-    <!-- Check for compatibility mode and use correct prefix for md-icon-button. -->
-    <button *ngIf="!_isCompatibilityMode" md-icon-button class="mat-calendar-next-button"
-            [disabled]="!_nextEnabled()" (click)="_nextClicked()"
-            [attr.aria-label]="_nextButtonLabel">
-    </button>
-    <button *ngIf="_isCompatibilityMode" mat-icon-button class="mat-calendar-next-button"
+    <button mat-icon-button class="mat-calendar-next-button"
             [disabled]="!_nextEnabled()" (click)="_nextClicked()"
             [attr.aria-label]="_nextButtonLabel">
     </button>
@@ -52,11 +31,11 @@
       (userSelection)="_userSelected()">
   </md-month-view>
 
-  <md-year-view
+  <mat-year-view
       *ngSwitchDefault
       [activeDate]="_activeDate"
       [selected]="selected"
       [dateFilter]="_dateFilterForViews"
       (selectedChange)="_monthSelected($event)">
-  </md-year-view>
+  </mat-year-view>
 </div>
diff --git a/src/lib/datepicker/calendar.ts b/src/lib/datepicker/calendar.ts
@@ -60,6 +60,7 @@ import {MdDatepickerIntl} from './datepicker-intl';
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
 })
 export class MdCalendar<D> implements AfterContentInit, OnDestroy {
   private _intlChanges: Subscription;
@@ -146,7 +147,6 @@ export class MdCalendar<D> implements AfterContentInit, OnDestroy {
   constructor(private _elementRef: ElementRef,
               private _intl: MdDatepickerIntl,
               private _ngZone: NgZone,
-              @Optional() @Inject(MATERIAL_COMPATIBILITY_MODE) public _isCompatibilityMode: boolean,
               @Optional() private _dateAdapter: DateAdapter<D>,
               @Optional() @Inject(MD_DATE_FORMATS) private _dateFormats: MdDateFormats,
               changeDetectorRef: ChangeDetectorRef) {

diff --git a/src/lib/datepicker/datepicker-content.html b/src/lib/datepicker/datepicker-content.html
@@ -1,4 +1,4 @@
-<md-calendar cdkTrapFocus
+<mat-calendar cdkTrapFocus
     [id]="datepicker.id"
     [startAt]="datepicker.startAt"
     [startView]="datepicker.startView"
@@ -8,4 +8,4 @@
     [selected]="datepicker._selected"
     (selectedChange)="datepicker._select($event)"
     (userSelection)="datepicker.close()">
-</md-calendar>
+</mat-calendar>
diff --git a/src/lib/datepicker/datepicker-toggle.html b/src/lib/datepicker/datepicker-toggle.html
@@ -1,10 +1,10 @@
-<button md-icon-button type="button" [attr.aria-label]="_intl.openCalendarLabel"
+<button mat-icon-button type="button" [attr.aria-label]="_intl.openCalendarLabel"
         [disabled]="disabled" (click)="_open($event)">
-  <md-icon>
+  <mat-icon>
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%"
          fill="currentColor" style="vertical-align: top" focusable="false">
       <path d="M0 0h24v24H0z" fill="none"/>
       <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
     </svg>
-  </md-icon>
+  </mat-icon>
 </button>
diff --git a/src/lib/datepicker/datepicker-toggle.ts b/src/lib/datepicker/datepicker-toggle.ts
@@ -22,6 +22,7 @@ import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {Subscription} from 'rxjs/Subscription';
 import {merge} from 'rxjs/observable/merge';
 import {of as observableOf} from 'rxjs/observable/of';
+import {MATERIAL_COMPATIBILITY_MODE} from '@angular/material/core';
 
 
 @Component({
@@ -34,6 +35,7 @@ import {of as observableOf} from 'rxjs/observable/of';
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
 })
 export class MdDatepickerToggle<D> implements OnChanges, OnDestroy {
   private _stateChanges = Subscription.EMPTY;

diff --git a/src/lib/datepicker/datepicker.spec.ts b/src/lib/datepicker/datepicker.spec.ts
@@ -249,7 +249,7 @@ describe('MdDatepicker', () => {
 
         let ownedElement = document.getElementById(ownedElementId);
         expect(ownedElement).not.toBeNull();
-        expect((ownedElement as Element).tagName.toLowerCase()).toBe('md-calendar');
+        expect((ownedElement as Element).tagName.toLowerCase()).toBe('mat-calendar');
       });
 
       it('input should aria-owns calendar after opened in touch mode', () => {
@@ -267,7 +267,7 @@ describe('MdDatepicker', () => {
 
         let ownedElement = document.getElementById(ownedElementId);
         expect(ownedElement).not.toBeNull();
-        expect((ownedElement as Element).tagName.toLowerCase()).toBe('md-calendar');
+        expect((ownedElement as Element).tagName.toLowerCase()).toBe('mat-calendar');
       });
 
       it('should throw when given wrong data type', () => {

diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts
@@ -36,7 +36,7 @@ import {
   ViewContainerRef,
   ViewEncapsulation,
 } from '@angular/core';
-import {DateAdapter} from '@angular/material/core';
+import {DateAdapter, MATERIAL_COMPATIBILITY_MODE} from '@angular/material/core';
 import {MdDialog, MdDialogRef} from '@angular/material/dialog';
 import {DOCUMENT} from '@angular/platform-browser';
 import {Subject} from 'rxjs/Subject';
@@ -88,6 +88,7 @@ export const MD_DATEPICKER_SCROLL_STRATEGY_PROVIDER = {
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
 })
 export class MdDatepickerContent<D> implements AfterContentInit {
   datepicker: MdDatepicker<D>;

diff --git a/src/lib/datepicker/month-view.html b/src/lib/datepicker/month-view.html
@@ -3,7 +3,7 @@
     <tr><th *ngFor="let day of _weekdays" [attr.aria-label]="day.long">{{day.narrow}}</th></tr>
     <tr><th class="mat-calendar-table-header-divider" colspan="7" aria-hidden="true"></th></tr>
   </thead>
-  <tbody md-calendar-body
+  <tbody mat-calendar-body
          role="grid"
          [label]="_monthLabel"
          [rows]="_weeks"

diff --git a/src/lib/datepicker/month-view.ts b/src/lib/datepicker/month-view.ts
@@ -17,7 +17,10 @@ import {
   Output,
   ViewEncapsulation,
 } from '@angular/core';
-import {DateAdapter, MD_DATE_FORMATS, MdDateFormats} from '@angular/material/core';
+import {
+  DateAdapter, MATERIAL_COMPATIBILITY_MODE, MD_DATE_FORMATS,
+  MdDateFormats
+} from '@angular/material/core';
 import {MdCalendarCell} from './calendar-body';
 import {coerceDateProperty} from './coerce-date-property';
 import {createMissingDateImplError} from './datepicker-errors';
@@ -37,6 +40,7 @@ const DAYS_PER_WEEK = 7;
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
 })
 export class MdMonthView<D> implements AfterContentInit {
   /**

diff --git a/src/lib/datepicker/year-view.html b/src/lib/datepicker/year-view.html
@@ -2,7 +2,7 @@
   <thead class="mat-calendar-table-header">
     <tr><th class="mat-calendar-table-header-divider" colspan="4"></th></tr>
   </thead>
-  <tbody md-calendar-body
+  <tbody mat-calendar-body
          role="grid"
          allowDisabledSelection="true"
          [label]="_yearLabel"

diff --git a/src/lib/list/list-item.html b/src/lib/list/list-item.html
@@ -1,7 +1,7 @@
 <div class="mat-list-item-content">
-  <div class="mat-list-item-ripple" md-ripple
-       [mdRippleTrigger]="_getHostElement()"
-       [mdRippleDisabled]="_isRippleDisabled()">
+  <div class="mat-list-item-ripple" mat-ripple
+       [matRippleTrigger]="_getHostElement()"
+       [matRippleDisabled]="_isRippleDisabled()">
   </div>
 
   <ng-content

diff --git a/src/lib/list/list-option.html b/src/lib/list/list-option.html
@@ -2,14 +2,14 @@
   [class.mat-list-item-content-reverse]="checkboxPosition == 'after'"
   [class.mat-list-item-disabled]="disabled">
 
-  <div md-ripple
+  <div mat-ripple
     class="mat-list-item-ripple"
-    [mdRippleTrigger]="_getHostElement()"
-    [mdRippleDisabled]="_isRippleDisabled()"></div>
+    [matRippleTrigger]="_getHostElement()"
+    [matRippleDisabled]="_isRippleDisabled()"></div>
 
-  <md-pseudo-checkbox #autocheckbox
+  <mat-pseudo-checkbox #autocheckbox
     [state]="selected ? 'checked' : 'unchecked'"
-    [disabled]="disabled"></md-pseudo-checkbox>
+    [disabled]="disabled"></mat-pseudo-checkbox>
 
   <div class="mat-list-text"><ng-content></ng-content></div>
 

diff --git a/src/lib/list/list.ts b/src/lib/list/list.ts
@@ -19,7 +19,7 @@ import {
   ViewEncapsulation,
   ChangeDetectionStrategy,
 } from '@angular/core';
-import {MdLine, MdLineSetter} from '@angular/material/core';
+import {MATERIAL_COMPATIBILITY_MODE, MdLine, MdLineSetter} from '@angular/material/core';
 import {CanDisableRipple, mixinDisableRipple} from '@angular/material/core';
 
 // Boilerplate for applying mixins to MdList.
@@ -132,6 +132,7 @@ export class MdListSubheaderCssMatStyler {}
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
 })
 export class MdListItem extends _MdListItemMixinBase implements AfterContentInit, CanDisableRipple {
   private _lineSetter: MdLineSetter;

diff --git a/src/lib/list/selection-list.ts b/src/lib/list/selection-list.ts
@@ -83,7 +83,7 @@ const FOCUSED_STYLE: string = 'mat-list-item-focus';
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: false}],
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
 })
 export class MdListOption extends _MdListOptionMixinBase
     implements AfterContentInit, OnDestroy, FocusableOption, CanDisableRipple {

diff --git a/src/lib/menu/menu-item.html b/src/lib/menu/menu-item.html
@@ -1,3 +1,3 @@
 <ng-content></ng-content>
-<div class="mat-menu-ripple" *ngIf="!disabled" md-ripple [mdRippleTrigger]="_getHostElement()">
+<div class="mat-menu-ripple" *ngIf="!disabled" mat-ripple [matRippleTrigger]="_getHostElement()">
 </div>
diff --git a/src/lib/menu/menu-item.ts b/src/lib/menu/menu-item.ts
@@ -14,7 +14,7 @@ import {
   OnDestroy,
   ViewEncapsulation,
 } from '@angular/core';
-import {CanDisable, mixinDisabled} from '@angular/material/core';
+import {CanDisable, MATERIAL_COMPATIBILITY_MODE, mixinDisabled} from '@angular/material/core';
 import {Subject} from 'rxjs/Subject';
 
 // Boilerplate for applying mixins to MdMenuItem.
@@ -46,6 +46,7 @@ export const _MdMenuItemMixinBase = mixinDisabled(MdMenuItemBase);
   preserveWhitespaces: false,
   templateUrl: 'menu-item.html',
   exportAs: 'mdMenuItem, matMenuItem',
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
 })
 export class MdMenuItem extends _MdMenuItemMixinBase implements FocusableOption, CanDisable,
   OnDestroy {