@aarsteinmedia/dotlottie-player 5.0.0 → 5.0.1

package/dist/index.js

@@ -1,4 +1,5 @@
 import { strToU8, strFromU8, zip, unzip as unzip$1 } from 'fflate';
+import { createElementID } from '@aarsteinmedia/lottie-web/utils';
 import * as Lottie from 'lottie-web/build/player/lottie.js';
 
 var ObjectFit = /*#__PURE__*/ function(ObjectFit) {
@@ -49,6 +50,12 @@ var PreserveAspectRatio = /*#__PURE__*/ function(PreserveAspectRatio) {
     PreserveAspectRatio["Initial"] = "none";
     return PreserveAspectRatio;
 }({});
+var RendererType = /*#__PURE__*/ function(RendererType) {
+    RendererType["SVG"] = "svg";
+    RendererType["HTML"] = "html";
+    RendererType["Canvas"] = "canvas";
+    return RendererType;
+}({});
 
 class CustomError extends Error {
 }
@@ -83,14 +90,14 @@ const addExt = (ext, str)=>{
    * @returns { Uint8Array } UTF-8/Latin-1 binary
    */ base64ToU8 = (str)=>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 })=>{
+   */ 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' : ''}`);
+        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, // Prepare the dotLottie file
-        name = addExt('lottie', fileName) || `${useId()}.lottie`, dotlottie = {
+        name = addExt('lottie', fileName) || `${createElementID()}.lottie`, dotlottie = {
             'manifest.json': [
                 strToU8(JSON.stringify(manifest), true),
                 {
@@ -99,20 +106,26 @@ 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)) {
+        const { length } = animations;
+        for(let i = 0; i < length; i++){
+            const { length: jLen } = animations[i].assets;
+            for(let j = 0; j < jLen; j++){
+                if (!animations[i].assets[j].p || !isImage(animations[i].assets[j]) && !isAudio(animations[i].assets[j])) {
+                    continue;
+                }
+                const { p: file, u: path } = animations[i].assets[j];
+                if (!file) {
                     continue;
                 }
-                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
+                // Original asset.id caused issues with multianimations
+                const assetId = createElementID(), 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}`;
+                animations[i].assets[j].p = `${assetId}.${ext}`;
                 // Asset is embedded, so path empty string
-                asset.u = '';
+                animations[i].assets[j].u = '';
                 // Asset is encoded
-                asset.e = 1;
-                dotlottie[`${isAudio(asset) ? 'audio' : 'images'}/${assetId}.${ext}`] = [
+                animations[i].assets[j].e = 1;
+                dotlottie[`${isAudio(animations[i].assets[j]) ? 'audio' : 'images'}/${assetId}.${ext}`] = [
                     base64ToU8(dataURL),
                     {
                         level: animationCompressionLevel
@@ -120,7 +133,7 @@ const addExt = (ext, str)=>{
                 ];
             }
             dotlottie[`animations/${manifest.animations[i].id}.json`] = [
-                strToU8(JSON.stringify(animation), true),
+                strToU8(JSON.stringify(animations[i]), true),
                 {
                     level: animationCompressionLevel
                 }
@@ -137,9 +150,9 @@ const addExt = (ext, str)=>{
 }, createJSON = ({ animation, fileName, shouldDownload })=>{
     try {
         if (!animation) {
-            throw new Error("Missing or malformed required parameter(s):\n - animation\n'");
+            throw new Error("createJSON: Missing or malformed required parameter(s):\n - animation\n'");
         }
-        const name = addExt('json', fileName) || `${useId()}.json`, jsonString = JSON.stringify(animation);
+        const name = addExt('json', fileName) || `${createElementID()}.json`, jsonString = JSON.stringify(animation);
         return shouldDownload ? download(jsonString, {
             mimeType: 'application/json',
             name
@@ -156,7 +169,7 @@ const addExt = (ext, str)=>{
         data
     ], {
         type: options?.mimeType
-    }), fileName = options?.name || useId(), dataURL = URL.createObjectURL(blob), link = document.createElement('a');
+    }), fileName = options?.name || createElementID(), dataURL = URL.createObjectURL(blob), link = document.createElement('a');
     link.href = dataURL;
     link.download = fileName;
     link.hidden = true;
@@ -195,7 +208,7 @@ const addExt = (ext, str)=>{
             return {
                 animations,
                 isDotLottie: false,
-                manifest: undefined
+                manifest: null
             };
         }
         const result = await fetch(input, {
@@ -209,19 +222,24 @@ const addExt = (ext, str)=>{
             throw error;
         }
         /**
-       * Check if file is JSON, first by parsing file name for extension,
-       * then – if filename has no extension – by cloning the response
-       * and parsing it for content.
-       */ const ext = getExt(input);
-        if (ext === 'json' || !ext) {
-            if (ext) {
+       * Check if file is JSON, first by parsing headers for content-type,
+       * than by parsing filename, then – if filename has no extension – by
+       * cloning the response and parsing response for content.
+       */ let isJSON = true;
+        const contentType = result.headers.get('content-type');
+        if (contentType === 'application/zip+dotlottie') {
+            isJSON = false;
+        }
+        if (isJSON) {
+            const ext = getExt(input);
+            if (ext === 'json') {
                 const lottie = await result.json();
                 return {
                     animations: [
                         lottie
                     ],
                     isDotLottie: false,
-                    manifest: undefined
+                    manifest: null
                 };
             }
             const text = await result.clone().text();
@@ -232,9 +250,9 @@ const addExt = (ext, str)=>{
                         lottie
                     ],
                     isDotLottie: false,
-                    manifest: undefined
+                    manifest: null
                 };
-            } catch (_e) {
+            } catch (error) {
             /* empty */ }
         }
         const { data, manifest } = await getLottieJSON(result);
@@ -248,7 +266,7 @@ const addExt = (ext, str)=>{
         return {
             animations: undefined,
             isDotLottie: false,
-            manifest: undefined
+            manifest: null
         };
     }
 }, getArrayBuffer = async (zippable)=>{
@@ -290,9 +308,16 @@ const addExt = (ext, str)=>{
     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){
-        const str = strFromU8(unzipped[`animations/${id}.json`]), lottie = JSON.parse(prepareString(str));
+    const unzipped = await unzip(resp), manifest = getManifest(unzipped), data = [], toResolve = [], { length } = manifest.animations;
+    /**
+     * Check whether Lottie animations folder is abbreviated.
+     */ let animationsFolder = 'animations';
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (unzipped[`a/${manifest.animations[0].id}.json`]) {
+        animationsFolder = 'a';
+    }
+    for(let i = 0; i < length; i++){
+        const str = strFromU8(unzipped[`${animationsFolder}/${manifest.animations[i].id}.json`]), lottie = JSON.parse(prepareString(str));
         toResolve.push(resolveAssets(unzipped, lottie.assets));
         data.push(lottie);
     }
@@ -360,20 +385,20 @@ const addExt = (ext, str)=>{
     if (!Array.isArray(assets)) {
         return;
     }
-    const toResolve = [];
-    for (const asset of assets){
-        if (!isAudio(asset) && !isImage(asset)) {
+    const toResolve = [], { length } = assets;
+    for(let i = 0; i < length; i++){
+        if (!isAudio(assets[i]) && !isImage(assets[i])) {
             continue;
         }
-        const type = isImage(asset) ? 'images' : 'audio', u8 = unzipped?.[`${type}/${asset.p}`];
+        const type = isImage(assets[i]) ? 'images' : 'audio', u8 = unzipped?.[`${type}/${assets[i].p}`];
         if (!u8) {
             continue;
         }
         toResolve.push(new Promise((resolveAsset)=>{
             const assetB64 = isServer() ? Buffer.from(u8).toString('base64') : btoa(u8.reduce((dat, byte)=>`${dat}${String.fromCharCode(byte)}`, ''));
-            asset.p = asset.p?.startsWith('data:') || isBase64(asset.p) ? asset.p : `data:${getMimeFromExt(getExt(asset.p))};base64,${assetB64}`;
-            asset.e = 1;
-            asset.u = '';
+            assets[i].p = assets[i].p?.startsWith('data:') || isBase64(assets[i].p) ? assets[i].p : `data:${getMimeFromExt(getExt(assets[i].p))};base64,${assetB64}`;
+            assets[i].e = 1;
+            assets[i].u = '';
             resolveAsset();
         }));
     }
@@ -388,9 +413,6 @@ const addExt = (ext, str)=>{
         });
     });
     return unzipped;
-}, useId = (prefix)=>{
-    const s4 = ()=>((1 + Math.random()) * 0x10000 | 0).toString(16).substring(1);
-    return `${prefix ?? `:${s4()}`}_${s4()}`;
 };
 
 /**
@@ -464,42 +486,40 @@ const addExt = (ext, str)=>{
 /**
  * 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');
+ */ const UPDATE_ON_CONNECTED = Symbol('UPDATE_ON_CONNECTED');
 if (isServer()) {
     // Mock HTMLElement for server-side rendering
-    // @ts-ignore
     global.HTMLElement = class EmptyHTMLElement {
     };
 }
 /**
  * HTMLElement enhanced to track property changes
- */ class EnhancedElement extends HTMLElement {
+ */ class PropertyCallbackElement extends HTMLElement {
     constructor(){
         super();
-        // @ts-ignore
         const { observedProperties = [] } = this.constructor;
         if (UPDATE_ON_CONNECTED in this) {
             this[UPDATE_ON_CONNECTED] = [];
         }
         if ('propertyChangedCallback' in this && typeof this.propertyChangedCallback === 'function') {
-            for (const propName of observedProperties){
-                const initialValue = this[propName], CACHED_VALUE = Symbol(propName);
-                // @ts-ignore
+            const { length } = observedProperties;
+            for(let i = 0; i < length; i++){
+                const initialValue = this[observedProperties[i]], CACHED_VALUE = Symbol(observedProperties[i]);
+                // @ts-expect-error: ingore
                 this[CACHED_VALUE] = initialValue;
-                Object.defineProperty(this, propName, {
+                Object.defineProperty(this, observedProperties[i], {
                     get () {
                         return this[CACHED_VALUE];
                     },
                     set (value) {
                         const oldValue = this[CACHED_VALUE];
                         this[CACHED_VALUE] = value;
-                        this.propertyChangedCallback(propName, oldValue, value);
+                        this.propertyChangedCallback(observedProperties[i], oldValue, value);
                     }
                 });
                 if (typeof initialValue !== 'undefined') {
                     if (UPDATE_ON_CONNECTED in this && Array.isArray(this[UPDATE_ON_CONNECTED])) {
-                        this[UPDATE_ON_CONNECTED].push(propName);
+                        this[UPDATE_ON_CONNECTED].push(observedProperties[i]);
                     }
                 }
             }
@@ -510,18 +530,19 @@ if (isServer()) {
         if (UPDATE_ON_CONNECTED in this && Array.isArray(this[UPDATE_ON_CONNECTED])) {
             arr = this[UPDATE_ON_CONNECTED];
         }
-        for (const propName of arr){
+        const { length } = arr;
+        for(let i = 0; i < length; i++){
             if (!('propertyChangedCallback' in this) || typeof this.propertyChangedCallback !== 'function') {
                 continue;
             }
-            if (propName in this) {
-                this.propertyChangedCallback(propName, undefined, this[propName]);
+            if (arr[i] in this) {
+                this.propertyChangedCallback(arr[i], undefined, this[arr[i]]);
             }
         }
     }
 }
 
-var name="@aarsteinmedia/dotlottie-player";var version="5.0.0";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports={".":{"import":"./dist/index.js",node:"./dist/index.js",types:"./dist/index.d.ts"}};var main="./dist/index.js";var unpkg="./dist/unpkg/index.js";var module="./dist/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.js",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 **/*.css","lint:css:fix":"npx stylelint **/*.css --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.4","@eslint/compat":"^1.2.7","@eslint/js":"^9.21.0","@esm-bundle/chai":"4.3.4-fix.0","@open-wc/testing":"^4.0.0","@rollup/plugin-commonjs":"^28.0.2","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^16.0.0","@rollup/plugin-typescript":"^12.1.2","@swc/core":"^1.11.1","@types/mocha":"^10.0.10","@types/node":"^22.13.5","@types/path-browserify":"^1.0.3","@types/react":"^19.0.10","@web/dev-server-esbuild":"^1.0.4","@web/dev-server-import-maps":"^0.2.1","@web/dev-server-rollup":"^0.6.4","@web/test-runner":"^0.20.0","@web/test-runner-playwright":"^0.11.0",autoprefixer:"^10.4.20",esbuild:"^0.25.0",eslint:"^9.21.0","eslint-config-prettier":"^10.0.1","eslint-import-resolver-typescript":"^3.8.3","eslint-plugin-import":"^2.31.0","eslint-plugin-jsdoc":"^50.6.3","eslint-plugin-perfectionist":"^4.9.0","eslint-plugin-prettier":"^5.2.3",globals:"^16.0.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.5.2",react:"^19.0.0",rimraf:"^6.0.1",rollup:"^4.34.8","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":"^3.0.0","rollup-plugin-summary":"^3.0.0","rollup-plugin-swc3":"^0.12.1","rollup-plugin-typescript-paths":"^1.5.0",stylelint:"^16.14.1","stylelint-config-recommended":"^15.0.0","tsc-alias":"^1.8.10",tslib:"^2.8.1",typescript:"^5.7.3","typescript-eslint":"^8.25.0"};var pnpm={onlyBuiltDependencies:["@parcel/watcher","@swc/core","esbuild"]};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:">= 12.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,main:main,unpkg:unpkg,module:module,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,contributors:contributors,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,pnpm:pnpm,browserslist:browserslist,customElements:customElements$1,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
+var name="@aarsteinmedia/dotlottie-player";var version="5.0.1";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports={".":{"import":"./dist/index.js",node:"./dist/index.js",types:"./dist/index.d.ts"}};var main="./dist/index.js";var unpkg="./dist/unpkg/index.js";var module="./dist/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.js",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 **/*.css","lint:css:fix":"npx stylelint **/*.css --fix"};var dependencies={"@aarsteinmedia/lottie-web":"^0.2.21",fflate:"^0.8.2","lottie-web":"^5.13.0"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.10.4","@eslint/compat":"^1.2.9","@eslint/js":"^9.27.0","@esm-bundle/chai":"4.3.4-fix.0","@open-wc/testing":"^4.0.0","@rollup/plugin-commonjs":"^28.0.3","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^16.0.1","@rollup/plugin-typescript":"^12.1.2","@swc/core":"^1.11.29","@types/mocha":"^10.0.10","@types/node":"^22.15.21","@types/path-browserify":"^1.0.3","@types/react":"^19.1.5","@web/dev-server-esbuild":"^1.0.4","@web/dev-server-import-maps":"^0.2.1","@web/dev-server-rollup":"^0.6.4","@web/test-runner":"^0.20.2","@web/test-runner-playwright":"^0.11.0",autoprefixer:"^10.4.21",esbuild:"^0.25.4",eslint:"^9.27.0","eslint-config-prettier":"^10.1.5","eslint-import-resolver-typescript":"^4.3.5","eslint-plugin-import":"^2.31.0","eslint-plugin-jsdoc":"^50.6.17","eslint-plugin-perfectionist":"^4.13.0","eslint-plugin-prettier":"^5.4.0",globals:"^16.1.0","postcss-flexbugs-fixes":"^5.0.2",prettier:"^3.5.3",react:"^19.1.0",rimraf:"^6.0.1",rollup:"^4.41.0","rollup-plugin-dts":"^6.2.1","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-serve":"^3.0.0","rollup-plugin-summary":"^3.0.1","rollup-plugin-swc3":"^0.12.1","rollup-plugin-typescript-paths":"^1.5.0",stylelint:"^16.19.1","stylelint-config-recommended":"^16.0.0","tsc-alias":"^1.8.16",tslib:"^2.8.1",typescript:"^5.8.3","typescript-eslint":"^8.32.1"};var pnpm={onlyBuiltDependencies:["@parcel/watcher","@swc/core","esbuild","unrs-resolver"]};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:">= 12.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,main:main,unpkg:unpkg,module:module,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,contributors:contributors,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,pnpm:pnpm,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\n  width: 100%;\n  height: 100%;\n\n  &:not([hidden]) {\n    display: block;\n  }\n\n  .main {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n  }\n\n  .animation {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    margin: 0;\n    padding: 0;\n  }\n\n  [data-controls='true'] .animation {\n    height: calc(100% - 35px);\n  }\n\n  .animation-container {\n    position: relative;\n  }\n\n  .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    &::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  }\n\n  .error {\n    display: flex;\n    margin: auto;\n    justify-content: center;\n    height: 100%;\n    align-items: center;\n\n    & svg {\n      width: 100%;\n      height: auto;\n    }\n  }\n\n  .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    &.has-error {\n      pointer-events: none;\n      opacity: 0.5;\n    }\n\n    & 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      &:not([hidden]) {\n        display: flex;\n      }\n\n      &:hover {\n        opacity: 1;\n      }\n\n      &[data-active='true'] {\n        opacity: 1;\n        fill: var(--lottie-player-toolbar-icon-active-color);\n      }\n\n      &:disabled {\n        opacity: 0.5;\n      }\n\n      &:focus {\n        outline: 0;\n      }\n\n      & svg {\n        pointer-events: none;\n\n        & > * {\n          fill: inherit;\n        }\n      }\n\n      &.disabled svg {\n        display: none;\n      }\n    }\n  }\n\n  .progress-container {\n    position: relative;\n    width: 100%;\n\n    &.simple {\n      margin-right: 12px;\n    }\n  }\n\n  .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\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    &::-webkit-slider-runnable-track,\n    &::-webkit-slider-thumb {\n      appearance: none;\n      outline: none;\n    }\n\n    &::-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\n    &:hover::-webkit-slider-thumb,\n    &:focus::-webkit-slider-thumb {\n      transform: scale(1);\n    }\n\n    &::-moz-range-progress {\n      background-color: var(--lottie-player-seeker-thumb-color);\n      height: 5px;\n      border-radius: 3px;\n    }\n\n    &::-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\n    &:hover::-moz-range-thumb,\n    &:focus::-moz-range-thumb {\n      transform: scale(1);\n    }\n\n    &::-ms-track {\n      width: 100%;\n      height: 5px;\n      cursor: pointer;\n      background: transparent;\n      border-color: transparent;\n      color: transparent;\n    }\n\n    &::-ms-fill-upper {\n      background: var(--lottie-player-seeker-track-color);\n      border-radius: 3px;\n    }\n\n    &::-ms-fill-lower {\n      background-color: var(--lottie-player-seeker-thumb-color);\n      border-radius: 3px;\n    }\n\n    &::-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\n    &:hover::-ms-thumb {\n      transform: scale(1);\n    }\n\n    &:focus {\n      &::-ms-thumb {\n        transform: scale(1);\n      }\n\n      &::-ms-fill-lower,\n      &::-ms-fill-upper {\n        background: var(--lottie-player-seeker-track-color);\n      }\n    }\n  }\n\n  & 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    &::-webkit-progress-inner-element {\n      border-radius: 3px;\n      overflow: hidden;\n    }\n\n    &::-webkit-slider-runnable-track {\n      background-color: transparent;\n    }\n\n    &::-webkit-progress-value {\n      background-color: var(--lottie-player-seeker-thumb-color);\n    }\n  }\n\n  & *::-moz-progress-bar {\n    background-color: var(--lottie-player-seeker-thumb-color);\n  }\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\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}\n";
 
@@ -531,7 +552,7 @@ var css_248z = "* {\n  box-sizing: border-box;\n}\n\n:host {\n  --lottie-player-
  * @class DotLottiePlayer
  * @extends { EnhancedElement }
  * @description Web Component for playing Lottie animations in your web app.
- */ class DotLottiePlayer extends EnhancedElement {
+ */ class DotLottiePlayer extends PropertyCallbackElement {
     constructor(){
         super(), this._renderControls = renderControls, this._render = renderPlayer, /**
    * Multi-animation settings
@@ -549,7 +570,12 @@ var css_248z = "* {\n  box-sizing: border-box;\n}\n\n:host {\n  --lottie-player-
    */ 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 = {
+   */ this._currentAnimation = 0, /**
+   * @state
+   * This is included in watched properties,
+   * so that next-button will show up
+   * on load, if controls are visible
+   */ this._animations = [], this._lottieInstance = null, this._identifier = this.id || createElementID(), this._errorMessage = 'Something went wrong', this._isBounce = false, this._isDotLottie = false, this._playerState = {
             count: 0,
             loaded: false,
             prev: PlayerState.Loading,
@@ -926,10 +952,10 @@ var css_248z = "* {\n  box-sizing: border-box;\n}\n\n:host {\n  --lottie-player-
     }
     get renderer() {
         const val = this.getAttribute('renderer');
-        if (val === 'canvas' || val === 'html') {
+        if (val === RendererType.Canvas || val === RendererType.HTML) {
             return val;
         }
-        return 'svg';
+        return RendererType.SVG;
     }
     /**
    * Hide advanced controls
@@ -989,13 +1015,13 @@ var css_248z = "* {\n  box-sizing: border-box;\n}\n\n:host {\n  --lottie-player-
     }
     /**
    * Set playback segment
-   * @param { AnimationSegment } settings
+   * @param { Vector2 } segment
    */ setSegment(segment) {
         this._segment = segment;
     }
     /**
    * Get playback segment
-   * @returns { AnimationSegment }
+   * @returns { Vector2 }
    */ getSegment() {
         return this._segment;
     }
@@ -1006,10 +1032,10 @@ var css_248z = "* {\n  box-sizing: border-box;\n}\n\n:host {\n  --lottie-player-
         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];
+        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) {
+        if (currentAnimationManifest?.loop !== undefined && this.loop === undefined) {
             loop = !!currentAnimationManifest.loop;
         }
         if (currentAnimationSettings?.loop !== undefined) {
@@ -1017,7 +1043,7 @@ var css_248z = "* {\n  box-sizing: border-box;\n}\n\n:host {\n  --lottie-player-
         }
         // Autoplay
         let autoplay = !!this.autoplay;
-        if (currentAnimationManifest.autoplay !== undefined && this.autoplay === undefined) {
+        if (currentAnimationManifest?.autoplay !== undefined && this.autoplay === undefined) {
             autoplay = !!currentAnimationManifest.autoplay;
         }
         if (currentAnimationSettings?.autoplay !== undefined) {
@@ -1060,6 +1086,7 @@ var css_248z = "* {\n  box-sizing: border-box;\n}\n\n:host {\n  --lottie-player-
                 options.rendererSettings = {
                     ...options.rendererSettings,
                     clearCanvas: true,
+                    // @ts-expect-error TODO:
                     preserveAspectRatio,
                     progressiveLoad: true
                 };
@@ -1079,8 +1106,9 @@ var css_248z = "* {\n  box-sizing: border-box;\n}\n\n:host {\n  --lottie-player-
             return;
         }
         this._intersectionObserver = new IntersectionObserver((entries)=>{
-            for (const entry of entries){
-                if (!entry.isIntersecting || document.hidden) {
+            const { length } = entries;
+            for(let i = 0; i < length; i++){
+                if (!entries[i].isIntersecting || document.hidden) {
                     if (this.playerState === PlayerState.Playing) {
                         this._freeze();
                     }
@@ -1123,7 +1151,7 @@ var css_248z = "* {\n  box-sizing: border-box;\n}\n\n:host {\n  --lottie-player-
                     {
                         autoplay: !this.animateOnScroll && this.autoplay,
                         direction: this.direction,
-                        id: useId(),
+                        id: createElementID(),
                         loop: this.loop,
                         mode: this.mode,
                         speed: this.speed
@@ -1139,6 +1167,7 @@ var css_248z = "* {\n  box-sizing: border-box;\n}\n\n:host {\n  --lottie-player-
                 this.playerState = PlayerState.Playing;
             }
             // Initialize lottie player and load animation
+            // @ts-expect-error TODO:
             this._lottieInstance = Lottie.default.loadAnimation({
                 ...this._getOptions(),
                 animationData: animations[this._currentAnimation]
@@ -1150,7 +1179,7 @@ var css_248z = "* {\n  box-sizing: border-box;\n}\n\n:host {\n  --lottie-player-
             return;
         }
         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;
+        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);
@@ -1398,27 +1427,31 @@ var css_248z = "* {\n  box-sizing: border-box;\n}\n\n:host {\n  --lottie-player-
             ] : []
         } } = this.src ? await getAnimationData(this.src) : {};
         try {
+            // @ts-expect-error TODO:
             manifest.generator = pkg.name;
-            for (const config of configs){
-                const { url } = config, { animations: animationsToAdd } = await getAnimationData(url);
+            const { length } = configs;
+            for(let i = 0; i < length; i++){
+                const { url } = configs[i], { animations: animationsToAdd } = await getAnimationData(url);
                 if (!animationsToAdd) {
                     throw new Error('No animation loaded');
                 }
-                if (manifest.animations.some(({ id })=>id === config.id)) {
+                if (manifest?.animations.some(({ id })=>id === configs[i].id)) {
                     throw new Error('Duplicate id for animation');
                 }
+                // @ts-expect-error TODO:
                 manifest.animations = [
                     ...manifest.animations,
                     {
-                        id: config.id
+                        id: configs[i].id
                     }
                 ];
-                animations?.push(...animationsToAdd);
+                animations.push(...animationsToAdd);
             }
             return {
                 result: await createDotLottie({
                     animations,
                     fileName,
+                    // @ts-expect-error TODO:
                     manifest,
                     shouldDownload
                 }),
@@ -1696,6 +1729,7 @@ var css_248z = "* {\n  box-sizing: border-box;\n}\n\n:host {\n  --lottie-player-
                 this._lottieInstance.destroy();
             }
             // Re-initialize lottie player
+            // @ts-expect-error TODO:
             this._lottieInstance = Lottie.default.loadAnimation({
                 ...this._getOptions(),
                 animationData: this._animations[this._currentAnimation]
@@ -1747,7 +1781,7 @@ var css_248z = "* {\n  box-sizing: border-box;\n}\n\n:host {\n  --lottie-player-
             });
         }
         return createDotLottie({
-            animations: animations || (await getAnimationData(this.src))?.animations,
+            animations: animations || (await getAnimationData(this.src)).animations,
             fileName: `${getFilename(fileName || this.src || 'converted')}.lottie`,
             manifest: {
                 ...manifest || this._manifest,