source: trip-planner-front/node_modules/@angular/animations/bundles/animations.umd.js@ 59329aa

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

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