text: /**
   * @license Angular v4.2.5
   * (c) 2010-2017 Google, Inc. https://angular.io/
   * License: MIT
   */
  /**
   * @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
   */
  /**
   * AnimationBuilder is an injectable service that is available when the {\@link
   * BrowserAnimationsModule BrowserAnimationsModule} or {\@link NoopAnimationsModule
   * NoopAnimationsModule} modules are used within an application.
   *
   * The purpose if this service is to produce an animation sequence programmatically within an
   * angular component or directive.
   *
   * Programmatic animations are first built and then a player is created when the build animation is
   * attached to an element.
   *
   * ```ts
   * // remember to include the BrowserAnimationsModule module for this to work...
   * import {AnimationBuilder} from '\@angular/animations';
   *
   * class MyCmp {
   *   constructor(private _builder: AnimationBuilder) {}
   *
   *   makeAnimation(element: any) {
   *     // first build the animation
   *     const myAnimation = this._builder.build([
   *       style({ width: 0 }),
   *       animate(1000, style({ width: '100px' }))
   *     ]);
   *
   *     // then create a player from it
   *     const player = myAnimation.create(element);
   *
   *     player.play();
   *   }
   * }
   * ```
   *
   * When an animation is built an instance of {\@link AnimationFactory AnimationFactory} will be
   * returned. Using that an {\@link AnimationPlayer AnimationPlayer} can be created which can then be
   * used to start the animation.
   *
   * \@experimental Animation support is experimental.
   * @abstract
   */
  class AnimationBuilder {
      /**
       * @abstract
       * @param {?} animation
       * @return {?}
       */
      build(animation) { }
  }
  /**
   * An instance of `AnimationFactory` is returned from {\@link AnimationBuilder#build
   * AnimationBuilder.build}.
   *
   * \@experimental Animation support is experimental.
   * @abstract
   */
  class AnimationFactory {
      /**
       * @abstract
       * @param {?} element
       * @param {?=} options
       * @return {?}
       */
      create(element, options) { }
  }
  
  /**
   * \@experimental Animation support is experimental.
   */
  const AUTO_STYLE = '*';
  /**
   * `trigger` is an animation-specific function that is designed to be used inside of Angular's
   * animation DSL language. If this information is new, please navigate to the {\@link
   * Component#animations component animations metadata page} to gain a better understanding of
   * how animations in Angular are used.
   *
   * `trigger` Creates an animation trigger which will a list of {\@link state state} and {\@link
   * transition transition} entries that will be evaluated when the expression bound to the trigger
   * changes.
   *
   * Triggers are registered within the component annotation data under the {\@link
   * Component#animations animations section}. An animation trigger can be placed on an element
   * within a template by referencing the name of the trigger followed by the expression value that the
   * trigger is bound to (in the form of `[\@triggerName]="expression"`.
   *
   * ### Usage
   *
   * `trigger` will create an animation trigger reference based on the provided `name` value. The
   * provided `animation` value is expected to be an array consisting of {\@link state state} and {\@link
   * transition transition} declarations.
   *
   * ```typescript
   * \@Component({
   *   selector: 'my-component',
   *   templateUrl: 'my-component-tpl.html',
   *   animations: [
   *     trigger("myAnimationTrigger", [
   *       state(...),
   *       state(...),
   *       transition(...),
   *       transition(...)
   *     ])
   *   ]
   * })
   * class MyComponent {
   *   myStatusExp = "something";
   * }
   * ```
   *
   * The template associated with this component will make use of the `myAnimationTrigger` animation
   * trigger by binding to an element within its template code.
   *
   * ```html
   * <!-- somewhere inside of my-component-tpl.html -->
   * <div [\@myAnimationTrigger]="myStatusExp">...</div>
   * tools/gulp-tasks/validate-commit-message.js ```
   *
   * {\@example core/animation/ts/dsl/animation_example.ts region='Component'}
   *
   * \@experimental Animation support is experimental.
   * @param {?} name
   * @param {?} definitions
   * @return {?}
   */
  function trigger(name, definitions) {
      return { type: 7 /* Trigger */, name, definitions, options: {} };
  }
  /**
   * `animate` is an animation-specific function that is designed to be used inside of Angular's
   * animation DSL language. If this information is new, please navigate to the {\@link
   * Component#animations component animations metadata page} to gain a better understanding of
   * how animations in Angular are used.
   *
   * `animate` specifies an animation step that will apply the provided `styles` data for a given
   * amount of time based on the provided `timing` expression value. Calls to `animate` are expected
   * to be used within {\@link sequence an animation sequence}, {\@link group group}, or {\@link
   * transition transition}.
   *
   * ### Usage
   *
   * The `animate` function accepts two input parameters: `timing` and `styles`:
   *
   * - `timing` is a string based value that can be a combination of a duration with optional delay
   * and easing values. The format for the expression breaks down to `duration delay easing`
   * (therefore a value such as `1s 100ms ease-out` will be parse itself into `duration=1000,
   * delay=100, easing=ease-out`. If a numeric value is provided then that will be used as the
   * `duration` value in millisecond form.
   * - `styles` is the style input data which can either be a call to {\@link style style} or {\@link
   * keyframes keyframes}. If left empty then the styles from the destination state will be collected
   * and used (this is useful when describing an animation step that will complete an animation by
   * {\@link transition#the-final-animate-call animating to the final state}).
   *
   * ```typescript
   * // various functions for specifying timing data
   * animate(500, style(...))
   * animate("1s", style(...))
   * animate("100ms 0.5s", style(...))
   * animate("5s ease", style(...))
   * animate("5s 10ms cubic-bezier(.17,.67,.88,.1)", style(...))
   *
   * // either style() of keyframes() can be used
   * animate(500, style({ background: "red" }))
   * animate(500, keyframes([
   *   style({ background: "blue" })),
   *   style({ background: "red" }))
   * ])
   * ```
   *
   * {\@example core/animation/ts/dsl/animation_example.ts region='Component'}
   *
   * \@experimental Animation support is experimental.
   * @param {?} timings
   * @param {?=} styles
   * @return {?}
   */
  function animate(timings, styles = null) {
      return { type: 4 /* Animate */, styles, timings };
  }
  /**
   * `group` is an animation-specific function that is designed to be used inside of Angular's
   * animation DSL language. If this information is new, please navigate to the {\@link
   * Component#animations component animations metadata page} to gain a better understanding of
   * how animations in Angular are used.
   *
   * `group` specifies a list of animation steps that are all run in parallel. Grouped animations are
   * useful when a series of styles must be animated/closed off at different starting/ending times.
   *
   * The `group` function can either be used within a {\@link sequence sequence} or a {\@link transition
   * transition} and it will only continue to the next instruction once all of the inner animation
   * steps have completed.
   *
   * ### Usage
   *
   * The `steps` data that is passed into the `group` animation function can either consist of {\@link
   * style style} or {\@link animate animate} function calls. Each call to `style()` or `animate()`
   * within a group will be executed instantly (use {\@link keyframes keyframes} or a {\@link
   * animate#usage animate() with a delay value} to offset styles to be applied at a later time).
   *
   * ```typescript
   * group([
   *   animate("1s", { background: "black" }))
   *   animate("2s", { color: "white" }))
   * ])
   * ```
   *
   * {\@example core/animation/ts/dsl/animation_example.ts region='Component'}
   *
   * \@experimental Animation support is experimental.
   * @param {?} steps
   * @param {?=} options
   * @return {?}
   */
  function group(steps, options = null) {
      return { type: 3 /* Group */, steps, options };
  }
  /**
   * `sequence` is an animation-specific function that is designed to be used inside of Angular's
   * animation DSL language. If this information is new, please navigate to the {\@link
   * Component#animations component animations metadata page} to gain a better understanding of
   * how animations in Angular are used.
   *
   * `sequence` Specifies a list of animation steps that are run one by one. (`sequence` is used by
   * default when an array is passed as animation data into {\@link transition transition}.)
   *
   * The `sequence` function can either be used within a {\@link group group} or a {\@link transition
   * transition} and it will only continue to the next instruction once each of the inner animation
   * steps have completed.
   *
   * To perform animation styling in parallel with other animation steps then have a look at the
   * {\@link group group} animation function.
   *
   * ### Usage
   *
   * The `steps` data that is passed into the `sequence` animation function can either consist of
   * {\@link style style} or {\@link animate animate} function calls. A call to `style()` will apply the
   * provided styling data immediately while a call to `animate()` will apply its styling data over a
   * given time depending on its timing data.
   *
   * ```typescript
   * sequence([
   *   style({ opacity: 0 })),
   *   animate("1s", { opacity: 1 }))
   * ])
   * ```
   *
   * {\@example core/animation/ts/dsl/animation_example.ts region='Component'}
   *
   * \@experimental Animation support is experimental.
   * @param {?} steps
   * @param {?=} options
   * @return {?}
   */
  function sequence(steps, options = null) {
      return { type: 2 /* Sequence */, steps, options };
  }
  /**
   * `style` is an animation-specific function that is designed to be used inside of Angular's
   * animation DSL language. If this information is new, please navigate to the {\@link
   * Component#animations component animations metadata page} to gain a better understanding of
   * how animations in Angular are used.
   *
   * `style` declares a key/value object containing CSS properties/styles that can then be used for
   * {\@link state animation states}, within an {\@link sequence animation sequence}, or as styling data
   * for both {\@link animate animate} and {\@link keyframes keyframes}.
   *
   * ### Usage
   *
   * `style` takes in a key/value string map as data and expects one or more CSS property/value pairs
   * to be defined.
   *
   * ```typescript
   * // string values are used for css properties
   * style({ background: "red", color: "blue" })
   *
   * // numerical (pixel) values are also supported
   * style({ width: 100, height: 0 })
   * ```
   *
   * #### Auto-styles (using `*`)
   *
   * When an asterix (`*`) character is used as a value then it will be detected from the element
   * being animated and applied as animation data when the animation starts.
   *
   * This feature proves useful for a state depending on layout and/or environment factors; in such
   * cases the styles are calculated just before the animation starts.
   *
   * ```typescript
   * // the steps below will animate from 0 to the
   * // actual height of the element
   * style({ height: 0 }),
   * animate("1s", style({ height: "*" }))
   * ```
   *
   * {\@example core/animation/ts/dsl/animation_example.ts region='Component'}
   *
   * \@experimental Animation support is experimental.
   * @param {?} tokens
   * @return {?}
   */
  function style(tokens) {
      return { type: 6 /* Style */, styles: tokens, offset: null };
  }
  /**
   * `state` is an animation-specific function that is designed to be used inside of Angular's
   * animation DSL language. If this information is new, please navigate to the {\@link
   * Component#animations component animations metadata page} to gain a better understanding of
   * how animations in Angular are used.
   *
   * `state` declares an animation state within the given trigger. When a state is active within a
   * component then its associated styles will persist on the element that the trigger is attached to
   * (even when the animation ends).
   *
   * To animate between states, have a look at the animation {\@link transition transition} DSL
   * function. To register states to an animation trigger please have a look at the {\@link trigger
   * trigger} function.
   *
   * #### The `void` state
   *
   * The `void` state value is a reserved word that angular uses to determine when the element is not
   * apart of the application anymore (e.g. when an `ngIf` evaluates to false then the state of the
   * associated element is void).
   *
   * #### The `*` (default) state
   *
   * The `*` state (when styled) is a fallback state that will be used if the state that is being
   * animated is not declared within the trigger.
   *
   * ### Usage
   *
   * `state` will declare an animation state with its associated styles
   * within the given trigger.
   *
   * - `stateNameExpr` can be one or more state names separated by commas.
   * - `styles` refers to the {\@link style styling data} that will be persisted on the element once
   * the state has been reached.
   *
   * ```typescript
   * // "void" is a reserved name for a state and is used to represent
   * // the state in which an element is detached from from the application.
   * state("void", style({ height: 0 }))
   *
   * // user-defined states
   * state("closed", style({ height: 0 }))
   * state("open, visible", style({ height: "*" }))
   * ```
   *
   * {\@example core/animation/ts/dsl/animation_example.ts region='Component'}
   *
   * \@experimental Animation support is experimental.
   * @param {?} name
   * @param {?} styles
   * @return {?}
   */
  function state(name, styles) {
      return { type: 0 /* State */, name, styles };
  }
  /**
   * `keyframes` is an animation-specific function that is designed to be used inside of Angular's
   * animation DSL language. If this information is new, please navigate to the {\@link
   * Component#animations component animations metadata page} to gain a better understanding of
   * how animations in Angular are used.
   *
   * `keyframes` specifies a collection of {\@link style style} entries each optionally characterized
   * by an `offset` value.
   *
   * ### Usage
   *
   * The `keyframes` animation function is designed to be used alongside the {\@link animate animate}
   * animation function. Instead of applying animations from where they are currently to their
   * destination, keyframes can describe how each style entry is applied and at what point within the
   * animation arc (much like CSS Keyframe Animations do).
   *
   * For each `style()` entry an `offset` value can be set. Doing so allows to specifiy at what
   * percentage of the animate time the styles will be applied.
   *
   * ```typescript
   * // the provided offset values describe when each backgroundColor value is applied.
   * animate("5s", keyframes([
   *   style({ backgroundColor: "red", offset: 0 }),
   *   style({ backgroundColor: "blue", offset: 0.2 }),
   *   style({ backgroundColor: "orange", offset: 0.3 }),
   *   style({ backgroundColor: "black", offset: 1 })
   * ]))
   * ```
   *
   * Alternatively, if there are no `offset` values used within the style entries then the offsets
   * will be calculated automatically.
   *
   * ```typescript
   * animate("5s", keyframes([
   *   style({ backgroundColor: "red" }) // offset = 0
   *   style({ backgroundColor: "blue" }) // offset = 0.33
   *   style({ backgroundColor: "orange" }) // offset = 0.66
   *   style({ backgroundColor: "black" }) // offset = 1
   * ]))
   * ```
   *
   * {\@example core/animation/ts/dsl/animation_example.ts region='Component'}
   *
   * \@experimental Animation support is experimental.
   * @param {?} steps
   * @return {?}
   */
  function keyframes(steps) {
      return { type: 5 /* Keyframes */, steps };
  }
  /**
   * `transition` is an animation-specific function that is designed to be used inside of Angular's
   * animation DSL language. If this information is new, please navigate to the {\@link
   * Component#animations component animations metadata page} to gain a better understanding of
   * how animations in Angular are used.
   *
   * `transition` declares the {\@link sequence sequence of animation steps} that will be run when the
   * provided `stateChangeExpr` value is satisfied. The `stateChangeExpr` consists of a `state1 =>
   * state2` which consists of two known states (use an asterix (`*`) to refer to a dynamic starting
   * and/or ending state).
   *
   * A function can also be provided as the `stateChangeExpr` argument for a transition and this
   * function will be executed each time a state change occurs. If the value returned within the
   * function is true then the associated animation will be run.
   *
   * Animation transitions are placed within an {\@link trigger animation trigger}. For an transition
   * to animate to a state value and persist its styles then one or more {\@link state animation
   * states} is expected to be defined.
   *
   * ### Usage
   *
   * An animation transition is kicked off the `stateChangeExpr` predicate evaluates to true based on
   * what the previous state is and what the current state has become. In other words, if a transition
   * is defined that matches the old/current state criteria then the associated animation will be
   * triggered.
   *
   * ```typescript
   * // all transition/state changes are defined within an animation trigger
   * trigger("myAnimationTrigger", [
   *   // if a state is defined then its styles will be persisted when the
   *   // animation has fully completed itself
   *   state("on", style({ background: "green" })),
   *   state("off", style({ background: "grey" })),
   *
   *   // a transition animation that will be kicked off when the state value
   *   // bound to "myAnimationTrigger" changes from "on" to "off"
   *   transition("on => off", animate(500)),
   *
   *   // it is also possible to do run the same animation for both directions
   *   transition("on <=> off", animate(500)),
   *
   *   // or to define multiple states pairs separated by commas
   *   transition("on => off, off => void", animate(500)),
   *
   *   // this is a catch-all state change for when an element is inserted into
   *   // the page and the destination state is unknown
   *   transition("void => *", [
   *     style({ opacity: 0 }),
   *     animate(500)
   *   ]),
   *
   *   // this will capture a state change between any states
   *   transition("* => *", animate("1s 0s")),
   *
   *   // you can also go full out and include a function
   *   transition((fromState, toState) => {
   *     // when `true` then it will allow the animation below to be invoked
   *     return fromState == "off" && toState == "on";
   *   }, animate("1s 0s"))
   * ])
   * ```
   *
   * The template associated with this component will make use of the `myAnimationTrigger` animation
   * trigger by binding to an element within its template code.
   *
   * ```html
   * <!-- somewhere inside of my-component-tpl.html -->
   * <div [\@myAnimationTrigger]="myStatusExp">...</div>
   * ```
   *
   * #### The final `animate` call
   *
   * If the final step within the transition steps is a call to `animate()` that **only** uses a
   * timing value with **no style data** then it will be automatically used as the final animation arc
   * for the element to animate itself to the final state. This involves an automatic mix of
   * adding/removing CSS styles so that the element will be in the exact state it should be for the
   * applied state to be presented correctly.
   *
   * ```
   * // start off by hiding the element, but make sure that it animates properly to whatever state
   * // is currently active for "myAnimationTrigger"
   * transition("void => *", [
   *   style({ opacity: 0 }),
   *   animate(500)
   * ])
   * ```
   *
   * ### Transition Aliases (`:enter` and `:leave`)
   *
   * Given that enter (insertion) and leave (removal) animations are so common, the `transition`
   * function accepts both `:enter` and `:leave` values which are aliases for the `void => *` and `*
   * => void` state changes.
   *
   * ```
   * transition(":enter", [
   *   style({ opacity: 0 }),
   *   animate(500, style({ opacity: 1 }))
   * ])
   * transition(":leave", [
   *   animate(500, style({ opacity: 0 }))
   * ])
   * ```
   *
   * {\@example core/animation/ts/dsl/animation_example.ts region='Component'}
   *
   * \@experimental Animation support is experimental.
   * @param {?} stateChangeExpr
   * @param {?} steps
   * @param {?=} options
   * @return {?}
   */
  function transition(stateChangeExpr, steps, options = null) {
      return { type: 1 /* Transition */, expr: stateChangeExpr, animation: steps, options };
  }
  /**
   * `animation` is an animation-specific function that is designed to be used inside of Angular's
   * animation DSL language.
   *
   * `var myAnimation = animation(...)` is designed to produce a reusable animation that can be later
   * invoked in another animation or sequence. Reusable animations are designed to make use of
   * animation parameters and the produced animation can be used via the `useAnimation` method.
   *
   * ```
   * var fadeAnimation = animation([
   *   style({ opacity: '{{ start }}' }),
   *   animate('{{ time }}',
   *     style({ opacity: '{{ end }}'))
   * ], { params: { time: '1000ms', start: 0, end: 1 }});
   * ```
   *
   * If parameters are attached to an animation then they act as **default parameter values**. When an
   * animation is invoked via `useAnimation` then parameter values are allowed to be passed in
   * directly. If any of the passed in parameter values are missing then the default values will be
   * used.
   *
   * ```
   * useAnimation(fadeAnimation, {
   *   params: {
   *     time: '2s',
   *     start: 1,
   *     end: 0
   *   }
   * })
   * ```
   *
   * If one or more parameter values are missing before animated then an error will be thrown.
   *
   * \@experimental Animation support is experimental.
   * @param {?} steps
   * @param {?=} options
   * @return {?}
   */
  function animation(steps, options = null) {
      return { type: 8 /* Reference */, animation: steps, options };
  }
  /**
   * `animateChild` is an animation-specific function that is designed to be used inside of Angular's
   * animation DSL language. It works by allowing a queried element to execute its own
   * animation within the animation sequence.
   *
   * Each time an animation is triggered in angular, the parent animation
   * will always get priority and any child animations will be blocked. In order
   * for a child animation to run, the parent animation must query each of the elements
   * containing child animations and then allow the animations to run using `animateChild`.
   *
   * The example HTML code below shows both parent and child elements that have animation
   * triggers that will execute at the same time.
   *
   * ```html
   * <!-- parent-child.component.html -->
   * <button (click)="exp =! exp">Toggle</button>
   * <hr>
   *
   * <div [\@parentAnimation]="exp">
   *   <header>Hello</header>
   *   <div [\@childAnimation]="exp">
   *       one
   *   </div>
   *   <div [\@childAnimation]="exp">
   *       two
   *   </div>
   *   <div [\@childAnimation]="exp">
   *       three
   *   </div>
   * </div>
   * ```
   *
   * Now when the `exp` value changes to true, only the `parentAnimation` animation will animate
   * because it has priority. However, using `query` and `animateChild` each of the inner animations
   * can also fire:
   *
   * ```ts
   * // parent-child.component.ts
   * import {trigger, transition, animate, style, query, animateChild} from '\@angular/animations';
   * \@Component({
   *   selector: 'parent-child-component',
   *   animations: [
   *     trigger('parentAnimation', [
   *       transition('false => true', [
   *         query('header', [
   *           style({ opacity: 0 }),
   *           animate(500, style({ opacity: 1 }))
   *         ]),
   *         query('\@childAnimation', [
   *           animateChild()
   *         ])
   *       ])
   *     ]),
   *     trigger('childAnimation', [
   *       transition('false => true', [
   *         style({ opacity: 0 }),
   *         animate(500, style({ opacity: 1 }))
   *       ])
   *     ])
   *   ]
   * })
   * class ParentChildCmp {
   *   exp: boolean = false;
   * }
   * ```
   *
   * In the animation code above, when the `parentAnimation` transition kicks off it first queries to
   * find the header element and fades it in. It then finds each of the sub elements that contain the
   * `\@childAnimation` trigger and then allows for their animations to fire.
   *
   * This example can be further extended by using stagger:
   *
   * ```ts
   * query('\@childAnimation', stagger(100, [
   *   animateChild()
   * ]))
   * ```
   *
   * Now each of the sub animations start off with respect to the `100ms` staggering step.
   *
   * ## The first frame of child animations
   * When sub animations are executed using `animateChild` the animation engine will always apply the
   * first frame of every sub animation immediately at the start of the animation sequence. This way
   * the parent animation does not need to set any initial styling data on the sub elements before the
   * sub animations kick off.
   *
   * In the example above the first frame of the `childAnimation`'s `false => true` transition
   * consists of a style of `opacity: 0`. This is applied immediately when the `parentAnimation`
   * animation transition sequence starts. Only then when the `\@childAnimation` is queried and called
   * with `animateChild` will it then animate to its destination of `opacity: 1`.
   *
   * Note that this feature designed to be used alongside {\@link query query()} and it will only work
   * with animations that are assigned using the Angular animation DSL (this means that CSS keyframes
   * and transitions are not handled by this API).
   *
   * \@experimental Animation support is experimental.
   * @param {?=} options
   * @return {?}
   */
  function animateChild(options = null) {
      return { type: 9 /* AnimateChild */, options };
  }
  /**
   * `useAnimation` is an animation-specific function that is designed to be used inside of Angular's
   * animation DSL language. It is used to kick off a reusable animation that is created using {\@link
   * animation animation()}.
   *
   * \@experimental Animation support is experimental.
   * @param {?} animation
   * @param {?=} options
   * @return {?}
   */
  function useAnimation(animation, options = null) {
      return { type: 10 /* AnimateRef */, animation, options };
  }
  /**
   * `query` is an animation-specific function that is designed to be used inside of Angular's
   * animation DSL language.
   *
   * query() is used to find one or more inner elements within the current element that is
   * being animated within the sequence. The provided animation steps are applied
   * to the queried element (by default, an array is provided, then this will be
   * treated as an animation sequence).
   *
   * ### Usage
   *
   * query() is designed to collect mutiple elements and works internally by using
   * `element.querySelectorAll`. An additional options object can be provided which
   * can be used to limit the total amount of items to be collected.
   *
   * ```js
   * query('div', [
   *   animate(...),
   *   animate(...)
   * ], { limit: 1 })
   * ```
   *
   * query(), by default, will throw an error when zero items are found. If a query
   * has the `optional` flag set to true then this error will be ignored.
   *
   * ```js
   * query('.some-element-that-may-not-be-there', [
   *   animate(...),
   *   animate(...)
   * ], { optional: true })
   * ```
   *
   * ### Special Selector Values
   *
   * The selector value within a query can collect elements that contain angular-specific
   * characteristics
   * using special pseudo-selectors tokens.
   *
   * These include:
   *
   *  - Querying for newly inserted/removed elements using `query(":enter")`/`query(":leave")`
   *  - Querying all currently animating elements using `query(":animating")`
   *  - Querying elements that contain an animation trigger using `query("\@triggerName")`
   *  - Querying all elements that contain an animation triggers using `query("\@*")`
   *  - Including the current element into the animation sequence using `query(":self")`
   *
   *
   *  Each of these pseudo-selector tokens can be merged together into a combined query selector
   * string:
   *
   *  ```
   *  query(':self, .record:enter, .record:leave, \@subTrigger', [...])
   *  ```
   *
   * ### Demo
   *
   * ```
   * \@Component({
   *   selector: 'inner',
   *   template: `
   *     <div [\@queryAnimation]="exp">
   *       <h1>Title</h1>
   *       <div class="content">
   *         Blah blah blah
   *       </div>
   *     </div>
   *   `,
   *   animations: [
   *    trigger('queryAnimation', [
   *      transition('* => goAnimate', [
   *        // hide the inner elements
   *        query('h1', style({ opacity: 0 })),
   *        query('.content', style({ opacity: 0 })),
   *
   *        // animate the inner elements in, one by one
   *        query('h1', animate(1000, style({ opacity: 1 })),
   *        query('.content', animate(1000, style({ opacity: 1 })),
   *      ])
   *    ])
   *  ]
   * })
   * class Cmp {
   *   exp = '';
   *
   *   goAnimate() {
   *     this.exp = 'goAnimate';
   *   }
   * }
   * ```
   *
   * \@experimental Animation support is experimental.
   * @param {?} selector
   * @param {?} animation
   * @param {?=} options
   * @return {?}
   */
  function query(selector, animation, options = null) {
      return { type: 11 /* Query */, selector, animation, options };
  }
  /**
   * `stagger` is an animation-specific function that is designed to be used inside of Angular's
   * animation DSL language. It is designed to be used inside of an animation {\@link query query()}
   * and works by issuing a timing gap between after each queried item is animated.
   *
   * ### Usage
   *
   * In the example below there is a container element that wraps a list of items stamped out
   * by an ngFor. The container element contains an animation trigger that will later be set
   * to query for each of the inner items.
   *
   * ```html
   * <!-- list.component.html -->
   * <button (click)="toggle()">Show / Hide Items</button>
   * <hr />
   * <div [\@listAnimation]="items.length">
   *   <div *ngFor="let item of items">
   *     {{ item }}
   *   </div>
   * </div>
   * ```
   *
   * The component code for this looks as such:
   *
   * ```ts
   * import {trigger, transition, style, animate, query, stagger} from '\@angular/animations';
   * \@Component({
   *   templateUrl: 'list.component.html',
   *   animations: [
   *     trigger('listAnimation', [
   *        //...
   *     ])
   *   ]
   * })
   * class ListComponent {
   *   items = [];
   *
   *   showItems() {
   *     this.items = [0,1,2,3,4];
   *   }
   *
   *   hideItems() {
   *     this.items = [];
   *   }
   *
   *   toggle() {
   *     this.items.length ? this.hideItems() : this.showItems();
   *   }
   * }
   * ```
   *
   * And now for the animation trigger code:
   *
   * ```ts
   * trigger('listAnimation', [
   *   transition('* => *', [ // each time the binding value changes
   *     query(':leave', [
   *       stagger(100, [
   *         animate('0.5s', style({ opacity: 0 }))
   *       ])
   *     ]),
   *     query(':enter', [
   *       style({ opacity: 0 }),
   *       stagger(100, [
   *         animate('0.5s', style({ opacity: 1 }))
   *       ])
   *     ])
   *   ])
   * ])
   * ```
   *
   * Now each time the items are added/removed then either the opacity
   * fade-in animation will run or each removed item will be faded out.
   * When either of these animations occur then a stagger effect will be
   * applied after each item's animation is started.
   *
   * \@experimental Animation support is experimental.
   * @param {?} timings
   * @param {?} animation
   * @return {?}
   */
  function stagger(timings, animation) {
      return { type: 12 /* Stagger */, timings, animation };
  }
  
  /**
   * @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
   * @param {?} cb
   * @return {?}
   */
  function scheduleMicroTask(cb) {
      Promise.resolve(null).then(cb);
  }
  
  /**
   * @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
   */
  /**
   * \@experimental Animation support is experimental.
   */
  class NoopAnimationPlayer {
      constructor() {
          this._onDoneFns = [];
          this._onStartFns = [];
          this._onDestroyFns = [];
          this._started = false;
          this._destroyed = false;
          this._finished = false;
          this.parentPlayer = null;
          this.totalTime = 0;
      }
      /**
       * @return {?}
       */
      _onFinish() {
          if (!this._finished) {
              this._finished = true;
              this._onDoneFns.forEach(fn => fn());
              this._onDoneFns = [];
          }
      }
      /**
       * @param {?} fn
       * @return {?}
       */
      onStart(fn) { this._onStartFns.push(fn); }
      /**
       * @param {?} fn
       * @return {?}
       */
      onDone(fn) { this._onDoneFns.push(fn); }
      /**
       * @param {?} fn
       * @return {?}
       */
      onDestroy(fn) { this._onDestroyFns.push(fn); }
      /**
       * @return {?}
       */
      hasStarted() { return this._started; }
      /**
       * @return {?}
       */
      init() { }
      /**
       * @return {?}
       */
      play() {
          if (!this.hasStarted()) {
              this.triggerMicrotask();
              this._onStart();
          }
          this._started = true;
      }
      /**
       * @return {?}
       */
      triggerMicrotask() { scheduleMicroTask(() => this._onFinish()); }
      /**
       * @return {?}
       */
      _onStart() {
          this._onStartFns.forEach(fn => fn());
          this._onStartFns = [];
      }
      /**
       * @return {?}
       */
      pause() { }
      /**
       * @return {?}
       */
      restart() { }
      /**
       * @return {?}
       */
      finish() { this._onFinish(); }
      /**
       * @return {?}
       */
      destroy() {
          if (!this._destroyed) {
              this._destroyed = true;
              if (!this.hasStarted()) {
                  this._onStart();
              }
              this.finish();
              this._onDestroyFns.forEach(fn => fn());
              this._onDestroyFns = [];
          }
      }
      /**
       * @return {?}
       */
      reset() { }
      /**
       * @param {?} p
       * @return {?}
       */
      setPosition(p) { }
      /**
       * @return {?}
       */
      getPosition() { return 0; }
  }
  
  /**
   * @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
   */
  class AnimationGroupPlayer {
      /**
       * @param {?} _players
       */
      constructor(_players) {
          this._players = _players;
          this._onDoneFns = [];
          this._onStartFns = [];
          this._finished = false;
          this._started = false;
          this._destroyed = false;
          this._onDestroyFns = [];
          this.parentPlayer = null;
          this.totalTime = 0;
          let doneCount = 0;
          let destroyCount = 0;
          let startCount = 0;
          const total = this._players.length;
          if (total == 0) {
              scheduleMicroTask(() => this._onFinish());
          }
          else {
              this._players.forEach(player => {
                  player.parentPlayer = this;
                  player.onDone(() => {
                      if (++doneCount >= total) {
                          this._onFinish();
                      }
                  });
                  player.onDestroy(() => {
                      if (++destroyCount >= total) {
                          this._onDestroy();
                      }
                  });
                  player.onStart(() => {
                      if (++startCount >= total) {
                          this._onStart();
                      }
                  });
              });
          }
          this.totalTime = this._players.reduce((time, player) => Math.max(time, player.totalTime), 0);
      }
      /**
       * @return {?}
       */
      _onFinish() {
          if (!this._finished) {
              this._finished = true;
              this._onDoneFns.forEach(fn => fn());
              this._onDoneFns = [];
          }
      }
      /**
       * @return {?}
       */
      init() { this._players.forEach(player => player.init()); }
      /**
       * @param {?} fn
       * @return {?}
       */
      onStart(fn) { this._onStartFns.push(fn); }
      /**
       * @return {?}
       */
      _onStart() {
          if (!this.hasStarted()) {
              this._onStartFns.forEach(fn => fn());
              this._onStartFns = [];
              this._started = true;
          }
      }
      /**
       * @param {?} fn
       * @return {?}
       */
      onDone(fn) { this._onDoneFns.push(fn); }
      /**
       * @param {?} fn
       * @return {?}
       */
      onDestroy(fn) { this._onDestroyFns.push(fn); }
      /**
       * @return {?}
       */
      hasStarted() { return this._started; }
      /**
       * @return {?}
       */
      play() {
          if (!this.parentPlayer) {
              this.init();
          }
          this._onStart();
          this._players.forEach(player => player.play());
      }
      /**
       * @return {?}
       */
      pause() { this._players.forEach(player => player.pause()); }
      /**
       * @return {?}
       */
      restart() { this._players.forEach(player => player.restart()); }
      /**
       * @return {?}
       */
      finish() {
          this._onFinish();
          this._players.forEach(player => player.finish());
      }
      /**
       * @return {?}
       */
      destroy() { this._onDestroy(); }
      /**
       * @return {?}
       */
      _onDestroy() {
          if (!this._destroyed) {
              this._destroyed = true;
              this._onFinish();
              this._players.forEach(player => player.destroy());
              this._onDestroyFns.forEach(fn => fn());
              this._onDestroyFns = [];
          }
      }
      /**
       * @return {?}
       */
      reset() {
          this._players.forEach(player => player.reset());
          this._destroyed = false;
          this._finished = false;
          this._started = false;
      }
      /**
       * @param {?} p
       * @return {?}
       */
      setPosition(p) {
          const /** @type {?} */ timeAtPosition = p * this.totalTime;
          this._players.forEach(player => {
              const /** @type {?} */ position = player.totalTime ? Math.min(1, timeAtPosition / player.totalTime) : 1;
              player.setPosition(position);
          });
      }
      /**
       * @return {?}
       */
      getPosition() {
          let /** @type {?} */ min = 0;
          this._players.forEach(player => {
              const /** @type {?} */ p = player.getPosition();
              min = Math.min(p, min);
          });
          return min;
      }
      /**
       * @return {?}
       */
      get players() { return this._players; }
  }
  
  /**
   * @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
   */
  const ɵPRE_STYLE = '!';
  
  /**
   * @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
   */
  /**
   * @module
   * @description
   * Entry point for all animation APIs of the animation package.
   */
  
  /**
   * @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
   */
  /**
   * @module
   * @description
   * Entry point for all public APIs of the animation package.
   */
  
  /**
   * Generated bundle index. Do not edit.
   */
  
  export { AnimationBuilder, AnimationFactory, AUTO_STYLE, animate, animateChild, animation, group, keyframes, query, sequence, stagger, state, style, transition, trigger, useAnimation, NoopAnimationPlayer, AnimationGroupPlayer as ɵAnimationGroupPlayer, ɵPRE_STYLE };
  //# sourceMappingURL=animations.js.map
  