| 1 |
'use strict'; |
| 2 |
|
| 3 |
import * as lit from 'lit'; |
| 4 |
import * as decorators_js from 'lit/decorators.js'; |
| 5 |
import * as Lottie from 'lottie-web'; |
| 6 |
import * as fflate from '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["Next"] = "next"; |
| 34 |
PlayerEvents["Pause"] = "pause"; |
| 35 |
PlayerEvents["Play"] = "play"; |
| 36 |
PlayerEvents["Previous"] = "previous"; |
| 37 |
PlayerEvents["Ready"] = "ready"; |
| 38 |
PlayerEvents["Rendered"] = "rendered"; |
| 39 |
PlayerEvents["Stop"] = "stop"; |
| 40 |
})(exports.PlayerEvents || (exports.PlayerEvents = {})); |
| 41 |
class CustomError extends Error { |
| 42 |
} |
| 43 |
const addExt = (ext, str)=>{ |
| 44 |
if (!str) return; |
| 45 |
if (getExt(str)) { |
| 46 |
if (getExt(str) === ext) return str; |
| 47 |
return `${getFilename(str)}.${ext}`; |
| 48 |
} |
| 49 |
return `${str}.${ext}`; |
| 50 |
}, aspectRatio = (objectFit)=>{ |
| 51 |
switch(objectFit){ |
| 52 |
case 'contain': |
| 53 |
case 'scale-down': |
| 54 |
return 'xMidYMid meet'; |
| 55 |
case 'cover': |
| 56 |
return 'xMidYMid slice'; |
| 57 |
case 'fill': |
| 58 |
return 'none'; |
| 59 |
case 'none': |
| 60 |
return 'xMinYMin slice'; |
| 61 |
default: |
| 62 |
return 'xMidYMid meet'; |
| 63 |
} |
| 64 |
}, base64ToU8 = (str)=>fflate.strToU8(isServer() ? Buffer.from(parseBase64(str), 'base64').toString('binary') : atob(parseBase64(str)), true), createDotLottie = async ({ animations, manifest, fileName, shouldDownload = true })=>{ |
| 65 |
try { |
| 66 |
if (!animations?.length || !manifest) { |
| 67 |
throw new Error(`Missing or malformed required parameter(s):\n ${!animations?.length ? '- animations\n' : ''} ${!manifest ? '- manifest \n' : ''}`); |
| 68 |
} |
| 69 |
const name = addExt('lottie', fileName) || `${useId()}.lottie`, dotlottie = { |
| 70 |
'manifest.json': [ |
| 71 |
fflate.strToU8(JSON.stringify(manifest), true), |
| 72 |
{ |
| 73 |
level: 0 |
| 74 |
} |
| 75 |
] |
| 76 |
}; |
| 77 |
for (const [i, animation] of animations.entries()){ |
| 78 |
for (const asset of animation.assets ?? []){ |
| 79 |
if (!asset.p || !isImage(asset) && !isAudio(asset)) { |
| 80 |
continue; |
| 81 |
} |
| 82 |
const { p: file, u: path } = asset, assetId = asset.id || useId(), isEncoded = file.startsWith('data:'), ext = isEncoded ? getExtFromB64(file) : getExt(file), dataURL = isEncoded ? file : await fileToBase64(path ? path.endsWith('/') && `${path}${file}` || `${path}/${file}` : file); |
| 83 |
asset.p = `${assetId}.${ext}`; |
| 84 |
asset.u = ''; |
| 85 |
asset.e = 1; |
| 86 |
dotlottie[`${isAudio(asset) ? 'audio' : 'images'}/${assetId}.${ext}`] = [ |
| 87 |
base64ToU8(dataURL), |
| 88 |
{ |
| 89 |
level: 9 |
| 90 |
} |
| 91 |
]; |
| 92 |
} |
| 93 |
dotlottie[`animations/${manifest.animations[i].id}.json`] = [ |
| 94 |
fflate.strToU8(JSON.stringify(animation), true), |
| 95 |
{ |
| 96 |
level: 9 |
| 97 |
} |
| 98 |
]; |
| 99 |
} |
| 100 |
const buffer = await getArrayBuffer(dotlottie); |
| 101 |
return shouldDownload ? download(buffer, { |
| 102 |
name, |
| 103 |
mimeType: 'application/zip' |
| 104 |
}) : buffer; |
| 105 |
} catch (err) { |
| 106 |
console.error(`❌ ${handleErrors(err).message}`); |
| 107 |
} |
| 108 |
}, createJSON = ({ animation, fileName, shouldDownload })=>{ |
| 109 |
try { |
| 110 |
if (!animation) { |
| 111 |
throw new Error('Missing or malformed required parameter(s):\n - animation\n\''); |
| 112 |
} |
| 113 |
const name = addExt('json', fileName) || `${useId()}.json`, jsonString = JSON.stringify(animation); |
| 114 |
return shouldDownload ? download(jsonString, { |
| 115 |
name, |
| 116 |
mimeType: 'application/json' |
| 117 |
}) : jsonString; |
| 118 |
} catch (err) { |
| 119 |
console.error(`❌ ${handleErrors(err).message}`); |
| 120 |
} |
| 121 |
}, download = (data, options)=>{ |
| 122 |
const blob = new Blob([ |
| 123 |
data |
| 124 |
], { |
| 125 |
type: options?.mimeType |
| 126 |
}), fileName = options?.name || useId(), dataURL = URL.createObjectURL(blob), link = document.createElement('a'); |
| 127 |
link.href = dataURL; |
| 128 |
link.download = fileName; |
| 129 |
link.hidden = true; |
| 130 |
document.body.appendChild(link); |
| 131 |
link.click(); |
| 132 |
setTimeout(()=>{ |
| 133 |
link.remove(); |
| 134 |
URL.revokeObjectURL(dataURL); |
| 135 |
}, 1000); |
| 136 |
}, fileToBase64 = async (url)=>{ |
| 137 |
const response = await fetch(url), blob = await response.blob(); |
| 138 |
return new Promise((resolve, reject)=>{ |
| 139 |
try { |
| 140 |
const reader = new FileReader(); |
| 141 |
reader.onload = ()=>{ |
| 142 |
if (typeof reader.result === 'string') { |
| 143 |
resolve(reader.result); |
| 144 |
return; |
| 145 |
} |
| 146 |
reject(); |
| 147 |
}; |
| 148 |
reader.readAsDataURL(blob); |
| 149 |
} catch (e) { |
| 150 |
reject(e); |
| 151 |
} |
| 152 |
}); |
| 153 |
}, frameOutput = (frame)=>((frame ?? 0) + 1).toString().padStart(3, '0'), getAnimationData = async (input)=>{ |
| 154 |
try { |
| 155 |
if (!input || typeof input !== 'string' && typeof input !== 'object') { |
| 156 |
throw new Error('Broken file or invalid file format'); |
| 157 |
} |
| 158 |
if (typeof input !== 'string') { |
| 159 |
const animations = Array.isArray(input) ? input : [ |
| 160 |
input |
| 161 |
]; |
| 162 |
return { |
| 163 |
animations, |
| 164 |
manifest: undefined, |
| 165 |
isDotLottie: false |
| 166 |
}; |
| 167 |
} |
| 168 |
const result = await fetch(input); |
| 169 |
if (!result.ok) { |
| 170 |
const error = new CustomError(result.statusText); |
| 171 |
error.status = result.status; |
| 172 |
throw error; |
| 173 |
} |
| 174 |
const ext = getExt(input); |
| 175 |
if (ext === 'json' || !ext) { |
| 176 |
if (ext) { |
| 177 |
const lottie = await result.json(); |
| 178 |
return { |
| 179 |
animations: [ |
| 180 |
lottie |
| 181 |
], |
| 182 |
manifest: undefined, |
| 183 |
isDotLottie: false |
| 184 |
}; |
| 185 |
} |
| 186 |
const text = await result.clone().text(); |
| 187 |
try { |
| 188 |
const lottie = JSON.parse(text); |
| 189 |
return { |
| 190 |
animations: [ |
| 191 |
lottie |
| 192 |
], |
| 193 |
manifest: undefined, |
| 194 |
isDotLottie: false |
| 195 |
}; |
| 196 |
} catch (e) { |
| 197 |
console.warn(e); |
| 198 |
} |
| 199 |
} |
| 200 |
const { data, manifest } = await getLottieJSON(result); |
| 201 |
return { |
| 202 |
animations: data, |
| 203 |
manifest, |
| 204 |
isDotLottie: true |
| 205 |
}; |
| 206 |
} catch (err) { |
| 207 |
console.error(`❌ ${handleErrors(err).message}`); |
| 208 |
return { |
| 209 |
animations: undefined, |
| 210 |
manifest: undefined, |
| 211 |
isDotLottie: false |
| 212 |
}; |
| 213 |
} |
| 214 |
}, getArrayBuffer = async (zippable)=>{ |
| 215 |
const arrayBuffer = await new Promise((resolve, reject)=>{ |
| 216 |
fflate.zip(zippable, { |
| 217 |
level: 9 |
| 218 |
}, (err, data)=>{ |
| 219 |
if (err) { |
| 220 |
reject(err); |
| 221 |
return; |
| 222 |
} |
| 223 |
resolve(data.buffer); |
| 224 |
}); |
| 225 |
}); |
| 226 |
return arrayBuffer; |
| 227 |
}, getExt = (str)=>{ |
| 228 |
if (!str || !hasExt(str)) return; |
| 229 |
return str.split('.').pop()?.toLowerCase(); |
| 230 |
}, getExtFromB64 = (str)=>{ |
| 231 |
const mime = str.split(':')[1].split(';')[0]; |
| 232 |
return mime.split('/')[1].split('+')[0]; |
| 233 |
}, getFilename = (src, keepExt)=>{ |
| 234 |
const ext = getExt(src); |
| 235 |
return `${src.split('/').pop()?.replace(/\.[^.]*$/, '').replace(/\W+/g, '')}${keepExt && ext ? `.${ext}` : ''}`; |
| 236 |
}, getLottieJSON = async (resp)=>{ |
| 237 |
const unzipped = await unzip(resp), manifest = getManifest(unzipped), data = [], toResolve = []; |
| 238 |
for (const { id } of manifest.animations){ |
| 239 |
const str = fflate.strFromU8(unzipped[`animations/${id}.json`]), lottie = JSON.parse(str); |
| 240 |
toResolve.push(resolveAssets(unzipped, lottie.assets)); |
| 241 |
data.push(lottie); |
| 242 |
} |
| 243 |
await Promise.all(toResolve); |
| 244 |
return { |
| 245 |
data, |
| 246 |
manifest |
| 247 |
}; |
| 248 |
}, getManifest = (unzipped)=>{ |
| 249 |
const file = fflate.strFromU8(unzipped['manifest.json'], false), manifest = JSON.parse(file); |
| 250 |
if (!('animations' in manifest)) throw new Error('Manifest not found'); |
| 251 |
if (!manifest.animations.length) throw new Error('No animations listed in manifest'); |
| 252 |
return manifest; |
| 253 |
}, getMimeFromExt = (ext)=>{ |
| 254 |
switch(ext){ |
| 255 |
case 'svg': |
| 256 |
case 'svg+xml': |
| 257 |
return 'image/svg+xml'; |
| 258 |
case 'jpg': |
| 259 |
case 'jpeg': |
| 260 |
return 'image/jpeg'; |
| 261 |
case 'png': |
| 262 |
case 'gif': |
| 263 |
case 'webp': |
| 264 |
return `image/${ext}`; |
| 265 |
case 'mp3': |
| 266 |
case 'mpeg': |
| 267 |
case 'wav': |
| 268 |
return `audio/${ext}`; |
| 269 |
default: |
| 270 |
return ''; |
| 271 |
} |
| 272 |
}, handleErrors = (err)=>{ |
| 273 |
const res = { |
| 274 |
message: 'Unknown error', |
| 275 |
status: isServer() ? 500 : 400 |
| 276 |
}; |
| 277 |
if (err && typeof err === 'object') { |
| 278 |
if ('message' in err && typeof err.message === 'string') { |
| 279 |
res.message = err.message; |
| 280 |
} |
| 281 |
if ('status' in err) { |
| 282 |
res.status = Number(err.status); |
| 283 |
} |
| 284 |
} |
| 285 |
return res; |
| 286 |
}, hasExt = (path)=>{ |
| 287 |
const lastDotIndex = path?.split('/').pop()?.lastIndexOf('.'); |
| 288 |
return (lastDotIndex ?? 0) > 1 && path && path.length - 1 > (lastDotIndex ?? 0); |
| 289 |
}, isAudio = (asset)=>!('h' in asset) && !('w' in asset) && 'p' in asset && 'e' in asset && 'u' in asset && 'id' in asset, isBase64 = (str)=>{ |
| 290 |
if (!str) return false; |
| 291 |
const regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/; |
| 292 |
return regex.test(parseBase64(str)); |
| 293 |
}, isImage = (asset)=>'w' in asset && 'h' in asset && !('xt' in asset) && 'p' in asset, isServer = ()=>!(typeof window !== 'undefined' && window.document), parseBase64 = (str)=>str.substring(str.indexOf(',') + 1), resolveAssets = async (unzipped, assets)=>{ |
| 294 |
if (!Array.isArray(assets)) return; |
| 295 |
const toResolve = []; |
| 296 |
for (const asset of assets){ |
| 297 |
if (!isAudio(asset) && !isImage(asset)) continue; |
| 298 |
const type = isImage(asset) ? 'images' : 'audio', u8 = unzipped?.[`${type}/${asset.p}`]; |
| 299 |
if (!u8) continue; |
| 300 |
toResolve.push(new Promise((resolveAsset)=>{ |
| 301 |
const assetB64 = isServer() ? Buffer.from(u8).toString('base64') : btoa(u8.reduce((dat, byte)=>`${dat}${String.fromCharCode(byte)}`, '')); |
| 302 |
asset.p = asset.p?.startsWith('data:') || isBase64(asset.p) ? asset.p : `data:${getMimeFromExt(getExt(asset.p))};base64,${assetB64}`; |
| 303 |
asset.e = 1; |
| 304 |
asset.u = ''; |
| 305 |
resolveAsset(); |
| 306 |
})); |
| 307 |
} |
| 308 |
await Promise.all(toResolve); |
| 309 |
}, unzip = async (resp)=>{ |
| 310 |
const u8 = new Uint8Array(await resp.arrayBuffer()), unzipped = await new Promise((resolve, reject)=>{ |
| 311 |
fflate.unzip(u8, (err, file)=>{ |
| 312 |
if (err) { |
| 313 |
reject(err); |
| 314 |
} |
| 315 |
resolve(file); |
| 316 |
}); |
| 317 |
}); |
| 318 |
return unzipped; |
| 319 |
}, useId = (prefix)=>{ |
| 320 |
const s4 = ()=>{ |
| 321 |
return ((1 + Math.random()) * 0x10000 | 0).toString(16).substring(1); |
| 322 |
}; |
| 323 |
return `${prefix ?? `:${s4()}`}-${s4()}`; |
| 324 |
}; |
| 325 |
|
| 326 |
var name="dotlottie-player";var version="2.5.5";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports$1={".":{"import":"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}};var main="./dist/esm/index.js";var unpkg="./dist/index.js";var module$1="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"};var bugs="https://github.com/aarsteinmedia/dotlottie-player/issues";var author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"};var license="GPL-2.0-or-later";var scripts={build:"rimraf ./dist && rollup -c","build:types":"rimraf ./types && tsc","build:cem":"npx cem analyze --config cem.config.mjs",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"rollup -c -w --environment NODE_ENV:development",lint:"tsc && eslint . --ext .ts","lint:fix":"eslint . --ext .ts --fix"};var dependencies={fflate:"^0.8.2",lit:"^3.1.2","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.9.4","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.5","@swc/core":"^1.4.8","@types/node":"^20.11.30","@typescript-eslint/eslint-plugin":"^7.3.1","@typescript-eslint/parser":"^7.3.1",autoprefixer:"^10.4.18","esbuild-sass-plugin":"^3.2.0",eslint:"^8.57.0","eslint-plugin-lit":"^1.11.0","postcss-flexbugs-fixes":"^5.0.2",rimraf:"^5.0.5",rollup:"^4.13.0","rollup-plugin-dts":"^6.1.0","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-postcss-lit":"^2.1.0","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.0","rollup-plugin-swc3":"^0.11.0",sass:"^1.72.0","ts-lit-plugin":"^2.0.2",typescript:"^5.4.2"};var customElements="dist/custom-elements.json";var files=["dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","component","lit-element","svg","vector","player"];var publishConfig={access:"public"};var engines={node:">= 8.17.0"};var funding={type:"paypal",url:"https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"};var pkg = {name:name,version:version,description:description,exports:exports$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}; |
| 327 |
|
| 328 |
var css_248z = 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;padding: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{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0}.seeker::-webkit-slider-runnable-track,.seeker::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;outline:0}progress{-webkit-appearance:none;-moz-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;-webkit-transition:transform .2s ease-in-out;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;-moz-transition:transform .2s ease-in-out;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;-ms-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:hover::-ms-thumb{transform:scale(1)}.seeker:focus::-ms-thumb{transform:scale(1)}.seeker:focus::-ms-fill-lower,.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}}`; |
| 329 |
|
| 330 |
function _ts_decorate(decorators, target, key, desc) { |
| 331 |
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; |
| 332 |
if (typeof Reflect === "object" && typeof undefined === "function") r = undefined(decorators, target, key, desc); |
| 333 |
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; |
| 334 |
return c > 3 && r && Object.defineProperty(target, key, r), r; |
| 335 |
} |
| 336 |
class DotLottiePlayer extends lit.LitElement { |
| 337 |
_getOptions() { |
| 338 |
const preserveAspectRatio = this.preserveAspectRatio ?? (this.objectfit && aspectRatio(this.objectfit)), currentAnimationSettings = this.multiAnimationSettings?.[this._currentAnimation], currentAnimationManifest = this._manifest.animations?.[this._currentAnimation], loop = currentAnimationSettings?.loop !== undefined ? !!currentAnimationSettings.loop : this.loop !== undefined ? !!this.loop : currentAnimationManifest.loop !== undefined && !!currentAnimationManifest.loop, autoplay = !this.animateOnScroll && (currentAnimationSettings?.autoplay !== undefined ? !!currentAnimationSettings.autoplay : this.autoplay !== undefined ? !!this.autoplay : currentAnimationManifest.autoplay !== undefined && !!currentAnimationManifest.autoplay), initialSegment = !this.segment || this.segment.some((val)=>val < 0) ? undefined : this.segment.every((val)=>val > 0) ? [ |
| 339 |
this.segment[0] - 1, |
| 340 |
this.segment[1] - 1 |
| 341 |
] : this.segment, options = { |
| 342 |
container: this.container, |
| 343 |
loop, |
| 344 |
autoplay, |
| 345 |
renderer: this.renderer, |
| 346 |
initialSegment, |
| 347 |
rendererSettings: { |
| 348 |
imagePreserveAspectRatio: preserveAspectRatio |
| 349 |
} |
| 350 |
}; |
| 351 |
switch(this.renderer){ |
| 352 |
case 'svg': |
| 353 |
options.rendererSettings = { |
| 354 |
...options.rendererSettings, |
| 355 |
hideOnTransparent: true, |
| 356 |
preserveAspectRatio, |
| 357 |
progressiveLoad: true |
| 358 |
}; |
| 359 |
break; |
| 360 |
case 'canvas': |
| 361 |
options.rendererSettings = { |
| 362 |
...options.rendererSettings, |
| 363 |
clearCanvas: true, |
| 364 |
preserveAspectRatio, |
| 365 |
progressiveLoad: true |
| 366 |
}; |
| 367 |
break; |
| 368 |
case 'html': |
| 369 |
options.rendererSettings = { |
| 370 |
...options.rendererSettings, |
| 371 |
hideOnTransparent: true |
| 372 |
}; |
| 373 |
} |
| 374 |
return options; |
| 375 |
} |
| 376 |
_addIntersectionObserver() { |
| 377 |
if (this._intersectionObserver || !('IntersectionObserver' in window)) { |
| 378 |
return; |
| 379 |
} |
| 380 |
this._intersectionObserver = new IntersectionObserver((entries)=>{ |
| 381 |
for (const entry of entries){ |
| 382 |
if (!entry.isIntersecting || document.hidden) { |
| 383 |
if (this.currentState === exports.PlayerState.Playing) { |
| 384 |
this._freeze(); |
| 385 |
} |
| 386 |
this._playerState.visible = false; |
| 387 |
continue; |
| 388 |
} |
| 389 |
if (!this.animateOnScroll && this.currentState === exports.PlayerState.Frozen) { |
| 390 |
this.play(); |
| 391 |
} |
| 392 |
if (!this._playerState.scrollY) { |
| 393 |
this._playerState.scrollY = scrollY; |
| 394 |
} |
| 395 |
this._playerState.visible = true; |
| 396 |
} |
| 397 |
}); |
| 398 |
this._intersectionObserver.observe(this.container); |
| 399 |
} |
| 400 |
async load(src) { |
| 401 |
if (!this.shadowRoot) return; |
| 402 |
try { |
| 403 |
const { animations, manifest, isDotLottie } = await getAnimationData(src); |
| 404 |
if (!animations || animations.some((animation)=>!this._isLottie(animation))) { |
| 405 |
throw new Error('Broken or corrupted file'); |
| 406 |
} |
| 407 |
this._isBounce = this.multiAnimationSettings?.[this._currentAnimation]?.mode !== undefined ? this.multiAnimationSettings?.[this._currentAnimation]?.mode === exports.PlayMode.Bounce : this.mode === exports.PlayMode.Bounce; |
| 408 |
this._isDotLottie = !!isDotLottie; |
| 409 |
this._animations = animations; |
| 410 |
this._manifest = manifest ?? { |
| 411 |
animations: [ |
| 412 |
{ |
| 413 |
id: useId(), |
| 414 |
autoplay: !this.animateOnScroll && this.autoplay, |
| 415 |
loop: this.loop, |
| 416 |
direction: this.direction, |
| 417 |
mode: this.mode, |
| 418 |
speed: this.speed |
| 419 |
} |
| 420 |
] |
| 421 |
}; |
| 422 |
if (this._lottieInstance) this._lottieInstance.destroy(); |
| 423 |
this.currentState = this.autoplay && !this.animateOnScroll ? exports.PlayerState.Playing : exports.PlayerState.Stopped; |
| 424 |
this._lottieInstance = Lottie.loadAnimation({ |
| 425 |
...this._getOptions(), |
| 426 |
animationData: animations[this._currentAnimation] |
| 427 |
}); |
| 428 |
} catch (err) { |
| 429 |
this._errorMessage = handleErrors(err).message; |
| 430 |
this.currentState = exports.PlayerState.Error; |
| 431 |
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Error)); |
| 432 |
return; |
| 433 |
} |
| 434 |
this._addEventListeners(); |
| 435 |
const speed = this.multiAnimationSettings?.[this._currentAnimation]?.speed ?? this.speed ?? this._manifest.animations[this._currentAnimation].speed, direction = this.multiAnimationSettings?.[this._currentAnimation]?.direction ?? this.direction ?? this._manifest.animations[this._currentAnimation].direction ?? 1; |
| 436 |
this.setSpeed(speed); |
| 437 |
this.setDirection(direction); |
| 438 |
this.setSubframe(!!this.subframe); |
| 439 |
if (this.autoplay || this.animateOnScroll) { |
| 440 |
if (this.direction === -1) this.seek('99%'); |
| 441 |
if (!('IntersectionObserver' in window)) { |
| 442 |
!this.animateOnScroll && this.play(); |
| 443 |
this._playerState.visible = true; |
| 444 |
} |
| 445 |
this._addIntersectionObserver(); |
| 446 |
return; |
| 447 |
} |
| 448 |
} |
| 449 |
getManifest() { |
| 450 |
return this._manifest; |
| 451 |
} |
| 452 |
_addEventListeners() { |
| 453 |
if (!this._lottieInstance) return; |
| 454 |
this._lottieInstance.addEventListener('enterFrame', this._enterFrame); |
| 455 |
this._lottieInstance.addEventListener('complete', this._complete); |
| 456 |
this._lottieInstance.addEventListener('loopComplete', this._loopComplete); |
| 457 |
this._lottieInstance.addEventListener('DOMLoaded', this._DOMLoaded); |
| 458 |
this._lottieInstance.addEventListener('data_ready', this._dataReady); |
| 459 |
this._lottieInstance.addEventListener('data_failed', this._dataFailed); |
| 460 |
if (this.container && this.hover) { |
| 461 |
this.container.addEventListener('mouseenter', this._mouseEnter); |
| 462 |
this.container.addEventListener('mouseleave', this._mouseLeave); |
| 463 |
} |
| 464 |
addEventListener('focus', this._handleWindowBlur, { |
| 465 |
passive: true, |
| 466 |
capture: true |
| 467 |
}); |
| 468 |
addEventListener('blur', this._handleWindowBlur, { |
| 469 |
passive: true, |
| 470 |
capture: true |
| 471 |
}); |
| 472 |
if (this.animateOnScroll) { |
| 473 |
addEventListener('scroll', this._handleScroll, { |
| 474 |
passive: true, |
| 475 |
capture: true |
| 476 |
}); |
| 477 |
} |
| 478 |
} |
| 479 |
_removeEventListeners() { |
| 480 |
if (!this._lottieInstance || !this.container) return; |
| 481 |
this._lottieInstance.removeEventListener('enterFrame', this._enterFrame); |
| 482 |
this._lottieInstance.removeEventListener('complete', this._complete); |
| 483 |
this._lottieInstance.removeEventListener('loopComplete', this._loopComplete); |
| 484 |
this._lottieInstance.removeEventListener('DOMLoaded', this._DOMLoaded); |
| 485 |
this._lottieInstance.removeEventListener('data_ready', this._dataReady); |
| 486 |
this._lottieInstance.removeEventListener('data_failed', this._dataFailed); |
| 487 |
this.container.removeEventListener('mouseenter', this._mouseEnter); |
| 488 |
this.container.removeEventListener('mouseleave', this._mouseLeave); |
| 489 |
removeEventListener('focus', this._handleWindowBlur, true); |
| 490 |
removeEventListener('blur', this._handleWindowBlur, true); |
| 491 |
removeEventListener('scroll', this._handleScroll, true); |
| 492 |
} |
| 493 |
_loopComplete() { |
| 494 |
if (!this._lottieInstance) { |
| 495 |
return; |
| 496 |
} |
| 497 |
const { firstFrame, totalFrames, playDirection } = this._lottieInstance; |
| 498 |
if (this.count) { |
| 499 |
this._isBounce ? this._playerState.count += 1 : this._playerState.count += 0.5; |
| 500 |
if (this._playerState.count >= this.count) { |
| 501 |
this.setLooping(false); |
| 502 |
this.currentState = exports.PlayerState.Completed; |
| 503 |
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Complete)); |
| 504 |
return; |
| 505 |
} |
| 506 |
} |
| 507 |
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Loop)); |
| 508 |
if (this._isBounce) { |
| 509 |
this._lottieInstance.goToAndStop(playDirection === -1 ? firstFrame : totalFrames * 0.99, true); |
| 510 |
this._lottieInstance.setDirection(playDirection * -1); |
| 511 |
return setTimeout(()=>{ |
| 512 |
!this.animateOnScroll && this._lottieInstance?.play(); |
| 513 |
}, this.intermission); |
| 514 |
} |
| 515 |
this._lottieInstance.goToAndStop(playDirection === -1 ? totalFrames * 0.99 : firstFrame, true); |
| 516 |
return setTimeout(()=>{ |
| 517 |
!this.animateOnScroll && this._lottieInstance?.play(); |
| 518 |
}, this.intermission); |
| 519 |
} |
| 520 |
_enterFrame() { |
| 521 |
if (!this._lottieInstance) { |
| 522 |
return; |
| 523 |
} |
| 524 |
const { currentFrame, totalFrames } = this._lottieInstance; |
| 525 |
this._seeker = Math.floor(currentFrame / totalFrames * 100); |
| 526 |
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Frame, { |
| 527 |
detail: { |
| 528 |
frame: currentFrame, |
| 529 |
seeker: this._seeker |
| 530 |
} |
| 531 |
})); |
| 532 |
} |
| 533 |
_complete() { |
| 534 |
if (!this._lottieInstance) { |
| 535 |
return; |
| 536 |
} |
| 537 |
if (this._animations.length > 1 && this.multiAnimationSettings?.[this._currentAnimation + 1]?.autoplay) { |
| 538 |
return this.next(); |
| 539 |
} |
| 540 |
const { currentFrame, totalFrames } = this._lottieInstance; |
| 541 |
this._seeker = Math.floor(currentFrame / totalFrames * 100); |
| 542 |
this.currentState = exports.PlayerState.Completed; |
| 543 |
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Complete, { |
| 544 |
detail: { |
| 545 |
frame: currentFrame, |
| 546 |
seeker: this._seeker |
| 547 |
} |
| 548 |
})); |
| 549 |
} |
| 550 |
_DOMLoaded() { |
| 551 |
this._playerState.loaded = true; |
| 552 |
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Ready)); |
| 553 |
} |
| 554 |
_dataReady() { |
| 555 |
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Load)); |
| 556 |
} |
| 557 |
_dataFailed() { |
| 558 |
this.currentState = exports.PlayerState.Error; |
| 559 |
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Error)); |
| 560 |
} |
| 561 |
_handleWindowBlur({ type }) { |
| 562 |
if (this.currentState === exports.PlayerState.Playing && type === 'blur') { |
| 563 |
this._freeze(); |
| 564 |
} |
| 565 |
if (this.currentState === exports.PlayerState.Frozen && type === 'focus') { |
| 566 |
this.play(); |
| 567 |
} |
| 568 |
} |
| 569 |
_mouseEnter() { |
| 570 |
if (this.hover && this.currentState !== exports.PlayerState.Playing) { |
| 571 |
this.play(); |
| 572 |
} |
| 573 |
} |
| 574 |
_mouseLeave() { |
| 575 |
if (this.hover && this.currentState === exports.PlayerState.Playing) { |
| 576 |
this.stop(); |
| 577 |
} |
| 578 |
} |
| 579 |
_onVisibilityChange() { |
| 580 |
if (document.hidden && this.currentState === exports.PlayerState.Playing) { |
| 581 |
this._freeze(); |
| 582 |
return; |
| 583 |
} |
| 584 |
if (this.currentState === exports.PlayerState.Frozen) { |
| 585 |
this.play(); |
| 586 |
} |
| 587 |
} |
| 588 |
_handleScroll() { |
| 589 |
if (!this.animateOnScroll || !this._lottieInstance) { |
| 590 |
return; |
| 591 |
} |
| 592 |
if (isServer()) { |
| 593 |
console.warn('DotLottie: Scroll animations might not work properly in a Server Side Rendering context. Try to wrap this in a client component.'); |
| 594 |
} |
| 595 |
if (this._playerState.visible) { |
| 596 |
const adjustedScroll = scrollY > this._playerState.scrollY ? scrollY - this._playerState.scrollY : this._playerState.scrollY - scrollY, clampedScroll = Math.min(Math.max(adjustedScroll / 3, 1), this._lottieInstance.totalFrames * 3), roundedScroll = clampedScroll / 3; |
| 597 |
requestAnimationFrame(()=>{ |
| 598 |
if (roundedScroll < (this._lottieInstance?.totalFrames ?? 0)) { |
| 599 |
this.currentState = exports.PlayerState.Playing; |
| 600 |
this._lottieInstance?.goToAndStop(roundedScroll, true); |
| 601 |
} else { |
| 602 |
this.currentState = exports.PlayerState.Paused; |
| 603 |
} |
| 604 |
}); |
| 605 |
} |
| 606 |
if (this._playerState.scrollTimeout) { |
| 607 |
clearTimeout(this._playerState.scrollTimeout); |
| 608 |
} |
| 609 |
this._playerState.scrollTimeout = setTimeout(()=>{ |
| 610 |
this.currentState = exports.PlayerState.Paused; |
| 611 |
}, 400); |
| 612 |
} |
| 613 |
_handleSeekChange({ target }) { |
| 614 |
if (!(target instanceof HTMLInputElement) || !this._lottieInstance || isNaN(Number(target.value))) return; |
| 615 |
this.seek(Math.floor(Number(target.value) / 100 * this._lottieInstance.totalFrames)); |
| 616 |
setTimeout(()=>{ |
| 617 |
if (target.parentElement instanceof HTMLFormElement) { |
| 618 |
target.parentElement.reset(); |
| 619 |
} |
| 620 |
}, 100); |
| 621 |
} |
| 622 |
_isLottie(json) { |
| 623 |
const mandatory = [ |
| 624 |
'v', |
| 625 |
'ip', |
| 626 |
'op', |
| 627 |
'layers', |
| 628 |
'fr', |
| 629 |
'w', |
| 630 |
'h' |
| 631 |
]; |
| 632 |
return mandatory.every((field)=>Object.prototype.hasOwnProperty.call(json, field)); |
| 633 |
} |
| 634 |
async addAnimation(configs, fileName, shouldDownload = true) { |
| 635 |
const { animations = [], manifest = { |
| 636 |
animations: this.src ? [ |
| 637 |
{ |
| 638 |
id: this._identifier |
| 639 |
} |
| 640 |
] : [] |
| 641 |
} } = this.src ? await getAnimationData(this.src) : {}; |
| 642 |
try { |
| 643 |
manifest.generator = pkg.name; |
| 644 |
for (const config of configs){ |
| 645 |
const { url } = config, { animations: animationsToAdd } = await getAnimationData(url); |
| 646 |
if (!animationsToAdd) { |
| 647 |
throw new Error('No animation loaded'); |
| 648 |
} |
| 649 |
if (manifest.animations.some(({ id })=>id === config.id)) { |
| 650 |
throw new Error('Duplicate id for animation'); |
| 651 |
} |
| 652 |
manifest.animations = [ |
| 653 |
...manifest.animations, |
| 654 |
{ |
| 655 |
id: config.id |
| 656 |
} |
| 657 |
]; |
| 658 |
animations?.push(...animationsToAdd); |
| 659 |
} |
| 660 |
return createDotLottie({ |
| 661 |
animations, |
| 662 |
manifest, |
| 663 |
fileName, |
| 664 |
shouldDownload |
| 665 |
}); |
| 666 |
} catch (err) { |
| 667 |
console.error(handleErrors(err).message); |
| 668 |
} |
| 669 |
} |
| 670 |
getLottie() { |
| 671 |
return this._lottieInstance; |
| 672 |
} |
| 673 |
play() { |
| 674 |
if (!this._lottieInstance) return; |
| 675 |
if (this.currentState) { |
| 676 |
this._playerState.prev = this.currentState; |
| 677 |
} |
| 678 |
this._lottieInstance.play(); |
| 679 |
setTimeout(()=>{ |
| 680 |
this.currentState = exports.PlayerState.Playing; |
| 681 |
}, 0); |
| 682 |
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Play)); |
| 683 |
} |
| 684 |
pause() { |
| 685 |
if (!this._lottieInstance) return; |
| 686 |
if (this.currentState) { |
| 687 |
this._playerState.prev = this.currentState; |
| 688 |
} |
| 689 |
this._lottieInstance.pause(); |
| 690 |
setTimeout(()=>{ |
| 691 |
this.currentState = exports.PlayerState.Paused; |
| 692 |
}, 0); |
| 693 |
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Pause)); |
| 694 |
} |
| 695 |
stop() { |
| 696 |
if (!this._lottieInstance) return; |
| 697 |
if (this.currentState) { |
| 698 |
this._playerState.prev = this.currentState; |
| 699 |
} |
| 700 |
this._playerState.count = 0; |
| 701 |
this._lottieInstance.stop(); |
| 702 |
setTimeout(()=>{ |
| 703 |
this.currentState = exports.PlayerState.Stopped; |
| 704 |
}, 0); |
| 705 |
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Stop)); |
| 706 |
} |
| 707 |
destroy() { |
| 708 |
if (!this._lottieInstance) return; |
| 709 |
this.currentState = exports.PlayerState.Destroyed; |
| 710 |
this._lottieInstance.destroy(); |
| 711 |
this._lottieInstance = null; |
| 712 |
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Destroyed)); |
| 713 |
this.remove(); |
| 714 |
document.removeEventListener('visibilitychange', this._onVisibilityChange); |
| 715 |
} |
| 716 |
seek(value) { |
| 717 |
if (!this._lottieInstance) return; |
| 718 |
const matches = value.toString().match(/^([0-9]+)(%?)$/); |
| 719 |
if (!matches) { |
| 720 |
return; |
| 721 |
} |
| 722 |
const frame = Math.floor(matches[2] === '%' ? this._lottieInstance.totalFrames * Number(matches[1]) / 100 : Number(matches[1])); |
| 723 |
this._seeker = frame; |
| 724 |
if (this.currentState === exports.PlayerState.Playing || this.currentState === exports.PlayerState.Frozen && this._playerState.prev === exports.PlayerState.Playing) { |
| 725 |
this._lottieInstance.goToAndPlay(frame, true); |
| 726 |
this.currentState = exports.PlayerState.Playing; |
| 727 |
return; |
| 728 |
} |
| 729 |
this._lottieInstance.goToAndStop(frame, true); |
| 730 |
this._lottieInstance.pause(); |
| 731 |
} |
| 732 |
snapshot() { |
| 733 |
if (!this.shadowRoot) return; |
| 734 |
const svgElement = this.shadowRoot.querySelector('.animation svg'), data = svgElement instanceof Node ? new XMLSerializer().serializeToString(svgElement) : null; |
| 735 |
if (!data) { |
| 736 |
console.error('Could not serialize data'); |
| 737 |
return; |
| 738 |
} |
| 739 |
download(data, { |
| 740 |
name: `${getFilename(this.src)}-${frameOutput(this._seeker)}.svg`, |
| 741 |
mimeType: 'image/svg+xml' |
| 742 |
}); |
| 743 |
return data; |
| 744 |
} |
| 745 |
setSubframe(value) { |
| 746 |
if (!this._lottieInstance) return; |
| 747 |
this.subframe = value; |
| 748 |
this._lottieInstance.setSubframe(value); |
| 749 |
} |
| 750 |
setCount(value) { |
| 751 |
if (!this._lottieInstance) return; |
| 752 |
this.count = value; |
| 753 |
} |
| 754 |
_freeze() { |
| 755 |
if (!this._lottieInstance) return; |
| 756 |
if (this.currentState) { |
| 757 |
this._playerState.prev = this.currentState; |
| 758 |
} |
| 759 |
this._lottieInstance.pause(); |
| 760 |
setTimeout(()=>{ |
| 761 |
this.currentState = exports.PlayerState.Frozen; |
| 762 |
}, 0); |
| 763 |
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Freeze)); |
| 764 |
} |
| 765 |
async reload() { |
| 766 |
if (!this._lottieInstance) return; |
| 767 |
this._lottieInstance.destroy(); |
| 768 |
if (this.src) { |
| 769 |
await this.load(this.src); |
| 770 |
} |
| 771 |
} |
| 772 |
setSpeed(value = 1) { |
| 773 |
if (!this._lottieInstance) return; |
| 774 |
this.speed = value; |
| 775 |
this._lottieInstance.setSpeed(value); |
| 776 |
} |
| 777 |
setDirection(value) { |
| 778 |
if (!this._lottieInstance) return; |
| 779 |
this.direction = value; |
| 780 |
this._lottieInstance.setDirection(value); |
| 781 |
} |
| 782 |
setLooping(value) { |
| 783 |
if (!this._lottieInstance) { |
| 784 |
return; |
| 785 |
} |
| 786 |
this.loop = value; |
| 787 |
this._lottieInstance.setLoop(value); |
| 788 |
} |
| 789 |
setMultiAnimationSettings(settings) { |
| 790 |
if (!this._lottieInstance) { |
| 791 |
return; |
| 792 |
} |
| 793 |
this.multiAnimationSettings = settings; |
| 794 |
} |
| 795 |
togglePlay() { |
| 796 |
if (!this._lottieInstance) return; |
| 797 |
const { currentFrame, playDirection, totalFrames } = this._lottieInstance; |
| 798 |
if (this.currentState === exports.PlayerState.Playing) { |
| 799 |
return this.pause(); |
| 800 |
} |
| 801 |
if (this.currentState !== exports.PlayerState.Completed) { |
| 802 |
return this.play(); |
| 803 |
} |
| 804 |
this.currentState = exports.PlayerState.Playing; |
| 805 |
if (this._isBounce) { |
| 806 |
this.setDirection(playDirection * -1); |
| 807 |
return this._lottieInstance.goToAndPlay(currentFrame, true); |
| 808 |
} |
| 809 |
if (playDirection === -1) { |
| 810 |
return this._lottieInstance.goToAndPlay(totalFrames, true); |
| 811 |
} |
| 812 |
return this._lottieInstance.goToAndPlay(0, true); |
| 813 |
} |
| 814 |
toggleLooping() { |
| 815 |
this.setLooping(!this.loop); |
| 816 |
} |
| 817 |
toggleBoomerang() { |
| 818 |
const curr = this.multiAnimationSettings?.[this._currentAnimation]; |
| 819 |
if (curr?.mode !== undefined) { |
| 820 |
if (curr.mode === exports.PlayMode.Normal) { |
| 821 |
curr.mode = exports.PlayMode.Bounce; |
| 822 |
this._isBounce = true; |
| 823 |
return; |
| 824 |
} |
| 825 |
curr.mode = exports.PlayMode.Normal; |
| 826 |
this._isBounce = false; |
| 827 |
return; |
| 828 |
} |
| 829 |
if (this.mode === exports.PlayMode.Normal) { |
| 830 |
this.mode = exports.PlayMode.Bounce; |
| 831 |
this._isBounce = true; |
| 832 |
return; |
| 833 |
} |
| 834 |
this.mode = exports.PlayMode.Normal; |
| 835 |
this._isBounce = false; |
| 836 |
} |
| 837 |
_toggleSettings(flag) { |
| 838 |
if (flag === undefined) { |
| 839 |
this._isSettingsOpen = !this._isSettingsOpen; |
| 840 |
return; |
| 841 |
} |
| 842 |
this._isSettingsOpen = flag; |
| 843 |
} |
| 844 |
_handleBlur() { |
| 845 |
setTimeout(()=>this._toggleSettings(false), 200); |
| 846 |
} |
| 847 |
_switchInstance(isPrevious = false) { |
| 848 |
if (!this._animations[this._currentAnimation]) return; |
| 849 |
try { |
| 850 |
if (this._lottieInstance) this._lottieInstance.destroy(); |
| 851 |
this._lottieInstance = Lottie.loadAnimation({ |
| 852 |
...this._getOptions(), |
| 853 |
animationData: this._animations[this._currentAnimation] |
| 854 |
}); |
| 855 |
if (this.multiAnimationSettings?.[this._currentAnimation]?.mode) { |
| 856 |
this._isBounce = this.multiAnimationSettings[this._currentAnimation].mode === exports.PlayMode.Bounce; |
| 857 |
} |
| 858 |
this._removeEventListeners(); |
| 859 |
this._addEventListeners(); |
| 860 |
this.dispatchEvent(new CustomEvent(isPrevious ? exports.PlayerEvents.Previous : exports.PlayerEvents.Next)); |
| 861 |
if (this.multiAnimationSettings?.[this._currentAnimation]?.autoplay ?? this.autoplay) { |
| 862 |
if (this.animateOnScroll) { |
| 863 |
this._lottieInstance?.goToAndStop(0, true); |
| 864 |
this.currentState = exports.PlayerState.Paused; |
| 865 |
return; |
| 866 |
} |
| 867 |
this._lottieInstance?.goToAndPlay(0, true); |
| 868 |
this.currentState = exports.PlayerState.Playing; |
| 869 |
return; |
| 870 |
} |
| 871 |
this._lottieInstance?.goToAndStop(0, true); |
| 872 |
this.currentState = exports.PlayerState.Stopped; |
| 873 |
} catch (err) { |
| 874 |
this._errorMessage = handleErrors(err).message; |
| 875 |
this.currentState = exports.PlayerState.Error; |
| 876 |
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Error)); |
| 877 |
} |
| 878 |
} |
| 879 |
next() { |
| 880 |
this._currentAnimation++; |
| 881 |
this._switchInstance(); |
| 882 |
} |
| 883 |
prev() { |
| 884 |
this._currentAnimation--; |
| 885 |
this._switchInstance(true); |
| 886 |
} |
| 887 |
async convert({ typeCheck, manifest, animations, src, fileName, shouldDownload = true }) { |
| 888 |
if (typeCheck || this._isDotLottie) { |
| 889 |
return createJSON({ |
| 890 |
animation: (await getAnimationData(src || this.src))?.animations?.[0], |
| 891 |
fileName: `${getFilename(fileName || this.src)}.json`, |
| 892 |
shouldDownload |
| 893 |
}); |
| 894 |
} |
| 895 |
return createDotLottie({ |
| 896 |
animations: animations || (await getAnimationData(this.src))?.animations, |
| 897 |
manifest: { |
| 898 |
...manifest || this._manifest, |
| 899 |
generator: pkg.name |
| 900 |
}, |
| 901 |
fileName: `${getFilename(fileName || this.src)}.lottie`, |
| 902 |
shouldDownload |
| 903 |
}); |
| 904 |
} |
| 905 |
static get styles() { |
| 906 |
return css_248z; |
| 907 |
} |
| 908 |
connectedCallback() { |
| 909 |
super.connectedCallback(); |
| 910 |
if (typeof document.hidden !== 'undefined') { |
| 911 |
document.addEventListener('visibilitychange', this._onVisibilityChange); |
| 912 |
} |
| 913 |
} |
| 914 |
async firstUpdated() { |
| 915 |
this._addIntersectionObserver(); |
| 916 |
if (this.src) { |
| 917 |
await this.load(this.src); |
| 918 |
} |
| 919 |
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Rendered)); |
| 920 |
} |
| 921 |
disconnectedCallback() { |
| 922 |
super.disconnectedCallback(); |
| 923 |
if (this._intersectionObserver) { |
| 924 |
this._intersectionObserver.disconnect(); |
| 925 |
this._intersectionObserver = undefined; |
| 926 |
} |
| 927 |
if (this._lottieInstance) this._lottieInstance.destroy(); |
| 928 |
document.removeEventListener('visibilitychange', this._onVisibilityChange); |
| 929 |
} |
| 930 |
renderControls() { |
| 931 |
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; |
| 932 |
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._isBounce}" 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>`; |
| 933 |
} |
| 934 |
render() { |
| 935 |
return lit.html`<figure class="${'animation-container main'}" data-controls="${this.controls ?? false}" 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>`; |
| 936 |
} |
| 937 |
constructor(){ |
| 938 |
super(); |
| 939 |
this.animateOnScroll = false; |
| 940 |
this.background = 'transparent'; |
| 941 |
this.controls = false; |
| 942 |
this.currentState = exports.PlayerState.Loading; |
| 943 |
this.direction = 1; |
| 944 |
this.hover = false; |
| 945 |
this.intermission = 0; |
| 946 |
this.loop = false; |
| 947 |
this.mode = exports.PlayMode.Normal; |
| 948 |
this.objectfit = 'contain'; |
| 949 |
this.renderer = 'svg'; |
| 950 |
this.simple = false; |
| 951 |
this.speed = 1; |
| 952 |
this.subframe = false; |
| 953 |
this._isSettingsOpen = false; |
| 954 |
this._seeker = 0; |
| 955 |
this._currentAnimation = 0; |
| 956 |
this._lottieInstance = null; |
| 957 |
this._identifier = this.id || useId('dotlottie'); |
| 958 |
this._errorMessage = 'Something went wrong'; |
| 959 |
this._isBounce = false; |
| 960 |
this._isDotLottie = false; |
| 961 |
this._playerState = { |
| 962 |
prev: exports.PlayerState.Loading, |
| 963 |
count: 0, |
| 964 |
loaded: false, |
| 965 |
visible: false, |
| 966 |
scrollY: 0, |
| 967 |
scrollTimeout: null |
| 968 |
}; |
| 969 |
this._handleSettingsClick = ({ target })=>{ |
| 970 |
this._toggleSettings(); |
| 971 |
if (target instanceof HTMLElement) { |
| 972 |
target.focus(); |
| 973 |
} |
| 974 |
}; |
| 975 |
this._complete = this._complete.bind(this); |
| 976 |
this._dataReady = this._dataReady.bind(this); |
| 977 |
this._dataFailed = this._dataFailed.bind(this); |
| 978 |
this._DOMLoaded = this._DOMLoaded.bind(this); |
| 979 |
this._enterFrame = this._enterFrame.bind(this); |
| 980 |
this._handleScroll = this._handleScroll.bind(this); |
| 981 |
this._handleSeekChange = this._handleSeekChange.bind(this); |
| 982 |
this._handleWindowBlur = this._handleWindowBlur.bind(this); |
| 983 |
this._loopComplete = this._loopComplete.bind(this); |
| 984 |
this._mouseEnter = this._mouseEnter.bind(this); |
| 985 |
this._mouseLeave = this._mouseLeave.bind(this); |
| 986 |
this._onVisibilityChange = this._onVisibilityChange.bind(this); |
| 987 |
this._switchInstance = this._switchInstance.bind(this); |
| 988 |
this.convert = this.convert.bind(this); |
| 989 |
this.destroy = this.destroy.bind(this); |
| 990 |
} |
| 991 |
} |
| 992 |
_ts_decorate([ |
| 993 |
decorators_js.property({ |
| 994 |
type: Boolean |
| 995 |
}) |
| 996 |
], DotLottiePlayer.prototype, "animateOnScroll", void 0); |
| 997 |
_ts_decorate([ |
| 998 |
decorators_js.property({ |
| 999 |
type: Boolean, |
| 1000 |
reflect: true |
| 1001 |
}) |
| 1002 |
], DotLottiePlayer.prototype, "autoplay", void 0); |
| 1003 |
_ts_decorate([ |
| 1004 |
decorators_js.property({ |
| 1005 |
type: String |
| 1006 |
}) |
| 1007 |
], DotLottiePlayer.prototype, "background", void 0); |
| 1008 |
_ts_decorate([ |
| 1009 |
decorators_js.property({ |
| 1010 |
type: Boolean, |
| 1011 |
reflect: true |
| 1012 |
}) |
| 1013 |
], DotLottiePlayer.prototype, "controls", void 0); |
| 1014 |
_ts_decorate([ |
| 1015 |
decorators_js.property({ |
| 1016 |
type: Number |
| 1017 |
}) |
| 1018 |
], DotLottiePlayer.prototype, "count", void 0); |
| 1019 |
_ts_decorate([ |
| 1020 |
decorators_js.property({ |
| 1021 |
type: String |
| 1022 |
}) |
| 1023 |
], DotLottiePlayer.prototype, "currentState", void 0); |
| 1024 |
_ts_decorate([ |
| 1025 |
decorators_js.property({ |
| 1026 |
type: String |
| 1027 |
}) |
| 1028 |
], DotLottiePlayer.prototype, "description", void 0); |
| 1029 |
_ts_decorate([ |
| 1030 |
decorators_js.property({ |
| 1031 |
type: Number |
| 1032 |
}) |
| 1033 |
], DotLottiePlayer.prototype, "direction", void 0); |
| 1034 |
_ts_decorate([ |
| 1035 |
decorators_js.property({ |
| 1036 |
type: Boolean |
| 1037 |
}) |
| 1038 |
], DotLottiePlayer.prototype, "hover", void 0); |
| 1039 |
_ts_decorate([ |
| 1040 |
decorators_js.property({ |
| 1041 |
type: Number |
| 1042 |
}) |
| 1043 |
], DotLottiePlayer.prototype, "intermission", void 0); |
| 1044 |
_ts_decorate([ |
| 1045 |
decorators_js.property({ |
| 1046 |
type: Boolean, |
| 1047 |
reflect: true |
| 1048 |
}) |
| 1049 |
], DotLottiePlayer.prototype, "loop", void 0); |
| 1050 |
_ts_decorate([ |
| 1051 |
decorators_js.property({ |
| 1052 |
type: String |
| 1053 |
}) |
| 1054 |
], DotLottiePlayer.prototype, "mode", void 0); |
| 1055 |
_ts_decorate([ |
| 1056 |
decorators_js.property({ |
| 1057 |
type: Array |
| 1058 |
}) |
| 1059 |
], DotLottiePlayer.prototype, "multiAnimationSettings", void 0); |
| 1060 |
_ts_decorate([ |
| 1061 |
decorators_js.property({ |
| 1062 |
type: String |
| 1063 |
}) |
| 1064 |
], DotLottiePlayer.prototype, "objectfit", void 0); |
| 1065 |
_ts_decorate([ |
| 1066 |
decorators_js.property({ |
| 1067 |
type: String |
| 1068 |
}) |
| 1069 |
], DotLottiePlayer.prototype, "preserveAspectRatio", void 0); |
| 1070 |
_ts_decorate([ |
| 1071 |
decorators_js.property({ |
| 1072 |
type: String |
| 1073 |
}) |
| 1074 |
], DotLottiePlayer.prototype, "renderer", void 0); |
| 1075 |
_ts_decorate([ |
| 1076 |
decorators_js.property({ |
| 1077 |
type: Array |
| 1078 |
}) |
| 1079 |
], DotLottiePlayer.prototype, "segment", void 0); |
| 1080 |
_ts_decorate([ |
| 1081 |
decorators_js.property({ |
| 1082 |
type: Boolean |
| 1083 |
}) |
| 1084 |
], DotLottiePlayer.prototype, "simple", void 0); |
| 1085 |
_ts_decorate([ |
| 1086 |
decorators_js.property({ |
| 1087 |
type: Number |
| 1088 |
}) |
| 1089 |
], DotLottiePlayer.prototype, "speed", void 0); |
| 1090 |
_ts_decorate([ |
| 1091 |
decorators_js.property({ |
| 1092 |
type: String |
| 1093 |
}) |
| 1094 |
], DotLottiePlayer.prototype, "src", void 0); |
| 1095 |
_ts_decorate([ |
| 1096 |
decorators_js.property({ |
| 1097 |
type: Boolean |
| 1098 |
}) |
| 1099 |
], DotLottiePlayer.prototype, "subframe", void 0); |
| 1100 |
_ts_decorate([ |
| 1101 |
decorators_js.query('.animation') |
| 1102 |
], DotLottiePlayer.prototype, "container", void 0); |
| 1103 |
_ts_decorate([ |
| 1104 |
decorators_js.state() |
| 1105 |
], DotLottiePlayer.prototype, "_isSettingsOpen", void 0); |
| 1106 |
_ts_decorate([ |
| 1107 |
decorators_js.state() |
| 1108 |
], DotLottiePlayer.prototype, "_seeker", void 0); |
| 1109 |
_ts_decorate([ |
| 1110 |
decorators_js.state() |
| 1111 |
], DotLottiePlayer.prototype, "_currentAnimation", void 0); |
| 1112 |
_ts_decorate([ |
| 1113 |
decorators_js.state() |
| 1114 |
], DotLottiePlayer.prototype, "_animations", void 0); |
| 1115 |
DotLottiePlayer = _ts_decorate([ |
| 1116 |
decorators_js.customElement('dotlottie-player') |
| 1117 |
], DotLottiePlayer); |
| 1118 |
|
| 1119 |
globalThis.dotLottiePlayer = ()=>new DotLottiePlayer(); |
| 1120 |
|
| 1121 |
exports.DotLottiePlayer = DotLottiePlayer; |
| 1122 |
|
