Expand mat- prefix coverage

Author: jelbourn

src/lib/autocomplete/index.ts

@@ -1,17 +1,13 @@
 import {ModuleWithProviders, NgModule} from '@angular/core';
-import {
-  MdOptionModule, OverlayModule, OVERLAY_PROVIDERS, DefaultStyleCompatibilityModeModule
-} from '../core';
+import {MdOptionModule, OverlayModule, OVERLAY_PROVIDERS, CompatibilityModule} from '../core';
 import {MdAutocomplete} from './autocomplete';
 import {MdAutocompleteTrigger} from './autocomplete-trigger';
 export * from './autocomplete';
 export * from './autocomplete-trigger';
 
 @NgModule({
-  imports: [MdOptionModule, OverlayModule, DefaultStyleCompatibilityModeModule],
-  exports: [
-      MdAutocomplete, MdOptionModule, MdAutocompleteTrigger, DefaultStyleCompatibilityModeModule
-  ],
+  imports: [MdOptionModule, OverlayModule, CompatibilityModule],
+  exports: [MdAutocomplete, MdOptionModule, MdAutocompleteTrigger, CompatibilityModule],
   declarations: [MdAutocomplete, MdAutocompleteTrigger],
 })
 export class MdAutocompleteModule {

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

@@ -53,7 +53,7 @@ export class MdButtonToggleChange {
 
 /** Exclusive selection button toggle group that behaves like a radio-button group. */
 @Directive({
-  selector: 'md-button-toggle-group:not([multiple])',
+  selector: 'md-button-toggle-group:not([multiple]), mat-button-toggle-group:not([multiple])',
   providers: [MD_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR],
   host: {
     'role': 'radiogroup',
@@ -242,7 +242,7 @@ export class MdButtonToggleGroup implements AfterViewInit, ControlValueAccessor
 
 /** Multiple selection button-toggle group. `ngModel` is not supported in this mode. */
 @Directive({
-  selector: 'md-button-toggle-group[multiple]',
+  selector: 'md-button-toggle-group[multiple], mat-button-toggle-group[multiple]',
   exportAs: 'mdButtonToggleGroup',
   host: {
     '[class.md-button-toggle-vertical]': 'vertical'

src/lib/button/button.ts

@@ -21,8 +21,10 @@ import {MdRippleModule, coerceBooleanProperty, CompatibilityModule} from '../cor
  */
 @Component({
   moduleId: module.id,
-  selector: 'button[md-button], button[md-raised-button], button[md-icon-button], ' +
-            'button[md-fab], button[md-mini-fab]',
+  selector: 'button[md-button], button[md-raised-button], button[md-icon-button],' +
+            'button[md-fab], button[md-mini-fab],' +
+            'button[mat-button], button[mat-raised-button], button[mat-icon-button],' +
+            'button[mat-fab], button[mat-mini-fab]',
   host: {
     '[disabled]': 'disabled',
     '[class.md-button-focus]': '_isKeyboardFocused',
@@ -120,7 +122,8 @@ export class MdButton {
  */
 @Component({
   moduleId: module.id,
-  selector: 'a[md-button], a[md-raised-button], a[md-icon-button], a[md-fab], a[md-mini-fab]',
+  selector: `a[md-button], a[md-raised-button], a[md-icon-button], a[md-fab], a[md-mini-fab],
+             a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab]`,
   inputs: ['color', 'disabled', 'disableRipple'],
   host: {
     '[attr.disabled]': 'disabled',

src/lib/chips/chip-list.ts

@@ -28,7 +28,7 @@ import {SPACE, LEFT_ARROW, RIGHT_ARROW} from '../core/keyboard/keycodes';
  */
 @Component({
   moduleId: module.id,
-  selector: 'md-chip-list',
+  selector: 'md-chip-list, mat-chip-list',
   template: `<div class="md-chip-list-wrapper"><ng-content></ng-content></div>`,
   host: {
     // Properties

src/lib/chips/chip.ts

@@ -20,7 +20,8 @@ export interface MdChipEvent {
  * Material design styled Chip component. Used inside the MdChipList component.
  */
 @Component({
-  selector: 'md-basic-chip, [md-basic-chip], md-chip, [md-chip]',
+  selector: `md-basic-chip, [md-basic-chip], md-chip, [md-chip],
+             mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]`,
   template: `<ng-content></ng-content>`,
   host: {
     'tabindex': '-1',

src/lib/core/compatibility/compatibility.ts

@@ -12,6 +12,13 @@ export const MATERIAL_COMPATIBILITY_MODE = new OpaqueToken('md-compatibility-mod
 
 /** Selector that matches all elements that may have style collisions with material1. */
 export const MAT_ELEMENTS_SELECTOR = `
+  mat-autocomplete,
+  [mat-button],
+  [mat-raised-button],
+  [mat-icon-button],
+  [mat-fab],
+  [mat-mini-fab],
+  mat-button-toggle-group,
   mat-card,
   mat-card-actions,
   mat-card-content,
@@ -23,6 +30,12 @@ export const MAT_ELEMENTS_SELECTOR = `
   mat-checkbox,
   mat-chip,
   mat-dialog-container,
+  [mat-dialog-close],
+  [mat-dialog-title],
+  [mat-dialog-content],
+  mat-dialog-content,
+  [mat-dialog-actions],
+  mat-dialog-actions,
   mat-divider,
   mat-grid-list,
   mat-grid-tile,
@@ -44,14 +57,27 @@ export const MAT_ELEMENTS_SELECTOR = `
   mat-radio-group,
   mat-select,
   mat-sidenav,
+  mat-sidenav-container,
   mat-slider,
   mat-spinner,
+  mat-tab-group,
   mat-tab,
-  mat-toolbar
+  [mat-tab-label],
+  [mat-tab-nav-bar],
+  [mat-tab-link],
+  mat-toolbar,
+  matTooltip
 `;
 
 /** Selector that matches all elements that may have style collisions with material1. */
 export const MD_ELEMENTS_SELECTOR = `
+  md-autocomplete,
+  [md-button],
+  [md-raised-button],
+  [md-icon-button],
+  [md-fab],
+  [md-mini-fab],
+  md-button-toggle-group
   md-card,
   md-card-actions,
   md-card-content,
@@ -63,6 +89,12 @@ export const MD_ELEMENTS_SELECTOR = `
   md-checkbox,
   md-chip,
   md-dialog-container,
+  [md-dialog-close],
+  [md-dialog-title],
+  [md-dialog-content],
+  md-dialog-content,
+  [md-dialog-actions],
+  md-dialog-actions,
   md-divider,
   md-grid-list,
   md-grid-tile,
@@ -84,10 +116,16 @@ export const MD_ELEMENTS_SELECTOR = `
   md-radio-group,
   md-select,
   md-sidenav,
+  md-sidenav-container,
   md-slider,
   md-spinner,
   md-tab,
-  md-toolbar
+  md-tab-group,
+  [md-tab-label],
+  [md-tab-nav-bar],
+  [md-tab-link],
+  md-toolbar,
+  mdTooltip
 `;
 
 /** Directive that enforces that the `mat-` prefix cannot be used. */
@@ -139,11 +177,4 @@ export class CompatibilityModule {
     provide: MATERIAL_COMPATIBILITY_MODE, useValue: true,
   }],
 })
-export class NoConflictStyleCompatibilityMode {
-  static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: NoConflictStyleCompatibilityMode,
-      providers: [],
-    };
-  }
-}
+export class NoConflictStyleCompatibilityMode {}

src/lib/dialog/dialog.ts

@@ -1,6 +1,6 @@
 import {Injector, ComponentRef, Injectable, Optional, SkipSelf} from '@angular/core';
 
-import {Overlay, OverlayRef, ComponentType, OverlayState, ComponentPortal, CompatibilityModule} from '../core';
+import {Overlay, OverlayRef, ComponentType, OverlayState, ComponentPortal} from '../core';
 import {extendObject} from '../core/util/object-extend';
 
 import {DialogInjector} from './dialog-injector';
@@ -179,18 +179,3 @@ function _applyConfigDefaults(dialogConfig: MdDialogConfig): MdDialogConfig {
   return extendObject(new MdDialogConfig(), dialogConfig);
 }
 
-
-@NgModule({
-  imports: [OverlayModule, PortalModule, A11yModule, CompatibilityModule],
-  exports: [MdDialogContainer, CompatibilityModule],
-  declarations: [MdDialogContainer],
-  entryComponents: [MdDialogContainer],
-})
-export class MdDialogModule {
-  static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: MdDialogModule,
-      providers: [MdDialog, OVERLAY_PROVIDERS, InteractivityChecker, MdPlatform],
-    };
-  }
-}

src/lib/dialog/index.ts

@@ -3,7 +3,7 @@ import {
   OverlayModule,
   PortalModule,
   A11yModule,
-  DefaultStyleCompatibilityModeModule
+  CompatibilityModule,
 } from '../core';
 import {MdDialog} from './dialog';
 import {MdDialogContainer} from './dialog-container';
@@ -20,22 +20,22 @@ import {
     OverlayModule,
     PortalModule,
     A11yModule,
-    DefaultStyleCompatibilityModeModule
+    CompatibilityModule,
   ],
   exports: [
     MdDialogContainer,
     MdDialogClose,
     MdDialogTitle,
     MdDialogContent,
     MdDialogActions,
-    DefaultStyleCompatibilityModeModule
+    CompatibilityModule,
   ],
   declarations: [
     MdDialogContainer,
     MdDialogClose,
     MdDialogTitle,
     MdDialogActions,
-    MdDialogContent
+    MdDialogContent,
   ],
   providers: [
     MdDialog,

src/lib/input/autosize.ts

@@ -5,7 +5,8 @@ import {Directive, ElementRef, Input, OnInit} from '@angular/core';
  * Directive to automatically resize a textarea to fit its content.
  */
 @Directive({
-  selector: 'textarea[md-autosize], textarea[mat-autosize], textarea[mdTextareaAutosize]',
+  selector: 'textarea[md-autosize], textarea[mdTextareaAutosize],' +
+            'textarea[mat-autosize], textarea[matTextareaAutosize]',
   exportAs: 'mdTextareaAutosize',
   host: {
     '(input)': 'resizeToFitContent()',

src/lib/tabs/tab.ts

@@ -9,7 +9,7 @@ import {MdTabLabel} from './tab-label';
 
 @Component({
   moduleId: module.id,
-  selector: 'md-tab',
+  selector: 'md-tab, mat-tab',
   templateUrl: 'tab.html',
 })
 export class MdTab implements OnInit {

src/lib/tooltip/tooltip.ts

@@ -44,7 +44,7 @@ export const TOUCHEND_HIDE_DELAY  = 1500;
  * https://material.google.com/components/tooltips.html
  */
 @Directive({
-  selector: '[md-tooltip], [mat-tooltip], [mdTooltip]',
+  selector: '[md-tooltip], [mdTooltip], [mat-tooltip], [matTooltip]',
   host: {
     '(longpress)': 'show()',
     '(touchend)': 'hide(' + TOUCHEND_HIDE_DELAY + ')',
@@ -101,6 +101,26 @@ export class MdTooltip implements OnDestroy {
   get _deprecatedMessage(): string { return this.message; }
   set _deprecatedMessage(v: string) { this.message = v; }
 
+  // Properties with `mat-` prefix for noconflict mode.
+  @Input('matTooltip')
+  get _matMessage() { return this.message; }
+  set _matMessage(v) { this.message = v; }
+
+  // Properties with `mat-` prefix for noconflict mode.
+  @Input('matTooltipPosition')
+  get _matPosition() { return this.position; }
+  set _matPosition(v) { this.position = v; }
+
+  // Properties with `mat-` prefix for noconflict mode.
+  @Input('matTooltipHideDelay')
+  get _matHideDelay() { return this.hideDelay; }
+  set _matHideDelay(v) { this.hideDelay = v; }
+
+  // Properties with `mat-` prefix for noconflict mode.
+  @Input('matTooltipShowDelay')
+  get _matShowDelay() { return this.showDelay; }
+  set _matShowDelay(v) { this.showDelay = v; }
+
   constructor(private _overlay: Overlay,
               private _elementRef: ElementRef,
               private _viewContainerRef: ViewContainerRef,