feat(slide-toggle): remove Hammer.js dependency (#17102)

Removes the slide toggle's dependency on Hammer.js by getting rid of the dragging gestures.

Author: crisbeto

src/material/slide-toggle/slide-toggle-config.ts

@@ -12,13 +12,17 @@ import {InjectionToken} from '@angular/core';
 export interface MatSlideToggleDefaultOptions {
   /** Whether toggle action triggers value changes in slide toggle. */
   disableToggleValue?: boolean;
-  /** Whether drag action triggers value changes in slide toggle. */
+  /**
+   * Whether drag action triggers value changes in slide toggle.
+   * @deprecated No longer being used.
+   * @breaking-change 10.0.0
+   */
   disableDragValue?: boolean;
 }
 
 /** Injection token to be used to override the default options for `mat-slide-toggle`. */
 export const MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS =
   new InjectionToken<MatSlideToggleDefaultOptions>('mat-slide-toggle-default-options', {
     providedIn: 'root',
-    factory: () => ({disableToggleValue: false, disableDragValue: false})
+    factory: () => ({disableToggleValue: false})
   });

src/material/slide-toggle/slide-toggle-module.ts

@@ -8,8 +8,7 @@
 
 import {ObserversModule} from '@angular/cdk/observers';
 import {NgModule} from '@angular/core';
-import {GestureConfig, MatCommonModule, MatRippleModule} from '@angular/material/core';
-import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
+import {MatCommonModule, MatRippleModule} from '@angular/material/core';
 import {MatSlideToggle} from './slide-toggle';
 import {MatSlideToggleRequiredValidator} from './slide-toggle-required-validator';
 
@@ -35,8 +34,5 @@ export class _MatSlideToggleRequiredValidatorModule {
     MatCommonModule
   ],
   declarations: [MatSlideToggle],
-  providers: [
-    {provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig}
-  ],
 })
 export class MatSlideToggleModule {}

src/material/slide-toggle/slide-toggle.html

@@ -16,14 +16,8 @@
            (change)="_onChangeEvent($event)"
            (click)="_onInputClick($event)">
 
-    <div class="mat-slide-toggle-thumb-container"
-         #thumbContainer
-         (slidestart)="_onDragStart()"
-         (slide)="_onDrag($event)"
-         (slideend)="_onDragEnd()">
-
+    <div class="mat-slide-toggle-thumb-container" #thumbContainer>
       <div class="mat-slide-toggle-thumb"></div>
-
       <div class="mat-slide-toggle-ripple" mat-ripple
            [matRippleTrigger]="label"
            [matRippleDisabled]="disableRipple || disabled"
@@ -33,10 +27,8 @@
 
         <div class="mat-ripple-element mat-slide-toggle-persistent-ripple"></div>
       </div>
-
     </div>
 
-
   </div>
 
   <span class="mat-slide-toggle-content" #labelContent (cdkObserveContent)="_onLabelTextChange()">

src/material/slide-toggle/slide-toggle.md

@@ -1,27 +1,25 @@
-`<mat-slide-toggle>` is an on/off control that can be toggled via clicking or dragging. 
+`<mat-slide-toggle>` is an on/off control that can be toggled via clicking.
 
 <!-- example(slide-toggle-overview) -->
 
-The slide-toggle behaves similarly to a checkbox, though it does not support an `indeterminate` 
+The slide-toggle behaves similarly to a checkbox, though it does not support an `indeterminate`
 state like `<mat-checkbox>`.
 
-_Note: the sliding behavior for this component requires that HammerJS is loaded on the page._
-
 ### Slide-toggle label
-The slide-toggle label is provided as the content to the `<mat-slide-toggle>` element. 
+The slide-toggle label is provided as the content to the `<mat-slide-toggle>` element.
 
-If you don't want the label to appear next to the slide-toggle, you can use 
-[`aria-label`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-label) or 
-[`aria-labelledby`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby) to 
+If you don't want the label to appear next to the slide-toggle, you can use
+[`aria-label`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-label) or
+[`aria-labelledby`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby) to
 specify an appropriate label.
 
 ### Use with `@angular/forms`
-`<mat-slide-toggle>` is compatible with `@angular/forms` and supports both `FormsModule` 
+`<mat-slide-toggle>` is compatible with `@angular/forms` and supports both `FormsModule`
 and `ReactiveFormsModule`.
 
 ### Theming
-The color of a `<mat-slide-toggle>` can be changed by using the `color` property. By default, 
-slide-toggles use the theme's accent color. This can be changed to `'primary'` or `'warn'`.  
+The color of a `<mat-slide-toggle>` can be changed by using the `color` property. By default,
+slide-toggles use the theme's accent color. This can be changed to `'primary'` or `'warn'`.
 
 ### Accessibility
 The `<mat-slide-toggle>` uses an internal `<input type="checkbox">` to provide an accessible

src/material/slide-toggle/slide-toggle.scss

@@ -1,6 +1,5 @@
 @import '../core/style/variables';
 @import '../core/ripple/ripple';
-@import '../core/style/vendor-prefixes';
 @import '../core/style/list-common';
 @import '../../cdk/a11y/a11y';
 
@@ -23,10 +22,6 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
   white-space: nowrap;
   outline: none;
 
-  // Disable user selection to ensure that dragging is smooth without grabbing
-  // some elements accidentally.
-  @include user-select(none);
-
   -webkit-tap-highlight-color: transparent;
 
   &.mat-checked {
@@ -57,7 +52,6 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
   flex-direction: row;
   align-items: center;
   height: inherit;
-
   cursor: pointer;
 }
 
@@ -92,7 +86,6 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
   margin-right: 0;
 }
 
-// The thumb container is responsible for the dragging functionality.
 // The container includes the visual thumb and the ripple container element.
 .mat-slide-toggle-thumb-container {
   $thumb-bar-vertical-padding: ($mat-slide-toggle-thumb-size - $mat-slide-toggle-bar-height) / 2;
@@ -109,18 +102,6 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
   transition: $swift-linear;
   transition-property: transform;
 
-  @include cursor-grab;
-
-  // Once the thumb container is being dragged around, we remove the transition duration to
-  // make the drag feeling fast and not delayed.
-  &.mat-dragging {
-    transition-duration: 0ms;
-  }
-
-  &:active {
-    @include cursor-grabbing;
-  }
-
   ._mat-animation-noopable & {
     transition: none;
   }