@aarsteinmedia/dotlottie-player 6.3.0 → 6.3.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 (13) hide show
  1. package/dist/canvas.d.ts +24 -7
  2. package/dist/canvas.js +14 -12
  3. package/dist/full.d.ts +25 -8
  4. package/dist/full.js +14 -11
  5. package/dist/light.d.ts +24 -7
  6. package/dist/light.js +12 -11
  7. package/dist/svg.d.ts +24 -7
  8. package/dist/svg.js +12 -11
  9. package/dist/unpkg-canvas.js +18 -18
  10. package/dist/unpkg-full.js +18 -18
  11. package/dist/unpkg-light.js +17 -17
  12. package/dist/unpkg-svg.js +18 -18
  13. package/package.json +15 -26
package/dist/canvas.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import { PlayMode, PreserveAspectRatio, RendererType } from '@aarsteinmedia/lottie-web/utils';
2
- export { PlayMode, PlayerEvents } from '@aarsteinmedia/lottie-web/utils';
3
- import * as _aarsteinmedia_lottie_web_canvas from '@aarsteinmedia/lottie-web/canvas';
4
- import { HTMLBooleanAttribute, AnimationData, AnimationDirection, AddAnimationParams, Result, ConvertParams, AnimationItem, LottieManifest, AnimationSettings, Vector2, AnimationConfiguration } from '@aarsteinmedia/lottie-web';
2
+ export { PlayMode, PlayerEvents, RendererType } from '@aarsteinmedia/lottie-web/utils';
3
+ import { HTMLBooleanAttribute, AnimationData, AnimationDirection, AddAnimationParams, Result, ConvertParams, LottieManifest, AnimationSettings, Vector2, AnimationConfiguration } from '@aarsteinmedia/lottie-web';
5
4
 
6
5
  declare abstract class PropertyCallbackElement extends HTMLElement {
7
6
  constructor();
@@ -31,6 +30,24 @@ declare enum PlayerState {
31
30
  }
32
31
  declare const tagName = "dotlottie-player";
33
32
 
33
+ interface DotLottieAnimationInstance {
34
+ addEventListener: (name: string, callback: (...args: any[]) => void) => void;
35
+ autoplay?: boolean;
36
+ currentFrame: number;
37
+ destroy: () => void;
38
+ goToAndPlay: (value: number, isFrame?: boolean) => void;
39
+ goToAndStop: (value: number, isFrame?: boolean) => void;
40
+ pause: () => void;
41
+ play: () => void;
42
+ playDirection: number;
43
+ removeEventListener: (name: string, callback: (...args: any[]) => void) => void;
44
+ setDirection: (direction: AnimationDirection) => void;
45
+ setLoop: (loop: boolean) => void;
46
+ setSpeed: (speed: number) => void;
47
+ setSubframe: (useSubframe: boolean) => void;
48
+ stop: () => void;
49
+ totalFrames: number;
50
+ }
34
51
  declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
35
52
  static get observedAttributes(): readonly ["animateOnScroll", "autoplay", "controls", "direction", "hover", "loop", "mode", "playOnClick", "playOnVisible", "selector", "speed", "src", "subframe"];
36
53
  static get observedProperties(): string[];
@@ -125,12 +142,12 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
125
142
  convert(_params: ConvertParams): Promise<Result>;
126
143
  destroy(): void;
127
144
  disconnectedCallback(): void;
128
- getLottie(): AnimationItem | null;
145
+ getLottie(): DotLottieAnimationInstance | null;
129
146
  getManifest(): LottieManifest | undefined;
130
147
  getMultiAnimationSettings(): AnimationSettings[];
131
148
  getSegment(): Vector2 | undefined;
132
149
  load(src: string | null): Promise<void>;
133
- loadAnimation(_config: AnimationConfiguration): AnimationItem;
150
+ loadAnimation(_config: AnimationConfiguration): DotLottieAnimationInstance;
134
151
  next(): void;
135
152
  pause(): void;
136
153
  play(): void;
@@ -162,7 +179,7 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
162
179
  hasAutoplay: boolean;
163
180
  hasLoop: boolean;
164
181
  preserveAspectRatio: PreserveAspectRatio;
165
- }): AnimationConfiguration<RendererType.SVG | RendererType.Canvas | RendererType.HTML>;
182
+ }): AnimationConfiguration;
166
183
  private _addEventListeners;
167
184
  private _addIntersectionObserver;
168
185
  private _complete;
@@ -185,9 +202,9 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
185
202
  }
186
203
 
187
204
  declare class DotLottiePlayerCanvas extends DotLottiePlayerBase {
188
- loadAnimation: typeof _aarsteinmedia_lottie_web_canvas.loadAnimation;
189
205
  get renderer(): RendererType;
190
206
  constructor();
207
+ loadAnimation(config: AnimationConfiguration): DotLottieAnimationInstance;
191
208
  protected setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio, }: {
192
209
  container?: HTMLElement;
193
210
  rendererType: RendererType;
package/dist/canvas.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { isServer, PlayMode, PreserveAspectRatio, namespaceSVG, RendererType, createElementID, PlayerEvents, download, getFilename, clamp } from '@aarsteinmedia/lottie-web/utils';
2
- export { PlayMode, PlayerEvents } from '@aarsteinmedia/lottie-web/utils';
2
+ export { PlayMode, PlayerEvents, RendererType } from '@aarsteinmedia/lottie-web/utils';
3
3
  import Lottie from '@aarsteinmedia/lottie-web/canvas';
4
4
  import { convert, getAnimationData } from '@aarsteinmedia/lottie-web/dotlottie';
5
5
 
@@ -61,7 +61,7 @@ if (isServer) {
61
61
  }
62
62
  }
63
63
 
64
- var css_248z = "* {\n box-sizing: border-box;\n}\n\n:host {\n --lottie-player-toolbar-height: 35px;\n --lottie-player-toolbar-background-color: #fff;\n --lottie-player-toolbar-icon-color: #000;\n --lottie-player-toolbar-icon-hover-color: #000;\n --lottie-player-toolbar-icon-active-color: #4285f4;\n --lottie-player-seeker-track-color: rgb(0 0 0 / 20%);\n --lottie-player-seeker-thumb-color: #4285f4;\n --lottie-player-seeker-display: block;\n\n width: 100%;\n height: 100%;\n\n &:not([hidden]) {\n display: block;\n }\n\n .main {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n margin: 0;\n padding: 0;\n }\n\n .animation {\n width: 100%;\n height: 100%;\n display: flex;\n margin: 0;\n padding: 0;\n }\n\n [data-controls='true'] .animation {\n height: calc(100% - 35px);\n }\n\n .animation-container {\n position: relative;\n }\n\n .popover {\n position: absolute;\n right: 5px;\n bottom: 40px;\n background-color: var(--lottie-player-toolbar-background-color);\n border-radius: 5px;\n padding: 10px 15px;\n border: solid 2px var(--lottie-player-toolbar-icon-color);\n animation: fade-in 0.2s ease-in-out;\n\n &::before {\n content: '';\n right: 10px;\n border: 7px solid transparent;\n margin-right: -7px;\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n top: 100%;\n border-top-color: var(--lottie-player-toolbar-icon-color);\n }\n }\n\n .error {\n display: flex;\n margin: auto;\n justify-content: center;\n height: 100%;\n align-items: center;\n\n & svg {\n width: 100%;\n height: auto;\n }\n }\n\n .toolbar {\n display: flex;\n place-items: center center;\n background: var(--lottie-player-toolbar-background-color);\n margin: 0;\n height: 35px;\n padding: 5px;\n border-radius: 5px;\n gap: 5px;\n\n &.has-error {\n pointer-events: none;\n opacity: 0.5;\n }\n\n & button {\n cursor: pointer;\n fill: var(--lottie-player-toolbar-icon-color);\n color: var(--lottie-player-toolbar-icon-color);\n background: none;\n border: 0;\n padding: 0;\n outline: 0;\n height: 100%;\n margin: 0;\n align-items: center;\n gap: 5px;\n opacity: 0.9;\n\n &:not([hidden]) {\n display: flex;\n }\n\n &:hover {\n opacity: 1;\n }\n\n &[data-active='true'] {\n opacity: 1;\n fill: var(--lottie-player-toolbar-icon-active-color);\n }\n\n &:disabled {\n opacity: 0.5;\n }\n\n &:focus {\n outline: 0;\n }\n\n & svg {\n pointer-events: none;\n\n & > * {\n fill: inherit;\n }\n }\n\n &.disabled svg {\n display: none;\n }\n }\n }\n\n .progress-container {\n position: relative;\n width: 100%;\n\n &.simple {\n margin-right: 12px;\n }\n }\n\n .seeker {\n appearance: none;\n outline: none;\n width: 100%;\n height: 20px;\n border-radius: 3px;\n border: 0;\n cursor: pointer;\n background-color: transparent;\n\n display: var(--lottie-player-seeker-display);\n color: var(--lottie-player-seeker-thumb-color);\n margin: 0;\n padding: 7.5px 0;\n position: relative;\n z-index: 1;\n\n &::-webkit-slider-runnable-track,\n &::-webkit-slider-thumb {\n appearance: none;\n outline: none;\n }\n\n &::-webkit-slider-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n border: 0;\n background-color: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -webkit-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n }\n\n &:hover::-webkit-slider-thumb,\n &:focus::-webkit-slider-thumb {\n transform: scale(1);\n }\n\n &::-moz-range-progress {\n background-color: var(--lottie-player-seeker-thumb-color);\n height: 5px;\n border-radius: 3px;\n }\n\n &::-moz-range-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background-color: var(--lottie-player-seeker-thumb-color);\n border: 0;\n cursor: pointer;\n -moz-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n }\n\n &:hover::-moz-range-thumb,\n &:focus::-moz-range-thumb {\n transform: scale(1);\n }\n\n &::-ms-track {\n width: 100%;\n height: 5px;\n cursor: pointer;\n background: transparent;\n border-color: transparent;\n color: transparent;\n }\n\n &::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n border-radius: 3px;\n }\n\n &::-ms-fill-lower {\n background-color: var(--lottie-player-seeker-thumb-color);\n border-radius: 3px;\n }\n\n &::-ms-thumb {\n border: 0;\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -ms-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n }\n\n &:hover::-ms-thumb {\n transform: scale(1);\n }\n\n &:focus {\n &::-ms-thumb {\n transform: scale(1);\n }\n\n &::-ms-fill-lower,\n &::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n }\n }\n }\n\n & progress {\n appearance: none;\n outline: none;\n position: absolute;\n width: 100%;\n height: 5px;\n border-radius: 3px;\n border: 0;\n top: 0;\n left: 0;\n margin: 7.5px 0;\n background-color: var(--lottie-player-seeker-track-color);\n pointer-events: none;\n\n &::-webkit-progress-inner-element {\n border-radius: 3px;\n overflow: hidden;\n }\n\n &::-webkit-slider-runnable-track {\n background-color: transparent;\n }\n\n &::-webkit-progress-value {\n background-color: var(--lottie-player-seeker-thumb-color);\n }\n }\n\n & *::-moz-progress-bar {\n background-color: var(--lottie-player-seeker-thumb-color);\n }\n}\n\n@keyframes fade-in {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@media (prefers-color-scheme: dark) {\n :host {\n --lottie-player-toolbar-background-color: #000;\n --lottie-player-toolbar-icon-color: #fff;\n --lottie-player-toolbar-icon-hover-color: #fff;\n --lottie-player-seeker-track-color: rgb(255 255 255 / 60%);\n }\n}\n";
64
+ var css_248z = "* {\n box-sizing: border-box;\n}\n\n:host {\n --lottie-player-toolbar-height: 35px;\n --lottie-player-toolbar-background-color: #fff;\n --lottie-player-toolbar-icon-color: #000;\n --lottie-player-toolbar-icon-hover-color: #000;\n --lottie-player-toolbar-icon-active-color: #4285f4;\n --lottie-player-seeker-track-color: rgb(0 0 0 / 20%);\n --lottie-player-seeker-thumb-color: #4285f4;\n --lottie-player-seeker-display: block;\n\n width: 100%;\n height: 100%;\n\n &:not([hidden]) {\n display: block;\n }\n\n .main {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n margin: 0;\n padding: 0;\n }\n\n .animation {\n width: 100%;\n height: 100%;\n display: flex;\n margin: 0;\n padding: 0;\n }\n\n [data-controls='true'] .animation {\n height: calc(100% - 35px);\n }\n\n .animation-container {\n position: relative;\n }\n\n .popover {\n position: absolute;\n right: 5px;\n bottom: 40px;\n background-color: var(--lottie-player-toolbar-background-color);\n border-radius: 5px;\n padding: 10px 15px;\n border: solid 2px var(--lottie-player-toolbar-icon-color);\n animation: fade-in 0.2s ease-in-out;\n\n &::before {\n content: '';\n right: 10px;\n border: 7px solid transparent;\n margin-right: -7px;\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n top: 100%;\n border-top-color: var(--lottie-player-toolbar-icon-color);\n }\n }\n\n .error {\n display: flex;\n margin: auto;\n justify-content: center;\n height: 100%;\n align-items: center;\n\n & svg {\n width: 100%;\n height: auto;\n }\n }\n\n .toolbar {\n display: flex;\n place-items: center center;\n background: var(--lottie-player-toolbar-background-color);\n margin: 0;\n height: 35px;\n padding: 5px;\n border-radius: 5px;\n gap: 5px;\n\n &.has-error {\n pointer-events: none;\n opacity: 0.5;\n }\n\n & button {\n cursor: pointer;\n fill: var(--lottie-player-toolbar-icon-color);\n color: var(--lottie-player-toolbar-icon-color);\n background: none;\n border: 0;\n padding: 0;\n outline: 0;\n height: 100%;\n margin: 0;\n align-items: center;\n gap: 5px;\n opacity: 0.9;\n\n &:not([hidden]) {\n display: flex;\n }\n\n &:hover {\n opacity: 1;\n }\n\n &[data-active='true'] {\n opacity: 1;\n fill: var(--lottie-player-toolbar-icon-active-color);\n }\n\n &:disabled {\n opacity: 0.5;\n }\n\n &:focus {\n outline: 0;\n }\n\n & svg {\n pointer-events: none;\n\n & > * {\n fill: inherit;\n }\n }\n\n &.disabled svg {\n display: none;\n }\n }\n }\n\n .progress-container {\n position: relative;\n width: 100%;\n\n &.simple {\n margin-right: 12px;\n }\n }\n\n & progress {\n appearance: none;\n outline: none;\n position: absolute;\n width: 100%;\n height: 5px;\n border-radius: 3px;\n border: 0;\n top: 0;\n left: 0;\n margin: 7.5px 0;\n background-color: var(--lottie-player-seeker-track-color);\n pointer-events: none;\n\n &::-webkit-progress-inner-element {\n border-radius: 3px;\n overflow: hidden;\n }\n\n &::-webkit-slider-runnable-track {\n background-color: transparent;\n }\n\n &::-webkit-progress-value {\n background-color: var(--lottie-player-seeker-thumb-color);\n }\n }\n\n .seeker {\n appearance: none;\n outline: none;\n width: 100%;\n height: 20px;\n border-radius: 3px;\n border: 0;\n cursor: pointer;\n background-color: transparent;\n\n display: var(--lottie-player-seeker-display);\n color: var(--lottie-player-seeker-thumb-color);\n margin: 0;\n padding: 7.5px 0;\n position: relative;\n z-index: 1;\n\n &::-webkit-slider-runnable-track,\n &::-webkit-slider-thumb {\n appearance: none;\n outline: none;\n }\n\n &::-webkit-slider-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n border: 0;\n background-color: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -webkit-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n }\n\n &:hover::-webkit-slider-thumb,\n &:focus::-webkit-slider-thumb {\n transform: scale(1);\n }\n\n &::-moz-range-progress {\n background-color: var(--lottie-player-seeker-thumb-color);\n height: 5px;\n border-radius: 3px;\n }\n\n &::-moz-range-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background-color: var(--lottie-player-seeker-thumb-color);\n border: 0;\n cursor: pointer;\n -moz-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n }\n\n &:hover::-moz-range-thumb,\n &:focus::-moz-range-thumb {\n transform: scale(1);\n }\n\n &::-ms-track {\n width: 100%;\n height: 5px;\n cursor: pointer;\n background: transparent;\n border-color: transparent;\n color: transparent;\n }\n\n &::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n border-radius: 3px;\n }\n\n &::-ms-fill-lower {\n background-color: var(--lottie-player-seeker-thumb-color);\n border-radius: 3px;\n }\n\n &::-ms-thumb {\n border: 0;\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -ms-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n }\n\n &:hover::-ms-thumb {\n transform: scale(1);\n }\n\n &:focus {\n &::-ms-thumb {\n transform: scale(1);\n }\n\n &::-ms-fill-lower,\n &::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n }\n }\n }\n\n & *::-moz-progress-bar {\n background-color: var(--lottie-player-seeker-thumb-color);\n }\n}\n\n@keyframes fade-in {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@media (prefers-color-scheme: dark) {\n :host {\n --lottie-player-toolbar-background-color: #000;\n --lottie-player-toolbar-icon-color: #fff;\n --lottie-player-toolbar-icon-hover-color: #fff;\n --lottie-player-seeker-track-color: rgb(255 255 255 / 60%);\n }\n}\n";
65
65
 
66
66
  const boomerangIcon = /* HTML */ `
67
67
  <svg width="24" height="24" aria-hidden="true" focusable="false">
@@ -314,7 +314,11 @@ const pauseIcon = /* HTML */ `
314
314
  return mandatory.every((field)=>Object.hasOwn(json, field));
315
315
  }, isTouch = ()=>'ontouchstart' in window, frameOutput = (frame)=>((frame ?? 0) + 1).toString().padStart(3, '0');
316
316
 
317
- const notImplemented = 'Method is not implemented';
317
+ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
318
+ const styleSheet = new CSSStyleSheet();
319
+ await styleSheet.replace(css_248z);
320
+ return styleSheet;
321
+ };
318
322
  /**
319
323
  * DotLottie Player Web Component.
320
324
  */ class DotLottiePlayerBase extends PropertyCallbackElement {
@@ -328,7 +332,6 @@ const notImplemented = 'Method is not implemented';
328
332
  'direction',
329
333
  'hover',
330
334
  'loop',
331
- // 'mouseout',
332
335
  'mode',
333
336
  'playOnClick',
334
337
  'playOnVisible',
@@ -350,11 +353,7 @@ const notImplemented = 'Method is not implemented';
350
353
  /**
351
354
  * Return the styles for the component.
352
355
  */ static get styles() {
353
- return async ()=>{
354
- const styleSheet = new CSSStyleSheet();
355
- await styleSheet.replace(css_248z);
356
- return styleSheet;
357
- };
356
+ return getStyles;
358
357
  }
359
358
  /**
360
359
  * Whether to trigger next frame with scroll.
@@ -1731,10 +1730,12 @@ const notImplemented = 'Method is not implemented';
1731
1730
  return RendererType.SVG;
1732
1731
  }
1733
1732
  constructor(){
1734
- super(), // @ts-expect-error: TODO:
1735
- this.loadAnimation = Lottie.loadAnimation;
1733
+ super();
1736
1734
  this.isLight = true;
1737
1735
  }
1736
+ loadAnimation(config) {
1737
+ return Lottie.loadAnimation(config);
1738
+ }
1738
1739
  setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio }) {
1739
1740
  const options = {
1740
1741
  autoplay: hasAutoplay,
@@ -1742,9 +1743,10 @@ const notImplemented = 'Method is not implemented';
1742
1743
  initialSegment,
1743
1744
  loop: hasLoop,
1744
1745
  renderer: RendererType.Canvas,
1745
- // @ts-expect-error TODO:
1746
1746
  rendererSettings: {
1747
1747
  clearCanvas: true,
1748
+ contentVisibility: 'visible',
1749
+ id: this.id,
1748
1750
  imagePreserveAspectRatio: preserveAspectRatio,
1749
1751
  preserveAspectRatio,
1750
1752
  progressiveLoad: true
package/dist/full.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import { PlayMode, PreserveAspectRatio, RendererType } from '@aarsteinmedia/lottie-web/utils';
2
- export { PlayMode, PlayerEvents } from '@aarsteinmedia/lottie-web/utils';
3
- import * as _aarsteinmedia_lottie_web from '@aarsteinmedia/lottie-web';
4
- import { HTMLBooleanAttribute, AnimationData, AnimationDirection, AddAnimationParams, Result, ConvertParams, AnimationItem, LottieManifest, AnimationSettings, Vector2, AnimationConfiguration } from '@aarsteinmedia/lottie-web';
2
+ export { PlayMode, PlayerEvents, RendererType } from '@aarsteinmedia/lottie-web/utils';
3
+ import { HTMLBooleanAttribute, AnimationData, AnimationDirection, AddAnimationParams, Result, ConvertParams, LottieManifest, AnimationSettings, Vector2, AnimationConfiguration } from '@aarsteinmedia/lottie-web';
5
4
  import { addAnimation, convert } from '@aarsteinmedia/lottie-web/dotlottie';
6
5
 
7
6
  declare abstract class PropertyCallbackElement extends HTMLElement {
@@ -32,6 +31,24 @@ declare enum PlayerState {
32
31
  }
33
32
  declare const tagName = "dotlottie-player";
34
33
 
34
+ interface DotLottieAnimationInstance {
35
+ addEventListener: (name: string, callback: (...args: any[]) => void) => void;
36
+ autoplay?: boolean;
37
+ currentFrame: number;
38
+ destroy: () => void;
39
+ goToAndPlay: (value: number, isFrame?: boolean) => void;
40
+ goToAndStop: (value: number, isFrame?: boolean) => void;
41
+ pause: () => void;
42
+ play: () => void;
43
+ playDirection: number;
44
+ removeEventListener: (name: string, callback: (...args: any[]) => void) => void;
45
+ setDirection: (direction: AnimationDirection) => void;
46
+ setLoop: (loop: boolean) => void;
47
+ setSpeed: (speed: number) => void;
48
+ setSubframe: (useSubframe: boolean) => void;
49
+ stop: () => void;
50
+ totalFrames: number;
51
+ }
35
52
  declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
36
53
  static get observedAttributes(): readonly ["animateOnScroll", "autoplay", "controls", "direction", "hover", "loop", "mode", "playOnClick", "playOnVisible", "selector", "speed", "src", "subframe"];
37
54
  static get observedProperties(): string[];
@@ -126,12 +143,12 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
126
143
  convert(_params: ConvertParams): Promise<Result>;
127
144
  destroy(): void;
128
145
  disconnectedCallback(): void;
129
- getLottie(): AnimationItem | null;
146
+ getLottie(): DotLottieAnimationInstance | null;
130
147
  getManifest(): LottieManifest | undefined;
131
148
  getMultiAnimationSettings(): AnimationSettings[];
132
149
  getSegment(): Vector2 | undefined;
133
150
  load(src: string | null): Promise<void>;
134
- loadAnimation(_config: AnimationConfiguration): AnimationItem;
151
+ loadAnimation(_config: AnimationConfiguration): DotLottieAnimationInstance;
135
152
  next(): void;
136
153
  pause(): void;
137
154
  play(): void;
@@ -163,7 +180,7 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
163
180
  hasAutoplay: boolean;
164
181
  hasLoop: boolean;
165
182
  preserveAspectRatio: PreserveAspectRatio;
166
- }): AnimationConfiguration<RendererType.SVG | RendererType.Canvas | RendererType.HTML>;
183
+ }): AnimationConfiguration;
167
184
  private _addEventListeners;
168
185
  private _addIntersectionObserver;
169
186
  private _complete;
@@ -188,7 +205,7 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
188
205
  declare class DotLottiePlayer extends DotLottiePlayerBase {
189
206
  addAnimation: typeof addAnimation;
190
207
  convert: typeof convert;
191
- loadAnimation: typeof _aarsteinmedia_lottie_web.loadAnimation;
208
+ loadAnimation(config: AnimationConfiguration): DotLottieAnimationInstance;
192
209
  protected setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio, rendererType }: {
193
210
  container?: undefined | HTMLElement;
194
211
  rendererType: RendererType;
@@ -196,7 +213,7 @@ declare class DotLottiePlayer extends DotLottiePlayerBase {
196
213
  hasAutoplay: boolean;
197
214
  hasLoop: boolean;
198
215
  preserveAspectRatio: PreserveAspectRatio;
199
- }): AnimationConfiguration<RendererType>;
216
+ }): AnimationConfiguration;
200
217
  }
201
218
 
202
219
  export { MouseOut, PlayerState, DotLottiePlayer as default, tagName };
package/dist/full.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { isServer, PlayMode, PreserveAspectRatio, namespaceSVG, RendererType, createElementID, PlayerEvents, download, getFilename, clamp } from '@aarsteinmedia/lottie-web/utils';
2
- export { PlayMode, PlayerEvents } from '@aarsteinmedia/lottie-web/utils';
2
+ export { PlayMode, PlayerEvents, RendererType } from '@aarsteinmedia/lottie-web/utils';
3
3
  import Lottie from '@aarsteinmedia/lottie-web';
4
4
  import { convert, getAnimationData, addAnimation } from '@aarsteinmedia/lottie-web/dotlottie';
5
5
 
@@ -61,7 +61,7 @@ if (isServer) {
61
61
  }
62
62
  }
63
63
 
64
- var css_248z = "* {\n box-sizing: border-box;\n}\n\n:host {\n --lottie-player-toolbar-height: 35px;\n --lottie-player-toolbar-background-color: #fff;\n --lottie-player-toolbar-icon-color: #000;\n --lottie-player-toolbar-icon-hover-color: #000;\n --lottie-player-toolbar-icon-active-color: #4285f4;\n --lottie-player-seeker-track-color: rgb(0 0 0 / 20%);\n --lottie-player-seeker-thumb-color: #4285f4;\n --lottie-player-seeker-display: block;\n\n width: 100%;\n height: 100%;\n\n &:not([hidden]) {\n display: block;\n }\n\n .main {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n margin: 0;\n padding: 0;\n }\n\n .animation {\n width: 100%;\n height: 100%;\n display: flex;\n margin: 0;\n padding: 0;\n }\n\n [data-controls='true'] .animation {\n height: calc(100% - 35px);\n }\n\n .animation-container {\n position: relative;\n }\n\n .popover {\n position: absolute;\n right: 5px;\n bottom: 40px;\n background-color: var(--lottie-player-toolbar-background-color);\n border-radius: 5px;\n padding: 10px 15px;\n border: solid 2px var(--lottie-player-toolbar-icon-color);\n animation: fade-in 0.2s ease-in-out;\n\n &::before {\n content: '';\n right: 10px;\n border: 7px solid transparent;\n margin-right: -7px;\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n top: 100%;\n border-top-color: var(--lottie-player-toolbar-icon-color);\n }\n }\n\n .error {\n display: flex;\n margin: auto;\n justify-content: center;\n height: 100%;\n align-items: center;\n\n & svg {\n width: 100%;\n height: auto;\n }\n }\n\n .toolbar {\n display: flex;\n place-items: center center;\n background: var(--lottie-player-toolbar-background-color);\n margin: 0;\n height: 35px;\n padding: 5px;\n border-radius: 5px;\n gap: 5px;\n\n &.has-error {\n pointer-events: none;\n opacity: 0.5;\n }\n\n & button {\n cursor: pointer;\n fill: var(--lottie-player-toolbar-icon-color);\n color: var(--lottie-player-toolbar-icon-color);\n background: none;\n border: 0;\n padding: 0;\n outline: 0;\n height: 100%;\n margin: 0;\n align-items: center;\n gap: 5px;\n opacity: 0.9;\n\n &:not([hidden]) {\n display: flex;\n }\n\n &:hover {\n opacity: 1;\n }\n\n &[data-active='true'] {\n opacity: 1;\n fill: var(--lottie-player-toolbar-icon-active-color);\n }\n\n &:disabled {\n opacity: 0.5;\n }\n\n &:focus {\n outline: 0;\n }\n\n & svg {\n pointer-events: none;\n\n & > * {\n fill: inherit;\n }\n }\n\n &.disabled svg {\n display: none;\n }\n }\n }\n\n .progress-container {\n position: relative;\n width: 100%;\n\n &.simple {\n margin-right: 12px;\n }\n }\n\n .seeker {\n appearance: none;\n outline: none;\n width: 100%;\n height: 20px;\n border-radius: 3px;\n border: 0;\n cursor: pointer;\n background-color: transparent;\n\n display: var(--lottie-player-seeker-display);\n color: var(--lottie-player-seeker-thumb-color);\n margin: 0;\n padding: 7.5px 0;\n position: relative;\n z-index: 1;\n\n &::-webkit-slider-runnable-track,\n &::-webkit-slider-thumb {\n appearance: none;\n outline: none;\n }\n\n &::-webkit-slider-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n border: 0;\n background-color: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -webkit-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n }\n\n &:hover::-webkit-slider-thumb,\n &:focus::-webkit-slider-thumb {\n transform: scale(1);\n }\n\n &::-moz-range-progress {\n background-color: var(--lottie-player-seeker-thumb-color);\n height: 5px;\n border-radius: 3px;\n }\n\n &::-moz-range-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background-color: var(--lottie-player-seeker-thumb-color);\n border: 0;\n cursor: pointer;\n -moz-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n }\n\n &:hover::-moz-range-thumb,\n &:focus::-moz-range-thumb {\n transform: scale(1);\n }\n\n &::-ms-track {\n width: 100%;\n height: 5px;\n cursor: pointer;\n background: transparent;\n border-color: transparent;\n color: transparent;\n }\n\n &::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n border-radius: 3px;\n }\n\n &::-ms-fill-lower {\n background-color: var(--lottie-player-seeker-thumb-color);\n border-radius: 3px;\n }\n\n &::-ms-thumb {\n border: 0;\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -ms-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n }\n\n &:hover::-ms-thumb {\n transform: scale(1);\n }\n\n &:focus {\n &::-ms-thumb {\n transform: scale(1);\n }\n\n &::-ms-fill-lower,\n &::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n }\n }\n }\n\n & progress {\n appearance: none;\n outline: none;\n position: absolute;\n width: 100%;\n height: 5px;\n border-radius: 3px;\n border: 0;\n top: 0;\n left: 0;\n margin: 7.5px 0;\n background-color: var(--lottie-player-seeker-track-color);\n pointer-events: none;\n\n &::-webkit-progress-inner-element {\n border-radius: 3px;\n overflow: hidden;\n }\n\n &::-webkit-slider-runnable-track {\n background-color: transparent;\n }\n\n &::-webkit-progress-value {\n background-color: var(--lottie-player-seeker-thumb-color);\n }\n }\n\n & *::-moz-progress-bar {\n background-color: var(--lottie-player-seeker-thumb-color);\n }\n}\n\n@keyframes fade-in {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@media (prefers-color-scheme: dark) {\n :host {\n --lottie-player-toolbar-background-color: #000;\n --lottie-player-toolbar-icon-color: #fff;\n --lottie-player-toolbar-icon-hover-color: #fff;\n --lottie-player-seeker-track-color: rgb(255 255 255 / 60%);\n }\n}\n";
64
+ var css_248z = "* {\n box-sizing: border-box;\n}\n\n:host {\n --lottie-player-toolbar-height: 35px;\n --lottie-player-toolbar-background-color: #fff;\n --lottie-player-toolbar-icon-color: #000;\n --lottie-player-toolbar-icon-hover-color: #000;\n --lottie-player-toolbar-icon-active-color: #4285f4;\n --lottie-player-seeker-track-color: rgb(0 0 0 / 20%);\n --lottie-player-seeker-thumb-color: #4285f4;\n --lottie-player-seeker-display: block;\n\n width: 100%;\n height: 100%;\n\n &:not([hidden]) {\n display: block;\n }\n\n .main {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n margin: 0;\n padding: 0;\n }\n\n .animation {\n width: 100%;\n height: 100%;\n display: flex;\n margin: 0;\n padding: 0;\n }\n\n [data-controls='true'] .animation {\n height: calc(100% - 35px);\n }\n\n .animation-container {\n position: relative;\n }\n\n .popover {\n position: absolute;\n right: 5px;\n bottom: 40px;\n background-color: var(--lottie-player-toolbar-background-color);\n border-radius: 5px;\n padding: 10px 15px;\n border: solid 2px var(--lottie-player-toolbar-icon-color);\n animation: fade-in 0.2s ease-in-out;\n\n &::before {\n content: '';\n right: 10px;\n border: 7px solid transparent;\n margin-right: -7px;\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n top: 100%;\n border-top-color: var(--lottie-player-toolbar-icon-color);\n }\n }\n\n .error {\n display: flex;\n margin: auto;\n justify-content: center;\n height: 100%;\n align-items: center;\n\n & svg {\n width: 100%;\n height: auto;\n }\n }\n\n .toolbar {\n display: flex;\n place-items: center center;\n background: var(--lottie-player-toolbar-background-color);\n margin: 0;\n height: 35px;\n padding: 5px;\n border-radius: 5px;\n gap: 5px;\n\n &.has-error {\n pointer-events: none;\n opacity: 0.5;\n }\n\n & button {\n cursor: pointer;\n fill: var(--lottie-player-toolbar-icon-color);\n color: var(--lottie-player-toolbar-icon-color);\n background: none;\n border: 0;\n padding: 0;\n outline: 0;\n height: 100%;\n margin: 0;\n align-items: center;\n gap: 5px;\n opacity: 0.9;\n\n &:not([hidden]) {\n display: flex;\n }\n\n &:hover {\n opacity: 1;\n }\n\n &[data-active='true'] {\n opacity: 1;\n fill: var(--lottie-player-toolbar-icon-active-color);\n }\n\n &:disabled {\n opacity: 0.5;\n }\n\n &:focus {\n outline: 0;\n }\n\n & svg {\n pointer-events: none;\n\n & > * {\n fill: inherit;\n }\n }\n\n &.disabled svg {\n display: none;\n }\n }\n }\n\n .progress-container {\n position: relative;\n width: 100%;\n\n &.simple {\n margin-right: 12px;\n }\n }\n\n & progress {\n appearance: none;\n outline: none;\n position: absolute;\n width: 100%;\n height: 5px;\n border-radius: 3px;\n border: 0;\n top: 0;\n left: 0;\n margin: 7.5px 0;\n background-color: var(--lottie-player-seeker-track-color);\n pointer-events: none;\n\n &::-webkit-progress-inner-element {\n border-radius: 3px;\n overflow: hidden;\n }\n\n &::-webkit-slider-runnable-track {\n background-color: transparent;\n }\n\n &::-webkit-progress-value {\n background-color: var(--lottie-player-seeker-thumb-color);\n }\n }\n\n .seeker {\n appearance: none;\n outline: none;\n width: 100%;\n height: 20px;\n border-radius: 3px;\n border: 0;\n cursor: pointer;\n background-color: transparent;\n\n display: var(--lottie-player-seeker-display);\n color: var(--lottie-player-seeker-thumb-color);\n margin: 0;\n padding: 7.5px 0;\n position: relative;\n z-index: 1;\n\n &::-webkit-slider-runnable-track,\n &::-webkit-slider-thumb {\n appearance: none;\n outline: none;\n }\n\n &::-webkit-slider-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n border: 0;\n background-color: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -webkit-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n }\n\n &:hover::-webkit-slider-thumb,\n &:focus::-webkit-slider-thumb {\n transform: scale(1);\n }\n\n &::-moz-range-progress {\n background-color: var(--lottie-player-seeker-thumb-color);\n height: 5px;\n border-radius: 3px;\n }\n\n &::-moz-range-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background-color: var(--lottie-player-seeker-thumb-color);\n border: 0;\n cursor: pointer;\n -moz-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n }\n\n &:hover::-moz-range-thumb,\n &:focus::-moz-range-thumb {\n transform: scale(1);\n }\n\n &::-ms-track {\n width: 100%;\n height: 5px;\n cursor: pointer;\n background: transparent;\n border-color: transparent;\n color: transparent;\n }\n\n &::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n border-radius: 3px;\n }\n\n &::-ms-fill-lower {\n background-color: var(--lottie-player-seeker-thumb-color);\n border-radius: 3px;\n }\n\n &::-ms-thumb {\n border: 0;\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -ms-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n }\n\n &:hover::-ms-thumb {\n transform: scale(1);\n }\n\n &:focus {\n &::-ms-thumb {\n transform: scale(1);\n }\n\n &::-ms-fill-lower,\n &::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n }\n }\n }\n\n & *::-moz-progress-bar {\n background-color: var(--lottie-player-seeker-thumb-color);\n }\n}\n\n@keyframes fade-in {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@media (prefers-color-scheme: dark) {\n :host {\n --lottie-player-toolbar-background-color: #000;\n --lottie-player-toolbar-icon-color: #fff;\n --lottie-player-toolbar-icon-hover-color: #fff;\n --lottie-player-seeker-track-color: rgb(255 255 255 / 60%);\n }\n}\n";
65
65
 
66
66
  const boomerangIcon = /* HTML */ `
67
67
  <svg width="24" height="24" aria-hidden="true" focusable="false">
@@ -314,7 +314,11 @@ const pauseIcon = /* HTML */ `
314
314
  return mandatory.every((field)=>Object.hasOwn(json, field));
315
315
  }, isTouch = ()=>'ontouchstart' in window, frameOutput = (frame)=>((frame ?? 0) + 1).toString().padStart(3, '0');
316
316
 
317
- const notImplemented = 'Method is not implemented';
317
+ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
318
+ const styleSheet = new CSSStyleSheet();
319
+ await styleSheet.replace(css_248z);
320
+ return styleSheet;
321
+ };
318
322
  /**
319
323
  * DotLottie Player Web Component.
320
324
  */ class DotLottiePlayerBase extends PropertyCallbackElement {
@@ -328,7 +332,6 @@ const notImplemented = 'Method is not implemented';
328
332
  'direction',
329
333
  'hover',
330
334
  'loop',
331
- // 'mouseout',
332
335
  'mode',
333
336
  'playOnClick',
334
337
  'playOnVisible',
@@ -350,11 +353,7 @@ const notImplemented = 'Method is not implemented';
350
353
  /**
351
354
  * Return the styles for the component.
352
355
  */ static get styles() {
353
- return async ()=>{
354
- const styleSheet = new CSSStyleSheet();
355
- await styleSheet.replace(css_248z);
356
- return styleSheet;
357
- };
356
+ return getStyles;
358
357
  }
359
358
  /**
360
359
  * Whether to trigger next frame with scroll.
@@ -1727,6 +1726,9 @@ const notImplemented = 'Method is not implemented';
1727
1726
  /**
1728
1727
  * DotLottie Player Web Component.
1729
1728
  */ class DotLottiePlayer extends DotLottiePlayerBase {
1729
+ loadAnimation(config) {
1730
+ return Lottie.loadAnimation(config);
1731
+ }
1730
1732
  setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio, rendererType }) {
1731
1733
  const options = {
1732
1734
  autoplay: hasAutoplay,
@@ -1754,7 +1756,8 @@ const notImplemented = 'Method is not implemented';
1754
1756
  {
1755
1757
  options.rendererSettings = {
1756
1758
  ...options.rendererSettings,
1757
- // @ts-expect-error TODO:
1759
+ // `clearCanvas` is canvas-only, but `rendererSettings` is typed as a
1760
+ // renderer union, so we have to narrow/cast in this branch.
1758
1761
  clearCanvas: true,
1759
1762
  preserveAspectRatio,
1760
1763
  progressiveLoad: true
@@ -1765,7 +1768,7 @@ const notImplemented = 'Method is not implemented';
1765
1768
  return options;
1766
1769
  }
1767
1770
  constructor(...args){
1768
- super(...args), this.addAnimation = addAnimation, this.convert = convert, this.loadAnimation = Lottie.loadAnimation;
1771
+ super(...args), this.addAnimation = addAnimation, this.convert = convert;
1769
1772
  }
1770
1773
  }
1771
1774
 
package/dist/light.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import { PlayMode, PreserveAspectRatio, RendererType } from '@aarsteinmedia/lottie-web/utils';
2
- export { PlayMode, PlayerEvents } from '@aarsteinmedia/lottie-web/utils';
3
- import * as _aarsteinmedia_lottie_web_light from '@aarsteinmedia/lottie-web/light';
4
- import { HTMLBooleanAttribute, AnimationData, AnimationDirection, AddAnimationParams, Result, ConvertParams, AnimationItem, LottieManifest, AnimationSettings, Vector2, AnimationConfiguration } from '@aarsteinmedia/lottie-web';
2
+ export { PlayMode, PlayerEvents, RendererType } from '@aarsteinmedia/lottie-web/utils';
3
+ import { HTMLBooleanAttribute, AnimationData, AnimationDirection, AddAnimationParams, Result, ConvertParams, LottieManifest, AnimationSettings, Vector2, AnimationConfiguration } from '@aarsteinmedia/lottie-web';
5
4
 
6
5
  declare abstract class PropertyCallbackElement extends HTMLElement {
7
6
  constructor();
@@ -31,6 +30,24 @@ declare enum PlayerState {
31
30
  }
32
31
  declare const tagName = "dotlottie-player";
33
32
 
33
+ interface DotLottieAnimationInstance {
34
+ addEventListener: (name: string, callback: (...args: any[]) => void) => void;
35
+ autoplay?: boolean;
36
+ currentFrame: number;
37
+ destroy: () => void;
38
+ goToAndPlay: (value: number, isFrame?: boolean) => void;
39
+ goToAndStop: (value: number, isFrame?: boolean) => void;
40
+ pause: () => void;
41
+ play: () => void;
42
+ playDirection: number;
43
+ removeEventListener: (name: string, callback: (...args: any[]) => void) => void;
44
+ setDirection: (direction: AnimationDirection) => void;
45
+ setLoop: (loop: boolean) => void;
46
+ setSpeed: (speed: number) => void;
47
+ setSubframe: (useSubframe: boolean) => void;
48
+ stop: () => void;
49
+ totalFrames: number;
50
+ }
34
51
  declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
35
52
  static get observedAttributes(): readonly ["animateOnScroll", "autoplay", "controls", "direction", "hover", "loop", "mode", "playOnClick", "playOnVisible", "selector", "speed", "src", "subframe"];
36
53
  static get observedProperties(): string[];
@@ -125,12 +142,12 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
125
142
  convert(_params: ConvertParams): Promise<Result>;
126
143
  destroy(): void;
127
144
  disconnectedCallback(): void;
128
- getLottie(): AnimationItem | null;
145
+ getLottie(): DotLottieAnimationInstance | null;
129
146
  getManifest(): LottieManifest | undefined;
130
147
  getMultiAnimationSettings(): AnimationSettings[];
131
148
  getSegment(): Vector2 | undefined;
132
149
  load(src: string | null): Promise<void>;
133
- loadAnimation(_config: AnimationConfiguration): AnimationItem;
150
+ loadAnimation(_config: AnimationConfiguration): DotLottieAnimationInstance;
134
151
  next(): void;
135
152
  pause(): void;
136
153
  play(): void;
@@ -162,7 +179,7 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
162
179
  hasAutoplay: boolean;
163
180
  hasLoop: boolean;
164
181
  preserveAspectRatio: PreserveAspectRatio;
165
- }): AnimationConfiguration<RendererType.SVG | RendererType.Canvas | RendererType.HTML>;
182
+ }): AnimationConfiguration;
166
183
  private _addEventListeners;
167
184
  private _addIntersectionObserver;
168
185
  private _complete;
@@ -185,9 +202,9 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
185
202
  }
186
203
 
187
204
  declare class DotLottiePlayerLight extends DotLottiePlayerBase {
188
- loadAnimation: typeof _aarsteinmedia_lottie_web_light.loadAnimation;
189
205
  get renderer(): RendererType;
190
206
  constructor();
207
+ loadAnimation(config: AnimationConfiguration): DotLottieAnimationInstance;
191
208
  protected setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio, }: {
192
209
  container?: HTMLElement;
193
210
  rendererType: RendererType;
package/dist/light.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { isServer, PlayMode, PreserveAspectRatio, namespaceSVG, RendererType, createElementID, PlayerEvents, download, getFilename, clamp } from '@aarsteinmedia/lottie-web/utils';
2
- export { PlayMode, PlayerEvents } from '@aarsteinmedia/lottie-web/utils';
2
+ export { PlayMode, PlayerEvents, RendererType } from '@aarsteinmedia/lottie-web/utils';
3
3
  import Lottie from '@aarsteinmedia/lottie-web/light';
4
4
  import { convert, getAnimationData } from '@aarsteinmedia/lottie-web/dotlottie';
5
5
 
@@ -61,7 +61,7 @@ if (isServer) {
61
61
  }
62
62
  }
63
63
 
64
- var css_248z = "* {\n box-sizing: border-box;\n}\n\n:host {\n --lottie-player-toolbar-height: 35px;\n --lottie-player-toolbar-background-color: #fff;\n --lottie-player-toolbar-icon-color: #000;\n --lottie-player-toolbar-icon-hover-color: #000;\n --lottie-player-toolbar-icon-active-color: #4285f4;\n --lottie-player-seeker-track-color: rgb(0 0 0 / 20%);\n --lottie-player-seeker-thumb-color: #4285f4;\n --lottie-player-seeker-display: block;\n\n width: 100%;\n height: 100%;\n\n &:not([hidden]) {\n display: block;\n }\n\n .main {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n margin: 0;\n padding: 0;\n }\n\n .animation {\n width: 100%;\n height: 100%;\n display: flex;\n margin: 0;\n padding: 0;\n }\n\n [data-controls='true'] .animation {\n height: calc(100% - 35px);\n }\n\n .animation-container {\n position: relative;\n }\n\n .popover {\n position: absolute;\n right: 5px;\n bottom: 40px;\n background-color: var(--lottie-player-toolbar-background-color);\n border-radius: 5px;\n padding: 10px 15px;\n border: solid 2px var(--lottie-player-toolbar-icon-color);\n animation: fade-in 0.2s ease-in-out;\n\n &::before {\n content: '';\n right: 10px;\n border: 7px solid transparent;\n margin-right: -7px;\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n top: 100%;\n border-top-color: var(--lottie-player-toolbar-icon-color);\n }\n }\n\n .error {\n display: flex;\n margin: auto;\n justify-content: center;\n height: 100%;\n align-items: center;\n\n & svg {\n width: 100%;\n height: auto;\n }\n }\n\n .toolbar {\n display: flex;\n place-items: center center;\n background: var(--lottie-player-toolbar-background-color);\n margin: 0;\n height: 35px;\n padding: 5px;\n border-radius: 5px;\n gap: 5px;\n\n &.has-error {\n pointer-events: none;\n opacity: 0.5;\n }\n\n & button {\n cursor: pointer;\n fill: var(--lottie-player-toolbar-icon-color);\n color: var(--lottie-player-toolbar-icon-color);\n background: none;\n border: 0;\n padding: 0;\n outline: 0;\n height: 100%;\n margin: 0;\n align-items: center;\n gap: 5px;\n opacity: 0.9;\n\n &:not([hidden]) {\n display: flex;\n }\n\n &:hover {\n opacity: 1;\n }\n\n &[data-active='true'] {\n opacity: 1;\n fill: var(--lottie-player-toolbar-icon-active-color);\n }\n\n &:disabled {\n opacity: 0.5;\n }\n\n &:focus {\n outline: 0;\n }\n\n & svg {\n pointer-events: none;\n\n & > * {\n fill: inherit;\n }\n }\n\n &.disabled svg {\n display: none;\n }\n }\n }\n\n .progress-container {\n position: relative;\n width: 100%;\n\n &.simple {\n margin-right: 12px;\n }\n }\n\n .seeker {\n appearance: none;\n outline: none;\n width: 100%;\n height: 20px;\n border-radius: 3px;\n border: 0;\n cursor: pointer;\n background-color: transparent;\n\n display: var(--lottie-player-seeker-display);\n color: var(--lottie-player-seeker-thumb-color);\n margin: 0;\n padding: 7.5px 0;\n position: relative;\n z-index: 1;\n\n &::-webkit-slider-runnable-track,\n &::-webkit-slider-thumb {\n appearance: none;\n outline: none;\n }\n\n &::-webkit-slider-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n border: 0;\n background-color: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -webkit-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n }\n\n &:hover::-webkit-slider-thumb,\n &:focus::-webkit-slider-thumb {\n transform: scale(1);\n }\n\n &::-moz-range-progress {\n background-color: var(--lottie-player-seeker-thumb-color);\n height: 5px;\n border-radius: 3px;\n }\n\n &::-moz-range-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background-color: var(--lottie-player-seeker-thumb-color);\n border: 0;\n cursor: pointer;\n -moz-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n }\n\n &:hover::-moz-range-thumb,\n &:focus::-moz-range-thumb {\n transform: scale(1);\n }\n\n &::-ms-track {\n width: 100%;\n height: 5px;\n cursor: pointer;\n background: transparent;\n border-color: transparent;\n color: transparent;\n }\n\n &::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n border-radius: 3px;\n }\n\n &::-ms-fill-lower {\n background-color: var(--lottie-player-seeker-thumb-color);\n border-radius: 3px;\n }\n\n &::-ms-thumb {\n border: 0;\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -ms-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n }\n\n &:hover::-ms-thumb {\n transform: scale(1);\n }\n\n &:focus {\n &::-ms-thumb {\n transform: scale(1);\n }\n\n &::-ms-fill-lower,\n &::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n }\n }\n }\n\n & progress {\n appearance: none;\n outline: none;\n position: absolute;\n width: 100%;\n height: 5px;\n border-radius: 3px;\n border: 0;\n top: 0;\n left: 0;\n margin: 7.5px 0;\n background-color: var(--lottie-player-seeker-track-color);\n pointer-events: none;\n\n &::-webkit-progress-inner-element {\n border-radius: 3px;\n overflow: hidden;\n }\n\n &::-webkit-slider-runnable-track {\n background-color: transparent;\n }\n\n &::-webkit-progress-value {\n background-color: var(--lottie-player-seeker-thumb-color);\n }\n }\n\n & *::-moz-progress-bar {\n background-color: var(--lottie-player-seeker-thumb-color);\n }\n}\n\n@keyframes fade-in {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@media (prefers-color-scheme: dark) {\n :host {\n --lottie-player-toolbar-background-color: #000;\n --lottie-player-toolbar-icon-color: #fff;\n --lottie-player-toolbar-icon-hover-color: #fff;\n --lottie-player-seeker-track-color: rgb(255 255 255 / 60%);\n }\n}\n";
64
+ var css_248z = "* {\n box-sizing: border-box;\n}\n\n:host {\n --lottie-player-toolbar-height: 35px;\n --lottie-player-toolbar-background-color: #fff;\n --lottie-player-toolbar-icon-color: #000;\n --lottie-player-toolbar-icon-hover-color: #000;\n --lottie-player-toolbar-icon-active-color: #4285f4;\n --lottie-player-seeker-track-color: rgb(0 0 0 / 20%);\n --lottie-player-seeker-thumb-color: #4285f4;\n --lottie-player-seeker-display: block;\n\n width: 100%;\n height: 100%;\n\n &:not([hidden]) {\n display: block;\n }\n\n .main {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n margin: 0;\n padding: 0;\n }\n\n .animation {\n width: 100%;\n height: 100%;\n display: flex;\n margin: 0;\n padding: 0;\n }\n\n [data-controls='true'] .animation {\n height: calc(100% - 35px);\n }\n\n .animation-container {\n position: relative;\n }\n\n .popover {\n position: absolute;\n right: 5px;\n bottom: 40px;\n background-color: var(--lottie-player-toolbar-background-color);\n border-radius: 5px;\n padding: 10px 15px;\n border: solid 2px var(--lottie-player-toolbar-icon-color);\n animation: fade-in 0.2s ease-in-out;\n\n &::before {\n content: '';\n right: 10px;\n border: 7px solid transparent;\n margin-right: -7px;\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n top: 100%;\n border-top-color: var(--lottie-player-toolbar-icon-color);\n }\n }\n\n .error {\n display: flex;\n margin: auto;\n justify-content: center;\n height: 100%;\n align-items: center;\n\n & svg {\n width: 100%;\n height: auto;\n }\n }\n\n .toolbar {\n display: flex;\n place-items: center center;\n background: var(--lottie-player-toolbar-background-color);\n margin: 0;\n height: 35px;\n padding: 5px;\n border-radius: 5px;\n gap: 5px;\n\n &.has-error {\n pointer-events: none;\n opacity: 0.5;\n }\n\n & button {\n cursor: pointer;\n fill: var(--lottie-player-toolbar-icon-color);\n color: var(--lottie-player-toolbar-icon-color);\n background: none;\n border: 0;\n padding: 0;\n outline: 0;\n height: 100%;\n margin: 0;\n align-items: center;\n gap: 5px;\n opacity: 0.9;\n\n &:not([hidden]) {\n display: flex;\n }\n\n &:hover {\n opacity: 1;\n }\n\n &[data-active='true'] {\n opacity: 1;\n fill: var(--lottie-player-toolbar-icon-active-color);\n }\n\n &:disabled {\n opacity: 0.5;\n }\n\n &:focus {\n outline: 0;\n }\n\n & svg {\n pointer-events: none;\n\n & > * {\n fill: inherit;\n }\n }\n\n &.disabled svg {\n display: none;\n }\n }\n }\n\n .progress-container {\n position: relative;\n width: 100%;\n\n &.simple {\n margin-right: 12px;\n }\n }\n\n & progress {\n appearance: none;\n outline: none;\n position: absolute;\n width: 100%;\n height: 5px;\n border-radius: 3px;\n border: 0;\n top: 0;\n left: 0;\n margin: 7.5px 0;\n background-color: var(--lottie-player-seeker-track-color);\n pointer-events: none;\n\n &::-webkit-progress-inner-element {\n border-radius: 3px;\n overflow: hidden;\n }\n\n &::-webkit-slider-runnable-track {\n background-color: transparent;\n }\n\n &::-webkit-progress-value {\n background-color: var(--lottie-player-seeker-thumb-color);\n }\n }\n\n .seeker {\n appearance: none;\n outline: none;\n width: 100%;\n height: 20px;\n border-radius: 3px;\n border: 0;\n cursor: pointer;\n background-color: transparent;\n\n display: var(--lottie-player-seeker-display);\n color: var(--lottie-player-seeker-thumb-color);\n margin: 0;\n padding: 7.5px 0;\n position: relative;\n z-index: 1;\n\n &::-webkit-slider-runnable-track,\n &::-webkit-slider-thumb {\n appearance: none;\n outline: none;\n }\n\n &::-webkit-slider-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n border: 0;\n background-color: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -webkit-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n }\n\n &:hover::-webkit-slider-thumb,\n &:focus::-webkit-slider-thumb {\n transform: scale(1);\n }\n\n &::-moz-range-progress {\n background-color: var(--lottie-player-seeker-thumb-color);\n height: 5px;\n border-radius: 3px;\n }\n\n &::-moz-range-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background-color: var(--lottie-player-seeker-thumb-color);\n border: 0;\n cursor: pointer;\n -moz-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n }\n\n &:hover::-moz-range-thumb,\n &:focus::-moz-range-thumb {\n transform: scale(1);\n }\n\n &::-ms-track {\n width: 100%;\n height: 5px;\n cursor: pointer;\n background: transparent;\n border-color: transparent;\n color: transparent;\n }\n\n &::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n border-radius: 3px;\n }\n\n &::-ms-fill-lower {\n background-color: var(--lottie-player-seeker-thumb-color);\n border-radius: 3px;\n }\n\n &::-ms-thumb {\n border: 0;\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -ms-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n }\n\n &:hover::-ms-thumb {\n transform: scale(1);\n }\n\n &:focus {\n &::-ms-thumb {\n transform: scale(1);\n }\n\n &::-ms-fill-lower,\n &::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n }\n }\n }\n\n & *::-moz-progress-bar {\n background-color: var(--lottie-player-seeker-thumb-color);\n }\n}\n\n@keyframes fade-in {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@media (prefers-color-scheme: dark) {\n :host {\n --lottie-player-toolbar-background-color: #000;\n --lottie-player-toolbar-icon-color: #fff;\n --lottie-player-toolbar-icon-hover-color: #fff;\n --lottie-player-seeker-track-color: rgb(255 255 255 / 60%);\n }\n}\n";
65
65
 
66
66
  const boomerangIcon = /* HTML */ `
67
67
  <svg width="24" height="24" aria-hidden="true" focusable="false">
@@ -314,7 +314,11 @@ const pauseIcon = /* HTML */ `
314
314
  return mandatory.every((field)=>Object.hasOwn(json, field));
315
315
  }, isTouch = ()=>'ontouchstart' in window, frameOutput = (frame)=>((frame ?? 0) + 1).toString().padStart(3, '0');
316
316
 
317
- const notImplemented = 'Method is not implemented';
317
+ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
318
+ const styleSheet = new CSSStyleSheet();
319
+ await styleSheet.replace(css_248z);
320
+ return styleSheet;
321
+ };
318
322
  /**
319
323
  * DotLottie Player Web Component.
320
324
  */ class DotLottiePlayerBase extends PropertyCallbackElement {
@@ -328,7 +332,6 @@ const notImplemented = 'Method is not implemented';
328
332
  'direction',
329
333
  'hover',
330
334
  'loop',
331
- // 'mouseout',
332
335
  'mode',
333
336
  'playOnClick',
334
337
  'playOnVisible',
@@ -350,11 +353,7 @@ const notImplemented = 'Method is not implemented';
350
353
  /**
351
354
  * Return the styles for the component.
352
355
  */ static get styles() {
353
- return async ()=>{
354
- const styleSheet = new CSSStyleSheet();
355
- await styleSheet.replace(css_248z);
356
- return styleSheet;
357
- };
356
+ return getStyles;
358
357
  }
359
358
  /**
360
359
  * Whether to trigger next frame with scroll.
@@ -1731,10 +1730,12 @@ const notImplemented = 'Method is not implemented';
1731
1730
  return RendererType.SVG;
1732
1731
  }
1733
1732
  constructor(){
1734
- super(), // @ts-expect-error: TODO:
1735
- this.loadAnimation = Lottie.loadAnimation;
1733
+ super();
1736
1734
  this.isLight = true;
1737
1735
  }
1736
+ loadAnimation(config) {
1737
+ return Lottie.loadAnimation(config);
1738
+ }
1738
1739
  setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio }) {
1739
1740
  const options = {
1740
1741
  autoplay: hasAutoplay,
package/dist/svg.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import { PlayMode, PreserveAspectRatio, RendererType } from '@aarsteinmedia/lottie-web/utils';
2
- export { PlayMode, PlayerEvents } from '@aarsteinmedia/lottie-web/utils';
3
- import * as _aarsteinmedia_lottie_web_svg from '@aarsteinmedia/lottie-web/svg';
4
- import { HTMLBooleanAttribute, AnimationData, AnimationDirection, AddAnimationParams, Result, ConvertParams, AnimationItem, LottieManifest, AnimationSettings, Vector2, AnimationConfiguration } from '@aarsteinmedia/lottie-web';
2
+ export { PlayMode, PlayerEvents, RendererType } from '@aarsteinmedia/lottie-web/utils';
3
+ import { HTMLBooleanAttribute, AnimationData, AnimationDirection, AddAnimationParams, Result, ConvertParams, LottieManifest, AnimationSettings, Vector2, AnimationConfiguration } from '@aarsteinmedia/lottie-web';
5
4
 
6
5
  declare abstract class PropertyCallbackElement extends HTMLElement {
7
6
  constructor();
@@ -31,6 +30,24 @@ declare enum PlayerState {
31
30
  }
32
31
  declare const tagName = "dotlottie-player";
33
32
 
33
+ interface DotLottieAnimationInstance {
34
+ addEventListener: (name: string, callback: (...args: any[]) => void) => void;
35
+ autoplay?: boolean;
36
+ currentFrame: number;
37
+ destroy: () => void;
38
+ goToAndPlay: (value: number, isFrame?: boolean) => void;
39
+ goToAndStop: (value: number, isFrame?: boolean) => void;
40
+ pause: () => void;
41
+ play: () => void;
42
+ playDirection: number;
43
+ removeEventListener: (name: string, callback: (...args: any[]) => void) => void;
44
+ setDirection: (direction: AnimationDirection) => void;
45
+ setLoop: (loop: boolean) => void;
46
+ setSpeed: (speed: number) => void;
47
+ setSubframe: (useSubframe: boolean) => void;
48
+ stop: () => void;
49
+ totalFrames: number;
50
+ }
34
51
  declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
35
52
  static get observedAttributes(): readonly ["animateOnScroll", "autoplay", "controls", "direction", "hover", "loop", "mode", "playOnClick", "playOnVisible", "selector", "speed", "src", "subframe"];
36
53
  static get observedProperties(): string[];
@@ -125,12 +142,12 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
125
142
  convert(_params: ConvertParams): Promise<Result>;
126
143
  destroy(): void;
127
144
  disconnectedCallback(): void;
128
- getLottie(): AnimationItem | null;
145
+ getLottie(): DotLottieAnimationInstance | null;
129
146
  getManifest(): LottieManifest | undefined;
130
147
  getMultiAnimationSettings(): AnimationSettings[];
131
148
  getSegment(): Vector2 | undefined;
132
149
  load(src: string | null): Promise<void>;
133
- loadAnimation(_config: AnimationConfiguration): AnimationItem;
150
+ loadAnimation(_config: AnimationConfiguration): DotLottieAnimationInstance;
134
151
  next(): void;
135
152
  pause(): void;
136
153
  play(): void;
@@ -162,7 +179,7 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
162
179
  hasAutoplay: boolean;
163
180
  hasLoop: boolean;
164
181
  preserveAspectRatio: PreserveAspectRatio;
165
- }): AnimationConfiguration<RendererType.SVG | RendererType.Canvas | RendererType.HTML>;
182
+ }): AnimationConfiguration;
166
183
  private _addEventListeners;
167
184
  private _addIntersectionObserver;
168
185
  private _complete;
@@ -185,9 +202,9 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
185
202
  }
186
203
 
187
204
  declare class DotLottiePlayerSVG extends DotLottiePlayerBase {
188
- loadAnimation: typeof _aarsteinmedia_lottie_web_svg.loadAnimation;
189
205
  get renderer(): RendererType;
190
206
  constructor();
207
+ loadAnimation(config: AnimationConfiguration): DotLottieAnimationInstance;
191
208
  protected setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio, }: {
192
209
  container?: undefined | HTMLElement;
193
210
  rendererType: RendererType;