fix(animations): generate aot code for animation trigger output events (#12291)

Closes #11707
Closes #12291

modules/@angular/core/src/animation/animation_transition.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {AnimationPlayer} from './animation_player';
+import {AnimationTransitionEvent} from './animation_transition_event';
+
+export class AnimationTransition {
+  constructor(
+      private _player: AnimationPlayer, private _fromState: string, private _toState: string,
+      private _totalTime: number) {}
+
+  private _createEvent(phaseName: string): AnimationTransitionEvent {
+    return new AnimationTransitionEvent({
+      fromState: this._fromState,
+      toState: this._toState,
+      totalTime: this._totalTime,
+      phaseName: phaseName
+    });
+  }
+
+  onStart(callback: (event: AnimationTransitionEvent) => any): void {
+    const event = this._createEvent('start');
+    this._player.onStart(() => callback(event));
+  }
+
+  onDone(callback: (event: AnimationTransitionEvent) => any): void {
+    const event = this._createEvent('done');
+    this._player.onDone(() => callback(event));
+  }
+}

modules/@angular/core/src/animation/animation_transition_event.ts

@@ -41,11 +41,13 @@ export class AnimationTransitionEvent {
   public fromState: string;
   public toState: string;
   public totalTime: number;
+  public phaseName: string;
 
-  constructor({fromState, toState,
-               totalTime}: {fromState: string, toState: string, totalTime: number}) {
+  constructor({fromState, toState, totalTime, phaseName}:
+                  {fromState: string, toState: string, totalTime: number, phaseName: string}) {
     this.fromState = fromState;
     this.toState = toState;
     this.totalTime = totalTime;
+    this.phaseName = phaseName;
   }
 }

modules/@angular/core/src/core_private_export.ts

@@ -13,6 +13,7 @@ import {AnimationPlayer as AnimationPlayer_, NoOpAnimationPlayer as NoOpAnimatio
 import {AnimationSequencePlayer as AnimationSequencePlayer_} from './animation/animation_sequence_player';
 import * as animationUtils from './animation/animation_style_util';
 import {AnimationStyles as AnimationStyles_} from './animation/animation_styles';
+import {AnimationTransition} from './animation/animation_transition';
 import * as change_detection_util from './change_detection/change_detection_util';
 import * as constants from './change_detection/constants';
 import * as console from './console';
@@ -118,7 +119,8 @@ export var __core_private__: {
   FILL_STYLE_FLAG: typeof FILL_STYLE_FLAG_,
   _ComponentStillLoadingError?: ComponentStillLoadingError,
   ComponentStillLoadingError: typeof ComponentStillLoadingError,
-  isPromise: typeof isPromise
+  isPromise: typeof isPromise,
+  AnimationTransition: typeof AnimationTransition
 } = {
   isDefaultChangeDetectionStrategy: constants.isDefaultChangeDetectionStrategy,
   ChangeDetectorStatus: constants.ChangeDetectorStatus,
@@ -182,5 +184,6 @@ export var __core_private__: {
   EMPTY_STATE: EMPTY_STATE_,
   FILL_STYLE_FLAG: FILL_STYLE_FLAG_,
   ComponentStillLoadingError: ComponentStillLoadingError,
-  isPromise: isPromise
+  isPromise: isPromise,
+  AnimationTransition: AnimationTransition
 };

modules/@angular/core/src/linker/animation_view_context.ts

@@ -13,7 +13,6 @@ import {ViewAnimationMap} from '../animation/view_animation_map';
 
 export class AnimationViewContext {
   private _players = new ViewAnimationMap();
-  private _listeners = new Map<any, _AnimationOutputHandler[]>();
 
   onAllActiveAnimationsDone(callback: () => any): void {
     var activeAnimationPlayers = this._players.getAllPlayers();
@@ -26,19 +25,9 @@ export class AnimationViewContext {
     }
   }
 
-  queueAnimation(
-      element: any, animationName: string, player: AnimationPlayer,
-      event: AnimationTransitionEvent): void {
+  queueAnimation(element: any, animationName: string, player: AnimationPlayer): void {
     queueAnimationGlobally(player);
-
     this._players.set(element, animationName, player);
-    player.onDone(() => {
-      // TODO: add codegen to remove the need to store these values
-      this._triggerOutputHandler(element, animationName, 'done', event);
-      this._players.remove(element, animationName);
-    });
-
-    player.onStart(() => this._triggerOutputHandler(element, animationName, 'start', event));
   }
 
   cancelActiveAnimation(element: any, animationName: string, removeAllAnimations: boolean = false):
@@ -52,33 +41,4 @@ export class AnimationViewContext {
       }
     }
   }
-
-  registerOutputHandler(
-      element: any, eventName: string, eventPhase: string, eventHandler: Function): void {
-    var animations = this._listeners.get(element);
-    if (!animations) {
-      this._listeners.set(element, animations = []);
-    }
-    animations.push(new _AnimationOutputHandler(eventName, eventPhase, eventHandler));
-  }
-
-  private _triggerOutputHandler(
-      element: any, animationName: string, phase: string, event: AnimationTransitionEvent): void {
-    const listeners = this._listeners.get(element);
-    if (listeners && listeners.length) {
-      for (let i = 0; i < listeners.length; i++) {
-        let listener = listeners[i];
-        // we check for both the name in addition to the phase in the event
-        // that there may be more than one @trigger on the same element
-        if (listener.eventName === animationName && listener.eventPhase === phase) {
-          listener.handler(event);
-          break;
-        }
-      }
-    }
-  }
-}
-
-class _AnimationOutputHandler {
-  constructor(public eventName: string, public eventPhase: string, public handler: Function) {}
 }