@momentum-design/components 0.129.17 → 0.129.18

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

@@ -1,4 +1,4 @@
-import { CSSResult } from 'lit';
+import type { CSSResult, PropertyValues } from 'lit';
 import { AnimationItem } from 'lottie-web/build/player/lottie_light';
 import { Component } from '../../models';
 import type { AnimationNames, LoopType } from './animation.types';
@@ -17,6 +17,7 @@ import type { AnimationNames, LoopType } from './animation.types';
 declare class Animation extends Component {
     /**
      * Name of the animation (= filename)
+     * @default undefined
      */
     name?: AnimationNames;
     /**
@@ -24,30 +25,37 @@ declare class Animation extends Component {
      * - "true" - infinite
      * - "false" - no loop
      * - number - number of times to loop
+     * @default 'true'
      */
     loop?: LoopType;
     /**
      * Weather start the animation automatically
+     * @default true
      */
     autoplay?: boolean;
     /**
      * Aria-label attribute to be set for accessibility
+     * @default null
      */
     ariaLabel: string | null;
     /**
      * Aria-labelledby attribute to be set for accessibility
+     * @default null
      */
     ariaLabelledby: string | null;
     /**
      * Lottie animation instance
+     * @internal
      */
     private lottieInstance?;
     /**
      * Container for the animation
+     * @internal
      */
     private containerRef;
     /**
      * Exposed API of the animation library (lottie)
+     * @internal
      */
     get animation(): AnimationItem | undefined;
     private getLoopValue;
@@ -63,15 +71,16 @@ declare class Animation extends Component {
      * Import animation data dynamically
      */
     private getAnimationData;
-    updated(changedProperties: Map<string, any>): void;
+    updated(changedProperties: PropertyValues): void;
     disconnectedCallback(): void;
     /**
      * Re-dispatch the complete event from the animation library
      *
      * This handler called with the animation instance instead of the component instance
      * so we need to bind it to the component instance. The arrow function just does that.
+     * @internal
      */
-    onCompleteHandler: () => void;
+    private onCompleteHandler;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

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

@@ -31,31 +31,32 @@ import { DEFAULTS } from './animation.constants';
 class Animation extends Component {
     constructor() {
         super(...arguments);
-        /**
-         * Name of the animation (= filename)
-         */
-        this.name = DEFAULTS.NAME;
         /**
          * How many times to loop the animation
          * - "true" - infinite
          * - "false" - no loop
          * - number - number of times to loop
+         * @default 'true'
          */
         this.loop = DEFAULTS.LOOP;
         /**
          * Weather start the animation automatically
+         * @default true
          */
         this.autoplay = DEFAULTS.AUTO_PLAY;
         /**
          * Aria-label attribute to be set for accessibility
+         * @default null
          */
         this.ariaLabel = null;
         /**
          * Aria-labelledby attribute to be set for accessibility
+         * @default null
          */
         this.ariaLabelledby = null;
         /**
          * Container for the animation
+         * @internal
          */
         this.containerRef = createRef();
         /**
@@ -63,6 +64,7 @@ class Animation extends Component {
          *
          * This handler called with the animation instance instead of the component instance
          * so we need to bind it to the component instance. The arrow function just does that.
+         * @internal
          */
         this.onCompleteHandler = () => {
             const event = new CustomEvent('complete', {
@@ -74,6 +76,7 @@ class Animation extends Component {
     }
     /**
      * Exposed API of the animation library (lottie)
+     * @internal
      */
     get animation() {
         return this.lottieInstance;

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

@@ -1,6 +1,5 @@
 declare const TAG_NAME: "mdc-animation";
 declare const DEFAULTS: {
-    readonly NAME: undefined;
     readonly AUTO_PLAY: true;
     readonly LOOP: "true";
 };

package/dist/components/animation/animation.constants.js

@@ -1,7 +1,6 @@
 import utils from '../../utils/tag-name';
 const TAG_NAME = utils.constructTagName('animation');
 const DEFAULTS = {
-    NAME: undefined,
     AUTO_PLAY: true,
     LOOP: 'true',
 };

package/dist/custom-elements.json

@@ -1673,12 +1673,6 @@
           "description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
           "name": "Animation",
           "members": [
-            {
-              "kind": "field",
-              "name": "animation",
-              "description": "Exposed API of the animation library (lottie)",
-              "readonly": true
-            },
             {
               "kind": "field",
               "name": "ariaLabel",
@@ -1706,28 +1700,30 @@
                 "text": "boolean | undefined"
               },
               "description": "Weather start the animation automatically",
+              "default": "true",
               "attribute": "autoplay",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "containerRef",
-              "type": {
-                "text": "Ref<HTMLDivElement>"
-              },
-              "privacy": "private",
-              "description": "Container for the animation"
-            },
             {
               "kind": "method",
               "name": "getAnimationData",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "description": "Import animation data dynamically"
             },
             {
               "kind": "method",
               "name": "getLoopValue",
-              "privacy": "private"
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean | number"
+                }
+              }
             },
             {
               "kind": "field",
@@ -1736,18 +1732,10 @@
                 "text": "LoopType | undefined"
               },
               "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
+              "default": "'true'",
               "attribute": "loop",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "lottieInstance",
-              "type": {
-                "text": "AnimationItem | undefined"
-              },
-              "privacy": "private",
-              "description": "Lottie animation instance"
-            },
             {
               "kind": "field",
               "name": "name",
@@ -1755,18 +1743,19 @@
                 "text": "AnimationNames | undefined"
               },
               "description": "Name of the animation (= filename)",
+              "default": "undefined",
               "attribute": "name",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "onCompleteHandler",
-              "description": "Re-dispatch the complete event from the animation library\n\nThis handler called with the animation instance instead of the component instance\nso we need to bind it to the component instance. The arrow function just does that."
-            },
             {
               "kind": "method",
               "name": "onLoadFailHandler",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
                   "name": "error",
@@ -1781,6 +1770,11 @@
               "kind": "method",
               "name": "onLoadSuccessHandler",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
                   "name": "animationData",
@@ -1819,6 +1813,7 @@
                 "text": "AnimationNames | undefined"
               },
               "description": "Name of the animation (= filename)",
+              "default": "undefined",
               "fieldName": "name"
             },
             {
@@ -1827,6 +1822,7 @@
                 "text": "LoopType | undefined"
               },
               "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
+              "default": "'true'",
               "fieldName": "loop"
             },
             {
@@ -1835,6 +1831,7 @@
                 "text": "boolean | undefined"
               },
               "description": "Weather start the animation automatically",
+              "default": "true",
               "fieldName": "autoplay"
             },
             {

package/package.json

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