refactor: remove compatibility mode (#7689)

Since the switch to the `mat-` prefix, the compatibility mode is no longer necessary. These changes remove anything that was left.

BREAKING CHANGE:
The `MATERIAL_COMPATIBILITY_MODE`, `CompatibilityModule`, `NoConflictStyleCompatibilityMode`, `MatPrefixRejector`, `MdPrefixRejector` symbols have been removed.

.github/CODEOWNERS

@@ -35,7 +35,6 @@
 /src/lib/core/*                                    @jelbourn
 /src/lib/core/animation/**                         @jelbourn
 /src/lib/core/common-behaviors/**                  @jelbourn
-/src/lib/core/compatibility/**                     @jelbourn
 /src/lib/core/datetime/**                          @mmalerba
 /src/lib/core/error/**                             @crisbeto @mmalerba
 /src/lib/core/gestures/**                          @jelbourn

guides/compatibility-mode.md

@@ -1,22 +0,0 @@
-## What is compatibility mode?
-Compatibility mode for `@angular/material` allows the components to exist side-by-side with
-AngularJS Material components without any CSS collisions.
-
-## What does compatibility mode do?
-When enabled, compatibility mode enforces that all template APIs use the prefix `mat-` instead of
-`md-`. This will prevent any CSS from AngularJS Material from affecting the components in
-`@angular/material`.
-
-## How is compatibility mode enabled?
-Import `NoConflictStyleCompatibilityMode` into your application's root `NgModule`.
-
-
-## Example
-
-```html
-<!-- Regular mode -->
-<button md-button mdTooltip="With a tooltip">Regular button</button>
-
-<!-- In compatibility mode -->
-<button mat-button matTooltip="With a compatibility mode tooltip">Compatibility Mode button</button>
-```

src/lib/core/common-behaviors/common-module.ts

@@ -8,7 +8,6 @@
 
 import {NgModule, InjectionToken, Optional, Inject, isDevMode} from '@angular/core';
 import {BidiModule} from '@angular/cdk/bidi';
-import {CompatibilityModule} from '../compatibility/compatibility';
 
 
 /** Injection token that configures whether the Material sanity checks are enabled. */
@@ -17,13 +16,13 @@ export const MATERIAL_SANITY_CHECKS = new InjectionToken<boolean>('mat-sanity-ch
 
 /**
  * Module that captures anything that should be loaded and/or run for *all* Angular Material
- * components. This includes Bidi, compatibility mode, etc.
+ * components. This includes Bidi, etc.
  *
  * This module should be imported to each top-level component module (e.g., MatTabsModule).
  */
 @NgModule({
-  imports: [CompatibilityModule, BidiModule],
-  exports: [CompatibilityModule, BidiModule],
+  imports: [BidiModule],
+  exports: [BidiModule],
   providers: [{
     provide: MATERIAL_SANITY_CHECKS, useValue: true,
   }],

src/lib/core/compatibility/compatibility.ts

@@ -1,205 +0,0 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-import {Directive, InjectionToken, NgModule} from '@angular/core';
-
-export const MATERIAL_COMPATIBILITY_MODE = new InjectionToken<boolean>('md-compatibility-mode');
-
-/** Selector that matches all elements that may have style collisions with AngularJS Material. */
-export const MAT_ELEMENTS_SELECTOR = `
-  [mat-button],
-  [mat-fab],
-  [mat-icon-button],
-  [mat-mini-fab],
-  [mat-raised-button],
-  [matCardSubtitle],
-  [matCardTitle],
-  [matCellDef],
-  [matColumnDef],
-  [matDialogActions],
-  [matDialogClose],
-  [matDialogContent],
-  [matDialogTitle],
-  [matHeaderCellDef],
-  [matHeaderRowDef],
-  [matLine],
-  [matRowDef],
-  [matStepLabel],
-  [matStepperNext],
-  [matStepperPrevious],
-  [matTabLabel],
-  [matTabLink],
-  [matTabNav],
-  [matTooltip],
-  [matInput],
-  [matPrefix],
-  [matSuffix],
-  mat-autocomplete,
-  mat-button-toggle,
-  mat-button-toggle,
-  mat-button-toggle-group,
-  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-cell,
-  mat-checkbox,
-  mat-chip,
-  mat-dialog-actions,
-  mat-dialog-container,
-  mat-dialog-content,
-  mat-divider,
-  mat-error,
-  mat-grid-list,
-  mat-grid-tile,
-  mat-grid-tile-footer,
-  mat-grid-tile-header,
-  mat-header-cell,
-  mat-header-row,
-  mat-hint,
-  mat-horizontal-stepper,
-  mat-icon,
-  mat-input-container,
-  mat-form-field,
-  mat-list,
-  mat-list-item,
-  mat-menu,
-  mat-nav-list,
-  mat-option,
-  mat-placeholder,
-  mat-progress-bar,
-  mat-pseudo-checkbox,
-  mat-radio-button,
-  mat-radio-group,
-  mat-row,
-  mat-select,
-  mat-sidenav,
-  mat-sidenav-container,
-  mat-slider,
-  mat-spinner,
-  mat-step,
-  mat-tab,
-  mat-table,
-  mat-tab-group,
-  mat-toolbar,
-  mat-vertical-stepper`;
-
-/** Selector that matches all elements that may have style collisions with AngularJS Material. */
-export const MD_ELEMENTS_SELECTOR = `
-  [md-button],
-  [md-fab],
-  [md-icon-button],
-  [md-mini-fab],
-  [md-raised-button],
-  [mdCardSubtitle],
-  [mdCardTitle],
-  [mdCellDef],
-  [mdColumnDef],
-  [mdDialogActions],
-  [mdDialogClose],
-  [mdDialogContent],
-  [mdDialogTitle],
-  [mdHeaderCellDef],
-  [mdHeaderRowDef],
-  [mdLine],
-  [mdRowDef],
-  [mdStepLabel],
-  [mdStepperNext],
-  [mdStepperPrevious],
-  [mdTabLabel],
-  [mdTabLink],
-  [mdTabNav],
-  [mdTooltip],
-  [mdInput],
-  [mdPrefix],
-  [mdSuffix],
-  md-autocomplete,
-  md-button-toggle,
-  md-button-toggle,
-  md-button-toggle-group,
-  md-card,
-  md-card-actions,
-  md-card-content,
-  md-card-footer,
-  md-card-header,
-  md-card-subtitle,
-  md-card-title,
-  md-card-title-group,
-  md-cell,
-  md-checkbox,
-  md-chip,
-  md-dialog-actions,
-  md-dialog-container,
-  md-dialog-content,
-  md-divider,
-  md-error,
-  md-grid-list,
-  md-grid-tile,
-  md-grid-tile-footer,
-  md-grid-tile-header,
-  md-header-cell,
-  md-header-row,
-  md-hint,
-  md-horizontal-stepper,
-  md-icon,
-  md-input-container,
-  md-form-field,
-  md-list,
-  md-list-item,
-  md-menu,
-  md-nav-list,
-  md-option,
-  md-placeholder,
-  md-progress-bar,
-  md-pseudo-checkbox,
-  md-radio-button,
-  md-radio-group,
-  md-row,
-  md-select,
-  md-sidenav,
-  md-sidenav-container,
-  md-slider,
-  md-spinner,
-  md-step,
-  md-tab,
-  md-table,
-  md-tab-group,
-  md-toolbar,
-  md-vertical-stepper`;
-
-/** Directive that enforces that the `mat-` prefix cannot be used. */
-@Directive({selector: MAT_ELEMENTS_SELECTOR})
-export class MatPrefixRejector {}
-
-/** Directive that enforces that the `md-` prefix cannot be used. */
-@Directive({selector: MD_ELEMENTS_SELECTOR})
-export class MdPrefixRejector {}
-
-
-/**
- * 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.
- */
-@NgModule({
-  declarations: [MatPrefixRejector, MdPrefixRejector],
-  exports: [MatPrefixRejector, MdPrefixRejector],
-})
-export class CompatibilityModule {}
-
-
-/**
- * Module that enforces "no-conflict" compatibility mode settings. When this module is loaded,
- * it will throw an error if there are any uses of the `md-` prefix.
- */
-@NgModule()
-export class NoConflictStyleCompatibilityMode {}

src/lib/core/public-api.ts

@@ -8,7 +8,6 @@
 
 export * from './animation/animation';
 export * from './common-behaviors/index';
-export * from './compatibility/compatibility';
 export * from './datetime/index';
 export * from './error/error-options';
 export * from './gestures/gesture-annotations';

src/lib/stepper/stepper.spec.ts

@@ -722,9 +722,7 @@ class SimpleMatHorizontalStepperApp {
       <mat-step [stepControl]="oneGroup">
         <form [formGroup]="oneGroup">
           <ng-template matStepLabel>Step one</ng-template>
-          <mat-form-field>
-            <input matInput formControlName="oneCtrl" required>
-          </mat-form-field>
+          <input formControlName="oneCtrl" required>
           <div>
             <button mat-button matStepperPrevious>Back</button>
             <button mat-button matStepperNext>Next</button>
@@ -734,9 +732,7 @@ class SimpleMatHorizontalStepperApp {
       <mat-step [stepControl]="twoGroup">
         <form [formGroup]="twoGroup">
           <ng-template matStepLabel>Step two</ng-template>
-          <mat-form-field>
-            <input matInput formControlName="twoCtrl" required>
-          </mat-form-field>
+          <input formControlName="twoCtrl" required>
           <div>
             <button mat-button matStepperPrevious>Back</button>
             <button mat-button matStepperNext>Next</button>
@@ -746,9 +742,7 @@ class SimpleMatHorizontalStepperApp {
       <mat-step [stepControl]="threeGroup" optional>
         <form [formGroup]="threeGroup">
           <ng-template matStepLabel>Step two</ng-template>
-          <mat-form-field>
-            <input matInput formControlName="threeCtrl">
-          </mat-form-field>
+          <input formControlName="threeCtrl">
           <div>
             <button mat-button matStepperPrevious>Back</button>
             <button mat-button matStepperNext>Next</button>
@@ -818,9 +812,7 @@ class SimpleMatVerticalStepperApp {
       <mat-step [stepControl]="oneGroup">
         <form [formGroup]="oneGroup">
           <ng-template matStepLabel>Step one</ng-template>
-          <mat-form-field>
-            <input matInput formControlName="oneCtrl" required>
-          </mat-form-field>
+          <input formControlName="oneCtrl" required>
           <div>
             <button mat-button matStepperPrevious>Back</button>
             <button mat-button matStepperNext>Next</button>
@@ -830,9 +822,7 @@ class SimpleMatVerticalStepperApp {
       <mat-step [stepControl]="twoGroup">
         <form [formGroup]="twoGroup">
           <ng-template matStepLabel>Step two</ng-template>
-          <mat-form-field>
-            <input matInput formControlName="twoCtrl" required>
-          </mat-form-field>
+          <input formControlName="twoCtrl" required>
           <div>
             <button mat-button matStepperPrevious>Back</button>
             <button mat-button matStepperNext>Next</button>
@@ -842,9 +832,7 @@ class SimpleMatVerticalStepperApp {
       <mat-step [stepControl]="threeGroup" optional>
         <form [formGroup]="threeGroup">
           <ng-template matStepLabel>Step two</ng-template>
-          <mat-form-field>
-            <input matInput formControlName="threeCtrl">
-          </mat-form-field>
+          <input formControlName="threeCtrl">
           <div>
             <button mat-button matStepperPrevious>Back</button>
             <button mat-button matStepperNext>Next</button>

src/universal-app/kitchen-sink/kitchen-sink.ts

@@ -35,6 +35,8 @@ import {
   MatToolbarModule,
   MatTooltipModule,
   MatStepperModule,
+  MatButtonToggleModule,
+  MatCheckboxModule,
 } from '@angular/material';
 import {
   CdkTableModule,