@angular/animations 17.0.0-next.8 → 17.0.0-rc.0

package/fesm2022/animations.mjs

@@ -1,66 +1,12 @@
 /**
- * @license Angular v17.0.0-next.8
+ * @license Angular v17.0.0-rc.0
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
 
-/**
- * An injectable service that produces an animation sequence programmatically within an
- * Angular component or directive.
- * Provided by the `BrowserAnimationsModule` or `NoopAnimationsModule`.
- *
- * @usageNotes
- *
- * To use this service, add it to your component or directive as a dependency.
- * The service is instantiated along with your component.
- *
- * Apps do not typically need to create their own animation players, but if you
- * do need to, follow these steps:
- *
- * 1. Use the <code>[AnimationBuilder.build](api/animations/AnimationBuilder#build)()</code> method
- * to create a programmatic animation. The method returns an `AnimationFactory` instance.
- *
- * 2. Use the factory object to create an `AnimationPlayer` and attach it to a DOM element.
- *
- * 3. Use the player object to control the animation programmatically.
- *
- * For example:
- *
- * ```ts
- * // import the service from BrowserAnimationsModule
- * import {AnimationBuilder} from '@angular/animations';
- * // require the service as a dependency
- * class MyCmp {
- *   constructor(private _builder: AnimationBuilder) {}
- *
- *   makeAnimation(element: any) {
- *     // first define a reusable animation
- *     const myAnimation = this._builder.build([
- *       style({ width: 0 }),
- *       animate(1000, style({ width: '100px' }))
- *     ]);
- *
- *     // use the returned factory object to create a player
- *     const player = myAnimation.create(element);
- *
- *     player.play();
- *   }
- * }
- * ```
- *
- * @publicApi
- */
-class AnimationBuilder {
-}
-/**
- * A factory object returned from the
- * <code>[AnimationBuilder.build](api/animations/AnimationBuilder#build)()</code>
- * method.
- *
- * @publicApi
- */
-class AnimationFactory {
-}
+import { DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, Injectable, ANIMATION_MODULE_TYPE, ViewEncapsulation, ɵRuntimeError, Inject } from '@angular/core';
 
 /**
  * Specifies automatic styling.
@@ -913,6 +859,195 @@ function stagger(timings, animation) {
     return { type: 12 /* AnimationMetadataType.Stagger */, timings, animation };
 }
 
+/**
+ * An injectable service that produces an animation sequence programmatically within an
+ * Angular component or directive.
+ * Provided by the `BrowserAnimationsModule` or `NoopAnimationsModule`.
+ *
+ * @usageNotes
+ *
+ * To use this service, add it to your component or directive as a dependency.
+ * The service is instantiated along with your component.
+ *
+ * Apps do not typically need to create their own animation players, but if you
+ * do need to, follow these steps:
+ *
+ * 1. Use the <code>[AnimationBuilder.build](api/animations/AnimationBuilder#build)()</code> method
+ * to create a programmatic animation. The method returns an `AnimationFactory` instance.
+ *
+ * 2. Use the factory object to create an `AnimationPlayer` and attach it to a DOM element.
+ *
+ * 3. Use the player object to control the animation programmatically.
+ *
+ * For example:
+ *
+ * ```ts
+ * // import the service from BrowserAnimationsModule
+ * import {AnimationBuilder} from '@angular/animations';
+ * // require the service as a dependency
+ * class MyCmp {
+ *   constructor(private _builder: AnimationBuilder) {}
+ *
+ *   makeAnimation(element: any) {
+ *     // first define a reusable animation
+ *     const myAnimation = this._builder.build([
+ *       style({ width: 0 }),
+ *       animate(1000, style({ width: '100px' }))
+ *     ]);
+ *
+ *     // use the returned factory object to create a player
+ *     const player = myAnimation.create(element);
+ *
+ *     player.play();
+ *   }
+ * }
+ * ```
+ *
+ * @publicApi
+ */
+class AnimationBuilder {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: AnimationBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: AnimationBuilder, providedIn: 'root', useFactory: () => inject(BrowserAnimationBuilder) }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: AnimationBuilder, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root', useFactory: () => inject(BrowserAnimationBuilder) }]
+        }] });
+/**
+ * A factory object returned from the
+ * <code>[AnimationBuilder.build](api/animations/AnimationBuilder#build)()</code>
+ * method.
+ *
+ * @publicApi
+ */
+class AnimationFactory {
+}
+class BrowserAnimationBuilder extends AnimationBuilder {
+    constructor(rootRenderer, doc) {
+        super();
+        this.animationModuleType = inject(ANIMATION_MODULE_TYPE, { optional: true });
+        this._nextAnimationId = 0;
+        const typeData = {
+            id: '0',
+            encapsulation: ViewEncapsulation.None,
+            styles: [],
+            data: { animation: [] },
+        };
+        this._renderer = rootRenderer.createRenderer(doc.body, typeData);
+        if (this.animationModuleType === null && !isAnimationRenderer(this._renderer)) {
+            // We only support AnimationRenderer & DynamicDelegationRenderer for this AnimationBuilder
+            throw new ɵRuntimeError(3600 /* RuntimeErrorCode.BROWSER_ANIMATION_BUILDER_INJECTED_WITHOUT_ANIMATIONS */, (typeof ngDevMode === 'undefined' || ngDevMode) &&
+                'Angular detected that the `AnimationBuilder` was injected, but animation support was not enabled. ' +
+                    'Please make sure that you enable animations in your application by calling `provideAnimations()` or `provideAnimationsAsync()` function.');
+        }
+    }
+    build(animation) {
+        const id = this._nextAnimationId;
+        this._nextAnimationId++;
+        const entry = Array.isArray(animation) ? sequence(animation) : animation;
+        issueAnimationCommand(this._renderer, null, id, 'register', [entry]);
+        return new BrowserAnimationFactory(id, this._renderer);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: BrowserAnimationBuilder, deps: [{ token: i0.RendererFactory2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: BrowserAnimationBuilder, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: BrowserAnimationBuilder, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.RendererFactory2 }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }] });
+class BrowserAnimationFactory extends AnimationFactory {
+    constructor(_id, _renderer) {
+        super();
+        this._id = _id;
+        this._renderer = _renderer;
+    }
+    create(element, options) {
+        return new RendererAnimationPlayer(this._id, element, options || {}, this._renderer);
+    }
+}
+class RendererAnimationPlayer {
+    constructor(id, element, options, _renderer) {
+        this.id = id;
+        this.element = element;
+        this._renderer = _renderer;
+        this.parentPlayer = null;
+        this._started = false;
+        this.totalTime = 0;
+        this._command('create', options);
+    }
+    _listen(eventName, callback) {
+        return this._renderer.listen(this.element, `@@${this.id}:${eventName}`, callback);
+    }
+    _command(command, ...args) {
+        issueAnimationCommand(this._renderer, this.element, this.id, command, args);
+    }
+    onDone(fn) {
+        this._listen('done', fn);
+    }
+    onStart(fn) {
+        this._listen('start', fn);
+    }
+    onDestroy(fn) {
+        this._listen('destroy', fn);
+    }
+    init() {
+        this._command('init');
+    }
+    hasStarted() {
+        return this._started;
+    }
+    play() {
+        this._command('play');
+        this._started = true;
+    }
+    pause() {
+        this._command('pause');
+    }
+    restart() {
+        this._command('restart');
+    }
+    finish() {
+        this._command('finish');
+    }
+    destroy() {
+        this._command('destroy');
+    }
+    reset() {
+        this._command('reset');
+        this._started = false;
+    }
+    setPosition(p) {
+        this._command('setPosition', p);
+    }
+    getPosition() {
+        return unwrapAnimationRenderer(this._renderer)?.engine?.players[this.id]?.getPosition() ?? 0;
+    }
+}
+function issueAnimationCommand(renderer, element, id, command, args) {
+    renderer.setProperty(element, `@@${id}:${command}`, args);
+}
+/**
+ * The following 2 methods cannot reference their correct types (AnimationRenderer &
+ * DynamicDelegationRenderer) since this would introduce a import cycle.
+ */
+function unwrapAnimationRenderer(renderer) {
+    const type = renderer.ɵtype;
+    if (type === 0 /* AnimationRendererType.Regular */) {
+        return renderer;
+    }
+    else if (type === 1 /* AnimationRendererType.Delegated */) {
+        return renderer.animationRenderer;
+    }
+    return null;
+}
+function isAnimationRenderer(renderer) {
+    const type = renderer.ɵtype;
+    return type === 0 /* AnimationRendererType.Regular */ || type === 1 /* AnimationRendererType.Delegated */;
+}
+
 /**
  * An empty programmatic controller for reusable animations.
  * Used internally when animations are disabled, to avoid
@@ -1171,5 +1306,5 @@ const ɵPRE_STYLE = '!';
  * Generated bundle index. Do not edit.
  */
 
-export { AUTO_STYLE, AnimationBuilder, AnimationFactory, NoopAnimationPlayer, animate, animateChild, animation, group, keyframes, query, sequence, stagger, state, style, transition, trigger, useAnimation, AnimationGroupPlayer as ɵAnimationGroupPlayer, ɵPRE_STYLE };
+export { AUTO_STYLE, AnimationBuilder, AnimationFactory, NoopAnimationPlayer, animate, animateChild, animation, group, keyframes, query, sequence, stagger, state, style, transition, trigger, useAnimation, AnimationGroupPlayer as ɵAnimationGroupPlayer, BrowserAnimationBuilder as ɵBrowserAnimationBuilder, ɵPRE_STYLE };
 //# sourceMappingURL=animations.mjs.map