@momentum-design/components - npm Package Compare versions

Comparing version 0.15.5 to 0.15.6

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

 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;
 /**
@@ -42,65 +40,4 @@ * The `mdc-avatar` component is used to represent a person or a space.
  */
-declare class Avatar extends Component {
+declare class Avatar extends Avatar_base {
     /**
-     * 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;
-    /**
      * @internal
@@ -107,0 +44,0 @@ */

dist/components/avatar/avatar.component.js

@@ -11,8 +11,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 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';
 /**
@@ -53,24 +54,6 @@ * The `mdc-avatar` component is used to represent a person or a space.
  */
-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
@@ -95,3 +78,3 @@ */
             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>
       `;
@@ -330,30 +313,2 @@ }
 __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(),
@@ -360,0 +315,0 @@ __metadata("design:type", Object)

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

@@ -9,7 +9,16 @@ declare const TAG_NAME: "mdc-avatar";
 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, };

dist/components/avatar/avatar.constants.js

 import utils from '../../utils/tag-name';
-import { SIZE as AVATAR_SIZE } from '../presence/presence.constants';
 const TAG_NAME = utils.constructTagName('avatar');
@@ -12,7 +11,16 @@ const AVATAR_TYPE = {
 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, };

dist/components/avatar/avatar.styles.js

@@ -11,47 +11,47 @@ import { css } from 'lit';
   }
-  :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);
@@ -58,0 +58,0 @@ }

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

@@ -1,5 +0,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>;

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

@@ -0,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, };

dist/components/avatar/avatar.utils.js

@@ -1,12 +0,25 @@
-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,
     };
@@ -17,12 +30,12 @@ return avatarIconSizeMap[size] || 1.25; // default size of icon
     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, };

dist/index.d.ts

@@ -13,4 +13,5 @@ import ThemeProvider from './components/themeprovider';
 import Buttonsimple from './components/buttonsimple';
+import Avatarbutton from './components/avatarbutton';
 import type { TextType } from './components/text/text.types';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, Buttonsimple, };
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, Buttonsimple, Avatarbutton, };
 export type { TextType, };

dist/index.js

@@ -13,2 +13,3 @@ import ThemeProvider from './components/themeprovider';
 import Buttonsimple from './components/buttonsimple';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, Buttonsimple, };
+import Avatarbutton from './components/avatarbutton';
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, Buttonsimple, Avatarbutton, };

dist/react/index.d.ts

@@ -0,3 +1,4 @@
+export { default as Avatar } from './avatar';
+export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
-export { default as Avatar } from './avatar';
 export { default as Bullet } from './bullet';
@@ -4,0 +5,0 @@ export { default as Button } from './button';

dist/react/index.js

@@ -0,3 +1,4 @@
+export { default as Avatar } from './avatar';
+export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
-export { default as Avatar } from './avatar';
 export { default as Bullet } from './bullet';
@@ -4,0 +5,0 @@ export { default as Button } from './button';

dist/utils/mixins/DisabledMixin.d.ts

 import { LitElement } from 'lit';
-type Constructor<T = {}> = new (...args: any[]) => T;
+import type { Constructor } from './index.types';
 export interface DisabledMixinInterface {
@@ -7,2 +7,1 @@ disabled: boolean;
 export declare const DisabledMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<DisabledMixinInterface> & T;
-export {};

dist/utils/mixins/TabIndexMixin.d.ts

 import { LitElement } from 'lit';
-type Constructor<T = {}> = new (...args: any[]) => T;
+import type { Constructor } from './index.types';
 export interface TabIndexMixinInterface {
@@ -7,2 +7,1 @@ tabIndex: number;
 export declare const TabIndexMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<TabIndexMixinInterface> & T;
-export {};

package.json

@@ -38,3 +38,3 @@ {
   },
-  "version": "0.15.5"
+  "version": "0.15.6"
 }

No alert changes

Improved metrics

Total package byte prevSize

893269

increased by6.03%

Number of package files

205

increased by7.33%

Lines of code

10923

increased by10.95%

No dependency changes