angular-movement 0.0.2 → 0.3.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,
@@ -51,6 +51,9 @@ function getInterpolated(arr, i1, i2, p) {
         return undefined;
     const v1 = arr[Math.min(i1, arr.length - 1)];
     const v2 = arr[Math.min(i2, arr.length - 1)];
+    if (typeof v1 === 'string' || typeof v2 === 'string') {
+        return p >= 1 ? v2 : v1;
+    }
     return v1 + (v2 - v1) * p;
 }
 const KNOWN_KEYS = new Set([
@@ -69,36 +72,36 @@ function buildKeyframe(frames, getVal) {
     const keyframe = {};
     const opacity = getVal(frames.opacity);
     if (opacity !== undefined) {
-        keyframe.opacity = opacity;
+        keyframe.opacity = Number(opacity);
     }
     const x = getVal(frames.x);
     const y = getVal(frames.y);
     if (x !== undefined || y !== undefined) {
-        keyframe.translate = `${x ?? 0}px ${y ?? 0}px`;
+        keyframe.translate = `${Number(x ?? 0)}px ${Number(y ?? 0)}px`;
     }
     const scale = getVal(frames.scale);
     if (scale !== undefined) {
-        keyframe.scale = `${scale}`;
+        keyframe.scale = `${Number(scale)}`;
     }
     else {
         const scaleX = getVal(frames.scaleX);
         const scaleY = getVal(frames.scaleY);
         if (scaleX !== undefined || scaleY !== undefined) {
-            keyframe.scale = `${scaleX ?? 1} ${scaleY ?? 1}`;
+            keyframe.scale = `${Number(scaleX ?? 1)} ${Number(scaleY ?? 1)}`;
         }
     }
     const rotate = getVal(frames.rotate);
     if (rotate !== undefined) {
-        keyframe.rotate = `${rotate}deg`;
+        keyframe.rotate = `${Number(rotate)}deg`;
     }
     const blur = getVal(frames.blur);
     if (blur !== undefined) {
-        keyframe.filter = `blur(${blur}px)`;
+        keyframe.filter = `blur(${Number(blur)}px)`;
     }
     const rotateX = getVal(frames.rotateX);
     const rotateY = getVal(frames.rotateY);
     if (rotateX !== undefined || rotateY !== undefined) {
-        keyframe.transform = `perspective(${DEFAULT_PERSPECTIVE}) rotateX(${rotateX ?? 0}deg) rotateY(${rotateY ?? 0}deg)`;
+        keyframe.transform = `perspective(${DEFAULT_PERSPECTIVE}) rotateX(${Number(rotateX ?? 0)}deg) rotateY(${Number(rotateY ?? 0)}deg)`;
     }
     // Passthrough arbitrary properties for WAAPI (e.g. strokeDashoffset)
     for (const key in frames) {
@@ -241,6 +244,89 @@ 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] },
+    },
+    'icon-draw': {
+        enter: { pathLength: [0, 1], opacity: [0, 1] },
+        leave: { pathLength: [1, 0], opacity: [1, 0] },
+    },
+    'icon-pulse': {
+        enter: { scale: [1, 1.08, 1], opacity: [1, 0.85, 1] },
+        leave: { scale: [1, 0.92, 1], opacity: [1, 1, 1] },
+        loop: { scale: [1, 1.08, 1], opacity: [1, 0.85, 1] },
+    },
+    'icon-bounce': {
+        enter: { y: [0, -3, 0], opacity: [1, 1, 1] },
+        leave: { y: [0, 0, 0], opacity: [1, 1, 1] },
+        loop: { y: [0, -3, 0] },
+    },
     none: {
         enter: { opacity: [1, 1] },
         leave: { opacity: [1, 1] },
@@ -310,6 +396,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;
@@ -323,7 +466,9 @@ class WaapiPlayer {
             onDone?.();
             return;
         }
-        const keyframes = this.#toWAAPIKeyframes(frames);
+        const keyframes = Array.isArray(frames)
+            ? frames
+            : this.#toWAAPIKeyframes(frames);
         const iterations = config.iterations ?? 1;
         this.#animation = host.animate(keyframes, {
             duration: config.duration,
@@ -512,24 +657,129 @@ class SpringPlayer {
     }
 }
 
+function isPropertyTransition(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        ('duration' in value || 'easing' in value || 'delay' in value));
+}
+function composeTransitionKeyframes(frames, transition, baseConfig) {
+    const globalDuration = transition.duration ?? baseConfig.duration;
+    const globalEasing = transition.easing ?? baseConfig.easing;
+    const globalDelay = transition.delay ?? baseConfig.delay;
+    const propNames = Object.keys(frames).filter((k) => k !== 'transition');
+    if (propNames.length === 0)
+        return null;
+    const timings = propNames.map((prop) => {
+        const pt = transition[prop];
+        const parsed = isPropertyTransition(pt) ? pt : {};
+        return {
+            prop,
+            duration: parsed.duration ?? globalDuration,
+            easing: parsed.easing ?? globalEasing,
+            delay: parsed.delay ?? globalDelay,
+            values: frames[prop].map((v) => Number(v)),
+        };
+    });
+    const allSame = timings.every((t) => t.duration === timings[0].duration &&
+        t.easing === timings[0].easing &&
+        t.delay === timings[0].delay);
+    if (allSame) {
+        return null;
+    }
+    const uniqueEasings = new Set(timings.map((t) => t.easing));
+    let finalEasing = timings[0].easing;
+    if (uniqueEasings.size > 1) {
+        if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+            console.warn('[Movement] Per-property easing differences are not supported yet. Using global easing.');
+        }
+        finalEasing = globalEasing;
+    }
+    const totalDuration = Math.max(...timings.map((t) => t.delay + t.duration));
+    const totalDelay = Math.min(...timings.map((t) => t.delay));
+    // Collect all keyframe times
+    const timeSet = new Set();
+    for (const t of timings) {
+        const n = t.values.length;
+        for (let i = 0; i < n; i++) {
+            const time = t.delay + (t.duration * i) / Math.max(1, n - 1);
+            timeSet.add(time);
+        }
+    }
+    const sortedTimes = Array.from(timeSet).sort((a, b) => a - b);
+    const resultKeyframes = [];
+    for (const time of sortedTimes) {
+        const offset = totalDuration > totalDelay ? (time - totalDelay) / (totalDuration - totalDelay) : 0;
+        const kf = { offset };
+        for (const t of timings) {
+            const localTime = time - t.delay;
+            const n = t.values.length;
+            if (n === 1) {
+                kf[t.prop] = t.values[0];
+                continue;
+            }
+            if (localTime <= 0) {
+                kf[t.prop] = t.values[0];
+            }
+            else if (localTime >= t.duration) {
+                kf[t.prop] = t.values[n - 1];
+            }
+            else {
+                const progress = t.duration > 0 ? localTime / t.duration : 0;
+                const maxIdx = n - 1;
+                const idx = progress * maxIdx;
+                const i1 = Math.floor(idx);
+                const i2 = Math.min(Math.ceil(idx), maxIdx);
+                const p = idx - i1;
+                const v1 = t.values[i1];
+                const v2 = t.values[i2];
+                kf[t.prop] = v1 + (v2 - v1) * p;
+            }
+        }
+        resultKeyframes.push(kf);
+    }
+    return {
+        keyframes: resultKeyframes,
+        duration: totalDuration,
+        easing: finalEasing,
+        delay: totalDelay,
+    };
+}
+
 class AnimationEngine {
     #platformId = inject(PLATFORM_ID);
     #defaults = inject(MOVEMENT_CONFIG);
-    play(host, frames, options = {}) {
+    play(host, rawFrames, options = {}) {
         if (!isPlatformBrowser(this.#platformId)) {
             options.onDone?.();
             return null;
         }
+        const frames = this.#resolveSvgFrames(host, rawFrames);
         if (options.disabled) {
+            this.#prepareSvgPathDraw(host, frames);
             this.#applyFinalStyles(host, frames);
             options.onDone?.();
             return null;
         }
+        this.#prepareSvgPathDraw(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;
+        // Per-property transitions only supported with WaapiPlayer (not spring)
+        if (options.transition && !isSpring) {
+            const resolved = composeTransitionKeyframes(frames, options.transition, config);
+            if (resolved) {
+                return new WaapiPlayer(host, resolved.keyframes, {
+                    duration: resolved.duration,
+                    easing: resolved.easing,
+                    delay: resolved.delay,
+                    disabled: false,
+                    iterations,
+                }, options.onDone);
+            }
+        }
         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 +794,67 @@ class AnimationEngine {
     #applyFinalStyles(host, frames) {
         applyComposedStyle(host, composeFinalStyle(frames));
     }
+    #resolveSvgFrames(host, frames) {
+        if (!frames.pathLength && !frames.pathOffset) {
+            return frames;
+        }
+        const L = this.#getPathLength(host);
+        const resolved = { ...frames };
+        const pValues = frames.pathLength ? frames.pathLength.map((v) => Number(v)) : [1];
+        const oValues = frames.pathOffset ? frames.pathOffset.map((v) => Number(v)) : [0];
+        const maxLen = Math.max(pValues.length, oValues.length);
+        const strokeDasharray = [];
+        const strokeDashoffset = [];
+        for (let i = 0; i < maxLen; i++) {
+            const p = pValues[Math.min(i, pValues.length - 1)];
+            const o = oValues[Math.min(i, oValues.length - 1)];
+            strokeDasharray.push(`${p * L} ${L}`);
+            strokeDashoffset.push(-o * L);
+        }
+        resolved['strokeDasharray'] = strokeDasharray;
+        resolved['strokeDashoffset'] = strokeDashoffset;
+        delete resolved['pathLength'];
+        delete resolved['pathOffset'];
+        return resolved;
+    }
+    #prepareSvgPathDraw(host, frames) {
+        const hasPathProps = frames.strokeDashoffset || frames.strokeDasharray || frames.pathLength || frames.pathOffset;
+        if (!hasPathProps || !this.#isSvgGeometryElement(host)) {
+            return;
+        }
+        const styledHost = host;
+        const L = this.#getPathLength(host);
+        if (frames.strokeDasharray && frames.strokeDasharray.length > 0) {
+            styledHost.style.strokeDasharray = String(frames.strokeDasharray[0]);
+        }
+        else if (frames.strokeDashoffset || frames.pathLength || frames.pathOffset) {
+            styledHost.style.strokeDasharray = `${L}`;
+        }
+        if (frames.strokeDashoffset && frames.strokeDashoffset.length > 0) {
+            styledHost.style.strokeDashoffset = String(frames.strokeDashoffset[0]);
+        }
+        else if (frames.pathLength && frames.pathLength.length > 0) {
+            styledHost.style.strokeDashoffset = `${Number(frames.pathLength[0]) * L}`;
+        }
+    }
+    #getPathLength(host) {
+        if (!this.#isSvgGeometryElement(host))
+            return 28;
+        try {
+            return host.getTotalLength() || 28;
+        }
+        catch {
+            return 28;
+        }
+    }
+    #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' });
 }
@@ -590,7 +901,7 @@ class MoveVariantsDirective {
             if (!state)
                 return;
             this.#currentPlayer?.cancel();
-            const { spring, duration, easing, delay, ...keyframesMap } = state;
+            const { spring, duration, easing, delay, transition, ...keyframesMap } = state;
             const keyframes = keyframesMap;
             const staggerDelay = this.#stagger?.getDelay(this.#host.nativeElement) ?? 0;
             const config = resolveMovementConfig(this.#defaults, {
@@ -603,6 +914,7 @@ class MoveVariantsDirective {
                 config,
                 spring: spring ?? this.moveSpring(),
                 disabled: config.disabled,
+                transition,
             });
         });
     }
@@ -778,7 +1090,7 @@ function statesToKeyframes(from, to) {
     for (const key of Object.keys(from)) {
         const f = from[key];
         const t = to[key];
-        if (f !== undefined && t !== undefined) {
+        if (typeof f === 'number' && typeof t === 'number') {
             result[key] = [f, t];
         }
     }
@@ -877,13 +1189,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                 }]
         }], propDecorators: { moveLeave: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveLeave", 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$3(value) {
+    if (value === undefined || value === null || value === '') {
+        return undefined;
+    }
+    return Number(value);
+}
 class MoveHoverDirective {
     moveWhileHover = input.required(...(ngDevMode ? [{ debugName: "moveWhileHover" }] : /* istanbul ignore next */ []));
-    moveDuration = input(undefined, ...(ngDevMode ? [{ debugName: "moveDuration" }] : /* istanbul ignore next */ []));
+    moveDuration = input(undefined, { ...(ngDevMode ? { debugName: "moveDuration" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute$3 });
     moveEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveEasing" }] : /* istanbul ignore next */ []));
-    moveDelay = input(undefined, ...(ngDevMode ? [{ debugName: "moveDelay" }] : /* istanbul ignore next */ []));
+    moveDelay = input(undefined, { ...(ngDevMode ? { debugName: "moveDelay" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute$3 });
     moveDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "moveDisabled" }] : /* istanbul ignore next */ []));
     moveSpring = input(undefined, ...(ngDevMode ? [{ debugName: "moveSpring" }] : /* istanbul ignore next */ []));
+    moveReverseDuration = input(undefined, { ...(ngDevMode ? { debugName: "moveReverseDuration" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute$3 });
+    moveReverseEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveReverseEasing" }] : /* istanbul ignore next */ []));
     #defaults = inject(MOVEMENT_CONFIG);
     #documentRef = inject(DOCUMENT);
     #host = inject((ElementRef));
@@ -928,10 +1248,22 @@ class MoveHoverDirective {
             return;
         let frames = resolveMoveFrames(this.moveWhileHover(), 'enter');
         if (reverse) {
+            const reverseDuration = this.moveReverseDuration();
+            if (reverseDuration === 0) {
+                clearComposedStyle(this.#host.nativeElement, Object.keys(frames));
+                return;
+            }
             frames = reverseFrames(frames);
         }
+        const reverseConfig = reverse
+            ? resolveMovementConfig({ ...this.#defaults, duration: 200, easing: 'ease-out', delay: 0 }, {
+                duration: this.moveReverseDuration() ?? this.moveDuration(),
+                easing: this.moveReverseEasing(),
+                delay: 0,
+            }, isReduced)
+            : config;
         this.#currentPlayer = this.#engine.play(this.#host.nativeElement, frames, {
-            config,
+            config: reverseConfig,
             spring: this.moveSpring(),
             disabled: false,
         });
@@ -940,7 +1272,7 @@ class MoveHoverDirective {
         this.#currentPlayer?.cancel();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveHoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveHoverDirective, isStandalone: true, selector: "[moveWhileHover]", inputs: { moveWhileHover: { classPropertyName: "moveWhileHover", publicName: "moveWhileHover", 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 }, moveDisabled: { classPropertyName: "moveDisabled", publicName: "moveDisabled", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "touchstart": "onTouchStart($event)", "touchend": "onTouchEnd()", "touchcancel": "onTouchEnd()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveHoverDirective, isStandalone: true, selector: "[moveWhileHover]", inputs: { moveWhileHover: { classPropertyName: "moveWhileHover", publicName: "moveWhileHover", 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 }, moveDisabled: { classPropertyName: "moveDisabled", publicName: "moveDisabled", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", 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 } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "touchstart": "onTouchStart($event)", "touchend": "onTouchEnd()", "touchcancel": "onTouchEnd()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveHoverDirective, decorators: [{
             type: Directive,
@@ -954,15 +1286,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                         '(touchcancel)': 'onTouchEnd()',
                     },
                 }]
-        }], propDecorators: { moveWhileHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveWhileHover", 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 }] }] } });
+        }], propDecorators: { moveWhileHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveWhileHover", 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 }] }], moveReverseDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveReverseDuration", required: false }] }], moveReverseEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveReverseEasing", required: false }] }] } });
 
+function optionalNumberAttribute$2(value) {
+    if (value === undefined || value === null || value === '') {
+        return undefined;
+    }
+    return Number(value);
+}
 class MoveTapDirective {
     moveWhileTap = input.required(...(ngDevMode ? [{ debugName: "moveWhileTap" }] : /* istanbul ignore next */ []));
-    moveDuration = input(undefined, ...(ngDevMode ? [{ debugName: "moveDuration" }] : /* istanbul ignore next */ []));
+    moveDuration = input(undefined, { ...(ngDevMode ? { debugName: "moveDuration" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute$2 });
     moveEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveEasing" }] : /* istanbul ignore next */ []));
-    moveDelay = input(undefined, ...(ngDevMode ? [{ debugName: "moveDelay" }] : /* istanbul ignore next */ []));
+    moveDelay = input(undefined, { ...(ngDevMode ? { debugName: "moveDelay" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute$2 });
     moveDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "moveDisabled" }] : /* istanbul ignore next */ []));
     moveSpring = input(undefined, ...(ngDevMode ? [{ debugName: "moveSpring" }] : /* istanbul ignore next */ []));
+    moveReverseDuration = input(undefined, { ...(ngDevMode ? { debugName: "moveReverseDuration" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute$2 });
+    moveReverseEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveReverseEasing" }] : /* istanbul ignore next */ []));
     #defaults = inject(MOVEMENT_CONFIG);
     #documentRef = inject(DOCUMENT);
     #host = inject((ElementRef));
@@ -994,10 +1334,22 @@ class MoveTapDirective {
             return;
         let frames = resolveMoveFrames(this.moveWhileTap(), 'enter');
         if (reverse) {
+            const reverseDuration = this.moveReverseDuration();
+            if (reverseDuration === 0) {
+                clearComposedStyle(this.#host.nativeElement, Object.keys(frames));
+                return;
+            }
             frames = reverseFrames(frames);
         }
+        const reverseConfig = reverse
+            ? resolveMovementConfig({ ...this.#defaults, duration: 200, easing: 'ease-out', delay: 0 }, {
+                duration: this.moveReverseDuration() ?? this.moveDuration(),
+                easing: this.moveReverseEasing(),
+                delay: 0,
+            }, isReduced)
+            : config;
         this.#currentPlayer = this.#engine.play(this.#host.nativeElement, frames, {
-            config,
+            config: reverseConfig,
             spring: this.moveSpring(),
             disabled: false,
         });
@@ -1006,7 +1358,7 @@ class MoveTapDirective {
         this.#currentPlayer?.cancel();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveTapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveTapDirective, isStandalone: true, selector: "[moveWhileTap]", inputs: { moveWhileTap: { classPropertyName: "moveWhileTap", publicName: "moveWhileTap", 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 }, moveDisabled: { classPropertyName: "moveDisabled", publicName: "moveDisabled", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "onPointerDown()", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()", "pointerleave": "onPointerUp()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveTapDirective, isStandalone: true, selector: "[moveWhileTap]", inputs: { moveWhileTap: { classPropertyName: "moveWhileTap", publicName: "moveWhileTap", 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 }, moveDisabled: { classPropertyName: "moveDisabled", publicName: "moveDisabled", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", 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 } }, host: { listeners: { "pointerdown": "onPointerDown()", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()", "pointerleave": "onPointerUp()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveTapDirective, decorators: [{
             type: Directive,
@@ -1019,7 +1371,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                         '(pointerleave)': 'onPointerUp()',
                     },
                 }]
-        }], 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 }] }] } });
+        }], 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 }] }], moveReverseDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveReverseDuration", required: false }] }], moveReverseEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveReverseEasing", required: false }] }] } });
 
 class MoveStaggerDirective {
     moveStagger = input.required(...(ngDevMode ? [{ debugName: "moveStagger" }] : /* istanbul ignore next */ []));
@@ -1035,9 +1387,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 +1773,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 +2020,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 +2043,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 +2074,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 +2108,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 +2134,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 +2267,7 @@ class MoveTextDirective {
     #platformId = inject(PLATFORM_ID);
     #host = inject((ElementRef));
     #engine = inject(AnimationEngine);
+    #renderer = inject(Renderer2);
     #players = [];
     #spans = [];
     #observer = null;
@@ -1948,21 +2328,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 +2353,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 +2366,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 +2655,283 @@ 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$1(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$1 });
+    moveEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveEasing" }] : /* istanbul ignore next */ []));
+    moveDelay = input(undefined, { ...(ngDevMode ? { debugName: "moveDelay" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute$1 });
+    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$1 });
+    moveReverseEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveReverseEasing" }] : /* istanbul ignore next */ []));
+    moveTransition = input(undefined, ...(ngDevMode ? [{ debugName: "moveTransition" }] : /* 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,
+            transition: this.moveTransition(),
+        });
+    }
+    #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,
+            transition: this.moveTransition(),
+        });
+    }
+    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 }, moveTransition: { classPropertyName: "moveTransition", publicName: "moveTransition", 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 }] }], moveTransition: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveTransition", required: false }] }] } });
+
+function optionalNumberAttribute(value) {
+    if (value === undefined || value === null || value === '') {
+        return undefined;
+    }
+    return Number(value);
+}
+class MoveTriggerDirective {
+    moveTrigger = input.required(...(ngDevMode ? [{ debugName: "moveTrigger" }] : /* istanbul ignore next */ []));
+    moveFrames = input.required(...(ngDevMode ? [{ debugName: "moveFrames" }] : /* istanbul ignore next */ []));
+    moveResetFrames = input(undefined, ...(ngDevMode ? [{ debugName: "moveResetFrames" }] : /* istanbul ignore next */ []));
+    moveResetState = input('clear', ...(ngDevMode ? [{ debugName: "moveResetState" }] : /* 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;
+    #triggerEffect = effect(() => {
+        const active = this.moveTrigger();
+        const frames = this.moveFrames();
+        if (active) {
+            this.#playForward(frames);
+            this.#hasPlayedForward = true;
+            return;
+        }
+        if (this.#hasPlayedForward) {
+            this.#playReset(frames);
+        }
+    }, ...(ngDevMode ? [{ debugName: "#triggerEffect" }] : /* istanbul ignore next */ []));
+    play(frames) {
+        const targetFrames = frames ?? this.moveFrames();
+        this.#playForward(targetFrames);
+        this.#hasPlayedForward = true;
+        return this.#currentPlayer?.finished ?? Promise.resolve();
+    }
+    reset() {
+        this.#currentPlayer?.cancel();
+        const frames = this.moveFrames();
+        this.#applyReset(frames);
+    }
+    set(state) {
+        this.#currentPlayer?.cancel();
+        applyComposedStyle(this.#host.nativeElement, state);
+    }
+    #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,
+        });
+    }
+    #playReset(frames) {
+        this.#currentPlayer?.cancel();
+        const resetFrames = this.moveResetFrames();
+        if (resetFrames) {
+            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, resetFrames, {
+                config,
+                spring: this.moveSpring(),
+                disabled: config.disabled,
+            });
+            return;
+        }
+        const reverseDuration = this.moveReverseDuration();
+        if (reverseDuration === 0) {
+            this.#applyReset(frames);
+            return;
+        }
+        const isReduced = prefersReducedMotion(this.#documentRef);
+        const config = resolveMovementConfig({ ...this.#defaults, duration: 200, easing: 'ease-out', delay: 0 }, {
+            duration: reverseDuration ?? this.moveDuration(),
+            easing: this.moveReverseEasing(),
+            delay: 0,
+            disabled: this.moveDisabled(),
+        }, isReduced);
+        if (config.disabled) {
+            this.#applyReset(frames);
+            return;
+        }
+        // For triggers, reverse is typically not desired; we reset to initial/clear.
+        // We apply the initial style of the forward frames to restore state.
+        this.#applyReset(frames);
+    }
+    #applyReset(frames) {
+        const mode = this.moveResetState();
+        const host = this.#host.nativeElement;
+        if (mode === 'clear') {
+            clearComposedStyle(host, Object.keys(frames));
+            return;
+        }
+        if (mode === 'initial') {
+            clearComposedStyle(host, Object.keys(frames));
+            applyComposedStyle(host, composeInitialStyle(frames));
+            return;
+        }
+        if (mode === 'final') {
+            clearComposedStyle(host, Object.keys(frames));
+            applyComposedStyle(host, composeFinalStyle(frames));
+        }
+    }
+    ngOnDestroy() {
+        this.#triggerEffect.destroy();
+        this.#currentPlayer?.cancel();
+        const frames = this.moveFrames();
+        if (frames) {
+            clearComposedStyle(this.#host.nativeElement, Object.keys(frames));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveTriggerDirective, isStandalone: true, selector: "[moveTrigger]", inputs: { moveTrigger: { classPropertyName: "moveTrigger", publicName: "moveTrigger", isSignal: true, isRequired: true, transformFunction: null }, moveFrames: { classPropertyName: "moveFrames", publicName: "moveFrames", isSignal: true, isRequired: true, transformFunction: null }, moveResetFrames: { classPropertyName: "moveResetFrames", publicName: "moveResetFrames", isSignal: true, isRequired: false, transformFunction: null }, moveResetState: { classPropertyName: "moveResetState", publicName: "moveResetState", 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 }, 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 } }, exportAs: ["moveTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[moveTrigger]',
+                    standalone: true,
+                    exportAs: 'moveTrigger',
+                }]
+        }], propDecorators: { moveTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveTrigger", required: true }] }], moveFrames: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveFrames", required: true }] }], moveResetFrames: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveResetFrames", required: false }] }], moveResetState: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveResetState", 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 }] }], 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 }] }] } });
+
+/**
+ * Returns keyframes for a path-drawing animation.
+ * Ideal for SVG `<path>`, `<circle>`, `<line>`, etc.
+ *
+ * @example
+ * ```html
+ * <path [moveTarget]="animate()" [moveFrames]="movePathDraw({ opacity: [0, 1] })" moveDuration="700" />
+ * ```
+ */
+function movePathDraw(overrides) {
+    return {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        ...overrides,
+    };
+}
+/**
+ * Returns keyframes for a subtle pulse animation on an icon.
+ */
+function moveIconPulse(overrides) {
+    return {
+        scale: [1, 1.08, 1],
+        opacity: [1, 0.85, 1],
+        ...overrides,
+    };
+}
+/**
+ * Returns keyframes for a subtle bounce animation on an icon.
+ */
+function moveIconBounce(overrides) {
+    return {
+        y: [0, -3, 0],
+        ...overrides,
+    };
+}
+/**
+ * Returns keyframes for a subtle shake animation on an icon.
+ */
+function moveIconShake(overrides) {
+    return {
+        rotate: [0, -8, 8, -8, 8, 0],
+        ...overrides,
+    };
+}
+/**
+ * Returns keyframes for a subtle rotate animation on an icon.
+ */
+function moveIconRotate(overrides) {
+    return {
+        rotate: [0, 15, 0],
+        ...overrides,
+    };
+}
+
 function provideMovement(config = {}) {
     return makeEnvironmentProviders([
         {
@@ -2301,6 +2963,8 @@ const MOVEMENT_DIRECTIVES = [
     MoveParallaxDirective,
     MoveAnimationDirective,
     MoveLoopDirective,
+    MoveTargetDirective,
+    MoveTriggerDirective,
 ];
 
 /*
@@ -2311,5 +2975,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, MoveTriggerDirective, MoveVariantsDirective, SmoothScrollService, SpringPlayer, WaapiPlayer, applyInitialStyles, clearComposedStyle, clearInitialStyles, composeTransitionKeyframes, isValidScrollOffset, moveIconBounce, moveIconPulse, moveIconRotate, moveIconShake, movePathDraw, prefersReducedMotion, provideMovement, resolveMoveFrames, resolveMovementConfig, reverseFrames, validateDragElastic, validateSpring };
 //# sourceMappingURL=angular-movement.mjs.map