refactor: clean up remaining hammer.js usages (#17268)

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",
@@ -133,7 +132,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'},