@aarsteinmedia/dotlottie-player 4.0.0 → 4.0.2

package/custom-elements.json

@@ -9,7 +9,7 @@
         {
           "kind": "variable",
           "name": "DotLottiePlayer",
-          "default": "class extends EnhancedElement{async connectedCallback(){super.connectedCallback(),this._render(),this._container=this.shadow.querySelector(\".animation\"),this._renderControls(),void 0!==document.hidden&&document.addEventListener(\"visibilitychange\",this._onVisibilityChange),this._addIntersectionObserver(),await this.load(this.src),this.dispatchEvent(new CustomEvent(PlayerEvents.Rendered))}disconnectedCallback(){this._intersectionObserver&&(this._intersectionObserver.disconnect(),this._intersectionObserver=void 0),this._lottieInstance&&this._lottieInstance.destroy(),document.removeEventListener(\"visibilitychange\",this._onVisibilityChange)}static get observedAttributes(){return[\"animateOnScroll\",\"autoplay\",\"controls\",\"direction\",\"hover\",\"loop\",\"mode\",\"speed\",\"subframe\"]}attributeChangedCallback(t,e,i){if(this._lottieInstance){if(\"animateOnScroll\"===t){if(\"\"===i||i){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(\"\"===i||i){this.play();return}this.stop()}if(\"controls\"===t&&this._renderControls(),\"direction\"===t){if(-1===Number(i))return this.setDirection(-1);this.setDirection(1)}if(\"hover\"===t&&this._container){if(\"\"===i||i){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=i),this.setLoop(\"\"===i||!!i)}if(\"mode\"===t){let t=this.shadow.querySelector(\".toggleBoomerang\");t instanceof HTMLButtonElement&&(t.dataset.active=(i===PlayMode.Bounce).toString()),this._isBounce=i===PlayMode.Bounce}if(\"speed\"===t){let t=Number(i);t&&!isNaN(t)&&this.setSpeed(t)}\"subframe\"===t&&this.setSubframe(\"\"===i||!!i)}}static get observedProperties(){return[\"playerState\",\"_isSettingsOpen\",\"_seeker\",\"_currentAnimation\",\"_animations\"]}propertyChangedCallback(t,e,i){if(!this.shadow)return;let s=this.shadow.querySelector(\".togglePlay\"),r=this.shadow.querySelector(\".stop\"),n=this.shadow.querySelector(\".prev\"),a=this.shadow.querySelector(\".next\"),o=this.shadow.querySelector(\".seeker\"),h=this.shadow.querySelector(\"progress\"),l=this.shadow.querySelector(\".popover\"),p=this.shadow.querySelector(\".convert\");s instanceof HTMLButtonElement&&r instanceof HTMLButtonElement&&a instanceof HTMLButtonElement&&n instanceof HTMLButtonElement&&o instanceof HTMLInputElement&&h instanceof HTMLProgressElement&&(\"playerState\"===t&&(s.dataset.active=(i===PlayerState.Playing||i===PlayerState.Paused).toString(),r.dataset.active=(i===PlayerState.Stopped).toString(),i===PlayerState.Playing?s.innerHTML='<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>':s.innerHTML='<svg width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M8.016 5.016L18.985 12 8.016 18.984V5.015z\"/></svg>'),\"_seeker\"===t&&\"number\"==typeof i&&(o.value=i.toString(),o.ariaValueNow=i.toString(),h.value=i),\"_animations\"===t&&Array.isArray(i)&&this._currentAnimation+1<i.length&&(a.hidden=!1),\"_currentAnimation\"===t&&\"number\"==typeof i&&(i+1>=this._animations.length?a.hidden=!0:a.hidden=!1,i?n.hidden=!1:n.hidden=!0),\"_isSettingsOpen\"===t&&\"boolean\"==typeof i&&l instanceof HTMLDivElement&&p instanceof HTMLButtonElement&&(l.hidden=!i,p.hidden=this._isDotLottie))}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){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(\"\"));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}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===PlayMode.Bounce?t:PlayMode.Normal}set objectfit(t){this.setAttribute(\"objectfit\",t)}get objectfit(){let t=this.getAttribute(\"objectfit\");return t&&Object.values(ObjectFit).includes(t)?t:ObjectFit.Contain}set preserveAspectRatio(t){this.setAttribute(\"preserveAspectRatio\",t||PreserveAspectRatio.Contain)}get preserveAspectRatio(){let t=this.getAttribute(\"preserveAspectRatio\");return t&&Object.values(PreserveAspectRatio).includes(t)?t:null}set renderer(t){this.setAttribute(\"renderer\",t)}get renderer(){let t=this.getAttribute(\"renderer\");return\"canvas\"===t||\"html\"===t?t:\"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}setMultiAnimationSettings(t){this._lottieInstance&&(this._multiAnimationSettings=t)}setSegment(t){this._lottieInstance&&(this._segment=t)}_getOptions(){if(!this._container)throw Error(\"Container not rendered\");let t=this.preserveAspectRatio??(this.objectfit&&aspectRatio(this.objectfit)),e=this._multiAnimationSettings?.length?this._multiAnimationSettings?.[this._currentAnimation]:void 0,i=this._manifest.animations?.[this._currentAnimation],s=!!this.loop;void 0!==i.loop&&void 0===this.loop&&(s=!!i.loop),e?.loop!==void 0&&(s=!!e.loop);let r=!!this.autoplay;void 0!==i.autoplay&&void 0===this.autoplay&&(r=!!i.autoplay),e?.autoplay!==void 0&&(r=!!e.autoplay),this.animateOnScroll&&(r=!1);let n=this._segment;this._segment?.every(t=>t>0)&&(n=[this._segment[0]-1,this._segment[1]-1]),this._segment?.some(t=>t<0)&&(n=void 0);let a={autoplay:r,container:this._container,initialSegment:n,loop:s,renderer:this.renderer,rendererSettings:{imagePreserveAspectRatio:t}};switch(this.renderer){case\"svg\":a.rendererSettings={...a.rendererSettings,hideOnTransparent:!0,preserveAspectRatio:t,progressiveLoad:!0};break;case\"canvas\":a.rendererSettings={...a.rendererSettings,clearCanvas:!0,preserveAspectRatio:t,progressiveLoad:!0};break;case\"html\":a.rendererSettings={...a.rendererSettings,hideOnTransparent:!0}}return a}_addIntersectionObserver(){this._container&&!this._intersectionObserver&&\"IntersectionObserver\"in window&&(this._intersectionObserver=new IntersectionObserver(t=>{for(let e of t){if(!e.isIntersecting||document.hidden){this.playerState===PlayerState.Playing&&this._freeze(),this._playerState.visible=!1;continue}this.animateOnScroll||this.playerState!==PlayerState.Frozen||this.play(),this._playerState.scrollY||(this._playerState.scrollY=scrollY),this._playerState.visible=!0}}),this._intersectionObserver.observe(this._container))}async load(t){if(!this.shadowRoot||!t)return;try{let{animations:e,isDotLottie:i,manifest:s}=await getAnimationData(t);if(!e||e.some(t=>!this._isLottie(t)))throw Error(\"Broken or corrupted file\");this._isBounce=this.mode===PlayMode.Bounce,this._multiAnimationSettings?.length&&this._multiAnimationSettings[this._currentAnimation]?.mode&&(this._isBounce=this._multiAnimationSettings[this._currentAnimation].mode===PlayMode.Bounce),this._isDotLottie=!!i,this._animations=e,this._manifest=s??{animations:[{autoplay:!this.animateOnScroll&&this.autoplay,direction:this.direction,id:useId(),loop:this.loop,mode:this.mode,speed:this.speed}]},this._lottieInstance&&this._lottieInstance.destroy(),this.playerState=PlayerState.Stopped,!this.animateOnScroll&&(this.autoplay||this._multiAnimationSettings?.[this._currentAnimation]?.autoplay)&&(this.playerState=PlayerState.Playing),this._lottieInstance=lottie.loadAnimation({...this._getOptions(),animationData:e[this._currentAnimation]})}catch(t){this._errorMessage=handleErrors(t).message,this.playerState=PlayerState.Error,this.dispatchEvent(new CustomEvent(PlayerEvents.Error));return}this._addEventListeners();let e=this._multiAnimationSettings?.[this._currentAnimation]?.speed??this.speed??this._manifest.animations[this._currentAnimation].speed,i=this._multiAnimationSettings?.[this._currentAnimation]?.direction??this.direction??this._manifest.animations[this._currentAnimation].direction??1;this._lottieInstance.setSpeed(e),this._lottieInstance.setDirection(i),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())}getManifest(){return this._manifest}_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})}_addEventListeners(){this._toggleEventListeners(\"add\")}_removeEventListeners(){this._toggleEventListeners(\"remove\")}_loopComplete(){if(!this._lottieInstance)return;let{playDirection:t,totalFrames:e}=this._lottieInstance,i=this._segment?this._segment[0]:0,s=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=PlayerState.Completed,this.dispatchEvent(new CustomEvent(PlayerEvents.Complete));return}return(this.dispatchEvent(new CustomEvent(PlayerEvents.Loop)),this._isBounce)?(this._lottieInstance.goToAndStop(-1===t?i:.99*s,!0),this._lottieInstance.setDirection(-1*t),setTimeout(()=>{this.animateOnScroll||this._lottieInstance?.play()},this.intermission)):(this._lottieInstance.goToAndStop(-1===t?.99*s:i,!0),setTimeout(()=>{this.animateOnScroll||this._lottieInstance?.play()},this.intermission))}_enterFrame(){if(!this._lottieInstance)return;let{currentFrame:t,totalFrames:e}=this._lottieInstance;this._seeker=Math.round(t/e*100),this.dispatchEvent(new CustomEvent(PlayerEvents.Frame,{detail:{frame:t,seeker:this._seeker}}))}_complete(){if(!this._lottieInstance)return;if(this._animations.length>1){if(this._multiAnimationSettings?.[this._currentAnimation+1]?.autoplay)return this.next();if(this.loop&&this._currentAnimation===this._animations.length-1)return this._currentAnimation=0,this._switchInstance()}let{currentFrame:t,totalFrames:e}=this._lottieInstance;this._seeker=Math.round(t/e*100),this.playerState=PlayerState.Completed,this.dispatchEvent(new CustomEvent(PlayerEvents.Complete,{detail:{frame:t,seeker:this._seeker}}))}_DOMLoaded(){this._playerState.loaded=!0,this.dispatchEvent(new CustomEvent(PlayerEvents.Ready))}_dataReady(){this.dispatchEvent(new CustomEvent(PlayerEvents.Load))}_dataFailed(){this.playerState=PlayerState.Error,this.dispatchEvent(new CustomEvent(PlayerEvents.Error))}_handleWindowBlur({type:t}){this.playerState===PlayerState.Playing&&\"blur\"===t&&this._freeze(),this.playerState===PlayerState.Frozen&&\"focus\"===t&&this.play()}_mouseEnter(){this.hover&&this.playerState!==PlayerState.Playing&&this.play()}_mouseLeave(){this.hover&&this.playerState===PlayerState.Playing&&this.stop()}_onVisibilityChange(){if(document.hidden&&this.playerState===PlayerState.Playing){this._freeze();return}this.playerState===PlayerState.Frozen&&this.play()}_handleScroll(){if(this.animateOnScroll&&this._lottieInstance){if(isServer()){console.warn(\"DotLottie: Scroll animations might not work properly in a Server Side Rendering context. Try to wrap this in a client component.\");return}if(this._playerState.visible){this._playerState.scrollTimeout&&clearTimeout(this._playerState.scrollTimeout),this._playerState.scrollTimeout=setTimeout(()=>{this.playerState=PlayerState.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=PlayerState.Playing,this._lottieInstance?.goToAndStop(t,!0)):this.playerState=PlayerState.Paused})}}}_handleSeekChange({target:t}){!(t instanceof HTMLInputElement)||!this._lottieInstance||isNaN(Number(t.value))||this.seek(Math.round(Number(t.value)/100*this._lottieInstance.totalFrames))}_isLottie(t){return[\"v\",\"ip\",\"op\",\"layers\",\"fr\",\"w\",\"h\"].every(e=>Object.prototype.hasOwnProperty.call(t,e))}async addAnimation(t,e,i=!0){let{animations:s=[],manifest:r={animations:this.src?[{id:this._identifier}]:[]}}=this.src?await getAnimationData(this.src):{};try{for(let e of(r.generator=pkg.name,t)){let{url:t}=e,{animations:i}=await getAnimationData(t);if(!i)throw Error(\"No animation loaded\");if(r.animations.some(({id:t})=>t===e.id))throw Error(\"Duplicate id for animation\");r.animations=[...r.animations,{id:e.id}],s?.push(...i)}return{result:await createDotLottie({animations:s,fileName:e,manifest:r,shouldDownload:i}),success:!0}}catch(t){return{error:handleErrors(t).message,success:!1}}}getLottie(){return this._lottieInstance}async play(){if(this._lottieInstance){this.playerState&&(this._playerState.prev=this.playerState);try{this._lottieInstance.play(),this.dispatchEvent(new CustomEvent(PlayerEvents.Play))}finally{this.playerState=PlayerState.Playing}}}pause(){if(this._lottieInstance){this.playerState&&(this._playerState.prev=this.playerState);try{this._lottieInstance.pause(),this.dispatchEvent(new CustomEvent(PlayerEvents.Pause))}finally{this.playerState=PlayerState.Paused}}}stop(){if(this._lottieInstance){this.playerState&&(this._playerState.prev=this.playerState),this._playerState.count=0;try{this._lottieInstance.stop(),this.dispatchEvent(new CustomEvent(PlayerEvents.Stop))}finally{this.playerState=PlayerState.Stopped}}}destroy(){this._lottieInstance&&(this.playerState=PlayerState.Destroyed,this._lottieInstance.destroy(),this._lottieInstance=null,this.dispatchEvent(new CustomEvent(PlayerEvents.Destroyed)),this.remove(),document.removeEventListener(\"visibilitychange\",this._onVisibilityChange))}seek(t){if(!this._lottieInstance)return;let e=t.toString().match(/^([0-9]+)(%?)$/);if(!e)return;let i=Math.round(\"%\"===e[2]?this._lottieInstance.totalFrames*Number(e[1])/100:Number(e[1]));if(this._seeker=i,this.playerState===PlayerState.Playing||this.playerState===PlayerState.Frozen&&this._playerState.prev===PlayerState.Playing){this._lottieInstance.goToAndPlay(i,!0),this.playerState=PlayerState.Playing;return}this._lottieInstance.goToAndStop(i,!0),this._lottieInstance.pause()}snapshot(){if(!this.shadowRoot||!this.src)return;let t=this.shadowRoot.querySelector(\".animation svg\"),e=t instanceof Node?new XMLSerializer().serializeToString(t):null;if(!e){console.error(\"Could not serialize data\");return}return download(e,{mimeType:\"image/svg+xml\",name:`${getFilename(this.src)}-${frameOutput(this._seeker)}.svg`}),e}setSubframe(t){this._lottieInstance&&this._lottieInstance.setSubframe(t)}setCount(t){this._lottieInstance&&(this.count=t)}_freeze(){if(this._lottieInstance){this.playerState&&(this._playerState.prev=this.playerState);try{this._lottieInstance.pause(),this.dispatchEvent(new CustomEvent(PlayerEvents.Freeze))}finally{this.playerState=PlayerState.Frozen}}}async reload(){this._lottieInstance&&this.src&&(this._lottieInstance.destroy(),await this.load(this.src))}setSpeed(t=1){this._lottieInstance&&this._lottieInstance.setSpeed(t)}setDirection(t){this._lottieInstance&&this._lottieInstance.setDirection(t)}setLoop(t){this._lottieInstance&&this._lottieInstance.setLoop(t)}togglePlay(){if(!this._lottieInstance)return;let{currentFrame:t,playDirection:e,totalFrames:i}=this._lottieInstance;return this.playerState===PlayerState.Playing?this.pause():this.playerState!==PlayerState.Completed?this.play():(this.playerState=PlayerState.Playing,this._isBounce)?(this.setDirection(-1*e),this._lottieInstance.goToAndPlay(t,!0)):-1===e?this._lottieInstance.goToAndPlay(i,!0):this._lottieInstance.goToAndPlay(0,!0)}toggleLoop(){let t=!this.loop;this.loop=t,this.setLoop(t)}toggleBoomerang(){let t=this._multiAnimationSettings?.[this._currentAnimation];if(t?.mode!==void 0){if(t.mode===PlayMode.Normal){t.mode=PlayMode.Bounce,this._isBounce=!0;return}t.mode=PlayMode.Normal,this._isBounce=!1;return}if(this.mode===PlayMode.Normal){this.mode=PlayMode.Bounce,this._isBounce=!0;return}this.mode=PlayMode.Normal,this._isBounce=!1}_toggleSettings(t){if(void 0===t){this._isSettingsOpen=!this._isSettingsOpen;return}this._isSettingsOpen=t}_handleBlur(){setTimeout(()=>this._toggleSettings(!1),200)}_switchInstance(t=!1){if(this._animations[this._currentAnimation])try{if(this._lottieInstance&&this._lottieInstance.destroy(),this._lottieInstance=lottie.loadAnimation({...this._getOptions(),animationData:this._animations[this._currentAnimation]}),this._multiAnimationSettings?.[this._currentAnimation]?.mode&&(this._isBounce=this._multiAnimationSettings[this._currentAnimation].mode===PlayMode.Bounce),this._removeEventListeners(),this._addEventListeners(),this.dispatchEvent(new CustomEvent(t?PlayerEvents.Previous:PlayerEvents.Next)),this._multiAnimationSettings?.[this._currentAnimation]?.autoplay??this.autoplay){if(this.animateOnScroll){this._lottieInstance?.goToAndStop(0,!0),this.playerState=PlayerState.Paused;return}this._lottieInstance?.goToAndPlay(0,!0),this.playerState=PlayerState.Playing;return}this._lottieInstance?.goToAndStop(0,!0),this.playerState=PlayerState.Stopped}catch(t){this._errorMessage=handleErrors(t).message,this.playerState=PlayerState.Error,this.dispatchEvent(new CustomEvent(PlayerEvents.Error))}}next(){this._currentAnimation++,this._switchInstance()}prev(){this._currentAnimation--,this._switchInstance(!0)}async convert({animations:t,fileName:e,manifest:i,shouldDownload:s=!0,src:r,typeCheck:n}){return n||this._isDotLottie?createJSON({animation:(await getAnimationData(r||this.src))?.animations?.[0],fileName:`${getFilename(e||this.src||\"converted\")}.json`,shouldDownload:s}):createDotLottie({animations:t||(await getAnimationData(this.src))?.animations,fileName:`${getFilename(e||this.src||\"converted\")}.lottie`,manifest:{...i||this._manifest,generator:pkg.name},shouldDownload:s})}static get styles(){let t=new CSSStyleSheet;return t.replace(css_248z),t}constructor(){super(),this._renderControls=renderControls,this._render=renderPlayer,this._multiAnimationSettings=[],this.playerState=PlayerState.Loading,this._isSettingsOpen=!1,this._seeker=0,this._currentAnimation=0,this._lottieInstance=null,this._identifier=this.id||useId(\"dotlottie\"),this._errorMessage=\"Something went wrong\",this._isBounce=!1,this._isDotLottie=!1,this._playerState={count:0,loaded:!1,prev:PlayerState.Loading,scrollTimeout:null,scrollY:0,visible:!1},this._handleSettingsClick=({target:t})=>{this._toggleSettings(),t instanceof HTMLElement&&t.focus()},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.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.convert=this.convert.bind(this),this.destroy=this.destroy.bind(this),this.template=document.createElement(\"template\"),this.shadow=this.attachShadow({mode:\"open\"})}}"
+          "default": "class extends EnhancedElement{async connectedCallback(){super.connectedCallback(),this._render(),this._container=this.shadow.querySelector(\".animation\"),this._renderControls(),void 0!==document.hidden&&document.addEventListener(\"visibilitychange\",this._onVisibilityChange),this._addIntersectionObserver(),await this.load(this.src),this.dispatchEvent(new CustomEvent(PlayerEvents.Rendered))}disconnectedCallback(){this._intersectionObserver&&(this._intersectionObserver.disconnect(),this._intersectionObserver=void 0),this._lottieInstance&&this._lottieInstance.destroy(),document.removeEventListener(\"visibilitychange\",this._onVisibilityChange)}static get observedAttributes(){return[\"animateOnScroll\",\"autoplay\",\"controls\",\"direction\",\"hover\",\"loop\",\"mode\",\"speed\",\"src\",\"subframe\"]}async attributeChangedCallback(t,e,i){if(this._lottieInstance){if(\"animateOnScroll\"===t){if(\"\"===i||i){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(\"\"===i||i){this.play();return}this.stop()}if(\"controls\"===t&&this._renderControls(),\"direction\"===t){if(-1===Number(i))return this.setDirection(-1);this.setDirection(1)}if(\"hover\"===t&&this._container){if(\"\"===i||i){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=i),this.setLoop(\"\"===i||!!i)}if(\"mode\"===t){let t=this.shadow.querySelector(\".toggleBoomerang\");t instanceof HTMLButtonElement&&(t.dataset.active=(i===PlayMode.Bounce).toString()),this._isBounce=i===PlayMode.Bounce}if(\"speed\"===t){let t=Number(i);t&&!isNaN(t)&&this.setSpeed(t)}\"src\"===t&&await this.load(i),\"subframe\"===t&&this.setSubframe(\"\"===i||!!i)}}static get observedProperties(){return[\"playerState\",\"_isSettingsOpen\",\"_seeker\",\"_currentAnimation\",\"_animations\"]}propertyChangedCallback(t,e,i){if(!this.shadow)return;let s=this.shadow.querySelector(\".togglePlay\"),r=this.shadow.querySelector(\".stop\"),n=this.shadow.querySelector(\".prev\"),a=this.shadow.querySelector(\".next\"),o=this.shadow.querySelector(\".seeker\"),h=this.shadow.querySelector(\"progress\"),l=this.shadow.querySelector(\".popover\"),p=this.shadow.querySelector(\".convert\");s instanceof HTMLButtonElement&&r instanceof HTMLButtonElement&&a instanceof HTMLButtonElement&&n instanceof HTMLButtonElement&&o instanceof HTMLInputElement&&h instanceof HTMLProgressElement&&(\"playerState\"===t&&(s.dataset.active=(i===PlayerState.Playing||i===PlayerState.Paused).toString(),r.dataset.active=(i===PlayerState.Stopped).toString(),i===PlayerState.Playing?s.innerHTML='<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>':s.innerHTML='<svg width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M8.016 5.016L18.985 12 8.016 18.984V5.015z\"/></svg>'),\"_seeker\"===t&&\"number\"==typeof i&&(o.value=i.toString(),o.ariaValueNow=i.toString(),h.value=i),\"_animations\"===t&&Array.isArray(i)&&this._currentAnimation+1<i.length&&(a.hidden=!1),\"_currentAnimation\"===t&&\"number\"==typeof i&&(i+1>=this._animations.length?a.hidden=!0:a.hidden=!1,i?n.hidden=!1:n.hidden=!0),\"_isSettingsOpen\"===t&&\"boolean\"==typeof i&&l instanceof HTMLDivElement&&p instanceof HTMLButtonElement&&(l.hidden=!i,p.hidden=this._isDotLottie))}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){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(\"\"));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}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===PlayMode.Bounce?t:PlayMode.Normal}set objectfit(t){this.setAttribute(\"objectfit\",t)}get objectfit(){let t=this.getAttribute(\"objectfit\");return t&&Object.values(ObjectFit).includes(t)?t:ObjectFit.Contain}set preserveAspectRatio(t){this.setAttribute(\"preserveAspectRatio\",t||PreserveAspectRatio.Contain)}get preserveAspectRatio(){let t=this.getAttribute(\"preserveAspectRatio\");return t&&Object.values(PreserveAspectRatio).includes(t)?t:null}set renderer(t){this.setAttribute(\"renderer\",t)}get renderer(){let t=this.getAttribute(\"renderer\");return\"canvas\"===t||\"html\"===t?t:\"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}getMultiAnimationSettings(){return this._multiAnimationSettings}setMultiAnimationSettings(t){this._lottieInstance&&(this._multiAnimationSettings=t)}setSegment(t){this._lottieInstance&&(this._segment=t)}getSegment(){return this._segment}_getOptions(){if(!this._container)throw Error(\"Container not rendered\");let t=this.preserveAspectRatio??(this.objectfit&&aspectRatio(this.objectfit)),e=this._multiAnimationSettings?.length?this._multiAnimationSettings?.[this._currentAnimation]:void 0,i=this._manifest.animations?.[this._currentAnimation],s=!!this.loop;void 0!==i.loop&&void 0===this.loop&&(s=!!i.loop),e?.loop!==void 0&&(s=!!e.loop);let r=!!this.autoplay;void 0!==i.autoplay&&void 0===this.autoplay&&(r=!!i.autoplay),e?.autoplay!==void 0&&(r=!!e.autoplay),this.animateOnScroll&&(r=!1);let n=this._segment;this._segment?.every(t=>t>0)&&(n=[this._segment[0]-1,this._segment[1]-1]),this._segment?.some(t=>t<0)&&(n=void 0);let a={autoplay:r,container:this._container,initialSegment:n,loop:s,renderer:this.renderer,rendererSettings:{imagePreserveAspectRatio:t}};switch(this.renderer){case\"svg\":a.rendererSettings={...a.rendererSettings,hideOnTransparent:!0,preserveAspectRatio:t,progressiveLoad:!0};break;case\"canvas\":a.rendererSettings={...a.rendererSettings,clearCanvas:!0,preserveAspectRatio:t,progressiveLoad:!0};break;case\"html\":a.rendererSettings={...a.rendererSettings,hideOnTransparent:!0}}return a}_addIntersectionObserver(){this._container&&!this._intersectionObserver&&\"IntersectionObserver\"in window&&(this._intersectionObserver=new IntersectionObserver(t=>{for(let e of t){if(!e.isIntersecting||document.hidden){this.playerState===PlayerState.Playing&&this._freeze(),this._playerState.visible=!1;continue}this.animateOnScroll||this.playerState!==PlayerState.Frozen||this.play(),this._playerState.scrollY||(this._playerState.scrollY=scrollY),this._playerState.visible=!0}}),this._intersectionObserver.observe(this._container))}async load(t){if(!this.shadowRoot||!t)return;try{let{animations:e,isDotLottie:i,manifest:s}=await getAnimationData(t);if(!e||e.some(t=>!this._isLottie(t)))throw Error(\"Broken or corrupted file\");this._isBounce=this.mode===PlayMode.Bounce,this._multiAnimationSettings?.length&&this._multiAnimationSettings[this._currentAnimation]?.mode&&(this._isBounce=this._multiAnimationSettings[this._currentAnimation].mode===PlayMode.Bounce),this._isDotLottie=!!i,this._animations=e,this._manifest=s??{animations:[{autoplay:!this.animateOnScroll&&this.autoplay,direction:this.direction,id:useId(),loop:this.loop,mode:this.mode,speed:this.speed}]},this._lottieInstance&&this._lottieInstance.destroy(),this.playerState=PlayerState.Stopped,!this.animateOnScroll&&(this.autoplay||this._multiAnimationSettings?.[this._currentAnimation]?.autoplay)&&(this.playerState=PlayerState.Playing),this._lottieInstance=lottie.loadAnimation({...this._getOptions(),animationData:e[this._currentAnimation]})}catch(t){this._errorMessage=handleErrors(t).message,this.playerState=PlayerState.Error,this.dispatchEvent(new CustomEvent(PlayerEvents.Error));return}this._addEventListeners();let e=this._multiAnimationSettings?.[this._currentAnimation]?.speed??this.speed??this._manifest.animations[this._currentAnimation].speed,i=this._multiAnimationSettings?.[this._currentAnimation]?.direction??this.direction??this._manifest.animations[this._currentAnimation].direction??1;this._lottieInstance.setSpeed(e),this._lottieInstance.setDirection(i),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())}getManifest(){return this._manifest}_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})}_addEventListeners(){this._toggleEventListeners(\"add\")}_removeEventListeners(){this._toggleEventListeners(\"remove\")}_loopComplete(){if(!this._lottieInstance)return;let{playDirection:t,totalFrames:e}=this._lottieInstance,i=this._segment?this._segment[0]:0,s=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=PlayerState.Completed,this.dispatchEvent(new CustomEvent(PlayerEvents.Complete));return}return(this.dispatchEvent(new CustomEvent(PlayerEvents.Loop)),this._isBounce)?(this._lottieInstance.goToAndStop(-1===t?i:.99*s,!0),this._lottieInstance.setDirection(-1*t),setTimeout(()=>{this.animateOnScroll||this._lottieInstance?.play()},this.intermission)):(this._lottieInstance.goToAndStop(-1===t?.99*s:i,!0),setTimeout(()=>{this.animateOnScroll||this._lottieInstance?.play()},this.intermission))}_enterFrame(){if(!this._lottieInstance)return;let{currentFrame:t,totalFrames:e}=this._lottieInstance;this._seeker=Math.round(t/e*100),this.dispatchEvent(new CustomEvent(PlayerEvents.Frame,{detail:{frame:t,seeker:this._seeker}}))}_complete(){if(!this._lottieInstance)return;if(this._animations.length>1){if(this._multiAnimationSettings?.[this._currentAnimation+1]?.autoplay)return this.next();if(this.loop&&this._currentAnimation===this._animations.length-1)return this._currentAnimation=0,this._switchInstance()}let{currentFrame:t,totalFrames:e}=this._lottieInstance;this._seeker=Math.round(t/e*100),this.playerState=PlayerState.Completed,this.dispatchEvent(new CustomEvent(PlayerEvents.Complete,{detail:{frame:t,seeker:this._seeker}}))}_DOMLoaded(){this._playerState.loaded=!0,this.dispatchEvent(new CustomEvent(PlayerEvents.Ready))}_dataReady(){this.dispatchEvent(new CustomEvent(PlayerEvents.Load))}_dataFailed(){this.playerState=PlayerState.Error,this.dispatchEvent(new CustomEvent(PlayerEvents.Error))}_handleWindowBlur({type:t}){this.playerState===PlayerState.Playing&&\"blur\"===t&&this._freeze(),this.playerState===PlayerState.Frozen&&\"focus\"===t&&this.play()}_mouseEnter(){this.hover&&this.playerState!==PlayerState.Playing&&this.play()}_mouseLeave(){this.hover&&this.playerState===PlayerState.Playing&&this.stop()}_onVisibilityChange(){if(document.hidden&&this.playerState===PlayerState.Playing){this._freeze();return}this.playerState===PlayerState.Frozen&&this.play()}_handleScroll(){if(this.animateOnScroll&&this._lottieInstance){if(isServer()){console.warn(\"DotLottie: Scroll animations might not work properly in a Server Side Rendering context. Try to wrap this in a client component.\");return}if(this._playerState.visible){this._playerState.scrollTimeout&&clearTimeout(this._playerState.scrollTimeout),this._playerState.scrollTimeout=setTimeout(()=>{this.playerState=PlayerState.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=PlayerState.Playing,this._lottieInstance?.goToAndStop(t,!0)):this.playerState=PlayerState.Paused})}}}_handleSeekChange({target:t}){!(t instanceof HTMLInputElement)||!this._lottieInstance||isNaN(Number(t.value))||this.seek(Math.round(Number(t.value)/100*this._lottieInstance.totalFrames))}_isLottie(t){return[\"v\",\"ip\",\"op\",\"layers\",\"fr\",\"w\",\"h\"].every(e=>Object.prototype.hasOwnProperty.call(t,e))}async addAnimation(t,e,i=!0){let{animations:s=[],manifest:r={animations:this.src?[{id:this._identifier}]:[]}}=this.src?await getAnimationData(this.src):{};try{for(let e of(r.generator=pkg.name,t)){let{url:t}=e,{animations:i}=await getAnimationData(t);if(!i)throw Error(\"No animation loaded\");if(r.animations.some(({id:t})=>t===e.id))throw Error(\"Duplicate id for animation\");r.animations=[...r.animations,{id:e.id}],s?.push(...i)}return{result:await createDotLottie({animations:s,fileName:e,manifest:r,shouldDownload:i}),success:!0}}catch(t){return{error:handleErrors(t).message,success:!1}}}getLottie(){return this._lottieInstance}async play(){if(this._lottieInstance){this.playerState&&(this._playerState.prev=this.playerState);try{this._lottieInstance.play(),this.dispatchEvent(new CustomEvent(PlayerEvents.Play))}finally{this.playerState=PlayerState.Playing}}}pause(){if(this._lottieInstance){this.playerState&&(this._playerState.prev=this.playerState);try{this._lottieInstance.pause(),this.dispatchEvent(new CustomEvent(PlayerEvents.Pause))}finally{this.playerState=PlayerState.Paused}}}stop(){if(this._lottieInstance){this.playerState&&(this._playerState.prev=this.playerState),this._playerState.count=0;try{this._lottieInstance.stop(),this.dispatchEvent(new CustomEvent(PlayerEvents.Stop))}finally{this.playerState=PlayerState.Stopped}}}destroy(){this._lottieInstance&&(this.playerState=PlayerState.Destroyed,this._lottieInstance.destroy(),this._lottieInstance=null,this.dispatchEvent(new CustomEvent(PlayerEvents.Destroyed)),this.remove(),document.removeEventListener(\"visibilitychange\",this._onVisibilityChange))}seek(t){if(!this._lottieInstance)return;let e=t.toString().match(/^([0-9]+)(%?)$/);if(!e)return;let i=Math.round(\"%\"===e[2]?this._lottieInstance.totalFrames*Number(e[1])/100:Number(e[1]));if(this._seeker=i,this.playerState===PlayerState.Playing||this.playerState===PlayerState.Frozen&&this._playerState.prev===PlayerState.Playing){this._lottieInstance.goToAndPlay(i,!0),this.playerState=PlayerState.Playing;return}this._lottieInstance.goToAndStop(i,!0),this._lottieInstance.pause()}snapshot(){if(!this.shadowRoot||!this.src)return;let t=this.shadowRoot.querySelector(\".animation svg\"),e=t instanceof Node?new XMLSerializer().serializeToString(t):null;if(!e){console.error(\"Could not serialize data\");return}return download(e,{mimeType:\"image/svg+xml\",name:`${getFilename(this.src)}-${frameOutput(this._seeker)}.svg`}),e}setSubframe(t){this._lottieInstance&&this._lottieInstance.setSubframe(t)}setCount(t){this._lottieInstance&&(this.count=t)}_freeze(){if(this._lottieInstance){this.playerState&&(this._playerState.prev=this.playerState);try{this._lottieInstance.pause(),this.dispatchEvent(new CustomEvent(PlayerEvents.Freeze))}finally{this.playerState=PlayerState.Frozen}}}async reload(){this._lottieInstance&&this.src&&(this._lottieInstance.destroy(),await this.load(this.src))}setSpeed(t=1){this._lottieInstance&&this._lottieInstance.setSpeed(t)}setDirection(t){this._lottieInstance&&this._lottieInstance.setDirection(t)}setLoop(t){this._lottieInstance&&this._lottieInstance.setLoop(t)}togglePlay(){if(!this._lottieInstance)return;let{currentFrame:t,playDirection:e,totalFrames:i}=this._lottieInstance;return this.playerState===PlayerState.Playing?this.pause():this.playerState!==PlayerState.Completed?this.play():(this.playerState=PlayerState.Playing,this._isBounce)?(this.setDirection(-1*e),this._lottieInstance.goToAndPlay(t,!0)):-1===e?this._lottieInstance.goToAndPlay(i,!0):this._lottieInstance.goToAndPlay(0,!0)}toggleLoop(){let t=!this.loop;this.loop=t,this.setLoop(t)}toggleBoomerang(){let t=this._multiAnimationSettings?.[this._currentAnimation];if(t?.mode!==void 0){if(t.mode===PlayMode.Normal){t.mode=PlayMode.Bounce,this._isBounce=!0;return}t.mode=PlayMode.Normal,this._isBounce=!1;return}if(this.mode===PlayMode.Normal){this.mode=PlayMode.Bounce,this._isBounce=!0;return}this.mode=PlayMode.Normal,this._isBounce=!1}_toggleSettings(t){if(void 0===t){this._isSettingsOpen=!this._isSettingsOpen;return}this._isSettingsOpen=t}_handleBlur(){setTimeout(()=>this._toggleSettings(!1),200)}_switchInstance(t=!1){if(this._animations[this._currentAnimation])try{if(this._lottieInstance&&this._lottieInstance.destroy(),this._lottieInstance=lottie.loadAnimation({...this._getOptions(),animationData:this._animations[this._currentAnimation]}),this._multiAnimationSettings?.[this._currentAnimation]?.mode&&(this._isBounce=this._multiAnimationSettings[this._currentAnimation].mode===PlayMode.Bounce),this._removeEventListeners(),this._addEventListeners(),this.dispatchEvent(new CustomEvent(t?PlayerEvents.Previous:PlayerEvents.Next)),this._multiAnimationSettings?.[this._currentAnimation]?.autoplay??this.autoplay){if(this.animateOnScroll){this._lottieInstance?.goToAndStop(0,!0),this.playerState=PlayerState.Paused;return}this._lottieInstance?.goToAndPlay(0,!0),this.playerState=PlayerState.Playing;return}this._lottieInstance?.goToAndStop(0,!0),this.playerState=PlayerState.Stopped}catch(t){this._errorMessage=handleErrors(t).message,this.playerState=PlayerState.Error,this.dispatchEvent(new CustomEvent(PlayerEvents.Error))}}next(){this._currentAnimation++,this._switchInstance()}prev(){this._currentAnimation--,this._switchInstance(!0)}async convert({animations:t,fileName:e,manifest:i,shouldDownload:s=!0,src:r,typeCheck:n}){return n||this._isDotLottie?createJSON({animation:(await getAnimationData(r||this.src))?.animations?.[0],fileName:`${getFilename(e||this.src||\"converted\")}.json`,shouldDownload:s}):createDotLottie({animations:t||(await getAnimationData(this.src))?.animations,fileName:`${getFilename(e||this.src||\"converted\")}.lottie`,manifest:{...i||this._manifest,generator:pkg.name},shouldDownload:s})}static get styles(){let t=new CSSStyleSheet;return t.replace(css_248z),t}constructor(){super(),this._renderControls=renderControls,this._render=renderPlayer,this._multiAnimationSettings=[],this.playerState=PlayerState.Loading,this._isSettingsOpen=!1,this._seeker=0,this._currentAnimation=0,this._lottieInstance=null,this._identifier=this.id||useId(\"dotlottie\"),this._errorMessage=\"Something went wrong\",this._isBounce=!1,this._isDotLottie=!1,this._playerState={count:0,loaded:!1,prev:PlayerState.Loading,scrollTimeout:null,scrollY:0,visible:!1},this._handleSettingsClick=({target:t})=>{this._toggleSettings(),t instanceof HTMLElement&&t.focus()},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.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.convert=this.convert.bind(this),this.destroy=this.destroy.bind(this),this.template=document.createElement(\"template\"),this.shadow=this.attachShadow({mode:\"open\"})}}"
         }
       ],
       "exports": [

package/dist/cjs/index.js

@@ -20471,13 +20471,14 @@ function renderPlayer() {
 }
 
 function renderControls() {
-    if (!this.controls) {
-        return;
-    }
     const slot = this.shadow.querySelector('slot[name=controls]');
     if (!slot) {
         return;
     }
+    if (!this.controls) {
+        slot.innerHTML = '';
+        return;
+    }
     slot.innerHTML = `<div class="lottie-controls toolbar ${this.playerState === PlayerState.Error ? 'has-error' : ''}" aria-label="Lottie Animation controls"><button class="togglePlay" data-active="false" aria-label="Toggle Play/Pause"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z"/></svg></button> <button class="stop" data-active="true" aria-label="Stop"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M6 6h12v12H6V6z"/></svg></button> <button class="prev" aria-label="Previous animation" hidden><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.9 18.2 8.1 12l9.8-6.2v12.4zm-10.3 0H6.1V5.8h1.5v12.4z"/></svg></button> <button class="next" aria-label="Next animation" hidden><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m6.1 5.8 9.8 6.2-9.8 6.2V5.8zM16.4 5.8h1.5v12.4h-1.5z"/></svg></button><form class="progress-container${this.simple ? ' simple' : ''}"><input class="seeker" type="range" min="0" max="100" step="1" value="${this._seeker.toString()}" aria-valuemin="0" aria-valuemax="100" role="slider" 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"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"/></svg></button> <button class="toggleBoomerang" data-active="${this.mode === PlayMode.Bounce}" aria-label="Toggle boomerang" tabindex="0"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m11.8 13.2-.3.3c-.5.5-1.1 1.1-1.7 1.5-.5.4-1 .6-1.5.8-.5.2-1.1.3-1.6.3s-1-.1-1.5-.3c-.6-.2-1-.5-1.4-1-.5-.6-.8-1.2-.9-1.9-.2-.9-.1-1.8.3-2.6.3-.7.8-1.2 1.3-1.6.3-.2.6-.4 1-.5.2-.2.5-.2.8-.3.3 0 .7-.1 1 0 .3 0 .6.1.9.2.9.3 1.7.9 2.4 1.5.4.4.8.7 1.1 1.1l.1.1.4-.4c.6-.6 1.2-1.2 1.9-1.6.5-.3 1-.6 1.5-.7.4-.1.7-.2 1-.2h.9c1 .1 1.9.5 2.6 1.4.4.5.7 1.1.8 1.8.2.9.1 1.7-.2 2.5-.4.9-1 1.5-1.8 2-.4.2-.7.4-1.1.4-.4.1-.8.1-1.2.1-.5 0-.9-.1-1.3-.3-.8-.3-1.5-.9-2.1-1.5-.4-.4-.8-.7-1.1-1.1h-.3zm-1.1-1.1c-.1-.1-.1-.1 0 0-.3-.3-.6-.6-.8-.9-.5-.5-1-.9-1.6-1.2-.4-.3-.8-.4-1.3-.4-.4 0-.8 0-1.1.2-.5.2-.9.6-1.1 1-.2.3-.3.7-.3 1.1 0 .3 0 .6.1.9.1.5.4.9.8 1.2.5.4 1.1.5 1.7.5.5 0 1-.2 1.5-.5.6-.4 1.1-.8 1.6-1.3.1-.3.3-.5.5-.6zM13 12c.5.5 1 1 1.5 1.4.5.5 1.1.9 1.9 1 .4.1.8 0 1.2-.1.3-.1.6-.3.9-.5.4-.4.7-.9.8-1.4.1-.5 0-.9-.1-1.4-.3-.8-.8-1.2-1.7-1.4-.4-.1-.8-.1-1.2 0-.5.1-1 .4-1.4.7-.5.4-1 .8-1.4 1.2-.2.2-.4.3-.5.5z"/></svg></button> <button class="toggleSettings" aria-label="Settings" aria-haspopup="true" aria-expanded="${!!this._isSettingsOpen}" aria-controls="${this._identifier}-settings"><svg width="24" height="24" aria-hidden="true" focusable="false"><circle cx="12" cy="5.4" r="2.5"/><circle cx="12" cy="12" r="2.5"/><circle cx="12" cy="18.6" r="2.5"/></svg></button><div id="${this._identifier}-settings" class="popover" hidden><button class="convert" aria-label="Convert JSON animation to dotLottie format" hidden><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"/></svg> Convert to dotLottie</button> <button class="snapshot" aria-label="Download still image"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M16.8 10.8 12 15.6l-4.8-4.8h3V3.6h3.6v7.2h3zM12 15.6H3v4.8h18v-4.8h-9zm7.8 2.4h-2.4v-1.2h2.4V18z"/></svg> Download still image</button></div>`}</div>`;
     const togglePlay = this.shadow.querySelector('.togglePlay');
     if (togglePlay instanceof HTMLButtonElement) {
@@ -20575,7 +20576,7 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
     }
 };
 
-var $schema="https://json.schemastore.org/package";var name="@aarsteinmedia/dotlottie-player";var version="4.0.0";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports$1={".":{"import":"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}};var main="./dist/esm/index.js";var unpkg="./dist/index.js";var module$1="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"git+https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"};var bugs="https://github.com/aarsteinmedia/dotlottie-player/issues";var author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"};var contributors=[{name:"Anthony Colpron",email:"anthonycolpron@gmail.com",url:"https://github.com/anthony-colpron"}];var license="GPL-2.0-or-later";var scripts={test:"wtr",prebuild:"rimraf ./dist",build:"rollup -c","prebuild:types":"rimraf ./types","build:types":"tsc -p ./tsconfig.prod.json && tsc-alias","build:cem":"npx cem analyze --config cem.config.mjs",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"rollup -c -w --environment NODE_ENV:development","lint:js":"eslint","lint:js:fix":"eslint --fix","lint:css":"npx stylelint **/*.scss","lint:css:fix":"npx stylelint **/*.scss --fix","lint:pkg":"npmPkgJsonLint .","lint:pkg:fix":"npmPkgJsonLint . --fix"};var dependencies={fflate:"^0.8.2","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.10.3","@eslint/compat":"^1.2.1","@eslint/eslintrc":"^3.1.0","@eslint/js":"^9.13.0","@esm-bundle/chai":"4.3.4-fix.0","@open-wc/testing":"^4.0.0","@rollup/plugin-commonjs":"^28.0.1","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.3.0","@rollup/plugin-typescript":"^11.1.6","@swc/core":"^1.7.39","@types/mocha":"^10.0.9","@types/node":"^22.7.9","@typescript-eslint/eslint-plugin":"^8.11.0","@typescript-eslint/parser":"^8.11.0","@web/dev-server-esbuild":"^1.0.2","@web/dev-server-import-maps":"^0.2.1","@web/dev-server-rollup":"^0.6.4","@web/test-runner":"^0.19.0","@web/test-runner-playwright":"^0.11.0",autoprefixer:"^10.4.20",esbuild:"^0.24.0","esbuild-sass-plugin":"^3.3.1",eslint:"^9.13.0","eslint-config-prettier":"^9.1.0","eslint-import-resolver-typescript":"^3.6.3","eslint-plugin-import":"^2.31.0","eslint-plugin-jsdoc":"^48.11.0","eslint-plugin-perfectionist":"^3.9.1","eslint-plugin-prettier":"^5.2.1",globals:"^15.11.0","npm-package-json-lint":"^8.0.0","npm-package-json-lint-config-default":"^7.0.1","postcss-flexbugs-fixes":"^5.0.2",prettier:"^3.3.3",rimraf:"^6.0.1",rollup:"^4.24.0","rollup-plugin-dts":"^6.1.1","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.1","rollup-plugin-swc3":"^0.12.1","rollup-plugin-typescript-paths":"^1.5.0",sass:"^1.80.4",stylelint:"^16.10.0","stylelint-config-standard-scss":"^13.1.0","tsc-alias":"^1.8.10",tslib:"^2.8.0",typescript:"^5.6.3"};var browserslist={production:[">0.3%","not dead","not op_mini all"],development:["last 1 chrome version","last 1 firefox version","last 1 safari version"]};var customElements$1="custom-elements.json";var files=["custom-elements.json","dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","svg","vector","player"];var publishConfig={access:"public"};var engines={node:">= 8.17.0"};var funding={type:"paypal",url:"https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"};var pkg = {$schema:$schema,name:name,version:version,description:description,exports:exports$1,main:main,unpkg:unpkg,module:module$1,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,contributors:contributors,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,browserslist:browserslist,customElements:customElements$1,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
+var $schema="https://json.schemastore.org/package";var name="@aarsteinmedia/dotlottie-player";var version="4.0.2";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports$1={".":{"import":"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}};var main="./dist/esm/index.js";var unpkg="./dist/index.js";var module$1="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"git+https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"};var bugs="https://github.com/aarsteinmedia/dotlottie-player/issues";var author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"};var contributors=[{name:"Anthony Colpron",email:"anthonycolpron@gmail.com",url:"https://github.com/anthony-colpron"}];var license="GPL-2.0-or-later";var scripts={test:"wtr",prebuild:"rimraf ./dist",build:"rollup -c","prebuild:types":"rimraf ./types","build:types":"tsc -p ./tsconfig.prod.json && tsc-alias","build:cem":"npx cem analyze --config cem.config.mjs",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"rollup -c -w --environment NODE_ENV:development","lint:js":"eslint","lint:js:fix":"eslint --fix","lint:css":"npx stylelint **/*.scss","lint:css:fix":"npx stylelint **/*.scss --fix","lint:pkg":"npmPkgJsonLint .","lint:pkg:fix":"npmPkgJsonLint . --fix"};var dependencies={fflate:"^0.8.2","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.10.3","@eslint/compat":"^1.2.2","@eslint/eslintrc":"^3.1.0","@eslint/js":"^9.13.0","@esm-bundle/chai":"4.3.4-fix.0","@open-wc/testing":"^4.0.0","@rollup/plugin-commonjs":"^28.0.1","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.3.0","@rollup/plugin-typescript":"^11.1.6","@swc/core":"^1.7.40","@types/mocha":"^10.0.9","@types/node":"^22.8.4","@typescript-eslint/eslint-plugin":"^8.12.2","@typescript-eslint/parser":"^8.12.2","@web/dev-server-esbuild":"^1.0.2","@web/dev-server-import-maps":"^0.2.1","@web/dev-server-rollup":"^0.6.4","@web/test-runner":"^0.19.0","@web/test-runner-playwright":"^0.11.0",autoprefixer:"^10.4.20",esbuild:"^0.24.0","esbuild-sass-plugin":"^3.3.1",eslint:"^9.13.0","eslint-config-prettier":"^9.1.0","eslint-import-resolver-typescript":"^3.6.3","eslint-plugin-import":"^2.31.0","eslint-plugin-jsdoc":"^48.11.0","eslint-plugin-perfectionist":"^3.9.1","eslint-plugin-prettier":"^5.2.1",globals:"^15.11.0","npm-package-json-lint":"^8.0.0","npm-package-json-lint-config-default":"^7.0.1","postcss-flexbugs-fixes":"^5.0.2",prettier:"^3.3.3",rimraf:"^6.0.1",rollup:"^4.24.3","rollup-plugin-dts":"^6.1.1","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.1","rollup-plugin-swc3":"^0.12.1","rollup-plugin-typescript-paths":"^1.5.0",sass:"^1.80.5",stylelint:"^16.10.0","stylelint-config-standard-scss":"^13.1.0","tsc-alias":"^1.8.10",tslib:"^2.8.0",typescript:"^5.6.3"};var browserslist={production:[">0.3%","not dead","not op_mini all"],development:["last 1 chrome version","last 1 firefox version","last 1 safari version"]};var customElements$1="custom-elements.json";var files=["custom-elements.json","dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","svg","vector","player"];var publishConfig={access:"public"};var engines={node:">= 8.17.0"};var funding={type:"paypal",url:"https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"};var pkg = {$schema:$schema,name:name,version:version,description:description,exports:exports$1,main:main,unpkg:unpkg,module:module$1,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,contributors:contributors,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,browserslist:browserslist,customElements:customElements$1,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
 
 var css_248z = "* {\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  display: block;\n  width: 100%;\n  height: 100%;\n}\n:host .main {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n}\n:host .animation {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  margin: 0;\n  padding: 0;\n}\n:host [data-controls=true] .animation {\n  height: calc(100% - 35px);\n}\n:host .animation-container {\n  position: relative;\n}\n:host .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:host .popover::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:host .error {\n  display: flex;\n  margin: auto;\n  justify-content: center;\n  height: 100%;\n  align-items: center;\n}\n:host .error svg {\n  width: 100%;\n  height: auto;\n}\n:host .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:host .toolbar.has-error {\n  pointer-events: none;\n  opacity: 0.5;\n}\n:host .toolbar 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:host .toolbar button:not([hidden]) {\n  display: flex;\n}\n:host .toolbar button:hover {\n  opacity: 1;\n}\n:host .toolbar button[data-active=true] {\n  opacity: 1;\n  fill: var(--lottie-player-toolbar-icon-active-color);\n}\n:host .toolbar button:disabled {\n  opacity: 0.5;\n}\n:host .toolbar button:focus {\n  outline: 0;\n}\n:host .toolbar button svg {\n  pointer-events: none;\n}\n:host .toolbar button svg > * {\n  fill: inherit;\n}\n:host .toolbar button.disabled svg {\n  display: none;\n}\n:host .progress-container {\n  position: relative;\n  width: 100%;\n}\n:host .progress-container.simple {\n  margin-right: 12px;\n}\n:host .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  /* background-color: var(--lottie-player-seeker-track-color); */\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:host .seeker::-webkit-slider-runnable-track, :host .seeker::-webkit-slider-thumb {\n  appearance: none;\n  outline: none;\n}\n:host .seeker::-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:host .seeker:hover::-webkit-slider-thumb, :host .seeker:focus::-webkit-slider-thumb {\n  transform: scale(1);\n}\n:host .seeker::-moz-range-progress {\n  background-color: var(--lottie-player-seeker-thumb-color);\n  height: 5px;\n  border-radius: 3px;\n}\n:host .seeker::-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:host .seeker:hover::-moz-range-thumb, :host .seeker:focus::-moz-range-thumb {\n  transform: scale(1);\n}\n:host .seeker::-ms-track {\n  width: 100%;\n  height: 5px;\n  cursor: pointer;\n  background: transparent;\n  border-color: transparent;\n  color: transparent;\n}\n:host .seeker::-ms-fill-upper {\n  background: var(--lottie-player-seeker-track-color);\n  border-radius: 3px;\n}\n:host .seeker::-ms-fill-lower {\n  background-color: var(--lottie-player-seeker-thumb-color);\n  border-radius: 3px;\n}\n:host .seeker::-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:host .seeker:hover::-ms-thumb {\n  transform: scale(1);\n}\n:host .seeker:focus::-ms-thumb {\n  transform: scale(1);\n}\n:host .seeker:focus::-ms-fill-lower, :host .seeker:focus::-ms-fill-upper {\n  background: var(--lottie-player-seeker-track-color);\n}\n:host 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:host ::-moz-progress-bar {\n  background-color: var(--lottie-player-seeker-thumb-color);\n}\n:host ::-webkit-progress-inner-element {\n  border-radius: 3px;\n  overflow: hidden;\n}\n:host ::-webkit-slider-runnable-track {\n  background-color: transparent;\n}\n:host ::-webkit-progress-value {\n  background-color: var(--lottie-player-seeker-thumb-color);\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\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}";
 
@@ -20612,10 +20613,11 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
             'loop',
             'mode',
             'speed',
+            'src',
             'subframe'
         ];
     }
-    attributeChangedCallback(name, _oldValue, value) {
+    async attributeChangedCallback(name, _oldValue, value) {
         if (!this._lottieInstance) {
             return;
         }
@@ -20678,6 +20680,9 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
                 this.setSpeed(val);
             }
         }
+        if (name === 'src') {
+            await this.load(value);
+        }
         if (name === 'subframe') {
             this.setSubframe(value === '' || Boolean(value));
         }
@@ -20903,6 +20908,9 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         }
         return false;
     }
+    getMultiAnimationSettings() {
+        return this._multiAnimationSettings;
+    }
     setMultiAnimationSettings(settings) {
         if (!this._lottieInstance) {
             return;
@@ -20915,6 +20923,9 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         }
         this._segment = segment;
     }
+    getSegment() {
+        return this._segment;
+    }
     _getOptions() {
         if (!this._container) {
             throw new Error('Container not rendered');

package/dist/esm/index.js

@@ -20467,13 +20467,14 @@ function renderPlayer() {
 }
 
 function renderControls() {
-    if (!this.controls) {
-        return;
-    }
     const slot = this.shadow.querySelector('slot[name=controls]');
     if (!slot) {
         return;
     }
+    if (!this.controls) {
+        slot.innerHTML = '';
+        return;
+    }
     slot.innerHTML = `<div class="lottie-controls toolbar ${this.playerState === PlayerState.Error ? 'has-error' : ''}" aria-label="Lottie Animation controls"><button class="togglePlay" data-active="false" aria-label="Toggle Play/Pause"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z"/></svg></button> <button class="stop" data-active="true" aria-label="Stop"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M6 6h12v12H6V6z"/></svg></button> <button class="prev" aria-label="Previous animation" hidden><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.9 18.2 8.1 12l9.8-6.2v12.4zm-10.3 0H6.1V5.8h1.5v12.4z"/></svg></button> <button class="next" aria-label="Next animation" hidden><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m6.1 5.8 9.8 6.2-9.8 6.2V5.8zM16.4 5.8h1.5v12.4h-1.5z"/></svg></button><form class="progress-container${this.simple ? ' simple' : ''}"><input class="seeker" type="range" min="0" max="100" step="1" value="${this._seeker.toString()}" aria-valuemin="0" aria-valuemax="100" role="slider" 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"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"/></svg></button> <button class="toggleBoomerang" data-active="${this.mode === PlayMode.Bounce}" aria-label="Toggle boomerang" tabindex="0"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m11.8 13.2-.3.3c-.5.5-1.1 1.1-1.7 1.5-.5.4-1 .6-1.5.8-.5.2-1.1.3-1.6.3s-1-.1-1.5-.3c-.6-.2-1-.5-1.4-1-.5-.6-.8-1.2-.9-1.9-.2-.9-.1-1.8.3-2.6.3-.7.8-1.2 1.3-1.6.3-.2.6-.4 1-.5.2-.2.5-.2.8-.3.3 0 .7-.1 1 0 .3 0 .6.1.9.2.9.3 1.7.9 2.4 1.5.4.4.8.7 1.1 1.1l.1.1.4-.4c.6-.6 1.2-1.2 1.9-1.6.5-.3 1-.6 1.5-.7.4-.1.7-.2 1-.2h.9c1 .1 1.9.5 2.6 1.4.4.5.7 1.1.8 1.8.2.9.1 1.7-.2 2.5-.4.9-1 1.5-1.8 2-.4.2-.7.4-1.1.4-.4.1-.8.1-1.2.1-.5 0-.9-.1-1.3-.3-.8-.3-1.5-.9-2.1-1.5-.4-.4-.8-.7-1.1-1.1h-.3zm-1.1-1.1c-.1-.1-.1-.1 0 0-.3-.3-.6-.6-.8-.9-.5-.5-1-.9-1.6-1.2-.4-.3-.8-.4-1.3-.4-.4 0-.8 0-1.1.2-.5.2-.9.6-1.1 1-.2.3-.3.7-.3 1.1 0 .3 0 .6.1.9.1.5.4.9.8 1.2.5.4 1.1.5 1.7.5.5 0 1-.2 1.5-.5.6-.4 1.1-.8 1.6-1.3.1-.3.3-.5.5-.6zM13 12c.5.5 1 1 1.5 1.4.5.5 1.1.9 1.9 1 .4.1.8 0 1.2-.1.3-.1.6-.3.9-.5.4-.4.7-.9.8-1.4.1-.5 0-.9-.1-1.4-.3-.8-.8-1.2-1.7-1.4-.4-.1-.8-.1-1.2 0-.5.1-1 .4-1.4.7-.5.4-1 .8-1.4 1.2-.2.2-.4.3-.5.5z"/></svg></button> <button class="toggleSettings" aria-label="Settings" aria-haspopup="true" aria-expanded="${!!this._isSettingsOpen}" aria-controls="${this._identifier}-settings"><svg width="24" height="24" aria-hidden="true" focusable="false"><circle cx="12" cy="5.4" r="2.5"/><circle cx="12" cy="12" r="2.5"/><circle cx="12" cy="18.6" r="2.5"/></svg></button><div id="${this._identifier}-settings" class="popover" hidden><button class="convert" aria-label="Convert JSON animation to dotLottie format" hidden><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"/></svg> Convert to dotLottie</button> <button class="snapshot" aria-label="Download still image"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M16.8 10.8 12 15.6l-4.8-4.8h3V3.6h3.6v7.2h3zM12 15.6H3v4.8h18v-4.8h-9zm7.8 2.4h-2.4v-1.2h2.4V18z"/></svg> Download still image</button></div>`}</div>`;
     const togglePlay = this.shadow.querySelector('.togglePlay');
     if (togglePlay instanceof HTMLButtonElement) {
@@ -20571,7 +20572,7 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
     }
 };
 
-var $schema="https://json.schemastore.org/package";var name="@aarsteinmedia/dotlottie-player";var version="4.0.0";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports={".":{"import":"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}};var main="./dist/esm/index.js";var unpkg="./dist/index.js";var module="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"git+https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"};var bugs="https://github.com/aarsteinmedia/dotlottie-player/issues";var author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"};var contributors=[{name:"Anthony Colpron",email:"anthonycolpron@gmail.com",url:"https://github.com/anthony-colpron"}];var license="GPL-2.0-or-later";var scripts={test:"wtr",prebuild:"rimraf ./dist",build:"rollup -c","prebuild:types":"rimraf ./types","build:types":"tsc -p ./tsconfig.prod.json && tsc-alias","build:cem":"npx cem analyze --config cem.config.mjs",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"rollup -c -w --environment NODE_ENV:development","lint:js":"eslint","lint:js:fix":"eslint --fix","lint:css":"npx stylelint **/*.scss","lint:css:fix":"npx stylelint **/*.scss --fix","lint:pkg":"npmPkgJsonLint .","lint:pkg:fix":"npmPkgJsonLint . --fix"};var dependencies={fflate:"^0.8.2","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.10.3","@eslint/compat":"^1.2.1","@eslint/eslintrc":"^3.1.0","@eslint/js":"^9.13.0","@esm-bundle/chai":"4.3.4-fix.0","@open-wc/testing":"^4.0.0","@rollup/plugin-commonjs":"^28.0.1","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.3.0","@rollup/plugin-typescript":"^11.1.6","@swc/core":"^1.7.39","@types/mocha":"^10.0.9","@types/node":"^22.7.9","@typescript-eslint/eslint-plugin":"^8.11.0","@typescript-eslint/parser":"^8.11.0","@web/dev-server-esbuild":"^1.0.2","@web/dev-server-import-maps":"^0.2.1","@web/dev-server-rollup":"^0.6.4","@web/test-runner":"^0.19.0","@web/test-runner-playwright":"^0.11.0",autoprefixer:"^10.4.20",esbuild:"^0.24.0","esbuild-sass-plugin":"^3.3.1",eslint:"^9.13.0","eslint-config-prettier":"^9.1.0","eslint-import-resolver-typescript":"^3.6.3","eslint-plugin-import":"^2.31.0","eslint-plugin-jsdoc":"^48.11.0","eslint-plugin-perfectionist":"^3.9.1","eslint-plugin-prettier":"^5.2.1",globals:"^15.11.0","npm-package-json-lint":"^8.0.0","npm-package-json-lint-config-default":"^7.0.1","postcss-flexbugs-fixes":"^5.0.2",prettier:"^3.3.3",rimraf:"^6.0.1",rollup:"^4.24.0","rollup-plugin-dts":"^6.1.1","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.1","rollup-plugin-swc3":"^0.12.1","rollup-plugin-typescript-paths":"^1.5.0",sass:"^1.80.4",stylelint:"^16.10.0","stylelint-config-standard-scss":"^13.1.0","tsc-alias":"^1.8.10",tslib:"^2.8.0",typescript:"^5.6.3"};var browserslist={production:[">0.3%","not dead","not op_mini all"],development:["last 1 chrome version","last 1 firefox version","last 1 safari version"]};var customElements$1="custom-elements.json";var files=["custom-elements.json","dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","svg","vector","player"];var publishConfig={access:"public"};var engines={node:">= 8.17.0"};var funding={type:"paypal",url:"https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"};var pkg = {$schema:$schema,name:name,version:version,description:description,exports:exports,main:main,unpkg:unpkg,module:module,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,contributors:contributors,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,browserslist:browserslist,customElements:customElements$1,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
+var $schema="https://json.schemastore.org/package";var name="@aarsteinmedia/dotlottie-player";var version="4.0.2";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports={".":{"import":"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}};var main="./dist/esm/index.js";var unpkg="./dist/index.js";var module="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"git+https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"};var bugs="https://github.com/aarsteinmedia/dotlottie-player/issues";var author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"};var contributors=[{name:"Anthony Colpron",email:"anthonycolpron@gmail.com",url:"https://github.com/anthony-colpron"}];var license="GPL-2.0-or-later";var scripts={test:"wtr",prebuild:"rimraf ./dist",build:"rollup -c","prebuild:types":"rimraf ./types","build:types":"tsc -p ./tsconfig.prod.json && tsc-alias","build:cem":"npx cem analyze --config cem.config.mjs",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"rollup -c -w --environment NODE_ENV:development","lint:js":"eslint","lint:js:fix":"eslint --fix","lint:css":"npx stylelint **/*.scss","lint:css:fix":"npx stylelint **/*.scss --fix","lint:pkg":"npmPkgJsonLint .","lint:pkg:fix":"npmPkgJsonLint . --fix"};var dependencies={fflate:"^0.8.2","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.10.3","@eslint/compat":"^1.2.2","@eslint/eslintrc":"^3.1.0","@eslint/js":"^9.13.0","@esm-bundle/chai":"4.3.4-fix.0","@open-wc/testing":"^4.0.0","@rollup/plugin-commonjs":"^28.0.1","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.3.0","@rollup/plugin-typescript":"^11.1.6","@swc/core":"^1.7.40","@types/mocha":"^10.0.9","@types/node":"^22.8.4","@typescript-eslint/eslint-plugin":"^8.12.2","@typescript-eslint/parser":"^8.12.2","@web/dev-server-esbuild":"^1.0.2","@web/dev-server-import-maps":"^0.2.1","@web/dev-server-rollup":"^0.6.4","@web/test-runner":"^0.19.0","@web/test-runner-playwright":"^0.11.0",autoprefixer:"^10.4.20",esbuild:"^0.24.0","esbuild-sass-plugin":"^3.3.1",eslint:"^9.13.0","eslint-config-prettier":"^9.1.0","eslint-import-resolver-typescript":"^3.6.3","eslint-plugin-import":"^2.31.0","eslint-plugin-jsdoc":"^48.11.0","eslint-plugin-perfectionist":"^3.9.1","eslint-plugin-prettier":"^5.2.1",globals:"^15.11.0","npm-package-json-lint":"^8.0.0","npm-package-json-lint-config-default":"^7.0.1","postcss-flexbugs-fixes":"^5.0.2",prettier:"^3.3.3",rimraf:"^6.0.1",rollup:"^4.24.3","rollup-plugin-dts":"^6.1.1","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.1","rollup-plugin-swc3":"^0.12.1","rollup-plugin-typescript-paths":"^1.5.0",sass:"^1.80.5",stylelint:"^16.10.0","stylelint-config-standard-scss":"^13.1.0","tsc-alias":"^1.8.10",tslib:"^2.8.0",typescript:"^5.6.3"};var browserslist={production:[">0.3%","not dead","not op_mini all"],development:["last 1 chrome version","last 1 firefox version","last 1 safari version"]};var customElements$1="custom-elements.json";var files=["custom-elements.json","dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","svg","vector","player"];var publishConfig={access:"public"};var engines={node:">= 8.17.0"};var funding={type:"paypal",url:"https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"};var pkg = {$schema:$schema,name:name,version:version,description:description,exports:exports,main:main,unpkg:unpkg,module:module,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,contributors:contributors,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,browserslist:browserslist,customElements:customElements$1,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
 
 var css_248z = "* {\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  display: block;\n  width: 100%;\n  height: 100%;\n}\n:host .main {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n}\n:host .animation {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  margin: 0;\n  padding: 0;\n}\n:host [data-controls=true] .animation {\n  height: calc(100% - 35px);\n}\n:host .animation-container {\n  position: relative;\n}\n:host .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:host .popover::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:host .error {\n  display: flex;\n  margin: auto;\n  justify-content: center;\n  height: 100%;\n  align-items: center;\n}\n:host .error svg {\n  width: 100%;\n  height: auto;\n}\n:host .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:host .toolbar.has-error {\n  pointer-events: none;\n  opacity: 0.5;\n}\n:host .toolbar 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:host .toolbar button:not([hidden]) {\n  display: flex;\n}\n:host .toolbar button:hover {\n  opacity: 1;\n}\n:host .toolbar button[data-active=true] {\n  opacity: 1;\n  fill: var(--lottie-player-toolbar-icon-active-color);\n}\n:host .toolbar button:disabled {\n  opacity: 0.5;\n}\n:host .toolbar button:focus {\n  outline: 0;\n}\n:host .toolbar button svg {\n  pointer-events: none;\n}\n:host .toolbar button svg > * {\n  fill: inherit;\n}\n:host .toolbar button.disabled svg {\n  display: none;\n}\n:host .progress-container {\n  position: relative;\n  width: 100%;\n}\n:host .progress-container.simple {\n  margin-right: 12px;\n}\n:host .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  /* background-color: var(--lottie-player-seeker-track-color); */\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:host .seeker::-webkit-slider-runnable-track, :host .seeker::-webkit-slider-thumb {\n  appearance: none;\n  outline: none;\n}\n:host .seeker::-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:host .seeker:hover::-webkit-slider-thumb, :host .seeker:focus::-webkit-slider-thumb {\n  transform: scale(1);\n}\n:host .seeker::-moz-range-progress {\n  background-color: var(--lottie-player-seeker-thumb-color);\n  height: 5px;\n  border-radius: 3px;\n}\n:host .seeker::-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:host .seeker:hover::-moz-range-thumb, :host .seeker:focus::-moz-range-thumb {\n  transform: scale(1);\n}\n:host .seeker::-ms-track {\n  width: 100%;\n  height: 5px;\n  cursor: pointer;\n  background: transparent;\n  border-color: transparent;\n  color: transparent;\n}\n:host .seeker::-ms-fill-upper {\n  background: var(--lottie-player-seeker-track-color);\n  border-radius: 3px;\n}\n:host .seeker::-ms-fill-lower {\n  background-color: var(--lottie-player-seeker-thumb-color);\n  border-radius: 3px;\n}\n:host .seeker::-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:host .seeker:hover::-ms-thumb {\n  transform: scale(1);\n}\n:host .seeker:focus::-ms-thumb {\n  transform: scale(1);\n}\n:host .seeker:focus::-ms-fill-lower, :host .seeker:focus::-ms-fill-upper {\n  background: var(--lottie-player-seeker-track-color);\n}\n:host 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:host ::-moz-progress-bar {\n  background-color: var(--lottie-player-seeker-thumb-color);\n}\n:host ::-webkit-progress-inner-element {\n  border-radius: 3px;\n  overflow: hidden;\n}\n:host ::-webkit-slider-runnable-track {\n  background-color: transparent;\n}\n:host ::-webkit-progress-value {\n  background-color: var(--lottie-player-seeker-thumb-color);\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\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}";
 
@@ -20608,10 +20609,11 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
             'loop',
             'mode',
             'speed',
+            'src',
             'subframe'
         ];
     }
-    attributeChangedCallback(name, _oldValue, value) {
+    async attributeChangedCallback(name, _oldValue, value) {
         if (!this._lottieInstance) {
             return;
         }
@@ -20674,6 +20676,9 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
                 this.setSpeed(val);
             }
         }
+        if (name === 'src') {
+            await this.load(value);
+        }
         if (name === 'subframe') {
             this.setSubframe(value === '' || Boolean(value));
         }
@@ -20899,6 +20904,9 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         }
         return false;
     }
+    getMultiAnimationSettings() {
+        return this._multiAnimationSettings;
+    }
     setMultiAnimationSettings(settings) {
         if (!this._lottieInstance) {
             return;
@@ -20911,6 +20919,9 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         }
         this._segment = segment;
     }
+    getSegment() {
+        return this._segment;
+    }
     _getOptions() {
         if (!this._container) {
             throw new Error('Container not rendered');

package/dist/index.d.ts

@@ -160,7 +160,7 @@ declare class DotLottiePlayer extends EnhancedElement {
     protected _renderControls: typeof renderControls;
     protected _render: typeof renderPlayer;
     static get observedAttributes(): string[];
-    attributeChangedCallback(name: string, _oldValue: unknown, value: string): void;
+    attributeChangedCallback(name: string, _oldValue: unknown, value: string): Promise<void>;
     static get observedProperties(): string[];
     propertyChangedCallback(name: string, _oldValue: unknown, value: unknown): void;
     set animateOnScroll(value: AnimateOnScroll);
@@ -200,9 +200,11 @@ declare class DotLottiePlayer extends EnhancedElement {
     set subframe(value: Subframe);
     get subframe(): Subframe;
     private _multiAnimationSettings;
+    getMultiAnimationSettings(): AnimationSettings[];
     setMultiAnimationSettings(settings: AnimationSettings[]): void;
     private _segment?;
     setSegment(segment: AnimationSegment): void;
+    getSegment(): Lottie.AnimationSegment | undefined;
     protected _container: Element | null;
     playerState?: PlayerState;
     protected _isSettingsOpen: boolean;