feat: add camelCase selectors where they were missing (#4901)

src/lib/autocomplete/autocomplete.ts

@@ -29,7 +29,7 @@ export type AutocompletePositionY = 'above' | 'below';
   encapsulation: ViewEncapsulation.None,
   exportAs: 'mdAutocomplete',
   host: {
-    '[class.mat-autocomplete]': 'true'
+    'class': 'mat-autocomplete'
   }
 })
 export class MdAutocomplete implements AfterContentInit {

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

@@ -51,8 +51,8 @@ export class MdButtonToggleChange {
   selector: 'md-button-toggle-group:not([multiple]), mat-button-toggle-group:not([multiple])',
   providers: [MD_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR],
   host: {
-    '[class.mat-button-toggle-group]': 'true',
     'role': 'radiogroup',
+    'class': 'mat-button-toggle-group',
     '[class.mat-button-toggle-vertical]': 'vertical'
   },
   exportAs: 'mdButtonToggleGroup',
@@ -238,7 +238,7 @@ export class MdButtonToggleGroup implements AfterViewInit, ControlValueAccessor
   selector: 'md-button-toggle-group[multiple], mat-button-toggle-group[multiple]',
   exportAs: 'mdButtonToggleGroup',
   host: {
-    '[class.mat-button-toggle-group]': 'true',
+    'class': 'mat-button-toggle-group',
     '[class.mat-button-toggle-vertical]': 'vertical'
   }
 })
@@ -278,7 +278,7 @@ export class MdButtonToggleGroupMultiple {
   styleUrls: ['button-toggle.css'],
   encapsulation: ViewEncapsulation.None,
   host: {
-    '[class.mat-button-toggle]': 'true'
+    'class': 'mat-button-toggle'
   }
 })
 export class MdButtonToggle implements OnInit {

src/lib/card/card.ts

@@ -21,8 +21,11 @@ export class MdCardContent {}
  * @docs-private
  */
 @Directive({
-  selector: 'md-card-title, mat-card-title, [md-card-title], [mat-card-title]',
-  host: {'class': 'mat-card-title'}
+  selector: 'md-card-title, mat-card-title, [md-card-title], [mat-card-title],' +
+  '[mdCardTitle], [matCardTitle]',
+  host: {
+    'class': 'mat-card-title '
+  }
 })
 export class MdCardTitle {}
 
@@ -31,8 +34,11 @@ export class MdCardTitle {}
  * @docs-private
  */
 @Directive({
-  selector: 'md-card-subtitle, mat-card-subtitle, [md-card-subtitle], [mat-card-subtitle]',
-  host: {'class': 'mat-card-subtitle'}
+  selector: 'md-card-subtitle, mat-card-subtitle, [md-card-subtitle], [mat-card-subtitle],' +
+  '[mdCardSubtitle], [matCardSubtitle]',
+  host: {
+    'class': 'mat-card-subtitle '
+  }
 })
 export class MdCardSubtitle {}
 
@@ -61,47 +67,47 @@ export class MdCardFooter {}
  * @docs-private
  */
 @Directive({
-  selector: '[md-card-sm-image], [mat-card-sm-image]',
-  host: {'class': 'mat-card-sm-image'}
+  selector: '[md-card-image], [mat-card-image], [mdCardImage], [matCardImage]',
+  host: {'class': 'mat-card-image'}
 })
-export class MdCardSmImage {}
+export class MdCardImage {}
 
 /**
  * Image used in a card, needed to add the mat- CSS styling.
  * @docs-private
  */
 @Directive({
-  selector: '[md-card-md-image], [mat-card-md-image]',
-  host: {'class': 'mat-card-md-image'}
+  selector: '[md-card-sm-image], [mat-card-sm-image], [mdCardImageSmall], [matCardImageSmall]',
+  host: {'class': 'mat-card-sm-image'}
 })
-export class MdCardMdImage {}
+export class MdCardSmImage {}
 
 /**
  * Image used in a card, needed to add the mat- CSS styling.
  * @docs-private
  */
 @Directive({
-  selector: '[md-card-lg-image], [mat-card-lg-image]',
-  host: {'class': 'mat-card-lg-image'}
+  selector: '[md-card-md-image], [mat-card-md-image], [mdCardImageMedium], [matCardImageMedium]',
+  host: {'class': 'mat-card-md-image'}
 })
-export class MdCardLgImage {}
+export class MdCardMdImage {}
 
 /**
  * Image used in a card, needed to add the mat- CSS styling.
  * @docs-private
  */
 @Directive({
-  selector: '[md-card-image], [mat-card-image]',
-  host: {'class': 'mat-card-image'}
+  selector: '[md-card-lg-image], [mat-card-lg-image], [mdCardImageLarge], [matCardImageLarge]',
+  host: {'class': 'mat-card-lg-image'}
 })
-export class MdCardImage {}
+export class MdCardLgImage {}
 
 /**
  * Large image used in a card, needed to add the mat- CSS styling.
  * @docs-private
  */
 @Directive({
-  selector: '[md-card-xl-image], [mat-card-xl-image]',
+  selector: '[md-card-xl-image], [mat-card-xl-image], [mdCardImageXLarge], [matCardImageXLarge]',
   host: {'class': 'mat-card-xl-image'}
 })
 export class MdCardXlImage {}
@@ -111,7 +117,7 @@ export class MdCardXlImage {}
  * @docs-private
  */
 @Directive({
-  selector: '[md-card-avatar], [mat-card-avatar]',
+  selector: '[md-card-avatar], [mat-card-avatar], [mdCardAvatar], [matCardAvatar]',
   host: {'class': 'mat-card-avatar'}
 })
 export class MdCardAvatar {}

src/lib/chips/chip-list.ts

@@ -33,7 +33,7 @@ import {Subscription} from 'rxjs/Subscription';
     // Properties
     '[attr.tabindex]': '_tabIndex',
     'role': 'listbox',
-    '[class.mat-chip-list]': 'true',
+    'class': 'mat-chip-list',
 
     // Events
     '(focus)': 'focus()',

src/lib/core/compatibility/compatibility.ts

@@ -15,25 +15,25 @@ export function getMdCompatibilityInvalidPrefixError(prefix: string, nodeName: s
 /** Selector that matches all elements that may have style collisions with AngularJS Material. */
 export const MAT_ELEMENTS_SELECTOR = `
   [mat-button],
-  [mat-card-subtitle],
-  [mat-card-title],
-  [mat-dialog-actions],
-  [mat-dialog-close],
-  [mat-dialog-content],
-  [mat-dialog-title],
   [mat-fab],
   [mat-icon-button],
-  [mat-menu-trigger-for],
   [mat-mini-fab],
   [mat-raised-button],
-  [mat-tab-label],
-  [mat-tab-link],
-  [mat-tab-nav-bar],
+  [matCardSubtitle],
+  [matCardTitle],
+  [matDialogActions],
+  [matDialogClose],
+  [matDialogContent],
+  [matDialogTitle],
+  [matLine],
+  [matTabLabel],
+  [matTabLink],
+  [matTabNav],
   [matTooltip],
   mat-autocomplete,
   mat-button-toggle,
-  mat-button-toggle-group,
   mat-button-toggle,
+  mat-button-toggle-group,
   mat-card,
   mat-card-actions,
   mat-card-content,
@@ -48,6 +48,7 @@ export const MAT_ELEMENTS_SELECTOR = `
   mat-dialog-container,
   mat-dialog-content,
   mat-divider,
+  mat-error,
   mat-grid-list,
   mat-grid-tile,
   mat-grid-tile-footer,
@@ -71,31 +72,30 @@ export const MAT_ELEMENTS_SELECTOR = `
   mat-spinner,
   mat-tab,
   mat-tab-group,
-  mat-toolbar,
-  mat-error`;
+  mat-toolbar`;
 
 /** Selector that matches all elements that may have style collisions with AngularJS Material. */
 export const MD_ELEMENTS_SELECTOR = `
   [md-button],
-  [md-card-subtitle],
-  [md-card-title],
-  [md-dialog-actions],
-  [md-dialog-close],
-  [md-dialog-content],
-  [md-dialog-title],
   [md-fab],
   [md-icon-button],
-  [md-menu-trigger-for],
   [md-mini-fab],
   [md-raised-button],
-  [md-tab-label],
-  [md-tab-link],
-  [md-tab-nav-bar],
+  [mdCardSubtitle],
+  [mdCardTitle],
+  [mdDialogActions],
+  [mdDialogClose],
+  [mdDialogContent],
+  [mdDialogTitle],
+  [mdLine],
+  [mdTabLabel],
+  [mdTabLink],
+  [mdTabNav],
   [mdTooltip],
   md-autocomplete,
   md-button-toggle,
-  md-button-toggle-group,
   md-button-toggle,
+  md-button-toggle-group,
   md-card,
   md-card-actions,
   md-card-content,
@@ -110,6 +110,7 @@ export const MD_ELEMENTS_SELECTOR = `
   md-dialog-container,
   md-dialog-content,
   md-divider,
+  md-error,
   md-grid-list,
   md-grid-tile,
   md-grid-tile-footer,
@@ -133,8 +134,7 @@ export const MD_ELEMENTS_SELECTOR = `
   md-spinner,
   md-tab,
   md-tab-group,
-  md-toolbar,
-  md-error`;
+  md-toolbar`;
 
 /** Directive that enforces that the `mat-` prefix cannot be used. */
 @Directive({selector: MAT_ELEMENTS_SELECTOR})

src/lib/core/line/line.ts

@@ -14,10 +14,8 @@ import {MdCommonModule} from '../common-behaviors/common-module';
  * counted by checking the query list's length.
  */
 @Directive({
-  selector: '[md-line], [mat-line]',
-  host: {
-    '[class.mat-line]': 'true'
-  }
+  selector: '[md-line], [mat-line], [mdLine], [matLine]',
+  host: {'class': 'mat-line'}
 })
 export class MdLine {}
 

src/lib/core/option/option.ts

@@ -44,7 +44,7 @@ export class MdOptionSelectionChange {
     '[class.mat-option-disabled]': 'disabled',
     '(click)': '_selectViaInteraction()',
     '(keydown)': '_handleKeydown($event)',
-    '[class.mat-option]': 'true',
+    'class': 'mat-option',
   },
   templateUrl: 'option.html',
   encapsulation: ViewEncapsulation.None

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

@@ -36,7 +36,7 @@ export const _MdPseudoCheckboxBase = mixinColor(MdPseudoCheckboxBase, 'accent');
   inputs: ['color'],
   template: '',
   host: {
-    '[class.mat-pseudo-checkbox]': 'true',
+    'class': 'mat-pseudo-checkbox',
     '[class.mat-pseudo-checkbox-indeterminate]': 'state === "indeterminate"',
     '[class.mat-pseudo-checkbox-checked]': 'state === "checked"',
     '[class.mat-pseudo-checkbox-disabled]': 'disabled',

src/lib/datepicker/calendar.ts

@@ -39,7 +39,7 @@ import {MATERIAL_COMPATIBILITY_MODE} from '../core';
   templateUrl: 'calendar.html',
   styleUrls: ['calendar.css'],
   host: {
-    '[class.mat-calendar]': 'true',
+    'class': 'mat-calendar',
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,

src/lib/dialog/dialog-container.ts

@@ -56,7 +56,7 @@ export function throwMdDialogContentAlreadyAttachedError() {
     ])
   ],
   host: {
-    '[class.mat-dialog-container]': 'true',
+    'class': 'mat-dialog-container',
     '[attr.role]': '_config?.role',
     '[@slideDialog]': '_state',
     '(@slideDialog.done)': '_onAnimationDone($event)',

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

@@ -6,7 +6,8 @@ import {MdDialogRef} from './dialog-ref';
  * Button that will close the current dialog.
  */
 @Directive({
-  selector: 'button[md-dialog-close], button[mat-dialog-close]',
+  selector: 'button[md-dialog-close], button[mat-dialog-close],' +
+            'button[mdDialogClose], button[matDialogClose]',
   host: {
     '(click)': 'dialogRef.close(dialogResult)',
     '[attr.aria-label]': 'ariaLabel',
@@ -30,10 +31,8 @@ export class MdDialogClose {
  * Title of a dialog element. Stays fixed to the top of the dialog when scrolling.
  */
 @Directive({
-  selector: '[md-dialog-title], [mat-dialog-title]',
-  host: {
-    '[class.mat-dialog-title]': 'true'
-  }
+  selector: '[md-dialog-title], [mat-dialog-title], [mdDialogTitle], [matDialogTitle]',
+  host: {'class': 'mat-dialog-title'},
 })
 export class MdDialogTitle { }
 
@@ -42,10 +41,9 @@ export class MdDialogTitle { }
  * Scrollable content container of a dialog.
  */
 @Directive({
-  selector: '[md-dialog-content], md-dialog-content, [mat-dialog-content], mat-dialog-content',
-  host: {
-    '[class.mat-dialog-content]': 'true'
-  }
+  selector: '[md-dialog-content], md-dialog-content, [mat-dialog-content], mat-dialog-content,' +
+            '[mdDialogContent], [matDialogContent]',
+  host: {'class': 'mat-dialog-content'}
 })
 export class MdDialogContent { }
 
@@ -55,9 +53,8 @@ export class MdDialogContent { }
  * Stays fixed to the bottom when scrolling.
  */
 @Directive({
-  selector: '[md-dialog-actions], md-dialog-actions, [mat-dialog-actions], mat-dialog-actions',
-  host: {
-    '[class.mat-dialog-actions]': 'true'
-  }
+  selector: '[md-dialog-actions], md-dialog-actions, [mat-dialog-actions], mat-dialog-actions,' +
+            '[mdDialogActions], [matDialogActions]',
+  host: {'class': 'mat-dialog-actions'}
 })
 export class MdDialogActions { }

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

@@ -33,7 +33,7 @@ const MD_FIT_MODE = 'fit';
   styleUrls: ['grid-list.css'],
   host: {
     'role': 'list',
-    '[class.mat-grid-list]': 'true',
+    'class': 'mat-grid-list',
   },
   encapsulation: ViewEncapsulation.None,
 })