chore: make compatibility mode work for apps with multiple modules (#2093)

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

@@ -23,8 +23,8 @@ import {Observable} from 'rxjs/Observable';
 import {
   UniqueSelectionDispatcher,
   coerceBooleanProperty,
-  DefaultStyleCompatibilityModeModule,
   UNIQUE_SELECTION_DISPATCHER_PROVIDER,
+  CompatibilityModule,
 } from '../core';
 
 /** Acceptable types for a button toggle. */
@@ -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'
@@ -464,12 +464,12 @@ export class MdButtonToggle implements OnInit {
 
 
 @NgModule({
-  imports: [FormsModule, DefaultStyleCompatibilityModeModule],
+  imports: [FormsModule, CompatibilityModule],
   exports: [
     MdButtonToggleGroup,
     MdButtonToggleGroupMultiple,
     MdButtonToggle,
-    DefaultStyleCompatibilityModeModule,
+    CompatibilityModule,
   ],
   declarations: [MdButtonToggleGroup, MdButtonToggleGroupMultiple, MdButtonToggle],
   providers: [UNIQUE_SELECTION_DISPATCHER_PROVIDER]

src/lib/button/button.ts

@@ -10,7 +10,7 @@ import {
   ModuleWithProviders,
 } from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {MdRippleModule, coerceBooleanProperty, DefaultStyleCompatibilityModeModule} from '../core';
+import {MdRippleModule, coerceBooleanProperty, CompatibilityModule} from '../core';
 
 
 // TODO(jelbourn): Make the `isMouseDown` stuff done with one global listener.
@@ -21,8 +21,10 @@ import {MdRippleModule, coerceBooleanProperty, DefaultStyleCompatibilityModeModu
  */
 @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',
@@ -161,8 +164,8 @@ export class MdAnchor extends MdButton {
 
 
 @NgModule({
-  imports: [CommonModule, MdRippleModule, DefaultStyleCompatibilityModeModule],
-  exports: [MdButton, MdAnchor, DefaultStyleCompatibilityModeModule],
+  imports: [CommonModule, MdRippleModule, CompatibilityModule],
+  exports: [MdButton, MdAnchor, CompatibilityModule],
   declarations: [MdButton, MdAnchor],
 })
 export class MdButtonModule {

src/lib/card/card.ts

@@ -6,7 +6,7 @@ import {
   ChangeDetectionStrategy,
   Directive
 } from '@angular/core';
-import {DefaultStyleCompatibilityModeModule} from '../core';
+import {CompatibilityModule} from '../core';
 
 
 /**
@@ -101,7 +101,7 @@ export class MdCardTitleGroup {}
 
 
 @NgModule({
-  imports: [DefaultStyleCompatibilityModeModule],
+  imports: [CompatibilityModule],
   exports: [
     MdCard,
     MdCardHeader,
@@ -111,7 +111,7 @@ export class MdCardTitleGroup {}
     MdCardSubtitle,
     MdCardActions,
     MdCardFooter,
-    DefaultStyleCompatibilityModeModule,
+    CompatibilityModule,
   ],
   declarations: [
     MdCard, MdCardHeader, MdCardTitleGroup, MdCardContent, MdCardTitle, MdCardSubtitle,

src/lib/checkbox/checkbox.ts

@@ -16,7 +16,7 @@ import {
 import {CommonModule} from '@angular/common';
 import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
 import {coerceBooleanProperty} from '../core/coercion/boolean-property';
-import {MdRippleModule, DefaultStyleCompatibilityModeModule} from '../core';
+import {MdRippleModule, CompatibilityModule} from '../core';
 
 
 /** Monotonically increasing integer used to auto-generate unique ids for checkbox components. */
@@ -403,8 +403,8 @@ export class MdCheckbox implements ControlValueAccessor {
 
 
 @NgModule({
-  imports: [CommonModule, MdRippleModule, DefaultStyleCompatibilityModeModule],
-  exports: [MdCheckbox, DefaultStyleCompatibilityModeModule],
+  imports: [CommonModule, MdRippleModule, CompatibilityModule],
+  exports: [MdCheckbox, CompatibilityModule],
   declarations: [MdCheckbox],
 })
 export class MdCheckboxModule {

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.spec.ts

@@ -1,11 +1,24 @@
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
 import {async, TestBed} from '@angular/core/testing';
 import {MdCheckboxModule} from '../../checkbox/checkbox';
-import {NoConflictStyleCompatibilityMode} from './no-conflict-mode';
+import {
+  NoConflictStyleCompatibilityMode,
+  MAT_ELEMENTS_SELECTOR,
+  MD_ELEMENTS_SELECTOR
+} from './compatibility';
 
 
 describe('Style compatibility', () => {
 
+  describe('selectors', () => {
+    it('should have the same selectors in the same order for compatibility mode', () => {
+      expect(MAT_ELEMENTS_SELECTOR.replace(/(\s|\[)mat/g, '$1md').trim())
+          .toBe(MD_ELEMENTS_SELECTOR.trim());
+      expect(MD_ELEMENTS_SELECTOR.replace(/(\s|\[)md/g, '$1mat').trim())
+          .toBe(MAT_ELEMENTS_SELECTOR.trim());
+    });
+  });
+
   describe('in default mode', () => {
     beforeEach(async(() => {
       TestBed.configureTestingModule({
@@ -45,6 +58,26 @@ describe('Style compatibility', () => {
       }).toThrowError(/The "md-" prefix cannot be used in ng-material v1 compatibility mode/);
     });
   });
+
+  describe('with no-conflict mode at root and component module imported in app sub-module', () => {
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [TestAppSubModule, NoConflictStyleCompatibilityMode],
+      });
+
+      TestBed.compileComponents();
+    }));
+
+    it('should throw an error when using the "md-" prefix', () => {
+       expect(() => {
+        TestBed.createComponent(ComponentWithMdCheckbox);
+      }).toThrowError(/The "md-" prefix cannot be used in ng-material v1 compatibility mode/);
+    });
+
+    it('should not throw an error when using the "mat-" prefix', () => {
+      TestBed.createComponent(ComponentWithMatCheckbox);
+    });
+  });
 });
 
 
@@ -53,3 +86,11 @@ class ComponentWithMdCheckbox { }
 
 @Component({ template: `<mat-checkbox>Hungry</mat-checkbox>` })
 class ComponentWithMatCheckbox { }
+
+
+@NgModule({
+  imports: [MdCheckboxModule.forRoot()],
+  exports: [ComponentWithMdCheckbox, ComponentWithMatCheckbox],
+  declarations: [ComponentWithMdCheckbox, ComponentWithMatCheckbox],
+})
+export class TestAppSubModule {}