@angular/core 2.0.0-rc.1 → 2.0.0-rc.2

package/esm/src/animation/metadata.js

@@ -0,0 +1,565 @@
+import { BaseException } from '../facade/exceptions';
+import { NumberWrapper, isArray, isPresent, isString } from '../facade/lang';
+export const AUTO_STYLE = '*';
+/**
+ * Metadata representing the entry of animations.
+ * Instances of this class are provided via the animation DSL when the {@link trigger trigger
+ * animation function} is called.
+ */
+export class AnimationEntryMetadata {
+    constructor(name, definitions) {
+        this.name = name;
+        this.definitions = definitions;
+    }
+}
+export class AnimationStateMetadata {
+}
+/**
+ * Metadata representing the entry of animations.
+ * Instances of this class are provided via the animation DSL when the {@link state state animation
+ * function} is called.
+ */
+export class AnimationStateDeclarationMetadata extends AnimationStateMetadata {
+    constructor(stateNameExpr, styles) {
+        super();
+        this.stateNameExpr = stateNameExpr;
+        this.styles = styles;
+    }
+}
+/**
+ * Metadata representing the entry of animations.
+ * Instances of this class are provided via the animation DSL when the
+ * {@link transition transition animation function} is called.
+ */
+export class AnimationStateTransitionMetadata extends AnimationStateMetadata {
+    constructor(stateChangeExpr, steps) {
+        super();
+        this.stateChangeExpr = stateChangeExpr;
+        this.steps = steps;
+    }
+}
+export class AnimationMetadata {
+}
+/**
+ * Metadata representing the entry of animations.
+ * Instances of this class are provided via the animation DSL when the {@link keyframes keyframes
+ * animation function} is called.
+ */
+export class AnimationKeyframesSequenceMetadata extends AnimationMetadata {
+    constructor(steps) {
+        super();
+        this.steps = steps;
+    }
+}
+/**
+ * Metadata representing the entry of animations.
+ * Instances of this class are provided via the animation DSL when the {@link style style animation
+ * function} is called.
+ */
+export class AnimationStyleMetadata extends AnimationMetadata {
+    constructor(styles, offset = null) {
+        super();
+        this.styles = styles;
+        this.offset = offset;
+    }
+}
+/**
+ * Metadata representing the entry of animations.
+ * Instances of this class are provided via the animation DSL when the {@link animate animate
+ * animation function} is called.
+ */
+export class AnimationAnimateMetadata extends AnimationMetadata {
+    constructor(timings, styles) {
+        super();
+        this.timings = timings;
+        this.styles = styles;
+    }
+}
+export class AnimationWithStepsMetadata extends AnimationMetadata {
+    constructor() {
+        super();
+    }
+    get steps() { throw new BaseException('NOT IMPLEMENTED: Base Class'); }
+}
+/**
+ * Metadata representing the entry of animations.
+ * Instances of this class are provided via the animation DSL when the {@link sequence sequence
+ * animation function} is called.
+ */
+export class AnimationSequenceMetadata extends AnimationWithStepsMetadata {
+    constructor(_steps) {
+        super();
+        this._steps = _steps;
+    }
+    get steps() { return this._steps; }
+}
+/**
+ * Metadata representing the entry of animations.
+ * Instances of this class are provided via the animation DSL when the {@link group group animation
+ * function} is called.
+ */
+export class AnimationGroupMetadata extends AnimationWithStepsMetadata {
+    constructor(_steps) {
+        super();
+        this._steps = _steps;
+    }
+    get steps() { return this._steps; }
+}
+/**
+ * `animate` is an animation-specific function that is designed to be used inside of Angular2's
+ * animation
+ * DSL language. If this information is new, please navigate to the
+ * {@link ComponentMetadata#animations-anchor component animations metadata
+ * page} to gain a better understanding of how animations in Angular2 are used.
+ *
+ * `animate` specifies an animation step that will apply the provided `styles` data for a given
+ * amount of
+ * time based on the provided `timing` expression value. Calls to `animate` are expected to be
+ * used within {@link sequence an animation sequence}, {@link group group}, or {@link transition
+ * transition}.
+ *
+ * ### Usage
+ *
+ * The `animate` function accepts two input parameters: `timing` and `styles`:
+ *
+ * - `timing` is a string based value that can be a combination of a duration with optional
+ * delay and easing values. The format for the expression breaks down to `duration delay easing`
+ * (therefore a value such as `1s 100ms ease-out` will be parse itself into `duration=1000,
+ * delay=100, easing=ease-out`.
+ * If a numeric value is provided then that will be used as the `duration` value in millisecond
+ * form.
+ * - `styles` is the style input data which can either be a call to {@link style style} or {@link
+ * keyframes keyframes}.
+ * If left empty then the styles from the destination state will be collected and used (this is
+ * useful when
+ * describing an animation step that will complete an animation by {@link
+ * transition#the-final-animate-call animating to the final state}).
+ *
+ * ```typescript
+ * // various functions for specifying timing data
+ * animate(500, style(...))
+ * animate("1s", style(...))
+ * animate("100ms 0.5s", style(...))
+ * animate("5s ease", style(...))
+ * animate("5s 10ms cubic-bezier(.17,.67,.88,.1)", style(...))
+ *
+ * // either style() of keyframes() can be used
+ * animate(500, style({ background: "red" }))
+ * animate(500, keyframes([
+ *   style({ background: "blue" })),
+ *   style({ background: "red" }))
+ * ])
+ * ```
+ *
+ * ### Example ([live demo](http://plnkr.co/edit/Kez8XGWBxWue7qP7nNvF?p=preview))
+ *
+ * {@example core/animation/ts/dsl/animation_example.ts region='Component'}
+ */
+export function animate(timing, styles = null) {
+    var stylesEntry = styles;
+    if (!isPresent(stylesEntry)) {
+        var EMPTY_STYLE = {};
+        stylesEntry = new AnimationStyleMetadata([EMPTY_STYLE], 1);
+    }
+    return new AnimationAnimateMetadata(timing, stylesEntry);
+}
+/**
+ * `group` is an animation-specific function that is designed to be used inside of Angular2's
+ * animation
+ * DSL language. If this information is new, please navigate to the
+ * {@link ComponentMetadata#animations-anchor component animations metadata
+ * page} to gain a better understanding of how animations in Angular2 are used.
+ *
+ * `group` specifies a list of animation steps that are all run in parallel. Grouped animations
+ * are useful when a series of styles must be animated/closed off
+ * at different statrting/ending times.
+ *
+ * The `group` function can either be used within a {@link sequence sequence} or a {@link transition
+ * transition}
+ * and it will only continue to the next instruction once all of the inner animation steps
+ * have completed.
+ *
+ * ### Usage
+ *
+ * The `steps` data that is passed into the `group` animation function can either consist
+ * of {@link style style} or {@link animate animate} function calls. Each call to `style()` or
+ * `animate()`
+ * within a group will be executed instantly (use {@link keyframes keyframes} or a
+ * {@link animate#usage animate() with a delay value} to offset styles to be applied at a later
+ * time).
+ *
+ * ```typescript
+ * group([
+ *   animate("1s", { background: "black" }))
+ *   animate("2s", { color: "white" }))
+ * ])
+ * ```
+ *
+ * ### Example ([live demo](http://plnkr.co/edit/Kez8XGWBxWue7qP7nNvF?p=preview))
+ *
+ * {@example core/animation/ts/dsl/animation_example.ts region='Component'}
+ */
+export function group(steps) {
+    return new AnimationGroupMetadata(steps);
+}
+/**
+ * `sequence` is an animation-specific function that is designed to be used inside of Angular2's
+ * animation
+ * DSL language. If this information is new, please navigate to the
+ * {@link ComponentMetadata#animations-anchor component animations metadata
+ * page} to gain a better understanding of how animations in Angular2 are used.
+ *
+ * `sequence` Specifies a list of animation steps that are run one by one. (`sequence` is used
+ * by default when an array is passed as animation data into {@link transition transition}.)
+ *
+ * The `sequence` function can either be used within a {@link group group} or a {@link transition
+ * transition}
+ * and it will only continue to the next instruction once each of the inner animation steps
+ * have completed.
+ *
+ * To perform animation styling in parallel with other animation steps then
+ * have a look at the {@link group group} animation function.
+ *
+ * ### Usage
+ *
+ * The `steps` data that is passed into the `sequence` animation function can either consist
+ * of {@link style style} or {@link animate animate} function calls. A call to `style()` will apply
+ * the
+ * provided styling data immediately while a call to `animate()` will apply its styling
+ * data over a given time depending on its timing data.
+ *
+ * ```typescript
+ * sequence([
+ *   style({ opacity: 0 })),
+ *   animate("1s", { opacity: 1 }))
+ * ])
+ * ```
+ *
+ * ### Example ([live demo](http://plnkr.co/edit/Kez8XGWBxWue7qP7nNvF?p=preview))
+ *
+ * {@example core/animation/ts/dsl/animation_example.ts region='Component'}
+ */
+export function sequence(steps) {
+    return new AnimationSequenceMetadata(steps);
+}
+/**
+ * `style` is an animation-specific function that is designed to be used inside of Angular2's
+ * animation
+ * DSL language. If this information is new, please navigate to the
+ * {@link ComponentMetadata#animations-anchor component animations metadata
+ * page} to gain a better understanding of how animations in Angular2 are used.
+ *
+ * `style` declares a key/value object containing CSS properties/styles that can then
+ * be used for {@link state animation states}, within an {@link sequence animation sequence}, or as
+ * styling data for both {@link animate animate} and {@link keyframes keyframes}.
+ *
+ * ### Usage
+ *
+ * `style` takes in a key/value string map as data and expects one or more CSS property/value
+ * pairs to be defined.
+ *
+ * ```typescript
+ * // string values are used for css properties
+ * style({ background: "red", color: "blue" })
+ *
+ * // numerical (pixel) values are also supported
+ * style({ width: 100, height: 0 })
+ * ```
+ *
+ * #### Auto-styles (using `*`)
+ *
+ * When an asterix (`*`) character is used as a value then it will be detected from the element
+ * being animated
+ * and applied as animation data when the animation starts.
+ *
+ * This feature proves useful for a state depending on layout and/or environment factors; in such
+ * cases
+ * the styles are calculated just before the animation starts.
+ *
+ * ```typescript
+ * // the steps below will animate from 0 to the
+ * // actual height of the element
+ * style({ height: 0 }),
+ * animate("1s", style({ height: "*" }))
+ * ```
+ *
+ * ### Example ([live demo](http://plnkr.co/edit/Kez8XGWBxWue7qP7nNvF?p=preview))
+ *
+ * {@example core/animation/ts/dsl/animation_example.ts region='Component'}
+ */
+export function style(tokens) {
+    var input;
+    var offset = null;
+    if (isString(tokens)) {
+        input = [tokens];
+    }
+    else {
+        if (isArray(tokens)) {
+            input = tokens;
+        }
+        else {
+            input = [tokens];
+        }
+        input.forEach(entry => {
+            var entryOffset = entry['offset'];
+            if (isPresent(entryOffset)) {
+                offset = offset == null ? NumberWrapper.parseFloat(entryOffset) : offset;
+            }
+        });
+    }
+    return new AnimationStyleMetadata(input, offset);
+}
+/**
+ * `state` is an animation-specific function that is designed to be used inside of Angular2's
+ * animation
+ * DSL language. If this information is new, please navigate to the
+ * {@link ComponentMetadata#animations-anchor component animations metadata
+ * page} to gain a better understanding of how animations in Angular2 are used.
+ *
+ * `state` declares an animation state within the given trigger. When a state is
+ * active within a component then its associated styles will persist on
+ * the element that the trigger is attached to (even when the animation ends).
+ *
+ * To animate between states, have a look at the animation {@link transition transition}
+ * DSL function. To register states to an animation trigger please have a look
+ * at the {@link trigger trigger} function.
+ *
+ * #### The `void` state
+ *
+ * The `void` state value is a reserved word that angular uses to determine when the element is not
+ * apart
+ * of the application anymore (e.g. when an `ngIf` evaluates to false then the state of the
+ * associated element
+ * is void).
+ *
+ * #### The `*` (default) state
+ *
+ * The `*` state (when styled) is a fallback state that will be used if
+ * the state that is being animated is not declared within the trigger.
+ *
+ * ### Usage
+ *
+ * `state` will declare an animation state with its associated styles
+ * within the given trigger.
+ *
+ * - `stateNameExpr` can be one or more state names separated by commas.
+ * - `styles` refers to the {@link style styling data} that will be persisted on the element once
+ * the state
+ * has been reached.
+ *
+ * ```typescript
+ * // "void" is a reserved name for a state and is used to represent
+ * // the state in which an element is detached from from the application.
+ * state("void", style({ height: 0 }))
+ *
+ * // user-defined states
+ * state("closed", style({ height: 0 }))
+ * state("open, visible", style({ height: "*" }))
+ * ```
+ *
+ * ### Example ([live demo](http://plnkr.co/edit/Kez8XGWBxWue7qP7nNvF?p=preview))
+ *
+ * {@example core/animation/ts/dsl/animation_example.ts region='Component'}
+ */
+export function state(stateNameExpr, styles) {
+    return new AnimationStateDeclarationMetadata(stateNameExpr, styles);
+}
+/**
+ * `keyframes` is an animation-specific function that is designed to be used inside of Angular2's
+ * animation
+ * DSL language. If this information is new, please navigate to the
+ * {@link ComponentMetadata#animations-anchor component animations metadata
+ * page} to gain a better understanding of how animations in Angular2 are used.
+ *
+ * `keyframes` specifies a collection of {@link style style} entries each optionally characterized
+ * by an `offset` value.
+ *
+ * ### Usage
+ *
+ * The `keyframes` animation function is designed to be used alongside the {@link animate animate}
+ * animation function. Instead of applying animations from where they are
+ * currently to their destination, keyframes can describe how each style entry is applied
+ * and at what point within the animation arc (much like CSS Keyframe Animations do).
+ *
+ * For each `style()` entry an `offset` value can be set. Doing so allows to specifiy at
+ * what percentage of the animate time the styles will be applied.
+ *
+ * ```typescript
+ * // the provided offset values describe when each backgroundColor value is applied.
+ * animate("5s", keyframes([
+ *   style({ backgroundColor: "red", offset: 0 }),
+ *   style({ backgroundColor: "blue", offset: 0.2 }),
+ *   style({ backgroundColor: "orange", offset: 0.3 }),
+ *   style({ backgroundColor: "black", offset: 1 })
+ * ]))
+ * ```
+ *
+ * Alternatively, if there are no `offset` values used within the style entries then the offsets
+ * will
+ * be calculated automatically.
+ *
+ * ```typescript
+ * animate("5s", keyframes([
+ *   style({ backgroundColor: "red" }) // offset = 0
+ *   style({ backgroundColor: "blue" }) // offset = 0.33
+ *   style({ backgroundColor: "orange" }) // offset = 0.66
+ *   style({ backgroundColor: "black" }) // offset = 1
+ * ]))
+ * ```
+ *
+ * ### Example ([live demo](http://plnkr.co/edit/Kez8XGWBxWue7qP7nNvF?p=preview))
+ *
+ * {@example core/animation/ts/dsl/animation_example.ts region='Component'}
+ */
+export function keyframes(steps) {
+    return new AnimationKeyframesSequenceMetadata(steps);
+}
+/**
+ * `transition` is an animation-specific function that is designed to be used inside of Angular2's
+ * animation
+ * DSL language. If this information is new, please navigate to the
+ * {@link ComponentMetadata#animations-anchor component animations metadata
+ * page} to gain a better understanding of how animations in Angular2 are used.
+ *
+ * `transition` declares the {@link sequence sequence of animation steps} that will be run when the
+ * provided
+ * `stateChangeExpr` value is satisfied. The `stateChangeExpr` consists of a `state1 => state2`
+ * which consists
+ * of two known states (use an asterix (`*`) to refer to a dynamic starting and/or ending state).
+ *
+ * Animation transitions are placed within an {@link trigger animation trigger}. For an transition
+ * to animate to
+ * a state value and persist its styles then one or more {@link state animation states} is expected
+ * to be defined.
+ *
+ * ### Usage
+ *
+ * An animation transition is kicked off the `stateChangeExpr` predicate evaluates to true based on
+ * what the
+ * previous state is and what the current state has become. In other words, if a transition is
+ * defined that
+ * matches the old/current state criteria then the associated animation will be triggered.
+ *
+ * ```typescript
+ * // all transition/state changes are defined within an animation trigger
+ * trigger("myAnimationTrigger", [
+ *   // if a state is defined then its styles will be persisted when the
+ *   // animation has fully completed itself
+ *   state("on", style({ background: "green" })),
+ *   state("off", style({ background: "grey" })),
+ *
+ *   // a transition animation that will be kicked off when the state value
+ *   // bound to "myAnimationTrigger" changes from "on" to "off"
+ *   transition("on => off", animate(500)),
+ *
+ *   // it is also possible to do run the same animation for both directions
+ *   transition("on <=> off", animate(500)),
+ *
+ *   // or to define multiple states pairs separated by commas
+ *   transition("on => off, off => void", animate(500)),
+ *
+ *   // this is a catch-all state change for when an element is inserted into
+ *   // the page and the destination state is unknown
+ *   transition("void => *", [
+ *     style({ opacity: 0 }),
+ *     animate(500)
+ *   ]),
+ *
+ *   // this will capture a state change between any states
+ *   transition("* => *", animate("1s 0s")),
+ * ])
+ * ```
+ *
+ * The template associated with this component will make use of the `myAnimationTrigger`
+ * animation trigger by binding to an element within its template code.
+ *
+ * ```html
+ * <!-- somewhere inside of my-component-tpl.html -->
+ * <div @myAnimationTrigger="myStatusExp">...</div>
+ * ```
+ *
+ * #### The final `animate` call
+ *
+ * If the final step within the transition steps is a call to `animate()` that **only**
+ * uses a timing value with **no style data** then it will be automatically used as the final
+ * animation
+ * arc for the element to animate itself to the final state. This involves an automatic mix of
+ * adding/removing CSS styles so that the element will be in the exact state it should be for the
+ * applied state to be presented correctly.
+ *
+ * ```
+ * // start off by hiding the element, but make sure that it animates properly to whatever state
+ * // is currently active for "myAnimationTrigger"
+ * transition("void => *", [
+ *   style({ opacity: 0 }),
+ *   animate(500)
+ * ])
+ * ```
+ *
+ * ### Example ([live demo](http://plnkr.co/edit/Kez8XGWBxWue7qP7nNvF?p=preview))
+ *
+ * {@example core/animation/ts/dsl/animation_example.ts region='Component'}
+ */
+export function transition(stateChangeExpr, steps) {
+    var animationData = isArray(steps) ? new AnimationSequenceMetadata(steps) :
+        steps;
+    return new AnimationStateTransitionMetadata(stateChangeExpr, animationData);
+}
+/**
+ * `trigger` is an animation-specific function that is designed to be used inside of Angular2's
+ * animation
+ * DSL language. If this information is new, please navigate to the
+ * {@link ComponentMetadata#animations-anchor component animations metadata
+ * page} to gain a better understanding of how animations in Angular2 are used.
+ *
+ * `trigger` Creates an animation trigger which will a list of {@link state state} and {@link
+ * transition transition}
+ * entries that will be evaluated when the expression bound to the trigger changes.
+ *
+ * Triggers are registered within the component annotation data under the
+ * {@link ComponentMetadata#animations-anchor animations section}. An animation trigger can
+ * be placed on an element within a template by referencing the name of the
+ * trigger followed by the expression value that the trigger is bound to
+ * (in the form of `@triggerName="expression"`.
+ *
+ * ### Usage
+ *
+ * `trigger` will create an animation trigger reference based on the provided `name` value.
+ * The provided `animation` value is expected to be an array consisting of {@link state state} and
+ * {@link transition transition}
+ * declarations.
+ *
+ * ```typescript
+ * @Component({
+ *   selector: 'my-component',
+ *   templateUrl: 'my-component-tpl.html',
+ *   animations: [
+ *     trigger("myAnimationTrigger", [
+ *       state(...),
+ *       state(...),
+ *       transition(...),
+ *       transition(...)
+ *     ])
+ *   ]
+ * })
+ * class MyComponent {
+ *   myStatusExp = "something";
+ * }
+ * ```
+ *
+ * The template associated with this component will make use of the `myAnimationTrigger`
+ * animation trigger by binding to an element within its template code.
+ *
+ * ```html
+ * <!-- somewhere inside of my-component-tpl.html -->
+ * <div @myAnimationTrigger="myStatusExp">...</div>
+ * ```
+ *
+ * ### Example ([live demo](http://plnkr.co/edit/Kez8XGWBxWue7qP7nNvF?p=preview))
+ *
+ * {@example core/animation/ts/dsl/animation_example.ts region='Component'}
+ */
+export function trigger(name, animation) {
+    return new AnimationEntryMetadata(name, animation);
+}
+//# sourceMappingURL=metadata.js.map

package/esm/src/animation/metadata.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metadata.js","sourceRoot":"","sources":["../../../../../../modules/@angular/core/src/animation/metadata.ts"],"names":[],"mappings":"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","sourcesContent":["import {BaseException} from '../facade/exceptions';\nimport {NumberWrapper, isArray, isPresent, isString, isStringMap} from '../facade/lang';\n\nexport const AUTO_STYLE = '*';\n\n/**\n * Metadata representing the entry of animations.\n * Instances of this class are provided via the animation DSL when the {@link trigger trigger\n * animation function} is called.\n */\nexport class AnimationEntryMetadata {\n  constructor(public name: string, public definitions: AnimationStateMetadata[]) {}\n}\n\nexport abstract class AnimationStateMetadata {}\n\n/**\n * Metadata representing the entry of animations.\n * Instances of this class are provided via the animation DSL when the {@link state state animation\n * function} is called.\n */\nexport class AnimationStateDeclarationMetadata extends AnimationStateMetadata {\n  constructor(public stateNameExpr: string, public styles: AnimationStyleMetadata) { super(); }\n}\n\n/**\n * Metadata representing the entry of animations.\n * Instances of this class are provided via the animation DSL when the\n * {@link transition transition animation function} is called.\n */\nexport class AnimationStateTransitionMetadata extends AnimationStateMetadata {\n  constructor(public stateChangeExpr: string, public steps: AnimationMetadata) { super(); }\n}\n\nexport abstract class AnimationMetadata {}\n\n/**\n * Metadata representing the entry of animations.\n * Instances of this class are provided via the animation DSL when the {@link keyframes keyframes\n * animation function} is called.\n */\nexport class AnimationKeyframesSequenceMetadata extends AnimationMetadata {\n  constructor(public steps: AnimationStyleMetadata[]) { super(); }\n}\n\n/**\n * Metadata representing the entry of animations.\n * Instances of this class are provided via the animation DSL when the {@link style style animation\n * function} is called.\n */\nexport class AnimationStyleMetadata extends AnimationMetadata {\n  constructor(\n      public styles: Array<string|{[key: string]: string | number}>, public offset: number = null) {\n    super();\n  }\n}\n\n/**\n * Metadata representing the entry of animations.\n * Instances of this class are provided via the animation DSL when the {@link animate animate\n * animation function} is called.\n */\nexport class AnimationAnimateMetadata extends AnimationMetadata {\n  constructor(\n      public timings: string|number,\n      public styles: AnimationStyleMetadata|AnimationKeyframesSequenceMetadata) {\n    super();\n  }\n}\n\nexport abstract class AnimationWithStepsMetadata extends AnimationMetadata {\n  constructor() { super(); }\n  get steps(): AnimationMetadata[] { throw new BaseException('NOT IMPLEMENTED: Base Class'); }\n}\n\n/**\n * Metadata representing the entry of animations.\n * Instances of this class are provided via the animation DSL when the {@link sequence sequence\n * animation function} is called.\n */\nexport class AnimationSequenceMetadata extends AnimationWithStepsMetadata {\n  constructor(private _steps: AnimationMetadata[]) { super(); }\n  get steps(): AnimationMetadata[] { return this._steps; }\n}\n\n/**\n * Metadata representing the entry of animations.\n * Instances of this class are provided via the animation DSL when the {@link group group animation\n * function} is called.\n */\nexport class AnimationGroupMetadata extends AnimationWithStepsMetadata {\n  constructor(private _steps: AnimationMetadata[]) { super(); }\n  get steps(): AnimationMetadata[] { return this._steps; }\n}\n\n/**\n * `animate` is an animation-specific function that is designed to be used inside of Angular2's\n * animation\n * DSL language. If this information is new, please navigate to the\n * {@link ComponentMetadata#animations-anchor component animations metadata\n * page} to gain a better understanding of how animations in Angular2 are used.\n *\n * `animate` specifies an animation step that will apply the provided `styles` data for a given\n * amount of\n * time based on the provided `timing` expression value. Calls to `animate` are expected to be\n * used within {@link sequence an animation sequence}, {@link group group}, or {@link transition\n * transition}.\n *\n * ### Usage\n *\n * The `animate` function accepts two input parameters: `timing` and `styles`:\n *\n * - `timing` is a string based value that can be a combination of a duration with optional\n * delay and easing values. The format for the expression breaks down to `duration delay easing`\n * (therefore a value such as `1s 100ms ease-out` will be parse itself into `duration=1000,\n * delay=100, easing=ease-out`.\n * If a numeric value is provided then that will be used as the `duration` value in millisecond\n * form.\n * - `styles` is the style input data which can either be a call to {@link style style} or {@link\n * keyframes keyframes}.\n * If left empty then the styles from the destination state will be collected and used (this is\n * useful when\n * describing an animation step that will complete an animation by {@link\n * transition#the-final-animate-call animating to the final state}).\n *\n * ```typescript\n * // various functions for specifying timing data\n * animate(500, style(...))\n * animate(\"1s\", style(...))\n * animate(\"100ms 0.5s\", style(...))\n * animate(\"5s ease\", style(...))\n * animate(\"5s 10ms cubic-bezier(.17,.67,.88,.1)\", style(...))\n *\n * // either style() of keyframes() can be used\n * animate(500, style({ background: \"red\" }))\n * animate(500, keyframes([\n *   style({ background: \"blue\" })),\n *   style({ background: \"red\" }))\n * ])\n * ```\n *\n * ### Example ([live demo](http://plnkr.co/edit/Kez8XGWBxWue7qP7nNvF?p=preview))\n *\n * {@example core/animation/ts/dsl/animation_example.ts region='Component'}\n */\nexport function animate(\n    timing: string | number, styles: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata =\n                                 null): AnimationAnimateMetadata {\n  var stylesEntry = styles;\n  if (!isPresent(stylesEntry)) {\n    var EMPTY_STYLE: {[key: string]: string | number} = {};\n    stylesEntry = new AnimationStyleMetadata([EMPTY_STYLE], 1);\n  }\n  return new AnimationAnimateMetadata(timing, stylesEntry);\n}\n\n/**\n * `group` is an animation-specific function that is designed to be used inside of Angular2's\n * animation\n * DSL language. If this information is new, please navigate to the\n * {@link ComponentMetadata#animations-anchor component animations metadata\n * page} to gain a better understanding of how animations in Angular2 are used.\n *\n * `group` specifies a list of animation steps that are all run in parallel. Grouped animations\n * are useful when a series of styles must be animated/closed off\n * at different statrting/ending times.\n *\n * The `group` function can either be used within a {@link sequence sequence} or a {@link transition\n * transition}\n * and it will only continue to the next instruction once all of the inner animation steps\n * have completed.\n *\n * ### Usage\n *\n * The `steps` data that is passed into the `group` animation function can either consist\n * of {@link style style} or {@link animate animate} function calls. Each call to `style()` or\n * `animate()`\n * within a group will be executed instantly (use {@link keyframes keyframes} or a\n * {@link animate#usage animate() with a delay value} to offset styles to be applied at a later\n * time).\n *\n * ```typescript\n * group([\n *   animate(\"1s\", { background: \"black\" }))\n *   animate(\"2s\", { color: \"white\" }))\n * ])\n * ```\n *\n * ### Example ([live demo](http://plnkr.co/edit/Kez8XGWBxWue7qP7nNvF?p=preview))\n *\n * {@example core/animation/ts/dsl/animation_example.ts region='Component'}\n */\nexport function group(steps: AnimationMetadata[]): AnimationGroupMetadata {\n  return new AnimationGroupMetadata(steps);\n}\n\n/**\n * `sequence` is an animation-specific function that is designed to be used inside of Angular2's\n * animation\n * DSL language. If this information is new, please navigate to the\n * {@link ComponentMetadata#animations-anchor component animations metadata\n * page} to gain a better understanding of how animations in Angular2 are used.\n *\n * `sequence` Specifies a list of animation steps that are run one by one. (`sequence` is used\n * by default when an array is passed as animation data into {@link transition transition}.)\n *\n * The `sequence` function can either be used within a {@link group group} or a {@link transition\n * transition}\n * and it will only continue to the next instruction once each of the inner animation steps\n * have completed.\n *\n * To perform animation styling in parallel with other animation steps then\n * have a look at the {@link group group} animation function.\n *\n * ### Usage\n *\n * The `steps` data that is passed into the `sequence` animation function can either consist\n * of {@link style style} or {@link animate animate} function calls. A call to `style()` will apply\n * the\n * provided styling data immediately while a call to `animate()` will apply its styling\n * data over a given time depending on its timing data.\n *\n * ```typescript\n * sequence([\n *   style({ opacity: 0 })),\n *   animate(\"1s\", { opacity: 1 }))\n * ])\n * ```\n *\n * ### Example ([live demo](http://plnkr.co/edit/Kez8XGWBxWue7qP7nNvF?p=preview))\n *\n * {@example core/animation/ts/dsl/animation_example.ts region='Component'}\n */\nexport function sequence(steps: AnimationMetadata[]): AnimationSequenceMetadata {\n  return new AnimationSequenceMetadata(steps);\n}\n\n/**\n * `style` is an animation-specific function that is designed to be used inside of Angular2's\n * animation\n * DSL language. If this information is new, please navigate to the\n * {@link ComponentMetadata#animations-anchor component animations metadata\n * page} to gain a better understanding of how animations in Angular2 are used.\n *\n * `style` declares a key/value object containing CSS properties/styles that can then\n * be used for {@link state animation states}, within an {@link sequence animation sequence}, or as\n * styling data for both {@link animate animate} and {@link keyframes keyframes}.\n *\n * ### Usage\n *\n * `style` takes in a key/value string map as data and expects one or more CSS property/value\n * pairs to be defined.\n *\n * ```typescript\n * // string values are used for css properties\n * style({ background: \"red\", color: \"blue\" })\n *\n * // numerical (pixel) values are also supported\n * style({ width: 100, height: 0 })\n * ```\n *\n * #### Auto-styles (using `*`)\n *\n * When an asterix (`*`) character is used as a value then it will be detected from the element\n * being animated\n * and applied as animation data when the animation starts.\n *\n * This feature proves useful for a state depending on layout and/or environment factors; in such\n * cases\n * the styles are calculated just before the animation starts.\n *\n * ```typescript\n * // the steps below will animate from 0 to the\n * // actual height of the element\n * style({ height: 0 }),\n * animate(\"1s\", style({ height: \"*\" }))\n * ```\n *\n * ### Example ([live demo](http://plnkr.co/edit/Kez8XGWBxWue7qP7nNvF?p=preview))\n *\n * {@example core/animation/ts/dsl/animation_example.ts region='Component'}\n */\nexport function style(\n    tokens: string | {[key: string]: string | number} |\n    Array<string|{[key: string]: string | number}>): AnimationStyleMetadata {\n  var input: Array<{[key: string]: string | number}|string>;\n  var offset: number = null;\n  if (isString(tokens)) {\n    input = [<string>tokens];\n  } else {\n    if (isArray(tokens)) {\n      input = <Array<{[key: string]: string | number}>>tokens;\n    } else {\n      input = [<{[key: string]: string | number}>tokens];\n    }\n    input.forEach(entry => {\n      var entryOffset = (entry as any /** TODO #9100 */)['offset'];\n      if (isPresent(entryOffset)) {\n        offset = offset == null ? NumberWrapper.parseFloat(entryOffset) : offset;\n      }\n    });\n  }\n  return new AnimationStyleMetadata(input, offset);\n}\n\n/**\n * `state` is an animation-specific function that is designed to be used inside of Angular2's\n * animation\n * DSL language. If this information is new, please navigate to the\n * {@link ComponentMetadata#animations-anchor component animations metadata\n * page} to gain a better understanding of how animations in Angular2 are used.\n *\n * `state` declares an animation state within the given trigger. When a state is\n * active within a component then its associated styles will persist on\n * the element that the trigger is attached to (even when the animation ends).\n *\n * To animate between states, have a look at the animation {@link transition transition}\n * DSL function. To register states to an animation trigger please have a look\n * at the {@link trigger trigger} function.\n *\n * #### The `void` state\n *\n * The `void` state value is a reserved word that angular uses to determine when the element is not\n * apart\n * of the application anymore (e.g. when an `ngIf` evaluates to false then the state of the\n * associated element\n * is void).\n *\n * #### The `*` (default) state\n *\n * The `*` state (when styled) is a fallback state that will be used if\n * the state that is being animated is not declared within the trigger.\n *\n * ### Usage\n *\n * `state` will declare an animation state with its associated styles\n * within the given trigger.\n *\n * - `stateNameExpr` can be one or more state names separated by commas.\n * - `styles` refers to the {@link style styling data} that will be persisted on the element once\n * the state\n * has been reached.\n *\n * ```typescript\n * // \"void\" is a reserved name for a state and is used to represent\n * // the state in which an element is detached from from the application.\n * state(\"void\", style({ height: 0 }))\n *\n * // user-defined states\n * state(\"closed\", style({ height: 0 }))\n * state(\"open, visible\", style({ height: \"*\" }))\n * ```\n *\n * ### Example ([live demo](http://plnkr.co/edit/Kez8XGWBxWue7qP7nNvF?p=preview))\n *\n * {@example core/animation/ts/dsl/animation_example.ts region='Component'}\n */\nexport function state(\n    stateNameExpr: string, styles: AnimationStyleMetadata): AnimationStateDeclarationMetadata {\n  return new AnimationStateDeclarationMetadata(stateNameExpr, styles);\n}\n\n/**\n * `keyframes` is an animation-specific function that is designed to be used inside of Angular2's\n * animation\n * DSL language. If this information is new, please navigate to the\n * {@link ComponentMetadata#animations-anchor component animations metadata\n * page} to gain a better understanding of how animations in Angular2 are used.\n *\n * `keyframes` specifies a collection of {@link style style} entries each optionally characterized\n * by an `offset` value.\n *\n * ### Usage\n *\n * The `keyframes` animation function is designed to be used alongside the {@link animate animate}\n * animation function. Instead of applying animations from where they are\n * currently to their destination, keyframes can describe how each style entry is applied\n * and at what point within the animation arc (much like CSS Keyframe Animations do).\n *\n * For each `style()` entry an `offset` value can be set. Doing so allows to specifiy at\n * what percentage of the animate time the styles will be applied.\n *\n * ```typescript\n * // the provided offset values describe when each backgroundColor value is applied.\n * animate(\"5s\", keyframes([\n *   style({ backgroundColor: \"red\", offset: 0 }),\n *   style({ backgroundColor: \"blue\", offset: 0.2 }),\n *   style({ backgroundColor: \"orange\", offset: 0.3 }),\n *   style({ backgroundColor: \"black\", offset: 1 })\n * ]))\n * ```\n *\n * Alternatively, if there are no `offset` values used within the style entries then the offsets\n * will\n * be calculated automatically.\n *\n * ```typescript\n * animate(\"5s\", keyframes([\n *   style({ backgroundColor: \"red\" }) // offset = 0\n *   style({ backgroundColor: \"blue\" }) // offset = 0.33\n *   style({ backgroundColor: \"orange\" }) // offset = 0.66\n *   style({ backgroundColor: \"black\" }) // offset = 1\n * ]))\n * ```\n *\n * ### Example ([live demo](http://plnkr.co/edit/Kez8XGWBxWue7qP7nNvF?p=preview))\n *\n * {@example core/animation/ts/dsl/animation_example.ts region='Component'}\n */\nexport function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSequenceMetadata {\n  return new AnimationKeyframesSequenceMetadata(steps);\n}\n\n/**\n * `transition` is an animation-specific function that is designed to be used inside of Angular2's\n * animation\n * DSL language. If this information is new, please navigate to the\n * {@link ComponentMetadata#animations-anchor component animations metadata\n * page} to gain a better understanding of how animations in Angular2 are used.\n *\n * `transition` declares the {@link sequence sequence of animation steps} that will be run when the\n * provided\n * `stateChangeExpr` value is satisfied. The `stateChangeExpr` consists of a `state1 => state2`\n * which consists\n * of two known states (use an asterix (`*`) to refer to a dynamic starting and/or ending state).\n *\n * Animation transitions are placed within an {@link trigger animation trigger}. For an transition\n * to animate to\n * a state value and persist its styles then one or more {@link state animation states} is expected\n * to be defined.\n *\n * ### Usage\n *\n * An animation transition is kicked off the `stateChangeExpr` predicate evaluates to true based on\n * what the\n * previous state is and what the current state has become. In other words, if a transition is\n * defined that\n * matches the old/current state criteria then the associated animation will be triggered.\n *\n * ```typescript\n * // all transition/state changes are defined within an animation trigger\n * trigger(\"myAnimationTrigger\", [\n *   // if a state is defined then its styles will be persisted when the\n *   // animation has fully completed itself\n *   state(\"on\", style({ background: \"green\" })),\n *   state(\"off\", style({ background: \"grey\" })),\n *\n *   // a transition animation that will be kicked off when the state value\n *   // bound to \"myAnimationTrigger\" changes from \"on\" to \"off\"\n *   transition(\"on => off\", animate(500)),\n *\n *   // it is also possible to do run the same animation for both directions\n *   transition(\"on <=> off\", animate(500)),\n *\n *   // or to define multiple states pairs separated by commas\n *   transition(\"on => off, off => void\", animate(500)),\n *\n *   // this is a catch-all state change for when an element is inserted into\n *   // the page and the destination state is unknown\n *   transition(\"void => *\", [\n *     style({ opacity: 0 }),\n *     animate(500)\n *   ]),\n *\n *   // this will capture a state change between any states\n *   transition(\"* => *\", animate(\"1s 0s\")),\n * ])\n * ```\n *\n * The template associated with this component will make use of the `myAnimationTrigger`\n * animation trigger by binding to an element within its template code.\n *\n * ```html\n * <!-- somewhere inside of my-component-tpl.html -->\n * <div @myAnimationTrigger=\"myStatusExp\">...</div>\n * ```\n *\n * #### The final `animate` call\n *\n * If the final step within the transition steps is a call to `animate()` that **only**\n * uses a timing value with **no style data** then it will be automatically used as the final\n * animation\n * arc for the element to animate itself to the final state. This involves an automatic mix of\n * adding/removing CSS styles so that the element will be in the exact state it should be for the\n * applied state to be presented correctly.\n *\n * ```\n * // start off by hiding the element, but make sure that it animates properly to whatever state\n * // is currently active for \"myAnimationTrigger\"\n * transition(\"void => *\", [\n *   style({ opacity: 0 }),\n *   animate(500)\n * ])\n * ```\n *\n * ### Example ([live demo](http://plnkr.co/edit/Kez8XGWBxWue7qP7nNvF?p=preview))\n *\n * {@example core/animation/ts/dsl/animation_example.ts region='Component'}\n */\nexport function transition(stateChangeExpr: string, steps: AnimationMetadata | AnimationMetadata[]):\n    AnimationStateTransitionMetadata {\n  var animationData = isArray(steps) ? new AnimationSequenceMetadata(<AnimationMetadata[]>steps) :\n                                       <AnimationMetadata>steps;\n  return new AnimationStateTransitionMetadata(stateChangeExpr, animationData);\n}\n\n/**\n * `trigger` is an animation-specific function that is designed to be used inside of Angular2's\n * animation\n * DSL language. If this information is new, please navigate to the\n * {@link ComponentMetadata#animations-anchor component animations metadata\n * page} to gain a better understanding of how animations in Angular2 are used.\n *\n * `trigger` Creates an animation trigger which will a list of {@link state state} and {@link\n * transition transition}\n * entries that will be evaluated when the expression bound to the trigger changes.\n *\n * Triggers are registered within the component annotation data under the\n * {@link ComponentMetadata#animations-anchor animations section}. An animation trigger can\n * be placed on an element within a template by referencing the name of the\n * trigger followed by the expression value that the trigger is bound to\n * (in the form of `@triggerName=\"expression\"`.\n *\n * ### Usage\n *\n * `trigger` will create an animation trigger reference based on the provided `name` value.\n * The provided `animation` value is expected to be an array consisting of {@link state state} and\n * {@link transition transition}\n * declarations.\n *\n * ```typescript\n * @Component({\n *   selector: 'my-component',\n *   templateUrl: 'my-component-tpl.html',\n *   animations: [\n *     trigger(\"myAnimationTrigger\", [\n *       state(...),\n *       state(...),\n *       transition(...),\n *       transition(...)\n *     ])\n *   ]\n * })\n * class MyComponent {\n *   myStatusExp = \"something\";\n * }\n * ```\n *\n * The template associated with this component will make use of the `myAnimationTrigger`\n * animation trigger by binding to an element within its template code.\n *\n * ```html\n * <!-- somewhere inside of my-component-tpl.html -->\n * <div @myAnimationTrigger=\"myStatusExp\">...</div>\n * ```\n *\n * ### Example ([live demo](http://plnkr.co/edit/Kez8XGWBxWue7qP7nNvF?p=preview))\n *\n * {@example core/animation/ts/dsl/animation_example.ts region='Component'}\n */\nexport function trigger(name: string, animation: AnimationMetadata[]): AnimationEntryMetadata {\n  return new AnimationEntryMetadata(name, animation);\n}\n\ninterface DecoratorInvocation {\n  type: Function;\n  args?: any[];\n}\n"]}

package/esm/src/animation/metadata.metadata.json

@@ -0,0 +1 @@
+{"__symbolic":"module","version":1,"metadata":{"AUTO_STYLE":"*","group":{"__symbolic":"function","parameters":["steps"],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"AnimationGroupMetadata"},"arguments":[{"__symbolic":"reference","name":"steps"}]}},"sequence":{"__symbolic":"function","parameters":["steps"],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"AnimationSequenceMetadata"},"arguments":[{"__symbolic":"reference","name":"steps"}]}},"state":{"__symbolic":"function","parameters":["stateNameExpr","styles"],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"AnimationStateDeclarationMetadata"},"arguments":[{"__symbolic":"reference","name":"stateNameExpr"},{"__symbolic":"reference","name":"styles"}]}},"keyframes":{"__symbolic":"function","parameters":["steps"],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"AnimationKeyframesSequenceMetadata"},"arguments":[{"__symbolic":"reference","name":"steps"}]}},"trigger":{"__symbolic":"function","parameters":["name","animation"],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"AnimationEntryMetadata"},"arguments":[{"__symbolic":"reference","name":"name"},{"__symbolic":"reference","name":"animation"}]}}}}

package/esm/src/application_common_providers.d.ts

@@ -2,6 +2,7 @@ import { Type } from '../src/facade/lang';
 /**
  * A default set of providers which should be included in any Angular
  * application, regardless of the platform it runs onto.
+ * @stable
  */
 export declare const APPLICATION_COMMON_PROVIDERS: Array<Type | {
     [k: string]: any;

package/esm/src/application_common_providers.js

@@ -1,13 +1,14 @@
-import { APP_ID_RANDOM_PROVIDER } from './application_tokens';
 import { APPLICATION_CORE_PROVIDERS } from './application_ref';
-import { IterableDiffers, defaultIterableDiffers, KeyValueDiffers, defaultKeyValueDiffers } from './change_detection/change_detection';
-import { ViewUtils } from './linker/view_utils';
+import { APP_ID_RANDOM_PROVIDER } from './application_tokens';
+import { IterableDiffers, KeyValueDiffers, defaultIterableDiffers, defaultKeyValueDiffers } from './change_detection/change_detection';
 import { ComponentResolver, ReflectorComponentResolver } from './linker/component_resolver';
 import { DynamicComponentLoader, DynamicComponentLoader_ } from './linker/dynamic_component_loader';
+import { ViewUtils } from './linker/view_utils';
 let __unused; // avoid unused import when Type union types are erased
 /**
  * A default set of providers which should be included in any Angular
  * application, regardless of the platform it runs onto.
+ * @stable
  */
 export const APPLICATION_COMMON_PROVIDERS = 
 /*@ts2dart_const*/ [
@@ -17,6 +18,6 @@ export const APPLICATION_COMMON_PROVIDERS =
     ViewUtils,
     /* @ts2dart_Provider */ { provide: IterableDiffers, useValue: defaultIterableDiffers },
     /* @ts2dart_Provider */ { provide: KeyValueDiffers, useValue: defaultKeyValueDiffers },
-    /* @ts2dart_Provider */ { provide: DynamicComponentLoader, useClass: DynamicComponentLoader_ }
+    /* @ts2dart_Provider */ { provide: DynamicComponentLoader, useClass: DynamicComponentLoader_ },
 ];
 //# sourceMappingURL=application_common_providers.js.map