@aarsteinmedia/dotlottie-player 2.2.0 → 2.2.2

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 +29 -11
  2. package/dist/custom-elements.json +31 -0
  3. package/dist/esm/index.js +29 -11
  4. package/dist/index.d.ts +4 -1
  5. package/dist/index.js +2 -2
  6. package/package.json +1 -1
package/dist/cjs/index.js CHANGED
@@ -299,7 +299,7 @@ const addExt = (ext, str)=>{
299
299
  };
300
300
 
301
301
  var name = "@aarsteinmedia/dotlottie-player";
302
- var version = "2.2.0";
302
+ var version = "2.2.2";
303
303
  var description = "Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";
304
304
  var exports$1 = {
305
305
  ".": {
@@ -430,7 +430,7 @@ function _ts_decorate(decorators, target, key, desc) {
430
430
  }
431
431
  class DotLottiePlayer extends lit.LitElement {
432
432
  _getOptions() {
433
- const preserveAspectRatio = this.preserveAspectRatio ?? (this.objectfit && aspectRatio(this.objectfit)), currentAnimation = this._manifest.animations[this._currentAnimation], loop = this.loop !== undefined ? !!this.loop : currentAnimation.loop !== undefined && !!currentAnimation.loop, autoplay = this.autoplay !== undefined ? !!this.autoplay : currentAnimation.autoplay !== undefined && !!currentAnimation.autoplay, initialSegment = !this.segment || this.segment.some((val)=>val < 0) ? undefined : this.segment.every((val)=>val > 0) ? [
433
+ const preserveAspectRatio = this.preserveAspectRatio ?? (this.objectfit && aspectRatio(this.objectfit)), currentAnimationSettings = this.multiAnimationSettings?.[this._currentAnimation], currentAnimationManifest = this._manifest.animations?.[this._currentAnimation], loop = currentAnimationSettings?.loop !== undefined ? !!currentAnimationSettings.loop : this.loop !== undefined ? !!this.loop : currentAnimationManifest.loop !== undefined && !!currentAnimationManifest.loop, autoplay = currentAnimationSettings?.autoplay !== undefined ? !!currentAnimationSettings.autoplay : this.autoplay !== undefined ? !!this.autoplay : currentAnimationManifest.autoplay !== undefined && !!currentAnimationManifest.autoplay, initialSegment = !this.segment || this.segment.some((val)=>val < 0) ? undefined : this.segment.every((val)=>val > 0) ? [
434
434
  this.segment[0] - 1,
435
435
  this.segment[1] - 1
436
436
  ] : this.segment, options = {
@@ -501,8 +501,9 @@ class DotLottiePlayer extends lit.LitElement {
501
501
  return;
502
502
  }
503
503
  this._addEventListeners();
504
- this.setSpeed(this.speed);
505
- this.setDirection(this.direction ?? 1);
504
+ 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;
505
+ this.setSpeed(speed);
506
+ this.setDirection(direction);
506
507
  this.setSubframe(!!this.subframe);
507
508
  if (this.autoplay) {
508
509
  if (this.direction === -1) this.seek('99%');
@@ -537,9 +538,9 @@ class DotLottiePlayer extends lit.LitElement {
537
538
  if (!this._lottieInstance) {
538
539
  return;
539
540
  }
540
- const { firstFrame, totalFrames, playDirection } = this._lottieInstance;
541
+ const { firstFrame, totalFrames, playDirection } = this._lottieInstance, isBounce = (this.multiAnimationSettings?.[this._currentAnimation]?.mode === exports.PlayMode.Bounce) ?? this.mode === exports.PlayMode.Bounce;
541
542
  if (this.count) {
542
- this.mode === exports.PlayMode.Bounce ? this._playerState.count += 1 : this._playerState.count += 0.5;
543
+ isBounce ? this._playerState.count += 1 : this._playerState.count += 0.5;
543
544
  if (this._playerState.count >= this.count) {
544
545
  this.setLooping(false);
545
546
  this.currentState = exports.PlayerState.Completed;
@@ -548,7 +549,7 @@ class DotLottiePlayer extends lit.LitElement {
548
549
  }
549
550
  }
550
551
  this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Loop));
551
- if (this.mode === exports.PlayMode.Bounce) {
552
+ if (isBounce) {
552
553
  this._lottieInstance?.goToAndStop(playDirection === -1 ? firstFrame : totalFrames * 0.99, true);
553
554
  this._lottieInstance?.setDirection(playDirection * -1);
554
555
  return setTimeout(()=>{
@@ -760,6 +761,11 @@ class DotLottiePlayer extends lit.LitElement {
760
761
  this._lottieInstance.setLoop(value);
761
762
  }
762
763
  }
764
+ setMultiAnimationSettings(settings) {
765
+ if (this._lottieInstance) {
766
+ this.multiAnimationSettings = settings;
767
+ }
768
+ }
763
769
  togglePlay() {
764
770
  if (!this._lottieInstance) return;
765
771
  const { currentFrame, playDirection, totalFrames } = this._lottieInstance;
@@ -768,7 +774,7 @@ class DotLottiePlayer extends lit.LitElement {
768
774
  }
769
775
  if (this.currentState === exports.PlayerState.Completed) {
770
776
  this.currentState = exports.PlayerState.Playing;
771
- if (this.mode === exports.PlayMode.Bounce) {
777
+ if ((this.multiAnimationSettings?.[this._currentAnimation]?.mode === exports.PlayMode.Bounce) ?? this.mode === exports.PlayMode.Bounce) {
772
778
  this.setDirection(playDirection * -1);
773
779
  return this._lottieInstance.goToAndPlay(currentFrame, true);
774
780
  }
@@ -783,7 +789,14 @@ class DotLottiePlayer extends lit.LitElement {
783
789
  this.setLooping(!this.loop);
784
790
  }
785
791
  toggleBoomerang() {
786
- if (this.mode === exports.PlayMode.Normal) {
792
+ const curr = this.multiAnimationSettings?.[this._currentAnimation];
793
+ if (curr?.mode !== undefined) {
794
+ if (curr.mode === exports.PlayMode.Normal) {
795
+ curr.mode = exports.PlayMode.Bounce;
796
+ } else {
797
+ curr.mode = exports.PlayMode.Normal;
798
+ }
799
+ } else if (this.mode === exports.PlayMode.Normal) {
787
800
  this.mode = exports.PlayMode.Bounce;
788
801
  } else {
789
802
  this.mode = exports.PlayMode.Normal;
@@ -806,7 +819,7 @@ class DotLottiePlayer extends lit.LitElement {
806
819
  animationData: this._animations[this._currentAnimation]
807
820
  });
808
821
  this._addEventListeners();
809
- if (this.autoplay) {
822
+ if (this.multiAnimationSettings?.[this._currentAnimation]?.autoplay ?? this.autoplay) {
810
823
  this._lottieInstance?.goToAndPlay(0, true);
811
824
  this.currentState = exports.PlayerState.Playing;
812
825
  } else {
@@ -867,7 +880,7 @@ class DotLottiePlayer extends lit.LitElement {
867
880
  }
868
881
  renderControls() {
869
882
  const isPlaying = this.currentState === exports.PlayerState.Playing, isPaused = this.currentState === exports.PlayerState.Paused, isStopped = this.currentState === exports.PlayerState.Stopped, isError = this.currentState === exports.PlayerState.Error;
870
- return lit.html`<div class="${`lottie-controls toolbar ${isError ? 'has-error' : ''}`}" aria-label="Lottie Animation controls"><button @click="${this.togglePlay}" data-active="${isPlaying || isPaused}" tabindex="0" aria-label="Toggle Play/Pause">${isPlaying ? lit.html`<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z"/></svg>` : lit.html`<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z"/></svg>`}</button> <button @click="${this.stop}" data-active="${isStopped}" tabindex="0" aria-label="Stop"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M6 6h12v12H6V6z"/></svg></button> ${this._animations?.length > 1 ? lit.html`${this._currentAnimation > 0 ? lit.html`<button @click="${this.prev}" tabindex="0" aria-label="Previous animation"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.9 18.2 8.1 12l9.8-6.2v12.4zm-10.3 0H6.1V5.8h1.5v12.4z"/></svg></button>` : lit.nothing} ${this._currentAnimation + 1 < this._animations?.length ? lit.html`<button @click="${this.next}" tabindex="0" aria-label="Next animation"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m6.1 5.8 9.8 6.2-9.8 6.2V5.8zM16.4 5.8h1.5v12.4h-1.5z"/></svg></button>` : lit.nothing}` : lit.nothing}<form class="progress-container${this.simple ? ' simple' : ''}"><input class="seeker" type="range" min="0" max="100" step="1" value="${this._seeker}" @change="${this._handleSeekChange}" @mousedown="${this._freeze}" aria-valuemin="0" aria-valuemax="100" role="slider" aria-valuenow="${this._seeker}" tabindex="0" aria-label="Slider for search"><progress max="100" value="${this._seeker}"></progress></form>${this.simple ? lit.nothing : lit.html`<button @click="${this.toggleLooping}" data-active="${this.loop ?? lit.nothing}" tabindex="0" aria-label="Toggle looping"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"/></svg></button> <button @click="${this.toggleBoomerang}" data-active="${this.mode === exports.PlayMode.Bounce}" aria-label="Toggle boomerang" tabindex="0"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m11.8 13.2-.3.3c-.5.5-1.1 1.1-1.7 1.5-.5.4-1 .6-1.5.8-.5.2-1.1.3-1.6.3s-1-.1-1.5-.3c-.6-.2-1-.5-1.4-1-.5-.6-.8-1.2-.9-1.9-.2-.9-.1-1.8.3-2.6.3-.7.8-1.2 1.3-1.6.3-.2.6-.4 1-.5.2-.2.5-.2.8-.3.3 0 .7-.1 1 0 .3 0 .6.1.9.2.9.3 1.7.9 2.4 1.5.4.4.8.7 1.1 1.1l.1.1.4-.4c.6-.6 1.2-1.2 1.9-1.6.5-.3 1-.6 1.5-.7.4-.1.7-.2 1-.2h.9c1 .1 1.9.5 2.6 1.4.4.5.7 1.1.8 1.8.2.9.1 1.7-.2 2.5-.4.9-1 1.5-1.8 2-.4.2-.7.4-1.1.4-.4.1-.8.1-1.2.1-.5 0-.9-.1-1.3-.3-.8-.3-1.5-.9-2.1-1.5-.4-.4-.8-.7-1.1-1.1h-.3zm-1.1-1.1c-.1-.1-.1-.1 0 0-.3-.3-.6-.6-.8-.9-.5-.5-1-.9-1.6-1.2-.4-.3-.8-.4-1.3-.4-.4 0-.8 0-1.1.2-.5.2-.9.6-1.1 1-.2.3-.3.7-.3 1.1 0 .3 0 .6.1.9.1.5.4.9.8 1.2.5.4 1.1.5 1.7.5.5 0 1-.2 1.5-.5.6-.4 1.1-.8 1.6-1.3.1-.3.3-.5.5-.6zM13 12c.5.5 1 1 1.5 1.4.5.5 1.1.9 1.9 1 .4.1.8 0 1.2-.1.3-.1.6-.3.9-.5.4-.4.7-.9.8-1.4.1-.5 0-.9-.1-1.4-.3-.8-.8-1.2-1.7-1.4-.4-.1-.8-.1-1.2 0-.5.1-1 .4-1.4.7-.5.4-1 .8-1.4 1.2-.2.2-.4.3-.5.5z"/></svg></button> <button @click="${this._handleSettingsClick}" @blur="${this._handleBlur}" aria-label="Settings" aria-haspopup="true" aria-expanded="${!!this._isSettingsOpen}" aria-controls="${`${this._identifier}-settings`}"><svg width="24" height="24" aria-hidden="true" focusable="false"><circle cx="12" cy="5.4" r="2.5"/><circle cx="12" cy="12" r="2.5"/><circle cx="12" cy="18.6" r="2.5"/></svg></button><div id="${`${this._identifier}-settings`}" class="popover" style="display:${this._isSettingsOpen ? 'block' : 'none'}">${this._isDotLottie ? lit.nothing : lit.html`<button @click="${this.convert}" aria-label="Convert JSON animation to dotLottie format" tabindex="0"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"/></svg> Convert to dotLottie</button>`} <button @click="${this.snapshot}" aria-label="Download still image" tabindex="0"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M16.8 10.8 12 15.6l-4.8-4.8h3V3.6h3.6v7.2h3zM12 15.6H3v4.8h18v-4.8h-9zm7.8 2.4h-2.4v-1.2h2.4V18z"/></svg> Download still image</button></div>`}</div>`;
883
+ return lit.html`<div class="${`lottie-controls toolbar ${isError ? 'has-error' : ''}`}" aria-label="Lottie Animation controls"><button @click="${this.togglePlay}" data-active="${isPlaying || isPaused}" tabindex="0" aria-label="Toggle Play/Pause">${isPlaying ? lit.html`<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z"/></svg>` : lit.html`<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z"/></svg>`}</button> <button @click="${this.stop}" data-active="${isStopped}" tabindex="0" aria-label="Stop"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M6 6h12v12H6V6z"/></svg></button> ${this._animations?.length > 1 ? lit.html`${this._currentAnimation > 0 ? lit.html`<button @click="${this.prev}" tabindex="0" aria-label="Previous animation"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.9 18.2 8.1 12l9.8-6.2v12.4zm-10.3 0H6.1V5.8h1.5v12.4z"/></svg></button>` : lit.nothing} ${this._currentAnimation + 1 < this._animations?.length ? lit.html`<button @click="${this.next}" tabindex="0" aria-label="Next animation"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m6.1 5.8 9.8 6.2-9.8 6.2V5.8zM16.4 5.8h1.5v12.4h-1.5z"/></svg></button>` : lit.nothing}` : lit.nothing}<form class="progress-container${this.simple ? ' simple' : ''}"><input class="seeker" type="range" min="0" max="100" step="1" value="${this._seeker}" @change="${this._handleSeekChange}" @mousedown="${this._freeze}" aria-valuemin="0" aria-valuemax="100" role="slider" aria-valuenow="${this._seeker}" tabindex="0" aria-label="Slider for search"><progress max="100" value="${this._seeker}"></progress></form>${this.simple ? lit.nothing : lit.html`<button @click="${this.toggleLooping}" data-active="${this.loop ?? lit.nothing}" tabindex="0" aria-label="Toggle looping"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"/></svg></button> <button @click="${this.toggleBoomerang}" data-active="${(this.multiAnimationSettings?.[this._currentAnimation]?.mode === exports.PlayMode.Bounce) ?? this.mode === exports.PlayMode.Bounce}" aria-label="Toggle boomerang" tabindex="0"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m11.8 13.2-.3.3c-.5.5-1.1 1.1-1.7 1.5-.5.4-1 .6-1.5.8-.5.2-1.1.3-1.6.3s-1-.1-1.5-.3c-.6-.2-1-.5-1.4-1-.5-.6-.8-1.2-.9-1.9-.2-.9-.1-1.8.3-2.6.3-.7.8-1.2 1.3-1.6.3-.2.6-.4 1-.5.2-.2.5-.2.8-.3.3 0 .7-.1 1 0 .3 0 .6.1.9.2.9.3 1.7.9 2.4 1.5.4.4.8.7 1.1 1.1l.1.1.4-.4c.6-.6 1.2-1.2 1.9-1.6.5-.3 1-.6 1.5-.7.4-.1.7-.2 1-.2h.9c1 .1 1.9.5 2.6 1.4.4.5.7 1.1.8 1.8.2.9.1 1.7-.2 2.5-.4.9-1 1.5-1.8 2-.4.2-.7.4-1.1.4-.4.1-.8.1-1.2.1-.5 0-.9-.1-1.3-.3-.8-.3-1.5-.9-2.1-1.5-.4-.4-.8-.7-1.1-1.1h-.3zm-1.1-1.1c-.1-.1-.1-.1 0 0-.3-.3-.6-.6-.8-.9-.5-.5-1-.9-1.6-1.2-.4-.3-.8-.4-1.3-.4-.4 0-.8 0-1.1.2-.5.2-.9.6-1.1 1-.2.3-.3.7-.3 1.1 0 .3 0 .6.1.9.1.5.4.9.8 1.2.5.4 1.1.5 1.7.5.5 0 1-.2 1.5-.5.6-.4 1.1-.8 1.6-1.3.1-.3.3-.5.5-.6zM13 12c.5.5 1 1 1.5 1.4.5.5 1.1.9 1.9 1 .4.1.8 0 1.2-.1.3-.1.6-.3.9-.5.4-.4.7-.9.8-1.4.1-.5 0-.9-.1-1.4-.3-.8-.8-1.2-1.7-1.4-.4-.1-.8-.1-1.2 0-.5.1-1 .4-1.4.7-.5.4-1 .8-1.4 1.2-.2.2-.4.3-.5.5z"/></svg></button> <button @click="${this._handleSettingsClick}" @blur="${this._handleBlur}" aria-label="Settings" aria-haspopup="true" aria-expanded="${!!this._isSettingsOpen}" aria-controls="${`${this._identifier}-settings`}"><svg width="24" height="24" aria-hidden="true" focusable="false"><circle cx="12" cy="5.4" r="2.5"/><circle cx="12" cy="12" r="2.5"/><circle cx="12" cy="18.6" r="2.5"/></svg></button><div id="${`${this._identifier}-settings`}" class="popover" style="display:${this._isSettingsOpen ? 'block' : 'none'}">${this._isDotLottie ? lit.nothing : lit.html`<button @click="${this.convert}" aria-label="Convert JSON animation to dotLottie format" tabindex="0"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"/></svg> Convert to dotLottie</button>`} <button @click="${this.snapshot}" aria-label="Download still image" tabindex="0"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M16.8 10.8 12 15.6l-4.8-4.8h3V3.6h3.6v7.2h3zM12 15.6H3v4.8h18v-4.8h-9zm7.8 2.4h-2.4v-1.2h2.4V18z"/></svg> Download still image</button></div>`}</div>`;
871
884
  }
872
885
  render() {
873
886
  return lit.html`<figure class="${'animation-container main'}" data-controls="${this.controls ?? lit.nothing}" lang="${this.description ? document?.documentElement?.lang : 'en'}" role="img" aria-label="${this.description ?? 'Lottie animation'}" data-loaded="${this._playerState.loaded}"><div class="animation" style="background:${this.background}">${this.currentState === exports.PlayerState.Error ? lit.html`<div class="error"><svg preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1920" height="1080" viewBox="0 0 1920 1080"><path fill="#fff" d="M0 0h1920v1080H0z"/><path fill="#3a6d8b" d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"/><path fill="none" d="M718.9 807.7h645v285.4h-645z"/><text fill="#3a6d8b" style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif" x="50%" y="848.017" text-anchor="middle">${this._errorMessage}</text></svg></div>` : lit.nothing}</div>${this.controls ? this.renderControls() : lit.nothing}</figure>`;
@@ -965,6 +978,11 @@ _ts_decorate([
965
978
  type: String
966
979
  })
967
980
  ], DotLottiePlayer.prototype, "mode", void 0);
981
+ _ts_decorate([
982
+ decorators_js.property({
983
+ type: Array
984
+ })
985
+ ], DotLottiePlayer.prototype, "multiAnimationSettings", void 0);
968
986
  _ts_decorate([
969
987
  decorators_js.property({
970
988
  type: String
package/dist/custom-elements.json CHANGED
@@ -158,6 +158,15 @@
158
158
  "description": "Play mode",
159
159
  "attribute": "mode"
160
160
  },
161
+ {
162
+ "kind": "field",
163
+ "name": "multiAnimationSettings",
164
+ "type": {
165
+ "text": "Partial<Animations> | undefined"
166
+ },
167
+ "description": "Multi-animation settings\nIf set, these will override conflicting settings",
168
+ "attribute": "multiAnimationSettings"
169
+ },
161
170
  {
162
171
  "kind": "field",
163
172
  "name": "objectfit",
@@ -569,6 +578,20 @@
569
578
  ],
570
579
  "description": "Set loop"
571
580
  },
581
+ {
582
+ "kind": "method",
583
+ "name": "setMultiAnimationSettings",
584
+ "privacy": "public",
585
+ "parameters": [
586
+ {
587
+ "name": "settings",
588
+ "type": {
589
+ "text": "Partial<Animations>"
590
+ }
591
+ }
592
+ ],
593
+ "description": "Set Multi-animation settings"
594
+ },
572
595
  {
573
596
  "kind": "method",
574
597
  "name": "togglePlay",
@@ -786,6 +809,14 @@
786
809
  "description": "Play mode",
787
810
  "fieldName": "mode"
788
811
  },
812
+ {
813
+ "name": "multiAnimationSettings",
814
+ "type": {
815
+ "text": "Partial<Animations> | undefined"
816
+ },
817
+ "description": "Multi-animation settings\nIf set, these will override conflicting settings",
818
+ "fieldName": "multiAnimationSettings"
819
+ },
789
820
  {
790
821
  "name": "objectfit",
791
822
  "type": {
package/dist/esm/index.js CHANGED
@@ -297,7 +297,7 @@ const addExt = (ext, str)=>{
297
297
  };
298
298
 
299
299
  var name = "@aarsteinmedia/dotlottie-player";
300
- var version = "2.2.0";
300
+ var version = "2.2.2";
301
301
  var description = "Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";
302
302
  var exports = {
303
303
  ".": {
@@ -428,7 +428,7 @@ function _ts_decorate(decorators, target, key, desc) {
428
428
  }
429
429
  class DotLottiePlayer extends LitElement {
430
430
  _getOptions() {
431
- const preserveAspectRatio = this.preserveAspectRatio ?? (this.objectfit && aspectRatio(this.objectfit)), currentAnimation = this._manifest.animations[this._currentAnimation], loop = this.loop !== undefined ? !!this.loop : currentAnimation.loop !== undefined && !!currentAnimation.loop, autoplay = this.autoplay !== undefined ? !!this.autoplay : currentAnimation.autoplay !== undefined && !!currentAnimation.autoplay, initialSegment = !this.segment || this.segment.some((val)=>val < 0) ? undefined : this.segment.every((val)=>val > 0) ? [
431
+ const preserveAspectRatio = this.preserveAspectRatio ?? (this.objectfit && aspectRatio(this.objectfit)), currentAnimationSettings = this.multiAnimationSettings?.[this._currentAnimation], currentAnimationManifest = this._manifest.animations?.[this._currentAnimation], loop = currentAnimationSettings?.loop !== undefined ? !!currentAnimationSettings.loop : this.loop !== undefined ? !!this.loop : currentAnimationManifest.loop !== undefined && !!currentAnimationManifest.loop, autoplay = currentAnimationSettings?.autoplay !== undefined ? !!currentAnimationSettings.autoplay : this.autoplay !== undefined ? !!this.autoplay : currentAnimationManifest.autoplay !== undefined && !!currentAnimationManifest.autoplay, initialSegment = !this.segment || this.segment.some((val)=>val < 0) ? undefined : this.segment.every((val)=>val > 0) ? [
432
432
  this.segment[0] - 1,
433
433
  this.segment[1] - 1
434
434
  ] : this.segment, options = {
@@ -499,8 +499,9 @@ class DotLottiePlayer extends LitElement {
499
499
  return;
500
500
  }
501
501
  this._addEventListeners();
502
- this.setSpeed(this.speed);
503
- this.setDirection(this.direction ?? 1);
502
+ 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;
503
+ this.setSpeed(speed);
504
+ this.setDirection(direction);
504
505
  this.setSubframe(!!this.subframe);
505
506
  if (this.autoplay) {
506
507
  if (this.direction === -1) this.seek('99%');
@@ -535,9 +536,9 @@ class DotLottiePlayer extends LitElement {
535
536
  if (!this._lottieInstance) {
536
537
  return;
537
538
  }
538
- const { firstFrame, totalFrames, playDirection } = this._lottieInstance;
539
+ const { firstFrame, totalFrames, playDirection } = this._lottieInstance, isBounce = (this.multiAnimationSettings?.[this._currentAnimation]?.mode === PlayMode.Bounce) ?? this.mode === PlayMode.Bounce;
539
540
  if (this.count) {
540
- this.mode === PlayMode.Bounce ? this._playerState.count += 1 : this._playerState.count += 0.5;
541
+ isBounce ? this._playerState.count += 1 : this._playerState.count += 0.5;
541
542
  if (this._playerState.count >= this.count) {
542
543
  this.setLooping(false);
543
544
  this.currentState = PlayerState.Completed;
@@ -546,7 +547,7 @@ class DotLottiePlayer extends LitElement {
546
547
  }
547
548
  }
548
549
  this.dispatchEvent(new CustomEvent(PlayerEvents.Loop));
549
- if (this.mode === PlayMode.Bounce) {
550
+ if (isBounce) {
550
551
  this._lottieInstance?.goToAndStop(playDirection === -1 ? firstFrame : totalFrames * 0.99, true);
551
552
  this._lottieInstance?.setDirection(playDirection * -1);
552
553
  return setTimeout(()=>{
@@ -758,6 +759,11 @@ class DotLottiePlayer extends LitElement {
758
759
  this._lottieInstance.setLoop(value);
759
760
  }
760
761
  }
762
+ setMultiAnimationSettings(settings) {
763
+ if (this._lottieInstance) {
764
+ this.multiAnimationSettings = settings;
765
+ }
766
+ }
761
767
  togglePlay() {
762
768
  if (!this._lottieInstance) return;
763
769
  const { currentFrame, playDirection, totalFrames } = this._lottieInstance;
@@ -766,7 +772,7 @@ class DotLottiePlayer extends LitElement {
766
772
  }
767
773
  if (this.currentState === PlayerState.Completed) {
768
774
  this.currentState = PlayerState.Playing;
769
- if (this.mode === PlayMode.Bounce) {
775
+ if ((this.multiAnimationSettings?.[this._currentAnimation]?.mode === PlayMode.Bounce) ?? this.mode === PlayMode.Bounce) {
770
776
  this.setDirection(playDirection * -1);
771
777
  return this._lottieInstance.goToAndPlay(currentFrame, true);
772
778
  }
@@ -781,7 +787,14 @@ class DotLottiePlayer extends LitElement {
781
787
  this.setLooping(!this.loop);
782
788
  }
783
789
  toggleBoomerang() {
784
- if (this.mode === PlayMode.Normal) {
790
+ const curr = this.multiAnimationSettings?.[this._currentAnimation];
791
+ if (curr?.mode !== undefined) {
792
+ if (curr.mode === PlayMode.Normal) {
793
+ curr.mode = PlayMode.Bounce;
794
+ } else {
795
+ curr.mode = PlayMode.Normal;
796
+ }
797
+ } else if (this.mode === PlayMode.Normal) {
785
798
  this.mode = PlayMode.Bounce;
786
799
  } else {
787
800
  this.mode = PlayMode.Normal;
@@ -804,7 +817,7 @@ class DotLottiePlayer extends LitElement {
804
817
  animationData: this._animations[this._currentAnimation]
805
818
  });
806
819
  this._addEventListeners();
807
- if (this.autoplay) {
820
+ if (this.multiAnimationSettings?.[this._currentAnimation]?.autoplay ?? this.autoplay) {
808
821
  this._lottieInstance?.goToAndPlay(0, true);
809
822
  this.currentState = PlayerState.Playing;
810
823
  } else {
@@ -865,7 +878,7 @@ class DotLottiePlayer extends LitElement {
865
878
  }
866
879
  renderControls() {
867
880
  const isPlaying = this.currentState === PlayerState.Playing, isPaused = this.currentState === PlayerState.Paused, isStopped = this.currentState === PlayerState.Stopped, isError = this.currentState === PlayerState.Error;
868
- return html`<div class="${`lottie-controls toolbar ${isError ? 'has-error' : ''}`}" aria-label="Lottie Animation controls"><button @click="${this.togglePlay}" data-active="${isPlaying || isPaused}" tabindex="0" aria-label="Toggle Play/Pause">${isPlaying ? html`<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z"/></svg>` : html`<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z"/></svg>`}</button> <button @click="${this.stop}" data-active="${isStopped}" tabindex="0" aria-label="Stop"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M6 6h12v12H6V6z"/></svg></button> ${this._animations?.length > 1 ? html`${this._currentAnimation > 0 ? html`<button @click="${this.prev}" tabindex="0" aria-label="Previous animation"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.9 18.2 8.1 12l9.8-6.2v12.4zm-10.3 0H6.1V5.8h1.5v12.4z"/></svg></button>` : nothing} ${this._currentAnimation + 1 < this._animations?.length ? html`<button @click="${this.next}" tabindex="0" aria-label="Next animation"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m6.1 5.8 9.8 6.2-9.8 6.2V5.8zM16.4 5.8h1.5v12.4h-1.5z"/></svg></button>` : nothing}` : nothing}<form class="progress-container${this.simple ? ' simple' : ''}"><input class="seeker" type="range" min="0" max="100" step="1" value="${this._seeker}" @change="${this._handleSeekChange}" @mousedown="${this._freeze}" aria-valuemin="0" aria-valuemax="100" role="slider" aria-valuenow="${this._seeker}" tabindex="0" aria-label="Slider for search"><progress max="100" value="${this._seeker}"></progress></form>${this.simple ? nothing : html`<button @click="${this.toggleLooping}" data-active="${this.loop ?? nothing}" tabindex="0" aria-label="Toggle looping"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"/></svg></button> <button @click="${this.toggleBoomerang}" data-active="${this.mode === PlayMode.Bounce}" aria-label="Toggle boomerang" tabindex="0"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m11.8 13.2-.3.3c-.5.5-1.1 1.1-1.7 1.5-.5.4-1 .6-1.5.8-.5.2-1.1.3-1.6.3s-1-.1-1.5-.3c-.6-.2-1-.5-1.4-1-.5-.6-.8-1.2-.9-1.9-.2-.9-.1-1.8.3-2.6.3-.7.8-1.2 1.3-1.6.3-.2.6-.4 1-.5.2-.2.5-.2.8-.3.3 0 .7-.1 1 0 .3 0 .6.1.9.2.9.3 1.7.9 2.4 1.5.4.4.8.7 1.1 1.1l.1.1.4-.4c.6-.6 1.2-1.2 1.9-1.6.5-.3 1-.6 1.5-.7.4-.1.7-.2 1-.2h.9c1 .1 1.9.5 2.6 1.4.4.5.7 1.1.8 1.8.2.9.1 1.7-.2 2.5-.4.9-1 1.5-1.8 2-.4.2-.7.4-1.1.4-.4.1-.8.1-1.2.1-.5 0-.9-.1-1.3-.3-.8-.3-1.5-.9-2.1-1.5-.4-.4-.8-.7-1.1-1.1h-.3zm-1.1-1.1c-.1-.1-.1-.1 0 0-.3-.3-.6-.6-.8-.9-.5-.5-1-.9-1.6-1.2-.4-.3-.8-.4-1.3-.4-.4 0-.8 0-1.1.2-.5.2-.9.6-1.1 1-.2.3-.3.7-.3 1.1 0 .3 0 .6.1.9.1.5.4.9.8 1.2.5.4 1.1.5 1.7.5.5 0 1-.2 1.5-.5.6-.4 1.1-.8 1.6-1.3.1-.3.3-.5.5-.6zM13 12c.5.5 1 1 1.5 1.4.5.5 1.1.9 1.9 1 .4.1.8 0 1.2-.1.3-.1.6-.3.9-.5.4-.4.7-.9.8-1.4.1-.5 0-.9-.1-1.4-.3-.8-.8-1.2-1.7-1.4-.4-.1-.8-.1-1.2 0-.5.1-1 .4-1.4.7-.5.4-1 .8-1.4 1.2-.2.2-.4.3-.5.5z"/></svg></button> <button @click="${this._handleSettingsClick}" @blur="${this._handleBlur}" aria-label="Settings" aria-haspopup="true" aria-expanded="${!!this._isSettingsOpen}" aria-controls="${`${this._identifier}-settings`}"><svg width="24" height="24" aria-hidden="true" focusable="false"><circle cx="12" cy="5.4" r="2.5"/><circle cx="12" cy="12" r="2.5"/><circle cx="12" cy="18.6" r="2.5"/></svg></button><div id="${`${this._identifier}-settings`}" class="popover" style="display:${this._isSettingsOpen ? 'block' : 'none'}">${this._isDotLottie ? nothing : html`<button @click="${this.convert}" aria-label="Convert JSON animation to dotLottie format" tabindex="0"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"/></svg> Convert to dotLottie</button>`} <button @click="${this.snapshot}" aria-label="Download still image" tabindex="0"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M16.8 10.8 12 15.6l-4.8-4.8h3V3.6h3.6v7.2h3zM12 15.6H3v4.8h18v-4.8h-9zm7.8 2.4h-2.4v-1.2h2.4V18z"/></svg> Download still image</button></div>`}</div>`;
881
+ return html`<div class="${`lottie-controls toolbar ${isError ? 'has-error' : ''}`}" aria-label="Lottie Animation controls"><button @click="${this.togglePlay}" data-active="${isPlaying || isPaused}" tabindex="0" aria-label="Toggle Play/Pause">${isPlaying ? html`<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z"/></svg>` : html`<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z"/></svg>`}</button> <button @click="${this.stop}" data-active="${isStopped}" tabindex="0" aria-label="Stop"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M6 6h12v12H6V6z"/></svg></button> ${this._animations?.length > 1 ? html`${this._currentAnimation > 0 ? html`<button @click="${this.prev}" tabindex="0" aria-label="Previous animation"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.9 18.2 8.1 12l9.8-6.2v12.4zm-10.3 0H6.1V5.8h1.5v12.4z"/></svg></button>` : nothing} ${this._currentAnimation + 1 < this._animations?.length ? html`<button @click="${this.next}" tabindex="0" aria-label="Next animation"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m6.1 5.8 9.8 6.2-9.8 6.2V5.8zM16.4 5.8h1.5v12.4h-1.5z"/></svg></button>` : nothing}` : nothing}<form class="progress-container${this.simple ? ' simple' : ''}"><input class="seeker" type="range" min="0" max="100" step="1" value="${this._seeker}" @change="${this._handleSeekChange}" @mousedown="${this._freeze}" aria-valuemin="0" aria-valuemax="100" role="slider" aria-valuenow="${this._seeker}" tabindex="0" aria-label="Slider for search"><progress max="100" value="${this._seeker}"></progress></form>${this.simple ? nothing : html`<button @click="${this.toggleLooping}" data-active="${this.loop ?? nothing}" tabindex="0" aria-label="Toggle looping"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"/></svg></button> <button @click="${this.toggleBoomerang}" data-active="${(this.multiAnimationSettings?.[this._currentAnimation]?.mode === PlayMode.Bounce) ?? this.mode === PlayMode.Bounce}" aria-label="Toggle boomerang" tabindex="0"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m11.8 13.2-.3.3c-.5.5-1.1 1.1-1.7 1.5-.5.4-1 .6-1.5.8-.5.2-1.1.3-1.6.3s-1-.1-1.5-.3c-.6-.2-1-.5-1.4-1-.5-.6-.8-1.2-.9-1.9-.2-.9-.1-1.8.3-2.6.3-.7.8-1.2 1.3-1.6.3-.2.6-.4 1-.5.2-.2.5-.2.8-.3.3 0 .7-.1 1 0 .3 0 .6.1.9.2.9.3 1.7.9 2.4 1.5.4.4.8.7 1.1 1.1l.1.1.4-.4c.6-.6 1.2-1.2 1.9-1.6.5-.3 1-.6 1.5-.7.4-.1.7-.2 1-.2h.9c1 .1 1.9.5 2.6 1.4.4.5.7 1.1.8 1.8.2.9.1 1.7-.2 2.5-.4.9-1 1.5-1.8 2-.4.2-.7.4-1.1.4-.4.1-.8.1-1.2.1-.5 0-.9-.1-1.3-.3-.8-.3-1.5-.9-2.1-1.5-.4-.4-.8-.7-1.1-1.1h-.3zm-1.1-1.1c-.1-.1-.1-.1 0 0-.3-.3-.6-.6-.8-.9-.5-.5-1-.9-1.6-1.2-.4-.3-.8-.4-1.3-.4-.4 0-.8 0-1.1.2-.5.2-.9.6-1.1 1-.2.3-.3.7-.3 1.1 0 .3 0 .6.1.9.1.5.4.9.8 1.2.5.4 1.1.5 1.7.5.5 0 1-.2 1.5-.5.6-.4 1.1-.8 1.6-1.3.1-.3.3-.5.5-.6zM13 12c.5.5 1 1 1.5 1.4.5.5 1.1.9 1.9 1 .4.1.8 0 1.2-.1.3-.1.6-.3.9-.5.4-.4.7-.9.8-1.4.1-.5 0-.9-.1-1.4-.3-.8-.8-1.2-1.7-1.4-.4-.1-.8-.1-1.2 0-.5.1-1 .4-1.4.7-.5.4-1 .8-1.4 1.2-.2.2-.4.3-.5.5z"/></svg></button> <button @click="${this._handleSettingsClick}" @blur="${this._handleBlur}" aria-label="Settings" aria-haspopup="true" aria-expanded="${!!this._isSettingsOpen}" aria-controls="${`${this._identifier}-settings`}"><svg width="24" height="24" aria-hidden="true" focusable="false"><circle cx="12" cy="5.4" r="2.5"/><circle cx="12" cy="12" r="2.5"/><circle cx="12" cy="18.6" r="2.5"/></svg></button><div id="${`${this._identifier}-settings`}" class="popover" style="display:${this._isSettingsOpen ? 'block' : 'none'}">${this._isDotLottie ? nothing : html`<button @click="${this.convert}" aria-label="Convert JSON animation to dotLottie format" tabindex="0"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"/></svg> Convert to dotLottie</button>`} <button @click="${this.snapshot}" aria-label="Download still image" tabindex="0"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M16.8 10.8 12 15.6l-4.8-4.8h3V3.6h3.6v7.2h3zM12 15.6H3v4.8h18v-4.8h-9zm7.8 2.4h-2.4v-1.2h2.4V18z"/></svg> Download still image</button></div>`}</div>`;
869
882
  }
870
883
  render() {
871
884
  return html`<figure class="${'animation-container main'}" data-controls="${this.controls ?? nothing}" lang="${this.description ? document?.documentElement?.lang : 'en'}" role="img" aria-label="${this.description ?? 'Lottie animation'}" data-loaded="${this._playerState.loaded}"><div class="animation" style="background:${this.background}">${this.currentState === PlayerState.Error ? html`<div class="error"><svg preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1920" height="1080" viewBox="0 0 1920 1080"><path fill="#fff" d="M0 0h1920v1080H0z"/><path fill="#3a6d8b" d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"/><path fill="none" d="M718.9 807.7h645v285.4h-645z"/><text fill="#3a6d8b" style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif" x="50%" y="848.017" text-anchor="middle">${this._errorMessage}</text></svg></div>` : nothing}</div>${this.controls ? this.renderControls() : nothing}</figure>`;
@@ -963,6 +976,11 @@ _ts_decorate([
963
976
  type: String
964
977
  })
965
978
  ], DotLottiePlayer.prototype, "mode", void 0);
979
+ _ts_decorate([
980
+ property({
981
+ type: Array
982
+ })
983
+ ], DotLottiePlayer.prototype, "multiAnimationSettings", void 0);
966
984
  _ts_decorate([
967
985
  property({
968
986
  type: String
package/dist/index.d.ts CHANGED
@@ -38,8 +38,9 @@ interface Config {
38
38
  mode?: PlayMode;
39
39
  speed?: number;
40
40
  }
41
+ type Animations = Omit<Config, 'url'>[];
41
42
  interface LottieManifest {
42
- animations: Omit<Config, 'url'>[];
43
+ animations: Animations;
43
44
  author?: string;
44
45
  description?: string;
45
46
  generator?: string;
@@ -111,6 +112,7 @@ declare class DotLottiePlayer extends LitElement {
111
112
  intermission?: number | undefined;
112
113
  loop?: Loop;
113
114
  mode?: PlayMode;
115
+ multiAnimationSettings?: Partial<Animations>;
114
116
  objectfit?: ObjectFit;
115
117
  preserveAspectRatio?: PreserveAspectRatio;
116
118
  renderer?: RendererType;
@@ -152,6 +154,7 @@ declare class DotLottiePlayer extends LitElement {
152
154
  setSpeed(value?: number): void;
153
155
  setDirection(value: AnimationDirection): void;
154
156
  setLooping(value: boolean): void;
157
+ setMultiAnimationSettings(settings: Partial<Animations>): void;
155
158
  togglePlay(): void;
156
159
  toggleLooping(): void;
157
160
  toggleBoomerang(): void;