fix(compatibility): add missing mat- selectors (#2923)

* add missing mat- selectors

* comments

* put mat-hint in the right spot

Author: andrewseguin

src/lib/core/compatibility/compatibility.ts

@@ -19,12 +19,15 @@ export const MAT_ELEMENTS_SELECTOR = `
   [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],
+  [matTooltip],
   mat-autocomplete,
+  mat-button-toggle,
   mat-button-toggle-group,
   mat-button-toggle,
   mat-card,
@@ -56,6 +59,7 @@ export const MAT_ELEMENTS_SELECTOR = `
   mat-placeholder,
   mat-progress-bar,
   mat-progress-circle,
+  mat-pseudo-checkbox,
   mat-radio-button,
   mat-radio-group,
   mat-select,
@@ -64,9 +68,10 @@ export const MAT_ELEMENTS_SELECTOR = `
   mat-slider,
   mat-spinner,
   mat-tab,
+  mat-tab-body,
+  mat-tab-header,
   mat-tab-group,
-  mat-toolbar,
-  matTooltip`;
+  mat-toolbar`;
 
 /** Selector that matches all elements that may have style collisions with AngularJS Material. */
 export const MD_ELEMENTS_SELECTOR = `  
@@ -77,12 +82,15 @@ export const MD_ELEMENTS_SELECTOR = `
   [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],
+  [mdTooltip],
   md-autocomplete,
+  md-button-toggle,
   md-button-toggle-group,
   md-button-toggle,
   md-card,
@@ -114,6 +122,7 @@ export const MD_ELEMENTS_SELECTOR = `
   md-placeholder,
   md-progress-bar,
   md-progress-circle,
+  md-pseudo-checkbox,
   md-radio-button,
   md-radio-group,
   md-select,
@@ -122,9 +131,10 @@ export const MD_ELEMENTS_SELECTOR = `
   md-slider,
   md-spinner,
   md-tab,
+  md-tab-body,
+  md-tab-header,
   md-tab-group,
-  md-toolbar,
-  mdTooltip`;
+  md-toolbar`;
 
 /** Directive that enforces that the `mat-` prefix cannot be used. */
 @Directive({selector: MAT_ELEMENTS_SELECTOR})

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

@@ -22,7 +22,7 @@ export type MdPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate';
 @Component({
   moduleId: module.id,
   encapsulation: ViewEncapsulation.None,
-  selector: 'md-pseudo-checkbox',
+  selector: 'md-pseudo-checkbox, mat-pseudo-checkbox',
   styleUrls: ['pseudo-checkbox.css'],
   template: '',
   host: {

src/lib/input/input-container.html

@@ -1,6 +1,9 @@
 <div class="mat-input-wrapper">
   <div class="mat-input-table">
-    <div class="mat-input-prefix"><ng-content select="[mdPrefix], [md-prefix]"></ng-content></div>
+    <div class="mat-input-prefix">
+      <!-- TODO(andrewseguin): remove [md-prefix] -->
+      <ng-content select="[mdPrefix], [matPrefix], [md-prefix]"></ng-content>
+    </div>
 
     <div class="mat-input-infix" [class.mat-end]="align == 'end'">
       <ng-content selector="input, textarea"></ng-content>
@@ -13,13 +16,16 @@
              [class.mat-accent]="dividerColor == 'accent'"
              [class.mat-warn]="dividerColor == 'warn'"
              *ngIf="_hasPlaceholder()">
-        <ng-content select="md-placeholder"></ng-content>
+        <ng-content select="md-placeholder, mat-placeholder"></ng-content>
         {{_mdInputChild.placeholder}}
         <span class="mat-placeholder-required" *ngIf="_mdInputChild.required">*</span>
       </label>
     </div>
 
-    <div class="mat-input-suffix"><ng-content select="[mdSuffix], [md-suffix]"></ng-content></div>
+    <div class="mat-input-suffix">
+      <!-- TODO(andrewseguin): remove [md-suffix] -->
+      <ng-content select="[mdSuffix], [matSuffix], [md-suffix]"></ng-content>
+    </div>
   </div>
 
   <div class="mat-input-underline"
@@ -31,5 +37,5 @@
   </div>
 
   <div *ngIf="hintLabel != ''" [attr.id]="_hintLabelId" class="mat-hint">{{hintLabel}}</div>
-  <ng-content select="md-hint"></ng-content>
+  <ng-content select="md-hint, mat-hint"></ng-content>
 </div>

src/lib/menu/menu-trigger.ts

@@ -30,9 +30,11 @@ import {MenuPositionX, MenuPositionY} from './menu-positions';
 /**
  * This directive is intended to be used in conjunction with an md-menu tag.  It is
  * responsible for toggling the display of the provided menu instance.
+ * TODO(andrewseguin): Remove the kebab versions in favor of camelCased attribute selectors
  */
 @Directive({
-  selector: '[md-menu-trigger-for], [mat-menu-trigger-for], [mdMenuTriggerFor]',
+  selector: `[md-menu-trigger-for], [mat-menu-trigger-for], 
+             [mdMenuTriggerFor], [matMenuTriggerFor]`,
   host: {
     'aria-haspopup': 'true',
     '(mousedown)': '_handleMousedown($event)',
@@ -53,8 +55,18 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
 
   /** @deprecated */
   @Input('md-menu-trigger-for')
-  get _deprecatedMenuTriggerFor(): MdMenuPanel { return this.menu; }
-  set _deprecatedMenuTriggerFor(v: MdMenuPanel) { this.menu = v; }
+  get _deprecatedMdMenuTriggerFor(): MdMenuPanel { return this.menu; }
+  set _deprecatedMdMenuTriggerFor(v: MdMenuPanel) { this.menu = v; }
+
+  /** @deprecated */
+  @Input('mat-menu-trigger-for')
+  get _deprecatedMatMenuTriggerFor(): MdMenuPanel { return this.menu; }
+  set _deprecatedMatMenuTriggerFor(v: MdMenuPanel) { this.menu = v; }
+
+  // Trigger input for compatibility mode
+  @Input('matMenuTriggerFor')
+  get _matMenuTriggerFor(): MdMenuPanel { return this.menu; }
+  set _matMenuTriggerFor(v: MdMenuPanel) { this.menu = v; }
 
   /** References the menu instance that the trigger is associated with. */
   @Input('mdMenuTriggerFor') menu: MdMenuPanel;

src/lib/tabs/tab-body.ts

@@ -46,7 +46,7 @@ export type MdTabBodyOriginState = 'left' | 'right';
  */
 @Component({
   moduleId: module.id,
-  selector: 'md-tab-body',
+  selector: 'md-tab-body, mat-tab-body',
   templateUrl: 'tab-body.html',
   host: {
     '[class.mat-tab-body]': 'true',

src/lib/tabs/tab-group.ts

@@ -50,7 +50,7 @@ export type MdTabHeaderPosition = 'above' | 'below';
  */
 @Component({
   moduleId: module.id,
-  selector: 'md-tab-group',
+  selector: 'md-tab-group, mat-tab-group',
   templateUrl: 'tab-group.html',
   styleUrls: ['tab-group.css'],
   host: {

src/lib/tabs/tab-header.ts

@@ -40,7 +40,7 @@ const EXAGGERATED_OVERSCROLL = 60;
  */
 @Component({
   moduleId: module.id,
-  selector: 'md-tab-header',
+  selector: 'md-tab-header, mat-tab-header',
   templateUrl: 'tab-header.html',
   styleUrls: ['tab-header.css'],
   encapsulation: ViewEncapsulation.None,