angular-movement 0.0.1 → 0.1.0

package/fesm2022/angular-movement.mjs

@@ -1,12 +1,13 @@
 import { isPlatformBrowser, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, PLATFORM_ID, Injectable, input, ElementRef, Directive, computed, effect, forwardRef, 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,
     easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
     delay: 0,
     disabled: false,
+    iterations: 1,
 };
 const MOVEMENT_CONFIG = new InjectionToken('MOVEMENT_CONFIG', {
     factory: () => ({ ...MOVEMENT_DEFAULTS }),
@@ -52,6 +53,18 @@ function getInterpolated(arr, i1, i2, p) {
     const v2 = arr[Math.min(i2, arr.length - 1)];
     return v1 + (v2 - v1) * p;
 }
+const KNOWN_KEYS = new Set([
+    'opacity',
+    'x',
+    'y',
+    'scale',
+    'scaleX',
+    'scaleY',
+    'rotate',
+    'rotateX',
+    'rotateY',
+    'blur',
+]);
 function buildKeyframe(frames, getVal) {
     const keyframe = {};
     const opacity = getVal(frames.opacity);
@@ -87,6 +100,16 @@ function buildKeyframe(frames, getVal) {
     if (rotateX !== undefined || rotateY !== undefined) {
         keyframe.transform = `perspective(${DEFAULT_PERSPECTIVE}) rotateX(${rotateX ?? 0}deg) rotateY(${rotateY ?? 0}deg)`;
     }
+    // Passthrough arbitrary properties for WAAPI (e.g. strokeDashoffset)
+    for (const key in frames) {
+        if (KNOWN_KEYS.has(key))
+            continue;
+        const arr = frames[key];
+        const val = getVal(arr);
+        if (val !== undefined) {
+            keyframe[key] = val;
+        }
+    }
     return keyframe;
 }
 function composeKeyframeAt(frames, index) {
@@ -101,27 +124,51 @@ function composeInitialStyle(frames) {
 function composeFinalStyle(frames) {
     return buildKeyframe(frames, (arr) => (arr && arr.length > 0 ? arr[arr.length - 1] : undefined));
 }
+const KNOWN_STYLE_KEYS = new Set([
+    'opacity',
+    'translate',
+    'scale',
+    'rotate',
+    'transform',
+    'filter',
+]);
 function applyComposedStyle(el, style) {
+    const styledEl = el;
     if (style.opacity !== undefined)
-        el.style.opacity = `${style.opacity}`;
+        styledEl.style.opacity = `${style.opacity}`;
     if (style.translate !== undefined)
-        el.style.translate = style.translate;
+        styledEl.style.translate = style.translate;
     if (style.scale !== undefined)
-        el.style.scale = style.scale;
+        styledEl.style.scale = style.scale;
     if (style.rotate !== undefined)
-        el.style.rotate = style.rotate;
+        styledEl.style.rotate = style.rotate;
     if (style.transform !== undefined)
-        el.style.transform = style.transform;
+        styledEl.style.transform = style.transform;
     if (style.filter !== undefined)
-        el.style.filter = style.filter;
+        styledEl.style.filter = style.filter;
+    // Passthrough arbitrary properties (e.g. strokeDashoffset)
+    for (const key in style) {
+        if (KNOWN_STYLE_KEYS.has(key))
+            continue;
+        const val = style[key];
+        if (val !== undefined) {
+            styledEl.style[key] = String(val);
+        }
+    }
 }
-function clearComposedStyle(el) {
-    el.style.opacity = '';
-    el.style.translate = '';
-    el.style.scale = '';
-    el.style.rotate = '';
-    el.style.transform = '';
-    el.style.filter = '';
+function clearComposedStyle(el, extraKeys) {
+    const styledEl = el;
+    styledEl.style.opacity = '';
+    styledEl.style.translate = '';
+    styledEl.style.scale = '';
+    styledEl.style.rotate = '';
+    styledEl.style.transform = '';
+    styledEl.style.filter = '';
+    if (extraKeys) {
+        for (const key of extraKeys) {
+            styledEl.style[key] = '';
+        }
+    }
 }
 
 const DEFAULT_FADE_OPACITY = [0, 1];
@@ -178,6 +225,7 @@ const MOVE_PRESETS = {
     'bounce-in': {
         enter: { opacity: DEFAULT_FADE_OPACITY, y: [30, 0], scale: [0.85, 1] },
         leave: { opacity: DEFAULT_LEAVE_OPACITY, y: [0, -20], scale: [1, 0.9] },
+        loop: { y: [0, -10, 0], scale: [1, 0.95, 1] },
     },
     'blur-in': {
         enter: { opacity: DEFAULT_FADE_OPACITY, blur: [10, 0] },
@@ -186,10 +234,81 @@ const MOVE_PRESETS = {
     spin: {
         enter: { opacity: DEFAULT_FADE_OPACITY, rotate: [-360, 0] },
         leave: { opacity: DEFAULT_LEAVE_OPACITY, rotate: [0, 360] },
+        loop: { rotate: [0, 360] },
     },
     pulse: {
         enter: { scale: [1, 1.05, 1] },
         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] },
@@ -207,6 +326,7 @@ function resolveMovementConfig(defaults, overrides, reducedMotion) {
         easing: overrides.easing ?? defaults.easing,
         delay: Math.max(0, overrides.delay ?? defaults.delay),
         disabled: reducedMotion || (overrides.disabled ?? defaults.disabled),
+        iterations: overrides.iterations ?? defaults.iterations,
     };
 }
 function resolveMoveFrames(value, phase) {
@@ -216,9 +336,9 @@ function resolveMoveFrames(value, phase) {
             if (typeof ngDevMode !== 'undefined' && ngDevMode) {
                 console.warn(`[Movement] Unknown preset: "${value}". Using "none" preset.`);
             }
-            return MOVE_PRESETS['none'][phase];
+            return MOVE_PRESETS['none'][phase] ?? MOVE_PRESETS['none'].enter;
         }
-        return preset[phase];
+        return preset[phase] ?? preset.enter;
     }
     return value;
 }
@@ -259,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;
@@ -273,12 +450,18 @@ class WaapiPlayer {
             return;
         }
         const keyframes = this.#toWAAPIKeyframes(frames);
+        const iterations = config.iterations ?? 1;
         this.#animation = host.animate(keyframes, {
             duration: config.duration,
             easing: config.easing,
             delay: config.delay,
             fill: 'both',
+            iterations,
         });
+        if (iterations === Infinity) {
+            // Infinite loops never finish; consumer must call cancel() manually.
+            return;
+        }
         this.#animation.addEventListener('finish', () => {
             this.#animation?.commitStyles?.();
             this.#animation?.cancel();
@@ -328,22 +511,28 @@ class SpringPlayer {
     host;
     frames;
     delay;
+    iterations;
     onDone;
     #resolveFinished;
     finished = new Promise((resolve) => {
         this.#resolveFinished = resolve;
     });
     #animation = null;
-    constructor(host, frames, userConfig, delay, onDone) {
+    constructor(host, frames, userConfig, delay, iterations = 1, onDone) {
         this.host = host;
         this.frames = frames;
         this.delay = delay;
+        this.iterations = iterations;
         this.onDone = onDone;
         if (typeof host.animate !== 'function') {
             this.#resolveFinished();
             onDone?.();
             return;
         }
+        if (this.iterations !== 1 && typeof ngDevMode !== 'undefined' && ngDevMode) {
+            console.warn('[Movement] Spring animations with iterations !== 1 may produce visual glitches. ' +
+                'Consider using WaapiPlayer (no spring) for loops.');
+        }
         const config = {
             stiffness: 100,
             damping: 10,
@@ -366,7 +555,12 @@ class SpringPlayer {
             delay: this.delay,
             fill: 'both',
             easing: 'linear', // Spring physics already has the easing baked into the frames
+            iterations: this.iterations,
         });
+        if (this.iterations === Infinity) {
+            // Infinite loops never finish; consumer must call cancel() manually.
+            return;
+        }
         this.#animation.addEventListener('finish', () => {
             this.#animation?.commitStyles?.();
             this.#animation?.cancel();
@@ -453,14 +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, options.onDone);
+            return new SpringPlayer(host, frames, spring ?? {}, options.delay ?? config.delay, iterations, options.onDone);
         }
         else {
             return new WaapiPlayer(host, frames, {
@@ -468,12 +666,36 @@ class AnimationEngine {
                 easing: config.easing,
                 delay: options.delay ?? config.delay,
                 disabled: false,
+                iterations,
             }, options.onDone);
         }
     }
     #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' });
 }
@@ -486,6 +708,81 @@ const MOVE_STAGGER_PARENT = new InjectionToken('MOVE_STAGGER_PARENT');
 
 const MOVE_PRESENCE_PARENT = new InjectionToken('MOVE_PRESENCE_PARENT');
 
+const MOVE_VARIANTS_PARENT = new InjectionToken('MOVE_VARIANTS_PARENT');
+class MoveVariantsDirective {
+    moveVariants = input.required(...(ngDevMode ? [{ debugName: "moveVariants" }] : /* istanbul ignore next */ []));
+    moveAnimate = input(undefined, ...(ngDevMode ? [{ debugName: "moveAnimate" }] : /* istanbul ignore next */ []));
+    moveDuration = input(undefined, ...(ngDevMode ? [{ debugName: "moveDuration" }] : /* istanbul ignore next */ []));
+    moveEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveEasing" }] : /* istanbul ignore next */ []));
+    moveDelay = input(undefined, ...(ngDevMode ? [{ debugName: "moveDelay" }] : /* istanbul ignore next */ []));
+    moveDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "moveDisabled" }] : /* istanbul ignore next */ []));
+    moveSpring = input(undefined, ...(ngDevMode ? [{ debugName: "moveSpring" }] : /* istanbul ignore next */ []));
+    #parent = inject(MOVE_VARIANTS_PARENT, { optional: true, skipSelf: true });
+    #engine = inject(AnimationEngine);
+    #defaults = inject(MOVEMENT_CONFIG);
+    #documentRef = inject(DOCUMENT);
+    #host = inject((ElementRef));
+    #stagger = inject(MOVE_STAGGER_PARENT, { optional: true });
+    #currentPlayer = null;
+    #isReducedMotion = false;
+    activeVariant = computed(() => {
+        return this.moveAnimate() ?? this.#parent?.activeVariant();
+    }, ...(ngDevMode ? [{ debugName: "activeVariant" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.#isReducedMotion = prefersReducedMotion(this.#documentRef);
+        this.#stagger?.register(this.#host.nativeElement);
+        effect(() => {
+            const variantName = this.activeVariant();
+            if (!variantName)
+                return;
+            const variants = this.moveVariants();
+            if (!variants)
+                return;
+            const state = variants[variantName];
+            if (!state)
+                return;
+            this.#currentPlayer?.cancel();
+            const { spring, duration, easing, delay, ...keyframesMap } = state;
+            const keyframes = keyframesMap;
+            const staggerDelay = this.#stagger?.getDelay(this.#host.nativeElement) ?? 0;
+            const config = resolveMovementConfig(this.#defaults, {
+                duration: duration ?? this.moveDuration(),
+                easing: easing ?? this.moveEasing(),
+                delay: (delay ?? this.moveDelay() ?? 0) + staggerDelay,
+                disabled: this.moveDisabled(),
+            }, this.#isReducedMotion);
+            this.#currentPlayer = this.#engine.play(this.#host.nativeElement, keyframes, {
+                config,
+                spring: spring ?? this.moveSpring(),
+                disabled: config.disabled,
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.#stagger?.unregister(this.#host.nativeElement);
+        this.#currentPlayer?.cancel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveVariantsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveVariantsDirective, isStandalone: true, selector: "[moveVariants]", inputs: { moveVariants: { classPropertyName: "moveVariants", publicName: "moveVariants", isSignal: true, isRequired: true, transformFunction: null }, moveAnimate: { classPropertyName: "moveAnimate", publicName: "moveAnimate", 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 } }, providers: [
+            {
+                provide: MOVE_VARIANTS_PARENT,
+                useExisting: forwardRef(() => MoveVariantsDirective),
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveVariantsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[moveVariants]',
+                    providers: [
+                        {
+                            provide: MOVE_VARIANTS_PARENT,
+                            useExisting: forwardRef(() => MoveVariantsDirective),
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { moveVariants: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveVariants", required: true }] }], moveAnimate: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveAnimate", 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 }] }] } });
+
 class MoveAnimateDirective {
     move = input(undefined, ...(ngDevMode ? [{ debugName: "move" }] : /* istanbul ignore next */ []));
     moveAnimate = input(undefined, ...(ngDevMode ? [{ debugName: "moveAnimate" }] : /* istanbul ignore next */ []));
@@ -501,10 +798,15 @@ class MoveAnimateDirective {
     #engine = inject(AnimationEngine);
     #stagger = inject(MOVE_STAGGER_PARENT, { optional: true });
     #presence = inject(MOVE_PRESENCE_PARENT, { optional: true });
+    #variantsParent = inject(MOVE_VARIANTS_PARENT, { optional: true });
     #config = this.#defaults;
     #enterPlayer = null;
     #leavePlayer = null;
     ngOnInit() {
+        // If moveVariants is on the same host, let it handle animation
+        if (this.#variantsParent) {
+            return;
+        }
         this.#stagger?.register(this.#host.nativeElement);
         this.#presence?.register(this);
         Promise.resolve().then(() => {
@@ -530,7 +832,7 @@ class MoveAnimateDirective {
         this.#leavePlayer?.cancel();
     }
     playLeave() {
-        if (this.#config.disabled) {
+        if (this.#variantsParent || this.#config.disabled) {
             return Promise.resolve();
         }
         this.#enterPlayer?.cancel();
@@ -871,81 +1173,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                 }]
         }], propDecorators: { moveWhileTap: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveWhileTap", 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 }] }], moveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDisabled", required: false }] }], moveSpring: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveSpring", required: false }] }] } });
 
-const MOVE_VARIANTS_PARENT = new InjectionToken('MOVE_VARIANTS_PARENT');
-class MoveVariantsDirective {
-    moveVariants = input.required(...(ngDevMode ? [{ debugName: "moveVariants" }] : /* istanbul ignore next */ []));
-    moveAnimate = input(undefined, ...(ngDevMode ? [{ debugName: "moveAnimate" }] : /* istanbul ignore next */ []));
-    moveDuration = input(undefined, ...(ngDevMode ? [{ debugName: "moveDuration" }] : /* istanbul ignore next */ []));
-    moveEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveEasing" }] : /* istanbul ignore next */ []));
-    moveDelay = input(undefined, ...(ngDevMode ? [{ debugName: "moveDelay" }] : /* istanbul ignore next */ []));
-    moveDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "moveDisabled" }] : /* istanbul ignore next */ []));
-    moveSpring = input(undefined, ...(ngDevMode ? [{ debugName: "moveSpring" }] : /* istanbul ignore next */ []));
-    #parent = inject(MOVE_VARIANTS_PARENT, { optional: true, skipSelf: true });
-    #engine = inject(AnimationEngine);
-    #defaults = inject(MOVEMENT_CONFIG);
-    #documentRef = inject(DOCUMENT);
-    #host = inject((ElementRef));
-    #stagger = inject(MOVE_STAGGER_PARENT, { optional: true });
-    #currentPlayer = null;
-    #isReducedMotion = false;
-    activeVariant = computed(() => {
-        return this.moveAnimate() ?? this.#parent?.activeVariant();
-    }, ...(ngDevMode ? [{ debugName: "activeVariant" }] : /* istanbul ignore next */ []));
-    constructor() {
-        this.#isReducedMotion = prefersReducedMotion(this.#documentRef);
-        this.#stagger?.register(this.#host.nativeElement);
-        effect(() => {
-            const variantName = this.activeVariant();
-            if (!variantName)
-                return;
-            const variants = this.moveVariants();
-            if (!variants)
-                return;
-            const state = variants[variantName];
-            if (!state)
-                return;
-            this.#currentPlayer?.cancel();
-            const { spring, duration, easing, delay, ...keyframesMap } = state;
-            const keyframes = keyframesMap;
-            const staggerDelay = this.#stagger?.getDelay(this.#host.nativeElement) ?? 0;
-            const config = resolveMovementConfig(this.#defaults, {
-                duration: duration ?? this.moveDuration(),
-                easing: easing ?? this.moveEasing(),
-                delay: (delay ?? this.moveDelay() ?? 0) + staggerDelay,
-                disabled: this.moveDisabled(),
-            }, this.#isReducedMotion);
-            this.#currentPlayer = this.#engine.play(this.#host.nativeElement, keyframes, {
-                config,
-                spring: spring ?? this.moveSpring(),
-                disabled: config.disabled,
-            });
-        });
-    }
-    ngOnDestroy() {
-        this.#stagger?.unregister(this.#host.nativeElement);
-        this.#currentPlayer?.cancel();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveVariantsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveVariantsDirective, isStandalone: true, selector: "[moveVariants]", inputs: { moveVariants: { classPropertyName: "moveVariants", publicName: "moveVariants", isSignal: true, isRequired: true, transformFunction: null }, moveAnimate: { classPropertyName: "moveAnimate", publicName: "moveAnimate", 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 } }, providers: [
-            {
-                provide: MOVE_VARIANTS_PARENT,
-                useExisting: forwardRef(() => MoveVariantsDirective),
-            },
-        ], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveVariantsDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[moveVariants]',
-                    providers: [
-                        {
-                            provide: MOVE_VARIANTS_PARENT,
-                            useExisting: forwardRef(() => MoveVariantsDirective),
-                        },
-                    ],
-                }]
-        }], ctorParameters: () => [], propDecorators: { moveVariants: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveVariants", required: true }] }], moveAnimate: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveAnimate", 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 }] }] } });
-
 class MoveStaggerDirective {
     moveStagger = input.required(...(ngDevMode ? [{ debugName: "moveStagger" }] : /* istanbul ignore next */ []));
     moveStaggerDirection = input('first', ...(ngDevMode ? [{ debugName: "moveStaggerDirection" }] : /* istanbul ignore next */ []));
@@ -960,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)
@@ -1029,7 +1261,11 @@ class MoveLayoutDirective {
                     this.#isAnimating) {
                     return null;
                 }
-                const currentRect = this.#host.nativeElement.getBoundingClientRect();
+                const el = this.#host.nativeElement;
+                if (typeof el.getBoundingClientRect !== 'function') {
+                    return null;
+                }
+                const currentRect = el.getBoundingClientRect();
                 if (this.#snapshot) {
                     const dx = this.#snapshot.left - currentRect.left;
                     const dy = this.#snapshot.top - currentRect.top;
@@ -1337,8 +1573,13 @@ 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 },
+                config: { duration: 1000, easing: 'linear', delay: 0, disabled: false, iterations: 1 },
             });
             this.#player?.pause();
             // Sync the new player to the current scroll position immediately.
@@ -1579,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();
@@ -1600,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 = '';
@@ -1629,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;
             }
@@ -1663,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;
             }
@@ -1689,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 });
@@ -1809,6 +2067,7 @@ class MoveTextDirective {
     #platformId = inject(PLATFORM_ID);
     #host = inject((ElementRef));
     #engine = inject(AnimationEngine);
+    #renderer = inject(Renderer2);
     #players = [];
     #spans = [];
     #observer = null;
@@ -1869,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);
             });
         }
@@ -1891,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);
             });
         }
@@ -1904,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 });
@@ -2101,7 +2365,7 @@ class MoveParallaxDirective {
         }
         this.#player?.cancel();
         this.#player = this.#engine.play(this.#host.nativeElement, frames, {
-            config: { duration: 1000, delay: 0, easing: 'linear', disabled: false },
+            config: { duration: 1000, delay: 0, easing: 'linear', disabled: false, iterations: 1 },
         });
         this.#player?.pause();
         if (this.#player) {
@@ -2146,6 +2410,130 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { moveParallax: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveParallax", required: false }] }], moveParallaxAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveParallaxAxis", required: false }] }] } });
 
+class MoveLoopDirective {
+    moveLoop = input('none', ...(ngDevMode ? [{ debugName: "moveLoop" }] : /* istanbul ignore next */ []));
+    moveDuration = input(undefined, ...(ngDevMode ? [{ debugName: "moveDuration" }] : /* istanbul ignore next */ []));
+    moveEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveEasing" }] : /* istanbul ignore next */ []));
+    moveDelay = input(undefined, ...(ngDevMode ? [{ debugName: "moveDelay" }] : /* istanbul ignore next */ []));
+    moveDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "moveDisabled" }] : /* istanbul ignore next */ []));
+    moveSpring = input(undefined, ...(ngDevMode ? [{ debugName: "moveSpring" }] : /* istanbul ignore next */ []));
+    #defaults = inject(MOVEMENT_CONFIG);
+    #documentRef = inject(DOCUMENT);
+    #host = inject((ElementRef));
+    #engine = inject(AnimationEngine);
+    #player = null;
+    ngOnInit() {
+        const frames = resolveMoveFrames(this.moveLoop(), 'loop');
+        // Skip noop presets to avoid creating an infinite animation that does nothing
+        if (this.moveLoop() === 'none' || Object.keys(frames).length === 0) {
+            return;
+        }
+        const isReduced = prefersReducedMotion(this.#documentRef);
+        const config = resolveMovementConfig(this.#defaults, {
+            duration: this.moveDuration(),
+            easing: this.moveEasing(),
+            delay: this.moveDelay(),
+            disabled: this.moveDisabled(),
+        }, isReduced);
+        this.#player = this.#engine.play(this.#host.nativeElement, frames, {
+            config,
+            spring: this.moveSpring(),
+            disabled: config.disabled,
+            iterations: Infinity,
+        });
+    }
+    ngOnDestroy() {
+        this.#player?.cancel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveLoopDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveLoopDirective, isStandalone: true, selector: "[moveLoop]", inputs: { moveLoop: { classPropertyName: "moveLoop", publicName: "moveLoop", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveLoopDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[moveLoop]',
+                }]
+        }], 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([
         {
@@ -2176,6 +2564,8 @@ const MOVEMENT_DIRECTIVES = [
     MoveFocusDirective,
     MoveParallaxDirective,
     MoveAnimationDirective,
+    MoveLoopDirective,
+    MoveTargetDirective,
 ];
 
 /*
@@ -2186,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, MoveParallaxDirective, MovePresenceDirective, MoveScrollDirective, MoveSmoothScrollDirective, MoveStaggerDirective, MoveTapDirective, MoveTextDirective, MoveVariantsDirective, SmoothScrollService, SpringPlayer, WaapiPlayer, provideMovement };
+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