@momentum-design/components 0.31.1 → 0.32.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/custom-elements.json +461 -461
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +2 -2
- package/package.json +1 -1
|
@@ -4,115 +4,218 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "components/
|
|
7
|
+
"path": "components/badge/badge.component.js",
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "The `mdc-
|
|
12
|
-
"name": "
|
|
11
|
+
"description": "The `mdc-badge` component is a versatile UI element used to\ndisplay dot, icons, counters, success, warning and error type badge.\n\nSupported badge types:\n- `dot`: Displays a dot notification badge with a blue color.\n- `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n- `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\nit shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n- `success`: Displays a success badge with a check circle icon and green color.\n- `warning`: Displays a warning badge with a warning icon and yellow color.\n- `error`: Displays a error badge with a error legacy icon and red color.\n\nFor `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n\nFor the `counter` type, the `mdc-text` component is used to render the counter value.",
|
|
12
|
+
"name": "Badge",
|
|
13
13
|
"cssProperties": [
|
|
14
14
|
{
|
|
15
|
-
"description": "
|
|
16
|
-
"name": "--mdc-
|
|
15
|
+
"description": "The foreground color of the primary badge.",
|
|
16
|
+
"name": "--mdc-badge-primary-foreground-color"
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
|
-
"description": "
|
|
20
|
-
"name": "--mdc-
|
|
19
|
+
"description": "The background color of the primary badge.",
|
|
20
|
+
"name": "--mdc-badge-primary-background-color"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
|
-
"description": "
|
|
24
|
-
"name": "--mdc-
|
|
23
|
+
"description": "The foreground color of the secondary badge.",
|
|
24
|
+
"name": "--mdc-badge-secondary-foreground-color"
|
|
25
25
|
},
|
|
26
26
|
{
|
|
27
|
-
"description": "
|
|
28
|
-
"name": "--mdc-
|
|
27
|
+
"description": "The background color of the secondary badge.",
|
|
28
|
+
"name": "--mdc-badge-secondary-background-color"
|
|
29
29
|
},
|
|
30
30
|
{
|
|
31
|
-
"description": "
|
|
32
|
-
"name": "--mdc-
|
|
31
|
+
"description": "The foreground color of the success badge.",
|
|
32
|
+
"name": "--mdc-badge-success-foreground-color"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"description": "The background color of the success badge.",
|
|
36
|
+
"name": "--mdc-badge-success-background-color"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"description": "The foreground color of the warning badge.",
|
|
40
|
+
"name": "--mdc-badge-warning-foreground-color"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"description": "The background color of the warning badge.",
|
|
44
|
+
"name": "--mdc-badge-warning-background-color"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"description": "The foreground color of the error badge.",
|
|
48
|
+
"name": "--mdc-badge-error-foreground-color"
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"description": "The background color of the error badge.",
|
|
52
|
+
"name": "--mdc-badge-error-background-color"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"description": "The background color of the badge overlay.",
|
|
56
|
+
"name": "--mdc-badge-overlay-background-color"
|
|
33
57
|
}
|
|
34
58
|
],
|
|
35
59
|
"members": [
|
|
36
60
|
{
|
|
37
61
|
"kind": "field",
|
|
38
|
-
"name": "
|
|
62
|
+
"name": "type",
|
|
39
63
|
"type": {
|
|
40
|
-
"text": "
|
|
64
|
+
"text": "BadgeType | undefined"
|
|
41
65
|
},
|
|
42
|
-
"description": "
|
|
43
|
-
"attribute": "
|
|
44
|
-
"
|
|
45
|
-
"name": "AvatarComponentMixin",
|
|
46
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
47
|
-
}
|
|
66
|
+
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
67
|
+
"attribute": "type",
|
|
68
|
+
"reflects": true
|
|
48
69
|
},
|
|
49
70
|
{
|
|
50
71
|
"kind": "field",
|
|
51
|
-
"name": "
|
|
72
|
+
"name": "variant",
|
|
52
73
|
"type": {
|
|
53
|
-
"text": "
|
|
74
|
+
"text": "IconVariant"
|
|
54
75
|
},
|
|
55
|
-
"description": "
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
|
|
59
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
60
|
-
}
|
|
76
|
+
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
77
|
+
"default": "primary",
|
|
78
|
+
"attribute": "variant",
|
|
79
|
+
"reflects": true
|
|
61
80
|
},
|
|
62
81
|
{
|
|
63
82
|
"kind": "field",
|
|
64
|
-
"name": "
|
|
83
|
+
"name": "counter",
|
|
65
84
|
"type": {
|
|
66
|
-
"text": "
|
|
85
|
+
"text": "number | undefined"
|
|
67
86
|
},
|
|
68
|
-
"description": "
|
|
69
|
-
"attribute": "
|
|
70
|
-
"inheritedFrom": {
|
|
71
|
-
"name": "AvatarComponentMixin",
|
|
72
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
73
|
-
}
|
|
87
|
+
"description": "Counter is the number which can be provided in the badge.",
|
|
88
|
+
"attribute": "counter"
|
|
74
89
|
},
|
|
75
90
|
{
|
|
76
91
|
"kind": "field",
|
|
77
|
-
"name": "
|
|
92
|
+
"name": "maxCounter",
|
|
78
93
|
"type": {
|
|
79
|
-
"text": "
|
|
94
|
+
"text": "number"
|
|
80
95
|
},
|
|
81
|
-
"description": "
|
|
82
|
-
"default": "
|
|
83
|
-
"attribute": "
|
|
84
|
-
"reflects": true
|
|
85
|
-
"inheritedFrom": {
|
|
86
|
-
"name": "AvatarComponentMixin",
|
|
87
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
88
|
-
}
|
|
96
|
+
"description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
|
|
97
|
+
"default": "99",
|
|
98
|
+
"attribute": "max-counter",
|
|
99
|
+
"reflects": true
|
|
89
100
|
},
|
|
90
101
|
{
|
|
91
102
|
"kind": "field",
|
|
92
|
-
"name": "
|
|
103
|
+
"name": "overlay",
|
|
93
104
|
"type": {
|
|
94
|
-
"text": "
|
|
105
|
+
"text": "boolean"
|
|
95
106
|
},
|
|
96
|
-
"
|
|
97
|
-
"
|
|
98
|
-
"
|
|
99
|
-
"name": "AvatarComponentMixin",
|
|
100
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
101
|
-
}
|
|
107
|
+
"default": "false",
|
|
108
|
+
"description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
|
|
109
|
+
"attribute": "overlay"
|
|
102
110
|
},
|
|
103
111
|
{
|
|
104
112
|
"kind": "field",
|
|
105
|
-
"name": "
|
|
113
|
+
"name": "ariaLabel",
|
|
106
114
|
"type": {
|
|
107
|
-
"text": "
|
|
115
|
+
"text": "string | null"
|
|
108
116
|
},
|
|
109
|
-
"default": "
|
|
110
|
-
"description": "
|
|
111
|
-
"attribute": "
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
117
|
+
"default": "null",
|
|
118
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
119
|
+
"attribute": "aria-label"
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"kind": "method",
|
|
123
|
+
"name": "getCounterText",
|
|
124
|
+
"privacy": "private",
|
|
125
|
+
"return": {
|
|
126
|
+
"type": {
|
|
127
|
+
"text": ""
|
|
128
|
+
}
|
|
129
|
+
},
|
|
130
|
+
"parameters": [
|
|
131
|
+
{
|
|
132
|
+
"name": "maxCounter",
|
|
133
|
+
"type": {
|
|
134
|
+
"text": "number"
|
|
135
|
+
},
|
|
136
|
+
"description": "the maximum limit which can be displayed on the badge"
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
"name": "counter",
|
|
140
|
+
"optional": true,
|
|
141
|
+
"type": {
|
|
142
|
+
"text": "number"
|
|
143
|
+
},
|
|
144
|
+
"description": "the number to be displayed on the badge"
|
|
145
|
+
}
|
|
146
|
+
],
|
|
147
|
+
"description": "If `type` is set to `counter` and if `counter` is greater than `maxCounter`,\nthen it will return a string the maxCounter value as string.\nOtherwise, it will return a string representation of `counter`.\nIf `counter` is not a number, it will return an empty string."
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
"kind": "method",
|
|
151
|
+
"name": "getBadgeIcon",
|
|
152
|
+
"privacy": "private",
|
|
153
|
+
"return": {
|
|
154
|
+
"type": {
|
|
155
|
+
"text": ""
|
|
156
|
+
}
|
|
157
|
+
},
|
|
158
|
+
"parameters": [
|
|
159
|
+
{
|
|
160
|
+
"name": "iconName",
|
|
161
|
+
"type": {
|
|
162
|
+
"text": "string"
|
|
163
|
+
},
|
|
164
|
+
"description": "the name of the icon from the icon set"
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
"name": "backgroundClassPostfix",
|
|
168
|
+
"type": {
|
|
169
|
+
"text": "string"
|
|
170
|
+
},
|
|
171
|
+
"description": "postfix for the class to style the badge icon."
|
|
172
|
+
}
|
|
173
|
+
],
|
|
174
|
+
"description": "Method to generate the badge icon."
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
"kind": "method",
|
|
178
|
+
"name": "getBadgeDot",
|
|
179
|
+
"privacy": "private",
|
|
180
|
+
"return": {
|
|
181
|
+
"type": {
|
|
182
|
+
"text": ""
|
|
183
|
+
}
|
|
184
|
+
},
|
|
185
|
+
"description": "Method to generate the badge dot template."
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
"kind": "method",
|
|
189
|
+
"name": "getBadgeCounterText",
|
|
190
|
+
"privacy": "private",
|
|
191
|
+
"return": {
|
|
192
|
+
"type": {
|
|
193
|
+
"text": ""
|
|
194
|
+
}
|
|
195
|
+
},
|
|
196
|
+
"description": "Method to generate the badge text and counter template."
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
"kind": "method",
|
|
200
|
+
"name": "setRoleByAriaLabel",
|
|
201
|
+
"privacy": "private",
|
|
202
|
+
"return": {
|
|
203
|
+
"type": {
|
|
204
|
+
"text": "void"
|
|
205
|
+
}
|
|
206
|
+
},
|
|
207
|
+
"description": "Method to set the role based on the aria-label provided.\nIf the aria-label is provided, the role of the element will be 'img'.\nOtherwise, the role will be null."
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
"kind": "method",
|
|
211
|
+
"name": "getBadgeContentBasedOnType",
|
|
212
|
+
"privacy": "private",
|
|
213
|
+
"return": {
|
|
214
|
+
"type": {
|
|
215
|
+
"text": ""
|
|
216
|
+
}
|
|
217
|
+
},
|
|
218
|
+
"description": "Generates the badge content based on the badge type.\nUtilizes various helper methods to create the appropriate badge template based on the\ncurrent badge type. Supports 'dot', 'icon', 'counter', 'success', 'warning', and 'error'\ntypes, returning the corresponding template result for each type."
|
|
116
219
|
},
|
|
117
220
|
{
|
|
118
221
|
"kind": "field",
|
|
@@ -128,97 +231,58 @@
|
|
|
128
231
|
}
|
|
129
232
|
}
|
|
130
233
|
],
|
|
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
234
|
"attributes": [
|
|
149
235
|
{
|
|
150
|
-
"name": "
|
|
236
|
+
"name": "type",
|
|
151
237
|
"type": {
|
|
152
|
-
"text": "
|
|
238
|
+
"text": "BadgeType | undefined"
|
|
153
239
|
},
|
|
154
|
-
"description": "
|
|
155
|
-
"fieldName": "
|
|
156
|
-
"inheritedFrom": {
|
|
157
|
-
"name": "AvatarComponentMixin",
|
|
158
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
159
|
-
}
|
|
240
|
+
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
241
|
+
"fieldName": "type"
|
|
160
242
|
},
|
|
161
243
|
{
|
|
162
|
-
"name": "
|
|
244
|
+
"name": "variant",
|
|
163
245
|
"type": {
|
|
164
|
-
"text": "
|
|
246
|
+
"text": "IconVariant"
|
|
165
247
|
},
|
|
166
|
-
"description": "
|
|
167
|
-
"
|
|
168
|
-
"
|
|
169
|
-
"name": "AvatarComponentMixin",
|
|
170
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
171
|
-
}
|
|
248
|
+
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
249
|
+
"default": "primary",
|
|
250
|
+
"fieldName": "variant"
|
|
172
251
|
},
|
|
173
252
|
{
|
|
174
|
-
"name": "
|
|
253
|
+
"name": "counter",
|
|
175
254
|
"type": {
|
|
176
|
-
"text": "
|
|
255
|
+
"text": "number | undefined"
|
|
177
256
|
},
|
|
178
|
-
"description": "
|
|
179
|
-
"fieldName": "
|
|
180
|
-
"inheritedFrom": {
|
|
181
|
-
"name": "AvatarComponentMixin",
|
|
182
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
183
|
-
}
|
|
257
|
+
"description": "Counter is the number which can be provided in the badge.",
|
|
258
|
+
"fieldName": "counter"
|
|
184
259
|
},
|
|
185
260
|
{
|
|
186
|
-
"name": "
|
|
261
|
+
"name": "max-counter",
|
|
187
262
|
"type": {
|
|
188
|
-
"text": "
|
|
263
|
+
"text": "number"
|
|
189
264
|
},
|
|
190
|
-
"description": "
|
|
191
|
-
"default": "
|
|
192
|
-
"fieldName": "
|
|
193
|
-
"inheritedFrom": {
|
|
194
|
-
"name": "AvatarComponentMixin",
|
|
195
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
196
|
-
}
|
|
265
|
+
"description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
|
|
266
|
+
"default": "99",
|
|
267
|
+
"fieldName": "maxCounter"
|
|
197
268
|
},
|
|
198
269
|
{
|
|
199
|
-
"name": "
|
|
270
|
+
"name": "overlay",
|
|
200
271
|
"type": {
|
|
201
|
-
"text": "
|
|
272
|
+
"text": "boolean"
|
|
202
273
|
},
|
|
203
|
-
"
|
|
204
|
-
"
|
|
205
|
-
"
|
|
206
|
-
"name": "AvatarComponentMixin",
|
|
207
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
208
|
-
}
|
|
274
|
+
"default": "false",
|
|
275
|
+
"description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
|
|
276
|
+
"fieldName": "overlay"
|
|
209
277
|
},
|
|
210
278
|
{
|
|
211
|
-
"name": "
|
|
279
|
+
"name": "aria-label",
|
|
212
280
|
"type": {
|
|
213
|
-
"text": "
|
|
281
|
+
"text": "string | null"
|
|
214
282
|
},
|
|
215
|
-
"default": "
|
|
216
|
-
"description": "
|
|
217
|
-
"fieldName": "
|
|
218
|
-
"inheritedFrom": {
|
|
219
|
-
"name": "AvatarComponentMixin",
|
|
220
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
221
|
-
}
|
|
283
|
+
"default": "null",
|
|
284
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
285
|
+
"fieldName": "ariaLabel"
|
|
222
286
|
},
|
|
223
287
|
{
|
|
224
288
|
"name": "icon-name",
|
|
@@ -232,7 +296,20 @@
|
|
|
232
296
|
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
233
297
|
}
|
|
234
298
|
}
|
|
235
|
-
]
|
|
299
|
+
],
|
|
300
|
+
"mixins": [
|
|
301
|
+
{
|
|
302
|
+
"name": "IconNameMixin",
|
|
303
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
|
304
|
+
}
|
|
305
|
+
],
|
|
306
|
+
"superclass": {
|
|
307
|
+
"name": "Component",
|
|
308
|
+
"module": "/src/models"
|
|
309
|
+
},
|
|
310
|
+
"tagName": "mdc-badge",
|
|
311
|
+
"jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n */",
|
|
312
|
+
"customElement": true
|
|
236
313
|
}
|
|
237
314
|
],
|
|
238
315
|
"exports": [
|
|
@@ -240,8 +317,8 @@
|
|
|
240
317
|
"kind": "js",
|
|
241
318
|
"name": "default",
|
|
242
319
|
"declaration": {
|
|
243
|
-
"name": "
|
|
244
|
-
"module": "components/
|
|
320
|
+
"name": "Badge",
|
|
321
|
+
"module": "components/badge/badge.component.js"
|
|
245
322
|
}
|
|
246
323
|
}
|
|
247
324
|
]
|
|
@@ -831,332 +908,11 @@
|
|
|
831
908
|
}
|
|
832
909
|
],
|
|
833
910
|
"superclass": {
|
|
834
|
-
"name": "Buttonsimple",
|
|
835
|
-
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
836
|
-
},
|
|
837
|
-
"tagName": "mdc-avatarbutton",
|
|
838
|
-
"jsDoc": "/**\n * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n *\n * This component is made by extending `buttonsimple` class.\n * The button component acts as a wrapper for the avatar component.\n *\n * @dependency mdc-avatar\n *\n * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.\n * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.\n *\n * @tagname mdc-avatarbutton\n */",
|
|
839
|
-
"customElement": true
|
|
840
|
-
}
|
|
841
|
-
],
|
|
842
|
-
"exports": [
|
|
843
|
-
{
|
|
844
|
-
"kind": "js",
|
|
845
|
-
"name": "default",
|
|
846
|
-
"declaration": {
|
|
847
|
-
"name": "AvatarButton",
|
|
848
|
-
"module": "components/avatarbutton/avatarbutton.component.js"
|
|
849
|
-
}
|
|
850
|
-
}
|
|
851
|
-
]
|
|
852
|
-
},
|
|
853
|
-
{
|
|
854
|
-
"kind": "javascript-module",
|
|
855
|
-
"path": "components/badge/badge.component.js",
|
|
856
|
-
"declarations": [
|
|
857
|
-
{
|
|
858
|
-
"kind": "class",
|
|
859
|
-
"description": "The `mdc-badge` component is a versatile UI element used to\ndisplay dot, icons, counters, success, warning and error type badge.\n\nSupported badge types:\n- `dot`: Displays a dot notification badge with a blue color.\n- `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n- `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\nit shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n- `success`: Displays a success badge with a check circle icon and green color.\n- `warning`: Displays a warning badge with a warning icon and yellow color.\n- `error`: Displays a error badge with a error legacy icon and red color.\n\nFor `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n\nFor the `counter` type, the `mdc-text` component is used to render the counter value.",
|
|
860
|
-
"name": "Badge",
|
|
861
|
-
"cssProperties": [
|
|
862
|
-
{
|
|
863
|
-
"description": "The foreground color of the primary badge.",
|
|
864
|
-
"name": "--mdc-badge-primary-foreground-color"
|
|
865
|
-
},
|
|
866
|
-
{
|
|
867
|
-
"description": "The background color of the primary badge.",
|
|
868
|
-
"name": "--mdc-badge-primary-background-color"
|
|
869
|
-
},
|
|
870
|
-
{
|
|
871
|
-
"description": "The foreground color of the secondary badge.",
|
|
872
|
-
"name": "--mdc-badge-secondary-foreground-color"
|
|
873
|
-
},
|
|
874
|
-
{
|
|
875
|
-
"description": "The background color of the secondary badge.",
|
|
876
|
-
"name": "--mdc-badge-secondary-background-color"
|
|
877
|
-
},
|
|
878
|
-
{
|
|
879
|
-
"description": "The foreground color of the success badge.",
|
|
880
|
-
"name": "--mdc-badge-success-foreground-color"
|
|
881
|
-
},
|
|
882
|
-
{
|
|
883
|
-
"description": "The background color of the success badge.",
|
|
884
|
-
"name": "--mdc-badge-success-background-color"
|
|
885
|
-
},
|
|
886
|
-
{
|
|
887
|
-
"description": "The foreground color of the warning badge.",
|
|
888
|
-
"name": "--mdc-badge-warning-foreground-color"
|
|
889
|
-
},
|
|
890
|
-
{
|
|
891
|
-
"description": "The background color of the warning badge.",
|
|
892
|
-
"name": "--mdc-badge-warning-background-color"
|
|
893
|
-
},
|
|
894
|
-
{
|
|
895
|
-
"description": "The foreground color of the error badge.",
|
|
896
|
-
"name": "--mdc-badge-error-foreground-color"
|
|
897
|
-
},
|
|
898
|
-
{
|
|
899
|
-
"description": "The background color of the error badge.",
|
|
900
|
-
"name": "--mdc-badge-error-background-color"
|
|
901
|
-
},
|
|
902
|
-
{
|
|
903
|
-
"description": "The background color of the badge overlay.",
|
|
904
|
-
"name": "--mdc-badge-overlay-background-color"
|
|
905
|
-
}
|
|
906
|
-
],
|
|
907
|
-
"members": [
|
|
908
|
-
{
|
|
909
|
-
"kind": "field",
|
|
910
|
-
"name": "type",
|
|
911
|
-
"type": {
|
|
912
|
-
"text": "BadgeType | undefined"
|
|
913
|
-
},
|
|
914
|
-
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
915
|
-
"attribute": "type",
|
|
916
|
-
"reflects": true
|
|
917
|
-
},
|
|
918
|
-
{
|
|
919
|
-
"kind": "field",
|
|
920
|
-
"name": "variant",
|
|
921
|
-
"type": {
|
|
922
|
-
"text": "IconVariant"
|
|
923
|
-
},
|
|
924
|
-
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
925
|
-
"default": "primary",
|
|
926
|
-
"attribute": "variant",
|
|
927
|
-
"reflects": true
|
|
928
|
-
},
|
|
929
|
-
{
|
|
930
|
-
"kind": "field",
|
|
931
|
-
"name": "counter",
|
|
932
|
-
"type": {
|
|
933
|
-
"text": "number | undefined"
|
|
934
|
-
},
|
|
935
|
-
"description": "Counter is the number which can be provided in the badge.",
|
|
936
|
-
"attribute": "counter"
|
|
937
|
-
},
|
|
938
|
-
{
|
|
939
|
-
"kind": "field",
|
|
940
|
-
"name": "maxCounter",
|
|
941
|
-
"type": {
|
|
942
|
-
"text": "number"
|
|
943
|
-
},
|
|
944
|
-
"description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
|
|
945
|
-
"default": "99",
|
|
946
|
-
"attribute": "max-counter",
|
|
947
|
-
"reflects": true
|
|
948
|
-
},
|
|
949
|
-
{
|
|
950
|
-
"kind": "field",
|
|
951
|
-
"name": "overlay",
|
|
952
|
-
"type": {
|
|
953
|
-
"text": "boolean"
|
|
954
|
-
},
|
|
955
|
-
"default": "false",
|
|
956
|
-
"description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
|
|
957
|
-
"attribute": "overlay"
|
|
958
|
-
},
|
|
959
|
-
{
|
|
960
|
-
"kind": "field",
|
|
961
|
-
"name": "ariaLabel",
|
|
962
|
-
"type": {
|
|
963
|
-
"text": "string | null"
|
|
964
|
-
},
|
|
965
|
-
"default": "null",
|
|
966
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
967
|
-
"attribute": "aria-label"
|
|
968
|
-
},
|
|
969
|
-
{
|
|
970
|
-
"kind": "method",
|
|
971
|
-
"name": "getCounterText",
|
|
972
|
-
"privacy": "private",
|
|
973
|
-
"return": {
|
|
974
|
-
"type": {
|
|
975
|
-
"text": ""
|
|
976
|
-
}
|
|
977
|
-
},
|
|
978
|
-
"parameters": [
|
|
979
|
-
{
|
|
980
|
-
"name": "maxCounter",
|
|
981
|
-
"type": {
|
|
982
|
-
"text": "number"
|
|
983
|
-
},
|
|
984
|
-
"description": "the maximum limit which can be displayed on the badge"
|
|
985
|
-
},
|
|
986
|
-
{
|
|
987
|
-
"name": "counter",
|
|
988
|
-
"optional": true,
|
|
989
|
-
"type": {
|
|
990
|
-
"text": "number"
|
|
991
|
-
},
|
|
992
|
-
"description": "the number to be displayed on the badge"
|
|
993
|
-
}
|
|
994
|
-
],
|
|
995
|
-
"description": "If `type` is set to `counter` and if `counter` is greater than `maxCounter`,\nthen it will return a string the maxCounter value as string.\nOtherwise, it will return a string representation of `counter`.\nIf `counter` is not a number, it will return an empty string."
|
|
996
|
-
},
|
|
997
|
-
{
|
|
998
|
-
"kind": "method",
|
|
999
|
-
"name": "getBadgeIcon",
|
|
1000
|
-
"privacy": "private",
|
|
1001
|
-
"return": {
|
|
1002
|
-
"type": {
|
|
1003
|
-
"text": ""
|
|
1004
|
-
}
|
|
1005
|
-
},
|
|
1006
|
-
"parameters": [
|
|
1007
|
-
{
|
|
1008
|
-
"name": "iconName",
|
|
1009
|
-
"type": {
|
|
1010
|
-
"text": "string"
|
|
1011
|
-
},
|
|
1012
|
-
"description": "the name of the icon from the icon set"
|
|
1013
|
-
},
|
|
1014
|
-
{
|
|
1015
|
-
"name": "backgroundClassPostfix",
|
|
1016
|
-
"type": {
|
|
1017
|
-
"text": "string"
|
|
1018
|
-
},
|
|
1019
|
-
"description": "postfix for the class to style the badge icon."
|
|
1020
|
-
}
|
|
1021
|
-
],
|
|
1022
|
-
"description": "Method to generate the badge icon."
|
|
1023
|
-
},
|
|
1024
|
-
{
|
|
1025
|
-
"kind": "method",
|
|
1026
|
-
"name": "getBadgeDot",
|
|
1027
|
-
"privacy": "private",
|
|
1028
|
-
"return": {
|
|
1029
|
-
"type": {
|
|
1030
|
-
"text": ""
|
|
1031
|
-
}
|
|
1032
|
-
},
|
|
1033
|
-
"description": "Method to generate the badge dot template."
|
|
1034
|
-
},
|
|
1035
|
-
{
|
|
1036
|
-
"kind": "method",
|
|
1037
|
-
"name": "getBadgeCounterText",
|
|
1038
|
-
"privacy": "private",
|
|
1039
|
-
"return": {
|
|
1040
|
-
"type": {
|
|
1041
|
-
"text": ""
|
|
1042
|
-
}
|
|
1043
|
-
},
|
|
1044
|
-
"description": "Method to generate the badge text and counter template."
|
|
1045
|
-
},
|
|
1046
|
-
{
|
|
1047
|
-
"kind": "method",
|
|
1048
|
-
"name": "setRoleByAriaLabel",
|
|
1049
|
-
"privacy": "private",
|
|
1050
|
-
"return": {
|
|
1051
|
-
"type": {
|
|
1052
|
-
"text": "void"
|
|
1053
|
-
}
|
|
1054
|
-
},
|
|
1055
|
-
"description": "Method to set the role based on the aria-label provided.\nIf the aria-label is provided, the role of the element will be 'img'.\nOtherwise, the role will be null."
|
|
1056
|
-
},
|
|
1057
|
-
{
|
|
1058
|
-
"kind": "method",
|
|
1059
|
-
"name": "getBadgeContentBasedOnType",
|
|
1060
|
-
"privacy": "private",
|
|
1061
|
-
"return": {
|
|
1062
|
-
"type": {
|
|
1063
|
-
"text": ""
|
|
1064
|
-
}
|
|
1065
|
-
},
|
|
1066
|
-
"description": "Generates the badge content based on the badge type.\nUtilizes various helper methods to create the appropriate badge template based on the\ncurrent badge type. Supports 'dot', 'icon', 'counter', 'success', 'warning', and 'error'\ntypes, returning the corresponding template result for each type."
|
|
1067
|
-
},
|
|
1068
|
-
{
|
|
1069
|
-
"kind": "field",
|
|
1070
|
-
"name": "iconName",
|
|
1071
|
-
"type": {
|
|
1072
|
-
"text": "IconNames | undefined"
|
|
1073
|
-
},
|
|
1074
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
1075
|
-
"attribute": "icon-name",
|
|
1076
|
-
"inheritedFrom": {
|
|
1077
|
-
"name": "IconNameMixin",
|
|
1078
|
-
"module": "utils/mixins/IconNameMixin.js"
|
|
1079
|
-
}
|
|
1080
|
-
}
|
|
1081
|
-
],
|
|
1082
|
-
"attributes": [
|
|
1083
|
-
{
|
|
1084
|
-
"name": "type",
|
|
1085
|
-
"type": {
|
|
1086
|
-
"text": "BadgeType | undefined"
|
|
1087
|
-
},
|
|
1088
|
-
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
1089
|
-
"fieldName": "type"
|
|
1090
|
-
},
|
|
1091
|
-
{
|
|
1092
|
-
"name": "variant",
|
|
1093
|
-
"type": {
|
|
1094
|
-
"text": "IconVariant"
|
|
1095
|
-
},
|
|
1096
|
-
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
1097
|
-
"default": "primary",
|
|
1098
|
-
"fieldName": "variant"
|
|
1099
|
-
},
|
|
1100
|
-
{
|
|
1101
|
-
"name": "counter",
|
|
1102
|
-
"type": {
|
|
1103
|
-
"text": "number | undefined"
|
|
1104
|
-
},
|
|
1105
|
-
"description": "Counter is the number which can be provided in the badge.",
|
|
1106
|
-
"fieldName": "counter"
|
|
1107
|
-
},
|
|
1108
|
-
{
|
|
1109
|
-
"name": "max-counter",
|
|
1110
|
-
"type": {
|
|
1111
|
-
"text": "number"
|
|
1112
|
-
},
|
|
1113
|
-
"description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
|
|
1114
|
-
"default": "99",
|
|
1115
|
-
"fieldName": "maxCounter"
|
|
1116
|
-
},
|
|
1117
|
-
{
|
|
1118
|
-
"name": "overlay",
|
|
1119
|
-
"type": {
|
|
1120
|
-
"text": "boolean"
|
|
1121
|
-
},
|
|
1122
|
-
"default": "false",
|
|
1123
|
-
"description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
|
|
1124
|
-
"fieldName": "overlay"
|
|
1125
|
-
},
|
|
1126
|
-
{
|
|
1127
|
-
"name": "aria-label",
|
|
1128
|
-
"type": {
|
|
1129
|
-
"text": "string | null"
|
|
1130
|
-
},
|
|
1131
|
-
"default": "null",
|
|
1132
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
1133
|
-
"fieldName": "ariaLabel"
|
|
1134
|
-
},
|
|
1135
|
-
{
|
|
1136
|
-
"name": "icon-name",
|
|
1137
|
-
"type": {
|
|
1138
|
-
"text": "IconNames | undefined"
|
|
1139
|
-
},
|
|
1140
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
1141
|
-
"fieldName": "iconName",
|
|
1142
|
-
"inheritedFrom": {
|
|
1143
|
-
"name": "IconNameMixin",
|
|
1144
|
-
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
1145
|
-
}
|
|
1146
|
-
}
|
|
1147
|
-
],
|
|
1148
|
-
"mixins": [
|
|
1149
|
-
{
|
|
1150
|
-
"name": "IconNameMixin",
|
|
1151
|
-
"module": "/src/utils/mixins/IconNameMixin"
|
|
1152
|
-
}
|
|
1153
|
-
],
|
|
1154
|
-
"superclass": {
|
|
1155
|
-
"name": "Component",
|
|
1156
|
-
"module": "/src/models"
|
|
911
|
+
"name": "Buttonsimple",
|
|
912
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
1157
913
|
},
|
|
1158
|
-
"tagName": "mdc-
|
|
1159
|
-
"jsDoc": "/**\n * The `mdc-
|
|
914
|
+
"tagName": "mdc-avatarbutton",
|
|
915
|
+
"jsDoc": "/**\n * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n *\n * This component is made by extending `buttonsimple` class.\n * The button component acts as a wrapper for the avatar component.\n *\n * @dependency mdc-avatar\n *\n * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.\n * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.\n *\n * @tagname mdc-avatarbutton\n */",
|
|
1160
916
|
"customElement": true
|
|
1161
917
|
}
|
|
1162
918
|
],
|
|
@@ -1165,8 +921,8 @@
|
|
|
1165
921
|
"kind": "js",
|
|
1166
922
|
"name": "default",
|
|
1167
923
|
"declaration": {
|
|
1168
|
-
"name": "
|
|
1169
|
-
"module": "components/
|
|
924
|
+
"name": "AvatarButton",
|
|
925
|
+
"module": "components/avatarbutton/avatarbutton.component.js"
|
|
1170
926
|
}
|
|
1171
927
|
}
|
|
1172
928
|
]
|
|
@@ -1242,6 +998,250 @@
|
|
|
1242
998
|
}
|
|
1243
999
|
]
|
|
1244
1000
|
},
|
|
1001
|
+
{
|
|
1002
|
+
"kind": "javascript-module",
|
|
1003
|
+
"path": "components/avatar/avatar.component.js",
|
|
1004
|
+
"declarations": [
|
|
1005
|
+
{
|
|
1006
|
+
"kind": "class",
|
|
1007
|
+
"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.",
|
|
1008
|
+
"name": "Avatar",
|
|
1009
|
+
"cssProperties": [
|
|
1010
|
+
{
|
|
1011
|
+
"description": "Allows customization of the default background color.",
|
|
1012
|
+
"name": "--mdc-avatar-default-background-color"
|
|
1013
|
+
},
|
|
1014
|
+
{
|
|
1015
|
+
"description": "Allows customization of the default foreground color.",
|
|
1016
|
+
"name": "--mdc-avatar-default-foreground-color"
|
|
1017
|
+
},
|
|
1018
|
+
{
|
|
1019
|
+
"description": "Allows customization of the loading indicator background color.",
|
|
1020
|
+
"name": "--mdc-avatar-loading-indicator-background-color"
|
|
1021
|
+
},
|
|
1022
|
+
{
|
|
1023
|
+
"description": "Allows customization of the loading indicator foreground color.",
|
|
1024
|
+
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
|
1025
|
+
},
|
|
1026
|
+
{
|
|
1027
|
+
"description": "Allows customization of the loading overlay background color.",
|
|
1028
|
+
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
1029
|
+
}
|
|
1030
|
+
],
|
|
1031
|
+
"members": [
|
|
1032
|
+
{
|
|
1033
|
+
"kind": "field",
|
|
1034
|
+
"name": "src",
|
|
1035
|
+
"type": {
|
|
1036
|
+
"text": "string | undefined"
|
|
1037
|
+
},
|
|
1038
|
+
"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.",
|
|
1039
|
+
"attribute": "src",
|
|
1040
|
+
"inheritedFrom": {
|
|
1041
|
+
"name": "AvatarComponentMixin",
|
|
1042
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
1043
|
+
}
|
|
1044
|
+
},
|
|
1045
|
+
{
|
|
1046
|
+
"kind": "field",
|
|
1047
|
+
"name": "initials",
|
|
1048
|
+
"type": {
|
|
1049
|
+
"text": "string | undefined"
|
|
1050
|
+
},
|
|
1051
|
+
"description": "The initials to be displayed for the avatar.",
|
|
1052
|
+
"attribute": "initials",
|
|
1053
|
+
"inheritedFrom": {
|
|
1054
|
+
"name": "AvatarComponentMixin",
|
|
1055
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
1056
|
+
}
|
|
1057
|
+
},
|
|
1058
|
+
{
|
|
1059
|
+
"kind": "field",
|
|
1060
|
+
"name": "presence",
|
|
1061
|
+
"type": {
|
|
1062
|
+
"text": "PresenceType | undefined"
|
|
1063
|
+
},
|
|
1064
|
+
"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`",
|
|
1065
|
+
"attribute": "presence",
|
|
1066
|
+
"inheritedFrom": {
|
|
1067
|
+
"name": "AvatarComponentMixin",
|
|
1068
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
1069
|
+
}
|
|
1070
|
+
},
|
|
1071
|
+
{
|
|
1072
|
+
"kind": "field",
|
|
1073
|
+
"name": "size",
|
|
1074
|
+
"type": {
|
|
1075
|
+
"text": "AvatarSize"
|
|
1076
|
+
},
|
|
1077
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
1078
|
+
"default": "32",
|
|
1079
|
+
"attribute": "size",
|
|
1080
|
+
"reflects": true,
|
|
1081
|
+
"inheritedFrom": {
|
|
1082
|
+
"name": "AvatarComponentMixin",
|
|
1083
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
1084
|
+
}
|
|
1085
|
+
},
|
|
1086
|
+
{
|
|
1087
|
+
"kind": "field",
|
|
1088
|
+
"name": "counter",
|
|
1089
|
+
"type": {
|
|
1090
|
+
"text": "number | undefined"
|
|
1091
|
+
},
|
|
1092
|
+
"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`.",
|
|
1093
|
+
"attribute": "counter",
|
|
1094
|
+
"inheritedFrom": {
|
|
1095
|
+
"name": "AvatarComponentMixin",
|
|
1096
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
1097
|
+
}
|
|
1098
|
+
},
|
|
1099
|
+
{
|
|
1100
|
+
"kind": "field",
|
|
1101
|
+
"name": "isTyping",
|
|
1102
|
+
"type": {
|
|
1103
|
+
"text": "boolean"
|
|
1104
|
+
},
|
|
1105
|
+
"default": "false",
|
|
1106
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
1107
|
+
"attribute": "is-typing",
|
|
1108
|
+
"inheritedFrom": {
|
|
1109
|
+
"name": "AvatarComponentMixin",
|
|
1110
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
1111
|
+
}
|
|
1112
|
+
},
|
|
1113
|
+
{
|
|
1114
|
+
"kind": "field",
|
|
1115
|
+
"name": "iconName",
|
|
1116
|
+
"type": {
|
|
1117
|
+
"text": "IconNames | undefined"
|
|
1118
|
+
},
|
|
1119
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
1120
|
+
"attribute": "icon-name",
|
|
1121
|
+
"inheritedFrom": {
|
|
1122
|
+
"name": "IconNameMixin",
|
|
1123
|
+
"module": "utils/mixins/IconNameMixin.js"
|
|
1124
|
+
}
|
|
1125
|
+
}
|
|
1126
|
+
],
|
|
1127
|
+
"mixins": [
|
|
1128
|
+
{
|
|
1129
|
+
"name": "AvatarComponentMixin",
|
|
1130
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
1131
|
+
},
|
|
1132
|
+
{
|
|
1133
|
+
"name": "IconNameMixin",
|
|
1134
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
|
1135
|
+
}
|
|
1136
|
+
],
|
|
1137
|
+
"superclass": {
|
|
1138
|
+
"name": "Component",
|
|
1139
|
+
"module": "/src/models"
|
|
1140
|
+
},
|
|
1141
|
+
"tagName": "mdc-avatar",
|
|
1142
|
+
"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 */",
|
|
1143
|
+
"customElement": true,
|
|
1144
|
+
"attributes": [
|
|
1145
|
+
{
|
|
1146
|
+
"name": "src",
|
|
1147
|
+
"type": {
|
|
1148
|
+
"text": "string | undefined"
|
|
1149
|
+
},
|
|
1150
|
+
"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.",
|
|
1151
|
+
"fieldName": "src",
|
|
1152
|
+
"inheritedFrom": {
|
|
1153
|
+
"name": "AvatarComponentMixin",
|
|
1154
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1155
|
+
}
|
|
1156
|
+
},
|
|
1157
|
+
{
|
|
1158
|
+
"name": "initials",
|
|
1159
|
+
"type": {
|
|
1160
|
+
"text": "string | undefined"
|
|
1161
|
+
},
|
|
1162
|
+
"description": "The initials to be displayed for the avatar.",
|
|
1163
|
+
"fieldName": "initials",
|
|
1164
|
+
"inheritedFrom": {
|
|
1165
|
+
"name": "AvatarComponentMixin",
|
|
1166
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1167
|
+
}
|
|
1168
|
+
},
|
|
1169
|
+
{
|
|
1170
|
+
"name": "presence",
|
|
1171
|
+
"type": {
|
|
1172
|
+
"text": "PresenceType | undefined"
|
|
1173
|
+
},
|
|
1174
|
+
"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`",
|
|
1175
|
+
"fieldName": "presence",
|
|
1176
|
+
"inheritedFrom": {
|
|
1177
|
+
"name": "AvatarComponentMixin",
|
|
1178
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1179
|
+
}
|
|
1180
|
+
},
|
|
1181
|
+
{
|
|
1182
|
+
"name": "size",
|
|
1183
|
+
"type": {
|
|
1184
|
+
"text": "AvatarSize"
|
|
1185
|
+
},
|
|
1186
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
1187
|
+
"default": "32",
|
|
1188
|
+
"fieldName": "size",
|
|
1189
|
+
"inheritedFrom": {
|
|
1190
|
+
"name": "AvatarComponentMixin",
|
|
1191
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1192
|
+
}
|
|
1193
|
+
},
|
|
1194
|
+
{
|
|
1195
|
+
"name": "counter",
|
|
1196
|
+
"type": {
|
|
1197
|
+
"text": "number | undefined"
|
|
1198
|
+
},
|
|
1199
|
+
"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`.",
|
|
1200
|
+
"fieldName": "counter",
|
|
1201
|
+
"inheritedFrom": {
|
|
1202
|
+
"name": "AvatarComponentMixin",
|
|
1203
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1204
|
+
}
|
|
1205
|
+
},
|
|
1206
|
+
{
|
|
1207
|
+
"name": "is-typing",
|
|
1208
|
+
"type": {
|
|
1209
|
+
"text": "boolean"
|
|
1210
|
+
},
|
|
1211
|
+
"default": "false",
|
|
1212
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
1213
|
+
"fieldName": "isTyping",
|
|
1214
|
+
"inheritedFrom": {
|
|
1215
|
+
"name": "AvatarComponentMixin",
|
|
1216
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1217
|
+
}
|
|
1218
|
+
},
|
|
1219
|
+
{
|
|
1220
|
+
"name": "icon-name",
|
|
1221
|
+
"type": {
|
|
1222
|
+
"text": "IconNames | undefined"
|
|
1223
|
+
},
|
|
1224
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
1225
|
+
"fieldName": "iconName",
|
|
1226
|
+
"inheritedFrom": {
|
|
1227
|
+
"name": "IconNameMixin",
|
|
1228
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
1229
|
+
}
|
|
1230
|
+
}
|
|
1231
|
+
]
|
|
1232
|
+
}
|
|
1233
|
+
],
|
|
1234
|
+
"exports": [
|
|
1235
|
+
{
|
|
1236
|
+
"kind": "js",
|
|
1237
|
+
"name": "default",
|
|
1238
|
+
"declaration": {
|
|
1239
|
+
"name": "Avatar",
|
|
1240
|
+
"module": "components/avatar/avatar.component.js"
|
|
1241
|
+
}
|
|
1242
|
+
}
|
|
1243
|
+
]
|
|
1244
|
+
},
|
|
1245
1245
|
{
|
|
1246
1246
|
"kind": "javascript-module",
|
|
1247
1247
|
"path": "components/button/button.component.js",
|
package/dist/react/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
export { default as Avatar } from './avatar';
|
|
2
|
-
export { default as AvatarButton } from './avatarbutton';
|
|
3
1
|
export { default as Badge } from './badge';
|
|
2
|
+
export { default as AvatarButton } from './avatarbutton';
|
|
4
3
|
export { default as Bullet } from './bullet';
|
|
4
|
+
export { default as Avatar } from './avatar';
|
|
5
5
|
export { default as Button } from './button';
|
|
6
6
|
export { default as Buttonsimple } from './buttonsimple';
|
|
7
7
|
export { default as Checkbox } from './checkbox';
|
package/dist/react/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
export { default as Avatar } from './avatar';
|
|
2
|
-
export { default as AvatarButton } from './avatarbutton';
|
|
3
1
|
export { default as Badge } from './badge';
|
|
2
|
+
export { default as AvatarButton } from './avatarbutton';
|
|
4
3
|
export { default as Bullet } from './bullet';
|
|
4
|
+
export { default as Avatar } from './avatar';
|
|
5
5
|
export { default as Button } from './button';
|
|
6
6
|
export { default as Buttonsimple } from './buttonsimple';
|
|
7
7
|
export { default as Checkbox } from './checkbox';
|
package/package.json
CHANGED