@aarsteinmedia/dotlottie-player 2.1.6 → 2.1.7

package/dist/esm/index.js

@@ -1,2 +1,1199 @@
-import{css as e,LitElement as t,html as r,nothing as o}from"lit";import{property as i,query as n,state as a,customElement as s}from"lit/decorators.js";import l from"lottie-web";import{zip as c,strFromU8 as d,unzip as p}from"fflate";!function(e){e.Completed="completed",e.Destroyed="destroyed",e.Error="error",e.Frozen="frozen",e.Loading="loading",e.Paused="paused",e.Playing="playing",e.Stopped="stopped"}(PlayerState||(PlayerState={})),function(e){e.Bounce="bounce",e.Normal="normal"}(PlayMode||(PlayMode={})),function(e){e.Complete="complete",e.Destroyed="destroyed",e.Error="error",e.Frame="frame",e.Freeze="freeze",e.Load="load",e.Loop="loop",e.Pause="pause",e.Play="play",e.Ready="ready",e.Rendered="rendered",e.Stop="stop"}(PlayerEvents||(PlayerEvents={}));class CustomError extends Error{}function asyncGeneratorStep$1(e,t,r,o,i,n,a){try{var s=e[n](a),l=s.value}catch(e){r(e);return}s.done?t(l):Promise.resolve(l).then(o,i)}function _async_to_generator$1(e){return function(){var t=this,r=arguments;return new Promise(function(o,i){var n=e.apply(t,r);function a(e){asyncGeneratorStep$1(n,o,i,a,s,"next",e)}function s(e){asyncGeneratorStep$1(n,o,i,a,s,"throw",e)}a(void 0)})}}let addExt=(e,t)=>{if(t)return getExt(t)?getExt(t)===e?t:`${getFilename(t)}.${e}`:`${t}.${e}`},aspectRatio=e=>{switch(e){case"contain":case"scale-down":default:return"xMidYMid meet";case"cover":return"xMidYMid slice";case"fill":return"none";case"none":return"xMinYMin slice"}},base64ToU8=e=>{let t=e.substring(e.indexOf(",")+1);return strToU8(isServer()?Buffer.from(t,"base64").toString("binary"):atob(t))},createDotLottie=function(){var e=_async_to_generator$1(function*(e,t,r,o=!0){try{var i;if(!(null==e?void 0:e.length)||!t)throw Error(`Missing or malformed required parameter(s):
- ${(null==e?void 0:e.length)?"":"- animations\n"} ${t?"":"- manifest \n"}`);let n=addExt("lottie",r)||`${useId()}.lottie`,a={"manifest.json":[strToU8(JSON.stringify(t)),{level:0}]};for(let[r,o]of e.entries()){if(null===(i=o.assets)||void 0===i?void 0:i.length)for(let e of o.assets){let{id:t,p:r}=e;if(t&&r){let o=getExtFromB64(r);e.p=`${t}.${o}`,e.e=0,a[`images/${t}.${o}`]=[base64ToU8(r),{level:9}]}}a[`animations/${t.animations[r].id}.json`]=[strToU8(JSON.stringify(o)),{level:9}]}let s=yield getArrayBuffer(a);return o?download(s,{name:n,mimeType:"application/zip"}):s}catch(e){console.error(`❌ ${handleErrors(e).message}`)}});return function(t,r,o){return e.apply(this,arguments)}}(),download=(e,t)=>{let r=new Blob([e],{type:null==t?void 0:t.mimeType}),o=(null==t?void 0:t.name)||useId(),i=URL.createObjectURL(r),n=document.createElement("a");n.href=i,n.download=o,n.hidden=!0,document.body.appendChild(n),n.click(),setTimeout(()=>{n.remove(),URL.revokeObjectURL(i)},1e3)},handleErrors=e=>{let t={message:"Unknown error",status:isServer()?500:400};return e&&"object"==typeof e&&("message"in e&&"string"==typeof e.message&&(t.message=e.message),"status"in e&&(t.status=Number(e.status))),t},frameOutput=e=>((null!=e?e:0)+1).toString().padStart(3,"0"),getAnimationData=function(){var e=_async_to_generator$1(function*(e){try{if(!e||"string"!=typeof e&&"object"!=typeof e)throw Error("Broken file or invalid file format");if("string"!=typeof e){let t=Array.isArray(e)?e:[e];return{animations:t,manifest:null}}let t=yield fetch(e);if(!t.ok){let e=new CustomError(t.statusText);throw e.status=t.status,e}let r=getExt(e);if("json"===r||!r){if(r){let e=yield t.json();return{animations:[e],manifest:null}}let e=yield t.clone().text();try{let t=JSON.parse(e);return{animations:[t],manifest:null}}catch(e){}}let{data:o,manifest:i}=yield getLottieJSON(t);return{animations:o,manifest:i,isDotLottie:!0}}catch(e){return console.error(`❌ ${handleErrors(e).message}`),{animations:null,manifest:null}}});return function(t){return e.apply(this,arguments)}}(),getArrayBuffer=function(){var e=_async_to_generator$1(function*(e){let t=yield new Promise((t,r)=>{c(e,{level:9},(e,o)=>{if(e){r(e);return}t(o.buffer)})});return t});return function(t){return e.apply(this,arguments)}}(),getExt=e=>{var t;if(e&&hasExt(e))return null===(t=e.split(".").pop())||void 0===t?void 0:t.toLowerCase()},getExtFromB64=e=>{let t=e.split(":")[1].split(";")[0];return t.split("/")[1].split("+")[0]},getFilename=(e,t)=>{let r=getExt(e);return`${e.replace(/\.[^.]*$/,"").replace(/\W+/g,"")}${t&&r?`.${r}`:""}`.toLowerCase()},getLottieJSON=function(){var e=_async_to_generator$1(function*(e){let t=yield unzip(e),r=getManifest(t),o=[];for(let{id:e}of r.animations){let r=d(t[`animations/${e}.json`]),i=JSON.parse(r);yield resolveAssets(t,i.assets),o.push(i)}return{data:o,manifest:r}});return function(t){return e.apply(this,arguments)}}(),getManifest=e=>{let t=d(e["manifest.json"],!1),r=JSON.parse(t);if(!("animations"in r))throw Error("Manifest not found");if(!r.animations.length)throw Error("No animations listed in manifest");return r},getMimeFromExt=e=>{switch(e){case"svg":case"svg+xml":return"image/svg+xml";case"jpg":case"jpeg":return"image/jpeg";case"png":case"gif":case"webp":return`image/${e}`;case"mp3":case"mpeg":case"wav":return`audio/${e}`;default:return""}},hasExt=e=>{var t;let r=null==e?void 0:null===(t=e.split("/").pop())||void 0===t?void 0:t.lastIndexOf(".");return(null!=r?r:0)>1&&e&&e.length-1>(null!=r?r:0)},isAudio=e=>!("h"in e)&&!("w"in e)&&"p"in e&&"e"in e&&"u"in e&&"id"in e,isImage=e=>"w"in e&&"h"in e&&!("xt"in e)&&"p"in e,isServer=()=>!("undefined"!=typeof window&&window.document),strToU8=e=>{let t=new Uint8Array(e.length);for(let r=0;r<e.length;r++)t[r]=e.charCodeAt(r);return t},resolveAssets=function(){var e=_async_to_generator$1(function*(e,t){if(!Array.isArray(t))return;let r=[];for(let o of t){if(!isAudio(o)&&!isImage(o))continue;let t=isImage(o)?"images":"audio",i=null==e?void 0:e[`${t}/${o.p}`];i&&r.push(new Promise(e=>{let t=isServer()?Buffer.from(i).toString("base64"):btoa(i.reduce((e,t)=>e+String.fromCharCode(t),""));o.p=`data:${getMimeFromExt(getExt(o.p))};base64,${t}`,o.e=1,o.u="",e()}))}yield Promise.all(r)});return function(t,r){return e.apply(this,arguments)}}(),unzip=function(){var e=_async_to_generator$1(function*(e){let t=new Uint8Array((yield e.arrayBuffer())),r=yield new Promise((e,r)=>{p(t,(t,o)=>{t&&r(t),e(o)})});return r});return function(t){return e.apply(this,arguments)}}(),useId=e=>{let t=()=>((1+Math.random())*65536|0).toString(16).substring(1);return`${null!=e?e:`:${t()}`}-${t()}`};var PlayerState,PlayMode,PlayerEvents,name="@aarsteinmedia/dotlottie-player",version="2.1.6",description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player",exports={".":{import:"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}},main="./dist/index.js",unpkg="./dist/index.js",module="./dist/esm/index.js",types="./dist/index.d.ts",type="module",homepage="https://www.aarstein.media/en/dotlottie-player",repository={url:"https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"},bugs="https://github.com/aarsteinmedia/dotlottie-player/issues",author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"},license="GPL-2.0-or-later",scripts={build:"pnpm cleanup && rollup -c","build:types":"pnpm cleanup:types && tsc","build:cem":"npx cem analyze --config 'cem.config.mjs'",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"pnpm cleanup && rollup -c --watch",lint:"tsc && eslint . --ext .ts,.js","lint:fix":"eslint . --ext .ts,.js --fix","cleanup:types":"shx rm -rf types && shx mkdir types",cleanup:"shx rm -rf dist && shx mkdir dist"},dependencies={fflate:"^0.8.1",lit:"^2.8.0","lottie-web":"^5.12.2"},peerDependencies={"@types/react":"^18.2.28"},devDependencies={"@custom-elements-manifest/analyzer":"^0.6.9","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-json":"^6.0.1","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.4","@swc/core":"1.3.75","@types/node":"^20.8.8","@typescript-eslint/eslint-plugin":"^5.62.0","@typescript-eslint/parser":"^5.62.0",eslint:"^8.52.0",rollup:"^3.29.4","rollup-plugin-dts":"^6.1.0","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-summary":"^2.0.0","rollup-plugin-swc3":"^0.9.1",shx:"^0.3.4","ts-lit-plugin":"^1.2.1",typescript:"^5.2.2"},customElements="dist/custom-elements.json",files=["dist","README.md"],keywords=["lottie","dotlottie","animation","web component","component","lit-element","svg","vector","player"],publishConfig={access:"public"},engines={node:">= 7.6.0"},funding={type:"paypal",url:"https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"},pkg={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,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,customElements:customElements,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding},styles=e`*{box-sizing:border-box}:host{--lottie-player-toolbar-height:35px;--lottie-player-toolbar-background-color:#FFF;--lottie-player-toolbar-icon-color:#000;--lottie-player-toolbar-icon-hover-color:#000;--lottie-player-toolbar-icon-active-color:#4285f4;--lottie-player-seeker-track-color:rgba(0, 0, 0, 0.2);--lottie-player-seeker-thumb-color:#4285f4;--lottie-player-seeker-display:block;display:block;width:100%;height:100%}@media (prefers-color-scheme:dark){:host{--lottie-player-toolbar-background-color:#000;--lottie-player-toolbar-icon-color:#FFF;--lottie-player-toolbar-icon-hover-color:#FFF;--lottie-player-seeker-track-color:rgba(255, 255, 255, 0.6)}}.main{display:flex;flex-direction:column;height:100%;width:100%;margin:0}.animation{width:100%;height:100%;display:flex}[data-controls=true] .animation{height:calc(100% - 35px)}.animation-container{position:relative}.popover{position:absolute;right:5px;bottom:40px;background-color:var(--lottie-player-toolbar-background-color);border-radius:5px;padding:10px 15px;border:solid 2px var(--lottie-player-toolbar-icon-color);animation:fadeIn .2s ease-in-out}.popover::before{content:"";right:10px;border:7px solid transparent;border-top-color:transparent;margin-right:-7px;height:0;width:0;position:absolute;pointer-events:none;top:100%;border-top-color:var(--lottie-player-toolbar-icon-color)}.toolbar{display:flex;align-items:center;justify-items:center;background:var(--lottie-player-toolbar-background-color);margin:0;height:35px;padding:5px;border-radius:5px;gap:5px}.toolbar.has-error{pointer-events:none;opacity:.5}.toolbar button{cursor:pointer;fill:var(--lottie-player-toolbar-icon-color);color:var(--lottie-player-toolbar-icon-color);display:flex;background:0 0;border:0;padding:0;outline:0;height:100%;margin:0;align-items:center;gap:5px;opacity:.9}.toolbar button:hover{opacity:1}.toolbar button[data-active=true]{opacity:1;fill:var(--lottie-player-toolbar-icon-active-color)}.toolbar button:disabled{opacity:.5}.toolbar button:focus{outline:0}.toolbar button svg{pointer-events:none}.toolbar button svg>*{fill:inherit}.toolbar button.disabled svg{display:none}.progress-container{position:relative;width:100%}.progress-container.simple{margin-right:12px}.seeker,.seeker::-webkit-slider-runnable-track,.seeker::-webkit-slider-thumb,progress{-webkit-appearance:none;appearance:none;outline:0}.seeker{width:100%;height:20px;border-radius:3px;border:0;cursor:pointer;background-color:transparent;display:var(--lottie-player-seeker-display);color:var(--lottie-player-seeker-thumb-color);margin:0;padding:7.5px 0;position:relative;z-index:1}progress{position:absolute;width:100%;height:5px;border-radius:3px;border:0;top:0;left:0;margin:7.5px 0;background-color:var(--lottie-player-seeker-track-color);pointer-events:none}::-moz-progress-bar{background-color:var(--lottie-player-seeker-thumb-color)}::-webkit-progress-inner-element{border-radius:3px;overflow:hidden}::-webkit-slider-runnable-track{background-color:transparent}::-webkit-progress-value{background-color:var(--lottie-player-seeker-thumb-color)}.seeker::-webkit-slider-thumb{height:15px;width:15px;border-radius:50%;border:0;background-color:var(--lottie-player-seeker-thumb-color);cursor:pointer;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:focus::-webkit-slider-thumb,.seeker:hover::-webkit-slider-thumb{transform:scale(1)}.seeker::-moz-range-progress{background-color:var(--lottie-player-seeker-thumb-color);height:5px;border-radius:3px}.seeker::-moz-range-thumb{height:15px;width:15px;border-radius:50%;background-color:var(--lottie-player-seeker-thumb-color);border:0;cursor:pointer;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:focus::-moz-range-thumb,.seeker:hover::-moz-range-thumb{transform:scale(1)}.seeker::-ms-track{width:100%;height:5px;cursor:pointer;background:0 0;border-color:transparent;color:transparent}.seeker::-ms-fill-upper{background:var(--lottie-player-seeker-track-color);border-radius:3px}.seeker::-ms-fill-lower{background-color:var(--lottie-player-seeker-thumb-color);border-radius:3px}.seeker::-ms-thumb{border:0;height:15px;width:15px;border-radius:50%;background:var(--lottie-player-seeker-thumb-color);cursor:pointer;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:focus::-ms-thumb,.seeker:hover::-ms-thumb{transform:scale(1)}.seeker:focus::-ms-fill-lower{background:var(--lottie-player-seeker-track-color)}.seeker:focus::-ms-fill-upper{background:var(--lottie-player-seeker-track-color)}.error{display:flex;margin:auto;justify-content:center;height:100%;align-items:center}.error svg{width:100%;height:auto}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}`;function asyncGeneratorStep(e,t,r,o,i,n,a){try{var s=e[n](a),l=s.value}catch(e){r(e);return}s.done?t(l):Promise.resolve(l).then(o,i)}function _async_to_generator(e){return function(){var t=this,r=arguments;return new Promise(function(o,i){var n=e.apply(t,r);function a(e){asyncGeneratorStep(n,o,i,a,s,"next",e)}function s(e){asyncGeneratorStep(n,o,i,a,s,"throw",e)}a(void 0)})}}function _define_property(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function _object_spread(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),o.forEach(function(t){_define_property(e,t,r[t])})}return e}function ownKeys(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,o)}return r}function _object_spread_props(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}),e}function _ts_decorate(e,t,r,o){for(var i,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o,s=e.length-1;s>=0;s--)(i=e[s])&&(a=(n<3?i(a):n>3?i(t,r,a):i(t,r))||a);return n>3&&a&&Object.defineProperty(t,r,a),a}let DotLottiePlayer=class extends t{_getOptions(){var e;let t=null!==(e=this.preserveAspectRatio)&&void 0!==e?e:this.objectfit&&aspectRatio(this.objectfit),r=!this.segment||this.segment.some(e=>e<0)?void 0:this.segment.every(e=>e>0)?[this.segment[0]-1,this.segment[1]-1]:this.segment,o={container:this.container,loop:!!this.loop,autoplay:!!this.autoplay,renderer:this.renderer,initialSegment:r,rendererSettings:{imagePreserveAspectRatio:t}};switch(this.renderer){case"svg":o.rendererSettings=_object_spread_props(_object_spread({},o.rendererSettings),{hideOnTransparent:!0,preserveAspectRatio:t,progressiveLoad:!0});break;case"canvas":o.rendererSettings=_object_spread_props(_object_spread({},o.rendererSettings),{clearCanvas:!0,preserveAspectRatio:t,progressiveLoad:!0});break;case"html":o.rendererSettings=_object_spread_props(_object_spread({},o.rendererSettings),{hideOnTransparent:!0})}return o}load(e){var t=this;return _async_to_generator(function*(){var r;if(t.shadowRoot){try{let{animations:r,manifest:o,isDotLottie:i}=yield getAnimationData(e);if(!r||r.some(e=>!t._isLottie(e)))throw Error("Broken or corrupted file");t._isDotLottie=!!i,t._animations=r,t._manifest=null!=o?o:{animations:[{id:useId(),autoplay:t.autoplay,loop:t.loop,direction:t.direction,mode:t.mode,speed:t.speed}]},t._lottieInstance&&t._lottieInstance.destroy(),t._lottieInstance=l.loadAnimation(_object_spread_props(_object_spread({},t._getOptions()),{animationData:r[t._currentAnimation]}))}catch(e){t._errorMessage=handleErrors(e).message,t.currentState=PlayerState.Error,t.dispatchEvent(new CustomEvent(PlayerEvents.Error));return}t._addEventListeners(),t.setSpeed(t.speed),t.setDirection(null!==(r=t.direction)&&void 0!==r?r:1),t.setSubframe(!!t.subframe),t.autoplay&&(-1===t.direction&&t.seek("99%"),t.play())}})()}_addEventListeners(){this._lottieInstance&&(this._lottieInstance.addEventListener("enterFrame",()=>{if(this._lottieInstance){let{currentFrame:e,totalFrames:t}=this._lottieInstance;this._seeker=Math.floor(e/t*100),this.dispatchEvent(new CustomEvent(PlayerEvents.Frame,{detail:{frame:e,seeker:this._seeker}}))}}),this._lottieInstance.addEventListener("complete",()=>{var e,t;this.currentState=PlayerState.Completed,this.dispatchEvent(new CustomEvent(PlayerEvents.Complete)),(null===(e=this._animations)||void 0===e?void 0:e.length)>1&&this.autoplay&&this._currentAnimation<(null===(t=this._animations)||void 0===t?void 0:t.length)-1&&this.next()}),this._lottieInstance.addEventListener("loopComplete",()=>{var e,t,r;if(!this._lottieInstance)return;let{firstFrame:o,totalFrames:i,playDirection:n}=this._lottieInstance;if(this.count&&(this.mode===PlayMode.Bounce?this._playerState.count+=1:this._playerState.count+=.5,this._playerState.count>=this.count)){this.setLooping(!1),this.currentState=PlayerState.Completed,this.dispatchEvent(new CustomEvent(PlayerEvents.Complete));return}return(this.dispatchEvent(new CustomEvent(PlayerEvents.Loop)),this.mode===PlayMode.Bounce)?(null===(t=this._lottieInstance)||void 0===t||t.goToAndStop(-1===n?o:.99*i,!0),null===(r=this._lottieInstance)||void 0===r||r.setDirection(-1*n),setTimeout(()=>{var e;null===(e=this._lottieInstance)||void 0===e||e.play()},this.intermission)):(null===(e=this._lottieInstance)||void 0===e||e.goToAndStop(-1===n?.99*i:o,!0),setTimeout(()=>{var e;null===(e=this._lottieInstance)||void 0===e||e.play()},this.intermission))}),this._lottieInstance.addEventListener("DOMLoaded",()=>{this._playerState.loaded=!0,this.dispatchEvent(new CustomEvent(PlayerEvents.Ready))}),this._lottieInstance.addEventListener("data_ready",()=>{this.dispatchEvent(new CustomEvent(PlayerEvents.Load))}),this._lottieInstance.addEventListener("data_failed",()=>{this.currentState=PlayerState.Error,this.dispatchEvent(new CustomEvent(PlayerEvents.Error))}),this.container&&(this.container.addEventListener("mouseenter",()=>{this.hover&&this.currentState!==PlayerState.Playing&&this.play()}),this.container.addEventListener("mouseleave",()=>{this.hover&&this.currentState===PlayerState.Playing&&this.stop()})))}_onVisibilityChange(){document.hidden&&this.currentState===PlayerState.Playing?this._freeze():this.currentState===PlayerState.Frozen&&this.play()}_handleSeekChange({target:e}){!(!(e instanceof HTMLInputElement)||!this._lottieInstance||isNaN(Number(e.value)))&&(this.seek(Math.floor(Number(e.value)/100*this._lottieInstance.totalFrames)),setTimeout(()=>{e.parentElement instanceof HTMLFormElement&&e.parentElement.reset()},100))}_isLottie(e){return["v","ip","op","layers","fr","w","h"].every(t=>Object.prototype.hasOwnProperty.call(e,t))}addAnimation(e,t,r=!0){var o=this;return _async_to_generator(function*(){try{let i=o._manifest||{animations:[]},n=_object_spread_props(_object_spread({},i),{generator:pkg.name}),a=o._animations||[];for(let t of e){let{url:e}=t,{animations:r}=yield getAnimationData(e);if(!r)throw Error("No animation loaded");if(n.animations.some(({id:e})=>e===t.id))throw Error("Duplicate id for animation");n=_object_spread_props(_object_spread({},n),{animations:[...n.animations,t]}),a=[...a,...r]}return createDotLottie(a,n,t,r)}catch(e){console.error(handleErrors(e).message)}})()}getLottie(){return this._lottieInstance}play(){this._lottieInstance&&(this.currentState&&(this._playerState.prev=this.currentState),this._lottieInstance.play(),setTimeout(()=>{this.currentState=PlayerState.Playing},0),this.dispatchEvent(new CustomEvent(PlayerEvents.Play)))}pause(){this._lottieInstance&&(this.currentState&&(this._playerState.prev=this.currentState),this._lottieInstance.pause(),setTimeout(()=>{this.currentState=PlayerState.Paused},0),this.dispatchEvent(new CustomEvent(PlayerEvents.Pause)))}stop(){this._lottieInstance&&(this.currentState&&(this._playerState.prev=this.currentState),this._playerState.count=0,this._lottieInstance.stop(),setTimeout(()=>{this.currentState=PlayerState.Stopped},0),this.dispatchEvent(new CustomEvent(PlayerEvents.Stop)))}destroy(){this._lottieInstance&&(this.currentState=PlayerState.Destroyed,this._lottieInstance.destroy(),this._lottieInstance=null,this.dispatchEvent(new CustomEvent(PlayerEvents.Destroyed)),this.remove())}seek(e){if(!this._lottieInstance)return;let t=e.toString().match(/^([0-9]+)(%?)$/);if(!t)return;let r=Math.floor("%"===t[2]?this._lottieInstance.totalFrames*Number(t[1])/100:Number(t[1]));this._seeker=r,this.currentState===PlayerState.Playing||this.currentState===PlayerState.Frozen&&this._playerState.prev===PlayerState.Playing?(this._lottieInstance.goToAndPlay(r,!0),this.currentState=PlayerState.Playing):(this._lottieInstance.goToAndStop(r,!0),this._lottieInstance.pause())}snapshot(){if(!this.shadowRoot)return;let e=this.shadowRoot.querySelector(".animation svg"),t=e instanceof Node?new XMLSerializer().serializeToString(e):null;if(!t){console.error("Could not serialize data");return}return download(t,{name:`${getFilename(this.src)}-${frameOutput(this._seeker)}.svg`,mimeType:"image/svg+xml"}),t}setSubframe(e){this._lottieInstance&&(this.subframe=e,this._lottieInstance.setSubframe(e))}_freeze(){this._lottieInstance&&(this.currentState&&(this._playerState.prev=this.currentState),this._lottieInstance.pause(),setTimeout(()=>{this.currentState=PlayerState.Frozen},0),this.dispatchEvent(new CustomEvent(PlayerEvents.Freeze)))}reload(){var e=this;return _async_to_generator(function*(){e._lottieInstance&&(e._lottieInstance.destroy(),e.src&&(yield e.load(e.src)))})()}setSpeed(e=1){this._lottieInstance&&(this.speed=e,this._lottieInstance.setSpeed(e))}setDirection(e){this._lottieInstance&&(this.direction=e,this._lottieInstance.setDirection(e))}setLooping(e){this._lottieInstance&&(this.loop=e,this._lottieInstance.setLoop(e))}togglePlay(){if(!this._lottieInstance)return;let{currentFrame:e,playDirection:t,totalFrames:r}=this._lottieInstance;return this.currentState===PlayerState.Playing?this.pause():this.currentState===PlayerState.Completed?(this.currentState=PlayerState.Playing,this.mode===PlayMode.Bounce)?(this.setDirection(-1*t),this._lottieInstance.goToAndPlay(e,!0)):-1===t?this._lottieInstance.goToAndPlay(r,!0):this._lottieInstance.goToAndPlay(0,!0):this.play()}toggleLooping(){this.setLooping(!this.loop)}toggleBoomerang(){this.mode===PlayMode.Normal?this.mode=PlayMode.Bounce:this.mode=PlayMode.Normal}_toggleSettings(e){void 0===e?this._isSettingsOpen=!this._isSettingsOpen:this._isSettingsOpen=e}_switchInstance(){this._lottieInstance&&this._lottieInstance.destroy(),this._lottieInstance=l.loadAnimation(_object_spread_props(_object_spread({},this._getOptions()),{animationData:this._animations[this._currentAnimation]})),this._addEventListeners(),this.autoplay?(this._lottieInstance.goToAndPlay(0,!0),this.currentState=PlayerState.Playing):this._lottieInstance.goToAndStop(0,!0)}next(){this._currentAnimation++,this._switchInstance()}prev(){this._currentAnimation--,this._switchInstance()}convert(e,t,r,o,i=!0){if(e||this._isDotLottie)return;let n=t||this._manifest,a=_object_spread_props(_object_spread({},n),{generator:pkg.name});return createDotLottie(r||this._animations,a,`${getFilename(o||this.src)}.lottie`,i)}static get styles(){return styles}connectedCallback(){super.connectedCallback(),void 0!==document.hidden&&document.addEventListener("visibilitychange",this._onVisibilityChange)}firstUpdated(){var e=this;return _async_to_generator(function*(){"IntersectionObserver"in window&&(e._intersectionObserver=new IntersectionObserver(t=>{t[0].isIntersecting?document.hidden||e.currentState!==PlayerState.Frozen||e.play():e.currentState===PlayerState.Playing&&e._freeze()}),e._intersectionObserver.observe(e.container)),e.src&&(yield e.load(e.src)),e.dispatchEvent(new CustomEvent(PlayerEvents.Rendered))})()}disconnectedCallback(){super.disconnectedCallback(),this._intersectionObserver&&(this._intersectionObserver.disconnect(),this._intersectionObserver=void 0),this._lottieInstance&&this._lottieInstance.destroy(),document.removeEventListener("visibilitychange",this._onVisibilityChange)}renderControls(){var e,t;let i=this.currentState===PlayerState.Playing,n=this.currentState===PlayerState.Paused,a=this.currentState===PlayerState.Stopped,s=this.currentState===PlayerState.Error;return r`<div class="${`lottie-controls toolbar ${s?"has-error":""}`}" aria-label="Lottie Animation controls"><button @click="${this.togglePlay}" data-active="${i||n}" tabindex="0" aria-label="Toggle Play/Pause">${i?r`<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>`:r`<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 @click="${this.stop}" data-active="${a}" tabindex="0" aria-label="Stop"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M6 6h12v12H6V6z"/></svg></button> ${(null===(e=this._animations)||void 0===e?void 0:e.length)>1?r`${this._currentAnimation>0?r`<button @click="${this.prev}" tabindex="0" aria-label="Previous animation"><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>`:o} ${this._currentAnimation+1<(null===(t=this._animations)||void 0===t?void 0:t.length)?r`<button @click="${this.next}" tabindex="0" aria-label="Next animation"><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>`:o}`:o}<form class="progress-container${this.simple?" simple":""}"><input class="seeker" type="range" min="0" max="100" step="1" value="${this._seeker}" @change="${this._handleSeekChange}" @mousedown="${this._freeze}" aria-valuemin="0" aria-valuemax="100" role="slider" aria-valuenow="${this._seeker}" tabindex="0" aria-label="Slider for search"><progress min="0" max="100" value="${this._seeker}"></progress></form>${this.simple?o:r`<button @click="${this.toggleLooping}" data-active="${this.loop}" tabindex="0" aria-label="Toggle looping"><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 @click="${this.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 @click="${({target:e})=>{this._toggleSettings(),e instanceof HTMLElement&&e.focus()}}" @blur="${()=>setTimeout(()=>this._toggleSettings(!1),200)}" 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" style="display:${this._isSettingsOpen?"block":"none"}">${this._isDotLottie?o:r`<button @click="${this.convert}" aria-label="Convert JSON animation to dotLottie format" tabindex="0"><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 @click="${this.snapshot}" aria-label="Download still image" tabindex="0"><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>`}render(){var e,t,i;return r`<figure class="${"animation-container main"}" data-controls="${this.controls}" lang="${this.description?null===(t=document)||void 0===t?void 0:null===(e=t.documentElement)||void 0===e?void 0:e.lang:"en"}" role="img" aria-label="${null!==(i=this.description)&&void 0!==i?i:"Lottie animation"}" data-loaded="${this._playerState.loaded}"><div class="animation" style="background:${this.background}">${this.currentState===PlayerState.Error?r`<div class="error"><svg preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1920" height="1080" viewBox="0 0 1920 1080"><path fill="#fff" d="M0 0h1920v1080H0z"/><path fill="#3a6d8b" d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"/><path fill="none" d="M718.9 807.7h645v285.4h-645z"/><text fill="#3a6d8b" style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif" x="50%" y="848.017" text-anchor="middle">${this._errorMessage}</text></svg></div>`:o}</div>${this.controls?this.renderControls():o}</figure>`}constructor(...e){super(...e),this.background="transparent",this.controls=!1,this.currentState=PlayerState.Loading,this.direction=1,this.hover=!1,this.intermission=0,this.loop=!1,this.mode=PlayMode.Normal,this.objectfit="contain",this.renderer="svg",this.simple=!1,this.speed=1,this.subframe=!0,this._isSettingsOpen=!1,this._seeker=0,this._currentAnimation=0,this._lottieInstance=null,this._identifier=this.id||useId("dotlottie"),this._errorMessage="Something went wrong",this._isDotLottie=!1,this._playerState={prev:PlayerState.Loading,count:0,loaded:!1}}};_ts_decorate([i({type:Boolean,reflect:!0})],DotLottiePlayer.prototype,"autoplay",void 0),_ts_decorate([i({type:String})],DotLottiePlayer.prototype,"background",void 0),_ts_decorate([i({type:Boolean,reflect:!0})],DotLottiePlayer.prototype,"controls",void 0),_ts_decorate([i({type:Number})],DotLottiePlayer.prototype,"count",void 0),_ts_decorate([i({type:String})],DotLottiePlayer.prototype,"currentState",void 0),_ts_decorate([i({type:String})],DotLottiePlayer.prototype,"description",void 0),_ts_decorate([i({type:Number})],DotLottiePlayer.prototype,"direction",void 0),_ts_decorate([i({type:Boolean})],DotLottiePlayer.prototype,"hover",void 0),_ts_decorate([i({type:Number})],DotLottiePlayer.prototype,"intermission",void 0),_ts_decorate([i({type:Boolean,reflect:!0})],DotLottiePlayer.prototype,"loop",void 0),_ts_decorate([i({type:String})],DotLottiePlayer.prototype,"mode",void 0),_ts_decorate([i({type:String})],DotLottiePlayer.prototype,"objectfit",void 0),_ts_decorate([i({type:String})],DotLottiePlayer.prototype,"preserveAspectRatio",void 0),_ts_decorate([i({type:String})],DotLottiePlayer.prototype,"renderer",void 0),_ts_decorate([i({type:Array})],DotLottiePlayer.prototype,"segment",void 0),_ts_decorate([i({type:Boolean})],DotLottiePlayer.prototype,"simple",void 0),_ts_decorate([i({type:Number})],DotLottiePlayer.prototype,"speed",void 0),_ts_decorate([i({type:String})],DotLottiePlayer.prototype,"src",void 0),_ts_decorate([i({type:Boolean})],DotLottiePlayer.prototype,"subframe",void 0),_ts_decorate([n(".animation")],DotLottiePlayer.prototype,"container",void 0),_ts_decorate([a()],DotLottiePlayer.prototype,"_isSettingsOpen",void 0),_ts_decorate([a()],DotLottiePlayer.prototype,"_seeker",void 0),_ts_decorate([a()],DotLottiePlayer.prototype,"_currentAnimation",void 0),_ts_decorate([a()],DotLottiePlayer.prototype,"_animations",void 0),DotLottiePlayer=_ts_decorate([s("dotlottie-player")],DotLottiePlayer),globalThis.dotLottiePlayer=()=>new DotLottiePlayer;export{DotLottiePlayer,PlayMode,PlayerEvents,PlayerState};
+import { css, LitElement, html, nothing } from 'lit';
+import { property, query, state, customElement } from 'lit/decorators.js';
+import Lottie from 'lottie-web';
+import { zip, strFromU8, unzip as unzip$1 } from 'fflate';
+
+var PlayerState;
+(function(PlayerState) {
+    PlayerState["Completed"] = "completed";
+    PlayerState["Destroyed"] = "destroyed";
+    PlayerState["Error"] = "error";
+    PlayerState["Frozen"] = "frozen";
+    PlayerState["Loading"] = "loading";
+    PlayerState["Paused"] = "paused";
+    PlayerState["Playing"] = "playing";
+    PlayerState["Stopped"] = "stopped";
+})(PlayerState || (PlayerState = {}));
+var PlayMode;
+(function(PlayMode) {
+    PlayMode["Bounce"] = "bounce";
+    PlayMode["Normal"] = "normal";
+})(PlayMode || (PlayMode = {}));
+var PlayerEvents;
+(function(PlayerEvents) {
+    PlayerEvents["Complete"] = "complete";
+    PlayerEvents["Destroyed"] = "destroyed";
+    PlayerEvents["Error"] = "error";
+    PlayerEvents["Frame"] = "frame";
+    PlayerEvents["Freeze"] = "freeze";
+    PlayerEvents["Load"] = "load";
+    PlayerEvents["Loop"] = "loop";
+    PlayerEvents["Pause"] = "pause";
+    PlayerEvents["Play"] = "play";
+    PlayerEvents["Ready"] = "ready";
+    PlayerEvents["Rendered"] = "rendered";
+    PlayerEvents["Stop"] = "stop";
+})(PlayerEvents || (PlayerEvents = {}));
+class CustomError extends Error {
+}
+
+const addExt = (ext, str)=>{
+    if (!str) return;
+    if (getExt(str)) {
+        if (getExt(str) === ext) return str;
+        return `${getFilename(str)}.${ext}`;
+    }
+    return `${str}.${ext}`;
+}, aspectRatio = (objectFit)=>{
+    switch(objectFit){
+        case 'contain':
+        case 'scale-down':
+            return 'xMidYMid meet';
+        case 'cover':
+            return 'xMidYMid slice';
+        case 'fill':
+            return 'none';
+        case 'none':
+            return 'xMinYMin slice';
+        default:
+            return 'xMidYMid meet';
+    }
+}, /**
+   * Convert Base64 encoded string to Uint8Array
+   * @param { string } str Base64 encoded string
+   * @returns { Uint8Array} UTF-8/Latin-1 binary
+   */ base64ToU8 = (str)=>{
+    const parsedStr = str.substring(str.indexOf(',') + 1);
+    return strToU8(isServer() ? Buffer.from(parsedStr, 'base64').toString('binary') : atob(parsedStr));
+}, /**
+   * Convert a JSON Lottie to dotLottie or combine several animations and download new dotLottie file in your browser.
+   * @param { LottieJSON[] } animations The animations to combine.
+   * @param { LottieManifest } manifest Manifest of meta information.
+   * @param { string } filename Name of file to download. If not specified a random string will be generated.
+   * @param { boolean } triggerDownload Whether to trigger a download in the browser. Defaults to true.
+   */ createDotLottie = async (animations, manifest, filename, triggerDownload = true)=>{
+    try {
+        if (!animations?.length || !manifest) {
+            throw new Error(`Missing or malformed required parameter(s):\n ${!animations?.length ? '- animations\n' : ''} ${!manifest ? '- manifest \n' : ''}`);
+        }
+        const name = addExt('lottie', filename) || `${useId()}.lottie`, dotlottie = {
+            'manifest.json': [
+                strToU8(JSON.stringify(manifest)),
+                {
+                    level: 0
+                }
+            ]
+        };
+        for (const [i, animation] of animations.entries()){
+            if (animation.assets?.length) {
+                for (const asset of animation.assets){
+                    const { id, p } = asset;
+                    if (id && p) {
+                        const ext = getExtFromB64(p);
+                        asset.p = `${id}.${ext}`;
+                        asset.e = 0;
+                        dotlottie[`images/${id}.${ext}`] = [
+                            base64ToU8(p),
+                            {
+                                level: 9
+                            }
+                        ];
+                    }
+                }
+            }
+            dotlottie[`animations/${manifest.animations[i].id}.json`] = [
+                strToU8(JSON.stringify(animation)),
+                {
+                    level: 9
+                }
+            ];
+        }
+        const buffer = await getArrayBuffer(dotlottie);
+        return triggerDownload ? download(buffer, {
+            name,
+            mimeType: 'application/zip'
+        }) : buffer;
+    } catch (err) {
+        console.error(`❌ ${handleErrors(err).message}`);
+    }
+}, /**
+   * Download file, either SVG or dotLottie.
+   * @param { string } data The data to be downloaded
+   * @param { string } name Don't include file extension in the filename
+   */ download = (data, options)=>{
+    const blob = new Blob([
+        data
+    ], {
+        type: options?.mimeType
+    }), fileName = options?.name || useId(), dataURL = URL.createObjectURL(blob), link = document.createElement('a');
+    link.href = dataURL;
+    link.download = fileName;
+    link.hidden = true;
+    document.body.appendChild(link);
+    link.click();
+    setTimeout(()=>{
+        link.remove();
+        URL.revokeObjectURL(dataURL);
+    }, 1000);
+}, handleErrors = (err)=>{
+    const res = {
+        message: 'Unknown error',
+        status: isServer() ? 500 : 400
+    };
+    if (err && typeof err === 'object') {
+        if ('message' in err && typeof err.message === 'string') {
+            res.message = err.message;
+        }
+        if ('status' in err) {
+            res.status = Number(err.status);
+        }
+    }
+    return res;
+}, frameOutput = (frame)=>{
+    return ((frame ?? 0) + 1).toString().padStart(3, '0');
+}, getAnimationData = async (input)=>{
+    try {
+        if (!input || typeof input !== 'string' && typeof input !== 'object') {
+            throw new Error('Broken file or invalid file format');
+        }
+        if (typeof input !== 'string') {
+            const animations = Array.isArray(input) ? input : [
+                input
+            ];
+            return {
+                animations,
+                manifest: null
+            };
+        }
+        const result = await fetch(input);
+        if (!result.ok) {
+            const error = new CustomError(result.statusText);
+            error.status = result.status;
+            throw error;
+        }
+        /**
+       * Check if file is JSON, first by parsing file name for extension,
+       * then – if filename has no extension – by cloning the response
+       * and parsing it for content.
+       */ const ext = getExt(input);
+        if (ext === 'json' || !ext) {
+            if (ext) {
+                const lottie = await result.json();
+                return {
+                    animations: [
+                        lottie
+                    ],
+                    manifest: null
+                };
+            }
+            const text = await result.clone().text();
+            try {
+                const lottie = JSON.parse(text);
+                return {
+                    animations: [
+                        lottie
+                    ],
+                    manifest: null
+                };
+            } catch  {}
+        }
+        const { data, manifest } = await getLottieJSON(result);
+        return {
+            animations: data,
+            manifest,
+            isDotLottie: true
+        };
+    } catch (err) {
+        console.error(`❌ ${handleErrors(err).message}`);
+        return {
+            animations: null,
+            manifest: null
+        };
+    }
+}, getArrayBuffer = async (zippable)=>{
+    const arrayBuffer = await new Promise((resolve, reject)=>{
+        zip(zippable, {
+            level: 9
+        }, (err, data)=>{
+            if (err) {
+                reject(err);
+                return;
+            }
+            resolve(data.buffer);
+        });
+    });
+    return arrayBuffer;
+}, /**
+   * Get extension from filename, URL or path
+   * @param { string } str Filename, URL or path
+   */ getExt = (str)=>{
+    if (!str || !hasExt(str)) return;
+    return str.split('.').pop()?.toLowerCase();
+}, getExtFromB64 = (str)=>{
+    const mime = str.split(':')[1].split(';')[0];
+    return mime.split('/')[1].split('+')[0];
+}, /**
+   * Parse URL to get filename
+   * @param { string } src The url string
+   * @param { boolean } keepExt Whether to include file extension
+   * @returns { string } Filename, in lowercase
+   */ getFilename = (src, keepExt)=>{
+    // Because the regex strips all special characters, we need to extract the file extension, so we can add it later if we need it
+    const ext = getExt(src);
+    return `${src.replace(/\.[^.]*$/, '').replace(/\W+/g, '')}${keepExt && ext ? `.${ext}` : ''}`.toLowerCase();
+}, getLottieJSON = async (resp)=>{
+    const unzipped = await unzip(resp), manifest = getManifest(unzipped), data = [];
+    for (const { id } of manifest.animations){
+        const str = strFromU8(unzipped[`animations/${id}.json`]), lottie = JSON.parse(str);
+        await resolveAssets(unzipped, lottie.assets);
+        data.push(lottie);
+    }
+    return {
+        data,
+        manifest
+    };
+}, getManifest = (unzipped)=>{
+    const file = strFromU8(unzipped['manifest.json'], false), manifest = JSON.parse(file);
+    if (!('animations' in manifest)) throw new Error('Manifest not found');
+    if (!manifest.animations.length) throw new Error('No animations listed in manifest');
+    return manifest;
+}, getMimeFromExt = (ext)=>{
+    switch(ext){
+        case 'svg':
+        case 'svg+xml':
+            return 'image/svg+xml';
+        case 'jpg':
+        case 'jpeg':
+            return 'image/jpeg';
+        case 'png':
+        case 'gif':
+        case 'webp':
+            return `image/${ext}`;
+        case 'mp3':
+        case 'mpeg':
+        case 'wav':
+            return `audio/${ext}`;
+        default:
+            return '';
+    }
+}, hasExt = (path)=>{
+    const lastDotIndex = path?.split('/').pop()?.lastIndexOf('.');
+    return (lastDotIndex ?? 0) > 1 && path && path.length - 1 > (lastDotIndex ?? 0);
+}, isAudio = (asset)=>{
+    return !('h' in asset) && !('w' in asset) && 'p' in asset && 'e' in asset && 'u' in asset && 'id' in asset;
+}, isImage = (asset)=>{
+    return 'w' in asset && 'h' in asset && !('xt' in asset) && 'p' in asset;
+}, isServer = ()=>{
+    return !(typeof window !== 'undefined' && window.document);
+}, /**
+   * Convert string to Uint8Array
+   * @param { string } str Base64 encoded string
+   * @returns { Uint8Array} UTF-8/Latin-1 binary
+   */ strToU8 = (str)=>{
+    const u8 = new Uint8Array(str.length);
+    for(let i = 0; i < str.length; i++){
+        u8[i] = str.charCodeAt(i);
+    }
+    return u8;
+}, resolveAssets = async (unzipped, assets)=>{
+    if (!Array.isArray(assets)) return;
+    const toResolve = [];
+    for (const asset of assets){
+        if (!isAudio(asset) && !isImage(asset)) continue;
+        const type = isImage(asset) ? 'images' : 'audio', u8 = unzipped?.[`${type}/${asset.p}`];
+        if (!u8) continue;
+        toResolve.push(new Promise((resolveAsset)=>{
+            const assetB64 = isServer() ? Buffer.from(u8).toString('base64') : btoa(u8.reduce((dat, byte)=>dat + String.fromCharCode(byte), ''));
+            asset.p = `data:${getMimeFromExt(getExt(asset.p))};base64,${assetB64}`;
+            asset.e = 1;
+            asset.u = '';
+            resolveAsset();
+        }));
+    }
+    await Promise.all(toResolve);
+}, unzip = async (resp)=>{
+    const u8 = new Uint8Array(await resp.arrayBuffer()), unzipped = await new Promise((resolve, reject)=>{
+        unzip$1(u8, /*{ filter },*/ (err, file)=>{
+            if (err) {
+                reject(err);
+            }
+            resolve(file);
+        });
+    });
+    return unzipped;
+}, useId = (prefix)=>{
+    const s4 = ()=>{
+        return ((1 + Math.random()) * 0x10000 | 0).toString(16).substring(1);
+    };
+    return `${prefix ?? `:${s4()}`}-${s4()}`;
+};
+
+var name = "@aarsteinmedia/dotlottie-player";
+var version = "2.1.7";
+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: "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 license = "GPL-2.0-or-later";
+var scripts = {
+	build: "pnpm cleanup && rollup -c",
+	"build:types": "pnpm cleanup:types && tsc",
+	"build:cem": "npx cem analyze --config 'cem.config.mjs'",
+	prod: "pnpm build:types && pnpm build && pnpm build:cem",
+	dev: "pnpm cleanup && rollup -c --watch",
+	lint: "tsc && eslint . --ext .ts,.js",
+	"lint:fix": "eslint . --ext .ts,.js --fix",
+	"cleanup:types": "shx rm -rf types && shx mkdir types",
+	cleanup: "shx rm -rf dist && shx mkdir dist"
+};
+var dependencies = {
+	fflate: "^0.8.1",
+	lit: "^2.8.0",
+	"lottie-web": "^5.12.2"
+};
+var peerDependencies = {
+	"@types/react": ">= 16.0.0"
+};
+var devDependencies = {
+	"@custom-elements-manifest/analyzer": "^0.6.9",
+	"@rollup/plugin-commonjs": "^25.0.7",
+	"@rollup/plugin-json": "^6.0.1",
+	"@rollup/plugin-node-resolve": "^15.2.3",
+	"@rollup/plugin-replace": "^5.0.5",
+	"@swc/core": "^1.3.95",
+	"@types/node": "^20.8.10",
+	"@typescript-eslint/eslint-plugin": "^5.62.0",
+	"@typescript-eslint/parser": "^5.62.0",
+	eslint: "^8.52.0",
+	"eslint-plugin-lit": "^1.10.1",
+	rollup: "^3.29.4",
+	"rollup-plugin-dts": "^6.1.0",
+	"rollup-plugin-html-literals": "^1.1.8",
+	"rollup-plugin-summary": "^2.0.0",
+	"rollup-plugin-swc3": "^0.9.1",
+	shx: "^0.3.4",
+	"ts-lit-plugin": "^1.2.1",
+	typescript: "^5.2.2"
+};
+var customElements = "dist/custom-elements.json";
+var files = [
+	"dist",
+	"README.md"
+];
+var keywords = [
+	"lottie",
+	"dotlottie",
+	"animation",
+	"web component",
+	"component",
+	"lit-element",
+	"svg",
+	"vector",
+	"player"
+];
+var publishConfig = {
+	access: "public"
+};
+var engines = {
+	node: ">= 7.6.0"
+};
+var funding = {
+	type: "paypal",
+	url: "https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"
+};
+var pkg = {
+	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,
+	license: license,
+	scripts: scripts,
+	dependencies: dependencies,
+	peerDependencies: peerDependencies,
+	devDependencies: devDependencies,
+	customElements: customElements,
+	files: files,
+	keywords: keywords,
+	publishConfig: publishConfig,
+	engines: engines,
+	funding: funding
+};
+
+var styles = css`*{box-sizing:border-box}:host{--lottie-player-toolbar-height:35px;--lottie-player-toolbar-background-color:#FFF;--lottie-player-toolbar-icon-color:#000;--lottie-player-toolbar-icon-hover-color:#000;--lottie-player-toolbar-icon-active-color:#4285f4;--lottie-player-seeker-track-color:rgba(0, 0, 0, 0.2);--lottie-player-seeker-thumb-color:#4285f4;--lottie-player-seeker-display:block;display:block;width:100%;height:100%}@media (prefers-color-scheme:dark){:host{--lottie-player-toolbar-background-color:#000;--lottie-player-toolbar-icon-color:#FFF;--lottie-player-toolbar-icon-hover-color:#FFF;--lottie-player-seeker-track-color:rgba(255, 255, 255, 0.6)}}.main{display:flex;flex-direction:column;height:100%;width:100%;margin:0}.animation{width:100%;height:100%;display:flex}[data-controls=true] .animation{height:calc(100% - 35px)}.animation-container{position:relative}.popover{position:absolute;right:5px;bottom:40px;background-color:var(--lottie-player-toolbar-background-color);border-radius:5px;padding:10px 15px;border:solid 2px var(--lottie-player-toolbar-icon-color);animation:fadeIn .2s ease-in-out}.popover::before{content:"";right:10px;border:7px solid transparent;border-top-color:transparent;margin-right:-7px;height:0;width:0;position:absolute;pointer-events:none;top:100%;border-top-color:var(--lottie-player-toolbar-icon-color)}.toolbar{display:flex;align-items:center;justify-items:center;background:var(--lottie-player-toolbar-background-color);margin:0;height:35px;padding:5px;border-radius:5px;gap:5px}.toolbar.has-error{pointer-events:none;opacity:.5}.toolbar button{cursor:pointer;fill:var(--lottie-player-toolbar-icon-color);color:var(--lottie-player-toolbar-icon-color);display:flex;background:0 0;border:0;padding:0;outline:0;height:100%;margin:0;align-items:center;gap:5px;opacity:.9}.toolbar button:hover{opacity:1}.toolbar button[data-active=true]{opacity:1;fill:var(--lottie-player-toolbar-icon-active-color)}.toolbar button:disabled{opacity:.5}.toolbar button:focus{outline:0}.toolbar button svg{pointer-events:none}.toolbar button svg>*{fill:inherit}.toolbar button.disabled svg{display:none}.progress-container{position:relative;width:100%}.progress-container.simple{margin-right:12px}.seeker,.seeker::-webkit-slider-runnable-track,.seeker::-webkit-slider-thumb,progress{-webkit-appearance:none;appearance:none;outline:0}.seeker{width:100%;height:20px;border-radius:3px;border:0;cursor:pointer;background-color:transparent;display:var(--lottie-player-seeker-display);color:var(--lottie-player-seeker-thumb-color);margin:0;padding:7.5px 0;position:relative;z-index:1}progress{position:absolute;width:100%;height:5px;border-radius:3px;border:0;top:0;left:0;margin:7.5px 0;background-color:var(--lottie-player-seeker-track-color);pointer-events:none}::-moz-progress-bar{background-color:var(--lottie-player-seeker-thumb-color)}::-webkit-progress-inner-element{border-radius:3px;overflow:hidden}::-webkit-slider-runnable-track{background-color:transparent}::-webkit-progress-value{background-color:var(--lottie-player-seeker-thumb-color)}.seeker::-webkit-slider-thumb{height:15px;width:15px;border-radius:50%;border:0;background-color:var(--lottie-player-seeker-thumb-color);cursor:pointer;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:focus::-webkit-slider-thumb,.seeker:hover::-webkit-slider-thumb{transform:scale(1)}.seeker::-moz-range-progress{background-color:var(--lottie-player-seeker-thumb-color);height:5px;border-radius:3px}.seeker::-moz-range-thumb{height:15px;width:15px;border-radius:50%;background-color:var(--lottie-player-seeker-thumb-color);border:0;cursor:pointer;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:focus::-moz-range-thumb,.seeker:hover::-moz-range-thumb{transform:scale(1)}.seeker::-ms-track{width:100%;height:5px;cursor:pointer;background:0 0;border-color:transparent;color:transparent}.seeker::-ms-fill-upper{background:var(--lottie-player-seeker-track-color);border-radius:3px}.seeker::-ms-fill-lower{background-color:var(--lottie-player-seeker-thumb-color);border-radius:3px}.seeker::-ms-thumb{border:0;height:15px;width:15px;border-radius:50%;background:var(--lottie-player-seeker-thumb-color);cursor:pointer;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:focus::-ms-thumb,.seeker:hover::-ms-thumb{transform:scale(1)}.seeker:focus::-ms-fill-lower{background:var(--lottie-player-seeker-track-color)}.seeker:focus::-ms-fill-upper{background:var(--lottie-player-seeker-track-color)}.error{display:flex;margin:auto;justify-content:center;height:100%;align-items:center}.error svg{width:100%;height:auto}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}`;
+
+function _ts_decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof undefined === "function") r = undefined(decorators, target, key, desc);
+    else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+let DotLottiePlayer = class DotLottiePlayer extends LitElement {
+    /**
+   * Get options from props
+   * @returns { AnimationConfig }
+   */ _getOptions() {
+        const preserveAspectRatio = this.preserveAspectRatio ?? (this.objectfit && aspectRatio(this.objectfit)), initialSegment = !this.segment || this.segment.some((val)=>val < 0) ? undefined : this.segment.every((val)=>val > 0) ? [
+            this.segment[0] - 1,
+            this.segment[1] - 1
+        ] : this.segment, options = {
+            container: this.container,
+            loop: !!this.loop,
+            autoplay: !!this.autoplay,
+            renderer: this.renderer,
+            initialSegment,
+            rendererSettings: {
+                imagePreserveAspectRatio: preserveAspectRatio
+            }
+        };
+        switch(this.renderer){
+            case 'svg':
+                options.rendererSettings = {
+                    ...options.rendererSettings,
+                    hideOnTransparent: true,
+                    preserveAspectRatio,
+                    progressiveLoad: true
+                };
+                break;
+            case 'canvas':
+                options.rendererSettings = {
+                    ...options.rendererSettings,
+                    clearCanvas: true,
+                    preserveAspectRatio,
+                    progressiveLoad: true
+                };
+                break;
+            case 'html':
+                options.rendererSettings = {
+                    ...options.rendererSettings,
+                    hideOnTransparent: true
+                };
+        }
+        return options;
+    }
+    /**
+   * Initialize Lottie Web player
+   * @param { string | LottieJSON } src URL to lottie animation, or raw JSON data
+   */ async load(src) {
+        if (!this.shadowRoot) return;
+        // Load the resource
+        try {
+            const { animations, manifest, isDotLottie } = await getAnimationData(src);
+            if (!animations || animations.some((animation)=>!this._isLottie(animation))) {
+                throw new Error('Broken or corrupted file');
+            }
+            this._isDotLottie = !!isDotLottie;
+            this._animations = animations;
+            this._manifest = manifest ?? {
+                animations: [
+                    {
+                        id: useId(),
+                        autoplay: this.autoplay,
+                        loop: this.loop,
+                        direction: this.direction,
+                        mode: this.mode,
+                        speed: this.speed
+                    }
+                ]
+            };
+            // Clear previous animation, if any
+            if (this._lottieInstance) this._lottieInstance.destroy();
+            // Initialize lottie player and load animation
+            this._lottieInstance = Lottie.loadAnimation({
+                ...this._getOptions(),
+                animationData: animations[this._currentAnimation]
+            });
+        } catch (err) {
+            this._errorMessage = handleErrors(err).message;
+            this.currentState = PlayerState.Error;
+            this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
+            return;
+        }
+        this._addEventListeners();
+        // Set initial playback speed and direction
+        this.setSpeed(this.speed);
+        this.setDirection(this.direction ?? 1);
+        this.setSubframe(!!this.subframe);
+        // Start playing if autoplay is enabled
+        if (this.autoplay) {
+            if (this.direction === -1) this.seek('99%');
+            this.play();
+        }
+    }
+    /**
+   * Add event listeners
+   */ _addEventListeners() {
+        if (!this._lottieInstance) return;
+        // Calculate and save the current progress of the animation
+        this._lottieInstance.addEventListener('enterFrame', ()=>{
+            if (this._lottieInstance) {
+                const { currentFrame, totalFrames } = this._lottieInstance;
+                this._seeker = Math.floor(currentFrame / totalFrames * 100);
+                this.dispatchEvent(new CustomEvent(PlayerEvents.Frame, {
+                    detail: {
+                        frame: currentFrame,
+                        seeker: this._seeker
+                    }
+                }));
+            }
+        });
+        // Handle animation play complete
+        this._lottieInstance.addEventListener('complete', ()=>{
+            this.currentState = PlayerState.Completed;
+            this.dispatchEvent(new CustomEvent(PlayerEvents.Complete));
+            if (this._animations?.length > 1 && this.autoplay && this._currentAnimation < this._animations?.length - 1) {
+                this.next();
+            }
+        });
+        //Handle complete loop
+        const loopComplete = ()=>{
+            if (!this._lottieInstance) {
+                return;
+            }
+            const { firstFrame, totalFrames, playDirection } = this._lottieInstance;
+            if (this.count) {
+                this.mode === PlayMode.Bounce ? this._playerState.count += 1 : this._playerState.count += 0.5;
+                if (this._playerState.count >= this.count) {
+                    this.setLooping(false);
+                    this.currentState = PlayerState.Completed;
+                    this.dispatchEvent(new CustomEvent(PlayerEvents.Complete));
+                    return;
+                }
+            }
+            this.dispatchEvent(new CustomEvent(PlayerEvents.Loop));
+            if (this.mode === PlayMode.Bounce) {
+                this._lottieInstance?.goToAndStop(playDirection === -1 ? firstFrame : totalFrames * 0.99, true);
+                this._lottieInstance?.setDirection(playDirection * -1);
+                return setTimeout(()=>{
+                    this._lottieInstance?.play();
+                }, this.intermission);
+            }
+            this._lottieInstance?.goToAndStop(playDirection === -1 ? totalFrames * 0.99 : firstFrame, true);
+            return setTimeout(()=>{
+                this._lottieInstance?.play();
+            }, this.intermission);
+        };
+        this._lottieInstance.addEventListener('loopComplete', loopComplete);
+        // Handle lottie-web ready event
+        this._lottieInstance.addEventListener('DOMLoaded', ()=>{
+            this._playerState.loaded = true;
+            this.dispatchEvent(new CustomEvent(PlayerEvents.Ready));
+        });
+        // Handle animation data load complete
+        this._lottieInstance.addEventListener('data_ready', ()=>{
+            this.dispatchEvent(new CustomEvent(PlayerEvents.Load));
+        });
+        // Set error state when animation load fail event triggers
+        this._lottieInstance.addEventListener('data_failed', ()=>{
+            this.currentState = PlayerState.Error;
+            this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
+        });
+        if (this.container) {
+            // Set handlers to auto play animation on hover if enabled
+            this.container.addEventListener('mouseenter', ()=>{
+                if (this.hover && this.currentState !== PlayerState.Playing) {
+                    this.play();
+                }
+            });
+            this.container.addEventListener('mouseleave', ()=>{
+                if (this.hover && this.currentState === PlayerState.Playing) {
+                    this.stop();
+                }
+            });
+        }
+    }
+    /**
+   * Handle visibility change events
+   */ _onVisibilityChange() {
+        if (document.hidden && this.currentState === PlayerState.Playing) {
+            this._freeze();
+        } else if (this.currentState === PlayerState.Frozen) {
+            this.play();
+        }
+    }
+    /**
+   * Handles click and drag actions on the progress track
+   * @param { Event & { HTMLInputElement } } event
+   */ _handleSeekChange({ target }) {
+        if (!(target instanceof HTMLInputElement) || !this._lottieInstance || isNaN(Number(target.value))) return;
+        this.seek(Math.floor(Number(target.value) / 100 * this._lottieInstance.totalFrames));
+        setTimeout(()=>{
+            if (target.parentElement instanceof HTMLFormElement) {
+                target.parentElement.reset();
+            }
+        }, 100);
+    }
+    _isLottie(json) {
+        const mandatory = [
+            'v',
+            'ip',
+            'op',
+            'layers',
+            'fr',
+            'w',
+            'h'
+        ];
+        return mandatory.every((field)=>Object.prototype.hasOwnProperty.call(json, field));
+    }
+    /**
+   * Creates a new dotLottie file, by combinig several animations
+   * @param { Config } configs
+   * @param { string } fileName
+   * @param { boolean } triggerDownload Whether to trigger a download in the browser.
+   * If set to false the function returns an ArrayBuffer. Defaults to true.
+   */ async addAnimation(configs, fileName, triggerDownload = true) {
+        try {
+            const oldManifest = this._manifest || {
+                animations: []
+            };
+            let manifest = {
+                ...oldManifest,
+                generator: pkg.name
+            }, animations = this._animations || [];
+            for (const config of configs){
+                const { url } = config, { animations: animationsToAdd } = await getAnimationData(url);
+                if (!animationsToAdd) {
+                    throw new Error('No animation loaded');
+                }
+                if (manifest.animations.some(({ id })=>id === config.id)) {
+                    throw new Error('Duplicate id for animation');
+                }
+                manifest = {
+                    ...manifest,
+                    animations: [
+                        ...manifest.animations,
+                        config
+                    ]
+                };
+                animations = [
+                    ...animations,
+                    ...animationsToAdd
+                ];
+            }
+            return createDotLottie(animations, manifest, fileName, triggerDownload);
+        } catch (err) {
+            console.error(handleErrors(err).message);
+        }
+    }
+    /**
+   * Returns the lottie-web instance used in the component
+   */ getLottie() {
+        return this._lottieInstance;
+    }
+    /**
+   * Play
+   */ play() {
+        if (!this._lottieInstance) return;
+        if (this.currentState) {
+            this._playerState.prev = this.currentState;
+        }
+        this._lottieInstance.play();
+        setTimeout(()=>{
+            this.currentState = PlayerState.Playing;
+        }, 0);
+        this.dispatchEvent(new CustomEvent(PlayerEvents.Play));
+    }
+    /**
+   * Pause
+   */ pause() {
+        if (!this._lottieInstance) return;
+        if (this.currentState) {
+            this._playerState.prev = this.currentState;
+        }
+        this._lottieInstance.pause();
+        setTimeout(()=>{
+            this.currentState = PlayerState.Paused;
+        }, 0);
+        this.dispatchEvent(new CustomEvent(PlayerEvents.Pause));
+    }
+    /**
+   * Stop
+   */ stop() {
+        if (!this._lottieInstance) return;
+        if (this.currentState) {
+            this._playerState.prev = this.currentState;
+        }
+        this._playerState.count = 0;
+        this._lottieInstance.stop();
+        setTimeout(()=>{
+            this.currentState = PlayerState.Stopped;
+        }, 0);
+        this.dispatchEvent(new CustomEvent(PlayerEvents.Stop));
+    }
+    /**
+   * Destroy animation and element
+   */ destroy() {
+        if (!this._lottieInstance) return;
+        this.currentState = PlayerState.Destroyed;
+        this._lottieInstance.destroy();
+        this._lottieInstance = null;
+        this.dispatchEvent(new CustomEvent(PlayerEvents.Destroyed));
+        this.remove();
+    }
+    /**
+   * Seek to a given frame
+   * @param { number | string } value Frame to seek to
+   */ seek(value) {
+        if (!this._lottieInstance) return;
+        // Extract frame number from either number or percentage value
+        const matches = value.toString().match(/^([0-9]+)(%?)$/);
+        if (!matches) {
+            return;
+        }
+        // Calculate and set the frame number
+        const frame = Math.floor(matches[2] === '%' ? this._lottieInstance.totalFrames * Number(matches[1]) / 100 : Number(matches[1]));
+        // Set seeker to new frame number
+        this._seeker = frame;
+        // Send lottie player to the new frame
+        if (this.currentState === PlayerState.Playing || this.currentState === PlayerState.Frozen && this._playerState.prev === PlayerState.Playing) {
+            this._lottieInstance.goToAndPlay(frame, true);
+            this.currentState = PlayerState.Playing;
+        } else {
+            this._lottieInstance.goToAndStop(frame, true);
+            this._lottieInstance.pause();
+        }
+    }
+    /**
+   * Snapshot and download the current frame as SVG
+   */ snapshot() {
+        if (!this.shadowRoot) return;
+        // Get SVG element and serialize markup
+        const svgElement = this.shadowRoot.querySelector('.animation svg'), data = svgElement instanceof Node ? new XMLSerializer().serializeToString(svgElement) : null;
+        if (!data) {
+            console.error('Could not serialize data');
+            return;
+        }
+        download(data, {
+            name: `${getFilename(this.src)}-${frameOutput(this._seeker)}.svg`,
+            mimeType: 'image/svg+xml'
+        });
+        return data;
+    }
+    /**
+   * Toggles subframe, for more smooth animations
+   * @param { boolean } value Whether animation uses subframe
+   */ setSubframe(value) {
+        if (!this._lottieInstance) return;
+        this.subframe = value;
+        this._lottieInstance.setSubframe(value);
+    }
+    /**
+   * Freeze animation.
+   * This internal state pauses animation and is used to differentiate between
+   * user requested pauses and component instigated pauses.
+   */ _freeze() {
+        if (!this._lottieInstance) return;
+        if (this.currentState) {
+            this._playerState.prev = this.currentState;
+        }
+        this._lottieInstance.pause();
+        setTimeout(()=>{
+            this.currentState = PlayerState.Frozen;
+        }, 0);
+        this.dispatchEvent(new CustomEvent(PlayerEvents.Freeze));
+    }
+    /**
+   * Reload animation
+   */ async reload() {
+        if (!this._lottieInstance) return;
+        this._lottieInstance.destroy();
+        if (this.src) {
+            await this.load(this.src);
+        }
+    }
+    /**
+   * Set animation playback speed
+   * @param { number } value Playback speed
+   */ setSpeed(value = 1) {
+        if (!this._lottieInstance) return;
+        this.speed = value;
+        this._lottieInstance.setSpeed(value);
+    }
+    /**
+   * Animation play direction
+   * @param { AnimationDirection } value Animation direction
+   */ setDirection(value) {
+        if (!this._lottieInstance) return;
+        this.direction = value;
+        this._lottieInstance.setDirection(value);
+    }
+    /**
+   * Set loop
+   * @param { boolean } value
+   */ setLooping(value) {
+        if (this._lottieInstance) {
+            this.loop = value;
+            this._lottieInstance.setLoop(value);
+        }
+    }
+    /**
+   * Toggle playing state
+   */ togglePlay() {
+        if (!this._lottieInstance) return;
+        const { currentFrame, playDirection, totalFrames } = this._lottieInstance;
+        if (this.currentState === PlayerState.Playing) {
+            return this.pause();
+        }
+        if (this.currentState === PlayerState.Completed) {
+            this.currentState = PlayerState.Playing;
+            if (this.mode === PlayMode.Bounce) {
+                this.setDirection(playDirection * -1);
+                return this._lottieInstance.goToAndPlay(currentFrame, true);
+            }
+            if (playDirection === -1) {
+                return this._lottieInstance.goToAndPlay(totalFrames, true);
+            }
+            return this._lottieInstance.goToAndPlay(0, true);
+        }
+        return this.play();
+    }
+    /**
+   * Toggle loop
+   */ toggleLooping() {
+        this.setLooping(!this.loop);
+    }
+    /**
+   * Toggle Boomerang
+   */ toggleBoomerang() {
+        if (this.mode === PlayMode.Normal) {
+            this.mode = PlayMode.Bounce;
+        } else {
+            this.mode = PlayMode.Normal;
+        }
+    }
+    /**
+   * Toggle show Settings
+   */ _toggleSettings(flag) {
+        if (flag === undefined) {
+            this._isSettingsOpen = !this._isSettingsOpen;
+        } else {
+            this._isSettingsOpen = flag;
+        }
+    }
+    /**
+   * Handle blur
+   */ _handleBlur() {
+        setTimeout(()=>this._toggleSettings(false), 200);
+    }
+    _switchInstance() {
+        // Clear previous animation
+        if (this._lottieInstance) this._lottieInstance.destroy();
+        // Re-initialize lottie player
+        this._lottieInstance = Lottie.loadAnimation({
+            ...this._getOptions(),
+            animationData: this._animations[this._currentAnimation]
+        });
+        // Add event listeners to new Lottie instance
+        this._addEventListeners();
+        if (this.autoplay) {
+            this._lottieInstance?.goToAndPlay(0, true);
+            this.currentState = PlayerState.Playing;
+        } else {
+            this._lottieInstance?.goToAndStop(0, true);
+        }
+    }
+    /**
+   * Skip to next animation
+   */ next() {
+        this._currentAnimation++;
+        this._switchInstance();
+    }
+    /**
+   * Skip to previous animation
+   */ prev() {
+        this._currentAnimation--;
+        this._switchInstance();
+    }
+    /**
+   * Convert JSON Lottie to dotLottie
+   * @param { boolean | undefined } typeCheck External type safety
+   * @param { LottieManifest | undefined } manifest Externally added manifest
+   * @param { LottieJSON[] | undefined } animations Externally added animations
+   * @param { boolean } download Whether to trigger a download in the browser
+   */ convert(typeCheck, manifest, animations, fileName, download = true) {
+        if (typeCheck || this._isDotLottie) return;
+        const oldManifest = manifest || this._manifest, newManifest = {
+            ...oldManifest,
+            generator: pkg.name
+        };
+        return createDotLottie(animations || this._animations, newManifest, `${getFilename(fileName || this.src)}.lottie`, download);
+    }
+    /**
+   * Return the styles for the component
+   * @returns { CSSResult }
+   */ static get styles() {
+        return styles;
+    }
+    /**
+   * Initialize everything on component first render
+   */ connectedCallback() {
+        super.connectedCallback();
+        // Add listener for Visibility API's change event.
+        if (typeof document.hidden !== 'undefined') {
+            document.addEventListener('visibilitychange', this._onVisibilityChange);
+        }
+    }
+    async firstUpdated() {
+        // Add intersection observer for detecting component being out-of-view.
+        if ('IntersectionObserver' in window) {
+            this._intersectionObserver = new IntersectionObserver((entries)=>{
+                if (entries[0].isIntersecting) {
+                    if (!document.hidden && this.currentState === PlayerState.Frozen) {
+                        this.play();
+                    }
+                } else if (this.currentState === PlayerState.Playing) {
+                    this._freeze();
+                }
+            });
+            this._intersectionObserver.observe(this.container);
+        }
+        // Setup lottie player
+        if (this.src) {
+            await this.load(this.src);
+        }
+        this.dispatchEvent(new CustomEvent(PlayerEvents.Rendered));
+    }
+    /**
+   * Cleanup on component destroy
+   */ disconnectedCallback() {
+        super.disconnectedCallback();
+        // Remove intersection observer for detecting component being out-of-view
+        if (this._intersectionObserver) {
+            this._intersectionObserver.disconnect();
+            this._intersectionObserver = undefined;
+        }
+        // Destroy the animation instance
+        if (this._lottieInstance) this._lottieInstance.destroy();
+        // Remove the attached Visibility API's change event listener
+        document.removeEventListener('visibilitychange', this._onVisibilityChange);
+    }
+    renderControls() {
+        const isPlaying = this.currentState === PlayerState.Playing, isPaused = this.currentState === PlayerState.Paused, isStopped = this.currentState === PlayerState.Stopped, isError = this.currentState === PlayerState.Error;
+        return html`<div class="${`lottie-controls toolbar ${isError ? 'has-error' : ''}`}" aria-label="Lottie Animation controls"><button @click="${this.togglePlay}" data-active="${isPlaying || isPaused}" tabindex="0" aria-label="Toggle Play/Pause">${isPlaying ? html`<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>` : html`<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 @click="${this.stop}" data-active="${isStopped}" tabindex="0" aria-label="Stop"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M6 6h12v12H6V6z"/></svg></button> ${this._animations?.length > 1 ? html`${this._currentAnimation > 0 ? html`<button @click="${this.prev}" tabindex="0" aria-label="Previous animation"><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>` : nothing} ${this._currentAnimation + 1 < this._animations?.length ? html`<button @click="${this.next}" tabindex="0" aria-label="Next animation"><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>` : nothing}` : nothing}<form class="progress-container${this.simple ? ' simple' : ''}"><input class="seeker" type="range" min="0" max="100" step="1" value="${this._seeker}" @change="${this._handleSeekChange}" @mousedown="${this._freeze}" aria-valuemin="0" aria-valuemax="100" role="slider" aria-valuenow="${this._seeker}" tabindex="0" aria-label="Slider for search"><progress max="100" value="${this._seeker}"></progress></form>${this.simple ? nothing : html`<button @click="${this.toggleLooping}" data-active="${this.loop ?? nothing}" tabindex="0" aria-label="Toggle looping"><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 @click="${this.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 @click="${this._handleSettingsClick}" @blur="${this._handleBlur}" 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" style="display:${this._isSettingsOpen ? 'block' : 'none'}">${this._isDotLottie ? nothing : html`<button @click="${this.convert}" aria-label="Convert JSON animation to dotLottie format" tabindex="0"><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 @click="${this.snapshot}" aria-label="Download still image" tabindex="0"><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>`;
+    }
+    render() {
+        return html`<figure class="${'animation-container main'}" data-controls="${this.controls ?? nothing}" lang="${this.description ? document?.documentElement?.lang : 'en'}" role="img" aria-label="${this.description ?? 'Lottie animation'}" data-loaded="${this._playerState.loaded}"><div class="animation" style="background:${this.background}">${this.currentState === PlayerState.Error ? html`<div class="error"><svg preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1920" height="1080" viewBox="0 0 1920 1080"><path fill="#fff" d="M0 0h1920v1080H0z"/><path fill="#3a6d8b" d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"/><path fill="none" d="M718.9 807.7h645v285.4h-645z"/><text fill="#3a6d8b" style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif" x="50%" y="848.017" text-anchor="middle">${this._errorMessage}</text></svg></div>` : nothing}</div>${this.controls ? this.renderControls() : nothing}</figure>`;
+    }
+    constructor(...args){
+        super(...args);
+        /**
+   * Background color
+   */ this.background = 'transparent';
+        /**
+   * Display controls
+   */ this.controls = false;
+        /**
+   * Player state
+   */ this.currentState = PlayerState.Loading;
+        /**
+   * Direction of animation
+   */ this.direction = 1;
+        /**
+   * Whether to play on mouseover
+   */ this.hover = false;
+        /**
+   * Intermission
+   */ this.intermission = 0;
+        /**
+   * Whether to loop
+   */ this.loop = false;
+        /**
+   * Play mode
+   */ this.mode = PlayMode.Normal;
+        /**
+   * Resizing to container
+  */ this.objectfit = 'contain';
+        /**
+   * Renderer to use (svg, canvas or html)
+   */ this.renderer = 'svg';
+        /**
+   * Hide advanced controls
+   */ this.simple = false;
+        /**
+   * Speed
+   */ this.speed = 1;
+        /**
+   * Subframe
+   */ this.subframe = true;
+        /**
+   * Whether settings toolbar is open
+   */ this._isSettingsOpen = false;
+        /**
+   * Seeker
+   */ this._seeker = 0;
+        /**
+   * Which animation to show, if several
+   */ this._currentAnimation = 0;
+        this._lottieInstance = null;
+        this._identifier = this.id || useId('dotlottie');
+        this._errorMessage = 'Something went wrong';
+        this._isDotLottie = false;
+        this._playerState = {
+            prev: PlayerState.Loading,
+            count: 0,
+            loaded: false
+        };
+        /**
+   * Handle settings click event
+   */ this._handleSettingsClick = ({ target })=>{
+            this._toggleSettings();
+            // Because Safari does not add focus on click, we need to add it manually, so the onblur event will fire
+            if (target instanceof HTMLElement) {
+                target.focus();
+            }
+        };
+    }
+};
+_ts_decorate([
+    property({
+        type: Boolean,
+        reflect: true
+    })
+], DotLottiePlayer.prototype, "autoplay", void 0);
+_ts_decorate([
+    property({
+        type: String
+    })
+], DotLottiePlayer.prototype, "background", void 0);
+_ts_decorate([
+    property({
+        type: Boolean,
+        reflect: true
+    })
+], DotLottiePlayer.prototype, "controls", void 0);
+_ts_decorate([
+    property({
+        type: Number
+    })
+], DotLottiePlayer.prototype, "count", void 0);
+_ts_decorate([
+    property({
+        type: String
+    })
+], DotLottiePlayer.prototype, "currentState", void 0);
+_ts_decorate([
+    property({
+        type: String
+    })
+], DotLottiePlayer.prototype, "description", void 0);
+_ts_decorate([
+    property({
+        type: Number
+    })
+], DotLottiePlayer.prototype, "direction", void 0);
+_ts_decorate([
+    property({
+        type: Boolean
+    })
+], DotLottiePlayer.prototype, "hover", void 0);
+_ts_decorate([
+    property({
+        type: Number
+    })
+], DotLottiePlayer.prototype, "intermission", void 0);
+_ts_decorate([
+    property({
+        type: Boolean,
+        reflect: true
+    })
+], DotLottiePlayer.prototype, "loop", void 0);
+_ts_decorate([
+    property({
+        type: String
+    })
+], DotLottiePlayer.prototype, "mode", void 0);
+_ts_decorate([
+    property({
+        type: String
+    })
+], DotLottiePlayer.prototype, "objectfit", void 0);
+_ts_decorate([
+    property({
+        type: String
+    })
+], DotLottiePlayer.prototype, "preserveAspectRatio", void 0);
+_ts_decorate([
+    property({
+        type: String
+    })
+], DotLottiePlayer.prototype, "renderer", void 0);
+_ts_decorate([
+    property({
+        type: Array
+    })
+], DotLottiePlayer.prototype, "segment", void 0);
+_ts_decorate([
+    property({
+        type: Boolean
+    })
+], DotLottiePlayer.prototype, "simple", void 0);
+_ts_decorate([
+    property({
+        type: Number
+    })
+], DotLottiePlayer.prototype, "speed", void 0);
+_ts_decorate([
+    property({
+        type: String
+    })
+], DotLottiePlayer.prototype, "src", void 0);
+_ts_decorate([
+    property({
+        type: Boolean
+    })
+], DotLottiePlayer.prototype, "subframe", void 0);
+_ts_decorate([
+    query('.animation')
+], DotLottiePlayer.prototype, "container", void 0);
+_ts_decorate([
+    state()
+], DotLottiePlayer.prototype, "_isSettingsOpen", void 0);
+_ts_decorate([
+    state()
+], DotLottiePlayer.prototype, "_seeker", void 0);
+_ts_decorate([
+    state()
+], DotLottiePlayer.prototype, "_currentAnimation", void 0);
+_ts_decorate([
+    state()
+], DotLottiePlayer.prototype, "_animations", void 0);
+DotLottiePlayer = _ts_decorate([
+    customElement('dotlottie-player')
+], DotLottiePlayer);
+
+/**
+ * Expose DotLottiePlayer class as global variable
+ * @returns { DotLottiePlayer }
+ */ globalThis.dotLottiePlayer = ()=>new DotLottiePlayer();
+
+export { DotLottiePlayer, PlayMode, PlayerEvents, PlayerState };