@aarsteinmedia/dotlottie-player 2.1.6 → 2.1.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/dist/cjs/index.js CHANGED
@@ -1,2 +1,1199 @@
1
- "use strict";var lit=require("lit"),decorators_js=require("lit/decorators.js"),Lottie=require("lottie-web"),fflate=require("fflate");exports.PlayerState=void 0,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"}(exports.PlayerState||(exports.PlayerState={})),exports.PlayMode=void 0,function(e){e.Bounce="bounce",e.Normal="normal"}(exports.PlayMode||(exports.PlayMode={})),exports.PlayerEvents=void 0,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"}(exports.PlayerEvents||(exports.PlayerEvents={}));class CustomError extends Error{}function asyncGeneratorStep$1(e,t,r,o,i,s,n){try{var a=e[s](n),l=a.value}catch(e){r(e);return}a.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 s=e.apply(t,r);function n(e){asyncGeneratorStep$1(s,o,i,n,a,"next",e)}function a(e){asyncGeneratorStep$1(s,o,i,n,a,"throw",e)}n(void 0)})}}const 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):
2
- ${(null==e?void 0:e.length)?"":"- animations\n"} ${t?"":"- manifest \n"}`);let s=addExt("lottie",r)||`${useId()}.lottie`,n={"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,n[`images/${t}.${o}`]=[base64ToU8(r),{level:9}]}}n[`animations/${t.animations[r].id}.json`]=[strToU8(JSON.stringify(o)),{level:9}]}let a=yield getArrayBuffer(n);return o?download(a,{name:s,mimeType:"application/zip"}):a}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),s=document.createElement("a");s.href=i,s.download=o,s.hidden=!0,document.body.appendChild(s),s.click(),setTimeout(()=>{s.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)=>{fflate.zip(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=fflate.strFromU8(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=fflate.strFromU8(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)=>{fflate.unzip(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 name="@aarsteinmedia/dotlottie-player",version="2.1.6",description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player",exports$1={".":{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$1="./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$1,main:main,unpkg:unpkg,module:module$1,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=lit.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 asyncGeneratorStep(e,t,r,o,i,s,n){try{var a=e[s](n),l=a.value}catch(e){r(e);return}a.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 s=e.apply(t,r);function n(e){asyncGeneratorStep(s,o,i,n,a,"next",e)}function a(e){asyncGeneratorStep(s,o,i,n,a,"throw",e)}n(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,s=arguments.length,n=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o,a=e.length-1;a>=0;a--)(i=e[a])&&(n=(s<3?i(n):s>3?i(t,r,n):i(t,r))||n);return s>3&&n&&Object.defineProperty(t,r,n),n}exports.DotLottiePlayer=class extends lit.LitElement{_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=Lottie.loadAnimation(_object_spread_props(_object_spread({},t._getOptions()),{animationData:r[t._currentAnimation]}))}catch(e){t._errorMessage=handleErrors(e).message,t.currentState=exports.PlayerState.Error,t.dispatchEvent(new CustomEvent(exports.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(exports.PlayerEvents.Frame,{detail:{frame:e,seeker:this._seeker}}))}}),this._lottieInstance.addEventListener("complete",()=>{var e,t;this.currentState=exports.PlayerState.Completed,this.dispatchEvent(new CustomEvent(exports.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:s}=this._lottieInstance;if(this.count&&(this.mode===exports.PlayMode.Bounce?this._playerState.count+=1:this._playerState.count+=.5,this._playerState.count>=this.count)){this.setLooping(!1),this.currentState=exports.PlayerState.Completed,this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Complete));return}return(this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Loop)),this.mode===exports.PlayMode.Bounce)?(null===(t=this._lottieInstance)||void 0===t||t.goToAndStop(-1===s?o:.99*i,!0),null===(r=this._lottieInstance)||void 0===r||r.setDirection(-1*s),setTimeout(()=>{var e;null===(e=this._lottieInstance)||void 0===e||e.play()},this.intermission)):(null===(e=this._lottieInstance)||void 0===e||e.goToAndStop(-1===s?.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(exports.PlayerEvents.Ready))}),this._lottieInstance.addEventListener("data_ready",()=>{this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Load))}),this._lottieInstance.addEventListener("data_failed",()=>{this.currentState=exports.PlayerState.Error,this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Error))}),this.container&&(this.container.addEventListener("mouseenter",()=>{this.hover&&this.currentState!==exports.PlayerState.Playing&&this.play()}),this.container.addEventListener("mouseleave",()=>{this.hover&&this.currentState===exports.PlayerState.Playing&&this.stop()})))}_onVisibilityChange(){document.hidden&&this.currentState===exports.PlayerState.Playing?this._freeze():this.currentState===exports.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:[]},s=_object_spread_props(_object_spread({},i),{generator:pkg.name}),n=o._animations||[];for(let t of e){let{url:e}=t,{animations:r}=yield getAnimationData(e);if(!r)throw Error("No animation loaded");if(s.animations.some(({id:e})=>e===t.id))throw Error("Duplicate id for animation");s=_object_spread_props(_object_spread({},s),{animations:[...s.animations,t]}),n=[...n,...r]}return createDotLottie(n,s,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=exports.PlayerState.Playing},0),this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Play)))}pause(){this._lottieInstance&&(this.currentState&&(this._playerState.prev=this.currentState),this._lottieInstance.pause(),setTimeout(()=>{this.currentState=exports.PlayerState.Paused},0),this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Pause)))}stop(){this._lottieInstance&&(this.currentState&&(this._playerState.prev=this.currentState),this._playerState.count=0,this._lottieInstance.stop(),setTimeout(()=>{this.currentState=exports.PlayerState.Stopped},0),this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Stop)))}destroy(){this._lottieInstance&&(this.currentState=exports.PlayerState.Destroyed,this._lottieInstance.destroy(),this._lottieInstance=null,this.dispatchEvent(new CustomEvent(exports.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===exports.PlayerState.Playing||this.currentState===exports.PlayerState.Frozen&&this._playerState.prev===exports.PlayerState.Playing?(this._lottieInstance.goToAndPlay(r,!0),this.currentState=exports.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=exports.PlayerState.Frozen},0),this.dispatchEvent(new CustomEvent(exports.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===exports.PlayerState.Playing?this.pause():this.currentState===exports.PlayerState.Completed?(this.currentState=exports.PlayerState.Playing,this.mode===exports.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===exports.PlayMode.Normal?this.mode=exports.PlayMode.Bounce:this.mode=exports.PlayMode.Normal}_toggleSettings(e){void 0===e?this._isSettingsOpen=!this._isSettingsOpen:this._isSettingsOpen=e}_switchInstance(){this._lottieInstance&&this._lottieInstance.destroy(),this._lottieInstance=Lottie.loadAnimation(_object_spread_props(_object_spread({},this._getOptions()),{animationData:this._animations[this._currentAnimation]})),this._addEventListeners(),this.autoplay?(this._lottieInstance.goToAndPlay(0,!0),this.currentState=exports.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 s=t||this._manifest,n=_object_spread_props(_object_spread({},s),{generator:pkg.name});return createDotLottie(r||this._animations,n,`${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!==exports.PlayerState.Frozen||e.play():e.currentState===exports.PlayerState.Playing&&e._freeze()}),e._intersectionObserver.observe(e.container)),e.src&&(yield e.load(e.src)),e.dispatchEvent(new CustomEvent(exports.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 r=this.currentState===exports.PlayerState.Playing,o=this.currentState===exports.PlayerState.Paused,i=this.currentState===exports.PlayerState.Stopped,s=this.currentState===exports.PlayerState.Error;return lit.html`<div class="${`lottie-controls toolbar ${s?"has-error":""}`}" aria-label="Lottie Animation controls"><button @click="${this.togglePlay}" data-active="${r||o}" tabindex="0" aria-label="Toggle Play/Pause">${r?lit.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>`:lit.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="${i}" 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?lit.html`${this._currentAnimation>0?lit.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>`:lit.nothing} ${this._currentAnimation+1<(null===(t=this._animations)||void 0===t?void 0:t.length)?lit.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>`:lit.nothing}`:lit.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 min="0" max="100" value="${this._seeker}"></progress></form>${this.simple?lit.nothing:lit.html`<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===exports.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?lit.nothing:lit.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(){var e,t,r;return lit.html`<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!==(r=this.description)&&void 0!==r?r:"Lottie animation"}" data-loaded="${this._playerState.loaded}"><div class="animation" style="background:${this.background}">${this.currentState===exports.PlayerState.Error?lit.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>`:lit.nothing}</div>${this.controls?this.renderControls():lit.nothing}</figure>`}constructor(...e){super(...e),this.background="transparent",this.controls=!1,this.currentState=exports.PlayerState.Loading,this.direction=1,this.hover=!1,this.intermission=0,this.loop=!1,this.mode=exports.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:exports.PlayerState.Loading,count:0,loaded:!1}}},_ts_decorate([decorators_js.property({type:Boolean,reflect:!0})],exports.DotLottiePlayer.prototype,"autoplay",void 0),_ts_decorate([decorators_js.property({type:String})],exports.DotLottiePlayer.prototype,"background",void 0),_ts_decorate([decorators_js.property({type:Boolean,reflect:!0})],exports.DotLottiePlayer.prototype,"controls",void 0),_ts_decorate([decorators_js.property({type:Number})],exports.DotLottiePlayer.prototype,"count",void 0),_ts_decorate([decorators_js.property({type:String})],exports.DotLottiePlayer.prototype,"currentState",void 0),_ts_decorate([decorators_js.property({type:String})],exports.DotLottiePlayer.prototype,"description",void 0),_ts_decorate([decorators_js.property({type:Number})],exports.DotLottiePlayer.prototype,"direction",void 0),_ts_decorate([decorators_js.property({type:Boolean})],exports.DotLottiePlayer.prototype,"hover",void 0),_ts_decorate([decorators_js.property({type:Number})],exports.DotLottiePlayer.prototype,"intermission",void 0),_ts_decorate([decorators_js.property({type:Boolean,reflect:!0})],exports.DotLottiePlayer.prototype,"loop",void 0),_ts_decorate([decorators_js.property({type:String})],exports.DotLottiePlayer.prototype,"mode",void 0),_ts_decorate([decorators_js.property({type:String})],exports.DotLottiePlayer.prototype,"objectfit",void 0),_ts_decorate([decorators_js.property({type:String})],exports.DotLottiePlayer.prototype,"preserveAspectRatio",void 0),_ts_decorate([decorators_js.property({type:String})],exports.DotLottiePlayer.prototype,"renderer",void 0),_ts_decorate([decorators_js.property({type:Array})],exports.DotLottiePlayer.prototype,"segment",void 0),_ts_decorate([decorators_js.property({type:Boolean})],exports.DotLottiePlayer.prototype,"simple",void 0),_ts_decorate([decorators_js.property({type:Number})],exports.DotLottiePlayer.prototype,"speed",void 0),_ts_decorate([decorators_js.property({type:String})],exports.DotLottiePlayer.prototype,"src",void 0),_ts_decorate([decorators_js.property({type:Boolean})],exports.DotLottiePlayer.prototype,"subframe",void 0),_ts_decorate([decorators_js.query(".animation")],exports.DotLottiePlayer.prototype,"container",void 0),_ts_decorate([decorators_js.state()],exports.DotLottiePlayer.prototype,"_isSettingsOpen",void 0),_ts_decorate([decorators_js.state()],exports.DotLottiePlayer.prototype,"_seeker",void 0),_ts_decorate([decorators_js.state()],exports.DotLottiePlayer.prototype,"_currentAnimation",void 0),_ts_decorate([decorators_js.state()],exports.DotLottiePlayer.prototype,"_animations",void 0),exports.DotLottiePlayer=_ts_decorate([decorators_js.customElement("dotlottie-player")],exports.DotLottiePlayer),globalThis.dotLottiePlayer=()=>new exports.DotLottiePlayer;
1
+ 'use strict';
2
+
3
+ var lit = require('lit');
4
+ var decorators_js = require('lit/decorators.js');
5
+ var Lottie = require('lottie-web');
6
+ var fflate = require('fflate');
7
+
8
+ exports.PlayerState = void 0;
9
+ (function(PlayerState) {
10
+ PlayerState["Completed"] = "completed";
11
+ PlayerState["Destroyed"] = "destroyed";
12
+ PlayerState["Error"] = "error";
13
+ PlayerState["Frozen"] = "frozen";
14
+ PlayerState["Loading"] = "loading";
15
+ PlayerState["Paused"] = "paused";
16
+ PlayerState["Playing"] = "playing";
17
+ PlayerState["Stopped"] = "stopped";
18
+ })(exports.PlayerState || (exports.PlayerState = {}));
19
+ exports.PlayMode = void 0;
20
+ (function(PlayMode) {
21
+ PlayMode["Bounce"] = "bounce";
22
+ PlayMode["Normal"] = "normal";
23
+ })(exports.PlayMode || (exports.PlayMode = {}));
24
+ exports.PlayerEvents = void 0;
25
+ (function(PlayerEvents) {
26
+ PlayerEvents["Complete"] = "complete";
27
+ PlayerEvents["Destroyed"] = "destroyed";
28
+ PlayerEvents["Error"] = "error";
29
+ PlayerEvents["Frame"] = "frame";
30
+ PlayerEvents["Freeze"] = "freeze";
31
+ PlayerEvents["Load"] = "load";
32
+ PlayerEvents["Loop"] = "loop";
33
+ PlayerEvents["Pause"] = "pause";
34
+ PlayerEvents["Play"] = "play";
35
+ PlayerEvents["Ready"] = "ready";
36
+ PlayerEvents["Rendered"] = "rendered";
37
+ PlayerEvents["Stop"] = "stop";
38
+ })(exports.PlayerEvents || (exports.PlayerEvents = {}));
39
+ class CustomError extends Error {
40
+ }
41
+
42
+ const addExt = (ext, str)=>{
43
+ if (!str) return;
44
+ if (getExt(str)) {
45
+ if (getExt(str) === ext) return str;
46
+ return `${getFilename(str)}.${ext}`;
47
+ }
48
+ return `${str}.${ext}`;
49
+ }, aspectRatio = (objectFit)=>{
50
+ switch(objectFit){
51
+ case 'contain':
52
+ case 'scale-down':
53
+ return 'xMidYMid meet';
54
+ case 'cover':
55
+ return 'xMidYMid slice';
56
+ case 'fill':
57
+ return 'none';
58
+ case 'none':
59
+ return 'xMinYMin slice';
60
+ default:
61
+ return 'xMidYMid meet';
62
+ }
63
+ }, /**
64
+ * Convert Base64 encoded string to Uint8Array
65
+ * @param { string } str Base64 encoded string
66
+ * @returns { Uint8Array} UTF-8/Latin-1 binary
67
+ */ base64ToU8 = (str)=>{
68
+ const parsedStr = str.substring(str.indexOf(',') + 1);
69
+ return strToU8(isServer() ? Buffer.from(parsedStr, 'base64').toString('binary') : atob(parsedStr));
70
+ }, /**
71
+ * Convert a JSON Lottie to dotLottie or combine several animations and download new dotLottie file in your browser.
72
+ * @param { LottieJSON[] } animations The animations to combine.
73
+ * @param { LottieManifest } manifest Manifest of meta information.
74
+ * @param { string } filename Name of file to download. If not specified a random string will be generated.
75
+ * @param { boolean } triggerDownload Whether to trigger a download in the browser. Defaults to true.
76
+ */ createDotLottie = async (animations, manifest, filename, triggerDownload = true)=>{
77
+ try {
78
+ if (!animations?.length || !manifest) {
79
+ throw new Error(`Missing or malformed required parameter(s):\n ${!animations?.length ? '- animations\n' : ''} ${!manifest ? '- manifest \n' : ''}`);
80
+ }
81
+ const name = addExt('lottie', filename) || `${useId()}.lottie`, dotlottie = {
82
+ 'manifest.json': [
83
+ strToU8(JSON.stringify(manifest)),
84
+ {
85
+ level: 0
86
+ }
87
+ ]
88
+ };
89
+ for (const [i, animation] of animations.entries()){
90
+ if (animation.assets?.length) {
91
+ for (const asset of animation.assets){
92
+ const { id, p } = asset;
93
+ if (id && p) {
94
+ const ext = getExtFromB64(p);
95
+ asset.p = `${id}.${ext}`;
96
+ asset.e = 0;
97
+ dotlottie[`images/${id}.${ext}`] = [
98
+ base64ToU8(p),
99
+ {
100
+ level: 9
101
+ }
102
+ ];
103
+ }
104
+ }
105
+ }
106
+ dotlottie[`animations/${manifest.animations[i].id}.json`] = [
107
+ strToU8(JSON.stringify(animation)),
108
+ {
109
+ level: 9
110
+ }
111
+ ];
112
+ }
113
+ const buffer = await getArrayBuffer(dotlottie);
114
+ return triggerDownload ? download(buffer, {
115
+ name,
116
+ mimeType: 'application/zip'
117
+ }) : buffer;
118
+ } catch (err) {
119
+ console.error(`❌ ${handleErrors(err).message}`);
120
+ }
121
+ }, /**
122
+ * Download file, either SVG or dotLottie.
123
+ * @param { string } data The data to be downloaded
124
+ * @param { string } name Don't include file extension in the filename
125
+ */ download = (data, options)=>{
126
+ const blob = new Blob([
127
+ data
128
+ ], {
129
+ type: options?.mimeType
130
+ }), fileName = options?.name || useId(), dataURL = URL.createObjectURL(blob), link = document.createElement('a');
131
+ link.href = dataURL;
132
+ link.download = fileName;
133
+ link.hidden = true;
134
+ document.body.appendChild(link);
135
+ link.click();
136
+ setTimeout(()=>{
137
+ link.remove();
138
+ URL.revokeObjectURL(dataURL);
139
+ }, 1000);
140
+ }, handleErrors = (err)=>{
141
+ const res = {
142
+ message: 'Unknown error',
143
+ status: isServer() ? 500 : 400
144
+ };
145
+ if (err && typeof err === 'object') {
146
+ if ('message' in err && typeof err.message === 'string') {
147
+ res.message = err.message;
148
+ }
149
+ if ('status' in err) {
150
+ res.status = Number(err.status);
151
+ }
152
+ }
153
+ return res;
154
+ }, frameOutput = (frame)=>{
155
+ return ((frame ?? 0) + 1).toString().padStart(3, '0');
156
+ }, getAnimationData = async (input)=>{
157
+ try {
158
+ if (!input || typeof input !== 'string' && typeof input !== 'object') {
159
+ throw new Error('Broken file or invalid file format');
160
+ }
161
+ if (typeof input !== 'string') {
162
+ const animations = Array.isArray(input) ? input : [
163
+ input
164
+ ];
165
+ return {
166
+ animations,
167
+ manifest: null
168
+ };
169
+ }
170
+ const result = await fetch(input);
171
+ if (!result.ok) {
172
+ const error = new CustomError(result.statusText);
173
+ error.status = result.status;
174
+ throw error;
175
+ }
176
+ /**
177
+ * Check if file is JSON, first by parsing file name for extension,
178
+ * then – if filename has no extension – by cloning the response
179
+ * and parsing it for content.
180
+ */ const ext = getExt(input);
181
+ if (ext === 'json' || !ext) {
182
+ if (ext) {
183
+ const lottie = await result.json();
184
+ return {
185
+ animations: [
186
+ lottie
187
+ ],
188
+ manifest: null
189
+ };
190
+ }
191
+ const text = await result.clone().text();
192
+ try {
193
+ const lottie = JSON.parse(text);
194
+ return {
195
+ animations: [
196
+ lottie
197
+ ],
198
+ manifest: null
199
+ };
200
+ } catch {}
201
+ }
202
+ const { data, manifest } = await getLottieJSON(result);
203
+ return {
204
+ animations: data,
205
+ manifest,
206
+ isDotLottie: true
207
+ };
208
+ } catch (err) {
209
+ console.error(`❌ ${handleErrors(err).message}`);
210
+ return {
211
+ animations: null,
212
+ manifest: null
213
+ };
214
+ }
215
+ }, getArrayBuffer = async (zippable)=>{
216
+ const arrayBuffer = await new Promise((resolve, reject)=>{
217
+ fflate.zip(zippable, {
218
+ level: 9
219
+ }, (err, data)=>{
220
+ if (err) {
221
+ reject(err);
222
+ return;
223
+ }
224
+ resolve(data.buffer);
225
+ });
226
+ });
227
+ return arrayBuffer;
228
+ }, /**
229
+ * Get extension from filename, URL or path
230
+ * @param { string } str Filename, URL or path
231
+ */ getExt = (str)=>{
232
+ if (!str || !hasExt(str)) return;
233
+ return str.split('.').pop()?.toLowerCase();
234
+ }, getExtFromB64 = (str)=>{
235
+ const mime = str.split(':')[1].split(';')[0];
236
+ return mime.split('/')[1].split('+')[0];
237
+ }, /**
238
+ * Parse URL to get filename
239
+ * @param { string } src The url string
240
+ * @param { boolean } keepExt Whether to include file extension
241
+ * @returns { string } Filename, in lowercase
242
+ */ getFilename = (src, keepExt)=>{
243
+ // Because the regex strips all special characters, we need to extract the file extension, so we can add it later if we need it
244
+ const ext = getExt(src);
245
+ return `${src.replace(/\.[^.]*$/, '').replace(/\W+/g, '')}${keepExt && ext ? `.${ext}` : ''}`.toLowerCase();
246
+ }, getLottieJSON = async (resp)=>{
247
+ const unzipped = await unzip(resp), manifest = getManifest(unzipped), data = [];
248
+ for (const { id } of manifest.animations){
249
+ const str = fflate.strFromU8(unzipped[`animations/${id}.json`]), lottie = JSON.parse(str);
250
+ await resolveAssets(unzipped, lottie.assets);
251
+ data.push(lottie);
252
+ }
253
+ return {
254
+ data,
255
+ manifest
256
+ };
257
+ }, getManifest = (unzipped)=>{
258
+ const file = fflate.strFromU8(unzipped['manifest.json'], false), manifest = JSON.parse(file);
259
+ if (!('animations' in manifest)) throw new Error('Manifest not found');
260
+ if (!manifest.animations.length) throw new Error('No animations listed in manifest');
261
+ return manifest;
262
+ }, getMimeFromExt = (ext)=>{
263
+ switch(ext){
264
+ case 'svg':
265
+ case 'svg+xml':
266
+ return 'image/svg+xml';
267
+ case 'jpg':
268
+ case 'jpeg':
269
+ return 'image/jpeg';
270
+ case 'png':
271
+ case 'gif':
272
+ case 'webp':
273
+ return `image/${ext}`;
274
+ case 'mp3':
275
+ case 'mpeg':
276
+ case 'wav':
277
+ return `audio/${ext}`;
278
+ default:
279
+ return '';
280
+ }
281
+ }, hasExt = (path)=>{
282
+ const lastDotIndex = path?.split('/').pop()?.lastIndexOf('.');
283
+ return (lastDotIndex ?? 0) > 1 && path && path.length - 1 > (lastDotIndex ?? 0);
284
+ }, isAudio = (asset)=>{
285
+ return !('h' in asset) && !('w' in asset) && 'p' in asset && 'e' in asset && 'u' in asset && 'id' in asset;
286
+ }, isImage = (asset)=>{
287
+ return 'w' in asset && 'h' in asset && !('xt' in asset) && 'p' in asset;
288
+ }, isServer = ()=>{
289
+ return !(typeof window !== 'undefined' && window.document);
290
+ }, /**
291
+ * Convert string to Uint8Array
292
+ * @param { string } str Base64 encoded string
293
+ * @returns { Uint8Array} UTF-8/Latin-1 binary
294
+ */ strToU8 = (str)=>{
295
+ const u8 = new Uint8Array(str.length);
296
+ for(let i = 0; i < str.length; i++){
297
+ u8[i] = str.charCodeAt(i);
298
+ }
299
+ return u8;
300
+ }, resolveAssets = async (unzipped, assets)=>{
301
+ if (!Array.isArray(assets)) return;
302
+ const toResolve = [];
303
+ for (const asset of assets){
304
+ if (!isAudio(asset) && !isImage(asset)) continue;
305
+ const type = isImage(asset) ? 'images' : 'audio', u8 = unzipped?.[`${type}/${asset.p}`];
306
+ if (!u8) continue;
307
+ toResolve.push(new Promise((resolveAsset)=>{
308
+ const assetB64 = isServer() ? Buffer.from(u8).toString('base64') : btoa(u8.reduce((dat, byte)=>dat + String.fromCharCode(byte), ''));
309
+ asset.p = `data:${getMimeFromExt(getExt(asset.p))};base64,${assetB64}`;
310
+ asset.e = 1;
311
+ asset.u = '';
312
+ resolveAsset();
313
+ }));
314
+ }
315
+ await Promise.all(toResolve);
316
+ }, unzip = async (resp)=>{
317
+ const u8 = new Uint8Array(await resp.arrayBuffer()), unzipped = await new Promise((resolve, reject)=>{
318
+ fflate.unzip(u8, /*{ filter },*/ (err, file)=>{
319
+ if (err) {
320
+ reject(err);
321
+ }
322
+ resolve(file);
323
+ });
324
+ });
325
+ return unzipped;
326
+ }, useId = (prefix)=>{
327
+ const s4 = ()=>{
328
+ return ((1 + Math.random()) * 0x10000 | 0).toString(16).substring(1);
329
+ };
330
+ return `${prefix ?? `:${s4()}`}-${s4()}`;
331
+ };
332
+
333
+ var name = "@aarsteinmedia/dotlottie-player";
334
+ var version = "2.1.7";
335
+ var description = "Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";
336
+ var exports$1 = {
337
+ ".": {
338
+ "import": "./dist/esm/index.js",
339
+ node: "./dist/esm/index.js",
340
+ require: "./dist/cjs/index.js",
341
+ types: "./dist/index.d.ts"
342
+ }
343
+ };
344
+ var main = "./dist/esm/index.js";
345
+ var unpkg = "./dist/index.js";
346
+ var module$1 = "./dist/esm/index.js";
347
+ var types = "./dist/index.d.ts";
348
+ var type = "module";
349
+ var homepage = "https://www.aarstein.media/en/dotlottie-player";
350
+ var repository = {
351
+ url: "https://github.com/aarsteinmedia/dotlottie-player.git",
352
+ type: "git"
353
+ };
354
+ var bugs = "https://github.com/aarsteinmedia/dotlottie-player/issues";
355
+ var author = {
356
+ name: "Johan Martin Aarstein",
357
+ email: "johan@aarstein.media",
358
+ url: "https://www.aarstein.media",
359
+ organization: "Aarstein Media"
360
+ };
361
+ var license = "GPL-2.0-or-later";
362
+ var scripts = {
363
+ build: "pnpm cleanup && rollup -c",
364
+ "build:types": "pnpm cleanup:types && tsc",
365
+ "build:cem": "npx cem analyze --config 'cem.config.mjs'",
366
+ prod: "pnpm build:types && pnpm build && pnpm build:cem",
367
+ dev: "pnpm cleanup && rollup -c --watch",
368
+ lint: "tsc && eslint . --ext .ts,.js",
369
+ "lint:fix": "eslint . --ext .ts,.js --fix",
370
+ "cleanup:types": "shx rm -rf types && shx mkdir types",
371
+ cleanup: "shx rm -rf dist && shx mkdir dist"
372
+ };
373
+ var dependencies = {
374
+ fflate: "^0.8.1",
375
+ lit: "^2.8.0",
376
+ "lottie-web": "^5.12.2"
377
+ };
378
+ var peerDependencies = {
379
+ "@types/react": ">= 16.0.0"
380
+ };
381
+ var devDependencies = {
382
+ "@custom-elements-manifest/analyzer": "^0.6.9",
383
+ "@rollup/plugin-commonjs": "^25.0.7",
384
+ "@rollup/plugin-json": "^6.0.1",
385
+ "@rollup/plugin-node-resolve": "^15.2.3",
386
+ "@rollup/plugin-replace": "^5.0.5",
387
+ "@swc/core": "^1.3.95",
388
+ "@types/node": "^20.8.10",
389
+ "@typescript-eslint/eslint-plugin": "^5.62.0",
390
+ "@typescript-eslint/parser": "^5.62.0",
391
+ eslint: "^8.52.0",
392
+ "eslint-plugin-lit": "^1.10.1",
393
+ rollup: "^3.29.4",
394
+ "rollup-plugin-dts": "^6.1.0",
395
+ "rollup-plugin-html-literals": "^1.1.8",
396
+ "rollup-plugin-summary": "^2.0.0",
397
+ "rollup-plugin-swc3": "^0.9.1",
398
+ shx: "^0.3.4",
399
+ "ts-lit-plugin": "^1.2.1",
400
+ typescript: "^5.2.2"
401
+ };
402
+ var customElements = "dist/custom-elements.json";
403
+ var files = [
404
+ "dist",
405
+ "README.md"
406
+ ];
407
+ var keywords = [
408
+ "lottie",
409
+ "dotlottie",
410
+ "animation",
411
+ "web component",
412
+ "component",
413
+ "lit-element",
414
+ "svg",
415
+ "vector",
416
+ "player"
417
+ ];
418
+ var publishConfig = {
419
+ access: "public"
420
+ };
421
+ var engines = {
422
+ node: ">= 7.6.0"
423
+ };
424
+ var funding = {
425
+ type: "paypal",
426
+ url: "https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"
427
+ };
428
+ var pkg = {
429
+ name: name,
430
+ version: version,
431
+ description: description,
432
+ exports: exports$1,
433
+ main: main,
434
+ unpkg: unpkg,
435
+ module: module$1,
436
+ types: types,
437
+ type: type,
438
+ homepage: homepage,
439
+ repository: repository,
440
+ bugs: bugs,
441
+ author: author,
442
+ license: license,
443
+ scripts: scripts,
444
+ dependencies: dependencies,
445
+ peerDependencies: peerDependencies,
446
+ devDependencies: devDependencies,
447
+ customElements: customElements,
448
+ files: files,
449
+ keywords: keywords,
450
+ publishConfig: publishConfig,
451
+ engines: engines,
452
+ funding: funding
453
+ };
454
+
455
+ var styles = lit.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}}`;
456
+
457
+ function _ts_decorate(decorators, target, key, desc) {
458
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
459
+ if (typeof Reflect === "object" && typeof undefined === "function") r = undefined(decorators, target, key, desc);
460
+ 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;
461
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
462
+ }
463
+ exports.DotLottiePlayer = class DotLottiePlayer extends lit.LitElement {
464
+ /**
465
+ * Get options from props
466
+ * @returns { AnimationConfig }
467
+ */ _getOptions() {
468
+ 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) ? [
469
+ this.segment[0] - 1,
470
+ this.segment[1] - 1
471
+ ] : this.segment, options = {
472
+ container: this.container,
473
+ loop: !!this.loop,
474
+ autoplay: !!this.autoplay,
475
+ renderer: this.renderer,
476
+ initialSegment,
477
+ rendererSettings: {
478
+ imagePreserveAspectRatio: preserveAspectRatio
479
+ }
480
+ };
481
+ switch(this.renderer){
482
+ case 'svg':
483
+ options.rendererSettings = {
484
+ ...options.rendererSettings,
485
+ hideOnTransparent: true,
486
+ preserveAspectRatio,
487
+ progressiveLoad: true
488
+ };
489
+ break;
490
+ case 'canvas':
491
+ options.rendererSettings = {
492
+ ...options.rendererSettings,
493
+ clearCanvas: true,
494
+ preserveAspectRatio,
495
+ progressiveLoad: true
496
+ };
497
+ break;
498
+ case 'html':
499
+ options.rendererSettings = {
500
+ ...options.rendererSettings,
501
+ hideOnTransparent: true
502
+ };
503
+ }
504
+ return options;
505
+ }
506
+ /**
507
+ * Initialize Lottie Web player
508
+ * @param { string | LottieJSON } src URL to lottie animation, or raw JSON data
509
+ */ async load(src) {
510
+ if (!this.shadowRoot) return;
511
+ // Load the resource
512
+ try {
513
+ const { animations, manifest, isDotLottie } = await getAnimationData(src);
514
+ if (!animations || animations.some((animation)=>!this._isLottie(animation))) {
515
+ throw new Error('Broken or corrupted file');
516
+ }
517
+ this._isDotLottie = !!isDotLottie;
518
+ this._animations = animations;
519
+ this._manifest = manifest ?? {
520
+ animations: [
521
+ {
522
+ id: useId(),
523
+ autoplay: this.autoplay,
524
+ loop: this.loop,
525
+ direction: this.direction,
526
+ mode: this.mode,
527
+ speed: this.speed
528
+ }
529
+ ]
530
+ };
531
+ // Clear previous animation, if any
532
+ if (this._lottieInstance) this._lottieInstance.destroy();
533
+ // Initialize lottie player and load animation
534
+ this._lottieInstance = Lottie.loadAnimation({
535
+ ...this._getOptions(),
536
+ animationData: animations[this._currentAnimation]
537
+ });
538
+ } catch (err) {
539
+ this._errorMessage = handleErrors(err).message;
540
+ this.currentState = exports.PlayerState.Error;
541
+ this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Error));
542
+ return;
543
+ }
544
+ this._addEventListeners();
545
+ // Set initial playback speed and direction
546
+ this.setSpeed(this.speed);
547
+ this.setDirection(this.direction ?? 1);
548
+ this.setSubframe(!!this.subframe);
549
+ // Start playing if autoplay is enabled
550
+ if (this.autoplay) {
551
+ if (this.direction === -1) this.seek('99%');
552
+ this.play();
553
+ }
554
+ }
555
+ /**
556
+ * Add event listeners
557
+ */ _addEventListeners() {
558
+ if (!this._lottieInstance) return;
559
+ // Calculate and save the current progress of the animation
560
+ this._lottieInstance.addEventListener('enterFrame', ()=>{
561
+ if (this._lottieInstance) {
562
+ const { currentFrame, totalFrames } = this._lottieInstance;
563
+ this._seeker = Math.floor(currentFrame / totalFrames * 100);
564
+ this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Frame, {
565
+ detail: {
566
+ frame: currentFrame,
567
+ seeker: this._seeker
568
+ }
569
+ }));
570
+ }
571
+ });
572
+ // Handle animation play complete
573
+ this._lottieInstance.addEventListener('complete', ()=>{
574
+ this.currentState = exports.PlayerState.Completed;
575
+ this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Complete));
576
+ if (this._animations?.length > 1 && this.autoplay && this._currentAnimation < this._animations?.length - 1) {
577
+ this.next();
578
+ }
579
+ });
580
+ //Handle complete loop
581
+ const loopComplete = ()=>{
582
+ if (!this._lottieInstance) {
583
+ return;
584
+ }
585
+ const { firstFrame, totalFrames, playDirection } = this._lottieInstance;
586
+ if (this.count) {
587
+ this.mode === exports.PlayMode.Bounce ? this._playerState.count += 1 : this._playerState.count += 0.5;
588
+ if (this._playerState.count >= this.count) {
589
+ this.setLooping(false);
590
+ this.currentState = exports.PlayerState.Completed;
591
+ this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Complete));
592
+ return;
593
+ }
594
+ }
595
+ this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Loop));
596
+ if (this.mode === exports.PlayMode.Bounce) {
597
+ this._lottieInstance?.goToAndStop(playDirection === -1 ? firstFrame : totalFrames * 0.99, true);
598
+ this._lottieInstance?.setDirection(playDirection * -1);
599
+ return setTimeout(()=>{
600
+ this._lottieInstance?.play();
601
+ }, this.intermission);
602
+ }
603
+ this._lottieInstance?.goToAndStop(playDirection === -1 ? totalFrames * 0.99 : firstFrame, true);
604
+ return setTimeout(()=>{
605
+ this._lottieInstance?.play();
606
+ }, this.intermission);
607
+ };
608
+ this._lottieInstance.addEventListener('loopComplete', loopComplete);
609
+ // Handle lottie-web ready event
610
+ this._lottieInstance.addEventListener('DOMLoaded', ()=>{
611
+ this._playerState.loaded = true;
612
+ this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Ready));
613
+ });
614
+ // Handle animation data load complete
615
+ this._lottieInstance.addEventListener('data_ready', ()=>{
616
+ this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Load));
617
+ });
618
+ // Set error state when animation load fail event triggers
619
+ this._lottieInstance.addEventListener('data_failed', ()=>{
620
+ this.currentState = exports.PlayerState.Error;
621
+ this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Error));
622
+ });
623
+ if (this.container) {
624
+ // Set handlers to auto play animation on hover if enabled
625
+ this.container.addEventListener('mouseenter', ()=>{
626
+ if (this.hover && this.currentState !== exports.PlayerState.Playing) {
627
+ this.play();
628
+ }
629
+ });
630
+ this.container.addEventListener('mouseleave', ()=>{
631
+ if (this.hover && this.currentState === exports.PlayerState.Playing) {
632
+ this.stop();
633
+ }
634
+ });
635
+ }
636
+ }
637
+ /**
638
+ * Handle visibility change events
639
+ */ _onVisibilityChange() {
640
+ if (document.hidden && this.currentState === exports.PlayerState.Playing) {
641
+ this._freeze();
642
+ } else if (this.currentState === exports.PlayerState.Frozen) {
643
+ this.play();
644
+ }
645
+ }
646
+ /**
647
+ * Handles click and drag actions on the progress track
648
+ * @param { Event & { HTMLInputElement } } event
649
+ */ _handleSeekChange({ target }) {
650
+ if (!(target instanceof HTMLInputElement) || !this._lottieInstance || isNaN(Number(target.value))) return;
651
+ this.seek(Math.floor(Number(target.value) / 100 * this._lottieInstance.totalFrames));
652
+ setTimeout(()=>{
653
+ if (target.parentElement instanceof HTMLFormElement) {
654
+ target.parentElement.reset();
655
+ }
656
+ }, 100);
657
+ }
658
+ _isLottie(json) {
659
+ const mandatory = [
660
+ 'v',
661
+ 'ip',
662
+ 'op',
663
+ 'layers',
664
+ 'fr',
665
+ 'w',
666
+ 'h'
667
+ ];
668
+ return mandatory.every((field)=>Object.prototype.hasOwnProperty.call(json, field));
669
+ }
670
+ /**
671
+ * Creates a new dotLottie file, by combinig several animations
672
+ * @param { Config } configs
673
+ * @param { string } fileName
674
+ * @param { boolean } triggerDownload Whether to trigger a download in the browser.
675
+ * If set to false the function returns an ArrayBuffer. Defaults to true.
676
+ */ async addAnimation(configs, fileName, triggerDownload = true) {
677
+ try {
678
+ const oldManifest = this._manifest || {
679
+ animations: []
680
+ };
681
+ let manifest = {
682
+ ...oldManifest,
683
+ generator: pkg.name
684
+ }, animations = this._animations || [];
685
+ for (const config of configs){
686
+ const { url } = config, { animations: animationsToAdd } = await getAnimationData(url);
687
+ if (!animationsToAdd) {
688
+ throw new Error('No animation loaded');
689
+ }
690
+ if (manifest.animations.some(({ id })=>id === config.id)) {
691
+ throw new Error('Duplicate id for animation');
692
+ }
693
+ manifest = {
694
+ ...manifest,
695
+ animations: [
696
+ ...manifest.animations,
697
+ config
698
+ ]
699
+ };
700
+ animations = [
701
+ ...animations,
702
+ ...animationsToAdd
703
+ ];
704
+ }
705
+ return createDotLottie(animations, manifest, fileName, triggerDownload);
706
+ } catch (err) {
707
+ console.error(handleErrors(err).message);
708
+ }
709
+ }
710
+ /**
711
+ * Returns the lottie-web instance used in the component
712
+ */ getLottie() {
713
+ return this._lottieInstance;
714
+ }
715
+ /**
716
+ * Play
717
+ */ play() {
718
+ if (!this._lottieInstance) return;
719
+ if (this.currentState) {
720
+ this._playerState.prev = this.currentState;
721
+ }
722
+ this._lottieInstance.play();
723
+ setTimeout(()=>{
724
+ this.currentState = exports.PlayerState.Playing;
725
+ }, 0);
726
+ this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Play));
727
+ }
728
+ /**
729
+ * Pause
730
+ */ pause() {
731
+ if (!this._lottieInstance) return;
732
+ if (this.currentState) {
733
+ this._playerState.prev = this.currentState;
734
+ }
735
+ this._lottieInstance.pause();
736
+ setTimeout(()=>{
737
+ this.currentState = exports.PlayerState.Paused;
738
+ }, 0);
739
+ this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Pause));
740
+ }
741
+ /**
742
+ * Stop
743
+ */ stop() {
744
+ if (!this._lottieInstance) return;
745
+ if (this.currentState) {
746
+ this._playerState.prev = this.currentState;
747
+ }
748
+ this._playerState.count = 0;
749
+ this._lottieInstance.stop();
750
+ setTimeout(()=>{
751
+ this.currentState = exports.PlayerState.Stopped;
752
+ }, 0);
753
+ this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Stop));
754
+ }
755
+ /**
756
+ * Destroy animation and element
757
+ */ destroy() {
758
+ if (!this._lottieInstance) return;
759
+ this.currentState = exports.PlayerState.Destroyed;
760
+ this._lottieInstance.destroy();
761
+ this._lottieInstance = null;
762
+ this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Destroyed));
763
+ this.remove();
764
+ }
765
+ /**
766
+ * Seek to a given frame
767
+ * @param { number | string } value Frame to seek to
768
+ */ seek(value) {
769
+ if (!this._lottieInstance) return;
770
+ // Extract frame number from either number or percentage value
771
+ const matches = value.toString().match(/^([0-9]+)(%?)$/);
772
+ if (!matches) {
773
+ return;
774
+ }
775
+ // Calculate and set the frame number
776
+ const frame = Math.floor(matches[2] === '%' ? this._lottieInstance.totalFrames * Number(matches[1]) / 100 : Number(matches[1]));
777
+ // Set seeker to new frame number
778
+ this._seeker = frame;
779
+ // Send lottie player to the new frame
780
+ if (this.currentState === exports.PlayerState.Playing || this.currentState === exports.PlayerState.Frozen && this._playerState.prev === exports.PlayerState.Playing) {
781
+ this._lottieInstance.goToAndPlay(frame, true);
782
+ this.currentState = exports.PlayerState.Playing;
783
+ } else {
784
+ this._lottieInstance.goToAndStop(frame, true);
785
+ this._lottieInstance.pause();
786
+ }
787
+ }
788
+ /**
789
+ * Snapshot and download the current frame as SVG
790
+ */ snapshot() {
791
+ if (!this.shadowRoot) return;
792
+ // Get SVG element and serialize markup
793
+ const svgElement = this.shadowRoot.querySelector('.animation svg'), data = svgElement instanceof Node ? new XMLSerializer().serializeToString(svgElement) : null;
794
+ if (!data) {
795
+ console.error('Could not serialize data');
796
+ return;
797
+ }
798
+ download(data, {
799
+ name: `${getFilename(this.src)}-${frameOutput(this._seeker)}.svg`,
800
+ mimeType: 'image/svg+xml'
801
+ });
802
+ return data;
803
+ }
804
+ /**
805
+ * Toggles subframe, for more smooth animations
806
+ * @param { boolean } value Whether animation uses subframe
807
+ */ setSubframe(value) {
808
+ if (!this._lottieInstance) return;
809
+ this.subframe = value;
810
+ this._lottieInstance.setSubframe(value);
811
+ }
812
+ /**
813
+ * Freeze animation.
814
+ * This internal state pauses animation and is used to differentiate between
815
+ * user requested pauses and component instigated pauses.
816
+ */ _freeze() {
817
+ if (!this._lottieInstance) return;
818
+ if (this.currentState) {
819
+ this._playerState.prev = this.currentState;
820
+ }
821
+ this._lottieInstance.pause();
822
+ setTimeout(()=>{
823
+ this.currentState = exports.PlayerState.Frozen;
824
+ }, 0);
825
+ this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Freeze));
826
+ }
827
+ /**
828
+ * Reload animation
829
+ */ async reload() {
830
+ if (!this._lottieInstance) return;
831
+ this._lottieInstance.destroy();
832
+ if (this.src) {
833
+ await this.load(this.src);
834
+ }
835
+ }
836
+ /**
837
+ * Set animation playback speed
838
+ * @param { number } value Playback speed
839
+ */ setSpeed(value = 1) {
840
+ if (!this._lottieInstance) return;
841
+ this.speed = value;
842
+ this._lottieInstance.setSpeed(value);
843
+ }
844
+ /**
845
+ * Animation play direction
846
+ * @param { AnimationDirection } value Animation direction
847
+ */ setDirection(value) {
848
+ if (!this._lottieInstance) return;
849
+ this.direction = value;
850
+ this._lottieInstance.setDirection(value);
851
+ }
852
+ /**
853
+ * Set loop
854
+ * @param { boolean } value
855
+ */ setLooping(value) {
856
+ if (this._lottieInstance) {
857
+ this.loop = value;
858
+ this._lottieInstance.setLoop(value);
859
+ }
860
+ }
861
+ /**
862
+ * Toggle playing state
863
+ */ togglePlay() {
864
+ if (!this._lottieInstance) return;
865
+ const { currentFrame, playDirection, totalFrames } = this._lottieInstance;
866
+ if (this.currentState === exports.PlayerState.Playing) {
867
+ return this.pause();
868
+ }
869
+ if (this.currentState === exports.PlayerState.Completed) {
870
+ this.currentState = exports.PlayerState.Playing;
871
+ if (this.mode === exports.PlayMode.Bounce) {
872
+ this.setDirection(playDirection * -1);
873
+ return this._lottieInstance.goToAndPlay(currentFrame, true);
874
+ }
875
+ if (playDirection === -1) {
876
+ return this._lottieInstance.goToAndPlay(totalFrames, true);
877
+ }
878
+ return this._lottieInstance.goToAndPlay(0, true);
879
+ }
880
+ return this.play();
881
+ }
882
+ /**
883
+ * Toggle loop
884
+ */ toggleLooping() {
885
+ this.setLooping(!this.loop);
886
+ }
887
+ /**
888
+ * Toggle Boomerang
889
+ */ toggleBoomerang() {
890
+ if (this.mode === exports.PlayMode.Normal) {
891
+ this.mode = exports.PlayMode.Bounce;
892
+ } else {
893
+ this.mode = exports.PlayMode.Normal;
894
+ }
895
+ }
896
+ /**
897
+ * Toggle show Settings
898
+ */ _toggleSettings(flag) {
899
+ if (flag === undefined) {
900
+ this._isSettingsOpen = !this._isSettingsOpen;
901
+ } else {
902
+ this._isSettingsOpen = flag;
903
+ }
904
+ }
905
+ /**
906
+ * Handle blur
907
+ */ _handleBlur() {
908
+ setTimeout(()=>this._toggleSettings(false), 200);
909
+ }
910
+ _switchInstance() {
911
+ // Clear previous animation
912
+ if (this._lottieInstance) this._lottieInstance.destroy();
913
+ // Re-initialize lottie player
914
+ this._lottieInstance = Lottie.loadAnimation({
915
+ ...this._getOptions(),
916
+ animationData: this._animations[this._currentAnimation]
917
+ });
918
+ // Add event listeners to new Lottie instance
919
+ this._addEventListeners();
920
+ if (this.autoplay) {
921
+ this._lottieInstance?.goToAndPlay(0, true);
922
+ this.currentState = exports.PlayerState.Playing;
923
+ } else {
924
+ this._lottieInstance?.goToAndStop(0, true);
925
+ }
926
+ }
927
+ /**
928
+ * Skip to next animation
929
+ */ next() {
930
+ this._currentAnimation++;
931
+ this._switchInstance();
932
+ }
933
+ /**
934
+ * Skip to previous animation
935
+ */ prev() {
936
+ this._currentAnimation--;
937
+ this._switchInstance();
938
+ }
939
+ /**
940
+ * Convert JSON Lottie to dotLottie
941
+ * @param { boolean | undefined } typeCheck External type safety
942
+ * @param { LottieManifest | undefined } manifest Externally added manifest
943
+ * @param { LottieJSON[] | undefined } animations Externally added animations
944
+ * @param { boolean } download Whether to trigger a download in the browser
945
+ */ convert(typeCheck, manifest, animations, fileName, download = true) {
946
+ if (typeCheck || this._isDotLottie) return;
947
+ const oldManifest = manifest || this._manifest, newManifest = {
948
+ ...oldManifest,
949
+ generator: pkg.name
950
+ };
951
+ return createDotLottie(animations || this._animations, newManifest, `${getFilename(fileName || this.src)}.lottie`, download);
952
+ }
953
+ /**
954
+ * Return the styles for the component
955
+ * @returns { CSSResult }
956
+ */ static get styles() {
957
+ return styles;
958
+ }
959
+ /**
960
+ * Initialize everything on component first render
961
+ */ connectedCallback() {
962
+ super.connectedCallback();
963
+ // Add listener for Visibility API's change event.
964
+ if (typeof document.hidden !== 'undefined') {
965
+ document.addEventListener('visibilitychange', this._onVisibilityChange);
966
+ }
967
+ }
968
+ async firstUpdated() {
969
+ // Add intersection observer for detecting component being out-of-view.
970
+ if ('IntersectionObserver' in window) {
971
+ this._intersectionObserver = new IntersectionObserver((entries)=>{
972
+ if (entries[0].isIntersecting) {
973
+ if (!document.hidden && this.currentState === exports.PlayerState.Frozen) {
974
+ this.play();
975
+ }
976
+ } else if (this.currentState === exports.PlayerState.Playing) {
977
+ this._freeze();
978
+ }
979
+ });
980
+ this._intersectionObserver.observe(this.container);
981
+ }
982
+ // Setup lottie player
983
+ if (this.src) {
984
+ await this.load(this.src);
985
+ }
986
+ this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Rendered));
987
+ }
988
+ /**
989
+ * Cleanup on component destroy
990
+ */ disconnectedCallback() {
991
+ super.disconnectedCallback();
992
+ // Remove intersection observer for detecting component being out-of-view
993
+ if (this._intersectionObserver) {
994
+ this._intersectionObserver.disconnect();
995
+ this._intersectionObserver = undefined;
996
+ }
997
+ // Destroy the animation instance
998
+ if (this._lottieInstance) this._lottieInstance.destroy();
999
+ // Remove the attached Visibility API's change event listener
1000
+ document.removeEventListener('visibilitychange', this._onVisibilityChange);
1001
+ }
1002
+ renderControls() {
1003
+ const isPlaying = this.currentState === exports.PlayerState.Playing, isPaused = this.currentState === exports.PlayerState.Paused, isStopped = this.currentState === exports.PlayerState.Stopped, isError = this.currentState === exports.PlayerState.Error;
1004
+ return lit.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 ? lit.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>` : lit.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 ? lit.html`${this._currentAnimation > 0 ? lit.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>` : lit.nothing} ${this._currentAnimation + 1 < this._animations?.length ? lit.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>` : lit.nothing}` : lit.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 ? lit.nothing : lit.html`<button @click="${this.toggleLooping}" data-active="${this.loop ?? lit.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 === exports.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 ? lit.nothing : lit.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>`;
1005
+ }
1006
+ render() {
1007
+ return lit.html`<figure class="${'animation-container main'}" data-controls="${this.controls ?? lit.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 === exports.PlayerState.Error ? lit.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>` : lit.nothing}</div>${this.controls ? this.renderControls() : lit.nothing}</figure>`;
1008
+ }
1009
+ constructor(...args){
1010
+ super(...args);
1011
+ /**
1012
+ * Background color
1013
+ */ this.background = 'transparent';
1014
+ /**
1015
+ * Display controls
1016
+ */ this.controls = false;
1017
+ /**
1018
+ * Player state
1019
+ */ this.currentState = exports.PlayerState.Loading;
1020
+ /**
1021
+ * Direction of animation
1022
+ */ this.direction = 1;
1023
+ /**
1024
+ * Whether to play on mouseover
1025
+ */ this.hover = false;
1026
+ /**
1027
+ * Intermission
1028
+ */ this.intermission = 0;
1029
+ /**
1030
+ * Whether to loop
1031
+ */ this.loop = false;
1032
+ /**
1033
+ * Play mode
1034
+ */ this.mode = exports.PlayMode.Normal;
1035
+ /**
1036
+ * Resizing to container
1037
+ */ this.objectfit = 'contain';
1038
+ /**
1039
+ * Renderer to use (svg, canvas or html)
1040
+ */ this.renderer = 'svg';
1041
+ /**
1042
+ * Hide advanced controls
1043
+ */ this.simple = false;
1044
+ /**
1045
+ * Speed
1046
+ */ this.speed = 1;
1047
+ /**
1048
+ * Subframe
1049
+ */ this.subframe = true;
1050
+ /**
1051
+ * Whether settings toolbar is open
1052
+ */ this._isSettingsOpen = false;
1053
+ /**
1054
+ * Seeker
1055
+ */ this._seeker = 0;
1056
+ /**
1057
+ * Which animation to show, if several
1058
+ */ this._currentAnimation = 0;
1059
+ this._lottieInstance = null;
1060
+ this._identifier = this.id || useId('dotlottie');
1061
+ this._errorMessage = 'Something went wrong';
1062
+ this._isDotLottie = false;
1063
+ this._playerState = {
1064
+ prev: exports.PlayerState.Loading,
1065
+ count: 0,
1066
+ loaded: false
1067
+ };
1068
+ /**
1069
+ * Handle settings click event
1070
+ */ this._handleSettingsClick = ({ target })=>{
1071
+ this._toggleSettings();
1072
+ // Because Safari does not add focus on click, we need to add it manually, so the onblur event will fire
1073
+ if (target instanceof HTMLElement) {
1074
+ target.focus();
1075
+ }
1076
+ };
1077
+ }
1078
+ };
1079
+ _ts_decorate([
1080
+ decorators_js.property({
1081
+ type: Boolean,
1082
+ reflect: true
1083
+ })
1084
+ ], exports.DotLottiePlayer.prototype, "autoplay", void 0);
1085
+ _ts_decorate([
1086
+ decorators_js.property({
1087
+ type: String
1088
+ })
1089
+ ], exports.DotLottiePlayer.prototype, "background", void 0);
1090
+ _ts_decorate([
1091
+ decorators_js.property({
1092
+ type: Boolean,
1093
+ reflect: true
1094
+ })
1095
+ ], exports.DotLottiePlayer.prototype, "controls", void 0);
1096
+ _ts_decorate([
1097
+ decorators_js.property({
1098
+ type: Number
1099
+ })
1100
+ ], exports.DotLottiePlayer.prototype, "count", void 0);
1101
+ _ts_decorate([
1102
+ decorators_js.property({
1103
+ type: String
1104
+ })
1105
+ ], exports.DotLottiePlayer.prototype, "currentState", void 0);
1106
+ _ts_decorate([
1107
+ decorators_js.property({
1108
+ type: String
1109
+ })
1110
+ ], exports.DotLottiePlayer.prototype, "description", void 0);
1111
+ _ts_decorate([
1112
+ decorators_js.property({
1113
+ type: Number
1114
+ })
1115
+ ], exports.DotLottiePlayer.prototype, "direction", void 0);
1116
+ _ts_decorate([
1117
+ decorators_js.property({
1118
+ type: Boolean
1119
+ })
1120
+ ], exports.DotLottiePlayer.prototype, "hover", void 0);
1121
+ _ts_decorate([
1122
+ decorators_js.property({
1123
+ type: Number
1124
+ })
1125
+ ], exports.DotLottiePlayer.prototype, "intermission", void 0);
1126
+ _ts_decorate([
1127
+ decorators_js.property({
1128
+ type: Boolean,
1129
+ reflect: true
1130
+ })
1131
+ ], exports.DotLottiePlayer.prototype, "loop", void 0);
1132
+ _ts_decorate([
1133
+ decorators_js.property({
1134
+ type: String
1135
+ })
1136
+ ], exports.DotLottiePlayer.prototype, "mode", void 0);
1137
+ _ts_decorate([
1138
+ decorators_js.property({
1139
+ type: String
1140
+ })
1141
+ ], exports.DotLottiePlayer.prototype, "objectfit", void 0);
1142
+ _ts_decorate([
1143
+ decorators_js.property({
1144
+ type: String
1145
+ })
1146
+ ], exports.DotLottiePlayer.prototype, "preserveAspectRatio", void 0);
1147
+ _ts_decorate([
1148
+ decorators_js.property({
1149
+ type: String
1150
+ })
1151
+ ], exports.DotLottiePlayer.prototype, "renderer", void 0);
1152
+ _ts_decorate([
1153
+ decorators_js.property({
1154
+ type: Array
1155
+ })
1156
+ ], exports.DotLottiePlayer.prototype, "segment", void 0);
1157
+ _ts_decorate([
1158
+ decorators_js.property({
1159
+ type: Boolean
1160
+ })
1161
+ ], exports.DotLottiePlayer.prototype, "simple", void 0);
1162
+ _ts_decorate([
1163
+ decorators_js.property({
1164
+ type: Number
1165
+ })
1166
+ ], exports.DotLottiePlayer.prototype, "speed", void 0);
1167
+ _ts_decorate([
1168
+ decorators_js.property({
1169
+ type: String
1170
+ })
1171
+ ], exports.DotLottiePlayer.prototype, "src", void 0);
1172
+ _ts_decorate([
1173
+ decorators_js.property({
1174
+ type: Boolean
1175
+ })
1176
+ ], exports.DotLottiePlayer.prototype, "subframe", void 0);
1177
+ _ts_decorate([
1178
+ decorators_js.query('.animation')
1179
+ ], exports.DotLottiePlayer.prototype, "container", void 0);
1180
+ _ts_decorate([
1181
+ decorators_js.state()
1182
+ ], exports.DotLottiePlayer.prototype, "_isSettingsOpen", void 0);
1183
+ _ts_decorate([
1184
+ decorators_js.state()
1185
+ ], exports.DotLottiePlayer.prototype, "_seeker", void 0);
1186
+ _ts_decorate([
1187
+ decorators_js.state()
1188
+ ], exports.DotLottiePlayer.prototype, "_currentAnimation", void 0);
1189
+ _ts_decorate([
1190
+ decorators_js.state()
1191
+ ], exports.DotLottiePlayer.prototype, "_animations", void 0);
1192
+ exports.DotLottiePlayer = _ts_decorate([
1193
+ decorators_js.customElement('dotlottie-player')
1194
+ ], exports.DotLottiePlayer);
1195
+
1196
+ /**
1197
+ * Expose DotLottiePlayer class as global variable
1198
+ * @returns { DotLottiePlayer }
1199
+ */ globalThis.dotLottiePlayer = ()=>new exports.DotLottiePlayer();