@aarsteinmedia/dotlottie-player 2.0.3 → 2.0.5

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/README.md CHANGED
@@ -54,7 +54,7 @@ Add the element `dotlottie-player` to your markup and point `src` to a Lottie an
54
54
  >
55
55
  </dotlottie-player>
56
56
  ```
57
- # Load animation
57
+ ### Load animation
58
58
  To set animations programmatically, use the `load()` method.
59
59
 
60
60
  ```javascript
@@ -62,10 +62,10 @@ const lottiePlayer = document.querySelector('dotlottie-player')
62
62
  lottiePlayer.load('https://storage.googleapis.com/aarsteinmedia/am.lottie')
63
63
  ```
64
64
 
65
- # Convert to dotLottie
65
+ ### Convert to dotLottie
66
66
  If you have a Lottie JSON animation and want to convert it to a dotLottie – to leverage compression, combine multiple animations in one file and keep your file library tidy with a discrete file extension – you can do so with the `convert()` method. This will trigger a download in the browser. If you have `controls` set to visible there's a convert button visible for JSON files.
67
67
 
68
- # Combine animations
68
+ ### Combine animations
69
69
  If you want to combine multiple animations in one single dotLottie file you can use the `addAnimation` method. This will trigger a download in the browser. The source files can be either dotLottie or JSON, and the output file will will always be a dotLottie.
70
70
 
71
71
  ```javascript
@@ -102,7 +102,7 @@ export class AppComponent {
102
102
 
103
103
  ### React.js / Next.js
104
104
 
105
- If you've already imported the library in a parent component, you don't need to import it again in children of that component. If you want to assign the element a class note that you need to use the `class` namespace, and not `className`.
105
+ If you've already imported the library in a parent component, you don't need to import it again in children of that component. If you want to assign the element a CSS class note that you need to use the `class` namespace, and not `className`.
106
106
 
107
107
  ```jsx
108
108
  import '@aarsteinmedia/dotlottie-player'
package/dist/cjs/index.js CHANGED
@@ -1 +1 @@
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 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){try{var o;if(!(null==e?void 0:e.length)||!t)throw Error("Missing required params");let i=r||`${useId()}.lottie`,s={"manifest.json":[strToU8(JSON.stringify(t)),{level:0}]};for(let[r,i]of e.entries()){if(null===(o=i.assets)||void 0===o?void 0:o.length)for(let e of i.assets){let{id:t,p:r}=e;if(t&&r){let o=getExtFromB64(r);e.p=`${t}.${o}`,e.e=0,s[`images/${t}.${o}`]=[base64ToU8(r),{level:9}]}}s[`animations/${t.animations[r].id}.json`]=[strToU8(JSON.stringify(i)),{level:9}]}download((yield getArrayBuffer(s)),{name:i,mimeType:"application/zip"})}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}if("json"===getExt(e)){let e=yield t.json();return{animations:[e],manifest:null}}let{data:r,manifest:o}=yield getLottieJSON(t);return{animations:r,manifest:o,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,r;return null!==(r=null===(t=e.split(".").pop())||void 0===t?void 0:t.toLowerCase())&&void 0!==r?r:""},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}`:""}`.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""}},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.0.2",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/dev/dotlottie-player",repository={url:"https://github.com/johanaarstein/dotlottie-player.git",type:"git"},bugs="https://github.com/johanaarstein/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 run cleanup && rollup -c","build:types":"tsc --declaration","build:cem":"npx cem analyze --config 'cem.config.mjs'",prod:"pnpm run build:types && pnpm run build && pnpm run build:cem",dev:"pnpm run cleanup && rollup -c --watch",lint:"tsc && eslint . --ext .ts,.js","lint:fix":"eslint . --ext .ts,.js --fix",cleanup:"shx rm -rf dist && shx mkdir dist",preinstall:"npx only-allow pnpm"},dependencies={fflate:"^0.8.0",lit:"^2.8.0","lottie-web":"^5.12.2"},devDependencies={"@custom-elements-manifest/analyzer":"^0.6.9","@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-json":"^6.0.0","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-replace":"^5.0.2","@swc/core":"1.3.75","@types/node":"^20.6.2","@types/react":"^18.2.21","@typescript-eslint/eslint-plugin":"^5.62.0","@typescript-eslint/parser":"^5.62.0",eslint:"^8.49.0",rollup:"^3.29.2","rollup-plugin-dts":"^6.0.2","rollup-plugin-html-literals":"^1.1.7","rollup-plugin-summary":"^2.0.0","rollup-plugin-swc3":"^0.9.1",shx:"^0.3.4",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,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%}.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",()=>{this.currentState=exports.PlayerState.Completed,this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Complete))}),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){var t=this;return _async_to_generator(function*(){try{let r=_object_spread_props(_object_spread({},t._manifest),{generator:pkg.name}),o=t._animations;for(let i of e){let{url:e}=i,{animations:s}=yield getAnimationData(e);if(!s)throw Error("No animation loaded");if(t._manifest.animations.some(({id:e})=>e===i.id))throw Error("Duplicate id for animation");let n=_object_spread_props(_object_spread({},i),{url:void 0});r=_object_spread_props(_object_spread({},r),{animations:[...r.animations,n]}),o=[...t._animations,...s]}createDotLottie(o,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._lottieInstance.goToAndPlay(0,!0),this.currentState=exports.PlayerState.Playing}next(){this._currentAnimation++,this._switchInstance()}prev(){this._currentAnimation--,this._switchInstance()}convert(){if(this._isDotLottie)return;let e=_object_spread_props(_object_spread({},this._manifest),{generator:pkg.name});createDotLottie(this._animations,e,`${getFilename(this.src)}.lottie`)}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"><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><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.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: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),exports.DotLottiePlayer=_ts_decorate([decorators_js.customElement("dotlottie-player")],exports.DotLottiePlayer);
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 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){try{var o;if(!(null==e?void 0:e.length)||!t)throw Error("Missing required params");let i=r||`${useId()}.lottie`,s={"manifest.json":[strToU8(JSON.stringify(t)),{level:0}]};for(let[r,i]of e.entries()){if(null===(o=i.assets)||void 0===o?void 0:o.length)for(let e of i.assets){let{id:t,p:r}=e;if(t&&r){let o=getExtFromB64(r);e.p=`${t}.${o}`,e.e=0,s[`images/${t}.${o}`]=[base64ToU8(r),{level:9}]}}s[`animations/${t.animations[r].id}.json`]=[strToU8(JSON.stringify(i)),{level:9}]}download((yield getArrayBuffer(s)),{name:i,mimeType:"application/zip"})}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}if("json"===getExt(e)){let e=yield t.json();return{animations:[e],manifest:null}}let{data:r,manifest:o}=yield getLottieJSON(t);return{animations:r,manifest:o,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,r;return null!==(r=null===(t=e.split(".").pop())||void 0===t?void 0:t.toLowerCase())&&void 0!==r?r:""},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}`:""}`.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""}},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.0.5",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/dev/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 run cleanup && rollup -c","build:types":"tsc --declaration","build:cem":"npx cem analyze --config 'cem.config.mjs'",prod:"pnpm run build:types && pnpm run build && pnpm run build:cem",dev:"pnpm run cleanup && rollup -c --watch",lint:"tsc && eslint . --ext .ts,.js","lint:fix":"eslint . --ext .ts,.js --fix",cleanup:"shx rm -rf dist && shx mkdir dist",preinstall:"npx only-allow pnpm"},dependencies={fflate:"^0.8.1",lit:"^2.8.0","lottie-web":"^5.12.2"},devDependencies={"@custom-elements-manifest/analyzer":"^0.6.9","@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-json":"^6.0.0","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-replace":"^5.0.2","@swc/core":"1.3.75","@types/node":"^20.8.2","@types/react":"^18.2.24","@typescript-eslint/eslint-plugin":"^5.62.0","@typescript-eslint/parser":"^5.62.0",eslint:"^8.50.0",rollup:"^3.29.4","rollup-plugin-dts":"^6.0.2","rollup-plugin-html-literals":"^1.1.7","rollup-plugin-summary":"^2.0.0","rollup-plugin-swc3":"^0.9.1",shx:"^0.3.4",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,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%}.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",()=>{this.currentState=exports.PlayerState.Completed,this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Complete))}),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){var t=this;return _async_to_generator(function*(){try{let r=_object_spread_props(_object_spread({},t._manifest),{generator:pkg.name}),o=t._animations;for(let i of e){let{url:e}=i,{animations:s}=yield getAnimationData(e);if(!s)throw Error("No animation loaded");if(t._manifest.animations.some(({id:e})=>e===i.id))throw Error("Duplicate id for animation");let n=_object_spread_props(_object_spread({},i),{url:void 0});r=_object_spread_props(_object_spread({},r),{animations:[...r.animations,n]}),o=[...t._animations,...s]}createDotLottie(o,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._lottieInstance.goToAndPlay(0,!0),this.currentState=exports.PlayerState.Playing}next(){this._currentAnimation++,this._switchInstance()}prev(){this._currentAnimation--,this._switchInstance()}convert(){if(this._isDotLottie)return;let e=_object_spread_props(_object_spread({},this._manifest),{generator:pkg.name});createDotLottie(this._animations,e,`${getFilename(this.src)}.lottie`)}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"><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><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.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: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),exports.DotLottiePlayer=_ts_decorate([decorators_js.customElement("dotlottie-player")],exports.DotLottiePlayer);