Context Navigation

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

Last change on this file since bdd6491 was e29cc2e, checked in by Ema <ema_spirova@…>, 3 years ago
primeNG components
Property mode set to `100644`
File size: 46.6 KB

Line
1	/**
2	* @license Angular v12.2.13
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.

Download in other formats: