@momentum-design/components 0.129.16 → 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/components/badge/badge.component.d.ts

@@ -109,14 +109,6 @@ declare class Badge extends Badge_base {
      * Otherwise, the role will be null.
      */
     private setRoleByAriaLabel;
-    /**
-     * Generates the badge content based on the badge type.
-     * Utilizes various helper methods to create the appropriate badge template based on the
-     * current badge type. Supports 'dot', 'icon', 'counter', 'success', 'warning', and 'error'
-     * types, returning the corresponding template result for each type.
-     * @returns the TemplateResult for the current badge type.
-     */
-    private getBadgeContentBasedOnType;
     update(changedProperties: PropertyValues): void;
     render(): TemplateResult;
     static styles: Array<CSSResult>;

package/dist/components/badge/badge.component.js

@@ -78,7 +78,7 @@ class Badge extends IconNameMixin(Component) {
          * where the badge will be layered on top of a button.
          * @default false
          */
-        this.overlay = false;
+        this.overlay = DEFAULTS.OVERLAY;
         /**
          * Aria-label attribute to be set for accessibility
          * @default null
@@ -156,14 +156,13 @@ class Badge extends IconNameMixin(Component) {
             this.role = null;
         }
     }
-    /**
-     * Generates the badge content based on the badge type.
-     * Utilizes various helper methods to create the appropriate badge template based on the
-     * current badge type. Supports 'dot', 'icon', 'counter', 'success', 'warning', and 'error'
-     * types, returning the corresponding template result for each type.
-     * @returns the TemplateResult for the current badge type.
-     */
-    getBadgeContentBasedOnType() {
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('ariaLabel')) {
+            this.setRoleByAriaLabel();
+        }
+    }
+    render() {
         if (this.variant && !Object.values(ICON_VARIANT).includes(this.variant)) {
             this.variant = DEFAULTS.VARIANT;
         }
@@ -185,15 +184,6 @@ class Badge extends IconNameMixin(Component) {
                 return this.getBadgeDot();
         }
     }
-    update(changedProperties) {
-        super.update(changedProperties);
-        if (changedProperties.has('ariaLabel')) {
-            this.setRoleByAriaLabel();
-        }
-    }
-    render() {
-        return this.getBadgeContentBasedOnType();
-    }
 }
 Badge.styles = [...Component.styles, ...styles];
 __decorate([
@@ -214,7 +204,7 @@ __decorate([
 ], Badge.prototype, "maxCounter", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], Badge.prototype, "overlay", void 0);
 __decorate([
     property({ type: String, attribute: 'aria-label' }),

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

@@ -23,5 +23,6 @@ declare const DEFAULTS: {
     readonly MAX_COUNTER_LIMIT: 999;
     readonly VARIANT: "primary";
     readonly ICON_SIZE: 1;
+    readonly OVERLAY: false;
 };
-export { TAG_NAME, DEFAULTS, TYPE, ICON_VARIANT, ICON_NAMES_LIST };
+export { DEFAULTS, ICON_NAMES_LIST, ICON_VARIANT, TAG_NAME, TYPE };

package/dist/components/badge/badge.constants.js

@@ -23,5 +23,6 @@ const DEFAULTS = {
     MAX_COUNTER_LIMIT: 999,
     VARIANT: ICON_VARIANT.PRIMARY,
     ICON_SIZE: 1,
+    OVERLAY: false,
 };
-export { TAG_NAME, DEFAULTS, TYPE, ICON_VARIANT, ICON_NAMES_LIST };
+export { DEFAULTS, ICON_NAMES_LIST, ICON_VARIANT, TAG_NAME, TYPE };

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"
             },
             {
@@ -4496,17 +4493,6 @@
               "description": "Counter is the number which can be provided in the badge.",
               "attribute": "counter"
             },
-            {
-              "kind": "method",
-              "name": "getBadgeContentBasedOnType",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "description": "Generates the badge content based on the badge type.\nUtilizes various helper methods to create the appropriate badge template based on the\ncurrent badge type. Supports 'dot', 'icon', 'counter', 'success', 'warning', and 'error'\ntypes, returning the corresponding template result for each type."
-            },
             {
               "kind": "method",
               "name": "getBadgeCounterText",
@@ -4607,8 +4593,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
               "description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
+              "default": "false",
               "attribute": "overlay"
             },
             {
@@ -4684,8 +4670,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
               "description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
+              "default": "false",
               "fieldName": "overlay"
             },
             {

package/package.json

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