feat(slide-toggle): make slide-toggle click and drag actions configurable

Author: tinayuangao

src/lib/slide-toggle/public-api.ts

@@ -8,4 +8,4 @@
 
 export * from './slide-toggle-module';
 export * from './slide-toggle';
-
+export * from './slide-toggle-config';

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

@@ -0,0 +1,37 @@
+/**
+ * @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 {InjectionToken} from '@angular/core';
+
+
+/**
+ * Slide toggle click action when user click on input element.
+ * noop: Do not toggle checked.
+ * check: Only toggle checked status. Default behavior
+ * undefined: Same as `check`.
+ */
+export type MatSlideToggleClickAction = 'noop' | 'check' | undefined;
+
+/**
+ * Injection token that can be used to specify the slide toggle click behavior.
+ */
+export const MAT_SLIDE_TOGGLE_CLICK_ACTION =
+  new InjectionToken<MatSlideToggleClickAction>('mat-slide-toggle-click-action');
+
+/**
+ * Slide toggle drag action when user drag on slide toggle.
+ * noop: Do not toggle checked.
+ * check: Only toggle checked status. Default behavior
+ * undefined: Same as `check`.
+ */
+export type MatSlideToggleDragAction = 'noop' | 'check' | undefined;
+
+/**
+ * Injection token that can be used to specify the slide toggle drag behavior.
+ */
+export const MAT_SLIDE_TOGGLE_DRAG_ACTION =
+  new InjectionToken<MatSlideToggleDragAction>('mat-slide-toggle-drag-action');

src/lib/slide-toggle/slide-toggle.spec.ts

@@ -6,6 +6,7 @@ import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/f
 import {defaultRippleAnimationConfig} from '@angular/material/core';
 import {By, HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
 import {TestGestureConfig} from '../slider/test-gesture-config';
+import {MAT_SLIDE_TOGGLE_CLICK_ACTION, MAT_SLIDE_TOGGLE_DRAG_ACTION} from './slide-toggle-config';
 import {MatSlideToggle, MatSlideToggleChange, MatSlideToggleModule} from './index';
 
 describe('MatSlideToggle without forms', () => {
@@ -355,6 +356,103 @@ describe('MatSlideToggle without forms', () => {
     }));
   });
 
+  describe('custom action configuration', () => {
+    it('should not change value on click when click action is noop', fakeAsync(() => {
+      TestBed
+        .resetTestingModule()
+        .configureTestingModule({
+          imports: [MatSlideToggleModule],
+          declarations: [SlideToggleBasic],
+          providers: [
+            {
+              provide: HAMMER_GESTURE_CONFIG,
+              useFactory: () => gestureConfig = new TestGestureConfig()
+            },
+            { provide: MAT_SLIDE_TOGGLE_CLICK_ACTION, useValue: 'noop'},
+            {
+              provide: MutationObserverFactory,
+              useValue: {
+                create: (callback: Function) => {
+                  mutationObserverCallbacks.push(callback);
+                  return {observe: () => {}, disconnect: () => {}};
+                }
+              }
+            }
+          ]
+        });
+      const fixture = TestBed.createComponent(SlideToggleBasic);
+      const slideToggleDebug = fixture.debugElement.query(By.css('mat-slide-toggle'));
+
+      const slideToggle = slideToggleDebug.componentInstance;
+      const inputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+      const labelElement = fixture.debugElement.query(By.css('label')).nativeElement;
+
+      expect(slideToggle.checked).toBe(false, 'Expect slide toggle value not changed');
+
+      labelElement.click();
+      fixture.detectChanges();
+
+      expect(slideToggle.checked).toBe(false, 'Expect slide toggle value not changed');
+
+      inputElement.click();
+      fixture.detectChanges();
+
+      expect(slideToggle.checked).toBe(false, 'Expect slide toggle value not changed');
+    }));
+
+    it('should not change value on dragging when drag action is noop', fakeAsync(() => {
+      TestBed
+        .resetTestingModule()
+        .configureTestingModule({
+          imports: [MatSlideToggleModule],
+          declarations: [SlideToggleBasic],
+          providers: [
+            {
+              provide: HAMMER_GESTURE_CONFIG,
+              useFactory: () => gestureConfig = new TestGestureConfig()
+            },
+            { provide: MAT_SLIDE_TOGGLE_DRAG_ACTION, useValue: 'noop'},
+            {
+              provide: MutationObserverFactory,
+              useValue: {
+                create: (callback: Function) => {
+                  mutationObserverCallbacks.push(callback);
+                  return {observe: () => {}, disconnect: () => {}};
+                }
+              }
+            }
+          ]
+        });
+      const fixture = TestBed.createComponent(SlideToggleBasic);
+      const testComponent = fixture.debugElement.componentInstance;
+      const slideToggleDebug = fixture.debugElement.query(By.css('mat-slide-toggle'));
+      const thumbContainerDebug = slideToggleDebug
+        .query(By.css('.mat-slide-toggle-thumb-container'));
+
+      const slideThumbContainer = thumbContainerDebug.nativeElement;
+      const slideToggle = slideToggleDebug.componentInstance;
+
+      expect(slideToggle.checked).toBe(false);
+
+      gestureConfig.emitEventForElement('slidestart', slideThumbContainer);
+
+      expect(slideThumbContainer.classList).toContain('mat-dragging');
+
+      gestureConfig.emitEventForElement('slide', slideThumbContainer, {
+        deltaX: 200 // Arbitrary, large delta that will be clamped to the end of the slide-toggle.
+      });
+
+      gestureConfig.emitEventForElement('slideend', slideThumbContainer);
+
+      // Flush the timeout for the slide ending.
+      tick();
+
+      expect(slideToggle.checked).toBe(false, 'Expect slide toggle value not changed');
+      expect(slideThumbContainer.classList).not.toContain('mat-dragging');
+      expect(testComponent.lastEvent).toBeUndefined();
+    }));
+  });
+
   describe('with dragging', () => {
     let fixture: ComponentFixture<any>;
 

src/lib/slide-toggle/slide-toggle.ts

@@ -42,6 +42,12 @@ import {
   RippleRef,
 } from '@angular/material/core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
+import {
+  MAT_SLIDE_TOGGLE_CLICK_ACTION,
+  MAT_SLIDE_TOGGLE_DRAG_ACTION,
+  MatSlideToggleClickAction,
+  MatSlideToggleDragAction
+} from './slide-toggle-config';
 
 // Increasing integer for generating unique ids for slide-toggle components.
 let nextUniqueId = 0;
@@ -172,7 +178,11 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
               private _changeDetectorRef: ChangeDetectorRef,
               @Attribute('tabindex') tabIndex: string,
               private _ngZone: NgZone,
-              @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string,
+              @Optional() @Inject(MAT_SLIDE_TOGGLE_CLICK_ACTION)
+                  public _clickAction?: MatSlideToggleClickAction,
+              @Optional() @Inject(MAT_SLIDE_TOGGLE_DRAG_ACTION)
+                  public _dragAction?: MatSlideToggleDragAction) {
 
     super(elementRef);
     this.tabIndex = parseInt(tabIndex) || 0;
@@ -198,7 +208,7 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
     // Releasing the pointer over the `<label>` element while dragging triggers another
     // click event on the `<label>` element. This means that the checked state of the underlying
     // input changed unintentionally and needs to be changed back.
-    if (this._dragging) {
+    if (this._dragging || this._clickAction === 'noop') {
       this._inputElement.nativeElement.checked = this.checked;
       return;
     }
@@ -315,7 +325,7 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
     if (this._dragging) {
       const newCheckedValue = this._dragPercentage > 50;
 
-      if (newCheckedValue !== this.checked) {
+      if (newCheckedValue !== this.checked && this._dragAction !== 'noop') {
         this.checked = newCheckedValue;
         this._emitChangeEvent();
       }