chore: add style compatibility modes and mat- prefix (#1932)

* wip no-conflict

* add to modules

* re-adding export

Author: jelbourn

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

@@ -19,7 +19,12 @@ import {
 } from '@angular/core';
 import {NG_VALUE_ACCESSOR, ControlValueAccessor, FormsModule} from '@angular/forms';
 import {Observable} from 'rxjs/Observable';
-import {MdUniqueSelectionDispatcher, coerceBooleanProperty} from '../core';
+import {
+  MdUniqueSelectionDispatcher,
+  coerceBooleanProperty,
+  DefaultStyleCompatibilityModeModule,
+} from '../core';
+
 
 export type ToggleType = 'checkbox' | 'radio';
 
@@ -436,8 +441,13 @@ export class MdButtonToggle implements OnInit {
 
 
 @NgModule({
-  imports: [FormsModule],
-  exports: [MdButtonToggleGroup, MdButtonToggleGroupMultiple, MdButtonToggle],
+  imports: [FormsModule, DefaultStyleCompatibilityModeModule],
+  exports: [
+    MdButtonToggleGroup,
+    MdButtonToggleGroupMultiple,
+    MdButtonToggle,
+    DefaultStyleCompatibilityModeModule,
+  ],
   declarations: [MdButtonToggleGroup, MdButtonToggleGroupMultiple, MdButtonToggle],
 })
 export class MdButtonToggleModule {

src/lib/button/button.ts

@@ -10,7 +10,8 @@ import {
   ModuleWithProviders,
 } from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {MdRippleModule, coerceBooleanProperty} from '../core';
+import {MdRippleModule, coerceBooleanProperty, DefaultStyleCompatibilityModeModule} from '../core';
+
 
 // TODO(jelbourn): Make the `isMouseDown` stuff done with one global listener.
 // TODO(kara): Convert attribute selectors to classes when attr maps become available
@@ -157,8 +158,8 @@ export class MdAnchor extends MdButton {
 
 
 @NgModule({
-  imports: [CommonModule, MdRippleModule],
-  exports: [MdButton, MdAnchor],
+  imports: [CommonModule, MdRippleModule, DefaultStyleCompatibilityModeModule],
+  exports: [MdButton, MdAnchor, DefaultStyleCompatibilityModeModule],
   declarations: [MdButton, MdAnchor],
 })
 export class MdButtonModule {

src/lib/card/card-header.html

@@ -1,5 +1,6 @@
-<ng-content select="[md-card-avatar]"></ng-content>
+<ng-content select="[md-card-avatar], [mat-card-avatar]"></ng-content>
 <div class="md-card-header-text">
-  <ng-content select="md-card-title, md-card-subtitle"></ng-content>
+  <ng-content
+      select="md-card-title, mat-card-title, md-card-subtitle, mat-card-subtitle"></ng-content>
 </div>
 <ng-content></ng-content>

src/lib/card/card-title-group.html

@@ -1,5 +1,6 @@
 <div>
-  <ng-content select="md-card-title, md-card-subtitle"></ng-content>
+  <ng-content
+      select="md-card-title, mat-card-title, md-card-subtitle, mat-card-subtitle"></ng-content>
 </div>
 <ng-content select="img"></ng-content>
 <ng-content></ng-content>

src/lib/card/card.ts

@@ -6,45 +6,46 @@ import {
   ChangeDetectionStrategy,
   Directive
 } from '@angular/core';
+import {DefaultStyleCompatibilityModeModule} from '../core';
 
 
 /**
  * Content of a card, needed as it's used as a selector in the API.
  */
 @Directive({
-  selector: 'md-card-content'
+  selector: 'md-card-content, mat-card-content'
 })
 export class MdCardContent {}
 
 /**
  * Title of a card, needed as it's used as a selector in the API.
  */
 @Directive({
-  selector: 'md-card-title'
+  selector: 'md-card-title, mat-card-title'
 })
 export class MdCardTitle {}
 
 /**
  * Sub-title of a card, needed as it's used as a selector in the API.
  */
 @Directive({
-  selector: 'md-card-subtitle'
+  selector: 'md-card-subtitle, mat-card-subtitle'
 })
 export class MdCardSubtitle {}
 
 /**
  * Action section of a card, needed as it's used as a selector in the API.
  */
 @Directive({
-  selector: 'md-card-actions'
+  selector: 'md-card-actions, mat-card-actions'
 })
 export class MdCardActions {}
 
 /**
  * Footer of a card, needed as it's used as a selector in the API.
  */
 @Directive({
-  selector: 'md-card-footer'
+  selector: 'md-card-footer, mat-card-footer'
 })
 export class MdCardFooter {}
 
@@ -70,7 +71,7 @@ it also provides a number of preset styles for common card sections, including:
 
 @Component({
   moduleId: module.id,
-  selector: 'md-card',
+  selector: 'md-card, mat-card',
   templateUrl: 'card.html',
   styleUrls: ['card.css'],
   encapsulation: ViewEncapsulation.None,
@@ -95,7 +96,7 @@ TODO(kara): update link to demo site when it exists
 
 @Component({
   moduleId: module.id,
-  selector: 'md-card-header',
+  selector: 'md-card-header, mat-card-header',
   templateUrl: 'card-header.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -115,7 +116,7 @@ TODO(kara): update link to demo site when it exists
 
 @Component({
   moduleId: module.id,
-  selector: 'md-card-title-group',
+  selector: 'md-card-title-group, mat-card-title-group',
   templateUrl: 'card-title-group.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -124,9 +125,17 @@ export class MdCardTitleGroup {}
 
 
 @NgModule({
+  imports: [DefaultStyleCompatibilityModeModule],
   exports: [
-    MdCard, MdCardHeader, MdCardTitleGroup, MdCardContent, MdCardTitle, MdCardSubtitle,
-    MdCardActions, MdCardFooter
+    MdCard,
+    MdCardHeader,
+    MdCardTitleGroup,
+    MdCardContent,
+    MdCardTitle,
+    MdCardSubtitle,
+    MdCardActions,
+    MdCardFooter,
+    DefaultStyleCompatibilityModeModule,
   ],
   declarations: [
     MdCard, MdCardHeader, MdCardTitleGroup, MdCardContent, MdCardTitle, MdCardSubtitle,

src/lib/checkbox/checkbox.ts

@@ -15,7 +15,8 @@ import {
 import {CommonModule} from '@angular/common';
 import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
 import {coerceBooleanProperty} from '../core/coersion/boolean-property';
-import {MdRippleModule} from '../core';
+import {MdRippleModule, DefaultStyleCompatibilityModeModule} from '../core';
+
 
 /**
  * Monotonically increasing integer used to auto-generate unique ids for checkbox components.
@@ -62,7 +63,7 @@ export class MdCheckboxChange {
  */
 @Component({
   moduleId: module.id,
-  selector: 'md-checkbox',
+  selector: 'md-checkbox, mat-checkbox',
   templateUrl: 'checkbox.html',
   styleUrls: ['checkbox.css'],
   host: {
@@ -378,8 +379,8 @@ export class MdCheckbox implements ControlValueAccessor {
 
 
 @NgModule({
-  imports: [CommonModule, MdRippleModule],
-  exports: [MdCheckbox],
+  imports: [CommonModule, MdRippleModule, DefaultStyleCompatibilityModeModule],
+  exports: [MdCheckbox, DefaultStyleCompatibilityModeModule],
   declarations: [MdCheckbox],
 })
 export class MdCheckboxModule {

src/lib/core/compatibility/compatibility.spec.ts

@@ -0,0 +1,55 @@
+import {Component} from '@angular/core';
+import {async, TestBed} from '@angular/core/testing';
+import {MdCheckboxModule} from '../../checkbox/checkbox';
+import {NoConflictStyleCompatibilityMode} from './no-conflict-mode';
+
+
+describe('Style compatibility', () => {
+
+  describe('in default mode', () => {
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        // Specifically do *not* directly import the DefaultStyleCompatibilityModeModule
+        // to ensure that it is the default behavior.
+        imports: [MdCheckboxModule.forRoot()],
+        declarations: [ComponentWithMdCheckbox, ComponentWithMatCheckbox],
+      });
+
+      TestBed.compileComponents();
+    }));
+
+    it('should throw an error when trying to use the "mat-" prefix', () => {
+      expect(() => {
+        TestBed.createComponent(ComponentWithMatCheckbox);
+      }).toThrowError(/The "mat-" prefix cannot be used out of ng-material v1 compatibility mode/);
+    });
+  });
+
+  describe('in no-conflict mode', () => {
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [MdCheckboxModule.forRoot(), NoConflictStyleCompatibilityMode],
+        declarations: [ComponentWithMdCheckbox, ComponentWithMatCheckbox],
+      });
+
+      TestBed.compileComponents();
+    }));
+
+    it('should not throw an error when trying to use the "mat-" prefix', () => {
+      TestBed.createComponent(ComponentWithMatCheckbox);
+    });
+
+    it('should throw an error when trying to use the "md-" prefix', () => {
+      expect(() => {
+        TestBed.createComponent(ComponentWithMdCheckbox);
+      }).toThrowError(/The "md-" prefix cannot be used in ng-material v1 compatibility mode/);
+    });
+  });
+});
+
+
+@Component({ template: `<md-checkbox>Hungry</md-checkbox>` })
+class ComponentWithMdCheckbox { }
+
+@Component({ template: `<mat-checkbox>Hungry</mat-checkbox>` })
+class ComponentWithMatCheckbox { }

src/lib/core/compatibility/default-mode.ts

@@ -0,0 +1,79 @@
+import {NgModule, ModuleWithProviders, Directive, OpaqueToken, Inject} from '@angular/core';
+
+
+export const MATERIAL_COMPATIBILITY_MODE = new OpaqueToken('md-compatibiility-mode');
+
+/** Selector that matches all elements that may have style collisions with material1. */
+export const MAT_ELEMENTS_SELECTOR = `
+  mat-card,
+  mat-card-actions,
+  mat-card-content,
+  mat-card-footer,
+  mat-card-header,
+  mat-card-subtitle,
+  mat-card-title,
+  mat-card-title-group,
+  mat-checkbox,
+  mat-chip,
+  mat-dialog-container,
+  mat-divider,
+  mat-grid-list,
+  mat-grid-tile,
+  mat-grid-tile-footer,
+  mat-grid-tile-header,
+  mat-hint,
+  mat-icon,
+  mat-ink-bar,
+  mat-input,
+  mat-list,
+  mat-list-item,
+  mat-menu,
+  mat-nav-list,
+  mat-option,
+  mat-placeholder,
+  mat-progress-bar,
+  mat-progress-circle,
+  mat-radio-button,
+  mat-radio-group,
+  mat-select,
+  mat-sidenav,
+  mat-slider,
+  mat-spinner,
+  mat-tab,
+  mat-toolbar
+`;
+
+/** Directive that enforces that the `mat-` prefix cannot be used. */
+@Directive({selector: MAT_ELEMENTS_SELECTOR})
+export class MatPrefixEnforcer {
+  constructor(@Inject(MATERIAL_COMPATIBILITY_MODE) isCompatibilityMode: boolean) {
+    if (!isCompatibilityMode) {
+      throw Error('The "mat-" prefix cannot be used out of ng-material v1 compatibility mode.');
+    }
+  }
+}
+
+
+/**
+ * Module that enforces the default "compatibility mode" settings. When this module is loaded
+ * without NoConflictStyleCompatibilityMode also being imported, it will throw an error if
+ * there are any uses of the `mat-` prefix.
+ *
+ * Because the point of this directive is to *not* be used, it will be tree-shaken away by
+ * optimizers when not in compatibility mode.
+ */
+@NgModule({
+  declarations: [MatPrefixEnforcer],
+  exports: [MatPrefixEnforcer],
+  providers: [{
+    provide: MATERIAL_COMPATIBILITY_MODE, useValue: false,
+  }]
+})
+export class DefaultStyleCompatibilityModeModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: DefaultStyleCompatibilityModeModule,
+      providers: [],
+    };
+  }
+}