ngx-lottie/types/ngx-lottie.d.ts

<h1 align="center"> <img src="https://raw.githubusercontent.com/ngx-lottie/ngx-lottie/master/docs/assets/lottie.gif"> </h1>

import * as lottie_web from 'lottie-web';
import * as rxjs from 'rxjs';
import { Observable } from 'rxjs';
import * as i0 from '@angular/core';
import { InjectionToken, Provider, OnDestroy, SimpleChanges, OnChanges, ElementRef } from '@angular/core';

interface BMEnterFrameEvent {
    type: 'enterFrame';
    currentTime: number;
    totalTime: number;
    duration: number;
}
interface BMCompleteLoopEvent {
    type: 'loopComplete';
    currentLoop: boolean | number;
    totalLoops: number;
    direction: number;
}
interface BMCompleteEvent {
    type: 'complete';
    direction: number;
}
interface BMSegmentStartEvent {
    type: 'segmentStart';
    firstFrame: number;
    totalFrames: number;
}
interface BMDestroyEvent {
    target: AnimationItem;
    type: 'destroy';
}
interface BMRenderFrameErrorEvent {
    type: 'renderFrameError';
    nativeError: Error;
    currentTime: number;
}
interface BMConfigErrorEvent {
    type: 'configError';
    nativeError: Error;
}
type AnimationFilename = string;
type AnimationItem = lottie_web.AnimationItem;
type LottiePlayer = typeof lottie_web.default;
/**
 * @example
 * import player from 'lottie-web';
 * const factory = () => player;
 */
type LottiePlayerFactory = () => LottiePlayer;
/**
 * @example
 * const factory = () => import('lottie-web');
 */
type LottieLoader = () => Promise<typeof lottie_web>;
type LottiePlayerFactoryOrLoader = LottiePlayerFactory | LottieLoader;
interface LottieOptions {
    useWebWorker?: boolean;
    player: LottiePlayerFactoryOrLoader;
}
type RendererType = lottie_web.RendererType;
type AnimationConfigWithData<R extends RendererType = 'svg'> = lottie_web.AnimationConfigWithData<R>;
type AnimationConfigWithPath<R extends RendererType = 'svg'> = lottie_web.AnimationConfigWithPath<R>;
type AnimationOptions<R extends RendererType = 'svg'> = Partial<AnimationConfigWithData<R>> | Partial<AnimationConfigWithPath<R>>;
declare const LOTTIE_OPTIONS: InjectionToken<LottieOptions>;

declare class AnimationLoader {
    protected player$: Observable<lottie_web.LottiePlayer>;
    private ngZone;
    loadAnimation(options: AnimationConfigWithData | AnimationConfigWithPath): Observable<AnimationItem>;
    resolveOptions(options: AnimationOptions | null, container: HTMLElement): AnimationConfigWithData | AnimationConfigWithPath;
    protected createAnimationItem(player: LottiePlayer, options: AnimationConfigWithData | AnimationConfigWithPath): AnimationItem;
    static ɵfac: i0.ɵɵFactoryDeclaration<AnimationLoader, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<AnimationLoader>;
}

declare function provideCacheableAnimationLoader(): Provider[];
declare function provideLottieOptions(options: LottieOptions): Provider[];

declare class BaseDirective implements OnDestroy {
    options: i0.InputSignal<AnimationOptions | null>;
    containerClass: i0.InputSignal<string | null>;
    styles: i0.InputSignal<Partial<CSSStyleDeclaration> | null>;
    /**
     * `animationCreated` is dispatched after calling `loadAnimation`.
     */
    readonly animationCreated: Observable<lottie_web.AnimationItem>;
    /**
     * `complete` is dispatched after completing the last frame.
     */
    readonly complete: Observable<BMCompleteEvent>;
    /**
     * `loopComplete` is dispatched after completing the frame loop.
     */
    readonly loopComplete: Observable<BMCompleteLoopEvent>;
    /**
     * `enterFrame` is dispatched after entering the new frame.
     */
    readonly enterFrame: Observable<BMEnterFrameEvent>;
    /**
     * `segmentStart` is dispatched when the new segment is adjusted.
     */
    readonly segmentStart: Observable<BMSegmentStartEvent>;
    /**
     * Original event name is `config_ready`. `config_ready` is dispatched
     * after the needed renderer is configured.
     */
    readonly configReady: Observable<void>;
    /**
     * Original event name is `data_ready`. `data_ready` is dispatched
     * when all parts of the animation have been loaded.
     */
    readonly dataReady: Observable<void>;
    /**
     * Original event name is `DOMLoaded`. `DOMLoaded` is dispatched
     * when elements have been added to the DOM.
     */
    readonly domLoaded: Observable<void>;
    /**
     * `destroy` will be dispatched when the component gets destroyed,
     * it's handy for releasing resources.
     */
    readonly destroy: Observable<BMDestroyEvent>;
    /**
     * `error` will be dispatched if the Lottie player could not render
     * some frame or parse config.
     */
    readonly error: Observable<BMRenderFrameErrorEvent | BMConfigErrorEvent>;
    private ngZone;
    private isBrowser;
    private animationLoader;
    private loadAnimation$;
    private animationItem$;
    constructor();
    ngOnDestroy(): void;
    protected loadAnimation(changes: SimpleChanges, container: HTMLElement): void;
    private getAnimationItem;
    private awaitAnimationItemAndStartListening;
    private setupLoadAnimationListener;
    private destroyAnimation;
    static ɵfac: i0.ɵɵFactoryDeclaration<BaseDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseDirective, "[lottie]", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "containerClass": { "alias": "containerClass"; "required": false; "isSignal": true; }; "styles": { "alias": "styles"; "required": false; "isSignal": true; }; }, { "animationCreated": "animationCreated"; "complete": "complete"; "loopComplete": "loopComplete"; "enterFrame": "enterFrame"; "segmentStart": "segmentStart"; "configReady": "configReady"; "dataReady": "dataReady"; "domLoaded": "domLoaded"; "destroy": "destroy"; "error": "error"; }, never, never, true, never>;
}

declare class LottieDirective extends BaseDirective implements OnChanges {
    private host;
    ngOnChanges(changes: SimpleChanges): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<LottieDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<LottieDirective, "[lottie]", never, {}, {}, never, never, true, never>;
}

declare class LottieComponent extends BaseDirective implements OnChanges {
    width: i0.InputSignal<string | null>;
    height: i0.InputSignal<string | null>;
    container: ElementRef<HTMLElement>;
    ngOnChanges(changes: SimpleChanges): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<LottieComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<LottieComponent, "ng-lottie", never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

declare class LottieTransferState {
    private transferState;
    get<T>(animation: AnimationFilename): T | null;
    static ɵfac: i0.ɵɵFactoryDeclaration<LottieTransferState, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<LottieTransferState>;
}

declare function transformAnimationFilenameToKey(animation: AnimationFilename): string;

declare class CacheableAnimationLoader extends AnimationLoader {
    /** Cache storing animation data as JSON strings, keyed by file path */
    private cache;
    /** Tracks in-flight HTTP requests to prevent duplicate fetches for the same animation */
    private pending;
    constructor();
    loadAnimation(options: AnimationConfigWithData | AnimationConfigWithPath): rxjs.Observable<lottie_web.AnimationItem>;
    /**
     * Sets up caching for path-based animations by listening to the `config_ready` event.
     * Only the first request for a given path will register this listener - subsequent
     * requests will be handled by transformOptions.
     */
    private awaitConfigAndCache;
    /**
     * Transforms animation options to use cached data when available or wait for
     * pending requests to complete. This prevents duplicate HTTP requests.
     *
     * Flow:
     * 1. If cached: return immediately with `animationData`
     * 2. If loading: await the pending promise, then return with `animationData`
     * 3. If first request: return original options with path (triggers HTTP fetch)
     */
    private transformOptions;
    private isAnimationConfigWithPath;
    static ɵfac: i0.ɵɵFactoryDeclaration<CacheableAnimationLoader, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<CacheableAnimationLoader>;
}

export { AnimationLoader, BaseDirective, LottieComponent, LottieDirective, LottieTransferState, provideCacheableAnimationLoader, provideLottieOptions, transformAnimationFilenameToKey, CacheableAnimationLoader as ɵCacheableAnimationLoader, LOTTIE_OPTIONS as ɵLOTTIE_OPTIONS };
export type { AnimationFilename, AnimationOptions, BMCompleteEvent, BMCompleteLoopEvent, BMConfigErrorEvent, BMDestroyEvent, BMEnterFrameEvent, BMRenderFrameErrorEvent, BMSegmentStartEvent };