Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@angular/animations

Package Overview
Dependencies
Maintainers
1
Versions
794
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@angular/animations - npm Package Compare versions

Comparing version 4.2.0-beta.1 to 4.2.0-rc.0

browser/src/dsl/animation_ast_builder.d.ts
browser/src/dsl/animation_ast.d.ts
browser/src/dsl/animation_timeline_builder.d.ts
browser/src/dsl/element_instruction_map.d.ts
browser/src/dsl/style_normalization/animation_style_normalizer.metadata.json
browser/src/render/animation_engine_next.d.ts
browser/src/render/shared.d.ts
browser/src/render/shared.metadata.json
browser/src/render/timeline_animation_engine.d.ts
browser/src/render/transition_animation_engine.d.ts
src/animation_builder.d.ts

604

@angular/animations.es5.js
/**
* @license Angular v4.2.0-beta.1
* @license Angular v4.2.0-rc.0
* (c) 2010-2017 Google, Inc. https://angular.io/

@@ -7,4 +7,81 @@ * 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 = '*';

@@ -66,3 +143,3 @@ /**

function trigger(name, definitions) {
return { name: name, definitions: definitions };
return { type: 7 /* Trigger */, name: name, definitions: definitions, options: {} };
}

@@ -152,6 +229,8 @@ /**

* @param {?} steps
* @param {?=} options
* @return {?}
*/
function group(steps) {
return { type: 3 /* Group */, steps: steps };
function group(steps, options) {
if (options === void 0) { options = null; }
return { type: 3 /* Group */, steps: steps, options: options };
}

@@ -192,6 +271,8 @@ /**

* @param {?} steps
* @param {?=} options
* @return {?}
*/
function sequence(steps) {
return { type: 2 /* Sequence */, steps: steps };
function sequence(steps, options) {
if (options === void 0) { options = null; }
return { type: 2 /* Sequence */, steps: steps, options: options };
}

@@ -243,3 +324,3 @@ /**

function style(tokens) {
return { type: 6 /* Style */, styles: tokens };
return { type: 6 /* Style */, styles: tokens, offset: null };
}

@@ -348,3 +429,3 @@ /**

function keyframes(steps) {
return { type: 5 /* KeyframeSequence */, steps: steps };
return { type: 5 /* Keyframes */, steps: steps };
}

@@ -459,8 +540,353 @@ /**

* @param {?} steps
* @param {?=} options
* @return {?}
*/
function transition(stateChangeExpr, steps) {
return { type: 1 /* Transition */, expr: stateChangeExpr, animation: steps };
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

@@ -486,94 +912,3 @@ * Copyright Google Inc. All Rights Reserved.

* \@experimental Animation support is experimental.
* @abstract
*/
var AnimationPlayer = (function () {
function AnimationPlayer() {
}
/**
* @abstract
* @param {?} fn
* @return {?}
*/
AnimationPlayer.prototype.onDone = function (fn) { };
/**
* @abstract
* @param {?} fn
* @return {?}
*/
AnimationPlayer.prototype.onStart = function (fn) { };
/**
* @abstract
* @param {?} fn
* @return {?}
*/
AnimationPlayer.prototype.onDestroy = function (fn) { };
/**
* @abstract
* @return {?}
*/
AnimationPlayer.prototype.init = function () { };
/**
* @abstract
* @return {?}
*/
AnimationPlayer.prototype.hasStarted = function () { };
/**
* @abstract
* @return {?}
*/
AnimationPlayer.prototype.play = function () { };
/**
* @abstract
* @return {?}
*/
AnimationPlayer.prototype.pause = function () { };
/**
* @abstract
* @return {?}
*/
AnimationPlayer.prototype.restart = function () { };
/**
* @abstract
* @return {?}
*/
AnimationPlayer.prototype.finish = function () { };
/**
* @abstract
* @return {?}
*/
AnimationPlayer.prototype.destroy = function () { };
/**
* @abstract
* @return {?}
*/
AnimationPlayer.prototype.reset = function () { };
/**
* @abstract
* @param {?} p
* @return {?}
*/
AnimationPlayer.prototype.setPosition = function (p) { };
/**
* @abstract
* @return {?}
*/
AnimationPlayer.prototype.getPosition = function () { };
Object.defineProperty(AnimationPlayer.prototype, "parentPlayer", {
/**
* @return {?}
*/
get: function () { throw new Error('NOT IMPLEMENTED: Base Class'); },
/**
* @param {?} player
* @return {?}
*/
set: function (player) { throw new Error('NOT IMPLEMENTED: Base Class'); },
enumerable: true,
configurable: true
});
return AnimationPlayer;
}());
/**
* \@experimental Animation support is experimental.
*/
var NoopAnimationPlayer = (function () {

@@ -588,2 +923,3 @@ function NoopAnimationPlayer() {

this.parentPlayer = null;
this.totalTime = 0;
}

@@ -627,5 +963,4 @@ /**

NoopAnimationPlayer.prototype.play = function () {
var _this = this;
if (!this.hasStarted()) {
scheduleMicroTask(function () { return _this._onFinish(); });
this.triggerMicrotask();
this._onStart();

@@ -638,2 +973,9 @@ }

*/
NoopAnimationPlayer.prototype.triggerMicrotask = function () {
var _this = this;
scheduleMicroTask(function () { return _this._onFinish(); });
};
/**
* @return {?}
*/
NoopAnimationPlayer.prototype._onStart = function () {

@@ -705,3 +1047,6 @@ this._onStartFns.forEach(function (fn) { return fn(); });

this.parentPlayer = null;
var count = 0;
this.totalTime = 0;
var doneCount = 0;
var destroyCount = 0;
var startCount = 0;
var total = this._players.length;

@@ -715,8 +1060,19 @@ if (total == 0) {

player.onDone(function () {
if (++count >= total) {
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);
}

@@ -743,2 +1099,12 @@ /**

/**
* @return {?}
*/
AnimationGroupPlayer.prototype._onStart = function () {
if (!this.hasStarted()) {
this._onStartFns.forEach(function (fn) { return fn(); });
this._onStartFns = [];
this._started = true;
}
};
/**
* @param {?} fn

@@ -764,7 +1130,3 @@ * @return {?}

}
if (!this.hasStarted()) {
this._onStartFns.forEach(function (fn) { return fn(); });
this._onStartFns = [];
this._started = true;
}
this._onStart();
this._players.forEach(function (player) { return player.play(); });

@@ -790,7 +1152,11 @@ };

*/
AnimationGroupPlayer.prototype.destroy = function () {
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._destroyed = true;
this._onDestroyFns.forEach(function (fn) { return fn(); });

@@ -814,3 +1180,7 @@ this._onDestroyFns = [];

AnimationGroupPlayer.prototype.setPosition = function (p) {
this._players.forEach(function (player) { player.setPosition(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);
});
};

@@ -845,2 +1215,3 @@ /**

*/
var ɵPRE_STYLE = '!';
/**

@@ -854,2 +1225,7 @@ * @license

/**
* @module
* @description
* Entry point for all animation APIs of the animation package.
*/
/**
* @license

@@ -869,3 +1245,3 @@ * Copyright Google Inc. All Rights Reserved.

*/
export { AUTO_STYLE, animate, group, keyframes, sequence, state, style, transition, trigger, AnimationPlayer, NoopAnimationPlayer, AnimationGroupPlayer as ɵAnimationGroupPlayer };
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.es5.js.map

585

@angular/animations.js
/**
* @license Angular v4.2.0-beta.1
* @license Angular v4.2.0-rc.0
* (c) 2010-2017 Google, Inc. https://angular.io/

@@ -7,4 +7,76 @@ * 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 = '*';

@@ -66,3 +138,3 @@ /**

function trigger(name, definitions) {
return { name, definitions };
return { type: 7 /* Trigger */, name, definitions, options: {} };
}

@@ -118,3 +190,3 @@ /**

function animate(timings, styles = null) {
return { type: 4 /* Animate */, styles: styles, timings: timings };
return { type: 4 /* Animate */, styles, timings };
}

@@ -152,6 +224,7 @@ /**

* @param {?} steps
* @param {?=} options
* @return {?}
*/
function group(steps) {
return { type: 3 /* Group */, steps: steps };
function group(steps, options = null) {
return { type: 3 /* Group */, steps, options };
}

@@ -192,6 +265,7 @@ /**

* @param {?} steps
* @param {?=} options
* @return {?}
*/
function sequence(steps) {
return { type: 2 /* Sequence */, steps: steps };
function sequence(steps, options = null) {
return { type: 2 /* Sequence */, steps, options };
}

@@ -243,3 +317,3 @@ /**

function style(tokens) {
return { type: 6 /* Style */, styles: tokens };
return { type: 6 /* Style */, styles: tokens, offset: null };
}

@@ -298,3 +372,3 @@ /**

function state(name, styles) {
return { type: 0 /* State */, name: name, styles: styles };
return { type: 0 /* State */, name, styles };
}

@@ -349,3 +423,3 @@ /**

function keyframes(steps) {
return { type: 5 /* KeyframeSequence */, steps: steps };
return { type: 5 /* Keyframes */, steps };
}

@@ -460,7 +534,347 @@ /**

* @param {?} steps
* @param {?=} options
* @return {?}
*/
function transition(stateChangeExpr, steps) {
return { type: 1 /* Transition */, expr: stateChangeExpr, animation: steps };
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 };
}

@@ -489,87 +903,3 @@ /**

* \@experimental Animation support is experimental.
* @abstract
*/
class AnimationPlayer {
/**
* @abstract
* @param {?} fn
* @return {?}
*/
onDone(fn) { }
/**
* @abstract
* @param {?} fn
* @return {?}
*/
onStart(fn) { }
/**
* @abstract
* @param {?} fn
* @return {?}
*/
onDestroy(fn) { }
/**
* @abstract
* @return {?}
*/
init() { }
/**
* @abstract
* @return {?}
*/
hasStarted() { }
/**
* @abstract
* @return {?}
*/
play() { }
/**
* @abstract
* @return {?}
*/
pause() { }
/**
* @abstract
* @return {?}
*/
restart() { }
/**
* @abstract
* @return {?}
*/
finish() { }
/**
* @abstract
* @return {?}
*/
destroy() { }
/**
* @abstract
* @return {?}
*/
reset() { }
/**
* @abstract
* @param {?} p
* @return {?}
*/
setPosition(p) { }
/**
* @abstract
* @return {?}
*/
getPosition() { }
/**
* @return {?}
*/
get parentPlayer() { throw new Error('NOT IMPLEMENTED: Base Class'); }
/**
* @param {?} player
* @return {?}
*/
set parentPlayer(player) { throw new Error('NOT IMPLEMENTED: Base Class'); }
}
/**
* \@experimental Animation support is experimental.
*/
class NoopAnimationPlayer {

@@ -584,2 +914,3 @@ constructor() {

this.parentPlayer = null;
this.totalTime = 0;
}

@@ -624,3 +955,3 @@ /**

if (!this.hasStarted()) {
scheduleMicroTask(() => this._onFinish());
this.triggerMicrotask();
this._onStart();

@@ -633,2 +964,6 @@ }

*/
triggerMicrotask() { scheduleMicroTask(() => this._onFinish()); }
/**
* @return {?}
*/
_onStart() {

@@ -699,3 +1034,6 @@ this._onStartFns.forEach(fn => fn());

this.parentPlayer = null;
let count = 0;
this.totalTime = 0;
let doneCount = 0;
let destroyCount = 0;
let startCount = 0;
const total = this._players.length;

@@ -709,8 +1047,19 @@ if (total == 0) {

player.onDone(() => {
if (++count >= total) {
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);
}

@@ -737,2 +1086,12 @@ /**

/**
* @return {?}
*/
_onStart() {
if (!this.hasStarted()) {
this._onStartFns.forEach(fn => fn());
this._onStartFns = [];
this._started = true;
}
}
/**
* @param {?} fn

@@ -758,7 +1117,3 @@ * @return {?}

}
if (!this.hasStarted()) {
this._onStartFns.forEach(fn => fn());
this._onStartFns = [];
this._started = true;
}
this._onStart();
this._players.forEach(player => player.play());

@@ -784,7 +1139,11 @@ }

*/
destroy() {
destroy() { this._onDestroy(); }
/**
* @return {?}
*/
_onDestroy() {
if (!this._destroyed) {
this._destroyed = true;
this._onFinish();
this._players.forEach(player => player.destroy());
this._destroyed = true;
this._onDestroyFns.forEach(fn => fn());

@@ -808,3 +1167,7 @@ this._onDestroyFns = [];

setPosition(p) {
this._players.forEach(player => { player.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);
});
}

@@ -835,2 +1198,3 @@ /**

*/
const ɵPRE_STYLE = '!';

@@ -844,2 +1208,7 @@ /**

*/
/**
* @module
* @description
* Entry point for all animation APIs of the animation package.
*/

@@ -863,3 +1232,3 @@ /**

export { AUTO_STYLE, animate, group, keyframes, sequence, state, style, transition, trigger, AnimationPlayer, NoopAnimationPlayer, AnimationGroupPlayer as ɵAnimationGroupPlayer };
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

88

@angular/animations/browser/testing.es5.js

@@ -1,8 +0,13 @@

var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
/**
* @license Angular v4.2.0-beta.1
* @license Angular v4.2.0-rc.0
* (c) 2010-2017 Google, Inc. https://angular.io/

@@ -19,3 +24,46 @@ * License: MIT

*/
var _contains = function (elm1, elm2) { return false; };
var _matches = function (element, selector) { return false; };
var _query = function (element, selector, multi) {
return [];
};
if (typeof Element != 'undefined') {
// this is well supported in all browsers
_contains = function (elm1, elm2) { return elm1.contains(elm2); };
if (Element.prototype.matches) {
_matches = function (element, selector) { return element.matches(selector); };
}
else {
var proto = Element.prototype;
var fn_1 = proto.matchesSelector || proto.mozMatchesSelector || proto.msMatchesSelector ||
proto.oMatchesSelector || proto.webkitMatchesSelector;
if (fn_1) {
_matches = function (element, selector) { return fn_1.apply(element, [selector]); };
}
}
_query = function (element, selector, multi) {
var results = [];
if (multi) {
results.push.apply(results, element.querySelectorAll(selector));
}
else {
var elm = element.querySelector(selector);
if (elm) {
results.push(elm);
}
}
return results;
};
}
var matchesElement = _matches;
var containsElement = _contains;
var invokeQuery = _query;
/**
* @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.

@@ -26,2 +74,12 @@ */

}
MockAnimationDriver.prototype.matchesElement = function (element, selector) {
return matchesElement(element, selector);
};
MockAnimationDriver.prototype.containsElement = function (elm1, elm2) { return containsElement(elm1, elm2); };
MockAnimationDriver.prototype.query = function (element, selector, multi) {
return invokeQuery(element, selector, multi);
};
MockAnimationDriver.prototype.computeStyle = function (element, prop, defaultValue) {
return defaultValue || '';
};
MockAnimationDriver.prototype.animate = function (element, keyframes, duration, delay, easing, previousPlayers) {

@@ -50,10 +108,13 @@ if (previousPlayers === void 0) { previousPlayers = []; }

_this.__finished = false;
_this.__started = false;
_this.previousStyles = {};
_this._onInitFns = [];
_this.currentSnapshot = {};
previousPlayers.forEach(function (player) {
if (player instanceof MockAnimationPlayer) {
var styles_1 = player._captureStyles();
Object.keys(styles_1).forEach(function (prop) { _this.previousStyles[prop] = styles_1[prop]; });
var styles_1 = player.currentSnapshot;
Object.keys(styles_1).forEach(function (prop) { return _this.previousStyles[prop] = styles_1[prop]; });
}
});
_this.totalTime = delay + duration;
return _this;

@@ -77,3 +138,10 @@ }

};
MockAnimationPlayer.prototype._captureStyles = function () {
/* @internal */
MockAnimationPlayer.prototype.triggerMicrotask = function () { };
MockAnimationPlayer.prototype.play = function () {
_super.prototype.play.call(this);
this.__started = true;
};
MockAnimationPlayer.prototype.hasStarted = function () { return this.__started; };
MockAnimationPlayer.prototype.beforeDestroy = function () {
var _this = this;

@@ -96,3 +164,3 @@ var captures = {};

}
return captures;
this.currentSnapshot = captures;
};

@@ -99,0 +167,0 @@ return MockAnimationPlayer;

81

@angular/animations/browser/testing.js
/**
* @license Angular v4.2.0-beta.1
* @license Angular v4.2.0-rc.0
* (c) 2010-2017 Google, Inc. https://angular.io/

@@ -15,6 +15,67 @@ * License: MIT

*/
let _contains = (elm1, elm2) => false;
let _matches = (element, selector) => false;
let _query = (element, selector, multi) => {
return [];
};
if (typeof Element != 'undefined') {
// this is well supported in all browsers
_contains = (elm1, elm2) => { return elm1.contains(elm2); };
if (Element.prototype.matches) {
_matches = (element, selector) => element.matches(selector);
}
else {
const proto = Element.prototype;
const fn = proto.matchesSelector || proto.mozMatchesSelector || proto.msMatchesSelector ||
proto.oMatchesSelector || proto.webkitMatchesSelector;
if (fn) {
_matches = (element, selector) => fn.apply(element, [selector]);
}
}
_query = (element, selector, multi) => {
let results = [];
if (multi) {
results.push(...element.querySelectorAll(selector));
}
else {
const elm = element.querySelector(selector);
if (elm) {
results.push(elm);
}
}
return results;
};
}
const matchesElement = _matches;
const containsElement = _contains;
const invokeQuery = _query;
/**
* @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 MockAnimationDriver {
matchesElement(element, selector) {
return matchesElement(element, selector);
}
containsElement(elm1, elm2) { return containsElement(elm1, elm2); }
query(element, selector, multi) {
return invokeQuery(element, selector, multi);
}
computeStyle(element, prop, defaultValue) {
return defaultValue || '';
}
animate(element, keyframes, duration, delay, easing, previousPlayers = []) {

@@ -40,10 +101,13 @@ const player = new MockAnimationPlayer(element, keyframes, duration, delay, easing, previousPlayers);

this.__finished = false;
this.__started = false;
this.previousStyles = {};
this._onInitFns = [];
this.currentSnapshot = {};
previousPlayers.forEach(player => {
if (player instanceof MockAnimationPlayer) {
const styles = player._captureStyles();
Object.keys(styles).forEach(prop => { this.previousStyles[prop] = styles[prop]; });
const styles = player.currentSnapshot;
Object.keys(styles).forEach(prop => this.previousStyles[prop] = styles[prop]);
}
});
this.totalTime = delay + duration;
}

@@ -66,3 +130,10 @@ /* @internal */

}
_captureStyles() {
/* @internal */
triggerMicrotask() { }
play() {
super.play();
this.__started = true;
}
hasStarted() { return this.__started; }
beforeDestroy() {
const captures = {};

@@ -84,3 +155,3 @@ Object.keys(this.previousStyles).forEach(prop => {

}
return captures;
this.currentSnapshot = captures;
}

@@ -87,0 +158,0 @@ }

2

animations.metadata.json

@@ -1,1 +0,1 @@

{"__symbolic":"module","version":3,"metadata":{"AnimationEvent":{"__symbolic":"interface"},"AUTO_STYLE":"*","AnimationAnimateMetadata":{"__symbolic":"interface"},"AnimationGroupMetadata":{"__symbolic":"interface"},"AnimationKeyframesSequenceMetadata":{"__symbolic":"interface"},"AnimationMetadata":{"__symbolic":"interface"},"AnimationMetadataType":{"State":0,"Transition":1,"Sequence":2,"Group":3,"Animate":4,"KeyframeSequence":5,"Style":6},"AnimationSequenceMetadata":{"__symbolic":"interface"},"AnimationStateMetadata":{"__symbolic":"interface"},"AnimationStyleMetadata":{"__symbolic":"interface"},"AnimationTransitionMetadata":{"__symbolic":"interface"},"AnimationTriggerMetadata":{"__symbolic":"interface"},"animate":{"__symbolic":"function","parameters":["timings","styles"],"defaults":[null,null],"value":{"type":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"AnimationMetadataType"},"member":"Animate"},"styles":{"__symbolic":"reference","name":"styles"},"timings":{"__symbolic":"reference","name":"timings"}}},"group":{"__symbolic":"function","parameters":["steps"],"value":{"type":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"AnimationMetadataType"},"member":"Group"},"steps":{"__symbolic":"reference","name":"steps"}}},"keyframes":{"__symbolic":"function","parameters":["steps"],"value":{"type":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"AnimationMetadataType"},"member":"KeyframeSequence"},"steps":{"__symbolic":"reference","name":"steps"}}},"sequence":{"__symbolic":"function","parameters":["steps"],"value":{"type":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"AnimationMetadataType"},"member":"Sequence"},"steps":{"__symbolic":"reference","name":"steps"}}},"state":{"__symbolic":"function","parameters":["name","styles"],"value":{"type":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"AnimationMetadataType"},"member":"State"},"name":{"__symbolic":"reference","name":"name"},"styles":{"__symbolic":"reference","name":"styles"}}},"style":{"__symbolic":"function","parameters":["tokens"],"value":{"type":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"AnimationMetadataType"},"member":"Style"},"styles":{"__symbolic":"reference","name":"tokens"}}},"transition":{"__symbolic":"function","parameters":["stateChangeExpr","steps"],"value":{"type":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"AnimationMetadataType"},"member":"Transition"},"expr":{"__symbolic":"reference","name":"stateChangeExpr"},"animation":{"__symbolic":"reference","name":"steps"}}},"trigger":{"__symbolic":"function","parameters":["name","definitions"],"value":{"name":{"__symbolic":"reference","name":"name"},"definitions":{"__symbolic":"reference","name":"definitions"}}},"ɵStyleData":{"__symbolic":"interface"},"AnimationPlayer":{"__symbolic":"class","members":{"onDone":[{"__symbolic":"method"}],"onStart":[{"__symbolic":"method"}],"onDestroy":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"hasStarted":[{"__symbolic":"method"}],"play":[{"__symbolic":"method"}],"pause":[{"__symbolic":"method"}],"restart":[{"__symbolic":"method"}],"finish":[{"__symbolic":"method"}],"destroy":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"setPosition":[{"__symbolic":"method"}],"getPosition":[{"__symbolic":"method"}]}},"NoopAnimationPlayer":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}],"_onFinish":[{"__symbolic":"method"}],"onStart":[{"__symbolic":"method"}],"onDone":[{"__symbolic":"method"}],"onDestroy":[{"__symbolic":"method"}],"hasStarted":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"play":[{"__symbolic":"method"}],"_onStart":[{"__symbolic":"method"}],"pause":[{"__symbolic":"method"}],"restart":[{"__symbolic":"method"}],"finish":[{"__symbolic":"method"}],"destroy":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"setPosition":[{"__symbolic":"method"}],"getPosition":[{"__symbolic":"method"}]}},"ɵAnimationGroupPlayer":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"AnimationPlayer"}]}]}],"_onFinish":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"onStart":[{"__symbolic":"method"}],"onDone":[{"__symbolic":"method"}],"onDestroy":[{"__symbolic":"method"}],"hasStarted":[{"__symbolic":"method"}],"play":[{"__symbolic":"method"}],"pause":[{"__symbolic":"method"}],"restart":[{"__symbolic":"method"}],"finish":[{"__symbolic":"method"}],"destroy":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"setPosition":[{"__symbolic":"method"}],"getPosition":[{"__symbolic":"method"}]}}},"origins":{"AnimationEvent":"./src/animation_event","AUTO_STYLE":"./src/animation_metadata","AnimateTimings":"./src/animation_metadata","AnimationAnimateMetadata":"./src/animation_metadata","AnimationGroupMetadata":"./src/animation_metadata","AnimationKeyframesSequenceMetadata":"./src/animation_metadata","AnimationMetadata":"./src/animation_metadata","AnimationMetadataType":"./src/animation_metadata","AnimationSequenceMetadata":"./src/animation_metadata","AnimationStateMetadata":"./src/animation_metadata","AnimationStyleMetadata":"./src/animation_metadata","AnimationTransitionMetadata":"./src/animation_metadata","AnimationTriggerMetadata":"./src/animation_metadata","animate":"./src/animation_metadata","group":"./src/animation_metadata","keyframes":"./src/animation_metadata","sequence":"./src/animation_metadata","state":"./src/animation_metadata","style":"./src/animation_metadata","transition":"./src/animation_metadata","trigger":"./src/animation_metadata","ɵStyleData":"./src/animation_metadata","AnimationPlayer":"./src/players/animation_player","NoopAnimationPlayer":"./src/players/animation_player","ɵAnimationGroupPlayer":"./src/players/animation_group_player"},"importAs":"@angular/animations"}
{"__symbolic":"module","version":3,"metadata":{"AnimationBuilder":{"__symbolic":"class","members":{"build":[{"__symbolic":"method"}]}},"AnimationFactory":{"__symbolic":"class","members":{"create":[{"__symbolic":"method"}]}},"AnimationEvent":{"__symbolic":"interface"},"AUTO_STYLE":"*","AnimateChildOptions":{"__symbolic":"interface"},"AnimationAnimateChildMetadata":{"__symbolic":"interface"},"AnimationAnimateMetadata":{"__symbolic":"interface"},"AnimationAnimateRefMetadata":{"__symbolic":"interface"},"AnimationGroupMetadata":{"__symbolic":"interface"},"AnimationKeyframesSequenceMetadata":{"__symbolic":"interface"},"AnimationMetadata":{"__symbolic":"interface"},"AnimationMetadataType":{"State":0,"Transition":1,"Sequence":2,"Group":3,"Animate":4,"Keyframes":5,"Style":6,"Trigger":7,"Reference":8,"AnimateChild":9,"AnimateRef":10,"Query":11,"Stagger":12},"AnimationOptions":{"__symbolic":"interface"},"AnimationQueryMetadata":{"__symbolic":"interface"},"AnimationQueryOptions":{"__symbolic":"interface"},"AnimationReferenceMetadata":{"__symbolic":"interface"},"AnimationSequenceMetadata":{"__symbolic":"interface"},"AnimationStaggerMetadata":{"__symbolic":"interface"},"AnimationStateMetadata":{"__symbolic":"interface"},"AnimationStyleMetadata":{"__symbolic":"interface"},"AnimationTransitionMetadata":{"__symbolic":"interface"},"AnimationTriggerMetadata":{"__symbolic":"interface"},"animate":{"__symbolic":"function","parameters":["timings","styles"],"defaults":[null,null],"value":{"type":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"AnimationMetadataType"},"member":"Animate"},"styles":{"__symbolic":"reference","name":"styles"},"timings":{"__symbolic":"reference","name":"timings"}}},"animateChild":{"__symbolic":"function","parameters":["options"],"defaults":[null],"value":{"type":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"AnimationMetadataType"},"member":"AnimateChild"},"options":{"__symbolic":"reference","name":"options"}}},"animation":{"__symbolic":"function","parameters":["steps","options"],"defaults":[null,null],"value":{"type":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"AnimationMetadataType"},"member":"Reference"},"animation":{"__symbolic":"reference","name":"steps"},"options":{"__symbolic":"reference","name":"options"}}},"group":{"__symbolic":"function","parameters":["steps","options"],"defaults":[null,null],"value":{"type":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"AnimationMetadataType"},"member":"Group"},"steps":{"__symbolic":"reference","name":"steps"},"options":{"__symbolic":"reference","name":"options"}}},"keyframes":{"__symbolic":"function","parameters":["steps"],"value":{"type":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"AnimationMetadataType"},"member":"Keyframes"},"steps":{"__symbolic":"reference","name":"steps"}}},"query":{"__symbolic":"function","parameters":["selector","animation","options"],"defaults":[null,null,null],"value":{"type":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"AnimationMetadataType"},"member":"Query"},"selector":{"__symbolic":"reference","name":"selector"},"animation":{"__symbolic":"reference","name":"animation"},"options":{"__symbolic":"reference","name":"options"}}},"sequence":{"__symbolic":"function","parameters":["steps","options"],"defaults":[null,null],"value":{"type":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"AnimationMetadataType"},"member":"Sequence"},"steps":{"__symbolic":"reference","name":"steps"},"options":{"__symbolic":"reference","name":"options"}}},"stagger":{"__symbolic":"function","parameters":["timings","animation"],"value":{"type":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"AnimationMetadataType"},"member":"Stagger"},"timings":{"__symbolic":"reference","name":"timings"},"animation":{"__symbolic":"reference","name":"animation"}}},"state":{"__symbolic":"function","parameters":["name","styles"],"value":{"type":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"AnimationMetadataType"},"member":"State"},"name":{"__symbolic":"reference","name":"name"},"styles":{"__symbolic":"reference","name":"styles"}}},"style":{"__symbolic":"function","parameters":["tokens"],"value":{"type":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"AnimationMetadataType"},"member":"Style"},"styles":{"__symbolic":"reference","name":"tokens"},"offset":null}},"transition":{"__symbolic":"function","parameters":["stateChangeExpr","steps","options"],"defaults":[null,null,null],"value":{"type":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"AnimationMetadataType"},"member":"Transition"},"expr":{"__symbolic":"reference","name":"stateChangeExpr"},"animation":{"__symbolic":"reference","name":"steps"},"options":{"__symbolic":"reference","name":"options"}}},"trigger":{"__symbolic":"function","parameters":["name","definitions"],"value":{"type":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"AnimationMetadataType"},"member":"Trigger"},"name":{"__symbolic":"reference","name":"name"},"definitions":{"__symbolic":"reference","name":"definitions"},"options":{}}},"useAnimation":{"__symbolic":"function","parameters":["animation","options"],"defaults":[null,null],"value":{"type":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"AnimationMetadataType"},"member":"AnimateRef"},"animation":{"__symbolic":"reference","name":"animation"},"options":{"__symbolic":"reference","name":"options"}}},"ɵStyleData":{"__symbolic":"interface"},"AnimationPlayer":{"__symbolic":"interface"},"NoopAnimationPlayer":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}],"_onFinish":[{"__symbolic":"method"}],"onStart":[{"__symbolic":"method"}],"onDone":[{"__symbolic":"method"}],"onDestroy":[{"__symbolic":"method"}],"hasStarted":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"play":[{"__symbolic":"method"}],"triggerMicrotask":[{"__symbolic":"method"}],"_onStart":[{"__symbolic":"method"}],"pause":[{"__symbolic":"method"}],"restart":[{"__symbolic":"method"}],"finish":[{"__symbolic":"method"}],"destroy":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"setPosition":[{"__symbolic":"method"}],"getPosition":[{"__symbolic":"method"}]}},"ɵPRE_STYLE":"!","ɵAnimationGroupPlayer":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"AnimationPlayer"}]}]}],"_onFinish":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"onStart":[{"__symbolic":"method"}],"_onStart":[{"__symbolic":"method"}],"onDone":[{"__symbolic":"method"}],"onDestroy":[{"__symbolic":"method"}],"hasStarted":[{"__symbolic":"method"}],"play":[{"__symbolic":"method"}],"pause":[{"__symbolic":"method"}],"restart":[{"__symbolic":"method"}],"finish":[{"__symbolic":"method"}],"destroy":[{"__symbolic":"method"}],"_onDestroy":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"setPosition":[{"__symbolic":"method"}],"getPosition":[{"__symbolic":"method"}]}}},"origins":{"AnimationBuilder":"./src/animation_builder","AnimationFactory":"./src/animation_builder","AnimationEvent":"./src/animation_event","AUTO_STYLE":"./src/animation_metadata","AnimateChildOptions":"./src/animation_metadata","AnimateTimings":"./src/animation_metadata","AnimationAnimateChildMetadata":"./src/animation_metadata","AnimationAnimateMetadata":"./src/animation_metadata","AnimationAnimateRefMetadata":"./src/animation_metadata","AnimationGroupMetadata":"./src/animation_metadata","AnimationKeyframesSequenceMetadata":"./src/animation_metadata","AnimationMetadata":"./src/animation_metadata","AnimationMetadataType":"./src/animation_metadata","AnimationOptions":"./src/animation_metadata","AnimationQueryMetadata":"./src/animation_metadata","AnimationQueryOptions":"./src/animation_metadata","AnimationReferenceMetadata":"./src/animation_metadata","AnimationSequenceMetadata":"./src/animation_metadata","AnimationStaggerMetadata":"./src/animation_metadata","AnimationStateMetadata":"./src/animation_metadata","AnimationStyleMetadata":"./src/animation_metadata","AnimationTransitionMetadata":"./src/animation_metadata","AnimationTriggerMetadata":"./src/animation_metadata","animate":"./src/animation_metadata","animateChild":"./src/animation_metadata","animation":"./src/animation_metadata","group":"./src/animation_metadata","keyframes":"./src/animation_metadata","query":"./src/animation_metadata","sequence":"./src/animation_metadata","stagger":"./src/animation_metadata","state":"./src/animation_metadata","style":"./src/animation_metadata","transition":"./src/animation_metadata","trigger":"./src/animation_metadata","useAnimation":"./src/animation_metadata","ɵStyleData":"./src/animation_metadata","AnimationPlayer":"./src/players/animation_player","NoopAnimationPlayer":"./src/players/animation_player","ɵPRE_STYLE":"./src/private_export","ɵAnimationGroupPlayer":"./src/players/animation_group_player"},"importAs":"@angular/animations"}

2

browser.d.ts
/**
* @license Angular v4.2.0-beta.1
* @license Angular v4.2.0-rc.0
* (c) 2010-2017 Google, Inc. https://angular.io/

@@ -4,0 +4,0 @@ * License: MIT

2

browser/index.metadata.json

@@ -1,1 +0,1 @@

{"__symbolic":"module","version":3,"metadata":{"AnimationDriver":{"__symbolic":"class","members":{"animate":[{"__symbolic":"method"}]},"statics":{"NOOP":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"NoopAnimationDriver"}}}},"ɵAnimationEngine":{"__symbolic":"class","members":{"registerTrigger":[{"__symbolic":"method"}],"onInsert":[{"__symbolic":"method"}],"onRemove":[{"__symbolic":"method"}],"setProperty":[{"__symbolic":"method"}],"listen":[{"__symbolic":"method"}],"flush":[{"__symbolic":"method"}]}},"ɵAnimation":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":20,"character":21,"module":"./src/dsl/animation"}]}],"buildTimelines":[{"__symbolic":"method"}],"create":[{"__symbolic":"method"}]}},"ɵAnimationStyleNormalizer":{"__symbolic":"class","members":{"normalizePropertyName":[{"__symbolic":"method"}],"normalizeStyleValue":[{"__symbolic":"method"}]}},"ɵNoopAnimationStyleNormalizer":{"__symbolic":"class","members":{"normalizePropertyName":[{"__symbolic":"method"}],"normalizeStyleValue":[{"__symbolic":"method"}]}},"ɵWebAnimationsStyleNormalizer":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ɵAnimationStyleNormalizer"},"members":{"normalizePropertyName":[{"__symbolic":"method"}],"normalizeStyleValue":[{"__symbolic":"method"}]}},"ɵNoopAnimationDriver":{"__symbolic":"class","members":{"animate":[{"__symbolic":"method"}]}},"ɵDomAnimationEngine":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"AnimationDriver"},{"__symbolic":"reference","name":"ɵAnimationStyleNormalizer"}]}],"registerTrigger":[{"__symbolic":"method"}],"onInsert":[{"__symbolic":"method"}],"onRemove":[{"__symbolic":"method"}],"setProperty":[{"__symbolic":"method"}],"listen":[{"__symbolic":"method"}],"_clearPendingListenerRemovals":[{"__symbolic":"method"}],"_onRemovalTransition":[{"__symbolic":"method"}],"animateTransition":[{"__symbolic":"method"}],"animateTimeline":[{"__symbolic":"method"}],"_buildPlayer":[{"__symbolic":"method"}],"_normalizeKeyframes":[{"__symbolic":"method"}],"_markPlayerAsActive":[{"__symbolic":"method"}],"_queuePlayer":[{"__symbolic":"method"}],"_flushQueuedAnimations":[{"__symbolic":"method"}],"flush":[{"__symbolic":"method"}]}},"ɵNoopAnimationEngine":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ɵAnimationEngine"},"members":{"registerTrigger":[{"__symbolic":"method"}],"onInsert":[{"__symbolic":"method"}],"onRemove":[{"__symbolic":"method"}],"setProperty":[{"__symbolic":"method"}],"listen":[{"__symbolic":"method"}],"flush":[{"__symbolic":"method"}]}},"ɵWebAnimationsDriver":{"__symbolic":"class","members":{"animate":[{"__symbolic":"method"}]}},"ɵsupportsWebAnimations":{"__symbolic":"function","parameters":[],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"!==","left":{"__symbolic":"error","message":"Expression form not supported","line":33,"character":9,"module":"./src/render/web_animations/web_animations_driver"},"right":"undefined"},"right":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":33,"character":43,"module":"./src/render/web_animations/web_animations_driver"},"right":"function"}}},"ɵWebAnimationsPlayer":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"error","message":"Expression form not supported","line":28,"character":45,"module":"./src/render/web_animations/web_animations_player"}]},{"__symbolic":"error","message":"Expression form not supported","line":29,"character":22,"module":"./src/render/web_animations/web_animations_player"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"ɵWebAnimationsPlayer"}]}]}],"_onFinish":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"_triggerWebAnimation":[{"__symbolic":"method"}],"onStart":[{"__symbolic":"method"}],"onDone":[{"__symbolic":"method"}],"onDestroy":[{"__symbolic":"method"}],"play":[{"__symbolic":"method"}],"pause":[{"__symbolic":"method"}],"finish":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"_resetDomPlayerState":[{"__symbolic":"method"}],"restart":[{"__symbolic":"method"}],"hasStarted":[{"__symbolic":"method"}],"destroy":[{"__symbolic":"method"}],"setPosition":[{"__symbolic":"method"}],"getPosition":[{"__symbolic":"method"}],"_captureStyles":[{"__symbolic":"method"}]}}},"origins":{"AnimationDriver":"./src/render/animation_driver","ɵAnimationEngine":"./src/animation_engine","ɵAnimation":"./src/dsl/animation","ɵAnimationStyleNormalizer":"./src/dsl/style_normalization/animation_style_normalizer","ɵNoopAnimationStyleNormalizer":"./src/dsl/style_normalization/animation_style_normalizer","ɵWebAnimationsStyleNormalizer":"./src/dsl/style_normalization/web_animations_style_normalizer","ɵNoopAnimationDriver":"./src/render/animation_driver","ɵDomAnimationEngine":"./src/render/dom_animation_engine","ɵNoopAnimationEngine":"./src/render/noop_animation_engine","ɵWebAnimationsDriver":"./src/render/web_animations/web_animations_driver","ɵsupportsWebAnimations":"./src/render/web_animations/web_animations_driver","ɵWebAnimationsPlayer":"./src/render/web_animations/web_animations_player"},"importAs":"@angular/animations/browser"}
{"__symbolic":"module","version":3,"metadata":{"AnimationDriver":{"__symbolic":"class","members":{"matchesElement":[{"__symbolic":"method"}],"containsElement":[{"__symbolic":"method"}],"query":[{"__symbolic":"method"}],"computeStyle":[{"__symbolic":"method"}],"animate":[{"__symbolic":"method"}]},"statics":{"NOOP":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"NoopAnimationDriver"}}}},"ɵAnimation":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"AnimationDriver"},{"__symbolic":"error","message":"Expression form not supported","line":20,"character":55,"module":"./src/dsl/animation"}]}],"buildTimelines":[{"__symbolic":"method"}]}},"ɵAnimationStyleNormalizer":{"__symbolic":"class","members":{"normalizePropertyName":[{"__symbolic":"method"}],"normalizeStyleValue":[{"__symbolic":"method"}]}},"ɵNoopAnimationStyleNormalizer":{"__symbolic":"class","members":{"normalizePropertyName":[{"__symbolic":"method"}],"normalizeStyleValue":[{"__symbolic":"method"}]}},"ɵWebAnimationsStyleNormalizer":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ɵAnimationStyleNormalizer"},"members":{"normalizePropertyName":[{"__symbolic":"method"}],"normalizeStyleValue":[{"__symbolic":"method"}]}},"ɵNoopAnimationDriver":{"__symbolic":"class","members":{"matchesElement":[{"__symbolic":"method"}],"containsElement":[{"__symbolic":"method"}],"query":[{"__symbolic":"method"}],"computeStyle":[{"__symbolic":"method"}],"animate":[{"__symbolic":"method"}]}},"ɵAnimationEngine":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"AnimationDriver"},{"__symbolic":"reference","name":"ɵAnimationStyleNormalizer"}]}],"registerTrigger":[{"__symbolic":"method"}],"destroy":[{"__symbolic":"method"}],"onInsert":[{"__symbolic":"method"}],"onRemove":[{"__symbolic":"method"}],"setProperty":[{"__symbolic":"method"}],"listen":[{"__symbolic":"method"}],"flush":[{"__symbolic":"method"}],"whenRenderingDone":[{"__symbolic":"method"}]}},"ɵWebAnimationsDriver":{"__symbolic":"class","members":{"matchesElement":[{"__symbolic":"method"}],"containsElement":[{"__symbolic":"method"}],"query":[{"__symbolic":"method"}],"computeStyle":[{"__symbolic":"method"}],"animate":[{"__symbolic":"method"}]}},"ɵsupportsWebAnimations":{"__symbolic":"function","parameters":[],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"!==","left":{"__symbolic":"error","message":"Expression form not supported","line":48,"character":9,"module":"./src/render/web_animations/web_animations_driver"},"right":"undefined"},"right":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":48,"character":43,"module":"./src/render/web_animations/web_animations_driver"},"right":"function"}}},"ɵWebAnimationsPlayer":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"error","message":"Expression form not supported","line":32,"character":45,"module":"./src/render/web_animations/web_animations_player"}]},{"__symbolic":"error","message":"Expression form not supported","line":33,"character":22,"module":"./src/render/web_animations/web_animations_player"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"ɵWebAnimationsPlayer"}]}]}],"_onFinish":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"_triggerWebAnimation":[{"__symbolic":"method"}],"onStart":[{"__symbolic":"method"}],"onDone":[{"__symbolic":"method"}],"onDestroy":[{"__symbolic":"method"}],"play":[{"__symbolic":"method"}],"pause":[{"__symbolic":"method"}],"finish":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"_resetDomPlayerState":[{"__symbolic":"method"}],"restart":[{"__symbolic":"method"}],"hasStarted":[{"__symbolic":"method"}],"destroy":[{"__symbolic":"method"}],"setPosition":[{"__symbolic":"method"}],"getPosition":[{"__symbolic":"method"}],"beforeDestroy":[{"__symbolic":"method"}]}}},"origins":{"AnimationDriver":"./src/render/animation_driver","ɵAnimation":"./src/dsl/animation","ɵAnimationStyleNormalizer":"./src/dsl/style_normalization/animation_style_normalizer","ɵNoopAnimationStyleNormalizer":"./src/dsl/style_normalization/animation_style_normalizer","ɵWebAnimationsStyleNormalizer":"./src/dsl/style_normalization/web_animations_style_normalizer","ɵNoopAnimationDriver":"./src/render/animation_driver","ɵAnimationEngine":"./src/render/animation_engine_next","ɵWebAnimationsDriver":"./src/render/web_animations/web_animations_driver","ɵsupportsWebAnimations":"./src/render/web_animations/web_animations_driver","ɵWebAnimationsPlayer":"./src/render/web_animations/web_animations_player"},"importAs":"@angular/animations/browser"}

10

browser/src/dsl/animation_dsl_visitor.d.ts

@@ -8,4 +8,5 @@ /**

*/
import { AnimationAnimateMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationSequenceMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata } from '@angular/animations';
import { AnimationAnimateChildMetadata, AnimationAnimateMetadata, AnimationAnimateRefMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationQueryMetadata, AnimationReferenceMetadata, AnimationSequenceMetadata, AnimationStaggerMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, AnimationTriggerMetadata } from '@angular/animations';
export interface AnimationDslVisitor {
visitTrigger(ast: AnimationTriggerMetadata, context: any): any;
visitState(ast: AnimationStateMetadata, context: any): any;

@@ -17,4 +18,9 @@ visitTransition(ast: AnimationTransitionMetadata, context: any): any;

visitStyle(ast: AnimationStyleMetadata, context: any): any;
visitKeyframeSequence(ast: AnimationKeyframesSequenceMetadata, context: any): any;
visitKeyframes(ast: AnimationKeyframesSequenceMetadata, context: any): any;
visitReference(ast: AnimationReferenceMetadata, context: any): any;
visitAnimateChild(ast: AnimationAnimateChildMetadata, context: any): any;
visitAnimateRef(ast: AnimationAnimateRefMetadata, context: any): any;
visitQuery(ast: AnimationQueryMetadata, context: any): any;
visitStagger(ast: AnimationStaggerMetadata, context: any): any;
}
export declare function visitAnimationNode(visitor: AnimationDslVisitor, node: AnimationMetadata, context: any): any;

9

browser/src/dsl/animation_timeline_instruction.d.ts

@@ -11,8 +11,13 @@ /**

export interface AnimationTimelineInstruction extends AnimationEngineInstruction {
element: any;
keyframes: ɵStyleData[];
preStyleProps: string[];
postStyleProps: string[];
duration: number;
delay: number;
totalTime: number;
easing: string | null | undefined;
easing: string | null;
stretchStartingKeyframe?: boolean;
subTimeline: boolean;
}
export declare function createTimelineInstruction(keyframes: ɵStyleData[], duration: number, delay: number, easing: string | null | undefined): AnimationTimelineInstruction;
export declare function createTimelineInstruction(element: any, keyframes: ɵStyleData[], preStyleProps: string[], postStyleProps: string[], duration: number, delay: number, easing?: string | null, subTimeline?: boolean): AnimationTimelineInstruction;

14

browser/src/dsl/animation_transition_factory.d.ts

@@ -8,14 +8,16 @@ /**

*/
import { AnimationTransitionMetadata, ɵStyleData } from '@angular/animations';
import { TransitionMatcherFn } from './animation_transition_expr';
import { AnimationOptions, ɵStyleData } from '@angular/animations';
import { AnimationDriver } from '../render/animation_driver';
import { TransitionAst } from './animation_ast';
import { AnimationTransitionInstruction } from './animation_transition_instruction';
import { ElementInstructionMap } from './element_instruction_map';
export declare class AnimationTransitionFactory {
private _triggerName;
private matchFns;
ast: TransitionAst;
private _stateStyles;
private _animationAst;
constructor(_triggerName: string, ast: AnimationTransitionMetadata, matchFns: TransitionMatcherFn[], _stateStyles: {
constructor(_triggerName: string, ast: TransitionAst, _stateStyles: {
[stateName: string]: ɵStyleData;
});
match(currentState: any, nextState: any): AnimationTransitionInstruction | undefined;
match(currentState: any, nextState: any): boolean;
build(driver: AnimationDriver, element: any, currentState: any, nextState: any, options?: AnimationOptions, subInstructions?: ElementInstructionMap): AnimationTransitionInstruction | undefined;
}

14

browser/src/dsl/animation_transition_instruction.d.ts

@@ -12,2 +12,3 @@ /**

export interface AnimationTransitionInstruction extends AnimationEngineInstruction {
element: any;
triggerName: string;

@@ -20,3 +21,14 @@ isRemovalTransition: boolean;

timelines: AnimationTimelineInstruction[];
queriedElements: any[];
preStyleProps: Map<any, {
[prop: string]: boolean;
}>;
postStyleProps: Map<any, {
[prop: string]: boolean;
}>;
}
export declare function createTransitionInstruction(triggerName: string, fromState: string, toState: string, isRemovalTransition: boolean, fromStyles: ɵStyleData, toStyles: ɵStyleData, timelines: AnimationTimelineInstruction[]): AnimationTransitionInstruction;
export declare function createTransitionInstruction(element: any, triggerName: string, fromState: string, toState: string, isRemovalTransition: boolean, fromStyles: ɵStyleData, toStyles: ɵStyleData, timelines: AnimationTimelineInstruction[], queriedElements: any[], preStyleProps: Map<any, {
[prop: string]: boolean;
}>, postStyleProps: Map<any, {
[prop: string]: boolean;
}>): AnimationTransitionInstruction;

17

browser/src/dsl/animation_trigger.d.ts

@@ -8,9 +8,9 @@ /**

*/
import { AnimationMetadata, AnimationTransitionMetadata, ɵStyleData } from '@angular/animations';
import { ɵStyleData } from '@angular/animations';
import { TriggerAst } from './animation_ast';
import { AnimationTransitionFactory } from './animation_transition_factory';
import { AnimationTransitionInstruction } from './animation_transition_instruction';
/**
* @experimental Animation support is experimental.
*/
export declare function buildTrigger(name: string, definitions: AnimationMetadata[]): AnimationTrigger;
export declare function buildTrigger(name: string, ast: TriggerAst): AnimationTrigger;
/**

@@ -21,12 +21,11 @@ * @experimental Animation support is experimental.

name: string;
private _transitionAsts;
ast: TriggerAst;
transitionFactories: AnimationTransitionFactory[];
fallbackTransition: AnimationTransitionFactory;
states: {
[stateName: string]: ɵStyleData;
};
constructor(name: string, states: {
[stateName: string]: ɵStyleData;
}, _transitionAsts: AnimationTransitionMetadata[]);
createFallbackInstruction(currentState: any, nextState: any): AnimationTransitionInstruction;
matchTransition(currentState: any, nextState: any): AnimationTransitionInstruction | null;
constructor(name: string, ast: TriggerAst);
readonly containsQueries: boolean;
matchTransition(currentState: any, nextState: any): AnimationTransitionFactory | null;
}

10

browser/src/dsl/animation.d.ts

@@ -8,9 +8,11 @@ /**

*/
import { AnimationMetadata, ɵStyleData } from '@angular/animations';
import { AnimationMetadata, AnimationOptions, ɵStyleData } from '@angular/animations';
import { AnimationDriver } from '../render/animation_driver';
import { AnimationTimelineInstruction } from './animation_timeline_instruction';
import { ElementInstructionMap } from './element_instruction_map';
export declare class Animation {
private _driver;
private _animationAst;
constructor(input: AnimationMetadata | AnimationMetadata[]);
buildTimelines(startingStyles: ɵStyleData | ɵStyleData[], destinationStyles: ɵStyleData | ɵStyleData[]): AnimationTimelineInstruction[];
private create(injector, element, startingStyles?, destinationStyles?);
constructor(_driver: AnimationDriver, input: AnimationMetadata | AnimationMetadata[]);
buildTimelines(element: any, startingStyles: ɵStyleData | ɵStyleData[], destinationStyles: ɵStyleData | ɵStyleData[], options: AnimationOptions, subInstructions?: ElementInstructionMap): AnimationTimelineInstruction[];
}

4

browser/src/private_export.d.ts

@@ -8,3 +8,2 @@ /**

*/
export { AnimationEngine as ɵAnimationEngine } from './animation_engine';
export { Animation as ɵAnimation } from './dsl/animation';

@@ -14,5 +13,4 @@ export { AnimationStyleNormalizer as ɵAnimationStyleNormalizer, NoopAnimationStyleNormalizer as ɵNoopAnimationStyleNormalizer } from './dsl/style_normalization/animation_style_normalizer';

export { NoopAnimationDriver as ɵNoopAnimationDriver } from './render/animation_driver';
export { DomAnimationEngine as ɵDomAnimationEngine } from './render/dom_animation_engine';
export { NoopAnimationEngine as ɵNoopAnimationEngine } from './render/noop_animation_engine';
export { AnimationEngine as ɵAnimationEngine } from './render/animation_engine_next';
export { WebAnimationsDriver as ɵWebAnimationsDriver, supportsWebAnimations as ɵsupportsWebAnimations } from './render/web_animations/web_animations_driver';
export { WebAnimationsPlayer as ɵWebAnimationsPlayer } from './render/web_animations/web_animations_player';

8

browser/src/render/animation_driver.d.ts

@@ -13,2 +13,6 @@ /**

export declare class NoopAnimationDriver implements AnimationDriver {
matchesElement(element: any, selector: string): boolean;
containsElement(elm1: any, elm2: any): boolean;
query(element: any, selector: string, multi: boolean): any[];
computeStyle(element: any, prop: string, defaultValue?: string): string;
animate(element: any, keyframes: {

@@ -23,2 +27,6 @@ [key: string]: string | number;

static NOOP: AnimationDriver;
abstract matchesElement(element: any, selector: string): boolean;
abstract containsElement(elm1: any, elm2: any): boolean;
abstract query(element: any, selector: string, multi: boolean): any[];
abstract computeStyle(element: any, prop: string, defaultValue?: string): string;
abstract animate(element: any, keyframes: {

@@ -25,0 +33,0 @@ [key: string]: string | number;

2

browser/src/render/animation_driver.metadata.json

@@ -1,1 +0,1 @@

[{"__symbolic":"module","version":3,"metadata":{"NoopAnimationDriver":{"__symbolic":"class","members":{"animate":[{"__symbolic":"method"}]}},"AnimationDriver":{"__symbolic":"class","members":{"animate":[{"__symbolic":"method"}]},"statics":{"NOOP":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"NoopAnimationDriver"}}}}}},{"__symbolic":"module","version":1,"metadata":{"NoopAnimationDriver":{"__symbolic":"class","members":{"animate":[{"__symbolic":"method"}]}},"AnimationDriver":{"__symbolic":"class","members":{"animate":[{"__symbolic":"method"}]},"statics":{"NOOP":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"NoopAnimationDriver"}}}}}}]
[{"__symbolic":"module","version":3,"metadata":{"NoopAnimationDriver":{"__symbolic":"class","members":{"matchesElement":[{"__symbolic":"method"}],"containsElement":[{"__symbolic":"method"}],"query":[{"__symbolic":"method"}],"computeStyle":[{"__symbolic":"method"}],"animate":[{"__symbolic":"method"}]}},"AnimationDriver":{"__symbolic":"class","members":{"matchesElement":[{"__symbolic":"method"}],"containsElement":[{"__symbolic":"method"}],"query":[{"__symbolic":"method"}],"computeStyle":[{"__symbolic":"method"}],"animate":[{"__symbolic":"method"}]},"statics":{"NOOP":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"NoopAnimationDriver"}}}}}},{"__symbolic":"module","version":1,"metadata":{"NoopAnimationDriver":{"__symbolic":"class","members":{"matchesElement":[{"__symbolic":"method"}],"containsElement":[{"__symbolic":"method"}],"query":[{"__symbolic":"method"}],"computeStyle":[{"__symbolic":"method"}],"animate":[{"__symbolic":"method"}]}},"AnimationDriver":{"__symbolic":"class","members":{"matchesElement":[{"__symbolic":"method"}],"containsElement":[{"__symbolic":"method"}],"query":[{"__symbolic":"method"}],"computeStyle":[{"__symbolic":"method"}],"animate":[{"__symbolic":"method"}]},"statics":{"NOOP":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"NoopAnimationDriver"}}}}}}]

4

browser/src/render/web_animations/web_animations_driver.d.ts

@@ -12,4 +12,8 @@ /**

export declare class WebAnimationsDriver implements AnimationDriver {
matchesElement(element: any, selector: string): boolean;
containsElement(elm1: any, elm2: any): boolean;
query(element: any, selector: string, multi: boolean): any[];
computeStyle(element: any, prop: string, defaultValue?: string): string;
animate(element: any, keyframes: ɵStyleData[], duration: number, delay: number, easing: string, previousPlayers?: AnimationPlayer[]): WebAnimationsPlayer;
}
export declare function supportsWebAnimations(): boolean;

7

browser/src/render/web_animations/web_animations_player.d.ts

@@ -18,2 +18,3 @@ /**

};
private previousPlayers;
private _onDoneFns;

@@ -35,2 +36,5 @@ private _onStartFns;

};
currentSnapshot: {
[styleName: string]: string | number;
};
constructor(element: any, keyframes: {

@@ -57,3 +61,4 @@ [key: string]: string | number;

getPosition(): number;
private _captureStyles();
readonly totalTime: number;
beforeDestroy(): void;
}

27

browser/src/util.d.ts

@@ -8,5 +8,21 @@ /**

*/
import { AnimateTimings, ɵStyleData } from '@angular/animations';
import { AnimateTimings, AnimationMetadata, AnimationOptions, ɵStyleData } from '@angular/animations';
export declare const ONE_SECOND = 1000;
export declare function parseTimeExpression(exp: string | number, errors: string[]): AnimateTimings;
export declare const ENTER_CLASSNAME = "ng-enter";
export declare const LEAVE_CLASSNAME = "ng-leave";
export declare const ENTER_SELECTOR = ".ng-enter";
export declare const LEAVE_SELECTOR = ".ng-leave";
export declare const NG_TRIGGER_CLASSNAME = "ng-trigger";
export declare const NG_TRIGGER_SELECTOR = ".ng-trigger";
export declare const NG_ANIMATING_CLASSNAME = "ng-animating";
export declare const NG_ANIMATING_SELECTOR = ".ng-animating";
export declare function resolveTimingValue(value: string | number): number;
export declare function resolveTiming(timings: string | number | AnimateTimings, errors: any[], allowNegativeValues?: boolean): AnimateTimings;
export declare function copyObj(obj: {
[key: string]: any;
}, destination?: {
[key: string]: any;
}): {
[key: string]: any;
};
export declare function normalizeStyles(styles: ɵStyleData | ɵStyleData[]): ɵStyleData;

@@ -16,1 +32,8 @@ export declare function copyStyles(styles: ɵStyleData, readPrototype: boolean, destination?: ɵStyleData): ɵStyleData;

export declare function eraseStyles(element: any, styles: ɵStyleData): void;
export declare function normalizeAnimationEntry(steps: AnimationMetadata | AnimationMetadata[]): AnimationMetadata;
export declare function validateStyleParams(value: string | number, options: AnimationOptions, errors: any[]): void;
export declare function interpolateParams(value: string | number, params: {
[name: string]: any;
}, errors: any[]): string | number;
export declare function iteratorToArray(iterator: any): any[];
export declare function mergeAnimationOptions(source: AnimationOptions, destination: AnimationOptions): AnimationOptions;

2

browser/testing.d.ts
/**
* @license Angular v4.2.0-beta.1
* @license Angular v4.2.0-rc.0
* (c) 2010-2017 Google, Inc. https://angular.io/

@@ -4,0 +4,0 @@ * License: MIT

12

browser/testing/src/mock_animation_driver.d.ts

@@ -8,3 +8,3 @@ /**

*/
import { AnimationPlayer, NoopAnimationPlayer } from '@angular/animations';
import { AnimationPlayer, NoopAnimationPlayer, ɵStyleData } from '@angular/animations';
import { AnimationDriver } from '../../src/render/animation_driver';

@@ -16,2 +16,6 @@ /**

static log: AnimationPlayer[];
matchesElement(element: any, selector: string): boolean;
containsElement(elm1: any, elm2: any): boolean;
query(element: any, selector: string, multi: boolean): any[];
computeStyle(element: any, prop: string, defaultValue?: string): string;
animate(element: any, keyframes: {

@@ -34,2 +38,3 @@ [key: string]: string | number;

private __finished;
private __started;
previousStyles: {

@@ -39,2 +44,3 @@ [key: string]: string | number;

private _onInitFns;
currentSnapshot: ɵStyleData;
constructor(element: any, keyframes: {

@@ -45,3 +51,5 @@ [key: string]: string | number;

destroy(): void;
private _captureStyles();
play(): void;
hasStarted(): boolean;
beforeDestroy(): void;
}

2

browser/testing/src/mock_animation_driver.metadata.json

@@ -1,1 +0,1 @@

[{"__symbolic":"module","version":3,"metadata":{"MockAnimationDriver":{"__symbolic":"class","members":{"animate":[{"__symbolic":"method"}]},"statics":{"log":[]}},"MockAnimationPlayer":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/animations","name":"NoopAnimationPlayer"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"error","message":"Expression form not supported","line":36,"character":45}]},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]}]}],"onInit":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"finish":[{"__symbolic":"method"}],"destroy":[{"__symbolic":"method"}],"_captureStyles":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"MockAnimationDriver":{"__symbolic":"class","members":{"animate":[{"__symbolic":"method"}]},"statics":{"log":[]}},"MockAnimationPlayer":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/animations","name":"NoopAnimationPlayer"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"error","message":"Expression form not supported","line":36,"character":45}]},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]}]}],"onInit":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"finish":[{"__symbolic":"method"}],"destroy":[{"__symbolic":"method"}],"_captureStyles":[{"__symbolic":"method"}]}}}}]
[{"__symbolic":"module","version":3,"metadata":{"MockAnimationDriver":{"__symbolic":"class","members":{"matchesElement":[{"__symbolic":"method"}],"containsElement":[{"__symbolic":"method"}],"query":[{"__symbolic":"method"}],"computeStyle":[{"__symbolic":"method"}],"animate":[{"__symbolic":"method"}]},"statics":{"log":[]}},"MockAnimationPlayer":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/animations","name":"NoopAnimationPlayer"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"error","message":"Expression form not supported","line":54,"character":45}]},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]}]}],"onInit":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"finish":[{"__symbolic":"method"}],"destroy":[{"__symbolic":"method"}],"triggerMicrotask":[{"__symbolic":"method"}],"play":[{"__symbolic":"method"}],"hasStarted":[{"__symbolic":"method"}],"beforeDestroy":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"MockAnimationDriver":{"__symbolic":"class","members":{"matchesElement":[{"__symbolic":"method"}],"containsElement":[{"__symbolic":"method"}],"query":[{"__symbolic":"method"}],"computeStyle":[{"__symbolic":"method"}],"animate":[{"__symbolic":"method"}]},"statics":{"log":[]}},"MockAnimationPlayer":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/animations","name":"NoopAnimationPlayer"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"error","message":"Expression form not supported","line":54,"character":45}]},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]}]}],"onInit":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"finish":[{"__symbolic":"method"}],"destroy":[{"__symbolic":"method"}],"triggerMicrotask":[{"__symbolic":"method"}],"play":[{"__symbolic":"method"}],"hasStarted":[{"__symbolic":"method"}],"beforeDestroy":[{"__symbolic":"method"}]}}}}]

90

bundles/animations-browser-testing.umd.js
/**
* @license Angular v4.2.0-beta.1
* @license Angular v4.2.0-rc.0
* (c) 2010-2017 Google, Inc. https://angular.io/

@@ -12,9 +12,14 @@ * License: MIT

var __extends = (undefined && undefined.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var __extends = (undefined && undefined.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
/**
* @license Angular v4.2.0-beta.1
* @license Angular v4.2.0-rc.0
* (c) 2010-2017 Google, Inc. https://angular.io/

@@ -30,3 +35,46 @@ * License: MIT

*/
var _contains = function (elm1, elm2) { return false; };
var _matches = function (element, selector) { return false; };
var _query = function (element, selector, multi) {
return [];
};
if (typeof Element != 'undefined') {
// this is well supported in all browsers
_contains = function (elm1, elm2) { return elm1.contains(elm2); };
if (Element.prototype.matches) {
_matches = function (element, selector) { return element.matches(selector); };
}
else {
var proto = Element.prototype;
var fn_1 = proto.matchesSelector || proto.mozMatchesSelector || proto.msMatchesSelector ||
proto.oMatchesSelector || proto.webkitMatchesSelector;
if (fn_1) {
_matches = function (element, selector) { return fn_1.apply(element, [selector]); };
}
}
_query = function (element, selector, multi) {
var results = [];
if (multi) {
results.push.apply(results, element.querySelectorAll(selector));
}
else {
var elm = element.querySelector(selector);
if (elm) {
results.push(elm);
}
}
return results;
};
}
var matchesElement = _matches;
var containsElement = _contains;
var invokeQuery = _query;
/**
* @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.

@@ -37,2 +85,12 @@ */

}
MockAnimationDriver.prototype.matchesElement = function (element, selector) {
return matchesElement(element, selector);
};
MockAnimationDriver.prototype.containsElement = function (elm1, elm2) { return containsElement(elm1, elm2); };
MockAnimationDriver.prototype.query = function (element, selector, multi) {
return invokeQuery(element, selector, multi);
};
MockAnimationDriver.prototype.computeStyle = function (element, prop, defaultValue) {
return defaultValue || '';
};
MockAnimationDriver.prototype.animate = function (element, keyframes, duration, delay, easing, previousPlayers) {

@@ -61,10 +119,13 @@ if (previousPlayers === void 0) { previousPlayers = []; }

_this.__finished = false;
_this.__started = false;
_this.previousStyles = {};
_this._onInitFns = [];
_this.currentSnapshot = {};
previousPlayers.forEach(function (player) {
if (player instanceof MockAnimationPlayer) {
var styles_1 = player._captureStyles();
Object.keys(styles_1).forEach(function (prop) { _this.previousStyles[prop] = styles_1[prop]; });
var styles_1 = player.currentSnapshot;
Object.keys(styles_1).forEach(function (prop) { return _this.previousStyles[prop] = styles_1[prop]; });
}
});
_this.totalTime = delay + duration;
return _this;

@@ -88,3 +149,10 @@ }

};
MockAnimationPlayer.prototype._captureStyles = function () {
/* @internal */
MockAnimationPlayer.prototype.triggerMicrotask = function () { };
MockAnimationPlayer.prototype.play = function () {
_super.prototype.play.call(this);
this.__started = true;
};
MockAnimationPlayer.prototype.hasStarted = function () { return this.__started; };
MockAnimationPlayer.prototype.beforeDestroy = function () {
var _this = this;

@@ -107,3 +175,3 @@ var captures = {};

}
return captures;
this.currentSnapshot = captures;
};

@@ -110,0 +178,0 @@ return MockAnimationPlayer;

4

bundles/animations-browser-testing.umd.min.js
/**
* @license Angular v4.2.0-beta.1
* @license Angular v4.2.0-rc.0
* (c) 2010-2017 Google, Inc. https://angular.io/
* License: MIT
*/
!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?factory(exports,require("@angular/animations")):"function"==typeof define&&define.amd?define(["exports","@angular/animations"],factory):factory((global.ng=global.ng||{},global.ng.animations=global.ng.animations||{},global.ng.animations.browser=global.ng.animations.browser||{},global.ng.animations.browser.testing=global.ng.animations.browser.testing||{}),global.ng.animations)}(this,function(exports,_angular_animations){"use strict";var __extends=function(d,b){function __(){this.constructor=d}for(var p in b)b.hasOwnProperty(p)&&(d[p]=b[p]);d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)},MockAnimationDriver=function(){function MockAnimationDriver(){}return MockAnimationDriver.prototype.animate=function(element,keyframes,duration,delay,easing,previousPlayers){void 0===previousPlayers&&(previousPlayers=[]);var player=new MockAnimationPlayer(element,keyframes,duration,delay,easing,previousPlayers);return MockAnimationDriver.log.push(player),player},MockAnimationDriver}();MockAnimationDriver.log=[];var MockAnimationPlayer=function(_super){function MockAnimationPlayer(element,keyframes,duration,delay,easing,previousPlayers){var _this=_super.call(this)||this;return _this.element=element,_this.keyframes=keyframes,_this.duration=duration,_this.delay=delay,_this.easing=easing,_this.previousPlayers=previousPlayers,_this.__finished=!1,_this.previousStyles={},_this._onInitFns=[],previousPlayers.forEach(function(player){if(player instanceof MockAnimationPlayer){var styles_1=player._captureStyles();Object.keys(styles_1).forEach(function(prop){_this.previousStyles[prop]=styles_1[prop]})}}),_this}return __extends(MockAnimationPlayer,_super),MockAnimationPlayer.prototype.onInit=function(fn){this._onInitFns.push(fn)},MockAnimationPlayer.prototype.init=function(){_super.prototype.init.call(this),this._onInitFns.forEach(function(fn){return fn()}),this._onInitFns=[]},MockAnimationPlayer.prototype.finish=function(){_super.prototype.finish.call(this),this.__finished=!0},MockAnimationPlayer.prototype.destroy=function(){_super.prototype.destroy.call(this),this.__finished=!0},MockAnimationPlayer.prototype._captureStyles=function(){var _this=this,captures={};return Object.keys(this.previousStyles).forEach(function(prop){captures[prop]=_this.previousStyles[prop]}),this.hasStarted()&&this.keyframes.forEach(function(kf){Object.keys(kf).forEach(function(prop){"offset"!=prop&&(captures[prop]=_this.__finished?kf[prop]:_angular_animations.AUTO_STYLE)})}),captures},MockAnimationPlayer}(_angular_animations.NoopAnimationPlayer);exports.MockAnimationDriver=MockAnimationDriver,exports.MockAnimationPlayer=MockAnimationPlayer,Object.defineProperty(exports,"__esModule",{value:!0})});
!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?factory(exports,require("@angular/animations")):"function"==typeof define&&define.amd?define(["exports","@angular/animations"],factory):factory((global.ng=global.ng||{},global.ng.animations=global.ng.animations||{},global.ng.animations.browser=global.ng.animations.browser||{},global.ng.animations.browser.testing=global.ng.animations.browser.testing||{}),global.ng.animations)}(this,function(exports,_angular_animations){"use strict";var __extends=function(){var extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)b.hasOwnProperty(p)&&(d[p]=b[p])};return function(d,b){function __(){this.constructor=d}extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}}(),_contains=function(elm1,elm2){return!1},_matches=function(element,selector){return!1},_query=function(element,selector,multi){return[]};if("undefined"!=typeof Element){if(_contains=function(elm1,elm2){return elm1.contains(elm2)},Element.prototype.matches)_matches=function(element,selector){return element.matches(selector)};else{var proto=Element.prototype,fn_1=proto.matchesSelector||proto.mozMatchesSelector||proto.msMatchesSelector||proto.oMatchesSelector||proto.webkitMatchesSelector;fn_1&&(_matches=function(element,selector){return fn_1.apply(element,[selector])})}_query=function(element,selector,multi){var results=[];if(multi)results.push.apply(results,element.querySelectorAll(selector));else{var elm=element.querySelector(selector);elm&&results.push(elm)}return results}}var matchesElement=_matches,containsElement=_contains,invokeQuery=_query,MockAnimationDriver=function(){function MockAnimationDriver(){}return MockAnimationDriver.prototype.matchesElement=function(element,selector){return matchesElement(element,selector)},MockAnimationDriver.prototype.containsElement=function(elm1,elm2){return containsElement(elm1,elm2)},MockAnimationDriver.prototype.query=function(element,selector,multi){return invokeQuery(element,selector,multi)},MockAnimationDriver.prototype.computeStyle=function(element,prop,defaultValue){return defaultValue||""},MockAnimationDriver.prototype.animate=function(element,keyframes,duration,delay,easing,previousPlayers){void 0===previousPlayers&&(previousPlayers=[]);var player=new MockAnimationPlayer(element,keyframes,duration,delay,easing,previousPlayers);return MockAnimationDriver.log.push(player),player},MockAnimationDriver}();MockAnimationDriver.log=[];var MockAnimationPlayer=function(_super){function MockAnimationPlayer(element,keyframes,duration,delay,easing,previousPlayers){var _this=_super.call(this)||this;return _this.element=element,_this.keyframes=keyframes,_this.duration=duration,_this.delay=delay,_this.easing=easing,_this.previousPlayers=previousPlayers,_this.__finished=!1,_this.__started=!1,_this.previousStyles={},_this._onInitFns=[],_this.currentSnapshot={},previousPlayers.forEach(function(player){if(player instanceof MockAnimationPlayer){var styles_1=player.currentSnapshot;Object.keys(styles_1).forEach(function(prop){return _this.previousStyles[prop]=styles_1[prop]})}}),_this.totalTime=delay+duration,_this}return __extends(MockAnimationPlayer,_super),MockAnimationPlayer.prototype.onInit=function(fn){this._onInitFns.push(fn)},MockAnimationPlayer.prototype.init=function(){_super.prototype.init.call(this),this._onInitFns.forEach(function(fn){return fn()}),this._onInitFns=[]},MockAnimationPlayer.prototype.finish=function(){_super.prototype.finish.call(this),this.__finished=!0},MockAnimationPlayer.prototype.destroy=function(){_super.prototype.destroy.call(this),this.__finished=!0},MockAnimationPlayer.prototype.triggerMicrotask=function(){},MockAnimationPlayer.prototype.play=function(){_super.prototype.play.call(this),this.__started=!0},MockAnimationPlayer.prototype.hasStarted=function(){return this.__started},MockAnimationPlayer.prototype.beforeDestroy=function(){var _this=this,captures={};Object.keys(this.previousStyles).forEach(function(prop){captures[prop]=_this.previousStyles[prop]}),this.hasStarted()&&this.keyframes.forEach(function(kf){Object.keys(kf).forEach(function(prop){"offset"!=prop&&(captures[prop]=_this.__finished?kf[prop]:_angular_animations.AUTO_STYLE)})}),this.currentSnapshot=captures},MockAnimationPlayer}(_angular_animations.NoopAnimationPlayer);exports.MockAnimationDriver=MockAnimationDriver,exports.MockAnimationPlayer=MockAnimationPlayer,Object.defineProperty(exports,"__esModule",{value:!0})});
//# sourceMappingURL=animations-browser-testing.umd.min.js.map

615

bundles/animations.umd.js
/**
* @license Angular v4.2.0-beta.1
* @license Angular v4.2.0-rc.0
* (c) 2010-2017 Google, Inc. https://angular.io/

@@ -13,3 +13,3 @@ * License: MIT

/**
* @license Angular v4.2.0-beta.1
* @license Angular v4.2.0-rc.0
* (c) 2010-2017 Google, Inc. https://angular.io/

@@ -19,4 +19,81 @@ * 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 = '*';

@@ -78,3 +155,3 @@ /**

function trigger(name, definitions) {
return { name: name, definitions: definitions };
return { type: 7 /* Trigger */, name: name, definitions: definitions, options: {} };
}

@@ -164,6 +241,8 @@ /**

* @param {?} steps
* @param {?=} options
* @return {?}
*/
function group(steps) {
return { type: 3 /* Group */, steps: steps };
function group(steps, options) {
if (options === void 0) { options = null; }
return { type: 3 /* Group */, steps: steps, options: options };
}

@@ -204,6 +283,8 @@ /**

* @param {?} steps
* @param {?=} options
* @return {?}
*/
function sequence(steps) {
return { type: 2 /* Sequence */, steps: steps };
function sequence(steps, options) {
if (options === void 0) { options = null; }
return { type: 2 /* Sequence */, steps: steps, options: options };
}

@@ -255,3 +336,3 @@ /**

function style(tokens) {
return { type: 6 /* Style */, styles: tokens };
return { type: 6 /* Style */, styles: tokens, offset: null };
}

@@ -360,3 +441,3 @@ /**

function keyframes(steps) {
return { type: 5 /* KeyframeSequence */, steps: steps };
return { type: 5 /* Keyframes */, steps: steps };
}

@@ -471,8 +552,353 @@ /**

* @param {?} steps
* @param {?=} options
* @return {?}
*/
function transition(stateChangeExpr, steps) {
return { type: 1 /* Transition */, expr: stateChangeExpr, animation: steps };
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

@@ -498,94 +924,3 @@ * Copyright Google Inc. All Rights Reserved.

* \@experimental Animation support is experimental.
* @abstract
*/
var AnimationPlayer = (function () {
function AnimationPlayer() {
}
/**
* @abstract
* @param {?} fn
* @return {?}
*/
AnimationPlayer.prototype.onDone = function (fn) { };
/**
* @abstract
* @param {?} fn
* @return {?}
*/
AnimationPlayer.prototype.onStart = function (fn) { };
/**
* @abstract
* @param {?} fn
* @return {?}
*/
AnimationPlayer.prototype.onDestroy = function (fn) { };
/**
* @abstract
* @return {?}
*/
AnimationPlayer.prototype.init = function () { };
/**
* @abstract
* @return {?}
*/
AnimationPlayer.prototype.hasStarted = function () { };
/**
* @abstract
* @return {?}
*/
AnimationPlayer.prototype.play = function () { };
/**
* @abstract
* @return {?}
*/
AnimationPlayer.prototype.pause = function () { };
/**
* @abstract
* @return {?}
*/
AnimationPlayer.prototype.restart = function () { };
/**
* @abstract
* @return {?}
*/
AnimationPlayer.prototype.finish = function () { };
/**
* @abstract
* @return {?}
*/
AnimationPlayer.prototype.destroy = function () { };
/**
* @abstract
* @return {?}
*/
AnimationPlayer.prototype.reset = function () { };
/**
* @abstract
* @param {?} p
* @return {?}
*/
AnimationPlayer.prototype.setPosition = function (p) { };
/**
* @abstract
* @return {?}
*/
AnimationPlayer.prototype.getPosition = function () { };
Object.defineProperty(AnimationPlayer.prototype, "parentPlayer", {
/**
* @return {?}
*/
get: function () { throw new Error('NOT IMPLEMENTED: Base Class'); },
/**
* @param {?} player
* @return {?}
*/
set: function (player) { throw new Error('NOT IMPLEMENTED: Base Class'); },
enumerable: true,
configurable: true
});
return AnimationPlayer;
}());
/**
* \@experimental Animation support is experimental.
*/
var NoopAnimationPlayer = (function () {

@@ -600,2 +935,3 @@ function NoopAnimationPlayer() {

this.parentPlayer = null;
this.totalTime = 0;
}

@@ -639,5 +975,4 @@ /**

NoopAnimationPlayer.prototype.play = function () {
var _this = this;
if (!this.hasStarted()) {
scheduleMicroTask(function () { return _this._onFinish(); });
this.triggerMicrotask();
this._onStart();

@@ -650,2 +985,9 @@ }

*/
NoopAnimationPlayer.prototype.triggerMicrotask = function () {
var _this = this;
scheduleMicroTask(function () { return _this._onFinish(); });
};
/**
* @return {?}
*/
NoopAnimationPlayer.prototype._onStart = function () {

@@ -717,3 +1059,6 @@ this._onStartFns.forEach(function (fn) { return fn(); });

this.parentPlayer = null;
var count = 0;
this.totalTime = 0;
var doneCount = 0;
var destroyCount = 0;
var startCount = 0;
var total = this._players.length;

@@ -727,8 +1072,19 @@ if (total == 0) {

player.onDone(function () {
if (++count >= total) {
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);
}

@@ -755,2 +1111,12 @@ /**

/**
* @return {?}
*/
AnimationGroupPlayer.prototype._onStart = function () {
if (!this.hasStarted()) {
this._onStartFns.forEach(function (fn) { return fn(); });
this._onStartFns = [];
this._started = true;
}
};
/**
* @param {?} fn

@@ -776,7 +1142,3 @@ * @return {?}

}
if (!this.hasStarted()) {
this._onStartFns.forEach(function (fn) { return fn(); });
this._onStartFns = [];
this._started = true;
}
this._onStart();
this._players.forEach(function (player) { return player.play(); });

@@ -802,7 +1164,11 @@ };

*/
AnimationGroupPlayer.prototype.destroy = function () {
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._destroyed = true;
this._onDestroyFns.forEach(function (fn) { return fn(); });

@@ -826,3 +1192,7 @@ this._onDestroyFns = [];

AnimationGroupPlayer.prototype.setPosition = function (p) {
this._players.forEach(function (player) { player.setPosition(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);
});
};

@@ -850,8 +1220,22 @@ /**

}());
/**
* @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;

@@ -861,5 +1245,6 @@ exports.style = style;

exports.trigger = trigger;
exports.AnimationPlayer = AnimationPlayer;
exports.useAnimation = useAnimation;
exports.NoopAnimationPlayer = NoopAnimationPlayer;
exports.ɵAnimationGroupPlayer = AnimationGroupPlayer;
exports.ɵPRE_STYLE = ɵPRE_STYLE;

@@ -866,0 +1251,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

15

bundles/animations.umd.min.js
/**
* @license Angular v4.2.0-beta.1
* @license Angular v4.2.0-rc.0
* (c) 2010-2017 Google, Inc. https://angular.io/
* License: MIT
*/
!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?factory(exports):"function"==typeof define&&define.amd?define(["exports"],factory):factory((global.ng=global.ng||{},global.ng.animations=global.ng.animations||{}))}(this,function(exports){"use strict";function trigger(name,definitions){return{name:name,definitions:definitions}}function animate(timings,styles){return void 0===styles&&(styles=null),{type:4,styles:styles,timings:timings}}function group(steps){return{type:3,steps:steps}}function sequence(steps){return{type:2,steps:steps}}function style(tokens){return{type:6,styles:tokens}}function state(name,styles){return{type:0,name:name,styles:styles}}function keyframes(steps){return{type:5,steps:steps}}function transition(stateChangeExpr,steps){return{type:1,expr:stateChangeExpr,animation:steps}}/**
!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?factory(exports):"function"==typeof define&&define.amd?define(["exports"],factory):factory((global.ng=global.ng||{},global.ng.animations=global.ng.animations||{}))}(this,function(exports){"use strict";function trigger(name,definitions){return{type:7,name:name,definitions:definitions,options:{}}}function animate(timings,styles){return void 0===styles&&(styles=null),{type:4,styles:styles,timings:timings}}function group(steps,options){return void 0===options&&(options=null),{type:3,steps:steps,options:options}}function sequence(steps,options){return void 0===options&&(options=null),{type:2,steps:steps,options:options}}function style(tokens){return{type:6,styles:tokens,offset:null}}function state(name,styles){return{type:0,name:name,styles:styles}}function keyframes(steps){return{type:5,steps:steps}}function transition(stateChangeExpr,steps,options){return void 0===options&&(options=null),{type:1,expr:stateChangeExpr,animation:steps,options:options}}function animation(steps,options){return void 0===options&&(options=null),{type:8,animation:steps,options:options}}function animateChild(options){return void 0===options&&(options=null),{type:9,options:options}}function useAnimation(animation,options){return void 0===options&&(options=null),{type:10,animation:animation,options:options}}function query(selector,animation,options){return void 0===options&&(options=null),{type:11,selector:selector,animation:animation,options:options}}function stagger(timings,animation){return{type:12,timings:timings,animation:animation}}/**
* @license

@@ -16,7 +16,14 @@ * Copyright Google Inc. All Rights Reserved.

function scheduleMicroTask(cb){Promise.resolve(null).then(cb)}/**
* @license Angular v4.2.0-beta.1
* @license Angular v4.2.0-rc.0
* (c) 2010-2017 Google, Inc. https://angular.io/
* License: MIT
*/
var AUTO_STYLE="*",AnimationPlayer=function(){function AnimationPlayer(){}return AnimationPlayer.prototype.onDone=function(fn){},AnimationPlayer.prototype.onStart=function(fn){},AnimationPlayer.prototype.onDestroy=function(fn){},AnimationPlayer.prototype.init=function(){},AnimationPlayer.prototype.hasStarted=function(){},AnimationPlayer.prototype.play=function(){},AnimationPlayer.prototype.pause=function(){},AnimationPlayer.prototype.restart=function(){},AnimationPlayer.prototype.finish=function(){},AnimationPlayer.prototype.destroy=function(){},AnimationPlayer.prototype.reset=function(){},AnimationPlayer.prototype.setPosition=function(p){},AnimationPlayer.prototype.getPosition=function(){},Object.defineProperty(AnimationPlayer.prototype,"parentPlayer",{get:function(){throw new Error("NOT IMPLEMENTED: Base Class")},set:function(player){throw new Error("NOT IMPLEMENTED: Base Class")},enumerable:!0,configurable:!0}),AnimationPlayer}(),NoopAnimationPlayer=function(){function NoopAnimationPlayer(){this._onDoneFns=[],this._onStartFns=[],this._onDestroyFns=[],this._started=!1,this._destroyed=!1,this._finished=!1,this.parentPlayer=null}return NoopAnimationPlayer.prototype._onFinish=function(){this._finished||(this._finished=!0,this._onDoneFns.forEach(function(fn){return fn()}),this._onDoneFns=[])},NoopAnimationPlayer.prototype.onStart=function(fn){this._onStartFns.push(fn)},NoopAnimationPlayer.prototype.onDone=function(fn){this._onDoneFns.push(fn)},NoopAnimationPlayer.prototype.onDestroy=function(fn){this._onDestroyFns.push(fn)},NoopAnimationPlayer.prototype.hasStarted=function(){return this._started},NoopAnimationPlayer.prototype.init=function(){},NoopAnimationPlayer.prototype.play=function(){var _this=this;this.hasStarted()||(scheduleMicroTask(function(){return _this._onFinish()}),this._onStart()),this._started=!0},NoopAnimationPlayer.prototype._onStart=function(){this._onStartFns.forEach(function(fn){return fn()}),this._onStartFns=[]},NoopAnimationPlayer.prototype.pause=function(){},NoopAnimationPlayer.prototype.restart=function(){},NoopAnimationPlayer.prototype.finish=function(){this._onFinish()},NoopAnimationPlayer.prototype.destroy=function(){this._destroyed||(this._destroyed=!0,this.hasStarted()||this._onStart(),this.finish(),this._onDestroyFns.forEach(function(fn){return fn()}),this._onDestroyFns=[])},NoopAnimationPlayer.prototype.reset=function(){},NoopAnimationPlayer.prototype.setPosition=function(p){},NoopAnimationPlayer.prototype.getPosition=function(){return 0},NoopAnimationPlayer}(),AnimationGroupPlayer=function(){function AnimationGroupPlayer(_players){var _this=this;this._players=_players,this._onDoneFns=[],this._onStartFns=[],this._finished=!1,this._started=!1,this._destroyed=!1,this._onDestroyFns=[],this.parentPlayer=null;var count=0,total=this._players.length;0==total?scheduleMicroTask(function(){return _this._onFinish()}):this._players.forEach(function(player){player.parentPlayer=_this,player.onDone(function(){++count>=total&&_this._onFinish()})})}return AnimationGroupPlayer.prototype._onFinish=function(){this._finished||(this._finished=!0,this._onDoneFns.forEach(function(fn){return fn()}),this._onDoneFns=[])},AnimationGroupPlayer.prototype.init=function(){this._players.forEach(function(player){return player.init()})},AnimationGroupPlayer.prototype.onStart=function(fn){this._onStartFns.push(fn)},AnimationGroupPlayer.prototype.onDone=function(fn){this._onDoneFns.push(fn)},AnimationGroupPlayer.prototype.onDestroy=function(fn){this._onDestroyFns.push(fn)},AnimationGroupPlayer.prototype.hasStarted=function(){return this._started},AnimationGroupPlayer.prototype.play=function(){this.parentPlayer||this.init(),this.hasStarted()||(this._onStartFns.forEach(function(fn){return fn()}),this._onStartFns=[],this._started=!0),this._players.forEach(function(player){return player.play()})},AnimationGroupPlayer.prototype.pause=function(){this._players.forEach(function(player){return player.pause()})},AnimationGroupPlayer.prototype.restart=function(){this._players.forEach(function(player){return player.restart()})},AnimationGroupPlayer.prototype.finish=function(){this._onFinish(),this._players.forEach(function(player){return player.finish()})},AnimationGroupPlayer.prototype.destroy=function(){this._destroyed||(this._onFinish(),this._players.forEach(function(player){return player.destroy()}),this._destroyed=!0,this._onDestroyFns.forEach(function(fn){return fn()}),this._onDestroyFns=[])},AnimationGroupPlayer.prototype.reset=function(){this._players.forEach(function(player){return player.reset()}),this._destroyed=!1,this._finished=!1,this._started=!1},AnimationGroupPlayer.prototype.setPosition=function(p){this._players.forEach(function(player){player.setPosition(p)})},AnimationGroupPlayer.prototype.getPosition=function(){var min=0;return this._players.forEach(function(player){var p=player.getPosition();min=Math.min(p,min)}),min},Object.defineProperty(AnimationGroupPlayer.prototype,"players",{get:function(){return this._players},enumerable:!0,configurable:!0}),AnimationGroupPlayer}();exports.AUTO_STYLE=AUTO_STYLE,exports.animate=animate,exports.group=group,exports.keyframes=keyframes,exports.sequence=sequence,exports.state=state,exports.style=style,exports.transition=transition,exports.trigger=trigger,exports.AnimationPlayer=AnimationPlayer,exports.NoopAnimationPlayer=NoopAnimationPlayer,exports.ɵAnimationGroupPlayer=AnimationGroupPlayer,Object.defineProperty(exports,"__esModule",{value:!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
*/
var AnimationBuilder=function(){function AnimationBuilder(){}return AnimationBuilder.prototype.build=function(animation){},AnimationBuilder}(),AnimationFactory=function(){function AnimationFactory(){}return AnimationFactory.prototype.create=function(element,options){},AnimationFactory}(),AUTO_STYLE="*",NoopAnimationPlayer=function(){function NoopAnimationPlayer(){this._onDoneFns=[],this._onStartFns=[],this._onDestroyFns=[],this._started=!1,this._destroyed=!1,this._finished=!1,this.parentPlayer=null,this.totalTime=0}return NoopAnimationPlayer.prototype._onFinish=function(){this._finished||(this._finished=!0,this._onDoneFns.forEach(function(fn){return fn()}),this._onDoneFns=[])},NoopAnimationPlayer.prototype.onStart=function(fn){this._onStartFns.push(fn)},NoopAnimationPlayer.prototype.onDone=function(fn){this._onDoneFns.push(fn)},NoopAnimationPlayer.prototype.onDestroy=function(fn){this._onDestroyFns.push(fn)},NoopAnimationPlayer.prototype.hasStarted=function(){return this._started},NoopAnimationPlayer.prototype.init=function(){},NoopAnimationPlayer.prototype.play=function(){this.hasStarted()||(this.triggerMicrotask(),this._onStart()),this._started=!0},NoopAnimationPlayer.prototype.triggerMicrotask=function(){var _this=this;scheduleMicroTask(function(){return _this._onFinish()})},NoopAnimationPlayer.prototype._onStart=function(){this._onStartFns.forEach(function(fn){return fn()}),this._onStartFns=[]},NoopAnimationPlayer.prototype.pause=function(){},NoopAnimationPlayer.prototype.restart=function(){},NoopAnimationPlayer.prototype.finish=function(){this._onFinish()},NoopAnimationPlayer.prototype.destroy=function(){this._destroyed||(this._destroyed=!0,this.hasStarted()||this._onStart(),this.finish(),this._onDestroyFns.forEach(function(fn){return fn()}),this._onDestroyFns=[])},NoopAnimationPlayer.prototype.reset=function(){},NoopAnimationPlayer.prototype.setPosition=function(p){},NoopAnimationPlayer.prototype.getPosition=function(){return 0},NoopAnimationPlayer}(),AnimationGroupPlayer=function(){function AnimationGroupPlayer(_players){var _this=this;this._players=_players,this._onDoneFns=[],this._onStartFns=[],this._finished=!1,this._started=!1,this._destroyed=!1,this._onDestroyFns=[],this.parentPlayer=null,this.totalTime=0;var doneCount=0,destroyCount=0,startCount=0,total=this._players.length;0==total?scheduleMicroTask(function(){return _this._onFinish()}):this._players.forEach(function(player){player.parentPlayer=_this,player.onDone(function(){++doneCount>=total&&_this._onFinish()}),player.onDestroy(function(){++destroyCount>=total&&_this._onDestroy()}),player.onStart(function(){++startCount>=total&&_this._onStart()})}),this.totalTime=this._players.reduce(function(time,player){return Math.max(time,player.totalTime)},0)}return AnimationGroupPlayer.prototype._onFinish=function(){this._finished||(this._finished=!0,this._onDoneFns.forEach(function(fn){return fn()}),this._onDoneFns=[])},AnimationGroupPlayer.prototype.init=function(){this._players.forEach(function(player){return player.init()})},AnimationGroupPlayer.prototype.onStart=function(fn){this._onStartFns.push(fn)},AnimationGroupPlayer.prototype._onStart=function(){this.hasStarted()||(this._onStartFns.forEach(function(fn){return fn()}),this._onStartFns=[],this._started=!0)},AnimationGroupPlayer.prototype.onDone=function(fn){this._onDoneFns.push(fn)},AnimationGroupPlayer.prototype.onDestroy=function(fn){this._onDestroyFns.push(fn)},AnimationGroupPlayer.prototype.hasStarted=function(){return this._started},AnimationGroupPlayer.prototype.play=function(){this.parentPlayer||this.init(),this._onStart(),this._players.forEach(function(player){return player.play()})},AnimationGroupPlayer.prototype.pause=function(){this._players.forEach(function(player){return player.pause()})},AnimationGroupPlayer.prototype.restart=function(){this._players.forEach(function(player){return player.restart()})},AnimationGroupPlayer.prototype.finish=function(){this._onFinish(),this._players.forEach(function(player){return player.finish()})},AnimationGroupPlayer.prototype.destroy=function(){this._onDestroy()},AnimationGroupPlayer.prototype._onDestroy=function(){this._destroyed||(this._destroyed=!0,this._onFinish(),this._players.forEach(function(player){return player.destroy()}),this._onDestroyFns.forEach(function(fn){return fn()}),this._onDestroyFns=[])},AnimationGroupPlayer.prototype.reset=function(){this._players.forEach(function(player){return player.reset()}),this._destroyed=!1,this._finished=!1,this._started=!1},AnimationGroupPlayer.prototype.setPosition=function(p){var timeAtPosition=p*this.totalTime;this._players.forEach(function(player){var position=player.totalTime?Math.min(1,timeAtPosition/player.totalTime):1;player.setPosition(position)})},AnimationGroupPlayer.prototype.getPosition=function(){var min=0;return this._players.forEach(function(player){var p=player.getPosition();min=Math.min(p,min)}),min},Object.defineProperty(AnimationGroupPlayer.prototype,"players",{get:function(){return this._players},enumerable:!0,configurable:!0}),AnimationGroupPlayer}(),ɵ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:!0})});
//# sourceMappingURL=animations.umd.min.js.map

4

package.json
{
"name": "@angular/animations",
"version": "4.2.0-beta.1",
"version": "4.2.0-rc.0",
"description": "Angular - animations integration with web-animationss",

@@ -12,3 +12,3 @@ "main": "./bundles/animations.umd.js",

"peerDependencies": {
"@angular/core": "4.2.0-beta.1"
"@angular/core": "4.2.0-rc.0"
},

@@ -15,0 +15,0 @@ "repository": {

464

src/animation_metadata.d.ts

@@ -12,2 +12,5 @@ /**

/**
* Metadata representing the entry of animations. Instances of this interface are created internally
* within the Angular animation DSL.
*
* @experimental Animation support is experimental.

@@ -21,4 +24,42 @@ */

/**
* `AnimationOptions` represents options that can be passed into most animation DSL methods.
* When options are provided, the delay value of an animation can be changed and animation input
* parameters can be passed in to change styling and timing data when an animation is started.
*
* The following animation DSL functions are able to accept animation option data:
*
* - {@link transition transition()}
* - {@link sequence sequence()}
* - {@link group group()}
* - {@link query query()}
* - {@link animation animation()}
* - {@link useAnimation useAnimation()}
* - {@link animateChild animateChild()}
*
* Programmatic animations built using {@link AnimationBuilder the AnimationBuilder service} also
* make use of AnimationOptions.
*
* @experimental Animation support is experimental.
*/
export interface AnimationOptions {
delay?: number | string;
params?: {
[name: string]: any;
};
}
/**
* Metadata representing the entry of animations. Instances of this interface are created internally
* within the Angular animation DSL when {@link animateChild animateChild()} is used.
*
* @experimental Animation support is experimental.
*/
export interface AnimateChildOptions extends AnimationOptions {
duration?: number | string;
}
/**
* Metadata representing the entry of animations. Usages of this enum are created
* each time an animation DSL function is used.
*
* @experimental Animation support is experimental.
*/
export declare const enum AnimationMetadataType {

@@ -30,4 +71,10 @@ State = 0,

Animate = 4,
KeyframeSequence = 5,
Keyframes = 5,
Style = 6,
Trigger = 7,
Reference = 8,
AnimateChild = 9,
AnimateRef = 10,
Query = 11,
Stagger = 12,
}

@@ -45,10 +92,18 @@ /**

/**
* Metadata representing the entry of animations. Instances of this interface are provided via the
* animation DSL when the {@link trigger trigger animation function} is called.
*
* @experimental Animation support is experimental.
*/
export interface AnimationTriggerMetadata {
export interface AnimationTriggerMetadata extends AnimationMetadata {
name: string;
definitions: AnimationMetadata[];
options: {
params?: {
[name: string]: any;
};
} | null;
}
/**
* Metadata representing the entry of animations. Instances of this class are provided via the
* Metadata representing the entry of animations. Instances of this interface are provided via the
* animation DSL when the {@link state state animation function} is called.

@@ -63,3 +118,3 @@ *

/**
* Metadata representing the entry of animations. Instances of this class are provided via the
* Metadata representing the entry of animations. Instances of this interface are provided via the
* animation DSL when the {@link transition transition animation function} is called.

@@ -70,7 +125,23 @@ *

export interface AnimationTransitionMetadata extends AnimationMetadata {
expr: string | ((fromState: string, toState: string) => boolean);
expr: string;
animation: AnimationMetadata | AnimationMetadata[];
options: AnimationOptions | null;
}
/**
* Metadata representing the entry of animations. Instances of this class are provided via the
* @experimental Animation support is experimental.
*/
export interface AnimationReferenceMetadata extends AnimationMetadata {
animation: AnimationMetadata | AnimationMetadata[];
options: AnimationOptions | null;
}
/**
* @experimental Animation support is experimental.
*/
export interface AnimationQueryMetadata extends AnimationMetadata {
selector: string;
animation: AnimationMetadata | AnimationMetadata[];
options: AnimationQueryOptions | null;
}
/**
* Metadata representing the entry of animations. Instances of this interface are provided via the
* animation DSL when the {@link keyframes keyframes animation function} is called.

@@ -84,3 +155,3 @@ *

/**
* Metadata representing the entry of animations. Instances of this class are provided via the
* Metadata representing the entry of animations. Instances of this interface are provided via the
* animation DSL when the {@link style style animation function} is called.

@@ -91,11 +162,11 @@ *

export interface AnimationStyleMetadata extends AnimationMetadata {
styles: {
styles: '*' | {
[key: string]: string | number;
} | {
} | Array<{
[key: string]: string | number;
}[];
offset?: number;
} | '*'>;
offset: number | null;
}
/**
* Metadata representing the entry of animations. Instances of this class are provided via the
* Metadata representing the entry of animations. Instances of this interface are provided via the
* animation DSL when the {@link animate animate animation function} is called.

@@ -110,3 +181,22 @@ *

/**
* Metadata representing the entry of animations. Instances of this class are provided via the
* Metadata representing the entry of animations. Instances of this interface are provided via the
* animation DSL when the {@link animateChild animateChild animation function} is called.
*
* @experimental Animation support is experimental.
*/
export interface AnimationAnimateChildMetadata extends AnimationMetadata {
options: AnimationOptions | null;
}
/**
* Metadata representing the entry of animations. Instances of this interface are provided via the
* animation DSL when the {@link useAnimation useAnimation animation function} is called.
*
* @experimental Animation support is experimental.
*/
export interface AnimationAnimateRefMetadata extends AnimationMetadata {
animation: AnimationReferenceMetadata;
options: AnimationOptions | null;
}
/**
* Metadata representing the entry of animations. Instances of this interface are provided via the
* animation DSL when the {@link sequence sequence animation function} is called.

@@ -118,5 +208,6 @@ *

steps: AnimationMetadata[];
options: AnimationOptions | null;
}
/**
* Metadata representing the entry of animations. Instances of this class are provided via the
* Metadata representing the entry of animations. Instances of this interface are provided via the
* animation DSL when the {@link group group animation function} is called.

@@ -128,4 +219,25 @@ *

steps: AnimationMetadata[];
options: AnimationOptions | null;
}
/**
* Metadata representing the entry of animations. Instances of this interface are provided via the
* animation DSL when the {@link query query animation function} is called.
*
* @experimental Animation support is experimental.
*/
export interface AnimationQueryOptions extends AnimationOptions {
optional?: boolean;
limit?: number;
}
/**
* Metadata representing the entry of animations. Instances of this interface are provided via the
* animation DSL when the {@link stagger stagger animation function} is called.
*
* @experimental Animation support is experimental.
*/
export interface AnimationStaggerMetadata extends AnimationMetadata {
timings: string | number;
animation: AnimationMetadata | AnimationMetadata[];
}
/**
* `trigger` is an animation-specific function that is designed to be used inside of Angular's

@@ -259,3 +371,3 @@ animation DSL language. If this information is new, please navigate to the {@link

*/
export declare function group(steps: AnimationMetadata[]): AnimationGroupMetadata;
export declare function group(steps: AnimationMetadata[], options?: AnimationOptions | null): AnimationGroupMetadata;
/**

@@ -295,3 +407,3 @@ * `sequence` is an animation-specific function that is designed to be used inside of Angular's

*/
export declare function sequence(steps: AnimationMetadata[]): AnimationSequenceMetadata;
export declare function sequence(steps: AnimationMetadata[], options?: AnimationOptions | null): AnimationSequenceMetadata;
/**

@@ -339,5 +451,5 @@ * `style` is an animation-specific function that is designed to be used inside of Angular's

*/
export declare function style(tokens: {
export declare function style(tokens: '*' | {
[key: string]: string | number;
} | Array<{
} | Array<'*' | {
[key: string]: string | number;

@@ -547,2 +659,316 @@ }>): AnimationStyleMetadata;

*/
export declare function transition(stateChangeExpr: string | ((fromState: string, toState: string) => boolean), steps: AnimationMetadata | AnimationMetadata[]): AnimationTransitionMetadata;
export declare function transition(stateChangeExpr: string, steps: AnimationMetadata | AnimationMetadata[], options?: AnimationOptions | null): AnimationTransitionMetadata;
/**
* `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.
*/
export declare function animation(steps: AnimationMetadata | AnimationMetadata[], options?: AnimationOptions | null): AnimationReferenceMetadata;
/**
* `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.
*/
export declare function animateChild(options?: AnimateChildOptions | null): AnimationAnimateChildMetadata;
/**
* `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.
*/
export declare function useAnimation(animation: AnimationReferenceMetadata, options?: AnimationOptions | null): AnimationAnimateRefMetadata;
/**
* `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.
*/
export declare function query(selector: string, animation: AnimationMetadata | AnimationMetadata[], options?: AnimationQueryOptions | null): AnimationQueryMetadata;
/**
* `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.
*/
export declare function stagger(timings: string | number, animation: AnimationMetadata | AnimationMetadata[]): AnimationStaggerMetadata;

3

src/animations.d.ts

@@ -13,5 +13,6 @@ /**

*/
export { AnimationBuilder, AnimationFactory } from './animation_builder';
export { AnimationEvent } from './animation_event';
export { AUTO_STYLE, AnimateTimings, AnimationAnimateMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationSequenceMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, AnimationTriggerMetadata, animate, group, keyframes, sequence, state, style, transition, trigger, ɵStyleData } from './animation_metadata';
export { AUTO_STYLE, AnimateChildOptions, AnimateTimings, AnimationAnimateChildMetadata, AnimationAnimateMetadata, AnimationAnimateRefMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationOptions, AnimationQueryMetadata, AnimationQueryOptions, AnimationReferenceMetadata, AnimationSequenceMetadata, AnimationStaggerMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, AnimationTriggerMetadata, animate, animateChild, animation, group, keyframes, query, sequence, stagger, state, style, transition, trigger, useAnimation, ɵStyleData } from './animation_metadata';
export { AnimationPlayer, NoopAnimationPlayer } from './players/animation_player';
export * from './private_export';

3

src/players/animation_group_player.d.ts

@@ -11,2 +11,3 @@ import { AnimationPlayer } from './animation_player';

parentPlayer: AnimationPlayer | null;
totalTime: number;
constructor(_players: AnimationPlayer[]);

@@ -16,2 +17,3 @@ private _onFinish();

onStart(fn: () => void): void;
private _onStart();
onDone(fn: () => void): void;

@@ -25,2 +27,3 @@ onDestroy(fn: () => void): void;

destroy(): void;
private _onDestroy();
reset(): void;

@@ -27,0 +30,0 @@ setPosition(p: number): void;

35

src/players/animation_player.d.ts
/**
* AnimationPlayer controls an animation sequence that was produced from a programmatic animation.
* (see {@link AnimationBuilder AnimationBuilder} for more information on how to create programmatic
* animations.)
*
* @experimental Animation support is experimental.
*/
export declare abstract class AnimationPlayer {
abstract onDone(fn: () => void): void;
abstract onStart(fn: () => void): void;
abstract onDestroy(fn: () => void): void;
abstract init(): void;
abstract hasStarted(): boolean;
abstract play(): void;
abstract pause(): void;
abstract restart(): void;
abstract finish(): void;
abstract destroy(): void;
abstract reset(): void;
abstract setPosition(p: any): void;
abstract getPosition(): number;
export interface AnimationPlayer {
onDone(fn: () => void): void;
onStart(fn: () => void): void;
onDestroy(fn: () => void): void;
init(): void;
hasStarted(): boolean;
play(): void;
pause(): void;
restart(): void;
finish(): void;
destroy(): void;
reset(): void;
setPosition(p: any): void;
getPosition(): number;
parentPlayer: AnimationPlayer | null;
readonly totalTime: number;
beforeDestroy?: () => any;
}

@@ -31,2 +37,3 @@ /**

parentPlayer: AnimationPlayer | null;
totalTime: number;
constructor();

@@ -33,0 +40,0 @@ private _onFinish();

1

src/private_export.d.ts

@@ -9,1 +9,2 @@ /**

export { AnimationGroupPlayer as ɵAnimationGroupPlayer } from './players/animation_group_player';
export declare const ɵPRE_STYLE = "!";
browser/src/animation_engine.d.ts
browser/src/dsl/animation_timeline_visitor.d.ts
browser/src/dsl/animation_validator_visitor.d.ts
browser/src/render/dom_animation_engine.d.ts
browser/src/render/noop_animation_engine.d.ts
@angular/animations.es5.js.map

Sorry, the diff of this file is not supported yet

@angular/animations.js.map

Sorry, the diff of this file is not supported yet

@angular/animations/browser.es5.js

Sorry, the diff of this file is too big to display

@angular/animations/browser.es5.js.map

Sorry, the diff of this file is not supported yet

@angular/animations/browser.js

Sorry, the diff of this file is too big to display

@angular/animations/browser.js.map

Sorry, the diff of this file is not supported yet

@angular/animations/browser/testing.es5.js.map

Sorry, the diff of this file is not supported yet

@angular/animations/browser/testing.js.map

Sorry, the diff of this file is not supported yet

bundles/animations-browser-testing.umd.js.map

Sorry, the diff of this file is not supported yet

bundles/animations-browser-testing.umd.min.js.map

Sorry, the diff of this file is not supported yet

bundles/animations-browser.umd.js

Sorry, the diff of this file is too big to display

bundles/animations-browser.umd.js.map

Sorry, the diff of this file is not supported yet

bundles/animations-browser.umd.min.js

Sorry, the diff of this file is too big to display

bundles/animations-browser.umd.min.js.map

Sorry, the diff of this file is not supported yet

bundles/animations.umd.js.map

Sorry, the diff of this file is not supported yet

bundles/animations.umd.min.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc