@aarsteinmedia/dotlottie-player 6.1.0 → 6.1.1

package/CHANGELOG.md

@@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Changelog was only added since [3.2.3], so it's not exhaustive. [Please report any missing noteable changes to us](https://github.com/aarsteinmedia/dotlottie-player/issues), and we'll add them promptly.
 
-## [6.1.0] - 13-10-2025
+## [6.1.1] - 13-10-2025
 
 ### Changed
 
@@ -17,6 +17,7 @@ Changelog was only added since [3.2.3], so it's not exhaustive. [Please report a
   - `once` – Whether, if playOnVisible is true, to play once or anytime animation is in view
   - `playOnClick` – Whether to toggle play on click
   - `playOnVisible` – Play when visible
+  - `selector` – Play on clicked element by id attribute
 
 ## [6.0.5] - 12-09-2025
 

package/README.md

@@ -320,6 +320,7 @@ export default defineNuxtPlugin(({ vueApp }) => {
 | `playOnClick`             | Whether to toggle play on click                                                                                               | `boolean`                                | `false`           |
 | `playOnVisible`           | Play when visible                                                                                                             | `boolean`                                | `false`           |
 | `renderer`                | Renderer to use                                                                                                               | `svg` \| `canvas` \| `html`              | `svg`             |
+| `selector`                | Play on clicked element by id attribute                                                                                       | `string`                                 | `undefined`       |
 | `speed`                   | Animation speed                                                                                                               | `number`                                 | `1`               |
 | `src` _(required)_        | URL to LottieJSON or dotLottie                                                                                                | `string`                                 | `undefined`       |
 | `subframe`                | When enabled this can help to reduce flicker on some animations, especially on Safari and iOS devices.                        | `boolean`                                | `false`           |

package/dist/canvas.d.ts

@@ -111,7 +111,7 @@ declare function renderControls(this: DotLottiePlayerBase): void;
 declare function renderPlayer(this: DotLottiePlayerBase): Promise<void>;
 
 declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
-    static get observedAttributes(): readonly ["animateOnScroll", "autoplay", "controls", "direction", "hover", "loop", "mode", "playOnClick", "playOnVisible", "speed", "src", "subframe"];
+    static get observedAttributes(): readonly ["animateOnScroll", "autoplay", "controls", "direction", "hover", "loop", "mode", "playOnClick", "playOnVisible", "selector", "speed", "src", "subframe"];
     static get observedProperties(): string[];
     static get styles(): () => Promise<CSSStyleSheet>;
     isLight: boolean;
@@ -162,6 +162,8 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     get preserveAspectRatio(): PreserveAspectRatio | null;
     set renderer(value: RendererType);
     get renderer(): RendererType;
+    set selector(value: string | null);
+    get selector(): string | null;
     set simple(value: boolean);
     get simple(): boolean;
     set speed(value: number);

package/dist/canvas.js

@@ -323,6 +323,7 @@ const notImplemented = 'Method is not implemented';
             'mode',
             'playOnClick',
             'playOnVisible',
+            'selector',
             'speed',
             'src',
             'subframe'
@@ -572,6 +573,18 @@ const notImplemented = 'Method is not implemented';
         return RendererType.SVG;
     }
     /**
+   * Play on clicked element by id attribute, other than animation.
+   */ set selector(value) {
+        if (value) {
+            this.setAttribute('selector', value);
+            return;
+        }
+        this.removeAttribute('selector');
+    }
+    get selector() {
+        return this.getAttribute('selector');
+    }
+    /**
    * Hide advanced controls.
    */ set simple(value) {
         this.setAttribute('simple', value.toString());
@@ -760,6 +773,12 @@ const notImplemented = 'Method is not implemented';
                     }
                     break;
                 }
+            case 'selector':
+                {
+                    const selector = document.getElementById(this.selector ?? '');
+                    selector?.addEventListener('click', this._handleClick);
+                    break;
+                }
             case 'speed':
                 {
                     const val = Number(value);
@@ -868,6 +887,19 @@ const notImplemented = 'Method is not implemented';
             if (!animations || animations.some((animation)=>!isLottie(animation))) {
                 throw new Error('Broken or corrupted file');
             }
+            const ldScript = this.parentElement?.querySelector('script[type="application/ld+json"]');
+            if (ldScript) {
+                const settings = JSON.parse(ldScript.innerHTML);
+                if (settings.selector) {
+                    this.selector = settings.selector;
+                }
+                if (settings.segment) {
+                    this.setSegment(settings.segment);
+                }
+                if (settings.multiAnimationSettings) {
+                    this.setMultiAnimationSettings(settings.multiAnimationSettings);
+                }
+            }
             this._isBounce = this.mode === PlayMode.Bounce;
             if (this._multiAnimationSettings.length > 0 && this._multiAnimationSettings[this._currentAnimation]?.mode) {
                 this._isBounce = this._multiAnimationSettings[this._currentAnimation]?.mode === PlayMode.Bounce;
@@ -1237,7 +1269,7 @@ const notImplemented = 'Method is not implemented';
     /**
    * Handle click.
    */ _handleClick() {
-        if (!this.playOnClick) {
+        if (!this.playOnClick && !this.selector) {
             return;
         }
         this.togglePlay();
@@ -1621,7 +1653,20 @@ const notImplemented = 'Method is not implemented';
             this._lottieInstance[method]('data_ready', this._dataReady);
             this._lottieInstance[method]('data_failed', this._dataFailed);
         }
-        if (this._container) {
+        if (this.selector) {
+            const selector = document.getElementById(this.selector);
+            if (selector) {
+                if (this.hover) {
+                    selector[method]('mouseenter', this._mouseEnter);
+                    selector[method]('mouseleave', this._mouseLeave);
+                } else {
+                    selector[method]('click', this._handleClick);
+                }
+            } else {
+                this.selector = null;
+            }
+        }
+        if (this._container && !this.selector) {
             if (this.hover) {
                 this._container[method]('mouseenter', this._mouseEnter);
                 this._container[method]('mouseleave', this._mouseLeave);

package/dist/full.d.ts

@@ -111,7 +111,7 @@ declare function renderControls(this: DotLottiePlayerBase): void;
 declare function renderPlayer(this: DotLottiePlayerBase): Promise<void>;
 
 declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
-    static get observedAttributes(): readonly ["animateOnScroll", "autoplay", "controls", "direction", "hover", "loop", "mode", "playOnClick", "playOnVisible", "speed", "src", "subframe"];
+    static get observedAttributes(): readonly ["animateOnScroll", "autoplay", "controls", "direction", "hover", "loop", "mode", "playOnClick", "playOnVisible", "selector", "speed", "src", "subframe"];
     static get observedProperties(): string[];
     static get styles(): () => Promise<CSSStyleSheet>;
     isLight: boolean;
@@ -162,6 +162,8 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     get preserveAspectRatio(): PreserveAspectRatio | null;
     set renderer(value: RendererType);
     get renderer(): RendererType;
+    set selector(value: string | null);
+    get selector(): string | null;
     set simple(value: boolean);
     get simple(): boolean;
     set speed(value: number);

package/dist/full.js

@@ -323,6 +323,7 @@ const notImplemented = 'Method is not implemented';
             'mode',
             'playOnClick',
             'playOnVisible',
+            'selector',
             'speed',
             'src',
             'subframe'
@@ -572,6 +573,18 @@ const notImplemented = 'Method is not implemented';
         return RendererType.SVG;
     }
     /**
+   * Play on clicked element by id attribute, other than animation.
+   */ set selector(value) {
+        if (value) {
+            this.setAttribute('selector', value);
+            return;
+        }
+        this.removeAttribute('selector');
+    }
+    get selector() {
+        return this.getAttribute('selector');
+    }
+    /**
    * Hide advanced controls.
    */ set simple(value) {
         this.setAttribute('simple', value.toString());
@@ -760,6 +773,12 @@ const notImplemented = 'Method is not implemented';
                     }
                     break;
                 }
+            case 'selector':
+                {
+                    const selector = document.getElementById(this.selector ?? '');
+                    selector?.addEventListener('click', this._handleClick);
+                    break;
+                }
             case 'speed':
                 {
                     const val = Number(value);
@@ -868,6 +887,19 @@ const notImplemented = 'Method is not implemented';
             if (!animations || animations.some((animation)=>!isLottie(animation))) {
                 throw new Error('Broken or corrupted file');
             }
+            const ldScript = this.parentElement?.querySelector('script[type="application/ld+json"]');
+            if (ldScript) {
+                const settings = JSON.parse(ldScript.innerHTML);
+                if (settings.selector) {
+                    this.selector = settings.selector;
+                }
+                if (settings.segment) {
+                    this.setSegment(settings.segment);
+                }
+                if (settings.multiAnimationSettings) {
+                    this.setMultiAnimationSettings(settings.multiAnimationSettings);
+                }
+            }
             this._isBounce = this.mode === PlayMode.Bounce;
             if (this._multiAnimationSettings.length > 0 && this._multiAnimationSettings[this._currentAnimation]?.mode) {
                 this._isBounce = this._multiAnimationSettings[this._currentAnimation]?.mode === PlayMode.Bounce;
@@ -1237,7 +1269,7 @@ const notImplemented = 'Method is not implemented';
     /**
    * Handle click.
    */ _handleClick() {
-        if (!this.playOnClick) {
+        if (!this.playOnClick && !this.selector) {
             return;
         }
         this.togglePlay();
@@ -1621,7 +1653,20 @@ const notImplemented = 'Method is not implemented';
             this._lottieInstance[method]('data_ready', this._dataReady);
             this._lottieInstance[method]('data_failed', this._dataFailed);
         }
-        if (this._container) {
+        if (this.selector) {
+            const selector = document.getElementById(this.selector);
+            if (selector) {
+                if (this.hover) {
+                    selector[method]('mouseenter', this._mouseEnter);
+                    selector[method]('mouseleave', this._mouseLeave);
+                } else {
+                    selector[method]('click', this._handleClick);
+                }
+            } else {
+                this.selector = null;
+            }
+        }
+        if (this._container && !this.selector) {
             if (this.hover) {
                 this._container[method]('mouseenter', this._mouseEnter);
                 this._container[method]('mouseleave', this._mouseLeave);

package/dist/light.d.ts

@@ -111,7 +111,7 @@ declare function renderControls(this: DotLottiePlayerBase): void;
 declare function renderPlayer(this: DotLottiePlayerBase): Promise<void>;
 
 declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
-    static get observedAttributes(): readonly ["animateOnScroll", "autoplay", "controls", "direction", "hover", "loop", "mode", "playOnClick", "playOnVisible", "speed", "src", "subframe"];
+    static get observedAttributes(): readonly ["animateOnScroll", "autoplay", "controls", "direction", "hover", "loop", "mode", "playOnClick", "playOnVisible", "selector", "speed", "src", "subframe"];
     static get observedProperties(): string[];
     static get styles(): () => Promise<CSSStyleSheet>;
     isLight: boolean;
@@ -162,6 +162,8 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     get preserveAspectRatio(): PreserveAspectRatio | null;
     set renderer(value: RendererType);
     get renderer(): RendererType;
+    set selector(value: string | null);
+    get selector(): string | null;
     set simple(value: boolean);
     get simple(): boolean;
     set speed(value: number);

package/dist/light.js

@@ -323,6 +323,7 @@ const notImplemented = 'Method is not implemented';
             'mode',
             'playOnClick',
             'playOnVisible',
+            'selector',
             'speed',
             'src',
             'subframe'
@@ -572,6 +573,18 @@ const notImplemented = 'Method is not implemented';
         return RendererType.SVG;
     }
     /**
+   * Play on clicked element by id attribute, other than animation.
+   */ set selector(value) {
+        if (value) {
+            this.setAttribute('selector', value);
+            return;
+        }
+        this.removeAttribute('selector');
+    }
+    get selector() {
+        return this.getAttribute('selector');
+    }
+    /**
    * Hide advanced controls.
    */ set simple(value) {
         this.setAttribute('simple', value.toString());
@@ -760,6 +773,12 @@ const notImplemented = 'Method is not implemented';
                     }
                     break;
                 }
+            case 'selector':
+                {
+                    const selector = document.getElementById(this.selector ?? '');
+                    selector?.addEventListener('click', this._handleClick);
+                    break;
+                }
             case 'speed':
                 {
                     const val = Number(value);
@@ -868,6 +887,19 @@ const notImplemented = 'Method is not implemented';
             if (!animations || animations.some((animation)=>!isLottie(animation))) {
                 throw new Error('Broken or corrupted file');
             }
+            const ldScript = this.parentElement?.querySelector('script[type="application/ld+json"]');
+            if (ldScript) {
+                const settings = JSON.parse(ldScript.innerHTML);
+                if (settings.selector) {
+                    this.selector = settings.selector;
+                }
+                if (settings.segment) {
+                    this.setSegment(settings.segment);
+                }
+                if (settings.multiAnimationSettings) {
+                    this.setMultiAnimationSettings(settings.multiAnimationSettings);
+                }
+            }
             this._isBounce = this.mode === PlayMode.Bounce;
             if (this._multiAnimationSettings.length > 0 && this._multiAnimationSettings[this._currentAnimation]?.mode) {
                 this._isBounce = this._multiAnimationSettings[this._currentAnimation]?.mode === PlayMode.Bounce;
@@ -1237,7 +1269,7 @@ const notImplemented = 'Method is not implemented';
     /**
    * Handle click.
    */ _handleClick() {
-        if (!this.playOnClick) {
+        if (!this.playOnClick && !this.selector) {
             return;
         }
         this.togglePlay();
@@ -1621,7 +1653,20 @@ const notImplemented = 'Method is not implemented';
             this._lottieInstance[method]('data_ready', this._dataReady);
             this._lottieInstance[method]('data_failed', this._dataFailed);
         }
-        if (this._container) {
+        if (this.selector) {
+            const selector = document.getElementById(this.selector);
+            if (selector) {
+                if (this.hover) {
+                    selector[method]('mouseenter', this._mouseEnter);
+                    selector[method]('mouseleave', this._mouseLeave);
+                } else {
+                    selector[method]('click', this._handleClick);
+                }
+            } else {
+                this.selector = null;
+            }
+        }
+        if (this._container && !this.selector) {
             if (this.hover) {
                 this._container[method]('mouseenter', this._mouseEnter);
                 this._container[method]('mouseleave', this._mouseLeave);

package/dist/svg.d.ts

@@ -111,7 +111,7 @@ declare function renderControls(this: DotLottiePlayerBase): void;
 declare function renderPlayer(this: DotLottiePlayerBase): Promise<void>;
 
 declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
-    static get observedAttributes(): readonly ["animateOnScroll", "autoplay", "controls", "direction", "hover", "loop", "mode", "playOnClick", "playOnVisible", "speed", "src", "subframe"];
+    static get observedAttributes(): readonly ["animateOnScroll", "autoplay", "controls", "direction", "hover", "loop", "mode", "playOnClick", "playOnVisible", "selector", "speed", "src", "subframe"];
     static get observedProperties(): string[];
     static get styles(): () => Promise<CSSStyleSheet>;
     isLight: boolean;
@@ -162,6 +162,8 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     get preserveAspectRatio(): PreserveAspectRatio | null;
     set renderer(value: RendererType);
     get renderer(): RendererType;
+    set selector(value: string | null);
+    get selector(): string | null;
     set simple(value: boolean);
     get simple(): boolean;
     set speed(value: number);

package/dist/svg.js

@@ -323,6 +323,7 @@ const notImplemented = 'Method is not implemented';
             'mode',
             'playOnClick',
             'playOnVisible',
+            'selector',
             'speed',
             'src',
             'subframe'
@@ -572,6 +573,18 @@ const notImplemented = 'Method is not implemented';
         return RendererType.SVG;
     }
     /**
+   * Play on clicked element by id attribute, other than animation.
+   */ set selector(value) {
+        if (value) {
+            this.setAttribute('selector', value);
+            return;
+        }
+        this.removeAttribute('selector');
+    }
+    get selector() {
+        return this.getAttribute('selector');
+    }
+    /**
    * Hide advanced controls.
    */ set simple(value) {
         this.setAttribute('simple', value.toString());
@@ -760,6 +773,12 @@ const notImplemented = 'Method is not implemented';
                     }
                     break;
                 }
+            case 'selector':
+                {
+                    const selector = document.getElementById(this.selector ?? '');
+                    selector?.addEventListener('click', this._handleClick);
+                    break;
+                }
             case 'speed':
                 {
                     const val = Number(value);
@@ -868,6 +887,19 @@ const notImplemented = 'Method is not implemented';
             if (!animations || animations.some((animation)=>!isLottie(animation))) {
                 throw new Error('Broken or corrupted file');
             }
+            const ldScript = this.parentElement?.querySelector('script[type="application/ld+json"]');
+            if (ldScript) {
+                const settings = JSON.parse(ldScript.innerHTML);
+                if (settings.selector) {
+                    this.selector = settings.selector;
+                }
+                if (settings.segment) {
+                    this.setSegment(settings.segment);
+                }
+                if (settings.multiAnimationSettings) {
+                    this.setMultiAnimationSettings(settings.multiAnimationSettings);
+                }
+            }
             this._isBounce = this.mode === PlayMode.Bounce;
             if (this._multiAnimationSettings.length > 0 && this._multiAnimationSettings[this._currentAnimation]?.mode) {
                 this._isBounce = this._multiAnimationSettings[this._currentAnimation]?.mode === PlayMode.Bounce;
@@ -1237,7 +1269,7 @@ const notImplemented = 'Method is not implemented';
     /**
    * Handle click.
    */ _handleClick() {
-        if (!this.playOnClick) {
+        if (!this.playOnClick && !this.selector) {
             return;
         }
         this.togglePlay();
@@ -1621,7 +1653,20 @@ const notImplemented = 'Method is not implemented';
             this._lottieInstance[method]('data_ready', this._dataReady);
             this._lottieInstance[method]('data_failed', this._dataFailed);
         }
-        if (this._container) {
+        if (this.selector) {
+            const selector = document.getElementById(this.selector);
+            if (selector) {
+                if (this.hover) {
+                    selector[method]('mouseenter', this._mouseEnter);
+                    selector[method]('mouseleave', this._mouseLeave);
+                } else {
+                    selector[method]('click', this._handleClick);
+                }
+            } else {
+                this.selector = null;
+            }
+        }
+        if (this._container && !this.selector) {
             if (this.hover) {
                 this._container[method]('mouseenter', this._mouseEnter);
                 this._container[method]('mouseleave', this._mouseLeave);

package/dist/unpkg-canvas.js

@@ -67,4 +67,4 @@
       d="M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z"
     />
   </svg>
-`;async function n$(){if(!this.shadow||!this.template)throw Error("No Shadow Element or Template");this.template.innerHTML=`<div class="animation-container main" data-controls="${this.controls??!1}" 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===nD.Error?`<div class="error"><svg preserveAspectRatio="${C.Cover}" xmlns="http://www.w3.org/2000/svg" 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 nR.styles()],this.shadow.appendChild(this.template.content.cloneNode(!0))}let nN=t=>{let e={message:"Unknown error",status:k?500:400};return t&&"object"==typeof t&&("message"in t&&"string"==typeof t.message&&(e.message=t.message),"status"in t&&(e.status=Number(t.status))),e},nV="Method is not implemented";class nR extends n_{static get observedAttributes(){return["animateOnScroll","autoplay","controls","direction","hover","loop","mode","playOnClick","playOnVisible","speed","src","subframe"]}static get observedProperties(){return["playerState","_isSettingsOpen","_seeker","_currentAnimation","_animations"]}static get styles(){return async()=>{let t=new CSSStyleSheet;return await t.replace("* {\n  box-sizing: border-box;\n}\n\n:host {\n  --lottie-player-toolbar-height: 35px;\n  --lottie-player-toolbar-background-color: #fff;\n  --lottie-player-toolbar-icon-color: #000;\n  --lottie-player-toolbar-icon-hover-color: #000;\n  --lottie-player-toolbar-icon-active-color: #4285f4;\n  --lottie-player-seeker-track-color: rgb(0 0 0 / 20%);\n  --lottie-player-seeker-thumb-color: #4285f4;\n  --lottie-player-seeker-display: block;\n\n  width: 100%;\n  height: 100%;\n\n  &:not([hidden]) {\n    display: block;\n  }\n\n  .main {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n  }\n\n  .animation {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    margin: 0;\n    padding: 0;\n  }\n\n  [data-controls='true'] .animation {\n    height: calc(100% - 35px);\n  }\n\n  .animation-container {\n    position: relative;\n  }\n\n  .popover {\n    position: absolute;\n    right: 5px;\n    bottom: 40px;\n    background-color: var(--lottie-player-toolbar-background-color);\n    border-radius: 5px;\n    padding: 10px 15px;\n    border: solid 2px var(--lottie-player-toolbar-icon-color);\n    animation: fade-in 0.2s ease-in-out;\n\n    &::before {\n      content: '';\n      right: 10px;\n      border: 7px solid transparent;\n      margin-right: -7px;\n      height: 0;\n      width: 0;\n      position: absolute;\n      pointer-events: none;\n      top: 100%;\n      border-top-color: var(--lottie-player-toolbar-icon-color);\n    }\n  }\n\n  .error {\n    display: flex;\n    margin: auto;\n    justify-content: center;\n    height: 100%;\n    align-items: center;\n\n    & svg {\n      width: 100%;\n      height: auto;\n    }\n  }\n\n  .toolbar {\n    display: flex;\n    place-items: center center;\n    background: var(--lottie-player-toolbar-background-color);\n    margin: 0;\n    height: 35px;\n    padding: 5px;\n    border-radius: 5px;\n    gap: 5px;\n\n    &.has-error {\n      pointer-events: none;\n      opacity: 0.5;\n    }\n\n    & button {\n      cursor: pointer;\n      fill: var(--lottie-player-toolbar-icon-color);\n      color: var(--lottie-player-toolbar-icon-color);\n      background: none;\n      border: 0;\n      padding: 0;\n      outline: 0;\n      height: 100%;\n      margin: 0;\n      align-items: center;\n      gap: 5px;\n      opacity: 0.9;\n\n      &:not([hidden]) {\n        display: flex;\n      }\n\n      &:hover {\n        opacity: 1;\n      }\n\n      &[data-active='true'] {\n        opacity: 1;\n        fill: var(--lottie-player-toolbar-icon-active-color);\n      }\n\n      &:disabled {\n        opacity: 0.5;\n      }\n\n      &:focus {\n        outline: 0;\n      }\n\n      & svg {\n        pointer-events: none;\n\n        & > * {\n          fill: inherit;\n        }\n      }\n\n      &.disabled svg {\n        display: none;\n      }\n    }\n  }\n\n  .progress-container {\n    position: relative;\n    width: 100%;\n\n    &.simple {\n      margin-right: 12px;\n    }\n  }\n\n  .seeker {\n    appearance: none;\n    outline: none;\n    width: 100%;\n    height: 20px;\n    border-radius: 3px;\n    border: 0;\n    cursor: pointer;\n    background-color: transparent;\n\n    display: var(--lottie-player-seeker-display);\n    color: var(--lottie-player-seeker-thumb-color);\n    margin: 0;\n    padding: 7.5px 0;\n    position: relative;\n    z-index: 1;\n\n    &::-webkit-slider-runnable-track,\n    &::-webkit-slider-thumb {\n      appearance: none;\n      outline: none;\n    }\n\n    &::-webkit-slider-thumb {\n      height: 15px;\n      width: 15px;\n      border-radius: 50%;\n      border: 0;\n      background-color: var(--lottie-player-seeker-thumb-color);\n      cursor: pointer;\n      -webkit-transition: transform 0.2s ease-in-out;\n      transition: transform 0.2s ease-in-out;\n      transform: scale(0);\n    }\n\n    &:hover::-webkit-slider-thumb,\n    &:focus::-webkit-slider-thumb {\n      transform: scale(1);\n    }\n\n    &::-moz-range-progress {\n      background-color: var(--lottie-player-seeker-thumb-color);\n      height: 5px;\n      border-radius: 3px;\n    }\n\n    &::-moz-range-thumb {\n      height: 15px;\n      width: 15px;\n      border-radius: 50%;\n      background-color: var(--lottie-player-seeker-thumb-color);\n      border: 0;\n      cursor: pointer;\n      -moz-transition: transform 0.2s ease-in-out;\n      transition: transform 0.2s ease-in-out;\n      transform: scale(0);\n    }\n\n    &:hover::-moz-range-thumb,\n    &:focus::-moz-range-thumb {\n      transform: scale(1);\n    }\n\n    &::-ms-track {\n      width: 100%;\n      height: 5px;\n      cursor: pointer;\n      background: transparent;\n      border-color: transparent;\n      color: transparent;\n    }\n\n    &::-ms-fill-upper {\n      background: var(--lottie-player-seeker-track-color);\n      border-radius: 3px;\n    }\n\n    &::-ms-fill-lower {\n      background-color: var(--lottie-player-seeker-thumb-color);\n      border-radius: 3px;\n    }\n\n    &::-ms-thumb {\n      border: 0;\n      height: 15px;\n      width: 15px;\n      border-radius: 50%;\n      background: var(--lottie-player-seeker-thumb-color);\n      cursor: pointer;\n      -ms-transition: transform 0.2s ease-in-out;\n      transition: transform 0.2s ease-in-out;\n      transform: scale(0);\n    }\n\n    &:hover::-ms-thumb {\n      transform: scale(1);\n    }\n\n    &:focus {\n      &::-ms-thumb {\n        transform: scale(1);\n      }\n\n      &::-ms-fill-lower,\n      &::-ms-fill-upper {\n        background: var(--lottie-player-seeker-track-color);\n      }\n    }\n  }\n\n  & progress {\n    appearance: none;\n    outline: none;\n    position: absolute;\n    width: 100%;\n    height: 5px;\n    border-radius: 3px;\n    border: 0;\n    top: 0;\n    left: 0;\n    margin: 7.5px 0;\n    background-color: var(--lottie-player-seeker-track-color);\n    pointer-events: none;\n\n    &::-webkit-progress-inner-element {\n      border-radius: 3px;\n      overflow: hidden;\n    }\n\n    &::-webkit-slider-runnable-track {\n      background-color: transparent;\n    }\n\n    &::-webkit-progress-value {\n      background-color: var(--lottie-player-seeker-thumb-color);\n    }\n  }\n\n  & *::-moz-progress-bar {\n    background-color: var(--lottie-player-seeker-thumb-color);\n  }\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n@media (prefers-color-scheme: dark) {\n  :host {\n    --lottie-player-toolbar-background-color: #000;\n    --lottie-player-toolbar-icon-color: #fff;\n    --lottie-player-toolbar-icon-hover-color: #fff;\n    --lottie-player-seeker-track-color: rgb(255 255 255 / 60%);\n  }\n}\n"),t}}set animateOnScroll(t){this.setAttribute("animateOnScroll",(!!t).toString())}get animateOnScroll(){let t=this.getAttribute("animateOnScroll");return"true"===t||""===t||"1"===t}get animations(){return this._animations}set autoplay(t){this.setAttribute("autoplay",(!!t).toString())}get autoplay(){let t=this.getAttribute("autoplay");return"true"===t||""===t||"1"===t}set background(t){this.setAttribute("background",t)}get background(){return this.getAttribute("background")||"transparent"}set controls(t){this.setAttribute("controls",(!!t).toString())}get controls(){let t=this.getAttribute("controls");return"true"===t||""===t||"1"===t}set count(t){this.setAttribute("count",t.toString())}get count(){let t=this.getAttribute("count");return t?Number(t):0}get currentAnimation(){return this._currentAnimation}set delay(t){this.setAttribute("delay",t.toString())}get delay(){let t=this.getAttribute("delay");return t?Number(t):0}set description(t){t&&this.setAttribute("description",t)}get description(){return this.getAttribute("description")}set direction(t){this.setAttribute("direction",t.toString())}get direction(){let t=Number(this.getAttribute("direction"));return -1===t?t:1}set dontFreezeOnBlur(t){this.setAttribute("dontFreezeOnBlur",t.toString())}get dontFreezeOnBlur(){let t=this.getAttribute("dontFreezeOnBlur");return"true"===t||""===t||"1"===t}set hover(t){this.setAttribute("hover",t.toString())}get hover(){let t=this.getAttribute("hover");return"true"===t||""===t||"1"===t}set intermission(t){this.setAttribute("intermission",t.toString())}get intermission(){let t=Number(this.getAttribute("intermission"));return isNaN(t)?0:t}get isDotLottie(){return this._isDotLottie}set loop(t){this.setAttribute("loop",(!!t).toString())}get loop(){let t=this.getAttribute("loop");return"true"===t||""===t||"1"===t}set mode(t){this.setAttribute("mode",t)}get mode(){let t=this.getAttribute("mode");return t===x.Bounce?t:x.Normal}set mouseout(t){this.setAttribute("mouseout",t)}get mouseout(){let t=this.getAttribute("mouseout");switch(t){case"void":case"pause":case"reverse":return t;default:return"stop"}}set objectfit(t){this.setAttribute("objectfit",t)}get objectfit(){let t=this.getAttribute("objectfit");return t&&Object.values(nA).includes(t)?t:nA.Contain}set once(t){this.setAttribute("once",t.toString())}get once(){let t=this.getAttribute("once");return"true"===t||""===t||"1"===t}set playOnClick(t){this.setAttribute("playOnClick",t.toString())}get playOnClick(){let t=this.getAttribute("playOnClick");return"true"===t||""===t||"1"===t}set playOnVisible(t){this.setAttribute("playOnVisible",t.toString())}get playOnVisible(){let t=this.getAttribute("playOnVisible");return"true"===t||""===t||"1"===t}set preserveAspectRatio(t){this.setAttribute("preserveAspectRatio",t||C.Contain)}get preserveAspectRatio(){let t=this.getAttribute("preserveAspectRatio");return t&&Object.values(C).includes(t)?t:null}set renderer(t){this.setAttribute("renderer",t)}get renderer(){let t=this.getAttribute("renderer");return t===E.Canvas||t===E.HTML?t:E.SVG}set simple(t){this.setAttribute("simple",t.toString())}get simple(){let t=this.getAttribute("simple");return"true"===t||""===t||"1"===t}set speed(t){this.setAttribute("speed",t.toString())}get speed(){let t=this.getAttribute("speed");return null===t||isNaN(Number(t))?1:Number(t)}set src(t){this.setAttribute("src",t||"")}get src(){return this.getAttribute("src")}set subframe(t){this.setAttribute("subframe",(!!t).toString())}get subframe(){let t=this.getAttribute("subframe");return"true"===t||""===t||"1"===t}constructor(){super(),this.isLight=!1,this.playerState=nD.Loading,this._container=null,this._errorMessage="Something went wrong",this._identifier=this.id||a(),this._isSettingsOpen=!1,this._playerState={count:0,loaded:!1,prev:nD.Loading,scrollTimeout:null,scrollY:0,visible:!1},this._render=n$,this._renderControls=nF,this._seeker=0,this._animations=[],this._currentAnimation=0,this._isBounce=!1,this._isDotLottie=!1,this._lottieInstance=null,this._multiAnimationSettings=[],this._complete=this._complete.bind(this),this._dataFailed=this._dataFailed.bind(this),this._dataReady=this._dataReady.bind(this),this._DOMLoaded=this._DOMLoaded.bind(this),this._enterFrame=this._enterFrame.bind(this),this._freeze=this._freeze.bind(this),this._handleBlur=this._handleBlur.bind(this),this._handleClick=this._handleClick.bind(this),this._handleScroll=this._handleScroll.bind(this),this._handleSeekChange=this._handleSeekChange.bind(this),this._handleWindowBlur=this._handleWindowBlur.bind(this),this._loopComplete=this._loopComplete.bind(this),this._mouseEnter=this._mouseEnter.bind(this),this._mouseLeave=this._mouseLeave.bind(this),this._onVisibilityChange=this._onVisibilityChange.bind(this),this._switchInstance=this._switchInstance.bind(this),this._handleSettingsClick=this._handleSettingsClick.bind(this),this.togglePlay=this.togglePlay.bind(this),this.stop=this.stop.bind(this),this.prev=this.prev.bind(this),this.next=this.next.bind(this),this._renderControls=this._renderControls.bind(this),this.snapshot=this.snapshot.bind(this),this.toggleLoop=this.toggleLoop.bind(this),this.toggleBoomerang=this.toggleBoomerang.bind(this),this.destroy=this.destroy.bind(this),this.template=document.createElement("template"),this.shadow=this.attachShadow({mode:"open"})}addAnimation(t){throw Error(nV)}async attributeChangedCallback(t,e,s){if(this._lottieInstance&&this.shadow&&this._container)switch(t){case"animateOnScroll":if(""===s||s){this._lottieInstance.autoplay=!1,addEventListener("scroll",this._handleScroll,{capture:!0,passive:!0});return}removeEventListener("scroll",this._handleScroll,!0);break;case"autoplay":if(this.animateOnScroll||this.playOnVisible)return;if(""===s||s)return void this.play();this.stop();break;case"controls":this._renderControls();break;case"direction":if(-1===Number(s))return void this.setDirection(-1);this.setDirection(1);break;case"hover":if(""===s||s){this._container.addEventListener("mouseenter",this._mouseEnter),this._container.addEventListener("mouseleave",this._mouseLeave);return}this._container.removeEventListener("mouseenter",this._mouseEnter),this._container.removeEventListener("mouseleave",this._mouseLeave);break;case"loop":{let t=this.shadow.querySelector(".toggleLoop");t instanceof HTMLButtonElement&&(t.dataset.active=s),this.setLoop(""===s||!!s);break}case"mode":{let t=this.shadow.querySelector(".toggleBoomerang");t instanceof HTMLButtonElement&&(t.dataset.active=(s===x.Bounce).toString()),this._isBounce=s===x.Bounce;break}case"playOnClick":if(""===s||s){this._lottieInstance.autoplay=!1,this._container.addEventListener("click",this._handleClick);return}this._container.removeEventListener("click",this._handleClick);break;case"playOnVisible":(""===s||s)&&(this._lottieInstance.autoplay=!1);break;case"speed":{let t=Number(s);t&&!isNaN(t)&&this.setSpeed(t);break}case"src":await this.load(s);break;case"subframe":this.setSubframe(""===s||!!s)}}connectedCallback(){super.connectedCallback();try{(async()=>{if(await this._render(),!this.shadow)throw Error("Missing Shadow element");this._container=this.shadow.querySelector(".animation"),await this.load(this.src),void 0!==document.hidden&&document.addEventListener("visibilitychange",this._onVisibilityChange),this._addIntersectionObserver(),this.dispatchEvent(new CustomEvent(S.Rendered))})()}catch(t){console.error(t),this.dispatchEvent(new CustomEvent(S.Error))}}convert(t){throw Error(nV)}destroy(){this._lottieInstance?.destroy&&(this.playerState=nD.Destroyed,this._lottieInstance.destroy(),this._lottieInstance=null,this.dispatchEvent(new CustomEvent(S.Destroyed)),this.remove(),document.removeEventListener("visibilitychange",this._onVisibilityChange))}disconnectedCallback(){this._intersectionObserver&&(this._intersectionObserver.disconnect(),this._intersectionObserver=void 0),document.removeEventListener("visibilitychange",this._onVisibilityChange),this.destroy()}getLottie(){return this._lottieInstance}getManifest(){return this._manifest}getMultiAnimationSettings(){return this._multiAnimationSettings}getSegment(){return this._segment}async load(t){try{if(!this.shadowRoot||!t)return;this.source=t;let{animations:e,isDotLottie:s,manifest:i}=await ny(t);if(!e||e.some(t=>!["v","ip","op","layers","fr","w","h"].every(e=>Object.hasOwn(t,e))))throw Error("Broken or corrupted file");this._isBounce=this.mode===x.Bounce,this._multiAnimationSettings.length>0&&this._multiAnimationSettings[this._currentAnimation]?.mode&&(this._isBounce=this._multiAnimationSettings[this._currentAnimation]?.mode===x.Bounce);let r=i?.animations[0];r&&(r.autoplay=!this.animateOnScroll&&!this.playOnVisible&&this.autoplay,r.loop=this.loop),this._isDotLottie=s,this._animations=e,this._manifest=i??{animations:[{autoplay:!this.animateOnScroll&&!this.playOnVisible&&this.autoplay,direction:this.direction,id:a(),loop:this.loop,mode:this.mode,speed:this.speed}]},this._lottieInstance?.destroy(),this.playerState=nD.Stopped,!this.animateOnScroll&&(this.autoplay||this._multiAnimationSettings[this._currentAnimation]?.autoplay||this.playOnVisible)&&(this.playerState=nD.Playing),this._lottieInstance=this.loadAnimation({...this._getOptions(),animationData:e[this._currentAnimation]}),this._addEventListeners();let n=this._multiAnimationSettings[this._currentAnimation]?.speed??this.speed,o=this._multiAnimationSettings[this._currentAnimation]?.direction??this.direction;if(this._lottieInstance.setSpeed(n),this._lottieInstance.setDirection(o),this._lottieInstance.setSubframe(!!this.subframe),(this.autoplay||this.animateOnScroll||this.playOnVisible)&&-1===this.direction&&this.seek("99%"),this._renderControls(),this.autoplay||this.playOnVisible){let t=this.shadow?.querySelector(".togglePlay");t&&(t.innerHTML=nL)}}catch(t){console.error(t),this._errorMessage=nN(t).message,this.playerState=nD.Error,this.dispatchEvent(new CustomEvent(S.Error))}}loadAnimation(t){throw Error(nV)}next(){this._currentAnimation++,this._switchInstance()}pause(){if(!this._lottieInstance)return;this._playerState.prev=this.playerState;let t=!1;try{this._lottieInstance.pause(),this.dispatchEvent(new CustomEvent(S.Pause))}catch(e){t=!0,console.error(e)}finally{this.playerState=t?nD.Error:nD.Paused}}play(){if(!this._lottieInstance)return;this._playerState.prev=this.playerState;let t=!1;try{this._lottieInstance.play(),this.dispatchEvent(new CustomEvent(S.Play))}catch(e){t=!0,console.error(e)}finally{this.playerState=t?nD.Error:nD.Playing}}prev(){this._currentAnimation--,this._switchInstance(!0)}propertyChangedCallback(t,e,s){if(!this.shadow)return;let i=this.shadow.querySelector(".togglePlay"),r=this.shadow.querySelector(".stop"),a=this.shadow.querySelector(".prev"),n=this.shadow.querySelector(".next"),o=this.shadow.querySelector(".seeker"),h=this.shadow.querySelector("progress"),l=this.shadow.querySelector(".popover"),p=this.shadow.querySelector(".convert"),c=this.shadow.querySelector(".snapshot");i instanceof HTMLButtonElement&&r instanceof HTMLButtonElement&&n instanceof HTMLButtonElement&&a instanceof HTMLButtonElement&&o instanceof HTMLInputElement&&h instanceof HTMLProgressElement&&("playerState"===t&&(i.dataset.active=(s===nD.Playing||s===nD.Paused).toString(),r.dataset.active=(s===nD.Stopped).toString(),s===nD.Playing?i.innerHTML=nL:i.innerHTML=nk),"_seeker"===t&&"number"==typeof s&&(o.value=s.toString(),o.ariaValueNow=s.toString(),h.value=s),"_animations"===t&&Array.isArray(s)&&this._currentAnimation+1<s.length&&(n.hidden=!1),"_currentAnimation"===t&&"number"==typeof s&&(n.hidden=s+1>=this._animations.length,a.hidden=!s),"_isSettingsOpen"===t&&"boolean"==typeof s&&l instanceof HTMLDivElement&&p instanceof HTMLButtonElement&&c instanceof HTMLButtonElement&&(l.hidden=!s,p.hidden=this.isLight,c.hidden=this.renderer!==E.SVG))}async reload(){this._lottieInstance&&this.src&&(this._lottieInstance.destroy(),await this.load(this.src))}seek(t){if(!this._lottieInstance)return;let e=t.toString().match(/^(\d+)(%?)$/);if(!e)return;let s=Math.round("%"===e[2]?this._lottieInstance.totalFrames*Number(e[1])/100:Number(e[1]));if(this._seeker=s,this.playerState===nD.Playing||this.playerState===nD.Frozen&&this._playerState.prev===nD.Playing){this._lottieInstance.goToAndPlay(s,!0),this.playerState=nD.Playing;return}this._lottieInstance.goToAndStop(s,!0),this._lottieInstance.pause()}setCount(t){this.count=t}setDirection(t){this._lottieInstance&&this._lottieInstance.setDirection(t)}setLoop(t){this._lottieInstance&&this._lottieInstance.setLoop(t)}setMultiAnimationSettings(t){this._multiAnimationSettings=t}setSegment(t){this._segment=t}setSpeed(t=1){this._lottieInstance&&this._lottieInstance.setSpeed(t)}setSubframe(t){this._lottieInstance&&this._lottieInstance.setSubframe(t)}snapshot(t=!0,e="AM Lottie"){try{var s;if(!this.shadowRoot)throw Error("Unknown error");let i=this.shadowRoot.querySelector(".animation svg");if(!i)throw Error("Could not retrieve animation from DOM");let r=i instanceof Node?new XMLSerializer().serializeToString(i):null;if(!r)throw Error("Could not serialize SVG element");return t&&((t,e)=>{let s=new Blob([t],{type:e?.mimeType}),i=e?.name||a(),r=URL.createObjectURL(s),n=document.createElement("a");n.href=r,n.download=i,n.hidden=!0,document.body.appendChild(n),n.click(),setTimeout(()=>{n.remove(),URL.revokeObjectURL(r)},1e3)})(r,{mimeType:"image/svg+xml",name:`${(s=this.src||e,(t=>{if("string"==typeof t&&t&&(t=>{let e=t?.split("/").pop()?.lastIndexOf(".");return(e??0)>1&&t&&t.length-1>(e??0)})(t))return t.split(".").pop()?.toLowerCase()})(s),`${s.split("/").pop()?.replace(/\.[^.]*$/,"").replaceAll(/\W+/g,"-")}`)}-${((this._seeker??0)+1).toString().padStart(3,"0")}.svg`}),r}catch(t){return console.error(t),null}}stop(){if(this._lottieInstance){this._playerState.prev=this.playerState,this._playerState.count=0;try{this._lottieInstance.stop(),this.dispatchEvent(new CustomEvent(S.Stop))}finally{this.playerState=nD.Stopped}}}toggleBoomerang(){let t=this._multiAnimationSettings[this._currentAnimation]??{};if(void 0!==t.mode){if(t.mode===x.Normal){t.mode=x.Bounce,this._isBounce=!0;return}t.mode=x.Normal,this._isBounce=!1;return}if(this.mode===x.Normal){this.mode=x.Bounce,this._isBounce=!0;return}this.mode=x.Normal,this._isBounce=!1}toggleLoop(){let t=!this.loop;this.loop=t,this.setLoop(t)}togglePlay(){if(!this._lottieInstance)return;let{currentFrame:t,playDirection:e,totalFrames:s}=this._lottieInstance;if(this.playerState===nD.Playing)return void this.pause();if(this.playerState!==nD.Completed)return void this.play();if(this.playerState=nD.Playing,this._isBounce){this.setDirection(-1*e),this._lottieInstance.goToAndPlay(t,!0);return}if(-1===e)return void this._lottieInstance.goToAndPlay(s,!0);this._lottieInstance.goToAndPlay(0,!0)}_freeze(){if(this._lottieInstance){this._playerState.prev=this.playerState;try{this._lottieInstance.pause(),this.dispatchEvent(new CustomEvent(S.Freeze))}finally{this.playerState=nD.Frozen}}}_handleBlur(){setTimeout(()=>{this._toggleSettings(!1)},200)}_handleClick(){this.playOnClick&&this.togglePlay()}_handleSeekChange({target:t}){!(!(t instanceof HTMLInputElement)||!this._lottieInstance||isNaN(Number(t.value)))&&this.seek(Math.round(Number(t.value)/100*this._lottieInstance.totalFrames))}_handleSettingsClick({target:t}){this._toggleSettings(),t instanceof HTMLElement&&t.focus()}setOptions(t){throw Error("Method not implemented")}_addEventListeners(){this._toggleEventListeners("add")}_addIntersectionObserver(){if(this._container&&!this._intersectionObserver){if(!("IntersectionObserver"in window)){this._intersectionObserverFallback(),removeEventListener("scroll",this._intersectionObserverFallback,!0),addEventListener("scroll",this._intersectionObserverFallback,{capture:!0,passive:!0});return}this._intersectionObserver=new IntersectionObserver(t=>{let{length:e}=t;for(let s=0;s<e;s++){if(!t[s]?.isIntersecting||document.hidden){this.playerState===nD.Playing&&this._freeze(),this._playerState.visible=!1;continue}this.animateOnScroll||this.playOnVisible||this.playerState!==nD.Frozen||this.play(),this.playOnVisible&&(this.playerState!==nD.Completed||this.once?setTimeout(()=>{this.play()},this.delay):(this.playerState=nD.Playing,this._lottieInstance?.goToAndPlay(1===this.direction?0:this._lottieInstance.totalFrames))),!this._playerState.scrollY&&(t[s]?.boundingClientRect.y||0)>0&&(this._playerState.scrollY=scrollY),this._playerState.visible=!0}}),this._intersectionObserver.observe(this._container)}}_complete(){if(!this._lottieInstance)return;if(this._animations.length>1){if(this._multiAnimationSettings[this._currentAnimation+1]?.autoplay)return void this.next();if(this.loop&&this._currentAnimation===this._animations.length-1){this._currentAnimation=0,this._switchInstance();return}}let{currentFrame:t,totalFrames:e}=this._lottieInstance;this._seeker=Math.round(t/e*100),this.playerState=nD.Completed,this.dispatchEvent(new CustomEvent(S.Complete,{detail:{frame:t,seeker:this._seeker}}))}_dataFailed(){this.playerState=nD.Error,this.dispatchEvent(new CustomEvent(S.Error))}_dataReady(){this.dispatchEvent(new CustomEvent(S.Load))}_DOMLoaded(){this._playerState.loaded=!0,this.dispatchEvent(new CustomEvent(S.Ready))}_enterFrame(){if(!this._lottieInstance)return;let{currentFrame:t,totalFrames:e}=this._lottieInstance;this._seeker=Math.round(t/e*100),this.dispatchEvent(new CustomEvent(S.Frame,{detail:{frame:t,seeker:this._seeker}}))}_getOptions(){if(!this._container)throw Error("Container not rendered");let t=this.preserveAspectRatio??(t=>{switch(t){case nA.Contain:case nA.ScaleDown:return C.Contain;case nA.Cover:return C.Cover;case nA.Fill:return C.Initial;case nA.None:return C.None;default:return C.Contain}})(this.objectfit),e=this._multiAnimationSettings.length>0?this._multiAnimationSettings[this._currentAnimation]:void 0,s=this._manifest?.animations[this._currentAnimation],i=!!this.loop;s?.loop!==void 0&&(i=!!s.loop),e?.loop!==void 0&&(i=!!e.loop);let r=!!this.autoplay;s?.autoplay!==void 0&&(r=!!s.autoplay),e?.autoplay!==void 0&&(r=!!e.autoplay),this.animateOnScroll&&(r=!1);let a=this._segment;return this._segment?.every(t=>t>0)&&(a=[this._segment[0]-1,this._segment[1]-1]),this._segment?.some(t=>t<0)&&(a=void 0),this.setOptions({container:this._container,hasAutoplay:r,hasLoop:i,initialSegment:a,preserveAspectRatio:t,rendererType:this.renderer})}_handleScroll(){if(this.animateOnScroll&&this._lottieInstance){if(k)return void console.warn("DotLottie: Scroll animations might not work properly in a Server Side Rendering context. Try to wrap this in a client component.");if(this._playerState.visible){this._playerState.scrollTimeout&&clearTimeout(this._playerState.scrollTimeout),this._playerState.scrollTimeout=setTimeout(()=>{this.playerState=nD.Paused},400);let t=Math.min(Math.max((scrollY>this._playerState.scrollY?scrollY-this._playerState.scrollY:this._playerState.scrollY-scrollY)/3,1),3*this._lottieInstance.totalFrames)/3;requestAnimationFrame(()=>{t<(this._lottieInstance?.totalFrames??0)?(this.playerState=nD.Playing,this._lottieInstance?.goToAndStop(t,!0)):this.playerState=nD.Paused})}}}_handleWindowBlur({type:t}){this.dontFreezeOnBlur||(this.playerState===nD.Playing&&"blur"===t&&this._freeze(),this.playerState===nD.Frozen&&"focus"===t&&this.play())}_intersectionObserverFallback(){if(!this._container)return;let{bottom:t,left:e,right:s,top:i}=this._container.getBoundingClientRect();this._playerState.visible=i>=0&&e>=0&&t<=innerHeight&&s<=innerWidth,(this.autoplay||this.playOnVisible||this.playerState===nD.Playing||this.playerState===nD.Frozen)&&(this._playerState.visible?this.play():this._freeze())}_loopComplete(){if(!this._lottieInstance)return;let{playDirection:t,totalFrames:e}=this._lottieInstance,s=this._segment?this._segment[0]:0,i=this._segment?this._segment[0]:e;if(this.count&&(this._isBounce?this._playerState.count+=.5:this._playerState.count+=1,this._playerState.count>=this.count)){this.setLoop(!1),this.playerState=nD.Completed,this.dispatchEvent(new CustomEvent(S.Complete));return}return(this.dispatchEvent(new CustomEvent(S.Loop)),this._isBounce)?(this._lottieInstance.goToAndStop(-1===t?s:.99*i,!0),this._lottieInstance.setDirection(-1*t),setTimeout(()=>{this.animateOnScroll||this._lottieInstance?.play()},this.intermission)):(this._lottieInstance.goToAndStop(-1===t?.99*i:s,!0),setTimeout(()=>{this.animateOnScroll||this._lottieInstance?.play()},this.intermission))}_mouseEnter(){if(!(!this.hover||!this._lottieInstance||"ontouchstart"in window)){if("reverse"===this.mouseout&&this._lottieInstance.setDirection(1),this.playerState===nD.Completed){this._lottieInstance.goToAndPlay(0,!0),this.playerState=nD.Playing;return}this.playerState!==nD.Playing&&this.play()}}_mouseLeave(){if(!(!this.hover||!this._lottieInstance||"ontouchstart"in window))switch(this.mouseout){case"void":break;case"pause":this.pause();break;case"reverse":this._lottieInstance.setDirection(-1),this.play();break;default:this.stop()}}_onVisibilityChange(){if(document.hidden&&this.playerState===nD.Playing)return void this._freeze();this.playerState===nD.Frozen&&this.play()}_removeEventListeners(){this._toggleEventListeners("remove")}_switchInstance(t=!1){if(this._animations[this._currentAnimation])try{if(this._lottieInstance&&this._lottieInstance.destroy(),this._lottieInstance=this.loadAnimation({...this._getOptions(),animationData:this._animations[this._currentAnimation]}),this._multiAnimationSettings[this._currentAnimation]?.mode&&(this._isBounce=this._multiAnimationSettings[this._currentAnimation]?.mode===x.Bounce),this._removeEventListeners(),this._addEventListeners(),this.dispatchEvent(new CustomEvent(t?S.Previous:S.Next)),this._multiAnimationSettings[this._currentAnimation]?.autoplay??this.autoplay){if(this.animateOnScroll){this._lottieInstance.goToAndStop(0,!0),this.playerState=nD.Paused;return}this._lottieInstance.goToAndPlay(0,!0),this.playerState=nD.Playing;return}this._lottieInstance.goToAndStop(0,!0),this.playerState=nD.Stopped}catch(t){this._errorMessage=nN(t).message,this.playerState=nD.Error,this.dispatchEvent(new CustomEvent(S.Error))}}_toggleEventListeners(t){let e="add"===t?"addEventListener":"removeEventListener";this._lottieInstance&&(this._lottieInstance[e]("enterFrame",this._enterFrame),this._lottieInstance[e]("complete",this._complete),this._lottieInstance[e]("loopComplete",this._loopComplete),this._lottieInstance[e]("DOMLoaded",this._DOMLoaded),this._lottieInstance[e]("data_ready",this._dataReady),this._lottieInstance[e]("data_failed",this._dataFailed)),this._container&&(this.hover&&(this._container[e]("mouseenter",this._mouseEnter),this._container[e]("mouseleave",this._mouseLeave)),this.playOnClick&&this._container[e]("click",this._handleClick)),window[e]("focus",this._handleWindowBlur,{capture:!1,passive:!0}),window[e]("blur",this._handleWindowBlur,{capture:!1,passive:!0}),this.animateOnScroll&&window[e]("scroll",this._handleScroll,{capture:!0,passive:!0})}_toggleSettings(t){if(void 0===t){this._isSettingsOpen=!this._isSettingsOpen;return}this._isSettingsOpen=t}}class nO extends nR{get renderer(){return E.SVG}constructor(){super(),this.loadAnimation=rU,this.isLight=!0}setOptions({container:t,hasAutoplay:e,hasLoop:s,initialSegment:i,preserveAspectRatio:r}){return{autoplay:e,container:t,initialSegment:i,loop:s,renderer:E.Canvas,rendererSettings:{clearCanvas:!0,imagePreserveAspectRatio:r,preserveAspectRatio:r,progressiveLoad:!0}}}}globalThis.dotLottiePlayer=()=>new nO,k||customElements.define(nI,nO),t.PlayMode=x,t.PlayerEvents=S,t.PlayerState=nD,t.default=nO,t.tagName=nI,Object.defineProperty(t,"__esModule",{value:!0})}(this["@aarsteinmedia/dotlottie-player"]=this["@aarsteinmedia/dotlottie-player"]||{});
+`;async function n$(){if(!this.shadow||!this.template)throw Error("No Shadow Element or Template");this.template.innerHTML=`<div class="animation-container main" data-controls="${this.controls??!1}" 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===nD.Error?`<div class="error"><svg preserveAspectRatio="${C.Cover}" xmlns="http://www.w3.org/2000/svg" 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 nR.styles()],this.shadow.appendChild(this.template.content.cloneNode(!0))}let nN=t=>{let e={message:"Unknown error",status:k?500:400};return t&&"object"==typeof t&&("message"in t&&"string"==typeof t.message&&(e.message=t.message),"status"in t&&(e.status=Number(t.status))),e},nV="Method is not implemented";class nR extends n_{static get observedAttributes(){return["animateOnScroll","autoplay","controls","direction","hover","loop","mode","playOnClick","playOnVisible","selector","speed","src","subframe"]}static get observedProperties(){return["playerState","_isSettingsOpen","_seeker","_currentAnimation","_animations"]}static get styles(){return async()=>{let t=new CSSStyleSheet;return await t.replace("* {\n  box-sizing: border-box;\n}\n\n:host {\n  --lottie-player-toolbar-height: 35px;\n  --lottie-player-toolbar-background-color: #fff;\n  --lottie-player-toolbar-icon-color: #000;\n  --lottie-player-toolbar-icon-hover-color: #000;\n  --lottie-player-toolbar-icon-active-color: #4285f4;\n  --lottie-player-seeker-track-color: rgb(0 0 0 / 20%);\n  --lottie-player-seeker-thumb-color: #4285f4;\n  --lottie-player-seeker-display: block;\n\n  width: 100%;\n  height: 100%;\n\n  &:not([hidden]) {\n    display: block;\n  }\n\n  .main {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n  }\n\n  .animation {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    margin: 0;\n    padding: 0;\n  }\n\n  [data-controls='true'] .animation {\n    height: calc(100% - 35px);\n  }\n\n  .animation-container {\n    position: relative;\n  }\n\n  .popover {\n    position: absolute;\n    right: 5px;\n    bottom: 40px;\n    background-color: var(--lottie-player-toolbar-background-color);\n    border-radius: 5px;\n    padding: 10px 15px;\n    border: solid 2px var(--lottie-player-toolbar-icon-color);\n    animation: fade-in 0.2s ease-in-out;\n\n    &::before {\n      content: '';\n      right: 10px;\n      border: 7px solid transparent;\n      margin-right: -7px;\n      height: 0;\n      width: 0;\n      position: absolute;\n      pointer-events: none;\n      top: 100%;\n      border-top-color: var(--lottie-player-toolbar-icon-color);\n    }\n  }\n\n  .error {\n    display: flex;\n    margin: auto;\n    justify-content: center;\n    height: 100%;\n    align-items: center;\n\n    & svg {\n      width: 100%;\n      height: auto;\n    }\n  }\n\n  .toolbar {\n    display: flex;\n    place-items: center center;\n    background: var(--lottie-player-toolbar-background-color);\n    margin: 0;\n    height: 35px;\n    padding: 5px;\n    border-radius: 5px;\n    gap: 5px;\n\n    &.has-error {\n      pointer-events: none;\n      opacity: 0.5;\n    }\n\n    & button {\n      cursor: pointer;\n      fill: var(--lottie-player-toolbar-icon-color);\n      color: var(--lottie-player-toolbar-icon-color);\n      background: none;\n      border: 0;\n      padding: 0;\n      outline: 0;\n      height: 100%;\n      margin: 0;\n      align-items: center;\n      gap: 5px;\n      opacity: 0.9;\n\n      &:not([hidden]) {\n        display: flex;\n      }\n\n      &:hover {\n        opacity: 1;\n      }\n\n      &[data-active='true'] {\n        opacity: 1;\n        fill: var(--lottie-player-toolbar-icon-active-color);\n      }\n\n      &:disabled {\n        opacity: 0.5;\n      }\n\n      &:focus {\n        outline: 0;\n      }\n\n      & svg {\n        pointer-events: none;\n\n        & > * {\n          fill: inherit;\n        }\n      }\n\n      &.disabled svg {\n        display: none;\n      }\n    }\n  }\n\n  .progress-container {\n    position: relative;\n    width: 100%;\n\n    &.simple {\n      margin-right: 12px;\n    }\n  }\n\n  .seeker {\n    appearance: none;\n    outline: none;\n    width: 100%;\n    height: 20px;\n    border-radius: 3px;\n    border: 0;\n    cursor: pointer;\n    background-color: transparent;\n\n    display: var(--lottie-player-seeker-display);\n    color: var(--lottie-player-seeker-thumb-color);\n    margin: 0;\n    padding: 7.5px 0;\n    position: relative;\n    z-index: 1;\n\n    &::-webkit-slider-runnable-track,\n    &::-webkit-slider-thumb {\n      appearance: none;\n      outline: none;\n    }\n\n    &::-webkit-slider-thumb {\n      height: 15px;\n      width: 15px;\n      border-radius: 50%;\n      border: 0;\n      background-color: var(--lottie-player-seeker-thumb-color);\n      cursor: pointer;\n      -webkit-transition: transform 0.2s ease-in-out;\n      transition: transform 0.2s ease-in-out;\n      transform: scale(0);\n    }\n\n    &:hover::-webkit-slider-thumb,\n    &:focus::-webkit-slider-thumb {\n      transform: scale(1);\n    }\n\n    &::-moz-range-progress {\n      background-color: var(--lottie-player-seeker-thumb-color);\n      height: 5px;\n      border-radius: 3px;\n    }\n\n    &::-moz-range-thumb {\n      height: 15px;\n      width: 15px;\n      border-radius: 50%;\n      background-color: var(--lottie-player-seeker-thumb-color);\n      border: 0;\n      cursor: pointer;\n      -moz-transition: transform 0.2s ease-in-out;\n      transition: transform 0.2s ease-in-out;\n      transform: scale(0);\n    }\n\n    &:hover::-moz-range-thumb,\n    &:focus::-moz-range-thumb {\n      transform: scale(1);\n    }\n\n    &::-ms-track {\n      width: 100%;\n      height: 5px;\n      cursor: pointer;\n      background: transparent;\n      border-color: transparent;\n      color: transparent;\n    }\n\n    &::-ms-fill-upper {\n      background: var(--lottie-player-seeker-track-color);\n      border-radius: 3px;\n    }\n\n    &::-ms-fill-lower {\n      background-color: var(--lottie-player-seeker-thumb-color);\n      border-radius: 3px;\n    }\n\n    &::-ms-thumb {\n      border: 0;\n      height: 15px;\n      width: 15px;\n      border-radius: 50%;\n      background: var(--lottie-player-seeker-thumb-color);\n      cursor: pointer;\n      -ms-transition: transform 0.2s ease-in-out;\n      transition: transform 0.2s ease-in-out;\n      transform: scale(0);\n    }\n\n    &:hover::-ms-thumb {\n      transform: scale(1);\n    }\n\n    &:focus {\n      &::-ms-thumb {\n        transform: scale(1);\n      }\n\n      &::-ms-fill-lower,\n      &::-ms-fill-upper {\n        background: var(--lottie-player-seeker-track-color);\n      }\n    }\n  }\n\n  & progress {\n    appearance: none;\n    outline: none;\n    position: absolute;\n    width: 100%;\n    height: 5px;\n    border-radius: 3px;\n    border: 0;\n    top: 0;\n    left: 0;\n    margin: 7.5px 0;\n    background-color: var(--lottie-player-seeker-track-color);\n    pointer-events: none;\n\n    &::-webkit-progress-inner-element {\n      border-radius: 3px;\n      overflow: hidden;\n    }\n\n    &::-webkit-slider-runnable-track {\n      background-color: transparent;\n    }\n\n    &::-webkit-progress-value {\n      background-color: var(--lottie-player-seeker-thumb-color);\n    }\n  }\n\n  & *::-moz-progress-bar {\n    background-color: var(--lottie-player-seeker-thumb-color);\n  }\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n@media (prefers-color-scheme: dark) {\n  :host {\n    --lottie-player-toolbar-background-color: #000;\n    --lottie-player-toolbar-icon-color: #fff;\n    --lottie-player-toolbar-icon-hover-color: #fff;\n    --lottie-player-seeker-track-color: rgb(255 255 255 / 60%);\n  }\n}\n"),t}}set animateOnScroll(t){this.setAttribute("animateOnScroll",(!!t).toString())}get animateOnScroll(){let t=this.getAttribute("animateOnScroll");return"true"===t||""===t||"1"===t}get animations(){return this._animations}set autoplay(t){this.setAttribute("autoplay",(!!t).toString())}get autoplay(){let t=this.getAttribute("autoplay");return"true"===t||""===t||"1"===t}set background(t){this.setAttribute("background",t)}get background(){return this.getAttribute("background")||"transparent"}set controls(t){this.setAttribute("controls",(!!t).toString())}get controls(){let t=this.getAttribute("controls");return"true"===t||""===t||"1"===t}set count(t){this.setAttribute("count",t.toString())}get count(){let t=this.getAttribute("count");return t?Number(t):0}get currentAnimation(){return this._currentAnimation}set delay(t){this.setAttribute("delay",t.toString())}get delay(){let t=this.getAttribute("delay");return t?Number(t):0}set description(t){t&&this.setAttribute("description",t)}get description(){return this.getAttribute("description")}set direction(t){this.setAttribute("direction",t.toString())}get direction(){let t=Number(this.getAttribute("direction"));return -1===t?t:1}set dontFreezeOnBlur(t){this.setAttribute("dontFreezeOnBlur",t.toString())}get dontFreezeOnBlur(){let t=this.getAttribute("dontFreezeOnBlur");return"true"===t||""===t||"1"===t}set hover(t){this.setAttribute("hover",t.toString())}get hover(){let t=this.getAttribute("hover");return"true"===t||""===t||"1"===t}set intermission(t){this.setAttribute("intermission",t.toString())}get intermission(){let t=Number(this.getAttribute("intermission"));return isNaN(t)?0:t}get isDotLottie(){return this._isDotLottie}set loop(t){this.setAttribute("loop",(!!t).toString())}get loop(){let t=this.getAttribute("loop");return"true"===t||""===t||"1"===t}set mode(t){this.setAttribute("mode",t)}get mode(){let t=this.getAttribute("mode");return t===x.Bounce?t:x.Normal}set mouseout(t){this.setAttribute("mouseout",t)}get mouseout(){let t=this.getAttribute("mouseout");switch(t){case"void":case"pause":case"reverse":return t;default:return"stop"}}set objectfit(t){this.setAttribute("objectfit",t)}get objectfit(){let t=this.getAttribute("objectfit");return t&&Object.values(nA).includes(t)?t:nA.Contain}set once(t){this.setAttribute("once",t.toString())}get once(){let t=this.getAttribute("once");return"true"===t||""===t||"1"===t}set playOnClick(t){this.setAttribute("playOnClick",t.toString())}get playOnClick(){let t=this.getAttribute("playOnClick");return"true"===t||""===t||"1"===t}set playOnVisible(t){this.setAttribute("playOnVisible",t.toString())}get playOnVisible(){let t=this.getAttribute("playOnVisible");return"true"===t||""===t||"1"===t}set preserveAspectRatio(t){this.setAttribute("preserveAspectRatio",t||C.Contain)}get preserveAspectRatio(){let t=this.getAttribute("preserveAspectRatio");return t&&Object.values(C).includes(t)?t:null}set renderer(t){this.setAttribute("renderer",t)}get renderer(){let t=this.getAttribute("renderer");return t===E.Canvas||t===E.HTML?t:E.SVG}set selector(t){if(t)return void this.setAttribute("selector",t);this.removeAttribute("selector")}get selector(){return this.getAttribute("selector")}set simple(t){this.setAttribute("simple",t.toString())}get simple(){let t=this.getAttribute("simple");return"true"===t||""===t||"1"===t}set speed(t){this.setAttribute("speed",t.toString())}get speed(){let t=this.getAttribute("speed");return null===t||isNaN(Number(t))?1:Number(t)}set src(t){this.setAttribute("src",t||"")}get src(){return this.getAttribute("src")}set subframe(t){this.setAttribute("subframe",(!!t).toString())}get subframe(){let t=this.getAttribute("subframe");return"true"===t||""===t||"1"===t}constructor(){super(),this.isLight=!1,this.playerState=nD.Loading,this._container=null,this._errorMessage="Something went wrong",this._identifier=this.id||a(),this._isSettingsOpen=!1,this._playerState={count:0,loaded:!1,prev:nD.Loading,scrollTimeout:null,scrollY:0,visible:!1},this._render=n$,this._renderControls=nF,this._seeker=0,this._animations=[],this._currentAnimation=0,this._isBounce=!1,this._isDotLottie=!1,this._lottieInstance=null,this._multiAnimationSettings=[],this._complete=this._complete.bind(this),this._dataFailed=this._dataFailed.bind(this),this._dataReady=this._dataReady.bind(this),this._DOMLoaded=this._DOMLoaded.bind(this),this._enterFrame=this._enterFrame.bind(this),this._freeze=this._freeze.bind(this),this._handleBlur=this._handleBlur.bind(this),this._handleClick=this._handleClick.bind(this),this._handleScroll=this._handleScroll.bind(this),this._handleSeekChange=this._handleSeekChange.bind(this),this._handleWindowBlur=this._handleWindowBlur.bind(this),this._loopComplete=this._loopComplete.bind(this),this._mouseEnter=this._mouseEnter.bind(this),this._mouseLeave=this._mouseLeave.bind(this),this._onVisibilityChange=this._onVisibilityChange.bind(this),this._switchInstance=this._switchInstance.bind(this),this._handleSettingsClick=this._handleSettingsClick.bind(this),this.togglePlay=this.togglePlay.bind(this),this.stop=this.stop.bind(this),this.prev=this.prev.bind(this),this.next=this.next.bind(this),this._renderControls=this._renderControls.bind(this),this.snapshot=this.snapshot.bind(this),this.toggleLoop=this.toggleLoop.bind(this),this.toggleBoomerang=this.toggleBoomerang.bind(this),this.destroy=this.destroy.bind(this),this.template=document.createElement("template"),this.shadow=this.attachShadow({mode:"open"})}addAnimation(t){throw Error(nV)}async attributeChangedCallback(t,e,s){if(this._lottieInstance&&this.shadow&&this._container)switch(t){case"animateOnScroll":if(""===s||s){this._lottieInstance.autoplay=!1,addEventListener("scroll",this._handleScroll,{capture:!0,passive:!0});return}removeEventListener("scroll",this._handleScroll,!0);break;case"autoplay":if(this.animateOnScroll||this.playOnVisible)return;if(""===s||s)return void this.play();this.stop();break;case"controls":this._renderControls();break;case"direction":if(-1===Number(s))return void this.setDirection(-1);this.setDirection(1);break;case"hover":if(""===s||s){this._container.addEventListener("mouseenter",this._mouseEnter),this._container.addEventListener("mouseleave",this._mouseLeave);return}this._container.removeEventListener("mouseenter",this._mouseEnter),this._container.removeEventListener("mouseleave",this._mouseLeave);break;case"loop":{let t=this.shadow.querySelector(".toggleLoop");t instanceof HTMLButtonElement&&(t.dataset.active=s),this.setLoop(""===s||!!s);break}case"mode":{let t=this.shadow.querySelector(".toggleBoomerang");t instanceof HTMLButtonElement&&(t.dataset.active=(s===x.Bounce).toString()),this._isBounce=s===x.Bounce;break}case"playOnClick":if(""===s||s){this._lottieInstance.autoplay=!1,this._container.addEventListener("click",this._handleClick);return}this._container.removeEventListener("click",this._handleClick);break;case"playOnVisible":(""===s||s)&&(this._lottieInstance.autoplay=!1);break;case"selector":{let t=document.getElementById(this.selector??"");t?.addEventListener("click",this._handleClick);break}case"speed":{let t=Number(s);t&&!isNaN(t)&&this.setSpeed(t);break}case"src":await this.load(s);break;case"subframe":this.setSubframe(""===s||!!s)}}connectedCallback(){super.connectedCallback();try{(async()=>{if(await this._render(),!this.shadow)throw Error("Missing Shadow element");this._container=this.shadow.querySelector(".animation"),await this.load(this.src),void 0!==document.hidden&&document.addEventListener("visibilitychange",this._onVisibilityChange),this._addIntersectionObserver(),this.dispatchEvent(new CustomEvent(S.Rendered))})()}catch(t){console.error(t),this.dispatchEvent(new CustomEvent(S.Error))}}convert(t){throw Error(nV)}destroy(){this._lottieInstance?.destroy&&(this.playerState=nD.Destroyed,this._lottieInstance.destroy(),this._lottieInstance=null,this.dispatchEvent(new CustomEvent(S.Destroyed)),this.remove(),document.removeEventListener("visibilitychange",this._onVisibilityChange))}disconnectedCallback(){this._intersectionObserver&&(this._intersectionObserver.disconnect(),this._intersectionObserver=void 0),document.removeEventListener("visibilitychange",this._onVisibilityChange),this.destroy()}getLottie(){return this._lottieInstance}getManifest(){return this._manifest}getMultiAnimationSettings(){return this._multiAnimationSettings}getSegment(){return this._segment}async load(t){try{if(!this.shadowRoot||!t)return;this.source=t;let{animations:e,isDotLottie:s,manifest:i}=await ny(t);if(!e||e.some(t=>!["v","ip","op","layers","fr","w","h"].every(e=>Object.hasOwn(t,e))))throw Error("Broken or corrupted file");let r=this.parentElement?.querySelector('script[type="application/ld+json"]');if(r){let t=JSON.parse(r.innerHTML);t.selector&&(this.selector=t.selector),t.segment&&this.setSegment(t.segment),t.multiAnimationSettings&&this.setMultiAnimationSettings(t.multiAnimationSettings)}this._isBounce=this.mode===x.Bounce,this._multiAnimationSettings.length>0&&this._multiAnimationSettings[this._currentAnimation]?.mode&&(this._isBounce=this._multiAnimationSettings[this._currentAnimation]?.mode===x.Bounce);let n=i?.animations[0];n&&(n.autoplay=!this.animateOnScroll&&!this.playOnVisible&&this.autoplay,n.loop=this.loop),this._isDotLottie=s,this._animations=e,this._manifest=i??{animations:[{autoplay:!this.animateOnScroll&&!this.playOnVisible&&this.autoplay,direction:this.direction,id:a(),loop:this.loop,mode:this.mode,speed:this.speed}]},this._lottieInstance?.destroy(),this.playerState=nD.Stopped,!this.animateOnScroll&&(this.autoplay||this._multiAnimationSettings[this._currentAnimation]?.autoplay||this.playOnVisible)&&(this.playerState=nD.Playing),this._lottieInstance=this.loadAnimation({...this._getOptions(),animationData:e[this._currentAnimation]}),this._addEventListeners();let o=this._multiAnimationSettings[this._currentAnimation]?.speed??this.speed,h=this._multiAnimationSettings[this._currentAnimation]?.direction??this.direction;if(this._lottieInstance.setSpeed(o),this._lottieInstance.setDirection(h),this._lottieInstance.setSubframe(!!this.subframe),(this.autoplay||this.animateOnScroll||this.playOnVisible)&&-1===this.direction&&this.seek("99%"),this._renderControls(),this.autoplay||this.playOnVisible){let t=this.shadow?.querySelector(".togglePlay");t&&(t.innerHTML=nL)}}catch(t){console.error(t),this._errorMessage=nN(t).message,this.playerState=nD.Error,this.dispatchEvent(new CustomEvent(S.Error))}}loadAnimation(t){throw Error(nV)}next(){this._currentAnimation++,this._switchInstance()}pause(){if(!this._lottieInstance)return;this._playerState.prev=this.playerState;let t=!1;try{this._lottieInstance.pause(),this.dispatchEvent(new CustomEvent(S.Pause))}catch(e){t=!0,console.error(e)}finally{this.playerState=t?nD.Error:nD.Paused}}play(){if(!this._lottieInstance)return;this._playerState.prev=this.playerState;let t=!1;try{this._lottieInstance.play(),this.dispatchEvent(new CustomEvent(S.Play))}catch(e){t=!0,console.error(e)}finally{this.playerState=t?nD.Error:nD.Playing}}prev(){this._currentAnimation--,this._switchInstance(!0)}propertyChangedCallback(t,e,s){if(!this.shadow)return;let i=this.shadow.querySelector(".togglePlay"),r=this.shadow.querySelector(".stop"),a=this.shadow.querySelector(".prev"),n=this.shadow.querySelector(".next"),o=this.shadow.querySelector(".seeker"),h=this.shadow.querySelector("progress"),l=this.shadow.querySelector(".popover"),p=this.shadow.querySelector(".convert"),c=this.shadow.querySelector(".snapshot");i instanceof HTMLButtonElement&&r instanceof HTMLButtonElement&&n instanceof HTMLButtonElement&&a instanceof HTMLButtonElement&&o instanceof HTMLInputElement&&h instanceof HTMLProgressElement&&("playerState"===t&&(i.dataset.active=(s===nD.Playing||s===nD.Paused).toString(),r.dataset.active=(s===nD.Stopped).toString(),s===nD.Playing?i.innerHTML=nL:i.innerHTML=nk),"_seeker"===t&&"number"==typeof s&&(o.value=s.toString(),o.ariaValueNow=s.toString(),h.value=s),"_animations"===t&&Array.isArray(s)&&this._currentAnimation+1<s.length&&(n.hidden=!1),"_currentAnimation"===t&&"number"==typeof s&&(n.hidden=s+1>=this._animations.length,a.hidden=!s),"_isSettingsOpen"===t&&"boolean"==typeof s&&l instanceof HTMLDivElement&&p instanceof HTMLButtonElement&&c instanceof HTMLButtonElement&&(l.hidden=!s,p.hidden=this.isLight,c.hidden=this.renderer!==E.SVG))}async reload(){this._lottieInstance&&this.src&&(this._lottieInstance.destroy(),await this.load(this.src))}seek(t){if(!this._lottieInstance)return;let e=t.toString().match(/^(\d+)(%?)$/);if(!e)return;let s=Math.round("%"===e[2]?this._lottieInstance.totalFrames*Number(e[1])/100:Number(e[1]));if(this._seeker=s,this.playerState===nD.Playing||this.playerState===nD.Frozen&&this._playerState.prev===nD.Playing){this._lottieInstance.goToAndPlay(s,!0),this.playerState=nD.Playing;return}this._lottieInstance.goToAndStop(s,!0),this._lottieInstance.pause()}setCount(t){this.count=t}setDirection(t){this._lottieInstance&&this._lottieInstance.setDirection(t)}setLoop(t){this._lottieInstance&&this._lottieInstance.setLoop(t)}setMultiAnimationSettings(t){this._multiAnimationSettings=t}setSegment(t){this._segment=t}setSpeed(t=1){this._lottieInstance&&this._lottieInstance.setSpeed(t)}setSubframe(t){this._lottieInstance&&this._lottieInstance.setSubframe(t)}snapshot(t=!0,e="AM Lottie"){try{var s;if(!this.shadowRoot)throw Error("Unknown error");let i=this.shadowRoot.querySelector(".animation svg");if(!i)throw Error("Could not retrieve animation from DOM");let r=i instanceof Node?new XMLSerializer().serializeToString(i):null;if(!r)throw Error("Could not serialize SVG element");return t&&((t,e)=>{let s=new Blob([t],{type:e?.mimeType}),i=e?.name||a(),r=URL.createObjectURL(s),n=document.createElement("a");n.href=r,n.download=i,n.hidden=!0,document.body.appendChild(n),n.click(),setTimeout(()=>{n.remove(),URL.revokeObjectURL(r)},1e3)})(r,{mimeType:"image/svg+xml",name:`${(s=this.src||e,(t=>{if("string"==typeof t&&t&&(t=>{let e=t?.split("/").pop()?.lastIndexOf(".");return(e??0)>1&&t&&t.length-1>(e??0)})(t))return t.split(".").pop()?.toLowerCase()})(s),`${s.split("/").pop()?.replace(/\.[^.]*$/,"").replaceAll(/\W+/g,"-")}`)}-${((this._seeker??0)+1).toString().padStart(3,"0")}.svg`}),r}catch(t){return console.error(t),null}}stop(){if(this._lottieInstance){this._playerState.prev=this.playerState,this._playerState.count=0;try{this._lottieInstance.stop(),this.dispatchEvent(new CustomEvent(S.Stop))}finally{this.playerState=nD.Stopped}}}toggleBoomerang(){let t=this._multiAnimationSettings[this._currentAnimation]??{};if(void 0!==t.mode){if(t.mode===x.Normal){t.mode=x.Bounce,this._isBounce=!0;return}t.mode=x.Normal,this._isBounce=!1;return}if(this.mode===x.Normal){this.mode=x.Bounce,this._isBounce=!0;return}this.mode=x.Normal,this._isBounce=!1}toggleLoop(){let t=!this.loop;this.loop=t,this.setLoop(t)}togglePlay(){if(!this._lottieInstance)return;let{currentFrame:t,playDirection:e,totalFrames:s}=this._lottieInstance;if(this.playerState===nD.Playing)return void this.pause();if(this.playerState!==nD.Completed)return void this.play();if(this.playerState=nD.Playing,this._isBounce){this.setDirection(-1*e),this._lottieInstance.goToAndPlay(t,!0);return}if(-1===e)return void this._lottieInstance.goToAndPlay(s,!0);this._lottieInstance.goToAndPlay(0,!0)}_freeze(){if(this._lottieInstance){this._playerState.prev=this.playerState;try{this._lottieInstance.pause(),this.dispatchEvent(new CustomEvent(S.Freeze))}finally{this.playerState=nD.Frozen}}}_handleBlur(){setTimeout(()=>{this._toggleSettings(!1)},200)}_handleClick(){(this.playOnClick||this.selector)&&this.togglePlay()}_handleSeekChange({target:t}){!(!(t instanceof HTMLInputElement)||!this._lottieInstance||isNaN(Number(t.value)))&&this.seek(Math.round(Number(t.value)/100*this._lottieInstance.totalFrames))}_handleSettingsClick({target:t}){this._toggleSettings(),t instanceof HTMLElement&&t.focus()}setOptions(t){throw Error("Method not implemented")}_addEventListeners(){this._toggleEventListeners("add")}_addIntersectionObserver(){if(this._container&&!this._intersectionObserver){if(!("IntersectionObserver"in window)){this._intersectionObserverFallback(),removeEventListener("scroll",this._intersectionObserverFallback,!0),addEventListener("scroll",this._intersectionObserverFallback,{capture:!0,passive:!0});return}this._intersectionObserver=new IntersectionObserver(t=>{let{length:e}=t;for(let s=0;s<e;s++){if(!t[s]?.isIntersecting||document.hidden){this.playerState===nD.Playing&&this._freeze(),this._playerState.visible=!1;continue}this.animateOnScroll||this.playOnVisible||this.playerState!==nD.Frozen||this.play(),this.playOnVisible&&(this.playerState!==nD.Completed||this.once?setTimeout(()=>{this.play()},this.delay):(this.playerState=nD.Playing,this._lottieInstance?.goToAndPlay(1===this.direction?0:this._lottieInstance.totalFrames))),!this._playerState.scrollY&&(t[s]?.boundingClientRect.y||0)>0&&(this._playerState.scrollY=scrollY),this._playerState.visible=!0}}),this._intersectionObserver.observe(this._container)}}_complete(){if(!this._lottieInstance)return;if(this._animations.length>1){if(this._multiAnimationSettings[this._currentAnimation+1]?.autoplay)return void this.next();if(this.loop&&this._currentAnimation===this._animations.length-1){this._currentAnimation=0,this._switchInstance();return}}let{currentFrame:t,totalFrames:e}=this._lottieInstance;this._seeker=Math.round(t/e*100),this.playerState=nD.Completed,this.dispatchEvent(new CustomEvent(S.Complete,{detail:{frame:t,seeker:this._seeker}}))}_dataFailed(){this.playerState=nD.Error,this.dispatchEvent(new CustomEvent(S.Error))}_dataReady(){this.dispatchEvent(new CustomEvent(S.Load))}_DOMLoaded(){this._playerState.loaded=!0,this.dispatchEvent(new CustomEvent(S.Ready))}_enterFrame(){if(!this._lottieInstance)return;let{currentFrame:t,totalFrames:e}=this._lottieInstance;this._seeker=Math.round(t/e*100),this.dispatchEvent(new CustomEvent(S.Frame,{detail:{frame:t,seeker:this._seeker}}))}_getOptions(){if(!this._container)throw Error("Container not rendered");let t=this.preserveAspectRatio??(t=>{switch(t){case nA.Contain:case nA.ScaleDown:return C.Contain;case nA.Cover:return C.Cover;case nA.Fill:return C.Initial;case nA.None:return C.None;default:return C.Contain}})(this.objectfit),e=this._multiAnimationSettings.length>0?this._multiAnimationSettings[this._currentAnimation]:void 0,s=this._manifest?.animations[this._currentAnimation],i=!!this.loop;s?.loop!==void 0&&(i=!!s.loop),e?.loop!==void 0&&(i=!!e.loop);let r=!!this.autoplay;s?.autoplay!==void 0&&(r=!!s.autoplay),e?.autoplay!==void 0&&(r=!!e.autoplay),this.animateOnScroll&&(r=!1);let a=this._segment;return this._segment?.every(t=>t>0)&&(a=[this._segment[0]-1,this._segment[1]-1]),this._segment?.some(t=>t<0)&&(a=void 0),this.setOptions({container:this._container,hasAutoplay:r,hasLoop:i,initialSegment:a,preserveAspectRatio:t,rendererType:this.renderer})}_handleScroll(){if(this.animateOnScroll&&this._lottieInstance){if(k)return void console.warn("DotLottie: Scroll animations might not work properly in a Server Side Rendering context. Try to wrap this in a client component.");if(this._playerState.visible){this._playerState.scrollTimeout&&clearTimeout(this._playerState.scrollTimeout),this._playerState.scrollTimeout=setTimeout(()=>{this.playerState=nD.Paused},400);let t=Math.min(Math.max((scrollY>this._playerState.scrollY?scrollY-this._playerState.scrollY:this._playerState.scrollY-scrollY)/3,1),3*this._lottieInstance.totalFrames)/3;requestAnimationFrame(()=>{t<(this._lottieInstance?.totalFrames??0)?(this.playerState=nD.Playing,this._lottieInstance?.goToAndStop(t,!0)):this.playerState=nD.Paused})}}}_handleWindowBlur({type:t}){this.dontFreezeOnBlur||(this.playerState===nD.Playing&&"blur"===t&&this._freeze(),this.playerState===nD.Frozen&&"focus"===t&&this.play())}_intersectionObserverFallback(){if(!this._container)return;let{bottom:t,left:e,right:s,top:i}=this._container.getBoundingClientRect();this._playerState.visible=i>=0&&e>=0&&t<=innerHeight&&s<=innerWidth,(this.autoplay||this.playOnVisible||this.playerState===nD.Playing||this.playerState===nD.Frozen)&&(this._playerState.visible?this.play():this._freeze())}_loopComplete(){if(!this._lottieInstance)return;let{playDirection:t,totalFrames:e}=this._lottieInstance,s=this._segment?this._segment[0]:0,i=this._segment?this._segment[0]:e;if(this.count&&(this._isBounce?this._playerState.count+=.5:this._playerState.count+=1,this._playerState.count>=this.count)){this.setLoop(!1),this.playerState=nD.Completed,this.dispatchEvent(new CustomEvent(S.Complete));return}return(this.dispatchEvent(new CustomEvent(S.Loop)),this._isBounce)?(this._lottieInstance.goToAndStop(-1===t?s:.99*i,!0),this._lottieInstance.setDirection(-1*t),setTimeout(()=>{this.animateOnScroll||this._lottieInstance?.play()},this.intermission)):(this._lottieInstance.goToAndStop(-1===t?.99*i:s,!0),setTimeout(()=>{this.animateOnScroll||this._lottieInstance?.play()},this.intermission))}_mouseEnter(){if(!(!this.hover||!this._lottieInstance||"ontouchstart"in window)){if("reverse"===this.mouseout&&this._lottieInstance.setDirection(1),this.playerState===nD.Completed){this._lottieInstance.goToAndPlay(0,!0),this.playerState=nD.Playing;return}this.playerState!==nD.Playing&&this.play()}}_mouseLeave(){if(!(!this.hover||!this._lottieInstance||"ontouchstart"in window))switch(this.mouseout){case"void":break;case"pause":this.pause();break;case"reverse":this._lottieInstance.setDirection(-1),this.play();break;default:this.stop()}}_onVisibilityChange(){if(document.hidden&&this.playerState===nD.Playing)return void this._freeze();this.playerState===nD.Frozen&&this.play()}_removeEventListeners(){this._toggleEventListeners("remove")}_switchInstance(t=!1){if(this._animations[this._currentAnimation])try{if(this._lottieInstance&&this._lottieInstance.destroy(),this._lottieInstance=this.loadAnimation({...this._getOptions(),animationData:this._animations[this._currentAnimation]}),this._multiAnimationSettings[this._currentAnimation]?.mode&&(this._isBounce=this._multiAnimationSettings[this._currentAnimation]?.mode===x.Bounce),this._removeEventListeners(),this._addEventListeners(),this.dispatchEvent(new CustomEvent(t?S.Previous:S.Next)),this._multiAnimationSettings[this._currentAnimation]?.autoplay??this.autoplay){if(this.animateOnScroll){this._lottieInstance.goToAndStop(0,!0),this.playerState=nD.Paused;return}this._lottieInstance.goToAndPlay(0,!0),this.playerState=nD.Playing;return}this._lottieInstance.goToAndStop(0,!0),this.playerState=nD.Stopped}catch(t){this._errorMessage=nN(t).message,this.playerState=nD.Error,this.dispatchEvent(new CustomEvent(S.Error))}}_toggleEventListeners(t){let e="add"===t?"addEventListener":"removeEventListener";if(this._lottieInstance&&(this._lottieInstance[e]("enterFrame",this._enterFrame),this._lottieInstance[e]("complete",this._complete),this._lottieInstance[e]("loopComplete",this._loopComplete),this._lottieInstance[e]("DOMLoaded",this._DOMLoaded),this._lottieInstance[e]("data_ready",this._dataReady),this._lottieInstance[e]("data_failed",this._dataFailed)),this.selector){let t=document.getElementById(this.selector);t?this.hover?(t[e]("mouseenter",this._mouseEnter),t[e]("mouseleave",this._mouseLeave)):t[e]("click",this._handleClick):this.selector=null}this._container&&!this.selector&&(this.hover&&(this._container[e]("mouseenter",this._mouseEnter),this._container[e]("mouseleave",this._mouseLeave)),this.playOnClick&&this._container[e]("click",this._handleClick)),window[e]("focus",this._handleWindowBlur,{capture:!1,passive:!0}),window[e]("blur",this._handleWindowBlur,{capture:!1,passive:!0}),this.animateOnScroll&&window[e]("scroll",this._handleScroll,{capture:!0,passive:!0})}_toggleSettings(t){if(void 0===t){this._isSettingsOpen=!this._isSettingsOpen;return}this._isSettingsOpen=t}}class nO extends nR{get renderer(){return E.SVG}constructor(){super(),this.loadAnimation=rU,this.isLight=!0}setOptions({container:t,hasAutoplay:e,hasLoop:s,initialSegment:i,preserveAspectRatio:r}){return{autoplay:e,container:t,initialSegment:i,loop:s,renderer:E.Canvas,rendererSettings:{clearCanvas:!0,imagePreserveAspectRatio:r,preserveAspectRatio:r,progressiveLoad:!0}}}}globalThis.dotLottiePlayer=()=>new nO,k||customElements.define(nI,nO),t.PlayMode=x,t.PlayerEvents=S,t.PlayerState=nD,t.default=nO,t.tagName=nI,Object.defineProperty(t,"__esModule",{value:!0})}(this["@aarsteinmedia/dotlottie-player"]=this["@aarsteinmedia/dotlottie-player"]||{});