refactor(cdk/overlay): add config option for disabling animations

Currently the CDK overlay uses `ANIMATION_MODULE_TYPE` to implicitly disable the backdrop animation, however we want to introduce a Material-specific way of disabling animations. These changes add a config option that we can use to do so.

Author: crisbeto

goldens/cdk/dialog/index.api.md

@@ -127,6 +127,7 @@ export class DialogConfig<D = unknown, R = unknown, C extends BasePortalOutlet =
     };
     data?: D | null;
     direction?: Direction;
+    disableAnimations?: boolean;
     disableClose?: boolean;
     hasBackdrop?: boolean;
     height?: string;

goldens/cdk/overlay/index.api.md

@@ -299,6 +299,7 @@ export class OverlayConfig {
     constructor(config?: OverlayConfig);
     backdropClass?: string | string[];
     direction?: Direction | Directionality;
+    disableAnimations?: boolean;
     disposeOnNavigation?: boolean;
     hasBackdrop?: boolean;
     height?: number | string;

src/cdk/dialog/dialog-config.ts

@@ -138,6 +138,11 @@ export class DialogConfig<D = unknown, R = unknown, C extends BasePortalOutlet =
    */
   closeOnOverlayDetachments?: boolean = true;
 
+  /**
+   * Whether the built-in overlay animations should be disabled.
+   */
+  disableAnimations?: boolean = false;
+
   /**
    * Providers that will be exposed to the contents of the dialog. Can also
    * be provided as a function in order to generate the providers lazily.

src/cdk/dialog/dialog.ts

@@ -190,6 +190,7 @@ export class Dialog implements OnDestroy {
       width: config.width,
       height: config.height,
       disposeOnNavigation: config.closeOnNavigation,
+      disableAnimations: config.disableAnimations,
     });
 
     if (config.backdropClass) {

src/cdk/overlay/overlay-config.ts

@@ -27,6 +27,9 @@ export class OverlayConfig {
   /** Custom class to add to the backdrop */
   backdropClass?: string | string[] = 'cdk-overlay-dark-backdrop';
 
+  /** Whether to disable any built-in animations. */
+  disableAnimations?: boolean;
+
   /** The width of the overlay panel. If a number is provided, pixel units are assumed. */
   width?: number | string;
 

src/cdk/overlay/overlay.ts

@@ -86,7 +86,7 @@ export class Overlay {
       this._document,
       this._location,
       this._outsideClickDispatcher,
-      this._animationsModuleType === 'NoopAnimations',
+      config?.disableAnimations ?? this._animationsModuleType === 'NoopAnimations',
       this._injector.get(EnvironmentInjector),
       this._renderer,
     );

src/material/autocomplete/autocomplete-trigger.ts

@@ -45,6 +45,7 @@ import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {
   MatOption,
   MatOptionSelectionChange,
+  _animationsDisabled,
   _countGroupLabelsBeforeOption,
   _getOptionScrollPosition,
 } from '../core';
@@ -149,6 +150,7 @@ export class MatAutocompleteTrigger
   private _viewportRuler = inject(ViewportRuler);
   private _scrollStrategy = inject(MAT_AUTOCOMPLETE_SCROLL_STRATEGY);
   private _renderer = inject(Renderer2);
+  private _animationsDisabled = _animationsDisabled();
   private _defaults = inject<MatAutocompleteDefaultOptions | null>(
     MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
     {optional: true},
@@ -903,6 +905,7 @@ export class MatAutocompleteTrigger
       hasBackdrop: this._defaults?.hasBackdrop,
       backdropClass: this._defaults?.backdropClass,
       panelClass: this._defaults?.overlayPanelClass,
+      disableAnimations: this._animationsDisabled,
     });
   }
 

src/material/bottom-sheet/bottom-sheet.ts

@@ -13,6 +13,7 @@ import {Injectable, TemplateRef, InjectionToken, OnDestroy, inject} from '@angul
 import {MAT_BOTTOM_SHEET_DATA, MatBottomSheetConfig} from './bottom-sheet-config';
 import {MatBottomSheetContainer} from './bottom-sheet-container';
 import {MatBottomSheetRef} from './bottom-sheet-ref';
+import {_animationsDisabled} from '../core';
 
 /** Injection token that can be used to specify default bottom sheet options. */
 export const MAT_BOTTOM_SHEET_DEFAULT_OPTIONS = new InjectionToken<MatBottomSheetConfig>(
@@ -26,6 +27,7 @@ export const MAT_BOTTOM_SHEET_DEFAULT_OPTIONS = new InjectionToken<MatBottomShee
 export class MatBottomSheet implements OnDestroy {
   private _overlay = inject(Overlay);
   private _parentBottomSheet = inject(MatBottomSheet, {optional: true, skipSelf: true});
+  private _animationsDisabled = _animationsDisabled();
   private _defaultOptions = inject<MatBottomSheetConfig>(MAT_BOTTOM_SHEET_DEFAULT_OPTIONS, {
     optional: true,
   });
@@ -89,6 +91,7 @@ export class MatBottomSheet implements OnDestroy {
       container: MatBottomSheetContainer,
       scrollStrategy: _config.scrollStrategy || this._overlay.scrollStrategies.block(),
       positionStrategy: this._overlay.position().global().centerHorizontally().bottom('0'),
+      disableAnimations: this._animationsDisabled,
       templateContext: () => ({bottomSheetRef: ref}),
       providers: (cdkRef, _cdkConfig, container) => {
         ref = new MatBottomSheetRef(cdkRef, _config, container as MatBottomSheetContainer);

src/material/core/private/ripple-loader.ts

@@ -175,10 +175,10 @@ export class MatRippleLoader implements OnDestroy {
     const globalOptions = this._globalRippleOptions;
     const enterDuration = this._animationsDisabled
       ? 0
-      : globalOptions?.animation?.enterDuration ?? defaultRippleAnimationConfig.enterDuration;
+      : (globalOptions?.animation?.enterDuration ?? defaultRippleAnimationConfig.enterDuration);
     const exitDuration = this._animationsDisabled
       ? 0
-      : globalOptions?.animation?.exitDuration ?? defaultRippleAnimationConfig.exitDuration;
+      : (globalOptions?.animation?.exitDuration ?? defaultRippleAnimationConfig.exitDuration);
     const target: RippleTarget = {
       rippleDisabled:
         this._animationsDisabled || globalOptions?.disabled || host.hasAttribute(matRippleDisabled),

src/material/datepicker/datepicker-base.ts

@@ -394,6 +394,7 @@ export abstract class MatDatepickerBase<
   private _dateAdapter = inject<DateAdapter<D>>(DateAdapter, {optional: true})!;
   private _dir = inject(Directionality, {optional: true});
   private _model = inject<MatDateSelectionModel<S, D>>(MatDateSelectionModel);
+  private _animationsDisabled = _animationsDisabled();
 
   private _scrollStrategy = inject(MAT_DATEPICKER_SCROLL_STRATEGY);
   private _inputStateChanges = Subscription.EMPTY;
@@ -769,6 +770,7 @@ export abstract class MatDatepickerBase<
         direction: this._dir || 'ltr',
         scrollStrategy: isDialog ? this._overlay.scrollStrategies.block() : this._scrollStrategy(),
         panelClass: `mat-datepicker-${isDialog ? 'dialog' : 'popup'}`,
+        disableAnimations: this._animationsDisabled,
       }),
     ));