/** * @license Angular v12.2.13 * (c) 2010-2021 Google LLC. https://angular.io/ * License: MIT */ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : typeof define === 'function' && define.amd ? define('@angular/animations', ['exports'], factory) : (global = global || self, factory((global.ng = global.ng || {}, global.ng.animations = {}))); }(this, (function (exports) { 'use strict'; /** * An injectable service that produces an animation sequence programmatically within an * Angular component or directive. * Provided by the `BrowserAnimationsModule` or `NoopAnimationsModule`. * * @usageNotes * * To use this service, add it to your component or directive as a dependency. * The service is instantiated along with your component. * * Apps do not typically need to create their own animation players, but if you * do need to, follow these steps: * * 1. Use the `build()` method to create a programmatic animation using the * `animate()` function. The method returns an `AnimationFactory` instance. * * 2. Use the factory object to create an `AnimationPlayer` and attach it to a DOM element. * * 3. Use the player object to control the animation programmatically. * * For example: * * ```ts * // import the service from BrowserAnimationsModule * import {AnimationBuilder} from '@angular/animations'; * // require the service as a dependency * class MyCmp { * constructor(private _builder: AnimationBuilder) {} * * makeAnimation(element: any) { * // first define a reusable animation * const myAnimation = this._builder.build([ * style({ width: 0 }), * animate(1000, style({ width: '100px' })) * ]); * * // use the returned factory object to create a player * const player = myAnimation.create(element); * * player.play(); * } * } * ``` * * @publicApi */ var AnimationBuilder = /** @class */ (function () { function AnimationBuilder() { } return AnimationBuilder; }()); /** * A factory object returned from the `AnimationBuilder`.`build()` method. * * @publicApi */ var AnimationFactory = /** @class */ (function () { function AnimationFactory() { } return AnimationFactory; }()); /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ /** * Specifies automatic styling. * * @publicApi */ var AUTO_STYLE = '*'; /** * Creates a named animation trigger, containing a list of `state()` * and `transition()` entries to be evaluated when the expression * bound to the trigger changes. * * @param name An identifying string. * @param definitions An animation definition object, containing an array of `state()` * and `transition()` declarations. * * @return An object that encapsulates the trigger data. * * @usageNotes * Define an animation trigger in the `animations` section of `@Component` metadata. * In the template, reference the trigger by name and bind it to a trigger expression that * evaluates to a defined animation state, using the following format: * * `[@triggerName]="expression"` * * Animation trigger bindings convert all values to strings, and then match the * previous and current values against any linked transitions. * Booleans can be specified as `1` or `true` and `0` or `false`. * * ### Usage Example * * The following example creates an animation trigger reference based on the provided * name value. * The provided animation value is expected to be an array consisting of state and * transition declarations. * * ```typescript * @Component({ * selector: "my-component", * templateUrl: "my-component-tpl.html", * animations: [ * trigger("myAnimationTrigger", [ * state(...), * state(...), * transition(...), * transition(...) * ]) * ] * }) * class MyComponent { * myStatusExp = "something"; * } * ``` * * The template associated with this component makes use of the defined trigger * by binding to an element within its template code. * * ```html * *
...
* ``` * * ### Using an inline function * The `transition` animation method also supports reading an inline function which can decide * if its associated animation should be run. * * ```typescript * // this method is run each time the `myAnimationTrigger` trigger value changes. * function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key: string]: any}): boolean { * // notice that `element` and `params` are also available here * return toState == 'yes-please-animate'; * } * * @Component({ * selector: 'my-component', * templateUrl: 'my-component-tpl.html', * animations: [ * trigger('myAnimationTrigger', [ * transition(myInlineMatcherFn, [ * // the animation sequence code * ]), * ]) * ] * }) * class MyComponent { * myStatusExp = "yes-please-animate"; * } * ``` * * ### Disabling Animations * When true, the special animation control binding `@.disabled` binding prevents * all animations from rendering. * Place the `@.disabled` binding on an element to disable * animations on the element itself, as well as any inner animation triggers * within the element. * * The following example shows how to use this feature: * * ```typescript * @Component({ * selector: 'my-component', * template: ` *
*
*
* `, * animations: [ * trigger("childAnimation", [ * // ... * ]) * ] * }) * class MyComponent { * isDisabled = true; * exp = '...'; * } * ``` * * When `@.disabled` is true, it prevents the `@childAnimation` trigger from animating, * along with any inner animations. * * ### Disable animations application-wide * When an area of the template is set to have animations disabled, * **all** inner components have their animations disabled as well. * This means that you can disable all animations for an app * by placing a host binding set on `@.disabled` on the topmost Angular component. * * ```typescript * import {Component, HostBinding} from '@angular/core'; * * @Component({ * selector: 'app-component', * templateUrl: 'app.component.html', * }) * class AppComponent { * @HostBinding('@.disabled') * public animationsDisabled = true; * } * ``` * * ### Overriding disablement of inner animations * Despite inner animations being disabled, a parent animation can `query()` * for inner elements located in disabled areas of the template and still animate * them if needed. This is also the case for when a sub animation is * queried by a parent and then later animated using `animateChild()`. * * ### Detecting when an animation is disabled * If a region of the DOM (or the entire application) has its animations disabled, the animation * trigger callbacks still fire, but for zero seconds. When the callback fires, it provides * an instance of an `AnimationEvent`. If animations are disabled, * the `.disabled` flag on the event is true. * * @publicApi */ function trigger(name, definitions) { return { type: 7 /* Trigger */, name: name, definitions: definitions, options: {} }; } /** * Defines an animation step that combines styling information with timing information. * * @param timings Sets `AnimateTimings` for the parent animation. * A string in the format "duration [delay] [easing]". * - Duration and delay are expressed as a number and optional time unit, * such as "1s" or "10ms" for one second and 10 milliseconds, respectively. * The default unit is milliseconds. * - The easing value controls how the animation accelerates and decelerates * during its runtime. Value is one of `ease`, `ease-in`, `ease-out`, * `ease-in-out`, or a `cubic-bezier()` function call. * If not supplied, no easing is applied. * * For example, the string "1s 100ms ease-out" specifies a duration of * 1000 milliseconds, and delay of 100 ms, and the "ease-out" easing style, * which decelerates near the end of the duration. * @param styles Sets AnimationStyles for the parent animation. * A function call to either `style()` or `keyframes()` * that returns a collection of CSS style entries to be applied to the parent animation. * When null, uses the styles from the destination state. * This is useful when describing an animation step that will complete an animation; * see "Animating to the final state" in `transitions()`. * @returns An object that encapsulates the animation step. * * @usageNotes * Call within an animation `sequence()`, `{@link animations/group group()}`, or * `transition()` call to specify an animation step * that applies given style data to the parent animation for a given amount of time. * * ### Syntax Examples * **Timing examples** * * The following examples show various `timings` specifications. * - `animate(500)` : Duration is 500 milliseconds. * - `animate("1s")` : Duration is 1000 milliseconds. * - `animate("100ms 0.5s")` : Duration is 100 milliseconds, delay is 500 milliseconds. * - `animate("5s ease-in")` : Duration is 5000 milliseconds, easing in. * - `animate("5s 10ms cubic-bezier(.17,.67,.88,.1)")` : Duration is 5000 milliseconds, delay is 10 * milliseconds, easing according to a bezier curve. * * **Style examples** * * The following example calls `style()` to set a single CSS style. * ```typescript * animate(500, style({ background: "red" })) * ``` * The following example calls `keyframes()` to set a CSS style * to different values for successive keyframes. * ```typescript * animate(500, keyframes( * [ * style({ background: "blue" }), * style({ background: "red" }) * ]) * ``` * * @publicApi */ function animate(timings, styles) { if (styles === void 0) { styles = null; } return { type: 4 /* Animate */, styles: styles, timings: timings }; } /** * @description Defines a list of animation steps to be run in parallel. * * @param steps An array of animation step objects. * - When steps are defined by `style()` or `animate()` * function calls, each call within the group is executed instantly. * - To specify offset styles to be applied at a later time, define steps with * `keyframes()`, or use `animate()` calls with a delay value. * For example: * * ```typescript * group([ * animate("1s", style({ background: "black" })), * animate("2s", style({ color: "white" })) * ]) * ``` * * @param options An options object containing a delay and * developer-defined parameters that provide styling defaults and * can be overridden on invocation. * * @return An object that encapsulates the group data. * * @usageNotes * Grouped animations are useful when a series of styles must be * animated at different starting times and closed off at different ending times. * * When called within a `sequence()` or a * `transition()` call, does not continue to the next * instruction until all of the inner animation steps have completed. * * @publicApi */ function group(steps, options) { if (options === void 0) { options = null; } return { type: 3 /* Group */, steps: steps, options: options }; } /** * Defines a list of animation steps to be run sequentially, one by one. * * @param steps An array of animation step objects. * - Steps defined by `style()` calls apply the styling data immediately. * - Steps defined by `animate()` calls apply the styling data over time * as specified by the timing data. * * ```typescript * sequence([ * style({ opacity: 0 }), * animate("1s", style({ opacity: 1 })) * ]) * ``` * * @param options An options object containing a delay and * developer-defined parameters that provide styling defaults and * can be overridden on invocation. * * @return An object that encapsulates the sequence data. * * @usageNotes * When you pass an array of steps to a * `transition()` call, the steps run sequentially by default. * Compare this to the `{@link animations/group group()}` call, which runs animation steps in *parallel. * * When a sequence is used within a `{@link animations/group group()}` or a `transition()` call, * execution continues to the next instruction only after each of the inner animation * steps have completed. * * @publicApi **/ function sequence(steps, options) { if (options === void 0) { options = null; } return { type: 2 /* Sequence */, steps: steps, options: options }; } /** * Declares a key/value object containing CSS properties/styles that * can then be used for an animation `state`, within an animation `sequence`, * or as styling data for calls to `animate()` and `keyframes()`. * * @param tokens A set of CSS styles or HTML styles associated with an animation state. * The value can be any of the following: * - A key-value style pair associating a CSS property with a value. * - An array of key-value style pairs. * - An asterisk (*), to use auto-styling, where styles are derived from the element * being animated and applied to the animation when it starts. * * Auto-styling can be used to define a state that depends on layout or other * environmental factors. * * @return An object that encapsulates the style data. * * @usageNotes * The following examples create animation styles that collect a set of * CSS property values: * * ```typescript * // string values for CSS properties * style({ background: "red", color: "blue" }) * * // numerical pixel values * style({ width: 100, height: 0 }) * ``` * * The following example uses auto-styling to allow a component to animate from * a height of 0 up to the height of the parent element: * * ``` * style({ height: 0 }), * animate("1s", style({ height: "*" })) * ``` * * @publicApi **/ function style(tokens) { return { type: 6 /* Style */, styles: tokens, offset: null }; } /** * Declares an animation state within a trigger attached to an element. * * @param name One or more names for the defined state in a comma-separated string. * The following reserved state names can be supplied to define a style for specific use * cases: * * - `void` You can associate styles with this name to be used when * the element is detached from the application. For example, when an `ngIf` evaluates * to false, the state of the associated element is void. * - `*` (asterisk) Indicates the default state. You can associate styles with this name * to be used as the fallback when the state that is being animated is not declared * within the trigger. * * @param styles A set of CSS styles associated with this state, created using the * `style()` function. * This set of styles persists on the element once the state has been reached. * @param options Parameters that can be passed to the state when it is invoked. * 0 or more key-value pairs. * @return An object that encapsulates the new state data. * * @usageNotes * Use the `trigger()` function to register states to an animation trigger. * Use the `transition()` function to animate between states. * When a state is active within a component, its associated styles persist on the element, * even when the animation ends. * * @publicApi **/ function state(name, styles, options) { return { type: 0 /* State */, name: name, styles: styles, options: options }; } /** * Defines a set of animation styles, associating each style with an optional `offset` value. * * @param steps A set of animation styles with optional offset data. * The optional `offset` value for a style specifies a percentage of the total animation * time at which that style is applied. * @returns An object that encapsulates the keyframes data. * * @usageNotes * Use with the `animate()` call. Instead of applying animations * from the current state * to the destination state, keyframes describe how each style entry is applied and at what point * within the animation arc. * Compare [CSS Keyframe Animations](https://www.w3schools.com/css/css3_animations.asp). * * ### Usage * * In the following example, the offset values describe * when each `backgroundColor` value is applied. The color is red at the start, and changes to * blue when 20% of the total time has elapsed. * * ```typescript * // the provided offset values * animate("5s", keyframes([ * style({ backgroundColor: "red", offset: 0 }), * style({ backgroundColor: "blue", offset: 0.2 }), * style({ backgroundColor: "orange", offset: 0.3 }), * style({ backgroundColor: "black", offset: 1 }) * ])) * ``` * * If there are no `offset` values specified in the style entries, the offsets * are calculated automatically. * * ```typescript * animate("5s", keyframes([ * style({ backgroundColor: "red" }) // offset = 0 * style({ backgroundColor: "blue" }) // offset = 0.33 * style({ backgroundColor: "orange" }) // offset = 0.66 * style({ backgroundColor: "black" }) // offset = 1 * ])) *``` * @publicApi */ function keyframes(steps) { return { type: 5 /* Keyframes */, steps: steps }; } /** * Declares an animation transition as a sequence of animation steps to run when a given * condition is satisfied. The condition is a Boolean expression or function that compares * the previous and current animation states, and returns true if this transition should occur. * When the state criteria of a defined transition are met, the associated animation is * triggered. * * @param stateChangeExpr A Boolean expression or function that compares the previous and current * animation states, and returns true if this transition should occur. Note that "true" and "false" * match 1 and 0, respectively. An expression is evaluated each time a state change occurs in the * animation trigger element. * The animation steps run when the expression evaluates to true. * * - A state-change string takes the form "state1 => state2", where each side is a defined animation * state, or an asterix (*) to refer to a dynamic start or end state. * - The expression string can contain multiple comma-separated statements; * for example "state1 => state2, state3 => state4". * - Special values `:enter` and `:leave` initiate a transition on the entry and exit states, * equivalent to "void => *" and "* => void". * - Special values `:increment` and `:decrement` initiate a transition when a numeric value has * increased or decreased in value. * - A function is executed each time a state change occurs in the animation trigger element. * The animation steps run when the function returns true. * * @param steps One or more animation objects, as returned by the `animate()` or * `sequence()` function, that form a transformation from one state to another. * A sequence is used by default when you pass an array. * @param options An options object that can contain a delay value for the start of the animation, * and additional developer-defined parameters. Provided values for additional parameters are used * as defaults, and override values can be passed to the caller on invocation. * @returns An object that encapsulates the transition data. * * @usageNotes * The template associated with a component binds an animation trigger to an element. * * ```HTML * *
...
* ``` * * All transitions are defined within an animation trigger, * along with named states that the transitions change to and from. * * ```typescript * trigger("myAnimationTrigger", [ * // define states * state("on", style({ background: "green" })), * state("off", style({ background: "grey" })), * ...] * ``` * * Note that when you call the `sequence()` function within a `{@link animations/group group()}` * or a `transition()` call, execution does not continue to the next instruction * until each of the inner animation steps have completed. * * ### Syntax examples * * The following examples define transitions between the two defined states (and default states), * using various options: * * ```typescript * // Transition occurs when the state value * // bound to "myAnimationTrigger" changes from "on" to "off" * transition("on => off", animate(500)) * // Run the same animation for both directions * transition("on <=> off", animate(500)) * // Define multiple state-change pairs separated by commas * transition("on => off, off => void", animate(500)) * ``` * * ### Special values for state-change expressions * * - Catch-all state change for when an element is inserted into the page and the * destination state is unknown: * * ```typescript * transition("void => *", [ * style({ opacity: 0 }), * animate(500) * ]) * ``` * * - Capture a state change between any states: * * `transition("* => *", animate("1s 0s"))` * * - Entry and exit transitions: * * ```typescript * transition(":enter", [ * style({ opacity: 0 }), * animate(500, style({ opacity: 1 })) * ]), * transition(":leave", [ * animate(500, style({ opacity: 0 })) * ]) * ``` * * - Use `:increment` and `:decrement` to initiate transitions: * * ```typescript * transition(":increment", group([ * query(':enter', [ * style({ left: '100%' }), * animate('0.5s ease-out', style('*')) * ]), * query(':leave', [ * animate('0.5s ease-out', style({ left: '-100%' })) * ]) * ])) * * transition(":decrement", group([ * query(':enter', [ * style({ left: '100%' }), * animate('0.5s ease-out', style('*')) * ]), * query(':leave', [ * animate('0.5s ease-out', style({ left: '-100%' })) * ]) * ])) * ``` * * ### State-change functions * * Here is an example of a `fromState` specified as a state-change function that invokes an * animation when true: * * ```typescript * transition((fromState, toState) => * { * return fromState == "off" && toState == "on"; * }, * animate("1s 0s")) * ``` * * ### Animating to the final state * * If the final step in a transition is a call to `animate()` that uses a timing value * with no style data, that step is automatically considered the final animation arc, * for the element to reach the final state. Angular automatically adds or removes * CSS styles to ensure that the element is in the correct final state. * * The following example defines a transition that starts by hiding the element, * then makes sure that it animates properly to whatever state is currently active for trigger: * * ```typescript * transition("void => *", [ * style({ opacity: 0 }), * animate(500) * ]) * ``` * ### Boolean value matching * If a trigger binding value is a Boolean, it can be matched using a transition expression * that compares true and false or 1 and 0. For example: * * ``` * // in the template *
...
* // in the component metadata * trigger('openClose', [ * state('true', style({ height: '*' })), * state('false', style({ height: '0px' })), * transition('false <=> true', animate(500)) * ]) * ``` * * @publicApi **/ function transition(stateChangeExpr, steps, options) { if (options === void 0) { options = null; } return { type: 1 /* Transition */, expr: stateChangeExpr, animation: steps, options: options }; } /** * Produces a reusable animation that can be invoked in another animation or sequence, * by calling the `useAnimation()` function. * * @param steps One or more animation objects, as returned by the `animate()` * or `sequence()` function, that form a transformation from one state to another. * A sequence is used by default when you pass an array. * @param options An options object that can contain a delay value for the start of the * animation, and additional developer-defined parameters. * Provided values for additional parameters are used as defaults, * and override values can be passed to the caller on invocation. * @returns An object that encapsulates the animation data. * * @usageNotes * The following example defines a reusable animation, providing some default parameter * values. * * ```typescript * var fadeAnimation = animation([ * style({ opacity: '{{ start }}' }), * animate('{{ time }}', * style({ opacity: '{{ end }}'})) * ], * { params: { time: '1000ms', start: 0, end: 1 }}); * ``` * * The following invokes the defined animation with a call to `useAnimation()`, * passing in override parameter values. * * ```js * useAnimation(fadeAnimation, { * params: { * time: '2s', * start: 1, * end: 0 * } * }) * ``` * * If any of the passed-in parameter values are missing from this call, * the default values are used. If one or more parameter values are missing before a step is * animated, `useAnimation()` throws an error. * * @publicApi */ function animation(steps, options) { if (options === void 0) { options = null; } return { type: 8 /* Reference */, animation: steps, options: options }; } /** * Executes a queried inner animation element within an animation sequence. * * @param options An options object that can contain a delay value for the start of the * animation, and additional override values for developer-defined parameters. * @return An object that encapsulates the child animation data. * * @usageNotes * Each time an animation is triggered in Angular, the parent animation * has priority and any child animations are blocked. In order * for a child animation to run, the parent animation must query each of the elements * containing child animations, and run them using this function. * * Note that this feature is designed to be used with `query()` and it will only work * with animations that are assigned using the Angular animation library. CSS keyframes * and transitions are not handled by this API. * * @publicApi */ function animateChild(options) { if (options === void 0) { options = null; } return { type: 9 /* AnimateChild */, options: options }; } /** * Starts a reusable animation that is created using the `animation()` function. * * @param animation The reusable animation to start. * @param options An options object that can contain a delay value for the start of * the animation, and additional override values for developer-defined parameters. * @return An object that contains the animation parameters. * * @publicApi */ function useAnimation(animation, options) { if (options === void 0) { options = null; } return { type: 10 /* AnimateRef */, animation: animation, options: options }; } /** * Finds one or more inner elements within the current element that is * being animated within a sequence. Use with `animate()`. * * @param selector The element to query, or a set of elements that contain Angular-specific * characteristics, specified with one or more of the following tokens. * - `query(":enter")` or `query(":leave")` : Query for newly inserted/removed elements. * - `query(":animating")` : Query all currently animating elements. * - `query("@triggerName")` : Query elements that contain an animation trigger. * - `query("@*")` : Query all elements that contain an animation triggers. * - `query(":self")` : Include the current element into the animation sequence. * * @param animation One or more animation steps to apply to the queried element or elements. * An array is treated as an animation sequence. * @param options An options object. Use the 'limit' field to limit the total number of * items to collect. * @return An object that encapsulates the query data. * * @usageNotes * Tokens can be merged into a combined query selector string. For example: * * ```typescript * query(':self, .record:enter, .record:leave, @subTrigger', [...]) * ``` * * The `query()` function collects multiple elements and works internally by using * `element.querySelectorAll`. Use the `limit` field of an options object to limit * the total number of items to be collected. For example: * * ```js * query('div', [ * animate(...), * animate(...) * ], { limit: 1 }) * ``` * * By default, throws an error when zero items are found. Set the * `optional` flag to ignore this error. For example: * * ```js * query('.some-element-that-may-not-be-there', [ * animate(...), * animate(...) * ], { optional: true }) * ``` * * ### Usage Example * * The following example queries for inner elements and animates them * individually using `animate()`. * * ```typescript * @Component({ * selector: 'inner', * template: ` *
*

Title

*
* Blah blah blah *
*
* `, * animations: [ * trigger('queryAnimation', [ * transition('* => goAnimate', [ * // hide the inner elements * query('h1', style({ opacity: 0 })), * query('.content', style({ opacity: 0 })), * * // animate the inner elements in, one by one * query('h1', animate(1000, style({ opacity: 1 }))), * query('.content', animate(1000, style({ opacity: 1 }))), * ]) * ]) * ] * }) * class Cmp { * exp = ''; * * goAnimate() { * this.exp = 'goAnimate'; * } * } * ``` * * @publicApi */ function query(selector, animation, options) { if (options === void 0) { options = null; } return { type: 11 /* Query */, selector: selector, animation: animation, options: options }; } /** * Use within an animation `query()` call to issue a timing gap after * each queried item is animated. * * @param timings A delay value. * @param animation One ore more animation steps. * @returns An object that encapsulates the stagger data. * * @usageNotes * In the following example, a container element wraps a list of items stamped out * by an `ngFor`. The container element contains an animation trigger that will later be set * to query for each of the inner items. * * Each time items are added, the opacity fade-in animation runs, * and each removed item is faded out. * When either of these animations occur, the stagger effect is * applied after each item's animation is started. * * ```html * * *
*
*
* {{ item }} *
*
* ``` * * Here is the component code: * * ```typescript * import {trigger, transition, style, animate, query, stagger} from '@angular/animations'; * @Component({ * templateUrl: 'list.component.html', * animations: [ * trigger('listAnimation', [ * ... * ]) * ] * }) * class ListComponent { * items = []; * * showItems() { * this.items = [0,1,2,3,4]; * } * * hideItems() { * this.items = []; * } * * toggle() { * this.items.length ? this.hideItems() : this.showItems(); * } * } * ``` * * Here is the animation trigger code: * * ```typescript * trigger('listAnimation', [ * transition('* => *', [ // each time the binding value changes * query(':leave', [ * stagger(100, [ * animate('0.5s', style({ opacity: 0 })) * ]) * ]), * query(':enter', [ * style({ opacity: 0 }), * stagger(100, [ * animate('0.5s', style({ opacity: 1 })) * ]) * ]) * ]) * ]) * ``` * * @publicApi */ function stagger(timings, animation) { return { type: 12 /* Stagger */, timings: timings, animation: animation }; } /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ function scheduleMicroTask(cb) { Promise.resolve(null).then(cb); } /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ /** * An empty programmatic controller for reusable animations. * Used internally when animations are disabled, to avoid * checking for the null case when an animation player is expected. * * @see `animate()` * @see `AnimationPlayer` * @see `GroupPlayer` * * @publicApi */ var NoopAnimationPlayer = /** @class */ (function () { function NoopAnimationPlayer(duration, delay) { if (duration === void 0) { duration = 0; } if (delay === void 0) { delay = 0; } this._onDoneFns = []; this._onStartFns = []; this._onDestroyFns = []; this._started = false; this._destroyed = false; this._finished = false; this._position = 0; this.parentPlayer = null; this.totalTime = duration + delay; } NoopAnimationPlayer.prototype._onFinish = function () { if (!this._finished) { this._finished = true; this._onDoneFns.forEach(function (fn) { return fn(); }); this._onDoneFns = []; } }; NoopAnimationPlayer.prototype.onStart = function (fn) { this._onStartFns.push(fn); }; NoopAnimationPlayer.prototype.onDone = function (fn) { this._onDoneFns.push(fn); }; NoopAnimationPlayer.prototype.onDestroy = function (fn) { this._onDestroyFns.push(fn); }; NoopAnimationPlayer.prototype.hasStarted = function () { return this._started; }; NoopAnimationPlayer.prototype.init = function () { }; NoopAnimationPlayer.prototype.play = function () { if (!this.hasStarted()) { this._onStart(); this.triggerMicrotask(); } this._started = true; }; /** @internal */ NoopAnimationPlayer.prototype.triggerMicrotask = function () { var _this = this; scheduleMicroTask(function () { return _this._onFinish(); }); }; NoopAnimationPlayer.prototype._onStart = function () { this._onStartFns.forEach(function (fn) { return fn(); }); this._onStartFns = []; }; NoopAnimationPlayer.prototype.pause = function () { }; NoopAnimationPlayer.prototype.restart = function () { }; NoopAnimationPlayer.prototype.finish = function () { this._onFinish(); }; NoopAnimationPlayer.prototype.destroy = function () { if (!this._destroyed) { this._destroyed = true; if (!this.hasStarted()) { this._onStart(); } this.finish(); this._onDestroyFns.forEach(function (fn) { return fn(); }); this._onDestroyFns = []; } }; NoopAnimationPlayer.prototype.reset = function () { this._started = false; }; NoopAnimationPlayer.prototype.setPosition = function (position) { this._position = this.totalTime ? position * this.totalTime : 1; }; NoopAnimationPlayer.prototype.getPosition = function () { return this.totalTime ? this._position / this.totalTime : 1; }; /** @internal */ NoopAnimationPlayer.prototype.triggerCallback = function (phaseName) { var methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns; methods.forEach(function (fn) { return fn(); }); methods.length = 0; }; return NoopAnimationPlayer; }()); /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ /** * A programmatic controller for a group of reusable animations. * Used internally to control animations. * * @see `AnimationPlayer` * @see `{@link animations/group group()}` * */ var AnimationGroupPlayer = /** @class */ (function () { function AnimationGroupPlayer(_players) { var _this = this; this._onDoneFns = []; this._onStartFns = []; this._finished = false; this._started = false; this._destroyed = false; this._onDestroyFns = []; this.parentPlayer = null; this.totalTime = 0; this.players = _players; var doneCount = 0; var destroyCount = 0; var startCount = 0; var total = this.players.length; if (total == 0) { scheduleMicroTask(function () { return _this._onFinish(); }); } else { this.players.forEach(function (player) { player.onDone(function () { if (++doneCount == total) { _this._onFinish(); } }); player.onDestroy(function () { if (++destroyCount == total) { _this._onDestroy(); } }); player.onStart(function () { if (++startCount == total) { _this._onStart(); } }); }); } this.totalTime = this.players.reduce(function (time, player) { return Math.max(time, player.totalTime); }, 0); } AnimationGroupPlayer.prototype._onFinish = function () { if (!this._finished) { this._finished = true; this._onDoneFns.forEach(function (fn) { return fn(); }); this._onDoneFns = []; } }; AnimationGroupPlayer.prototype.init = function () { this.players.forEach(function (player) { return player.init(); }); }; AnimationGroupPlayer.prototype.onStart = function (fn) { this._onStartFns.push(fn); }; AnimationGroupPlayer.prototype._onStart = function () { if (!this.hasStarted()) { this._started = true; this._onStartFns.forEach(function (fn) { return fn(); }); this._onStartFns = []; } }; AnimationGroupPlayer.prototype.onDone = function (fn) { this._onDoneFns.push(fn); }; AnimationGroupPlayer.prototype.onDestroy = function (fn) { this._onDestroyFns.push(fn); }; AnimationGroupPlayer.prototype.hasStarted = function () { return this._started; }; AnimationGroupPlayer.prototype.play = function () { if (!this.parentPlayer) { this.init(); } this._onStart(); this.players.forEach(function (player) { return player.play(); }); }; AnimationGroupPlayer.prototype.pause = function () { this.players.forEach(function (player) { return player.pause(); }); }; AnimationGroupPlayer.prototype.restart = function () { this.players.forEach(function (player) { return player.restart(); }); }; AnimationGroupPlayer.prototype.finish = function () { this._onFinish(); this.players.forEach(function (player) { return player.finish(); }); }; AnimationGroupPlayer.prototype.destroy = function () { this._onDestroy(); }; AnimationGroupPlayer.prototype._onDestroy = function () { if (!this._destroyed) { this._destroyed = true; this._onFinish(); this.players.forEach(function (player) { return player.destroy(); }); this._onDestroyFns.forEach(function (fn) { return fn(); }); this._onDestroyFns = []; } }; AnimationGroupPlayer.prototype.reset = function () { this.players.forEach(function (player) { return player.reset(); }); this._destroyed = false; this._finished = false; this._started = false; }; AnimationGroupPlayer.prototype.setPosition = function (p) { var timeAtPosition = p * this.totalTime; this.players.forEach(function (player) { var position = player.totalTime ? Math.min(1, timeAtPosition / player.totalTime) : 1; player.setPosition(position); }); }; AnimationGroupPlayer.prototype.getPosition = function () { var longestPlayer = this.players.reduce(function (longestSoFar, player) { var newPlayerIsLongest = longestSoFar === null || player.totalTime > longestSoFar.totalTime; return newPlayerIsLongest ? player : longestSoFar; }, null); return longestPlayer != null ? longestPlayer.getPosition() : 0; }; AnimationGroupPlayer.prototype.beforeDestroy = function () { this.players.forEach(function (player) { if (player.beforeDestroy) { player.beforeDestroy(); } }); }; /** @internal */ AnimationGroupPlayer.prototype.triggerCallback = function (phaseName) { var methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns; methods.forEach(function (fn) { return fn(); }); methods.length = 0; }; return AnimationGroupPlayer; }()); /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ var ɵPRE_STYLE = '!'; /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ /** * Generated bundle index. Do not edit. */ exports.AUTO_STYLE = AUTO_STYLE; exports.AnimationBuilder = AnimationBuilder; exports.AnimationFactory = AnimationFactory; exports.NoopAnimationPlayer = NoopAnimationPlayer; exports.animate = animate; exports.animateChild = animateChild; exports.animation = animation; exports.group = group; exports.keyframes = keyframes; exports.query = query; exports.sequence = sequence; exports.stagger = stagger; exports.state = state; exports.style = style; exports.transition = transition; exports.trigger = trigger; exports.useAnimation = useAnimation; exports.ɵAnimationGroupPlayer = AnimationGroupPlayer; exports.ɵPRE_STYLE = ɵPRE_STYLE; Object.defineProperty(exports, '__esModule', { value: true }); }))); //# sourceMappingURL=animations.umd.js.map