angular-movement 0.0.2 → 0.1.0

package/fesm2022/angular-movement.mjs

@@ -1,6 +1,6 @@
 import { isPlatformBrowser, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, PLATFORM_ID, Injectable, input, ElementRef, computed, effect, forwardRef, Directive, afterEveryRender, NgZone, signal, ViewContainerRef, TemplateRef, makeEnvironmentProviders } from '@angular/core';
+import { InjectionToken, inject, PLATFORM_ID, Injectable, input, ElementRef, computed, effect, forwardRef, Directive, afterEveryRender, NgZone, signal, ViewContainerRef, TemplateRef, Renderer2, makeEnvironmentProviders } from '@angular/core';
 
 const MOVEMENT_DEFAULTS = {
     duration: 300,
@@ -241,6 +241,75 @@ const MOVE_PRESETS = {
         leave: { scale: [1, 0.95, 1] },
         loop: { scale: [1, 1.05, 1] },
     },
+    shake: {
+        enter: { opacity: DEFAULT_FADE_OPACITY, x: [0, -10, 10, -10, 10, -5, 5, -5, 5, 0] },
+        leave: { opacity: DEFAULT_LEAVE_OPACITY, x: [0, 10, -10, 10, -10, 5, -5, 5, -5, 0] },
+    },
+    swing: {
+        enter: { opacity: DEFAULT_FADE_OPACITY, rotate: [0, 15, -10, 5, -5, 0] },
+        leave: { opacity: DEFAULT_LEAVE_OPACITY, rotate: [0, -15, 10, -5, 5, 0] },
+    },
+    wobble: {
+        enter: {
+            opacity: DEFAULT_FADE_OPACITY,
+            x: [0, -25, 20, -15, 10, -5, 0],
+            rotate: [0, -5, 3, -3, 2, -1, 0],
+        },
+        leave: {
+            opacity: DEFAULT_LEAVE_OPACITY,
+            x: [0, 25, -20, 15, -10, 5, 0],
+            rotate: [0, 5, -3, 3, -2, 1, 0],
+        },
+    },
+    'rubber-band': {
+        enter: {
+            opacity: DEFAULT_FADE_OPACITY,
+            scaleX: [1, 1.25, 0.75, 1.15, 0.95, 1.05, 1],
+            scaleY: [1, 0.75, 1.25, 0.85, 1.05, 0.95, 1],
+        },
+        leave: {
+            opacity: DEFAULT_LEAVE_OPACITY,
+            scaleX: [1, 1.25, 0.75, 1.15, 0.95, 1.05, 1],
+            scaleY: [1, 0.75, 1.25, 0.85, 1.05, 0.95, 1],
+        },
+    },
+    'heart-beat': {
+        enter: { opacity: DEFAULT_FADE_OPACITY, scale: [1, 1.3, 1, 1.3, 1] },
+        leave: { opacity: DEFAULT_LEAVE_OPACITY, scale: [1, 1.3, 1, 1.3, 1] },
+        loop: { scale: [1, 1.3, 1, 1.3, 1] },
+    },
+    tada: {
+        enter: {
+            opacity: DEFAULT_FADE_OPACITY,
+            scale: [1, 0.9, 1.1, 1.1, 1.1, 1],
+            rotate: [0, -3, 3, -3, 3, 0],
+        },
+        leave: {
+            opacity: DEFAULT_LEAVE_OPACITY,
+            scale: [1, 0.9, 1.1, 1.1, 1.1, 1],
+            rotate: [0, 3, -3, 3, -3, 0],
+        },
+    },
+    jello: {
+        enter: {
+            opacity: DEFAULT_FADE_OPACITY,
+            scaleX: [1, 1.25, 0.75, 1.15, 0.95, 1.05, 1],
+            scaleY: [1, 0.75, 1.25, 0.85, 1.05, 0.95, 1],
+        },
+        leave: {
+            opacity: DEFAULT_LEAVE_OPACITY,
+            scaleX: [1, 1.25, 0.75, 1.15, 0.95, 1.05, 1],
+            scaleY: [1, 0.75, 1.25, 0.85, 1.05, 0.95, 1],
+        },
+    },
+    'light-speed': {
+        enter: { opacity: [0, 1], x: [200, 0], scaleX: [0, 1] },
+        leave: { opacity: [1, 0], x: [0, 200], scaleX: [1, 0] },
+    },
+    'roll-in': {
+        enter: { opacity: [0, 1], x: [-100, 0], rotate: [-120, 0] },
+        leave: { opacity: [1, 0], x: [0, 100], rotate: [0, 120] },
+    },
     none: {
         enter: { opacity: [1, 1] },
         leave: { opacity: [1, 1] },
@@ -310,6 +379,63 @@ function applyInitialStyles(el, frames) {
 function clearInitialStyles(el) {
     clearComposedStyle(el);
 }
+/**
+ * Validates MoveSpring configuration and returns sanitized values.
+ * Warns in development mode for invalid values.
+ */
+function validateSpring(spring) {
+    if (!spring)
+        return undefined;
+    const validated = {};
+    if (spring.stiffness !== undefined) {
+        if (spring.stiffness <= 0 && typeof ngDevMode !== 'undefined' && ngDevMode) {
+            console.warn('[Movement] Spring stiffness must be > 0. Using default.');
+        }
+        validated.stiffness = spring.stiffness > 0 ? spring.stiffness : 100;
+    }
+    if (spring.damping !== undefined) {
+        if (spring.damping < 0 && typeof ngDevMode !== 'undefined' && ngDevMode) {
+            console.warn('[Movement] Spring damping must be >= 0. Using default.');
+        }
+        validated.damping = spring.damping >= 0 ? spring.damping : 10;
+    }
+    if (spring.mass !== undefined) {
+        if (spring.mass <= 0 && typeof ngDevMode !== 'undefined' && ngDevMode) {
+            console.warn('[Movement] Spring mass must be > 0. Using default.');
+        }
+        validated.mass = spring.mass > 0 ? spring.mass : 1;
+    }
+    if (spring.velocity !== undefined) {
+        validated.velocity = spring.velocity;
+    }
+    return validated;
+}
+/**
+ * Validates scroll offset string format "elFraction viewFraction".
+ * Returns true if valid, warns in dev mode if invalid.
+ */
+function isValidScrollOffset(offset) {
+    const parts = offset.split(' ').map(parseFloat);
+    if (parts.length !== 2 || parts.some(Number.isNaN)) {
+        if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+            console.warn(`[Movement] Invalid scroll offset: "${offset}". Expected format "elFraction viewFraction" (e.g. "0 1").`);
+        }
+        return false;
+    }
+    return true;
+}
+/**
+ * Validates drag elastic factor. Must be between 0 and 1.
+ */
+function validateDragElastic(elastic) {
+    if (elastic < 0 || elastic > 1) {
+        if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+            console.warn(`[Movement] Drag elastic must be between 0 and 1. Got ${elastic}. Clamping to range.`);
+        }
+        return Math.max(0, Math.min(1, elastic));
+    }
+    return elastic;
+}
 
 class WaapiPlayer {
     #animation = null;
@@ -521,15 +647,18 @@ class AnimationEngine {
             return null;
         }
         if (options.disabled) {
+            this.#prepareSvgStrokeDraw(host, frames);
             this.#applyFinalStyles(host, frames);
             options.onDone?.();
             return null;
         }
+        this.#prepareSvgStrokeDraw(host, frames);
         const config = options.config ?? this.#defaults;
-        const isSpring = options.spring || config.easing === 'spring';
+        const spring = validateSpring(options.spring);
+        const isSpring = spring || config.easing === 'spring';
         const iterations = options.iterations ?? config.iterations;
         if (isSpring) {
-            return new SpringPlayer(host, frames, options.spring ?? {}, options.delay ?? config.delay, iterations, options.onDone);
+            return new SpringPlayer(host, frames, spring ?? {}, options.delay ?? config.delay, iterations, options.onDone);
         }
         else {
             return new WaapiPlayer(host, frames, {
@@ -544,6 +673,29 @@ class AnimationEngine {
     #applyFinalStyles(host, frames) {
         applyComposedStyle(host, composeFinalStyle(frames));
     }
+    #prepareSvgStrokeDraw(host, frames) {
+        if (!frames['strokeDashoffset'] || !this.#isSvgGeometryElement(host)) {
+            return;
+        }
+        let length = 28;
+        try {
+            length = host.getTotalLength() || length;
+        }
+        catch {
+            length = 28;
+        }
+        const styledHost = host;
+        styledHost.style.strokeDasharray = `${length}`;
+        styledHost.style.strokeDashoffset = `${length}`;
+    }
+    #isSvgGeometryElement(host) {
+        const view = host.ownerDocument?.defaultView;
+        const SvgGeometryElement = view?.SVGGeometryElement;
+        if (typeof SvgGeometryElement === 'function' && host instanceof SvgGeometryElement) {
+            return true;
+        }
+        return typeof host.getTotalLength === 'function';
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: AnimationEngine, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: AnimationEngine, providedIn: 'root' });
 }
@@ -1035,9 +1187,14 @@ class MoveStaggerDirective {
         if (!this.#children.has(el))
             return 0;
         const list = Array.from(this.#children).sort((a, b) => {
-            // Unreliable on detached elements, but they are in DOM when sorting
+            if (a === b)
+                return 0;
             const pos = a.compareDocumentPosition(b);
-            return pos & Node.DOCUMENT_POSITION_PRECEDING ? 1 : -1;
+            if (pos & Node.DOCUMENT_POSITION_PRECEDING)
+                return 1;
+            if (pos & Node.DOCUMENT_POSITION_FOLLOWING)
+                return -1;
+            return 0;
         });
         const index = list.indexOf(el);
         if (index === -1)
@@ -1416,6 +1573,11 @@ class MoveScrollDirective {
             const view = this.#documentRef.defaultView;
             if (!view)
                 return;
+            // Validate scroll offsets
+            const offsets = this.moveScrollOffset();
+            if (!isValidScrollOffset(offsets[0]) || !isValidScrollOffset(offsets[1])) {
+                return;
+            }
             this.#player = this.#engine.play(this.#host.nativeElement, keyframes, {
                 config: { duration: 1000, easing: 'linear', delay: 0, disabled: false, iterations: 1 },
             });
@@ -1658,7 +1820,9 @@ class MoveDragDirective {
             return;
         this.#isDragging = true;
         this.#pointerId = e.pointerId;
-        this.#host.nativeElement.setPointerCapture(e.pointerId);
+        if (typeof this.#host.nativeElement.setPointerCapture === 'function') {
+            this.#host.nativeElement.setPointerCapture(e.pointerId);
+        }
         this.#player?.cancel();
         // read bounds cleanly before next render
         this.#dragBounds = this.resolveBounds();
@@ -1679,7 +1843,9 @@ class MoveDragDirective {
         if (!this.#isDragging || e.pointerId !== this.#pointerId)
             return;
         this.#isDragging = false;
-        this.#host.nativeElement.releasePointerCapture(e.pointerId);
+        if (typeof this.#host.nativeElement.releasePointerCapture === 'function') {
+            this.#host.nativeElement.releasePointerCapture(e.pointerId);
+        }
         this.#pointerId = null;
         this.#host.nativeElement.style.touchAction = '';
         this.#host.nativeElement.style.userSelect = '';
@@ -1708,7 +1874,7 @@ class MoveDragDirective {
         let x = this.#_x;
         let y = this.#_y;
         if (this.#dragBounds) {
-            const elastic = this.moveDragElastic();
+            const elastic = validateDragElastic(this.moveDragElastic());
             if (this.#dragBounds.left !== undefined && x < this.#dragBounds.left) {
                 x = this.#dragBounds.left - (this.#dragBounds.left - x) * elastic;
             }
@@ -1742,7 +1908,7 @@ class MoveDragDirective {
             // Find the currently visible coordinates (which include elasticity)
             let currentVisX = this.#_x;
             let currentVisY = this.#_y;
-            const elastic = this.moveDragElastic();
+            const elastic = validateDragElastic(this.moveDragElastic());
             if (this.#dragBounds.left !== undefined && this.#_x < this.#dragBounds.left) {
                 currentVisX = this.#dragBounds.left - (this.#dragBounds.left - this.#_x) * elastic;
             }
@@ -1768,6 +1934,19 @@ class MoveDragDirective {
         }
     }
     ngOnDestroy() {
+        if (this.#pointerId !== null) {
+            try {
+                if (typeof this.#host.nativeElement.releasePointerCapture === 'function') {
+                    this.#host.nativeElement.releasePointerCapture(this.#pointerId);
+                }
+            }
+            catch {
+                // Element may already be detached
+            }
+            this.#pointerId = null;
+        }
+        this.#host.nativeElement.style.touchAction = '';
+        this.#host.nativeElement.style.userSelect = '';
         this.#player?.cancel();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -1888,6 +2067,7 @@ class MoveTextDirective {
     #platformId = inject(PLATFORM_ID);
     #host = inject((ElementRef));
     #engine = inject(AnimationEngine);
+    #renderer = inject(Renderer2);
     #players = [];
     #spans = [];
     #observer = null;
@@ -1948,21 +2128,24 @@ class MoveTextDirective {
     #splitText() {
         const el = this.#host.nativeElement;
         const text = (el.textContent ?? '').trim();
-        el.innerHTML = '';
-        el.setAttribute('aria-label', text);
+        // Clear existing content safely via Renderer2
+        while (el.firstChild) {
+            this.#renderer.removeChild(el, el.firstChild);
+        }
+        this.#renderer.setAttribute(el, 'aria-label', text);
         const byChars = this.moveTextSplit() === 'chars';
         if (byChars) {
             // Split character by character, preserving spaces as text nodes
             [...text].forEach((char) => {
                 if (char === ' ') {
-                    el.appendChild(this.#documentRef.createTextNode(' '));
+                    this.#renderer.appendChild(el, this.#documentRef.createTextNode(' '));
                     return;
                 }
-                const span = this.#documentRef.createElement('span');
-                span.setAttribute('aria-hidden', 'true');
-                span.style.display = 'inline-block';
-                span.textContent = char;
-                el.appendChild(span);
+                const span = this.#renderer.createElement('span');
+                this.#renderer.setAttribute(span, 'aria-hidden', 'true');
+                this.#renderer.setStyle(span, 'display', 'inline-block');
+                this.#renderer.setProperty(span, 'textContent', char);
+                this.#renderer.appendChild(el, span);
                 this.#spans.push(span);
             });
         }
@@ -1970,12 +2153,12 @@ class MoveTextDirective {
             // Split word by word
             const words = text.split(/\s+/);
             words.forEach((word, index) => {
-                const span = this.#documentRef.createElement('span');
-                span.setAttribute('aria-hidden', 'true');
-                span.style.display = 'inline-block';
-                span.style.whiteSpace = 'pre';
-                span.textContent = index < words.length - 1 ? word + ' ' : word;
-                el.appendChild(span);
+                const span = this.#renderer.createElement('span');
+                this.#renderer.setAttribute(span, 'aria-hidden', 'true');
+                this.#renderer.setStyle(span, 'display', 'inline-block');
+                this.#renderer.setStyle(span, 'white-space', 'pre');
+                this.#renderer.setProperty(span, 'textContent', index < words.length - 1 ? word + ' ' : word);
+                this.#renderer.appendChild(el, span);
                 this.#spans.push(span);
             });
         }
@@ -1983,6 +2166,8 @@ class MoveTextDirective {
     ngOnDestroy() {
         this.#observer?.disconnect();
         this.#players.forEach((p) => p.cancel());
+        this.#players = [];
+        this.#spans = [];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveTextDirective, isStandalone: true, selector: "[moveText]", inputs: { moveText: { classPropertyName: "moveText", publicName: "moveText", isSignal: true, isRequired: false, transformFunction: null }, moveTextSplit: { classPropertyName: "moveTextSplit", publicName: "moveTextSplit", isSignal: true, isRequired: false, transformFunction: null }, moveTextStagger: { classPropertyName: "moveTextStagger", publicName: "moveTextStagger", isSignal: true, isRequired: false, transformFunction: null }, moveDuration: { classPropertyName: "moveDuration", publicName: "moveDuration", isSignal: true, isRequired: false, transformFunction: null }, moveEasing: { classPropertyName: "moveEasing", publicName: "moveEasing", isSignal: true, isRequired: false, transformFunction: null }, moveDelay: { classPropertyName: "moveDelay", publicName: "moveDelay", isSignal: true, isRequired: false, transformFunction: null }, moveDisabled: { classPropertyName: "moveDisabled", publicName: "moveDisabled", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
@@ -2270,6 +2455,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                 }]
         }], propDecorators: { moveLoop: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveLoop", required: false }] }], moveDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDuration", required: false }] }], moveEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveEasing", required: false }] }], moveDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDelay", required: false }] }], moveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDisabled", required: false }] }], moveSpring: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveSpring", required: false }] }] } });
 
+function optionalNumberAttribute(value) {
+    if (value === undefined || value === null || value === '') {
+        return undefined;
+    }
+    return Number(value);
+}
+class MoveTargetDirective {
+    moveTarget = input.required(...(ngDevMode ? [{ debugName: "moveTarget" }] : /* istanbul ignore next */ []));
+    moveFrames = input.required(...(ngDevMode ? [{ debugName: "moveFrames" }] : /* istanbul ignore next */ []));
+    moveDuration = input(undefined, { ...(ngDevMode ? { debugName: "moveDuration" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute });
+    moveEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveEasing" }] : /* istanbul ignore next */ []));
+    moveDelay = input(undefined, { ...(ngDevMode ? { debugName: "moveDelay" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute });
+    moveSpring = input(undefined, ...(ngDevMode ? [{ debugName: "moveSpring" }] : /* istanbul ignore next */ []));
+    moveDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "moveDisabled" }] : /* istanbul ignore next */ []));
+    moveReverseDuration = input(undefined, { ...(ngDevMode ? { debugName: "moveReverseDuration" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute });
+    moveReverseEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveReverseEasing" }] : /* istanbul ignore next */ []));
+    #defaults = inject(MOVEMENT_CONFIG);
+    #documentRef = inject(DOCUMENT);
+    #host = inject((ElementRef));
+    #engine = inject(AnimationEngine);
+    #currentPlayer = null;
+    #hasPlayedForward = false;
+    #targetEffect = effect(() => {
+        const active = this.moveTarget();
+        const frames = this.moveFrames();
+        if (active) {
+            this.#playForward(frames);
+            this.#hasPlayedForward = true;
+            return;
+        }
+        if (this.#hasPlayedForward) {
+            this.#playReverse(frames);
+        }
+    }, ...(ngDevMode ? [{ debugName: "#targetEffect" }] : /* istanbul ignore next */ []));
+    #playForward(frames) {
+        this.#currentPlayer?.cancel();
+        const isReduced = prefersReducedMotion(this.#documentRef);
+        const config = resolveMovementConfig(this.#defaults, {
+            duration: this.moveDuration(),
+            easing: this.moveEasing(),
+            delay: this.moveDelay(),
+            disabled: this.moveDisabled(),
+        }, isReduced);
+        this.#currentPlayer = this.#engine.play(this.#host.nativeElement, frames, {
+            config,
+            spring: this.moveSpring(),
+            disabled: config.disabled,
+        });
+    }
+    #playReverse(frames) {
+        this.#currentPlayer?.cancel();
+        const isReduced = prefersReducedMotion(this.#documentRef);
+        const config = resolveMovementConfig({ ...this.#defaults, duration: 200, easing: 'ease-out', delay: 0 }, {
+            duration: this.moveReverseDuration() ?? this.moveDuration(),
+            easing: this.moveReverseEasing(),
+            delay: 0,
+            disabled: this.moveDisabled(),
+        }, isReduced);
+        this.#currentPlayer = this.#engine.play(this.#host.nativeElement, reverseFrames(frames), {
+            config,
+            spring: this.moveSpring(),
+            disabled: config.disabled,
+        });
+    }
+    ngOnDestroy() {
+        this.#targetEffect.destroy();
+        this.#currentPlayer?.cancel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveTargetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveTargetDirective, isStandalone: true, selector: "[moveTarget]", inputs: { moveTarget: { classPropertyName: "moveTarget", publicName: "moveTarget", isSignal: true, isRequired: true, transformFunction: null }, moveFrames: { classPropertyName: "moveFrames", publicName: "moveFrames", isSignal: true, isRequired: true, transformFunction: null }, moveDuration: { classPropertyName: "moveDuration", publicName: "moveDuration", isSignal: true, isRequired: false, transformFunction: null }, moveEasing: { classPropertyName: "moveEasing", publicName: "moveEasing", isSignal: true, isRequired: false, transformFunction: null }, moveDelay: { classPropertyName: "moveDelay", publicName: "moveDelay", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", isSignal: true, isRequired: false, transformFunction: null }, moveDisabled: { classPropertyName: "moveDisabled", publicName: "moveDisabled", isSignal: true, isRequired: false, transformFunction: null }, moveReverseDuration: { classPropertyName: "moveReverseDuration", publicName: "moveReverseDuration", isSignal: true, isRequired: false, transformFunction: null }, moveReverseEasing: { classPropertyName: "moveReverseEasing", publicName: "moveReverseEasing", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveTargetDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[moveTarget]',
+                    standalone: true,
+                }]
+        }], propDecorators: { moveTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveTarget", required: true }] }], moveFrames: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveFrames", required: true }] }], moveDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDuration", required: false }] }], moveEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveEasing", required: false }] }], moveDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDelay", required: false }] }], moveSpring: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveSpring", required: false }] }], moveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDisabled", required: false }] }], moveReverseDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveReverseDuration", required: false }] }], moveReverseEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveReverseEasing", required: false }] }] } });
+
 function provideMovement(config = {}) {
     return makeEnvironmentProviders([
         {
@@ -2301,6 +2565,7 @@ const MOVEMENT_DIRECTIVES = [
     MoveParallaxDirective,
     MoveAnimationDirective,
     MoveLoopDirective,
+    MoveTargetDirective,
 ];
 
 /*
@@ -2311,5 +2576,5 @@ const MOVEMENT_DIRECTIVES = [
  * Generated bundle index. Do not edit.
  */
 
-export { AnimationEngine, MOVEMENT_CONFIG, MOVEMENT_DEFAULTS, MOVEMENT_DIRECTIVES, MOVE_PRESENCE_PARENT, MOVE_PRESETS, MOVE_STAGGER_PARENT, MOVE_VARIANTS_PARENT, MoveAnimateDirective, MoveAnimationDirective, MoveDragDirective, MoveEnterDirective, MoveFocusDirective, MoveHoverDirective, MoveInViewDirective, MoveLayoutDirective, MoveLeaveDirective, MoveLoopDirective, MoveParallaxDirective, MovePresenceDirective, MoveScrollDirective, MoveSmoothScrollDirective, MoveStaggerDirective, MoveTapDirective, MoveTextDirective, MoveVariantsDirective, SmoothScrollService, SpringPlayer, WaapiPlayer, applyInitialStyles, clearInitialStyles, prefersReducedMotion, provideMovement, resolveMoveFrames, resolveMovementConfig, reverseFrames };
+export { AnimationEngine, MOVEMENT_CONFIG, MOVEMENT_DEFAULTS, MOVEMENT_DIRECTIVES, MOVE_PRESENCE_PARENT, MOVE_PRESETS, MOVE_STAGGER_PARENT, MOVE_VARIANTS_PARENT, MoveAnimateDirective, MoveAnimationDirective, MoveDragDirective, MoveEnterDirective, MoveFocusDirective, MoveHoverDirective, MoveInViewDirective, MoveLayoutDirective, MoveLeaveDirective, MoveLoopDirective, MoveParallaxDirective, MovePresenceDirective, MoveScrollDirective, MoveSmoothScrollDirective, MoveStaggerDirective, MoveTapDirective, MoveTargetDirective, MoveTextDirective, MoveVariantsDirective, SmoothScrollService, SpringPlayer, WaapiPlayer, applyInitialStyles, clearInitialStyles, isValidScrollOffset, prefersReducedMotion, provideMovement, resolveMoveFrames, resolveMovementConfig, reverseFrames, validateDragElastic, validateSpring };
 //# sourceMappingURL=angular-movement.mjs.map