fix leave-animation of select panel not working due to angular/angular#23302

Author: macjohnny

src/lib/select/select-animations.ts

@@ -8,7 +8,9 @@
 
 import {
   animate,
+  animateChild,
   AnimationTriggerMetadata,
+  query,
   state,
   style,
   transition,
@@ -22,9 +24,20 @@ import {
  * The values below match the implementation of the AngularJS Material mat-select animation.
  */
 export const matSelectAnimations: {
+  readonly transformPanelWrap: AnimationTriggerMetadata;
   readonly transformPanel: AnimationTriggerMetadata;
   readonly fadeInContent: AnimationTriggerMetadata;
 } = {
+  /**
+   * This animation ensures the select's overlay panel animation (transformPanel) is called when
+   * closing the select.
+   * This is needed due to https://github.com/angular/angular/issues/23302
+   */
+  transformPanelWrap: trigger('transformPanelWrap', [
+      transition('* => void', query('@transformPanel', [animateChild()],
+          {optional: true}))
+  ]),
+
   /**
    * This animation transforms the select's overlay panel on and off the page.
    *

src/lib/select/select.html

@@ -29,7 +29,7 @@
   (backdropClick)="close()"
   (attach)="_onAttached()"
   (detach)="close()">
-  <div class="mat-select-panel-wrap">
+  <div class="mat-select-panel-wrap" [@transformPanelWrap]>
     <div
       #panel
       class="mat-select-panel {{ _getPanelTheme() }}"

src/lib/select/select.ts

@@ -220,6 +220,7 @@ export class MatSelectTrigger {}
     '(blur)': '_onBlur()',
   },
   animations: [
+    matSelectAnimations.transformPanelWrap,
     matSelectAnimations.transformPanel
   ],
   providers: [