You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@nifi.apache.org by sc...@apache.org on 2018/04/30 19:32:15 UTC
[34/51] [partial] nifi-fds git commit: update gh-pages
http://git-wip-us.apache.org/repos/asf/nifi-fds/blob/4a326208/node_modules/@angular/animations/bundles/animations.umd.js
----------------------------------------------------------------------
diff --git a/node_modules/@angular/animations/bundles/animations.umd.js b/node_modules/@angular/animations/bundles/animations.umd.js
new file mode 100644
index 0000000..57b33f8
--- /dev/null
+++ b/node_modules/@angular/animations/bundles/animations.umd.js
@@ -0,0 +1,1323 @@
+/**
+ * @license Angular v4.4.6
+ * (c) 2010-2017 Google, Inc. https://angular.io/
+ * License: MIT
+ */
+(function (global, factory) {
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+ typeof define === 'function' && define.amd ? define(['exports'], factory) :
+ (factory((global.ng = global.ng || {}, global.ng.animations = global.ng.animations || {})));
+}(this, (function (exports) { 'use strict';
+
+/**
+ * @license Angular v4.4.6
+ * (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
+ */
+var AnimationBuilder = (function () {
+ function AnimationBuilder() {
+ }
+ /**
+ * @abstract
+ * @param {?} animation
+ * @return {?}
+ */
+ AnimationBuilder.prototype.build = function (animation) { };
+ return AnimationBuilder;
+}());
+/**
+ * An instance of `AnimationFactory` is returned from {\@link AnimationBuilder#build
+ * AnimationBuilder.build}.
+ *
+ * \@experimental Animation support is experimental.
+ * @abstract
+ */
+var AnimationFactory = (function () {
+ function AnimationFactory() {
+ }
+ /**
+ * @abstract
+ * @param {?} element
+ * @param {?=} options
+ * @return {?}
+ */
+ AnimationFactory.prototype.create = function (element, options) { };
+ return AnimationFactory;
+}());
+/**
+ * \@experimental Animation support is experimental.
+ */
+var 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"`.
+ *
+ * Animation trigger bindings strigify values and then match the previous and current values against
+ * any linked transitions. If a boolean value is provided into the trigger binding then it will both
+ * be represented as `1` or `true` and `0` or `false` for a true and false boolean values
+ * respectively.
+ *
+ * ### 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>
+ * ```
+ *
+ * ## Disable Animations
+ * A special animation control binding called `\@.disabled` can be placed on an element which will
+ * then disable animations for any inner animation triggers situated within the element as well as
+ * any animations on the element itself.
+ *
+ * When true, the `\@.disabled` binding will prevent all animations from rendering. The example
+ * below shows how to use this feature:
+ *
+ * ```ts
+ * \@Component({
+ * selector: 'my-component',
+ * template: `
+ * <div [\@.disabled]="isDisabled">
+ * <div [\@childAnimation]="exp"></div>
+ * </div>
+ * `,
+ * animations: [
+ * trigger("childAnimation", [
+ * // ...
+ * ])
+ * ]
+ * })
+ * class MyComponent {
+ * isDisabled = true;
+ * exp = '...';
+ * }
+ * ```
+ *
+ * The `\@childAnimation` trigger will not animate because `\@.disabled` prevents it from happening
+ * (when true).
+ *
+ * Note that `\@.disbled` will only disable all animations (this means any animations running on
+ * the same element will also be disabled).
+ *
+ * ### Disabling Animations Application-wide
+ * When an area of the template is set to have animations disabled, **all** inner components will
+ * also have their animations disabled as well. This means that all animations for an angular
+ * application can be disabled by placing a host binding set on `\@.disabled` on the topmost Angular
+ * component.
+ *
+ * ```ts
+ * import {Component, HostBinding} from '\@angular/core';
+ *
+ * \@Component({
+ * selector: 'app-component',
+ * templateUrl: 'app.component.html',
+ * })
+ * class AppComponent {
+ * \@HostBinding('\@.disabled')
+ * public animationsDisabled = true;
+ * }
+ * ```
+ *
+ * ### What about animations that us `query()` and `animateChild()`?
+ * Despite inner animations being disabled, a parent animation can {\@link query query} for inner
+ * elements located in disabled areas of the template and still animate them as it sees fit. This is
+ * also the case for when a sub animation is queried by a parent and then later animated using {\@link
+ * animateChild animateChild}.
+ *
+ * \@experimental Animation support is experimental.
+ * @param {?} name
+ * @param {?} definitions
+ * @return {?}
+ */
+function trigger(name, definitions) {
+ return { type: 7 /* Trigger */, name: name, definitions: 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) {
+ if (styles === void 0) { styles = null; }
+ return { type: 4 /* Animate */, styles: styles, timings: 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) {
+ if (options === void 0) { options = null; }
+ return { type: 3 /* Group */, steps: steps, options: 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) {
+ if (options === void 0) { options = null; }
+ return { type: 2 /* Sequence */, steps: steps, options: 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
+ * @param {?=} options
+ * @return {?}
+ */
+function state(name, styles, options) {
+ return { type: 0 /* State */, name: name, styles: styles, options: options };
+}
+/**
+ * `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: 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 }))
+ * ])
+ * ```
+ *
+ * ### Boolean values
+ * if a trigger binding value is a boolean value then it can be matched using a transition
+ * expression that compares `true` and `false` or `1` and `0`.
+ *
+ * ```
+ * // in the template
+ * <div [\@openClose]="open ? true : false">...</div>
+ *
+ * // in the component metadata
+ * trigger('openClose', [
+ * state('true', style({ height: '*' })),
+ * state('false', style({ height: '0px' })),
+ * transition('false <=> true', animate(500))
+ * ])
+ * ```
+ * {\@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) {
+ if (options === void 0) { options = null; }
+ return { type: 1 /* Transition */, expr: stateChangeExpr, animation: steps, options: 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) {
+ if (options === void 0) { options = null; }
+ return { type: 8 /* Reference */, animation: steps, options: 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) {
+ if (options === void 0) { options = null; }
+ return { type: 9 /* AnimateChild */, options: 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) {
+ if (options === void 0) { options = null; }
+ return { type: 10 /* AnimateRef */, animation: animation, options: 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) {
+ if (options === void 0) { options = null; }
+ return { type: 11 /* Query */, selector: selector, animation: animation, options: 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: timings, animation: 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.
+ */
+var NoopAnimationPlayer = (function () {
+ function NoopAnimationPlayer() {
+ this._onDoneFns = [];
+ this._onStartFns = [];
+ this._onDestroyFns = [];
+ this._started = false;
+ this._destroyed = false;
+ this._finished = false;
+ this.parentPlayer = null;
+ this.totalTime = 0;
+ }
+ /**
+ * @return {?}
+ */
+ NoopAnimationPlayer.prototype._onFinish = function () {
+ if (!this._finished) {
+ this._finished = true;
+ this._onDoneFns.forEach(function (fn) { return fn(); });
+ this._onDoneFns = [];
+ }
+ };
+ /**
+ * @param {?} fn
+ * @return {?}
+ */
+ NoopAnimationPlayer.prototype.onStart = function (fn) { this._onStartFns.push(fn); };
+ /**
+ * @param {?} fn
+ * @return {?}
+ */
+ NoopAnimationPlayer.prototype.onDone = function (fn) { this._onDoneFns.push(fn); };
+ /**
+ * @param {?} fn
+ * @return {?}
+ */
+ NoopAnimationPlayer.prototype.onDestroy = function (fn) { this._onDestroyFns.push(fn); };
+ /**
+ * @return {?}
+ */
+ NoopAnimationPlayer.prototype.hasStarted = function () { return this._started; };
+ /**
+ * @return {?}
+ */
+ NoopAnimationPlayer.prototype.init = function () { };
+ /**
+ * @return {?}
+ */
+ NoopAnimationPlayer.prototype.play = function () {
+ if (!this.hasStarted()) {
+ this.triggerMicrotask();
+ this._onStart();
+ }
+ this._started = true;
+ };
+ /**
+ * @return {?}
+ */
+ NoopAnimationPlayer.prototype.triggerMicrotask = function () {
+ var _this = this;
+ scheduleMicroTask(function () { return _this._onFinish(); });
+ };
+ /**
+ * @return {?}
+ */
+ NoopAnimationPlayer.prototype._onStart = function () {
+ this._onStartFns.forEach(function (fn) { return fn(); });
+ this._onStartFns = [];
+ };
+ /**
+ * @return {?}
+ */
+ NoopAnimationPlayer.prototype.pause = function () { };
+ /**
+ * @return {?}
+ */
+ NoopAnimationPlayer.prototype.restart = function () { };
+ /**
+ * @return {?}
+ */
+ NoopAnimationPlayer.prototype.finish = function () { this._onFinish(); };
+ /**
+ * @return {?}
+ */
+ NoopAnimationPlayer.prototype.destroy = function () {
+ if (!this._destroyed) {
+ this._destroyed = true;
+ if (!this.hasStarted()) {
+ this._onStart();
+ }
+ this.finish();
+ this._onDestroyFns.forEach(function (fn) { return fn(); });
+ this._onDestroyFns = [];
+ }
+ };
+ /**
+ * @return {?}
+ */
+ NoopAnimationPlayer.prototype.reset = function () { };
+ /**
+ * @param {?} p
+ * @return {?}
+ */
+ NoopAnimationPlayer.prototype.setPosition = function (p) { };
+ /**
+ * @return {?}
+ */
+ NoopAnimationPlayer.prototype.getPosition = function () { return 0; };
+ return NoopAnimationPlayer;
+}());
+/**
+ * @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
+ */
+var AnimationGroupPlayer = (function () {
+ /**
+ * @param {?} _players
+ */
+ function AnimationGroupPlayer(_players) {
+ var _this = this;
+ this._players = _players;
+ this._onDoneFns = [];
+ this._onStartFns = [];
+ this._finished = false;
+ this._started = false;
+ this._destroyed = false;
+ this._onDestroyFns = [];
+ this.parentPlayer = null;
+ this.totalTime = 0;
+ var doneCount = 0;
+ var destroyCount = 0;
+ var startCount = 0;
+ var total = this._players.length;
+ if (total == 0) {
+ scheduleMicroTask(function () { return _this._onFinish(); });
+ }
+ else {
+ this._players.forEach(function (player) {
+ player.parentPlayer = _this;
+ player.onDone(function () {
+ if (++doneCount >= total) {
+ _this._onFinish();
+ }
+ });
+ player.onDestroy(function () {
+ if (++destroyCount >= total) {
+ _this._onDestroy();
+ }
+ });
+ player.onStart(function () {
+ if (++startCount >= total) {
+ _this._onStart();
+ }
+ });
+ });
+ }
+ this.totalTime = this._players.reduce(function (time, player) { return Math.max(time, player.totalTime); }, 0);
+ }
+ /**
+ * @return {?}
+ */
+ AnimationGroupPlayer.prototype._onFinish = function () {
+ if (!this._finished) {
+ this._finished = true;
+ this._onDoneFns.forEach(function (fn) { return fn(); });
+ this._onDoneFns = [];
+ }
+ };
+ /**
+ * @return {?}
+ */
+ AnimationGroupPlayer.prototype.init = function () { this._players.forEach(function (player) { return player.init(); }); };
+ /**
+ * @param {?} fn
+ * @return {?}
+ */
+ AnimationGroupPlayer.prototype.onStart = function (fn) { this._onStartFns.push(fn); };
+ /**
+ * @return {?}
+ */
+ AnimationGroupPlayer.prototype._onStart = function () {
+ if (!this.hasStarted()) {
+ this._onStartFns.forEach(function (fn) { return fn(); });
+ this._onStartFns = [];
+ this._started = true;
+ }
+ };
+ /**
+ * @param {?} fn
+ * @return {?}
+ */
+ AnimationGroupPlayer.prototype.onDone = function (fn) { this._onDoneFns.push(fn); };
+ /**
+ * @param {?} fn
+ * @return {?}
+ */
+ AnimationGroupPlayer.prototype.onDestroy = function (fn) { this._onDestroyFns.push(fn); };
+ /**
+ * @return {?}
+ */
+ AnimationGroupPlayer.prototype.hasStarted = function () { return this._started; };
+ /**
+ * @return {?}
+ */
+ AnimationGroupPlayer.prototype.play = function () {
+ if (!this.parentPlayer) {
+ this.init();
+ }
+ this._onStart();
+ this._players.forEach(function (player) { return player.play(); });
+ };
+ /**
+ * @return {?}
+ */
+ AnimationGroupPlayer.prototype.pause = function () { this._players.forEach(function (player) { return player.pause(); }); };
+ /**
+ * @return {?}
+ */
+ AnimationGroupPlayer.prototype.restart = function () { this._players.forEach(function (player) { return player.restart(); }); };
+ /**
+ * @return {?}
+ */
+ AnimationGroupPlayer.prototype.finish = function () {
+ this._onFinish();
+ this._players.forEach(function (player) { return player.finish(); });
+ };
+ /**
+ * @return {?}
+ */
+ AnimationGroupPlayer.prototype.destroy = function () { this._onDestroy(); };
+ /**
+ * @return {?}
+ */
+ AnimationGroupPlayer.prototype._onDestroy = function () {
+ if (!this._destroyed) {
+ this._destroyed = true;
+ this._onFinish();
+ this._players.forEach(function (player) { return player.destroy(); });
+ this._onDestroyFns.forEach(function (fn) { return fn(); });
+ this._onDestroyFns = [];
+ }
+ };
+ /**
+ * @return {?}
+ */
+ AnimationGroupPlayer.prototype.reset = function () {
+ this._players.forEach(function (player) { return player.reset(); });
+ this._destroyed = false;
+ this._finished = false;
+ this._started = false;
+ };
+ /**
+ * @param {?} p
+ * @return {?}
+ */
+ AnimationGroupPlayer.prototype.setPosition = function (p) {
+ var /** @type {?} */ timeAtPosition = p * this.totalTime;
+ this._players.forEach(function (player) {
+ var /** @type {?} */ position = player.totalTime ? Math.min(1, timeAtPosition / player.totalTime) : 1;
+ player.setPosition(position);
+ });
+ };
+ /**
+ * @return {?}
+ */
+ AnimationGroupPlayer.prototype.getPosition = function () {
+ var /** @type {?} */ min = 0;
+ this._players.forEach(function (player) {
+ var /** @type {?} */ p = player.getPosition();
+ min = Math.min(p, min);
+ });
+ return min;
+ };
+ Object.defineProperty(AnimationGroupPlayer.prototype, "players", {
+ /**
+ * @return {?}
+ */
+ get: function () { return this._players; },
+ enumerable: true,
+ configurable: true
+ });
+ /**
+ * @return {?}
+ */
+ AnimationGroupPlayer.prototype.beforeDestroy = function () {
+ this.players.forEach(function (player) {
+ if (player.beforeDestroy) {
+ player.beforeDestroy();
+ }
+ });
+ };
+ return AnimationGroupPlayer;
+}());
+/**
+ * @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
+ */
+var ɵPRE_STYLE = '!';
+
+exports.AnimationBuilder = AnimationBuilder;
+exports.AnimationFactory = AnimationFactory;
+exports.AUTO_STYLE = AUTO_STYLE;
+exports.animate = animate;
+exports.animateChild = animateChild;
+exports.animation = animation;
+exports.group = group;
+exports.keyframes = keyframes;
+exports.query = query;
+exports.sequence = sequence;
+exports.stagger = stagger;
+exports.state = state;
+exports.style = style;
+exports.transition = transition;
+exports.trigger = trigger;
+exports.useAnimation = useAnimation;
+exports.NoopAnimationPlayer = NoopAnimationPlayer;
+exports.ɵAnimationGroupPlayer = AnimationGroupPlayer;
+exports.ɵPRE_STYLE = ɵPRE_STYLE;
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+//# sourceMappingURL=animations.umd.js.map