Skip to content

Commit 27edb98

Browse files
jelbournjelbourn
committed
feat: add camelCase selectors where they were missing
1 parent 536add3 commit 27edb98

35 files changed

+134
-158
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

+24-18
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,11 @@ export class MdCardContent {}
2121
* @docs-private
2222
*/
2323
@Directive({
24-
selector: 'md-card-title, mat-card-title, [md-card-title], [mat-card-title]',
25-
host: {'class': 'mat-card-title'}
24+
selector: 'md-card-title, mat-card-title, [md-card-title], [mat-card-title],' +
25+
'[mdCardTitle], [matCardTitle]',
26+
host: {
27+
'class': 'mat-card-title '
28+
}
2629
})
2730
export class MdCardTitle {}
2831

@@ -31,8 +34,11 @@ export class MdCardTitle {}
3134
* @docs-private
3235
*/
3336
@Directive({
34-
selector: 'md-card-subtitle, mat-card-subtitle, [md-card-subtitle], [mat-card-subtitle]',
35-
host: {'class': 'mat-card-subtitle'}
37+
selector: 'md-card-subtitle, mat-card-subtitle, [md-card-subtitle], [mat-card-subtitle],' +
38+
'[mdCardSubtitle], [matCardSubtitle]',
39+
host: {
40+
'class': 'mat-card-subtitle '
41+
}
3642
})
3743
export class MdCardSubtitle {}
3844

@@ -61,47 +67,47 @@ export class MdCardFooter {}
6167
* @docs-private
6268
*/
6369
@Directive({
64-
selector: '[md-card-sm-image], [mat-card-sm-image]',
65-
host: {'class': 'mat-card-sm-image'}
70+
selector: '[md-card-image], [mat-card-image], [mdCardImage], [matCardImage]',
71+
host: {'class': 'mat-card-image'}
6672
})
67-
export class MdCardSmImage {}
73+
export class MdCardImage {}
6874

6975
/**
7076
* Image used in a card, needed to add the mat- CSS styling.
7177
* @docs-private
7278
*/
7379
@Directive({
74-
selector: '[md-card-md-image], [mat-card-md-image]',
75-
host: {'class': 'mat-card-md-image'}
80+
selector: '[md-card-sm-image], [mat-card-sm-image], [mdCardImageSmall], [matCardImageSmall]',
81+
host: {'class': 'mat-card-sm-image'}
7682
})
77-
export class MdCardMdImage {}
83+
export class MdCardSmImage {}
7884

7985
/**
8086
* Image used in a card, needed to add the mat- CSS styling.
8187
* @docs-private
8288
*/
8389
@Directive({
84-
selector: '[md-card-lg-image], [mat-card-lg-image]',
85-
host: {'class': 'mat-card-lg-image'}
90+
selector: '[md-card-md-image], [mat-card-md-image], [mdCardImageMedium], [matCardImageMedium]',
91+
host: {'class': 'mat-card-md-image'}
8692
})
87-
export class MdCardLgImage {}
93+
export class MdCardMdImage {}
8894

8995
/**
9096
* Image used in a card, needed to add the mat- CSS styling.
9197
* @docs-private
9298
*/
9399
@Directive({
94-
selector: '[md-card-image], [mat-card-image]',
95-
host: {'class': 'mat-card-image'}
100+
selector: '[md-card-lg-image], [mat-card-lg-image], [mdCardImageLarge], [matCardImageLarge]',
101+
host: {'class': 'mat-card-lg-image'}
96102
})
97-
export class MdCardImage {}
103+
export class MdCardLgImage {}
98104

99105
/**
100106
* Large image used in a card, needed to add the mat- CSS styling.
101107
* @docs-private
102108
*/
103109
@Directive({
104-
selector: '[md-card-xl-image], [mat-card-xl-image]',
110+
selector: '[md-card-xl-image], [mat-card-xl-image], [mdCardImageXLarge], [matCardImageXLarge]',
105111
host: {'class': 'mat-card-xl-image'}
106112
})
107113
export class MdCardXlImage {}
@@ -111,7 +117,7 @@ export class MdCardXlImage {}
111117
* @docs-private
112118
*/
113119
@Directive({
114-
selector: '[md-card-avatar], [mat-card-avatar]',
120+
selector: '[md-card-avatar], [mat-card-avatar], [mdCardAvatar], [matCardAvatar]',
115121
host: {'class': 'mat-card-avatar'}
116122
})
117123
export class MdCardAvatar {}

‎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
@@ -33,7 +33,7 @@ export const _MdChipMixinBase = mixinColor(MdChipBase, 'primary');
3333
template: `<ng-content></ng-content>`,
3434
inputs: ['color'],
3535
host: {
36-
'[class.mat-chip]': 'true',
36+
'class': 'mat-chip',
3737
'tabindex': '-1',
3838
'role': 'option',
3939

‎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
@@ -36,7 +36,7 @@ export const _MdPseudoCheckboxBase = mixinColor(MdPseudoCheckboxBase, 'accent');
3636
inputs: ['color'],
3737
template: '',
3838
host: {
39-
'[class.mat-pseudo-checkbox]': 'true',
39+
'class': 'mat-pseudo-checkbox',
4040
'[class.mat-pseudo-checkbox-indeterminate]': 'state === "indeterminate"',
4141
'[class.mat-pseudo-checkbox-checked]': 'state === "checked"',
4242
'[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)',

‎src/lib/dialog/dialog-content-directives.ts

+10-13
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import {MdDialogRef} from './dialog-ref';
66
* Button that will close the current dialog.
77
*/
88
@Directive({
9-
selector: 'button[md-dialog-close], button[mat-dialog-close]',
9+
selector: 'button[md-dialog-close], button[mat-dialog-close],' +
10+
'button[mdDialogClose], button[matDialogClose]',
1011
host: {
1112
'(click)': 'dialogRef.close(dialogResult)',
1213
'[attr.aria-label]': 'ariaLabel',
@@ -30,10 +31,8 @@ export class MdDialogClose {
3031
* Title of a dialog element. Stays fixed to the top of the dialog when scrolling.
3132
*/
3233
@Directive({
33-
selector: '[md-dialog-title], [mat-dialog-title]',
34-
host: {
35-
'[class.mat-dialog-title]': 'true'
36-
}
34+
selector: '[md-dialog-title], [mat-dialog-title], [mdDialogTitle], [matDialogTitle]',
35+
host: {'class': 'mat-dialog-title'},
3736
})
3837
export class MdDialogTitle { }
3938

@@ -42,10 +41,9 @@ export class MdDialogTitle { }
4241
* Scrollable content container of a dialog.
4342
*/
4443
@Directive({
45-
selector: '[md-dialog-content], md-dialog-content, [mat-dialog-content], mat-dialog-content',
46-
host: {
47-
'[class.mat-dialog-content]': 'true'
48-
}
44+
selector: '[md-dialog-content], md-dialog-content, [mat-dialog-content], mat-dialog-content,' +
45+
'[mdDialogContent], [matDialogContent]',
46+
host: {'class': 'mat-dialog-content'}
4947
})
5048
export class MdDialogContent { }
5149

@@ -55,9 +53,8 @@ export class MdDialogContent { }
5553
* Stays fixed to the bottom when scrolling.
5654
*/
5755
@Directive({
58-
selector: '[md-dialog-actions], md-dialog-actions, [mat-dialog-actions], mat-dialog-actions',
59-
host: {
60-
'[class.mat-dialog-actions]': 'true'
61-
}
56+
selector: '[md-dialog-actions], md-dialog-actions, [mat-dialog-actions], mat-dialog-actions,' +
57+
'[mdDialogActions], [matDialogActions]',
58+
host: {'class': 'mat-dialog-actions'}
6259
})
6360
export class MdDialogActions { }

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const MD_FIT_MODE = 'fit';
3333
styleUrls: ['grid-list.css'],
3434
host: {
3535
'role': 'list',
36-
'[class.mat-grid-list]': 'true',
36+
'class': 'mat-grid-list',
3737
},
3838
encapsulation: ViewEncapsulation.None,
3939
})

0 commit comments

Comments
 (0)