@momentum-design/components 0.15.4 → 0.15.6

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

@@ -1,9 +1,7 @@
 import { CSSResult } from 'lit';
 import type { PropertyValues, TemplateResult } from 'lit';
 import { Component } from '../../models';
-import type { IconNames } from '../icon/icon.types';
-import type { PresenceType } from '../presence/presence.types';
-import type { AvatarSize } from './avatar.types';
+declare const Avatar_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/AvatarComponentMixin").AvatarComponentMixinInterface> & typeof Component;
 /**
  * The `mdc-avatar` component is used to represent a person or a space.
  * An avatar can be an icon, initials, counter and photo.
@@ -39,68 +37,7 @@ import type { AvatarSize } from './avatar.types';
  * @cssproperty --mdc-avatar-loading-overlay-background-color -
  *  Allows customization of the loading overlay background color.
  */
-declare class Avatar extends Component {
-    /**
-     * The src is the url which will be used to display the avatar.
-     * When the src is loading, we will display the initials as a placeholder.
-     */
-    src?: string;
-    /**
-     * The initials to be displayed for the avatar.
-     */
-    initials?: string;
-    /**
-     * The presence is the status which can be used to display the
-     * activity state of a user or a space within an avatar component.
-     *
-     * Acceptable values include:
-     * - `active`
-     * - `away`
-     * - `away-calling`
-     * - `busy`
-     * - `dnd`
-     * - `meeting`
-     * - `on-call`
-     * - `on-device`
-     * - `on-mobile`
-     * - `pause`
-     * - `pto`
-     * - `presenting`
-     * - `quiet`
-     * - `scheduled`
-     */
-    presence?: PresenceType;
-    /**
-     * Acceptable values include:
-     * - xx_small
-     * - x_small
-     * - small
-     * - midsize
-     * - large
-     * - x_large
-     * - xx_large
-     *
-     * @default x_small
-     */
-    size: AvatarSize;
-    /**
-     * Name of the icon to be displayed inside the Avatar.
-     * Must be a valid icon name.
-     */
-    iconName?: IconNames;
-    /**
-     * The counter is the number which can be displayed on the avatar.
-     * The maximum number is 99 and if the give number is greater than 99,
-     * then the avatar will be displayed as `99+`.
-     * If the given number is a negative number,
-     * then the avatar will be displayed as `0`.
-     */
-    counter?: number;
-    /**
-     * Represents the typing indicator when the user is typing.
-     * @default false
-     */
-    isTyping: boolean;
+declare class Avatar extends Avatar_base {
     /**
      * @internal
      */

package/dist/components/avatar/avatar.component.js

@@ -8,12 +8,13 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { Component } from '../../models';
+import { AvatarComponentMixin } from '../../utils/mixins/AvatarComponentMixin';
 import { AVATAR_TYPE, DEFAULTS, MAX_COUNTER } from './avatar.constants';
 import styles from './avatar.styles';
-import { getAvatarIconSize, getAvatarTextFontSize } from './avatar.utils';
+import { getAvatarIconSize, getAvatarTextFontSize, getPresenceSize } from './avatar.utils';
 /**
  * The `mdc-avatar` component is used to represent a person or a space.
  * An avatar can be an icon, initials, counter and photo.
@@ -49,27 +50,9 @@ import { getAvatarIconSize, getAvatarTextFontSize } from './avatar.utils';
  * @cssproperty --mdc-avatar-loading-overlay-background-color -
  *  Allows customization of the loading overlay background color.
  */
-class Avatar extends Component {
+class Avatar extends AvatarComponentMixin(Component) {
     constructor() {
         super(...arguments);
-        /**
-         * Acceptable values include:
-         * - xx_small
-         * - x_small
-         * - small
-         * - midsize
-         * - large
-         * - x_large
-         * - xx_large
-         *
-         * @default x_small
-         */
-        this.size = DEFAULTS.SIZE;
-        /**
-         * Represents the typing indicator when the user is typing.
-         * @default false
-         */
-        this.isTyping = false;
         /**
          * @internal
          */
@@ -90,7 +73,7 @@ class Avatar extends Component {
         }
         if (this.presence) {
             return html `
-        <mdc-presence class="presence" type="${this.presence}" size="${this.size}"></mdc-presence>
+        <mdc-presence class="presence" type="${this.presence}" size="${getPresenceSize(this.size)}"></mdc-presence>
       `;
         }
         return nothing;
@@ -323,34 +306,6 @@ class Avatar extends Component {
     }
 }
 Avatar.styles = [...Component.styles, ...styles];
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], Avatar.prototype, "src", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], Avatar.prototype, "initials", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], Avatar.prototype, "presence", void 0);
-__decorate([
-    property({ type: String, reflect: true }),
-    __metadata("design:type", String)
-], Avatar.prototype, "size", void 0);
-__decorate([
-    property({ type: String, attribute: 'icon-name' }),
-    __metadata("design:type", String)
-], Avatar.prototype, "iconName", void 0);
-__decorate([
-    property({ type: Number }),
-    __metadata("design:type", Number)
-], Avatar.prototype, "counter", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'is-typing' }),
-    __metadata("design:type", Object)
-], Avatar.prototype, "isTyping", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)

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

@@ -6,9 +6,18 @@ declare const AVATAR_TYPE: {
     readonly TEXT: "text";
 };
 declare const MAX_COUNTER = 99;
+declare const AVATAR_SIZE: {
+    readonly 24: 24;
+    readonly 32: 32;
+    readonly 48: 48;
+    readonly 64: 64;
+    readonly 72: 72;
+    readonly 88: 88;
+    readonly 124: 124;
+};
 declare const DEFAULTS: {
     readonly TYPE: "photo";
-    readonly SIZE: "x_small";
+    readonly SIZE: 32;
     readonly ICON_NAME: "user-regular";
 };
-export { TAG_NAME, DEFAULTS, AVATAR_TYPE, MAX_COUNTER, };
+export { TAG_NAME, DEFAULTS, AVATAR_TYPE, MAX_COUNTER, AVATAR_SIZE, };

package/dist/components/avatar/avatar.constants.js

@@ -1,5 +1,4 @@
 import utils from '../../utils/tag-name';
-import { SIZE as AVATAR_SIZE } from '../presence/presence.constants';
 const TAG_NAME = utils.constructTagName('avatar');
 const AVATAR_TYPE = {
     COUNTER: 'counter',
@@ -9,9 +8,18 @@ const AVATAR_TYPE = {
 };
 const MAX_COUNTER = 99;
 const ICON_NAME = 'user-regular';
+const AVATAR_SIZE = {
+    24: 24,
+    32: 32,
+    48: 48,
+    64: 64,
+    72: 72,
+    88: 88,
+    124: 124,
+};
 const DEFAULTS = {
     TYPE: AVATAR_TYPE.PHOTO,
-    SIZE: AVATAR_SIZE.X_SMALL,
+    SIZE: AVATAR_SIZE[32],
     ICON_NAME,
 };
-export { TAG_NAME, DEFAULTS, AVATAR_TYPE, MAX_COUNTER, };
+export { TAG_NAME, DEFAULTS, AVATAR_TYPE, MAX_COUNTER, AVATAR_SIZE, };

package/dist/components/avatar/avatar.styles.js

@@ -8,51 +8,51 @@ const styles = [hostFitContentStyles, css `
     --mdc-avatar-loading-indicator-foreground-color: var(--mdc-avatar-default-foreground-color);
     --mdc-avatar-loading-overlay-background-color: var(--mds-color-theme-common-overlays-secondary-normal);
   }
-  :host([size="xx_large"]) .content {
+  :host([size="124"]) .content {
     width: 7.75rem;
     height: 7.75rem;
   }
-  :host([size="x_large"]) .content {
+  :host([size="88"]) .content {
     width: 5.5rem;
     height: 5.5rem;
   }
-  :host([size="large"]) .content {
+  :host([size="72"]) .content {
     width: 4.5rem;
     height: 4.5rem;
   }
-  :host([size="midsize"]) .content {
+  :host([size="64"]) .content {
     width: 4rem;
     height: 4rem;
   }
-  :host([size="small"]) .content {
+  :host([size="48"]) .content {
     width: 3rem;
     height: 3rem;
   }
-  :host([size="x_small"]) .content {
+  :host([size="32"]) .content {
     width: 2rem;
     height: 2rem;
   }
-  :host([size="xx_small"]) .content {
+  :host([size="24"]) .content {
     width: 1.5rem;
     height: 1.5rem;
   }
-  :host([size="xx_large"]) .content > .loading__wrapper > .loader {
+  :host([size="124"]) .content > .loading__wrapper > .loader {
     transform: scale(1.5);
   }
-  :host([size="x_large"]) .content > .loading__wrapper > .loader {
+  :host([size="88"]) .content > .loading__wrapper > .loader {
     transform: scale(1.2);
   }
-  :host([size="large"]) .content > .loading__wrapper > .loader,
-  :host([size="midsize"]) .content > .loading__wrapper > .loader {
+  :host([size="72"]) .content > .loading__wrapper > .loader,
+  :host([size="64"]) .content > .loading__wrapper > .loader {
     transform: scale(0.8);
   }
-  :host([size="small"]) .content > .loading__wrapper > .loader {
+  :host([size="48"]) .content > .loading__wrapper > .loader {
     transform: scale(0.6);
   }
-  :host([size="x_small"]) .content > .loading__wrapper > .loader {
+  :host([size="32"]) .content > .loading__wrapper > .loader {
     transform: scale(0.4);
   }
-  :host([size="xx_small"]) .content > .loading__wrapper > .loader {
+  :host([size="24"]) .content > .loading__wrapper > .loader {
     transform: scale(0.3);
   }
   .content {

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

@@ -1,5 +1,4 @@
-import { AVATAR_TYPE } from './avatar.constants';
-import { SIZE as AVATAR_SIZE } from '../presence/presence.constants';
+import { AVATAR_TYPE, AVATAR_SIZE } from './avatar.constants';
 import type { ValueOf } from '../../utils/types';
 export type AvatarType = ValueOf<typeof AVATAR_TYPE>;
 export type AvatarSize = ValueOf<typeof AVATAR_SIZE>;

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

@@ -1,5 +1,7 @@
+import type { PresenceSize } from '../presence/presence.types';
 import type { TextType } from '../text/text.types';
 import type { AvatarSize } from './avatar.types';
+declare const getPresenceSize: (size: AvatarSize) => PresenceSize;
 declare const getAvatarIconSize: (size: AvatarSize) => number;
 declare const getAvatarTextFontSize: (size: AvatarSize) => TextType;
-export { getAvatarIconSize, getAvatarTextFontSize, };
+export { getAvatarIconSize, getAvatarTextFontSize, getPresenceSize, };

package/dist/components/avatar/avatar.utils.js

@@ -1,27 +1,40 @@
-import { SIZE as AVATAR_SIZE } from '../presence/presence.constants';
+import { SIZE as PRESENCE_SIZE } from '../presence/presence.constants';
 import { TYPE as FONT_TYPE } from '../text/text.constants';
+import { AVATAR_SIZE } from './avatar.constants';
+const getPresenceSize = (size) => {
+    const avatarPresenceSizeMap = {
+        [AVATAR_SIZE[124]]: PRESENCE_SIZE.XX_LARGE,
+        [AVATAR_SIZE[88]]: PRESENCE_SIZE.X_LARGE,
+        [AVATAR_SIZE[72]]: PRESENCE_SIZE.LARGE,
+        [AVATAR_SIZE[64]]: PRESENCE_SIZE.MIDSIZE,
+        [AVATAR_SIZE[48]]: PRESENCE_SIZE.SMALL,
+        [AVATAR_SIZE[32]]: PRESENCE_SIZE.X_SMALL,
+        [AVATAR_SIZE[24]]: PRESENCE_SIZE.XX_SMALL,
+    };
+    return avatarPresenceSizeMap[size] || PRESENCE_SIZE.X_SMALL; // default size of presence
+};
 const getAvatarIconSize = (size) => {
     const avatarIconSizeMap = {
-        [AVATAR_SIZE.XX_LARGE]: 4.75,
-        [AVATAR_SIZE.X_LARGE]: 3,
-        [AVATAR_SIZE.LARGE]: 2.5,
-        [AVATAR_SIZE.MIDSIZE]: 2.25,
-        [AVATAR_SIZE.SMALL]: 1.75,
-        [AVATAR_SIZE.X_SMALL]: 1.25,
-        [AVATAR_SIZE.XX_SMALL]: 1,
+        [AVATAR_SIZE[124]]: 4.75,
+        [AVATAR_SIZE[88]]: 3,
+        [AVATAR_SIZE[72]]: 2.5,
+        [AVATAR_SIZE[64]]: 2.25,
+        [AVATAR_SIZE[48]]: 1.75,
+        [AVATAR_SIZE[32]]: 1.25,
+        [AVATAR_SIZE[24]]: 1,
     };
     return avatarIconSizeMap[size] || 1.25; // default size of icon
 };
 const getAvatarTextFontSize = (size) => {
     const avatarTextFontSizeMap = {
-        [AVATAR_SIZE.XX_LARGE]: FONT_TYPE.HEADING_XLARGE_MEDIUM,
-        [AVATAR_SIZE.X_LARGE]: FONT_TYPE.HEADING_LARGE_MEDIUM,
-        [AVATAR_SIZE.LARGE]: FONT_TYPE.HEADING_MIDSIZE_MEDIUM,
-        [AVATAR_SIZE.MIDSIZE]: FONT_TYPE.HEADING_SMALL_MEDIUM,
-        [AVATAR_SIZE.SMALL]: FONT_TYPE.HEADING_SMALL_MEDIUM,
-        [AVATAR_SIZE.XX_SMALL]: FONT_TYPE.BODY_SMALL_MEDIUM,
-        [AVATAR_SIZE.X_SMALL]: FONT_TYPE.BODY_MIDSIZE_MEDIUM,
+        [AVATAR_SIZE[124]]: FONT_TYPE.HEADING_XLARGE_MEDIUM,
+        [AVATAR_SIZE[88]]: FONT_TYPE.HEADING_LARGE_MEDIUM,
+        [AVATAR_SIZE[72]]: FONT_TYPE.HEADING_MIDSIZE_MEDIUM,
+        [AVATAR_SIZE[64]]: FONT_TYPE.HEADING_SMALL_MEDIUM,
+        [AVATAR_SIZE[48]]: FONT_TYPE.HEADING_SMALL_MEDIUM,
+        [AVATAR_SIZE[32]]: FONT_TYPE.BODY_MIDSIZE_MEDIUM,
+        [AVATAR_SIZE[24]]: FONT_TYPE.BODY_SMALL_MEDIUM,
     };
     return avatarTextFontSizeMap[size] || FONT_TYPE.BODY_MIDSIZE_MEDIUM; // default size of text font
 };
-export { getAvatarIconSize, getAvatarTextFontSize, };
+export { getAvatarIconSize, getAvatarTextFontSize, getPresenceSize, };

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

@@ -0,0 +1,25 @@
+import { CSSResult, PropertyValueMap } from 'lit';
+import Buttonsimple from '../buttonsimple';
+declare const AvatarButton_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/AvatarComponentMixin").AvatarComponentMixinInterface> & typeof Buttonsimple;
+/**
+ * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.
+ *
+ * This component is made by extending `buttonsimple` class.
+ * The button component acts as a wrapper for the avatar component.
+ *
+ * @dependency mdc-avatar
+ *
+ * @tagname mdc-avatarbutton
+ */
+declare class AvatarButton extends AvatarButton_base {
+    /**
+   * Aria-label attribute to be set for accessibility
+   */
+    ariaLabel: string | null;
+    constructor();
+    update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    private setSize;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default AvatarButton;

package/dist/components/avatarbutton/avatarbutton.component.js

@@ -0,0 +1,70 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { AvatarComponentMixin } from '../../utils/mixins/AvatarComponentMixin';
+import { AVATAR_SIZE, DEFAULTS } from '../avatar/avatar.constants';
+import { DEFAULTS as BUTTON_DEFAULTS } from '../button/button.constants';
+import Buttonsimple from '../buttonsimple';
+import styles from './avatarbutton.styles';
+/**
+ * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.
+ *
+ * This component is made by extending `buttonsimple` class.
+ * The button component acts as a wrapper for the avatar component.
+ *
+ * @dependency mdc-avatar
+ *
+ * @tagname mdc-avatarbutton
+ */
+class AvatarButton extends AvatarComponentMixin(Buttonsimple) {
+    constructor() {
+        super();
+        /**
+       * Aria-label attribute to be set for accessibility
+       */
+        this.ariaLabel = null;
+        this.active = undefined;
+        this.disabled = undefined;
+        this.softDisabled = undefined;
+        this.role = 'button';
+        this.type = BUTTON_DEFAULTS.TYPE;
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('size')) {
+            this.setSize(this.size);
+        }
+    }
+    setSize(size) {
+        this.setAttribute('size', Object.values(AVATAR_SIZE).includes(size) ? `${size}` : DEFAULTS.SIZE.toString());
+    }
+    render() {
+        return html `
+      <mdc-avatar
+        slot="prefixIcon"
+        ?is-typing="${this.isTyping}"
+        counter="${ifDefined(this.counter)}"
+        icon-name="${ifDefined(this.iconName)}"
+        initials="${ifDefined(this.initials)}"
+        presence="${ifDefined(this.presence)}"
+        size="${ifDefined(this.size)}"
+        src="${ifDefined(this.src)}"
+      ></mdc-avatar>
+    `;
+    }
+}
+AvatarButton.styles = [...styles];
+__decorate([
+    property({ type: String, attribute: 'aria-label' }),
+    __metadata("design:type", Object)
+], AvatarButton.prototype, "ariaLabel", void 0);
+export default AvatarButton;

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

@@ -0,0 +1,2 @@
+declare const TAG_NAME: "mdc-avatarbutton";
+export { TAG_NAME };

package/dist/components/avatarbutton/avatarbutton.constants.js

@@ -0,0 +1,3 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('avatarbutton');
+export { TAG_NAME };

package/dist/components/avatarbutton/avatarbutton.styles.d.ts

@@ -0,0 +1,2 @@
+declare const styles: import("lit").CSSResult[];
+export default styles;

package/dist/components/avatarbutton/avatarbutton.styles.js

@@ -0,0 +1,11 @@
+import { css } from 'lit';
+import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
+const styles = [hostFitContentStyles, css `
+  :host {
+    padding: unset;
+    margin: unset;
+    outline: none;
+    border-radius: 0.25rem;
+  }
+`, hostFocusRingStyles];
+export default styles;

package/dist/components/avatarbutton/index.d.ts

@@ -0,0 +1,8 @@
+import Avatarbutton from './avatarbutton.component';
+import '../avatar';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-avatarbutton']: Avatarbutton;
+    }
+}
+export default Avatarbutton;

package/dist/components/avatarbutton/index.js

@@ -0,0 +1,5 @@
+import Avatarbutton from './avatarbutton.component';
+import { TAG_NAME } from './avatarbutton.constants';
+import '../avatar';
+Avatarbutton.register(TAG_NAME);
+export default Avatarbutton;

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

@@ -56,7 +56,7 @@ declare class Button extends Buttonsimple {
      * Button sizing is based on the button type.
      * - **Pill button**: 40, 32, 28, 24.
      * - **Icon button**: 64, 52, 40, 32, 28, 24.
-     * - Tertiary icon button cam also be 20.
+     * - Tertiary icon button can also be 20.
      * @default 32
      */
     size: PillButtonSize | IconButtonSize;

package/dist/components/button/button.component.js

@@ -60,7 +60,7 @@ class Button extends Buttonsimple {
          * Button sizing is based on the button type.
          * - **Pill button**: 40, 32, 28, 24.
          * - **Icon button**: 64, 52, 40, 32, 28, 24.
-         * - Tertiary icon button cam also be 20.
+         * - Tertiary icon button can also be 20.
          * @default 32
          */
         this.size = DEFAULTS.SIZE;

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

@@ -35,10 +35,7 @@ declare class Buttonsimple extends Component {
      */
     softDisabled: boolean;
     /**
-     * Button sizing is based on the button type.
-     * - **Pill button**: 40, 32, 28, 24.
-     * - **Icon button**: 64, 52, 40, 32, 28, 24.
-     * - Tertiary icon button cam also be 20.
+     * Simplebutton size is a super set of all the sizes supported by children components.
      * @default 32
      */
     size: ButtonSize;

package/dist/components/buttonsimple/buttonsimple.component.js

@@ -52,10 +52,7 @@ class Buttonsimple extends Component {
          */
         this.softDisabled = false;
         /**
-         * Button sizing is based on the button type.
-         * - **Pill button**: 40, 32, 28, 24.
-         * - **Icon button**: 64, 52, 40, 32, 28, 24.
-         * - Tertiary icon button cam also be 20.
+         * Simplebutton size is a super set of all the sizes supported by children components.
          * @default 32
          */
         this.size = DEFAULTS.SIZE;