Animations disabling refactors

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;

goldens/material/checkbox/index.api.md

@@ -35,8 +35,6 @@ export class MatCheckbox implements AfterViewInit, OnChanges, ControlValueAccess
         indeterminateToChecked: string;
         indeterminateToUnchecked: string;
     };
-    // (undocumented)
-    _animationMode?: "NoopAnimations" | "BrowserAnimations" | null | undefined;
     ariaControls: string;
     ariaDescribedby: string;
     ariaExpanded: boolean;

goldens/material/core/index.api.md

@@ -51,6 +51,9 @@ export class AnimationDurations {
     static EXITING: string;
 }
 
+// @public
+export function _animationsDisabled(): boolean;
+
 // @public
 export function _countGroupLabelsBeforeOption(optionIndex: number, options: QueryList<MatOption>, optionGroups: QueryList<MatOptgroup>): number;
 
@@ -318,7 +321,7 @@ export class MatOptionSelectionChange<T = any> {
 export class MatPseudoCheckbox {
     constructor(...args: unknown[]);
     // (undocumented)
-    _animationMode?: "NoopAnimations" | "BrowserAnimations" | null | undefined;
+    _animationsDisabled: boolean;
     appearance: 'minimal' | 'full';
     disabled: boolean;
     state: MatPseudoCheckboxState;

goldens/material/progress-bar/index.api.md

@@ -25,8 +25,6 @@ export function MAT_PROGRESS_BAR_LOCATION_FACTORY(): MatProgressBarLocation;
 export class MatProgressBar implements AfterViewInit, OnDestroy {
     constructor(...args: unknown[]);
     readonly animationEnd: EventEmitter<ProgressAnimationEnd>;
-    // (undocumented)
-    _animationMode?: "NoopAnimations" | "BrowserAnimations" | null | undefined;
     get bufferValue(): number;
     set bufferValue(v: number);
     get color(): string | null | undefined;

goldens/material/sort/index.api.md

@@ -100,7 +100,7 @@ export interface MatSortDefaultOptions {
 export class MatSortHeader implements MatSortable, OnDestroy, OnInit, AfterViewInit {
     constructor(...args: unknown[]);
     // (undocumented)
-    protected _animationModule: "NoopAnimations" | "BrowserAnimations" | null;
+    protected _animationsDisabled: boolean;
     arrowPosition: SortHeaderArrowPosition;
     // (undocumented)
     _columnDef: MatSortHeaderColumnDef | null;

goldens/material/tabs/index.api.md

@@ -70,7 +70,7 @@ export abstract class MatPaginatedTabHeader implements AfterContentChecked, Afte
     constructor(...args: unknown[]);
     _alignInkBarToSelectedTab(): void;
     // (undocumented)
-    _animationMode: "NoopAnimations" | "BrowserAnimations" | null;
+    _animationsDisabled: boolean;
     // (undocumented)
     protected _changeDetectorRef: ChangeDetectorRef;
     _checkPaginationEnabled(): void;
@@ -246,7 +246,7 @@ export class MatTabGroup implements AfterViewInit, AfterContentInit, AfterConten
     get animationDuration(): string;
     set animationDuration(value: string | number);
     // (undocumented)
-    _animationMode: "NoopAnimations" | "BrowserAnimations" | null;
+    _animationsDisabled: boolean;
     ariaLabel: string;
     ariaLabelledby: string;
     // @deprecated

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/dev-app/checkbox/checkbox-demo.html

@@ -255,46 +255,6 @@ <h5>Click action: noop</h5>
         }
     </mat-checkbox>
   </div>
-  <div animationsNoop>
-    <h5>No animations</h5>
-    <mat-checkbox
-        [required]="demoRequired"
-        [labelPosition]="demoLabelAfter ? 'after' : 'before'"
-        [aria-label]="demoLabel"
-        [aria-labelledby]="demoLabelledBy"
-        [color]="demoColor"
-        [disableRipple]="demoDisableRipple"
-        [id]="demoId"
-        [name]="demoName"
-        [value]="demoValue"
-        [checked]="demoChecked"
-        [disabled]="demoDisabled"
-        [indeterminate]="demoIndeterminate"
-        (change)="demoChecked = $event.checked"
-        (indeterminateChange)="demoIndeterminate = $event">
-        @if (!demoHideLabel) {
-          Checkbox w/ [checked] & (change)
-        }
-    </mat-checkbox>
-    <mat-checkbox
-        [required]="demoRequired"
-        [labelPosition]="demoLabelAfter ? 'after' : 'before'"
-        [aria-label]="demoLabel"
-        [aria-labelledby]="demoLabelledBy"
-        [color]="demoColor"
-        [disableRipple]="demoDisableRipple"
-        [id]="demoId"
-        [name]="demoName"
-        [value]="demoValue"
-        [disabled]="demoDisabled"
-        [indeterminate]="demoIndeterminate"
-        [(ngModel)]="demoChecked"
-        (indeterminateChange)="demoIndeterminate = $event">
-        @if (!demoHideLabel) {
-          Checkbox w/ [(ngModel)]
-        }
-    </mat-checkbox>
-  </div>
 </div>
 
 <p>

src/dev-app/checkbox/checkbox-demo.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ANIMATION_MODULE_TYPE, ChangeDetectionStrategy, Component, Directive} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Directive} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MAT_CHECKBOX_DEFAULT_OPTIONS, MatCheckboxModule} from '@angular/material/checkbox';
 import {MatPseudoCheckboxModule, ThemePalette} from '@angular/material/core';
@@ -32,12 +32,6 @@ export class ClickActionNoop {}
 })
 export class ClickActionCheck {}
 
-@Directive({
-  selector: '[animationsNoop]',
-  providers: [{provide: ANIMATION_MODULE_TYPE, useValue: 'NoopAnimations'}],
-})
-export class AnimationsNoop {}
-
 @Component({
   selector: 'mat-checkbox-demo-nested-checklist',
   styles: `
@@ -107,7 +101,6 @@ export class MatCheckboxDemoNestedChecklist {
     MatCheckboxDemoNestedChecklist,
     ClickActionNoop,
     ClickActionCheck,
-    AnimationsNoop,
     MatTooltip,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,

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/autocomplete/autocomplete.ts

@@ -7,7 +7,6 @@
  */
 
 import {
-  ANIMATION_MODULE_TYPE,
   AfterContentInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -27,6 +26,7 @@ import {
   inject,
 } from '@angular/core';
 import {
+  _animationsDisabled,
   MAT_OPTGROUP,
   MAT_OPTION_PARENT_COMPONENT,
   MatOptgroup,
@@ -124,8 +124,7 @@ export class MatAutocomplete implements AfterContentInit, OnDestroy {
   private _changeDetectorRef = inject(ChangeDetectorRef);
   private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
   protected _defaults = inject<MatAutocompleteDefaultOptions>(MAT_AUTOCOMPLETE_DEFAULT_OPTIONS);
-  protected _animationsDisabled =
-    inject(ANIMATION_MODULE_TYPE, {optional: true}) === 'NoopAnimations';
+  protected _animationsDisabled = _animationsDisabled();
   private _activeOptionChanges = Subscription.EMPTY;
 
   /** Manages active item in option list based on key events. */

src/material/badge/badge.ts

@@ -21,9 +21,8 @@ import {
   OnInit,
   Renderer2,
   ViewEncapsulation,
-  ANIMATION_MODULE_TYPE,
 } from '@angular/core';
-import {ThemePalette} from '../core';
+import {_animationsDisabled, ThemePalette} from '../core';
 import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/private';
 
 /** Allowed position options for matBadgePosition */
@@ -76,7 +75,7 @@ export class MatBadge implements OnInit, OnDestroy {
   private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
   private _ariaDescriber = inject(AriaDescriber);
   private _renderer = inject(Renderer2);
-  private _animationMode = inject(ANIMATION_MODULE_TYPE, {optional: true});
+  private _animationsDisabled = _animationsDisabled();
   private _idGenerator = inject(_IdGenerator);
 
   /**
@@ -240,14 +239,14 @@ export class MatBadge implements OnInit, OnDestroy {
     badgeElement.setAttribute('aria-hidden', 'true');
     badgeElement.classList.add(BADGE_CONTENT_CLASS);
 
-    if (this._animationMode === 'NoopAnimations') {
+    if (this._animationsDisabled) {
       badgeElement.classList.add('_mat-animation-noopable');
     }
 
     this._elementRef.nativeElement.appendChild(badgeElement);
 
     // animate in after insertion
-    if (typeof requestAnimationFrame === 'function' && this._animationMode !== 'NoopAnimations') {
+    if (typeof requestAnimationFrame === 'function' && !this._animationsDisabled) {
       this._ngZone.runOutsideAngular(() => {
         requestAnimationFrame(() => {
           badgeElement.classList.add(activeClass);

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

@@ -9,7 +9,6 @@
 import {CdkDialogContainer} from '@angular/cdk/dialog';
 import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
 import {
-  ANIMATION_MODULE_TYPE,
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
@@ -19,6 +18,7 @@ import {
 } from '@angular/core';
 import {Subscription} from 'rxjs';
 import {CdkPortalOutlet} from '@angular/cdk/portal';
+import {_animationsDisabled} from '../core';
 
 const ENTER_ANIMATION = '_mat-bottom-sheet-enter';
 const EXIT_ANIMATION = '_mat-bottom-sheet-exit';
@@ -54,8 +54,7 @@ const EXIT_ANIMATION = '_mat-bottom-sheet-exit';
 })
 export class MatBottomSheetContainer extends CdkDialogContainer implements OnDestroy {
   private _breakpointSubscription: Subscription;
-  protected _animationsDisabled =
-    inject(ANIMATION_MODULE_TYPE, {optional: true}) === 'NoopAnimations';
+  protected _animationsDisabled = _animationsDisabled();
 
   /** The state of the bottom sheet animations. */
   _animationState: 'void' | 'visible' | 'hidden' = 'void';

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/button-toggle/button-toggle.ts

@@ -14,7 +14,6 @@ import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 import {
   AfterContentInit,
   AfterViewInit,
-  ANIMATION_MODULE_TYPE,
   booleanAttribute,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -36,7 +35,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
-import {_StructuralStylesLoader, MatPseudoCheckbox, MatRipple} from '../core';
+import {_animationsDisabled, _StructuralStylesLoader, MatPseudoCheckbox, MatRipple} from '../core';
 
 /**
  * @deprecated No longer used.
@@ -577,7 +576,7 @@ export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
   private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
   private _focusMonitor = inject(FocusMonitor);
   private _idGenerator = inject(_IdGenerator);
-  private _animationMode = inject(ANIMATION_MODULE_TYPE, {optional: true});
+  private _animationDisabled = _animationsDisabled();
   private _checked = false;
 
   /**
@@ -721,7 +720,7 @@ export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
     // 1. We don't want the animation to fire on the first render for pre-checked toggles so we
     //    delay adding the class until the view is rendered.
     // 2. We don't want animation if the `NoopAnimationsModule` is provided.
-    if (this._animationMode !== 'NoopAnimations') {
+    if (!this._animationDisabled) {
       this._elementRef.nativeElement.classList.add('mat-button-toggle-animations-enabled');
     }