From 403b0c783d7a6ad01feed85ae577e1825a8d26f4 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 14 Mar 2022 21:52:08 +0100 Subject: [PATCH] fix(material/dialog): provide defaults for dialog animation 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. --- src/material/dialog/dialog-animations.ts | 10 ++++++++++ src/material/dialog/dialog-config.ts | 5 +++-- src/material/dialog/dialog-container.ts | 8 +++++--- src/material/dialog/public-api.ts | 2 +- 4 files changed, 19 insertions(+), 6 deletions(-) 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';