@aarsteinmedia/dotlottie-player 2.3.0 → 2.3.1

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 (6) hide show
  1. package/dist/cjs/index.js +31 -31
  2. package/dist/custom-elements.json +4 -4
  3. package/dist/esm/index.js +31 -31
  4. package/dist/index.d.ts +4 -4
  5. package/dist/index.js +2 -2
  6. package/package.json +3 -3
package/dist/cjs/index.js CHANGED
@@ -61,12 +61,12 @@ const addExt = (ext, str)=>{
61
61
  default:
62
62
  return 'xMidYMid meet';
63
63
  }
64
- }, base64ToU8 = (str)=>fflate.strToU8(isServer() ? Buffer.from(parseBase64(str), 'base64').toString('binary') : atob(parseBase64(str)), true), createDotLottie = async (animations, manifest, filename, triggerDownload = true)=>{
64
+ }, base64ToU8 = (str)=>fflate.strToU8(isServer() ? Buffer.from(parseBase64(str), 'base64').toString('binary') : atob(parseBase64(str)), true), createDotLottie = async ({ animations, manifest, fileName, shouldDownload = true })=>{
65
65
  try {
66
66
  if (!animations?.length || !manifest) {
67
67
  throw new Error(`Missing or malformed required parameter(s):\n ${!animations?.length ? '- animations\n' : ''} ${!manifest ? '- manifest \n' : ''}`);
68
68
  }
69
- const name = addExt('lottie', filename) || `${useId()}.lottie`, dotlottie = {
69
+ const name = addExt('lottie', fileName) || `${useId()}.lottie`, dotlottie = {
70
70
  'manifest.json': [
71
71
  fflate.strToU8(JSON.stringify(manifest), true),
72
72
  {
@@ -98,7 +98,7 @@ const addExt = (ext, str)=>{
98
98
  ];
99
99
  }
100
100
  const buffer = await getArrayBuffer(dotlottie);
101
- return triggerDownload ? download(buffer, {
101
+ return shouldDownload ? download(buffer, {
102
102
  name,
103
103
  mimeType: 'application/zip'
104
104
  }) : buffer;
@@ -148,7 +148,7 @@ const addExt = (ext, str)=>{
148
148
  ];
149
149
  return {
150
150
  animations,
151
- manifest: null,
151
+ manifest: undefined,
152
152
  isDotLottie: false
153
153
  };
154
154
  }
@@ -166,7 +166,7 @@ const addExt = (ext, str)=>{
166
166
  animations: [
167
167
  lottie
168
168
  ],
169
- manifest: null,
169
+ manifest: undefined,
170
170
  isDotLottie: false
171
171
  };
172
172
  }
@@ -177,7 +177,7 @@ const addExt = (ext, str)=>{
177
177
  animations: [
178
178
  lottie
179
179
  ],
180
- manifest: null,
180
+ manifest: undefined,
181
181
  isDotLottie: false
182
182
  };
183
183
  } catch (e) {
@@ -193,8 +193,8 @@ const addExt = (ext, str)=>{
193
193
  } catch (err) {
194
194
  console.error(`❌ ${handleErrors(err).message}`);
195
195
  return {
196
- animations: null,
197
- manifest: null,
196
+ animations: undefined,
197
+ manifest: undefined,
198
198
  isDotLottie: false
199
199
  };
200
200
  }
@@ -310,7 +310,7 @@ const addExt = (ext, str)=>{
310
310
  return `${prefix ?? `:${s4()}`}-${s4()}`;
311
311
  };
312
312
 
313
- var name="@aarsteinmedia/dotlottie-player";var version="2.3.0";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.1",lit:"^2.8.0","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.6.9","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.5","@swc/core":"^1.3.102","@types/node":"^20.10.6","@typescript-eslint/eslint-plugin":"^5.62.0","@typescript-eslint/parser":"^5.62.0",autoprefixer:"^10.4.16","esbuild-sass-plugin":"^2.16.1",eslint:"^8.56.0","eslint-plugin-lit":"^1.11.0","postcss-flexbugs-fixes":"^5.0.2",rimraf:"^5.0.5",rollup:"^3.29.4","rollup-plugin-dts":"^6.1.0","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-postcss-lit":"^2.1.0","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.0","rollup-plugin-swc3":"^0.9.1",sass:"^1.69.6","ts-lit-plugin":"^1.2.1",typescript:"^5.3.3"};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};
313
+ var name="@aarsteinmedia/dotlottie-player";var version="2.3.1";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.1",lit:"^2.8.0","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.6.9","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.5","@swc/core":"^1.3.102","@types/node":"^20.10.7","@typescript-eslint/eslint-plugin":"^5.62.0","@typescript-eslint/parser":"^5.62.0",autoprefixer:"^10.4.16","esbuild-sass-plugin":"^2.16.1",eslint:"^8.56.0","eslint-plugin-lit":"^1.11.0","postcss-flexbugs-fixes":"^5.0.2",rimraf:"^5.0.5",rollup:"^3.29.4","rollup-plugin-dts":"^6.1.0","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-postcss-lit":"^2.1.0","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.0","rollup-plugin-swc3":"^0.9.1",sass:"^1.69.7","ts-lit-plugin":"^1.2.1",typescript:"^5.3.3"};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};
314
314
 
315
315
  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}}`;
316
316
 
@@ -509,16 +509,12 @@ class DotLottiePlayer extends lit.LitElement {
509
509
  ];
510
510
  return mandatory.every((field)=>Object.prototype.hasOwnProperty.call(json, field));
511
511
  }
512
- async addAnimation(configs, fileName, triggerDownload = true) {
513
- const { animations: _animations, manifest: _manifest } = await getAnimationData(this.src);
512
+ async addAnimation(configs, fileName, shouldDownload = true) {
513
+ const { animations = [], manifest = {
514
+ animations: []
515
+ } } = await getAnimationData(this.src);
514
516
  try {
515
- const oldManifest = _manifest || {
516
- animations: []
517
- };
518
- let manifest = {
519
- ...oldManifest,
520
- generator: pkg.name
521
- }, animations = _animations || [];
517
+ manifest.generator = pkg.name;
522
518
  for (const config of configs){
523
519
  const { url } = config, { animations: animationsToAdd } = await getAnimationData(url);
524
520
  if (!animationsToAdd) {
@@ -527,19 +523,18 @@ class DotLottiePlayer extends lit.LitElement {
527
523
  if (manifest.animations.some(({ id })=>id === config.id)) {
528
524
  throw new Error('Duplicate id for animation');
529
525
  }
530
- manifest = {
531
- ...manifest,
532
- animations: [
533
- ...manifest.animations,
534
- config
535
- ]
536
- };
537
- animations = [
538
- ...animations,
539
- ...animationsToAdd
526
+ manifest.animations = [
527
+ ...manifest.animations,
528
+ config
540
529
  ];
530
+ animations?.push(...animationsToAdd);
541
531
  }
542
- return createDotLottie(animations, manifest, fileName, triggerDownload);
532
+ return createDotLottie({
533
+ animations,
534
+ manifest,
535
+ fileName,
536
+ shouldDownload
537
+ });
543
538
  } catch (err) {
544
539
  console.error(handleErrors(err).message);
545
540
  }
@@ -742,13 +737,18 @@ class DotLottiePlayer extends lit.LitElement {
742
737
  this._currentAnimation--;
743
738
  this._switchInstance(true);
744
739
  }
745
- async convert({ typeCheck, manifest, animations, fileName, download = true }) {
740
+ async convert({ typeCheck, manifest, animations, fileName, shouldDownload = true }) {
746
741
  if (typeCheck || this._isDotLottie) return;
747
742
  const oldManifest = manifest || this._manifest, newManifest = {
748
743
  ...oldManifest,
749
744
  generator: pkg.name
750
745
  };
751
- return createDotLottie(animations || (await getAnimationData(this.src)).animations, newManifest, `${getFilename(fileName || this.src)}.lottie`, download);
746
+ return createDotLottie({
747
+ animations: animations || (await getAnimationData(this.src)).animations,
748
+ manifest: newManifest,
749
+ fileName: `${getFilename(fileName || this.src)}.lottie`,
750
+ shouldDownload
751
+ });
752
752
  }
753
753
  static get styles() {
754
754
  return css_248z;
package/dist/custom-elements.json CHANGED
@@ -466,9 +466,9 @@
466
466
  }
467
467
  },
468
468
  {
469
- "name": "triggerDownload",
469
+ "name": "shouldDownload",
470
470
  "default": "true",
471
- "description": "Whether to trigger a download in the browser.\nIf set to false the function returns an ArrayBuffer. Defaults to true.\n\nTODO: Rewrite this function so we don't create so many redundant copies of complex objects",
471
+ "description": "Whether to trigger a download in the browser.\nIf set to false the function returns an ArrayBuffer. Defaults to true.",
472
472
  "type": {
473
473
  "text": "boolean"
474
474
  }
@@ -687,9 +687,9 @@
687
687
  "privacy": "public",
688
688
  "parameters": [
689
689
  {
690
- "name": "{\n typeCheck,\n manifest,\n animations,\n fileName,\n download = true\n }",
690
+ "name": "{\n typeCheck,\n manifest,\n animations,\n fileName,\n shouldDownload = true\n }",
691
691
  "type": {
692
- "text": "{\n /** External type safety */\n typeCheck?: boolean,\n\n /** Externally added manifest */\n manifest?: LottieManifest,\n\n /** Externally added animations */\n animations?: LottieJSON[],\n\n fileName?: string,\n\n /** Whether to trigger a download in the browser. Defaults to true */\n download?: boolean\n }"
692
+ "text": "{\n /** External type safety */\n typeCheck?: boolean,\n\n /** Externally added manifest */\n manifest?: LottieManifest,\n\n /** Externally added animations */\n animations?: LottieJSON[],\n\n fileName?: string,\n\n /** Whether to trigger a download in the browser. Defaults to true */\n shouldDownload?: boolean\n }"
693
693
  }
694
694
  }
695
695
  ]
package/dist/esm/index.js CHANGED
@@ -59,12 +59,12 @@ const addExt = (ext, str)=>{
59
59
  default:
60
60
  return 'xMidYMid meet';
61
61
  }
62
- }, base64ToU8 = (str)=>strToU8(isServer() ? Buffer.from(parseBase64(str), 'base64').toString('binary') : atob(parseBase64(str)), true), createDotLottie = async (animations, manifest, filename, triggerDownload = true)=>{
62
+ }, base64ToU8 = (str)=>strToU8(isServer() ? Buffer.from(parseBase64(str), 'base64').toString('binary') : atob(parseBase64(str)), true), createDotLottie = async ({ animations, manifest, fileName, shouldDownload = true })=>{
63
63
  try {
64
64
  if (!animations?.length || !manifest) {
65
65
  throw new Error(`Missing or malformed required parameter(s):\n ${!animations?.length ? '- animations\n' : ''} ${!manifest ? '- manifest \n' : ''}`);
66
66
  }
67
- const name = addExt('lottie', filename) || `${useId()}.lottie`, dotlottie = {
67
+ const name = addExt('lottie', fileName) || `${useId()}.lottie`, dotlottie = {
68
68
  'manifest.json': [
69
69
  strToU8(JSON.stringify(manifest), true),
70
70
  {
@@ -96,7 +96,7 @@ const addExt = (ext, str)=>{
96
96
  ];
97
97
  }
98
98
  const buffer = await getArrayBuffer(dotlottie);
99
- return triggerDownload ? download(buffer, {
99
+ return shouldDownload ? download(buffer, {
100
100
  name,
101
101
  mimeType: 'application/zip'
102
102
  }) : buffer;
@@ -146,7 +146,7 @@ const addExt = (ext, str)=>{
146
146
  ];
147
147
  return {
148
148
  animations,
149
- manifest: null,
149
+ manifest: undefined,
150
150
  isDotLottie: false
151
151
  };
152
152
  }
@@ -164,7 +164,7 @@ const addExt = (ext, str)=>{
164
164
  animations: [
165
165
  lottie
166
166
  ],
167
- manifest: null,
167
+ manifest: undefined,
168
168
  isDotLottie: false
169
169
  };
170
170
  }
@@ -175,7 +175,7 @@ const addExt = (ext, str)=>{
175
175
  animations: [
176
176
  lottie
177
177
  ],
178
- manifest: null,
178
+ manifest: undefined,
179
179
  isDotLottie: false
180
180
  };
181
181
  } catch (e) {
@@ -191,8 +191,8 @@ const addExt = (ext, str)=>{
191
191
  } catch (err) {
192
192
  console.error(`❌ ${handleErrors(err).message}`);
193
193
  return {
194
- animations: null,
195
- manifest: null,
194
+ animations: undefined,
195
+ manifest: undefined,
196
196
  isDotLottie: false
197
197
  };
198
198
  }
@@ -308,7 +308,7 @@ const addExt = (ext, str)=>{
308
308
  return `${prefix ?? `:${s4()}`}-${s4()}`;
309
309
  };
310
310
 
311
- var name="@aarsteinmedia/dotlottie-player";var version="2.3.0";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.1",lit:"^2.8.0","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.6.9","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.5","@swc/core":"^1.3.102","@types/node":"^20.10.6","@typescript-eslint/eslint-plugin":"^5.62.0","@typescript-eslint/parser":"^5.62.0",autoprefixer:"^10.4.16","esbuild-sass-plugin":"^2.16.1",eslint:"^8.56.0","eslint-plugin-lit":"^1.11.0","postcss-flexbugs-fixes":"^5.0.2",rimraf:"^5.0.5",rollup:"^3.29.4","rollup-plugin-dts":"^6.1.0","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-postcss-lit":"^2.1.0","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.0","rollup-plugin-swc3":"^0.9.1",sass:"^1.69.6","ts-lit-plugin":"^1.2.1",typescript:"^5.3.3"};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};
311
+ var name="@aarsteinmedia/dotlottie-player";var version="2.3.1";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.1",lit:"^2.8.0","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.6.9","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.5","@swc/core":"^1.3.102","@types/node":"^20.10.7","@typescript-eslint/eslint-plugin":"^5.62.0","@typescript-eslint/parser":"^5.62.0",autoprefixer:"^10.4.16","esbuild-sass-plugin":"^2.16.1",eslint:"^8.56.0","eslint-plugin-lit":"^1.11.0","postcss-flexbugs-fixes":"^5.0.2",rimraf:"^5.0.5",rollup:"^3.29.4","rollup-plugin-dts":"^6.1.0","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-postcss-lit":"^2.1.0","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.0","rollup-plugin-swc3":"^0.9.1",sass:"^1.69.7","ts-lit-plugin":"^1.2.1",typescript:"^5.3.3"};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};
312
312
 
313
313
  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}}`;
314
314
 
@@ -507,16 +507,12 @@ class DotLottiePlayer extends LitElement {
507
507
  ];
508
508
  return mandatory.every((field)=>Object.prototype.hasOwnProperty.call(json, field));
509
509
  }
510
- async addAnimation(configs, fileName, triggerDownload = true) {
511
- const { animations: _animations, manifest: _manifest } = await getAnimationData(this.src);
510
+ async addAnimation(configs, fileName, shouldDownload = true) {
511
+ const { animations = [], manifest = {
512
+ animations: []
513
+ } } = await getAnimationData(this.src);
512
514
  try {
513
- const oldManifest = _manifest || {
514
- animations: []
515
- };
516
- let manifest = {
517
- ...oldManifest,
518
- generator: pkg.name
519
- }, animations = _animations || [];
515
+ manifest.generator = pkg.name;
520
516
  for (const config of configs){
521
517
  const { url } = config, { animations: animationsToAdd } = await getAnimationData(url);
522
518
  if (!animationsToAdd) {
@@ -525,19 +521,18 @@ class DotLottiePlayer extends LitElement {
525
521
  if (manifest.animations.some(({ id })=>id === config.id)) {
526
522
  throw new Error('Duplicate id for animation');
527
523
  }
528
- manifest = {
529
- ...manifest,
530
- animations: [
531
- ...manifest.animations,
532
- config
533
- ]
534
- };
535
- animations = [
536
- ...animations,
537
- ...animationsToAdd
524
+ manifest.animations = [
525
+ ...manifest.animations,
526
+ config
538
527
  ];
528
+ animations?.push(...animationsToAdd);
539
529
  }
540
- return createDotLottie(animations, manifest, fileName, triggerDownload);
530
+ return createDotLottie({
531
+ animations,
532
+ manifest,
533
+ fileName,
534
+ shouldDownload
535
+ });
541
536
  } catch (err) {
542
537
  console.error(handleErrors(err).message);
543
538
  }
@@ -740,13 +735,18 @@ class DotLottiePlayer extends LitElement {
740
735
  this._currentAnimation--;
741
736
  this._switchInstance(true);
742
737
  }
743
- async convert({ typeCheck, manifest, animations, fileName, download = true }) {
738
+ async convert({ typeCheck, manifest, animations, fileName, shouldDownload = true }) {
744
739
  if (typeCheck || this._isDotLottie) return;
745
740
  const oldManifest = manifest || this._manifest, newManifest = {
746
741
  ...oldManifest,
747
742
  generator: pkg.name
748
743
  };
749
- return createDotLottie(animations || (await getAnimationData(this.src)).animations, newManifest, `${getFilename(fileName || this.src)}.lottie`, download);
744
+ return createDotLottie({
745
+ animations: animations || (await getAnimationData(this.src)).animations,
746
+ manifest: newManifest,
747
+ fileName: `${getFilename(fileName || this.src)}.lottie`,
748
+ shouldDownload
749
+ });
750
750
  }
751
751
  static get styles() {
752
752
  return css_248z;
package/dist/index.d.ts CHANGED
@@ -12,7 +12,7 @@ interface Shape {
12
12
  s: ShapeData;
13
13
  }
14
14
  interface ShapeData {
15
- a: 0 | 1;
15
+ a: BoolInt;
16
16
  k: number | number[];
17
17
  ix: number;
18
18
  }
@@ -181,7 +181,7 @@ declare class DotLottiePlayer extends LitElement {
181
181
  private _onVisibilityChange;
182
182
  private _handleSeekChange;
183
183
  private _isLottie;
184
- addAnimation(configs: AnimationConfig[], fileName?: string, triggerDownload?: boolean): Promise<void | ArrayBuffer>;
184
+ addAnimation(configs: AnimationConfig[], fileName?: string, shouldDownload?: boolean): Promise<void | ArrayBuffer>;
185
185
  getLottie(): AnimationItem | null;
186
186
  play(): void;
187
187
  pause(): void;
@@ -205,12 +205,12 @@ declare class DotLottiePlayer extends LitElement {
205
205
  private _switchInstance;
206
206
  next(): void;
207
207
  prev(): void;
208
- convert({ typeCheck, manifest, animations, fileName, download }: {
208
+ convert({ typeCheck, manifest, animations, fileName, shouldDownload }: {
209
209
  typeCheck?: boolean;
210
210
  manifest?: LottieManifest;
211
211
  animations?: LottieJSON[];
212
212
  fileName?: string;
213
- download?: boolean;
213
+ shouldDownload?: boolean;
214
214
  }): Promise<void | ArrayBuffer>;
215
215
  static get styles(): CSSResult;
216
216
  constructor();