From 8ec58324d1518737cdc8d44dc4e1a21c2db95d6a Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Sun, 6 Mar 2022 13:38:21 +0100
Subject: [PATCH] fix(multiple): don't block child component animations on open

Reworks several components that usually contain projected content not to block animations within that content. This prevents things like expansion panels from appearing as open.

These changes are identical to #13888 which had to be reverted in the past.

Fixes #13870.
---
 .../dialog/dialog-container.ts                | 28 +++++++++++++++++--
 .../bottom-sheet/bottom-sheet-animations.ts   | 13 +++++++--
 src/material/dialog/dialog-animations.ts      | 13 +++++++--
 3 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/src/cdk-experimental/dialog/dialog-container.ts b/src/cdk-experimental/dialog/dialog-container.ts
index aa7744418b8b..67443bff9318 100644
--- a/src/cdk-experimental/dialog/dialog-container.ts
+++ b/src/cdk-experimental/dialog/dialog-container.ts
@@ -6,7 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {animate, AnimationEvent, state, style, transition, trigger} from '@angular/animations';
+import {
+  animate,
+  animateChild,
+  AnimationEvent,
+  group,
+  query,
+  state,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations';
 import {FocusTrapFactory, InteractivityChecker} from '@angular/cdk/a11y';
 import {_getFocusedElementPierceShadowDom} from '@angular/cdk/platform';
 import {
@@ -55,8 +65,20 @@ export function throwDialogContentAlreadyAttachedError() {
     trigger('dialog', [
       state('enter', style({opacity: 1})),
       state('exit, void', style({opacity: 0})),
-      transition('* => enter', animate('{{enterAnimationDuration}}')),
-      transition('* => exit, * => void', animate('{{exitAnimationDuration}}')),
+      transition(
+        '* => enter',
+        group([
+          animate('{{enterAnimationDuration}}'),
+          query('@*', animateChild(), {optional: true}),
+        ]),
+      ),
+      transition(
+        '* => exit, * => void',
+        group([
+          animate('{{exitAnimationDuration}}'),
+          query('@*', animateChild(), {optional: true}),
+        ]),
+      ),
     ]),
   ],
   host: {
diff --git a/src/material/bottom-sheet/bottom-sheet-animations.ts b/src/material/bottom-sheet/bottom-sheet-animations.ts
index 7c6abbfd58c1..3931a96ab169 100644
--- a/src/material/bottom-sheet/bottom-sheet-animations.ts
+++ b/src/material/bottom-sheet/bottom-sheet-animations.ts
@@ -12,6 +12,9 @@ import {
   transition,
   trigger,
   AnimationTriggerMetadata,
+  group,
+  query,
+  animateChild,
 } from '@angular/animations';
 import {AnimationCurves, AnimationDurations} from '@angular/material/core';
 
@@ -25,11 +28,17 @@ export const matBottomSheetAnimations: {
     state('visible', style({transform: 'translateY(0%)'})),
     transition(
       'visible => void, visible => hidden',
-      animate(`${AnimationDurations.COMPLEX} ${AnimationCurves.ACCELERATION_CURVE}`),
+      group([
+        animate(`${AnimationDurations.COMPLEX} ${AnimationCurves.ACCELERATION_CURVE}`),
+        query('@*', animateChild(), {optional: true}),
+      ]),
     ),
     transition(
       'void => visible',
-      animate(`${AnimationDurations.EXITING} ${AnimationCurves.DECELERATION_CURVE}`),
+      group([
+        animate(`${AnimationDurations.EXITING} ${AnimationCurves.DECELERATION_CURVE}`),
+        query('@*', animateChild(), {optional: true}),
+      ]),
     ),
   ]),
 };
diff --git a/src/material/dialog/dialog-animations.ts b/src/material/dialog/dialog-animations.ts
index 8027a4c5bd51..815c140ef9aa 100644
--- a/src/material/dialog/dialog-animations.ts
+++ b/src/material/dialog/dialog-animations.ts
@@ -12,6 +12,9 @@ import {
   transition,
   trigger,
   AnimationTriggerMetadata,
+  query,
+  animateChild,
+  group,
 } from '@angular/animations';
 
 /**
@@ -30,11 +33,17 @@ export const matDialogAnimations: {
     state('enter', style({transform: 'none'})),
     transition(
       '* => enter',
-      animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({transform: 'none', opacity: 1})),
+      group([
+        animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({transform: 'none', opacity: 1})),
+        query('@*', animateChild(), {optional: true}),
+      ]),
     ),
     transition(
       '* => void, * => exit',
-      animate('75ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({opacity: 0})),
+      group([
+        animate('75ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({opacity: 0})),
+        query('@*', animateChild(), {optional: true}),
+      ]),
     ),
   ]),
 };