@aarsteinmedia/dotlottie-player 4.0.3 → 4.0.4

package/dist/cjs/index.js

@@ -100,12 +100,20 @@ const addExt = (ext, str)=>{
         default:
             return 'xMidYMid meet';
     }
-}, base64ToU8 = (str)=>fflate.strToU8(isServer() ? Buffer.from(parseBase64(str), 'base64').toString('binary') : atob(parseBase64(str)), true), createDotLottie = async ({ animations, fileName, manifest, shouldDownload = true })=>{
+}, /**
+   * Convert Base64 encoded string to Uint8Array
+   * @param { string } str Base64 encoded string
+   * @returns { Uint8Array } UTF-8/Latin-1 binary
+   */ base64ToU8 = (str)=>fflate.strToU8(isServer() ? Buffer.from(parseBase64(str), 'base64').toString('binary') : atob(parseBase64(str)), true), /**
+   * Convert a JSON Lottie to dotLottie or combine several animations and download new dotLottie file in your browser.
+   */ createDotLottie = async ({ animations, fileName, manifest, shouldDownload = true })=>{
     try {
+        // Input validation
         if (!animations?.length || !manifest) {
             throw new Error(`Missing or malformed required parameter(s):\n ${animations?.length ? '- manifest\n' : ''} ${manifest ? '- animations\n' : ''}`);
         }
-        const manifestCompressionLevel = 0, animationCompressionLevel = 9, name = addExt('lottie', fileName) || `${useId()}.lottie`, dotlottie = {
+        const manifestCompressionLevel = 0, animationCompressionLevel = 9, // Prepare the dotLottie file
+        name = addExt('lottie', fileName) || `${useId()}.lottie`, dotlottie = {
             'manifest.json': [
                 fflate.strToU8(JSON.stringify(manifest), true),
                 {
@@ -113,14 +121,19 @@ const addExt = (ext, str)=>{
                 }
             ]
         };
+        // Add animations and assets to the dotLottie file
         for (const [i, animation] of animations.entries()){
             for (const asset of animation.assets ?? []){
                 if (!asset.p || !isImage(asset) && !isAudio(asset)) {
                     continue;
                 }
-                const { p: file, u: path } = asset, assetId = useId('asset'), isEncoded = file.startsWith('data:'), ext = isEncoded ? getExtFromB64(file) : getExt(file), dataURL = isEncoded ? file : await fileToBase64(path ? path.endsWith('/') && `${path}${file}` || `${path}/${file}` : file);
+                const { p: file, u: path } = asset, // Original asset.id caused issues with multianimations
+                assetId = useId('asset'), isEncoded = file.startsWith('data:'), ext = isEncoded ? getExtFromB64(file) : getExt(file), // Check if the asset is already base64-encoded. If not, get path, fetch it, and encode it
+                dataURL = isEncoded ? file : await fileToBase64(path ? path.endsWith('/') && `${path}${file}` || `${path}/${file}` : file);
                 asset.p = `${assetId}.${ext}`;
+                // Asset is embedded, so path empty string
                 asset.u = '';
+                // Asset is encoded
                 asset.e = 1;
                 dotlottie[`${isAudio(asset) ? 'audio' : 'images'}/${assetId}.${ext}`] = [
                     base64ToU8(dataURL),
@@ -157,7 +170,11 @@ const addExt = (ext, str)=>{
     } catch (err) {
         console.error(`❌ ${handleErrors(err).message}`);
     }
-}, download = (data, options)=>{
+}, /**
+   * Download file, either SVG or dotLottie.
+   * @param { string } data The data to be downloaded
+   * @param { string } name Don't include file extension in the filename
+   */ download = (data, options)=>{
     const blob = new Blob([
         data
     ], {
@@ -214,7 +231,11 @@ const addExt = (ext, str)=>{
             error.status = result.status;
             throw error;
         }
-        const ext = getExt(input);
+        /**
+       * Check if file is JSON, first by parsing file name for extension,
+       * then – if filename has no extension – by cloning the response
+       * and parsing it for content.
+       */ const ext = getExt(input);
         if (ext === 'json' || !ext) {
             if (ext) {
                 const lottie = await result.json();
@@ -267,7 +288,10 @@ const addExt = (ext, str)=>{
         });
     });
     return arrayBuffer;
-}, getExt = (str)=>{
+}, /**
+   * Get extension from filename, URL or path
+   * @param { string } str Filename, URL or path
+   */ getExt = (str)=>{
     if (typeof str !== 'string' || !str || !hasExt(str)) {
         return;
     }
@@ -275,9 +299,16 @@ const addExt = (ext, str)=>{
 }, getExtFromB64 = (str)=>{
     const mime = str.split(':')[1].split(';')[0], ext = mime.split('/')[1].split('+')[0];
     return ext;
-}, getFilename = (src, keepExt)=>{
+}, /**
+   * Parse URL to get filename
+   * @param { string } src The url string
+   * @param { boolean } keepExt Whether to include file extension
+   * @returns { string } Filename, in lowercase
+   */ getFilename = (src, keepExt)=>{
+    // Because the regex strips all special characters, we need to extract the file extension, so we can add it later if we need it
     getExt(src);
-    return `${src.split('/').pop()?.replace(/\.[^.]*$/, '').replace(/\W+/g, '-')}${''}`;
+    return `${src.split('/').pop()?.replace(/\.[^.]*$/, '').replace(/\W+/g, '-')}${''}` // .toLowerCase()
+    ;
 }, getLottieJSON = async (resp)=>{
     const unzipped = await unzip(resp), manifest = getManifest(unzipped), data = [], toResolve = [];
     for (const { id } of manifest.animations){
@@ -369,7 +400,7 @@ const addExt = (ext, str)=>{
     await Promise.all(toResolve);
 }, unzip = async (resp)=>{
     const u8 = new Uint8Array(await resp.arrayBuffer()), unzipped = await new Promise((resolve, reject)=>{
-        fflate.unzip(u8, (err, file)=>{
+        fflate.unzip(u8, /* { filter }, */ (err, file)=>{
             if (err) {
                 reject(err);
             }
@@ -382,15 +413,19 @@ const addExt = (ext, str)=>{
     return `${prefix ?? `:${s4()}`}_${s4()}`;
 };
 
-function renderPlayer() {
-    this.template.innerHTML = `<div 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}"><figure class="animation" style="background:${this.background}">${this.playerState === PlayerState.Error ? `<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>` : ''}</figure><slot name="controls"></slot></div>`;
+/**
+ * Render Player
+ */ function renderPlayer() {
+    this.template.innerHTML = /* HTML */ `<div 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}"><figure class="animation" style="background:${this.background}">${this.playerState === PlayerState.Error ? /* HTML */ `<div class="error"><svg preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1920" height="1080" viewBox="0 0 1920 1080"><path fill="#fff" d="M0 0h1920v1080H0z"/><path fill="#3a6d8b" d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"/><path fill="none" d="M718.9 807.7h645v285.4h-645z"/><text fill="#3a6d8b" style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif" x="50%" y="848.017" text-anchor="middle">${this._errorMessage}</text></svg></div>` : ''}</figure><slot name="controls"></slot></div>`;
     this.shadow.adoptedStyleSheets = [
         DotLottiePlayer.styles
     ];
     this.shadow.appendChild(this.template.content.cloneNode(true));
 }
 
-function renderControls() {
+/**
+ * Render Controls
+ */ function renderControls() {
     const slot = this.shadow.querySelector('slot[name=controls]');
     if (!slot) {
         return;
@@ -399,7 +434,7 @@ function renderControls() {
         slot.innerHTML = '';
         return;
     }
-    slot.innerHTML = `<div class="lottie-controls toolbar ${this.playerState === PlayerState.Error ? 'has-error' : ''}" aria-label="Lottie Animation controls"><button class="togglePlay" data-active="false" aria-label="Toggle Play/Pause"><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 class="stop" data-active="true" aria-label="Stop"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M6 6h12v12H6V6z"/></svg></button> <button class="prev" aria-label="Previous animation" hidden><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> <button class="next" aria-label="Next animation" hidden><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><form class="progress-container${this.simple ? ' simple' : ''}"><input class="seeker" type="range" min="0" max="100" step="1" value="${this._seeker.toString()}" aria-valuemin="0" aria-valuemax="100" role="slider" aria-valuenow="${this._seeker.toString()}" tabindex="0" aria-label="Slider for search"><progress max="100" value="${this._seeker}"></progress></form>${this.simple ? '' : `<button class="toggleLoop" data-active="${this.loop}" tabindex="0" aria-label="Toggle loop"><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 class="toggleBoomerang" data-active="${this.mode === PlayMode.Bounce}" aria-label="Toggle boomerang" tabindex="0"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m11.8 13.2-.3.3c-.5.5-1.1 1.1-1.7 1.5-.5.4-1 .6-1.5.8-.5.2-1.1.3-1.6.3s-1-.1-1.5-.3c-.6-.2-1-.5-1.4-1-.5-.6-.8-1.2-.9-1.9-.2-.9-.1-1.8.3-2.6.3-.7.8-1.2 1.3-1.6.3-.2.6-.4 1-.5.2-.2.5-.2.8-.3.3 0 .7-.1 1 0 .3 0 .6.1.9.2.9.3 1.7.9 2.4 1.5.4.4.8.7 1.1 1.1l.1.1.4-.4c.6-.6 1.2-1.2 1.9-1.6.5-.3 1-.6 1.5-.7.4-.1.7-.2 1-.2h.9c1 .1 1.9.5 2.6 1.4.4.5.7 1.1.8 1.8.2.9.1 1.7-.2 2.5-.4.9-1 1.5-1.8 2-.4.2-.7.4-1.1.4-.4.1-.8.1-1.2.1-.5 0-.9-.1-1.3-.3-.8-.3-1.5-.9-2.1-1.5-.4-.4-.8-.7-1.1-1.1h-.3zm-1.1-1.1c-.1-.1-.1-.1 0 0-.3-.3-.6-.6-.8-.9-.5-.5-1-.9-1.6-1.2-.4-.3-.8-.4-1.3-.4-.4 0-.8 0-1.1.2-.5.2-.9.6-1.1 1-.2.3-.3.7-.3 1.1 0 .3 0 .6.1.9.1.5.4.9.8 1.2.5.4 1.1.5 1.7.5.5 0 1-.2 1.5-.5.6-.4 1.1-.8 1.6-1.3.1-.3.3-.5.5-.6zM13 12c.5.5 1 1 1.5 1.4.5.5 1.1.9 1.9 1 .4.1.8 0 1.2-.1.3-.1.6-.3.9-.5.4-.4.7-.9.8-1.4.1-.5 0-.9-.1-1.4-.3-.8-.8-1.2-1.7-1.4-.4-.1-.8-.1-1.2 0-.5.1-1 .4-1.4.7-.5.4-1 .8-1.4 1.2-.2.2-.4.3-.5.5z"/></svg></button> <button class="toggleSettings" 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" hidden><button class="convert" aria-label="Convert JSON animation to dotLottie format" hidden><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 class="snapshot" aria-label="Download still image"><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>`;
+    slot.innerHTML = /* HTML */ `<div class="lottie-controls toolbar ${this.playerState === PlayerState.Error ? 'has-error' : ''}" aria-label="Lottie Animation controls"><button class="togglePlay" data-active="false" aria-label="Toggle Play/Pause"><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 class="stop" data-active="true" aria-label="Stop"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M6 6h12v12H6V6z"/></svg></button> <button class="prev" aria-label="Previous animation" hidden><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> <button class="next" aria-label="Next animation" hidden><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><form class="progress-container${this.simple ? ' simple' : ''}"><input class="seeker" type="range" min="0" max="100" step="1" value="${this._seeker.toString()}" aria-valuemin="0" aria-valuemax="100" role="slider" aria-valuenow="${this._seeker.toString()}" tabindex="0" aria-label="Slider for search"><progress max="100" value="${this._seeker}"></progress></form>${this.simple ? '' : /* HTML */ `<button class="toggleLoop" data-active="${this.loop}" tabindex="0" aria-label="Toggle loop"><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 class="toggleBoomerang" data-active="${this.mode === PlayMode.Bounce}" aria-label="Toggle boomerang" tabindex="0"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m11.8 13.2-.3.3c-.5.5-1.1 1.1-1.7 1.5-.5.4-1 .6-1.5.8-.5.2-1.1.3-1.6.3s-1-.1-1.5-.3c-.6-.2-1-.5-1.4-1-.5-.6-.8-1.2-.9-1.9-.2-.9-.1-1.8.3-2.6.3-.7.8-1.2 1.3-1.6.3-.2.6-.4 1-.5.2-.2.5-.2.8-.3.3 0 .7-.1 1 0 .3 0 .6.1.9.2.9.3 1.7.9 2.4 1.5.4.4.8.7 1.1 1.1l.1.1.4-.4c.6-.6 1.2-1.2 1.9-1.6.5-.3 1-.6 1.5-.7.4-.1.7-.2 1-.2h.9c1 .1 1.9.5 2.6 1.4.4.5.7 1.1.8 1.8.2.9.1 1.7-.2 2.5-.4.9-1 1.5-1.8 2-.4.2-.7.4-1.1.4-.4.1-.8.1-1.2.1-.5 0-.9-.1-1.3-.3-.8-.3-1.5-.9-2.1-1.5-.4-.4-.8-.7-1.1-1.1h-.3zm-1.1-1.1c-.1-.1-.1-.1 0 0-.3-.3-.6-.6-.8-.9-.5-.5-1-.9-1.6-1.2-.4-.3-.8-.4-1.3-.4-.4 0-.8 0-1.1.2-.5.2-.9.6-1.1 1-.2.3-.3.7-.3 1.1 0 .3 0 .6.1.9.1.5.4.9.8 1.2.5.4 1.1.5 1.7.5.5 0 1-.2 1.5-.5.6-.4 1.1-.8 1.6-1.3.1-.3.3-.5.5-.6zM13 12c.5.5 1 1 1.5 1.4.5.5 1.1.9 1.9 1 .4.1.8 0 1.2-.1.3-.1.6-.3.9-.5.4-.4.7-.9.8-1.4.1-.5 0-.9-.1-1.4-.3-.8-.8-1.2-1.7-1.4-.4-.1-.8-.1-1.2 0-.5.1-1 .4-1.4.7-.5.4-1 .8-1.4 1.2-.2.2-.4.3-.5.5z"/></svg></button> <button class="toggleSettings" 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" hidden><button class="convert" aria-label="Convert JSON animation to dotLottie format" hidden><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 class="snapshot" aria-label="Download still image"><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>`;
     const togglePlay = this.shadow.querySelector('.togglePlay');
     if (togglePlay instanceof HTMLButtonElement) {
         togglePlay.onclick = this.togglePlay;
@@ -446,8 +481,14 @@ function renderControls() {
     }
 }
 
-const UPDATE_ON_CONNECTED = Symbol('UPDATE_ON_CONNECTED');
+/**
+ * Credit to:
+ * @author Leonardo Favre <https://github.com/leofavre/observed-properties>
+ * @description Enhanced HTML element with reactive state handlers
+ */ /* eslint-disable @typescript-eslint/ban-ts-comment */ const UPDATE_ON_CONNECTED = Symbol('UPDATE_ON_CONNECTED');
 if (isServer()) {
+    // Mock HTMLElement for server-side rendering
+    // @ts-ignore
     global.HTMLElement = class EmptyHTMLElement {
     };
 }
@@ -468,6 +509,7 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
     }
     constructor(){
         super();
+        // @ts-ignore
         const { observedProperties = [] } = this.constructor;
         if (UPDATE_ON_CONNECTED in this) {
             this[UPDATE_ON_CONNECTED] = [];
@@ -475,6 +517,7 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
         if ('propertyChangedCallback' in this && typeof this.propertyChangedCallback === 'function') {
             for (const propName of observedProperties){
                 const initialValue = this[propName], CACHED_VALUE = Symbol(propName);
+                // @ts-ignore
                 this[CACHED_VALUE] = initialValue;
                 Object.defineProperty(this, propName, {
                     get () {
@@ -496,34 +539,46 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
     }
 };
 
-var $schema="https://json.schemastore.org/package";var name="@aarsteinmedia/dotlottie-player";var version="4.0.3";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:"git+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 contributors=[{name:"Anthony Colpron",email:"anthonycolpron@gmail.com",url:"https://github.com/anthony-colpron"}];var license="GPL-2.0-or-later";var scripts={test:"wtr",prebuild:"rimraf ./dist",build:"rollup -c","prebuild:types":"rimraf ./types","build:types":"tsc -p ./tsconfig.prod.json && tsc-alias","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:js":"eslint","lint:js:fix":"eslint --fix","lint:css":"npx stylelint **/*.scss","lint:css:fix":"npx stylelint **/*.scss --fix","lint:pkg":"npmPkgJsonLint .","lint:pkg:fix":"npmPkgJsonLint . --fix"};var dependencies={fflate:"^0.8.2","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.10.3","@eslint/compat":"^1.2.2","@eslint/eslintrc":"^3.1.0","@eslint/js":"^9.13.0","@esm-bundle/chai":"4.3.4-fix.0","@open-wc/testing":"^4.0.0","@rollup/plugin-commonjs":"^28.0.1","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.3.0","@rollup/plugin-typescript":"^11.1.6","@swc/core":"^1.7.40","@types/mocha":"^10.0.9","@types/node":"^22.8.4","@typescript-eslint/eslint-plugin":"^8.12.2","@typescript-eslint/parser":"^8.12.2","@web/dev-server-esbuild":"^1.0.2","@web/dev-server-import-maps":"^0.2.1","@web/dev-server-rollup":"^0.6.4","@web/test-runner":"^0.19.0","@web/test-runner-playwright":"^0.11.0",autoprefixer:"^10.4.20",esbuild:"^0.24.0","esbuild-sass-plugin":"^3.3.1",eslint:"^9.13.0","eslint-config-prettier":"^9.1.0","eslint-import-resolver-typescript":"^3.6.3","eslint-plugin-import":"^2.31.0","eslint-plugin-jsdoc":"^48.11.0","eslint-plugin-perfectionist":"^3.9.1","eslint-plugin-prettier":"^5.2.1",globals:"^15.11.0","npm-package-json-lint":"^8.0.0","npm-package-json-lint-config-default":"^7.0.1","postcss-flexbugs-fixes":"^5.0.2",prettier:"^3.3.3",rimraf:"^6.0.1",rollup:"^4.24.3","rollup-plugin-dts":"^6.1.1","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.1","rollup-plugin-swc3":"^0.12.1","rollup-plugin-typescript-paths":"^1.5.0",sass:"^1.80.5",stylelint:"^16.10.0","stylelint-config-standard-scss":"^13.1.0","tsc-alias":"^1.8.10",tslib:"^2.8.0",typescript:"^5.6.3"};var browserslist={production:[">0.3%","not dead","not op_mini all"],development:["last 1 chrome version","last 1 firefox version","last 1 safari version"]};var customElements$1="custom-elements.json";var files=["custom-elements.json","dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","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 = {$schema:$schema,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,contributors:contributors,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,browserslist:browserslist,customElements:customElements$1,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
+var $schema="https://json.schemastore.org/package";var name="@aarsteinmedia/dotlottie-player";var version="4.0.4";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:"git+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 contributors=[{name:"Anthony Colpron",email:"anthonycolpron@gmail.com",url:"https://github.com/anthony-colpron"}];var license="GPL-2.0-or-later";var scripts={test:"wtr",prebuild:"rimraf ./dist",build:"rollup -c","prebuild:types":"rimraf ./types","build:types":"tsc -p ./tsconfig.prod.json && tsc-alias","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:js":"eslint","lint:js:fix":"eslint --fix","lint:css":"npx stylelint **/*.scss","lint:css:fix":"npx stylelint **/*.scss --fix","lint:pkg":"npmPkgJsonLint .","lint:pkg:fix":"npmPkgJsonLint . --fix"};var dependencies={fflate:"^0.8.2","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.10.3","@eslint/compat":"^1.2.2","@eslint/eslintrc":"^3.1.0","@eslint/js":"^9.13.0","@esm-bundle/chai":"4.3.4-fix.0","@open-wc/testing":"^4.0.0","@rollup/plugin-commonjs":"^28.0.1","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.3.0","@rollup/plugin-typescript":"^11.1.6","@swc/core":"^1.7.42","@types/mocha":"^10.0.9","@types/node":"^22.8.5","@typescript-eslint/eslint-plugin":"^8.12.2","@typescript-eslint/parser":"^8.12.2","@web/dev-server-esbuild":"^1.0.2","@web/dev-server-import-maps":"^0.2.1","@web/dev-server-rollup":"^0.6.4","@web/test-runner":"^0.19.0","@web/test-runner-playwright":"^0.11.0",autoprefixer:"^10.4.20",esbuild:"^0.24.0","esbuild-sass-plugin":"^3.3.1",eslint:"^9.13.0","eslint-config-prettier":"^9.1.0","eslint-import-resolver-typescript":"^3.6.3","eslint-plugin-import":"^2.31.0","eslint-plugin-jsdoc":"^48.11.0","eslint-plugin-perfectionist":"^3.9.1","eslint-plugin-prettier":"^5.2.1",globals:"^15.11.0","npm-package-json-lint":"^8.0.0","npm-package-json-lint-config-default":"^7.0.1","postcss-flexbugs-fixes":"^5.0.2",prettier:"^3.3.3",rimraf:"^6.0.1",rollup:"^4.24.3","rollup-plugin-dts":"^6.1.1","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.1","rollup-plugin-swc3":"^0.12.1","rollup-plugin-typescript-paths":"^1.5.0",sass:"^1.80.5",stylelint:"^16.10.0","stylelint-config-standard-scss":"^13.1.0","tsc-alias":"^1.8.10",tslib:"^2.8.0",typescript:"^5.6.3"};var browserslist={production:[">0.3%","not dead","not op_mini all"],development:["last 1 chrome version","last 1 firefox version","last 1 safari version"]};var customElements$1="custom-elements.json";var files=["CHANGELOG.md","custom-elements.json","dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","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 = {$schema:$schema,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,contributors:contributors,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,browserslist:browserslist,customElements:customElements$1,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
 
 var css_248z = "* {\n  box-sizing: border-box;\n}\n\n:host {\n  --lottie-player-toolbar-height: 35px;\n  --lottie-player-toolbar-background-color: #FFF;\n  --lottie-player-toolbar-icon-color: #000;\n  --lottie-player-toolbar-icon-hover-color: #000;\n  --lottie-player-toolbar-icon-active-color: #4285f4;\n  --lottie-player-seeker-track-color: rgb(0 0 0 / 20%);\n  --lottie-player-seeker-thumb-color: #4285f4;\n  --lottie-player-seeker-display: block;\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n:host .main {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n}\n:host .animation {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  margin: 0;\n  padding: 0;\n}\n:host [data-controls=true] .animation {\n  height: calc(100% - 35px);\n}\n:host .animation-container {\n  position: relative;\n}\n:host .popover {\n  position: absolute;\n  right: 5px;\n  bottom: 40px;\n  background-color: var(--lottie-player-toolbar-background-color);\n  border-radius: 5px;\n  padding: 10px 15px;\n  border: solid 2px var(--lottie-player-toolbar-icon-color);\n  animation: fade-in 0.2s ease-in-out;\n}\n:host .popover::before {\n  content: \"\";\n  right: 10px;\n  border: 7px solid transparent;\n  margin-right: -7px;\n  height: 0;\n  width: 0;\n  position: absolute;\n  pointer-events: none;\n  top: 100%;\n  border-top-color: var(--lottie-player-toolbar-icon-color);\n}\n:host .error {\n  display: flex;\n  margin: auto;\n  justify-content: center;\n  height: 100%;\n  align-items: center;\n}\n:host .error svg {\n  width: 100%;\n  height: auto;\n}\n:host .toolbar {\n  display: flex;\n  place-items: center center;\n  background: var(--lottie-player-toolbar-background-color);\n  margin: 0;\n  height: 35px;\n  padding: 5px;\n  border-radius: 5px;\n  gap: 5px;\n}\n:host .toolbar.has-error {\n  pointer-events: none;\n  opacity: 0.5;\n}\n:host .toolbar button {\n  cursor: pointer;\n  fill: var(--lottie-player-toolbar-icon-color);\n  color: var(--lottie-player-toolbar-icon-color);\n  background: none;\n  border: 0;\n  padding: 0;\n  outline: 0;\n  height: 100%;\n  margin: 0;\n  align-items: center;\n  gap: 5px;\n  opacity: 0.9;\n}\n:host .toolbar button:not([hidden]) {\n  display: flex;\n}\n:host .toolbar button:hover {\n  opacity: 1;\n}\n:host .toolbar button[data-active=true] {\n  opacity: 1;\n  fill: var(--lottie-player-toolbar-icon-active-color);\n}\n:host .toolbar button:disabled {\n  opacity: 0.5;\n}\n:host .toolbar button:focus {\n  outline: 0;\n}\n:host .toolbar button svg {\n  pointer-events: none;\n}\n:host .toolbar button svg > * {\n  fill: inherit;\n}\n:host .toolbar button.disabled svg {\n  display: none;\n}\n:host .progress-container {\n  position: relative;\n  width: 100%;\n}\n:host .progress-container.simple {\n  margin-right: 12px;\n}\n:host .seeker {\n  appearance: none;\n  outline: none;\n  width: 100%;\n  height: 20px;\n  border-radius: 3px;\n  border: 0;\n  cursor: pointer;\n  background-color: transparent;\n  /* background-color: var(--lottie-player-seeker-track-color); */\n  display: var(--lottie-player-seeker-display);\n  color: var(--lottie-player-seeker-thumb-color);\n  margin: 0;\n  padding: 7.5px 0;\n  position: relative;\n  z-index: 1;\n}\n:host .seeker::-webkit-slider-runnable-track, :host .seeker::-webkit-slider-thumb {\n  appearance: none;\n  outline: none;\n}\n:host .seeker::-webkit-slider-thumb {\n  height: 15px;\n  width: 15px;\n  border-radius: 50%;\n  border: 0;\n  background-color: var(--lottie-player-seeker-thumb-color);\n  cursor: pointer;\n  -webkit-transition: transform 0.2s ease-in-out;\n  transition: transform 0.2s ease-in-out;\n  transform: scale(0);\n}\n:host .seeker:hover::-webkit-slider-thumb, :host .seeker:focus::-webkit-slider-thumb {\n  transform: scale(1);\n}\n:host .seeker::-moz-range-progress {\n  background-color: var(--lottie-player-seeker-thumb-color);\n  height: 5px;\n  border-radius: 3px;\n}\n:host .seeker::-moz-range-thumb {\n  height: 15px;\n  width: 15px;\n  border-radius: 50%;\n  background-color: var(--lottie-player-seeker-thumb-color);\n  border: 0;\n  cursor: pointer;\n  -moz-transition: transform 0.2s ease-in-out;\n  transition: transform 0.2s ease-in-out;\n  transform: scale(0);\n}\n:host .seeker:hover::-moz-range-thumb, :host .seeker:focus::-moz-range-thumb {\n  transform: scale(1);\n}\n:host .seeker::-ms-track {\n  width: 100%;\n  height: 5px;\n  cursor: pointer;\n  background: transparent;\n  border-color: transparent;\n  color: transparent;\n}\n:host .seeker::-ms-fill-upper {\n  background: var(--lottie-player-seeker-track-color);\n  border-radius: 3px;\n}\n:host .seeker::-ms-fill-lower {\n  background-color: var(--lottie-player-seeker-thumb-color);\n  border-radius: 3px;\n}\n:host .seeker::-ms-thumb {\n  border: 0;\n  height: 15px;\n  width: 15px;\n  border-radius: 50%;\n  background: var(--lottie-player-seeker-thumb-color);\n  cursor: pointer;\n  -ms-transition: transform 0.2s ease-in-out;\n  transition: transform 0.2s ease-in-out;\n  transform: scale(0);\n}\n:host .seeker:hover::-ms-thumb {\n  transform: scale(1);\n}\n:host .seeker:focus::-ms-thumb {\n  transform: scale(1);\n}\n:host .seeker:focus::-ms-fill-lower, :host .seeker:focus::-ms-fill-upper {\n  background: var(--lottie-player-seeker-track-color);\n}\n:host progress {\n  appearance: none;\n  outline: none;\n  position: absolute;\n  width: 100%;\n  height: 5px;\n  border-radius: 3px;\n  border: 0;\n  top: 0;\n  left: 0;\n  margin: 7.5px 0;\n  background-color: var(--lottie-player-seeker-track-color);\n  pointer-events: none;\n}\n:host ::-moz-progress-bar {\n  background-color: var(--lottie-player-seeker-thumb-color);\n}\n:host ::-webkit-progress-inner-element {\n  border-radius: 3px;\n  overflow: hidden;\n}\n:host ::-webkit-slider-runnable-track {\n  background-color: transparent;\n}\n:host ::-webkit-progress-value {\n  background-color: var(--lottie-player-seeker-thumb-color);\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@media (prefers-color-scheme: dark) {\n  :host {\n    --lottie-player-toolbar-background-color: #000;\n    --lottie-player-toolbar-icon-color: #FFF;\n    --lottie-player-toolbar-icon-hover-color: #FFF;\n    --lottie-player-seeker-track-color: rgb(255 255 255 / 60%);\n  }\n}";
 
 let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
-    async connectedCallback() {
+    /**
+   * Initialize everything on component first render
+   */ async connectedCallback() {
         super.connectedCallback();
         this._render();
         this._container = this.shadow.querySelector('.animation');
         this._renderControls();
+        // Add listener for Visibility API's change event.
         if (typeof document.hidden !== 'undefined') {
             document.addEventListener('visibilitychange', this._onVisibilityChange);
         }
+        // Add intersection observer for detecting component being out-of-view.
         this._addIntersectionObserver();
+        // Setup lottie player
         await this.load(this.src);
         this.dispatchEvent(new CustomEvent(PlayerEvents.Rendered));
     }
-    disconnectedCallback() {
+    /**
+   * Cleanup on component destroy
+   */ disconnectedCallback() {
+        // Remove intersection observer for detecting component being out-of-view
         if (this._intersectionObserver) {
             this._intersectionObserver.disconnect();
             this._intersectionObserver = undefined;
         }
+        // Destroy the animation instance
         if (this._lottieInstance) {
             this._lottieInstance.destroy();
         }
+        // Remove the attached Visibility API's change event listener
         document.removeEventListener('visibilitychange', this._onVisibilityChange);
     }
-    static get observedAttributes() {
+    /**
+   * Attributes to observe
+   */ static get observedAttributes() {
         return [
             'animateOnScroll',
             'autoplay',
@@ -537,7 +592,9 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
             'subframe'
         ];
     }
-    async attributeChangedCallback(name, _oldValue, value) {
+    /**
+   * Runs when the value of an attribute is changed on the component
+   */ async attributeChangedCallback(name, _oldValue, value) {
         if (!this._lottieInstance) {
             return;
         }
@@ -616,6 +673,7 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
             '_animations'
         ];
     }
+    // name: string, oldValue: string, newValue: string
     propertyChangedCallback(name, _oldValue, value) {
         if (!this.shadow) {
             return;
@@ -628,9 +686,9 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
             togglePlay.dataset.active = (value === PlayerState.Playing || value === PlayerState.Paused).toString();
             stop.dataset.active = (value === PlayerState.Stopped).toString();
             if (value === PlayerState.Playing) {
-                togglePlay.innerHTML = `<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>`;
+                togglePlay.innerHTML = /* 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>`;
             } else {
-                togglePlay.innerHTML = `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z"/></svg>`;
+                togglePlay.innerHTML = /* 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>`;
             }
         }
         if (name === '_seeker' && typeof value === 'number') {
@@ -660,7 +718,9 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
             convert.hidden = this._isDotLottie;
         }
     }
-    set animateOnScroll(value) {
+    /**
+   * Whether to trigger next frame with scroll
+   */ set animateOnScroll(value) {
         this.setAttribute('animateOnScroll', (!!value).toString());
     }
     get animateOnScroll() {
@@ -670,7 +730,9 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         }
         return false;
     }
-    set autoplay(value) {
+    /**
+   * Autoplay
+   */ set autoplay(value) {
         this.setAttribute('autoplay', (!!value).toString());
     }
     get autoplay() {
@@ -680,13 +742,17 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         }
         return false;
     }
-    set background(value) {
+    /**
+   * Background color
+   */ set background(value) {
         this.setAttribute('background', value);
     }
     get background() {
         return this.getAttribute('background') || 'transparent';
     }
-    set controls(value) {
+    /**
+   * Show controls
+   */ set controls(value) {
         this.setAttribute('controls', (!!value).toString());
     }
     get controls() {
@@ -696,7 +762,9 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         }
         return false;
     }
-    set count(value) {
+    /**
+   * Number of times to loop
+   */ set count(value) {
         this.setAttribute('count', value.toString());
     }
     get count() {
@@ -706,13 +774,17 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         }
         return 0;
     }
-    set description(value) {
+    /**
+   * Description for screen readers
+   */ set description(value) {
         this.setAttribute('description', value);
     }
     get description() {
         return this.getAttribute('description') || '';
     }
-    set direction(value) {
+    /**
+   * Direction of animation
+   */ set direction(value) {
         this.setAttribute('direction', value.toString());
     }
     get direction() {
@@ -722,7 +794,9 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         }
         return 1;
     }
-    set hover(value) {
+    /**
+   * Whether to play on mouseover
+   */ set hover(value) {
         this.setAttribute('hover', value.toString());
     }
     get hover() {
@@ -732,7 +806,9 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         }
         return false;
     }
-    set intermission(value) {
+    /**
+   * Pause between loop intrations, in miliseconds
+   */ set intermission(value) {
         this.setAttribute('intermission', value.toString());
     }
     get intermission() {
@@ -742,7 +818,9 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         }
         return 0;
     }
-    set loop(value) {
+    /**
+   * Loop animation
+   */ set loop(value) {
         this.setAttribute('loop', (!!value).toString());
     }
     get loop() {
@@ -752,7 +830,9 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         }
         return false;
     }
-    set mode(value) {
+    /**
+   * Play mode
+   */ set mode(value) {
         this.setAttribute('mode', value.toString());
     }
     get mode() {
@@ -762,7 +842,9 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         }
         return PlayMode.Normal;
     }
-    set objectfit(value) {
+    /**
+   * Resizing to container
+   */ set objectfit(value) {
         this.setAttribute('objectfit', value);
     }
     get objectfit() {
@@ -772,7 +854,9 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         }
         return ObjectFit.Contain;
     }
-    set preserveAspectRatio(value) {
+    /**
+   * Resizing to container (Deprecated)
+   */ set preserveAspectRatio(value) {
         this.setAttribute('preserveAspectRatio', value || PreserveAspectRatio.Contain);
     }
     get preserveAspectRatio() {
@@ -782,7 +866,9 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         }
         return null;
     }
-    set renderer(value) {
+    /**
+   * Renderer to use: svg, canvas or html
+   */ set renderer(value) {
         this.setAttribute('renderer', value);
     }
     get renderer() {
@@ -792,7 +878,9 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         }
         return 'svg';
     }
-    set simple(value) {
+    /**
+   * Hide advanced controls
+   */ set simple(value) {
         this.setAttribute('simple', value.toString());
     }
     get simple() {
@@ -802,7 +890,9 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         }
         return false;
     }
-    set speed(value) {
+    /**
+   * Speed
+   */ set speed(value) {
         this.setAttribute('speed', value?.toString());
     }
     get speed() {
@@ -812,13 +902,17 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         }
         return 1;
     }
-    set src(value) {
+    /**
+   * Source, either path or JSON string
+   */ set src(value) {
         this.setAttribute('src', value || '');
     }
     get src() {
         return this.getAttribute('src');
     }
-    set subframe(value) {
+    /**
+   * Subframe
+   */ set subframe(value) {
         this.setAttribute('subframe', (!!value).toString());
     }
     get subframe() {
@@ -828,29 +922,45 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         }
         return false;
     }
-    getMultiAnimationSettings() {
+    /**
+   * Get Multi-animation settings
+   * @returns { AnimationSettings[] }
+   */ getMultiAnimationSettings() {
         return this._multiAnimationSettings;
     }
-    setMultiAnimationSettings(settings) {
+    /**
+   * Set Multi-animation settings
+   * @param { AnimationSettings[] } settings
+   */ setMultiAnimationSettings(settings) {
         if (!this._lottieInstance) {
             return;
         }
         this._multiAnimationSettings = settings;
     }
-    setSegment(segment) {
+    /**
+   * Set playback segment
+   * @param { AnimationSegment } settings
+   */ setSegment(segment) {
         if (!this._lottieInstance) {
             return;
         }
         this._segment = segment;
     }
-    getSegment() {
+    /**
+   * Get playback segment
+   * @returns { AnimationSegment }
+   */ getSegment() {
         return this._segment;
     }
-    _getOptions() {
+    /**
+   * Get options from props
+   * @returns { AnimationConfig }
+   */ _getOptions() {
         if (!this._container) {
             throw new Error('Container not rendered');
         }
         const preserveAspectRatio = this.preserveAspectRatio ?? (this.objectfit && aspectRatio(this.objectfit)), currentAnimationSettings = this._multiAnimationSettings?.length ? this._multiAnimationSettings?.[this._currentAnimation] : undefined, currentAnimationManifest = this._manifest.animations?.[this._currentAnimation];
+        // Loop
         let loop = !!this.loop;
         if (currentAnimationManifest.loop !== undefined && this.loop === undefined) {
             loop = !!currentAnimationManifest.loop;
@@ -858,6 +968,7 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         if (currentAnimationSettings?.loop !== undefined) {
             loop = !!currentAnimationSettings.loop;
         }
+        // Autoplay
         let autoplay = !!this.autoplay;
         if (currentAnimationManifest.autoplay !== undefined && this.autoplay === undefined) {
             autoplay = !!currentAnimationManifest.autoplay;
@@ -868,6 +979,7 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         if (this.animateOnScroll) {
             autoplay = false;
         }
+        // Segment
         let initialSegment = this._segment;
         if (this._segment?.every((val)=>val > 0)) {
             initialSegment = [
@@ -913,7 +1025,9 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         }
         return options;
     }
-    _addIntersectionObserver() {
+    /**
+   * Add IntersectionObserver
+   */ _addIntersectionObserver() {
         if (!this._container || this._intersectionObserver || !('IntersectionObserver' in window)) {
             return;
         }
@@ -937,10 +1051,13 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         });
         this._intersectionObserver.observe(this._container);
     }
-    async load(src) {
+    /**
+   * Initialize Lottie Web player
+   */ async load(src) {
         if (!this.shadowRoot || !src) {
             return;
         }
+        // Load the resource
         try {
             const { animations, isDotLottie, manifest } = await getAnimationData(src);
             if (!animations || animations.some((animation)=>!this._isLottie(animation))) {
@@ -966,6 +1083,7 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
                     }
                 ]
             };
+            // Clear previous animation, if any
             if (this._lottieInstance) {
                 this._lottieInstance.destroy();
             }
@@ -973,6 +1091,7 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
             if (!this.animateOnScroll && (this.autoplay || this._multiAnimationSettings?.[this._currentAnimation]?.autoplay)) {
                 this.playerState = PlayerState.Playing;
             }
+            // Initialize lottie player and load animation
             this._lottieInstance = Lottie__namespace.default.loadAnimation({
                 ...this._getOptions(),
                 animationData: animations[this._currentAnimation]
@@ -985,9 +1104,11 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         }
         this._addEventListeners();
         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;
+        // Set initial playback speed and direction
         this._lottieInstance.setSpeed(speed);
         this._lottieInstance.setDirection(direction);
         this._lottieInstance.setSubframe(!!this.subframe);
+        // Start playing if autoplay is enabled
         if (this.autoplay || this.animateOnScroll) {
             if (this.direction === -1) {
                 this.seek('99%');
@@ -1001,10 +1122,14 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
             this._addIntersectionObserver();
         }
     }
-    getManifest() {
+    /**
+   * Get Lottie Manifest
+   */ getManifest() {
         return this._manifest;
     }
-    _toggleEventListeners(action) {
+    /**
+   * Toggle event listeners
+   */ _toggleEventListeners(action) {
         const method = action === 'add' ? 'addEventListener' : 'removeEventListener';
         if (this._lottieInstance) {
             this._lottieInstance[method]('enterFrame', this._enterFrame);
@@ -1033,17 +1158,22 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
             });
         }
     }
-    _addEventListeners() {
+    /**
+   * Add event listeners
+   */ _addEventListeners() {
         this._toggleEventListeners('add');
     }
-    _removeEventListeners() {
+    /**
+   * Remove event listeners
+   */ _removeEventListeners() {
         this._toggleEventListeners('remove');
     }
     _loopComplete() {
         if (!this._lottieInstance) {
             return;
         }
-        const { playDirection, totalFrames } = this._lottieInstance, inPoint = this._segment ? this._segment[0] : 0, outPoint = this._segment ? this._segment[0] : totalFrames;
+        const { playDirection, // firstFrame,
+        totalFrames } = this._lottieInstance, inPoint = this._segment ? this._segment[0] : 0, outPoint = this._segment ? this._segment[0] : totalFrames;
         if (this.count) {
             if (this._isBounce) {
                 this._playerState.count += 0.5;
@@ -1129,17 +1259,23 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
             this.play();
         }
     }
-    _mouseEnter() {
+    /**
+   * Handle MouseEnter
+   */ _mouseEnter() {
         if (this.hover && this.playerState !== PlayerState.Playing) {
             this.play();
         }
     }
-    _mouseLeave() {
+    /**
+   * Handle MouseLeave
+   */ _mouseLeave() {
         if (this.hover && this.playerState === PlayerState.Playing) {
             this.stop();
         }
     }
-    _onVisibilityChange() {
+    /**
+   * Handle visibility change events
+   */ _onVisibilityChange() {
         if (document.hidden && this.playerState === PlayerState.Playing) {
             this._freeze();
             return;
@@ -1148,7 +1284,9 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
             this.play();
         }
     }
-    _handleScroll() {
+    /**
+   * Handle scroll
+   */ _handleScroll() {
         if (!this.animateOnScroll || !this._lottieInstance) {
             return;
         }
@@ -1174,7 +1312,10 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
             });
         }
     }
-    _handleSeekChange({ target }) {
+    /**
+   * Handles click and drag actions on the progress track
+   * @param { Event & { HTMLInputElement } } event
+   */ _handleSeekChange({ target }) {
         if (!(target instanceof HTMLInputElement) || !this._lottieInstance || isNaN(Number(target.value))) {
             return;
         }
@@ -1192,7 +1333,16 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         ];
         return mandatory.every((field)=>Object.prototype.hasOwnProperty.call(json, field));
     }
-    async addAnimation(configs, fileName, shouldDownload = true) {
+    /**
+   * Creates a new dotLottie file, by combinig several animations
+   * @param { [ AnimationConfig ] } configs
+   * @param { string } fileName
+   * @param { boolean } shouldDownload Whether to trigger a download in the browser.
+   * If set to false the function returns an ArrayBuffer. Defaults to true.
+   *
+   */ async addAnimation(configs, fileName, shouldDownload = true) {
+        // Initialize meta object for animation, with fallbacks for
+        // when the method is called indepenently
         const { animations = [], manifest = {
             animations: this.src ? [
                 {
@@ -1234,10 +1384,14 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
             };
         }
     }
-    getLottie() {
+    /**
+   * Returns the lottie-web instance used in the component
+   */ getLottie() {
         return this._lottieInstance;
     }
-    async play() {
+    /**
+   * Play
+   */ async play() {
         if (!this._lottieInstance) {
             return;
         }
@@ -1251,7 +1405,9 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
             this.playerState = PlayerState.Playing;
         }
     }
-    pause() {
+    /**
+   * Pause
+   */ pause() {
         if (!this._lottieInstance) {
             return;
         }
@@ -1265,7 +1421,9 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
             this.playerState = PlayerState.Paused;
         }
     }
-    stop() {
+    /**
+   * Stop
+   */ stop() {
         if (!this._lottieInstance) {
             return;
         }
@@ -1280,7 +1438,9 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
             this.playerState = PlayerState.Stopped;
         }
     }
-    destroy() {
+    /**
+   * Destroy animation and element
+   */ destroy() {
         if (!this._lottieInstance) {
             return;
         }
@@ -1291,16 +1451,23 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         this.remove();
         document.removeEventListener('visibilitychange', this._onVisibilityChange);
     }
-    seek(value) {
+    /**
+   * Seek to a given frame
+   * @param { number | string } value Frame to seek to
+   */ seek(value) {
         if (!this._lottieInstance) {
             return;
         }
+        // Extract frame number from either number or percentage value
         const matches = value.toString().match(/^([0-9]+)(%?)$/);
         if (!matches) {
             return;
         }
+        // Calculate and set the frame number
         const frame = Math.round(matches[2] === '%' ? this._lottieInstance.totalFrames * Number(matches[1]) / 100 : Number(matches[1]));
+        // Set seeker to new frame number
         this._seeker = frame;
+        // Send lottie player to the new frame
         if (this.playerState === PlayerState.Playing || this.playerState === PlayerState.Frozen && this._playerState.prev === PlayerState.Playing) {
             this._lottieInstance.goToAndPlay(frame, true);
             this.playerState = PlayerState.Playing;
@@ -1309,10 +1476,13 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         this._lottieInstance.goToAndStop(frame, true);
         this._lottieInstance.pause();
     }
-    snapshot() {
+    /**
+   * Snapshot and download the current frame as SVG
+   */ snapshot() {
         if (!this.shadowRoot || !this.src) {
             return;
         }
+        // Get SVG element and serialize markup
         const svgElement = this.shadowRoot.querySelector('.animation svg'), data = svgElement instanceof Node ? new XMLSerializer().serializeToString(svgElement) : null;
         if (!data) {
             console.error('Could not serialize data');
@@ -1324,19 +1494,28 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         });
         return data;
     }
-    setSubframe(value) {
+    /**
+   * Toggles subframe, for more smooth animations
+   * @param { boolean } value Whether animation uses subframe
+   */ setSubframe(value) {
         if (!this._lottieInstance) {
             return;
         }
         this._lottieInstance.setSubframe(value);
     }
-    setCount(value) {
+    /**
+   * Dynamically set count for loops
+   */ setCount(value) {
         if (!this._lottieInstance) {
             return;
         }
         this.count = value;
     }
-    _freeze() {
+    /**
+   * Freeze animation.
+   * This internal state pauses animation and is used to differentiate between
+   * user requested pauses and component instigated pauses.
+   */ _freeze() {
         if (!this._lottieInstance) {
             return;
         }
@@ -1350,32 +1529,45 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
             this.playerState = PlayerState.Frozen;
         }
     }
-    async reload() {
+    /**
+   * Reload animation
+   */ async reload() {
         if (!this._lottieInstance || !this.src) {
             return;
         }
         this._lottieInstance.destroy();
         await this.load(this.src);
     }
-    setSpeed(value = 1) {
+    /**
+   * Set animation playback speed
+   * @param { number } value Playback speed
+   */ setSpeed(value = 1) {
         if (!this._lottieInstance) {
             return;
         }
         this._lottieInstance.setSpeed(value);
     }
-    setDirection(value) {
+    /**
+   * Animation play direction
+   * @param { AnimationDirection } value Animation direction
+   */ setDirection(value) {
         if (!this._lottieInstance) {
             return;
         }
         this._lottieInstance.setDirection(value);
     }
-    setLoop(value) {
+    /**
+   * Set loop
+   * @param { boolean } value
+   */ setLoop(value) {
         if (!this._lottieInstance) {
             return;
         }
         this._lottieInstance.setLoop(value);
     }
-    togglePlay() {
+    /**
+   * Toggle playing state
+   */ togglePlay() {
         if (!this._lottieInstance) {
             return;
         }
@@ -1396,12 +1588,16 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         }
         return this._lottieInstance.goToAndPlay(0, true);
     }
-    toggleLoop() {
+    /**
+   * Toggle loop
+   */ toggleLoop() {
         const val = !this.loop;
         this.loop = val;
         this.setLoop(val);
     }
-    toggleBoomerang() {
+    /**
+   * Toggle Boomerang
+   */ toggleBoomerang() {
         const curr = this._multiAnimationSettings?.[this._currentAnimation];
         if (curr?.mode !== undefined) {
             if (curr.mode === PlayMode.Normal) {
@@ -1421,31 +1617,40 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
         this.mode = PlayMode.Normal;
         this._isBounce = false;
     }
-    _toggleSettings(flag) {
+    /**
+   * Toggle show Settings
+   */ _toggleSettings(flag) {
         if (flag === undefined) {
             this._isSettingsOpen = !this._isSettingsOpen;
             return;
         }
         this._isSettingsOpen = flag;
     }
-    _handleBlur() {
+    /**
+   * Handle blur
+   */ _handleBlur() {
         setTimeout(()=>this._toggleSettings(false), 200);
     }
     _switchInstance(isPrevious = false) {
+        // Bail early if there is not animation to play
         if (!this._animations[this._currentAnimation]) {
             return;
         }
         try {
+            // Clear previous animation
             if (this._lottieInstance) {
                 this._lottieInstance.destroy();
             }
+            // Re-initialize lottie player
             this._lottieInstance = Lottie__namespace.default.loadAnimation({
                 ...this._getOptions(),
                 animationData: this._animations[this._currentAnimation]
             });
+            // Check play mode for current animation
             if (this._multiAnimationSettings?.[this._currentAnimation]?.mode) {
                 this._isBounce = this._multiAnimationSettings[this._currentAnimation].mode === PlayMode.Bounce;
             }
+            // Remove event listeners to new Lottie instance, and add new
             this._removeEventListeners();
             this._addEventListeners();
             this.dispatchEvent(new CustomEvent(isPrevious ? PlayerEvents.Previous : PlayerEvents.Next));
@@ -1467,11 +1672,15 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
             this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
         }
     }
-    next() {
+    /**
+   * Skip to next animation
+   */ next() {
         this._currentAnimation++;
         this._switchInstance();
     }
-    prev() {
+    /**
+   * Skip to previous animation
+   */ prev() {
         this._currentAnimation--;
         this._switchInstance(true);
     }
@@ -1493,21 +1702,40 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
             shouldDownload
         });
     }
-    static get styles() {
+    /**
+   * Return the styles for the component
+   */ static get styles() {
         const styleSheet = new CSSStyleSheet();
         styleSheet.replace(css_248z);
         return styleSheet;
     }
     constructor(){
-        super(), this._renderControls = renderControls, this._render = renderPlayer, this._multiAnimationSettings = [], this.playerState = PlayerState.Loading, this._isSettingsOpen = false, this._seeker = 0, this._currentAnimation = 0, this._lottieInstance = null, this._identifier = this.id || useId('dotlottie'), this._errorMessage = 'Something went wrong', this._isBounce = false, this._isDotLottie = false, this._playerState = {
+        super(), this._renderControls = renderControls, this._render = renderPlayer, /**
+   * Multi-animation settings
+   */ this._multiAnimationSettings = [], /**
+   * @state
+   * Player state
+   */ this.playerState = PlayerState.Loading, /**
+   * @state
+   * Whether settings toolbar is open
+   */ this._isSettingsOpen = false, /**
+   * @state
+   * Seeker
+   */ this._seeker = 0, /**
+   * @state
+   * Which animation to show, if several
+   */ this._currentAnimation = 0, this._lottieInstance = null, this._identifier = this.id || useId('dotlottie'), this._errorMessage = 'Something went wrong', this._isBounce = false, this._isDotLottie = false, this._playerState = {
             count: 0,
             loaded: false,
             prev: PlayerState.Loading,
             scrollTimeout: null,
             scrollY: 0,
             visible: false
-        }, this._handleSettingsClick = ({ target })=>{
+        }, /**
+   * Handle settings click event
+   */ this._handleSettingsClick = ({ target })=>{
             this._toggleSettings();
+            // Because Safari does not add focus on click, we need to add it manually, so the onblur event will fire
             if (target instanceof HTMLElement) {
                 target.focus();
             }
@@ -1544,7 +1772,10 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
     }
 };
 
-globalThis.dotLottiePlayer = ()=>new DotLottiePlayer();
+/**
+ * Expose DotLottiePlayer class as global variable
+ * @returns { DotLottiePlayer }
+ */ globalThis.dotLottiePlayer = ()=>new DotLottiePlayer();
 const tagName = 'dotlottie-player';
 if (!isServer()) {
     customElements.define('dotlottie-player', DotLottiePlayer);