@momentum-design/components 0.133.40 → 0.134.0

package/dist/components/animation/animation.component.d.ts

@@ -20,6 +20,12 @@ declare class Animation extends Component {
      * @default undefined
      */
     name?: AnimationNames;
+    /**
+     * URL pointing to a Lottie JSON animation file.
+     * When provided, it takes precedence over the `name` property.
+     * @default undefined
+     */
+    src?: string;
     /**
      * How many times to loop the animation
      * - "true" - infinite
@@ -48,6 +54,11 @@ declare class Animation extends Component {
      * @internal
      */
     private lottieInstance?;
+    /**
+     * Cached animation data from the last successful fetch/import
+     * @internal
+     */
+    private cachedAnimationData?;
     /**
      * Container for the animation
      * @internal
@@ -60,9 +71,13 @@ declare class Animation extends Component {
     get animation(): AnimationItem | undefined;
     private getLoopValue;
     /**
-     * Create new lotty instance for the loaded data
+     * Create new lottie instance for the loaded data
      */
     private onLoadSuccessHandler;
+    /**
+     * Create or re-create the lottie instance with the given animation data
+     */
+    private createLottieInstance;
     /**
      * Error handler for animation loading
      */
@@ -71,6 +86,10 @@ declare class Animation extends Component {
      * Import animation data dynamically
      */
     private getAnimationData;
+    /**
+     * Fetch animation data from a URL
+     */
+    private fetchAnimationFromUrl;
     updated(changedProperties: PropertyValues): void;
     disconnectedCallback(): void;
     /**

package/dist/components/animation/animation.component.js

@@ -91,9 +91,18 @@ class Animation extends Component {
         return true;
     }
     /**
-     * Create new lotty instance for the loaded data
+     * Create new lottie instance for the loaded data
      */
     onLoadSuccessHandler(animationData) {
+        this.cachedAnimationData = animationData;
+        this.createLottieInstance(animationData);
+        // Dispatch load event when animation ready to play
+        this.dispatchEvent(new CustomEvent('load', { bubbles: true, cancelable: true, detail: { name: this.name } }));
+    }
+    /**
+     * Create or re-create the lottie instance with the given animation data
+     */
+    createLottieInstance(animationData) {
         if (this.lottieInstance) {
             this.lottieInstance.removeEventListener('complete', this.onCompleteHandler);
             this.lottieInstance.destroy();
@@ -109,8 +118,6 @@ class Animation extends Component {
             });
             this.lottieInstance.addEventListener('complete', this.onCompleteHandler);
         }
-        // Dispatch load event when animation ready to play
-        this.dispatchEvent(new CustomEvent('load', { bubbles: true, cancelable: true, detail: { name: this.name } }));
     }
     /**
      * Error handler for animation loading
@@ -127,7 +134,10 @@ class Animation extends Component {
      * Import animation data dynamically
      */
     getAnimationData() {
-        if (this.name && animationManifest[this.name]) {
+        if (this.src) {
+            this.fetchAnimationFromUrl(this.src);
+        }
+        else if (this.name && animationManifest[this.name]) {
             // Make sure the path is point to a folder (and its sub-folders) that contains animation data only
             // otherwise bundlers (eg. webpack) will try to process everything in this folder including the types.d.ts
             const path = animationManifest[this.name].replace(/^\.\/lottie/, '');
@@ -139,14 +149,32 @@ class Animation extends Component {
             this.onLoadFailHandler(new Error(`Invalid animation name: ${this.name}`));
         }
     }
+    /**
+     * Fetch animation data from a URL
+     */
+    fetchAnimationFromUrl(url) {
+        fetch(url)
+            .then(response => {
+            if (!response.ok) {
+                throw new Error(`Failed to fetch animation from URL: ${url} (${response.status})`);
+            }
+            return response.json();
+        })
+            .then((animationData) => this.onLoadSuccessHandler(animationData))
+            .catch((error) => this.onLoadFailHandler(error));
+    }
     updated(changedProperties) {
         super.updated(changedProperties);
-        // fetch animation data when new animation needed or any animation parameter changed
-        // note: we re-create the animation for parameter changes as well, because lottie
-        //       does not API for changing them on the fly
-        if (changedProperties.has('name') || changedProperties.has('loop') || changedProperties.has('autoplay')) {
+        // fetch animation data when the animation source changes
+        if (changedProperties.has('name') || changedProperties.has('src')) {
+            this.cachedAnimationData = undefined;
             this.getAnimationData();
         }
+        else if ((changedProperties.has('loop') || changedProperties.has('autoplay')) && this.cachedAnimationData) {
+            // re-create the lottie instance from cache for parameter changes,
+            // because lottie does not have an API for changing them on the fly
+            this.createLottieInstance(this.cachedAnimationData);
+        }
         if (changedProperties.has('ariaLabel') || changedProperties.has('ariaLabelledby')) {
             this.role = this.ariaLabel || this.ariaLabelledby ? ROLE.IMG : null;
         }
@@ -169,6 +197,10 @@ __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)
 ], Animation.prototype, "name", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Animation.prototype, "src", void 0);
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)

package/dist/custom-elements.json

@@ -1846,6 +1846,44 @@
               "attribute": "autoplay",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "createLottieInstance",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "animationData",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ],
+              "description": "Create or re-create the lottie instance with the given animation data"
+            },
+            {
+              "kind": "method",
+              "name": "fetchAnimationFromUrl",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "url",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Fetch animation data from a URL"
+            },
             {
               "kind": "method",
               "name": "getAnimationData",
@@ -1925,7 +1963,18 @@
                   }
                 }
               ],
-              "description": "Create new lotty instance for the loaded data"
+              "description": "Create new lottie instance for the loaded data"
+            },
+            {
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "URL pointing to a Lottie JSON animation file.\nWhen provided, it takes precedence over the `name` property.",
+              "default": "undefined",
+              "attribute": "src",
+              "reflects": true
             }
           ],
           "events": [
@@ -1958,6 +2007,15 @@
               "default": "undefined",
               "fieldName": "name"
             },
+            {
+              "name": "src",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "URL pointing to a Lottie JSON animation file.\nWhen provided, it takes precedence over the `name` property.",
+              "default": "undefined",
+              "fieldName": "src"
+            },
             {
               "name": "loop",
               "type": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.133.40",
+  "version": "0.134.0",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"