angular-movement 0.1.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-movement",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "type": "module",
   "description": "Angular animation directives — presets, custom keyframes, spring physics, scroll & parallax.",
   "keywords": [

package/types/angular-movement.d.ts

@@ -1,15 +1,22 @@
 import * as _angular_core from '@angular/core';
 import { InjectionToken, OnDestroy, OnInit, EnvironmentProviders } from '@angular/core';
 
-type MovePreset = 'fade-up' | 'fade-down' | 'fade-left' | 'fade-right' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'zoom-in' | 'zoom-out' | 'flip-x' | 'flip-y' | 'bounce-in' | 'blur-in' | 'spin' | 'pulse' | 'shake' | 'swing' | 'wobble' | 'rubber-band' | 'heart-beat' | 'tada' | 'jello' | 'light-speed' | 'roll-in' | 'none';
-type MoveValuePair = readonly number[];
+type MovePreset = 'fade-up' | 'fade-down' | 'fade-left' | 'fade-right' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'zoom-in' | 'zoom-out' | 'flip-x' | 'flip-y' | 'bounce-in' | 'blur-in' | 'spin' | 'pulse' | 'shake' | 'swing' | 'wobble' | 'rubber-band' | 'heart-beat' | 'tada' | 'jello' | 'light-speed' | 'roll-in' | 'icon-draw' | 'icon-pulse' | 'icon-bounce' | 'none';
+type MoveValue = number | string;
+type MoveValuePair = readonly MoveValue[];
 interface MoveSpring {
     stiffness?: number;
     damping?: number;
     mass?: number;
     velocity?: number;
 }
-interface MoveKeyframes {
+interface MovePropertyTransition {
+    duration?: number;
+    easing?: string;
+    delay?: number;
+}
+type MoveTransitionConfig = MovePropertyTransition & Record<string, MovePropertyTransition | MoveValue | undefined>;
+interface MoveKeyframeProperties {
     opacity?: MoveValuePair;
     x?: MoveValuePair;
     y?: MoveValuePair;
@@ -20,13 +27,21 @@ interface MoveKeyframes {
     rotateX?: MoveValuePair;
     rotateY?: MoveValuePair;
     blur?: MoveValuePair;
-    [key: string]: MoveValuePair | undefined;
-}
-type MoveVariant = MoveKeyframes & {
+    pathLength?: MoveValuePair;
+    pathOffset?: MoveValuePair;
+    pathSpacing?: MoveValuePair;
+    strokeDashoffset?: MoveValuePair;
+    strokeDasharray?: MoveValuePair;
+    fillOpacity?: MoveValuePair;
+    strokeOpacity?: MoveValuePair;
+}
+type MoveKeyframes = MoveKeyframeProperties & Record<string, MoveValuePair | undefined>;
+type MoveVariant = MoveKeyframeProperties & {
     spring?: MoveSpring;
     duration?: number;
     easing?: string;
     delay?: number;
+    transition?: MoveTransitionConfig;
 };
 interface MovePresetDefinition {
     enter: MoveKeyframes;
@@ -44,7 +59,14 @@ interface MoveKeyframeState {
     rotateX?: number;
     rotateY?: number;
     blur?: number;
-    [key: string]: number | undefined;
+    pathLength?: number;
+    pathOffset?: number;
+    pathSpacing?: number;
+    strokeDashoffset?: number;
+    strokeDasharray?: string;
+    fillOpacity?: number;
+    strokeOpacity?: number;
+    [key: string]: number | string | undefined;
 }
 interface MoveAnimationConfig {
     initial?: MoveKeyframeState;
@@ -126,11 +148,13 @@ declare class MoveLeaveDirective implements OnDestroy, OnInit, MovePresenceChild
 declare class MoveHoverDirective implements OnDestroy {
     #private;
     readonly moveWhileHover: _angular_core.InputSignal<MovePreset | MoveKeyframes>;
-    readonly moveDuration: _angular_core.InputSignal<number | undefined>;
+    readonly moveDuration: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
     readonly moveEasing: _angular_core.InputSignal<string | undefined>;
-    readonly moveDelay: _angular_core.InputSignal<number | undefined>;
+    readonly moveDelay: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
     readonly moveDisabled: _angular_core.InputSignal<boolean | undefined>;
     readonly moveSpring: _angular_core.InputSignal<MoveSpring | undefined>;
+    readonly moveReverseDuration: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    readonly moveReverseEasing: _angular_core.InputSignal<string | undefined>;
     onMouseEnter(): void;
     onMouseLeave(): void;
     onTouchStart(event: TouchEvent): void;
@@ -138,23 +162,25 @@ declare class MoveHoverDirective implements OnDestroy {
     private play;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MoveHoverDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MoveHoverDirective, "[moveWhileHover]", never, { "moveWhileHover": { "alias": "moveWhileHover"; "required": true; "isSignal": true; }; "moveDuration": { "alias": "moveDuration"; "required": false; "isSignal": true; }; "moveEasing": { "alias": "moveEasing"; "required": false; "isSignal": true; }; "moveDelay": { "alias": "moveDelay"; "required": false; "isSignal": true; }; "moveDisabled": { "alias": "moveDisabled"; "required": false; "isSignal": true; }; "moveSpring": { "alias": "moveSpring"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MoveHoverDirective, "[moveWhileHover]", never, { "moveWhileHover": { "alias": "moveWhileHover"; "required": true; "isSignal": true; }; "moveDuration": { "alias": "moveDuration"; "required": false; "isSignal": true; }; "moveEasing": { "alias": "moveEasing"; "required": false; "isSignal": true; }; "moveDelay": { "alias": "moveDelay"; "required": false; "isSignal": true; }; "moveDisabled": { "alias": "moveDisabled"; "required": false; "isSignal": true; }; "moveSpring": { "alias": "moveSpring"; "required": false; "isSignal": true; }; "moveReverseDuration": { "alias": "moveReverseDuration"; "required": false; "isSignal": true; }; "moveReverseEasing": { "alias": "moveReverseEasing"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class MoveTapDirective implements OnDestroy {
     #private;
     readonly moveWhileTap: _angular_core.InputSignal<MovePreset | MoveKeyframes>;
-    readonly moveDuration: _angular_core.InputSignal<number | undefined>;
+    readonly moveDuration: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
     readonly moveEasing: _angular_core.InputSignal<string | undefined>;
-    readonly moveDelay: _angular_core.InputSignal<number | undefined>;
+    readonly moveDelay: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
     readonly moveDisabled: _angular_core.InputSignal<boolean | undefined>;
     readonly moveSpring: _angular_core.InputSignal<MoveSpring | undefined>;
+    readonly moveReverseDuration: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    readonly moveReverseEasing: _angular_core.InputSignal<string | undefined>;
     onPointerDown(): void;
     onPointerUp(): void;
     private play;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MoveTapDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MoveTapDirective, "[moveWhileTap]", never, { "moveWhileTap": { "alias": "moveWhileTap"; "required": true; "isSignal": true; }; "moveDuration": { "alias": "moveDuration"; "required": false; "isSignal": true; }; "moveEasing": { "alias": "moveEasing"; "required": false; "isSignal": true; }; "moveDelay": { "alias": "moveDelay"; "required": false; "isSignal": true; }; "moveDisabled": { "alias": "moveDisabled"; "required": false; "isSignal": true; }; "moveSpring": { "alias": "moveSpring"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MoveTapDirective, "[moveWhileTap]", never, { "moveWhileTap": { "alias": "moveWhileTap"; "required": true; "isSignal": true; }; "moveDuration": { "alias": "moveDuration"; "required": false; "isSignal": true; }; "moveEasing": { "alias": "moveEasing"; "required": false; "isSignal": true; }; "moveDelay": { "alias": "moveDelay"; "required": false; "isSignal": true; }; "moveDisabled": { "alias": "moveDisabled"; "required": false; "isSignal": true; }; "moveSpring": { "alias": "moveSpring"; "required": false; "isSignal": true; }; "moveReverseDuration": { "alias": "moveReverseDuration"; "required": false; "isSignal": true; }; "moveReverseEasing": { "alias": "moveReverseEasing"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 interface MoveVariantsProvider {
@@ -376,11 +402,35 @@ declare class MoveTargetDirective implements OnDestroy {
     readonly moveDisabled: _angular_core.InputSignal<boolean | undefined>;
     readonly moveReverseDuration: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
     readonly moveReverseEasing: _angular_core.InputSignal<string | undefined>;
+    readonly moveTransition: _angular_core.InputSignal<MoveTransitionConfig | undefined>;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MoveTargetDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MoveTargetDirective, "[moveTarget]", never, { "moveTarget": { "alias": "moveTarget"; "required": true; "isSignal": true; }; "moveFrames": { "alias": "moveFrames"; "required": true; "isSignal": true; }; "moveDuration": { "alias": "moveDuration"; "required": false; "isSignal": true; }; "moveEasing": { "alias": "moveEasing"; "required": false; "isSignal": true; }; "moveDelay": { "alias": "moveDelay"; "required": false; "isSignal": true; }; "moveSpring": { "alias": "moveSpring"; "required": false; "isSignal": true; }; "moveDisabled": { "alias": "moveDisabled"; "required": false; "isSignal": true; }; "moveReverseDuration": { "alias": "moveReverseDuration"; "required": false; "isSignal": true; }; "moveReverseEasing": { "alias": "moveReverseEasing"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MoveTargetDirective, "[moveTarget]", never, { "moveTarget": { "alias": "moveTarget"; "required": true; "isSignal": true; }; "moveFrames": { "alias": "moveFrames"; "required": true; "isSignal": true; }; "moveDuration": { "alias": "moveDuration"; "required": false; "isSignal": true; }; "moveEasing": { "alias": "moveEasing"; "required": false; "isSignal": true; }; "moveDelay": { "alias": "moveDelay"; "required": false; "isSignal": true; }; "moveSpring": { "alias": "moveSpring"; "required": false; "isSignal": true; }; "moveDisabled": { "alias": "moveDisabled"; "required": false; "isSignal": true; }; "moveReverseDuration": { "alias": "moveReverseDuration"; "required": false; "isSignal": true; }; "moveReverseEasing": { "alias": "moveReverseEasing"; "required": false; "isSignal": true; }; "moveTransition": { "alias": "moveTransition"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+declare class MoveTriggerDirective implements OnDestroy {
+    #private;
+    readonly moveTrigger: _angular_core.InputSignal<boolean>;
+    readonly moveFrames: _angular_core.InputSignal<MoveKeyframes>;
+    readonly moveResetFrames: _angular_core.InputSignal<MoveKeyframes | undefined>;
+    readonly moveResetState: _angular_core.InputSignal<"initial" | "final" | "clear">;
+    readonly moveDuration: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    readonly moveEasing: _angular_core.InputSignal<string | undefined>;
+    readonly moveDelay: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    readonly moveSpring: _angular_core.InputSignal<MoveSpring | undefined>;
+    readonly moveDisabled: _angular_core.InputSignal<boolean | undefined>;
+    readonly moveReverseDuration: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    readonly moveReverseEasing: _angular_core.InputSignal<string | undefined>;
+    play(frames?: MoveKeyframes): Promise<void>;
+    reset(): void;
+    set(state: MoveKeyframeState): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MoveTriggerDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MoveTriggerDirective, "[moveTrigger]", ["moveTrigger"], { "moveTrigger": { "alias": "moveTrigger"; "required": true; "isSignal": true; }; "moveFrames": { "alias": "moveFrames"; "required": true; "isSignal": true; }; "moveResetFrames": { "alias": "moveResetFrames"; "required": false; "isSignal": true; }; "moveResetState": { "alias": "moveResetState"; "required": false; "isSignal": true; }; "moveDuration": { "alias": "moveDuration"; "required": false; "isSignal": true; }; "moveEasing": { "alias": "moveEasing"; "required": false; "isSignal": true; }; "moveDelay": { "alias": "moveDelay"; "required": false; "isSignal": true; }; "moveSpring": { "alias": "moveSpring"; "required": false; "isSignal": true; }; "moveDisabled": { "alias": "moveDisabled"; "required": false; "isSignal": true; }; "moveReverseDuration": { "alias": "moveReverseDuration"; "required": false; "isSignal": true; }; "moveReverseEasing": { "alias": "moveReverseEasing"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare function clearComposedStyle(el: Element, extraKeys?: readonly string[]): void;
+
 interface MovementConfig {
     duration: number;
     easing: string;
@@ -488,10 +538,11 @@ interface PlayAnimationOptions {
     disabled?: boolean;
     iterations?: number;
     onDone?: () => void;
+    transition?: MoveTransitionConfig;
 }
 declare class AnimationEngine {
     #private;
-    play(host: Element, frames: MoveKeyframes, options?: PlayAnimationOptions): AnimationControls | null;
+    play(host: Element, rawFrames: MoveKeyframes, options?: PlayAnimationOptions): AnimationControls | null;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AnimationEngine, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<AnimationEngine>;
 }
@@ -515,7 +566,7 @@ declare class SpringPlayer implements AnimationControls {
 declare class WaapiPlayer implements AnimationControls {
     #private;
     readonly finished: Promise<void>;
-    constructor(host: Element, frames: MoveKeyframes, config: MovementConfig, onDone?: () => void);
+    constructor(host: Element, frames: MoveKeyframes | Keyframe[], config: MovementConfig, onDone?: () => void);
     play(): void;
     pause(): void;
     cancel(): void;
@@ -523,12 +574,47 @@ declare class WaapiPlayer implements AnimationControls {
     set currentTime(time: number);
 }
 
+interface ResolvedTransition {
+    keyframes: Keyframe[];
+    duration: number;
+    easing: string;
+    delay: number;
+}
+declare function composeTransitionKeyframes(frames: MoveKeyframes, transition: MoveTransitionConfig, baseConfig: MovementConfig): ResolvedTransition | null;
+
 declare const MOVE_PRESETS: Record<MovePreset, MovePresetDefinition>;
 
+/**
+ * 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" />
+ * ```
+ */
+declare function movePathDraw(overrides?: Partial<MoveKeyframes>): MoveKeyframes;
+/**
+ * Returns keyframes for a subtle pulse animation on an icon.
+ */
+declare function moveIconPulse(overrides?: Partial<MoveKeyframes>): MoveKeyframes;
+/**
+ * Returns keyframes for a subtle bounce animation on an icon.
+ */
+declare function moveIconBounce(overrides?: Partial<MoveKeyframes>): MoveKeyframes;
+/**
+ * Returns keyframes for a subtle shake animation on an icon.
+ */
+declare function moveIconShake(overrides?: Partial<MoveKeyframes>): MoveKeyframes;
+/**
+ * Returns keyframes for a subtle rotate animation on an icon.
+ */
+declare function moveIconRotate(overrides?: Partial<MoveKeyframes>): MoveKeyframes;
+
 type MovementConfigInput = Partial<MovementConfig>;
 declare function provideMovement(config?: MovementConfigInput): EnvironmentProviders;
 
-declare const MOVEMENT_DIRECTIVES: readonly [typeof MoveEnterDirective, typeof MoveLeaveDirective, typeof MoveAnimateDirective, typeof MoveHoverDirective, typeof MoveTapDirective, typeof MoveVariantsDirective, typeof MoveStaggerDirective, typeof MoveLayoutDirective, typeof MoveScrollDirective, typeof MovePresenceDirective, typeof MoveDragDirective, typeof MoveInViewDirective, typeof MoveTextDirective, typeof MoveSmoothScrollDirective, typeof MoveFocusDirective, typeof MoveParallaxDirective, typeof MoveAnimationDirective, typeof MoveLoopDirective, typeof MoveTargetDirective];
+declare const MOVEMENT_DIRECTIVES: readonly [typeof MoveEnterDirective, typeof MoveLeaveDirective, typeof MoveAnimateDirective, typeof MoveHoverDirective, typeof MoveTapDirective, typeof MoveVariantsDirective, typeof MoveStaggerDirective, typeof MoveLayoutDirective, typeof MoveScrollDirective, typeof MovePresenceDirective, typeof MoveDragDirective, typeof MoveInViewDirective, typeof MoveTextDirective, typeof MoveSmoothScrollDirective, typeof MoveFocusDirective, typeof MoveParallaxDirective, typeof MoveAnimationDirective, typeof MoveLoopDirective, typeof MoveTargetDirective, typeof MoveTriggerDirective];
 
-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 };
-export type { AnimationControls, MoveAnimationConfig, MoveDirectiveInput, MoveDragConstraints, MoveInputOverrides, MoveKeyframeState, MoveKeyframes, MovePhase, MovePresenceChild, MovePresenceProvider, MovePreset, MovePresetDefinition, MoveSpring, MoveStaggerDirection, MoveStaggerProvider, MoveValuePair, MoveVariant, MoveVariantsProvider, MovementConfig, MovementConfigInput, PlayAnimationOptions };
+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 };
+export type { AnimationControls, MoveAnimationConfig, MoveDirectiveInput, MoveDragConstraints, MoveInputOverrides, MoveKeyframeProperties, MoveKeyframeState, MoveKeyframes, MovePhase, MovePresenceChild, MovePresenceProvider, MovePreset, MovePresetDefinition, MovePropertyTransition, MoveSpring, MoveStaggerDirection, MoveStaggerProvider, MoveTransitionConfig, MoveValue, MoveValuePair, MoveVariant, MoveVariantsProvider, MovementConfig, MovementConfigInput, PlayAnimationOptions, ResolvedTransition };