fix(expansion): disable header height transition if noop animations is set (#19373)

We recently refactored the header height transition from Angular
animations to plain CSS (to support density styles).

It looks like this means that we no longer respect the noop animations
module for that animation. This commit fixes that.

Author: devversion

src/material/expansion/expansion-panel-header.scss

@@ -9,6 +9,11 @@
   position: relative; // Necessary for the strong focus indication.
   transition: height $mat-expansion-panel-header-transition;
 
+  // If the `NoopAnimationsModule` is used, disable the height transition.
+  &._mat-animation-noopable {
+    transition: none;
+  }
+
   &:focus,
   &:hover {
     outline: none;

src/material/expansion/expansion-panel-header.ts

@@ -21,6 +21,7 @@ import {
   Optional,
   Inject,
 } from '@angular/core';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {merge, Subscription, EMPTY} from 'rxjs';
 import {filter} from 'rxjs/operators';
 import {matExpansionAnimations} from './expansion-animations';
@@ -57,6 +58,7 @@ import {MatAccordionTogglePosition} from './accordion-base';
     '[class.mat-expanded]': '_isExpanded()',
     '[class.mat-expansion-toggle-indicator-after]': `_getTogglePosition() === 'after'`,
     '[class.mat-expansion-toggle-indicator-before]': `_getTogglePosition() === 'before'`,
+    '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
     '[style.height]': '_getHeaderHeight()',
     '(click)': '_toggle()',
     '(keydown)': '_keydown($event)',
@@ -71,7 +73,8 @@ export class MatExpansionPanelHeader implements OnDestroy, FocusableOption {
       private _focusMonitor: FocusMonitor,
       private _changeDetectorRef: ChangeDetectorRef,
       @Inject(MAT_EXPANSION_PANEL_DEFAULT_OPTIONS) @Optional()
-          defaultOptions?: MatExpansionPanelDefaultOptions) {
+          defaultOptions?: MatExpansionPanelDefaultOptions,
+      @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
     const accordionHideToggleChange = panel.accordion ?
         panel.accordion._stateChanges.pipe(
             filter(changes => !!(changes['hideToggle'] || changes['togglePosition']))) :

tools/public_api_guard/material/expansion.d.ts

@@ -96,11 +96,12 @@ export declare class MatExpansionPanelDescription {
 }
 
 export declare class MatExpansionPanelHeader implements OnDestroy, FocusableOption {
+    _animationMode?: string | undefined;
     collapsedHeight: string;
     get disabled(): any;
     expandedHeight: string;
     panel: MatExpansionPanel;
-    constructor(panel: MatExpansionPanel, _element: ElementRef, _focusMonitor: FocusMonitor, _changeDetectorRef: ChangeDetectorRef, defaultOptions?: MatExpansionPanelDefaultOptions);
+    constructor(panel: MatExpansionPanel, _element: ElementRef, _focusMonitor: FocusMonitor, _changeDetectorRef: ChangeDetectorRef, defaultOptions?: MatExpansionPanelDefaultOptions, _animationMode?: string | undefined);
     _getExpandedState(): string;
     _getHeaderHeight(): string | null;
     _getPanelId(): string;
@@ -112,7 +113,7 @@ export declare class MatExpansionPanelHeader implements OnDestroy, FocusableOpti
     focus(origin?: FocusOrigin, options?: FocusOptions): void;
     ngOnDestroy(): void;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MatExpansionPanelHeader, "mat-expansion-panel-header", never, { "expandedHeight": "expandedHeight"; "collapsedHeight": "collapsedHeight"; }, {}, never, ["mat-panel-title", "mat-panel-description", "*"]>;
-    static ɵfac: i0.ɵɵFactoryDef<MatExpansionPanelHeader, [{ host: true; }, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDef<MatExpansionPanelHeader, [{ host: true; }, null, null, null, { optional: true; }, { optional: true; }]>;
 }
 
 export declare type MatExpansionPanelState = 'expanded' | 'collapsed';