@momentum-design/components 0.7.11 → 0.7.13

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

@@ -1,7 +1,7 @@
 declare const TAG_NAME: "mdc-avatar";
 declare const LENGTH_UNIT = "rem";
 declare const DEFAULTS: {
-    TYPE: "photo";
-    SIZE: number;
+    readonly TYPE: "photo";
+    readonly SIZE: 1.5;
 };
 export { TAG_NAME, DEFAULTS, LENGTH_UNIT };

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

@@ -1,5 +1,6 @@
 import { CSSResult, PropertyValues, TemplateResult } from 'lit';
 import { Component } from '../../models';
+import type { IconVariant, BadgeType } from './badge.types';
 /**
  * The `mdc-badge` component is a versatile UI element used to
  * display dot, icons, counters, success, warning and error type badge.
@@ -27,7 +28,7 @@ declare class Badge extends Component {
      * Type of the badge
      * Can be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.
      */
-    type?: string;
+    type?: BadgeType;
     /**
      * Name of the icon (= filename).
      *
@@ -39,7 +40,7 @@ declare class Badge extends Component {
      * It defines the background and foreground color of the icon.
      * @default primary
      */
-    variant: string;
+    variant: IconVariant;
     /**
      * Counter is the number which can be provided in the badge.
      */
@@ -75,31 +76,17 @@ declare class Badge extends Component {
     /**
      * Method to generate the badge icon.
      * @param iconName - the name of the icon from the icon set
-     * @param overlay - boolean indicating whether the badge should have an overlay.
-     * @param iconVariant - the variant of the icon badge.
-     * @param type - the type of the badge.
+     * @param backgroundClassPostfix - postfix for the class to style the badge icon.
      * @returns the template result of the icon.
      */
     private getBadgeIcon;
     /**
      * Method to generate the badge dot template.
-     * @param overlay - boolean indicating whether the badge should have an overlay.
      * @returns the template result of the dot with mdc-badge-dot class.
      */
     private getBadgeDot;
-    /**
-     * This method generates the CSS classes for the badge icon.
-     * @param overlay - boolean indicating whether the badge should have an overlay.
-     * @param iconVariant - the variant of the icon badge.
-     * @param type - the type of the badge.
-     * @returns - an object containing the CSS classes for the icon.
-     */
-    private getIconClasses;
     /**
      * Method to generate the badge text and counter template.
-     * @param maxCounter - the maximum limit which can be displayed on the badge
-     * @param overlay - whether the badge should have an overlay.
-     * @param counter - the number to be displayed on the badge
      * @returns the template result of the text.
      */
     private getBadgeCounterText;

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

@@ -90,15 +90,16 @@ class Badge extends Component {
     /**
      * Method to generate the badge icon.
      * @param iconName - the name of the icon from the icon set
-     * @param overlay - boolean indicating whether the badge should have an overlay.
-     * @param iconVariant - the variant of the icon badge.
-     * @param type - the type of the badge.
+     * @param backgroundClassPostfix - postfix for the class to style the badge icon.
      * @returns the template result of the icon.
      */
-    getBadgeIcon(iconName, overlay, iconVariant, type) {
+    getBadgeIcon(iconName, backgroundClassPostfix) {
         return html `
       <mdc-icon
-        class="mdc-badge-icon ${classMap(this.getIconClasses(overlay, iconVariant, type))}"
+        class="mdc-badge-icon ${classMap({
+            'mdc-badge-overlay': this.overlay,
+            [`mdc-badge-icon__${backgroundClassPostfix}`]: true,
+        })}"
         name="${ifDefined(iconName)}"
         size="${DEFAULTS.ICON_SIZE}"
       ></mdc-icon>
@@ -106,44 +107,23 @@ class Badge extends Component {
     }
     /**
      * Method to generate the badge dot template.
-     * @param overlay - boolean indicating whether the badge should have an overlay.
      * @returns the template result of the dot with mdc-badge-dot class.
      */
-    getBadgeDot(overlay) {
-        return html `<div class="mdc-badge-dot ${classMap({ 'mdc-badge-overlay': overlay })}"></div>`;
-    }
-    /**
-     * This method generates the CSS classes for the badge icon.
-     * @param overlay - boolean indicating whether the badge should have an overlay.
-     * @param iconVariant - the variant of the icon badge.
-     * @param type - the type of the badge.
-     * @returns - an object containing the CSS classes for the icon.
-     */
-    getIconClasses(overlay, iconVariant, type) {
-        const overLayClass = { 'mdc-badge-overlay': overlay };
-        const variantTypes = type === BADGE_TYPE.ICON ? ICON_VARIANT : ICON_STATE;
-        const iconVariantType = Object.values(variantTypes).includes(iconVariant) ? iconVariant : DEFAULTS.VARIANT;
-        const backgroundClass = { [`mdc-badge-icon__${iconVariantType}`]: true };
-        return {
-            ...overLayClass,
-            ...backgroundClass,
-        };
+    getBadgeDot() {
+        return html `<div class="mdc-badge-dot ${classMap({ 'mdc-badge-overlay': this.overlay })}"></div>`;
     }
     /**
      * Method to generate the badge text and counter template.
-     * @param maxCounter - the maximum limit which can be displayed on the badge
-     * @param overlay - whether the badge should have an overlay.
-     * @param counter - the number to be displayed on the badge
      * @returns the template result of the text.
      */
-    getBadgeCounterText(maxCounter, overlay, counter) {
+    getBadgeCounterText() {
         return html `
       <mdc-text
         type="${FONT_TYPE.BODY_SMALL_MEDIUM}"
         tagname="${VALID_TEXT_TAGS.DIV}"
-        class="mdc-badge-text ${classMap({ 'mdc-badge-overlay': overlay })}"
+        class="mdc-badge-text ${classMap({ 'mdc-badge-overlay': this.overlay })}"
       >
-        ${this.getCounterText(maxCounter, counter)}
+        ${this.getCounterText(this.maxCounter, this.counter)}
       </mdc-text>
     `;
     }
@@ -169,24 +149,24 @@ class Badge extends Component {
      */
     getBadgeContentBasedOnType() {
         if (this.variant && !Object.values(ICON_VARIANT).includes(this.variant)) {
-            this.variant = ICON_VARIANT.PRIMARY;
+            this.variant = DEFAULTS.VARIANT;
         }
-        const { counter, iconName, maxCounter, overlay, type, variant } = this;
+        const { iconName, type, variant } = this;
         switch (type) {
             case BADGE_TYPE.ICON:
-                return this.getBadgeIcon(iconName || '', overlay, variant, type);
+                return this.getBadgeIcon(iconName || '', variant);
             case BADGE_TYPE.COUNTER:
-                return this.getBadgeCounterText(maxCounter, overlay, counter);
+                return this.getBadgeCounterText();
             case BADGE_TYPE.SUCCESS:
-                return this.getBadgeIcon(ICON_NAMES_LIST.SUCCESS_ICON_NAME, overlay, ICON_STATE.SUCCESS);
+                return this.getBadgeIcon(ICON_NAMES_LIST.SUCCESS_ICON_NAME, ICON_STATE.SUCCESS);
             case BADGE_TYPE.WARNING:
-                return this.getBadgeIcon(ICON_NAMES_LIST.WARNING_ICON_NAME, overlay, ICON_STATE.WARNING);
+                return this.getBadgeIcon(ICON_NAMES_LIST.WARNING_ICON_NAME, ICON_STATE.WARNING);
             case BADGE_TYPE.ERROR:
-                return this.getBadgeIcon(ICON_NAMES_LIST.ERROR_ICON_NAME, overlay, ICON_STATE.ERROR);
+                return this.getBadgeIcon(ICON_NAMES_LIST.ERROR_ICON_NAME, ICON_STATE.ERROR);
             case BADGE_TYPE.DOT:
             default:
                 this.type = BADGE_TYPE.DOT;
-                return this.getBadgeDot(overlay);
+                return this.getBadgeDot();
         }
     }
     update(changedProperties) {
@@ -210,7 +190,7 @@ __decorate([
 ], Badge.prototype, "iconName", void 0);
 __decorate([
     property({ type: String, reflect: true }),
-    __metadata("design:type", Object)
+    __metadata("design:type", String)
 ], Badge.prototype, "variant", void 0);
 __decorate([
     property({ type: Number }),

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

@@ -1,31 +1,38 @@
 declare const TAG_NAME: "mdc-badge";
 declare const BADGE_TYPE: {
-    DOT: string;
-    ICON: string;
-    COUNTER: string;
-    SUCCESS: string;
-    WARNING: string;
-    ERROR: string;
+    readonly DOT: "dot";
+    readonly ICON: "icon";
+    readonly COUNTER: "counter";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly ERROR: "error";
 };
 declare const ICON_NAMES_LIST: {
-    SUCCESS_ICON_NAME: string;
-    WARNING_ICON_NAME: string;
-    ERROR_ICON_NAME: string;
+    readonly SUCCESS_ICON_NAME: "check-circle-badge-filled";
+    readonly WARNING_ICON_NAME: "warning-badge-filled";
+    readonly ERROR_ICON_NAME: "error-legacy-badge-filled";
 };
 declare const ICON_VARIANT: {
-    PRIMARY: string;
-    SECONDARY: string;
+    readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
 };
 declare const ICON_STATE: {
-    SUCCESS: string;
-    WARNING: string;
-    ERROR: string;
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly ERROR: "error";
+};
+declare const BACKGROUND_STYLES: {
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly ERROR: "error";
+    readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
 };
 declare const DEFAULTS: {
-    TYPE: string;
-    MAX_COUNTER: number;
-    MAX_COUNTER_LIMIT: number;
-    VARIANT: string;
-    ICON_SIZE: number;
+    readonly TYPE: "dot";
+    readonly MAX_COUNTER: 99;
+    readonly MAX_COUNTER_LIMIT: 999;
+    readonly VARIANT: "primary";
+    readonly ICON_SIZE: 1;
 };
-export { TAG_NAME, DEFAULTS, BADGE_TYPE, ICON_STATE, ICON_VARIANT, ICON_NAMES_LIST };
+export { TAG_NAME, DEFAULTS, BADGE_TYPE, ICON_STATE, ICON_VARIANT, ICON_NAMES_LIST, BACKGROUND_STYLES };

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

@@ -22,6 +22,10 @@ const ICON_STATE = {
     WARNING: 'warning',
     ERROR: 'error',
 };
+const BACKGROUND_STYLES = {
+    ...ICON_VARIANT,
+    ...ICON_STATE,
+};
 const DEFAULTS = {
     TYPE: BADGE_TYPE.DOT,
     MAX_COUNTER: 99,
@@ -29,4 +33,4 @@ const DEFAULTS = {
     VARIANT: ICON_VARIANT.PRIMARY,
     ICON_SIZE: 1,
 };
-export { TAG_NAME, DEFAULTS, BADGE_TYPE, ICON_STATE, ICON_VARIANT, ICON_NAMES_LIST };
+export { TAG_NAME, DEFAULTS, BADGE_TYPE, ICON_STATE, ICON_VARIANT, ICON_NAMES_LIST, BACKGROUND_STYLES };

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

@@ -0,0 +1,4 @@
+import type { ValueOf } from '../../utils/types';
+import { BADGE_TYPE, ICON_VARIANT } from './badge.constants';
+export type IconVariant = ValueOf<typeof ICON_VARIANT>;
+export type BadgeType = ValueOf<typeof BADGE_TYPE>;

package/dist/components/badge/badge.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,6 +1,6 @@
 declare const TAG_NAME: "mdc-icon";
 declare const DEFAULTS: {
-    NAME: undefined;
-    SIZE: number;
+    readonly NAME: undefined;
+    readonly SIZE: 1;
 };
 export { TAG_NAME, DEFAULTS };

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

@@ -3,8 +3,8 @@ declare const ALLOWED_FILE_EXTENSIONS: string[];
 declare const ALLOWED_LENGTH_UNITS: string[];
 declare const LENGTH_UNIT_SIZE: Record<string, number>;
 declare const DEFAULTS: {
-    FILE_EXTENSION: string;
-    LENGTH_UNIT: string;
-    SIZE: number;
+    readonly FILE_EXTENSION: "svg";
+    readonly LENGTH_UNIT: "em";
+    readonly SIZE: number;
 };
 export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS, ALLOWED_LENGTH_UNITS, LENGTH_UNIT_SIZE };

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

@@ -1,5 +1,6 @@
 import { CSSResult } from 'lit';
 import { Component } from '../../models';
+import type { PresenceType, PresenceSize } from './presence.types';
 /**
  * The `mdc-presence` component is a versatile UI element used to
  * display the presence status of a user or entity within an avatar component.
@@ -30,7 +31,7 @@ declare class Presence extends Component {
      * - `scheduled`
      * @default active
      */
-    type: string;
+    type: PresenceType;
     /**
      * Acceptable values include:
      * - XX_SMALL
@@ -42,7 +43,7 @@ declare class Presence extends Component {
      * - XX_LARGE
      * @default small
      */
-    size: string;
+    size: PresenceSize;
     /**
      * Get the size of the presence icon based on the given size type
      */

package/dist/components/presence/presence.component.js

@@ -131,10 +131,10 @@ class Presence extends Component {
 Presence.styles = [...Component.styles, ...styles];
 __decorate([
     property({ type: String, reflect: true }),
-    __metadata("design:type", Object)
+    __metadata("design:type", String)
 ], Presence.prototype, "type", void 0);
 __decorate([
     property({ type: String, reflect: true }),
-    __metadata("design:type", Object)
+    __metadata("design:type", String)
 ], Presence.prototype, "size", void 0);
 export default Presence;

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

@@ -1,31 +1,31 @@
 declare const TAG_NAME: "mdc-presence";
 declare const PRESENCE_TYPE: {
-    ACTIVE: string;
-    AWAY: string;
-    AWAY_CALLING: string;
-    BUSY: string;
-    DND: string;
-    MEETING: string;
-    ON_CALL: string;
-    ON_DEVICE: string;
-    ON_MOBILE: string;
-    PAUSE: string;
-    PTO: string;
-    PRESENTING: string;
-    QUIET: string;
-    SCHEDULED: string;
+    readonly ACTIVE: "active";
+    readonly AWAY: "away";
+    readonly AWAY_CALLING: "away-calling";
+    readonly BUSY: "busy";
+    readonly DND: "dnd";
+    readonly MEETING: "meeting";
+    readonly ON_CALL: "on-call";
+    readonly ON_DEVICE: "on-device";
+    readonly ON_MOBILE: "on-mobile";
+    readonly PAUSE: "pause";
+    readonly PTO: "pto";
+    readonly PRESENTING: "presenting";
+    readonly QUIET: "quiet";
+    readonly SCHEDULED: "scheduled";
 };
 declare const PRESENCE_SIZE: {
-    XX_SMALL: string;
-    X_SMALL: string;
-    SMALL: string;
-    MIDSIZE: string;
-    LARGE: string;
-    X_LARGE: string;
-    XX_LARGE: string;
+    readonly XX_SMALL: "xx_small";
+    readonly X_SMALL: "x_small";
+    readonly SMALL: "small";
+    readonly MIDSIZE: "midsize";
+    readonly LARGE: "large";
+    readonly X_LARGE: "x_large";
+    readonly XX_LARGE: "xx_large";
 };
 declare const DEFAULTS: {
-    TYPE: string;
-    SIZE: string;
+    readonly TYPE: "active";
+    readonly SIZE: "small";
 };
 export { TAG_NAME, DEFAULTS, PRESENCE_TYPE, PRESENCE_SIZE };

package/dist/components/presence/presence.types.d.ts

@@ -0,0 +1,4 @@
+import type { ValueOf } from '../../utils/types';
+import { PRESENCE_TYPE, PRESENCE_SIZE } from './presence.constants';
+export type PresenceType = ValueOf<typeof PRESENCE_TYPE>;
+export type PresenceSize = ValueOf<typeof PRESENCE_SIZE>;

package/dist/components/presence/presence.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,5 +1,6 @@
 import { CSSResult } from 'lit';
 import { Component } from '../../models';
+import type { FontType, TagName } from './text.types';
 /**
  * Text component for creating styled text elements.
  * It has to be mounted within the ThemeProvider to access color and font tokens.
@@ -55,7 +56,7 @@ declare class Text extends Component {
      * - 'headline-small-regular'
      * @default body-large-regular
      */
-    type: string;
+    type: FontType;
     /**
      * Specifies the HTML tag name for the text element. The default tag name is `p`.
      * This attribute is optional. When set, it changes the tag name of the text element.
@@ -76,7 +77,7 @@ declare class Text extends Component {
      * For instance, setting this attribute to `h2` will render the text element as an `h2` element.
      * Note that the styling is determined by the `type` attribute.
      */
-    tagname?: string | undefined;
+    tagname?: TagName;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/text/text.component.js

@@ -113,10 +113,10 @@ class Text extends Component {
 Text.styles = [...Component.styles, ...styles];
 __decorate([
     property({ attribute: 'type', reflect: true, type: String }),
-    __metadata("design:type", Object)
+    __metadata("design:type", String)
 ], Text.prototype, "type", void 0);
 __decorate([
     property({ attribute: 'tagname', reflect: true, type: String }),
-    __metadata("design:type", Object)
+    __metadata("design:type", String)
 ], Text.prototype, "tagname", void 0);
 export default Text;

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

@@ -1,51 +1,51 @@
 declare const TAG_NAME: "mdc-text";
 declare const FONT_TYPE: {
-    BODY_SMALL_REGULAR: string;
-    BODY_SMALL_MEDIUM: string;
-    BODY_SMALL_BOLD: string;
-    BODY_MIDSIZE_REGULAR: string;
-    BODY_MIDSIZE_MEDIUM: string;
-    BODY_MIDSIZE_BOLD: string;
-    BODY_LARGE_REGULAR: string;
-    BODY_LARGE_MEDIUM: string;
-    BODY_LARGE_BOLD: string;
-    BODY_SMALL_REGULAR_UNDERLINE: string;
-    BODY_SMALL_MEDIUM_UNDERLINE: string;
-    BODY_MIDSIZE_REGULAR_UNDERLINE: string;
-    BODY_MIDSIZE_MEDIUM_UNDERLINE: string;
-    BODY_LARGE_REGULAR_UNDERLINE: string;
-    BODY_LARGE_MEDIUM_UNDERLINE: string;
-    HEADING_SMALL_REGULAR: string;
-    HEADING_SMALL_MEDIUM: string;
-    HEADING_SMALL_BOLD: string;
-    HEADING_MIDSIZE_REGULAR: string;
-    HEADING_MIDSIZE_MEDIUM: string;
-    HEADING_MIDSIZE_BOLD: string;
-    HEADING_LARGE_REGULAR: string;
-    HEADING_LARGE_MEDIUM: string;
-    HEADING_LARGE_BOLD: string;
-    HEADING_XLARGE_REGULAR: string;
-    HEADING_XLARGE_MEDIUM: string;
-    HEADING_XLARGE_BOLD: string;
-    HEADLINE_SMALL_LIGHT: string;
-    HEADLINE_SMALL_REGULAR: string;
+    readonly BODY_SMALL_REGULAR: "body-small-regular";
+    readonly BODY_SMALL_MEDIUM: "body-small-medium";
+    readonly BODY_SMALL_BOLD: "body-small-bold";
+    readonly BODY_MIDSIZE_REGULAR: "body-midsize-regular";
+    readonly BODY_MIDSIZE_MEDIUM: "body-midsize-medium";
+    readonly BODY_MIDSIZE_BOLD: "body-midsize-bold";
+    readonly BODY_LARGE_REGULAR: "body-large-regular";
+    readonly BODY_LARGE_MEDIUM: "body-large-medium";
+    readonly BODY_LARGE_BOLD: "body-large-bold";
+    readonly BODY_SMALL_REGULAR_UNDERLINE: "body-small-regular-underline";
+    readonly BODY_SMALL_MEDIUM_UNDERLINE: "body-small-medium-underline";
+    readonly BODY_MIDSIZE_REGULAR_UNDERLINE: "body-midsize-regular-underline";
+    readonly BODY_MIDSIZE_MEDIUM_UNDERLINE: "body-midsize-medium-underline";
+    readonly BODY_LARGE_REGULAR_UNDERLINE: "body-large-regular-underline";
+    readonly BODY_LARGE_MEDIUM_UNDERLINE: "body-large-medium-underline";
+    readonly HEADING_SMALL_REGULAR: "heading-small-regular";
+    readonly HEADING_SMALL_MEDIUM: "heading-small-medium";
+    readonly HEADING_SMALL_BOLD: "heading-small-bold";
+    readonly HEADING_MIDSIZE_REGULAR: "heading-midsize-regular";
+    readonly HEADING_MIDSIZE_MEDIUM: "heading-midsize-medium";
+    readonly HEADING_MIDSIZE_BOLD: "heading-midsize-bold";
+    readonly HEADING_LARGE_REGULAR: "heading-large-regular";
+    readonly HEADING_LARGE_MEDIUM: "heading-large-medium";
+    readonly HEADING_LARGE_BOLD: "heading-large-bold";
+    readonly HEADING_XLARGE_REGULAR: "heading-xlarge-regular";
+    readonly HEADING_XLARGE_MEDIUM: "heading-xlarge-medium";
+    readonly HEADING_XLARGE_BOLD: "heading-xlarge-bold";
+    readonly HEADLINE_SMALL_LIGHT: "headline-small-light";
+    readonly HEADLINE_SMALL_REGULAR: "headline-small-regular";
 };
 declare const VALID_TEXT_TAGS: {
-    H1: string;
-    H2: string;
-    H3: string;
-    H4: string;
-    H5: string;
-    H6: string;
-    P: string;
-    SMALL: string;
-    SPAN: string;
-    DIV: string;
+    readonly H1: "h1";
+    readonly H2: "h2";
+    readonly H3: "h3";
+    readonly H4: "h4";
+    readonly H5: "h5";
+    readonly H6: "h6";
+    readonly P: "p";
+    readonly SMALL: "small";
+    readonly SPAN: "span";
+    readonly DIV: "div";
 };
 declare const DEFAULTS: {
-    TYPE: string;
-    TEXT_ELEMENT_TAGNAME: string;
-    CSS_PART_TEXT: string;
-    CHILDREN: string;
+    readonly TYPE: "body-large-regular";
+    readonly TEXT_ELEMENT_TAGNAME: "p";
+    readonly CSS_PART_TEXT: "text";
+    readonly CHILDREN: "The quick brown fox jumps over the lazy dog";
 };
 export { TAG_NAME, DEFAULTS, FONT_TYPE, VALID_TEXT_TAGS };

package/dist/components/text/text.types.d.ts

@@ -0,0 +1,4 @@
+import { FONT_TYPE, VALID_TEXT_TAGS } from './text.constants';
+import type { ValueOf } from '../../utils/types';
+export type FontType = ValueOf<typeof FONT_TYPE>;
+export type TagName = ValueOf<typeof VALID_TEXT_TAGS>;

package/dist/components/text/text.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,5 +1,5 @@
 declare const TAG_NAME: "mdc-themeprovider";
 declare const DEFAULTS: {
-    THEMECLASS: "mds-theme-stable-darkWebex";
+    readonly THEMECLASS: "mds-theme-stable-darkWebex";
 };
 export { DEFAULTS, TAG_NAME };