source: trip-planner-front/node_modules/@angular/animations/fesm2015/animations.js@ 6a3a178

Last change on this file since 6a3a178 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 38.1 KB
Line 
1/**
2 * @license Angular v12.2.9
3 * (c) 2010-2021 Google LLC. https://angular.io/
4 * License: MIT
5 */
6
7/**
8 * An injectable service that produces an animation sequence programmatically within an
9 * Angular component or directive.
10 * Provided by the `BrowserAnimationsModule` or `NoopAnimationsModule`.
11 *
12 * @usageNotes
13 *
14 * To use this service, add it to your component or directive as a dependency.
15 * The service is instantiated along with your component.
16 *
17 * Apps do not typically need to create their own animation players, but if you
18 * do need to, follow these steps:
19 *
20 * 1. Use the `build()` method to create a programmatic animation using the
21 * `animate()` function. The method returns an `AnimationFactory` instance.
22 *
23 * 2. Use the factory object to create an `AnimationPlayer` and attach it to a DOM element.
24 *
25 * 3. Use the player object to control the animation programmatically.
26 *
27 * For example:
28 *
29 * ```ts
30 * // import the service from BrowserAnimationsModule
31 * import {AnimationBuilder} from '@angular/animations';
32 * // require the service as a dependency
33 * class MyCmp {
34 * constructor(private _builder: AnimationBuilder) {}
35 *
36 * makeAnimation(element: any) {
37 * // first define a reusable animation
38 * const myAnimation = this._builder.build([
39 * style({ width: 0 }),
40 * animate(1000, style({ width: '100px' }))
41 * ]);
42 *
43 * // use the returned factory object to create a player
44 * const player = myAnimation.create(element);
45 *
46 * player.play();
47 * }
48 * }
49 * ```
50 *
51 * @publicApi
52 */
53class AnimationBuilder {
54}
55/**
56 * A factory object returned from the `AnimationBuilder`.`build()` method.
57 *
58 * @publicApi
59 */
60class AnimationFactory {
61}
62
63/**
64 * @license
65 * Copyright Google LLC All Rights Reserved.
66 *
67 * Use of this source code is governed by an MIT-style license that can be
68 * found in the LICENSE file at https://angular.io/license
69 */
70/**
71 * Specifies automatic styling.
72 *
73 * @publicApi
74 */
75const AUTO_STYLE = '*';
76/**
77 * Creates a named animation trigger, containing a list of `state()`
78 * and `transition()` entries to be evaluated when the expression
79 * bound to the trigger changes.
80 *
81 * @param name An identifying string.
82 * @param definitions An animation definition object, containing an array of `state()`
83 * and `transition()` declarations.
84 *
85 * @return An object that encapsulates the trigger data.
86 *
87 * @usageNotes
88 * Define an animation trigger in the `animations` section of `@Component` metadata.
89 * In the template, reference the trigger by name and bind it to a trigger expression that
90 * evaluates to a defined animation state, using the following format:
91 *
92 * `[@triggerName]="expression"`
93 *
94 * Animation trigger bindings convert all values to strings, and then match the
95 * previous and current values against any linked transitions.
96 * Booleans can be specified as `1` or `true` and `0` or `false`.
97 *
98 * ### Usage Example
99 *
100 * The following example creates an animation trigger reference based on the provided
101 * name value.
102 * The provided animation value is expected to be an array consisting of state and
103 * transition declarations.
104 *
105 * ```typescript
106 * @Component({
107 * selector: "my-component",
108 * templateUrl: "my-component-tpl.html",
109 * animations: [
110 * trigger("myAnimationTrigger", [
111 * state(...),
112 * state(...),
113 * transition(...),
114 * transition(...)
115 * ])
116 * ]
117 * })
118 * class MyComponent {
119 * myStatusExp = "something";
120 * }
121 * ```
122 *
123 * The template associated with this component makes use of the defined trigger
124 * by binding to an element within its template code.
125 *
126 * ```html
127 * <!-- somewhere inside of my-component-tpl.html -->
128 * <div [@myAnimationTrigger]="myStatusExp">...</div>
129 * ```
130 *
131 * ### Using an inline function
132 * The `transition` animation method also supports reading an inline function which can decide
133 * if its associated animation should be run.
134 *
135 * ```typescript
136 * // this method is run each time the `myAnimationTrigger` trigger value changes.
137 * function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key:
138 string]: any}): boolean {
139 * // notice that `element` and `params` are also available here
140 * return toState == 'yes-please-animate';
141 * }
142 *
143 * @Component({
144 * selector: 'my-component',
145 * templateUrl: 'my-component-tpl.html',
146 * animations: [
147 * trigger('myAnimationTrigger', [
148 * transition(myInlineMatcherFn, [
149 * // the animation sequence code
150 * ]),
151 * ])
152 * ]
153 * })
154 * class MyComponent {
155 * myStatusExp = "yes-please-animate";
156 * }
157 * ```
158 *
159 * ### Disabling Animations
160 * When true, the special animation control binding `@.disabled` binding prevents
161 * all animations from rendering.
162 * Place the `@.disabled` binding on an element to disable
163 * animations on the element itself, as well as any inner animation triggers
164 * within the element.
165 *
166 * The following example shows how to use this feature:
167 *
168 * ```typescript
169 * @Component({
170 * selector: 'my-component',
171 * template: `
172 * <div [@.disabled]="isDisabled">
173 * <div [@childAnimation]="exp"></div>
174 * </div>
175 * `,
176 * animations: [
177 * trigger("childAnimation", [
178 * // ...
179 * ])
180 * ]
181 * })
182 * class MyComponent {
183 * isDisabled = true;
184 * exp = '...';
185 * }
186 * ```
187 *
188 * When `@.disabled` is true, it prevents the `@childAnimation` trigger from animating,
189 * along with any inner animations.
190 *
191 * ### Disable animations application-wide
192 * When an area of the template is set to have animations disabled,
193 * **all** inner components have their animations disabled as well.
194 * This means that you can disable all animations for an app
195 * by placing a host binding set on `@.disabled` on the topmost Angular component.
196 *
197 * ```typescript
198 * import {Component, HostBinding} from '@angular/core';
199 *
200 * @Component({
201 * selector: 'app-component',
202 * templateUrl: 'app.component.html',
203 * })
204 * class AppComponent {
205 * @HostBinding('@.disabled')
206 * public animationsDisabled = true;
207 * }
208 * ```
209 *
210 * ### Overriding disablement of inner animations
211 * Despite inner animations being disabled, a parent animation can `query()`
212 * for inner elements located in disabled areas of the template and still animate
213 * them if needed. This is also the case for when a sub animation is
214 * queried by a parent and then later animated using `animateChild()`.
215 *
216 * ### Detecting when an animation is disabled
217 * If a region of the DOM (or the entire application) has its animations disabled, the animation
218 * trigger callbacks still fire, but for zero seconds. When the callback fires, it provides
219 * an instance of an `AnimationEvent`. If animations are disabled,
220 * the `.disabled` flag on the event is true.
221 *
222 * @publicApi
223 */
224function trigger(name, definitions) {
225 return { type: 7 /* Trigger */, name, definitions, options: {} };
226}
227/**
228 * Defines an animation step that combines styling information with timing information.
229 *
230 * @param timings Sets `AnimateTimings` for the parent animation.
231 * A string in the format "duration [delay] [easing]".
232 * - Duration and delay are expressed as a number and optional time unit,
233 * such as "1s" or "10ms" for one second and 10 milliseconds, respectively.
234 * The default unit is milliseconds.
235 * - The easing value controls how the animation accelerates and decelerates
236 * during its runtime. Value is one of `ease`, `ease-in`, `ease-out`,
237 * `ease-in-out`, or a `cubic-bezier()` function call.
238 * If not supplied, no easing is applied.
239 *
240 * For example, the string "1s 100ms ease-out" specifies a duration of
241 * 1000 milliseconds, and delay of 100 ms, and the "ease-out" easing style,
242 * which decelerates near the end of the duration.
243 * @param styles Sets AnimationStyles for the parent animation.
244 * A function call to either `style()` or `keyframes()`
245 * that returns a collection of CSS style entries to be applied to the parent animation.
246 * When null, uses the styles from the destination state.
247 * This is useful when describing an animation step that will complete an animation;
248 * see "Animating to the final state" in `transitions()`.
249 * @returns An object that encapsulates the animation step.
250 *
251 * @usageNotes
252 * Call within an animation `sequence()`, `{@link animations/group group()}`, or
253 * `transition()` call to specify an animation step
254 * that applies given style data to the parent animation for a given amount of time.
255 *
256 * ### Syntax Examples
257 * **Timing examples**
258 *
259 * The following examples show various `timings` specifications.
260 * - `animate(500)` : Duration is 500 milliseconds.
261 * - `animate("1s")` : Duration is 1000 milliseconds.
262 * - `animate("100ms 0.5s")` : Duration is 100 milliseconds, delay is 500 milliseconds.
263 * - `animate("5s ease-in")` : Duration is 5000 milliseconds, easing in.
264 * - `animate("5s 10ms cubic-bezier(.17,.67,.88,.1)")` : Duration is 5000 milliseconds, delay is 10
265 * milliseconds, easing according to a bezier curve.
266 *
267 * **Style examples**
268 *
269 * The following example calls `style()` to set a single CSS style.
270 * ```typescript
271 * animate(500, style({ background: "red" }))
272 * ```
273 * The following example calls `keyframes()` to set a CSS style
274 * to different values for successive keyframes.
275 * ```typescript
276 * animate(500, keyframes(
277 * [
278 * style({ background: "blue" }),
279 * style({ background: "red" })
280 * ])
281 * ```
282 *
283 * @publicApi
284 */
285function animate(timings, styles = null) {
286 return { type: 4 /* Animate */, styles, timings };
287}
288/**
289 * @description Defines a list of animation steps to be run in parallel.
290 *
291 * @param steps An array of animation step objects.
292 * - When steps are defined by `style()` or `animate()`
293 * function calls, each call within the group is executed instantly.
294 * - To specify offset styles to be applied at a later time, define steps with
295 * `keyframes()`, or use `animate()` calls with a delay value.
296 * For example:
297 *
298 * ```typescript
299 * group([
300 * animate("1s", style({ background: "black" })),
301 * animate("2s", style({ color: "white" }))
302 * ])
303 * ```
304 *
305 * @param options An options object containing a delay and
306 * developer-defined parameters that provide styling defaults and
307 * can be overridden on invocation.
308 *
309 * @return An object that encapsulates the group data.
310 *
311 * @usageNotes
312 * Grouped animations are useful when a series of styles must be
313 * animated at different starting times and closed off at different ending times.
314 *
315 * When called within a `sequence()` or a
316 * `transition()` call, does not continue to the next
317 * instruction until all of the inner animation steps have completed.
318 *
319 * @publicApi
320 */
321function group(steps, options = null) {
322 return { type: 3 /* Group */, steps, options };
323}
324/**
325 * Defines a list of animation steps to be run sequentially, one by one.
326 *
327 * @param steps An array of animation step objects.
328 * - Steps defined by `style()` calls apply the styling data immediately.
329 * - Steps defined by `animate()` calls apply the styling data over time
330 * as specified by the timing data.
331 *
332 * ```typescript
333 * sequence([
334 * style({ opacity: 0 }),
335 * animate("1s", style({ opacity: 1 }))
336 * ])
337 * ```
338 *
339 * @param options An options object containing a delay and
340 * developer-defined parameters that provide styling defaults and
341 * can be overridden on invocation.
342 *
343 * @return An object that encapsulates the sequence data.
344 *
345 * @usageNotes
346 * When you pass an array of steps to a
347 * `transition()` call, the steps run sequentially by default.
348 * Compare this to the `{@link animations/group group()}` call, which runs animation steps in
349 *parallel.
350 *
351 * When a sequence is used within a `{@link animations/group group()}` or a `transition()` call,
352 * execution continues to the next instruction only after each of the inner animation
353 * steps have completed.
354 *
355 * @publicApi
356 **/
357function sequence(steps, options = null) {
358 return { type: 2 /* Sequence */, steps, options };
359}
360/**
361 * Declares a key/value object containing CSS properties/styles that
362 * can then be used for an animation `state`, within an animation `sequence`,
363 * or as styling data for calls to `animate()` and `keyframes()`.
364 *
365 * @param tokens A set of CSS styles or HTML styles associated with an animation state.
366 * The value can be any of the following:
367 * - A key-value style pair associating a CSS property with a value.
368 * - An array of key-value style pairs.
369 * - An asterisk (*), to use auto-styling, where styles are derived from the element
370 * being animated and applied to the animation when it starts.
371 *
372 * Auto-styling can be used to define a state that depends on layout or other
373 * environmental factors.
374 *
375 * @return An object that encapsulates the style data.
376 *
377 * @usageNotes
378 * The following examples create animation styles that collect a set of
379 * CSS property values:
380 *
381 * ```typescript
382 * // string values for CSS properties
383 * style({ background: "red", color: "blue" })
384 *
385 * // numerical pixel values
386 * style({ width: 100, height: 0 })
387 * ```
388 *
389 * The following example uses auto-styling to allow a component to animate from
390 * a height of 0 up to the height of the parent element:
391 *
392 * ```
393 * style({ height: 0 }),
394 * animate("1s", style({ height: "*" }))
395 * ```
396 *
397 * @publicApi
398 **/
399function style(tokens) {
400 return { type: 6 /* Style */, styles: tokens, offset: null };
401}
402/**
403 * Declares an animation state within a trigger attached to an element.
404 *
405 * @param name One or more names for the defined state in a comma-separated string.
406 * The following reserved state names can be supplied to define a style for specific use
407 * cases:
408 *
409 * - `void` You can associate styles with this name to be used when
410 * the element is detached from the application. For example, when an `ngIf` evaluates
411 * to false, the state of the associated element is void.
412 * - `*` (asterisk) Indicates the default state. You can associate styles with this name
413 * to be used as the fallback when the state that is being animated is not declared
414 * within the trigger.
415 *
416 * @param styles A set of CSS styles associated with this state, created using the
417 * `style()` function.
418 * This set of styles persists on the element once the state has been reached.
419 * @param options Parameters that can be passed to the state when it is invoked.
420 * 0 or more key-value pairs.
421 * @return An object that encapsulates the new state data.
422 *
423 * @usageNotes
424 * Use the `trigger()` function to register states to an animation trigger.
425 * Use the `transition()` function to animate between states.
426 * When a state is active within a component, its associated styles persist on the element,
427 * even when the animation ends.
428 *
429 * @publicApi
430 **/
431function state(name, styles, options) {
432 return { type: 0 /* State */, name, styles, options };
433}
434/**
435 * Defines a set of animation styles, associating each style with an optional `offset` value.
436 *
437 * @param steps A set of animation styles with optional offset data.
438 * The optional `offset` value for a style specifies a percentage of the total animation
439 * time at which that style is applied.
440 * @returns An object that encapsulates the keyframes data.
441 *
442 * @usageNotes
443 * Use with the `animate()` call. Instead of applying animations
444 * from the current state
445 * to the destination state, keyframes describe how each style entry is applied and at what point
446 * within the animation arc.
447 * Compare [CSS Keyframe Animations](https://www.w3schools.com/css/css3_animations.asp).
448 *
449 * ### Usage
450 *
451 * In the following example, the offset values describe
452 * when each `backgroundColor` value is applied. The color is red at the start, and changes to
453 * blue when 20% of the total time has elapsed.
454 *
455 * ```typescript
456 * // the provided offset values
457 * animate("5s", keyframes([
458 * style({ backgroundColor: "red", offset: 0 }),
459 * style({ backgroundColor: "blue", offset: 0.2 }),
460 * style({ backgroundColor: "orange", offset: 0.3 }),
461 * style({ backgroundColor: "black", offset: 1 })
462 * ]))
463 * ```
464 *
465 * If there are no `offset` values specified in the style entries, the offsets
466 * are calculated automatically.
467 *
468 * ```typescript
469 * animate("5s", keyframes([
470 * style({ backgroundColor: "red" }) // offset = 0
471 * style({ backgroundColor: "blue" }) // offset = 0.33
472 * style({ backgroundColor: "orange" }) // offset = 0.66
473 * style({ backgroundColor: "black" }) // offset = 1
474 * ]))
475 *```
476
477 * @publicApi
478 */
479function keyframes(steps) {
480 return { type: 5 /* Keyframes */, steps };
481}
482/**
483 * Declares an animation transition as a sequence of animation steps to run when a given
484 * condition is satisfied. The condition is a Boolean expression or function that compares
485 * the previous and current animation states, and returns true if this transition should occur.
486 * When the state criteria of a defined transition are met, the associated animation is
487 * triggered.
488 *
489 * @param stateChangeExpr A Boolean expression or function that compares the previous and current
490 * animation states, and returns true if this transition should occur. Note that "true" and "false"
491 * match 1 and 0, respectively. An expression is evaluated each time a state change occurs in the
492 * animation trigger element.
493 * The animation steps run when the expression evaluates to true.
494 *
495 * - A state-change string takes the form "state1 => state2", where each side is a defined animation
496 * state, or an asterix (*) to refer to a dynamic start or end state.
497 * - The expression string can contain multiple comma-separated statements;
498 * for example "state1 => state2, state3 => state4".
499 * - Special values `:enter` and `:leave` initiate a transition on the entry and exit states,
500 * equivalent to "void => *" and "* => void".
501 * - Special values `:increment` and `:decrement` initiate a transition when a numeric value has
502 * increased or decreased in value.
503 * - A function is executed each time a state change occurs in the animation trigger element.
504 * The animation steps run when the function returns true.
505 *
506 * @param steps One or more animation objects, as returned by the `animate()` or
507 * `sequence()` function, that form a transformation from one state to another.
508 * A sequence is used by default when you pass an array.
509 * @param options An options object that can contain a delay value for the start of the animation,
510 * and additional developer-defined parameters. Provided values for additional parameters are used
511 * as defaults, and override values can be passed to the caller on invocation.
512 * @returns An object that encapsulates the transition data.
513 *
514 * @usageNotes
515 * The template associated with a component binds an animation trigger to an element.
516 *
517 * ```HTML
518 * <!-- somewhere inside of my-component-tpl.html -->
519 * <div [@myAnimationTrigger]="myStatusExp">...</div>
520 * ```
521 *
522 * All transitions are defined within an animation trigger,
523 * along with named states that the transitions change to and from.
524 *
525 * ```typescript
526 * trigger("myAnimationTrigger", [
527 * // define states
528 * state("on", style({ background: "green" })),
529 * state("off", style({ background: "grey" })),
530 * ...]
531 * ```
532 *
533 * Note that when you call the `sequence()` function within a `{@link animations/group group()}`
534 * or a `transition()` call, execution does not continue to the next instruction
535 * until each of the inner animation steps have completed.
536 *
537 * ### Syntax examples
538 *
539 * The following examples define transitions between the two defined states (and default states),
540 * using various options:
541 *
542 * ```typescript
543 * // Transition occurs when the state value
544 * // bound to "myAnimationTrigger" changes from "on" to "off"
545 * transition("on => off", animate(500))
546 * // Run the same animation for both directions
547 * transition("on <=> off", animate(500))
548 * // Define multiple state-change pairs separated by commas
549 * transition("on => off, off => void", animate(500))
550 * ```
551 *
552 * ### Special values for state-change expressions
553 *
554 * - Catch-all state change for when an element is inserted into the page and the
555 * destination state is unknown:
556 *
557 * ```typescript
558 * transition("void => *", [
559 * style({ opacity: 0 }),
560 * animate(500)
561 * ])
562 * ```
563 *
564 * - Capture a state change between any states:
565 *
566 * `transition("* => *", animate("1s 0s"))`
567 *
568 * - Entry and exit transitions:
569 *
570 * ```typescript
571 * transition(":enter", [
572 * style({ opacity: 0 }),
573 * animate(500, style({ opacity: 1 }))
574 * ]),
575 * transition(":leave", [
576 * animate(500, style({ opacity: 0 }))
577 * ])
578 * ```
579 *
580 * - Use `:increment` and `:decrement` to initiate transitions:
581 *
582 * ```typescript
583 * transition(":increment", group([
584 * query(':enter', [
585 * style({ left: '100%' }),
586 * animate('0.5s ease-out', style('*'))
587 * ]),
588 * query(':leave', [
589 * animate('0.5s ease-out', style({ left: '-100%' }))
590 * ])
591 * ]))
592 *
593 * transition(":decrement", group([
594 * query(':enter', [
595 * style({ left: '100%' }),
596 * animate('0.5s ease-out', style('*'))
597 * ]),
598 * query(':leave', [
599 * animate('0.5s ease-out', style({ left: '-100%' }))
600 * ])
601 * ]))
602 * ```
603 *
604 * ### State-change functions
605 *
606 * Here is an example of a `fromState` specified as a state-change function that invokes an
607 * animation when true:
608 *
609 * ```typescript
610 * transition((fromState, toState) =>
611 * {
612 * return fromState == "off" && toState == "on";
613 * },
614 * animate("1s 0s"))
615 * ```
616 *
617 * ### Animating to the final state
618 *
619 * If the final step in a transition is a call to `animate()` that uses a timing value
620 * with no style data, that step is automatically considered the final animation arc,
621 * for the element to reach the final state. Angular automatically adds or removes
622 * CSS styles to ensure that the element is in the correct final state.
623 *
624 * The following example defines a transition that starts by hiding the element,
625 * then makes sure that it animates properly to whatever state is currently active for trigger:
626 *
627 * ```typescript
628 * transition("void => *", [
629 * style({ opacity: 0 }),
630 * animate(500)
631 * ])
632 * ```
633 * ### Boolean value matching
634 * If a trigger binding value is a Boolean, it can be matched using a transition expression
635 * that compares true and false or 1 and 0. For example:
636 *
637 * ```
638 * // in the template
639 * <div [@openClose]="open ? true : false">...</div>
640 * // in the component metadata
641 * trigger('openClose', [
642 * state('true', style({ height: '*' })),
643 * state('false', style({ height: '0px' })),
644 * transition('false <=> true', animate(500))
645 * ])
646 * ```
647 *
648 * @publicApi
649 **/
650function transition(stateChangeExpr, steps, options = null) {
651 return { type: 1 /* Transition */, expr: stateChangeExpr, animation: steps, options };
652}
653/**
654 * Produces a reusable animation that can be invoked in another animation or sequence,
655 * by calling the `useAnimation()` function.
656 *
657 * @param steps One or more animation objects, as returned by the `animate()`
658 * or `sequence()` function, that form a transformation from one state to another.
659 * A sequence is used by default when you pass an array.
660 * @param options An options object that can contain a delay value for the start of the
661 * animation, and additional developer-defined parameters.
662 * Provided values for additional parameters are used as defaults,
663 * and override values can be passed to the caller on invocation.
664 * @returns An object that encapsulates the animation data.
665 *
666 * @usageNotes
667 * The following example defines a reusable animation, providing some default parameter
668 * values.
669 *
670 * ```typescript
671 * var fadeAnimation = animation([
672 * style({ opacity: '{{ start }}' }),
673 * animate('{{ time }}',
674 * style({ opacity: '{{ end }}'}))
675 * ],
676 * { params: { time: '1000ms', start: 0, end: 1 }});
677 * ```
678 *
679 * The following invokes the defined animation with a call to `useAnimation()`,
680 * passing in override parameter values.
681 *
682 * ```js
683 * useAnimation(fadeAnimation, {
684 * params: {
685 * time: '2s',
686 * start: 1,
687 * end: 0
688 * }
689 * })
690 * ```
691 *
692 * If any of the passed-in parameter values are missing from this call,
693 * the default values are used. If one or more parameter values are missing before a step is
694 * animated, `useAnimation()` throws an error.
695 *
696 * @publicApi
697 */
698function animation(steps, options = null) {
699 return { type: 8 /* Reference */, animation: steps, options };
700}
701/**
702 * Executes a queried inner animation element within an animation sequence.
703 *
704 * @param options An options object that can contain a delay value for the start of the
705 * animation, and additional override values for developer-defined parameters.
706 * @return An object that encapsulates the child animation data.
707 *
708 * @usageNotes
709 * Each time an animation is triggered in Angular, the parent animation
710 * has priority and any child animations are blocked. In order
711 * for a child animation to run, the parent animation must query each of the elements
712 * containing child animations, and run them using this function.
713 *
714 * Note that this feature is designed to be used with `query()` and it will only work
715 * with animations that are assigned using the Angular animation library. CSS keyframes
716 * and transitions are not handled by this API.
717 *
718 * @publicApi
719 */
720function animateChild(options = null) {
721 return { type: 9 /* AnimateChild */, options };
722}
723/**
724 * Starts a reusable animation that is created using the `animation()` function.
725 *
726 * @param animation The reusable animation to start.
727 * @param options An options object that can contain a delay value for the start of
728 * the animation, and additional override values for developer-defined parameters.
729 * @return An object that contains the animation parameters.
730 *
731 * @publicApi
732 */
733function useAnimation(animation, options = null) {
734 return { type: 10 /* AnimateRef */, animation, options };
735}
736/**
737 * Finds one or more inner elements within the current element that is
738 * being animated within a sequence. Use with `animate()`.
739 *
740 * @param selector The element to query, or a set of elements that contain Angular-specific
741 * characteristics, specified with one or more of the following tokens.
742 * - `query(":enter")` or `query(":leave")` : Query for newly inserted/removed elements.
743 * - `query(":animating")` : Query all currently animating elements.
744 * - `query("@triggerName")` : Query elements that contain an animation trigger.
745 * - `query("@*")` : Query all elements that contain an animation triggers.
746 * - `query(":self")` : Include the current element into the animation sequence.
747 *
748 * @param animation One or more animation steps to apply to the queried element or elements.
749 * An array is treated as an animation sequence.
750 * @param options An options object. Use the 'limit' field to limit the total number of
751 * items to collect.
752 * @return An object that encapsulates the query data.
753 *
754 * @usageNotes
755 * Tokens can be merged into a combined query selector string. For example:
756 *
757 * ```typescript
758 * query(':self, .record:enter, .record:leave, @subTrigger', [...])
759 * ```
760 *
761 * The `query()` function collects multiple elements and works internally by using
762 * `element.querySelectorAll`. Use the `limit` field of an options object to limit
763 * the total number of items to be collected. For example:
764 *
765 * ```js
766 * query('div', [
767 * animate(...),
768 * animate(...)
769 * ], { limit: 1 })
770 * ```
771 *
772 * By default, throws an error when zero items are found. Set the
773 * `optional` flag to ignore this error. For example:
774 *
775 * ```js
776 * query('.some-element-that-may-not-be-there', [
777 * animate(...),
778 * animate(...)
779 * ], { optional: true })
780 * ```
781 *
782 * ### Usage Example
783 *
784 * The following example queries for inner elements and animates them
785 * individually using `animate()`.
786 *
787 * ```typescript
788 * @Component({
789 * selector: 'inner',
790 * template: `
791 * <div [@queryAnimation]="exp">
792 * <h1>Title</h1>
793 * <div class="content">
794 * Blah blah blah
795 * </div>
796 * </div>
797 * `,
798 * animations: [
799 * trigger('queryAnimation', [
800 * transition('* => goAnimate', [
801 * // hide the inner elements
802 * query('h1', style({ opacity: 0 })),
803 * query('.content', style({ opacity: 0 })),
804 *
805 * // animate the inner elements in, one by one
806 * query('h1', animate(1000, style({ opacity: 1 }))),
807 * query('.content', animate(1000, style({ opacity: 1 }))),
808 * ])
809 * ])
810 * ]
811 * })
812 * class Cmp {
813 * exp = '';
814 *
815 * goAnimate() {
816 * this.exp = 'goAnimate';
817 * }
818 * }
819 * ```
820 *
821 * @publicApi
822 */
823function query(selector, animation, options = null) {
824 return { type: 11 /* Query */, selector, animation, options };
825}
826/**
827 * Use within an animation `query()` call to issue a timing gap after
828 * each queried item is animated.
829 *
830 * @param timings A delay value.
831 * @param animation One ore more animation steps.
832 * @returns An object that encapsulates the stagger data.
833 *
834 * @usageNotes
835 * In the following example, a container element wraps a list of items stamped out
836 * by an `ngFor`. The container element contains an animation trigger that will later be set
837 * to query for each of the inner items.
838 *
839 * Each time items are added, the opacity fade-in animation runs,
840 * and each removed item is faded out.
841 * When either of these animations occur, the stagger effect is
842 * applied after each item's animation is started.
843 *
844 * ```html
845 * <!-- list.component.html -->
846 * <button (click)="toggle()">Show / Hide Items</button>
847 * <hr />
848 * <div [@listAnimation]="items.length">
849 * <div *ngFor="let item of items">
850 * {{ item }}
851 * </div>
852 * </div>
853 * ```
854 *
855 * Here is the component code:
856 *
857 * ```typescript
858 * import {trigger, transition, style, animate, query, stagger} from '@angular/animations';
859 * @Component({
860 * templateUrl: 'list.component.html',
861 * animations: [
862 * trigger('listAnimation', [
863 * ...
864 * ])
865 * ]
866 * })
867 * class ListComponent {
868 * items = [];
869 *
870 * showItems() {
871 * this.items = [0,1,2,3,4];
872 * }
873 *
874 * hideItems() {
875 * this.items = [];
876 * }
877 *
878 * toggle() {
879 * this.items.length ? this.hideItems() : this.showItems();
880 * }
881 * }
882 * ```
883 *
884 * Here is the animation trigger code:
885 *
886 * ```typescript
887 * trigger('listAnimation', [
888 * transition('* => *', [ // each time the binding value changes
889 * query(':leave', [
890 * stagger(100, [
891 * animate('0.5s', style({ opacity: 0 }))
892 * ])
893 * ]),
894 * query(':enter', [
895 * style({ opacity: 0 }),
896 * stagger(100, [
897 * animate('0.5s', style({ opacity: 1 }))
898 * ])
899 * ])
900 * ])
901 * ])
902 * ```
903 *
904 * @publicApi
905 */
906function stagger(timings, animation) {
907 return { type: 12 /* Stagger */, timings, animation };
908}
909
910/**
911 * @license
912 * Copyright Google LLC All Rights Reserved.
913 *
914 * Use of this source code is governed by an MIT-style license that can be
915 * found in the LICENSE file at https://angular.io/license
916 */
917function scheduleMicroTask(cb) {
918 Promise.resolve(null).then(cb);
919}
920
921/**
922 * @license
923 * Copyright Google LLC All Rights Reserved.
924 *
925 * Use of this source code is governed by an MIT-style license that can be
926 * found in the LICENSE file at https://angular.io/license
927 */
928/**
929 * An empty programmatic controller for reusable animations.
930 * Used internally when animations are disabled, to avoid
931 * checking for the null case when an animation player is expected.
932 *
933 * @see `animate()`
934 * @see `AnimationPlayer`
935 * @see `GroupPlayer`
936 *
937 * @publicApi
938 */
939class NoopAnimationPlayer {
940 constructor(duration = 0, delay = 0) {
941 this._onDoneFns = [];
942 this._onStartFns = [];
943 this._onDestroyFns = [];
944 this._started = false;
945 this._destroyed = false;
946 this._finished = false;
947 this._position = 0;
948 this.parentPlayer = null;
949 this.totalTime = duration + delay;
950 }
951 _onFinish() {
952 if (!this._finished) {
953 this._finished = true;
954 this._onDoneFns.forEach(fn => fn());
955 this._onDoneFns = [];
956 }
957 }
958 onStart(fn) {
959 this._onStartFns.push(fn);
960 }
961 onDone(fn) {
962 this._onDoneFns.push(fn);
963 }
964 onDestroy(fn) {
965 this._onDestroyFns.push(fn);
966 }
967 hasStarted() {
968 return this._started;
969 }
970 init() { }
971 play() {
972 if (!this.hasStarted()) {
973 this._onStart();
974 this.triggerMicrotask();
975 }
976 this._started = true;
977 }
978 /** @internal */
979 triggerMicrotask() {
980 scheduleMicroTask(() => this._onFinish());
981 }
982 _onStart() {
983 this._onStartFns.forEach(fn => fn());
984 this._onStartFns = [];
985 }
986 pause() { }
987 restart() { }
988 finish() {
989 this._onFinish();
990 }
991 destroy() {
992 if (!this._destroyed) {
993 this._destroyed = true;
994 if (!this.hasStarted()) {
995 this._onStart();
996 }
997 this.finish();
998 this._onDestroyFns.forEach(fn => fn());
999 this._onDestroyFns = [];
1000 }
1001 }
1002 reset() {
1003 this._started = false;
1004 }
1005 setPosition(position) {
1006 this._position = this.totalTime ? position * this.totalTime : 1;
1007 }
1008 getPosition() {
1009 return this.totalTime ? this._position / this.totalTime : 1;
1010 }
1011 /** @internal */
1012 triggerCallback(phaseName) {
1013 const methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns;
1014 methods.forEach(fn => fn());
1015 methods.length = 0;
1016 }
1017}
1018
1019/**
1020 * @license
1021 * Copyright Google LLC All Rights Reserved.
1022 *
1023 * Use of this source code is governed by an MIT-style license that can be
1024 * found in the LICENSE file at https://angular.io/license
1025 */
1026/**
1027 * A programmatic controller for a group of reusable animations.
1028 * Used internally to control animations.
1029 *
1030 * @see `AnimationPlayer`
1031 * @see `{@link animations/group group()}`
1032 *
1033 */
1034class AnimationGroupPlayer {
1035 constructor(_players) {
1036 this._onDoneFns = [];
1037 this._onStartFns = [];
1038 this._finished = false;
1039 this._started = false;
1040 this._destroyed = false;
1041 this._onDestroyFns = [];
1042 this.parentPlayer = null;
1043 this.totalTime = 0;
1044 this.players = _players;
1045 let doneCount = 0;
1046 let destroyCount = 0;
1047 let startCount = 0;
1048 const total = this.players.length;
1049 if (total == 0) {
1050 scheduleMicroTask(() => this._onFinish());
1051 }
1052 else {
1053 this.players.forEach(player => {
1054 player.onDone(() => {
1055 if (++doneCount == total) {
1056 this._onFinish();
1057 }
1058 });
1059 player.onDestroy(() => {
1060 if (++destroyCount == total) {
1061 this._onDestroy();
1062 }
1063 });
1064 player.onStart(() => {
1065 if (++startCount == total) {
1066 this._onStart();
1067 }
1068 });
1069 });
1070 }
1071 this.totalTime = this.players.reduce((time, player) => Math.max(time, player.totalTime), 0);
1072 }
1073 _onFinish() {
1074 if (!this._finished) {
1075 this._finished = true;
1076 this._onDoneFns.forEach(fn => fn());
1077 this._onDoneFns = [];
1078 }
1079 }
1080 init() {
1081 this.players.forEach(player => player.init());
1082 }
1083 onStart(fn) {
1084 this._onStartFns.push(fn);
1085 }
1086 _onStart() {
1087 if (!this.hasStarted()) {
1088 this._started = true;
1089 this._onStartFns.forEach(fn => fn());
1090 this._onStartFns = [];
1091 }
1092 }
1093 onDone(fn) {
1094 this._onDoneFns.push(fn);
1095 }
1096 onDestroy(fn) {
1097 this._onDestroyFns.push(fn);
1098 }
1099 hasStarted() {
1100 return this._started;
1101 }
1102 play() {
1103 if (!this.parentPlayer) {
1104 this.init();
1105 }
1106 this._onStart();
1107 this.players.forEach(player => player.play());
1108 }
1109 pause() {
1110 this.players.forEach(player => player.pause());
1111 }
1112 restart() {
1113 this.players.forEach(player => player.restart());
1114 }
1115 finish() {
1116 this._onFinish();
1117 this.players.forEach(player => player.finish());
1118 }
1119 destroy() {
1120 this._onDestroy();
1121 }
1122 _onDestroy() {
1123 if (!this._destroyed) {
1124 this._destroyed = true;
1125 this._onFinish();
1126 this.players.forEach(player => player.destroy());
1127 this._onDestroyFns.forEach(fn => fn());
1128 this._onDestroyFns = [];
1129 }
1130 }
1131 reset() {
1132 this.players.forEach(player => player.reset());
1133 this._destroyed = false;
1134 this._finished = false;
1135 this._started = false;
1136 }
1137 setPosition(p) {
1138 const timeAtPosition = p * this.totalTime;
1139 this.players.forEach(player => {
1140 const position = player.totalTime ? Math.min(1, timeAtPosition / player.totalTime) : 1;
1141 player.setPosition(position);
1142 });
1143 }
1144 getPosition() {
1145 const longestPlayer = this.players.reduce((longestSoFar, player) => {
1146 const newPlayerIsLongest = longestSoFar === null || player.totalTime > longestSoFar.totalTime;
1147 return newPlayerIsLongest ? player : longestSoFar;
1148 }, null);
1149 return longestPlayer != null ? longestPlayer.getPosition() : 0;
1150 }
1151 beforeDestroy() {
1152 this.players.forEach(player => {
1153 if (player.beforeDestroy) {
1154 player.beforeDestroy();
1155 }
1156 });
1157 }
1158 /** @internal */
1159 triggerCallback(phaseName) {
1160 const methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns;
1161 methods.forEach(fn => fn());
1162 methods.length = 0;
1163 }
1164}
1165
1166/**
1167 * @license
1168 * Copyright Google LLC All Rights Reserved.
1169 *
1170 * Use of this source code is governed by an MIT-style license that can be
1171 * found in the LICENSE file at https://angular.io/license
1172 */
1173const ɵPRE_STYLE = '!';
1174
1175/**
1176 * @license
1177 * Copyright Google LLC All Rights Reserved.
1178 *
1179 * Use of this source code is governed by an MIT-style license that can be
1180 * found in the LICENSE file at https://angular.io/license
1181 */
1182
1183/**
1184 * @license
1185 * Copyright Google LLC All Rights Reserved.
1186 *
1187 * Use of this source code is governed by an MIT-style license that can be
1188 * found in the LICENSE file at https://angular.io/license
1189 */
1190
1191/**
1192 * @license
1193 * Copyright Google LLC All Rights Reserved.
1194 *
1195 * Use of this source code is governed by an MIT-style license that can be
1196 * found in the LICENSE file at https://angular.io/license
1197 */
1198
1199/**
1200 * Generated bundle index. Do not edit.
1201 */
1202
1203export { AUTO_STYLE, AnimationBuilder, AnimationFactory, NoopAnimationPlayer, animate, animateChild, animation, group, keyframes, query, sequence, stagger, state, style, transition, trigger, useAnimation, AnimationGroupPlayer as ɵAnimationGroupPlayer, ɵPRE_STYLE };
1204//# sourceMappingURL=animations.js.map
Note: See TracBrowser for help on using the repository browser.