@aarsteinmedia/dotlottie-player 6.0.5 → 6.1.1

package/CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Changelog was only added since [3.2.3], so it's not exhaustive. [Please report any missing noteable changes to us](https://github.com/aarsteinmedia/dotlottie-player/issues), and we'll add them promptly.
 
+## [6.1.1] - 13-10-2025
+
+### Changed
+
+- Added attributes:
+  - `delay` – Delay playback on playOnVisible, in miliseconds
+  - `mouseout` – Action on mouseout
+  - `once` – Whether, if playOnVisible is true, to play once or anytime animation is in view
+  - `playOnClick` – Whether to toggle play on click
+  - `playOnVisible` – Play when visible
+  - `selector` – Play on clicked element by id attribute
+
 ## [6.0.5] - 12-09-2025
 
 ### Changed

package/README.md

@@ -306,13 +306,21 @@ export default defineNuxtPlugin(({ vueApp }) => {
 | `background`              | Background color                                                                                                              | `string`                                 | `undefined`       |
 | `controls`                | Show controls                                                                                                                 | `boolean`                                | `false`           |
 | `count`                   | Number of times to loop animation                                                                                             | `number`                                 | `undefined`       |
+| `delay`                   | Delay playback on playOnVisible, in miliseconds                                                                               | `number`                                 | `0`               | 
+| `description`             | Description for screen readers                                                                                                | `string`                                 | `undefined`       |
 | `direction`               | Direction of animation                                                                                                        | `1` \| `-1`                              | `1`               |
 | `dontFreezeOnBlur`        | Whether to freeze playback on window blur. This is default behavior, but can be disabled                                      | `boolean`                                | `1`               |
 | `hover`                   | Whether to play on mouse hover                                                                                                | `boolean`                                | `false`           |
+| `intermission`            | Pause between loop intrations, in miliseconds                                                                                 | `number`                                 | `0`               |
 | `loop`                    | Whether to loop animation                                                                                                     | `boolean`                                | `false`           |
 | `mode`                    | Play mode                                                                                                                     | `normal` \| `bounce`                     | `normal`          |
+| `mouseout`                | Action on mouseout                                                                                                            | `void` \| `stop` \| `pause` \| `reverse` | `stop`            |
 | `objectfit`               | Resizing of animation in container                                                                                            | `contain` \| `cover` \| `fill` \| `none` | `contain`         |
+| `once`                    | Whether, if playOnVisible is true, to play once or anytime animation is in view                                               | `boolean`                                | `false`           |
+| `playOnClick`             | Whether to toggle play on click                                                                                               | `boolean`                                | `false`           |
+| `playOnVisible`           | Play when visible                                                                                                             | `boolean`                                | `false`           |
 | `renderer`                | Renderer to use                                                                                                               | `svg` \| `canvas` \| `html`              | `svg`             |
+| `selector`                | Play on clicked element by id attribute                                                                                       | `string`                                 | `undefined`       |
 | `speed`                   | Animation speed                                                                                                               | `number`                                 | `1`               |
 | `src` _(required)_        | URL to LottieJSON or dotLottie                                                                                                | `string`                                 | `undefined`       |
 | `subframe`                | When enabled this can help to reduce flicker on some animations, especially on Safari and iOS devices.                        | `boolean`                                | `false`           |

package/dist/canvas.d.ts

@@ -111,7 +111,7 @@ declare function renderControls(this: DotLottiePlayerBase): void;
 declare function renderPlayer(this: DotLottiePlayerBase): Promise<void>;
 
 declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
-    static get observedAttributes(): string[];
+    static get observedAttributes(): readonly ["animateOnScroll", "autoplay", "controls", "direction", "hover", "loop", "mode", "playOnClick", "playOnVisible", "selector", "speed", "src", "subframe"];
     static get observedProperties(): string[];
     static get styles(): () => Promise<CSSStyleSheet>;
     isLight: boolean;
@@ -131,6 +131,8 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     set count(value: number);
     get count(): number;
     get currentAnimation(): number;
+    set delay(value: number);
+    get delay(): number;
     set description(value: string | null);
     get description(): string | null;
     set direction(value: AnimationDirection);
@@ -146,12 +148,22 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     get loop(): Loop;
     set mode(value: PlayMode);
     get mode(): PlayMode;
+    set mouseout(value: 'void' | 'stop' | 'pause' | 'reverse');
+    get mouseout(): "void" | "stop" | "pause" | "reverse";
     set objectfit(value: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down');
     get objectfit(): "contain" | "cover" | "fill" | "none" | "scale-down";
+    set once(value: boolean);
+    get once(): boolean;
+    set playOnClick(value: boolean);
+    get playOnClick(): boolean;
+    set playOnVisible(value: boolean);
+    get playOnVisible(): boolean;
     set preserveAspectRatio(value: PreserveAspectRatio | null);
     get preserveAspectRatio(): PreserveAspectRatio | null;
     set renderer(value: RendererType);
     get renderer(): RendererType;
+    set selector(value: string | null);
+    get selector(): string | null;
     set simple(value: boolean);
     get simple(): boolean;
     set speed(value: number);
@@ -186,7 +198,7 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     private _segment?;
     constructor();
     addAnimation(_params: AddAnimationParams): Promise<Result>;
-    attributeChangedCallback(name: string, _oldValue: unknown, value: string): Promise<void>;
+    attributeChangedCallback(name: typeof DotLottiePlayerBase.observedAttributes[number], _oldValue: unknown, value: string): Promise<void>;
     connectedCallback(): void;
     convert(_params: ConvertParams): Promise<Result>;
     destroy(): void;
@@ -218,6 +230,7 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     togglePlay(): void;
     protected _freeze(): void;
     protected _handleBlur(): void;
+    protected _handleClick(): void;
     protected _handleSeekChange({ target }: Event): void;
     protected _handleSettingsClick({ target }: Event): void;
     protected setOptions(_options: {
@@ -238,6 +251,7 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     private _getOptions;
     private _handleScroll;
     private _handleWindowBlur;
+    private _intersectionObserverFallback;
     private _loopComplete;
     private _mouseEnter;
     private _mouseLeave;