Skip to content

Commit ab3375b

Browse files
andrewseguinandrewseguin
committed
compat: use mat in internal templates
1 parent dcf3b27 commit ab3375b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+126
-125
lines changed

‎src/lib/button/button.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<span class="mat-button-wrapper"><ng-content></ng-content></span>
2-
<div md-ripple class="mat-button-ripple"
2+
<div mat-ripple class="mat-button-ripple"
33
[class.mat-button-ripple-round]="_isRoundButton || _isIconButton"
4-
[mdRippleDisabled]="_isRippleDisabled()"
5-
[mdRippleCentered]="_isIconButton"
6-
[mdRippleTrigger]="_getHostElement()"></div>
4+
[matRippleDisabled]="_isRippleDisabled()"
5+
[matRippleCentered]="_isIconButton"
6+
[matRippleTrigger]="_getHostElement()"></div>
77
<div class="mat-button-focus-overlay"></div>

‎src/lib/button/button.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {
2424
CanColor,
2525
CanDisable,
2626
CanDisableRipple,
27+
MATERIAL_COMPATIBILITY_MODE,
2728
mixinColor,
2829
mixinDisabled,
2930
mixinDisableRipple
@@ -129,6 +130,7 @@ export const _MdButtonMixinBase = mixinColor(mixinDisabled(mixinDisableRipple(Md
129130
inputs: ['disabled', 'disableRipple', 'color'],
130131
encapsulation: ViewEncapsulation.None,
131132
changeDetection: ChangeDetectionStrategy.OnPush,
133+
viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
132134
})
133135
export class MdButton extends _MdButtonMixinBase
134136
implements OnDestroy, CanDisable, CanColor, CanDisableRipple {

‎src/lib/checkbox/checkbox.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@
1515
[attr.aria-labelledby]="ariaLabelledby"
1616
(change)="_onInteractionEvent($event)"
1717
(click)="_onInputClick($event)">
18-
<div md-ripple class="mat-checkbox-ripple"
19-
[mdRippleTrigger]="label"
20-
[mdRippleDisabled]="_isRippleDisabled()"
21-
[mdRippleCentered]="true"></div>
18+
<div mat-ripple class="mat-checkbox-ripple"
19+
[matRippleTrigger]="label"
20+
[matRippleDisabled]="_isRippleDisabled()"
21+
[matRippleCentered]="true"></div>
2222
<div class="mat-checkbox-frame"></div>
2323
<div class="mat-checkbox-background">
2424
<svg version="1.1"

‎src/lib/checkbox/checkbox.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
2626
import {
2727
CanColor,
2828
CanDisable,
29-
CanDisableRipple,
29+
CanDisableRipple, MATERIAL_COMPATIBILITY_MODE,
3030
MdRipple,
3131
mixinColor,
3232
mixinDisabled,
@@ -104,6 +104,7 @@ export const _MdCheckboxMixinBase =
104104
'[class.mat-checkbox-label-before]': 'labelPosition == "before"',
105105
},
106106
providers: [MD_CHECKBOX_CONTROL_VALUE_ACCESSOR],
107+
viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
107108
inputs: ['disabled', 'disableRipple', 'color'],
108109
encapsulation: ViewEncapsulation.None,
109110
changeDetection: ChangeDetectionStrategy.OnPush

‎src/lib/core/option/option.html

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
<span [ngSwitch]="_isCompatibilityMode" *ngIf="multiple">
2-
<mat-pseudo-checkbox class="mat-option-pseudo-checkbox" *ngSwitchCase="true"
1+
<span *ngIf="multiple">
2+
<mat-pseudo-checkbox class="mat-option-pseudo-checkbox"
33
[state]="selected ? 'checked' : ''" [disabled]="disabled"></mat-pseudo-checkbox>
4-
<md-pseudo-checkbox class="mat-option-pseudo-checkbox" *ngSwitchDefault
5-
[state]="selected ? 'checked' : ''" [disabled]="disabled"></md-pseudo-checkbox>
64
</span>
75

86
<ng-content></ng-content>
9-
<div class="mat-option-ripple" md-ripple
10-
[mdRippleTrigger]="_getHostElement()"
11-
[mdRippleDisabled]="disabled || disableRipple">
7+
<div class="mat-option-ripple" mat-ripple
8+
[matRippleTrigger]="_getHostElement()"
9+
[matRippleDisabled]="disabled || disableRipple">
1210
</div>

‎src/lib/core/option/option.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export class MdOptionSelectionChange {
5858
templateUrl: 'option.html',
5959
encapsulation: ViewEncapsulation.None,
6060
changeDetection: ChangeDetectionStrategy.OnPush,
61+
viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
6162
})
6263
export class MdOption {
6364
private _selected: boolean = false;
@@ -106,8 +107,7 @@ export class MdOption {
106107
constructor(
107108
private _element: ElementRef,
108109
private _changeDetectorRef: ChangeDetectorRef,
109-
@Optional() public readonly group: MdOptgroup,
110-
@Optional() @Inject(MATERIAL_COMPATIBILITY_MODE) public _isCompatibilityMode: boolean) {}
110+
@Optional() public readonly group: MdOptgroup) {}
111111

112112
/**
113113
* Whether or not the option is currently active and ready to be selected.

‎src/lib/core/ripple/ripple.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ export class MdRipple implements OnChanges, OnDestroy {
137137
}
138138

139139
ngOnChanges(changes: SimpleChanges) {
140-
if (changes['trigger'] && this.trigger) {
140+
if ((changes['trigger'] || changes['_matRippleTrigger']) && this.trigger) {
141141
this._rippleRenderer.setTriggerElement(this.trigger);
142142
}
143143

‎src/lib/datepicker/calendar.html

Lines changed: 5 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,19 @@
11
<div class="mat-calendar-header">
22
<div class="mat-calendar-controls">
3-
<!--
4-
TODO(mmalerba): Clean up duplicated compatibility mode code when we have a better way to do
5-
this.
6-
-->
7-
8-
<!-- Check for compatibility mode and use correct prefix for md-button. -->
9-
<button *ngIf="!_isCompatibilityMode" md-button class="mat-calendar-period-button"
10-
(click)="_currentPeriodClicked()" [attr.aria-label]="_periodButtonLabel">
11-
{{_periodButtonText}}
12-
<div class="mat-calendar-arrow" [class.mat-calendar-invert]="!_monthView"></div>
13-
</button>
14-
<button *ngIf="_isCompatibilityMode" mat-button class="mat-calendar-period-button"
3+
<button mat-button class="mat-calendar-period-button"
154
(click)="_currentPeriodClicked()" [attr.aria-label]="_periodButtonLabel">
165
{{_periodButtonText}}
176
<div class="mat-calendar-arrow" [class.mat-calendar-invert]="!_monthView"></div>
187
</button>
198

209
<div class="mat-calendar-spacer"></div>
2110

22-
<!-- Check for compatibility mode and use correct prefix for md-icon-button. -->
23-
<button *ngIf="!_isCompatibilityMode" md-icon-button class="mat-calendar-previous-button"
24-
[disabled]="!_previousEnabled()" (click)="_previousClicked()"
25-
[attr.aria-label]="_prevButtonLabel">
26-
</button>
27-
<button *ngIf="_isCompatibilityMode" mat-icon-button class="mat-calendar-previous-button"
11+
<button mat-icon-button class="mat-calendar-previous-button"
2812
[disabled]="!_previousEnabled()" (click)="_previousClicked()"
2913
[attr.aria-label]="_prevButtonLabel">
3014
</button>
3115

32-
<!-- Check for compatibility mode and use correct prefix for md-icon-button. -->
33-
<button *ngIf="!_isCompatibilityMode" md-icon-button class="mat-calendar-next-button"
34-
[disabled]="!_nextEnabled()" (click)="_nextClicked()"
35-
[attr.aria-label]="_nextButtonLabel">
36-
</button>
37-
<button *ngIf="_isCompatibilityMode" mat-icon-button class="mat-calendar-next-button"
16+
<button mat-icon-button class="mat-calendar-next-button"
3817
[disabled]="!_nextEnabled()" (click)="_nextClicked()"
3918
[attr.aria-label]="_nextButtonLabel">
4019
</button>
@@ -52,11 +31,11 @@
5231
(userSelection)="_userSelected()">
5332
</md-month-view>
5433

55-
<md-year-view
34+
<mat-year-view
5635
*ngSwitchDefault
5736
[activeDate]="_activeDate"
5837
[selected]="selected"
5938
[dateFilter]="_dateFilterForViews"
6039
(selectedChange)="_monthSelected($event)">
61-
</md-year-view>
40+
</mat-year-view>
6241
</div>

‎src/lib/datepicker/calendar.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ import {MdDatepickerIntl} from './datepicker-intl';
5858
},
5959
encapsulation: ViewEncapsulation.None,
6060
changeDetection: ChangeDetectionStrategy.OnPush,
61+
viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
6162
})
6263
export class MdCalendar<D> implements AfterContentInit, OnDestroy {
6364
private _intlChanges: Subscription;
@@ -132,7 +133,6 @@ export class MdCalendar<D> implements AfterContentInit, OnDestroy {
132133
constructor(private _elementRef: ElementRef,
133134
private _intl: MdDatepickerIntl,
134135
private _ngZone: NgZone,
135-
@Optional() @Inject(MATERIAL_COMPATIBILITY_MODE) public _isCompatibilityMode: boolean,
136136
@Optional() private _dateAdapter: DateAdapter<D>,
137137
@Optional() @Inject(MD_DATE_FORMATS) private _dateFormats: MdDateFormats,
138138
changeDetectorRef: ChangeDetectorRef) {

‎src/lib/datepicker/datepicker-content.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<md-calendar cdkTrapFocus
1+
<mat-calendar cdkTrapFocus
22
[id]="datepicker.id"
33
[startAt]="datepicker.startAt"
44
[startView]="datepicker.startView"
@@ -8,4 +8,4 @@
88
[selected]="datepicker._selected"
99
(selectedChange)="datepicker._select($event)"
1010
(userSelection)="datepicker.close()">
11-
</md-calendar>
11+
</mat-calendar>

‎src/lib/datepicker/datepicker-toggle.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
<button md-icon-button type="button" [attr.aria-label]="_intl.openCalendarLabel"
1+
<button mat-icon-button type="button" [attr.aria-label]="_intl.openCalendarLabel"
22
[disabled]="disabled" (click)="_open($event)">
3-
<md-icon>
3+
<mat-icon>
44
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%"
55
fill="currentColor" style="vertical-align: top" focusable="false">
66
<path d="M0 0h24v24H0z" fill="none"/>
77
<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"/>
88
</svg>
9-
</md-icon>
9+
</mat-icon>
1010
</button>

‎src/lib/datepicker/datepicker-toggle.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {coerceBooleanProperty} from '@angular/cdk/coercion';
2222
import {Subscription} from 'rxjs/Subscription';
2323
import {merge} from 'rxjs/observable/merge';
2424
import {of as observableOf} from 'rxjs/observable/of';
25+
import {MATERIAL_COMPATIBILITY_MODE} from '@angular/material/core';
2526

2627

2728
@Component({
@@ -33,6 +34,7 @@ import {of as observableOf} from 'rxjs/observable/of';
3334
},
3435
encapsulation: ViewEncapsulation.None,
3536
changeDetection: ChangeDetectionStrategy.OnPush,
37+
viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
3638
})
3739
export class MdDatepickerToggle<D> implements OnChanges, OnDestroy {
3840
private _stateChanges = Subscription.EMPTY;

‎src/lib/datepicker/datepicker.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,7 @@ describe('MdDatepicker', () => {
246246

247247
let ownedElement = document.getElementById(ownedElementId);
248248
expect(ownedElement).not.toBeNull();
249-
expect((ownedElement as Element).tagName.toLowerCase()).toBe('md-calendar');
249+
expect((ownedElement as Element).tagName.toLowerCase()).toBe('mat-calendar');
250250
});
251251

252252
it('input should aria-owns calendar after opened in touch mode', () => {
@@ -264,7 +264,7 @@ describe('MdDatepicker', () => {
264264

265265
let ownedElement = document.getElementById(ownedElementId);
266266
expect(ownedElement).not.toBeNull();
267-
expect((ownedElement as Element).tagName.toLowerCase()).toBe('md-calendar');
267+
expect((ownedElement as Element).tagName.toLowerCase()).toBe('mat-calendar');
268268
});
269269

270270
it('should throw when given wrong data type', () => {

‎src/lib/datepicker/datepicker.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ import {
3636
ViewContainerRef,
3737
ViewEncapsulation,
3838
} from '@angular/core';
39-
import {DateAdapter} from '@angular/material/core';
39+
import {DateAdapter, MATERIAL_COMPATIBILITY_MODE} from '@angular/material/core';
4040
import {MdDialog, MdDialogRef} from '@angular/material/dialog';
4141
import {DOCUMENT} from '@angular/platform-browser';
4242
import {Subject} from 'rxjs/Subject';
@@ -86,6 +86,7 @@ export const MD_DATEPICKER_SCROLL_STRATEGY_PROVIDER = {
8686
},
8787
encapsulation: ViewEncapsulation.None,
8888
changeDetection: ChangeDetectionStrategy.OnPush,
89+
viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
8990
})
9091
export class MdDatepickerContent<D> implements AfterContentInit {
9192
datepicker: MdDatepicker<D>;

‎src/lib/datepicker/month-view.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<tr><th *ngFor="let day of _weekdays" [attr.aria-label]="day.long">{{day.narrow}}</th></tr>
44
<tr><th class="mat-calendar-table-header-divider" colspan="7" aria-hidden="true"></th></tr>
55
</thead>
6-
<tbody md-calendar-body
6+
<tbody mat-calendar-body
77
role="grid"
88
[label]="_monthLabel"
99
[rows]="_weeks"

‎src/lib/datepicker/month-view.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@ import {
1717
Output,
1818
ViewEncapsulation,
1919
} from '@angular/core';
20-
import {DateAdapter, MD_DATE_FORMATS, MdDateFormats} from '@angular/material/core';
20+
import {
21+
DateAdapter, MATERIAL_COMPATIBILITY_MODE, MD_DATE_FORMATS,
22+
MdDateFormats
23+
} from '@angular/material/core';
2124
import {MdCalendarCell} from './calendar-body';
2225
import {createMissingDateImplError} from './datepicker-errors';
2326

@@ -35,6 +38,7 @@ const DAYS_PER_WEEK = 7;
3538
templateUrl: 'month-view.html',
3639
encapsulation: ViewEncapsulation.None,
3740
changeDetection: ChangeDetectionStrategy.OnPush,
41+
viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
3842
})
3943
export class MdMonthView<D> implements AfterContentInit {
4044
/**

‎src/lib/list/list-item.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="mat-list-item-content">
2-
<div class="mat-list-item-ripple" md-ripple
3-
[mdRippleTrigger]="_getHostElement()"
4-
[mdRippleDisabled]="_isRippleDisabled()">
2+
<div class="mat-list-item-ripple" mat-ripple
3+
[matRippleTrigger]="_getHostElement()"
4+
[matRippleDisabled]="_isRippleDisabled()">
55
</div>
66

77
<ng-content

‎src/lib/list/list-option.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
[class.mat-list-item-content-reverse]="checkboxPosition == 'after'"
33
[class.mat-list-item-disabled]="disabled">
44

5-
<div md-ripple
5+
<div mat-ripple
66
class="mat-list-item-ripple"
7-
[mdRippleTrigger]="_getHostElement()"
8-
[mdRippleDisabled]="_isRippleDisabled()"></div>
7+
[matRippleTrigger]="_getHostElement()"
8+
[matRippleDisabled]="_isRippleDisabled()"></div>
99

10-
<md-pseudo-checkbox #autocheckbox
10+
<mat-pseudo-checkbox #autocheckbox
1111
[state]="selected ? 'checked' : 'unchecked'"
12-
[disabled]="disabled"></md-pseudo-checkbox>
12+
[disabled]="disabled"></mat-pseudo-checkbox>
1313

1414
<div class="mat-list-text"><ng-content></ng-content></div>
1515

‎src/lib/list/list.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {
1919
ViewEncapsulation,
2020
ChangeDetectionStrategy,
2121
} from '@angular/core';
22-
import {MdLine, MdLineSetter} from '@angular/material/core';
22+
import {MATERIAL_COMPATIBILITY_MODE, MdLine, MdLineSetter} from '@angular/material/core';
2323
import {CanDisableRipple, mixinDisableRipple} from '@angular/material/core';
2424

2525
// Boilerplate for applying mixins to MdList.
@@ -130,6 +130,7 @@ export class MdListSubheaderCssMatStyler {}
130130
templateUrl: 'list-item.html',
131131
encapsulation: ViewEncapsulation.None,
132132
changeDetection: ChangeDetectionStrategy.OnPush,
133+
viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
133134
})
134135
export class MdListItem extends _MdListItemMixinBase implements AfterContentInit, CanDisableRipple {
135136
private _lineSetter: MdLineSetter;

‎src/lib/list/selection-list.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const FOCUSED_STYLE: string = 'mat-list-item-focus';
8282
templateUrl: 'list-option.html',
8383
encapsulation: ViewEncapsulation.None,
8484
changeDetection: ChangeDetectionStrategy.OnPush,
85-
providers: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: false}],
85+
viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
8686
})
8787
export class MdListOption extends _MdListOptionMixinBase
8888
implements AfterContentInit, OnDestroy, FocusableOption, CanDisableRipple {

‎src/lib/menu/menu-item.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<ng-content></ng-content>
2-
<div class="mat-menu-ripple" *ngIf="!disabled" md-ripple [mdRippleTrigger]="_getHostElement()">
2+
<div class="mat-menu-ripple" *ngIf="!disabled" mat-ripple [matRippleTrigger]="_getHostElement()">
33
</div>

‎src/lib/menu/menu-item.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
OnDestroy,
1515
ViewEncapsulation,
1616
} from '@angular/core';
17-
import {CanDisable, mixinDisabled} from '@angular/material/core';
17+
import {CanDisable, MATERIAL_COMPATIBILITY_MODE, mixinDisabled} from '@angular/material/core';
1818
import {Subject} from 'rxjs/Subject';
1919

2020
// Boilerplate for applying mixins to MdMenuItem.
@@ -45,6 +45,7 @@ export const _MdMenuItemMixinBase = mixinDisabled(MdMenuItemBase);
4545
encapsulation: ViewEncapsulation.None,
4646
templateUrl: 'menu-item.html',
4747
exportAs: 'mdMenuItem, matMenuItem',
48+
viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
4849
})
4950
export class MdMenuItem extends _MdMenuItemMixinBase implements FocusableOption, CanDisable,
5051
OnDestroy {

0 commit comments

Comments
 (0)