Skip to content

Commit 7fe37e5

Browse files
andrewseguinjelbourn
andrewseguin
authored and
jelbourn
committed
chore: use mat in internal templates (#7219)
1 parent f2419bf commit 7fe37e5

Some content is hidden

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

46 files changed

+133
-128
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
@@ -130,6 +131,7 @@ export const _MdButtonMixinBase = mixinColor(mixinDisabled(mixinDisableRipple(Md
130131
encapsulation: ViewEncapsulation.None,
131132
preserveWhitespaces: false,
132133
changeDetection: ChangeDetectionStrategy.OnPush,
134+
viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
133135
})
134136
export class MdButton extends _MdButtonMixinBase
135137
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
preserveWhitespaces: false,

‎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 & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import {
1313
Input,
1414
Output,
1515
ViewEncapsulation,
16-
Inject,
1716
Optional,
1817
ChangeDetectionStrategy,
1918
ChangeDetectorRef,
@@ -59,6 +58,7 @@ export class MdOptionSelectionChange {
5958
encapsulation: ViewEncapsulation.None,
6059
preserveWhitespaces: false,
6160
changeDetection: ChangeDetectionStrategy.OnPush,
61+
viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
6262
})
6363
export class MdOption {
6464
private _selected: boolean = false;
@@ -107,8 +107,7 @@ export class MdOption {
107107
constructor(
108108
private _element: ElementRef,
109109
private _changeDetectorRef: ChangeDetectorRef,
110-
@Optional() public readonly group: MdOptgroup,
111-
@Optional() @Inject(MATERIAL_COMPATIBILITY_MODE) public _isCompatibilityMode: boolean) {}
110+
@Optional() public readonly group: MdOptgroup) {}
112111

113112
/**
114113
* 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
@@ -60,6 +60,7 @@ import {MdDatepickerIntl} from './datepicker-intl';
6060
encapsulation: ViewEncapsulation.None,
6161
preserveWhitespaces: false,
6262
changeDetection: ChangeDetectionStrategy.OnPush,
63+
viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
6364
})
6465
export class MdCalendar<D> implements AfterContentInit, OnDestroy {
6566
private _intlChanges: Subscription;
@@ -146,7 +147,6 @@ export class MdCalendar<D> implements AfterContentInit, OnDestroy {
146147
constructor(private _elementRef: ElementRef,
147148
private _intl: MdDatepickerIntl,
148149
private _ngZone: NgZone,
149-
@Optional() @Inject(MATERIAL_COMPATIBILITY_MODE) public _isCompatibilityMode: boolean,
150150
@Optional() private _dateAdapter: DateAdapter<D>,
151151
@Optional() @Inject(MD_DATE_FORMATS) private _dateFormats: MdDateFormats,
152152
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({
@@ -34,6 +35,7 @@ import {of as observableOf} from 'rxjs/observable/of';
3435
encapsulation: ViewEncapsulation.None,
3536
preserveWhitespaces: false,
3637
changeDetection: ChangeDetectionStrategy.OnPush,
38+
viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
3739
})
3840
export class MdDatepickerToggle<D> implements OnChanges, OnDestroy {
3941
private _stateChanges = Subscription.EMPTY;

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

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

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

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

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

273273
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';
@@ -88,6 +88,7 @@ export const MD_DATEPICKER_SCROLL_STRATEGY_PROVIDER = {
8888
encapsulation: ViewEncapsulation.None,
8989
preserveWhitespaces: false,
9090
changeDetection: ChangeDetectionStrategy.OnPush,
91+
viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
9192
})
9293
export class MdDatepickerContent<D> implements AfterContentInit {
9394
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 {coerceDateProperty} from './coerce-date-property';
2326
import {createMissingDateImplError} from './datepicker-errors';
@@ -37,6 +40,7 @@ const DAYS_PER_WEEK = 7;
3740
encapsulation: ViewEncapsulation.None,
3841
preserveWhitespaces: false,
3942
changeDetection: ChangeDetectionStrategy.OnPush,
43+
viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
4044
})
4145
export class MdMonthView<D> implements AfterContentInit {
4246
/**

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<thead class="mat-calendar-table-header">
33
<tr><th class="mat-calendar-table-header-divider" colspan="4"></th></tr>
44
</thead>
5-
<tbody md-calendar-body
5+
<tbody mat-calendar-body
66
role="grid"
77
allowDisabledSelection="true"
88
[label]="_yearLabel"

‎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.
@@ -132,6 +132,7 @@ export class MdListSubheaderCssMatStyler {}
132132
encapsulation: ViewEncapsulation.None,
133133
preserveWhitespaces: false,
134134
changeDetection: ChangeDetectionStrategy.OnPush,
135+
viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
135136
})
136137
export class MdListItem extends _MdListItemMixinBase implements AfterContentInit, CanDisableRipple {
137138
private _lineSetter: MdLineSetter;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ const FOCUSED_STYLE: string = 'mat-list-item-focus';
8383
encapsulation: ViewEncapsulation.None,
8484
preserveWhitespaces: false,
8585
changeDetection: ChangeDetectionStrategy.OnPush,
86-
providers: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: false}],
86+
viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
8787
})
8888
export class MdListOption extends _MdListOptionMixinBase
8989
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.
@@ -46,6 +46,7 @@ export const _MdMenuItemMixinBase = mixinDisabled(MdMenuItemBase);
4646
preserveWhitespaces: false,
4747
templateUrl: 'menu-item.html',
4848
exportAs: 'mdMenuItem, matMenuItem',
49+
viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
4950
})
5051
export class MdMenuItem extends _MdMenuItemMixinBase implements FocusableOption, CanDisable,
5152
OnDestroy {

0 commit comments

Comments
 (0)