123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176 |
- /**
- * @license Angular v19.2.13
- * (c) 2010-2025 Google LLC. https://angular.io/
- * License: MIT
- */
- /**
- * @description Constants for the categories of parameters that can be defined for animations.
- *
- * A corresponding function defines a set of parameters for each category, and
- * collects them into a corresponding `AnimationMetadata` object.
- *
- * @publicApi
- */
- var AnimationMetadataType;
- (function (AnimationMetadataType) {
- /**
- * Associates a named animation state with a set of CSS styles.
- * See [`state()`](api/animations/state)
- */
- AnimationMetadataType[AnimationMetadataType["State"] = 0] = "State";
- /**
- * Data for a transition from one animation state to another.
- * See `transition()`
- */
- AnimationMetadataType[AnimationMetadataType["Transition"] = 1] = "Transition";
- /**
- * Contains a set of animation steps.
- * See `sequence()`
- */
- AnimationMetadataType[AnimationMetadataType["Sequence"] = 2] = "Sequence";
- /**
- * Contains a set of animation steps.
- * See `group()`
- */
- AnimationMetadataType[AnimationMetadataType["Group"] = 3] = "Group";
- /**
- * Contains an animation step.
- * See `animate()`
- */
- AnimationMetadataType[AnimationMetadataType["Animate"] = 4] = "Animate";
- /**
- * Contains a set of animation steps.
- * See `keyframes()`
- */
- AnimationMetadataType[AnimationMetadataType["Keyframes"] = 5] = "Keyframes";
- /**
- * Contains a set of CSS property-value pairs into a named style.
- * See `style()`
- */
- AnimationMetadataType[AnimationMetadataType["Style"] = 6] = "Style";
- /**
- * Associates an animation with an entry trigger that can be attached to an element.
- * See `trigger()`
- */
- AnimationMetadataType[AnimationMetadataType["Trigger"] = 7] = "Trigger";
- /**
- * Contains a re-usable animation.
- * See `animation()`
- */
- AnimationMetadataType[AnimationMetadataType["Reference"] = 8] = "Reference";
- /**
- * Contains data to use in executing child animations returned by a query.
- * See `animateChild()`
- */
- AnimationMetadataType[AnimationMetadataType["AnimateChild"] = 9] = "AnimateChild";
- /**
- * Contains animation parameters for a re-usable animation.
- * See `useAnimation()`
- */
- AnimationMetadataType[AnimationMetadataType["AnimateRef"] = 10] = "AnimateRef";
- /**
- * Contains child-animation query data.
- * See `query()`
- */
- AnimationMetadataType[AnimationMetadataType["Query"] = 11] = "Query";
- /**
- * Contains data for staggering an animation sequence.
- * See `stagger()`
- */
- AnimationMetadataType[AnimationMetadataType["Stagger"] = 12] = "Stagger";
- })(AnimationMetadataType || (AnimationMetadataType = {}));
- /**
- * Specifies automatic styling.
- *
- * @publicApi
- */
- const AUTO_STYLE = '*';
- /**
- * Creates a named animation trigger, containing a list of [`state()`](api/animations/state)
- * and `transition()` entries to be evaluated when the expression
- * bound to the trigger changes.
- *
- * @param name An identifying string.
- * @param definitions An animation definition object, containing an array of
- * [`state()`](api/animations/state) and `transition()` declarations.
- *
- * @return An object that encapsulates the trigger data.
- *
- * @usageNotes
- * Define an animation trigger in the `animations` section of `@Component` metadata.
- * In the template, reference the trigger by name and bind it to a trigger expression that
- * evaluates to a defined animation state, using the following format:
- *
- * `[@triggerName]="expression"`
- *
- * Animation trigger bindings convert all values to strings, and then match the
- * previous and current values against any linked transitions.
- * Booleans can be specified as `1` or `true` and `0` or `false`.
- *
- * ### Usage Example
- *
- * The following example creates an animation trigger reference based on the provided
- * name value.
- * The provided animation value is expected to be an array consisting of state and
- * transition declarations.
- *
- * ```ts
- * @Component({
- * selector: "my-component",
- * templateUrl: "my-component-tpl.html",
- * animations: [
- * trigger("myAnimationTrigger", [
- * state(...),
- * state(...),
- * transition(...),
- * transition(...)
- * ])
- * ]
- * })
- * class MyComponent {
- * myStatusExp = "something";
- * }
- * ```
- *
- * The template associated with this component makes use of the defined trigger
- * by binding to an element within its template code.
- *
- * ```html
- * <!-- somewhere inside of my-component-tpl.html -->
- * <div [@myAnimationTrigger]="myStatusExp">...</div>
- * ```
- *
- * ### Using an inline function
- * The `transition` animation method also supports reading an inline function which can decide
- * if its associated animation should be run.
- *
- * ```ts
- * // this method is run each time the `myAnimationTrigger` trigger value changes.
- * function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key:
- string]: any}): boolean {
- * // notice that `element` and `params` are also available here
- * return toState == 'yes-please-animate';
- * }
- *
- * @Component({
- * selector: 'my-component',
- * templateUrl: 'my-component-tpl.html',
- * animations: [
- * trigger('myAnimationTrigger', [
- * transition(myInlineMatcherFn, [
- * // the animation sequence code
- * ]),
- * ])
- * ]
- * })
- * class MyComponent {
- * myStatusExp = "yes-please-animate";
- * }
- * ```
- *
- * ### Disabling Animations
- * When true, the special animation control binding `@.disabled` binding prevents
- * all animations from rendering.
- * Place the `@.disabled` binding on an element to disable
- * animations on the element itself, as well as any inner animation triggers
- * within the element.
- *
- * The following example shows how to use this feature:
- *
- * ```angular-ts
- * @Component({
- * selector: 'my-component',
- * template: `
- * <div [@.disabled]="isDisabled">
- * <div [@childAnimation]="exp"></div>
- * </div>
- * `,
- * animations: [
- * trigger("childAnimation", [
- * // ...
- * ])
- * ]
- * })
- * class MyComponent {
- * isDisabled = true;
- * exp = '...';
- * }
- * ```
- *
- * When `@.disabled` is true, it prevents the `@childAnimation` trigger from animating,
- * along with any inner animations.
- *
- * ### Disable animations application-wide
- * When an area of the template is set to have animations disabled,
- * **all** inner components have their animations disabled as well.
- * This means that you can disable all animations for an app
- * by placing a host binding set on `@.disabled` on the topmost Angular component.
- *
- * ```ts
- * import {Component, HostBinding} from '@angular/core';
- *
- * @Component({
- * selector: 'app-component',
- * templateUrl: 'app.component.html',
- * })
- * class AppComponent {
- * @HostBinding('@.disabled')
- * public animationsDisabled = true;
- * }
- * ```
- *
- * ### Overriding disablement of inner animations
- * Despite inner animations being disabled, a parent animation can `query()`
- * for inner elements located in disabled areas of the template and still animate
- * them if needed. This is also the case for when a sub animation is
- * queried by a parent and then later animated using `animateChild()`.
- *
- * ### Detecting when an animation is disabled
- * If a region of the DOM (or the entire application) has its animations disabled, the animation
- * trigger callbacks still fire, but for zero seconds. When the callback fires, it provides
- * an instance of an `AnimationEvent`. If animations are disabled,
- * the `.disabled` flag on the event is true.
- *
- * @publicApi
- */
- function trigger(name, definitions) {
- return { type: AnimationMetadataType.Trigger, name, definitions, options: {} };
- }
- /**
- * Defines an animation step that combines styling information with timing information.
- *
- * @param timings Sets `AnimateTimings` for the parent animation.
- * A string in the format "duration [delay] [easing]".
- * - Duration and delay are expressed as a number and optional time unit,
- * such as "1s" or "10ms" for one second and 10 milliseconds, respectively.
- * The default unit is milliseconds.
- * - The easing value controls how the animation accelerates and decelerates
- * during its runtime. Value is one of `ease`, `ease-in`, `ease-out`,
- * `ease-in-out`, or a `cubic-bezier()` function call.
- * If not supplied, no easing is applied.
- *
- * For example, the string "1s 100ms ease-out" specifies a duration of
- * 1000 milliseconds, and delay of 100 ms, and the "ease-out" easing style,
- * which decelerates near the end of the duration.
- * @param styles Sets AnimationStyles for the parent animation.
- * A function call to either `style()` or `keyframes()`
- * that returns a collection of CSS style entries to be applied to the parent animation.
- * When null, uses the styles from the destination state.
- * This is useful when describing an animation step that will complete an animation;
- * see "Animating to the final state" in `transitions()`.
- * @returns An object that encapsulates the animation step.
- *
- * @usageNotes
- * Call within an animation `sequence()`, {@link /api/animations/group group()}, or
- * `transition()` call to specify an animation step
- * that applies given style data to the parent animation for a given amount of time.
- *
- * ### Syntax Examples
- * **Timing examples**
- *
- * The following examples show various `timings` specifications.
- * - `animate(500)` : Duration is 500 milliseconds.
- * - `animate("1s")` : Duration is 1000 milliseconds.
- * - `animate("100ms 0.5s")` : Duration is 100 milliseconds, delay is 500 milliseconds.
- * - `animate("5s ease-in")` : Duration is 5000 milliseconds, easing in.
- * - `animate("5s 10ms cubic-bezier(.17,.67,.88,.1)")` : Duration is 5000 milliseconds, delay is 10
- * milliseconds, easing according to a bezier curve.
- *
- * **Style examples**
- *
- * The following example calls `style()` to set a single CSS style.
- * ```ts
- * animate(500, style({ background: "red" }))
- * ```
- * The following example calls `keyframes()` to set a CSS style
- * to different values for successive keyframes.
- * ```ts
- * animate(500, keyframes(
- * [
- * style({ background: "blue" }),
- * style({ background: "red" })
- * ])
- * ```
- *
- * @publicApi
- */
- function animate(timings, styles = null) {
- return { type: AnimationMetadataType.Animate, styles, timings };
- }
- /**
- * @description Defines a list of animation steps to be run in parallel.
- *
- * @param steps An array of animation step objects.
- * - When steps are defined by `style()` or `animate()`
- * function calls, each call within the group is executed instantly.
- * - To specify offset styles to be applied at a later time, define steps with
- * `keyframes()`, or use `animate()` calls with a delay value.
- * For example:
- *
- * ```ts
- * group([
- * animate("1s", style({ background: "black" })),
- * animate("2s", style({ color: "white" }))
- * ])
- * ```
- *
- * @param options An options object containing a delay and
- * developer-defined parameters that provide styling defaults and
- * can be overridden on invocation.
- *
- * @return An object that encapsulates the group data.
- *
- * @usageNotes
- * Grouped animations are useful when a series of styles must be
- * animated at different starting times and closed off at different ending times.
- *
- * When called within a `sequence()` or a
- * `transition()` call, does not continue to the next
- * instruction until all of the inner animation steps have completed.
- *
- * @publicApi
- */
- function group(steps, options = null) {
- return { type: AnimationMetadataType.Group, steps, options };
- }
- /**
- * Defines a list of animation steps to be run sequentially, one by one.
- *
- * @param steps An array of animation step objects.
- * - Steps defined by `style()` calls apply the styling data immediately.
- * - Steps defined by `animate()` calls apply the styling data over time
- * as specified by the timing data.
- *
- * ```ts
- * sequence([
- * style({ opacity: 0 }),
- * animate("1s", style({ opacity: 1 }))
- * ])
- * ```
- *
- * @param options An options object containing a delay and
- * developer-defined parameters that provide styling defaults and
- * can be overridden on invocation.
- *
- * @return An object that encapsulates the sequence data.
- *
- * @usageNotes
- * When you pass an array of steps to a
- * `transition()` call, the steps run sequentially by default.
- * Compare this to the {@link /api/animations/group group()} call, which runs animation steps in
- *parallel.
- *
- * When a sequence is used within a {@link /api/animations/group group()} or a `transition()` call,
- * execution continues to the next instruction only after each of the inner animation
- * steps have completed.
- *
- * @publicApi
- **/
- function sequence(steps, options = null) {
- return { type: AnimationMetadataType.Sequence, steps, options };
- }
- /**
- * Declares a key/value object containing CSS properties/styles that
- * can then be used for an animation [`state`](api/animations/state), within an animation
- *`sequence`, or as styling data for calls to `animate()` and `keyframes()`.
- *
- * @param tokens A set of CSS styles or HTML styles associated with an animation state.
- * The value can be any of the following:
- * - A key-value style pair associating a CSS property with a value.
- * - An array of key-value style pairs.
- * - An asterisk (*), to use auto-styling, where styles are derived from the element
- * being animated and applied to the animation when it starts.
- *
- * Auto-styling can be used to define a state that depends on layout or other
- * environmental factors.
- *
- * @return An object that encapsulates the style data.
- *
- * @usageNotes
- * The following examples create animation styles that collect a set of
- * CSS property values:
- *
- * ```ts
- * // string values for CSS properties
- * style({ background: "red", color: "blue" })
- *
- * // numerical pixel values
- * style({ width: 100, height: 0 })
- * ```
- *
- * The following example uses auto-styling to allow an element to animate from
- * a height of 0 up to its full height:
- *
- * ```ts
- * style({ height: 0 }),
- * animate("1s", style({ height: "*" }))
- * ```
- *
- * @publicApi
- **/
- function style(tokens) {
- return { type: AnimationMetadataType.Style, styles: tokens, offset: null };
- }
- /**
- * Declares an animation state within a trigger attached to an element.
- *
- * @param name One or more names for the defined state in a comma-separated string.
- * The following reserved state names can be supplied to define a style for specific use
- * cases:
- *
- * - `void` You can associate styles with this name to be used when
- * the element is detached from the application. For example, when an `ngIf` evaluates
- * to false, the state of the associated element is void.
- * - `*` (asterisk) Indicates the default state. You can associate styles with this name
- * to be used as the fallback when the state that is being animated is not declared
- * within the trigger.
- *
- * @param styles A set of CSS styles associated with this state, created using the
- * `style()` function.
- * This set of styles persists on the element once the state has been reached.
- * @param options Parameters that can be passed to the state when it is invoked.
- * 0 or more key-value pairs.
- * @return An object that encapsulates the new state data.
- *
- * @usageNotes
- * Use the `trigger()` function to register states to an animation trigger.
- * Use the `transition()` function to animate between states.
- * When a state is active within a component, its associated styles persist on the element,
- * even when the animation ends.
- *
- * @publicApi
- **/
- function state(name, styles, options) {
- return { type: AnimationMetadataType.State, name, styles, options };
- }
- /**
- * Defines a set of animation styles, associating each style with an optional `offset` value.
- *
- * @param steps A set of animation styles with optional offset data.
- * The optional `offset` value for a style specifies a percentage of the total animation
- * time at which that style is applied.
- * @returns An object that encapsulates the keyframes data.
- *
- * @usageNotes
- * Use with the `animate()` call. Instead of applying animations
- * from the current state
- * to the destination state, keyframes describe how each style entry is applied and at what point
- * within the animation arc.
- * Compare [CSS Keyframe Animations](https://www.w3schools.com/css/css3_animations.asp).
- *
- * ### Usage
- *
- * In the following example, the offset values describe
- * when each `backgroundColor` value is applied. The color is red at the start, and changes to
- * blue when 20% of the total time has elapsed.
- *
- * ```ts
- * // the provided offset values
- * animate("5s", keyframes([
- * style({ backgroundColor: "red", offset: 0 }),
- * style({ backgroundColor: "blue", offset: 0.2 }),
- * style({ backgroundColor: "orange", offset: 0.3 }),
- * style({ backgroundColor: "black", offset: 1 })
- * ]))
- * ```
- *
- * If there are no `offset` values specified in the style entries, the offsets
- * are calculated automatically.
- *
- * ```ts
- * animate("5s", keyframes([
- * style({ backgroundColor: "red" }) // offset = 0
- * style({ backgroundColor: "blue" }) // offset = 0.33
- * style({ backgroundColor: "orange" }) // offset = 0.66
- * style({ backgroundColor: "black" }) // offset = 1
- * ]))
- *```
- * @publicApi
- */
- function keyframes(steps) {
- return { type: AnimationMetadataType.Keyframes, steps };
- }
- /**
- * Declares an animation transition which is played when a certain specified condition is met.
- *
- * @param stateChangeExpr A string with a specific format or a function that specifies when the
- * animation transition should occur (see [State Change Expression](#state-change-expression)).
- *
- * @param steps One or more animation objects that represent the animation's instructions.
- *
- * @param options An options object that can be used to specify a delay for the animation or provide
- * custom parameters for it.
- *
- * @returns An object that encapsulates the transition data.
- *
- * @usageNotes
- *
- * ### State Change Expression
- *
- * The State Change Expression instructs Angular when to run the transition's animations, it can
- *either be
- * - a string with a specific syntax
- * - or a function that compares the previous and current state (value of the expression bound to
- * the element's trigger) and returns `true` if the transition should occur or `false` otherwise
- *
- * The string format can be:
- * - `fromState => toState`, which indicates that the transition's animations should occur then the
- * expression bound to the trigger's element goes from `fromState` to `toState`
- *
- * _Example:_
- * ```ts
- * transition('open => closed', animate('.5s ease-out', style({ height: 0 }) ))
- * ```
- *
- * - `fromState <=> toState`, which indicates that the transition's animations should occur then
- * the expression bound to the trigger's element goes from `fromState` to `toState` or vice versa
- *
- * _Example:_
- * ```ts
- * transition('enabled <=> disabled', animate('1s cubic-bezier(0.8,0.3,0,1)'))
- * ```
- *
- * - `:enter`/`:leave`, which indicates that the transition's animations should occur when the
- * element enters or exists the DOM
- *
- * _Example:_
- * ```ts
- * transition(':enter', [
- * style({ opacity: 0 }),
- * animate('500ms', style({ opacity: 1 }))
- * ])
- * ```
- *
- * - `:increment`/`:decrement`, which indicates that the transition's animations should occur when
- * the numerical expression bound to the trigger's element has increased in value or decreased
- *
- * _Example:_
- * ```ts
- * transition(':increment', query('@counter', animateChild()))
- * ```
- *
- * - a sequence of any of the above divided by commas, which indicates that transition's animations
- * should occur whenever one of the state change expressions matches
- *
- * _Example:_
- * ```ts
- * transition(':increment, * => enabled, :enter', animate('1s ease', keyframes([
- * style({ transform: 'scale(1)', offset: 0}),
- * style({ transform: 'scale(1.1)', offset: 0.7}),
- * style({ transform: 'scale(1)', offset: 1})
- * ]))),
- * ```
- *
- * Also note that in such context:
- * - `void` can be used to indicate the absence of the element
- * - asterisks can be used as wildcards that match any state
- * - (as a consequence of the above, `void => *` is equivalent to `:enter` and `* => void` is
- * equivalent to `:leave`)
- * - `true` and `false` also match expression values of `1` and `0` respectively (but do not match
- * _truthy_ and _falsy_ values)
- *
- * <div class="docs-alert docs-alert-helpful">
- *
- * Be careful about entering end leaving elements as their transitions present a common
- * pitfall for developers.
- *
- * Note that when an element with a trigger enters the DOM its `:enter` transition always
- * gets executed, but its `:leave` transition will not be executed if the element is removed
- * alongside its parent (as it will be removed "without warning" before its transition has
- * a chance to be executed, the only way that such transition can occur is if the element
- * is exiting the DOM on its own).
- *
- *
- * </div>
- *
- * ### Animating to a Final State
- *
- * If the final step in a transition is a call to `animate()` that uses a timing value
- * with no `style` data, that step is automatically considered the final animation arc,
- * for the element to reach the final state, in such case Angular automatically adds or removes
- * CSS styles to ensure that the element is in the correct final state.
- *
- *
- * ### Usage Examples
- *
- * - Transition animations applied based on
- * the trigger's expression value
- *
- * ```html
- * <div [@myAnimationTrigger]="myStatusExp">
- * ...
- * </div>
- * ```
- *
- * ```ts
- * trigger("myAnimationTrigger", [
- * ..., // states
- * transition("on => off, open => closed", animate(500)),
- * transition("* <=> error", query('.indicator', animateChild()))
- * ])
- * ```
- *
- * - Transition animations applied based on custom logic dependent
- * on the trigger's expression value and provided parameters
- *
- * ```html
- * <div [@myAnimationTrigger]="{
- * value: stepName,
- * params: { target: currentTarget }
- * }">
- * ...
- * </div>
- * ```
- *
- * ```ts
- * trigger("myAnimationTrigger", [
- * ..., // states
- * transition(
- * (fromState, toState, _element, params) =>
- * ['firststep', 'laststep'].includes(fromState.toLowerCase())
- * && toState === params?.['target'],
- * animate('1s')
- * )
- * ])
- * ```
- *
- * @publicApi
- **/
- function transition(stateChangeExpr, steps, options = null) {
- return { type: AnimationMetadataType.Transition, expr: stateChangeExpr, animation: steps, options };
- }
- /**
- * Produces a reusable animation that can be invoked in another animation or sequence,
- * by calling the `useAnimation()` function.
- *
- * @param steps One or more animation objects, as returned by the `animate()`
- * or `sequence()` function, that form a transformation from one state to another.
- * A sequence is used by default when you pass an array.
- * @param options An options object that can contain a delay value for the start of the
- * animation, and additional developer-defined parameters.
- * Provided values for additional parameters are used as defaults,
- * and override values can be passed to the caller on invocation.
- * @returns An object that encapsulates the animation data.
- *
- * @usageNotes
- * The following example defines a reusable animation, providing some default parameter
- * values.
- *
- * ```ts
- * var fadeAnimation = animation([
- * style({ opacity: '{{ start }}' }),
- * animate('{{ time }}',
- * style({ opacity: '{{ end }}'}))
- * ],
- * { params: { time: '1000ms', start: 0, end: 1 }});
- * ```
- *
- * The following invokes the defined animation with a call to `useAnimation()`,
- * passing in override parameter values.
- *
- * ```js
- * useAnimation(fadeAnimation, {
- * params: {
- * time: '2s',
- * start: 1,
- * end: 0
- * }
- * })
- * ```
- *
- * If any of the passed-in parameter values are missing from this call,
- * the default values are used. If one or more parameter values are missing before a step is
- * animated, `useAnimation()` throws an error.
- *
- * @publicApi
- */
- function animation(steps, options = null) {
- return { type: AnimationMetadataType.Reference, animation: steps, options };
- }
- /**
- * Executes a queried inner animation element within an animation sequence.
- *
- * @param options An options object that can contain a delay value for the start of the
- * animation, and additional override values for developer-defined parameters.
- * @return An object that encapsulates the child animation data.
- *
- * @usageNotes
- * Each time an animation is triggered in Angular, the parent animation
- * has priority and any child animations are blocked. In order
- * for a child animation to run, the parent animation must query each of the elements
- * containing child animations, and run them using this function.
- *
- * Note that this feature is designed to be used with `query()` and it will only work
- * with animations that are assigned using the Angular animation library. CSS keyframes
- * and transitions are not handled by this API.
- *
- * @publicApi
- */
- function animateChild(options = null) {
- return { type: AnimationMetadataType.AnimateChild, options };
- }
- /**
- * Starts a reusable animation that is created using the `animation()` function.
- *
- * @param animation The reusable animation to start.
- * @param options An options object that can contain a delay value for the start of
- * the animation, and additional override values for developer-defined parameters.
- * @return An object that contains the animation parameters.
- *
- * @publicApi
- */
- function useAnimation(animation, options = null) {
- return { type: AnimationMetadataType.AnimateRef, animation, options };
- }
- /**
- * Finds one or more inner elements within the current element that is
- * being animated within a sequence. Use with `animate()`.
- *
- * @param selector The element to query, or a set of elements that contain Angular-specific
- * characteristics, specified with one or more of the following tokens.
- * - `query(":enter")` or `query(":leave")` : Query for newly inserted/removed elements (not
- * all elements can be queried via these tokens, see
- * [Entering and Leaving Elements](#entering-and-leaving-elements))
- * - `query(":animating")` : Query all currently animating elements.
- * - `query("@triggerName")` : Query elements that contain an animation trigger.
- * - `query("@*")` : Query all elements that contain an animation triggers.
- * - `query(":self")` : Include the current element into the animation sequence.
- *
- * @param animation One or more animation steps to apply to the queried element or elements.
- * An array is treated as an animation sequence.
- * @param options An options object. Use the 'limit' field to limit the total number of
- * items to collect.
- * @return An object that encapsulates the query data.
- *
- * @usageNotes
- *
- * ### Multiple Tokens
- *
- * Tokens can be merged into a combined query selector string. For example:
- *
- * ```ts
- * query(':self, .record:enter, .record:leave, @subTrigger', [...])
- * ```
- *
- * The `query()` function collects multiple elements and works internally by using
- * `element.querySelectorAll`. Use the `limit` field of an options object to limit
- * the total number of items to be collected. For example:
- *
- * ```js
- * query('div', [
- * animate(...),
- * animate(...)
- * ], { limit: 1 })
- * ```
- *
- * By default, throws an error when zero items are found. Set the
- * `optional` flag to ignore this error. For example:
- *
- * ```js
- * query('.some-element-that-may-not-be-there', [
- * animate(...),
- * animate(...)
- * ], { optional: true })
- * ```
- *
- * ### Entering and Leaving Elements
- *
- * Not all elements can be queried via the `:enter` and `:leave` tokens, the only ones
- * that can are those that Angular assumes can enter/leave based on their own logic
- * (if their insertion/removal is simply a consequence of that of their parent they
- * should be queried via a different token in their parent's `:enter`/`:leave` transitions).
- *
- * The only elements Angular assumes can enter/leave based on their own logic (thus the only
- * ones that can be queried via the `:enter` and `:leave` tokens) are:
- * - Those inserted dynamically (via `ViewContainerRef`)
- * - Those that have a structural directive (which, under the hood, are a subset of the above ones)
- *
- * <div class="docs-alert docs-alert-helpful">
- *
- * Note that elements will be successfully queried via `:enter`/`:leave` even if their
- * insertion/removal is not done manually via `ViewContainerRef`or caused by their structural
- * directive (e.g. they enter/exit alongside their parent).
- *
- * </div>
- *
- * <div class="docs-alert docs-alert-important">
- *
- * There is an exception to what previously mentioned, besides elements entering/leaving based on
- * their own logic, elements with an animation trigger can always be queried via `:leave` when
- * their parent is also leaving.
- *
- * </div>
- *
- * ### Usage Example
- *
- * The following example queries for inner elements and animates them
- * individually using `animate()`.
- *
- * ```angular-ts
- * @Component({
- * selector: 'inner',
- * template: `
- * <div [@queryAnimation]="exp">
- * <h1>Title</h1>
- * <div class="content">
- * Blah blah blah
- * </div>
- * </div>
- * `,
- * animations: [
- * trigger('queryAnimation', [
- * transition('* => goAnimate', [
- * // hide the inner elements
- * query('h1', style({ opacity: 0 })),
- * query('.content', style({ opacity: 0 })),
- *
- * // animate the inner elements in, one by one
- * query('h1', animate(1000, style({ opacity: 1 }))),
- * query('.content', animate(1000, style({ opacity: 1 }))),
- * ])
- * ])
- * ]
- * })
- * class Cmp {
- * exp = '';
- *
- * goAnimate() {
- * this.exp = 'goAnimate';
- * }
- * }
- * ```
- *
- * @publicApi
- */
- function query(selector, animation, options = null) {
- return { type: AnimationMetadataType.Query, selector, animation, options };
- }
- /**
- * Use within an animation `query()` call to issue a timing gap after
- * each queried item is animated.
- *
- * @param timings A delay value.
- * @param animation One ore more animation steps.
- * @returns An object that encapsulates the stagger data.
- *
- * @usageNotes
- * In the following example, a container element wraps a list of items stamped out
- * by an `ngFor`. The container element contains an animation trigger that will later be set
- * to query for each of the inner items.
- *
- * Each time items are added, the opacity fade-in animation runs,
- * and each removed item is faded out.
- * When either of these animations occur, the stagger effect is
- * applied after each item's animation is started.
- *
- * ```html
- * <!-- list.component.html -->
- * <button (click)="toggle()">Show / Hide Items</button>
- * <hr />
- * <div [@listAnimation]="items.length">
- * <div *ngFor="let item of items">
- * {{ item }}
- * </div>
- * </div>
- * ```
- *
- * Here is the component code:
- *
- * ```ts
- * import {trigger, transition, style, animate, query, stagger} from '@angular/animations';
- * @Component({
- * templateUrl: 'list.component.html',
- * animations: [
- * trigger('listAnimation', [
- * ...
- * ])
- * ]
- * })
- * class ListComponent {
- * items = [];
- *
- * showItems() {
- * this.items = [0,1,2,3,4];
- * }
- *
- * hideItems() {
- * this.items = [];
- * }
- *
- * toggle() {
- * this.items.length ? this.hideItems() : this.showItems();
- * }
- * }
- * ```
- *
- * Here is the animation trigger code:
- *
- * ```ts
- * trigger('listAnimation', [
- * transition('* => *', [ // each time the binding value changes
- * query(':leave', [
- * stagger(100, [
- * animate('0.5s', style({ opacity: 0 }))
- * ])
- * ]),
- * query(':enter', [
- * style({ opacity: 0 }),
- * stagger(100, [
- * animate('0.5s', style({ opacity: 1 }))
- * ])
- * ])
- * ])
- * ])
- * ```
- *
- * @publicApi
- */
- function stagger(timings, animation) {
- return { type: AnimationMetadataType.Stagger, timings, animation };
- }
- /**
- * An empty programmatic controller for reusable animations.
- * Used internally when animations are disabled, to avoid
- * checking for the null case when an animation player is expected.
- *
- * @see {@link animate}
- * @see {@link AnimationPlayer}
- *
- * @publicApi
- */
- class NoopAnimationPlayer {
- _onDoneFns = [];
- _onStartFns = [];
- _onDestroyFns = [];
- _originalOnDoneFns = [];
- _originalOnStartFns = [];
- _started = false;
- _destroyed = false;
- _finished = false;
- _position = 0;
- parentPlayer = null;
- totalTime;
- constructor(duration = 0, delay = 0) {
- this.totalTime = duration + delay;
- }
- _onFinish() {
- if (!this._finished) {
- this._finished = true;
- this._onDoneFns.forEach((fn) => fn());
- this._onDoneFns = [];
- }
- }
- onStart(fn) {
- this._originalOnStartFns.push(fn);
- this._onStartFns.push(fn);
- }
- onDone(fn) {
- this._originalOnDoneFns.push(fn);
- this._onDoneFns.push(fn);
- }
- onDestroy(fn) {
- this._onDestroyFns.push(fn);
- }
- hasStarted() {
- return this._started;
- }
- init() { }
- play() {
- if (!this.hasStarted()) {
- this._onStart();
- this.triggerMicrotask();
- }
- this._started = true;
- }
- /** @internal */
- triggerMicrotask() {
- queueMicrotask(() => this._onFinish());
- }
- _onStart() {
- this._onStartFns.forEach((fn) => fn());
- this._onStartFns = [];
- }
- pause() { }
- restart() { }
- finish() {
- this._onFinish();
- }
- destroy() {
- if (!this._destroyed) {
- this._destroyed = true;
- if (!this.hasStarted()) {
- this._onStart();
- }
- this.finish();
- this._onDestroyFns.forEach((fn) => fn());
- this._onDestroyFns = [];
- }
- }
- reset() {
- this._started = false;
- this._finished = false;
- this._onStartFns = this._originalOnStartFns;
- this._onDoneFns = this._originalOnDoneFns;
- }
- setPosition(position) {
- this._position = this.totalTime ? position * this.totalTime : 1;
- }
- getPosition() {
- return this.totalTime ? this._position / this.totalTime : 1;
- }
- /** @internal */
- triggerCallback(phaseName) {
- const methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns;
- methods.forEach((fn) => fn());
- methods.length = 0;
- }
- }
- /**
- * A programmatic controller for a group of reusable animations.
- * Used internally to control animations.
- *
- * @see {@link AnimationPlayer}
- * @see {@link animations/group group}
- *
- */
- class AnimationGroupPlayer {
- _onDoneFns = [];
- _onStartFns = [];
- _finished = false;
- _started = false;
- _destroyed = false;
- _onDestroyFns = [];
- parentPlayer = null;
- totalTime = 0;
- players;
- constructor(_players) {
- this.players = _players;
- let doneCount = 0;
- let destroyCount = 0;
- let startCount = 0;
- const total = this.players.length;
- if (total == 0) {
- queueMicrotask(() => this._onFinish());
- }
- else {
- this.players.forEach((player) => {
- player.onDone(() => {
- if (++doneCount == total) {
- this._onFinish();
- }
- });
- player.onDestroy(() => {
- if (++destroyCount == total) {
- this._onDestroy();
- }
- });
- player.onStart(() => {
- if (++startCount == total) {
- this._onStart();
- }
- });
- });
- }
- this.totalTime = this.players.reduce((time, player) => Math.max(time, player.totalTime), 0);
- }
- _onFinish() {
- if (!this._finished) {
- this._finished = true;
- this._onDoneFns.forEach((fn) => fn());
- this._onDoneFns = [];
- }
- }
- init() {
- this.players.forEach((player) => player.init());
- }
- onStart(fn) {
- this._onStartFns.push(fn);
- }
- _onStart() {
- if (!this.hasStarted()) {
- this._started = true;
- this._onStartFns.forEach((fn) => fn());
- this._onStartFns = [];
- }
- }
- onDone(fn) {
- this._onDoneFns.push(fn);
- }
- onDestroy(fn) {
- this._onDestroyFns.push(fn);
- }
- hasStarted() {
- return this._started;
- }
- play() {
- if (!this.parentPlayer) {
- this.init();
- }
- this._onStart();
- this.players.forEach((player) => player.play());
- }
- pause() {
- this.players.forEach((player) => player.pause());
- }
- restart() {
- this.players.forEach((player) => player.restart());
- }
- finish() {
- this._onFinish();
- this.players.forEach((player) => player.finish());
- }
- destroy() {
- this._onDestroy();
- }
- _onDestroy() {
- if (!this._destroyed) {
- this._destroyed = true;
- this._onFinish();
- this.players.forEach((player) => player.destroy());
- this._onDestroyFns.forEach((fn) => fn());
- this._onDestroyFns = [];
- }
- }
- reset() {
- this.players.forEach((player) => player.reset());
- this._destroyed = false;
- this._finished = false;
- this._started = false;
- }
- setPosition(p) {
- const timeAtPosition = p * this.totalTime;
- this.players.forEach((player) => {
- const position = player.totalTime ? Math.min(1, timeAtPosition / player.totalTime) : 1;
- player.setPosition(position);
- });
- }
- getPosition() {
- const longestPlayer = this.players.reduce((longestSoFar, player) => {
- const newPlayerIsLongest = longestSoFar === null || player.totalTime > longestSoFar.totalTime;
- return newPlayerIsLongest ? player : longestSoFar;
- }, null);
- return longestPlayer != null ? longestPlayer.getPosition() : 0;
- }
- beforeDestroy() {
- this.players.forEach((player) => {
- if (player.beforeDestroy) {
- player.beforeDestroy();
- }
- });
- }
- /** @internal */
- triggerCallback(phaseName) {
- const methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns;
- methods.forEach((fn) => fn());
- methods.length = 0;
- }
- }
- const ɵPRE_STYLE = '!';
- export { AUTO_STYLE, AnimationGroupPlayer, AnimationMetadataType, NoopAnimationPlayer, animate, animateChild, animation, group, keyframes, query, sequence, stagger, state, style, transition, trigger, useAnimation, ɵPRE_STYLE };
- //# sourceMappingURL=private_export-faY_wCkZ.mjs.map
|