@aarsteinmedia/dotlottie-player 2.5.13 → 2.5.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/cjs/index.js +12 -9
  2. package/dist/esm/index.js +12 -9
  3. package/dist/index.js +2 -2
  4. package/package.json +10 -10
package/dist/cjs/index.js CHANGED
@@ -5,6 +5,8 @@ var decorators_js = require('lit/decorators.js');
5
5
  var Lottie = require('lottie-web');
6
6
  var fflate = require('fflate');
7
7
 
8
+ var name="@aarsteinmedia/dotlottie-player";var version="2.5.15";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports$1={".":{"import":"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}};var main="./dist/esm/index.js";var unpkg="./dist/index.js";var module$1="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"};var bugs="https://github.com/aarsteinmedia/dotlottie-player/issues";var author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"};var license="GPL-2.0-or-later";var scripts={build:"rimraf ./dist && rollup -c","build:types":"rimraf ./types && tsc","build:cem":"npx cem analyze --config cem.config.mjs",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"rollup -c -w --environment NODE_ENV:development",lint:"tsc && eslint . --ext .ts","lint:fix":"eslint . --ext .ts --fix"};var dependencies={fflate:"^0.8.2",lit:"^3.1.4","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.9.9","@rollup/plugin-commonjs":"^25.0.8","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.7","@rollup/plugin-typescript":"^11.1.6","@swc/core":"^1.7.4","@types/node":"^22.0.2","@typescript-eslint/eslint-plugin":"^8.0.0","@typescript-eslint/parser":"^8.0.0",autoprefixer:"^10.4.19","esbuild-sass-plugin":"^3.3.1",eslint:"^8.57.0","eslint-import-resolver-typescript":"^3.6.1","eslint-plugin-import":"^2.29.1","eslint-plugin-jsdoc":"^48.10.2","eslint-plugin-lit":"^1.14.0","postcss-flexbugs-fixes":"^5.0.2",rimraf:"^6.0.1",rollup:"^4.19.2","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-postcss-lit":"^2.1.0","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.1","rollup-plugin-swc3":"^0.11.2",sass:"^1.77.8","ts-lit-plugin":"^2.0.2",tslib:"^2.6.3",typescript:"^5.5.4"};var customElements="dist/custom-elements.json";var files=["dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","component","lit-element","svg","vector","player"];var publishConfig={access:"public"};var engines={node:">= 8.17.0"};var funding={type:"paypal",url:"https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"};var pkg = {name:name,version:version,description:description,exports:exports$1,main:main,unpkg:unpkg,module:module$1,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,customElements:customElements,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
9
+
8
10
  exports.PlayerState = void 0;
9
11
  (function(PlayerState) {
10
12
  PlayerState["Completed"] = "completed";
@@ -83,7 +85,7 @@ const addExt = (ext, str)=>{
83
85
  if (!asset.p || !isImage(asset) && !isAudio(asset)) {
84
86
  continue;
85
87
  }
86
- const { p: file, u: path } = asset, assetId = asset.id || useId(), isEncoded = file.startsWith('data:'), ext = isEncoded ? getExtFromB64(file) : getExt(file), dataURL = isEncoded ? file : await fileToBase64(path ? path.endsWith('/') && `${path}${file}` || `${path}/${file}` : file);
88
+ 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);
87
89
  asset.p = `${assetId}.${ext}`;
88
90
  asset.u = '';
89
91
  asset.e = 1;
@@ -344,13 +346,11 @@ const addExt = (ext, str)=>{
344
346
  return unzipped;
345
347
  }, useId = (prefix)=>{
346
348
  const s4 = ()=>((1 + Math.random()) * 0x10000 | 0).toString(16).substring(1);
347
- return `${prefix ?? `:${s4()}`}-${s4()}`;
349
+ return `${prefix ?? `:${s4()}`}_${s4()}`;
348
350
  };
349
351
 
350
352
  var css_248z = lit.css`*{box-sizing:border-box}:host{--lottie-player-toolbar-height:35px;--lottie-player-toolbar-background-color:#FFF;--lottie-player-toolbar-icon-color:#000;--lottie-player-toolbar-icon-hover-color:#000;--lottie-player-toolbar-icon-active-color:#4285f4;--lottie-player-seeker-track-color:rgba(0, 0, 0, 0.2);--lottie-player-seeker-thumb-color:#4285f4;--lottie-player-seeker-display:block;display:block;width:100%;height:100%}@media (prefers-color-scheme:dark){:host{--lottie-player-toolbar-background-color:#000;--lottie-player-toolbar-icon-color:#FFF;--lottie-player-toolbar-icon-hover-color:#FFF;--lottie-player-seeker-track-color:rgba(255, 255, 255, 0.6)}}.main{display:flex;flex-direction:column;height:100%;width:100%;margin:0;padding:0}.animation{width:100%;height:100%;display:flex}[data-controls=true] .animation{height:calc(100% - 35px)}.animation-container{position:relative}.popover{position:absolute;right:5px;bottom:40px;background-color:var(--lottie-player-toolbar-background-color);border-radius:5px;padding:10px 15px;border:solid 2px var(--lottie-player-toolbar-icon-color);animation:fadeIn .2s ease-in-out}.popover::before{content:"";right:10px;border:7px solid transparent;border-top-color:transparent;margin-right:-7px;height:0;width:0;position:absolute;pointer-events:none;top:100%;border-top-color:var(--lottie-player-toolbar-icon-color)}.toolbar{display:flex;align-items:center;justify-items:center;background:var(--lottie-player-toolbar-background-color);margin:0;height:35px;padding:5px;border-radius:5px;gap:5px}.toolbar.has-error{pointer-events:none;opacity:.5}.toolbar button{cursor:pointer;fill:var(--lottie-player-toolbar-icon-color);color:var(--lottie-player-toolbar-icon-color);display:flex;background:0 0;border:0;padding:0;outline:0;height:100%;margin:0;align-items:center;gap:5px;opacity:.9}.toolbar button:hover{opacity:1}.toolbar button[data-active=true]{opacity:1;fill:var(--lottie-player-toolbar-icon-active-color)}.toolbar button:disabled{opacity:.5}.toolbar button:focus{outline:0}.toolbar button svg{pointer-events:none}.toolbar button svg>*{fill:inherit}.toolbar button.disabled svg{display:none}.progress-container{position:relative;width:100%}.progress-container.simple{margin-right:12px}.seeker{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0}.seeker::-webkit-slider-runnable-track,.seeker::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;outline:0}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0}.seeker{width:100%;height:20px;border-radius:3px;border:0;cursor:pointer;background-color:transparent;display:var(--lottie-player-seeker-display);color:var(--lottie-player-seeker-thumb-color);margin:0;padding:7.5px 0;position:relative;z-index:1}progress{position:absolute;width:100%;height:5px;border-radius:3px;border:0;top:0;left:0;margin:7.5px 0;background-color:var(--lottie-player-seeker-track-color);pointer-events:none}::-moz-progress-bar{background-color:var(--lottie-player-seeker-thumb-color)}::-webkit-progress-inner-element{border-radius:3px;overflow:hidden}::-webkit-slider-runnable-track{background-color:transparent}::-webkit-progress-value{background-color:var(--lottie-player-seeker-thumb-color)}.seeker::-webkit-slider-thumb{height:15px;width:15px;border-radius:50%;border:0;background-color:var(--lottie-player-seeker-thumb-color);cursor:pointer;-webkit-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:focus::-webkit-slider-thumb,.seeker:hover::-webkit-slider-thumb{transform:scale(1)}.seeker::-moz-range-progress{background-color:var(--lottie-player-seeker-thumb-color);height:5px;border-radius:3px}.seeker::-moz-range-thumb{height:15px;width:15px;border-radius:50%;background-color:var(--lottie-player-seeker-thumb-color);border:0;cursor:pointer;-moz-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:focus::-moz-range-thumb,.seeker:hover::-moz-range-thumb{transform:scale(1)}.seeker::-ms-track{width:100%;height:5px;cursor:pointer;background:0 0;border-color:transparent;color:transparent}.seeker::-ms-fill-upper{background:var(--lottie-player-seeker-track-color);border-radius:3px}.seeker::-ms-fill-lower{background-color:var(--lottie-player-seeker-thumb-color);border-radius:3px}.seeker::-ms-thumb{border:0;height:15px;width:15px;border-radius:50%;background:var(--lottie-player-seeker-thumb-color);cursor:pointer;-ms-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:hover::-ms-thumb{transform:scale(1)}.seeker:focus::-ms-thumb{transform:scale(1)}.seeker:focus::-ms-fill-lower,.seeker:focus::-ms-fill-upper{background:var(--lottie-player-seeker-track-color)}.error{display:flex;margin:auto;justify-content:center;height:100%;align-items:center}.error svg{width:100%;height:auto}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}`;
351
353
 
352
- var name="@aarsteinmedia/dotlottie-player";var version="2.5.12";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports$1={".":{"import":"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}};var main="./dist/esm/index.js";var unpkg="./dist/index.js";var module$1="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"};var bugs="https://github.com/aarsteinmedia/dotlottie-player/issues";var author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"};var license="GPL-2.0-or-later";var scripts={build:"rimraf ./dist && rollup -c","build:types":"rimraf ./types && tsc","build:cem":"npx cem analyze --config cem.config.mjs",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"rollup -c -w --environment NODE_ENV:development",lint:"tsc && eslint . --ext .ts","lint:fix":"eslint . --ext .ts --fix"};var dependencies={fflate:"^0.8.2",lit:"^3.1.4","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.9.9","@rollup/plugin-commonjs":"^25.0.8","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.7","@rollup/plugin-typescript":"^11.1.6","@swc/core":"^1.5.28","@types/node":"^20.14.2","@typescript-eslint/eslint-plugin":"^7.13.0","@typescript-eslint/parser":"^7.13.0",autoprefixer:"^10.4.19","esbuild-sass-plugin":"^3.3.1",eslint:"^8.57.0","eslint-import-resolver-typescript":"^3.6.1","eslint-plugin-import":"^2.29.1","eslint-plugin-jsdoc":"^48.2.9","eslint-plugin-lit":"^1.14.0","postcss-flexbugs-fixes":"^5.0.2",rimraf:"^5.0.7",rollup:"^4.18.0","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-postcss-lit":"^2.1.0","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.1","rollup-plugin-swc3":"^0.11.2",sass:"^1.77.5","ts-lit-plugin":"^2.0.2",tslib:"^2.6.3",typescript:"^5.4.5"};var customElements="dist/custom-elements.json";var files=["dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","component","lit-element","svg","vector","player"];var publishConfig={access:"public"};var engines={node:">= 8.17.0"};var funding={type:"paypal",url:"https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"};var pkg = {name:name,version:version,description:description,exports:exports$1,main:main,unpkg:unpkg,module:module$1,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,customElements:customElements,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
353
-
354
354
  function _ts_decorate(decorators, target, key, desc) {
355
355
  var c = arguments.length, r = c < 3 ? target : desc, d;
356
356
  if (typeof Reflect === "object" && typeof undefined === "function") r = undefined(decorators, target, key, desc);
@@ -361,11 +361,14 @@ class DotLottiePlayer extends lit.LitElement {
361
361
  _getOptions() {
362
362
  const preserveAspectRatio = this.preserveAspectRatio ?? (this.objectfit && aspectRatio(this.objectfit)), currentAnimationSettings = this.multiAnimationSettings?.length ? this.multiAnimationSettings?.[this._currentAnimation] : undefined, currentAnimationManifest = this._manifest.animations?.[this._currentAnimation];
363
363
  let loop = !!this.loop;
364
+ if (currentAnimationManifest.loop !== undefined && this.loop === undefined) {
365
+ loop = !!currentAnimationManifest.loop;
366
+ }
364
367
  if (currentAnimationSettings?.loop !== undefined) {
365
368
  loop = !!currentAnimationSettings.loop;
366
369
  }
367
370
  let autoplay = !!this.autoplay;
368
- if (currentAnimationManifest.autoplay !== undefined) {
371
+ if (currentAnimationManifest.autoplay !== undefined && this.autoplay === undefined) {
369
372
  autoplay = !!currentAnimationManifest.autoplay;
370
373
  }
371
374
  if (currentAnimationSettings?.autoplay !== undefined) {
@@ -595,7 +598,7 @@ class DotLottiePlayer extends lit.LitElement {
595
598
  return;
596
599
  }
597
600
  const { currentFrame, totalFrames } = this._lottieInstance;
598
- this._seeker = Math.floor(currentFrame / totalFrames * 100);
601
+ this._seeker = Math.round(currentFrame / totalFrames * 100);
599
602
  this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Frame, {
600
603
  detail: {
601
604
  frame: currentFrame,
@@ -617,7 +620,7 @@ class DotLottiePlayer extends lit.LitElement {
617
620
  }
618
621
  }
619
622
  const { currentFrame, totalFrames } = this._lottieInstance;
620
- this._seeker = Math.floor(currentFrame / totalFrames * 100);
623
+ this._seeker = Math.round(currentFrame / totalFrames * 100);
621
624
  this.currentState = exports.PlayerState.Completed;
622
625
  this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Complete, {
623
626
  detail: {
@@ -693,7 +696,7 @@ class DotLottiePlayer extends lit.LitElement {
693
696
  if (!(target instanceof HTMLInputElement) || !this._lottieInstance || isNaN(Number(target.value))) {
694
697
  return;
695
698
  }
696
- this.seek(Math.floor(Number(target.value) / 100 * this._lottieInstance.totalFrames));
699
+ this.seek(Math.round(Number(target.value) / 100 * this._lottieInstance.totalFrames));
697
700
  setTimeout(()=>{
698
701
  if (target.parentElement instanceof HTMLFormElement) {
699
702
  target.parentElement.reset();
@@ -810,7 +813,7 @@ class DotLottiePlayer extends lit.LitElement {
810
813
  if (!matches) {
811
814
  return;
812
815
  }
813
- const frame = Math.floor(matches[2] === '%' ? this._lottieInstance.totalFrames * Number(matches[1]) / 100 : Number(matches[1]));
816
+ const frame = Math.round(matches[2] === '%' ? this._lottieInstance.totalFrames * Number(matches[1]) / 100 : Number(matches[1]));
814
817
  this._seeker = frame;
815
818
  if (this.currentState === exports.PlayerState.Playing || this.currentState === exports.PlayerState.Frozen && this._playerState.prev === exports.PlayerState.Playing) {
816
819
  this._lottieInstance.goToAndPlay(frame, true);
package/dist/esm/index.js CHANGED
@@ -3,6 +3,8 @@ import { property, query, state, customElement } from 'lit/decorators.js';
3
3
  import Lottie from 'lottie-web';
4
4
  import { strToU8, zip, strFromU8, unzip as unzip$1 } from 'fflate';
5
5
 
6
+ var name="@aarsteinmedia/dotlottie-player";var version="2.5.15";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports={".":{"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="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"};var bugs="https://github.com/aarsteinmedia/dotlottie-player/issues";var author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"};var license="GPL-2.0-or-later";var scripts={build:"rimraf ./dist && rollup -c","build:types":"rimraf ./types && tsc","build:cem":"npx cem analyze --config cem.config.mjs",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"rollup -c -w --environment NODE_ENV:development",lint:"tsc && eslint . --ext .ts","lint:fix":"eslint . --ext .ts --fix"};var dependencies={fflate:"^0.8.2",lit:"^3.1.4","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.9.9","@rollup/plugin-commonjs":"^25.0.8","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.7","@rollup/plugin-typescript":"^11.1.6","@swc/core":"^1.7.4","@types/node":"^22.0.2","@typescript-eslint/eslint-plugin":"^8.0.0","@typescript-eslint/parser":"^8.0.0",autoprefixer:"^10.4.19","esbuild-sass-plugin":"^3.3.1",eslint:"^8.57.0","eslint-import-resolver-typescript":"^3.6.1","eslint-plugin-import":"^2.29.1","eslint-plugin-jsdoc":"^48.10.2","eslint-plugin-lit":"^1.14.0","postcss-flexbugs-fixes":"^5.0.2",rimraf:"^6.0.1",rollup:"^4.19.2","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-postcss-lit":"^2.1.0","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.1","rollup-plugin-swc3":"^0.11.2",sass:"^1.77.8","ts-lit-plugin":"^2.0.2",tslib:"^2.6.3",typescript:"^5.5.4"};var customElements="dist/custom-elements.json";var files=["dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","component","lit-element","svg","vector","player"];var publishConfig={access:"public"};var engines={node:">= 8.17.0"};var funding={type:"paypal",url:"https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"};var pkg = {name:name,version:version,description:description,exports:exports,main:main,unpkg:unpkg,module:module,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,customElements:customElements,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
7
+
6
8
  var PlayerState;
7
9
  (function(PlayerState) {
8
10
  PlayerState["Completed"] = "completed";
@@ -81,7 +83,7 @@ const addExt = (ext, str)=>{
81
83
  if (!asset.p || !isImage(asset) && !isAudio(asset)) {
82
84
  continue;
83
85
  }
84
- const { p: file, u: path } = asset, assetId = asset.id || useId(), isEncoded = file.startsWith('data:'), ext = isEncoded ? getExtFromB64(file) : getExt(file), dataURL = isEncoded ? file : await fileToBase64(path ? path.endsWith('/') && `${path}${file}` || `${path}/${file}` : file);
86
+ 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);
85
87
  asset.p = `${assetId}.${ext}`;
86
88
  asset.u = '';
87
89
  asset.e = 1;
@@ -342,13 +344,11 @@ const addExt = (ext, str)=>{
342
344
  return unzipped;
343
345
  }, useId = (prefix)=>{
344
346
  const s4 = ()=>((1 + Math.random()) * 0x10000 | 0).toString(16).substring(1);
345
- return `${prefix ?? `:${s4()}`}-${s4()}`;
347
+ return `${prefix ?? `:${s4()}`}_${s4()}`;
346
348
  };
347
349
 
348
350
  var css_248z = css`*{box-sizing:border-box}:host{--lottie-player-toolbar-height:35px;--lottie-player-toolbar-background-color:#FFF;--lottie-player-toolbar-icon-color:#000;--lottie-player-toolbar-icon-hover-color:#000;--lottie-player-toolbar-icon-active-color:#4285f4;--lottie-player-seeker-track-color:rgba(0, 0, 0, 0.2);--lottie-player-seeker-thumb-color:#4285f4;--lottie-player-seeker-display:block;display:block;width:100%;height:100%}@media (prefers-color-scheme:dark){:host{--lottie-player-toolbar-background-color:#000;--lottie-player-toolbar-icon-color:#FFF;--lottie-player-toolbar-icon-hover-color:#FFF;--lottie-player-seeker-track-color:rgba(255, 255, 255, 0.6)}}.main{display:flex;flex-direction:column;height:100%;width:100%;margin:0;padding:0}.animation{width:100%;height:100%;display:flex}[data-controls=true] .animation{height:calc(100% - 35px)}.animation-container{position:relative}.popover{position:absolute;right:5px;bottom:40px;background-color:var(--lottie-player-toolbar-background-color);border-radius:5px;padding:10px 15px;border:solid 2px var(--lottie-player-toolbar-icon-color);animation:fadeIn .2s ease-in-out}.popover::before{content:"";right:10px;border:7px solid transparent;border-top-color:transparent;margin-right:-7px;height:0;width:0;position:absolute;pointer-events:none;top:100%;border-top-color:var(--lottie-player-toolbar-icon-color)}.toolbar{display:flex;align-items:center;justify-items:center;background:var(--lottie-player-toolbar-background-color);margin:0;height:35px;padding:5px;border-radius:5px;gap:5px}.toolbar.has-error{pointer-events:none;opacity:.5}.toolbar button{cursor:pointer;fill:var(--lottie-player-toolbar-icon-color);color:var(--lottie-player-toolbar-icon-color);display:flex;background:0 0;border:0;padding:0;outline:0;height:100%;margin:0;align-items:center;gap:5px;opacity:.9}.toolbar button:hover{opacity:1}.toolbar button[data-active=true]{opacity:1;fill:var(--lottie-player-toolbar-icon-active-color)}.toolbar button:disabled{opacity:.5}.toolbar button:focus{outline:0}.toolbar button svg{pointer-events:none}.toolbar button svg>*{fill:inherit}.toolbar button.disabled svg{display:none}.progress-container{position:relative;width:100%}.progress-container.simple{margin-right:12px}.seeker{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0}.seeker::-webkit-slider-runnable-track,.seeker::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;outline:0}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0}.seeker{width:100%;height:20px;border-radius:3px;border:0;cursor:pointer;background-color:transparent;display:var(--lottie-player-seeker-display);color:var(--lottie-player-seeker-thumb-color);margin:0;padding:7.5px 0;position:relative;z-index:1}progress{position:absolute;width:100%;height:5px;border-radius:3px;border:0;top:0;left:0;margin:7.5px 0;background-color:var(--lottie-player-seeker-track-color);pointer-events:none}::-moz-progress-bar{background-color:var(--lottie-player-seeker-thumb-color)}::-webkit-progress-inner-element{border-radius:3px;overflow:hidden}::-webkit-slider-runnable-track{background-color:transparent}::-webkit-progress-value{background-color:var(--lottie-player-seeker-thumb-color)}.seeker::-webkit-slider-thumb{height:15px;width:15px;border-radius:50%;border:0;background-color:var(--lottie-player-seeker-thumb-color);cursor:pointer;-webkit-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:focus::-webkit-slider-thumb,.seeker:hover::-webkit-slider-thumb{transform:scale(1)}.seeker::-moz-range-progress{background-color:var(--lottie-player-seeker-thumb-color);height:5px;border-radius:3px}.seeker::-moz-range-thumb{height:15px;width:15px;border-radius:50%;background-color:var(--lottie-player-seeker-thumb-color);border:0;cursor:pointer;-moz-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:focus::-moz-range-thumb,.seeker:hover::-moz-range-thumb{transform:scale(1)}.seeker::-ms-track{width:100%;height:5px;cursor:pointer;background:0 0;border-color:transparent;color:transparent}.seeker::-ms-fill-upper{background:var(--lottie-player-seeker-track-color);border-radius:3px}.seeker::-ms-fill-lower{background-color:var(--lottie-player-seeker-thumb-color);border-radius:3px}.seeker::-ms-thumb{border:0;height:15px;width:15px;border-radius:50%;background:var(--lottie-player-seeker-thumb-color);cursor:pointer;-ms-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:hover::-ms-thumb{transform:scale(1)}.seeker:focus::-ms-thumb{transform:scale(1)}.seeker:focus::-ms-fill-lower,.seeker:focus::-ms-fill-upper{background:var(--lottie-player-seeker-track-color)}.error{display:flex;margin:auto;justify-content:center;height:100%;align-items:center}.error svg{width:100%;height:auto}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}`;
349
351
 
350
- var name="@aarsteinmedia/dotlottie-player";var version="2.5.12";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports={".":{"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="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"};var bugs="https://github.com/aarsteinmedia/dotlottie-player/issues";var author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"};var license="GPL-2.0-or-later";var scripts={build:"rimraf ./dist && rollup -c","build:types":"rimraf ./types && tsc","build:cem":"npx cem analyze --config cem.config.mjs",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"rollup -c -w --environment NODE_ENV:development",lint:"tsc && eslint . --ext .ts","lint:fix":"eslint . --ext .ts --fix"};var dependencies={fflate:"^0.8.2",lit:"^3.1.4","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.9.9","@rollup/plugin-commonjs":"^25.0.8","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.7","@rollup/plugin-typescript":"^11.1.6","@swc/core":"^1.5.28","@types/node":"^20.14.2","@typescript-eslint/eslint-plugin":"^7.13.0","@typescript-eslint/parser":"^7.13.0",autoprefixer:"^10.4.19","esbuild-sass-plugin":"^3.3.1",eslint:"^8.57.0","eslint-import-resolver-typescript":"^3.6.1","eslint-plugin-import":"^2.29.1","eslint-plugin-jsdoc":"^48.2.9","eslint-plugin-lit":"^1.14.0","postcss-flexbugs-fixes":"^5.0.2",rimraf:"^5.0.7",rollup:"^4.18.0","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-postcss-lit":"^2.1.0","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.1","rollup-plugin-swc3":"^0.11.2",sass:"^1.77.5","ts-lit-plugin":"^2.0.2",tslib:"^2.6.3",typescript:"^5.4.5"};var customElements="dist/custom-elements.json";var files=["dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","component","lit-element","svg","vector","player"];var publishConfig={access:"public"};var engines={node:">= 8.17.0"};var funding={type:"paypal",url:"https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"};var pkg = {name:name,version:version,description:description,exports:exports,main:main,unpkg:unpkg,module:module,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,customElements:customElements,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
351
-
352
352
  function _ts_decorate(decorators, target, key, desc) {
353
353
  var c = arguments.length, r = c < 3 ? target : desc, d;
354
354
  if (typeof Reflect === "object" && typeof undefined === "function") r = undefined(decorators, target, key, desc);
@@ -359,11 +359,14 @@ class DotLottiePlayer extends LitElement {
359
359
  _getOptions() {
360
360
  const preserveAspectRatio = this.preserveAspectRatio ?? (this.objectfit && aspectRatio(this.objectfit)), currentAnimationSettings = this.multiAnimationSettings?.length ? this.multiAnimationSettings?.[this._currentAnimation] : undefined, currentAnimationManifest = this._manifest.animations?.[this._currentAnimation];
361
361
  let loop = !!this.loop;
362
+ if (currentAnimationManifest.loop !== undefined && this.loop === undefined) {
363
+ loop = !!currentAnimationManifest.loop;
364
+ }
362
365
  if (currentAnimationSettings?.loop !== undefined) {
363
366
  loop = !!currentAnimationSettings.loop;
364
367
  }
365
368
  let autoplay = !!this.autoplay;
366
- if (currentAnimationManifest.autoplay !== undefined) {
369
+ if (currentAnimationManifest.autoplay !== undefined && this.autoplay === undefined) {
367
370
  autoplay = !!currentAnimationManifest.autoplay;
368
371
  }
369
372
  if (currentAnimationSettings?.autoplay !== undefined) {
@@ -593,7 +596,7 @@ class DotLottiePlayer extends LitElement {
593
596
  return;
594
597
  }
595
598
  const { currentFrame, totalFrames } = this._lottieInstance;
596
- this._seeker = Math.floor(currentFrame / totalFrames * 100);
599
+ this._seeker = Math.round(currentFrame / totalFrames * 100);
597
600
  this.dispatchEvent(new CustomEvent(PlayerEvents.Frame, {
598
601
  detail: {
599
602
  frame: currentFrame,
@@ -615,7 +618,7 @@ class DotLottiePlayer extends LitElement {
615
618
  }
616
619
  }
617
620
  const { currentFrame, totalFrames } = this._lottieInstance;
618
- this._seeker = Math.floor(currentFrame / totalFrames * 100);
621
+ this._seeker = Math.round(currentFrame / totalFrames * 100);
619
622
  this.currentState = PlayerState.Completed;
620
623
  this.dispatchEvent(new CustomEvent(PlayerEvents.Complete, {
621
624
  detail: {
@@ -691,7 +694,7 @@ class DotLottiePlayer extends LitElement {
691
694
  if (!(target instanceof HTMLInputElement) || !this._lottieInstance || isNaN(Number(target.value))) {
692
695
  return;
693
696
  }
694
- this.seek(Math.floor(Number(target.value) / 100 * this._lottieInstance.totalFrames));
697
+ this.seek(Math.round(Number(target.value) / 100 * this._lottieInstance.totalFrames));
695
698
  setTimeout(()=>{
696
699
  if (target.parentElement instanceof HTMLFormElement) {
697
700
  target.parentElement.reset();
@@ -808,7 +811,7 @@ class DotLottiePlayer extends LitElement {
808
811
  if (!matches) {
809
812
  return;
810
813
  }
811
- const frame = Math.floor(matches[2] === '%' ? this._lottieInstance.totalFrames * Number(matches[1]) / 100 : Number(matches[1]));
814
+ const frame = Math.round(matches[2] === '%' ? this._lottieInstance.totalFrames * Number(matches[1]) / 100 : Number(matches[1]));
812
815
  this._seeker = frame;
813
816
  if (this.currentState === PlayerState.Playing || this.currentState === PlayerState.Frozen && this._playerState.prev === PlayerState.Playing) {
814
817
  this._lottieInstance.goToAndPlay(frame, true);