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

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

import * as _lottiefiles_dotlottie_web from '@lottiefiles/dotlottie-web';
import { DotLottie, DotLottieWorker, Data, Layout, Mode, RenderConfig, StateMachineConfig } from '@lottiefiles/dotlottie-web';
import * as _angular_core from '@angular/core';
import { OutputEmitterRef, EnvironmentProviders } from '@angular/core';

type BooleanInput = boolean | `${boolean}` | '' | null | undefined;

declare abstract class ɵɵBaseDotLottieDirective {
    /**
     * Static flag to track if WASM URL has been configured globally.
     */
    private static wasmUrlConfigured;
    protected readonly instance: _angular_core.WritableSignal<DotLottie | DotLottieWorker | undefined>;
    private readonly isLoaded;
    private readonly canvas;
    private readonly ngZone;
    readonly className: _angular_core.InputSignal<string | undefined>;
    readonly containerStyles: _angular_core.InputSignal<Record<string, string> | undefined>;
    readonly animationId: _angular_core.InputSignal<string | undefined>;
    readonly autoplay: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
    readonly backgroundColor: _angular_core.InputSignal<string | undefined>;
    readonly data: _angular_core.InputSignal<Data | undefined>;
    readonly layout: _angular_core.InputSignal<Layout | undefined>;
    readonly loop: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
    readonly marker: _angular_core.InputSignal<string | undefined>;
    readonly mode: _angular_core.InputSignal<Mode | undefined>;
    readonly renderConfig: _angular_core.InputSignal<RenderConfig | undefined>;
    readonly segment: _angular_core.InputSignal<[number, number] | undefined>;
    readonly speed: _angular_core.InputSignal<number | undefined>;
    readonly src: _angular_core.InputSignal<string | undefined>;
    readonly themeId: _angular_core.InputSignal<string | undefined>;
    readonly useFrameInterpolation: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
    readonly stateMachineId: _angular_core.InputSignal<string | undefined>;
    readonly stateMachineConfig: _angular_core.InputSignal<StateMachineConfig | undefined>;
    abstract readonly dotLottieCreated: OutputEmitterRef<DotLottie | DotLottieWorker>;
    /**
     * Emitted when the animation completes playback.
     */
    readonly complete: _angular_core.OutputRef<_lottiefiles_dotlottie_web.CompleteEvent>;
    /**
     * Emitted when the animation has successfully loaded.
     */
    readonly load: _angular_core.OutputRef<_lottiefiles_dotlottie_web.LoadEvent>;
    /**
     * Emitted when an error occurs during animation loading.
     */
    readonly loadError: _angular_core.OutputRef<_lottiefiles_dotlottie_web.LoadErrorEvent>;
    /**
     * Emitted when an error occurs during animation rendering.
     */
    readonly renderError: _angular_core.OutputRef<_lottiefiles_dotlottie_web.RenderErrorEvent>;
    /**
     * Emitted when the animation is paused.
     */
    readonly pause: _angular_core.OutputRef<_lottiefiles_dotlottie_web.PauseEvent>;
    /**
     * Emitted when the animation starts playing.
     */
    readonly play: _angular_core.OutputRef<_lottiefiles_dotlottie_web.PlayEvent>;
    /**
     * Emitted when the animation is stopped.
     */
    readonly stop: _angular_core.OutputRef<_lottiefiles_dotlottie_web.StopEvent>;
    /**
     * Emitted when the animation instance is destroyed.
     */
    readonly destroy: _angular_core.OutputRef<_lottiefiles_dotlottie_web.DestroyEvent>;
    /**
     * Emitted when the WASM module is initialized and ready.
     */
    readonly ready: _angular_core.OutputRef<_lottiefiles_dotlottie_web.ReadyEvent>;
    /**
     * Emitted on each frame change. Useful for tracking the current frame.
     */
    readonly frame: _angular_core.OutputRef<_lottiefiles_dotlottie_web.FrameEvent>;
    /**
     * Emitted when the animation is frozen (rendering paused).
     */
    readonly freeze: _angular_core.OutputRef<_lottiefiles_dotlottie_web.FreezeEvent>;
    /**
     * Emitted when the animation is unfrozen (rendering resumed).
     */
    readonly unfreeze: _angular_core.OutputRef<_lottiefiles_dotlottie_web.UnfreezeEvent>;
    protected readonly mergedContainerStyles: _angular_core.Signal<{
        width: string;
        height: string;
        lineHeight: string;
    }>;
    protected canvasStyles: {
        width: string;
        height: string;
    };
    constructor();
    private render;
    private buildConfig;
    private awaitInstanceAndStartListening;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ɵɵBaseDotLottieDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ɵɵBaseDotLottieDirective, never, never, { "className": { "alias": "className"; "required": false; "isSignal": true; }; "containerStyles": { "alias": "containerStyles"; "required": false; "isSignal": true; }; "animationId": { "alias": "animationId"; "required": false; "isSignal": true; }; "autoplay": { "alias": "autoplay"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "loop": { "alias": "loop"; "required": false; "isSignal": true; }; "marker": { "alias": "marker"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "renderConfig": { "alias": "renderConfig"; "required": false; "isSignal": true; }; "segment": { "alias": "segment"; "required": false; "isSignal": true; }; "speed": { "alias": "speed"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "themeId": { "alias": "themeId"; "required": false; "isSignal": true; }; "useFrameInterpolation": { "alias": "useFrameInterpolation"; "required": false; "isSignal": true; }; "stateMachineId": { "alias": "stateMachineId"; "required": false; "isSignal": true; }; "stateMachineConfig": { "alias": "stateMachineConfig"; "required": false; "isSignal": true; }; }, { "complete": "complete"; "load": "load"; "loadError": "loadError"; "renderError": "renderError"; "pause": "pause"; "play": "play"; "stop": "stop"; "destroy": "destroy"; "ready": "ready"; "frame": "frame"; "freeze": "freeze"; "unfreeze": "unfreeze"; }, never, never, true, never>;
}

/**
 * Separate DotLottie and DotLottieWorker components architecture
 *
 * WHY TWO COMPONENTS INSTEAD OF ONE WITH CONFIGURATION:
 *
 * 1. **Type Safety**: Each component has a precise output type (DotLottie vs DotLottieWorker).
 *    Users get compile-time guarantees about which instance type they're working with.
 *    A single configurable component would require runtime type checking and type assertions.
 *
 * 2. **Clear Intent**: The component selector itself (`ng-dotlottie` vs `ng-dotlottie-worker`)
 *    explicitly communicates which rendering strategy is being used. No need to inspect
 *    configuration to understand the behavior.
 *
 * 3. **Bundle Optimization**: Tree-shaking works better with separate components. If an app
 *    only uses `ng-dotlottie`, the DotLottieWorker code can be completely eliminated from
 *    the bundle. A single component would bundle both implementations.
 *
 * 4. **Simpler API**: No configuration prop needed (e.g., `useWorker` boolean). Less surface
 *    area for bugs - users can't accidentally misconfigure or change modes at runtime.
 *
 * 5. **Performance Predictability**: DotLottie and DotLottieWorker have different performance
 *    characteristics and browser support. Separate components make this distinction explicit
 *    and prevent unintended mode switching during the component lifecycle.
 *
 * 6. **Maintainability**: If DotLottie and DotLottieWorker diverge in their APIs or
 *    initialization logic in future library versions, handling them separately is cleaner
 *    than conditional logic scattered throughout a single component.
 *
 * 7. **Testing**: Each component can be tested independently with focused test suites.
 *    No need for parameterized tests or complex setup to cover both modes.
 *
 * TRADE-OFF:
 * - Slight code duplication (two component classes), but shared implementation in
 *   ɵɵBaseDotLottieDirective minimizes this. The duplication is purely declarative
 *   (selector, output type override) which is acceptable for the benefits gained.
 */
declare class DotLottieComponent extends ɵɵBaseDotLottieDirective {
    readonly dotLottieCreated: _angular_core.OutputEmitterRef<_lottiefiles_dotlottie_web.DotLottie>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DotLottieComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DotLottieComponent, "ng-dotlottie", never, {}, { "dotLottieCreated": "dotLottieCreated"; }, never, never, true, never>;
}

/**
 * Separate DotLottie and DotLottieWorker components architecture
 *
 * WHY TWO COMPONENTS INSTEAD OF ONE WITH CONFIGURATION:
 *
 * 1. **Type Safety**: Each component has a precise output type (DotLottie vs DotLottieWorker).
 *    Users get compile-time guarantees about which instance type they're working with.
 *    A single configurable component would require runtime type checking and type assertions.
 *
 * 2. **Clear Intent**: The component selector itself (`ng-dotlottie` vs `ng-dotlottie-worker`)
 *    explicitly communicates which rendering strategy is being used. No need to inspect
 *    configuration to understand the behavior.
 *
 * 3. **Bundle Optimization**: Tree-shaking works better with separate components. If an app
 *    only uses `ng-dotlottie`, the DotLottieWorker code can be completely eliminated from
 *    the bundle. A single component would bundle both implementations.
 *
 * 4. **Simpler API**: No configuration prop needed (e.g., `useWorker` boolean). Less surface
 *    area for bugs - users can't accidentally misconfigure or change modes at runtime.
 *
 * 5. **Performance Predictability**: DotLottie and DotLottieWorker have different performance
 *    characteristics and browser support. Separate components make this distinction explicit
 *    and prevent unintended mode switching during the component lifecycle.
 *
 * 6. **Maintainability**: If DotLottie and DotLottieWorker diverge in their APIs or
 *    initialization logic in future library versions, handling them separately is cleaner
 *    than conditional logic scattered throughout a single component.
 *
 * 7. **Testing**: Each component can be tested independently with focused test suites.
 *    No need for parameterized tests or complex setup to cover both modes.
 *
 * TRADE-OFF:
 * - Slight code duplication (two component classes), but shared implementation in
 *   ɵɵBaseDotLottieDirective minimizes this. The duplication is purely declarative
 *   (selector, output type override) which is acceptable for the benefits gained.
 */
declare class DotLottieWorkerComponent extends ɵɵBaseDotLottieDirective {
    readonly dotLottieCreated: _angular_core.OutputEmitterRef<_lottiefiles_dotlottie_web.DotLottieWorker>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DotLottieWorkerComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DotLottieWorkerComponent, "ng-dotlottie-worker", never, {}, { "dotLottieCreated": "dotLottieCreated"; }, never, never, true, never>;
}

/**
 * Factory function that returns the `DotLottie` player class synchronously.
 * Use this when bundling package directly in your application bundle.
 *
 * @example
 * import { DotLottieWorker } from '@lottiefiles/dotlottie-web';
 * const player = () => DotLottieWorker;
 */
type DotLottiePlayerFactory = () => typeof _lottiefiles_dotlottie_web.DotLottie | typeof _lottiefiles_dotlottie_web.DotLottieWorker;
/**
 * Loader function that returns a Promise resolving to the `DotLottie` player class.
 * Use this for lazy-loading package to reduce initial bundle size.
 * The library will only be loaded when the first animation is created.
 *
 * @example
 * const player = () => import('@lottiefiles/dotlottie-web').then(({ DotLottie }) => DotLottie);
 */
type DotLottiePlayerLoader = () => Promise<typeof _lottiefiles_dotlottie_web.DotLottie | typeof _lottiefiles_dotlottie_web.DotLottieWorker>;
/**
 * Union type allowing either synchronous or asynchronous `DotLottie` player class loading.
 */
type DotLottiePlayerFactoryOrLoader = DotLottiePlayerFactory | DotLottiePlayerLoader;
interface DotLottieOptions {
    player: DotLottiePlayerFactoryOrLoader;
}

/**
 * Provides DotLottie configuration and optional features for the application.
 *
 * @param options - Configuration specifying how to load the `DotLottie` player class
 * @param features - Additional feature providers (e.g., `withDotLottieWasmUrl`)
 * @returns Environment providers for dependency injection
 *
 * @example
 * // Synchronous loading
 * import { DotLottie } from '@lottiefiles/dotlottie-web';
 *
 * export const appConfig: ApplicationConfig = {
 *   providers: [
 *     provideDotLottie({
 *       player: () => DotLottie,
 *     }),
 *   ],
 * };
 *
 * @example
 * // Lazy loading with custom WASM URL
 * export const appConfig: ApplicationConfig = {
 *   providers: [
 *     provideDotLottie(
 *       {
 *         player: () => import('@lottiefiles/dotlottie-web').then(m => m.DotLottie),
 *       },
 *       withDotLottieWasmUrl('/assets/dotlottie-player.wasm'),
 *     ),
 *   ],
 * };
 */
declare function provideDotLottie(options: DotLottieOptions, ...features: EnvironmentProviders[]): EnvironmentProviders;
/**
 * Feature provider that configures a custom URL for the DotLottie WASM file.
 * The WASM URL is set lazily when the first DotLottie component renders,
 * rather than during app initialization.
 *
 * @param wasmUrl - Path or URL to the dotlottie-player WASM file.
 *                  Relative URLs will be resolved to absolute URLs automatically.
 *
 * @example
 * export const appConfig: ApplicationConfig = {
 *   providers: [
 *     provideDotLottie(
 *       { player: () => import('@lottiefiles/dotlottie-web').then(m => m.DotLottieWorker) },
 *       withDotLottieWasmUrl(() => 'http://localhost:4200/assets/dotlottie-player.wasm'),
 *     ),
 *   ],
 * };
 */
declare function withDotLottieWasmUrl(wasmUrl: () => string): EnvironmentProviders;

export { DotLottieComponent, DotLottieWorkerComponent, provideDotLottie, withDotLottieWasmUrl, ɵɵBaseDotLottieDirective };