@momentum-design/components 0.32.1 → 0.33.0
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.
- package/dist/browser/index.js +27 -27
- package/dist/browser/index.js.map +2 -2
- package/dist/components/popover/popover.component.d.ts +5 -0
- package/dist/components/popover/popover.component.js +15 -2
- package/dist/components/popover/popover.constants.d.ts +1 -0
- package/dist/components/popover/popover.constants.js +1 -0
- package/dist/custom-elements.json +264 -244
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +1 -1
- package/package.json +1 -1
|
@@ -175,6 +175,11 @@ declare class Popover extends Popover_base {
|
|
|
175
175
|
* aria-describedby of the popover.
|
|
176
176
|
*/
|
|
177
177
|
ariaDescribedby: string | null;
|
|
178
|
+
/**
|
|
179
|
+
* Disable aria-expanded attribute on trigger element.
|
|
180
|
+
* @default false
|
|
181
|
+
*/
|
|
182
|
+
disableAriaExpanded: boolean;
|
|
178
183
|
arrowElement: HTMLElement | null;
|
|
179
184
|
/** @internal */
|
|
180
185
|
triggerElement: HTMLElement | null;
|
|
@@ -193,6 +193,11 @@ class Popover extends FocusTrapMixin(Component) {
|
|
|
193
193
|
* aria-describedby of the popover.
|
|
194
194
|
*/
|
|
195
195
|
this.ariaDescribedby = null;
|
|
196
|
+
/**
|
|
197
|
+
* Disable aria-expanded attribute on trigger element.
|
|
198
|
+
* @default false
|
|
199
|
+
*/
|
|
200
|
+
this.disableAriaExpanded = DEFAULTS.DISABLE_ARIA_EXPANDED;
|
|
196
201
|
this.arrowElement = null;
|
|
197
202
|
/** @internal */
|
|
198
203
|
this.triggerElement = null;
|
|
@@ -450,7 +455,9 @@ class Popover extends FocusTrapMixin(Component) {
|
|
|
450
455
|
if (this.hideOnEscape) {
|
|
451
456
|
document.addEventListener('keydown', this.onEscapeKeydown);
|
|
452
457
|
}
|
|
453
|
-
this.
|
|
458
|
+
if (!this.disableAriaExpanded) {
|
|
459
|
+
this.triggerElement.setAttribute('aria-expanded', 'true');
|
|
460
|
+
}
|
|
454
461
|
if (this.interactive) {
|
|
455
462
|
this.triggerElement.setAttribute('aria-haspopup', this.triggerElement.getAttribute('aria-haspopup') || 'dialog');
|
|
456
463
|
}
|
|
@@ -475,7 +482,9 @@ class Popover extends FocusTrapMixin(Component) {
|
|
|
475
482
|
document.removeEventListener('keydown', this.onEscapeKeydown);
|
|
476
483
|
}
|
|
477
484
|
(_b = this.deactivateFocusTrap) === null || _b === void 0 ? void 0 : _b.call(this);
|
|
478
|
-
this.
|
|
485
|
+
if (!this.disableAriaExpanded) {
|
|
486
|
+
this.triggerElement.removeAttribute('aria-expanded');
|
|
487
|
+
}
|
|
479
488
|
if (this.interactive) {
|
|
480
489
|
this.triggerElement.removeAttribute('aria-haspopup');
|
|
481
490
|
}
|
|
@@ -673,4 +682,8 @@ __decorate([
|
|
|
673
682
|
property({ type: String, reflect: true, attribute: 'aria-describedby' }),
|
|
674
683
|
__metadata("design:type", Object)
|
|
675
684
|
], Popover.prototype, "ariaDescribedby", void 0);
|
|
685
|
+
__decorate([
|
|
686
|
+
property({ type: Boolean, reflect: true, attribute: 'disable-aria-expanded' }),
|
|
687
|
+
__metadata("design:type", Boolean)
|
|
688
|
+
], Popover.prototype, "disableAriaExpanded", void 0);
|
|
676
689
|
export default Popover;
|
|
@@ -2,250 +2,6 @@
|
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
3
|
"readme": "",
|
|
4
4
|
"modules": [
|
|
5
|
-
{
|
|
6
|
-
"kind": "javascript-module",
|
|
7
|
-
"path": "components/avatar/avatar.component.js",
|
|
8
|
-
"declarations": [
|
|
9
|
-
{
|
|
10
|
-
"kind": "class",
|
|
11
|
-
"description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
|
|
12
|
-
"name": "Avatar",
|
|
13
|
-
"cssProperties": [
|
|
14
|
-
{
|
|
15
|
-
"description": "Allows customization of the default background color.",
|
|
16
|
-
"name": "--mdc-avatar-default-background-color"
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
"description": "Allows customization of the default foreground color.",
|
|
20
|
-
"name": "--mdc-avatar-default-foreground-color"
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
"description": "Allows customization of the loading indicator background color.",
|
|
24
|
-
"name": "--mdc-avatar-loading-indicator-background-color"
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
"description": "Allows customization of the loading indicator foreground color.",
|
|
28
|
-
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
"description": "Allows customization of the loading overlay background color.",
|
|
32
|
-
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
33
|
-
}
|
|
34
|
-
],
|
|
35
|
-
"members": [
|
|
36
|
-
{
|
|
37
|
-
"kind": "field",
|
|
38
|
-
"name": "src",
|
|
39
|
-
"type": {
|
|
40
|
-
"text": "string | undefined"
|
|
41
|
-
},
|
|
42
|
-
"description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
|
|
43
|
-
"attribute": "src",
|
|
44
|
-
"inheritedFrom": {
|
|
45
|
-
"name": "AvatarComponentMixin",
|
|
46
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
47
|
-
}
|
|
48
|
-
},
|
|
49
|
-
{
|
|
50
|
-
"kind": "field",
|
|
51
|
-
"name": "initials",
|
|
52
|
-
"type": {
|
|
53
|
-
"text": "string | undefined"
|
|
54
|
-
},
|
|
55
|
-
"description": "The initials to be displayed for the avatar.",
|
|
56
|
-
"attribute": "initials",
|
|
57
|
-
"inheritedFrom": {
|
|
58
|
-
"name": "AvatarComponentMixin",
|
|
59
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
60
|
-
}
|
|
61
|
-
},
|
|
62
|
-
{
|
|
63
|
-
"kind": "field",
|
|
64
|
-
"name": "presence",
|
|
65
|
-
"type": {
|
|
66
|
-
"text": "PresenceType | undefined"
|
|
67
|
-
},
|
|
68
|
-
"description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
|
|
69
|
-
"attribute": "presence",
|
|
70
|
-
"inheritedFrom": {
|
|
71
|
-
"name": "AvatarComponentMixin",
|
|
72
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
73
|
-
}
|
|
74
|
-
},
|
|
75
|
-
{
|
|
76
|
-
"kind": "field",
|
|
77
|
-
"name": "size",
|
|
78
|
-
"type": {
|
|
79
|
-
"text": "AvatarSize"
|
|
80
|
-
},
|
|
81
|
-
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
82
|
-
"default": "32",
|
|
83
|
-
"attribute": "size",
|
|
84
|
-
"reflects": true,
|
|
85
|
-
"inheritedFrom": {
|
|
86
|
-
"name": "AvatarComponentMixin",
|
|
87
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
88
|
-
}
|
|
89
|
-
},
|
|
90
|
-
{
|
|
91
|
-
"kind": "field",
|
|
92
|
-
"name": "counter",
|
|
93
|
-
"type": {
|
|
94
|
-
"text": "number | undefined"
|
|
95
|
-
},
|
|
96
|
-
"description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
|
|
97
|
-
"attribute": "counter",
|
|
98
|
-
"inheritedFrom": {
|
|
99
|
-
"name": "AvatarComponentMixin",
|
|
100
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
101
|
-
}
|
|
102
|
-
},
|
|
103
|
-
{
|
|
104
|
-
"kind": "field",
|
|
105
|
-
"name": "isTyping",
|
|
106
|
-
"type": {
|
|
107
|
-
"text": "boolean"
|
|
108
|
-
},
|
|
109
|
-
"default": "false",
|
|
110
|
-
"description": "Represents the typing indicator when the user is typing.",
|
|
111
|
-
"attribute": "is-typing",
|
|
112
|
-
"inheritedFrom": {
|
|
113
|
-
"name": "AvatarComponentMixin",
|
|
114
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
115
|
-
}
|
|
116
|
-
},
|
|
117
|
-
{
|
|
118
|
-
"kind": "field",
|
|
119
|
-
"name": "iconName",
|
|
120
|
-
"type": {
|
|
121
|
-
"text": "IconNames | undefined"
|
|
122
|
-
},
|
|
123
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
124
|
-
"attribute": "icon-name",
|
|
125
|
-
"inheritedFrom": {
|
|
126
|
-
"name": "IconNameMixin",
|
|
127
|
-
"module": "utils/mixins/IconNameMixin.js"
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
],
|
|
131
|
-
"mixins": [
|
|
132
|
-
{
|
|
133
|
-
"name": "AvatarComponentMixin",
|
|
134
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
135
|
-
},
|
|
136
|
-
{
|
|
137
|
-
"name": "IconNameMixin",
|
|
138
|
-
"module": "/src/utils/mixins/IconNameMixin"
|
|
139
|
-
}
|
|
140
|
-
],
|
|
141
|
-
"superclass": {
|
|
142
|
-
"name": "Component",
|
|
143
|
-
"module": "/src/models"
|
|
144
|
-
},
|
|
145
|
-
"tagName": "mdc-avatar",
|
|
146
|
-
"jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n * Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n * Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n * Allows customization of the loading overlay background color.\n */",
|
|
147
|
-
"customElement": true,
|
|
148
|
-
"attributes": [
|
|
149
|
-
{
|
|
150
|
-
"name": "src",
|
|
151
|
-
"type": {
|
|
152
|
-
"text": "string | undefined"
|
|
153
|
-
},
|
|
154
|
-
"description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
|
|
155
|
-
"fieldName": "src",
|
|
156
|
-
"inheritedFrom": {
|
|
157
|
-
"name": "AvatarComponentMixin",
|
|
158
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
159
|
-
}
|
|
160
|
-
},
|
|
161
|
-
{
|
|
162
|
-
"name": "initials",
|
|
163
|
-
"type": {
|
|
164
|
-
"text": "string | undefined"
|
|
165
|
-
},
|
|
166
|
-
"description": "The initials to be displayed for the avatar.",
|
|
167
|
-
"fieldName": "initials",
|
|
168
|
-
"inheritedFrom": {
|
|
169
|
-
"name": "AvatarComponentMixin",
|
|
170
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
171
|
-
}
|
|
172
|
-
},
|
|
173
|
-
{
|
|
174
|
-
"name": "presence",
|
|
175
|
-
"type": {
|
|
176
|
-
"text": "PresenceType | undefined"
|
|
177
|
-
},
|
|
178
|
-
"description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
|
|
179
|
-
"fieldName": "presence",
|
|
180
|
-
"inheritedFrom": {
|
|
181
|
-
"name": "AvatarComponentMixin",
|
|
182
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
183
|
-
}
|
|
184
|
-
},
|
|
185
|
-
{
|
|
186
|
-
"name": "size",
|
|
187
|
-
"type": {
|
|
188
|
-
"text": "AvatarSize"
|
|
189
|
-
},
|
|
190
|
-
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
191
|
-
"default": "32",
|
|
192
|
-
"fieldName": "size",
|
|
193
|
-
"inheritedFrom": {
|
|
194
|
-
"name": "AvatarComponentMixin",
|
|
195
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
196
|
-
}
|
|
197
|
-
},
|
|
198
|
-
{
|
|
199
|
-
"name": "counter",
|
|
200
|
-
"type": {
|
|
201
|
-
"text": "number | undefined"
|
|
202
|
-
},
|
|
203
|
-
"description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
|
|
204
|
-
"fieldName": "counter",
|
|
205
|
-
"inheritedFrom": {
|
|
206
|
-
"name": "AvatarComponentMixin",
|
|
207
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
208
|
-
}
|
|
209
|
-
},
|
|
210
|
-
{
|
|
211
|
-
"name": "is-typing",
|
|
212
|
-
"type": {
|
|
213
|
-
"text": "boolean"
|
|
214
|
-
},
|
|
215
|
-
"default": "false",
|
|
216
|
-
"description": "Represents the typing indicator when the user is typing.",
|
|
217
|
-
"fieldName": "isTyping",
|
|
218
|
-
"inheritedFrom": {
|
|
219
|
-
"name": "AvatarComponentMixin",
|
|
220
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
221
|
-
}
|
|
222
|
-
},
|
|
223
|
-
{
|
|
224
|
-
"name": "icon-name",
|
|
225
|
-
"type": {
|
|
226
|
-
"text": "IconNames | undefined"
|
|
227
|
-
},
|
|
228
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
229
|
-
"fieldName": "iconName",
|
|
230
|
-
"inheritedFrom": {
|
|
231
|
-
"name": "IconNameMixin",
|
|
232
|
-
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
233
|
-
}
|
|
234
|
-
}
|
|
235
|
-
]
|
|
236
|
-
}
|
|
237
|
-
],
|
|
238
|
-
"exports": [
|
|
239
|
-
{
|
|
240
|
-
"kind": "js",
|
|
241
|
-
"name": "default",
|
|
242
|
-
"declaration": {
|
|
243
|
-
"name": "Avatar",
|
|
244
|
-
"module": "components/avatar/avatar.component.js"
|
|
245
|
-
}
|
|
246
|
-
}
|
|
247
|
-
]
|
|
248
|
-
},
|
|
249
5
|
{
|
|
250
6
|
"kind": "javascript-module",
|
|
251
7
|
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
@@ -1171,6 +927,250 @@
|
|
|
1171
927
|
}
|
|
1172
928
|
]
|
|
1173
929
|
},
|
|
930
|
+
{
|
|
931
|
+
"kind": "javascript-module",
|
|
932
|
+
"path": "components/avatar/avatar.component.js",
|
|
933
|
+
"declarations": [
|
|
934
|
+
{
|
|
935
|
+
"kind": "class",
|
|
936
|
+
"description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
|
|
937
|
+
"name": "Avatar",
|
|
938
|
+
"cssProperties": [
|
|
939
|
+
{
|
|
940
|
+
"description": "Allows customization of the default background color.",
|
|
941
|
+
"name": "--mdc-avatar-default-background-color"
|
|
942
|
+
},
|
|
943
|
+
{
|
|
944
|
+
"description": "Allows customization of the default foreground color.",
|
|
945
|
+
"name": "--mdc-avatar-default-foreground-color"
|
|
946
|
+
},
|
|
947
|
+
{
|
|
948
|
+
"description": "Allows customization of the loading indicator background color.",
|
|
949
|
+
"name": "--mdc-avatar-loading-indicator-background-color"
|
|
950
|
+
},
|
|
951
|
+
{
|
|
952
|
+
"description": "Allows customization of the loading indicator foreground color.",
|
|
953
|
+
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
|
954
|
+
},
|
|
955
|
+
{
|
|
956
|
+
"description": "Allows customization of the loading overlay background color.",
|
|
957
|
+
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
958
|
+
}
|
|
959
|
+
],
|
|
960
|
+
"members": [
|
|
961
|
+
{
|
|
962
|
+
"kind": "field",
|
|
963
|
+
"name": "src",
|
|
964
|
+
"type": {
|
|
965
|
+
"text": "string | undefined"
|
|
966
|
+
},
|
|
967
|
+
"description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
|
|
968
|
+
"attribute": "src",
|
|
969
|
+
"inheritedFrom": {
|
|
970
|
+
"name": "AvatarComponentMixin",
|
|
971
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
972
|
+
}
|
|
973
|
+
},
|
|
974
|
+
{
|
|
975
|
+
"kind": "field",
|
|
976
|
+
"name": "initials",
|
|
977
|
+
"type": {
|
|
978
|
+
"text": "string | undefined"
|
|
979
|
+
},
|
|
980
|
+
"description": "The initials to be displayed for the avatar.",
|
|
981
|
+
"attribute": "initials",
|
|
982
|
+
"inheritedFrom": {
|
|
983
|
+
"name": "AvatarComponentMixin",
|
|
984
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
985
|
+
}
|
|
986
|
+
},
|
|
987
|
+
{
|
|
988
|
+
"kind": "field",
|
|
989
|
+
"name": "presence",
|
|
990
|
+
"type": {
|
|
991
|
+
"text": "PresenceType | undefined"
|
|
992
|
+
},
|
|
993
|
+
"description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
|
|
994
|
+
"attribute": "presence",
|
|
995
|
+
"inheritedFrom": {
|
|
996
|
+
"name": "AvatarComponentMixin",
|
|
997
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
998
|
+
}
|
|
999
|
+
},
|
|
1000
|
+
{
|
|
1001
|
+
"kind": "field",
|
|
1002
|
+
"name": "size",
|
|
1003
|
+
"type": {
|
|
1004
|
+
"text": "AvatarSize"
|
|
1005
|
+
},
|
|
1006
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
1007
|
+
"default": "32",
|
|
1008
|
+
"attribute": "size",
|
|
1009
|
+
"reflects": true,
|
|
1010
|
+
"inheritedFrom": {
|
|
1011
|
+
"name": "AvatarComponentMixin",
|
|
1012
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
1013
|
+
}
|
|
1014
|
+
},
|
|
1015
|
+
{
|
|
1016
|
+
"kind": "field",
|
|
1017
|
+
"name": "counter",
|
|
1018
|
+
"type": {
|
|
1019
|
+
"text": "number | undefined"
|
|
1020
|
+
},
|
|
1021
|
+
"description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
|
|
1022
|
+
"attribute": "counter",
|
|
1023
|
+
"inheritedFrom": {
|
|
1024
|
+
"name": "AvatarComponentMixin",
|
|
1025
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
1026
|
+
}
|
|
1027
|
+
},
|
|
1028
|
+
{
|
|
1029
|
+
"kind": "field",
|
|
1030
|
+
"name": "isTyping",
|
|
1031
|
+
"type": {
|
|
1032
|
+
"text": "boolean"
|
|
1033
|
+
},
|
|
1034
|
+
"default": "false",
|
|
1035
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
1036
|
+
"attribute": "is-typing",
|
|
1037
|
+
"inheritedFrom": {
|
|
1038
|
+
"name": "AvatarComponentMixin",
|
|
1039
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
1040
|
+
}
|
|
1041
|
+
},
|
|
1042
|
+
{
|
|
1043
|
+
"kind": "field",
|
|
1044
|
+
"name": "iconName",
|
|
1045
|
+
"type": {
|
|
1046
|
+
"text": "IconNames | undefined"
|
|
1047
|
+
},
|
|
1048
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
1049
|
+
"attribute": "icon-name",
|
|
1050
|
+
"inheritedFrom": {
|
|
1051
|
+
"name": "IconNameMixin",
|
|
1052
|
+
"module": "utils/mixins/IconNameMixin.js"
|
|
1053
|
+
}
|
|
1054
|
+
}
|
|
1055
|
+
],
|
|
1056
|
+
"mixins": [
|
|
1057
|
+
{
|
|
1058
|
+
"name": "AvatarComponentMixin",
|
|
1059
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
1060
|
+
},
|
|
1061
|
+
{
|
|
1062
|
+
"name": "IconNameMixin",
|
|
1063
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
|
1064
|
+
}
|
|
1065
|
+
],
|
|
1066
|
+
"superclass": {
|
|
1067
|
+
"name": "Component",
|
|
1068
|
+
"module": "/src/models"
|
|
1069
|
+
},
|
|
1070
|
+
"tagName": "mdc-avatar",
|
|
1071
|
+
"jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n * Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n * Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n * Allows customization of the loading overlay background color.\n */",
|
|
1072
|
+
"customElement": true,
|
|
1073
|
+
"attributes": [
|
|
1074
|
+
{
|
|
1075
|
+
"name": "src",
|
|
1076
|
+
"type": {
|
|
1077
|
+
"text": "string | undefined"
|
|
1078
|
+
},
|
|
1079
|
+
"description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
|
|
1080
|
+
"fieldName": "src",
|
|
1081
|
+
"inheritedFrom": {
|
|
1082
|
+
"name": "AvatarComponentMixin",
|
|
1083
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1084
|
+
}
|
|
1085
|
+
},
|
|
1086
|
+
{
|
|
1087
|
+
"name": "initials",
|
|
1088
|
+
"type": {
|
|
1089
|
+
"text": "string | undefined"
|
|
1090
|
+
},
|
|
1091
|
+
"description": "The initials to be displayed for the avatar.",
|
|
1092
|
+
"fieldName": "initials",
|
|
1093
|
+
"inheritedFrom": {
|
|
1094
|
+
"name": "AvatarComponentMixin",
|
|
1095
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1096
|
+
}
|
|
1097
|
+
},
|
|
1098
|
+
{
|
|
1099
|
+
"name": "presence",
|
|
1100
|
+
"type": {
|
|
1101
|
+
"text": "PresenceType | undefined"
|
|
1102
|
+
},
|
|
1103
|
+
"description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
|
|
1104
|
+
"fieldName": "presence",
|
|
1105
|
+
"inheritedFrom": {
|
|
1106
|
+
"name": "AvatarComponentMixin",
|
|
1107
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1108
|
+
}
|
|
1109
|
+
},
|
|
1110
|
+
{
|
|
1111
|
+
"name": "size",
|
|
1112
|
+
"type": {
|
|
1113
|
+
"text": "AvatarSize"
|
|
1114
|
+
},
|
|
1115
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
1116
|
+
"default": "32",
|
|
1117
|
+
"fieldName": "size",
|
|
1118
|
+
"inheritedFrom": {
|
|
1119
|
+
"name": "AvatarComponentMixin",
|
|
1120
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1121
|
+
}
|
|
1122
|
+
},
|
|
1123
|
+
{
|
|
1124
|
+
"name": "counter",
|
|
1125
|
+
"type": {
|
|
1126
|
+
"text": "number | undefined"
|
|
1127
|
+
},
|
|
1128
|
+
"description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
|
|
1129
|
+
"fieldName": "counter",
|
|
1130
|
+
"inheritedFrom": {
|
|
1131
|
+
"name": "AvatarComponentMixin",
|
|
1132
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1133
|
+
}
|
|
1134
|
+
},
|
|
1135
|
+
{
|
|
1136
|
+
"name": "is-typing",
|
|
1137
|
+
"type": {
|
|
1138
|
+
"text": "boolean"
|
|
1139
|
+
},
|
|
1140
|
+
"default": "false",
|
|
1141
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
1142
|
+
"fieldName": "isTyping",
|
|
1143
|
+
"inheritedFrom": {
|
|
1144
|
+
"name": "AvatarComponentMixin",
|
|
1145
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1146
|
+
}
|
|
1147
|
+
},
|
|
1148
|
+
{
|
|
1149
|
+
"name": "icon-name",
|
|
1150
|
+
"type": {
|
|
1151
|
+
"text": "IconNames | undefined"
|
|
1152
|
+
},
|
|
1153
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
1154
|
+
"fieldName": "iconName",
|
|
1155
|
+
"inheritedFrom": {
|
|
1156
|
+
"name": "IconNameMixin",
|
|
1157
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
1158
|
+
}
|
|
1159
|
+
}
|
|
1160
|
+
]
|
|
1161
|
+
}
|
|
1162
|
+
],
|
|
1163
|
+
"exports": [
|
|
1164
|
+
{
|
|
1165
|
+
"kind": "js",
|
|
1166
|
+
"name": "default",
|
|
1167
|
+
"declaration": {
|
|
1168
|
+
"name": "Avatar",
|
|
1169
|
+
"module": "components/avatar/avatar.component.js"
|
|
1170
|
+
}
|
|
1171
|
+
}
|
|
1172
|
+
]
|
|
1173
|
+
},
|
|
1174
1174
|
{
|
|
1175
1175
|
"kind": "javascript-module",
|
|
1176
1176
|
"path": "components/bullet/bullet.component.js",
|
|
@@ -6166,6 +6166,17 @@
|
|
|
6166
6166
|
"attribute": "aria-describedby",
|
|
6167
6167
|
"reflects": true
|
|
6168
6168
|
},
|
|
6169
|
+
{
|
|
6170
|
+
"kind": "field",
|
|
6171
|
+
"name": "disableAriaExpanded",
|
|
6172
|
+
"type": {
|
|
6173
|
+
"text": "boolean"
|
|
6174
|
+
},
|
|
6175
|
+
"description": "Disable aria-expanded attribute on trigger element.",
|
|
6176
|
+
"default": "false",
|
|
6177
|
+
"attribute": "disable-aria-expanded",
|
|
6178
|
+
"reflects": true
|
|
6179
|
+
},
|
|
6169
6180
|
{
|
|
6170
6181
|
"kind": "field",
|
|
6171
6182
|
"name": "arrowElement",
|
|
@@ -6993,6 +7004,15 @@
|
|
|
6993
7004
|
"description": "aria-describedby of the popover.",
|
|
6994
7005
|
"fieldName": "ariaDescribedby"
|
|
6995
7006
|
},
|
|
7007
|
+
{
|
|
7008
|
+
"name": "disable-aria-expanded",
|
|
7009
|
+
"type": {
|
|
7010
|
+
"text": "boolean"
|
|
7011
|
+
},
|
|
7012
|
+
"description": "Disable aria-expanded attribute on trigger element.",
|
|
7013
|
+
"default": "false",
|
|
7014
|
+
"fieldName": "disableAriaExpanded"
|
|
7015
|
+
},
|
|
6996
7016
|
{
|
|
6997
7017
|
"name": "enabledFocusTrap",
|
|
6998
7018
|
"type": {
|
package/dist/react/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export { default as Avatar } from './avatar';
|
|
2
1
|
export { default as AvatarButton } from './avatarbutton';
|
|
3
2
|
export { default as Badge } from './badge';
|
|
3
|
+
export { default as Avatar } from './avatar';
|
|
4
4
|
export { default as Bullet } from './bullet';
|
|
5
5
|
export { default as Button } from './button';
|
|
6
6
|
export { default as Buttonsimple } from './buttonsimple';
|
package/dist/react/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export { default as Avatar } from './avatar';
|
|
2
1
|
export { default as AvatarButton } from './avatarbutton';
|
|
3
2
|
export { default as Badge } from './badge';
|
|
3
|
+
export { default as Avatar } from './avatar';
|
|
4
4
|
export { default as Bullet } from './bullet';
|
|
5
5
|
export { default as Button } from './button';
|
|
6
6
|
export { default as Buttonsimple } from './buttonsimple';
|
package/package.json
CHANGED