@aarsteinmedia/dotlottie-player-light/dist/index.d.ts

Light Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player-light

import { PlayMode, PreserveAspectRatio } from '@aarsteinmedia/lottie-web/utils';
export { PlayMode, PlayerEvents } from '@aarsteinmedia/lottie-web/utils';
import { AnimationDirection, AnimationItem, LottieManifest, AnimationSettings, AnimationSegment, Vector2 } from '@aarsteinmedia/lottie-web';

type AnimateOnScroll = boolean | '' | null;
type Autoplay = boolean | '' | 'autoplay' | null;
type Controls = boolean | '' | 'controls' | null;
type Loop = boolean | '' | 'loop' | null | number;
type Subframe = boolean | '' | null;
type JSXLottiePlayer = Omit<Partial<DotLottiePlayer>, 'style'> & {
    class?: string;
    ref?: React.RefObject<unknown>;
    style?: React.CSSProperties;
    src: string;
};
declare global {
    interface HTMLElementTagNameMap {
        [tagName]: DotLottiePlayer;
    }
    function dotLottiePlayer(): DotLottiePlayer;
}
declare module 'react' {
    namespace JSX {
        interface IntrinsicElements {
            [tagName]: JSXLottiePlayer;
        }
    }
}
declare module 'react/jsx-runtime' {
    namespace JSX {
        interface IntrinsicElements {
            [tagName]: JSXLottiePlayer;
        }
    }
}
declare module 'react/jsx-dev-runtime' {
    namespace JSX {
        interface IntrinsicElements {
            [tagName]: JSXLottiePlayer;
        }
    }
}

declare abstract class PropertyCallbackElement extends HTMLElement {
    constructor();
    connectedCallback(): Promise<void>;
    propertyChangedCallback(_name: string, _oldValue: unknown, _value: unknown): void;
}

declare function renderControls(this: DotLottiePlayer): void;

declare function renderPlayer(this: DotLottiePlayer): Promise<void>;

declare enum PlayerState {
    Completed = "completed",
    Destroyed = "destroyed",
    Error = "error",
    Frozen = "frozen",
    Loading = "loading",
    Paused = "paused",
    Playing = "playing",
    Stopped = "stopped"
}

declare class DotLottiePlayer extends PropertyCallbackElement {
    static get observedAttributes(): string[];
    static get observedProperties(): string[];
    static get styles(): () => Promise<CSSStyleSheet>;
    playerState: PlayerState;
    shadow: ShadowRoot | undefined;
    template: HTMLTemplateElement;
    set animateOnScroll(value: AnimateOnScroll);
    get animateOnScroll(): AnimateOnScroll;
    set autoplay(value: Autoplay);
    get autoplay(): Autoplay;
    set background(value: string);
    get background(): string;
    set controls(value: Controls);
    get controls(): Controls;
    set count(value: number);
    get count(): number;
    set description(value: string | null);
    get description(): string | null;
    set direction(value: AnimationDirection);
    get direction(): AnimationDirection;
    set hover(value: boolean);
    get hover(): boolean;
    set intermission(value: number);
    get intermission(): number;
    set loop(value: Loop);
    get loop(): Loop;
    set mode(value: PlayMode);
    get mode(): PlayMode;
    set objectfit(value: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down');
    get objectfit(): "contain" | "cover" | "fill" | "none" | "scale-down";
    set preserveAspectRatio(value: PreserveAspectRatio | null);
    get preserveAspectRatio(): PreserveAspectRatio | null;
    set simple(value: boolean);
    get simple(): boolean;
    set speed(value: number);
    get speed(): number;
    set src(value: string | null);
    get src(): string | null;
    set subframe(value: Subframe);
    get subframe(): Subframe;
    protected _container: HTMLElement | null;
    protected _errorMessage: string;
    protected _identifier: string;
    protected _isSettingsOpen: boolean;
    protected _playerState: {
        prev: PlayerState;
        count: number;
        loaded: boolean;
        visible: boolean;
        scrollY: number;
        scrollTimeout: NodeJS.Timeout | null;
    };
    protected _render: typeof renderPlayer;
    protected _renderControls: typeof renderControls;
    protected _seeker: number;
    private _animations;
    private _currentAnimation;
    private _intersectionObserver?;
    private _isBounce;
    private _lottieInstance;
    private _manifest?;
    private _multiAnimationSettings;
    private _segment?;
    constructor();
    attributeChangedCallback(name: string, _oldValue: unknown, value: string): Promise<void>;
    connectedCallback(): Promise<void>;
    destroy(): void;
    disconnectedCallback(): void;
    getLottie(): AnimationItem | null;
    getManifest(): LottieManifest | undefined;
    getMultiAnimationSettings(): AnimationSettings[];
    getSegment(): AnimationSegment | undefined;
    load(src: string | null): Promise<void>;
    next(): void;
    pause(): void;
    play(): void;
    prev(): void;
    propertyChangedCallback(name: string, _oldValue: unknown, value: unknown): void;
    reload(): Promise<void>;
    seek(value: number | string): void;
    setCount(value: number): void;
    setDirection(value: AnimationDirection): void;
    setLoop(value: boolean): void;
    setMultiAnimationSettings(settings: AnimationSettings[]): void;
    setSegment(segment: Vector2): void;
    setSpeed(value?: number): void;
    setSubframe(value: boolean): void;
    snapshot(shouldDownload?: boolean, name?: string): string | null;
    stop(): void;
    toggleBoomerang(): void;
    toggleLoop(): void;
    togglePlay(): void;
    protected _freeze(): void;
    protected _handleBlur(): void;
    protected _handleSeekChange({ target }: Event): void;
    protected _handleSettingsClick({ target }: Event): void;
    private _addEventListeners;
    private _addIntersectionObserver;
    private _complete;
    private _dataFailed;
    private _dataReady;
    private _DOMLoaded;
    private _enterFrame;
    private _getOptions;
    private _handleScroll;
    private _handleWindowBlur;
    private _isLottie;
    private _loopComplete;
    private _mouseEnter;
    private _mouseLeave;
    private _onVisibilityChange;
    private _removeEventListeners;
    private _switchInstance;
    private _toggleEventListeners;
    private _toggleSettings;
}

declare const tagName = "dotlottie-player";

export { PlayerState, DotLottiePlayer as default, tagName };