Skip to content

Commit c15f594

Browse files
jelbournjelbourn
committed
feat: add camelCase selectors where they were missing
1 parent c8b1e20 commit c15f594

35 files changed

+138
-194
lines changed

‎src/lib/autocomplete/autocomplete.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export type AutocompletePositionY = 'above' | 'below';
2929
encapsulation: ViewEncapsulation.None,
3030
exportAs: 'mdAutocomplete',
3131
host: {
32-
'[class.mat-autocomplete]': 'true'
32+
'class': 'mat-autocomplete'
3333
}
3434
})
3535
export class MdAutocomplete implements AfterContentInit {

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@ export class MdButtonToggleChange {
5151
selector: 'md-button-toggle-group:not([multiple]), mat-button-toggle-group:not([multiple])',
5252
providers: [MD_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR],
5353
host: {
54-
'[class.mat-button-toggle-group]': 'true',
5554
'role': 'radiogroup',
55+
'class': 'mat-button-toggle-group',
5656
'[class.mat-button-toggle-vertical]': 'vertical'
5757
},
5858
exportAs: 'mdButtonToggleGroup',
@@ -238,7 +238,7 @@ export class MdButtonToggleGroup implements AfterViewInit, ControlValueAccessor
238238
selector: 'md-button-toggle-group[multiple], mat-button-toggle-group[multiple]',
239239
exportAs: 'mdButtonToggleGroup',
240240
host: {
241-
'[class.mat-button-toggle-group]': 'true',
241+
'class': 'mat-button-toggle-group',
242242
'[class.mat-button-toggle-vertical]': 'vertical'
243243
}
244244
})
@@ -278,7 +278,7 @@ export class MdButtonToggleGroupMultiple {
278278
styleUrls: ['button-toggle.css'],
279279
encapsulation: ViewEncapsulation.None,
280280
host: {
281-
'[class.mat-button-toggle]': 'true'
281+
'class': 'mat-button-toggle'
282282
}
283283
})
284284
export class MdButtonToggle implements OnInit {

‎src/lib/card/card.ts

+28-54
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,7 @@ import {
1212
*/
1313
@Directive({
1414
selector: 'md-card-content, mat-card-content',
15-
host: {
16-
'[class.mat-card-content]': 'true'
17-
}
15+
host: {'class': 'mat-card-content'}
1816
})
1917
export class MdCardContent {}
2018

@@ -23,10 +21,9 @@ export class MdCardContent {}
2321
* @docs-private
2422
*/
2523
@Directive({
26-
selector: 'md-card-title, mat-card-title, [md-card-title], [mat-card-title]',
27-
host: {
28-
'[class.mat-card-title]': 'true'
29-
}
24+
selector: 'md-card-title, mat-card-title, [md-card-title], [mat-card-title],' +
25+
'[mdCardTitle], [matCardTitle]',
26+
host: {'class': 'mat-card-title'}
3027
})
3128
export class MdCardTitle {}
3229

@@ -35,10 +32,9 @@ export class MdCardTitle {}
3532
* @docs-private
3633
*/
3734
@Directive({
38-
selector: 'md-card-subtitle, mat-card-subtitle, [md-card-subtitle], [mat-card-subtitle]',
39-
host: {
40-
'[class.mat-card-subtitle]': 'true'
41-
}
35+
selector: 'md-card-subtitle, mat-card-subtitle, [md-card-subtitle], [mat-card-subtitle],' +
36+
'[mdCardSubtitle], [matCardSubtitle]',
37+
host: {'class': 'mat-card-subtitle'}
4238
})
4339
export class MdCardSubtitle {}
4440

@@ -48,9 +44,7 @@ export class MdCardSubtitle {}
4844
*/
4945
@Directive({
5046
selector: 'md-card-actions, mat-card-actions',
51-
host: {
52-
'[class.mat-card-actions]': 'true'
53-
}
47+
host: {'class': 'mat-card-actions'}
5448
})
5549
export class MdCardActions {}
5650

@@ -60,9 +54,7 @@ export class MdCardActions {}
6054
*/
6155
@Directive({
6256
selector: 'md-card-footer, mat-card-footer',
63-
host: {
64-
'[class.mat-card-footer]': 'true'
65-
}
57+
host: {'class': 'mat-card-footer'}
6658
})
6759
export class MdCardFooter {}
6860

@@ -71,58 +63,48 @@ export class MdCardFooter {}
7163
* @docs-private
7264
*/
7365
@Directive({
74-
selector: '[md-card-sm-image], [mat-card-sm-image]',
75-
host: {
76-
'[class.mat-card-sm-image]': 'true'
77-
}
66+
selector: '[md-card-image], [mat-card-image], [mdCardImage], [matCardImage]',
67+
host: {'class': 'mat-card-image'}
7868
})
79-
export class MdCardSmImage {}
69+
export class MdCardImage {}
8070

8171
/**
8272
* Image used in a card, needed to add the mat- CSS styling.
8373
* @docs-private
8474
*/
8575
@Directive({
86-
selector: '[md-card-md-image], [mat-card-md-image]',
87-
host: {
88-
'[class.mat-card-md-image]': 'true'
89-
}
76+
selector: '[md-card-sm-image], [mat-card-sm-image], [mdCardImageSmall], [matCardImageSmall]',
77+
host: {'class': 'mat-card-sm-image'}
9078
})
91-
export class MdCardMdImage {}
79+
export class MdCardSmImage {}
9280

9381
/**
9482
* Image used in a card, needed to add the mat- CSS styling.
9583
* @docs-private
9684
*/
9785
@Directive({
98-
selector: '[md-card-lg-image], [mat-card-lg-image]',
99-
host: {
100-
'class.mat-card-lg-image': 'true'
101-
}
86+
selector: '[md-card-md-image], [mat-card-md-image], [mdCardImageMedium], [matCardImageMedium]',
87+
host: {'class': 'mat-card-md-image'}
10288
})
103-
export class MdCardLgImage {}
89+
export class MdCardMdImage {}
10490

10591
/**
10692
* Image used in a card, needed to add the mat- CSS styling.
10793
* @docs-private
10894
*/
10995
@Directive({
110-
selector: '[md-card-image], [mat-card-image]',
111-
host: {
112-
'[class.mat-card-image]': 'true'
113-
}
96+
selector: '[md-card-lg-image], [mat-card-lg-image], [mdCardImageLarge], [matCardImageLarge]',
97+
host: {'class': 'mat-card-lg-image'}
11498
})
115-
export class MdCardImage {}
99+
export class MdCardLgImage {}
116100

117101
/**
118102
* Large image used in a card, needed to add the mat- CSS styling.
119103
* @docs-private
120104
*/
121105
@Directive({
122-
selector: '[md-card-xl-image], [mat-card-xl-image]',
123-
host: {
124-
'[class.mat-card-xl-image]': 'true'
125-
}
106+
selector: '[md-card-xl-image], [mat-card-xl-image], [mdCardImageXLarge], [matCardImageXLarge]',
107+
host: {'class': 'mat-card-xl-image'}
126108
})
127109
export class MdCardXlImage {}
128110

@@ -131,10 +113,8 @@ export class MdCardXlImage {}
131113
* @docs-private
132114
*/
133115
@Directive({
134-
selector: '[md-card-avatar], [mat-card-avatar]',
135-
host: {
136-
'[class.mat-card-avatar]': 'true'
137-
}
116+
selector: '[md-card-avatar], [mat-card-avatar], [mdCardAvatar], [matCardAvatar]',
117+
host: {'class': 'mat-card-avatar'}
138118
})
139119
export class MdCardAvatar {}
140120

@@ -157,9 +137,7 @@ export class MdCardAvatar {}
157137
styleUrls: ['card.css'],
158138
encapsulation: ViewEncapsulation.None,
159139
changeDetection: ChangeDetectionStrategy.OnPush,
160-
host: {
161-
'[class.mat-card]': 'true'
162-
}
140+
host: {'class': 'mat-card'}
163141
})
164142
export class MdCard {}
165143

@@ -175,9 +153,7 @@ export class MdCard {}
175153
templateUrl: 'card-header.html',
176154
encapsulation: ViewEncapsulation.None,
177155
changeDetection: ChangeDetectionStrategy.OnPush,
178-
host: {
179-
'[class.mat-card-header]': 'true'
180-
}
156+
host: {'class': 'mat-card-header'}
181157
})
182158
export class MdCardHeader {}
183159

@@ -193,8 +169,6 @@ export class MdCardHeader {}
193169
templateUrl: 'card-title-group.html',
194170
encapsulation: ViewEncapsulation.None,
195171
changeDetection: ChangeDetectionStrategy.OnPush,
196-
host: {
197-
'[class.mat-card-title-group]': 'true'
198-
}
172+
host: {'class': 'mat-card-title-group'}
199173
})
200174
export class MdCardTitleGroup {}

‎src/lib/chips/chip-list.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import {Subscription} from 'rxjs/Subscription';
3333
// Properties
3434
'[attr.tabindex]': '_tabIndex',
3535
'role': 'listbox',
36-
'[class.mat-chip-list]': 'true',
36+
'class': 'mat-chip-list',
3737

3838
// Events
3939
'(focus)': 'focus()',

‎src/lib/chips/chip.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export interface MdChipEvent {
2424
mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]`,
2525
template: `<ng-content></ng-content>`,
2626
host: {
27-
'[class.mat-chip]': 'true',
27+
'class': 'mat-chip',
2828
'tabindex': '-1',
2929
'role': 'option',
3030

‎src/lib/core/compatibility/compatibility.ts

+28-26
Original file line numberDiff line numberDiff line change
@@ -27,25 +27,26 @@ export function getMdCompatibilityInvalidPrefixError(prefix: string, nodeName: s
2727
/** Selector that matches all elements that may have style collisions with AngularJS Material. */
2828
export const MAT_ELEMENTS_SELECTOR = `
2929
[mat-button],
30-
[mat-card-subtitle],
31-
[mat-card-title],
32-
[mat-dialog-actions],
33-
[mat-dialog-close],
34-
[mat-dialog-content],
35-
[mat-dialog-title],
3630
[mat-fab],
3731
[mat-icon-button],
38-
[mat-menu-trigger-for],
3932
[mat-mini-fab],
4033
[mat-raised-button],
41-
[mat-tab-label],
42-
[mat-tab-link],
43-
[mat-tab-nav-bar],
34+
[matCardSubtitle],
35+
[matCardTitle],
36+
[matDialogActions],
37+
[matDialogClose],
38+
[matDialogContent],
39+
[matDialogTitle],
40+
[matLine],
41+
[matMenuTriggerFor],
42+
[matTabLabel],
43+
[matTabLink],
44+
[matTabNav],
4445
[matTooltip],
4546
mat-autocomplete,
4647
mat-button-toggle,
47-
mat-button-toggle-group,
4848
mat-button-toggle,
49+
mat-button-toggle-group,
4950
mat-card,
5051
mat-card-actions,
5152
mat-card-content,
@@ -60,6 +61,7 @@ export const MAT_ELEMENTS_SELECTOR = `
6061
mat-dialog-container,
6162
mat-dialog-content,
6263
mat-divider,
64+
mat-error,
6365
mat-grid-list,
6466
mat-grid-tile,
6567
mat-grid-tile-footer,
@@ -83,31 +85,31 @@ export const MAT_ELEMENTS_SELECTOR = `
8385
mat-spinner,
8486
mat-tab,
8587
mat-tab-group,
86-
mat-toolbar,
87-
mat-error`;
88+
mat-toolbar`;
8889

8990
/** Selector that matches all elements that may have style collisions with AngularJS Material. */
9091
export const MD_ELEMENTS_SELECTOR = `
9192
[md-button],
92-
[md-card-subtitle],
93-
[md-card-title],
94-
[md-dialog-actions],
95-
[md-dialog-close],
96-
[md-dialog-content],
97-
[md-dialog-title],
9893
[md-fab],
9994
[md-icon-button],
100-
[md-menu-trigger-for],
10195
[md-mini-fab],
10296
[md-raised-button],
103-
[md-tab-label],
104-
[md-tab-link],
105-
[md-tab-nav-bar],
97+
[mdCardSubtitle],
98+
[mdCardTitle],
99+
[mdDialogActions],
100+
[mdDialogClose],
101+
[mdDialogContent],
102+
[mdDialogTitle],
103+
[mdLine],
104+
[mdMenuTriggerFor],
105+
[mdTabLabel],
106+
[mdTabLink],
107+
[mdTabNav],
106108
[mdTooltip],
107109
md-autocomplete,
108110
md-button-toggle,
109-
md-button-toggle-group,
110111
md-button-toggle,
112+
md-button-toggle-group,
111113
md-card,
112114
md-card-actions,
113115
md-card-content,
@@ -122,6 +124,7 @@ export const MD_ELEMENTS_SELECTOR = `
122124
md-dialog-container,
123125
md-dialog-content,
124126
md-divider,
127+
md-error,
125128
md-grid-list,
126129
md-grid-tile,
127130
md-grid-tile-footer,
@@ -145,8 +148,7 @@ export const MD_ELEMENTS_SELECTOR = `
145148
md-spinner,
146149
md-tab,
147150
md-tab-group,
148-
md-toolbar,
149-
md-error`;
151+
md-toolbar`;
150152

151153
/** Directive that enforces that the `mat-` prefix cannot be used. */
152154
@Directive({selector: MAT_ELEMENTS_SELECTOR})

‎src/lib/core/line/line.ts

+2-4
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,8 @@ import {MdCommonModule} from '../common-behaviors/common-module';
1414
* counted by checking the query list's length.
1515
*/
1616
@Directive({
17-
selector: '[md-line], [mat-line]',
18-
host: {
19-
'[class.mat-line]': 'true'
20-
}
17+
selector: '[md-line], [mat-line], [mdLine], [matLine]',
18+
host: {'class': 'mat-line'}
2119
})
2220
export class MdLine {}
2321

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export class MdOptionSelectionChange {
4646
'[class.mat-option-disabled]': 'disabled',
4747
'(click)': '_selectViaInteraction()',
4848
'(keydown)': '_handleKeydown($event)',
49-
'[class.mat-option]': 'true',
49+
'class': 'mat-option',
5050
},
5151
templateUrl: 'option.html',
5252
encapsulation: ViewEncapsulation.None

‎src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export type MdPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate';
2626
styleUrls: ['pseudo-checkbox.css'],
2727
template: '',
2828
host: {
29-
'[class.mat-pseudo-checkbox]': 'true',
29+
'class': 'mat-pseudo-checkbox',
3030
'[class.mat-pseudo-checkbox-indeterminate]': 'state === "indeterminate"',
3131
'[class.mat-pseudo-checkbox-checked]': 'state === "checked"',
3232
'[class.mat-pseudo-checkbox-disabled]': 'disabled',

‎src/lib/datepicker/calendar.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ import {MATERIAL_COMPATIBILITY_MODE} from '../core';
3939
templateUrl: 'calendar.html',
4040
styleUrls: ['calendar.css'],
4141
host: {
42-
'[class.mat-calendar]': 'true',
42+
'class': 'mat-calendar',
4343
},
4444
encapsulation: ViewEncapsulation.None,
4545
changeDetection: ChangeDetectionStrategy.OnPush,

‎src/lib/dialog/dialog-container.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export function throwMdDialogContentAlreadyAttachedError() {
5656
])
5757
],
5858
host: {
59-
'[class.mat-dialog-container]': 'true',
59+
'class': 'mat-dialog-container',
6060
'[attr.role]': 'dialogConfig?.role',
6161
'[@slideDialog]': '_state',
6262
'(@slideDialog.done)': '_onAnimationDone($event)',

0 commit comments

Comments
 (0)