http://git-wip-us.apache.org/repos/asf/nifi-fds/blob/985298bd/node_modules/@angular/animations/@angular/animations.js
----------------------------------------------------------------------
diff --git a/node_modules/@angular/animations/@angular/animations.js
b/node_modules/@angular/animations/@angular/animations.js
deleted file mode 100644
index c2aa7cf..0000000
--- a/node_modules/@angular/animations/@angular/animations.js
+++ /dev/null
@@ -1,1301 +0,0 @@
-/**
- * @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
- */
-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"`.
- *
- * 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, 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
- * @param {?=} options
- * @return {?}
- */
-function state(name, styles, options) {
- return { type: 0 /* State */, name, styles, 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 };
-}
-/**
- * `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 = 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; }
- /**
- * @return {?}
- */
- beforeDestroy() {
- this.players.forEach(player => {
- if (player.beforeDestroy) {
- player.beforeDestroy();
- }
- });
- }
-}
-
-/**
- * @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
