Skip to content

Commit 3eb0681

Browse files
jelbournkara
jelbourn
authored and
kara
committed
feat: add camelCase selectors where they were missing (#4901)
1 parent 82d752b commit 3eb0681

File tree

33 files changed

+130
-156
lines changed

33 files changed

+130
-156
lines changed

‎src/lib/autocomplete/autocomplete.ts

Lines changed: 1 addition & 1 deletion
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

Lines changed: 3 additions & 3 deletions
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

Lines changed: 24 additions & 18 deletions
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

Lines changed: 1 addition & 1 deletion
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/core/compatibility/compatibility.ts

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -15,25 +15,25 @@ export function getMdCompatibilityInvalidPrefixError(prefix: string, nodeName: s
1515
/** Selector that matches all elements that may have style collisions with AngularJS Material. */
1616
export const MAT_ELEMENTS_SELECTOR = `
1717
[mat-button],
18-
[mat-card-subtitle],
19-
[mat-card-title],
20-
[mat-dialog-actions],
21-
[mat-dialog-close],
22-
[mat-dialog-content],
23-
[mat-dialog-title],
2418
[mat-fab],
2519
[mat-icon-button],
26-
[mat-menu-trigger-for],
2720
[mat-mini-fab],
2821
[mat-raised-button],
29-
[mat-tab-label],
30-
[mat-tab-link],
31-
[mat-tab-nav-bar],
22+
[matCardSubtitle],
23+
[matCardTitle],
24+
[matDialogActions],
25+
[matDialogClose],
26+
[matDialogContent],
27+
[matDialogTitle],
28+
[matLine],
29+
[matTabLabel],
30+
[matTabLink],
31+
[matTabNav],
3232
[matTooltip],
3333
mat-autocomplete,
3434
mat-button-toggle,
35-
mat-button-toggle-group,
3635
mat-button-toggle,
36+
mat-button-toggle-group,
3737
mat-card,
3838
mat-card-actions,
3939
mat-card-content,
@@ -48,6 +48,7 @@ export const MAT_ELEMENTS_SELECTOR = `
4848
mat-dialog-container,
4949
mat-dialog-content,
5050
mat-divider,
51+
mat-error,
5152
mat-grid-list,
5253
mat-grid-tile,
5354
mat-grid-tile-footer,
@@ -71,31 +72,30 @@ export const MAT_ELEMENTS_SELECTOR = `
7172
mat-spinner,
7273
mat-tab,
7374
mat-tab-group,
74-
mat-toolbar,
75-
mat-error`;
75+
mat-toolbar`;
7676

7777
/** Selector that matches all elements that may have style collisions with AngularJS Material. */
7878
export const MD_ELEMENTS_SELECTOR = `
7979
[md-button],
80-
[md-card-subtitle],
81-
[md-card-title],
82-
[md-dialog-actions],
83-
[md-dialog-close],
84-
[md-dialog-content],
85-
[md-dialog-title],
8680
[md-fab],
8781
[md-icon-button],
88-
[md-menu-trigger-for],
8982
[md-mini-fab],
9083
[md-raised-button],
91-
[md-tab-label],
92-
[md-tab-link],
93-
[md-tab-nav-bar],
84+
[mdCardSubtitle],
85+
[mdCardTitle],
86+
[mdDialogActions],
87+
[mdDialogClose],
88+
[mdDialogContent],
89+
[mdDialogTitle],
90+
[mdLine],
91+
[mdTabLabel],
92+
[mdTabLink],
93+
[mdTabNav],
9494
[mdTooltip],
9595
md-autocomplete,
9696
md-button-toggle,
97-
md-button-toggle-group,
9897
md-button-toggle,
98+
md-button-toggle-group,
9999
md-card,
100100
md-card-actions,
101101
md-card-content,
@@ -110,6 +110,7 @@ export const MD_ELEMENTS_SELECTOR = `
110110
md-dialog-container,
111111
md-dialog-content,
112112
md-divider,
113+
md-error,
113114
md-grid-list,
114115
md-grid-tile,
115116
md-grid-tile-footer,
@@ -133,8 +134,7 @@ export const MD_ELEMENTS_SELECTOR = `
133134
md-spinner,
134135
md-tab,
135136
md-tab-group,
136-
md-toolbar,
137-
md-error`;
137+
md-toolbar`;
138138

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

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

Lines changed: 2 additions & 4 deletions
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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export class MdOptionSelectionChange {
4444
'[class.mat-option-disabled]': 'disabled',
4545
'(click)': '_selectViaInteraction()',
4646
'(keydown)': '_handleKeydown($event)',
47-
'[class.mat-option]': 'true',
47+
'class': 'mat-option',
4848
},
4949
templateUrl: 'option.html',
5050
encapsulation: ViewEncapsulation.None

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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 1 addition & 1 deletion
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]': '_config?.role',
6161
'[@slideDialog]': '_state',
6262
'(@slideDialog.done)': '_onAnimationDone($event)',

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

Lines changed: 10 additions & 13 deletions
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

Lines changed: 1 addition & 1 deletion
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)