update(ripple): remove deprecated speed factor option (#12258)

* update(ripple): remove deprecated speed factor option.

* Removes the deprecated `[matRippleSpeedFactor]` and global `baseSpeedFactor` option.
* Adds update rules that can automatically switch to the new API (as much as possible) and even calculate the new durations based on the previously specified speed factor.

BREAKING CHANGE: deprecated `[matRippleSpeedFactor]` and `baseSpeedFactor` for the ripples have been removed. Use the new animation config instead.

* Add test case; fix NodeJS version target circular dependency; Support for rule version constraints

Author: devversion

src/lib/chips/chip.ts

@@ -234,10 +234,9 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
     this._chipRipple.setupTriggerEvents(_elementRef.nativeElement);
 
     if (globalOptions) {
+      // TODO(paul): Do not copy each option manually. Allow dynamic global option changes: #9729
       this._ripplesGloballyDisabled = !!globalOptions.disabled;
-      // TODO(paul): Once the speedFactor is removed, we no longer need to copy each single option.
       this.rippleConfig = {
-        speedFactor: globalOptions.baseSpeedFactor,
         animation: globalOptions.animation,
         terminateOnPointerUp: globalOptions.terminateOnPointerUp,
       };

src/lib/core/ripple/ripple-renderer.ts

@@ -17,11 +17,6 @@ export type RippleConfig = {
   persistent?: boolean;
   animation?: RippleAnimationConfig;
   terminateOnPointerUp?: boolean;
-  /**
-   * @deprecated Use the `animation` property instead.
-   * @breaking-change 7.0.0
-   */
-  speedFactor?: number;
 };
 
 /**
@@ -140,7 +135,7 @@ export class RippleRenderer {
     const radius = config.radius || distanceToFurthestCorner(x, y, containerRect);
     const offsetX = x - containerRect.left;
     const offsetY = y - containerRect.top;
-    const duration = animationConfig.enterDuration / (config.speedFactor || 1);
+    const duration = animationConfig.enterDuration;
 
     const ripple = document.createElement('div');
     ripple.classList.add('mat-ripple-element');

src/lib/core/ripple/ripple.spec.ts

@@ -62,7 +62,7 @@ describe('MatRipple', () => {
       fixture = TestBed.createComponent(BasicRippleContainer);
       fixture.detectChanges();
 
-      rippleTarget = fixture.nativeElement.querySelector('[mat-ripple]');
+      rippleTarget = fixture.nativeElement.querySelector('.mat-ripple');
       rippleDirective = fixture.componentInstance.ripple;
     });
 
@@ -262,7 +262,7 @@ describe('MatRipple', () => {
       fixture = TestBed.createComponent(RippleContainerWithNgIf);
       fixture.detectChanges();
 
-      rippleTarget = fixture.debugElement.nativeElement.querySelector('[mat-ripple]');
+      rippleTarget = fixture.debugElement.nativeElement.querySelector('.mat-ripple');
 
       fixture.componentInstance.isDestroyed = true;
       fixture.detectChanges();
@@ -377,7 +377,7 @@ describe('MatRipple', () => {
       fixture = TestBed.createComponent(BasicRippleContainer);
       fixture.detectChanges();
 
-      rippleTarget = fixture.nativeElement.querySelector('[mat-ripple]');
+      rippleTarget = fixture.nativeElement.querySelector('.mat-ripple');
       rippleDirective = fixture.componentInstance.ripple;
     });
 
@@ -492,7 +492,7 @@ describe('MatRipple', () => {
       fixture = TestBed.createComponent(testComponent);
       fixture.detectChanges();
 
-      rippleTarget = fixture.nativeElement.querySelector('[mat-ripple]');
+      rippleTarget = fixture.nativeElement.querySelector('.mat-ripple');
       rippleDirective = fixture.componentInstance.ripple;
     }
 
@@ -534,41 +534,6 @@ describe('MatRipple', () => {
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
     });
 
-    it('should support changing the baseSpeedFactor', fakeAsync(() => {
-      createTestComponent({ baseSpeedFactor: 0.5 });
-
-      dispatchMouseEvent(rippleTarget, 'mousedown');
-      dispatchMouseEvent(rippleTarget, 'mouseup');
-
-      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
-
-      // Calculates the speedFactor for the duration. Those factors needs to be inverted, because
-      // a lower speed factor, will make the duration longer. For example: 0.5 => 2x duration.
-      let fadeInFactor = 1 / 0.5;
-
-      // Calculates the duration for fading-in and fading-out the ripple.
-      tick(enterDuration * fadeInFactor + exitDuration);
-
-      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
-    }));
-
-    it('should combine individual speed factor with baseSpeedFactor', fakeAsync(() => {
-      createTestComponent({ baseSpeedFactor: 0.5 });
-
-      rippleDirective.launch(0, 0, { speedFactor: 1.5 });
-
-      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
-
-      // Calculates the speedFactor for the duration. Those factors needs to be inverted, because
-      // a lower speed factor, will make the duration longer. For example: 0.5 => 2x duration.
-      let fadeInFactor = 1 / (0.5 * 1.5);
-
-      // Calculates the duration for fading-in and fading-out the ripple.
-      tick(enterDuration * fadeInFactor + exitDuration);
-
-      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
-    }));
-
     it('should support changing the animation duration', fakeAsync(() => {
       createTestComponent({
         animation: {enterDuration: 100, exitDuration: 100}
@@ -619,7 +584,7 @@ describe('MatRipple', () => {
       fixture = TestBed.createComponent(BasicRippleContainer);
       fixture.detectChanges();
 
-      rippleTarget = fixture.nativeElement.querySelector('[mat-ripple]');
+      rippleTarget = fixture.nativeElement.querySelector('.mat-ripple');
       rippleDirective = fixture.componentInstance.ripple;
     });
 
@@ -637,7 +602,7 @@ describe('MatRipple', () => {
       fixture.detectChanges();
 
       controller = fixture.debugElement.componentInstance;
-      rippleTarget = fixture.debugElement.nativeElement.querySelector('[mat-ripple]');
+      rippleTarget = fixture.debugElement.nativeElement.querySelector('.mat-ripple');
     });
 
     it('sets ripple color', () => {
@@ -757,7 +722,7 @@ describe('MatRipple', () => {
 
 @Component({
   template: `
-    <div id="container" #ripple="matRipple" mat-ripple [matRippleSpeedFactor]="0"
+    <div id="container" #ripple="matRipple" matRipple
          style="position: relative; width:300px; height:200px;">
     </div>
   `,
@@ -769,8 +734,7 @@ class BasicRippleContainer {
 @Component({
   template: `
     <div id="container" style="position: relative; width:300px; height:200px;"
-      mat-ripple
-      [matRippleSpeedFactor]="0"
+      matRipple
       [matRippleTrigger]="trigger"
       [matRippleCentered]="centered"
       [matRippleRadius]="radius"
@@ -792,11 +756,11 @@ class RippleContainerWithInputBindings {
 }
 
 @Component({
-  template: `<div id="container" #ripple="matRipple" mat-ripple></div>`,
+  template: `<div id="container" #ripple="matRipple" matRipple></div>`,
 })
 class RippleContainerWithoutBindings {}
 
-@Component({ template: `<div id="container" mat-ripple [matRippleSpeedFactor]="0"
+@Component({ template: `<div id="container" matRipple
                              *ngIf="!isDestroyed"></div>` })
 class RippleContainerWithNgIf {
   @ViewChild(MatRipple) ripple: MatRipple;

src/lib/core/ripple/ripple.ts

@@ -37,15 +37,6 @@ export interface RippleGlobalOptions {
    */
   animation?: RippleAnimationConfig;
 
-  /**
-   * If set, the default duration of the fade-in animation is divided by this value. For example,
-   * setting it to 0.5 will cause the ripple fade-in animation to take twice as long.
-   * A changed speedFactor will not affect the fade-out duration of the ripples.
-   * @deprecated Use the `animation` global option instead.
-   * @breaking-change 7.0.0
-   */
-  baseSpeedFactor?: number;
-
   /**
    * Whether ripples should start fading out immediately after the mouse our touch is released. By
    * default, ripples will wait for the enter animation to complete and for mouse or touch release.
@@ -86,15 +77,6 @@ export class MatRipple implements OnInit, OnDestroy, RippleTarget {
    */
   @Input('matRippleRadius') radius: number = 0;
 
-  /**
-   * If set, the normal duration of ripple animations is divided by this value. For example,
-   * setting it to 0.5 will cause the animations to take twice as long.
-   * A changed speedFactor will not modify the fade-out duration of the ripples.
-   * @deprecated Use the [matRippleAnimation] binding instead.
-   * @breaking-change 7.0.0
-   */
-  @Input('matRippleSpeedFactor') speedFactor: number = 1;
-
   /**
    * Configuration for the ripple animation. Allows modifying the enter and exit animation
    * duration of the ripples. The animation durations will be overwritten if the
@@ -174,7 +156,6 @@ export class MatRipple implements OnInit, OnDestroy, RippleTarget {
       color: this.color,
       animation: {...this._globalOptions.animation, ...this.animation},
       terminateOnPointerUp: this._globalOptions.terminateOnPointerUp,
-      speedFactor: this.speedFactor * (this._globalOptions.baseSpeedFactor || 1),
     };
   }
 

src/lib/schematics/update/index.ts

@@ -7,14 +7,9 @@
  */
 
 import {Rule} from '@angular-devkit/schematics';
+import {TargetVersion} from './target-version';
 import {createUpdateRule} from './update';
 
-/** Possible versions that can be automatically migrated by `ng update`. */
-export enum TargetVersion {
-  V6,
-  V7,
-}
-
 /** Entry point for the migration schematics with target of Angular Material 6.0.0 */
 export function updateToV6(): Rule {
   return createUpdateRule(TargetVersion.V6);

src/lib/schematics/update/material/data/attribute-selectors.ts

@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {TargetVersion} from '../../target-version';
 import {VersionChanges} from '../transform-change-data';
-import {TargetVersion} from '../../index';
 
 export interface MaterialAttributeSelectorData {
   /** The attribute name to replace. */

src/lib/schematics/update/material/data/class-names.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {TargetVersion} from '../../index';
+import {TargetVersion} from '../../target-version';
 import {VersionChanges} from '../transform-change-data';
 
 export interface MaterialClassNameData {

src/lib/schematics/update/material/data/constructor-checks.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {TargetVersion} from '../../index';
+import {TargetVersion} from '../../target-version';
 import {VersionChanges} from '../transform-change-data';
 
 /**

src/lib/schematics/update/material/data/css-selectors.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {TargetVersion} from '../../index';
+import {TargetVersion} from '../../target-version';
 import {VersionChanges} from '../transform-change-data';
 
 export interface MaterialCssSelectorData {

src/lib/schematics/update/material/data/element-selectors.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {TargetVersion} from '../../index';
+import {TargetVersion} from '../../target-version';
 import {VersionChanges} from '../transform-change-data';
 
 export interface MaterialElementSelectorData {

src/lib/schematics/update/material/data/input-names.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {TargetVersion} from '../../index';
+import {TargetVersion} from '../../target-version';
 import {VersionChanges} from '../transform-change-data';
 
 export interface MaterialInputNameData {

src/lib/schematics/update/material/data/method-call-checks.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {TargetVersion} from '../../index';
+import {TargetVersion} from '../../target-version';
 import {VersionChanges} from '../transform-change-data';
 
 export interface MaterialMethodCallData {

src/lib/schematics/update/material/data/output-names.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {TargetVersion} from '../../index';
+import {TargetVersion} from '../../target-version';
 import {VersionChanges} from '../transform-change-data';
 
 export interface MaterialOutputNameData {

src/lib/schematics/update/material/data/property-names.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {TargetVersion} from '../../index';
+import {TargetVersion} from '../../target-version';
 import {VersionChanges} from '../transform-change-data';
 
 export interface MaterialPropertyNameData {

src/lib/schematics/update/material/transform-change-data.ts

@@ -5,7 +5,8 @@
  * 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 {TargetVersion} from '../index';
+
+import {TargetVersion} from '../target-version';
 
 export type VersionChanges<T> = {
   [target in TargetVersion]?: ReadableChange<T>[];

src/lib/schematics/update/rules/misc-ripples-v7/ripple-speed-factor.ts

@@ -0,0 +1,26 @@
+/**
+ * @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
+ */
+
+/** Converts the specified speed factor into the exact static enter duration. */
+export function convertSpeedFactorToDuration(factor: number) {
+  // Based on the numeric speed factor value that only affected the `enterDuration` we can
+  // now calculate the exact `enterDuration`. 450ms is the enter duration without factor.
+  return 450 / (factor || 1);
+}
+
+/**
+ * Creates a runtime TypeScript expression that can be used in order to calculate the duration
+ * from the speed factor expression that couldn't be statically analyzed.
+ *
+ * @param speedFactorValue Speed factor expression that couldn't be statically analyzed.
+ */
+export function createSpeedFactorConvertExpression(speedFactorValue: string): string {
+  // To be sure that the speed factor value expression is calculated properly, we need to add
+  // the according parenthesis.
+  return `450 / (${speedFactorValue})`;
+}