@momentum-design/components 0.4.13 → 0.4.15

package/dist/custom-elements.json

@@ -120,119 +120,299 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A badge is a small, visually distinct element that provides additional information\nor highlights the status of an item.\nBadges are often used to display notification dot, counts, making them a useful tool for\nconveying information quickly without taking up much space.",
           "name": "Badge",
-          "slots": [
-            {
-              "description": "This is a default/unnamed slot",
-              "name": ""
-            }
-          ],
           "members": [
             {
               "kind": "field",
               "name": "type",
-              "type": {
-                "text": "BadgeType | undefined"
-              },
-              "description": "Type of the badge\nCan be `regular`, `icon`, `text` or `warning`\n\nDefault: `regular`",
+              "description": "Type of the badge\nCan be `dot` (notification) , `icon` and `counter`\n\nDefault: `dot`",
               "attribute": "type",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "iconName",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "If `type` is set to `icon`, attribute `iconName` can\nbe used to choose which icon should be shown\n\nIf no `iconName` is provided, no icon will be rendered.",
+              "attribute": "icon-name"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "description": "badge variant",
+              "attribute": "variant"
+            },
+            {
+              "kind": "field",
+              "name": "counter",
               "type": {
                 "text": "number | undefined"
               },
-              "description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
-              "attribute": "size"
+              "attribute": "counter"
             },
             {
               "kind": "field",
-              "name": "lengthUnit",
+              "name": "maxCounter",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "description": "Length unit attribute for scale\n\nDefault: `rem`",
-              "attribute": "length-unit"
+              "attribute": "max-counter"
             },
             {
               "kind": "field",
-              "name": "iconName",
+              "name": "overlay",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "If `type` is set to `icon`, attribute `iconName` can\nbe used to choose which icon should be shown\n\nIf no `iconName` is provided, no icon will be rendered.",
-              "attribute": "icon-name"
+              "default": "false",
+              "attribute": "overlay"
             },
             {
               "kind": "field",
-              "name": "text",
+              "name": "ariaLabel",
               "type": {
-                "text": "string | undefined"
+                "text": "string | null"
               },
-              "description": "If `type` is set to `text`, attribute `text` can\nbe used to pass in any text to be displayed in the badge.",
-              "attribute": "text"
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
             },
             {
               "kind": "method",
-              "name": "updateSize",
-              "privacy": "private"
+              "name": "getCounterText",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "maxCounter",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "the maximum limit which can be displayed on the badge"
+                },
+                {
+                  "name": "counter",
+                  "optional": true,
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "the number to be displayed on the badge"
+                }
+              ],
+              "description": "If `type` is set to `counter` and if `counter` is greater than `maxCounter`,\nthen it will return a string the maxCounter value as string.\nOtherwise, it will return a string representation of `counter`.\nIf `counter` is not a number, it will return an empty string."
+            },
+            {
+              "kind": "method",
+              "name": "getBadgeIcon",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "iconName",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "name of the icon to be used."
+                },
+                {
+                  "name": "overlay",
+                  "type": {
+                    "text": "boolean"
+                  }
+                },
+                {
+                  "name": "iconVariant",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "type",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "description": "variant of the badge.",
+                  "name": "variant"
+                }
+              ],
+              "description": "Method to generate the badge icon template."
+            },
+            {
+              "kind": "method",
+              "name": "getBadgeDot",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "overlay",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "boolean indicating whether the badge should have an overlay."
+                }
+              ],
+              "description": "Method to generate the badge dot template."
             },
             {
               "kind": "method",
-              "name": "iconTemplate"
+              "name": "getIconClasses",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "overlay",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "boolean indicating whether the badge should have an overlay."
+                },
+                {
+                  "name": "iconVariant",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "the variant of the icon badge."
+                },
+                {
+                  "name": "type",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "the type of the badge."
+                }
+              ],
+              "description": "This method generates the CSS classes for the badge icon."
             },
             {
               "kind": "method",
-              "name": "textTemplate"
+              "name": "getBadgeCounterText",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "maxCounter",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "the maximum limit which can be displayed on the badge"
+                },
+                {
+                  "name": "overlay",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "whether the badge should have an overlay."
+                },
+                {
+                  "name": "counter",
+                  "optional": true,
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "the number to be displayed on the badge"
+                }
+              ],
+              "description": "Method to generate the badge text and counter template."
+            },
+            {
+              "kind": "method",
+              "name": "setRoleByAriaLabel",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Method to set the role based on the aria-label provided.\nIf the aria-label is provided, the role of the element will be 'img'.\nOtherwise, the role will be null."
             },
             {
               "kind": "method",
-              "name": "warningTemplate"
+              "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."
             }
           ],
           "attributes": [
             {
               "name": "type",
+              "description": "Type of the badge\nCan be `dot` (notification) , `icon` and `counter`\n\nDefault: `dot`",
+              "fieldName": "type"
+            },
+            {
+              "name": "icon-name",
               "type": {
-                "text": "BadgeType | undefined"
+                "text": "string | undefined"
               },
-              "description": "Type of the badge\nCan be `regular`, `icon`, `text` or `warning`\n\nDefault: `regular`",
-              "fieldName": "type"
+              "description": "If `type` is set to `icon`, attribute `iconName` can\nbe used to choose which icon should be shown\n\nIf no `iconName` is provided, no icon will be rendered.",
+              "fieldName": "iconName"
             },
             {
-              "name": "size",
+              "name": "variant",
+              "description": "badge variant",
+              "fieldName": "variant"
+            },
+            {
+              "name": "counter",
               "type": {
                 "text": "number | undefined"
               },
-              "description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
-              "fieldName": "size"
+              "fieldName": "counter"
             },
             {
-              "name": "length-unit",
+              "name": "max-counter",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "description": "Length unit attribute for scale\n\nDefault: `rem`",
-              "fieldName": "lengthUnit"
+              "fieldName": "maxCounter"
             },
             {
-              "name": "icon-name",
+              "name": "overlay",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "If `type` is set to `icon`, attribute `iconName` can\nbe used to choose which icon should be shown\n\nIf no `iconName` is provided, no icon will be rendered.",
-              "fieldName": "iconName"
+              "default": "false",
+              "fieldName": "overlay"
             },
             {
-              "name": "text",
+              "name": "aria-label",
               "type": {
-                "text": "string | undefined"
+                "text": "string | null"
               },
-              "description": "If `type` is set to `text`, attribute `text` can\nbe used to pass in any text to be displayed in the badge.",
-              "fieldName": "text"
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
             }
           ],
           "superclass": {
@@ -240,8 +420,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-badge",
-          "summary": "This is MyElement",
-          "jsDoc": "/**\n * @slot - This is a default/unnamed slot\n *\n * @summary This is MyElement\n *\n * @tagname mdc-badge\n */",
+          "jsDoc": "/**\n * A badge is a small, visually distinct element that provides additional information\n * or highlights the status of an item.\n * Badges are often used to display notification dot, counts, making them a useful tool for\n * conveying information quickly without taking up much space.\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n */",
           "customElement": true
         }
       ],

package/dist/index.js

@@ -1,16 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Text = exports.Badge = exports.Avatar = exports.IconProvider = exports.Icon = exports.ThemeProvider = void 0;
-const tslib_1 = require("tslib");
-const themeprovider_1 = tslib_1.__importDefault(require("./components/themeprovider"));
-exports.ThemeProvider = themeprovider_1.default;
-const icon_1 = tslib_1.__importDefault(require("./components/icon"));
-exports.Icon = icon_1.default;
-const iconprovider_1 = tslib_1.__importDefault(require("./components/iconprovider"));
-exports.IconProvider = iconprovider_1.default;
-const avatar_1 = tslib_1.__importDefault(require("./components/avatar"));
-exports.Avatar = avatar_1.default;
-const badge_1 = tslib_1.__importDefault(require("./components/badge"));
-exports.Badge = badge_1.default;
-const text_1 = tslib_1.__importDefault(require("./components/text"));
-exports.Text = text_1.default;
+import ThemeProvider from './components/themeprovider';
+import Icon from './components/icon';
+import IconProvider from './components/iconprovider';
+import Avatar from './components/avatar';
+import Badge from './components/badge';
+import Text from './components/text';
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Text, };

package/dist/models/component/component.component.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const lit_1 = require("lit");
-const component_styles_1 = tslib_1.__importDefault(require("./component.styles"));
+import { LitElement } from 'lit';
+import styles from './component.styles';
 /**
  * Core Component class to ultimately be inherited by all Web Components within
  * this package.
@@ -12,7 +9,7 @@ const component_styles_1 = tslib_1.__importDefault(require("./component.styles")
  *
  * @public
  */
-class Component extends lit_1.LitElement {
+class Component extends LitElement {
     /**
      * Register `this` extended `Component` Class as a custom element within the
      * DOM's custom elements registry.
@@ -50,5 +47,5 @@ class Component extends lit_1.LitElement {
 /**
  * Styles associated with the Base Component.
  */
-Component.styles = [component_styles_1.default];
-exports.default = Component;
+Component.styles = [styles];
+export default Component;

package/dist/models/component/component.styles.js

@@ -1,7 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const lit_1 = require("lit");
-exports.default = (0, lit_1.css) `
+import { css } from 'lit';
+export default css `
   :host {
     box-sizing: border-box;
   }

package/dist/models/component/component.types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/dist/models/component/index.js

@@ -1,5 +1,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const component_component_1 = tslib_1.__importDefault(require("./component.component"));
-exports.default = component_component_1.default;
+import Component from './component.component';
+export default Component;

package/dist/models/index.js

@@ -1,8 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Provider = exports.Component = void 0;
-const tslib_1 = require("tslib");
-const component_1 = tslib_1.__importDefault(require("./component"));
-exports.Component = component_1.default;
-const provider_1 = tslib_1.__importDefault(require("./provider"));
-exports.Provider = provider_1.default;
+import Component from './component';
+import Provider from './provider';
+export { Component, Provider, };

package/dist/models/provider/index.js

@@ -1,5 +1,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const provider_component_1 = tslib_1.__importDefault(require("./provider.component"));
-exports.default = provider_component_1.default;
+import Provider from './provider.component';
+export default Provider;

package/dist/models/provider/provider.component.js

@@ -1,17 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const context_1 = require("@lit/context");
-const lit_1 = require("lit");
-const component_1 = tslib_1.__importDefault(require("../component"));
-const provider_styles_1 = tslib_1.__importDefault(require("./provider.styles"));
+import { ContextProvider } from '@lit/context';
+import { html } from 'lit';
+import Component from '../component';
+import styles from './provider.styles';
 /**
  * Provider Component class to ultimately be inherited by all Provider-type Web
  * Components within this package.
  *
  * @public
  */
-class Provider extends component_1.default {
+class Provider extends Component {
     /**
      * Constructor of the Provider.
      *
@@ -29,7 +26,7 @@ class Provider extends component_1.default {
      */
     constructor({ context, initialValue }) {
         super();
-        this.context = new context_1.ContextProvider(this, {
+        this.context = new ContextProvider(this, {
             context,
             initialValue,
         });
@@ -46,11 +43,11 @@ class Provider extends component_1.default {
      */
     render() {
         this.updateContext();
-        return (0, lit_1.html) `<slot></slot>`;
+        return html `<slot></slot>`;
     }
 }
 /**
  * Styles associated with this Provider Component.
  */
-Provider.styles = [...component_1.default.styles, provider_styles_1.default];
-exports.default = Provider;
+Provider.styles = [...Component.styles, styles];
+export default Provider;

package/dist/models/provider/provider.styles.js

@@ -1,9 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const lit_1 = require("lit");
-const styles = (0, lit_1.css) `
+import { css } from 'lit';
+const styles = css `
   :host {
     display: contents;
   }
 `;
-exports.default = styles;
+export default styles;

package/dist/react/avatar/index.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("@lit/react");
-const avatar_1 = tslib_1.__importDefault(require("../../components/avatar"));
-const avatar_constants_1 = require("../../components/avatar/avatar.constants");
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/avatar';
+import { TAG_NAME } from '../../components/avatar/avatar.constants';
 /**
  * @slot - This is a default/unnamed slot
  *
@@ -12,11 +9,11 @@ const avatar_constants_1 = require("../../components/avatar/avatar.constants");
  *
  * @tagname mdc-avatar
  */
-const reactWrapper = (0, react_1.createComponent)({
-    tagName: avatar_constants_1.TAG_NAME,
-    elementClass: avatar_1.default,
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
     react: React,
     events: {},
     displayName: 'Avatar',
 });
-exports.default = reactWrapper;
+export default reactWrapper;

package/dist/react/badge/index.d.ts

@@ -1,8 +1,11 @@
 import Component from '../../components/badge';
 /**
- * @slot - This is a default/unnamed slot
- *
- * @summary This is MyElement
+ * A badge is a small, visually distinct element that provides additional information
+ * or highlights the status of an item.
+ * Badges are often used to display notification dot, counts, making them a useful tool for
+ * conveying information quickly without taking up much space.
+ * @dependency mdc-icon
+ * @dependency mdc-text
  *
  * @tagname mdc-badge
  */

package/dist/react/badge/index.js

@@ -1,22 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("@lit/react");
-const badge_1 = tslib_1.__importDefault(require("../../components/badge"));
-const badge_constants_1 = require("../../components/badge/badge.constants");
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/badge';
+import { TAG_NAME } from '../../components/badge/badge.constants';
 /**
- * @slot - This is a default/unnamed slot
- *
- * @summary This is MyElement
+ * A badge is a small, visually distinct element that provides additional information
+ * or highlights the status of an item.
+ * Badges are often used to display notification dot, counts, making them a useful tool for
+ * conveying information quickly without taking up much space.
+ * @dependency mdc-icon
+ * @dependency mdc-text
  *
  * @tagname mdc-badge
  */
-const reactWrapper = (0, react_1.createComponent)({
-    tagName: badge_constants_1.TAG_NAME,
-    elementClass: badge_1.default,
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
     react: React,
     events: {},
     displayName: 'Badge',
 });
-exports.default = reactWrapper;
+export default reactWrapper;

package/dist/react/icon/index.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("@lit/react");
-const icon_1 = tslib_1.__importDefault(require("../../components/icon"));
-const icon_constants_1 = require("../../components/icon/icon.constants");
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/icon';
+import { TAG_NAME } from '../../components/icon/icon.constants';
 /**
  * Icon component that dynamically displays SVG icons based on a valid name.
  *
@@ -42,11 +39,11 @@ const icon_constants_1 = require("../../components/icon/icon.constants");
  *
  * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
  */
-const reactWrapper = (0, react_1.createComponent)({
-    tagName: icon_constants_1.TAG_NAME,
-    elementClass: icon_1.default,
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
     react: React,
     events: {},
     displayName: 'Icon',
 });
-exports.default = reactWrapper;
+export default reactWrapper;