[6a3a178] | 1 | {"version":3,"file":"animations.d.ts","sources":["animations.d.ts"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sourcesContent":["/**\n * @license Angular v12.2.9\n * (c) 2010-2021 Google LLC. https://angular.io/\n * License: MIT\n */\n\n/**\r\n * Defines an animation step that combines styling information with timing information.\r\n *\r\n * @param timings Sets `AnimateTimings` for the parent animation.\r\n * A string in the format \"duration [delay] [easing]\".\r\n * - Duration and delay are expressed as a number and optional time unit,\r\n * such as \"1s\" or \"10ms\" for one second and 10 milliseconds, respectively.\r\n * The default unit is milliseconds.\r\n * - The easing value controls how the animation accelerates and decelerates\r\n * during its runtime. Value is one of `ease`, `ease-in`, `ease-out`,\r\n * `ease-in-out`, or a `cubic-bezier()` function call.\r\n * If not supplied, no easing is applied.\r\n *\r\n * For example, the string \"1s 100ms ease-out\" specifies a duration of\r\n * 1000 milliseconds, and delay of 100 ms, and the \"ease-out\" easing style,\r\n * which decelerates near the end of the duration.\r\n * @param styles Sets AnimationStyles for the parent animation.\r\n * A function call to either `style()` or `keyframes()`\r\n * that returns a collection of CSS style entries to be applied to the parent animation.\r\n * When null, uses the styles from the destination state.\r\n * This is useful when describing an animation step that will complete an animation;\r\n * see \"Animating to the final state\" in `transitions()`.\r\n * @returns An object that encapsulates the animation step.\r\n *\r\n * @usageNotes\r\n * Call within an animation `sequence()`, `{@link animations/group group()}`, or\r\n * `transition()` call to specify an animation step\r\n * that applies given style data to the parent animation for a given amount of time.\r\n *\r\n * ### Syntax Examples\r\n * **Timing examples**\r\n *\r\n * The following examples show various `timings` specifications.\r\n * - `animate(500)` : Duration is 500 milliseconds.\r\n * - `animate(\"1s\")` : Duration is 1000 milliseconds.\r\n * - `animate(\"100ms 0.5s\")` : Duration is 100 milliseconds, delay is 500 milliseconds.\r\n * - `animate(\"5s ease-in\")` : Duration is 5000 milliseconds, easing in.\r\n * - `animate(\"5s 10ms cubic-bezier(.17,.67,.88,.1)\")` : Duration is 5000 milliseconds, delay is 10\r\n * milliseconds, easing according to a bezier curve.\r\n *\r\n * **Style examples**\r\n *\r\n * The following example calls `style()` to set a single CSS style.\r\n * ```typescript\r\n * animate(500, style({ background: \"red\" }))\r\n * ```\r\n * The following example calls `keyframes()` to set a CSS style\r\n * to different values for successive keyframes.\r\n * ```typescript\r\n * animate(500, keyframes(\r\n * [\r\n * style({ background: \"blue\" }),\r\n * style({ background: \"red\" })\r\n * ])\r\n * ```\r\n *\r\n * @publicApi\r\n */\r\nexport declare function animate(timings: string | number, styles?: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata | null): AnimationAnimateMetadata;\r\n\r\n/**\r\n * Executes a queried inner animation element within an animation sequence.\r\n *\r\n * @param options An options object that can contain a delay value for the start of the\r\n * animation, and additional override values for developer-defined parameters.\r\n * @return An object that encapsulates the child animation data.\r\n *\r\n * @usageNotes\r\n * Each time an animation is triggered in Angular, the parent animation\r\n * has priority and any child animations are blocked. In order\r\n * for a child animation to run, the parent animation must query each of the elements\r\n * containing child animations, and run them using this function.\r\n *\r\n * Note that this feature is designed to be used with `query()` and it will only work\r\n * with animations that are assigned using the Angular animation library. CSS keyframes\r\n * and transitions are not handled by this API.\r\n *\r\n * @publicApi\r\n */\r\nexport declare function animateChild(options?: AnimateChildOptions | null): AnimationAnimateChildMetadata;\r\n\r\n/**\r\n * Adds duration options to control animation styling and timing for a child animation.\r\n *\r\n * @see `animateChild()`\r\n *\r\n * @publicApi\r\n */\r\nexport declare interface AnimateChildOptions extends AnimationOptions {\r\n duration?: number | string;\r\n}\r\n\r\n/**\r\n * Represents animation-step timing parameters for an animation step.\r\n * @see `animate()`\r\n *\r\n * @publicApi\r\n */\r\nexport declare type AnimateTimings = {\r\n /**\r\n * The full duration of an animation step. A number and optional time unit,\r\n * such as \"1s\" or \"10ms\" for one second and 10 milliseconds, respectively.\r\n * The default unit is milliseconds.\r\n */\r\n duration: number;\r\n /**\r\n * The delay in applying an animation step. A number and optional time unit.\r\n * The default unit is milliseconds.\r\n */\r\n delay: number;\r\n /**\r\n * An easing style that controls how an animations step accelerates\r\n * and decelerates during its run time. An easing function such as `cubic-bezier()`,\r\n * or one of the following constants:\r\n * - `ease-in`\r\n * - `ease-out`\r\n * - `ease-in-and-out`\r\n */\r\n easing: string | null;\r\n};\r\n\r\n/**\r\n * Produces a reusable animation that can be invoked in another animation or sequence,\r\n * by calling the `useAnimation()` function.\r\n *\r\n * @param steps One or more animation objects, as returned by the `animate()`\r\n * or `sequence()` function, that form a transformation from one state to another.\r\n * A sequence is used by default when you pass an array.\r\n * @param options An options object that can contain a delay value for the start of the\r\n * animation, and additional developer-defined parameters.\r\n * Provided values for additional parameters are used as defaults,\r\n * and override values can be passed to the caller on invocation.\r\n * @returns An object that encapsulates the animation data.\r\n *\r\n * @usageNotes\r\n * The following example defines a reusable animation, providing some default parameter\r\n * values.\r\n *\r\n * ```typescript\r\n * var fadeAnimation = animation([\r\n * style({ opacity: '{{ start }}' }),\r\n * animate('{{ time }}',\r\n * style({ opacity: '{{ end }}'}))\r\n * ],\r\n * { params: { time: '1000ms', start: 0, end: 1 }});\r\n * ```\r\n *\r\n * The following invokes the defined animation with a call to `useAnimation()`,\r\n * passing in override parameter values.\r\n *\r\n * ```js\r\n * useAnimation(fadeAnimation, {\r\n * params: {\r\n * time: '2s',\r\n * start: 1,\r\n * end: 0\r\n * }\r\n * })\r\n * ```\r\n *\r\n * If any of the passed-in parameter values are missing from this call,\r\n * the default values are used. If one or more parameter values are missing before a step is\r\n * animated, `useAnimation()` throws an error.\r\n *\r\n * @publicApi\r\n */\r\nexport declare function animation(steps: AnimationMetadata | AnimationMetadata[], options?: AnimationOptions | null): AnimationReferenceMetadata;\r\n\r\n/**\r\n * Encapsulates a child animation, that can be run explicitly when the parent is run.\r\n * Instantiated and returned by the `animateChild` function.\r\n *\r\n * @publicApi\r\n */\r\nexport declare interface AnimationAnimateChildMetadata extends AnimationMetadata {\r\n /**\r\n * An options object containing a delay and\r\n * developer-defined parameters that provide styling defaults and\r\n * can be overridden on invocation. Default delay is 0.\r\n */\r\n options: AnimationOptions | null;\r\n}\r\n\r\n/**\r\n * Encapsulates an animation step. Instantiated and returned by\r\n * the `animate()` function.\r\n *\r\n * @publicApi\r\n */\r\nexport declare interface AnimationAnimateMetadata extends AnimationMetadata {\r\n /**\r\n * The timing data for the step.\r\n */\r\n timings: string | number | AnimateTimings;\r\n /**\r\n * A set of styles used in the step.\r\n */\r\n styles: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata | null;\r\n}\r\n\r\n/**\r\n * Encapsulates a reusable animation.\r\n * Instantiated and returned by the `useAnimation()` function.\r\n *\r\n * @publicApi\r\n */\r\nexport declare interface AnimationAnimateRefMetadata extends AnimationMetadata {\r\n /**\r\n * An animation reference object.\r\n */\r\n animation: AnimationReferenceMetadata;\r\n /**\r\n * An options object containing a delay and\r\n * developer-defined parameters that provide styling defaults and\r\n * can be overridden on invocation. Default delay is 0.\r\n */\r\n options: AnimationOptions | null;\r\n}\r\n\r\n/**\r\n * An injectable service that produces an animation sequence programmatically within an\r\n * Angular component or directive.\r\n * Provided by the `BrowserAnimationsModule` or `NoopAnimationsModule`.\r\n *\r\n * @usageNotes\r\n *\r\n * To use this service, add it to your component or directive as a dependency.\r\n * The service is instantiated along with your component.\r\n *\r\n * Apps do not typically need to create their own animation players, but if you\r\n * do need to, follow these steps:\r\n *\r\n * 1. Use the `build()` method to create a programmatic animation using the\r\n * `animate()` function. The method returns an `AnimationFactory` instance.\r\n *\r\n * 2. Use the factory object to create an `AnimationPlayer` and attach it to a DOM element.\r\n *\r\n * 3. Use the player object to control the animation programmatically.\r\n *\r\n * For example:\r\n *\r\n * ```ts\r\n * // import the service from BrowserAnimationsModule\r\n * import {AnimationBuilder} from '@angular/animations';\r\n * // require the service as a dependency\r\n * class MyCmp {\r\n * constructor(private _builder: AnimationBuilder) {}\r\n *\r\n * makeAnimation(element: any) {\r\n * // first define a reusable animation\r\n * const myAnimation = this._builder.build([\r\n * style({ width: 0 }),\r\n * animate(1000, style({ width: '100px' }))\r\n * ]);\r\n *\r\n * // use the returned factory object to create a player\r\n * const player = myAnimation.create(element);\r\n *\r\n * player.play();\r\n * }\r\n * }\r\n * ```\r\n *\r\n * @publicApi\r\n */\r\nexport declare abstract class AnimationBuilder {\r\n /**\r\n * Builds a factory for producing a defined animation.\r\n * @param animation A reusable animation definition.\r\n * @returns A factory object that can create a player for the defined animation.\r\n * @see `animate()`\r\n */\r\n abstract build(animation: AnimationMetadata | AnimationMetadata[]): AnimationFactory;\r\n}\r\n\r\n\r\n/**\r\n * An instance of this class is returned as an event parameter when an animation\r\n * callback is captured for an animation either during the start or done phase.\r\n *\r\n * ```typescript\r\n * @Component({\r\n * host: {\r\n * '[@myAnimationTrigger]': 'someExpression',\r\n * '(@myAnimationTrigger.start)': 'captureStartEvent($event)',\r\n * '(@myAnimationTrigger.done)': 'captureDoneEvent($event)',\r\n * },\r\n * animations: [\r\n * trigger(\"myAnimationTrigger\", [\r\n * // ...\r\n * ])\r\n * ]\r\n * })\r\n * class MyComponent {\r\n * someExpression: any = false;\r\n * captureStartEvent(event: AnimationEvent) {\r\n * // the toState, fromState and totalTime data is accessible from the event variable\r\n * }\r\n *\r\n * captureDoneEvent(event: AnimationEvent) {\r\n * // the toState, fromState and totalTime data is accessible from the event variable\r\n * }\r\n * }\r\n * ```\r\n *\r\n * @publicApi\r\n */\r\ndeclare interface AnimationEvent_2 {\r\n /**\r\n * The name of the state from which the animation is triggered.\r\n */\r\n fromState: string;\r\n /**\r\n * The name of the state in which the animation completes.\r\n */\r\n toState: string;\r\n /**\r\n * The time it takes the animation to complete, in milliseconds.\r\n */\r\n totalTime: number;\r\n /**\r\n * The animation phase in which the callback was invoked, one of\r\n * \"start\" or \"done\".\r\n */\r\n phaseName: string;\r\n /**\r\n * The element to which the animation is attached.\r\n */\r\n element: any;\r\n /**\r\n * Internal.\r\n */\r\n triggerName: string;\r\n /**\r\n * Internal.\r\n */\r\n disabled: boolean;\r\n}\r\nexport { AnimationEvent_2 as AnimationEvent }\r\n\r\n/**\r\n * A factory object returned from the `AnimationBuilder`.`build()` method.\r\n *\r\n * @publicApi\r\n */\r\nexport declare abstract class AnimationFactory {\r\n /**\r\n * Creates an `AnimationPlayer` instance for the reusable animation defined by\r\n * the `AnimationBuilder`.`build()` method that created this factory.\r\n * Attaches the new player a DOM element.\r\n * @param element The DOM element to which to attach the animation.\r\n * @param options A set of options that can include a time delay and\r\n * additional developer-defined parameters.\r\n */\r\n abstract create(element: any, options?: AnimationOptions): AnimationPlayer;\r\n}\r\n\r\n/**\r\n * Encapsulates an animation group.\r\n * Instantiated and returned by the `{@link animations/group group()}` function.\r\n *\r\n * @publicApi\r\n */\r\nexport declare interface AnimationGroupMetadata extends AnimationMetadata {\r\n /**\r\n * One or more animation or style steps that form this group.\r\n */\r\n steps: AnimationMetadata[];\r\n /**\r\n * An options object containing a delay and\r\n * developer-defined parameters that provide styling defaults and\r\n * can be overridden on invocation. Default delay is 0.\r\n */\r\n options: AnimationOptions | null;\r\n}\r\n\r\n/**\r\n * Encapsulates a keyframes sequence. Instantiated and returned by\r\n * the `keyframes()` function.\r\n *\r\n * @publicApi\r\n */\r\nexport declare interface AnimationKeyframesSequenceMetadata extends AnimationMetadata {\r\n /**\r\n * An array of animation styles.\r\n */\r\n steps: AnimationStyleMetadata[];\r\n}\r\n\r\n/**\r\n * Base for animation data structures.\r\n *\r\n * @publicApi\r\n */\r\nexport declare interface AnimationMetadata {\r\n type: AnimationMetadataType;\r\n}\r\n\r\n/**\r\n * @description Constants for the categories of parameters that can be defined for animations.\r\n *\r\n * A corresponding function defines a set of parameters for each category, and\r\n * collects them into a corresponding `AnimationMetadata` object.\r\n *\r\n * @publicApi\r\n */\r\nexport declare const enum AnimationMetadataType {\r\n /**\r\n * Associates a named animation state with a set of CSS styles.\r\n * See `state()`\r\n */\r\n State = 0,\r\n /**\r\n * Data for a transition from one animation state to another.\r\n * See `transition()`\r\n */\r\n Transition = 1,\r\n /**\r\n * Contains a set of animation steps.\r\n * See `sequence()`\r\n */\r\n Sequence = 2,\r\n /**\r\n * Contains a set of animation steps.\r\n * See `{@link animations/group group()}`\r\n */\r\n Group = 3,\r\n /**\r\n * Contains an animation step.\r\n * See `animate()`\r\n */\r\n Animate = 4,\r\n /**\r\n * Contains a set of animation steps.\r\n * See `keyframes()`\r\n */\r\n Keyframes = 5,\r\n /**\r\n * Contains a set of CSS property-value pairs into a named style.\r\n * See `style()`\r\n */\r\n Style = 6,\r\n /**\r\n * Associates an animation with an entry trigger that can be attached to an element.\r\n * See `trigger()`\r\n */\r\n Trigger = 7,\r\n /**\r\n * Contains a re-usable animation.\r\n * See `animation()`\r\n */\r\n Reference = 8,\r\n /**\r\n * Contains data to use in executing child animations returned by a query.\r\n * See `animateChild()`\r\n */\r\n AnimateChild = 9,\r\n /**\r\n * Contains animation parameters for a re-usable animation.\r\n * See `useAnimation()`\r\n */\r\n AnimateRef = 10,\r\n /**\r\n * Contains child-animation query data.\r\n * See `query()`\r\n */\r\n Query = 11,\r\n /**\r\n * Contains data for staggering an animation sequence.\r\n * See `stagger()`\r\n */\r\n Stagger = 12\r\n}\r\n\r\n/**\r\n * @description Options that control animation styling and timing.\r\n *\r\n * The following animation functions accept `AnimationOptions` data:\r\n *\r\n * - `transition()`\r\n * - `sequence()`\r\n * - `{@link animations/group group()}`\r\n * - `query()`\r\n * - `animation()`\r\n * - `useAnimation()`\r\n * - `animateChild()`\r\n *\r\n * Programmatic animations built using the `AnimationBuilder` service also\r\n * make use of `AnimationOptions`.\r\n *\r\n * @publicApi\r\n */\r\nexport declare interface AnimationOptions {\r\n /**\r\n * Sets a time-delay for initiating an animation action.\r\n * A number and optional time unit, such as \"1s\" or \"10ms\" for one second\r\n * and 10 milliseconds, respectively.The default unit is milliseconds.\r\n * Default value is 0, meaning no delay.\r\n */\r\n delay?: number | string;\r\n /**\r\n * A set of developer-defined parameters that modify styling and timing\r\n * when an animation action starts. An array of key-value pairs, where the provided value\r\n * is used as a default.\r\n */\r\n params?: {\r\n [name: string]: any;\r\n };\r\n}\r\n\r\n/**\r\n * Provides programmatic control of a reusable animation sequence,\r\n * built using the `build()` method of `AnimationBuilder`. The `build()` method\r\n * returns a factory, whose `create()` method instantiates and initializes this interface.\r\n *\r\n * @see `AnimationBuilder`\r\n * @see `AnimationFactory`\r\n * @see `animate()`\r\n *\r\n * @publicApi\r\n */\r\nexport declare interface AnimationPlayer {\r\n /**\r\n * Provides a callback to invoke when the animation finishes.\r\n * @param fn The callback function.\r\n * @see `finish()`\r\n */\r\n onDone(fn: () => void): void;\r\n /**\r\n * Provides a callback to invoke when the animation starts.\r\n * @param fn The callback function.\r\n * @see `run()`\r\n */\r\n onStart(fn: () => void): void;\r\n /**\r\n * Provides a callback to invoke after the animation is destroyed.\r\n * @param fn The callback function.\r\n * @see `destroy()`\r\n * @see `beforeDestroy()`\r\n */\r\n onDestroy(fn: () => void): void;\r\n /**\r\n * Initializes the animation.\r\n */\r\n init(): void;\r\n /**\r\n * Reports whether the animation has started.\r\n * @returns True if the animation has started, false otherwise.\r\n */\r\n hasStarted(): boolean;\r\n /**\r\n * Runs the animation, invoking the `onStart()` callback.\r\n */\r\n play(): void;\r\n /**\r\n * Pauses the animation.\r\n */\r\n pause(): void;\r\n /**\r\n * Restarts the paused animation.\r\n */\r\n restart(): void;\r\n /**\r\n * Ends the animation, invoking the `onDone()` callback.\r\n */\r\n finish(): void;\r\n /**\r\n * Destroys the animation, after invoking the `beforeDestroy()` callback.\r\n * Calls the `onDestroy()` callback when destruction is completed.\r\n */\r\n destroy(): void;\r\n /**\r\n * Resets the animation to its initial state.\r\n */\r\n reset(): void;\r\n /**\r\n * Sets the position of the animation.\r\n * @param position A 0-based offset into the duration, in milliseconds.\r\n */\r\n setPosition(position: any /** TODO #9100 */): void;\r\n /**\r\n * Reports the current position of the animation.\r\n * @returns A 0-based offset into the duration, in milliseconds.\r\n */\r\n getPosition(): number;\r\n /**\r\n * The parent of this player, if any.\r\n */\r\n parentPlayer: AnimationPlayer | null;\r\n /**\r\n * The total run time of the animation, in milliseconds.\r\n */\r\n readonly totalTime: number;\r\n /**\r\n * Provides a callback to invoke before the animation is destroyed.\r\n */\r\n beforeDestroy?: () => any;\r\n}\r\n\r\n/**\r\n * Encapsulates an animation query. Instantiated and returned by\r\n * the `query()` function.\r\n *\r\n * @publicApi\r\n */\r\nexport declare interface AnimationQueryMetadata extends AnimationMetadata {\r\n /**\r\n * The CSS selector for this query.\r\n */\r\n selector: string;\r\n /**\r\n * One or more animation step objects.\r\n */\r\n animation: AnimationMetadata | AnimationMetadata[];\r\n /**\r\n * A query options object.\r\n */\r\n options: AnimationQueryOptions | null;\r\n}\r\n\r\n/**\r\n * Encapsulates animation query options.\r\n * Passed to the `query()` function.\r\n *\r\n * @publicApi\r\n */\r\nexport declare interface AnimationQueryOptions extends AnimationOptions {\r\n /**\r\n * True if this query is optional, false if it is required. Default is false.\r\n * A required query throws an error if no elements are retrieved when\r\n * the query is executed. An optional query does not.\r\n *\r\n */\r\n optional?: boolean;\r\n /**\r\n * A maximum total number of results to return from the query.\r\n * If negative, results are limited from the end of the query list towards the beginning.\r\n * By default, results are not limited.\r\n */\r\n limit?: number;\r\n}\r\n\r\n/**\r\n * Encapsulates a reusable animation, which is a collection of individual animation steps.\r\n * Instantiated and returned by the `animation()` function, and\r\n * passed to the `useAnimation()` function.\r\n *\r\n * @publicApi\r\n */\r\nexport declare interface AnimationReferenceMetadata extends AnimationMetadata {\r\n /**\r\n * One or more animation step objects.\r\n */\r\n animation: AnimationMetadata | AnimationMetadata[];\r\n /**\r\n * An options object containing a delay and\r\n * developer-defined parameters that provide styling defaults and\r\n * can be overridden on invocation. Default delay is 0.\r\n */\r\n options: AnimationOptions | null;\r\n}\r\n\r\n/**\r\n * Encapsulates an animation sequence.\r\n * Instantiated and returned by the `sequence()` function.\r\n *\r\n * @publicApi\r\n */\r\nexport declare interface AnimationSequenceMetadata extends AnimationMetadata {\r\n /**\r\n * An array of animation step objects.\r\n */\r\n steps: AnimationMetadata[];\r\n /**\r\n * An options object containing a delay and\r\n * developer-defined parameters that provide styling defaults and\r\n * can be overridden on invocation. Default delay is 0.\r\n */\r\n options: AnimationOptions | null;\r\n}\r\n\r\n/**\r\n * Encapsulates parameters for staggering the start times of a set of animation steps.\r\n * Instantiated and returned by the `stagger()` function.\r\n *\r\n * @publicApi\r\n **/\r\nexport declare interface AnimationStaggerMetadata extends AnimationMetadata {\r\n /**\r\n * The timing data for the steps.\r\n */\r\n timings: string | number;\r\n /**\r\n * One or more animation steps.\r\n */\r\n animation: AnimationMetadata | AnimationMetadata[];\r\n}\r\n\r\n/**\r\n * Encapsulates an animation state by associating a state name with a set of CSS styles.\r\n * Instantiated and returned by the `state()` function.\r\n *\r\n * @publicApi\r\n */\r\nexport declare interface AnimationStateMetadata extends AnimationMetadata {\r\n /**\r\n * The state name, unique within the component.\r\n */\r\n name: string;\r\n /**\r\n * The CSS styles associated with this state.\r\n */\r\n styles: AnimationStyleMetadata;\r\n /**\r\n * An options object containing\r\n * developer-defined parameters that provide styling defaults and\r\n * can be overridden on invocation.\r\n */\r\n options?: {\r\n params: {\r\n [name: string]: any;\r\n };\r\n };\r\n}\r\n\r\n/**\r\n * Encapsulates an animation style. Instantiated and returned by\r\n * the `style()` function.\r\n *\r\n * @publicApi\r\n */\r\nexport declare interface AnimationStyleMetadata extends AnimationMetadata {\r\n /**\r\n * A set of CSS style properties.\r\n */\r\n styles: '*' | {\r\n [key: string]: string | number;\r\n } | Array<{\r\n [key: string]: string | number;\r\n } | '*'>;\r\n /**\r\n * A percentage of the total animate time at which the style is to be applied.\r\n */\r\n offset: number | null;\r\n}\r\n\r\n/**\r\n * Encapsulates an animation transition. Instantiated and returned by the\r\n * `transition()` function.\r\n *\r\n * @publicApi\r\n */\r\nexport declare interface AnimationTransitionMetadata extends AnimationMetadata {\r\n /**\r\n * An expression that describes a state change.\r\n */\r\n expr: string | ((fromState: string, toState: string, element?: any, params?: {\r\n [key: string]: any;\r\n }) => boolean);\r\n /**\r\n * One or more animation objects to which this transition applies.\r\n */\r\n animation: AnimationMetadata | AnimationMetadata[];\r\n /**\r\n * An options object containing a delay and\r\n * developer-defined parameters that provide styling defaults and\r\n * can be overridden on invocation. Default delay is 0.\r\n */\r\n options: AnimationOptions | null;\r\n}\r\n\r\n/**\r\n * Contains an animation trigger. Instantiated and returned by the\r\n * `trigger()` function.\r\n *\r\n * @publicApi\r\n */\r\nexport declare interface AnimationTriggerMetadata extends AnimationMetadata {\r\n /**\r\n * The trigger name, used to associate it with an element. Unique within the component.\r\n */\r\n name: string;\r\n /**\r\n * An animation definition object, containing an array of state and transition declarations.\r\n */\r\n definitions: AnimationMetadata[];\r\n /**\r\n * An options object containing a delay and\r\n * developer-defined parameters that provide styling defaults and\r\n * can be overridden on invocation. Default delay is 0.\r\n */\r\n options: {\r\n params?: {\r\n [name: string]: any;\r\n };\r\n } | null;\r\n}\r\n\r\n/**\r\n * Specifies automatic styling.\r\n *\r\n * @publicApi\r\n */\r\nexport declare const AUTO_STYLE = \"*\";\r\n\r\n/**\r\n * @description Defines a list of animation steps to be run in parallel.\r\n *\r\n * @param steps An array of animation step objects.\r\n * - When steps are defined by `style()` or `animate()`\r\n * function calls, each call within the group is executed instantly.\r\n * - To specify offset styles to be applied at a later time, define steps with\r\n * `keyframes()`, or use `animate()` calls with a delay value.\r\n * For example:\r\n *\r\n * ```typescript\r\n * group([\r\n * animate(\"1s\", style({ background: \"black\" })),\r\n * animate(\"2s\", style({ color: \"white\" }))\r\n * ])\r\n * ```\r\n *\r\n * @param options An options object containing a delay and\r\n * developer-defined parameters that provide styling defaults and\r\n * can be overridden on invocation.\r\n *\r\n * @return An object that encapsulates the group data.\r\n *\r\n * @usageNotes\r\n * Grouped animations are useful when a series of styles must be\r\n * animated at different starting times and closed off at different ending times.\r\n *\r\n * When called within a `sequence()` or a\r\n * `transition()` call, does not continue to the next\r\n * instruction until all of the inner animation steps have completed.\r\n *\r\n * @publicApi\r\n */\r\nexport declare function group(steps: AnimationMetadata[], options?: AnimationOptions | null): AnimationGroupMetadata;\r\n\r\n/**\r\n * Defines a set of animation styles, associating each style with an optional `offset` value.\r\n *\r\n * @param steps A set of animation styles with optional offset data.\r\n * The optional `offset` value for a style specifies a percentage of the total animation\r\n * time at which that style is applied.\r\n * @returns An object that encapsulates the keyframes data.\r\n *\r\n * @usageNotes\r\n * Use with the `animate()` call. Instead of applying animations\r\n * from the current state\r\n * to the destination state, keyframes describe how each style entry is applied and at what point\r\n * within the animation arc.\r\n * Compare [CSS Keyframe Animations](https://www.w3schools.com/css/css3_animations.asp).\r\n *\r\n * ### Usage\r\n *\r\n * In the following example, the offset values describe\r\n * when each `backgroundColor` value is applied. The color is red at the start, and changes to\r\n * blue when 20% of the total time has elapsed.\r\n *\r\n * ```typescript\r\n * // the provided offset values\r\n * animate(\"5s\", keyframes([\r\n * style({ backgroundColor: \"red\", offset: 0 }),\r\n * style({ backgroundColor: \"blue\", offset: 0.2 }),\r\n * style({ backgroundColor: \"orange\", offset: 0.3 }),\r\n * style({ backgroundColor: \"black\", offset: 1 })\r\n * ]))\r\n * ```\r\n *\r\n * If there are no `offset` values specified in the style entries, the offsets\r\n * are calculated automatically.\r\n *\r\n * ```typescript\r\n * animate(\"5s\", keyframes([\r\n * style({ backgroundColor: \"red\" }) // offset = 0\r\n * style({ backgroundColor: \"blue\" }) // offset = 0.33\r\n * style({ backgroundColor: \"orange\" }) // offset = 0.66\r\n * style({ backgroundColor: \"black\" }) // offset = 1\r\n * ]))\r\n *```\r\n\r\n * @publicApi\r\n */\r\nexport declare function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSequenceMetadata;\r\n\r\n/**\r\n * An empty programmatic controller for reusable animations.\r\n * Used internally when animations are disabled, to avoid\r\n * checking for the null case when an animation player is expected.\r\n *\r\n * @see `animate()`\r\n * @see `AnimationPlayer`\r\n * @see `GroupPlayer`\r\n *\r\n * @publicApi\r\n */\r\nexport declare class NoopAnimationPlayer implements AnimationPlayer {\r\n private _onDoneFns;\r\n private _onStartFns;\r\n private _onDestroyFns;\r\n private _started;\r\n private _destroyed;\r\n private _finished;\r\n private _position;\r\n parentPlayer: AnimationPlayer | null;\r\n readonly totalTime: number;\r\n constructor(duration?: number, delay?: number);\r\n private _onFinish;\r\n onStart(fn: () => void): void;\r\n onDone(fn: () => void): void;\r\n onDestroy(fn: () => void): void;\r\n hasStarted(): boolean;\r\n init(): void;\r\n play(): void;\r\n private _onStart;\r\n pause(): void;\r\n restart(): void;\r\n finish(): void;\r\n destroy(): void;\r\n reset(): void;\r\n setPosition(position: number): void;\r\n getPosition(): number;\r\n}\r\n\r\n/**\r\n * Finds one or more inner elements within the current element that is\r\n * being animated within a sequence. Use with `animate()`.\r\n *\r\n * @param selector The element to query, or a set of elements that contain Angular-specific\r\n * characteristics, specified with one or more of the following tokens.\r\n * - `query(\":enter\")` or `query(\":leave\")` : Query for newly inserted/removed elements.\r\n * - `query(\":animating\")` : Query all currently animating elements.\r\n * - `query(\"@triggerName\")` : Query elements that contain an animation trigger.\r\n * - `query(\"@*\")` : Query all elements that contain an animation triggers.\r\n * - `query(\":self\")` : Include the current element into the animation sequence.\r\n *\r\n * @param animation One or more animation steps to apply to the queried element or elements.\r\n * An array is treated as an animation sequence.\r\n * @param options An options object. Use the 'limit' field to limit the total number of\r\n * items to collect.\r\n * @return An object that encapsulates the query data.\r\n *\r\n * @usageNotes\r\n * Tokens can be merged into a combined query selector string. For example:\r\n *\r\n * ```typescript\r\n * query(':self, .record:enter, .record:leave, @subTrigger', [...])\r\n * ```\r\n *\r\n * The `query()` function collects multiple elements and works internally by using\r\n * `element.querySelectorAll`. Use the `limit` field of an options object to limit\r\n * the total number of items to be collected. For example:\r\n *\r\n * ```js\r\n * query('div', [\r\n * animate(...),\r\n * animate(...)\r\n * ], { limit: 1 })\r\n * ```\r\n *\r\n * By default, throws an error when zero items are found. Set the\r\n * `optional` flag to ignore this error. For example:\r\n *\r\n * ```js\r\n * query('.some-element-that-may-not-be-there', [\r\n * animate(...),\r\n * animate(...)\r\n * ], { optional: true })\r\n * ```\r\n *\r\n * ### Usage Example\r\n *\r\n * The following example queries for inner elements and animates them\r\n * individually using `animate()`.\r\n *\r\n * ```typescript\r\n * @Component({\r\n * selector: 'inner',\r\n * template: `\r\n * <div [@queryAnimation]=\"exp\">\r\n * <h1>Title</h1>\r\n * <div class=\"content\">\r\n * Blah blah blah\r\n * </div>\r\n * </div>\r\n * `,\r\n * animations: [\r\n * trigger('queryAnimation', [\r\n * transition('* => goAnimate', [\r\n * // hide the inner elements\r\n * query('h1', style({ opacity: 0 })),\r\n * query('.content', style({ opacity: 0 })),\r\n *\r\n * // animate the inner elements in, one by one\r\n * query('h1', animate(1000, style({ opacity: 1 }))),\r\n * query('.content', animate(1000, style({ opacity: 1 }))),\r\n * ])\r\n * ])\r\n * ]\r\n * })\r\n * class Cmp {\r\n * exp = '';\r\n *\r\n * goAnimate() {\r\n * this.exp = 'goAnimate';\r\n * }\r\n * }\r\n * ```\r\n *\r\n * @publicApi\r\n */\r\nexport declare function query(selector: string, animation: AnimationMetadata | AnimationMetadata[], options?: AnimationQueryOptions | null): AnimationQueryMetadata;\r\n\r\n/**\r\n * Defines a list of animation steps to be run sequentially, one by one.\r\n *\r\n * @param steps An array of animation step objects.\r\n * - Steps defined by `style()` calls apply the styling data immediately.\r\n * - Steps defined by `animate()` calls apply the styling data over time\r\n * as specified by the timing data.\r\n *\r\n * ```typescript\r\n * sequence([\r\n * style({ opacity: 0 }),\r\n * animate(\"1s\", style({ opacity: 1 }))\r\n * ])\r\n * ```\r\n *\r\n * @param options An options object containing a delay and\r\n * developer-defined parameters that provide styling defaults and\r\n * can be overridden on invocation.\r\n *\r\n * @return An object that encapsulates the sequence data.\r\n *\r\n * @usageNotes\r\n * When you pass an array of steps to a\r\n * `transition()` call, the steps run sequentially by default.\r\n * Compare this to the `{@link animations/group group()}` call, which runs animation steps in\r\n *parallel.\r\n *\r\n * When a sequence is used within a `{@link animations/group group()}` or a `transition()` call,\r\n * execution continues to the next instruction only after each of the inner animation\r\n * steps have completed.\r\n *\r\n * @publicApi\r\n **/\r\nexport declare function sequence(steps: AnimationMetadata[], options?: AnimationOptions | null): AnimationSequenceMetadata;\r\n\r\n/**\r\n * Use within an animation `query()` call to issue a timing gap after\r\n * each queried item is animated.\r\n *\r\n * @param timings A delay value.\r\n * @param animation One ore more animation steps.\r\n * @returns An object that encapsulates the stagger data.\r\n *\r\n * @usageNotes\r\n * In the following example, a container element wraps a list of items stamped out\r\n * by an `ngFor`. The container element contains an animation trigger that will later be set\r\n * to query for each of the inner items.\r\n *\r\n * Each time items are added, the opacity fade-in animation runs,\r\n * and each removed item is faded out.\r\n * When either of these animations occur, the stagger effect is\r\n * applied after each item's animation is started.\r\n *\r\n * ```html\r\n * <!-- list.component.html -->\r\n * <button (click)=\"toggle()\">Show / Hide Items</button>\r\n * <hr />\r\n * <div [@listAnimation]=\"items.length\">\r\n * <div *ngFor=\"let item of items\">\r\n * {{ item }}\r\n * </div>\r\n * </div>\r\n * ```\r\n *\r\n * Here is the component code:\r\n *\r\n * ```typescript\r\n * import {trigger, transition, style, animate, query, stagger} from '@angular/animations';\r\n * @Component({\r\n * templateUrl: 'list.component.html',\r\n * animations: [\r\n * trigger('listAnimation', [\r\n * ...\r\n * ])\r\n * ]\r\n * })\r\n * class ListComponent {\r\n * items = [];\r\n *\r\n * showItems() {\r\n * this.items = [0,1,2,3,4];\r\n * }\r\n *\r\n * hideItems() {\r\n * this.items = [];\r\n * }\r\n *\r\n * toggle() {\r\n * this.items.length ? this.hideItems() : this.showItems();\r\n * }\r\n * }\r\n * ```\r\n *\r\n * Here is the animation trigger code:\r\n *\r\n * ```typescript\r\n * trigger('listAnimation', [\r\n * transition('* => *', [ // each time the binding value changes\r\n * query(':leave', [\r\n * stagger(100, [\r\n * animate('0.5s', style({ opacity: 0 }))\r\n * ])\r\n * ]),\r\n * query(':enter', [\r\n * style({ opacity: 0 }),\r\n * stagger(100, [\r\n * animate('0.5s', style({ opacity: 1 }))\r\n * ])\r\n * ])\r\n * ])\r\n * ])\r\n * ```\r\n *\r\n * @publicApi\r\n */\r\nexport declare function stagger(timings: string | number, animation: AnimationMetadata | AnimationMetadata[]): AnimationStaggerMetadata;\r\n\r\n/**\r\n * Declares an animation state within a trigger attached to an element.\r\n *\r\n * @param name One or more names for the defined state in a comma-separated string.\r\n * The following reserved state names can be supplied to define a style for specific use\r\n * cases:\r\n *\r\n * - `void` You can associate styles with this name to be used when\r\n * the element is detached from the application. For example, when an `ngIf` evaluates\r\n * to false, the state of the associated element is void.\r\n * - `*` (asterisk) Indicates the default state. You can associate styles with this name\r\n * to be used as the fallback when the state that is being animated is not declared\r\n * within the trigger.\r\n *\r\n * @param styles A set of CSS styles associated with this state, created using the\r\n * `style()` function.\r\n * This set of styles persists on the element once the state has been reached.\r\n * @param options Parameters that can be passed to the state when it is invoked.\r\n * 0 or more key-value pairs.\r\n * @return An object that encapsulates the new state data.\r\n *\r\n * @usageNotes\r\n * Use the `trigger()` function to register states to an animation trigger.\r\n * Use the `transition()` function to animate between states.\r\n * When a state is active within a component, its associated styles persist on the element,\r\n * even when the animation ends.\r\n *\r\n * @publicApi\r\n **/\r\nexport declare function state(name: string, styles: AnimationStyleMetadata, options?: {\r\n params: {\r\n [name: string]: any;\r\n };\r\n}): AnimationStateMetadata;\r\n\r\n/**\r\n * Declares a key/value object containing CSS properties/styles that\r\n * can then be used for an animation `state`, within an animation `sequence`,\r\n * or as styling data for calls to `animate()` and `keyframes()`.\r\n *\r\n * @param tokens A set of CSS styles or HTML styles associated with an animation state.\r\n * The value can be any of the following:\r\n * - A key-value style pair associating a CSS property with a value.\r\n * - An array of key-value style pairs.\r\n * - An asterisk (*), to use auto-styling, where styles are derived from the element\r\n * being animated and applied to the animation when it starts.\r\n *\r\n * Auto-styling can be used to define a state that depends on layout or other\r\n * environmental factors.\r\n *\r\n * @return An object that encapsulates the style data.\r\n *\r\n * @usageNotes\r\n * The following examples create animation styles that collect a set of\r\n * CSS property values:\r\n *\r\n * ```typescript\r\n * // string values for CSS properties\r\n * style({ background: \"red\", color: \"blue\" })\r\n *\r\n * // numerical pixel values\r\n * style({ width: 100, height: 0 })\r\n * ```\r\n *\r\n * The following example uses auto-styling to allow a component to animate from\r\n * a height of 0 up to the height of the parent element:\r\n *\r\n * ```\r\n * style({ height: 0 }),\r\n * animate(\"1s\", style({ height: \"*\" }))\r\n * ```\r\n *\r\n * @publicApi\r\n **/\r\nexport declare function style(tokens: '*' | {\r\n [key: string]: string | number;\r\n} | Array<'*' | {\r\n [key: string]: string | number;\r\n}>): AnimationStyleMetadata;\r\n\r\n/**\r\n * Declares an animation transition as a sequence of animation steps to run when a given\r\n * condition is satisfied. The condition is a Boolean expression or function that compares\r\n * the previous and current animation states, and returns true if this transition should occur.\r\n * When the state criteria of a defined transition are met, the associated animation is\r\n * triggered.\r\n *\r\n * @param stateChangeExpr A Boolean expression or function that compares the previous and current\r\n * animation states, and returns true if this transition should occur. Note that \"true\" and \"false\"\r\n * match 1 and 0, respectively. An expression is evaluated each time a state change occurs in the\r\n * animation trigger element.\r\n * The animation steps run when the expression evaluates to true.\r\n *\r\n * - A state-change string takes the form \"state1 => state2\", where each side is a defined animation\r\n * state, or an asterix (*) to refer to a dynamic start or end state.\r\n * - The expression string can contain multiple comma-separated statements;\r\n * for example \"state1 => state2, state3 => state4\".\r\n * - Special values `:enter` and `:leave` initiate a transition on the entry and exit states,\r\n * equivalent to \"void => *\" and \"* => void\".\r\n * - Special values `:increment` and `:decrement` initiate a transition when a numeric value has\r\n * increased or decreased in value.\r\n * - A function is executed each time a state change occurs in the animation trigger element.\r\n * The animation steps run when the function returns true.\r\n *\r\n * @param steps One or more animation objects, as returned by the `animate()` or\r\n * `sequence()` function, that form a transformation from one state to another.\r\n * A sequence is used by default when you pass an array.\r\n * @param options An options object that can contain a delay value for the start of the animation,\r\n * and additional developer-defined parameters. Provided values for additional parameters are used\r\n * as defaults, and override values can be passed to the caller on invocation.\r\n * @returns An object that encapsulates the transition data.\r\n *\r\n * @usageNotes\r\n * The template associated with a component binds an animation trigger to an element.\r\n *\r\n * ```HTML\r\n * <!-- somewhere inside of my-component-tpl.html -->\r\n * <div [@myAnimationTrigger]=\"myStatusExp\">...</div>\r\n * ```\r\n *\r\n * All transitions are defined within an animation trigger,\r\n * along with named states that the transitions change to and from.\r\n *\r\n * ```typescript\r\n * trigger(\"myAnimationTrigger\", [\r\n * // define states\r\n * state(\"on\", style({ background: \"green\" })),\r\n * state(\"off\", style({ background: \"grey\" })),\r\n * ...]\r\n * ```\r\n *\r\n * Note that when you call the `sequence()` function within a `{@link animations/group group()}`\r\n * or a `transition()` call, execution does not continue to the next instruction\r\n * until each of the inner animation steps have completed.\r\n *\r\n * ### Syntax examples\r\n *\r\n * The following examples define transitions between the two defined states (and default states),\r\n * using various options:\r\n *\r\n * ```typescript\r\n * // Transition occurs when the state value\r\n * // bound to \"myAnimationTrigger\" changes from \"on\" to \"off\"\r\n * transition(\"on => off\", animate(500))\r\n * // Run the same animation for both directions\r\n * transition(\"on <=> off\", animate(500))\r\n * // Define multiple state-change pairs separated by commas\r\n * transition(\"on => off, off => void\", animate(500))\r\n * ```\r\n *\r\n * ### Special values for state-change expressions\r\n *\r\n * - Catch-all state change for when an element is inserted into the page and the\r\n * destination state is unknown:\r\n *\r\n * ```typescript\r\n * transition(\"void => *\", [\r\n * style({ opacity: 0 }),\r\n * animate(500)\r\n * ])\r\n * ```\r\n *\r\n * - Capture a state change between any states:\r\n *\r\n * `transition(\"* => *\", animate(\"1s 0s\"))`\r\n *\r\n * - Entry and exit transitions:\r\n *\r\n * ```typescript\r\n * transition(\":enter\", [\r\n * style({ opacity: 0 }),\r\n * animate(500, style({ opacity: 1 }))\r\n * ]),\r\n * transition(\":leave\", [\r\n * animate(500, style({ opacity: 0 }))\r\n * ])\r\n * ```\r\n *\r\n * - Use `:increment` and `:decrement` to initiate transitions:\r\n *\r\n * ```typescript\r\n * transition(\":increment\", group([\r\n * query(':enter', [\r\n * style({ left: '100%' }),\r\n * animate('0.5s ease-out', style('*'))\r\n * ]),\r\n * query(':leave', [\r\n * animate('0.5s ease-out', style({ left: '-100%' }))\r\n * ])\r\n * ]))\r\n *\r\n * transition(\":decrement\", group([\r\n * query(':enter', [\r\n * style({ left: '100%' }),\r\n * animate('0.5s ease-out', style('*'))\r\n * ]),\r\n * query(':leave', [\r\n * animate('0.5s ease-out', style({ left: '-100%' }))\r\n * ])\r\n * ]))\r\n * ```\r\n *\r\n * ### State-change functions\r\n *\r\n * Here is an example of a `fromState` specified as a state-change function that invokes an\r\n * animation when true:\r\n *\r\n * ```typescript\r\n * transition((fromState, toState) =>\r\n * {\r\n * return fromState == \"off\" && toState == \"on\";\r\n * },\r\n * animate(\"1s 0s\"))\r\n * ```\r\n *\r\n * ### Animating to the final state\r\n *\r\n * If the final step in a transition is a call to `animate()` that uses a timing value\r\n * with no style data, that step is automatically considered the final animation arc,\r\n * for the element to reach the final state. Angular automatically adds or removes\r\n * CSS styles to ensure that the element is in the correct final state.\r\n *\r\n * The following example defines a transition that starts by hiding the element,\r\n * then makes sure that it animates properly to whatever state is currently active for trigger:\r\n *\r\n * ```typescript\r\n * transition(\"void => *\", [\r\n * style({ opacity: 0 }),\r\n * animate(500)\r\n * ])\r\n * ```\r\n * ### Boolean value matching\r\n * If a trigger binding value is a Boolean, it can be matched using a transition expression\r\n * that compares true and false or 1 and 0. For example:\r\n *\r\n * ```\r\n * // in the template\r\n * <div [@openClose]=\"open ? true : false\">...</div>\r\n * // in the component metadata\r\n * trigger('openClose', [\r\n * state('true', style({ height: '*' })),\r\n * state('false', style({ height: '0px' })),\r\n * transition('false <=> true', animate(500))\r\n * ])\r\n * ```\r\n *\r\n * @publicApi\r\n **/\r\nexport declare function transition(stateChangeExpr: string | ((fromState: string, toState: string, element?: any, params?: {\r\n [key: string]: any;\r\n}) => boolean), steps: AnimationMetadata | AnimationMetadata[], options?: AnimationOptions | null): AnimationTransitionMetadata;\r\n\r\n/**\r\n * Creates a named animation trigger, containing a list of `state()`\r\n * and `transition()` entries to be evaluated when the expression\r\n * bound to the trigger changes.\r\n *\r\n * @param name An identifying string.\r\n * @param definitions An animation definition object, containing an array of `state()`\r\n * and `transition()` declarations.\r\n *\r\n * @return An object that encapsulates the trigger data.\r\n *\r\n * @usageNotes\r\n * Define an animation trigger in the `animations` section of `@Component` metadata.\r\n * In the template, reference the trigger by name and bind it to a trigger expression that\r\n * evaluates to a defined animation state, using the following format:\r\n *\r\n * `[@triggerName]=\"expression\"`\r\n *\r\n * Animation trigger bindings convert all values to strings, and then match the\r\n * previous and current values against any linked transitions.\r\n * Booleans can be specified as `1` or `true` and `0` or `false`.\r\n *\r\n * ### Usage Example\r\n *\r\n * The following example creates an animation trigger reference based on the provided\r\n * name value.\r\n * The provided animation value is expected to be an array consisting of state and\r\n * transition declarations.\r\n *\r\n * ```typescript\r\n * @Component({\r\n * selector: \"my-component\",\r\n * templateUrl: \"my-component-tpl.html\",\r\n * animations: [\r\n * trigger(\"myAnimationTrigger\", [\r\n * state(...),\r\n * state(...),\r\n * transition(...),\r\n * transition(...)\r\n * ])\r\n * ]\r\n * })\r\n * class MyComponent {\r\n * myStatusExp = \"something\";\r\n * }\r\n * ```\r\n *\r\n * The template associated with this component makes use of the defined trigger\r\n * by binding to an element within its template code.\r\n *\r\n * ```html\r\n * <!-- somewhere inside of my-component-tpl.html -->\r\n * <div [@myAnimationTrigger]=\"myStatusExp\">...</div>\r\n * ```\r\n *\r\n * ### Using an inline function\r\n * The `transition` animation method also supports reading an inline function which can decide\r\n * if its associated animation should be run.\r\n *\r\n * ```typescript\r\n * // this method is run each time the `myAnimationTrigger` trigger value changes.\r\n * function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key:\r\n string]: any}): boolean {\r\n * // notice that `element` and `params` are also available here\r\n * return toState == 'yes-please-animate';\r\n * }\r\n *\r\n * @Component({\r\n * selector: 'my-component',\r\n * templateUrl: 'my-component-tpl.html',\r\n * animations: [\r\n * trigger('myAnimationTrigger', [\r\n * transition(myInlineMatcherFn, [\r\n * // the animation sequence code\r\n * ]),\r\n * ])\r\n * ]\r\n * })\r\n * class MyComponent {\r\n * myStatusExp = \"yes-please-animate\";\r\n * }\r\n * ```\r\n *\r\n * ### Disabling Animations\r\n * When true, the special animation control binding `@.disabled` binding prevents\r\n * all animations from rendering.\r\n * Place the `@.disabled` binding on an element to disable\r\n * animations on the element itself, as well as any inner animation triggers\r\n * within the element.\r\n *\r\n * The following example shows how to use this feature:\r\n *\r\n * ```typescript\r\n * @Component({\r\n * selector: 'my-component',\r\n * template: `\r\n * <div [@.disabled]=\"isDisabled\">\r\n * <div [@childAnimation]=\"exp\"></div>\r\n * </div>\r\n * `,\r\n * animations: [\r\n * trigger(\"childAnimation\", [\r\n * // ...\r\n * ])\r\n * ]\r\n * })\r\n * class MyComponent {\r\n * isDisabled = true;\r\n * exp = '...';\r\n * }\r\n * ```\r\n *\r\n * When `@.disabled` is true, it prevents the `@childAnimation` trigger from animating,\r\n * along with any inner animations.\r\n *\r\n * ### Disable animations application-wide\r\n * When an area of the template is set to have animations disabled,\r\n * **all** inner components have their animations disabled as well.\r\n * This means that you can disable all animations for an app\r\n * by placing a host binding set on `@.disabled` on the topmost Angular component.\r\n *\r\n * ```typescript\r\n * import {Component, HostBinding} from '@angular/core';\r\n *\r\n * @Component({\r\n * selector: 'app-component',\r\n * templateUrl: 'app.component.html',\r\n * })\r\n * class AppComponent {\r\n * @HostBinding('@.disabled')\r\n * public animationsDisabled = true;\r\n * }\r\n * ```\r\n *\r\n * ### Overriding disablement of inner animations\r\n * Despite inner animations being disabled, a parent animation can `query()`\r\n * for inner elements located in disabled areas of the template and still animate\r\n * them if needed. This is also the case for when a sub animation is\r\n * queried by a parent and then later animated using `animateChild()`.\r\n *\r\n * ### Detecting when an animation is disabled\r\n * If a region of the DOM (or the entire application) has its animations disabled, the animation\r\n * trigger callbacks still fire, but for zero seconds. When the callback fires, it provides\r\n * an instance of an `AnimationEvent`. If animations are disabled,\r\n * the `.disabled` flag on the event is true.\r\n *\r\n * @publicApi\r\n */\r\nexport declare function trigger(name: string, definitions: AnimationMetadata[]): AnimationTriggerMetadata;\r\n\r\n/**\r\n * Starts a reusable animation that is created using the `animation()` function.\r\n *\r\n * @param animation The reusable animation to start.\r\n * @param options An options object that can contain a delay value for the start of\r\n * the animation, and additional override values for developer-defined parameters.\r\n * @return An object that contains the animation parameters.\r\n *\r\n * @publicApi\r\n */\r\nexport declare function useAnimation(animation: AnimationReferenceMetadata, options?: AnimationOptions | null): AnimationAnimateRefMetadata;\r\n\r\n/**\r\n * A programmatic controller for a group of reusable animations.\r\n * Used internally to control animations.\r\n *\r\n * @see `AnimationPlayer`\r\n * @see `{@link animations/group group()}`\r\n *\r\n */\r\nexport declare class ɵAnimationGroupPlayer implements AnimationPlayer {\r\n private _onDoneFns;\r\n private _onStartFns;\r\n private _finished;\r\n private _started;\r\n private _destroyed;\r\n private _onDestroyFns;\r\n parentPlayer: AnimationPlayer | null;\r\n totalTime: number;\r\n readonly players: AnimationPlayer[];\r\n constructor(_players: AnimationPlayer[]);\r\n private _onFinish;\r\n init(): void;\r\n onStart(fn: () => void): void;\r\n private _onStart;\r\n onDone(fn: () => void): void;\r\n onDestroy(fn: () => void): void;\r\n hasStarted(): boolean;\r\n play(): void;\r\n pause(): void;\r\n restart(): void;\r\n finish(): void;\r\n destroy(): void;\r\n private _onDestroy;\r\n reset(): void;\r\n setPosition(p: number): void;\r\n getPosition(): number;\r\n beforeDestroy(): void;\r\n}\r\n\r\nexport declare const ɵPRE_STYLE = \"!\";\r\n\r\n\r\n/**\r\n * Represents a set of CSS styles for use in an animation style.\r\n */\r\nexport declare interface ɵStyleData {\r\n [key: string]: string | number;\r\n}\r\n\r\nexport { }\r\n"]} |
---|