refactor: clean up remaining hammer.js usages

Now that none of the components use Hammer.js anymore, we can clean up the remaining usages from the project.

Author: crisbeto

.github/CODEOWNERS

@@ -148,7 +148,6 @@
 /src/dev-app/examples-page/**                      @andrewseguin
 /src/dev-app/expansion/**                          @jelbourn
 /src/dev-app/focus-origin/**                       @mmalerba
-/src/dev-app/gestures/**                           @jelbourn
 /src/dev-app/google-map/**                         @mbehrlich
 /src/dev-app/grid-list/**                          @jelbourn
 /src/dev-app/icon/**                               @jelbourn

guides/getting-started.md

@@ -18,18 +18,11 @@ ng add @angular/material
 
 The `ng add` command will install Angular Material, the [Component Dev Kit (CDK)](https://material.angular.io/cdk/categories), [Angular Animations](https://angular.io/guide/animations) and ask you the following questions to determine which features to include:
 
-1. Choose a prebuilt theme name, or "custom" for a custom theme: 
+1. Choose a prebuilt theme name, or "custom" for a custom theme:
 
    You can choose from [prebuilt material design themes](https://material.angular.io/guide/theming#using-a-pre-built-theme) or set up an extensible [custom theme](https://material.angular.io/guide/theming#defining-a-custom-theme).
 
-2. Set up HammerJS for gesture recognition:
-
-   [HammerJS](http://hammerjs.github.io/) provides gesture recognition capabilities required by some components (`mat-slide-toggle`, `mat-slider`, `matToolTip`).
-
-   Please note, if you choose not to install HammerJS it can be installed later
-   (see [Appendix](#installing-hammerjs)).
-
-3. Set up browser animations for Angular Material:
+2. Set up browser animations for Angular Material:
 
    Importing the [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule) into your application enables Angular's [animation system](https://angular.io/guide/animations). Declining this will disable most of Angular Material's animations.
 
@@ -79,20 +72,3 @@ and point your browser to [http://localhost:4200](http://localhost:4200)
 You should see the material slider component on the page.
 
 In addition to the install schematic, Angular Material comes with [several schematics](https://material.angular.io/guide/schematics) (like nav, table, address-form, etc.) that can be used to easily generate pre-built components in your application.
-
-
-### Appendix
-
-#### Installing HammerJS
-
-[HammerJS](http://hammerjs.github.io/) can be installed using the following npm command:
-
-   ```bash
-   npm install --save hammerjs
-   ```
-
-   After installing, import it on your app's entry point (e.g. `src/main.ts`).
-
-   ```ts
-   import 'hammerjs';
-   ```

guides/schematics.md

@@ -30,7 +30,6 @@ The Angular Material `ng add` schematic helps you setup an Angular CLI project t
   - Remove margins from `body`
   - Set `height: 100%` on `html` and `body`
   - Make Roboto the default font of your app
-- Install and import `hammerjs` for [gesture support](./getting-started#step-5-gesture-support) in your project
 
 
 ## Component schematics

package.json

@@ -83,7 +83,6 @@
     "@types/glob": "^5.0.33",
     "@types/gulp": "3.8.32",
     "@types/gulp-util": "^3.0.34",
-    "@types/hammerjs": "^2.0.35",
     "@types/inquirer": "^0.0.43",
     "@types/jasmine": "^3.4.0",
     "@types/marked": "^0.4.2",
@@ -115,7 +114,6 @@
     "gulp-rename": "^1.2.2",
     "gulp-sass": "^4.0.2",
     "gulp-util": "^3.0.8",
-    "hammerjs": "^2.0.8",
     "highlight.js": "^9.11.0",
     "husky": "^1.3.1",
     "inquirer": "^6.2.0",

src/dev-app/BUILD.bazel

@@ -33,7 +33,6 @@ ng_module(
         "//src/dev-app/examples-page",
         "//src/dev-app/expansion",
         "//src/dev-app/focus-origin",
-        "//src/dev-app/gestures",
         "//src/dev-app/google-map",
         "//src/dev-app/grid-list",
         "//src/dev-app/icon",
@@ -132,7 +131,6 @@ dev_server(
         "@npm//:node_modules/@material/top-app-bar/dist/mdc.topAppBar.js",
         "@npm//:node_modules/@webcomponents/custom-elements/custom-elements.min.js",
         "@npm//:node_modules/core-js/client/core.js",
-        "@npm//:node_modules/hammerjs/hammer.min.js",
         "@npm//:node_modules/moment/min/moment-with-locales.min.js",
         "@npm//:node_modules/rxjs/bundles/rxjs.umd.min.js",
         "@npm//:node_modules/systemjs/dist/system.js",

src/dev-app/dev-app/dev-app-layout.ts

@@ -39,7 +39,6 @@ export class DevAppLayout {
     {name: 'Drag and Drop', route: '/drag-drop'},
     {name: 'Expansion Panel', route: '/expansion'},
     {name: 'Focus Origin', route: '/focus-origin'},
-    {name: 'Gestures', route: '/gestures'},
     {name: 'Google Map', route: '/google-map'},
     {name: 'Grid List', route: '/grid-list'},
     {name: 'Icon', route: '/icon'},

src/dev-app/dev-app/dev-app-module.ts

@@ -9,12 +9,10 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
-import {GestureConfig} from '@angular/material/core';
 import {MatIconModule} from '@angular/material/icon';
 import {MatListModule} from '@angular/material/list';
 import {MatSidenavModule} from '@angular/material/sidenav';
 import {MatToolbarModule} from '@angular/material/toolbar';
-import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
 import {RouterModule} from '@angular/router';
 import {DevApp404} from './dev-app-404';
 import {DevAppHome} from './dev-app-home';
@@ -32,10 +30,6 @@ import {DevAppLayout} from './dev-app-layout';
   ],
   declarations: [DevAppLayout, DevAppHome, DevApp404],
   exports: [DevAppLayout],
-
-  // We need to pass this in here, because the gesture config currently doesn't for lazy-loaded
-  // modules. See https://github.com/angular/components/issues/4595#issuecomment-416641018.
-  providers: [{provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig}]
 })
 export class DevAppModule {
 }

src/dev-app/dev-app/routes.ts

@@ -39,7 +39,6 @@ export const DEV_APP_ROUTES: Routes = [
     path: 'focus-origin',
     loadChildren: 'focus-origin/focus-origin-demo-module#FocusOriginDemoModule'
   },
-  {path: 'gestures', loadChildren: 'gestures/gestures-demo-module#GesturesDemoModule'},
   {path: 'google-map', loadChildren: 'google-map/google-map-demo-module#GoogleMapDemoModule'},
   {path: 'grid-list', loadChildren: 'grid-list/grid-list-demo-module#GridListDemoModule'},
   {path: 'icon', loadChildren: 'icon/icon-demo-module#IconDemoModule'},

src/dev-app/gestures/BUILD.bazel

@@ -26,7 +26,6 @@
 </body>
 <script src="core-js/client/core.js"></script>
 <script src="zone.js/dist/zone.js"></script>
-<script src="hammerjs/hammer.min.js"></script>
 
 <script src="systemjs/dist/system.js"></script>
 <script src="system-config.js"></script>

src/dev-app/gestures/gestures-demo-module.ts

@@ -112,7 +112,6 @@ ts_devserver(
     static_files = [
         "@npm//zone.js",
         "@npm//core-js",
-        "@npm//hammerjs",
         "@npm//material-components-web",
         "@npm//moment",
         "@npm//@webcomponents/custom-elements",

src/dev-app/gestures/gestures-demo.html

@@ -8,9 +8,7 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {GestureConfig} from '@angular/material/core';
 import {MatListModule} from '@angular/material/list';
-import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
 import {RouterModule} from '@angular/router';
 import {E2eAppLayout, Home} from './e2e-app-layout';
 
@@ -22,10 +20,6 @@ import {E2eAppLayout, Home} from './e2e-app-layout';
   ],
   declarations: [E2eAppLayout, Home],
   exports: [E2eAppLayout],
-
-  // We need to pass this in here, because the gesture config currently doesn't for lazy-loaded
-  // modules. See https://github.com/angular/components/issues/4595#issuecomment-416641018.
-  providers: [{provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig}]
 })
 export class E2eAppModule {
 }

src/dev-app/gestures/gestures-demo.scss

@@ -29,7 +29,6 @@
   <!-- Static scripts which are not imported through AMD nor part of the ConcatJS bundle. -->
   <script src="core-js/client/core.min.js"></script>
   <script src="zone.js/dist/zone.min.js"></script>
-  <script src="hammerjs/hammer.min.js"></script>
 
   <!-- ConcatJS bundle from the Bazel TypeScript devserver. -->
   <script src="bundle.js"></script>

src/dev-app/gestures/gestures-demo.ts

@@ -64,17 +64,6 @@ component by following these steps:
    @include mat-slide-toggle-typography-mdc();
    ```
 
-## API differences
-The experimental slide toggle API closely matches the
-[API of the standard slide toggle](https://material.angular.io/components/slide-toggle/api).
-`@angular/material-experimental/mdc-slide-toggle` exports symbols with the same name and public
-interface as all of the symbols found under `@angular/material/slide-toggle`, except for the
-following differences:
-
-* The MDC-based `mat-slide-toggle` drops the dependency on Hammer.js and as a result doesn't support
-dragging gestures.
-* As a result of dragging gestures not being supported, the `dragChange` event won't emit.
-
 ## Replacing the standard slide toggle in an existing app
 Because the experimental API mirrors the API for the standard slide toggle, it can easily be swapped
 in by just changing the import paths. There is currently no schematic for this, but you can run the

src/dev-app/index.html

@@ -7,7 +7,6 @@
  */
 
 import {NgModule, InjectionToken, Optional, Inject, isDevMode, Version} from '@angular/core';
-import {HammerLoader, HAMMER_LOADER} from '@angular/platform-browser';
 import {BidiModule} from '@angular/cdk/bidi';
 import {VERSION as CDK_VERSION} from '@angular/cdk';
 
@@ -39,6 +38,11 @@ export interface GranularSanityChecks {
   doctype: boolean;
   theme: boolean;
   version: boolean;
+
+  /**
+   * @deprecated No longer being used.
+   * @breaking-change 10.0.0
+   */
   hammer: boolean;
 }
 
@@ -56,9 +60,6 @@ export class MatCommonModule {
   /** Whether we've done the global sanity checks (e.g. a theme is loaded, there is a doctype). */
   private _hasDoneGlobalChecks = false;
 
-  /** Whether we've already checked for HammerJs availability. */
-  private _hasCheckedHammer = false;
-
   /** Reference to the global `document` object. */
   private _document = typeof document === 'object' && document ? document : null;
 
@@ -68,10 +69,7 @@ export class MatCommonModule {
   /** Configured sanity checks. */
   private _sanityChecks: SanityChecks;
 
-  constructor(
-    @Optional() @Inject(MATERIAL_SANITY_CHECKS) sanityChecks: any,
-    @Optional() @Inject(HAMMER_LOADER) private _hammerLoader?: HammerLoader) {
-
+  constructor(@Optional() @Inject(MATERIAL_SANITY_CHECKS) sanityChecks: any) {
     // Note that `_sanityChecks` is typed to `any`, because AoT
     // throws an error if we use the `SanityChecks` type directly.
     this._sanityChecks = sanityChecks;
@@ -152,20 +150,4 @@ export class MatCommonModule {
       );
     }
   }
-
-  /** Checks whether HammerJS is available. */
-  _checkHammerIsAvailable(): void {
-    if (this._hasCheckedHammer || !this._window) {
-      return;
-    }
-
-    const isEnabled = this._checksAreEnabled() &&
-      (this._sanityChecks === true || (this._sanityChecks as GranularSanityChecks).hammer);
-
-    if (isEnabled && !(this._window as any)['Hammer'] && !this._hammerLoader) {
-      console.warn(
-        'Could not find HammerJS. Certain Angular Material components may not work correctly.');
-    }
-    this._hasCheckedHammer = true;
-  }
 }