deprecate the string animation durations in favor of numbers

Author: mmalerba

src/material/dialog/dialog-animations.ts

@@ -21,7 +21,7 @@ import {
  * Default parameters for the animation for backwards compatibility.
  * @docs-private
  */
-export const defaultParams = {
+export const _defaultParams = {
   params: {enterAnimationDuration: '150ms', exitAnimationDuration: '75ms'},
 };
 
@@ -48,15 +48,15 @@ export const matDialogAnimations: {
         ),
         query('@*', animateChild(), {optional: true}),
       ]),
-      defaultParams,
+      _defaultParams,
     ),
     transition(
       '* => void, * => exit',
       group([
         animate('{{exitAnimationDuration}} cubic-bezier(0.4, 0.0, 0.2, 1)', style({opacity: 0})),
         query('@*', animateChild(), {optional: true}),
       ]),
-      defaultParams,
+      _defaultParams,
     ),
   ]),
 };

src/material/dialog/dialog-config.ts

@@ -9,7 +9,7 @@
 import {ViewContainerRef, ComponentFactoryResolver, Injector} from '@angular/core';
 import {Direction} from '@angular/cdk/bidi';
 import {ScrollStrategy} from '@angular/cdk/overlay';
-import {defaultParams} from './dialog-animations';
+import {_defaultParams} from './dialog-animations';
 
 /** Options for where to set focus to automatically on dialog open */
 export type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';
@@ -133,11 +133,19 @@ export class MatDialogConfig<D = any> {
   /** Alternate `ComponentFactoryResolver` to use when resolving the associated component. */
   componentFactoryResolver?: ComponentFactoryResolver;
 
-  /** Duration of the enter animation. Has to be a valid CSS value (e.g. 100ms). */
-  enterAnimationDuration?: string = defaultParams.params.enterAnimationDuration;
+  /**
+   * Duration of the enter animation in ms.
+   * Should be a number, string type is deprecated.
+   * @breaking-change 17.0.0 Remove string signature.
+   */
+  enterAnimationDuration?: string | number;
 
-  /** Duration of the exit animation. Has to be a valid CSS value (e.g. 50ms). */
-  exitAnimationDuration?: string = defaultParams.params.exitAnimationDuration;
+  /**
+   * Duration of the exit animation in ms.
+   * Should be a number, string type is deprecated.
+   * @breaking-change 17.0.0 Remove string signature.
+   */
+  exitAnimationDuration?: string | number;
 
   // TODO(jelbourn): add configuration for lifecycle hooks, ARIA labelling.
 }

src/material/dialog/dialog-container.ts

@@ -88,15 +88,26 @@ export abstract class _MatDialogContainerBase extends CdkDialogContainer<MatDial
 
 const TRANSITION_DURATION_PROPERTY = '--mat-dialog-transition-duration';
 
-function parseCssTime(time: string | undefined): number | null {
+// TODO(mmalerba): Remove this function after animation durations are required
+//  to be numbers.
+/**
+ * Converts a CSS time string to a number in ms. If the given time is already a
+ * number, it is assumed to be in ms.
+ */
+function parseCssTime(time: string | number | undefined): number | null {
   if (time == null) {
     return null;
   }
+  if (typeof time === 'number') {
+    return time;
+  }
   if (time.endsWith('ms')) {
     return coerceNumberProperty(time.substring(0, time.length - 2));
-  } else if (time.endsWith('s')) {
+  }
+  if (time.endsWith('s')) {
     return coerceNumberProperty(time.substring(0, time.length - 1)) * 1000;
-  } else if (time === '0') {
+  }
+  if (time === '0') {
     return 0;
   }
   return null; // anything else is invalid.

src/material/dialog/public-api.ts

@@ -12,4 +12,4 @@ export * from './dialog-ref';
 export * from './dialog-content-directives';
 export * from './dialog-container';
 export * from './module';
-export {matDialogAnimations} from './dialog-animations';
+export {matDialogAnimations, _defaultParams} from './dialog-animations';

src/material/legacy-dialog/dialog-config.ts

@@ -0,0 +1,17 @@
+/**
+ * @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 {MatDialogConfig, _defaultParams} from '@angular/material/dialog';
+
+export class MatLegacyDialogConfig extends MatDialogConfig {
+  /** Duration of the enter animation. Has to be a valid CSS value (e.g. 100ms). */
+  override enterAnimationDuration?: string = _defaultParams.params.enterAnimationDuration;
+
+  /** Duration of the exit animation. Has to be a valid CSS value (e.g. 50ms). */
+  override exitAnimationDuration?: string = _defaultParams.params.exitAnimationDuration;
+}

src/material/legacy-dialog/dialog-container.ts

@@ -21,11 +21,8 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import {defaultParams} from './dialog-animations';
-import {
-  _MatDialogContainerBase,
-  MatDialogConfig,
-  matDialogAnimations,
-} from '@angular/material/dialog';
+import {MatLegacyDialogConfig} from './dialog-config';
+import {_MatDialogContainerBase, matDialogAnimations} from '@angular/material/dialog';
 
 /**
  * Internal component that wraps user-provided dialog content.
@@ -90,7 +87,7 @@ export class MatLegacyDialogContainer extends _MatDialogContainerBase {
     elementRef: ElementRef,
     focusTrapFactory: FocusTrapFactory,
     @Optional() @Inject(DOCUMENT) document: any,
-    dialogConfig: MatDialogConfig,
+    dialogConfig: MatLegacyDialogConfig,
     checker: InteractivityChecker,
     ngZone: NgZone,
     overlayRef: OverlayRef,

src/material/legacy-dialog/dialog.ts

@@ -11,14 +11,15 @@ import {Location} from '@angular/common';
 import {Inject, Injectable, InjectionToken, Injector, Optional, SkipSelf} from '@angular/core';
 import {MatLegacyDialogContainer} from './dialog-container';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
-import {_MatDialogBase, MatDialogConfig} from '@angular/material/dialog';
+import {_MatDialogBase} from '@angular/material/dialog';
 import {MatLegacyDialogRef} from './dialog-ref';
+import {MatLegacyDialogConfig} from './dialog-config';
 
 /** Injection token that can be used to access the data that was passed in to a dialog. */
 export const MAT_LEGACY_DIALOG_DATA = new InjectionToken<any>('MatDialogData');
 
 /** Injection token that can be used to specify default dialog options. */
-export const MAT_LEGACY_DIALOG_DEFAULT_OPTIONS = new InjectionToken<MatDialogConfig>(
+export const MAT_LEGACY_DIALOG_DEFAULT_OPTIONS = new InjectionToken<MatLegacyDialogConfig>(
   'mat-dialog-default-options',
 );
 
@@ -54,7 +55,7 @@ export class MatLegacyDialog extends _MatDialogBase<MatLegacyDialogContainer> {
      * @breaking-change 10.0.0
      */
     @Optional() _location: Location,
-    @Optional() @Inject(MAT_LEGACY_DIALOG_DEFAULT_OPTIONS) defaultOptions: MatDialogConfig,
+    @Optional() @Inject(MAT_LEGACY_DIALOG_DEFAULT_OPTIONS) defaultOptions: MatLegacyDialogConfig,
     @Inject(MAT_LEGACY_DIALOG_SCROLL_STRATEGY) scrollStrategy: any,
     @Optional() @SkipSelf() parentDialog: MatLegacyDialog,
     /**

src/material/legacy-dialog/public-api.ts

@@ -11,13 +11,13 @@ export * from './dialog';
 export * from './dialog-container';
 export * from './dialog-content-directives';
 export * from './dialog-ref';
+export * from './dialog-config';
 export {
   _MatDialogBase as _MatLegacyDialogBase,
   _MatDialogContainerBase as _MatLegacyDialogContainerBase,
   AutoFocusTarget as LegacyAutoFocusTarget,
   DialogRole as LegacyDialogRole,
   DialogPosition as LegacyDialogPosition,
-  MatDialogConfig as MatLegacyDialogConfig,
   _closeDialogVia as _closeLegacyDialogVia,
   MatDialogState as MatLegacyDialogState,
   matDialogAnimations as matLegacyDialogAnimations,

tools/public_api_guard/material/dialog.md

@@ -45,6 +45,14 @@ export type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';
 // @public
 export function _closeDialogVia<R>(ref: MatDialogRef<R>, interactionType: FocusOrigin, result?: R): void;
 
+// @public
+export const _defaultParams: {
+    params: {
+        enterAnimationDuration: string;
+        exitAnimationDuration: string;
+    };
+};
+
 // @public
 export interface DialogPosition {
     bottom?: string;
@@ -163,8 +171,8 @@ export class MatDialogConfig<D = any> {
     delayFocusTrap?: boolean;
     direction?: Direction;
     disableClose?: boolean;
-    enterAnimationDuration?: string;
-    exitAnimationDuration?: string;
+    enterAnimationDuration?: string | number;
+    exitAnimationDuration?: string | number;
     hasBackdrop?: boolean;
     height?: string;
     id?: string;

tools/public_api_guard/material/legacy-dialog.md

@@ -23,10 +23,10 @@ import { DialogPosition as LegacyDialogPosition } from '@angular/material/dialog
 import { DialogRole as LegacyDialogRole } from '@angular/material/dialog';
 import { Location as Location_2 } from '@angular/common';
 import { MAT_DIALOG_SCROLL_STRATEGY_FACTORY as MAT_LEGACY_DIALOG_SCROLL_STRATEGY_FACTORY } from '@angular/material/dialog';
+import { MatDialogConfig } from '@angular/material/dialog';
 import { MatDialogRef } from '@angular/material/dialog';
 import { matDialogAnimations as matLegacyDialogAnimations } from '@angular/material/dialog';
 import { _MatDialogBase as _MatLegacyDialogBase } from '@angular/material/dialog';
-import { MatDialogConfig as MatLegacyDialogConfig } from '@angular/material/dialog';
 import { _MatDialogContainerBase as _MatLegacyDialogContainerBase } from '@angular/material/dialog';
 import { MatDialogState as MatLegacyDialogState } from '@angular/material/dialog';
 import { NgZone } from '@angular/core';
@@ -50,7 +50,7 @@ export { LegacyDialogRole }
 export const MAT_LEGACY_DIALOG_DATA: InjectionToken<any>;
 
 // @public
-export const MAT_LEGACY_DIALOG_DEFAULT_OPTIONS: InjectionToken<MatLegacyDialogConfig<any>>;
+export const MAT_LEGACY_DIALOG_DEFAULT_OPTIONS: InjectionToken<MatLegacyDialogConfig>;
 
 // @public
 export const MAT_LEGACY_DIALOG_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
@@ -115,7 +115,11 @@ export class MatLegacyDialogClose implements OnInit, OnChanges {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatLegacyDialogClose, [{ optional: true; }, null, null]>;
 }
 
-export { MatLegacyDialogConfig }
+// @public (undocumented)
+export class MatLegacyDialogConfig extends MatDialogConfig {
+    enterAnimationDuration?: string;
+    exitAnimationDuration?: string;
+}
 
 // @public
 export class MatLegacyDialogContainer extends _MatLegacyDialogContainerBase {
@@ -124,8 +128,8 @@ export class MatLegacyDialogContainer extends _MatLegacyDialogContainerBase {
     _getAnimationState(): {
         value: "void" | "enter" | "exit";
         params: {
-            enterAnimationDuration: string;
-            exitAnimationDuration: string;
+            enterAnimationDuration: string | number;
+            exitAnimationDuration: string | number;
         };
     };
     _onAnimationDone({ toState, totalTime }: AnimationEvent_2): void;