diff --git a/src/material/dialog/dialog-animations.ts b/src/material/dialog/dialog-animations.ts index 960b4879fc96..f1bf8f03e25d 100644 --- a/src/material/dialog/dialog-animations.ts +++ b/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,6 +48,7 @@ export const matDialogAnimations: { ), query('@*', animateChild(), {optional: true}), ]), + defaultParams, ), transition( '* => void, * => exit', @@ -47,6 +56,7 @@ export const matDialogAnimations: { animate('{{exitAnimationDuration}} cubic-bezier(0.4, 0.0, 0.2, 1)', style({opacity: 0})), query('@*', animateChild(), {optional: true}), ]), + defaultParams, ), ]), }; diff --git a/src/material/dialog/dialog-config.ts b/src/material/dialog/dialog-config.ts index 79854fb8f8f6..ace2e2367601 100644 --- a/src/material/dialog/dialog-config.ts +++ b/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 { 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. } diff --git a/src/material/dialog/dialog-container.ts b/src/material/dialog/dialog-container.ts index 4e3300f42232..b138d521fd07 100644 --- a/src/material/dialog/dialog-container.ts +++ b/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, }, }; } diff --git a/src/material/dialog/public-api.ts b/src/material/dialog/public-api.ts index f3e8ddbeff26..b09d626e2682 100644 --- a/src/material/dialog/public-api.ts +++ b/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';