diff --git a/src/lib/button/button.html b/src/lib/button/button.html index d198d21ca42..e7caa601203 100644 --- a/src/lib/button/button.html +++ b/src/lib/button/button.html @@ -1,7 +1,7 @@ -
+ [matRippleDisabled]="_isRippleDisabled()" + [matRippleCentered]="_isIconButton" + [matRippleTrigger]="_getHostElement()">
diff --git a/src/lib/button/button.ts b/src/lib/button/button.ts index ebfb6960d12..d11c1776b29 100644 --- 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 index b6067c6e083..f1185ea34a3 100644 --- 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)"> -
+
- + - -
+
diff --git a/src/lib/core/option/option.ts b/src/lib/core/option/option.ts index ebb95a93330..baf7353f70b 100644 --- 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 index c232ec2fb02..5b25c0a829f 100644 --- 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 index 5bed9b3e0cf..71d227291bd 100644 --- a/src/lib/datepicker/calendar.html +++ b/src/lib/datepicker/calendar.html @@ -1,17 +1,6 @@
- - - - - - - - - @@ -52,11 +31,11 @@ (userSelection)="_userSelected()"> - - +
diff --git a/src/lib/datepicker/calendar.ts b/src/lib/datepicker/calendar.ts index eb47eb20a61..b66adc2ff4f 100644 --- 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 implements AfterContentInit, OnDestroy { private _intlChanges: Subscription; @@ -146,7 +147,6 @@ export class MdCalendar 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, @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 index 90fcc91b609..fea716d55f6 100644 --- a/src/lib/datepicker/datepicker-content.html +++ b/src/lib/datepicker/datepicker-content.html @@ -1,4 +1,4 @@ - - + diff --git a/src/lib/datepicker/datepicker-toggle.html b/src/lib/datepicker/datepicker-toggle.html index 3335c2912d6..57546536b13 100644 --- a/src/lib/datepicker/datepicker-toggle.html +++ b/src/lib/datepicker/datepicker-toggle.html @@ -1,10 +1,10 @@ - diff --git a/src/lib/datepicker/datepicker-toggle.ts b/src/lib/datepicker/datepicker-toggle.ts index 006ee0cb752..5968934ff4f 100644 --- 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 implements OnChanges, OnDestroy { private _stateChanges = Subscription.EMPTY; diff --git a/src/lib/datepicker/datepicker.spec.ts b/src/lib/datepicker/datepicker.spec.ts index a5f4a93f99b..cd0834f951d 100644 --- 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 index 9f711fcea5d..d0873f7f198 100644 --- 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 implements AfterContentInit { datepicker: MdDatepicker; diff --git a/src/lib/datepicker/month-view.html b/src/lib/datepicker/month-view.html index 4688b323ee8..a371beaebdd 100644 --- a/src/lib/datepicker/month-view.html +++ b/src/lib/datepicker/month-view.html @@ -3,7 +3,7 @@ {{day.narrow}} - implements AfterContentInit { /** diff --git a/src/lib/datepicker/year-view.html b/src/lib/datepicker/year-view.html index 4fd34e0c3b8..ca50a5b1cd6 100644 --- a/src/lib/datepicker/year-view.html +++ b/src/lib/datepicker/year-view.html @@ -2,7 +2,7 @@ - -
+
-
+ [matRippleTrigger]="_getHostElement()" + [matRippleDisabled]="_isRippleDisabled()">
- + [disabled]="disabled">
diff --git a/src/lib/list/list.ts b/src/lib/list/list.ts index 06051afc267..183b8c81dd8 100644 --- 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 index 852eaf74d13..2603911a490 100644 --- 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 index 86e13ecab85..ab3465eb526 100644 --- a/src/lib/menu/menu-item.html +++ b/src/lib/menu/menu-item.html @@ -1,3 +1,3 @@ -
+
diff --git a/src/lib/menu/menu-item.ts b/src/lib/menu/menu-item.ts index b801dc6c294..fe9ff3dcbb5 100644 --- 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 { diff --git a/src/lib/paginator/paginator.html b/src/lib/paginator/paginator.html index 515ab798124..700efb48faa 100644 --- a/src/lib/paginator/paginator.html +++ b/src/lib/paginator/paginator.html @@ -3,15 +3,15 @@ {{_intl.itemsPerPageLabel}}
- - + {{pageSizeOption}} - - + +
{{pageSize}}
@@ -20,21 +20,21 @@ {{_intl.getRangeLabel(pageIndex, pageSize, length)}}
- - diff --git a/src/lib/paginator/paginator.ts b/src/lib/paginator/paginator.ts index a0903e392cb..22391029aaf 100644 --- a/src/lib/paginator/paginator.ts +++ b/src/lib/paginator/paginator.ts @@ -52,9 +52,7 @@ export class PageEvent { host: { 'class': 'mat-paginator', }, - providers: [ - {provide: MATERIAL_COMPATIBILITY_MODE, useValue: false} - ], + viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, diff --git a/src/lib/progress-spinner/progress-spinner.html b/src/lib/progress-spinner/progress-spinner.html index 3379dc08262..bb27e80f90b 100644 --- a/src/lib/progress-spinner/progress-spinner.html +++ b/src/lib/progress-spinner/progress-spinner.html @@ -1,6 +1,6 @@ diff --git a/src/lib/radio/radio.html b/src/lib/radio/radio.html index 2b455fd4151..c6280776061 100644 --- a/src/lib/radio/radio.html +++ b/src/lib/radio/radio.html @@ -5,10 +5,10 @@
-
+
-
+
diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts index d9e9c74233e..114bf16e318 100644 --- a/src/lib/slide-toggle/slide-toggle.ts +++ b/src/lib/slide-toggle/slide-toggle.ts @@ -26,15 +26,20 @@ import {Platform} from '@angular/cdk/platform'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; import { applyCssTransform, + CanColor, + CanDisable, + CanDisableRipple, HammerInput, + HasTabIndex, + MATERIAL_COMPATIBILITY_MODE, MdRipple, + mixinColor, + mixinDisabled, + mixinDisableRipple, + mixinTabIndex, RippleRef, } from '@angular/material/core'; import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; -import {mixinDisabled, CanDisable} from '@angular/material/core'; -import {CanColor, mixinColor} from '@angular/material/core'; -import {CanDisableRipple, mixinDisableRipple} from '@angular/material/core'; -import {HasTabIndex, mixinTabIndex} from '@angular/material/core'; import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y'; // Increasing integer for generating unique ids for slide-toggle components. @@ -74,10 +79,11 @@ export const _MdSlideToggleMixinBase = templateUrl: 'slide-toggle.html', styleUrls: ['slide-toggle.css'], providers: [MD_SLIDE_TOGGLE_VALUE_ACCESSOR], + viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}], inputs: ['disabled', 'disableRipple', 'color', 'tabIndex'], encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, }) export class MdSlideToggle extends _MdSlideToggleMixinBase implements OnDestroy, AfterContentInit, ControlValueAccessor, CanDisable, CanColor, HasTabIndex, CanDisableRipple { diff --git a/src/lib/stepper/step-header.html b/src/lib/stepper/step-header.html index b385c5b4397..57b98354451 100644 --- a/src/lib/stepper/step-header.html +++ b/src/lib/stepper/step-header.html @@ -2,8 +2,8 @@ [class.mat-step-icon-not-touched]="icon == 'number' && !selected" [ngSwitch]="icon"> {{index + 1}} - create - done + create + done
diff --git a/src/lib/stepper/step-header.ts b/src/lib/stepper/step-header.ts index d610db9a73b..be0390fc7b5 100644 --- a/src/lib/stepper/step-header.ts +++ b/src/lib/stepper/step-header.ts @@ -23,7 +23,7 @@ import {MdStepLabel} from './step-label'; }, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, - providers: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: false}], + viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}], }) export class MdStepHeader { /** Icon for the given step. */ diff --git a/src/lib/stepper/stepper-horizontal.html b/src/lib/stepper/stepper-horizontal.html index 8b32e92e93a..905f8dee803 100644 --- a/src/lib/stepper/stepper-horizontal.html +++ b/src/lib/stepper/stepper-horizontal.html @@ -1,6 +1,6 @@
- - +
diff --git a/src/lib/stepper/stepper-vertical.html b/src/lib/stepper/stepper-vertical.html index bccd9bf5f4d..29a2f16f16f 100644 --- a/src/lib/stepper/stepper-vertical.html +++ b/src/lib/stepper/stepper-vertical.html @@ -1,5 +1,5 @@
- - +
, /** Asserts that step selection change using stepper buttons does not focus step header. */ function assertStepHeaderFocusNotCalled(fixture: ComponentFixture) { let stepperComponent = fixture.debugElement.query(By.directive(MdStepper)).componentInstance; - let stepHeaderEl = fixture.debugElement.queryAll(By.css('md-step-header'))[1].nativeElement; + let stepHeaderEl = fixture.debugElement.queryAll(By.css('mat-step-header'))[1].nativeElement; let nextButtonNativeEl = fixture.debugElement .queryAll(By.directive(MdStepperNext))[0].nativeElement; spyOn(stepHeaderEl, 'focus'); @@ -577,7 +577,7 @@ function assertLinearStepperValidity(stepHeaderEl: HTMLElement, /** Asserts that step header focus is blurred if the step cannot be selected upon header click. */ function assertStepHeaderBlurred(fixture: ComponentFixture) { let stepHeaderEl = fixture.debugElement - .queryAll(By.css('md-step-header'))[1].nativeElement; + .queryAll(By.css('mat-step-header'))[1].nativeElement; spyOn(stepHeaderEl, 'blur'); stepHeaderEl.click(); fixture.detectChanges(); diff --git a/src/lib/stepper/stepper.ts b/src/lib/stepper/stepper.ts index 6c2098e5e06..1472de27a0f 100644 --- a/src/lib/stepper/stepper.ts +++ b/src/lib/stepper/stepper.ts @@ -26,7 +26,7 @@ import {FormControl, FormGroupDirective, NgForm} from '@angular/forms'; import { defaultErrorStateMatcher, ErrorOptions, - ErrorStateMatcher, + ErrorStateMatcher, MATERIAL_COMPATIBILITY_MODE, MD_ERROR_GLOBAL_OPTIONS, } from '@angular/material/core'; import {MdStepHeader} from './step-header'; @@ -107,6 +107,7 @@ export class MdStepper extends _MdStepper { providers: [{provide: MdStepper, useExisting: MdHorizontalStepper}], encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, + viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}], }) export class MdHorizontalStepper extends MdStepper { } @@ -129,6 +130,7 @@ export class MdHorizontalStepper extends MdStepper { } ]) ], providers: [{provide: MdStepper, useExisting: MdVerticalStepper}], + viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}], encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, }) diff --git a/src/lib/tabs/tab-group.html b/src/lib/tabs/tab-group.html index b352fa088a9..baef20dfb1b 100644 --- a/src/lib/tabs/tab-group.html +++ b/src/lib/tabs/tab-group.html @@ -1,9 +1,9 @@ - - - +
- - +
diff --git a/src/lib/tabs/tab-group.spec.ts b/src/lib/tabs/tab-group.spec.ts index a82befc61f8..651f465319e 100644 --- a/src/lib/tabs/tab-group.spec.ts +++ b/src/lib/tabs/tab-group.spec.ts @@ -372,7 +372,7 @@ describe('MdTabGroup', () => { expect(tabLabelElement.classList.contains('mat-tab-label-active')).toBe(true); let tabContentElement = fixture.debugElement - .query(By.css(`md-tab-body:nth-of-type(${expectedIndex + 1})`)).nativeElement; + .query(By.css(`mat-tab-body:nth-of-type(${expectedIndex + 1})`)).nativeElement; expect(tabContentElement.classList.contains('mat-tab-body-active')).toBe(true); } diff --git a/src/lib/tabs/tab-group.ts b/src/lib/tabs/tab-group.ts index 5a7297cd89c..a80bc765b5b 100644 --- a/src/lib/tabs/tab-group.ts +++ b/src/lib/tabs/tab-group.ts @@ -28,7 +28,10 @@ import {coerceBooleanProperty} from '@angular/cdk/coercion'; import {Subscription} from 'rxjs/Subscription'; import {MdTab} from './tab'; import {merge} from 'rxjs/observable/merge'; -import {CanDisableRipple, mixinDisableRipple} from '@angular/material/core'; +import { + CanDisableRipple, MATERIAL_COMPATIBILITY_MODE, + mixinDisableRipple +} from '@angular/material/core'; import {CanColor, mixinColor, ThemePalette} from '@angular/material/core'; @@ -69,7 +72,8 @@ export const _MdTabGroupMixinBase = mixinColor(mixinDisableRipple(MdTabGroupBase 'class': 'mat-tab-group', '[class.mat-tab-group-dynamic-height]': 'dynamicHeight', '[class.mat-tab-group-inverted-header]': 'headerPosition === "below"', - } + }, + viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}], }) export class MdTabGroup extends _MdTabGroupMixinBase implements AfterContentInit, AfterContentChecked, AfterViewChecked, OnDestroy, CanColor, CanDisableRipple { diff --git a/src/lib/tabs/tab-header.html b/src/lib/tabs/tab-header.html index 62a15bb6bed..79f964eda21 100644 --- a/src/lib/tabs/tab-header.html +++ b/src/lib/tabs/tab-header.html @@ -1,6 +1,6 @@