@momentum-design/components 0.15.5 → 0.15.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/dist/browser/index.js +72 -54
  2. package/dist/browser/index.js.map +4 -4
  3. package/dist/components/avatar/avatar.component.d.ts +2 -65
  4. package/dist/components/avatar/avatar.component.js +5 -50
  5. package/dist/components/avatar/avatar.constants.d.ts +11 -2
  6. package/dist/components/avatar/avatar.constants.js +11 -3
  7. package/dist/components/avatar/avatar.styles.js +14 -14
  8. package/dist/components/avatar/avatar.types.d.ts +1 -2
  9. package/dist/components/avatar/avatar.utils.d.ts +3 -1
  10. package/dist/components/avatar/avatar.utils.js +29 -16
  11. package/dist/components/avatarbutton/avatarbutton.component.d.ts +25 -0
  12. package/dist/components/avatarbutton/avatarbutton.component.js +70 -0
  13. package/dist/components/avatarbutton/avatarbutton.constants.d.ts +2 -0
  14. package/dist/components/avatarbutton/avatarbutton.constants.js +3 -0
  15. package/dist/components/avatarbutton/avatarbutton.styles.d.ts +2 -0
  16. package/dist/components/avatarbutton/avatarbutton.styles.js +11 -0
  17. package/dist/components/avatarbutton/index.d.ts +8 -0
  18. package/dist/components/avatarbutton/index.js +5 -0
  19. package/dist/custom-elements.json +1074 -199
  20. package/dist/index.d.ts +2 -1
  21. package/dist/index.js +2 -1
  22. package/dist/react/avatarbutton/index.d.ts +13 -0
  23. package/dist/react/avatarbutton/index.js +22 -0
  24. package/dist/react/index.d.ts +2 -1
  25. package/dist/react/index.js +2 -1
  26. package/dist/utils/mixins/AvatarComponentMixin.d.ts +15 -0
  27. package/dist/utils/mixins/AvatarComponentMixin.js +66 -0
  28. package/dist/utils/mixins/DisabledMixin.d.ts +1 -2
  29. package/dist/utils/mixins/TabIndexMixin.d.ts +1 -2
  30. package/dist/utils/mixins/index.types.d.ts +1 -0
  31. package/dist/utils/mixins/index.types.js +1 -0
  32. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -10,6 +10,7 @@ import Bullet from './components/bullet';
10
10
  import Marker from './components/marker';
11
11
  import Divider from './components/divider';
12
12
  import Buttonsimple from './components/buttonsimple';
13
+ import Avatarbutton from './components/avatarbutton';
13
14
  import type { TextType } from './components/text/text.types';
14
- export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, Buttonsimple, };
15
+ export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, Buttonsimple, Avatarbutton, };
15
16
  export type { TextType, };
package/dist/index.js CHANGED
@@ -10,4 +10,5 @@ import Bullet from './components/bullet';
10
10
  import Marker from './components/marker';
11
11
  import Divider from './components/divider';
12
12
  import Buttonsimple from './components/buttonsimple';
13
- export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, Buttonsimple, };
13
+ import Avatarbutton from './components/avatarbutton';
14
+ export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, Buttonsimple, Avatarbutton, };
@@ -0,0 +1,13 @@
1
+ import Component from '../../components/avatarbutton';
2
+ /**
3
+ * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.
4
+ *
5
+ * This component is made by extending `buttonsimple` class.
6
+ * The button component acts as a wrapper for the avatar component.
7
+ *
8
+ * @dependency mdc-avatar
9
+ *
10
+ * @tagname mdc-avatarbutton
11
+ */
12
+ declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
13
+ export default reactWrapper;
@@ -0,0 +1,22 @@
1
+ import * as React from 'react';
2
+ import { createComponent } from '@lit/react';
3
+ import Component from '../../components/avatarbutton';
4
+ import { TAG_NAME } from '../../components/avatarbutton/avatarbutton.constants';
5
+ /**
6
+ * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.
7
+ *
8
+ * This component is made by extending `buttonsimple` class.
9
+ * The button component acts as a wrapper for the avatar component.
10
+ *
11
+ * @dependency mdc-avatar
12
+ *
13
+ * @tagname mdc-avatarbutton
14
+ */
15
+ const reactWrapper = createComponent({
16
+ tagName: TAG_NAME,
17
+ elementClass: Component,
18
+ react: React,
19
+ events: {},
20
+ displayName: 'AvatarButton',
21
+ });
22
+ export default reactWrapper;
@@ -1,5 +1,6 @@
1
- export { default as Badge } from './badge';
2
1
  export { default as Avatar } from './avatar';
2
+ export { default as AvatarButton } from './avatarbutton';
3
+ export { default as Badge } from './badge';
3
4
  export { default as Bullet } from './bullet';
4
5
  export { default as Button } from './button';
5
6
  export { default as Buttonsimple } from './buttonsimple';
@@ -1,5 +1,6 @@
1
- export { default as Badge } from './badge';
2
1
  export { default as Avatar } from './avatar';
2
+ export { default as AvatarButton } from './avatarbutton';
3
+ export { default as Badge } from './badge';
3
4
  export { default as Bullet } from './bullet';
4
5
  export { default as Button } from './button';
5
6
  export { default as Buttonsimple } from './buttonsimple';
@@ -0,0 +1,15 @@
1
+ import type { AvatarSize } from '../../components/avatar/avatar.types';
2
+ import type { IconNames } from '../../components/icon/icon.types';
3
+ import type { PresenceType } from '../../components/presence/presence.types';
4
+ import type { Component } from '../../models';
5
+ import type { Constructor } from './index.types';
6
+ export interface AvatarComponentMixinInterface {
7
+ src?: string;
8
+ initials?: string;
9
+ presence?: PresenceType;
10
+ size: AvatarSize;
11
+ iconName?: IconNames;
12
+ counter?: number;
13
+ isTyping: boolean;
14
+ }
15
+ export declare const AvatarComponentMixin: <T extends Constructor<Component>>(superClass: T) => Constructor<AvatarComponentMixinInterface> & T;
@@ -0,0 +1,66 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ 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;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ var __metadata = (this && this.__metadata) || function (k, v) {
8
+ if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
9
+ };
10
+ import { property } from 'lit/decorators.js';
11
+ import { DEFAULTS as AVATAR_DEFAULTS } from '../../components/avatar/avatar.constants';
12
+ export const AvatarComponentMixin = (superClass) => {
13
+ class InnerMixinClass extends superClass {
14
+ constructor() {
15
+ super(...arguments);
16
+ /**
17
+ * Acceptable values include (size in px unit):
18
+ * - 24
19
+ * - 32
20
+ * - 48
21
+ * - 64
22
+ * - 72
23
+ * - 88
24
+ * - 124
25
+ *
26
+ * @default 32
27
+ */
28
+ this.size = AVATAR_DEFAULTS.SIZE;
29
+ /**
30
+ * Represents the typing indicator when the user is typing.
31
+ * @default false
32
+ */
33
+ this.isTyping = false;
34
+ }
35
+ }
36
+ __decorate([
37
+ property({ type: String }),
38
+ __metadata("design:type", String)
39
+ ], InnerMixinClass.prototype, "src", void 0);
40
+ __decorate([
41
+ property({ type: String }),
42
+ __metadata("design:type", String)
43
+ ], InnerMixinClass.prototype, "initials", void 0);
44
+ __decorate([
45
+ property({ type: String }),
46
+ __metadata("design:type", String)
47
+ ], InnerMixinClass.prototype, "presence", void 0);
48
+ __decorate([
49
+ property({ type: Number, reflect: true, attribute: 'size' }),
50
+ __metadata("design:type", Number)
51
+ ], InnerMixinClass.prototype, "size", void 0);
52
+ __decorate([
53
+ property({ type: String, attribute: 'icon-name' }),
54
+ __metadata("design:type", String)
55
+ ], InnerMixinClass.prototype, "iconName", void 0);
56
+ __decorate([
57
+ property({ type: Number }),
58
+ __metadata("design:type", Number)
59
+ ], InnerMixinClass.prototype, "counter", void 0);
60
+ __decorate([
61
+ property({ type: Boolean, attribute: 'is-typing' }),
62
+ __metadata("design:type", Object)
63
+ ], InnerMixinClass.prototype, "isTyping", void 0);
64
+ // Cast return type to your mixin's interface intersected with the superClass type
65
+ return InnerMixinClass;
66
+ };
@@ -1,7 +1,6 @@
1
1
  import { LitElement } from 'lit';
2
- type Constructor<T = {}> = new (...args: any[]) => T;
2
+ import type { Constructor } from './index.types';
3
3
  export interface DisabledMixinInterface {
4
4
  disabled: boolean;
5
5
  }
6
6
  export declare const DisabledMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<DisabledMixinInterface> & T;
7
- export {};
@@ -1,7 +1,6 @@
1
1
  import { LitElement } from 'lit';
2
- type Constructor<T = {}> = new (...args: any[]) => T;
2
+ import type { Constructor } from './index.types';
3
3
  export interface TabIndexMixinInterface {
4
4
  tabIndex: number;
5
5
  }
6
6
  export declare const TabIndexMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<TabIndexMixinInterface> & T;
7
- export {};
@@ -0,0 +1 @@
1
+ export type Constructor<T = {}> = new (...args: any[]) => T;
@@ -0,0 +1 @@
1
+ export {};
package/package.json CHANGED
@@ -35,5 +35,5 @@
35
35
  "@momentum-design/tokens": "*",
36
36
  "lit": "^3.2.0"
37
37
  },
38
- "version": "0.15.5"
38
+ "version": "0.15.6"
39
39
  }