@angular/animations 13.1.0-next.2 → 13.1.0-next.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"animations.mjs","sources":["../../../../../../packages/animations/src/animation_builder.ts","../../../../../../packages/animations/src/animation_metadata.ts","../../../../../../packages/animations/src/util.ts","../../../../../../packages/animations/src/players/animation_player.ts","../../../../../../packages/animations/src/players/animation_group_player.ts","../../../../../../packages/animations/src/private_export.ts","../../../../../../packages/animations/src/animations.ts","../../../../../../packages/animations/public_api.ts","../../../../../../packages/animations/index.ts","../../../../../../packages/animations/animations.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {AnimationMetadata, AnimationOptions} from './animation_metadata';\nimport {AnimationPlayer} from './players/animation_player';\n\n/**\n * An injectable service that produces an animation sequence programmatically within an\n * Angular component or directive.\n * Provided by the `BrowserAnimationsModule` or `NoopAnimationsModule`.\n *\n * @usageNotes\n *\n * To use this service, add it to your component or directive as a dependency.\n * The service is instantiated along with your component.\n *\n * Apps do not typically need to create their own animation players, but if you\n * do need to, follow these steps:\n *\n * 1. Use the `build()` method to create a programmatic animation using the\n * `animate()` function. The method returns an `AnimationFactory` instance.\n *\n * 2. Use the factory object to create an `AnimationPlayer` and attach it to a DOM element.\n *\n * 3. Use the player object to control the animation programmatically.\n *\n * For example:\n *\n * ```ts\n * // import the service from BrowserAnimationsModule\n * import {AnimationBuilder} from '@angular/animations';\n * // require the service as a dependency\n * class MyCmp {\n * constructor(private _builder: AnimationBuilder) {}\n *\n * makeAnimation(element: any) {\n * // first define a reusable animation\n * const myAnimation = this._builder.build([\n * style({ width: 0 }),\n * animate(1000, style({ width: '100px' }))\n * ]);\n *\n * // use the returned factory object to create a player\n * const player = myAnimation.create(element);\n *\n * player.play();\n * }\n * }\n * ```\n *\n * @publicApi\n */\nexport abstract class AnimationBuilder {\n /**\n * Builds a factory for producing a defined animation.\n * @param animation A reusable animation definition.\n * @returns A factory object that can create a player for the defined animation.\n * @see `animate()`\n */\n abstract build(animation: AnimationMetadata|AnimationMetadata[]): AnimationFactory;\n}\n\n/**\n * A factory object returned from the `AnimationBuilder`.`build()` method.\n *\n * @publicApi\n */\nexport abstract class AnimationFactory {\n /**\n * Creates an `AnimationPlayer` instance for the reusable animation defined by\n * the `AnimationBuilder`.`build()` method that created this factory.\n * Attaches the new player a DOM element.\n * @param element The DOM element to which to attach the animation.\n * @param options A set of options that can include a time delay and\n * additional developer-defined parameters.\n */\n abstract create(element: any, options?: AnimationOptions): AnimationPlayer;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/**\n * Represents a set of CSS styles for use in an animation style.\n */\nexport interface ɵStyleData {\n [key: string]: string|number;\n}\n\n/**\n * Represents animation-step timing parameters for an animation step.\n * @see `animate()`\n *\n * @publicApi\n */\nexport declare type AnimateTimings = {\n /**\n * The full duration of an animation step. A number and optional time unit,\n * such as \"1s\" or \"10ms\" for one second and 10 milliseconds, respectively.\n * The default unit is milliseconds.\n */\n duration: number,\n /**\n * The delay in applying an animation step. A number and optional time unit.\n * The default unit is milliseconds.\n */\n delay: number,\n /**\n * An easing style that controls how an animations step accelerates\n * and decelerates during its run time. An easing function such as `cubic-bezier()`,\n * or one of the following constants:\n * - `ease-in`\n * - `ease-out`\n * - `ease-in-and-out`\n */\n easing: string | null\n};\n\n/**\n * @description Options that control animation styling and timing.\n *\n * The following animation functions accept `AnimationOptions` data:\n *\n * - `transition()`\n * - `sequence()`\n * - `{@link animations/group group()}`\n * - `query()`\n * - `animation()`\n * - `useAnimation()`\n * - `animateChild()`\n *\n * Programmatic animations built using the `AnimationBuilder` service also\n * make use of `AnimationOptions`.\n *\n * @publicApi\n */\nexport declare interface AnimationOptions {\n /**\n * Sets a time-delay for initiating an animation action.\n * A number and optional time unit, such as \"1s\" or \"10ms\" for one second\n * and 10 milliseconds, respectively.The default unit is milliseconds.\n * Default value is 0, meaning no delay.\n */\n delay?: number|string;\n /**\n * A set of developer-defined parameters that modify styling and timing\n * when an animation action starts. An array of key-value pairs, where the provided value\n * is used as a default.\n */\n params?: {[name: string]: any};\n}\n\n/**\n * Adds duration options to control animation styling and timing for a child animation.\n *\n * @see `animateChild()`\n *\n * @publicApi\n */\nexport declare interface AnimateChildOptions extends AnimationOptions {\n duration?: number|string;\n}\n\n/**\n * @description Constants for the categories of parameters that can be defined for animations.\n *\n * A corresponding function defines a set of parameters for each category, and\n * collects them into a corresponding `AnimationMetadata` object.\n *\n * @publicApi\n */\nexport const enum AnimationMetadataType {\n /**\n * Associates a named animation state with a set of CSS styles.\n * See `state()`\n */\n State = 0,\n /**\n * Data for a transition from one animation state to another.\n * See `transition()`\n */\n Transition = 1,\n /**\n * Contains a set of animation steps.\n * See `sequence()`\n */\n Sequence = 2,\n /**\n * Contains a set of animation steps.\n * See `{@link animations/group group()}`\n */\n Group = 3,\n /**\n * Contains an animation step.\n * See `animate()`\n */\n Animate = 4,\n /**\n * Contains a set of animation steps.\n * See `keyframes()`\n */\n Keyframes = 5,\n /**\n * Contains a set of CSS property-value pairs into a named style.\n * See `style()`\n */\n Style = 6,\n /**\n * Associates an animation with an entry trigger that can be attached to an element.\n * See `trigger()`\n */\n Trigger = 7,\n /**\n * Contains a re-usable animation.\n * See `animation()`\n */\n Reference = 8,\n /**\n * Contains data to use in executing child animations returned by a query.\n * See `animateChild()`\n */\n AnimateChild = 9,\n /**\n * Contains animation parameters for a re-usable animation.\n * See `useAnimation()`\n */\n AnimateRef = 10,\n /**\n * Contains child-animation query data.\n * See `query()`\n */\n Query = 11,\n /**\n * Contains data for staggering an animation sequence.\n * See `stagger()`\n */\n Stagger = 12\n}\n\n/**\n * Specifies automatic styling.\n *\n * @publicApi\n */\nexport const AUTO_STYLE = '*';\n\n/**\n * Base for animation data structures.\n *\n * @publicApi\n */\nexport interface AnimationMetadata {\n type: AnimationMetadataType;\n}\n\n/**\n * Contains an animation trigger. Instantiated and returned by the\n * `trigger()` function.\n *\n * @publicApi\n */\nexport interface AnimationTriggerMetadata extends AnimationMetadata {\n /**\n * The trigger name, used to associate it with an element. Unique within the component.\n */\n name: string;\n /**\n * An animation definition object, containing an array of state and transition declarations.\n */\n definitions: AnimationMetadata[];\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: {params?: {[name: string]: any}}|null;\n}\n\n/**\n * Encapsulates an animation state by associating a state name with a set of CSS styles.\n * Instantiated and returned by the `state()` function.\n *\n * @publicApi\n */\nexport interface AnimationStateMetadata extends AnimationMetadata {\n /**\n * The state name, unique within the component.\n */\n name: string;\n /**\n * The CSS styles associated with this state.\n */\n styles: AnimationStyleMetadata;\n /**\n * An options object containing\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation.\n */\n options?: {params: {[name: string]: any}};\n}\n\n/**\n * Encapsulates an animation transition. Instantiated and returned by the\n * `transition()` function.\n *\n * @publicApi\n */\nexport interface AnimationTransitionMetadata extends AnimationMetadata {\n /**\n * An expression that describes a state change.\n */\n expr: string|\n ((fromState: string, toState: string, element?: any,\n params?: {[key: string]: any}) => boolean);\n /**\n * One or more animation objects to which this transition applies.\n */\n animation: AnimationMetadata|AnimationMetadata[];\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: AnimationOptions|null;\n}\n\n/**\n * Encapsulates a reusable animation, which is a collection of individual animation steps.\n * Instantiated and returned by the `animation()` function, and\n * passed to the `useAnimation()` function.\n *\n * @publicApi\n */\nexport interface AnimationReferenceMetadata extends AnimationMetadata {\n /**\n * One or more animation step objects.\n */\n animation: AnimationMetadata|AnimationMetadata[];\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: AnimationOptions|null;\n}\n\n/**\n * Encapsulates an animation query. Instantiated and returned by\n * the `query()` function.\n *\n * @publicApi\n */\nexport interface AnimationQueryMetadata extends AnimationMetadata {\n /**\n * The CSS selector for this query.\n */\n selector: string;\n /**\n * One or more animation step objects.\n */\n animation: AnimationMetadata|AnimationMetadata[];\n /**\n * A query options object.\n */\n options: AnimationQueryOptions|null;\n}\n\n/**\n * Encapsulates a keyframes sequence. Instantiated and returned by\n * the `keyframes()` function.\n *\n * @publicApi\n */\nexport interface AnimationKeyframesSequenceMetadata extends AnimationMetadata {\n /**\n * An array of animation styles.\n */\n steps: AnimationStyleMetadata[];\n}\n\n/**\n * Encapsulates an animation style. Instantiated and returned by\n * the `style()` function.\n *\n * @publicApi\n */\nexport interface AnimationStyleMetadata extends AnimationMetadata {\n /**\n * A set of CSS style properties.\n */\n styles: '*'|{[key: string]: string | number}|Array<{[key: string]: string | number}|'*'>;\n /**\n * A percentage of the total animate time at which the style is to be applied.\n */\n offset: number|null;\n}\n\n/**\n * Encapsulates an animation step. Instantiated and returned by\n * the `animate()` function.\n *\n * @publicApi\n */\nexport interface AnimationAnimateMetadata extends AnimationMetadata {\n /**\n * The timing data for the step.\n */\n timings: string|number|AnimateTimings;\n /**\n * A set of styles used in the step.\n */\n styles: AnimationStyleMetadata|AnimationKeyframesSequenceMetadata|null;\n}\n\n/**\n * Encapsulates a child animation, that can be run explicitly when the parent is run.\n * Instantiated and returned by the `animateChild` function.\n *\n * @publicApi\n */\nexport interface AnimationAnimateChildMetadata extends AnimationMetadata {\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: AnimationOptions|null;\n}\n\n/**\n * Encapsulates a reusable animation.\n * Instantiated and returned by the `useAnimation()` function.\n *\n * @publicApi\n */\nexport interface AnimationAnimateRefMetadata extends AnimationMetadata {\n /**\n * An animation reference object.\n */\n animation: AnimationReferenceMetadata;\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: AnimationOptions|null;\n}\n\n/**\n * Encapsulates an animation sequence.\n * Instantiated and returned by the `sequence()` function.\n *\n * @publicApi\n */\nexport interface AnimationSequenceMetadata extends AnimationMetadata {\n /**\n * An array of animation step objects.\n */\n steps: AnimationMetadata[];\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: AnimationOptions|null;\n}\n\n/**\n * Encapsulates an animation group.\n * Instantiated and returned by the `{@link animations/group group()}` function.\n *\n * @publicApi\n */\nexport interface AnimationGroupMetadata extends AnimationMetadata {\n /**\n * One or more animation or style steps that form this group.\n */\n steps: AnimationMetadata[];\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: AnimationOptions|null;\n}\n\n/**\n * Encapsulates animation query options.\n * Passed to the `query()` function.\n *\n * @publicApi\n */\nexport declare interface AnimationQueryOptions extends AnimationOptions {\n /**\n * True if this query is optional, false if it is required. Default is false.\n * A required query throws an error if no elements are retrieved when\n * the query is executed. An optional query does not.\n *\n */\n optional?: boolean;\n /**\n * A maximum total number of results to return from the query.\n * If negative, results are limited from the end of the query list towards the beginning.\n * By default, results are not limited.\n */\n limit?: number;\n}\n\n/**\n * Encapsulates parameters for staggering the start times of a set of animation steps.\n * Instantiated and returned by the `stagger()` function.\n *\n * @publicApi\n **/\nexport interface AnimationStaggerMetadata extends AnimationMetadata {\n /**\n * The timing data for the steps.\n */\n timings: string|number;\n /**\n * One or more animation steps.\n */\n animation: AnimationMetadata|AnimationMetadata[];\n}\n\n/**\n * Creates a named animation trigger, containing a list of `state()`\n * and `transition()` entries to be evaluated when the expression\n * bound to the trigger changes.\n *\n * @param name An identifying string.\n * @param definitions An animation definition object, containing an array of `state()`\n * and `transition()` declarations.\n *\n * @return An object that encapsulates the trigger data.\n *\n * @usageNotes\n * Define an animation trigger in the `animations` section of `@Component` metadata.\n * In the template, reference the trigger by name and bind it to a trigger expression that\n * evaluates to a defined animation state, using the following format:\n *\n * `[@triggerName]=\"expression\"`\n *\n * Animation trigger bindings convert all values to strings, and then match the\n * previous and current values against any linked transitions.\n * Booleans can be specified as `1` or `true` and `0` or `false`.\n *\n * ### Usage Example\n *\n * The following example creates an animation trigger reference based on the provided\n * name value.\n * The provided animation value is expected to be an array consisting of state and\n * transition 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 makes use of the defined trigger\n * 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 * ### Using an inline function\n * The `transition` animation method also supports reading an inline function which can decide\n * if its associated animation should be run.\n *\n * ```typescript\n * // this method is run each time the `myAnimationTrigger` trigger value changes.\n * function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key:\n string]: any}): boolean {\n * // notice that `element` and `params` are also available here\n * return toState == 'yes-please-animate';\n * }\n *\n * @Component({\n * selector: 'my-component',\n * templateUrl: 'my-component-tpl.html',\n * animations: [\n * trigger('myAnimationTrigger', [\n * transition(myInlineMatcherFn, [\n * // the animation sequence code\n * ]),\n * ])\n * ]\n * })\n * class MyComponent {\n * myStatusExp = \"yes-please-animate\";\n * }\n * ```\n *\n * ### Disabling Animations\n * When true, the special animation control binding `@.disabled` binding prevents\n * all animations from rendering.\n * Place the `@.disabled` binding on an element to disable\n * animations on the element itself, as well as any inner animation triggers\n * within the element.\n *\n * The following example shows how to use this feature:\n *\n * ```typescript\n * @Component({\n * selector: 'my-component',\n * template: `\n * <div [@.disabled]=\"isDisabled\">\n * <div [@childAnimation]=\"exp\"></div>\n * </div>\n * `,\n * animations: [\n * trigger(\"childAnimation\", [\n * // ...\n * ])\n * ]\n * })\n * class MyComponent {\n * isDisabled = true;\n * exp = '...';\n * }\n * ```\n *\n * When `@.disabled` is true, it prevents the `@childAnimation` trigger from animating,\n * along with any inner animations.\n *\n * ### Disable animations application-wide\n * When an area of the template is set to have animations disabled,\n * **all** inner components have their animations disabled as well.\n * This means that you can disable all animations for an app\n * by placing a host binding set on `@.disabled` on the topmost Angular component.\n *\n * ```typescript\n * import {Component, HostBinding} from '@angular/core';\n *\n * @Component({\n * selector: 'app-component',\n * templateUrl: 'app.component.html',\n * })\n * class AppComponent {\n * @HostBinding('@.disabled')\n * public animationsDisabled = true;\n * }\n * ```\n *\n * ### Overriding disablement of inner animations\n * Despite inner animations being disabled, a parent animation can `query()`\n * for inner elements located in disabled areas of the template and still animate\n * them if needed. This is also the case for when a sub animation is\n * queried by a parent and then later animated using `animateChild()`.\n *\n * ### Detecting when an animation is disabled\n * If a region of the DOM (or the entire application) has its animations disabled, the animation\n * trigger callbacks still fire, but for zero seconds. When the callback fires, it provides\n * an instance of an `AnimationEvent`. If animations are disabled,\n * the `.disabled` flag on the event is true.\n *\n * @publicApi\n */\nexport function trigger(name: string, definitions: AnimationMetadata[]): AnimationTriggerMetadata {\n return {type: AnimationMetadataType.Trigger, name, definitions, options: {}};\n}\n\n/**\n * Defines an animation step that combines styling information with timing information.\n *\n * @param timings Sets `AnimateTimings` for the parent animation.\n * A string in the format \"duration [delay] [easing]\".\n * - Duration and delay are expressed as a number and optional time unit,\n * such as \"1s\" or \"10ms\" for one second and 10 milliseconds, respectively.\n * The default unit is milliseconds.\n * - The easing value controls how the animation accelerates and decelerates\n * during its runtime. Value is one of `ease`, `ease-in`, `ease-out`,\n * `ease-in-out`, or a `cubic-bezier()` function call.\n * If not supplied, no easing is applied.\n *\n * For example, the string \"1s 100ms ease-out\" specifies a duration of\n * 1000 milliseconds, and delay of 100 ms, and the \"ease-out\" easing style,\n * which decelerates near the end of the duration.\n * @param styles Sets AnimationStyles for the parent animation.\n * A function call to either `style()` or `keyframes()`\n * that returns a collection of CSS style entries to be applied to the parent animation.\n * When null, uses the styles from the destination state.\n * This is useful when describing an animation step that will complete an animation;\n * see \"Animating to the final state\" in `transitions()`.\n * @returns An object that encapsulates the animation step.\n *\n * @usageNotes\n * Call within an animation `sequence()`, `{@link animations/group group()}`, or\n * `transition()` call to specify an animation step\n * that applies given style data to the parent animation for a given amount of time.\n *\n * ### Syntax Examples\n * **Timing examples**\n *\n * The following examples show various `timings` specifications.\n * - `animate(500)` : Duration is 500 milliseconds.\n * - `animate(\"1s\")` : Duration is 1000 milliseconds.\n * - `animate(\"100ms 0.5s\")` : Duration is 100 milliseconds, delay is 500 milliseconds.\n * - `animate(\"5s ease-in\")` : Duration is 5000 milliseconds, easing in.\n * - `animate(\"5s 10ms cubic-bezier(.17,.67,.88,.1)\")` : Duration is 5000 milliseconds, delay is 10\n * milliseconds, easing according to a bezier curve.\n *\n * **Style examples**\n *\n * The following example calls `style()` to set a single CSS style.\n * ```typescript\n * animate(500, style({ background: \"red\" }))\n * ```\n * The following example calls `keyframes()` to set a CSS style\n * to different values for successive keyframes.\n * ```typescript\n * animate(500, keyframes(\n * [\n * style({ background: \"blue\" }),\n * style({ background: \"red\" })\n * ])\n * ```\n *\n * @publicApi\n */\nexport function animate(\n timings: string|number,\n styles: AnimationStyleMetadata|AnimationKeyframesSequenceMetadata|null =\n null): AnimationAnimateMetadata {\n return {type: AnimationMetadataType.Animate, styles, timings};\n}\n\n/**\n * @description Defines a list of animation steps to be run in parallel.\n *\n * @param steps An array of animation step objects.\n * - When steps are defined by `style()` or `animate()`\n * function calls, each call within the group is executed instantly.\n * - To specify offset styles to be applied at a later time, define steps with\n * `keyframes()`, or use `animate()` calls with a delay value.\n * For example:\n *\n * ```typescript\n * group([\n * animate(\"1s\", style({ background: \"black\" })),\n * animate(\"2s\", style({ color: \"white\" }))\n * ])\n * ```\n *\n * @param options An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation.\n *\n * @return An object that encapsulates the group data.\n *\n * @usageNotes\n * Grouped animations are useful when a series of styles must be\n * animated at different starting times and closed off at different ending times.\n *\n * When called within a `sequence()` or a\n * `transition()` call, does not continue to the next\n * instruction until all of the inner animation steps have completed.\n *\n * @publicApi\n */\nexport function group(\n steps: AnimationMetadata[], options: AnimationOptions|null = null): AnimationGroupMetadata {\n return {type: AnimationMetadataType.Group, steps, options};\n}\n\n/**\n * Defines a list of animation steps to be run sequentially, one by one.\n *\n * @param steps An array of animation step objects.\n * - Steps defined by `style()` calls apply the styling data immediately.\n * - Steps defined by `animate()` calls apply the styling data over time\n * as specified by the timing data.\n *\n * ```typescript\n * sequence([\n * style({ opacity: 0 }),\n * animate(\"1s\", style({ opacity: 1 }))\n * ])\n * ```\n *\n * @param options An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation.\n *\n * @return An object that encapsulates the sequence data.\n *\n * @usageNotes\n * When you pass an array of steps to a\n * `transition()` call, the steps run sequentially by default.\n * Compare this to the `{@link animations/group group()}` call, which runs animation steps in\n *parallel.\n *\n * When a sequence is used within a `{@link animations/group group()}` or a `transition()` call,\n * execution continues to the next instruction only after each of the inner animation\n * steps have completed.\n *\n * @publicApi\n **/\nexport function sequence(\n steps: AnimationMetadata[], options: AnimationOptions|null = null): AnimationSequenceMetadata {\n return {type: AnimationMetadataType.Sequence, steps, options};\n}\n\n/**\n * Declares a key/value object containing CSS properties/styles that\n * can then be used for an animation `state`, within an animation `sequence`,\n * or as styling data for calls to `animate()` and `keyframes()`.\n *\n * @param tokens A set of CSS styles or HTML styles associated with an animation state.\n * The value can be any of the following:\n * - A key-value style pair associating a CSS property with a value.\n * - An array of key-value style pairs.\n * - An asterisk (*), to use auto-styling, where styles are derived from the element\n * being animated and applied to the animation when it starts.\n *\n * Auto-styling can be used to define a state that depends on layout or other\n * environmental factors.\n *\n * @return An object that encapsulates the style data.\n *\n * @usageNotes\n * The following examples create animation styles that collect a set of\n * CSS property values:\n *\n * ```typescript\n * // string values for CSS properties\n * style({ background: \"red\", color: \"blue\" })\n *\n * // numerical pixel values\n * style({ width: 100, height: 0 })\n * ```\n *\n * The following example uses auto-styling to allow an element to animate from\n * a height of 0 up to its full height:\n *\n * ```\n * style({ height: 0 }),\n * animate(\"1s\", style({ height: \"*\" }))\n * ```\n *\n * @publicApi\n **/\nexport function style(tokens: '*'|{[key: string]: string | number}|\n Array<'*'|{[key: string]: string | number}>): AnimationStyleMetadata {\n return {type: AnimationMetadataType.Style, styles: tokens, offset: null};\n}\n\n/**\n * Declares an animation state within a trigger attached to an element.\n *\n * @param name One or more names for the defined state in a comma-separated string.\n * The following reserved state names can be supplied to define a style for specific use\n * cases:\n *\n * - `void` You can associate styles with this name to be used when\n * the element is detached from the application. For example, when an `ngIf` evaluates\n * to false, the state of the associated element is void.\n * - `*` (asterisk) Indicates the default state. You can associate styles with this name\n * to be used as the fallback when the state that is being animated is not declared\n * within the trigger.\n *\n * @param styles A set of CSS styles associated with this state, created using the\n * `style()` function.\n * This set of styles persists on the element once the state has been reached.\n * @param options Parameters that can be passed to the state when it is invoked.\n * 0 or more key-value pairs.\n * @return An object that encapsulates the new state data.\n *\n * @usageNotes\n * Use the `trigger()` function to register states to an animation trigger.\n * Use the `transition()` function to animate between states.\n * When a state is active within a component, its associated styles persist on the element,\n * even when the animation ends.\n *\n * @publicApi\n **/\nexport function state(\n name: string, styles: AnimationStyleMetadata,\n options?: {params: {[name: string]: any}}): AnimationStateMetadata {\n return {type: AnimationMetadataType.State, name, styles, options};\n}\n\n/**\n * Defines a set of animation styles, associating each style with an optional `offset` value.\n *\n * @param steps A set of animation styles with optional offset data.\n * The optional `offset` value for a style specifies a percentage of the total animation\n * time at which that style is applied.\n * @returns An object that encapsulates the keyframes data.\n *\n * @usageNotes\n * Use with the `animate()` call. Instead of applying animations\n * from the current state\n * to the destination state, keyframes describe how each style entry is applied and at what point\n * within the animation arc.\n * Compare [CSS Keyframe Animations](https://www.w3schools.com/css/css3_animations.asp).\n *\n * ### Usage\n *\n * In the following example, the offset values describe\n * when each `backgroundColor` value is applied. The color is red at the start, and changes to\n * blue when 20% of the total time has elapsed.\n *\n * ```typescript\n * // the provided offset values\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 * If there are no `offset` values specified in the style entries, the offsets\n * are 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 * @publicApi\n */\nexport function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSequenceMetadata {\n return {type: AnimationMetadataType.Keyframes, steps};\n}\n\n/**\n * Declares an animation transition as a sequence of animation steps to run when a given\n * condition is satisfied. The condition is a Boolean expression or function that compares\n * the previous and current animation states, and returns true if this transition should occur.\n * When the state criteria of a defined transition are met, the associated animation is\n * triggered.\n *\n * @param stateChangeExpr A Boolean expression or function that compares the previous and current\n * animation states, and returns true if this transition should occur. Note that \"true\" and \"false\"\n * match 1 and 0, respectively. An expression is evaluated each time a state change occurs in the\n * animation trigger element.\n * The animation steps run when the expression evaluates to true.\n *\n * - A state-change string takes the form \"state1 => state2\", where each side is a defined animation\n * state, or an asterix (*) to refer to a dynamic start or end state.\n * - The expression string can contain multiple comma-separated statements;\n * for example \"state1 => state2, state3 => state4\".\n * - Special values `:enter` and `:leave` initiate a transition on the entry and exit states,\n * equivalent to \"void => *\" and \"* => void\".\n * - Special values `:increment` and `:decrement` initiate a transition when a numeric value has\n * increased or decreased in value.\n * - A function is executed each time a state change occurs in the animation trigger element.\n * The animation steps run when the function returns true.\n *\n * @param steps One or more animation objects, as returned by the `animate()` or\n * `sequence()` function, that form a transformation from one state to another.\n * A sequence is used by default when you pass an array.\n * @param options An options object that can contain a delay value for the start of the animation,\n * and additional developer-defined parameters. Provided values for additional parameters are used\n * as defaults, and override values can be passed to the caller on invocation.\n * @returns An object that encapsulates the transition data.\n *\n * @usageNotes\n * The template associated with a component binds an animation trigger to an element.\n *\n * ```HTML\n * <!-- somewhere inside of my-component-tpl.html -->\n * <div [@myAnimationTrigger]=\"myStatusExp\">...</div>\n * ```\n *\n * All transitions are defined within an animation trigger,\n * along with named states that the transitions change to and from.\n *\n * ```typescript\n * trigger(\"myAnimationTrigger\", [\n * // define states\n * state(\"on\", style({ background: \"green\" })),\n * state(\"off\", style({ background: \"grey\" })),\n * ...]\n * ```\n *\n * Note that when you call the `sequence()` function within a `{@link animations/group group()}`\n * or a `transition()` call, execution does not continue to the next instruction\n * until each of the inner animation steps have completed.\n *\n * ### Syntax examples\n *\n * The following examples define transitions between the two defined states (and default states),\n * using various options:\n *\n * ```typescript\n * // Transition occurs when the state value\n * // bound to \"myAnimationTrigger\" changes from \"on\" to \"off\"\n * transition(\"on => off\", animate(500))\n * // Run the same animation for both directions\n * transition(\"on <=> off\", animate(500))\n * // Define multiple state-change pairs separated by commas\n * transition(\"on => off, off => void\", animate(500))\n * ```\n *\n * ### Special values for state-change expressions\n *\n * - Catch-all state change for when an element is inserted into the page and the\n * destination state is unknown:\n *\n * ```typescript\n * transition(\"void => *\", [\n * style({ opacity: 0 }),\n * animate(500)\n * ])\n * ```\n *\n * - Capture a state change between any states:\n *\n * `transition(\"* => *\", animate(\"1s 0s\"))`\n *\n * - Entry and exit transitions:\n *\n * ```typescript\n * transition(\":enter\", [\n * style({ opacity: 0 }),\n * animate(500, style({ opacity: 1 }))\n * ]),\n * transition(\":leave\", [\n * animate(500, style({ opacity: 0 }))\n * ])\n * ```\n *\n * - Use `:increment` and `:decrement` to initiate transitions:\n *\n * ```typescript\n * transition(\":increment\", group([\n * query(':enter', [\n * style({ left: '100%' }),\n * animate('0.5s ease-out', style('*'))\n * ]),\n * query(':leave', [\n * animate('0.5s ease-out', style({ left: '-100%' }))\n * ])\n * ]))\n *\n * transition(\":decrement\", group([\n * query(':enter', [\n * style({ left: '100%' }),\n * animate('0.5s ease-out', style('*'))\n * ]),\n * query(':leave', [\n * animate('0.5s ease-out', style({ left: '-100%' }))\n * ])\n * ]))\n * ```\n *\n * ### State-change functions\n *\n * Here is an example of a `fromState` specified as a state-change function that invokes an\n * animation when true:\n *\n * ```typescript\n * transition((fromState, toState) =>\n * {\n * return fromState == \"off\" && toState == \"on\";\n * },\n * animate(\"1s 0s\"))\n * ```\n *\n * ### Animating to the final state\n *\n * If the final step in a transition is a call to `animate()` that uses a timing value\n * with no style data, that step is automatically considered the final animation arc,\n * for the element to reach the final state. Angular automatically adds or removes\n * CSS styles to ensure that the element is in the correct final state.\n *\n * The following example defines a transition that starts by hiding the element,\n * then makes sure that it animates properly to whatever state is currently active for trigger:\n *\n * ```typescript\n * transition(\"void => *\", [\n * style({ opacity: 0 }),\n * animate(500)\n * ])\n * ```\n * ### Boolean value matching\n * If a trigger binding value is a Boolean, it can be matched using a transition expression\n * that compares true and false or 1 and 0. For example:\n *\n * ```\n * // in the template\n * <div [@openClose]=\"open ? true : false\">...</div>\n * // in the component metadata\n * trigger('openClose', [\n * state('true', style({ height: '*' })),\n * state('false', style({ height: '0px' })),\n * transition('false <=> true', animate(500))\n * ])\n * ```\n *\n * @publicApi\n **/\nexport function transition(\n stateChangeExpr: string|\n ((fromState: string, toState: string, element?: any, params?: {[key: string]: any}) => boolean),\n steps: AnimationMetadata|AnimationMetadata[],\n options: AnimationOptions|null = null): AnimationTransitionMetadata {\n return {type: AnimationMetadataType.Transition, expr: stateChangeExpr, animation: steps, options};\n}\n\n/**\n * Produces a reusable animation that can be invoked in another animation or sequence,\n * by calling the `useAnimation()` function.\n *\n * @param steps One or more animation objects, as returned by the `animate()`\n * or `sequence()` function, that form a transformation from one state to another.\n * A sequence is used by default when you pass an array.\n * @param options An options object that can contain a delay value for the start of the\n * animation, and additional developer-defined parameters.\n * Provided values for additional parameters are used as defaults,\n * and override values can be passed to the caller on invocation.\n * @returns An object that encapsulates the animation data.\n *\n * @usageNotes\n * The following example defines a reusable animation, providing some default parameter\n * values.\n *\n * ```typescript\n * var fadeAnimation = animation([\n * style({ opacity: '{{ start }}' }),\n * animate('{{ time }}',\n * style({ opacity: '{{ end }}'}))\n * ],\n * { params: { time: '1000ms', start: 0, end: 1 }});\n * ```\n *\n * The following invokes the defined animation with a call to `useAnimation()`,\n * passing in override parameter values.\n *\n * ```js\n * useAnimation(fadeAnimation, {\n * params: {\n * time: '2s',\n * start: 1,\n * end: 0\n * }\n * })\n * ```\n *\n * If any of the passed-in parameter values are missing from this call,\n * the default values are used. If one or more parameter values are missing before a step is\n * animated, `useAnimation()` throws an error.\n *\n * @publicApi\n */\nexport function animation(\n steps: AnimationMetadata|AnimationMetadata[],\n options: AnimationOptions|null = null): AnimationReferenceMetadata {\n return {type: AnimationMetadataType.Reference, animation: steps, options};\n}\n\n/**\n * Executes a queried inner animation element within an animation sequence.\n *\n * @param options An options object that can contain a delay value for the start of the\n * animation, and additional override values for developer-defined parameters.\n * @return An object that encapsulates the child animation data.\n *\n * @usageNotes\n * Each time an animation is triggered in Angular, the parent animation\n * has priority and any child animations are blocked. In order\n * for a child animation to run, the parent animation must query each of the elements\n * containing child animations, and run them using this function.\n *\n * Note that this feature is designed to be used with `query()` and it will only work\n * with animations that are assigned using the Angular animation library. CSS keyframes\n * and transitions are not handled by this API.\n *\n * `animateChild()` does not currently work with route transition animations. Please see\n * GitHub Issue {@link https://github.com/angular/angular/issues/30477 #30477} for more\n * information.\n *\n * @publicApi\n */\nexport function animateChild(options: AnimateChildOptions|null = null):\n AnimationAnimateChildMetadata {\n return {type: AnimationMetadataType.AnimateChild, options};\n}\n\n/**\n * Starts a reusable animation that is created using the `animation()` function.\n *\n * @param animation The reusable animation to start.\n * @param options An options object that can contain a delay value for the start of\n * the animation, and additional override values for developer-defined parameters.\n * @return An object that contains the animation parameters.\n *\n * @publicApi\n */\nexport function useAnimation(\n animation: AnimationReferenceMetadata,\n options: AnimationOptions|null = null): AnimationAnimateRefMetadata {\n return {type: AnimationMetadataType.AnimateRef, animation, options};\n}\n\n/**\n * Finds one or more inner elements within the current element that is\n * being animated within a sequence. Use with `animate()`.\n *\n * @param selector The element to query, or a set of elements that contain Angular-specific\n * characteristics, specified with one or more of the following tokens.\n * - `query(\":enter\")` or `query(\":leave\")` : Query for newly inserted/removed elements.\n * - `query(\":animating\")` : Query all currently animating elements.\n * - `query(\"@triggerName\")` : Query elements that contain an animation trigger.\n * - `query(\"@*\")` : Query all elements that contain an animation triggers.\n * - `query(\":self\")` : Include the current element into the animation sequence.\n *\n * @param animation One or more animation steps to apply to the queried element or elements.\n * An array is treated as an animation sequence.\n * @param options An options object. Use the 'limit' field to limit the total number of\n * items to collect.\n * @return An object that encapsulates the query data.\n *\n * @usageNotes\n * Tokens can be merged into a combined query selector string. For example:\n *\n * ```typescript\n * query(':self, .record:enter, .record:leave, @subTrigger', [...])\n * ```\n *\n * The `query()` function collects multiple elements and works internally by using\n * `element.querySelectorAll`. Use the `limit` field of an options object to limit\n * the total number of items to be collected. For example:\n *\n * ```js\n * query('div', [\n * animate(...),\n * animate(...)\n * ], { limit: 1 })\n * ```\n *\n * By default, throws an error when zero items are found. Set the\n * `optional` flag to ignore this error. For example:\n *\n * ```js\n * query('.some-element-that-may-not-be-there', [\n * animate(...),\n * animate(...)\n * ], { optional: true })\n * ```\n *\n * ### Usage Example\n *\n * The following example queries for inner elements and animates them\n * individually using `animate()`.\n *\n * ```typescript\n * @Component({\n * selector: 'inner',\n * template: `\n * <div [@queryAnimation]=\"exp\">\n * <h1>Title</h1>\n * <div class=\"content\">\n * Blah blah blah\n * </div>\n * </div>\n * `,\n * animations: [\n * trigger('queryAnimation', [\n * transition('* => goAnimate', [\n * // hide the inner elements\n * query('h1', style({ opacity: 0 })),\n * query('.content', style({ opacity: 0 })),\n *\n * // animate the inner elements in, one by one\n * query('h1', animate(1000, style({ opacity: 1 }))),\n * query('.content', animate(1000, style({ opacity: 1 }))),\n * ])\n * ])\n * ]\n * })\n * class Cmp {\n * exp = '';\n *\n * goAnimate() {\n * this.exp = 'goAnimate';\n * }\n * }\n * ```\n *\n * @publicApi\n */\nexport function query(\n selector: string, animation: AnimationMetadata|AnimationMetadata[],\n options: AnimationQueryOptions|null = null): AnimationQueryMetadata {\n return {type: AnimationMetadataType.Query, selector, animation, options};\n}\n\n/**\n * Use within an animation `query()` call to issue a timing gap after\n * each queried item is animated.\n *\n * @param timings A delay value.\n * @param animation One ore more animation steps.\n * @returns An object that encapsulates the stagger data.\n *\n * @usageNotes\n * In the following example, a container element wraps a list of items stamped out\n * by an `ngFor`. The container element contains an animation trigger that will later be set\n * to query for each of the inner items.\n *\n * Each time items are added, the opacity fade-in animation runs,\n * and each removed item is faded out.\n * When either of these animations occur, the stagger effect is\n * applied after each item's animation is started.\n *\n * ```html\n * <!-- list.component.html -->\n * <button (click)=\"toggle()\">Show / Hide Items</button>\n * <hr />\n * <div [@listAnimation]=\"items.length\">\n * <div *ngFor=\"let item of items\">\n * {{ item }}\n * </div>\n * </div>\n * ```\n *\n * Here is the component code:\n *\n * ```typescript\n * import {trigger, transition, style, animate, query, stagger} from '@angular/animations';\n * @Component({\n * templateUrl: 'list.component.html',\n * animations: [\n * trigger('listAnimation', [\n * ...\n * ])\n * ]\n * })\n * class ListComponent {\n * items = [];\n *\n * showItems() {\n * this.items = [0,1,2,3,4];\n * }\n *\n * hideItems() {\n * this.items = [];\n * }\n *\n * toggle() {\n * this.items.length ? this.hideItems() : this.showItems();\n * }\n * }\n * ```\n *\n * Here is the animation trigger code:\n *\n * ```typescript\n * trigger('listAnimation', [\n * transition('* => *', [ // each time the binding value changes\n * query(':leave', [\n * stagger(100, [\n * animate('0.5s', style({ opacity: 0 }))\n * ])\n * ]),\n * query(':enter', [\n * style({ opacity: 0 }),\n * stagger(100, [\n * animate('0.5s', style({ opacity: 1 }))\n * ])\n * ])\n * ])\n * ])\n * ```\n *\n * @publicApi\n */\nexport function stagger(timings: string|number, animation: AnimationMetadata|AnimationMetadata[]):\n AnimationStaggerMetadata {\n return {type: AnimationMetadataType.Stagger, timings, animation};\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nexport function scheduleMicroTask(cb: () => any) {\n Promise.resolve(null).then(cb);\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {scheduleMicroTask} from '../util';\n\n/**\n * Provides programmatic control of a reusable animation sequence,\n * built using the `build()` method of `AnimationBuilder`. The `build()` method\n * returns a factory, whose `create()` method instantiates and initializes this interface.\n *\n * @see `AnimationBuilder`\n * @see `AnimationFactory`\n * @see `animate()`\n *\n * @publicApi\n */\nexport interface AnimationPlayer {\n /**\n * Provides a callback to invoke when the animation finishes.\n * @param fn The callback function.\n * @see `finish()`\n */\n onDone(fn: () => void): void;\n /**\n * Provides a callback to invoke when the animation starts.\n * @param fn The callback function.\n * @see `run()`\n */\n onStart(fn: () => void): void;\n /**\n * Provides a callback to invoke after the animation is destroyed.\n * @param fn The callback function.\n * @see `destroy()`\n * @see `beforeDestroy()`\n */\n onDestroy(fn: () => void): void;\n /**\n * Initializes the animation.\n */\n init(): void;\n /**\n * Reports whether the animation has started.\n * @returns True if the animation has started, false otherwise.\n */\n hasStarted(): boolean;\n /**\n * Runs the animation, invoking the `onStart()` callback.\n */\n play(): void;\n /**\n * Pauses the animation.\n */\n pause(): void;\n /**\n * Restarts the paused animation.\n */\n restart(): void;\n /**\n * Ends the animation, invoking the `onDone()` callback.\n */\n finish(): void;\n /**\n * Destroys the animation, after invoking the `beforeDestroy()` callback.\n * Calls the `onDestroy()` callback when destruction is completed.\n */\n destroy(): void;\n /**\n * Resets the animation to its initial state.\n */\n reset(): void;\n /**\n * Sets the position of the animation.\n * @param position A 0-based offset into the duration, in milliseconds.\n */\n setPosition(position: any /** TODO #9100 */): void;\n /**\n * Reports the current position of the animation.\n * @returns A 0-based offset into the duration, in milliseconds.\n */\n getPosition(): number;\n /**\n * The parent of this player, if any.\n */\n parentPlayer: AnimationPlayer|null;\n /**\n * The total run time of the animation, in milliseconds.\n */\n readonly totalTime: number;\n /**\n * Provides a callback to invoke before the animation is destroyed.\n */\n beforeDestroy?: () => any;\n /**\n * @internal\n * Internal\n */\n triggerCallback?: (phaseName: string) => void;\n /**\n * @internal\n * Internal\n */\n disabled?: boolean;\n}\n\n/**\n * An empty programmatic controller for reusable animations.\n * Used internally when animations are disabled, to avoid\n * checking for the null case when an animation player is expected.\n *\n * @see `animate()`\n * @see `AnimationPlayer`\n * @see `GroupPlayer`\n *\n * @publicApi\n */\nexport class NoopAnimationPlayer implements AnimationPlayer {\n private _onDoneFns: Function[] = [];\n private _onStartFns: Function[] = [];\n private _onDestroyFns: Function[] = [];\n private _started = false;\n private _destroyed = false;\n private _finished = false;\n private _position = 0;\n public parentPlayer: AnimationPlayer|null = null;\n public readonly totalTime: number;\n constructor(duration: number = 0, delay: number = 0) {\n this.totalTime = duration + delay;\n }\n private _onFinish() {\n if (!this._finished) {\n this._finished = true;\n this._onDoneFns.forEach(fn => fn());\n this._onDoneFns = [];\n }\n }\n onStart(fn: () => void): void {\n this._onStartFns.push(fn);\n }\n onDone(fn: () => void): void {\n this._onDoneFns.push(fn);\n }\n onDestroy(fn: () => void): void {\n this._onDestroyFns.push(fn);\n }\n hasStarted(): boolean {\n return this._started;\n }\n init(): void {}\n play(): void {\n if (!this.hasStarted()) {\n this._onStart();\n this.triggerMicrotask();\n }\n this._started = true;\n }\n\n /** @internal */\n triggerMicrotask() {\n scheduleMicroTask(() => this._onFinish());\n }\n\n private _onStart() {\n this._onStartFns.forEach(fn => fn());\n this._onStartFns = [];\n }\n\n pause(): void {}\n restart(): void {}\n finish(): void {\n this._onFinish();\n }\n destroy(): void {\n if (!this._destroyed) {\n this._destroyed = true;\n if (!this.hasStarted()) {\n this._onStart();\n }\n this.finish();\n this._onDestroyFns.forEach(fn => fn());\n this._onDestroyFns = [];\n }\n }\n reset(): void {\n this._started = false;\n }\n setPosition(position: number): void {\n this._position = this.totalTime ? position * this.totalTime : 1;\n }\n getPosition(): number {\n return this.totalTime ? this._position / this.totalTime : 1;\n }\n\n /** @internal */\n triggerCallback(phaseName: string): void {\n const methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns;\n methods.forEach(fn => fn());\n methods.length = 0;\n }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {scheduleMicroTask} from '../util';\nimport {AnimationPlayer} from './animation_player';\n\n/**\n * A programmatic controller for a group of reusable animations.\n * Used internally to control animations.\n *\n * @see `AnimationPlayer`\n * @see `{@link animations/group group()}`\n *\n */\nexport class AnimationGroupPlayer implements AnimationPlayer {\n private _onDoneFns: Function[] = [];\n private _onStartFns: Function[] = [];\n private _finished = false;\n private _started = false;\n private _destroyed = false;\n private _onDestroyFns: Function[] = [];\n\n public parentPlayer: AnimationPlayer|null = null;\n public totalTime: number = 0;\n public readonly players: AnimationPlayer[];\n\n constructor(_players: AnimationPlayer[]) {\n this.players = _players;\n let doneCount = 0;\n let destroyCount = 0;\n let startCount = 0;\n const total = this.players.length;\n\n if (total == 0) {\n scheduleMicroTask(() => this._onFinish());\n } else {\n this.players.forEach(player => {\n player.onDone(() => {\n if (++doneCount == total) {\n this._onFinish();\n }\n });\n player.onDestroy(() => {\n if (++destroyCount == total) {\n this._onDestroy();\n }\n });\n player.onStart(() => {\n if (++startCount == total) {\n this._onStart();\n }\n });\n });\n }\n\n this.totalTime = this.players.reduce((time, player) => Math.max(time, player.totalTime), 0);\n }\n\n private _onFinish() {\n if (!this._finished) {\n this._finished = true;\n this._onDoneFns.forEach(fn => fn());\n this._onDoneFns = [];\n }\n }\n\n init(): void {\n this.players.forEach(player => player.init());\n }\n\n onStart(fn: () => void): void {\n this._onStartFns.push(fn);\n }\n\n private _onStart() {\n if (!this.hasStarted()) {\n this._started = true;\n this._onStartFns.forEach(fn => fn());\n this._onStartFns = [];\n }\n }\n\n onDone(fn: () => void): void {\n this._onDoneFns.push(fn);\n }\n\n onDestroy(fn: () => void): void {\n this._onDestroyFns.push(fn);\n }\n\n hasStarted() {\n return this._started;\n }\n\n play() {\n if (!this.parentPlayer) {\n this.init();\n }\n this._onStart();\n this.players.forEach(player => player.play());\n }\n\n pause(): void {\n this.players.forEach(player => player.pause());\n }\n\n restart(): void {\n this.players.forEach(player => player.restart());\n }\n\n finish(): void {\n this._onFinish();\n this.players.forEach(player => player.finish());\n }\n\n destroy(): void {\n this._onDestroy();\n }\n\n private _onDestroy() {\n if (!this._destroyed) {\n this._destroyed = true;\n this._onFinish();\n this.players.forEach(player => player.destroy());\n this._onDestroyFns.forEach(fn => fn());\n this._onDestroyFns = [];\n }\n }\n\n reset(): void {\n this.players.forEach(player => player.reset());\n this._destroyed = false;\n this._finished = false;\n this._started = false;\n }\n\n setPosition(p: number): void {\n const timeAtPosition = p * this.totalTime;\n this.players.forEach(player => {\n const position = player.totalTime ? Math.min(1, timeAtPosition / player.totalTime) : 1;\n player.setPosition(position);\n });\n }\n\n getPosition(): number {\n const longestPlayer =\n this.players.reduce((longestSoFar: AnimationPlayer|null, player: AnimationPlayer) => {\n const newPlayerIsLongest =\n longestSoFar === null || player.totalTime > longestSoFar.totalTime;\n return newPlayerIsLongest ? player : longestSoFar;\n }, null);\n return longestPlayer != null ? longestPlayer.getPosition() : 0;\n }\n\n beforeDestroy(): void {\n this.players.forEach(player => {\n if (player.beforeDestroy) {\n player.beforeDestroy();\n }\n });\n }\n\n /** @internal */\n triggerCallback(phaseName: string): void {\n const methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns;\n methods.forEach(fn => fn());\n methods.length = 0;\n }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nexport {AnimationGroupPlayer as ɵAnimationGroupPlayer} from './players/animation_group_player';\nexport const ɵPRE_STYLE = '!';\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/**\n * @module\n * @description\n * Entry point for all animation APIs of the animation package.\n */\nexport {AnimationBuilder, AnimationFactory} from './animation_builder';\nexport {AnimationEvent} from './animation_event';\nexport {animate, animateChild, AnimateChildOptions, AnimateTimings, animation, AnimationAnimateChildMetadata, AnimationAnimateMetadata, AnimationAnimateRefMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationOptions, AnimationQueryMetadata, AnimationQueryOptions, AnimationReferenceMetadata, AnimationSequenceMetadata, AnimationStaggerMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, AnimationTriggerMetadata, AUTO_STYLE, group, keyframes, query, sequence, stagger, state, style, transition, trigger, useAnimation, ɵStyleData} from './animation_metadata';\nexport {AnimationPlayer, NoopAnimationPlayer} from './players/animation_player';\n\nexport * from './private_export';\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/**\n * @module\n * @description\n * Entry point for all public APIs of this package.\n */\nexport * from './src/animations';\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n// This file is not used to build this module. It is only used during editing\n// by the TypeScript language service and during build for verification. `ngc`\n// replaces this file with production index.ts when it rewrites private symbol\n// names.\n\nexport * from './public_api';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"animations.mjs","sources":["../../../../../../packages/animations/src/animation_builder.ts","../../../../../../packages/animations/src/animation_metadata.ts","../../../../../../packages/animations/src/util.ts","../../../../../../packages/animations/src/players/animation_player.ts","../../../../../../packages/animations/src/players/animation_group_player.ts","../../../../../../packages/animations/src/private_export.ts","../../../../../../packages/animations/src/animations.ts","../../../../../../packages/animations/public_api.ts","../../../../../../packages/animations/index.ts","../../../../../../packages/animations/animations.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {AnimationMetadata, AnimationOptions} from './animation_metadata';\nimport {AnimationPlayer} from './players/animation_player';\n\n/**\n * An injectable service that produces an animation sequence programmatically within an\n * Angular component or directive.\n * Provided by the `BrowserAnimationsModule` or `NoopAnimationsModule`.\n *\n * @usageNotes\n *\n * To use this service, add it to your component or directive as a dependency.\n * The service is instantiated along with your component.\n *\n * Apps do not typically need to create their own animation players, but if you\n * do need to, follow these steps:\n *\n * 1. Use the `build()` method to create a programmatic animation using the\n * `animate()` function. The method returns an `AnimationFactory` instance.\n *\n * 2. Use the factory object to create an `AnimationPlayer` and attach it to a DOM element.\n *\n * 3. Use the player object to control the animation programmatically.\n *\n * For example:\n *\n * ```ts\n * // import the service from BrowserAnimationsModule\n * import {AnimationBuilder} from '@angular/animations';\n * // require the service as a dependency\n * class MyCmp {\n * constructor(private _builder: AnimationBuilder) {}\n *\n * makeAnimation(element: any) {\n * // first define a reusable animation\n * const myAnimation = this._builder.build([\n * style({ width: 0 }),\n * animate(1000, style({ width: '100px' }))\n * ]);\n *\n * // use the returned factory object to create a player\n * const player = myAnimation.create(element);\n *\n * player.play();\n * }\n * }\n * ```\n *\n * @publicApi\n */\nexport abstract class AnimationBuilder {\n /**\n * Builds a factory for producing a defined animation.\n * @param animation A reusable animation definition.\n * @returns A factory object that can create a player for the defined animation.\n * @see `animate()`\n */\n abstract build(animation: AnimationMetadata|AnimationMetadata[]): AnimationFactory;\n}\n\n/**\n * A factory object returned from the `AnimationBuilder`.`build()` method.\n *\n * @publicApi\n */\nexport abstract class AnimationFactory {\n /**\n * Creates an `AnimationPlayer` instance for the reusable animation defined by\n * the `AnimationBuilder`.`build()` method that created this factory.\n * Attaches the new player a DOM element.\n * @param element The DOM element to which to attach the animation.\n * @param options A set of options that can include a time delay and\n * additional developer-defined parameters.\n */\n abstract create(element: any, options?: AnimationOptions): AnimationPlayer;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/**\n * Represents a set of CSS styles for use in an animation style.\n */\nexport interface ɵStyleData {\n [key: string]: string|number;\n}\n\n/**\n * Represents animation-step timing parameters for an animation step.\n * @see `animate()`\n *\n * @publicApi\n */\nexport declare type AnimateTimings = {\n /**\n * The full duration of an animation step. A number and optional time unit,\n * such as \"1s\" or \"10ms\" for one second and 10 milliseconds, respectively.\n * The default unit is milliseconds.\n */\n duration: number,\n /**\n * The delay in applying an animation step. A number and optional time unit.\n * The default unit is milliseconds.\n */\n delay: number,\n /**\n * An easing style that controls how an animations step accelerates\n * and decelerates during its run time. An easing function such as `cubic-bezier()`,\n * or one of the following constants:\n * - `ease-in`\n * - `ease-out`\n * - `ease-in-and-out`\n */\n easing: string | null\n};\n\n/**\n * @description Options that control animation styling and timing.\n *\n * The following animation functions accept `AnimationOptions` data:\n *\n * - `transition()`\n * - `sequence()`\n * - `{@link animations/group group()}`\n * - `query()`\n * - `animation()`\n * - `useAnimation()`\n * - `animateChild()`\n *\n * Programmatic animations built using the `AnimationBuilder` service also\n * make use of `AnimationOptions`.\n *\n * @publicApi\n */\nexport declare interface AnimationOptions {\n /**\n * Sets a time-delay for initiating an animation action.\n * A number and optional time unit, such as \"1s\" or \"10ms\" for one second\n * and 10 milliseconds, respectively.The default unit is milliseconds.\n * Default value is 0, meaning no delay.\n */\n delay?: number|string;\n /**\n * A set of developer-defined parameters that modify styling and timing\n * when an animation action starts. An array of key-value pairs, where the provided value\n * is used as a default.\n */\n params?: {[name: string]: any};\n}\n\n/**\n * Adds duration options to control animation styling and timing for a child animation.\n *\n * @see `animateChild()`\n *\n * @publicApi\n */\nexport declare interface AnimateChildOptions extends AnimationOptions {\n duration?: number|string;\n}\n\n/**\n * @description Constants for the categories of parameters that can be defined for animations.\n *\n * A corresponding function defines a set of parameters for each category, and\n * collects them into a corresponding `AnimationMetadata` object.\n *\n * @publicApi\n */\nexport const enum AnimationMetadataType {\n /**\n * Associates a named animation state with a set of CSS styles.\n * See `state()`\n */\n State = 0,\n /**\n * Data for a transition from one animation state to another.\n * See `transition()`\n */\n Transition = 1,\n /**\n * Contains a set of animation steps.\n * See `sequence()`\n */\n Sequence = 2,\n /**\n * Contains a set of animation steps.\n * See `{@link animations/group group()}`\n */\n Group = 3,\n /**\n * Contains an animation step.\n * See `animate()`\n */\n Animate = 4,\n /**\n * Contains a set of animation steps.\n * See `keyframes()`\n */\n Keyframes = 5,\n /**\n * Contains a set of CSS property-value pairs into a named style.\n * See `style()`\n */\n Style = 6,\n /**\n * Associates an animation with an entry trigger that can be attached to an element.\n * See `trigger()`\n */\n Trigger = 7,\n /**\n * Contains a re-usable animation.\n * See `animation()`\n */\n Reference = 8,\n /**\n * Contains data to use in executing child animations returned by a query.\n * See `animateChild()`\n */\n AnimateChild = 9,\n /**\n * Contains animation parameters for a re-usable animation.\n * See `useAnimation()`\n */\n AnimateRef = 10,\n /**\n * Contains child-animation query data.\n * See `query()`\n */\n Query = 11,\n /**\n * Contains data for staggering an animation sequence.\n * See `stagger()`\n */\n Stagger = 12\n}\n\n/**\n * Specifies automatic styling.\n *\n * @publicApi\n */\nexport const AUTO_STYLE = '*';\n\n/**\n * Base for animation data structures.\n *\n * @publicApi\n */\nexport interface AnimationMetadata {\n type: AnimationMetadataType;\n}\n\n/**\n * Contains an animation trigger. Instantiated and returned by the\n * `trigger()` function.\n *\n * @publicApi\n */\nexport interface AnimationTriggerMetadata extends AnimationMetadata {\n /**\n * The trigger name, used to associate it with an element. Unique within the component.\n */\n name: string;\n /**\n * An animation definition object, containing an array of state and transition declarations.\n */\n definitions: AnimationMetadata[];\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: {params?: {[name: string]: any}}|null;\n}\n\n/**\n * Encapsulates an animation state by associating a state name with a set of CSS styles.\n * Instantiated and returned by the `state()` function.\n *\n * @publicApi\n */\nexport interface AnimationStateMetadata extends AnimationMetadata {\n /**\n * The state name, unique within the component.\n */\n name: string;\n /**\n * The CSS styles associated with this state.\n */\n styles: AnimationStyleMetadata;\n /**\n * An options object containing\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation.\n */\n options?: {params: {[name: string]: any}};\n}\n\n/**\n * Encapsulates an animation transition. Instantiated and returned by the\n * `transition()` function.\n *\n * @publicApi\n */\nexport interface AnimationTransitionMetadata extends AnimationMetadata {\n /**\n * An expression that describes a state change.\n */\n expr: string|\n ((fromState: string, toState: string, element?: any,\n params?: {[key: string]: any}) => boolean);\n /**\n * One or more animation objects to which this transition applies.\n */\n animation: AnimationMetadata|AnimationMetadata[];\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: AnimationOptions|null;\n}\n\n/**\n * Encapsulates a reusable animation, which is a collection of individual animation steps.\n * Instantiated and returned by the `animation()` function, and\n * passed to the `useAnimation()` function.\n *\n * @publicApi\n */\nexport interface AnimationReferenceMetadata extends AnimationMetadata {\n /**\n * One or more animation step objects.\n */\n animation: AnimationMetadata|AnimationMetadata[];\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: AnimationOptions|null;\n}\n\n/**\n * Encapsulates an animation query. Instantiated and returned by\n * the `query()` function.\n *\n * @publicApi\n */\nexport interface AnimationQueryMetadata extends AnimationMetadata {\n /**\n * The CSS selector for this query.\n */\n selector: string;\n /**\n * One or more animation step objects.\n */\n animation: AnimationMetadata|AnimationMetadata[];\n /**\n * A query options object.\n */\n options: AnimationQueryOptions|null;\n}\n\n/**\n * Encapsulates a keyframes sequence. Instantiated and returned by\n * the `keyframes()` function.\n *\n * @publicApi\n */\nexport interface AnimationKeyframesSequenceMetadata extends AnimationMetadata {\n /**\n * An array of animation styles.\n */\n steps: AnimationStyleMetadata[];\n}\n\n/**\n * Encapsulates an animation style. Instantiated and returned by\n * the `style()` function.\n *\n * @publicApi\n */\nexport interface AnimationStyleMetadata extends AnimationMetadata {\n /**\n * A set of CSS style properties.\n */\n styles: '*'|{[key: string]: string | number}|Array<{[key: string]: string | number}|'*'>;\n /**\n * A percentage of the total animate time at which the style is to be applied.\n */\n offset: number|null;\n}\n\n/**\n * Encapsulates an animation step. Instantiated and returned by\n * the `animate()` function.\n *\n * @publicApi\n */\nexport interface AnimationAnimateMetadata extends AnimationMetadata {\n /**\n * The timing data for the step.\n */\n timings: string|number|AnimateTimings;\n /**\n * A set of styles used in the step.\n */\n styles: AnimationStyleMetadata|AnimationKeyframesSequenceMetadata|null;\n}\n\n/**\n * Encapsulates a child animation, that can be run explicitly when the parent is run.\n * Instantiated and returned by the `animateChild` function.\n *\n * @publicApi\n */\nexport interface AnimationAnimateChildMetadata extends AnimationMetadata {\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: AnimationOptions|null;\n}\n\n/**\n * Encapsulates a reusable animation.\n * Instantiated and returned by the `useAnimation()` function.\n *\n * @publicApi\n */\nexport interface AnimationAnimateRefMetadata extends AnimationMetadata {\n /**\n * An animation reference object.\n */\n animation: AnimationReferenceMetadata;\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: AnimationOptions|null;\n}\n\n/**\n * Encapsulates an animation sequence.\n * Instantiated and returned by the `sequence()` function.\n *\n * @publicApi\n */\nexport interface AnimationSequenceMetadata extends AnimationMetadata {\n /**\n * An array of animation step objects.\n */\n steps: AnimationMetadata[];\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: AnimationOptions|null;\n}\n\n/**\n * Encapsulates an animation group.\n * Instantiated and returned by the `{@link animations/group group()}` function.\n *\n * @publicApi\n */\nexport interface AnimationGroupMetadata extends AnimationMetadata {\n /**\n * One or more animation or style steps that form this group.\n */\n steps: AnimationMetadata[];\n /**\n * An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation. Default delay is 0.\n */\n options: AnimationOptions|null;\n}\n\n/**\n * Encapsulates animation query options.\n * Passed to the `query()` function.\n *\n * @publicApi\n */\nexport declare interface AnimationQueryOptions extends AnimationOptions {\n /**\n * True if this query is optional, false if it is required. Default is false.\n * A required query throws an error if no elements are retrieved when\n * the query is executed. An optional query does not.\n *\n */\n optional?: boolean;\n /**\n * A maximum total number of results to return from the query.\n * If negative, results are limited from the end of the query list towards the beginning.\n * By default, results are not limited.\n */\n limit?: number;\n}\n\n/**\n * Encapsulates parameters for staggering the start times of a set of animation steps.\n * Instantiated and returned by the `stagger()` function.\n *\n * @publicApi\n **/\nexport interface AnimationStaggerMetadata extends AnimationMetadata {\n /**\n * The timing data for the steps.\n */\n timings: string|number;\n /**\n * One or more animation steps.\n */\n animation: AnimationMetadata|AnimationMetadata[];\n}\n\n/**\n * Creates a named animation trigger, containing a list of `state()`\n * and `transition()` entries to be evaluated when the expression\n * bound to the trigger changes.\n *\n * @param name An identifying string.\n * @param definitions An animation definition object, containing an array of `state()`\n * and `transition()` declarations.\n *\n * @return An object that encapsulates the trigger data.\n *\n * @usageNotes\n * Define an animation trigger in the `animations` section of `@Component` metadata.\n * In the template, reference the trigger by name and bind it to a trigger expression that\n * evaluates to a defined animation state, using the following format:\n *\n * `[@triggerName]=\"expression\"`\n *\n * Animation trigger bindings convert all values to strings, and then match the\n * previous and current values against any linked transitions.\n * Booleans can be specified as `1` or `true` and `0` or `false`.\n *\n * ### Usage Example\n *\n * The following example creates an animation trigger reference based on the provided\n * name value.\n * The provided animation value is expected to be an array consisting of state and\n * transition 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 makes use of the defined trigger\n * 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 * ### Using an inline function\n * The `transition` animation method also supports reading an inline function which can decide\n * if its associated animation should be run.\n *\n * ```typescript\n * // this method is run each time the `myAnimationTrigger` trigger value changes.\n * function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key:\n string]: any}): boolean {\n * // notice that `element` and `params` are also available here\n * return toState == 'yes-please-animate';\n * }\n *\n * @Component({\n * selector: 'my-component',\n * templateUrl: 'my-component-tpl.html',\n * animations: [\n * trigger('myAnimationTrigger', [\n * transition(myInlineMatcherFn, [\n * // the animation sequence code\n * ]),\n * ])\n * ]\n * })\n * class MyComponent {\n * myStatusExp = \"yes-please-animate\";\n * }\n * ```\n *\n * ### Disabling Animations\n * When true, the special animation control binding `@.disabled` binding prevents\n * all animations from rendering.\n * Place the `@.disabled` binding on an element to disable\n * animations on the element itself, as well as any inner animation triggers\n * within the element.\n *\n * The following example shows how to use this feature:\n *\n * ```typescript\n * @Component({\n * selector: 'my-component',\n * template: `\n * <div [@.disabled]=\"isDisabled\">\n * <div [@childAnimation]=\"exp\"></div>\n * </div>\n * `,\n * animations: [\n * trigger(\"childAnimation\", [\n * // ...\n * ])\n * ]\n * })\n * class MyComponent {\n * isDisabled = true;\n * exp = '...';\n * }\n * ```\n *\n * When `@.disabled` is true, it prevents the `@childAnimation` trigger from animating,\n * along with any inner animations.\n *\n * ### Disable animations application-wide\n * When an area of the template is set to have animations disabled,\n * **all** inner components have their animations disabled as well.\n * This means that you can disable all animations for an app\n * by placing a host binding set on `@.disabled` on the topmost Angular component.\n *\n * ```typescript\n * import {Component, HostBinding} from '@angular/core';\n *\n * @Component({\n * selector: 'app-component',\n * templateUrl: 'app.component.html',\n * })\n * class AppComponent {\n * @HostBinding('@.disabled')\n * public animationsDisabled = true;\n * }\n * ```\n *\n * ### Overriding disablement of inner animations\n * Despite inner animations being disabled, a parent animation can `query()`\n * for inner elements located in disabled areas of the template and still animate\n * them if needed. This is also the case for when a sub animation is\n * queried by a parent and then later animated using `animateChild()`.\n *\n * ### Detecting when an animation is disabled\n * If a region of the DOM (or the entire application) has its animations disabled, the animation\n * trigger callbacks still fire, but for zero seconds. When the callback fires, it provides\n * an instance of an `AnimationEvent`. If animations are disabled,\n * the `.disabled` flag on the event is true.\n *\n * @publicApi\n */\nexport function trigger(name: string, definitions: AnimationMetadata[]): AnimationTriggerMetadata {\n return {type: AnimationMetadataType.Trigger, name, definitions, options: {}};\n}\n\n/**\n * Defines an animation step that combines styling information with timing information.\n *\n * @param timings Sets `AnimateTimings` for the parent animation.\n * A string in the format \"duration [delay] [easing]\".\n * - Duration and delay are expressed as a number and optional time unit,\n * such as \"1s\" or \"10ms\" for one second and 10 milliseconds, respectively.\n * The default unit is milliseconds.\n * - The easing value controls how the animation accelerates and decelerates\n * during its runtime. Value is one of `ease`, `ease-in`, `ease-out`,\n * `ease-in-out`, or a `cubic-bezier()` function call.\n * If not supplied, no easing is applied.\n *\n * For example, the string \"1s 100ms ease-out\" specifies a duration of\n * 1000 milliseconds, and delay of 100 ms, and the \"ease-out\" easing style,\n * which decelerates near the end of the duration.\n * @param styles Sets AnimationStyles for the parent animation.\n * A function call to either `style()` or `keyframes()`\n * that returns a collection of CSS style entries to be applied to the parent animation.\n * When null, uses the styles from the destination state.\n * This is useful when describing an animation step that will complete an animation;\n * see \"Animating to the final state\" in `transitions()`.\n * @returns An object that encapsulates the animation step.\n *\n * @usageNotes\n * Call within an animation `sequence()`, `{@link animations/group group()}`, or\n * `transition()` call to specify an animation step\n * that applies given style data to the parent animation for a given amount of time.\n *\n * ### Syntax Examples\n * **Timing examples**\n *\n * The following examples show various `timings` specifications.\n * - `animate(500)` : Duration is 500 milliseconds.\n * - `animate(\"1s\")` : Duration is 1000 milliseconds.\n * - `animate(\"100ms 0.5s\")` : Duration is 100 milliseconds, delay is 500 milliseconds.\n * - `animate(\"5s ease-in\")` : Duration is 5000 milliseconds, easing in.\n * - `animate(\"5s 10ms cubic-bezier(.17,.67,.88,.1)\")` : Duration is 5000 milliseconds, delay is 10\n * milliseconds, easing according to a bezier curve.\n *\n * **Style examples**\n *\n * The following example calls `style()` to set a single CSS style.\n * ```typescript\n * animate(500, style({ background: \"red\" }))\n * ```\n * The following example calls `keyframes()` to set a CSS style\n * to different values for successive keyframes.\n * ```typescript\n * animate(500, keyframes(\n * [\n * style({ background: \"blue\" }),\n * style({ background: \"red\" })\n * ])\n * ```\n *\n * @publicApi\n */\nexport function animate(\n timings: string|number,\n styles: AnimationStyleMetadata|AnimationKeyframesSequenceMetadata|null =\n null): AnimationAnimateMetadata {\n return {type: AnimationMetadataType.Animate, styles, timings};\n}\n\n/**\n * @description Defines a list of animation steps to be run in parallel.\n *\n * @param steps An array of animation step objects.\n * - When steps are defined by `style()` or `animate()`\n * function calls, each call within the group is executed instantly.\n * - To specify offset styles to be applied at a later time, define steps with\n * `keyframes()`, or use `animate()` calls with a delay value.\n * For example:\n *\n * ```typescript\n * group([\n * animate(\"1s\", style({ background: \"black\" })),\n * animate(\"2s\", style({ color: \"white\" }))\n * ])\n * ```\n *\n * @param options An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation.\n *\n * @return An object that encapsulates the group data.\n *\n * @usageNotes\n * Grouped animations are useful when a series of styles must be\n * animated at different starting times and closed off at different ending times.\n *\n * When called within a `sequence()` or a\n * `transition()` call, does not continue to the next\n * instruction until all of the inner animation steps have completed.\n *\n * @publicApi\n */\nexport function group(\n steps: AnimationMetadata[], options: AnimationOptions|null = null): AnimationGroupMetadata {\n return {type: AnimationMetadataType.Group, steps, options};\n}\n\n/**\n * Defines a list of animation steps to be run sequentially, one by one.\n *\n * @param steps An array of animation step objects.\n * - Steps defined by `style()` calls apply the styling data immediately.\n * - Steps defined by `animate()` calls apply the styling data over time\n * as specified by the timing data.\n *\n * ```typescript\n * sequence([\n * style({ opacity: 0 }),\n * animate(\"1s\", style({ opacity: 1 }))\n * ])\n * ```\n *\n * @param options An options object containing a delay and\n * developer-defined parameters that provide styling defaults and\n * can be overridden on invocation.\n *\n * @return An object that encapsulates the sequence data.\n *\n * @usageNotes\n * When you pass an array of steps to a\n * `transition()` call, the steps run sequentially by default.\n * Compare this to the `{@link animations/group group()}` call, which runs animation steps in\n *parallel.\n *\n * When a sequence is used within a `{@link animations/group group()}` or a `transition()` call,\n * execution continues to the next instruction only after each of the inner animation\n * steps have completed.\n *\n * @publicApi\n **/\nexport function sequence(\n steps: AnimationMetadata[], options: AnimationOptions|null = null): AnimationSequenceMetadata {\n return {type: AnimationMetadataType.Sequence, steps, options};\n}\n\n/**\n * Declares a key/value object containing CSS properties/styles that\n * can then be used for an animation `state`, within an animation `sequence`,\n * or as styling data for calls to `animate()` and `keyframes()`.\n *\n * @param tokens A set of CSS styles or HTML styles associated with an animation state.\n * The value can be any of the following:\n * - A key-value style pair associating a CSS property with a value.\n * - An array of key-value style pairs.\n * - An asterisk (*), to use auto-styling, where styles are derived from the element\n * being animated and applied to the animation when it starts.\n *\n * Auto-styling can be used to define a state that depends on layout or other\n * environmental factors.\n *\n * @return An object that encapsulates the style data.\n *\n * @usageNotes\n * The following examples create animation styles that collect a set of\n * CSS property values:\n *\n * ```typescript\n * // string values for CSS properties\n * style({ background: \"red\", color: \"blue\" })\n *\n * // numerical pixel values\n * style({ width: 100, height: 0 })\n * ```\n *\n * The following example uses auto-styling to allow an element to animate from\n * a height of 0 up to its full height:\n *\n * ```\n * style({ height: 0 }),\n * animate(\"1s\", style({ height: \"*\" }))\n * ```\n *\n * @publicApi\n **/\nexport function style(tokens: '*'|{[key: string]: string | number}|\n Array<'*'|{[key: string]: string | number}>): AnimationStyleMetadata {\n return {type: AnimationMetadataType.Style, styles: tokens, offset: null};\n}\n\n/**\n * Declares an animation state within a trigger attached to an element.\n *\n * @param name One or more names for the defined state in a comma-separated string.\n * The following reserved state names can be supplied to define a style for specific use\n * cases:\n *\n * - `void` You can associate styles with this name to be used when\n * the element is detached from the application. For example, when an `ngIf` evaluates\n * to false, the state of the associated element is void.\n * - `*` (asterisk) Indicates the default state. You can associate styles with this name\n * to be used as the fallback when the state that is being animated is not declared\n * within the trigger.\n *\n * @param styles A set of CSS styles associated with this state, created using the\n * `style()` function.\n * This set of styles persists on the element once the state has been reached.\n * @param options Parameters that can be passed to the state when it is invoked.\n * 0 or more key-value pairs.\n * @return An object that encapsulates the new state data.\n *\n * @usageNotes\n * Use the `trigger()` function to register states to an animation trigger.\n * Use the `transition()` function to animate between states.\n * When a state is active within a component, its associated styles persist on the element,\n * even when the animation ends.\n *\n * @publicApi\n **/\nexport function state(\n name: string, styles: AnimationStyleMetadata,\n options?: {params: {[name: string]: any}}): AnimationStateMetadata {\n return {type: AnimationMetadataType.State, name, styles, options};\n}\n\n/**\n * Defines a set of animation styles, associating each style with an optional `offset` value.\n *\n * @param steps A set of animation styles with optional offset data.\n * The optional `offset` value for a style specifies a percentage of the total animation\n * time at which that style is applied.\n * @returns An object that encapsulates the keyframes data.\n *\n * @usageNotes\n * Use with the `animate()` call. Instead of applying animations\n * from the current state\n * to the destination state, keyframes describe how each style entry is applied and at what point\n * within the animation arc.\n * Compare [CSS Keyframe Animations](https://www.w3schools.com/css/css3_animations.asp).\n *\n * ### Usage\n *\n * In the following example, the offset values describe\n * when each `backgroundColor` value is applied. The color is red at the start, and changes to\n * blue when 20% of the total time has elapsed.\n *\n * ```typescript\n * // the provided offset values\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 * If there are no `offset` values specified in the style entries, the offsets\n * are 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 * @publicApi\n */\nexport function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSequenceMetadata {\n return {type: AnimationMetadataType.Keyframes, steps};\n}\n\n/**\n * Declares an animation transition as a sequence of animation steps to run when a given\n * condition is satisfied. The condition is a Boolean expression or function that compares\n * the previous and current animation states, and returns true if this transition should occur.\n * When the state criteria of a defined transition are met, the associated animation is\n * triggered.\n *\n * @param stateChangeExpr A Boolean expression or function that compares the previous and current\n * animation states, and returns true if this transition should occur. Note that \"true\" and \"false\"\n * match 1 and 0, respectively. An expression is evaluated each time a state change occurs in the\n * animation trigger element.\n * The animation steps run when the expression evaluates to true.\n *\n * - A state-change string takes the form \"state1 => state2\", where each side is a defined animation\n * state, or an asterisk (*) to refer to a dynamic start or end state.\n * - The expression string can contain multiple comma-separated statements;\n * for example \"state1 => state2, state3 => state4\".\n * - Special values `:enter` and `:leave` initiate a transition on the entry and exit states,\n * equivalent to \"void => *\" and \"* => void\".\n * - Special values `:increment` and `:decrement` initiate a transition when a numeric value has\n * increased or decreased in value.\n * - A function is executed each time a state change occurs in the animation trigger element.\n * The animation steps run when the function returns true.\n *\n * @param steps One or more animation objects, as returned by the `animate()` or\n * `sequence()` function, that form a transformation from one state to another.\n * A sequence is used by default when you pass an array.\n * @param options An options object that can contain a delay value for the start of the animation,\n * and additional developer-defined parameters. Provided values for additional parameters are used\n * as defaults, and override values can be passed to the caller on invocation.\n * @returns An object that encapsulates the transition data.\n *\n * @usageNotes\n * The template associated with a component binds an animation trigger to an element.\n *\n * ```HTML\n * <!-- somewhere inside of my-component-tpl.html -->\n * <div [@myAnimationTrigger]=\"myStatusExp\">...</div>\n * ```\n *\n * All transitions are defined within an animation trigger,\n * along with named states that the transitions change to and from.\n *\n * ```typescript\n * trigger(\"myAnimationTrigger\", [\n * // define states\n * state(\"on\", style({ background: \"green\" })),\n * state(\"off\", style({ background: \"grey\" })),\n * ...]\n * ```\n *\n * Note that when you call the `sequence()` function within a `{@link animations/group group()}`\n * or a `transition()` call, execution does not continue to the next instruction\n * until each of the inner animation steps have completed.\n *\n * ### Syntax examples\n *\n * The following examples define transitions between the two defined states (and default states),\n * using various options:\n *\n * ```typescript\n * // Transition occurs when the state value\n * // bound to \"myAnimationTrigger\" changes from \"on\" to \"off\"\n * transition(\"on => off\", animate(500))\n * // Run the same animation for both directions\n * transition(\"on <=> off\", animate(500))\n * // Define multiple state-change pairs separated by commas\n * transition(\"on => off, off => void\", animate(500))\n * ```\n *\n * ### Special values for state-change expressions\n *\n * - Catch-all state change for when an element is inserted into the page and the\n * destination state is unknown:\n *\n * ```typescript\n * transition(\"void => *\", [\n * style({ opacity: 0 }),\n * animate(500)\n * ])\n * ```\n *\n * - Capture a state change between any states:\n *\n * `transition(\"* => *\", animate(\"1s 0s\"))`\n *\n * - Entry and exit transitions:\n *\n * ```typescript\n * transition(\":enter\", [\n * style({ opacity: 0 }),\n * animate(500, style({ opacity: 1 }))\n * ]),\n * transition(\":leave\", [\n * animate(500, style({ opacity: 0 }))\n * ])\n * ```\n *\n * - Use `:increment` and `:decrement` to initiate transitions:\n *\n * ```typescript\n * transition(\":increment\", group([\n * query(':enter', [\n * style({ left: '100%' }),\n * animate('0.5s ease-out', style('*'))\n * ]),\n * query(':leave', [\n * animate('0.5s ease-out', style({ left: '-100%' }))\n * ])\n * ]))\n *\n * transition(\":decrement\", group([\n * query(':enter', [\n * style({ left: '100%' }),\n * animate('0.5s ease-out', style('*'))\n * ]),\n * query(':leave', [\n * animate('0.5s ease-out', style({ left: '-100%' }))\n * ])\n * ]))\n * ```\n *\n * ### State-change functions\n *\n * Here is an example of a `fromState` specified as a state-change function that invokes an\n * animation when true:\n *\n * ```typescript\n * transition((fromState, toState) =>\n * {\n * return fromState == \"off\" && toState == \"on\";\n * },\n * animate(\"1s 0s\"))\n * ```\n *\n * ### Animating to the final state\n *\n * If the final step in a transition is a call to `animate()` that uses a timing value\n * with no style data, that step is automatically considered the final animation arc,\n * for the element to reach the final state. Angular automatically adds or removes\n * CSS styles to ensure that the element is in the correct final state.\n *\n * The following example defines a transition that starts by hiding the element,\n * then makes sure that it animates properly to whatever state is currently active for trigger:\n *\n * ```typescript\n * transition(\"void => *\", [\n * style({ opacity: 0 }),\n * animate(500)\n * ])\n * ```\n * ### Boolean value matching\n * If a trigger binding value is a Boolean, it can be matched using a transition expression\n * that compares true and false or 1 and 0. For example:\n *\n * ```\n * // in the template\n * <div [@openClose]=\"open ? true : false\">...</div>\n * // in the component metadata\n * trigger('openClose', [\n * state('true', style({ height: '*' })),\n * state('false', style({ height: '0px' })),\n * transition('false <=> true', animate(500))\n * ])\n * ```\n *\n * @publicApi\n **/\nexport function transition(\n stateChangeExpr: string|\n ((fromState: string, toState: string, element?: any, params?: {[key: string]: any}) => boolean),\n steps: AnimationMetadata|AnimationMetadata[],\n options: AnimationOptions|null = null): AnimationTransitionMetadata {\n return {type: AnimationMetadataType.Transition, expr: stateChangeExpr, animation: steps, options};\n}\n\n/**\n * Produces a reusable animation that can be invoked in another animation or sequence,\n * by calling the `useAnimation()` function.\n *\n * @param steps One or more animation objects, as returned by the `animate()`\n * or `sequence()` function, that form a transformation from one state to another.\n * A sequence is used by default when you pass an array.\n * @param options An options object that can contain a delay value for the start of the\n * animation, and additional developer-defined parameters.\n * Provided values for additional parameters are used as defaults,\n * and override values can be passed to the caller on invocation.\n * @returns An object that encapsulates the animation data.\n *\n * @usageNotes\n * The following example defines a reusable animation, providing some default parameter\n * values.\n *\n * ```typescript\n * var fadeAnimation = animation([\n * style({ opacity: '{{ start }}' }),\n * animate('{{ time }}',\n * style({ opacity: '{{ end }}'}))\n * ],\n * { params: { time: '1000ms', start: 0, end: 1 }});\n * ```\n *\n * The following invokes the defined animation with a call to `useAnimation()`,\n * passing in override parameter values.\n *\n * ```js\n * useAnimation(fadeAnimation, {\n * params: {\n * time: '2s',\n * start: 1,\n * end: 0\n * }\n * })\n * ```\n *\n * If any of the passed-in parameter values are missing from this call,\n * the default values are used. If one or more parameter values are missing before a step is\n * animated, `useAnimation()` throws an error.\n *\n * @publicApi\n */\nexport function animation(\n steps: AnimationMetadata|AnimationMetadata[],\n options: AnimationOptions|null = null): AnimationReferenceMetadata {\n return {type: AnimationMetadataType.Reference, animation: steps, options};\n}\n\n/**\n * Executes a queried inner animation element within an animation sequence.\n *\n * @param options An options object that can contain a delay value for the start of the\n * animation, and additional override values for developer-defined parameters.\n * @return An object that encapsulates the child animation data.\n *\n * @usageNotes\n * Each time an animation is triggered in Angular, the parent animation\n * has priority and any child animations are blocked. In order\n * for a child animation to run, the parent animation must query each of the elements\n * containing child animations, and run them using this function.\n *\n * Note that this feature is designed to be used with `query()` and it will only work\n * with animations that are assigned using the Angular animation library. CSS keyframes\n * and transitions are not handled by this API.\n *\n * @publicApi\n */\nexport function animateChild(options: AnimateChildOptions|null = null):\n AnimationAnimateChildMetadata {\n return {type: AnimationMetadataType.AnimateChild, options};\n}\n\n/**\n * Starts a reusable animation that is created using the `animation()` function.\n *\n * @param animation The reusable animation to start.\n * @param options An options object that can contain a delay value for the start of\n * the animation, and additional override values for developer-defined parameters.\n * @return An object that contains the animation parameters.\n *\n * @publicApi\n */\nexport function useAnimation(\n animation: AnimationReferenceMetadata,\n options: AnimationOptions|null = null): AnimationAnimateRefMetadata {\n return {type: AnimationMetadataType.AnimateRef, animation, options};\n}\n\n/**\n * Finds one or more inner elements within the current element that is\n * being animated within a sequence. Use with `animate()`.\n *\n * @param selector The element to query, or a set of elements that contain Angular-specific\n * characteristics, specified with one or more of the following tokens.\n * - `query(\":enter\")` or `query(\":leave\")` : Query for newly inserted/removed elements.\n * - `query(\":animating\")` : Query all currently animating elements.\n * - `query(\"@triggerName\")` : Query elements that contain an animation trigger.\n * - `query(\"@*\")` : Query all elements that contain an animation triggers.\n * - `query(\":self\")` : Include the current element into the animation sequence.\n *\n * @param animation One or more animation steps to apply to the queried element or elements.\n * An array is treated as an animation sequence.\n * @param options An options object. Use the 'limit' field to limit the total number of\n * items to collect.\n * @return An object that encapsulates the query data.\n *\n * @usageNotes\n * Tokens can be merged into a combined query selector string. For example:\n *\n * ```typescript\n * query(':self, .record:enter, .record:leave, @subTrigger', [...])\n * ```\n *\n * The `query()` function collects multiple elements and works internally by using\n * `element.querySelectorAll`. Use the `limit` field of an options object to limit\n * the total number of items to be collected. For example:\n *\n * ```js\n * query('div', [\n * animate(...),\n * animate(...)\n * ], { limit: 1 })\n * ```\n *\n * By default, throws an error when zero items are found. Set the\n * `optional` flag to ignore this error. For example:\n *\n * ```js\n * query('.some-element-that-may-not-be-there', [\n * animate(...),\n * animate(...)\n * ], { optional: true })\n * ```\n *\n * ### Usage Example\n *\n * The following example queries for inner elements and animates them\n * individually using `animate()`.\n *\n * ```typescript\n * @Component({\n * selector: 'inner',\n * template: `\n * <div [@queryAnimation]=\"exp\">\n * <h1>Title</h1>\n * <div class=\"content\">\n * Blah blah blah\n * </div>\n * </div>\n * `,\n * animations: [\n * trigger('queryAnimation', [\n * transition('* => goAnimate', [\n * // hide the inner elements\n * query('h1', style({ opacity: 0 })),\n * query('.content', style({ opacity: 0 })),\n *\n * // animate the inner elements in, one by one\n * query('h1', animate(1000, style({ opacity: 1 }))),\n * query('.content', animate(1000, style({ opacity: 1 }))),\n * ])\n * ])\n * ]\n * })\n * class Cmp {\n * exp = '';\n *\n * goAnimate() {\n * this.exp = 'goAnimate';\n * }\n * }\n * ```\n *\n * @publicApi\n */\nexport function query(\n selector: string, animation: AnimationMetadata|AnimationMetadata[],\n options: AnimationQueryOptions|null = null): AnimationQueryMetadata {\n return {type: AnimationMetadataType.Query, selector, animation, options};\n}\n\n/**\n * Use within an animation `query()` call to issue a timing gap after\n * each queried item is animated.\n *\n * @param timings A delay value.\n * @param animation One ore more animation steps.\n * @returns An object that encapsulates the stagger data.\n *\n * @usageNotes\n * In the following example, a container element wraps a list of items stamped out\n * by an `ngFor`. The container element contains an animation trigger that will later be set\n * to query for each of the inner items.\n *\n * Each time items are added, the opacity fade-in animation runs,\n * and each removed item is faded out.\n * When either of these animations occur, the stagger effect is\n * applied after each item's animation is started.\n *\n * ```html\n * <!-- list.component.html -->\n * <button (click)=\"toggle()\">Show / Hide Items</button>\n * <hr />\n * <div [@listAnimation]=\"items.length\">\n * <div *ngFor=\"let item of items\">\n * {{ item }}\n * </div>\n * </div>\n * ```\n *\n * Here is the component code:\n *\n * ```typescript\n * import {trigger, transition, style, animate, query, stagger} from '@angular/animations';\n * @Component({\n * templateUrl: 'list.component.html',\n * animations: [\n * trigger('listAnimation', [\n * ...\n * ])\n * ]\n * })\n * class ListComponent {\n * items = [];\n *\n * showItems() {\n * this.items = [0,1,2,3,4];\n * }\n *\n * hideItems() {\n * this.items = [];\n * }\n *\n * toggle() {\n * this.items.length ? this.hideItems() : this.showItems();\n * }\n * }\n * ```\n *\n * Here is the animation trigger code:\n *\n * ```typescript\n * trigger('listAnimation', [\n * transition('* => *', [ // each time the binding value changes\n * query(':leave', [\n * stagger(100, [\n * animate('0.5s', style({ opacity: 0 }))\n * ])\n * ]),\n * query(':enter', [\n * style({ opacity: 0 }),\n * stagger(100, [\n * animate('0.5s', style({ opacity: 1 }))\n * ])\n * ])\n * ])\n * ])\n * ```\n *\n * @publicApi\n */\nexport function stagger(timings: string|number, animation: AnimationMetadata|AnimationMetadata[]):\n AnimationStaggerMetadata {\n return {type: AnimationMetadataType.Stagger, timings, animation};\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nexport function scheduleMicroTask(cb: () => any) {\n Promise.resolve(null).then(cb);\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {scheduleMicroTask} from '../util';\n\n/**\n * Provides programmatic control of a reusable animation sequence,\n * built using the `build()` method of `AnimationBuilder`. The `build()` method\n * returns a factory, whose `create()` method instantiates and initializes this interface.\n *\n * @see `AnimationBuilder`\n * @see `AnimationFactory`\n * @see `animate()`\n *\n * @publicApi\n */\nexport interface AnimationPlayer {\n /**\n * Provides a callback to invoke when the animation finishes.\n * @param fn The callback function.\n * @see `finish()`\n */\n onDone(fn: () => void): void;\n /**\n * Provides a callback to invoke when the animation starts.\n * @param fn The callback function.\n * @see `run()`\n */\n onStart(fn: () => void): void;\n /**\n * Provides a callback to invoke after the animation is destroyed.\n * @param fn The callback function.\n * @see `destroy()`\n * @see `beforeDestroy()`\n */\n onDestroy(fn: () => void): void;\n /**\n * Initializes the animation.\n */\n init(): void;\n /**\n * Reports whether the animation has started.\n * @returns True if the animation has started, false otherwise.\n */\n hasStarted(): boolean;\n /**\n * Runs the animation, invoking the `onStart()` callback.\n */\n play(): void;\n /**\n * Pauses the animation.\n */\n pause(): void;\n /**\n * Restarts the paused animation.\n */\n restart(): void;\n /**\n * Ends the animation, invoking the `onDone()` callback.\n */\n finish(): void;\n /**\n * Destroys the animation, after invoking the `beforeDestroy()` callback.\n * Calls the `onDestroy()` callback when destruction is completed.\n */\n destroy(): void;\n /**\n * Resets the animation to its initial state.\n */\n reset(): void;\n /**\n * Sets the position of the animation.\n * @param position A 0-based offset into the duration, in milliseconds.\n */\n setPosition(position: any /** TODO #9100 */): void;\n /**\n * Reports the current position of the animation.\n * @returns A 0-based offset into the duration, in milliseconds.\n */\n getPosition(): number;\n /**\n * The parent of this player, if any.\n */\n parentPlayer: AnimationPlayer|null;\n /**\n * The total run time of the animation, in milliseconds.\n */\n readonly totalTime: number;\n /**\n * Provides a callback to invoke before the animation is destroyed.\n */\n beforeDestroy?: () => any;\n /**\n * @internal\n * Internal\n */\n triggerCallback?: (phaseName: string) => void;\n /**\n * @internal\n * Internal\n */\n disabled?: boolean;\n}\n\n/**\n * An empty programmatic controller for reusable animations.\n * Used internally when animations are disabled, to avoid\n * checking for the null case when an animation player is expected.\n *\n * @see `animate()`\n * @see `AnimationPlayer`\n * @see `GroupPlayer`\n *\n * @publicApi\n */\nexport class NoopAnimationPlayer implements AnimationPlayer {\n private _onDoneFns: Function[] = [];\n private _onStartFns: Function[] = [];\n private _onDestroyFns: Function[] = [];\n private _started = false;\n private _destroyed = false;\n private _finished = false;\n private _position = 0;\n public parentPlayer: AnimationPlayer|null = null;\n public readonly totalTime: number;\n constructor(duration: number = 0, delay: number = 0) {\n this.totalTime = duration + delay;\n }\n private _onFinish() {\n if (!this._finished) {\n this._finished = true;\n this._onDoneFns.forEach(fn => fn());\n this._onDoneFns = [];\n }\n }\n onStart(fn: () => void): void {\n this._onStartFns.push(fn);\n }\n onDone(fn: () => void): void {\n this._onDoneFns.push(fn);\n }\n onDestroy(fn: () => void): void {\n this._onDestroyFns.push(fn);\n }\n hasStarted(): boolean {\n return this._started;\n }\n init(): void {}\n play(): void {\n if (!this.hasStarted()) {\n this._onStart();\n this.triggerMicrotask();\n }\n this._started = true;\n }\n\n /** @internal */\n triggerMicrotask() {\n scheduleMicroTask(() => this._onFinish());\n }\n\n private _onStart() {\n this._onStartFns.forEach(fn => fn());\n this._onStartFns = [];\n }\n\n pause(): void {}\n restart(): void {}\n finish(): void {\n this._onFinish();\n }\n destroy(): void {\n if (!this._destroyed) {\n this._destroyed = true;\n if (!this.hasStarted()) {\n this._onStart();\n }\n this.finish();\n this._onDestroyFns.forEach(fn => fn());\n this._onDestroyFns = [];\n }\n }\n reset(): void {\n this._started = false;\n }\n setPosition(position: number): void {\n this._position = this.totalTime ? position * this.totalTime : 1;\n }\n getPosition(): number {\n return this.totalTime ? this._position / this.totalTime : 1;\n }\n\n /** @internal */\n triggerCallback(phaseName: string): void {\n const methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns;\n methods.forEach(fn => fn());\n methods.length = 0;\n }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {scheduleMicroTask} from '../util';\nimport {AnimationPlayer} from './animation_player';\n\n/**\n * A programmatic controller for a group of reusable animations.\n * Used internally to control animations.\n *\n * @see `AnimationPlayer`\n * @see `{@link animations/group group()}`\n *\n */\nexport class AnimationGroupPlayer implements AnimationPlayer {\n private _onDoneFns: Function[] = [];\n private _onStartFns: Function[] = [];\n private _finished = false;\n private _started = false;\n private _destroyed = false;\n private _onDestroyFns: Function[] = [];\n\n public parentPlayer: AnimationPlayer|null = null;\n public totalTime: number = 0;\n public readonly players: AnimationPlayer[];\n\n constructor(_players: AnimationPlayer[]) {\n this.players = _players;\n let doneCount = 0;\n let destroyCount = 0;\n let startCount = 0;\n const total = this.players.length;\n\n if (total == 0) {\n scheduleMicroTask(() => this._onFinish());\n } else {\n this.players.forEach(player => {\n player.onDone(() => {\n if (++doneCount == total) {\n this._onFinish();\n }\n });\n player.onDestroy(() => {\n if (++destroyCount == total) {\n this._onDestroy();\n }\n });\n player.onStart(() => {\n if (++startCount == total) {\n this._onStart();\n }\n });\n });\n }\n\n this.totalTime = this.players.reduce((time, player) => Math.max(time, player.totalTime), 0);\n }\n\n private _onFinish() {\n if (!this._finished) {\n this._finished = true;\n this._onDoneFns.forEach(fn => fn());\n this._onDoneFns = [];\n }\n }\n\n init(): void {\n this.players.forEach(player => player.init());\n }\n\n onStart(fn: () => void): void {\n this._onStartFns.push(fn);\n }\n\n private _onStart() {\n if (!this.hasStarted()) {\n this._started = true;\n this._onStartFns.forEach(fn => fn());\n this._onStartFns = [];\n }\n }\n\n onDone(fn: () => void): void {\n this._onDoneFns.push(fn);\n }\n\n onDestroy(fn: () => void): void {\n this._onDestroyFns.push(fn);\n }\n\n hasStarted() {\n return this._started;\n }\n\n play() {\n if (!this.parentPlayer) {\n this.init();\n }\n this._onStart();\n this.players.forEach(player => player.play());\n }\n\n pause(): void {\n this.players.forEach(player => player.pause());\n }\n\n restart(): void {\n this.players.forEach(player => player.restart());\n }\n\n finish(): void {\n this._onFinish();\n this.players.forEach(player => player.finish());\n }\n\n destroy(): void {\n this._onDestroy();\n }\n\n private _onDestroy() {\n if (!this._destroyed) {\n this._destroyed = true;\n this._onFinish();\n this.players.forEach(player => player.destroy());\n this._onDestroyFns.forEach(fn => fn());\n this._onDestroyFns = [];\n }\n }\n\n reset(): void {\n this.players.forEach(player => player.reset());\n this._destroyed = false;\n this._finished = false;\n this._started = false;\n }\n\n setPosition(p: number): void {\n const timeAtPosition = p * this.totalTime;\n this.players.forEach(player => {\n const position = player.totalTime ? Math.min(1, timeAtPosition / player.totalTime) : 1;\n player.setPosition(position);\n });\n }\n\n getPosition(): number {\n const longestPlayer =\n this.players.reduce((longestSoFar: AnimationPlayer|null, player: AnimationPlayer) => {\n const newPlayerIsLongest =\n longestSoFar === null || player.totalTime > longestSoFar.totalTime;\n return newPlayerIsLongest ? player : longestSoFar;\n }, null);\n return longestPlayer != null ? longestPlayer.getPosition() : 0;\n }\n\n beforeDestroy(): void {\n this.players.forEach(player => {\n if (player.beforeDestroy) {\n player.beforeDestroy();\n }\n });\n }\n\n /** @internal */\n triggerCallback(phaseName: string): void {\n const methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns;\n methods.forEach(fn => fn());\n methods.length = 0;\n }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nexport {AnimationGroupPlayer as ɵAnimationGroupPlayer} from './players/animation_group_player';\nexport const ɵPRE_STYLE = '!';\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/**\n * @module\n * @description\n * Entry point for all animation APIs of the animation package.\n */\nexport {AnimationBuilder, AnimationFactory} from './animation_builder';\nexport {AnimationEvent} from './animation_event';\nexport {animate, animateChild, AnimateChildOptions, AnimateTimings, animation, AnimationAnimateChildMetadata, AnimationAnimateMetadata, AnimationAnimateRefMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationOptions, AnimationQueryMetadata, AnimationQueryOptions, AnimationReferenceMetadata, AnimationSequenceMetadata, AnimationStaggerMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, AnimationTriggerMetadata, AUTO_STYLE, group, keyframes, query, sequence, stagger, state, style, transition, trigger, useAnimation, ɵStyleData} from './animation_metadata';\nexport {AnimationPlayer, NoopAnimationPlayer} from './players/animation_player';\n\nexport * from './private_export';\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/**\n * @module\n * @description\n * Entry point for all public APIs of this package.\n */\nexport * from './src/animations';\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n// This file is not used to build this module. It is only used during editing\n// by the TypeScript language service and during build for verification. `ngc`\n// replaces this file with production index.ts when it rewrites private symbol\n// names.\n\nexport * from './public_api';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA8CsB,gBAAgB;CAQrC;AAED;;;;;MAKsB,gBAAgB;;;ACvEtC;;;;;;;AAqKA;;;;;MAKa,UAAU,GAAG,IAAI;AAyR9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAoJgB,OAAO,CAAC,IAAY,EAAE,WAAgC;IACpE,OAAO,EAAC,IAAI,mBAAiC,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAC,CAAC;AAC/E,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SA0DgB,OAAO,CACnB,OAAsB,EACtB,SACI,IAAI;IACV,OAAO,EAAC,IAAI,mBAAiC,MAAM,EAAE,OAAO,EAAC,CAAC;AAChE,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAiCgB,KAAK,CACjB,KAA0B,EAAE,UAAiC,IAAI;IACnE,OAAO,EAAC,IAAI,iBAA+B,KAAK,EAAE,OAAO,EAAC,CAAC;AAC7D,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAiCgB,QAAQ,CACpB,KAA0B,EAAE,UAAiC,IAAI;IACnE,OAAO,EAAC,IAAI,oBAAkC,KAAK,EAAE,OAAO,EAAC,CAAC;AAChE,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAuCgB,KAAK,CAAC,MAC2C;IAC/D,OAAO,EAAC,IAAI,iBAA+B,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAC,CAAC;AAC3E,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SA6BgB,KAAK,CACjB,IAAY,EAAE,MAA8B,EAC5C,OAAyC;IAC3C,OAAO,EAAC,IAAI,iBAA+B,IAAI,EAAE,MAAM,EAAE,OAAO,EAAC,CAAC;AACpE,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SA6CgB,SAAS,CAAC,KAA+B;IACvD,OAAO,EAAC,IAAI,qBAAmC,KAAK,EAAC,CAAC;AACxD,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAwKgB,UAAU,CACtB,eAC+F,EAC/F,KAA4C,EAC5C,UAAiC,IAAI;IACvC,OAAO,EAAC,IAAI,sBAAoC,IAAI,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAC,CAAC;AACpG,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SA6CgB,SAAS,CACrB,KAA4C,EAC5C,UAAiC,IAAI;IACvC,OAAO,EAAC,IAAI,qBAAmC,SAAS,EAAE,KAAK,EAAE,OAAO,EAAC,CAAC;AAC5E,CAAC;AAED;;;;;;;;;;;;;;;;;;;SAmBgB,YAAY,CAAC,UAAoC,IAAI;IAEnE,OAAO,EAAC,IAAI,wBAAsC,OAAO,EAAC,CAAC;AAC7D,CAAC;AAED;;;;;;;;;;SAUgB,YAAY,CACxB,SAAqC,EACrC,UAAiC,IAAI;IACvC,OAAO,EAAC,IAAI,uBAAoC,SAAS,EAAE,OAAO,EAAC,CAAC;AACtE,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAuFgB,KAAK,CACjB,QAAgB,EAAE,SAAgD,EAClE,UAAsC,IAAI;IAC5C,OAAO,EAAC,IAAI,kBAA+B,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAC,CAAC;AAC3E,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAgFgB,OAAO,CAAC,OAAsB,EAAE,SAAgD;IAE9F,OAAO,EAAC,IAAI,oBAAiC,OAAO,EAAE,SAAS,EAAC,CAAC;AACnE;;ACnyCA;;;;;;;SAOgB,iBAAiB,CAAC,EAAa;IAC7C,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjC;;ACTA;;;;;;;AA4GA;;;;;;;;;;;MAWa,mBAAmB;IAU9B,YAAY,WAAmB,CAAC,EAAE,QAAgB,CAAC;QAT3C,eAAU,GAAe,EAAE,CAAC;QAC5B,gBAAW,GAAe,EAAE,CAAC;QAC7B,kBAAa,GAAe,EAAE,CAAC;QAC/B,aAAQ,GAAG,KAAK,CAAC;QACjB,eAAU,GAAG,KAAK,CAAC;QACnB,cAAS,GAAG,KAAK,CAAC;QAClB,cAAS,GAAG,CAAC,CAAC;QACf,iBAAY,GAAyB,IAAI,CAAC;QAG/C,IAAI,CAAC,SAAS,GAAG,QAAQ,GAAG,KAAK,CAAC;KACnC;IACO,SAAS;QACf,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;YACpC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;SACtB;KACF;IACD,OAAO,CAAC,EAAc;QACpB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC3B;IACD,MAAM,CAAC,EAAc;QACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC1B;IACD,SAAS,CAAC,EAAc;QACtB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7B;IACD,UAAU;QACR,OAAO,IAAI,CAAC,QAAQ,CAAC;KACtB;IACD,IAAI,MAAW;IACf,IAAI;QACF,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE;YACtB,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;QACD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;KACtB;;IAGD,gBAAgB;QACd,iBAAiB,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;KAC3C;IAEO,QAAQ;QACd,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;QACrC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;KACvB;IAED,KAAK,MAAW;IAChB,OAAO,MAAW;IAClB,MAAM;QACJ,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IACD,OAAO;QACL,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE;gBACtB,IAAI,CAAC,QAAQ,EAAE,CAAC;aACjB;YACD,IAAI,CAAC,MAAM,EAAE,CAAC;YACd,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;YACvC,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;SACzB;KACF;IACD,KAAK;QACH,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;KACvB;IACD,WAAW,CAAC,QAAgB;QAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,QAAQ,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;KACjE;IACD,WAAW;QACT,OAAO,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;KAC7D;;IAGD,eAAe,CAAC,SAAiB;QAC/B,MAAM,OAAO,GAAG,SAAS,IAAI,OAAO,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC;QAC1E,OAAO,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;QAC5B,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;KACpB;;;ACzMH;;;;;;;AAWA;;;;;;;;MAQa,oBAAoB;IAY/B,YAAY,QAA2B;QAX/B,eAAU,GAAe,EAAE,CAAC;QAC5B,gBAAW,GAAe,EAAE,CAAC;QAC7B,cAAS,GAAG,KAAK,CAAC;QAClB,aAAQ,GAAG,KAAK,CAAC;QACjB,eAAU,GAAG,KAAK,CAAC;QACnB,kBAAa,GAAe,EAAE,CAAC;QAEhC,iBAAY,GAAyB,IAAI,CAAC;QAC1C,cAAS,GAAW,CAAC,CAAC;QAI3B,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;QACxB,IAAI,SAAS,GAAG,CAAC,CAAC;QAClB,IAAI,YAAY,GAAG,CAAC,CAAC;QACrB,IAAI,UAAU,GAAG,CAAC,CAAC;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;QAElC,IAAI,KAAK,IAAI,CAAC,EAAE;YACd,iBAAiB,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;SAC3C;aAAM;YACL,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM;gBACzB,MAAM,CAAC,MAAM,CAAC;oBACZ,IAAI,EAAE,SAAS,IAAI,KAAK,EAAE;wBACxB,IAAI,CAAC,SAAS,EAAE,CAAC;qBAClB;iBACF,CAAC,CAAC;gBACH,MAAM,CAAC,SAAS,CAAC;oBACf,IAAI,EAAE,YAAY,IAAI,KAAK,EAAE;wBAC3B,IAAI,CAAC,UAAU,EAAE,CAAC;qBACnB;iBACF,CAAC,CAAC;gBACH,MAAM,CAAC,OAAO,CAAC;oBACb,IAAI,EAAE,UAAU,IAAI,KAAK,EAAE;wBACzB,IAAI,CAAC,QAAQ,EAAE,CAAC;qBACjB;iBACF,CAAC,CAAC;aACJ,CAAC,CAAC;SACJ;QAED,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC;KAC7F;IAEO,SAAS;QACf,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;YACpC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;SACtB;KACF;IAED,IAAI;QACF,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;KAC/C;IAED,OAAO,CAAC,EAAc;QACpB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC3B;IAEO,QAAQ;QACd,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE;YACtB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;YACrC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;SACvB;KACF;IAED,MAAM,CAAC,EAAc;QACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC1B;IAED,SAAS,CAAC,EAAc;QACtB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7B;IAED,UAAU;QACR,OAAO,IAAI,CAAC,QAAQ,CAAC;KACtB;IAED,IAAI;QACF,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;QACD,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;KAC/C;IAED,KAAK;QACH,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;KAChD;IAED,OAAO;QACL,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC;KAClD;IAED,MAAM;QACJ,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC;KACjD;IAED,OAAO;QACL,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;IAEO,UAAU;QAChB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,IAAI,CAAC,SAAS,EAAE,CAAC;YACjB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC;YACjD,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;YACvC,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;SACzB;KACF;IAED,KAAK;QACH,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;QAC/C,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QACxB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;KACvB;IAED,WAAW,CAAC,CAAS;QACnB,MAAM,cAAc,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC;QAC1C,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM;YACzB,MAAM,QAAQ,GAAG,MAAM,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,cAAc,GAAG,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;YACvF,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;SAC9B,CAAC,CAAC;KACJ;IAED,WAAW;QACT,MAAM,aAAa,GACf,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,YAAkC,EAAE,MAAuB;YAC9E,MAAM,kBAAkB,GACpB,YAAY,KAAK,IAAI,IAAI,MAAM,CAAC,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC;YACvE,OAAO,kBAAkB,GAAG,MAAM,GAAG,YAAY,CAAC;SACnD,EAAE,IAAI,CAAC,CAAC;QACb,OAAO,aAAa,IAAI,IAAI,GAAG,aAAa,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;KAChE;IAED,aAAa;QACX,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM;YACzB,IAAI,MAAM,CAAC,aAAa,EAAE;gBACxB,MAAM,CAAC,aAAa,EAAE,CAAC;aACxB;SACF,CAAC,CAAC;KACJ;;IAGD,eAAe,CAAC,SAAiB;QAC/B,MAAM,OAAO,GAAG,SAAS,IAAI,OAAO,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC;QAC1E,OAAO,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;QAC5B,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;KACpB;;;AC5KH;;;;;;;MAQa,UAAU,GAAG;;ACR1B;;;;;;;;ACAA;;;;;;;;ACAA;;;;;;;;ACAA;;;;;;"}
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @license Angular v13.1.0-next.2
2
+ * @license Angular v13.1.0-next.3
3
3
  * (c) 2010-2021 Google LLC. https://angular.io/
4
4
  * License: MIT
5
5
  */
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @license Angular v13.1.0-next.2
2
+ * @license Angular v13.1.0-next.3
3
3
  * (c) 2010-2021 Google LLC. https://angular.io/
4
4
  * License: MIT
5
5
  */
@@ -258,9 +258,9 @@ class NoopAnimationDriver {
258
258
  return new NoopAnimationPlayer(duration, delay);
259
259
  }
260
260
  }
261
- NoopAnimationDriver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0-next.2", ngImport: i0, type: NoopAnimationDriver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
262
- NoopAnimationDriver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.0-next.2", ngImport: i0, type: NoopAnimationDriver });
263
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0-next.2", ngImport: i0, type: NoopAnimationDriver, decorators: [{
261
+ NoopAnimationDriver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0-next.3", ngImport: i0, type: NoopAnimationDriver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
262
+ NoopAnimationDriver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.0-next.3", ngImport: i0, type: NoopAnimationDriver });
263
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0-next.3", ngImport: i0, type: NoopAnimationDriver, decorators: [{
264
264
  type: Injectable
265
265
  }] });
266
266
  /**
@@ -1054,7 +1054,8 @@ function normalizeSelector(selector) {
1054
1054
  if (hasAmpersand) {
1055
1055
  selector = selector.replace(SELF_TOKEN_REGEX, '');
1056
1056
  }
1057
- // the :enter and :leave selectors are filled in at runtime during timeline building
1057
+ // Note: the :enter and :leave aren't normalized here since those
1058
+ // selectors are filled in at runtime during timeline building
1058
1059
  selector = selector.replace(/@\*/g, NG_TRIGGER_SELECTOR)
1059
1060
  .replace(/@\w+/g, match => NG_TRIGGER_SELECTOR + '-' + match.substr(1))
1060
1061
  .replace(/:animating/g, NG_ANIMATING_SELECTOR);
@@ -1229,14 +1230,14 @@ const LEAVE_TOKEN_REGEX = new RegExp(LEAVE_TOKEN, 'g');
1229
1230
  * [TimelineBuilder]
1230
1231
  * This class is responsible for tracking the styles and building a series of keyframe objects for a
1231
1232
  * timeline between a start and end time. The builder starts off with an initial timeline and each
1232
- * time the AST comes across a `group()`, `keyframes()` or a combination of the two wihtin a
1233
+ * time the AST comes across a `group()`, `keyframes()` or a combination of the two within a
1233
1234
  * `sequence()` then it will generate a sub timeline for each step as well as a new one after
1234
1235
  * they are complete.
1235
1236
  *
1236
1237
  * As the AST is traversed, the timing state on each of the timelines will be incremented. If a sub
1237
1238
  * timeline was created (based on one of the cases above) then the parent timeline will attempt to
1238
1239
  * merge the styles used within the sub timelines into itself (only with group() this will happen).
1239
- * This happens with a merge operation (much like how the merge works in mergesort) and it will only
1240
+ * This happens with a merge operation (much like how the merge works in mergeSort) and it will only
1240
1241
  * copy the most recently used styles from the sub timelines into the parent timeline. This ensures
1241
1242
  * that if the styles are used later on in another phase of the animation then they will be the most
1242
1243
  * up-to-date values.
@@ -1261,7 +1262,7 @@ const LEAVE_TOKEN_REGEX = new RegExp(LEAVE_TOKEN, 'g');
1261
1262
  * from all previous keyframes up until where it is first used. For the timeline keyframe generation
1262
1263
  * to properly fill in the style it will place the previous value (the value from the parent
1263
1264
  * timeline) or a default value of `*` into the backFill object. Given that each of the keyframe
1264
- * styles are objects that prototypically inhert from the backFill object, this means that if a
1265
+ * styles are objects that prototypically inherits from the backFill object, this means that if a
1265
1266
  * value is added into the backFill then it will automatically propagate any missing values to all
1266
1267
  * keyframes. Therefore the missing `height` value will be properly filled into the already
1267
1268
  * processed keyframes.
@@ -1366,7 +1367,7 @@ class AnimationTimelineBuilderVisitor {
1366
1367
  }
1367
1368
  if (ast.steps.length) {
1368
1369
  ast.steps.forEach(s => visitDslNode(this, s, ctx));
1369
- // this is here just incase the inner steps only contain or end with a style() call
1370
+ // this is here just in case the inner steps only contain or end with a style() call
1370
1371
  ctx.currentTimeline.applyStylesToKeyframe();
1371
1372
  // this means that some animation function within the sequence
1372
1373
  // ended up creating a sub timeline (which means the current
@@ -1642,7 +1643,7 @@ class AnimationTimelineContext {
1642
1643
  if (includeSelf) {
1643
1644
  results.push(this.element);
1644
1645
  }
1645
- if (selector.length > 0) { // if :self is only used then the selector is empty
1646
+ if (selector.length > 0) { // only if :self is used then the selector can be empty
1646
1647
  selector = selector.replace(ENTER_TOKEN_REGEX, '.' + this._enterClassName);
1647
1648
  selector = selector.replace(LEAVE_TOKEN_REGEX, '.' + this._leaveClassName);
1648
1649
  const multi = limit != 1;
@@ -1887,7 +1888,7 @@ class SubTimelineBuilder extends TimelineBuilder {
1887
1888
  When the keyframe is stretched then it means that the delay before the animation
1888
1889
  starts is gone. Instead the first keyframe is placed at the start of the animation
1889
1890
  and it is then copied to where it starts when the original delay is over. This basically
1890
- means nothing animates during that delay, but the styles are still renderered. For this
1891
+ means nothing animates during that delay, but the styles are still rendered. For this
1891
1892
  to work the original offset values that exist in the original keyframes must be "warped"
1892
1893
  so that they can take the new keyframe + delay into account.
1893
1894
 
@@ -2491,7 +2492,7 @@ class AnimationTransitionNamespace {
2491
2492
  // only remove the player if it is queued on the EXACT same trigger/namespace
2492
2493
  // we only also deal with queued players here because if the animation has
2493
2494
  // started then we want to keep the player alive until the flush happens
2494
- // (which is where the previousPlayers are passed into the new palyer)
2495
+ // (which is where the previousPlayers are passed into the new player)
2495
2496
  if (player.namespaceId == this.id && player.triggerName == triggerName && player.queued) {
2496
2497
  player.destroy();
2497
2498
  }
@@ -2781,7 +2782,7 @@ class TransitionAnimationEngine {
2781
2782
  // been inserted so that we know exactly where to place it in
2782
2783
  // the namespace list
2783
2784
  this.newHostElements.set(hostElement, ns);
2784
- // given that this host element is apart of the animation code, it
2785
+ // given that this host element is a part of the animation code, it
2785
2786
  // may or may not be inserted by a parent node that is of an
2786
2787
  // animation renderer type. If this happens then we can still have
2787
2788
  // access to this item when we query for :enter nodes. If the parent
@@ -2846,8 +2847,8 @@ class TransitionAnimationEngine {
2846
2847
  // normally there should only be one namespace per element, however
2847
2848
  // if @triggers are placed on both the component element and then
2848
2849
  // its host element (within the component code) then there will be
2849
- // two namespaces returned. We use a set here to simply the dedupe
2850
- // of namespaces incase there are multiple triggers both the elm and host
2850
+ // two namespaces returned. We use a set here to simply deduplicate
2851
+ // the namespaces in case (for the reason described above) there are multiple triggers
2851
2852
  const namespaces = new Set();
2852
2853
  const elementStates = this.statesByElement.get(element);
2853
2854
  if (elementStates) {
@@ -3162,29 +3163,30 @@ class TransitionAnimationEngine {
3162
3163
  erroneousTransitions.push(instruction);
3163
3164
  return;
3164
3165
  }
3165
- // even though the element may not be apart of the DOM, it may
3166
- // still be added at a later point (due to the mechanics of content
3166
+ // even though the element may not be in the DOM, it may still
3167
+ // be added at a later point (due to the mechanics of content
3167
3168
  // projection and/or dynamic component insertion) therefore it's
3168
- // important we still style the element.
3169
+ // important to still style the element.
3169
3170
  if (nodeIsOrphaned) {
3170
3171
  player.onStart(() => eraseStyles(element, instruction.fromStyles));
3171
3172
  player.onDestroy(() => setStyles(element, instruction.toStyles));
3172
3173
  skippedPlayers.push(player);
3173
3174
  return;
3174
3175
  }
3175
- // if a unmatched transition is queued to go then it SHOULD NOT render
3176
- // an animation and cancel the previously running animations.
3176
+ // if an unmatched transition is queued and ready to go
3177
+ // then it SHOULD NOT render an animation and cancel the
3178
+ // previously running animations.
3177
3179
  if (entry.isFallbackTransition) {
3178
3180
  player.onStart(() => eraseStyles(element, instruction.fromStyles));
3179
3181
  player.onDestroy(() => setStyles(element, instruction.toStyles));
3180
3182
  skippedPlayers.push(player);
3181
3183
  return;
3182
3184
  }
3183
- // this means that if a parent animation uses this animation as a sub trigger
3184
- // then it will instruct the timeline builder to not add a player delay, but
3185
- // instead stretch the first keyframe gap up until the animation starts. The
3186
- // reason this is important is to prevent extra initialization styles from being
3187
- // required by the user in the animation.
3185
+ // this means that if a parent animation uses this animation as a sub-trigger
3186
+ // then it will instruct the timeline builder not to add a player delay, but
3187
+ // instead stretch the first keyframe gap until the animation starts. This is
3188
+ // important in order to prevent extra initialization styles from being
3189
+ // required by the user for the animation.
3188
3190
  instruction.timelines.forEach(tl => tl.stretchStartingKeyframe = true);
3189
3191
  subTimelines.append(element, instruction.timelines);
3190
3192
  const tuple = { instruction, player, element };
@@ -3220,10 +3222,10 @@ class TransitionAnimationEngine {
3220
3222
  this.reportError(errors);
3221
3223
  }
3222
3224
  const allPreviousPlayersMap = new Map();
3223
- // this map works to tell which element in the DOM tree is contained by
3224
- // which animation. Further down below this map will get populated once
3225
- // the players are built and in doing so it can efficiently figure out
3226
- // if a sub player is skipped due to a parent player having priority.
3225
+ // this map tells us which element in the DOM tree is contained by
3226
+ // which animation. Further down this map will get populated once
3227
+ // the players are built and in doing so we can use it to efficiently
3228
+ // figure out if a sub player is skipped due to a parent player having priority.
3227
3229
  const animationElementMap = new Map();
3228
3230
  queuedInstructions.forEach(entry => {
3229
3231
  const element = entry.element;
@@ -3240,13 +3242,13 @@ class TransitionAnimationEngine {
3240
3242
  prevPlayer.destroy();
3241
3243
  });
3242
3244
  });
3243
- // this is a special case for nodes that will be removed (either by)
3245
+ // this is a special case for nodes that will be removed either by
3244
3246
  // having their own leave animations or by being queried in a container
3245
3247
  // that will be removed once a parent animation is complete. The idea
3246
3248
  // here is that * styles must be identical to ! styles because of
3247
3249
  // backwards compatibility (* is also filled in by default in many places).
3248
- // Otherwise * styles will return an empty value or auto since the element
3249
- // that is being getComputedStyle'd will not be visible (since * = destination)
3250
+ // Otherwise * styles will return an empty value or "auto" since the element
3251
+ // passed to getComputedStyle will not be visible (since * === destination)
3250
3252
  const replaceNodes = allLeaveNodes.filter(node => {
3251
3253
  return replacePostStylesAsPre(node, allPreStyleElements, allPostStyleElements);
3252
3254
  });
@@ -3328,9 +3330,9 @@ class TransitionAnimationEngine {
3328
3330
  }
3329
3331
  }
3330
3332
  });
3331
- // find all of the sub players' corresponding inner animation player
3333
+ // find all of the sub players' corresponding inner animation players
3332
3334
  subPlayers.forEach(player => {
3333
- // even if any players are not found for a sub animation then it
3335
+ // even if no players are found for a sub animation it
3334
3336
  // will still complete itself after the next tick since it's Noop
3335
3337
  const playersForElement = skippedPlayersMap.get(player.element);
3336
3338
  if (playersForElement && playersForElement.length) {