@aarsteinmedia/dotlottie-player 5.3.0 → 5.3.2

package/CHANGELOG.md

@@ -7,7 +7,9 @@ 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.
 
-## [5.3.0] - 20-06-2025
+## [5.3.2] - 21-06-2025
+
+### Changed
 
 - Fixed bug causing some elements to have wrong placement.
 - Fixed bug with toggling boomerang
@@ -297,6 +299,7 @@ Changelog was only added since [3.2.3], so it's not exhaustive. [Please report a
 - Removed dependencies
   - `@lit`
 
+[5.3.2]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/5.3.2
 [5.2.4]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/5.2.4
 [5.2.0]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/5.2.0
 [5.1.13]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/5.1.13

package/custom-elements.json

@@ -33,6 +33,11 @@
               "name": "animateOnScroll",
               "description": "Whether to trigger next frame with scroll."
             },
+            {
+              "kind": "field",
+              "name": "animations",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "autoplay",
@@ -53,6 +58,11 @@
               "name": "count",
               "description": "Number of times to loop."
             },
+            {
+              "kind": "field",
+              "name": "currentAnimation",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "description",

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { PlayMode, PreserveAspectRatio, RendererType } from '@aarsteinmedia/lottie-web/utils';
 export { PlayMode, PlayerEvents } from '@aarsteinmedia/lottie-web/utils';
-import { AnimationDirection, AnimationItem, LottieManifest, AnimationSettings, Vector2 } from '@aarsteinmedia/lottie-web';
+import { AnimationData, AnimationDirection, AnimationItem, LottieManifest, AnimationSettings, Vector2 } from '@aarsteinmedia/lottie-web';
 import { addAnimation, convert } from '@aarsteinmedia/lottie-web/dotlottie';
 
 type AnimateOnScroll = boolean | '' | null;
@@ -75,6 +75,7 @@ declare class DotLottiePlayer extends PropertyCallbackElement {
     template: HTMLTemplateElement;
     set animateOnScroll(value: AnimateOnScroll);
     get animateOnScroll(): AnimateOnScroll;
+    get animations(): AnimationData[];
     set autoplay(value: Autoplay);
     get autoplay(): Autoplay;
     set background(value: string);
@@ -83,6 +84,7 @@ declare class DotLottiePlayer extends PropertyCallbackElement {
     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);

package/dist/index.js

@@ -171,22 +171,28 @@ var PlayerState = /*#__PURE__*/ function(PlayerState) {
         slot.innerHTML = '';
         return;
     }
-    slot.innerHTML = /* HTML */ `<div class="lottie-controls toolbar ${this.playerState === PlayerState.Error ? 'has-error' : ''}" aria-label="Lottie Animation controls"><button class="togglePlay" data-active="${this.autoplay}" aria-label="Toggle Play/Pause">${playIcon}</button> <button class="stop" data-active="${!this.autoplay}" aria-label="Stop">${stopIcon}</button> <button class="prev" aria-label="Previous animation" hidden>${prevIcon}</button> <button class="next" aria-label="Next animation" hidden>${nextIcon}</button><form class="progress-container${this.simple ? ' simple' : ''}"><input type="range" class="seeker" min="0" max="100" step="1" value="${this._seeker.toString()}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${this._seeker.toString()}" tabindex="0" aria-label="Slider for search"><progress max="100" value="${this._seeker}"></progress></form>${this.simple ? '' : /* HTML */ `<button class="toggleLoop" data-active="${this.loop}" tabindex="0" aria-label="Toggle loop">${loopIcon}</button> <button class="toggleBoomerang" data-active="${this.mode === PlayMode.Bounce}" aria-label="Toggle boomerang" tabindex="0">${boomerangIcon}</button> <button class="toggleSettings" aria-label="Settings" aria-haspopup="true" aria-expanded="${Boolean(this._isSettingsOpen)}" aria-controls="${this._identifier}-settings">${settingsIcon}</button><div id="${this._identifier}-settings" class="popover" hidden><button class="convert" aria-label="Convert JSON animation to dotLottie format" hidden>${convertIcon} ${this.isDotLottie ? 'Convert to JSON' : 'Convert to dotLottie'}</button> <button class="snapshot" aria-label="Download still image">${downloadIcon} Download still image</button></div>`}</div>`;
+    slot.innerHTML = /* HTML */ `<div class="lottie-controls toolbar ${this.playerState === PlayerState.Error ? 'has-error' : ''}" aria-label="Lottie Animation controls"><button class="togglePlay" data-active="${this.autoplay}" aria-label="Toggle Play/Pause">${playIcon}</button> <button class="stop" data-active="${!this.autoplay}" aria-label="Stop">${stopIcon}</button> <button class="prev" aria-label="Previous animation" hidden="false">${prevIcon}</button> <button class="next" aria-label="Next animation" hidden>${nextIcon}</button><form class="progress-container${this.simple ? ' simple' : ''}"><input type="range" class="seeker" min="0" max="100" step="1" value="${this._seeker.toString()}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${this._seeker.toString()}" tabindex="0" aria-label="Slider for search"><progress max="100" value="${this._seeker}"></progress></form>${this.simple ? '' : /* HTML */ `<button class="toggleLoop" data-active="${this.loop}" tabindex="0" aria-label="Toggle loop">${loopIcon}</button> <button class="toggleBoomerang" data-active="${this.mode === PlayMode.Bounce}" aria-label="Toggle boomerang" tabindex="0">${boomerangIcon}</button> <button class="toggleSettings" aria-label="Settings" aria-haspopup="true" aria-expanded="${Boolean(this._isSettingsOpen)}" aria-controls="${this._identifier}-settings">${settingsIcon}</button><div id="${this._identifier}-settings" class="popover" hidden><button class="convert" aria-label="Convert JSON animation to dotLottie format" aria-label="Convert ${this.isDotLottie ? 'dotLottie animation to JSON format' : 'JSON animation to dotLottie format'}" hidden>${convertIcon} ${this.isDotLottie ? 'Convert to JSON' : 'Convert to dotLottie'}</button> <button class="snapshot" aria-label="Download still image">${downloadIcon} Download still image</button></div>`}</div>`;
     const togglePlay = this.shadow.querySelector('.togglePlay');
     if (togglePlay instanceof HTMLButtonElement) {
         togglePlay.onclick = this.togglePlay;
     }
-    const stop = this.shadow.querySelector('.stop');
-    if (stop instanceof HTMLButtonElement) {
-        stop.onclick = this.stop;
+    const stopButton = this.shadow.querySelector('.stop');
+    if (stopButton instanceof HTMLButtonElement) {
+        stopButton.onclick = this.stop;
     }
-    const prev = this.shadow.querySelector('.prev');
-    if (prev instanceof HTMLButtonElement) {
-        prev.onclick = this.prev;
+    const prevButton = this.shadow.querySelector('.prev');
+    if (prevButton instanceof HTMLButtonElement) {
+        if (this.animations.length > 0 && this.currentAnimation) {
+            prevButton.hidden = false;
+        }
+        prevButton.onclick = this.prev;
     }
-    const next = this.shadow.querySelector('.next');
-    if (next instanceof HTMLButtonElement) {
-        next.onclick = this.next;
+    const nextButton = this.shadow.querySelector('.next');
+    if (nextButton instanceof HTMLButtonElement) {
+        if (this.animations.length > 0 && this.currentAnimation < this.animations.length - 1) {
+            nextButton.hidden = false;
+        }
+        nextButton.onclick = this.next;
     }
     const seeker = this.shadow.querySelector('.seeker');
     if (seeker instanceof HTMLInputElement) {
@@ -333,6 +339,9 @@ const pauseIcon = /* HTML */ `
         const val = this.getAttribute('animateOnScroll');
         return Boolean(val === 'true' || val === '' || val === '1');
     }
+    get animations() {
+        return this._animations;
+    }
     /**
    * Autoplay.
    */ set autoplay(value) {
@@ -371,6 +380,9 @@ const pauseIcon = /* HTML */ `
         }
         return 0;
     }
+    get currentAnimation() {
+        return this._currentAnimation;
+    }
     /**
    * Description for screen readers.
    */ set description(value) {

package/dist/unpkg.js

@@ -61,10 +61,10 @@
   <svg width="24" height="24" aria-hidden="true" focusable="false">
     <path d="M6 6h12v12H6V6z" />
   </svg>
-`;var nL=((v={}).Contain="contain",v.Cover="cover",v.Fill="fill",v.None="none",v.ScaleDown="scale-down",v),n$=((b={}).Completed="completed",b.Destroyed="destroyed",b.Error="error",b.Frozen="frozen",b.Loading="loading",b.Paused="paused",b.Playing="playing",b.Stopped="stopped",b);function nN(){if(!this.shadow)throw Error("No Shadow Element");let t=this.shadow.querySelector("slot[name=controls]");if(!t)return;if(!this.controls){t.innerHTML="";return}t.innerHTML=`<div class="lottie-controls toolbar ${this.playerState===n$.Error?"has-error":""}" aria-label="Lottie Animation controls"><button class="togglePlay" data-active="${this.autoplay}" aria-label="Toggle Play/Pause">${nT}</button> <button class="stop" data-active="${!this.autoplay}" aria-label="Stop">${nF}</button> <button class="prev" aria-label="Previous animation" hidden>${nD}</button> <button class="next" aria-label="Next animation" hidden>${nA}</button><form class="progress-container${this.simple?" simple":""}"><input type="range" class="seeker" min="0" max="100" step="1" value="${this._seeker.toString()}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${this._seeker.toString()}" tabindex="0" aria-label="Slider for search"><progress max="100" value="${this._seeker}"></progress></form>${this.simple?"":`<button class="toggleLoop" data-active="${this.loop}" tabindex="0" aria-label="Toggle loop">${nM}</button> <button class="toggleBoomerang" data-active="${this.mode===_.Bounce}" aria-label="Toggle boomerang" tabindex="0">${nS}</button> <button class="toggleSettings" aria-label="Settings" aria-haspopup="true" aria-expanded="${!!this._isSettingsOpen}" aria-controls="${this._identifier}-settings">${nI}</button><div id="${this._identifier}-settings" class="popover" hidden><button class="convert" aria-label="Convert JSON animation to dotLottie format" hidden>${nk} ${this.isDotLottie?"Convert to JSON":"Convert to dotLottie"}</button> <button class="snapshot" aria-label="Download still image">${nP} Download still image</button></div>`}</div>`;let e=this.shadow.querySelector(".togglePlay");e instanceof HTMLButtonElement&&(e.onclick=this.togglePlay);let s=this.shadow.querySelector(".stop");s instanceof HTMLButtonElement&&(s.onclick=this.stop);let i=this.shadow.querySelector(".prev");i instanceof HTMLButtonElement&&(i.onclick=this.prev);let r=this.shadow.querySelector(".next");r instanceof HTMLButtonElement&&(r.onclick=this.next);let a=this.shadow.querySelector(".seeker");if(a instanceof HTMLInputElement&&(a.onchange=this._handleSeekChange,a.onmousedown=this._freeze),!this.simple){let t=this.shadow.querySelector(".toggleLoop");t instanceof HTMLButtonElement&&(t.onclick=this.toggleLoop);let e=this.shadow.querySelector(".toggleBoomerang");e instanceof HTMLButtonElement&&(e.onclick=this.toggleBoomerang);let s=this.shadow.querySelector(".convert");s instanceof HTMLButtonElement&&(s.onclick=()=>{nw({isDotLottie:this.isDotLottie,manifest:this.getManifest(),src:this.src||this.source})});let i=this.shadow.querySelector(".snapshot");i instanceof HTMLButtonElement&&(i.onclick=()=>this.snapshot(!0));let r=this.shadow.querySelector(".toggleSettings");r instanceof HTMLButtonElement&&(r.onclick=this._handleSettingsClick,r.onblur=this._handleBlur)}}let nV=`
+`;var nL=((v={}).Contain="contain",v.Cover="cover",v.Fill="fill",v.None="none",v.ScaleDown="scale-down",v),n$=((b={}).Completed="completed",b.Destroyed="destroyed",b.Error="error",b.Frozen="frozen",b.Loading="loading",b.Paused="paused",b.Playing="playing",b.Stopped="stopped",b);function nN(){if(!this.shadow)throw Error("No Shadow Element");let t=this.shadow.querySelector("slot[name=controls]");if(!t)return;if(!this.controls){t.innerHTML="";return}t.innerHTML=`<div class="lottie-controls toolbar ${this.playerState===n$.Error?"has-error":""}" aria-label="Lottie Animation controls"><button class="togglePlay" data-active="${this.autoplay}" aria-label="Toggle Play/Pause">${nT}</button> <button class="stop" data-active="${!this.autoplay}" aria-label="Stop">${nF}</button> <button class="prev" aria-label="Previous animation" hidden="false">${nD}</button> <button class="next" aria-label="Next animation" hidden>${nA}</button><form class="progress-container${this.simple?" simple":""}"><input type="range" class="seeker" min="0" max="100" step="1" value="${this._seeker.toString()}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${this._seeker.toString()}" tabindex="0" aria-label="Slider for search"><progress max="100" value="${this._seeker}"></progress></form>${this.simple?"":`<button class="toggleLoop" data-active="${this.loop}" tabindex="0" aria-label="Toggle loop">${nM}</button> <button class="toggleBoomerang" data-active="${this.mode===_.Bounce}" aria-label="Toggle boomerang" tabindex="0">${nS}</button> <button class="toggleSettings" aria-label="Settings" aria-haspopup="true" aria-expanded="${!!this._isSettingsOpen}" aria-controls="${this._identifier}-settings">${nI}</button><div id="${this._identifier}-settings" class="popover" hidden><button class="convert" aria-label="Convert JSON animation to dotLottie format" aria-label="Convert ${this.isDotLottie?"dotLottie animation to JSON format":"JSON animation to dotLottie format"}" hidden>${nk} ${this.isDotLottie?"Convert to JSON":"Convert to dotLottie"}</button> <button class="snapshot" aria-label="Download still image">${nP} Download still image</button></div>`}</div>`;let e=this.shadow.querySelector(".togglePlay");e instanceof HTMLButtonElement&&(e.onclick=this.togglePlay);let s=this.shadow.querySelector(".stop");s instanceof HTMLButtonElement&&(s.onclick=this.stop);let i=this.shadow.querySelector(".prev");i instanceof HTMLButtonElement&&(this.animations.length>0&&this.currentAnimation&&(i.hidden=!1),i.onclick=this.prev);let r=this.shadow.querySelector(".next");r instanceof HTMLButtonElement&&(this.animations.length>0&&this.currentAnimation<this.animations.length-1&&(r.hidden=!1),r.onclick=this.next);let a=this.shadow.querySelector(".seeker");if(a instanceof HTMLInputElement&&(a.onchange=this._handleSeekChange,a.onmousedown=this._freeze),!this.simple){let t=this.shadow.querySelector(".toggleLoop");t instanceof HTMLButtonElement&&(t.onclick=this.toggleLoop);let e=this.shadow.querySelector(".toggleBoomerang");e instanceof HTMLButtonElement&&(e.onclick=this.toggleBoomerang);let s=this.shadow.querySelector(".convert");s instanceof HTMLButtonElement&&(s.onclick=()=>{nw({isDotLottie:this.isDotLottie,manifest:this.getManifest(),src:this.src||this.source})});let i=this.shadow.querySelector(".snapshot");i instanceof HTMLButtonElement&&(i.onclick=()=>this.snapshot(!0));let r=this.shadow.querySelector(".toggleSettings");r instanceof HTMLButtonElement&&(r.onclick=this._handleSettingsClick,r.onblur=this._handleBlur)}}let nV=`
   <svg width="24" height="24" aria-hidden="true" focusable="false">
     <path
       d="M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z"
     />
   </svg>
-`;async function nR(){if(!this.shadow)throw Error("No Shadow Element");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===n$.Error?`<div class="error"><svg preserveAspectRatio="${w.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 nz.styles()],this.shadow.appendChild(this.template.content.cloneNode(!0))}let nO=t=>{let e={message:"Unknown error",status:C?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};class nz extends nC{static get observedAttributes(){return["animateOnScroll","autoplay","controls","direction","hover","loop","mode","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}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}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 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.toString())}get mode(){let t=this.getAttribute("mode");return t===_.Bounce?t:_.Normal}set objectfit(t){this.setAttribute("objectfit",t)}get objectfit(){let t=this.getAttribute("objectfit");return t&&Object.values(nL).includes(t)?t:nL.Contain}set preserveAspectRatio(t){this.setAttribute("preserveAspectRatio",t||w.Contain)}get preserveAspectRatio(){let t=this.getAttribute("preserveAspectRatio");return t&&Object.values(w).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.addAnimation=nx,this.convert=nw,this.playerState=n$.Loading,this._container=null,this._errorMessage="Something went wrong",this._identifier=this.id||a(),this._isSettingsOpen=!1,this._playerState={count:0,loaded:!1,prev:n$.Loading,scrollTimeout:null,scrollY:0,visible:!1},this._render=nR,this._renderControls=nN,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._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"})}async attributeChangedCallback(t,e,s){if(this._lottieInstance&&this.shadow){if("animateOnScroll"===t){if(""===s||s){this._lottieInstance.autoplay=!1,addEventListener("scroll",this._handleScroll,{capture:!0,passive:!0});return}removeEventListener("scroll",this._handleScroll,!0)}if("autoplay"===t){if(this.animateOnScroll)return;if(""===s||s)return void this.play();this.stop()}if("controls"===t&&this._renderControls(),"direction"===t){if(-1===Number(s))return void this.setDirection(-1);this.setDirection(1)}if("hover"===t&&this._container){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)}if("loop"===t){let t=this.shadow.querySelector(".toggleLoop");t instanceof HTMLButtonElement&&(t.dataset.active=s),this.setLoop(""===s||!!s)}if("mode"===t){let t=this.shadow.querySelector(".toggleBoomerang");t instanceof HTMLButtonElement&&(t.dataset.active=(s===_.Bounce).toString()),this._isBounce=s===_.Bounce}if("speed"===t){let t=Number(s);t&&!isNaN(t)&&this.setSpeed(t)}"src"===t&&await this.load(s),"subframe"===t&&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"),void 0!==document.hidden&&document.addEventListener("visibilitychange",this._onVisibilityChange),this._addIntersectionObserver(),await this.load(this.src),this.dispatchEvent(new CustomEvent(x.Rendered))})()}catch(t){console.error(t),this.dispatchEvent(new CustomEvent(x.Error))}}destroy(){this._lottieInstance?.destroy&&(this.playerState=n$.Destroyed,this._lottieInstance.destroy(),this._lottieInstance=null,this.dispatchEvent(new CustomEvent(x.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 n_(t);if(!e||e.some(t=>!this._isLottie(t)))throw Error("Broken or corrupted file");this._isBounce=this.mode===_.Bounce,this._multiAnimationSettings.length>0&&this._multiAnimationSettings[this._currentAnimation]?.mode&&(this._isBounce=this._multiAnimationSettings[this._currentAnimation].mode===_.Bounce),i?.animations.length===1&&(i.animations[0].autoplay=this.autoplay,i.animations[0].loop=this.loop),this._isDotLottie=s,this._animations=e,this._manifest=i??{animations:[{autoplay:!this.animateOnScroll&&this.autoplay,direction:this.direction,id:a(),loop:this.loop,mode:this.mode,speed:this.speed}]},this._lottieInstance?.destroy(),this.playerState=n$.Stopped,!this.animateOnScroll&&(this.autoplay||this._multiAnimationSettings[this._currentAnimation]?.autoplay)&&(this.playerState=n$.Playing),this._lottieInstance=rK.loadAnimation({...this._getOptions(),animationData:e[this._currentAnimation]}),this._addEventListeners();let r=this._multiAnimationSettings[this._currentAnimation]?.speed??this.speed,n=this._multiAnimationSettings[this._currentAnimation]?.direction??this.direction;if(this._lottieInstance.setSpeed(r),this._lottieInstance.setDirection(n),this._lottieInstance.setSubframe(!!this.subframe),(this.autoplay||this.animateOnScroll)&&(-1===this.direction&&this.seek("99%"),"IntersectionObserver"in window||(this.animateOnScroll||this.play(),this._playerState.visible=!0),this._addIntersectionObserver()),this._renderControls(),this.autoplay){let t=this.shadow?.querySelector(".togglePlay");t&&(t.innerHTML=nV)}}catch(t){console.error(t),this._errorMessage=nO(t).message,this.playerState=n$.Error,this.dispatchEvent(new CustomEvent(x.Error))}}next(){this._currentAnimation++,this._switchInstance()}pause(){if(this._lottieInstance){this._playerState.prev=this.playerState;try{this._lottieInstance.pause(),this.dispatchEvent(new CustomEvent(x.Pause))}finally{this.playerState=n$.Paused}}}play(){if(this._lottieInstance){this._playerState.prev=this.playerState;try{this._lottieInstance.play(),this.dispatchEvent(new CustomEvent(x.Play))}finally{this.playerState=n$.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===n$.Playing||s===n$.Paused).toString(),r.dataset.active=(s===n$.Stopped).toString(),s===n$.Playing?i.innerHTML=nV:i.innerHTML=nT),"_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=!1,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===n$.Playing||this.playerState===n$.Frozen&&this._playerState.prev===n$.Playing){this._lottieInstance.goToAndPlay(s,!0),this.playerState=n$.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(x.Stop))}finally{this.playerState=n$.Stopped}}}toggleBoomerang(){let t=this._multiAnimationSettings[this._currentAnimation]??{};if(void 0!==t.mode){if(t.mode===_.Normal){t.mode=_.Bounce,this._isBounce=!0;return}t.mode=_.Normal,this._isBounce=!1;return}if(this.mode===_.Normal){this.mode=_.Bounce,this._isBounce=!0;return}this.mode=_.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===n$.Playing)return void this.pause();if(this.playerState!==n$.Completed)return void this.play();if(this.playerState=n$.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(x.Freeze))}finally{this.playerState=n$.Frozen}}}_handleBlur(){setTimeout(()=>{this._toggleSettings(!1)},200)}_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()}_addEventListeners(){this._toggleEventListeners("add")}_addIntersectionObserver(){this._container&&!this._intersectionObserver&&"IntersectionObserver"in window&&(this._intersectionObserver=new IntersectionObserver(t=>{let{length:e}=t;for(let s=0;s<e;s++){if(!t[s].isIntersecting||document.hidden){this.playerState===n$.Playing&&this._freeze(),this._playerState.visible=!1;continue}this.animateOnScroll||this.playerState!==n$.Frozen||this.play(),this._playerState.scrollY||(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=n$.Completed,this.dispatchEvent(new CustomEvent(x.Complete,{detail:{frame:t,seeker:this._seeker}}))}_dataFailed(){this.playerState=n$.Error,this.dispatchEvent(new CustomEvent(x.Error))}_dataReady(){this.dispatchEvent(new CustomEvent(x.Load))}_DOMLoaded(){this._playerState.loaded=!0,this.dispatchEvent(new CustomEvent(x.Ready))}_enterFrame(){if(!this._lottieInstance)return;let{currentFrame:t,totalFrames:e}=this._lottieInstance;this._seeker=Math.round(t/e*100),this.dispatchEvent(new CustomEvent(x.Frame,{detail:{frame:t,seeker:this._seeker}}))}_getOptions(){if(!this._container)throw Error("Container not rendered");let t=this.preserveAspectRatio??(t=>{switch(t){case nL.Contain:case nL.ScaleDown:return w.Contain;case nL.Cover:return w.Cover;case nL.Fill:return w.Initial;case nL.None:return w.None;default:return w.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;this._segment?.every(t=>t>0)&&(a=[this._segment[0]-1,this._segment[1]-1]),this._segment?.some(t=>t<0)&&(a=void 0);let n={autoplay:r,container:this._container,initialSegment:a,loop:i,renderer:this.renderer,rendererSettings:{imagePreserveAspectRatio:t}};switch(this.renderer){case E.SVG:n.rendererSettings={...n.rendererSettings,hideOnTransparent:!0,preserveAspectRatio:t,progressiveLoad:!0};break;case E.Canvas:n.rendererSettings={...n.rendererSettings,clearCanvas:!0,preserveAspectRatio:t,progressiveLoad:!0};break;case E.HTML:n.rendererSettings={...n.rendererSettings,hideOnTransparent:!0}}return n}_handleScroll(){if(this.animateOnScroll&&this._lottieInstance){if(C)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=n$.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=n$.Playing,this._lottieInstance?.goToAndStop(t,!0)):this.playerState=n$.Paused})}}}_handleWindowBlur({type:t}){this.playerState===n$.Playing&&"blur"===t&&this._freeze(),this.playerState===n$.Frozen&&"focus"===t&&this.play()}_isLottie(t){return["v","ip","op","layers","fr","w","h"].every(e=>Object.hasOwn(t,e))}_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=n$.Completed,this.dispatchEvent(new CustomEvent(x.Complete));return}return(this.dispatchEvent(new CustomEvent(x.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(){this.hover&&this.playerState!==n$.Playing&&this.play()}_mouseLeave(){this.hover&&this.playerState===n$.Playing&&this.stop()}_onVisibilityChange(){if(document.hidden&&this.playerState===n$.Playing)return void this._freeze();this.playerState===n$.Frozen&&this.play()}_removeEventListeners(){this._toggleEventListeners("remove")}_switchInstance(t=!1){if(this._animations[this._currentAnimation])try{if(this._lottieInstance&&this._lottieInstance.destroy(),this._lottieInstance=rK.loadAnimation({...this._getOptions(),animationData:this._animations[this._currentAnimation]}),this._multiAnimationSettings[this._currentAnimation]?.mode&&(this._isBounce=this._multiAnimationSettings[this._currentAnimation].mode===_.Bounce),this._removeEventListeners(),this._addEventListeners(),this.dispatchEvent(new CustomEvent(t?x.Previous:x.Next)),this._multiAnimationSettings[this._currentAnimation]?.autoplay??this.autoplay){if(this.animateOnScroll){this._lottieInstance.goToAndStop(0,!0),this.playerState=n$.Paused;return}this._lottieInstance.goToAndPlay(0,!0),this.playerState=n$.Playing;return}this._lottieInstance.goToAndStop(0,!0),this.playerState=n$.Stopped}catch(t){this._errorMessage=nO(t).message,this.playerState=n$.Error,this.dispatchEvent(new CustomEvent(x.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)),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}}globalThis.dotLottiePlayer=()=>new nz;let nB="dotlottie-player";C||customElements.define(nB,nz),t.PlayMode=_,t.PlayerEvents=x,t.PlayerState=n$,t.default=nz,t.tagName=nB,Object.defineProperty(t,"__esModule",{value:!0})}(this["@aarsteinmedia/dotlottie-player"]=this["@aarsteinmedia/dotlottie-player"]||{});
+`;async function nR(){if(!this.shadow)throw Error("No Shadow Element");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===n$.Error?`<div class="error"><svg preserveAspectRatio="${w.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 nz.styles()],this.shadow.appendChild(this.template.content.cloneNode(!0))}let nO=t=>{let e={message:"Unknown error",status:C?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};class nz extends nC{static get observedAttributes(){return["animateOnScroll","autoplay","controls","direction","hover","loop","mode","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 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 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.toString())}get mode(){let t=this.getAttribute("mode");return t===_.Bounce?t:_.Normal}set objectfit(t){this.setAttribute("objectfit",t)}get objectfit(){let t=this.getAttribute("objectfit");return t&&Object.values(nL).includes(t)?t:nL.Contain}set preserveAspectRatio(t){this.setAttribute("preserveAspectRatio",t||w.Contain)}get preserveAspectRatio(){let t=this.getAttribute("preserveAspectRatio");return t&&Object.values(w).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.addAnimation=nx,this.convert=nw,this.playerState=n$.Loading,this._container=null,this._errorMessage="Something went wrong",this._identifier=this.id||a(),this._isSettingsOpen=!1,this._playerState={count:0,loaded:!1,prev:n$.Loading,scrollTimeout:null,scrollY:0,visible:!1},this._render=nR,this._renderControls=nN,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._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"})}async attributeChangedCallback(t,e,s){if(this._lottieInstance&&this.shadow){if("animateOnScroll"===t){if(""===s||s){this._lottieInstance.autoplay=!1,addEventListener("scroll",this._handleScroll,{capture:!0,passive:!0});return}removeEventListener("scroll",this._handleScroll,!0)}if("autoplay"===t){if(this.animateOnScroll)return;if(""===s||s)return void this.play();this.stop()}if("controls"===t&&this._renderControls(),"direction"===t){if(-1===Number(s))return void this.setDirection(-1);this.setDirection(1)}if("hover"===t&&this._container){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)}if("loop"===t){let t=this.shadow.querySelector(".toggleLoop");t instanceof HTMLButtonElement&&(t.dataset.active=s),this.setLoop(""===s||!!s)}if("mode"===t){let t=this.shadow.querySelector(".toggleBoomerang");t instanceof HTMLButtonElement&&(t.dataset.active=(s===_.Bounce).toString()),this._isBounce=s===_.Bounce}if("speed"===t){let t=Number(s);t&&!isNaN(t)&&this.setSpeed(t)}"src"===t&&await this.load(s),"subframe"===t&&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"),void 0!==document.hidden&&document.addEventListener("visibilitychange",this._onVisibilityChange),this._addIntersectionObserver(),await this.load(this.src),this.dispatchEvent(new CustomEvent(x.Rendered))})()}catch(t){console.error(t),this.dispatchEvent(new CustomEvent(x.Error))}}destroy(){this._lottieInstance?.destroy&&(this.playerState=n$.Destroyed,this._lottieInstance.destroy(),this._lottieInstance=null,this.dispatchEvent(new CustomEvent(x.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 n_(t);if(!e||e.some(t=>!this._isLottie(t)))throw Error("Broken or corrupted file");this._isBounce=this.mode===_.Bounce,this._multiAnimationSettings.length>0&&this._multiAnimationSettings[this._currentAnimation]?.mode&&(this._isBounce=this._multiAnimationSettings[this._currentAnimation].mode===_.Bounce),i?.animations.length===1&&(i.animations[0].autoplay=this.autoplay,i.animations[0].loop=this.loop),this._isDotLottie=s,this._animations=e,this._manifest=i??{animations:[{autoplay:!this.animateOnScroll&&this.autoplay,direction:this.direction,id:a(),loop:this.loop,mode:this.mode,speed:this.speed}]},this._lottieInstance?.destroy(),this.playerState=n$.Stopped,!this.animateOnScroll&&(this.autoplay||this._multiAnimationSettings[this._currentAnimation]?.autoplay)&&(this.playerState=n$.Playing),this._lottieInstance=rK.loadAnimation({...this._getOptions(),animationData:e[this._currentAnimation]}),this._addEventListeners();let r=this._multiAnimationSettings[this._currentAnimation]?.speed??this.speed,n=this._multiAnimationSettings[this._currentAnimation]?.direction??this.direction;if(this._lottieInstance.setSpeed(r),this._lottieInstance.setDirection(n),this._lottieInstance.setSubframe(!!this.subframe),(this.autoplay||this.animateOnScroll)&&(-1===this.direction&&this.seek("99%"),"IntersectionObserver"in window||(this.animateOnScroll||this.play(),this._playerState.visible=!0),this._addIntersectionObserver()),this._renderControls(),this.autoplay){let t=this.shadow?.querySelector(".togglePlay");t&&(t.innerHTML=nV)}}catch(t){console.error(t),this._errorMessage=nO(t).message,this.playerState=n$.Error,this.dispatchEvent(new CustomEvent(x.Error))}}next(){this._currentAnimation++,this._switchInstance()}pause(){if(this._lottieInstance){this._playerState.prev=this.playerState;try{this._lottieInstance.pause(),this.dispatchEvent(new CustomEvent(x.Pause))}finally{this.playerState=n$.Paused}}}play(){if(this._lottieInstance){this._playerState.prev=this.playerState;try{this._lottieInstance.play(),this.dispatchEvent(new CustomEvent(x.Play))}finally{this.playerState=n$.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===n$.Playing||s===n$.Paused).toString(),r.dataset.active=(s===n$.Stopped).toString(),s===n$.Playing?i.innerHTML=nV:i.innerHTML=nT),"_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=!1,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===n$.Playing||this.playerState===n$.Frozen&&this._playerState.prev===n$.Playing){this._lottieInstance.goToAndPlay(s,!0),this.playerState=n$.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(x.Stop))}finally{this.playerState=n$.Stopped}}}toggleBoomerang(){let t=this._multiAnimationSettings[this._currentAnimation]??{};if(void 0!==t.mode){if(t.mode===_.Normal){t.mode=_.Bounce,this._isBounce=!0;return}t.mode=_.Normal,this._isBounce=!1;return}if(this.mode===_.Normal){this.mode=_.Bounce,this._isBounce=!0;return}this.mode=_.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===n$.Playing)return void this.pause();if(this.playerState!==n$.Completed)return void this.play();if(this.playerState=n$.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(x.Freeze))}finally{this.playerState=n$.Frozen}}}_handleBlur(){setTimeout(()=>{this._toggleSettings(!1)},200)}_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()}_addEventListeners(){this._toggleEventListeners("add")}_addIntersectionObserver(){this._container&&!this._intersectionObserver&&"IntersectionObserver"in window&&(this._intersectionObserver=new IntersectionObserver(t=>{let{length:e}=t;for(let s=0;s<e;s++){if(!t[s].isIntersecting||document.hidden){this.playerState===n$.Playing&&this._freeze(),this._playerState.visible=!1;continue}this.animateOnScroll||this.playerState!==n$.Frozen||this.play(),this._playerState.scrollY||(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=n$.Completed,this.dispatchEvent(new CustomEvent(x.Complete,{detail:{frame:t,seeker:this._seeker}}))}_dataFailed(){this.playerState=n$.Error,this.dispatchEvent(new CustomEvent(x.Error))}_dataReady(){this.dispatchEvent(new CustomEvent(x.Load))}_DOMLoaded(){this._playerState.loaded=!0,this.dispatchEvent(new CustomEvent(x.Ready))}_enterFrame(){if(!this._lottieInstance)return;let{currentFrame:t,totalFrames:e}=this._lottieInstance;this._seeker=Math.round(t/e*100),this.dispatchEvent(new CustomEvent(x.Frame,{detail:{frame:t,seeker:this._seeker}}))}_getOptions(){if(!this._container)throw Error("Container not rendered");let t=this.preserveAspectRatio??(t=>{switch(t){case nL.Contain:case nL.ScaleDown:return w.Contain;case nL.Cover:return w.Cover;case nL.Fill:return w.Initial;case nL.None:return w.None;default:return w.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;this._segment?.every(t=>t>0)&&(a=[this._segment[0]-1,this._segment[1]-1]),this._segment?.some(t=>t<0)&&(a=void 0);let n={autoplay:r,container:this._container,initialSegment:a,loop:i,renderer:this.renderer,rendererSettings:{imagePreserveAspectRatio:t}};switch(this.renderer){case E.SVG:n.rendererSettings={...n.rendererSettings,hideOnTransparent:!0,preserveAspectRatio:t,progressiveLoad:!0};break;case E.Canvas:n.rendererSettings={...n.rendererSettings,clearCanvas:!0,preserveAspectRatio:t,progressiveLoad:!0};break;case E.HTML:n.rendererSettings={...n.rendererSettings,hideOnTransparent:!0}}return n}_handleScroll(){if(this.animateOnScroll&&this._lottieInstance){if(C)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=n$.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=n$.Playing,this._lottieInstance?.goToAndStop(t,!0)):this.playerState=n$.Paused})}}}_handleWindowBlur({type:t}){this.playerState===n$.Playing&&"blur"===t&&this._freeze(),this.playerState===n$.Frozen&&"focus"===t&&this.play()}_isLottie(t){return["v","ip","op","layers","fr","w","h"].every(e=>Object.hasOwn(t,e))}_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=n$.Completed,this.dispatchEvent(new CustomEvent(x.Complete));return}return(this.dispatchEvent(new CustomEvent(x.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(){this.hover&&this.playerState!==n$.Playing&&this.play()}_mouseLeave(){this.hover&&this.playerState===n$.Playing&&this.stop()}_onVisibilityChange(){if(document.hidden&&this.playerState===n$.Playing)return void this._freeze();this.playerState===n$.Frozen&&this.play()}_removeEventListeners(){this._toggleEventListeners("remove")}_switchInstance(t=!1){if(this._animations[this._currentAnimation])try{if(this._lottieInstance&&this._lottieInstance.destroy(),this._lottieInstance=rK.loadAnimation({...this._getOptions(),animationData:this._animations[this._currentAnimation]}),this._multiAnimationSettings[this._currentAnimation]?.mode&&(this._isBounce=this._multiAnimationSettings[this._currentAnimation].mode===_.Bounce),this._removeEventListeners(),this._addEventListeners(),this.dispatchEvent(new CustomEvent(t?x.Previous:x.Next)),this._multiAnimationSettings[this._currentAnimation]?.autoplay??this.autoplay){if(this.animateOnScroll){this._lottieInstance.goToAndStop(0,!0),this.playerState=n$.Paused;return}this._lottieInstance.goToAndPlay(0,!0),this.playerState=n$.Playing;return}this._lottieInstance.goToAndStop(0,!0),this.playerState=n$.Stopped}catch(t){this._errorMessage=nO(t).message,this.playerState=n$.Error,this.dispatchEvent(new CustomEvent(x.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)),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}}globalThis.dotLottiePlayer=()=>new nz;let nB="dotlottie-player";C||customElements.define(nB,nz),t.PlayMode=_,t.PlayerEvents=x,t.PlayerState=n$,t.default=nz,t.tagName=nB,Object.defineProperty(t,"__esModule",{value:!0})}(this["@aarsteinmedia/dotlottie-player"]=this["@aarsteinmedia/dotlottie-player"]||{});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aarsteinmedia/dotlottie-player",
-  "version": "5.3.0",
+  "version": "5.3.2",
   "description": "Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player",
   "type": "module",
   "exports": {
@@ -48,7 +48,8 @@
     "lint:css:fix": "npx stylelint **/*.css --fix"
   },
   "dependencies": {
-    "@aarsteinmedia/lottie-web": "^1.1.5"
+    "@aarsteinmedia/lottie-web": "^1.1.5",
+    "fflate": "^0.8.2"
   },
   "peerDependencies": {
     "@types/react": ">= 16.0.0"
@@ -61,7 +62,7 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.3",
-    "@swc/core": "^1.12.4",
+    "@swc/core": "^1.12.5",
     "@types/mocha": "^10.0.10",
     "@types/node": "^24.0.3",
     "@types/path-browserify": "^1.0.3",