diff --git a/src/material/dialog/dialog-animations.ts b/src/material/dialog/dialog-animations.ts index f1bf8f03e25d..97f0f516971c 100644 --- a/src/material/dialog/dialog-animations.ts +++ b/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,7 +48,7 @@ export const matDialogAnimations: { ), query('@*', animateChild(), {optional: true}), ]), - defaultParams, + _defaultParams, ), transition( '* => void, * => exit', @@ -56,7 +56,7 @@ export const matDialogAnimations: { animate('{{exitAnimationDuration}} cubic-bezier(0.4, 0.0, 0.2, 1)', style({opacity: 0})), query('@*', animateChild(), {optional: true}), ]), - defaultParams, + _defaultParams, ), ]), }; diff --git a/src/material/dialog/dialog-config.ts b/src/material/dialog/dialog-config.ts index b0709eb26466..e4f1f378af7e 100644 --- a/src/material/dialog/dialog-config.ts +++ b/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 { /** 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. } diff --git a/src/material/dialog/dialog-container.ts b/src/material/dialog/dialog-container.ts index fc4fdc8fde44..44426db57c98 100644 --- a/src/material/dialog/dialog-container.ts +++ b/src/material/dialog/dialog-container.ts @@ -88,15 +88,26 @@ export abstract class _MatDialogContainerBase extends CdkDialogContainer extends DialogConfigBase { + /** 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; +} diff --git a/src/material/legacy-dialog/dialog-container.ts b/src/material/legacy-dialog/dialog-container.ts index c6d2e87134c1..311ddce75295 100644 --- a/src/material/legacy-dialog/dialog-container.ts +++ b/src/material/legacy-dialog/dialog-container.ts @@ -21,10 +21,11 @@ import { ViewEncapsulation, } from '@angular/core'; import {defaultParams} from './dialog-animations'; +import {MatLegacyDialogConfig} from './dialog-config'; import { _MatDialogContainerBase, - MatDialogConfig, matDialogAnimations, + MatDialogConfig as DialogConfigToken, } from '@angular/material/dialog'; /** @@ -90,7 +91,7 @@ export class MatLegacyDialogContainer extends _MatDialogContainerBase { elementRef: ElementRef, focusTrapFactory: FocusTrapFactory, @Optional() @Inject(DOCUMENT) document: any, - dialogConfig: MatDialogConfig, + @Inject(DialogConfigToken) dialogConfig: MatLegacyDialogConfig, checker: InteractivityChecker, ngZone: NgZone, overlayRef: OverlayRef, diff --git a/src/material/legacy-dialog/dialog.ts b/src/material/legacy-dialog/dialog.ts index 2b391ee990c8..440861526bd6 100644 --- a/src/material/legacy-dialog/dialog.ts +++ b/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('MatDialogData'); /** Injection token that can be used to specify default dialog options. */ -export const MAT_LEGACY_DIALOG_DEFAULT_OPTIONS = new InjectionToken( +export const MAT_LEGACY_DIALOG_DEFAULT_OPTIONS = new InjectionToken( 'mat-dialog-default-options', ); @@ -54,7 +55,7 @@ export class MatLegacyDialog extends _MatDialogBase { * @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, /** diff --git a/src/material/legacy-dialog/public-api.ts b/src/material/legacy-dialog/public-api.ts index c8d2989c8c80..43ae5c39b463 100644 --- a/src/material/legacy-dialog/public-api.ts +++ b/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, diff --git a/tools/public_api_guard/material/dialog.md b/tools/public_api_guard/material/dialog.md index a4c5d2b42336..caea2380ae2e 100644 --- a/tools/public_api_guard/material/dialog.md +++ b/tools/public_api_guard/material/dialog.md @@ -45,6 +45,14 @@ export type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading'; // @public export function _closeDialogVia(ref: MatDialogRef, 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 { delayFocusTrap?: boolean; direction?: Direction; disableClose?: boolean; - enterAnimationDuration?: string; - exitAnimationDuration?: string; + enterAnimationDuration?: string | number; + exitAnimationDuration?: string | number; hasBackdrop?: boolean; height?: string; id?: string; diff --git a/tools/public_api_guard/material/legacy-dialog.md b/tools/public_api_guard/material/legacy-dialog.md index 4ab5315f2ec8..e0894aab7c13 100644 --- a/tools/public_api_guard/material/legacy-dialog.md +++ b/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'; @@ -115,7 +115,11 @@ export class MatLegacyDialogClose implements OnInit, OnChanges { static ɵfac: i0.ɵɵFactoryDeclaration; } -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;