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>

0 commit comments

Comments
 (0)