fix(material/dialog): provide defaults for dialog animation (#24591)

Even though we provide defaults when we construct the animation object, some internal cases break because there are no defaults in the animation definition itself. These changes provide the defaults in the animation definition as well.

Author: crisbeto

src/material/dialog/dialog-animations.ts

@@ -17,6 +17,14 @@ import {
   group,
 } from '@angular/animations';
 
+/**
+ * Default parameters for the animation for backwards compatibility.
+ * @docs-private
+ */
+export const defaultParams = {
+  params: {enterAnimationDuration: '150ms', exitAnimationDuration: '75ms'},
+};
+
 /**
  * Animations used by MatDialog.
  * @docs-private
@@ -40,13 +48,15 @@ export const matDialogAnimations: {
         ),
         query('@*', animateChild(), {optional: true}),
       ]),
+      defaultParams,
     ),
     transition(
       '* => void, * => exit',
       group([
         animate('{{exitAnimationDuration}} cubic-bezier(0.4, 0.0, 0.2, 1)', style({opacity: 0})),
         query('@*', animateChild(), {optional: true}),
       ]),
+      defaultParams,
     ),
   ]),
 };

src/material/dialog/dialog-config.ts

@@ -9,6 +9,7 @@
 import {ViewContainerRef, ComponentFactoryResolver} from '@angular/core';
 import {Direction} from '@angular/cdk/bidi';
 import {ScrollStrategy} from '@angular/cdk/overlay';
+import {defaultParams} from './dialog-animations';
 
 /** Options for where to set focus to automatically on dialog open */
 export type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';
@@ -127,10 +128,10 @@ export class MatDialogConfig<D = any> {
   componentFactoryResolver?: ComponentFactoryResolver;
 
   /** Duration of the enter animation. Has to be a valid CSS value (e.g. 100ms). */
-  enterAnimationDuration?: string = '150ms';
+  enterAnimationDuration?: string = defaultParams.params.enterAnimationDuration;
 
   /** Duration of the exit animation. Has to be a valid CSS value (e.g. 50ms). */
-  exitAnimationDuration?: string = '75ms';
+  exitAnimationDuration?: string = defaultParams.params.exitAnimationDuration;
 
   // TODO(jelbourn): add configuration for lifecycle hooks, ARIA labelling.
 }

src/material/dialog/dialog-container.ts

@@ -38,7 +38,7 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
-import {matDialogAnimations} from './dialog-animations';
+import {matDialogAnimations, defaultParams} from './dialog-animations';
 import {MatDialogConfig} from './dialog-config';
 
 /** Event that captures the state of dialog container animations. */
@@ -365,8 +365,10 @@ export class MatDialogContainer extends _MatDialogContainerBase {
     return {
       value: this._state,
       params: {
-        enterAnimationDuration: this._config.enterAnimationDuration || '150ms',
-        exitAnimationDuration: this._config.exitAnimationDuration || '75ms',
+        enterAnimationDuration:
+          this._config.enterAnimationDuration || defaultParams.params.enterAnimationDuration,
+        exitAnimationDuration:
+          this._config.exitAnimationDuration || defaultParams.params.exitAnimationDuration,
       },
     };
   }

src/material/dialog/public-api.ts

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