@aarsteinmedia/dotlottie-player 5.3.2 → 6.0.1

package/dist/{index.d.ts → full.d.ts}

@@ -1,7 +1,35 @@
-import { PlayMode, PreserveAspectRatio, RendererType } from '@aarsteinmedia/lottie-web/utils';
+import { RendererType, PreserveAspectRatio, PlayMode } from '@aarsteinmedia/lottie-web/utils';
 export { PlayMode, PlayerEvents } from '@aarsteinmedia/lottie-web/utils';
-import { AnimationData, AnimationDirection, AnimationItem, LottieManifest, AnimationSettings, Vector2 } from '@aarsteinmedia/lottie-web';
+import * as _aarsteinmedia_lottie_web from '@aarsteinmedia/lottie-web';
+import { Vector2, AnimationConfiguration, AnimationData, AnimationDirection, AddAnimationParams, Result, ConvertParams, AnimationItem, LottieManifest, AnimationSettings } from '@aarsteinmedia/lottie-web';
 import { addAnimation, convert } from '@aarsteinmedia/lottie-web/dotlottie';
+import * as _aarsteinmedia_lottie_web_light from '@aarsteinmedia/lottie-web/light';
+
+declare class DotLottiePlayerLight extends DotLottiePlayerBase {
+    loadAnimation: typeof _aarsteinmedia_lottie_web_light.loadAnimation;
+    get renderer(): RendererType;
+    constructor();
+    protected setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio, }: {
+        container?: HTMLElement;
+        rendererType: RendererType;
+        initialSegment?: Vector2;
+        hasAutoplay: boolean;
+        hasLoop: boolean;
+        preserveAspectRatio: PreserveAspectRatio;
+    }): AnimationConfiguration<RendererType.SVG>;
+}
+
+declare enum PlayerState {
+    Completed = "completed",
+    Destroyed = "destroyed",
+    Error = "error",
+    Frozen = "frozen",
+    Loading = "loading",
+    Paused = "paused",
+    Playing = "playing",
+    Stopped = "stopped"
+}
+declare const tagName = "dotlottie-player";
 
 type AnimateOnScroll = boolean | '' | null;
 type Autoplay = boolean | '' | 'autoplay' | null;
@@ -10,11 +38,11 @@ type Loop = boolean | '' | 'loop' | null;
 type Subframe = boolean | '' | null;
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName]: DotLottiePlayer;
+        [tagName]: DotLottiePlayer | DotLottiePlayerLight;
     }
-    function dotLottiePlayer(): DotLottiePlayer;
+    function dotLottiePlayer(): DotLottiePlayer | DotLottiePlayerLight;
 }
-type JSXLottiePlayer = Omit<Partial<DotLottiePlayer>, 'style'> & {
+type JSXLottiePlayer = Omit<Partial<DotLottiePlayer | DotLottiePlayerLight>, 'style'> & {
     class?: string;
     ref?: React.RefObject<unknown>;
     style?: React.CSSProperties;
@@ -48,31 +76,19 @@ declare abstract class PropertyCallbackElement extends HTMLElement {
     propertyChangedCallback(_name: string, _oldValue: unknown, _value: unknown): void;
 }
 
-declare function renderControls(this: DotLottiePlayer): void;
+declare function renderControls(this: DotLottiePlayerBase): void;
 
-declare function renderPlayer(this: DotLottiePlayer): Promise<void>;
+declare function renderPlayer(this: DotLottiePlayerBase): 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 {
+declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     static get observedAttributes(): string[];
     static get observedProperties(): string[];
     static get styles(): () => Promise<CSSStyleSheet>;
-    addAnimation: typeof addAnimation;
-    convert: typeof convert;
+    isLight: boolean;
     playerState: PlayerState;
     shadow: ShadowRoot | undefined;
     source?: string;
-    template: HTMLTemplateElement;
+    template?: HTMLTemplateElement;
     set animateOnScroll(value: AnimateOnScroll);
     get animateOnScroll(): AnimateOnScroll;
     get animations(): AnimationData[];
@@ -137,8 +153,10 @@ declare class DotLottiePlayer extends PropertyCallbackElement {
     private _multiAnimationSettings;
     private _segment?;
     constructor();
+    addAnimation(_params: AddAnimationParams): Promise<Result>;
     attributeChangedCallback(name: string, _oldValue: unknown, value: string): Promise<void>;
     connectedCallback(): void;
+    convert(_params: ConvertParams): Promise<Result>;
     destroy(): void;
     disconnectedCallback(): void;
     getLottie(): AnimationItem | null;
@@ -146,6 +164,7 @@ declare class DotLottiePlayer extends PropertyCallbackElement {
     getMultiAnimationSettings(): AnimationSettings[];
     getSegment(): Vector2 | undefined;
     load(src: string | null): Promise<void>;
+    loadAnimation(_config: AnimationConfiguration): AnimationItem;
     next(): void;
     pause(): void;
     play(): void;
@@ -169,6 +188,14 @@ declare class DotLottiePlayer extends PropertyCallbackElement {
     protected _handleBlur(): void;
     protected _handleSeekChange({ target }: Event): void;
     protected _handleSettingsClick({ target }: Event): void;
+    protected setOptions(_options: {
+        container?: HTMLElement;
+        rendererType: RendererType;
+        initialSegment?: Vector2;
+        hasAutoplay: boolean;
+        hasLoop: boolean;
+        preserveAspectRatio: PreserveAspectRatio;
+    }): AnimationConfiguration<RendererType.SVG | RendererType.Canvas | RendererType.HTML>;
     private _addEventListeners;
     private _addIntersectionObserver;
     private _complete;
@@ -179,7 +206,6 @@ declare class DotLottiePlayer extends PropertyCallbackElement {
     private _getOptions;
     private _handleScroll;
     private _handleWindowBlur;
-    private _isLottie;
     private _loopComplete;
     private _mouseEnter;
     private _mouseLeave;
@@ -190,6 +216,18 @@ declare class DotLottiePlayer extends PropertyCallbackElement {
     private _toggleSettings;
 }
 
-declare const tagName = "dotlottie-player";
+declare class DotLottiePlayer extends DotLottiePlayerBase {
+    addAnimation: typeof addAnimation;
+    convert: typeof convert;
+    loadAnimation: typeof _aarsteinmedia_lottie_web.loadAnimation;
+    protected setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio, rendererType }: {
+        container?: HTMLElement;
+        rendererType: RendererType;
+        initialSegment?: Vector2;
+        hasAutoplay: boolean;
+        hasLoop: boolean;
+        preserveAspectRatio: PreserveAspectRatio;
+    }): AnimationConfiguration<RendererType>;
+}
 
 export { PlayerState, DotLottiePlayer as default, tagName };

package/dist/{index.js → full.js}

@@ -1,7 +1,7 @@
 import { isServer, PlayMode, PreserveAspectRatio, namespaceSVG, RendererType, createElementID, PlayerEvents, download, getFilename } from '@aarsteinmedia/lottie-web/utils';
 export { PlayMode, PlayerEvents } from '@aarsteinmedia/lottie-web/utils';
 import Lottie from '@aarsteinmedia/lottie-web';
-import { convert, addAnimation, getAnimationData } from '@aarsteinmedia/lottie-web/dotlottie';
+import { convert, getAnimationData, addAnimation } from '@aarsteinmedia/lottie-web/dotlottie';
 
 /**
  * Credit to: Leonardo Favre https://github.com/leofavre/observed-properties.
@@ -156,6 +156,7 @@ var PlayerState = /*#__PURE__*/ function(PlayerState) {
     PlayerState["Stopped"] = "stopped";
     return PlayerState;
 }({});
+const tagName = 'dotlottie-player';
 
 /**
  * Render Controls.
@@ -241,12 +242,12 @@ const pauseIcon = /* HTML */ `
 /**
  * Render Player.
  */ async function renderPlayer() {
-    if (!this.shadow) {
-        throw new Error('No Shadow Element');
+    if (!this.shadow || !this.template) {
+        throw new Error('No Shadow Element or Template');
     }
     this.template.innerHTML = /* HTML */ `<div class="animation-container main" data-controls="${this.controls ?? false}" lang="${this.description ? document.documentElement.lang : 'en'}" aria-label="${this.description ?? 'Lottie animation'}" data-loaded="${this._playerState.loaded}"><figure class="animation" style="background:${this.background}">${this.playerState === PlayerState.Error ? /* HTML */ `<div class="error"><svg preserveAspectRatio="${PreserveAspectRatio.Cover}" xmlns="${namespaceSVG}" width="1920" height="1080" viewBox="0 0 1920 1080" style="white-space:preserve"><path fill="#fff" d="M0 0h1920v1080H0z"/><path fill="#3a6d8b" d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"/><path fill="none" d="M718.9 807.7h645v285.4h-645z"/><text fill="#3a6d8b" style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif" x="50%" y="848.017" text-anchor="middle">${this._errorMessage}</text></svg></div>` : ''}</figure><slot name="controls"></slot></div>`;
     this.shadow.adoptedStyleSheets = [
-        await DotLottiePlayer.styles()
+        await DotLottiePlayerBase.styles()
     ];
     this.shadow.appendChild(this.template.content.cloneNode(true));
 }
@@ -291,11 +292,23 @@ const pauseIcon = /* HTML */ `
         }
     }
     return res;
+}, isLottie = (json)=>{
+    const mandatory = [
+        'v',
+        'ip',
+        'op',
+        'layers',
+        'fr',
+        'w',
+        'h'
+    ];
+    return mandatory.every((field)=>Object.hasOwn(json, field));
 }, frameOutput = (frame)=>((frame ?? 0) + 1).toString().padStart(3, '0');
 
+const notImplemented = 'Method is not implemented';
 /**
  * DotLottie Player Web Component.
- */ class DotLottiePlayer extends PropertyCallbackElement {
+ */ class DotLottiePlayerBase extends PropertyCallbackElement {
     /**
    * Attributes to observe.
    */ static get observedAttributes() {
@@ -525,7 +538,7 @@ const pauseIcon = /* HTML */ `
         return Boolean(val === 'true' || val === '' || val === '1');
     }
     constructor(){
-        super(), this.addAnimation = addAnimation, this.convert = convert, /**
+        super(), this.isLight = false, /**
    * Player state.
    */ this.playerState = PlayerState.Loading, /**
    * Animation Container.
@@ -579,6 +592,9 @@ const pauseIcon = /* HTML */ `
             mode: 'open'
         });
     }
+    addAnimation(_params) {
+        throw new Error(notImplemented);
+    }
     /**
    * Runs when the value of an attribute is changed on the component.
    */ async attributeChangedCallback(name, _oldValue, value) {
@@ -678,6 +694,9 @@ const pauseIcon = /* HTML */ `
             this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
         }
     }
+    convert(_params) {
+        throw new Error(notImplemented);
+    }
     /**
    * Destroy animation and element.
    */ destroy() {
@@ -734,7 +753,7 @@ const pauseIcon = /* HTML */ `
             this.source = src;
             // Load the resource
             const { animations, isDotLottie, manifest } = await getAnimationData(src);
-            if (!animations || animations.some((animation)=>!this._isLottie(animation))) {
+            if (!animations || animations.some((animation)=>!isLottie(animation))) {
                 throw new Error('Broken or corrupted file');
             }
             this._isBounce = this.mode === PlayMode.Bounce;
@@ -766,7 +785,7 @@ const pauseIcon = /* HTML */ `
                 this.playerState = PlayerState.Playing;
             }
             // Initialize lottie player and load animation
-            this._lottieInstance = Lottie.loadAnimation({
+            this._lottieInstance = this.loadAnimation({
                 ...this._getOptions(),
                 animationData: animations[this._currentAnimation]
             });
@@ -803,6 +822,9 @@ const pauseIcon = /* HTML */ `
             this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
         }
     }
+    loadAnimation(_config) {
+        throw new Error(notImplemented);
+    }
     /**
    * Skip to next animation.
    */ next() {
@@ -849,13 +871,13 @@ const pauseIcon = /* HTML */ `
         if (!this.shadow) {
             return;
         }
-        const togglePlay = this.shadow.querySelector('.togglePlay'), stop = this.shadow.querySelector('.stop'), prev = this.shadow.querySelector('.prev'), next = this.shadow.querySelector('.next'), seeker = this.shadow.querySelector('.seeker'), progress = this.shadow.querySelector('progress'), popover = this.shadow.querySelector('.popover'), convertButton = this.shadow.querySelector('.convert'), snapshot = this.shadow.querySelector('.snapshot');
-        if (!(togglePlay instanceof HTMLButtonElement) || !(stop instanceof HTMLButtonElement) || !(next instanceof HTMLButtonElement) || !(prev instanceof HTMLButtonElement) || !(seeker instanceof HTMLInputElement) || !(progress instanceof HTMLProgressElement)) {
+        const togglePlay = this.shadow.querySelector('.togglePlay'), stopButton = this.shadow.querySelector('.stop'), prevButton = this.shadow.querySelector('.prev'), nextButton = this.shadow.querySelector('.next'), seeker = this.shadow.querySelector('.seeker'), progress = this.shadow.querySelector('progress'), popover = this.shadow.querySelector('.popover'), convertButton = this.shadow.querySelector('.convert'), snapshot = this.shadow.querySelector('.snapshot');
+        if (!(togglePlay instanceof HTMLButtonElement) || !(stopButton instanceof HTMLButtonElement) || !(nextButton instanceof HTMLButtonElement) || !(prevButton instanceof HTMLButtonElement) || !(seeker instanceof HTMLInputElement) || !(progress instanceof HTMLProgressElement)) {
             return;
         }
         if (name === 'playerState') {
             togglePlay.dataset.active = (value === PlayerState.Playing || value === PlayerState.Paused).toString();
-            stop.dataset.active = (value === PlayerState.Stopped).toString();
+            stopButton.dataset.active = (value === PlayerState.Stopped).toString();
             if (value === PlayerState.Playing) {
                 togglePlay.innerHTML = pauseIcon;
             } else {
@@ -868,15 +890,15 @@ const pauseIcon = /* HTML */ `
             progress.value = value;
         }
         if (name === '_animations' && Array.isArray(value) && this._currentAnimation + 1 < value.length) {
-            next.hidden = false;
+            nextButton.hidden = false;
         }
         if (name === '_currentAnimation' && typeof value === 'number') {
-            next.hidden = value + 1 >= this._animations.length;
-            prev.hidden = !value;
+            nextButton.hidden = value + 1 >= this._animations.length;
+            prevButton.hidden = !value;
         }
         if (name === '_isSettingsOpen' && typeof value === 'boolean' && popover instanceof HTMLDivElement && convertButton instanceof HTMLButtonElement && snapshot instanceof HTMLButtonElement) {
             popover.hidden = !value;
-            convertButton.hidden = false;
+            convertButton.hidden = this.isLight;
             snapshot.hidden = this.renderer !== RendererType.SVG;
         }
     }
@@ -1108,6 +1130,9 @@ const pauseIcon = /* HTML */ `
             target.focus();
         }
     }
+    setOptions(_options) {
+        throw new Error('Method not implemented');
+    }
     /**
    * Add event listeners.
    */ _addEventListeners() {
@@ -1191,7 +1216,6 @@ const pauseIcon = /* HTML */ `
     }
     /**
    * Get options from props.
-   *
    */ _getOptions() {
         if (!this._container) {
             throw new Error('Container not rendered');
@@ -1227,47 +1251,14 @@ const pauseIcon = /* HTML */ `
         if (this._segment?.some((val)=>val < 0)) {
             initialSegment = undefined;
         }
-        const options = {
-            autoplay: hasAutoplay,
+        return this.setOptions({
             container: this._container,
+            hasAutoplay,
+            hasLoop,
             initialSegment,
-            loop: hasLoop,
-            renderer: this.renderer,
-            rendererSettings: {
-                imagePreserveAspectRatio: preserveAspectRatio
-            }
-        };
-        switch(this.renderer){
-            case RendererType.SVG:
-                {
-                    options.rendererSettings = {
-                        ...options.rendererSettings,
-                        hideOnTransparent: true,
-                        preserveAspectRatio,
-                        progressiveLoad: true
-                    };
-                    break;
-                }
-            case RendererType.Canvas:
-                {
-                    options.rendererSettings = {
-                        ...options.rendererSettings,
-                        // @ts-expect-error TODO:
-                        clearCanvas: true,
-                        preserveAspectRatio,
-                        progressiveLoad: true
-                    };
-                    break;
-                }
-            case RendererType.HTML:
-                {
-                    options.rendererSettings = {
-                        ...options.rendererSettings,
-                        hideOnTransparent: true
-                    };
-                }
-        }
-        return options;
+            preserveAspectRatio,
+            rendererType: this.renderer
+        });
     }
     /**
    * Handle scroll.
@@ -1305,18 +1296,6 @@ const pauseIcon = /* HTML */ `
             this.play();
         }
     }
-    _isLottie(json) {
-        const mandatory = [
-            'v',
-            'ip',
-            'op',
-            'layers',
-            'fr',
-            'w',
-            'h'
-        ];
-        return mandatory.every((field)=>Object.hasOwn(json, field));
-    }
     _loopComplete() {
         if (!this._lottieInstance) {
             return;
@@ -1394,7 +1373,7 @@ const pauseIcon = /* HTML */ `
                 this._lottieInstance.destroy();
             }
             // Re-initialize lottie player
-            this._lottieInstance = Lottie.loadAnimation({
+            this._lottieInstance = this.loadAnimation({
                 ...this._getOptions(),
                 animationData: this._animations[this._currentAnimation]
             });
@@ -1466,10 +1445,54 @@ const pauseIcon = /* HTML */ `
     }
 }
 
+/**
+ * DotLottie Player Web Component.
+ */ class DotLottiePlayer extends DotLottiePlayerBase {
+    setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio, rendererType }) {
+        const options = {
+            autoplay: hasAutoplay,
+            container,
+            initialSegment,
+            loop: hasLoop,
+            renderer: rendererType,
+            rendererSettings: {
+                imagePreserveAspectRatio: preserveAspectRatio
+            }
+        };
+        switch(this.renderer){
+            case RendererType.HTML:
+            case RendererType.SVG:
+                {
+                    options.rendererSettings = {
+                        ...options.rendererSettings,
+                        hideOnTransparent: true,
+                        preserveAspectRatio,
+                        progressiveLoad: true
+                    };
+                    break;
+                }
+            case RendererType.Canvas:
+                {
+                    options.rendererSettings = {
+                        ...options.rendererSettings,
+                        // @ts-expect-error TODO:
+                        clearCanvas: true,
+                        preserveAspectRatio,
+                        progressiveLoad: true
+                    };
+                    break;
+                }
+        }
+        return options;
+    }
+    constructor(...args){
+        super(...args), this.addAnimation = addAnimation, this.convert = convert, this.loadAnimation = Lottie.loadAnimation;
+    }
+}
+
 /**
  * Expose DotLottiePlayer class as global variable.
  */ globalThis.dotLottiePlayer = ()=>new DotLottiePlayer();
-const tagName = 'dotlottie-player';
 if (!isServer) {
     customElements.define(tagName, DotLottiePlayer);
 }

package/dist/light.d.ts

@@ -0,0 +1,233 @@
+import { RendererType, PreserveAspectRatio, PlayMode } from '@aarsteinmedia/lottie-web/utils';
+export { PlayMode, PlayerEvents } from '@aarsteinmedia/lottie-web/utils';
+import * as _aarsteinmedia_lottie_web_light from '@aarsteinmedia/lottie-web/light';
+import * as _aarsteinmedia_lottie_web from '@aarsteinmedia/lottie-web';
+import { Vector2, AnimationConfiguration, AnimationData, AnimationDirection, AddAnimationParams, Result, ConvertParams, AnimationItem, LottieManifest, AnimationSettings } from '@aarsteinmedia/lottie-web';
+import { addAnimation, convert } from '@aarsteinmedia/lottie-web/dotlottie';
+
+declare class DotLottiePlayer extends DotLottiePlayerBase {
+    addAnimation: typeof addAnimation;
+    convert: typeof convert;
+    loadAnimation: typeof _aarsteinmedia_lottie_web.loadAnimation;
+    protected setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio, rendererType }: {
+        container?: HTMLElement;
+        rendererType: RendererType;
+        initialSegment?: Vector2;
+        hasAutoplay: boolean;
+        hasLoop: boolean;
+        preserveAspectRatio: PreserveAspectRatio;
+    }): AnimationConfiguration<RendererType>;
+}
+
+declare enum PlayerState {
+    Completed = "completed",
+    Destroyed = "destroyed",
+    Error = "error",
+    Frozen = "frozen",
+    Loading = "loading",
+    Paused = "paused",
+    Playing = "playing",
+    Stopped = "stopped"
+}
+declare const tagName = "dotlottie-player";
+
+type AnimateOnScroll = boolean | '' | null;
+type Autoplay = boolean | '' | 'autoplay' | null;
+type Controls = boolean | '' | 'controls' | null;
+type Loop = boolean | '' | 'loop' | null;
+type Subframe = boolean | '' | null;
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: DotLottiePlayer | DotLottiePlayerLight;
+    }
+    function dotLottiePlayer(): DotLottiePlayer | DotLottiePlayerLight;
+}
+type JSXLottiePlayer = Omit<Partial<DotLottiePlayer | DotLottiePlayerLight>, 'style'> & {
+    class?: string;
+    ref?: React.RefObject<unknown>;
+    style?: React.CSSProperties;
+    src: string;
+};
+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(): void;
+    propertyChangedCallback(_name: string, _oldValue: unknown, _value: unknown): void;
+}
+
+declare function renderControls(this: DotLottiePlayerBase): void;
+
+declare function renderPlayer(this: DotLottiePlayerBase): Promise<void>;
+
+declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
+    static get observedAttributes(): string[];
+    static get observedProperties(): string[];
+    static get styles(): () => Promise<CSSStyleSheet>;
+    isLight: boolean;
+    playerState: PlayerState;
+    shadow: ShadowRoot | undefined;
+    source?: string;
+    template?: HTMLTemplateElement;
+    set animateOnScroll(value: AnimateOnScroll);
+    get animateOnScroll(): AnimateOnScroll;
+    get animations(): AnimationData[];
+    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;
+    get currentAnimation(): 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;
+    get isDotLottie(): boolean;
+    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 renderer(value: RendererType);
+    get renderer(): RendererType;
+    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 _isDotLottie;
+    private _lottieInstance;
+    private _manifest?;
+    private _multiAnimationSettings;
+    private _segment?;
+    constructor();
+    addAnimation(_params: AddAnimationParams): Promise<Result>;
+    attributeChangedCallback(name: string, _oldValue: unknown, value: string): Promise<void>;
+    connectedCallback(): void;
+    convert(_params: ConvertParams): Promise<Result>;
+    destroy(): void;
+    disconnectedCallback(): void;
+    getLottie(): AnimationItem | null;
+    getManifest(): LottieManifest | undefined;
+    getMultiAnimationSettings(): AnimationSettings[];
+    getSegment(): Vector2 | undefined;
+    load(src: string | null): Promise<void>;
+    loadAnimation(_config: AnimationConfiguration): AnimationItem;
+    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;
+    protected setOptions(_options: {
+        container?: HTMLElement;
+        rendererType: RendererType;
+        initialSegment?: Vector2;
+        hasAutoplay: boolean;
+        hasLoop: boolean;
+        preserveAspectRatio: PreserveAspectRatio;
+    }): AnimationConfiguration<RendererType.SVG | RendererType.Canvas | RendererType.HTML>;
+    private _addEventListeners;
+    private _addIntersectionObserver;
+    private _complete;
+    private _dataFailed;
+    private _dataReady;
+    private _DOMLoaded;
+    private _enterFrame;
+    private _getOptions;
+    private _handleScroll;
+    private _handleWindowBlur;
+    private _loopComplete;
+    private _mouseEnter;
+    private _mouseLeave;
+    private _onVisibilityChange;
+    private _removeEventListeners;
+    private _switchInstance;
+    private _toggleEventListeners;
+    private _toggleSettings;
+}
+
+declare class DotLottiePlayerLight extends DotLottiePlayerBase {
+    loadAnimation: typeof _aarsteinmedia_lottie_web_light.loadAnimation;
+    get renderer(): RendererType;
+    constructor();
+    protected setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio, }: {
+        container?: HTMLElement;
+        rendererType: RendererType;
+        initialSegment?: Vector2;
+        hasAutoplay: boolean;
+        hasLoop: boolean;
+        preserveAspectRatio: PreserveAspectRatio;
+    }): AnimationConfiguration<RendererType.SVG>;
+}
+
+export { PlayerState, DotLottiePlayerLight as default, tagName };