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>

0 commit comments

Comments
 (0)