@aarsteinmedia/dotlottie-player 6.4.6 → 6.4.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +3 -3
- package/dist/canvas.js +2 -2
- package/dist/chunks/{DotLottiePlayerBase-DlP7nSA9.js → DotLottiePlayerBase-DdpA5NST.js} +1 -2
- package/dist/full.js +2 -2
- package/dist/light.js +2 -2
- package/dist/svg.js +2 -2
- package/dist/unpkg-canvas.js +2 -2
- package/dist/unpkg-full.js +7 -7
- package/dist/unpkg-light.js +6 -6
- package/dist/unpkg-svg.js +2 -2
- package/package.json +3 -3
package/dist/unpkg-svg.js
CHANGED
|
@@ -67,6 +67,6 @@
|
|
|
67
67
|
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
68
68
|
<path d="M6 6h12v12H6V6z" />
|
|
69
69
|
</svg>
|
|
70
|
-
`;var or=((Z={}).Contain="contain",Z.Cover="cover",Z.Fill="fill",Z.None="none",Z.ScaleDown="scale-down",Z),oa=((K={}).Pause="pause",K.Reverse="reverse",K.Stop="stop",K.Void="void",K),on=((Q={}).Completed="completed",Q.Destroyed="destroyed",Q.Error="error",Q.Frozen="frozen",Q.Loading="loading",Q.Paused="paused",Q.Playing="playing",Q.Stopped="stopped",Q);let oo="dotlottie-player";function oh(t,e){let s=e===on.Playing||e===on.Paused;t.dataset.active=s.toString(),t.innerHTML=e===on.Playing?n7:ot}var ol=Object.freeze({__proto__:null,renderControls:function(){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===on.Error?"has-error":""}" aria-label="Lottie Animation controls"><button class="togglePlay" data-active="${this.autoplay}" aria-label="Toggle Play/Pause">${ot}</button> <button class="stop" data-active="${!this.autoplay}" aria-label="Stop">${oi}</button> <button class="prev" aria-label="Previous animation" hidden="false">${oe}</button> <button class="next" aria-label="Next animation" hidden>${n9}</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">${n8}</button> <button class="toggleBoomerang" data-active="${this.mode===ts.Bounce}" aria-label="Toggle boomerang" tabindex="0">${n5}</button> <button class="toggleSettings" aria-label="Settings" aria-haspopup="true" aria-expanded="${this._isSettingsOpen}" aria-controls="${this._identifier}-settings">${os}</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>${n4} ${this.isDotLottie?"Convert to JSON":"Convert to dotLottie"}</button> <button class="snapshot" aria-label="Download still image">${n6} 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=async()=>{s.disabled=!0;try{let{convert:t}=await (n2?Promise.resolve(n2):n3=n3??(async()=>{let{addAnimation:t,convert:e}=await Promise.resolve().then(function(){return nK});return n2={addAnimation:t,convert:e},{addAnimation:t,convert:e}})());await t({isDotLottie:this.isDotLottie,manifest:this.getManifest(),src:this.src||this.source})}finally{s.disabled=!1}});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)}},updatePlayPauseButton:oh});async function op(){if(!this.shadow||!this.template)throw Error("No Shadow Element or Template");let t="";if(this.description||this.controls){let e=this.description?document.documentElement.lang:"en";t=`lang="${e}"`}this.template.innerHTML=`<div class="animation-container main" data-controls="${this.controls??!1}" ${t}
|
|
70
|
+
`;var or=((Z={}).Contain="contain",Z.Cover="cover",Z.Fill="fill",Z.None="none",Z.ScaleDown="scale-down",Z),oa=((K={}).Pause="pause",K.Reverse="reverse",K.Stop="stop",K.Void="void",K),on=((Q={}).Completed="completed",Q.Destroyed="destroyed",Q.Error="error",Q.Frozen="frozen",Q.Loading="loading",Q.Paused="paused",Q.Playing="playing",Q.Stopped="stopped",Q);let oo="dotlottie-player";function oh(t,e){let s=e===on.Playing||e===on.Paused;t.dataset.active=s.toString(),t.innerHTML=e===on.Playing?n7:ot}var ol=Object.freeze({__proto__:null,renderControls:function(){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===on.Error?"has-error":""}" aria-label="Lottie Animation controls"><button class="togglePlay" data-active="${this.autoplay}" aria-label="Toggle Play/Pause">${ot}</button> <button class="stop" data-active="${!this.autoplay}" aria-label="Stop">${oi}</button> <button class="prev" aria-label="Previous animation" hidden="false">${oe}</button> <button class="next" aria-label="Next animation" hidden>${n9}</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">${n8}</button> <button class="toggleBoomerang" data-active="${this.mode===ts.Bounce}" aria-label="Toggle boomerang" tabindex="0">${n5}</button> <button class="toggleSettings" aria-label="Settings" aria-haspopup="true" aria-expanded="${this._isSettingsOpen}" aria-controls="${this._identifier}-settings">${os}</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>${n4} ${this.isDotLottie?"Convert to JSON":"Convert to dotLottie"}</button> <button class="snapshot" aria-label="Download still image">${n6} 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=async()=>{s.disabled=!0;try{let{convert:t}=await (n2?Promise.resolve(n2):n3=n3??(async()=>{let{addAnimation:t,convert:e}=await Promise.resolve().then(function(){return nK});return n2={addAnimation:t,convert:e},{addAnimation:t,convert:e}})());await t({isDotLottie:this.isDotLottie,manifest:this.getManifest(),src:this.src||this.source})}finally{s.disabled=!1}});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)}},updatePlayPauseButton:oh});async function op(){if(!this.shadow||!this.template)throw Error("No Shadow Element or Template");let t="";if(this.description||this.controls){let e=this.description?document.documentElement.lang:"en";t=`lang="${e}"`}this.template.innerHTML=`<div class="animation-container main" data-controls="${this.controls??!1}" ${t}><figure class="animation" style="background:${this.background}" ${this.description?`
|
|
71
71
|
aria-label="${this.description}"
|
|
72
|
-
`:""}></figure><slot name="controls"></slot></div>`,this.shadow.adoptedStyleSheets=[await oy.styles()],this.shadow.appendChild(this.template.content.cloneNode(!0))}let om=t=>{let e={message:"Unknown error",status:b?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},oc=(t,e)=>null!=t&&Object.keys(e).filter(t=>Number.isNaN(Number(t))).some(s=>e[s]===t),od=t=>["v","ip","op","layers","fr","w","h"].every(e=>Object.hasOwn(t,e)),ou=t=>null!==t&&["true","","1"].includes(t),of="Method is not implemented",og=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 & 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 .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 & *::-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};class oy extends n1{static get observedAttributes(){return["animateOnScroll","autoplay","controls","direction","hover","loop","mode","playOnClick","playOnVisible","selector","speed","src","subframe"]}static get observedProperties(){return["playerState","_isSettingsOpen","_seeker","_currentAnimation","_animations"]}static get styles(){return og}set animateOnScroll(t){this.setAttribute("animateOnScroll",(!!t).toString())}get animateOnScroll(){return ou(this.getAttribute("animateOnScroll"))}get animations(){return this._animations}set autoplay(t){this.setAttribute("autoplay",(!!t).toString())}get autoplay(){return ou(this.getAttribute("autoplay"))}set background(t){this.setAttribute("background",t)}get background(){return this.getAttribute("background")||"transparent"}set controls(t){this.setAttribute("controls",(!!t).toString())}get controls(){return ou(this.getAttribute("controls"))}set count(t){this.setAttribute("count",t.toString())}get count(){let t=this.getAttribute("count");return t?Number(t):0}get currentAnimation(){return this._currentAnimation}set delay(t){this.setAttribute("delay",t.toString())}get delay(){let t=this.getAttribute("delay");return t?Number(t):0}set description(t){t&&this.setAttribute("description",t)}get description(){return this.getAttribute("description")}set direction(t){this.setAttribute("direction",t.toString())}get direction(){let t=Number(this.getAttribute("direction"));return -1===t?t:1}set dontFreezeOnBlur(t){this.setAttribute("dontFreezeOnBlur",(!!t).toString())}get dontFreezeOnBlur(){return ou(this.getAttribute("dontFreezeOnBlur"))}set hover(t){this.setAttribute("hover",(!!t).toString())}get hover(){return ou(this.getAttribute("hover"))}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(){return ou(this.getAttribute("loop"))}set mode(t){this.setAttribute("mode",t)}get mode(){let t=this.getAttribute("mode");return t===ts.Bounce?t:ts.Normal}set mouseout(t){this.setAttribute("mouseout",t)}get mouseout(){let t=this.getAttribute("mouseout");switch(t){case oa.Void:case oa.Pause:case oa.Reverse:return t;default:return oa.Stop}}set objectfit(t){this.setAttribute("objectfit",t)}get objectfit(){let t=this.getAttribute("objectfit");return oc(t,or)?t:or.Contain}set once(t){this.setAttribute("once",(!!t).toString())}get once(){return ou(this.getAttribute("once"))}set playOnClick(t){this.setAttribute("playOnClick",(!!t).toString())}get playOnClick(){return ou(this.getAttribute("playOnClick"))}set playOnVisible(t){this.setAttribute("playOnVisible",(!!t).toString())}get playOnVisible(){return ou(this.getAttribute("playOnVisible"))}set preserveAspectRatio(t){this.setAttribute("preserveAspectRatio",t||tr.Contain)}get preserveAspectRatio(){let t=this.getAttribute("preserveAspectRatio");return oc(t,tr)?t:null}set quiet(t){this.setAttribute("quiet",(!!t).toString())}get quiet(){return ou(this.getAttribute("quiet"))}set renderer(t){this.setAttribute("renderer",t)}get renderer(){let t=this.getAttribute("renderer");return t===ta.Canvas||t===ta.HTML?t:ta.SVG}set selector(t){t?this.setAttribute("selector",t):this.removeAttribute("selector")}get selector(){return this.getAttribute("selector")}set simple(t){this.setAttribute("simple",(!!t).toString())}get simple(){return ou(this.getAttribute("simple"))}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(){return ou(this.getAttribute("subframe"))}constructor(){super(),this.isLight=!1,this.playerState=on.Loading,this._container=null,this._DOMRect=null,this._errorMessage="Something went wrong",this._identifier=this.id||S(),this._isSettingsOpen=!1,this._playerState={count:0,loaded:!1,prev:on.Loading,scrollTimeout:null,scrollY:0,visible:!1},this._render=op,this._seeker=0,this._animations=[],this._controlsLoadId=0,this._currentAnimation=0,this._errorLoadId=0,this._isBounce=!1,this._isDotLottie=!1,this._lottieInstance=null,this._multiAnimationSettings=[],this._renderControls=async()=>{let t=this.shadow?.querySelector("slot[name=controls]");if(!t)return;if(!this.controls){t.innerHTML="";return}let e=++this._controlsLoadId,{renderControls:i}=await (s=s??Promise.resolve().then(function(){return ol}));e===this._controlsLoadId&&i.call(this)},this._complete=this._complete.bind(this),this._dataFailed=this._dataFailed.bind(this),this._dataReady=this._dataReady.bind(this),this._DOMLoaded=this._DOMLoaded.bind(this),this._enterFrame=this._enterFrame.bind(this),this._freeze=this._freeze.bind(this),this._handleBlur=this._handleBlur.bind(this),this._handleClick=this._handleClick.bind(this),this._handleScroll=this._handleScroll.bind(this),this._handleSeekChange=this._handleSeekChange.bind(this),this._handleWindowBlur=this._handleWindowBlur.bind(this),this._loopComplete=this._loopComplete.bind(this),this._mouseEnter=this._mouseEnter.bind(this),this._mouseLeave=this._mouseLeave.bind(this),this._onVisibilityChange=this._onVisibilityChange.bind(this),this._switchInstance=this._switchInstance.bind(this),this._handleSettingsClick=this._handleSettingsClick.bind(this),this.togglePlay=this.togglePlay.bind(this),this.stop=this.stop.bind(this),this.prev=this.prev.bind(this),this.next=this.next.bind(this),this.snapshot=this.snapshot.bind(this),this.toggleLoop=this.toggleLoop.bind(this),this.toggleBoomerang=this.toggleBoomerang.bind(this),this.destroy=this.destroy.bind(this),this.template=document.createElement("template"),this.shadow=this.attachShadow({mode:"open"})}addAnimation(t){throw Error(of)}async attributeChangedCallback(t,e,s){if(this._lottieInstance&&this.shadow&&this._container)switch(t){case"animateOnScroll":if(""===s||s){this._lottieInstance.autoplay=!1,addEventListener("scroll",this._handleScroll,{capture:!0,passive:!0});return}removeEventListener("scroll",this._handleScroll,!0);break;case"autoplay":if(this.animateOnScroll||this.playOnVisible)return;if(""===s||s)return void this.play();this.stop();break;case"controls":await this._renderControls();break;case"direction":if(-1===Number(s))return void this.setDirection(-1);this.setDirection(1);break;case"hover":if(""===s||s){this._container.addEventListener("mouseenter",this._mouseEnter),this._container.addEventListener("mouseleave",this._mouseLeave);return}this._container.removeEventListener("mouseenter",this._mouseEnter),this._container.removeEventListener("mouseleave",this._mouseLeave);break;case"loop":{let t=this.shadow.querySelector(".toggleLoop");t instanceof HTMLButtonElement&&(t.dataset.active=s),this.setLoop(""===s||!!s);break}case"mode":{let t=this.shadow.querySelector(".toggleBoomerang");if(!oc(s,ts))break;t instanceof HTMLButtonElement&&(t.dataset.active=(s===ts.Bounce).toString()),this._isBounce=s===ts.Bounce;break}case"playOnClick":if(""===s||s){this._lottieInstance.autoplay=!1,this._container.addEventListener("click",this._handleClick);return}this._container.removeEventListener("click",this._handleClick);break;case"playOnVisible":(""===s||s)&&(this._lottieInstance.autoplay=!1);break;case"selector":{let t=document.getElementById(this.selector??"");t?.addEventListener("click",this._handleClick);break}case"speed":{let t=Number(s);t&&!isNaN(t)&&this.setSpeed(t);break}case"src":await this.load(s);break;case"subframe":this.setSubframe(""===s||!!s)}}connectedCallback(){super.connectedCallback();try{(async()=>{if(await this._render(),!this.shadow)throw Error("Missing Shadow element");this._container=this.shadow.querySelector(".animation"),await this.load(this.src),void 0!==document.hidden&&document.addEventListener("visibilitychange",this._onVisibilityChange),this._container&&(this._DOMRect=this._container.getBoundingClientRect()),this._addIntersectionObserver(),this.dispatchEvent(new CustomEvent(ti.Rendered))})()}catch(t){this._handleError(t)}}convert(t){throw Error(of)}destroy(){this._lottieInstance?.destroy&&(this.playerState=on.Destroyed,this._lottieInstance.destroy(),this._lottieInstance=null,this.dispatchEvent(new CustomEvent(ti.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 nX(t);if(!e?.every(od))throw Error("Broken or corrupted file");let r=this.parentElement?.querySelector('script[type="application/ld+json"]');if(r){let t=JSON.parse(r.innerHTML);t.selector&&(this.selector=t.selector),t.segment&&this.setSegment(t.segment),t.multiAnimationSettings&&this.setMultiAnimationSettings(t.multiAnimationSettings)}this._isBounce=this.mode===ts.Bounce,this._multiAnimationSettings.length>0&&this._multiAnimationSettings[this._currentAnimation]?.mode&&(this._isBounce=this._multiAnimationSettings[this._currentAnimation]?.mode===ts.Bounce);let a=i?.animations[0];a&&(a.autoplay=!this.animateOnScroll&&!this.playOnVisible&&this.autoplay,a.loop=this.loop),this._isDotLottie=s,this._animations=e,this._manifest=i??{animations:[{autoplay:!this.animateOnScroll&&!this.playOnVisible&&this.autoplay,direction:this.direction,id:S(),loop:this.loop,mode:this.mode,speed:this.speed}]},this._clearPrevious(),this.playerState=on.Stopped,!this.animateOnScroll&&(this.autoplay||this._multiAnimationSettings[this._currentAnimation]?.autoplay||this.playOnVisible)&&(this.playerState=on.Playing),this._lottieInstance=this.loadAnimation({...this._getOptions(),animationData:e[this._currentAnimation]}),this._addEventListeners();let n=this._multiAnimationSettings[this._currentAnimation]?.speed??this.speed,o=this._multiAnimationSettings[this._currentAnimation]?.direction??this.direction;this._lottieInstance.setSpeed(n),this._lottieInstance.setDirection(o),this._lottieInstance.setSubframe(!!this.subframe),(this.autoplay||this.animateOnScroll||this.playOnVisible)&&-1===this.direction&&this.seek("99%"),await this._renderControls()}catch(t){await this._handleError(t)}}loadAnimation(t){throw Error(of)}next(){this._currentAnimation++,this._switchInstance()}pause(){if(!this._lottieInstance)return;this._playerState.prev=this.playerState;let t=!1;try{this._lottieInstance.pause(),this.dispatchEvent(new CustomEvent(ti.Pause))}catch(e){t=!0,console.error(e)}finally{this.playerState=t?on.Error:on.Paused}}play(){if(!this._lottieInstance)return;this._playerState.prev=this.playerState;let t=!1;try{this._lottieInstance.play(),this.dispatchEvent(new CustomEvent(ti.Play))}catch(e){t=!0,console.error(e)}finally{this.playerState=t?on.Error:on.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"),m=this.shadow.querySelector(".snapshot");i instanceof HTMLButtonElement&&r instanceof HTMLButtonElement&&n instanceof HTMLButtonElement&&a instanceof HTMLButtonElement&&o instanceof HTMLInputElement&&h instanceof HTMLProgressElement&&("playerState"===t&&(oh(i,s),r.dataset.active=(s===on.Stopped).toString()),"_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&&m instanceof HTMLButtonElement&&(l.hidden=!s,p.hidden=this.isLight,m.hidden=this.renderer!==ta.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===on.Playing||this.playerState===on.Frozen&&this._playerState.prev===on.Playing){this._lottieInstance.goToAndPlay(s,!0),this.playerState=on.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{if(!this.shadowRoot)throw Error("Unknown error");let s=this.shadowRoot.querySelector(".animation svg");if(!s)throw Error("Could not retrieve animation from DOM");let i=s instanceof Node?new XMLSerializer().serializeToString(s):null;if(!i)throw Error("Could not serialize SVG element");return t&&P(i,{mimeType:"image/svg+xml",name:`${I(this.src||e)}-${((this._seeker??0)+1).toString().padStart(3,"0")}.svg`}),i}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(ti.Stop))}finally{this.playerState=on.Stopped}}}toggleBoomerang(){let t=this._multiAnimationSettings[this._currentAnimation]??{};if(void 0!==t.mode){if(t.mode===ts.Normal){t.mode=ts.Bounce,this._isBounce=!0;return}t.mode=ts.Normal,this._isBounce=!1;return}if(this.mode===ts.Normal){this.mode=ts.Bounce,this._isBounce=!0;return}this.mode=ts.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===on.Playing)return void this.pause();if(this.playerState!==on.Completed)return void this.play();if(this.playerState=on.Playing,this._isBounce){this.setDirection(-1*e),this._lottieInstance.goToAndPlay(t,!0);return}-1===e?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(ti.Freeze))}finally{this.playerState=on.Frozen}}}_handleBlur(){setTimeout(()=>{this._toggleSettings(!1)},200)}_handleClick(){(this.playOnClick||this.selector)&&this.togglePlay()}_handleSeekChange({target:t}){!(!(t instanceof HTMLInputElement)||!this._lottieInstance||isNaN(Number(t.value)))&&this.seek(Math.round(Number(t.value)/100*this._lottieInstance.totalFrames))}_handleSettingsClick({target:t}){this._toggleSettings(),t instanceof HTMLElement&&t.focus()}async _showError(){if(this.playerState!==on.Error)return;let t=this.shadow?.querySelector(".animation"),e=this.shadow?.querySelector("slot[name=controls]");if(e&&(e.innerHTML=""),!(t instanceof HTMLElement))return;let s=++this._errorLoadId,{errorScreen:i}=await (nQ=nQ??Promise.resolve().then(function(){return ov}));s===this._errorLoadId&&(t.innerHTML=i(this._errorMessage))}setOptions(t){throw Error("Method not implemented")}_addEventListeners(){this._toggleEventListeners("add")}_addIntersectionObserver(){if(this._container&&!this._intersectionObserver){if(!("IntersectionObserver"in window)){this._intersectionObserverFallback(),removeEventListener("scroll",this._intersectionObserverFallback,!0),addEventListener("scroll",this._intersectionObserverFallback,{capture:!0,passive:!0});return}this._intersectionObserver=new IntersectionObserver(t=>{let{length:e}=t;for(let s=0;s<e;s++){if(!t[s]?.isIntersecting||document.hidden){this.playerState===on.Playing&&this._freeze(),this._playerState.visible=!1;continue}this.animateOnScroll||this.playOnVisible||this.playerState!==on.Frozen||this.play(),this.playOnVisible&&(this.playerState!==on.Completed||this.once?setTimeout(()=>{this.play()},this.delay):(this.playerState=on.Playing,this._lottieInstance?.goToAndPlay(1===this.direction?0:this._lottieInstance.totalFrames))),!this._playerState.scrollY&&(t[s]?.boundingClientRect.y||0)>0&&(this._playerState.scrollY=scrollY),this._playerState.visible=!0}}),this._intersectionObserver.observe(this._container)}}_clearPrevious(){this._lottieInstance?.destroy();let t=this.shadow?.querySelector(".animation");t&&(t.innerHTML="")}_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=on.Completed,this.dispatchEvent(new CustomEvent(ti.Complete,{detail:{frame:t,seeker:this._seeker}}))}_dataFailed(){this.playerState=on.Error,this.dispatchEvent(new CustomEvent(ti.Error))}_dataReady(){this.dispatchEvent(new CustomEvent(ti.Load))}_DOMLoaded(){this._playerState.loaded=!0,this.dispatchEvent(new CustomEvent(ti.Ready))}_enterFrame(){if(!this._lottieInstance)return;let{currentFrame:t,totalFrames:e}=this._lottieInstance;this._seeker=Math.round(t/e*100),this.dispatchEvent(new CustomEvent(ti.Frame,{detail:{frame:t,seeker:this._seeker}}))}_getOptions(){if(!this._container)throw Error("Container not rendered");let t=this.preserveAspectRatio??(t=>{switch(t){case or.Contain:case or.ScaleDown:return tr.Contain;case or.Cover:return tr.Cover;case or.Fill:return tr.Initial;case or.None:return tr.None;default:return tr.Contain}})(this.objectfit),e=this._multiAnimationSettings.length>0?this._multiAnimationSettings[this._currentAnimation]:void 0,s=this._manifest?.animations[this._currentAnimation],i=!!this.loop;s?.loop!==void 0&&(i=!!s.loop),e?.loop!==void 0&&(i=!!e.loop);let r=!!this.autoplay;s?.autoplay!==void 0&&(r=!!s.autoplay),e?.autoplay!==void 0&&(r=!!e.autoplay),this.animateOnScroll&&(r=!1);let a=this._segment;return this._segment?.every(t=>t>0)&&(a=[this._segment[0]-1,this._segment[1]-1]),this._segment?.some(t=>t<0)&&(a=void 0),this.setOptions({container:this._container,hasAutoplay:r,hasLoop:i,initialSegment:a,preserveAspectRatio:t,rendererType:this.renderer})}async _handleError(t){this.playerState=on.Error,this.quiet||(this._errorMessage=om(t).message,await this._showError()),this.dispatchEvent(new CustomEvent(ti.Error)),console.error(t)}_handleScroll(){if(!this.animateOnScroll||!this._DOMRect||!this._lottieInstance)return;if(b)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)return;this._playerState.scrollTimeout&&clearTimeout(this._playerState.scrollTimeout),this._playerState.scrollTimeout=setTimeout(()=>{this.playerState=on.Paused},400);let{totalFrames:t}=this._lottieInstance,e=scrollY-this._playerState.scrollY;scrollY<=this._playerState.scrollY&&(e=this._playerState.scrollY-scrollY);let{bottom:s,height:i,top:r}=this._DOMRect,a=i-s;r>=innerHeight&&(a=i);let n=k(e/(innerHeight+a)*(t-1),0,t);requestAnimationFrame(()=>{if(n>=t){this.playerState=on.Paused;return}this.playerState=on.Playing,this._lottieInstance?.goToAndStop(n,!0)})}_handleWindowBlur({type:t}){this.dontFreezeOnBlur||(this.playerState===on.Playing&&"blur"===t&&this._freeze(),this.playerState===on.Frozen&&"focus"===t&&this.play())}_intersectionObserverFallback(){if(!this._container)return;let{bottom:t,left:e,right:s,top:i}=this._container.getBoundingClientRect();this._playerState.visible=i>=0&&e>=0&&t<=innerHeight&&s<=innerWidth,(this.autoplay||this.playOnVisible||this.playerState===on.Playing||this.playerState===on.Frozen)&&(this._playerState.visible?this.play():this._freeze())}_loopComplete(){if(!this._lottieInstance)return;let{playDirection:t,totalFrames:e}=this._lottieInstance,s=this._segment?this._segment[0]:0,i=this._segment?this._segment[1]:e;if(this.count&&(this._isBounce?this._playerState.count+=.5:this._playerState.count+=1,this._playerState.count>=this.count)){this.setLoop(!1),this.playerState=on.Completed,this.dispatchEvent(new CustomEvent(ti.Complete));return}return(this.dispatchEvent(new CustomEvent(ti.Loop)),this._isBounce)?(this._lottieInstance.goToAndStop(-1===t?s:.99*i,!0),this._lottieInstance.setDirection(-1*t),setTimeout(()=>{this.animateOnScroll||this._lottieInstance?.play()},this.intermission)):(this._lottieInstance.goToAndStop(-1===t?.99*i:s,!0),setTimeout(()=>{this.animateOnScroll||this._lottieInstance?.play()},this.intermission))}_mouseEnter(){if(!(!this.hover||!this._lottieInstance||"ontouchstart"in window)){if(this.mouseout===oa.Reverse&&this._lottieInstance.setDirection(1),this.playerState===on.Completed){this._lottieInstance.goToAndPlay(0,!0),this.playerState=on.Playing;return}this.playerState!==on.Playing&&this.play()}}_mouseLeave(){if(!(!this.hover||!this._lottieInstance||"ontouchstart"in window))switch(this.mouseout){case oa.Void:break;case oa.Pause:this.pause();break;case oa.Reverse:this._lottieInstance.setDirection(-1),this.play();break;default:this.stop()}}_onVisibilityChange(){document.hidden&&this.playerState===on.Playing?this._freeze():this.playerState===on.Frozen&&this.play()}_removeEventListeners(){this._toggleEventListeners("remove")}_switchInstance(t=!1){if(this._animations[this._currentAnimation])try{if(this._lottieInstance&&this._lottieInstance.destroy(),this._lottieInstance=this.loadAnimation({...this._getOptions(),animationData:this._animations[this._currentAnimation]}),this._multiAnimationSettings[this._currentAnimation]?.mode&&(this._isBounce=this._multiAnimationSettings[this._currentAnimation]?.mode===ts.Bounce),this._removeEventListeners(),this._addEventListeners(),this.dispatchEvent(new CustomEvent(t?ti.Previous:ti.Next)),this._multiAnimationSettings[this._currentAnimation]?.autoplay??this.autoplay){if(this.animateOnScroll){this._lottieInstance.goToAndStop(0,!0),this.playerState=on.Paused;return}this._lottieInstance.goToAndPlay(0,!0),this.playerState=on.Playing;return}this._lottieInstance.goToAndStop(0,!0),this.playerState=on.Stopped}catch(t){this._errorMessage=om(t).message,this.playerState=on.Error,this.dispatchEvent(new CustomEvent(ti.Error))}}_toggleEventListeners(t){let e="add"===t?"addEventListener":"removeEventListener";if(this._lottieInstance&&(this._lottieInstance[e](ti.EnterFrame,this._enterFrame),this._lottieInstance[e](ti.Complete,this._complete),this._lottieInstance[e](ti.LoopComplete,this._loopComplete),this._lottieInstance[e](ti.DOMLoaded,this._DOMLoaded),this._lottieInstance[e](ti.DataReady,this._dataReady),this._lottieInstance[e](ti.DataFailed,this._dataFailed)),this.selector){let t=document.getElementById(this.selector);t?this.hover?(t[e]("mouseenter",this._mouseEnter),t[e]("mouseleave",this._mouseLeave)):t[e]("click",this._handleClick):this.selector=null}this._container&&!this.selector&&(this.hover&&(this._container[e]("mouseenter",this._mouseEnter),this._container[e]("mouseleave",this._mouseLeave)),this.playOnClick&&this._container[e]("click",this._handleClick)),window[e]("focus",this._handleWindowBlur,{capture:!1,passive:!0}),window[e]("blur",this._handleWindowBlur,{capture:!1,passive:!0}),this.animateOnScroll&&window[e]("scroll",this._handleScroll,{capture:!0,passive:!0})}_toggleSettings(t){if(void 0===t){this._isSettingsOpen=!this._isSettingsOpen;return}this._isSettingsOpen=t}}class ob extends oy{get renderer(){return ta.SVG}constructor(){super(),this.isLight=!0}loadAnimation(t){return ij(t)}setOptions({container:t,hasAutoplay:e,hasLoop:s,initialSegment:i,preserveAspectRatio:r}){return{autoplay:e,container:t,initialSegment:i,loop:s,renderer:ta.SVG,rendererSettings:{hideOnTransparent:!0,imagePreserveAspectRatio:r,preserveAspectRatio:r,progressiveLoad:!0}}}}globalThis.dotLottiePlayer=()=>new ob,b||customElements.define(oo,ob);var ov=Object.freeze({__proto__:null,errorScreen:function(t){return`<div class="error"><svg preserveAspectRatio="${tr.Cover}" xmlns="${y}" 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">${t}</text></svg></div>`}});t.DotLottiePlayerBase=oy,t.MouseOut=oa,t.PlayMode=ts,t.PlayerEvent=ti,t.PlayerState=on,t.RendererType=ta,t.default=ob,t.tagName=oo,Object.defineProperty(t,"__esModule",{value:!0})}(this["@aarsteinmedia/dotlottie-player"]=this["@aarsteinmedia/dotlottie-player"]||{});
|
|
72
|
+
`:""}></figure><slot name="controls"></slot></div>`,this.shadow.adoptedStyleSheets=[await oy.styles()],this.shadow.appendChild(this.template.content.cloneNode(!0))}let om=t=>{let e={message:"Unknown error",status:b?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},oc=(t,e)=>null!=t&&Object.keys(e).filter(t=>Number.isNaN(Number(t))).some(s=>e[s]===t),od=t=>["v","ip","op","layers","fr","w","h"].every(e=>Object.hasOwn(t,e)),ou=t=>null!==t&&["true","","1"].includes(t),of="Method is not implemented",og=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 & 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 .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 & *::-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};class oy extends n1{static get observedAttributes(){return["animateOnScroll","autoplay","controls","direction","hover","loop","mode","playOnClick","playOnVisible","selector","speed","src","subframe"]}static get observedProperties(){return["playerState","_isSettingsOpen","_seeker","_currentAnimation","_animations"]}static get styles(){return og}set animateOnScroll(t){this.setAttribute("animateOnScroll",(!!t).toString())}get animateOnScroll(){return ou(this.getAttribute("animateOnScroll"))}get animations(){return this._animations}set autoplay(t){this.setAttribute("autoplay",(!!t).toString())}get autoplay(){return ou(this.getAttribute("autoplay"))}set background(t){this.setAttribute("background",t)}get background(){return this.getAttribute("background")||"transparent"}set controls(t){this.setAttribute("controls",(!!t).toString())}get controls(){return ou(this.getAttribute("controls"))}set count(t){this.setAttribute("count",t.toString())}get count(){let t=this.getAttribute("count");return t?Number(t):0}get currentAnimation(){return this._currentAnimation}set delay(t){this.setAttribute("delay",t.toString())}get delay(){let t=this.getAttribute("delay");return t?Number(t):0}set description(t){t&&this.setAttribute("description",t)}get description(){return this.getAttribute("description")}set direction(t){this.setAttribute("direction",t.toString())}get direction(){let t=Number(this.getAttribute("direction"));return -1===t?t:1}set dontFreezeOnBlur(t){this.setAttribute("dontFreezeOnBlur",(!!t).toString())}get dontFreezeOnBlur(){return ou(this.getAttribute("dontFreezeOnBlur"))}set hover(t){this.setAttribute("hover",(!!t).toString())}get hover(){return ou(this.getAttribute("hover"))}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(){return ou(this.getAttribute("loop"))}set mode(t){this.setAttribute("mode",t)}get mode(){let t=this.getAttribute("mode");return t===ts.Bounce?t:ts.Normal}set mouseout(t){this.setAttribute("mouseout",t)}get mouseout(){let t=this.getAttribute("mouseout");switch(t){case oa.Void:case oa.Pause:case oa.Reverse:return t;default:return oa.Stop}}set objectfit(t){this.setAttribute("objectfit",t)}get objectfit(){let t=this.getAttribute("objectfit");return oc(t,or)?t:or.Contain}set once(t){this.setAttribute("once",(!!t).toString())}get once(){return ou(this.getAttribute("once"))}set playOnClick(t){this.setAttribute("playOnClick",(!!t).toString())}get playOnClick(){return ou(this.getAttribute("playOnClick"))}set playOnVisible(t){this.setAttribute("playOnVisible",(!!t).toString())}get playOnVisible(){return ou(this.getAttribute("playOnVisible"))}set preserveAspectRatio(t){this.setAttribute("preserveAspectRatio",t||tr.Contain)}get preserveAspectRatio(){let t=this.getAttribute("preserveAspectRatio");return oc(t,tr)?t:null}set quiet(t){this.setAttribute("quiet",(!!t).toString())}get quiet(){return ou(this.getAttribute("quiet"))}set renderer(t){this.setAttribute("renderer",t)}get renderer(){let t=this.getAttribute("renderer");return t===ta.Canvas||t===ta.HTML?t:ta.SVG}set selector(t){t?this.setAttribute("selector",t):this.removeAttribute("selector")}get selector(){return this.getAttribute("selector")}set simple(t){this.setAttribute("simple",(!!t).toString())}get simple(){return ou(this.getAttribute("simple"))}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(){return ou(this.getAttribute("subframe"))}constructor(){super(),this.isLight=!1,this.playerState=on.Loading,this._container=null,this._DOMRect=null,this._errorMessage="Something went wrong",this._identifier=this.id||S(),this._isSettingsOpen=!1,this._playerState={count:0,loaded:!1,prev:on.Loading,scrollTimeout:null,scrollY:0,visible:!1},this._render=op,this._seeker=0,this._animations=[],this._controlsLoadId=0,this._currentAnimation=0,this._errorLoadId=0,this._isBounce=!1,this._isDotLottie=!1,this._lottieInstance=null,this._multiAnimationSettings=[],this._renderControls=async()=>{let t=this.shadow?.querySelector("slot[name=controls]");if(!t)return;if(!this.controls){t.innerHTML="";return}let e=++this._controlsLoadId,{renderControls:i}=await (s=s??Promise.resolve().then(function(){return ol}));e===this._controlsLoadId&&i.call(this)},this._complete=this._complete.bind(this),this._dataFailed=this._dataFailed.bind(this),this._dataReady=this._dataReady.bind(this),this._DOMLoaded=this._DOMLoaded.bind(this),this._enterFrame=this._enterFrame.bind(this),this._freeze=this._freeze.bind(this),this._handleBlur=this._handleBlur.bind(this),this._handleClick=this._handleClick.bind(this),this._handleScroll=this._handleScroll.bind(this),this._handleSeekChange=this._handleSeekChange.bind(this),this._handleWindowBlur=this._handleWindowBlur.bind(this),this._loopComplete=this._loopComplete.bind(this),this._mouseEnter=this._mouseEnter.bind(this),this._mouseLeave=this._mouseLeave.bind(this),this._onVisibilityChange=this._onVisibilityChange.bind(this),this._switchInstance=this._switchInstance.bind(this),this._handleSettingsClick=this._handleSettingsClick.bind(this),this.togglePlay=this.togglePlay.bind(this),this.stop=this.stop.bind(this),this.prev=this.prev.bind(this),this.next=this.next.bind(this),this.snapshot=this.snapshot.bind(this),this.toggleLoop=this.toggleLoop.bind(this),this.toggleBoomerang=this.toggleBoomerang.bind(this),this.destroy=this.destroy.bind(this),this.template=document.createElement("template"),this.shadow=this.attachShadow({mode:"open"})}addAnimation(t){throw Error(of)}async attributeChangedCallback(t,e,s){if(this._lottieInstance&&this.shadow&&this._container)switch(t){case"animateOnScroll":if(""===s||s){this._lottieInstance.autoplay=!1,addEventListener("scroll",this._handleScroll,{capture:!0,passive:!0});return}removeEventListener("scroll",this._handleScroll,!0);break;case"autoplay":if(this.animateOnScroll||this.playOnVisible)return;if(""===s||s)return void this.play();this.stop();break;case"controls":await this._renderControls();break;case"direction":if(-1===Number(s))return void this.setDirection(-1);this.setDirection(1);break;case"hover":if(""===s||s){this._container.addEventListener("mouseenter",this._mouseEnter),this._container.addEventListener("mouseleave",this._mouseLeave);return}this._container.removeEventListener("mouseenter",this._mouseEnter),this._container.removeEventListener("mouseleave",this._mouseLeave);break;case"loop":{let t=this.shadow.querySelector(".toggleLoop");t instanceof HTMLButtonElement&&(t.dataset.active=s),this.setLoop(""===s||!!s);break}case"mode":{let t=this.shadow.querySelector(".toggleBoomerang");if(!oc(s,ts))break;t instanceof HTMLButtonElement&&(t.dataset.active=(s===ts.Bounce).toString()),this._isBounce=s===ts.Bounce;break}case"playOnClick":if(""===s||s){this._lottieInstance.autoplay=!1,this._container.addEventListener("click",this._handleClick);return}this._container.removeEventListener("click",this._handleClick);break;case"playOnVisible":(""===s||s)&&(this._lottieInstance.autoplay=!1);break;case"selector":{let t=document.getElementById(this.selector??"");t?.addEventListener("click",this._handleClick);break}case"speed":{let t=Number(s);t&&!isNaN(t)&&this.setSpeed(t);break}case"src":await this.load(s);break;case"subframe":this.setSubframe(""===s||!!s)}}connectedCallback(){super.connectedCallback();try{(async()=>{if(await this._render(),!this.shadow)throw Error("Missing Shadow element");this._container=this.shadow.querySelector(".animation"),await this.load(this.src),void 0!==document.hidden&&document.addEventListener("visibilitychange",this._onVisibilityChange),this._container&&(this._DOMRect=this._container.getBoundingClientRect()),this._addIntersectionObserver(),this.dispatchEvent(new CustomEvent(ti.Rendered))})()}catch(t){this._handleError(t)}}convert(t){throw Error(of)}destroy(){this._lottieInstance?.destroy&&(this.playerState=on.Destroyed,this._lottieInstance.destroy(),this._lottieInstance=null,this.dispatchEvent(new CustomEvent(ti.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 nX(t);if(!e?.every(od))throw Error("Broken or corrupted file");let r=this.parentElement?.querySelector('script[type="application/ld+json"]');if(r){let t=JSON.parse(r.innerHTML);t.selector&&(this.selector=t.selector),t.segment&&this.setSegment(t.segment),t.multiAnimationSettings&&this.setMultiAnimationSettings(t.multiAnimationSettings)}this._isBounce=this.mode===ts.Bounce,this._multiAnimationSettings.length>0&&this._multiAnimationSettings[this._currentAnimation]?.mode&&(this._isBounce=this._multiAnimationSettings[this._currentAnimation]?.mode===ts.Bounce);let a=i?.animations[0];a&&(a.autoplay=!this.animateOnScroll&&!this.playOnVisible&&this.autoplay,a.loop=this.loop),this._isDotLottie=s,this._animations=e,this._manifest=i??{animations:[{autoplay:!this.animateOnScroll&&!this.playOnVisible&&this.autoplay,direction:this.direction,id:S(),loop:this.loop,mode:this.mode,speed:this.speed}]},this._clearPrevious(),this.playerState=on.Stopped,!this.animateOnScroll&&(this.autoplay||this._multiAnimationSettings[this._currentAnimation]?.autoplay||this.playOnVisible)&&(this.playerState=on.Playing),this._lottieInstance=this.loadAnimation({...this._getOptions(),animationData:e[this._currentAnimation]}),this._addEventListeners();let n=this._multiAnimationSettings[this._currentAnimation]?.speed??this.speed,o=this._multiAnimationSettings[this._currentAnimation]?.direction??this.direction;this._lottieInstance.setSpeed(n),this._lottieInstance.setDirection(o),this._lottieInstance.setSubframe(!!this.subframe),(this.autoplay||this.animateOnScroll||this.playOnVisible)&&-1===this.direction&&this.seek("99%"),await this._renderControls()}catch(t){await this._handleError(t)}}loadAnimation(t){throw Error(of)}next(){this._currentAnimation++,this._switchInstance()}pause(){if(!this._lottieInstance)return;this._playerState.prev=this.playerState;let t=!1;try{this._lottieInstance.pause(),this.dispatchEvent(new CustomEvent(ti.Pause))}catch(e){t=!0,console.error(e)}finally{this.playerState=t?on.Error:on.Paused}}play(){if(!this._lottieInstance)return;this._playerState.prev=this.playerState;let t=!1;try{this._lottieInstance.play(),this.dispatchEvent(new CustomEvent(ti.Play))}catch(e){t=!0,console.error(e)}finally{this.playerState=t?on.Error:on.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"),m=this.shadow.querySelector(".snapshot");i instanceof HTMLButtonElement&&r instanceof HTMLButtonElement&&n instanceof HTMLButtonElement&&a instanceof HTMLButtonElement&&o instanceof HTMLInputElement&&h instanceof HTMLProgressElement&&("playerState"===t&&(oh(i,s),r.dataset.active=(s===on.Stopped).toString()),"_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&&m instanceof HTMLButtonElement&&(l.hidden=!s,p.hidden=this.isLight,m.hidden=this.renderer!==ta.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===on.Playing||this.playerState===on.Frozen&&this._playerState.prev===on.Playing){this._lottieInstance.goToAndPlay(s,!0),this.playerState=on.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{if(!this.shadowRoot)throw Error("Unknown error");let s=this.shadowRoot.querySelector(".animation svg");if(!s)throw Error("Could not retrieve animation from DOM");let i=s instanceof Node?new XMLSerializer().serializeToString(s):null;if(!i)throw Error("Could not serialize SVG element");return t&&P(i,{mimeType:"image/svg+xml",name:`${I(this.src||e)}-${((this._seeker??0)+1).toString().padStart(3,"0")}.svg`}),i}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(ti.Stop))}finally{this.playerState=on.Stopped}}}toggleBoomerang(){let t=this._multiAnimationSettings[this._currentAnimation]??{};if(void 0!==t.mode){if(t.mode===ts.Normal){t.mode=ts.Bounce,this._isBounce=!0;return}t.mode=ts.Normal,this._isBounce=!1;return}if(this.mode===ts.Normal){this.mode=ts.Bounce,this._isBounce=!0;return}this.mode=ts.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===on.Playing)return void this.pause();if(this.playerState!==on.Completed)return void this.play();if(this.playerState=on.Playing,this._isBounce){this.setDirection(-1*e),this._lottieInstance.goToAndPlay(t,!0);return}-1===e?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(ti.Freeze))}finally{this.playerState=on.Frozen}}}_handleBlur(){setTimeout(()=>{this._toggleSettings(!1)},200)}_handleClick(){(this.playOnClick||this.selector)&&this.togglePlay()}_handleSeekChange({target:t}){!(!(t instanceof HTMLInputElement)||!this._lottieInstance||isNaN(Number(t.value)))&&this.seek(Math.round(Number(t.value)/100*this._lottieInstance.totalFrames))}_handleSettingsClick({target:t}){this._toggleSettings(),t instanceof HTMLElement&&t.focus()}async _showError(){if(this.playerState!==on.Error)return;let t=this.shadow?.querySelector(".animation"),e=this.shadow?.querySelector("slot[name=controls]");if(e&&(e.innerHTML=""),!(t instanceof HTMLElement))return;let s=++this._errorLoadId,{errorScreen:i}=await (nQ=nQ??Promise.resolve().then(function(){return ov}));s===this._errorLoadId&&(t.innerHTML=i(this._errorMessage))}setOptions(t){throw Error("Method not implemented")}_addEventListeners(){this._toggleEventListeners("add")}_addIntersectionObserver(){if(this._container&&!this._intersectionObserver){if(!("IntersectionObserver"in window)){this._intersectionObserverFallback(),removeEventListener("scroll",this._intersectionObserverFallback,!0),addEventListener("scroll",this._intersectionObserverFallback,{capture:!0,passive:!0});return}this._intersectionObserver=new IntersectionObserver(t=>{let{length:e}=t;for(let s=0;s<e;s++){if(!t[s]?.isIntersecting||document.hidden){this.playerState===on.Playing&&this._freeze(),this._playerState.visible=!1;continue}this.animateOnScroll||this.playOnVisible||this.playerState!==on.Frozen||this.play(),this.playOnVisible&&(this.playerState!==on.Completed||this.once?setTimeout(()=>{this.play()},this.delay):(this.playerState=on.Playing,this._lottieInstance?.goToAndPlay(1===this.direction?0:this._lottieInstance.totalFrames))),!this._playerState.scrollY&&(t[s]?.boundingClientRect.y||0)>0&&(this._playerState.scrollY=scrollY),this._playerState.visible=!0}}),this._intersectionObserver.observe(this._container)}}_clearPrevious(){this._lottieInstance?.destroy();let t=this.shadow?.querySelector(".animation");t&&(t.innerHTML="")}_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=on.Completed,this.dispatchEvent(new CustomEvent(ti.Complete,{detail:{frame:t,seeker:this._seeker}}))}_dataFailed(){this.playerState=on.Error,this.dispatchEvent(new CustomEvent(ti.Error))}_dataReady(){this.dispatchEvent(new CustomEvent(ti.Load))}_DOMLoaded(){this.dispatchEvent(new CustomEvent(ti.Ready))}_enterFrame(){if(!this._lottieInstance)return;let{currentFrame:t,totalFrames:e}=this._lottieInstance;this._seeker=Math.round(t/e*100),this.dispatchEvent(new CustomEvent(ti.Frame,{detail:{frame:t,seeker:this._seeker}}))}_getOptions(){if(!this._container)throw Error("Container not rendered");let t=this.preserveAspectRatio??(t=>{switch(t){case or.Contain:case or.ScaleDown:return tr.Contain;case or.Cover:return tr.Cover;case or.Fill:return tr.Initial;case or.None:return tr.None;default:return tr.Contain}})(this.objectfit),e=this._multiAnimationSettings.length>0?this._multiAnimationSettings[this._currentAnimation]:void 0,s=this._manifest?.animations[this._currentAnimation],i=!!this.loop;s?.loop!==void 0&&(i=!!s.loop),e?.loop!==void 0&&(i=!!e.loop);let r=!!this.autoplay;s?.autoplay!==void 0&&(r=!!s.autoplay),e?.autoplay!==void 0&&(r=!!e.autoplay),this.animateOnScroll&&(r=!1);let a=this._segment;return this._segment?.every(t=>t>0)&&(a=[this._segment[0]-1,this._segment[1]-1]),this._segment?.some(t=>t<0)&&(a=void 0),this.setOptions({container:this._container,hasAutoplay:r,hasLoop:i,initialSegment:a,preserveAspectRatio:t,rendererType:this.renderer})}async _handleError(t){this.playerState=on.Error,this.quiet||(this._errorMessage=om(t).message,await this._showError()),this.dispatchEvent(new CustomEvent(ti.Error)),console.error(t)}_handleScroll(){if(!this.animateOnScroll||!this._DOMRect||!this._lottieInstance)return;if(b)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)return;this._playerState.scrollTimeout&&clearTimeout(this._playerState.scrollTimeout),this._playerState.scrollTimeout=setTimeout(()=>{this.playerState=on.Paused},400);let{totalFrames:t}=this._lottieInstance,e=scrollY-this._playerState.scrollY;scrollY<=this._playerState.scrollY&&(e=this._playerState.scrollY-scrollY);let{bottom:s,height:i,top:r}=this._DOMRect,a=i-s;r>=innerHeight&&(a=i);let n=k(e/(innerHeight+a)*(t-1),0,t);requestAnimationFrame(()=>{if(n>=t){this.playerState=on.Paused;return}this.playerState=on.Playing,this._lottieInstance?.goToAndStop(n,!0)})}_handleWindowBlur({type:t}){this.dontFreezeOnBlur||(this.playerState===on.Playing&&"blur"===t&&this._freeze(),this.playerState===on.Frozen&&"focus"===t&&this.play())}_intersectionObserverFallback(){if(!this._container)return;let{bottom:t,left:e,right:s,top:i}=this._container.getBoundingClientRect();this._playerState.visible=i>=0&&e>=0&&t<=innerHeight&&s<=innerWidth,(this.autoplay||this.playOnVisible||this.playerState===on.Playing||this.playerState===on.Frozen)&&(this._playerState.visible?this.play():this._freeze())}_loopComplete(){if(!this._lottieInstance)return;let{playDirection:t,totalFrames:e}=this._lottieInstance,s=this._segment?this._segment[0]:0,i=this._segment?this._segment[1]:e;if(this.count&&(this._isBounce?this._playerState.count+=.5:this._playerState.count+=1,this._playerState.count>=this.count)){this.setLoop(!1),this.playerState=on.Completed,this.dispatchEvent(new CustomEvent(ti.Complete));return}return(this.dispatchEvent(new CustomEvent(ti.Loop)),this._isBounce)?(this._lottieInstance.goToAndStop(-1===t?s:.99*i,!0),this._lottieInstance.setDirection(-1*t),setTimeout(()=>{this.animateOnScroll||this._lottieInstance?.play()},this.intermission)):(this._lottieInstance.goToAndStop(-1===t?.99*i:s,!0),setTimeout(()=>{this.animateOnScroll||this._lottieInstance?.play()},this.intermission))}_mouseEnter(){if(!(!this.hover||!this._lottieInstance||"ontouchstart"in window)){if(this.mouseout===oa.Reverse&&this._lottieInstance.setDirection(1),this.playerState===on.Completed){this._lottieInstance.goToAndPlay(0,!0),this.playerState=on.Playing;return}this.playerState!==on.Playing&&this.play()}}_mouseLeave(){if(!(!this.hover||!this._lottieInstance||"ontouchstart"in window))switch(this.mouseout){case oa.Void:break;case oa.Pause:this.pause();break;case oa.Reverse:this._lottieInstance.setDirection(-1),this.play();break;default:this.stop()}}_onVisibilityChange(){document.hidden&&this.playerState===on.Playing?this._freeze():this.playerState===on.Frozen&&this.play()}_removeEventListeners(){this._toggleEventListeners("remove")}_switchInstance(t=!1){if(this._animations[this._currentAnimation])try{if(this._lottieInstance&&this._lottieInstance.destroy(),this._lottieInstance=this.loadAnimation({...this._getOptions(),animationData:this._animations[this._currentAnimation]}),this._multiAnimationSettings[this._currentAnimation]?.mode&&(this._isBounce=this._multiAnimationSettings[this._currentAnimation]?.mode===ts.Bounce),this._removeEventListeners(),this._addEventListeners(),this.dispatchEvent(new CustomEvent(t?ti.Previous:ti.Next)),this._multiAnimationSettings[this._currentAnimation]?.autoplay??this.autoplay){if(this.animateOnScroll){this._lottieInstance.goToAndStop(0,!0),this.playerState=on.Paused;return}this._lottieInstance.goToAndPlay(0,!0),this.playerState=on.Playing;return}this._lottieInstance.goToAndStop(0,!0),this.playerState=on.Stopped}catch(t){this._errorMessage=om(t).message,this.playerState=on.Error,this.dispatchEvent(new CustomEvent(ti.Error))}}_toggleEventListeners(t){let e="add"===t?"addEventListener":"removeEventListener";if(this._lottieInstance&&(this._lottieInstance[e](ti.EnterFrame,this._enterFrame),this._lottieInstance[e](ti.Complete,this._complete),this._lottieInstance[e](ti.LoopComplete,this._loopComplete),this._lottieInstance[e](ti.DOMLoaded,this._DOMLoaded),this._lottieInstance[e](ti.DataReady,this._dataReady),this._lottieInstance[e](ti.DataFailed,this._dataFailed)),this.selector){let t=document.getElementById(this.selector);t?this.hover?(t[e]("mouseenter",this._mouseEnter),t[e]("mouseleave",this._mouseLeave)):t[e]("click",this._handleClick):this.selector=null}this._container&&!this.selector&&(this.hover&&(this._container[e]("mouseenter",this._mouseEnter),this._container[e]("mouseleave",this._mouseLeave)),this.playOnClick&&this._container[e]("click",this._handleClick)),window[e]("focus",this._handleWindowBlur,{capture:!1,passive:!0}),window[e]("blur",this._handleWindowBlur,{capture:!1,passive:!0}),this.animateOnScroll&&window[e]("scroll",this._handleScroll,{capture:!0,passive:!0})}_toggleSettings(t){if(void 0===t){this._isSettingsOpen=!this._isSettingsOpen;return}this._isSettingsOpen=t}}class ob extends oy{get renderer(){return ta.SVG}constructor(){super(),this.isLight=!0}loadAnimation(t){return ij(t)}setOptions({container:t,hasAutoplay:e,hasLoop:s,initialSegment:i,preserveAspectRatio:r}){return{autoplay:e,container:t,initialSegment:i,loop:s,renderer:ta.SVG,rendererSettings:{hideOnTransparent:!0,imagePreserveAspectRatio:r,preserveAspectRatio:r,progressiveLoad:!0}}}}globalThis.dotLottiePlayer=()=>new ob,b||customElements.define(oo,ob);var ov=Object.freeze({__proto__:null,errorScreen:function(t){return`<div class="error"><svg preserveAspectRatio="${tr.Cover}" xmlns="${y}" 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">${t}</text></svg></div>`}});t.DotLottiePlayerBase=oy,t.MouseOut=oa,t.PlayMode=ts,t.PlayerEvent=ti,t.PlayerState=on,t.RendererType=ta,t.default=ob,t.tagName=oo,Object.defineProperty(t,"__esModule",{value:!0})}(this["@aarsteinmedia/dotlottie-player"]=this["@aarsteinmedia/dotlottie-player"]||{});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aarsteinmedia/dotlottie-player",
|
|
3
|
-
"version": "6.4.
|
|
3
|
+
"version": "6.4.7",
|
|
4
4
|
"description": "Web Component for playing Lottie animations in your web app.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -84,14 +84,14 @@
|
|
|
84
84
|
"autoprefixer": "^10.5.4",
|
|
85
85
|
"eslint": "^9.39.5",
|
|
86
86
|
"eslint-config-sheriff": "^31.4.0",
|
|
87
|
-
"eslint-plugin-perfectionist": "^5.
|
|
87
|
+
"eslint-plugin-perfectionist": "^5.11.0",
|
|
88
88
|
"fflate": "^0.8.3",
|
|
89
89
|
"globals": "^17.11.0",
|
|
90
90
|
"jiti": "^2.7.0",
|
|
91
91
|
"postcss-flexbugs-fixes": "^5.0.2",
|
|
92
92
|
"prettier": "^3.9.6",
|
|
93
93
|
"rimraf": "^6.1.3",
|
|
94
|
-
"rollup": "^4.63.
|
|
94
|
+
"rollup": "^4.63.1",
|
|
95
95
|
"rollup-plugin-dts": "^6.5.1",
|
|
96
96
|
"rollup-plugin-html-literals": "^2.0.1",
|
|
97
97
|
"rollup-plugin-livereload": "^2.0.5",
|