@momentum-design/components 0.16.10 → 0.16.11
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -4,252 +4,231 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "components/
|
|
7
|
+
"path": "components/avatar/avatar.component.js",
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "The `mdc-
|
|
12
|
-
"name": "
|
|
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
|
+
],
|
|
13
35
|
"members": [
|
|
14
36
|
{
|
|
15
37
|
"kind": "field",
|
|
16
|
-
"name": "
|
|
38
|
+
"name": "src",
|
|
17
39
|
"type": {
|
|
18
|
-
"text": "
|
|
40
|
+
"text": "string | undefined"
|
|
19
41
|
},
|
|
20
|
-
"description": "
|
|
21
|
-
"attribute": "
|
|
22
|
-
"
|
|
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
|
+
}
|
|
23
48
|
},
|
|
24
49
|
{
|
|
25
50
|
"kind": "field",
|
|
26
|
-
"name": "
|
|
51
|
+
"name": "initials",
|
|
27
52
|
"type": {
|
|
28
|
-
"text": "
|
|
53
|
+
"text": "string | undefined"
|
|
29
54
|
},
|
|
30
|
-
"description": "
|
|
31
|
-
"attribute": "
|
|
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
|
+
}
|
|
32
61
|
},
|
|
33
62
|
{
|
|
34
63
|
"kind": "field",
|
|
35
|
-
"name": "
|
|
64
|
+
"name": "presence",
|
|
36
65
|
"type": {
|
|
37
|
-
"text": "
|
|
66
|
+
"text": "PresenceType | undefined"
|
|
38
67
|
},
|
|
39
|
-
"description": "
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
|
|
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
|
+
}
|
|
43
74
|
},
|
|
44
75
|
{
|
|
45
76
|
"kind": "field",
|
|
46
|
-
"name": "
|
|
77
|
+
"name": "size",
|
|
47
78
|
"type": {
|
|
48
|
-
"text": "
|
|
79
|
+
"text": "AvatarSize"
|
|
49
80
|
},
|
|
50
|
-
"description": "
|
|
51
|
-
"
|
|
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
|
+
}
|
|
52
89
|
},
|
|
53
90
|
{
|
|
54
91
|
"kind": "field",
|
|
55
|
-
"name": "
|
|
92
|
+
"name": "iconName",
|
|
56
93
|
"type": {
|
|
57
|
-
"text": "
|
|
94
|
+
"text": "IconNames | undefined"
|
|
58
95
|
},
|
|
59
|
-
"description": "
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
|
|
96
|
+
"description": "Name of the icon to be displayed inside the Avatar.\nMust be a valid icon name.",
|
|
97
|
+
"attribute": "icon-name",
|
|
98
|
+
"inheritedFrom": {
|
|
99
|
+
"name": "AvatarComponentMixin",
|
|
100
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
101
|
+
}
|
|
63
102
|
},
|
|
64
103
|
{
|
|
65
104
|
"kind": "field",
|
|
66
|
-
"name": "
|
|
105
|
+
"name": "counter",
|
|
67
106
|
"type": {
|
|
68
|
-
"text": "
|
|
107
|
+
"text": "number | undefined"
|
|
69
108
|
},
|
|
70
|
-
"
|
|
71
|
-
"
|
|
72
|
-
"
|
|
109
|
+
"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`.",
|
|
110
|
+
"attribute": "counter",
|
|
111
|
+
"inheritedFrom": {
|
|
112
|
+
"name": "AvatarComponentMixin",
|
|
113
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
114
|
+
}
|
|
73
115
|
},
|
|
74
116
|
{
|
|
75
117
|
"kind": "field",
|
|
76
|
-
"name": "
|
|
118
|
+
"name": "isTyping",
|
|
77
119
|
"type": {
|
|
78
|
-
"text": "
|
|
79
|
-
},
|
|
80
|
-
"default": "null",
|
|
81
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
82
|
-
"attribute": "aria-label"
|
|
83
|
-
},
|
|
84
|
-
{
|
|
85
|
-
"kind": "method",
|
|
86
|
-
"name": "getCounterText",
|
|
87
|
-
"privacy": "private",
|
|
88
|
-
"return": {
|
|
89
|
-
"type": {
|
|
90
|
-
"text": ""
|
|
91
|
-
}
|
|
92
|
-
},
|
|
93
|
-
"parameters": [
|
|
94
|
-
{
|
|
95
|
-
"name": "maxCounter",
|
|
96
|
-
"type": {
|
|
97
|
-
"text": "number"
|
|
98
|
-
},
|
|
99
|
-
"description": "the maximum limit which can be displayed on the badge"
|
|
100
|
-
},
|
|
101
|
-
{
|
|
102
|
-
"name": "counter",
|
|
103
|
-
"optional": true,
|
|
104
|
-
"type": {
|
|
105
|
-
"text": "number"
|
|
106
|
-
},
|
|
107
|
-
"description": "the number to be displayed on the badge"
|
|
108
|
-
}
|
|
109
|
-
],
|
|
110
|
-
"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."
|
|
111
|
-
},
|
|
112
|
-
{
|
|
113
|
-
"kind": "method",
|
|
114
|
-
"name": "getBadgeIcon",
|
|
115
|
-
"privacy": "private",
|
|
116
|
-
"return": {
|
|
117
|
-
"type": {
|
|
118
|
-
"text": ""
|
|
119
|
-
}
|
|
120
|
-
},
|
|
121
|
-
"parameters": [
|
|
122
|
-
{
|
|
123
|
-
"name": "iconName",
|
|
124
|
-
"type": {
|
|
125
|
-
"text": "string"
|
|
126
|
-
},
|
|
127
|
-
"description": "the name of the icon from the icon set"
|
|
128
|
-
},
|
|
129
|
-
{
|
|
130
|
-
"name": "backgroundClassPostfix",
|
|
131
|
-
"type": {
|
|
132
|
-
"text": "string"
|
|
133
|
-
},
|
|
134
|
-
"description": "postfix for the class to style the badge icon."
|
|
135
|
-
}
|
|
136
|
-
],
|
|
137
|
-
"description": "Method to generate the badge icon."
|
|
138
|
-
},
|
|
139
|
-
{
|
|
140
|
-
"kind": "method",
|
|
141
|
-
"name": "getBadgeDot",
|
|
142
|
-
"privacy": "private",
|
|
143
|
-
"return": {
|
|
144
|
-
"type": {
|
|
145
|
-
"text": ""
|
|
146
|
-
}
|
|
147
|
-
},
|
|
148
|
-
"description": "Method to generate the badge dot template."
|
|
149
|
-
},
|
|
150
|
-
{
|
|
151
|
-
"kind": "method",
|
|
152
|
-
"name": "getBadgeCounterText",
|
|
153
|
-
"privacy": "private",
|
|
154
|
-
"return": {
|
|
155
|
-
"type": {
|
|
156
|
-
"text": ""
|
|
157
|
-
}
|
|
158
|
-
},
|
|
159
|
-
"description": "Method to generate the badge text and counter template."
|
|
160
|
-
},
|
|
161
|
-
{
|
|
162
|
-
"kind": "method",
|
|
163
|
-
"name": "setRoleByAriaLabel",
|
|
164
|
-
"privacy": "private",
|
|
165
|
-
"return": {
|
|
166
|
-
"type": {
|
|
167
|
-
"text": "void"
|
|
168
|
-
}
|
|
120
|
+
"text": "boolean"
|
|
169
121
|
},
|
|
170
|
-
"
|
|
171
|
-
|
|
122
|
+
"default": "false",
|
|
123
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
124
|
+
"attribute": "is-typing",
|
|
125
|
+
"inheritedFrom": {
|
|
126
|
+
"name": "AvatarComponentMixin",
|
|
127
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
],
|
|
131
|
+
"mixins": [
|
|
172
132
|
{
|
|
173
|
-
"
|
|
174
|
-
"
|
|
175
|
-
"privacy": "private",
|
|
176
|
-
"return": {
|
|
177
|
-
"type": {
|
|
178
|
-
"text": ""
|
|
179
|
-
}
|
|
180
|
-
},
|
|
181
|
-
"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."
|
|
133
|
+
"name": "AvatarComponentMixin",
|
|
134
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
182
135
|
}
|
|
183
136
|
],
|
|
137
|
+
"superclass": {
|
|
138
|
+
"name": "Component",
|
|
139
|
+
"module": "/src/models"
|
|
140
|
+
},
|
|
141
|
+
"tagName": "mdc-avatar",
|
|
142
|
+
"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 */",
|
|
143
|
+
"customElement": true,
|
|
184
144
|
"attributes": [
|
|
185
145
|
{
|
|
186
|
-
"name": "
|
|
146
|
+
"name": "src",
|
|
187
147
|
"type": {
|
|
188
|
-
"text": "
|
|
148
|
+
"text": "string | undefined"
|
|
189
149
|
},
|
|
190
|
-
"description": "
|
|
191
|
-
"fieldName": "
|
|
150
|
+
"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.",
|
|
151
|
+
"fieldName": "src",
|
|
152
|
+
"inheritedFrom": {
|
|
153
|
+
"name": "AvatarComponentMixin",
|
|
154
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
155
|
+
}
|
|
192
156
|
},
|
|
193
157
|
{
|
|
194
|
-
"name": "
|
|
158
|
+
"name": "initials",
|
|
195
159
|
"type": {
|
|
196
|
-
"text": "
|
|
160
|
+
"text": "string | undefined"
|
|
197
161
|
},
|
|
198
|
-
"description": "
|
|
199
|
-
"fieldName": "
|
|
162
|
+
"description": "The initials to be displayed for the avatar.",
|
|
163
|
+
"fieldName": "initials",
|
|
164
|
+
"inheritedFrom": {
|
|
165
|
+
"name": "AvatarComponentMixin",
|
|
166
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
167
|
+
}
|
|
200
168
|
},
|
|
201
169
|
{
|
|
202
|
-
"name": "
|
|
170
|
+
"name": "presence",
|
|
203
171
|
"type": {
|
|
204
|
-
"text": "
|
|
172
|
+
"text": "PresenceType | undefined"
|
|
205
173
|
},
|
|
206
|
-
"description": "
|
|
207
|
-
"
|
|
208
|
-
"
|
|
174
|
+
"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`",
|
|
175
|
+
"fieldName": "presence",
|
|
176
|
+
"inheritedFrom": {
|
|
177
|
+
"name": "AvatarComponentMixin",
|
|
178
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
179
|
+
}
|
|
209
180
|
},
|
|
210
181
|
{
|
|
211
|
-
"name": "
|
|
182
|
+
"name": "size",
|
|
212
183
|
"type": {
|
|
213
|
-
"text": "
|
|
184
|
+
"text": "AvatarSize"
|
|
214
185
|
},
|
|
215
|
-
"description": "
|
|
216
|
-
"
|
|
186
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
187
|
+
"default": "32",
|
|
188
|
+
"fieldName": "size",
|
|
189
|
+
"inheritedFrom": {
|
|
190
|
+
"name": "AvatarComponentMixin",
|
|
191
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
192
|
+
}
|
|
217
193
|
},
|
|
218
194
|
{
|
|
219
|
-
"name": "
|
|
195
|
+
"name": "icon-name",
|
|
220
196
|
"type": {
|
|
221
|
-
"text": "
|
|
197
|
+
"text": "IconNames | undefined"
|
|
222
198
|
},
|
|
223
|
-
"description": "
|
|
224
|
-
"
|
|
225
|
-
"
|
|
199
|
+
"description": "Name of the icon to be displayed inside the Avatar.\nMust be a valid icon name.",
|
|
200
|
+
"fieldName": "iconName",
|
|
201
|
+
"inheritedFrom": {
|
|
202
|
+
"name": "AvatarComponentMixin",
|
|
203
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
204
|
+
}
|
|
226
205
|
},
|
|
227
206
|
{
|
|
228
|
-
"name": "
|
|
207
|
+
"name": "counter",
|
|
229
208
|
"type": {
|
|
230
|
-
"text": "
|
|
209
|
+
"text": "number | undefined"
|
|
231
210
|
},
|
|
232
|
-
"
|
|
233
|
-
"
|
|
234
|
-
"
|
|
211
|
+
"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`.",
|
|
212
|
+
"fieldName": "counter",
|
|
213
|
+
"inheritedFrom": {
|
|
214
|
+
"name": "AvatarComponentMixin",
|
|
215
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
216
|
+
}
|
|
235
217
|
},
|
|
236
218
|
{
|
|
237
|
-
"name": "
|
|
219
|
+
"name": "is-typing",
|
|
238
220
|
"type": {
|
|
239
|
-
"text": "
|
|
221
|
+
"text": "boolean"
|
|
240
222
|
},
|
|
241
|
-
"default": "
|
|
242
|
-
"description": "
|
|
243
|
-
"fieldName": "
|
|
223
|
+
"default": "false",
|
|
224
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
225
|
+
"fieldName": "isTyping",
|
|
226
|
+
"inheritedFrom": {
|
|
227
|
+
"name": "AvatarComponentMixin",
|
|
228
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
229
|
+
}
|
|
244
230
|
}
|
|
245
|
-
]
|
|
246
|
-
"superclass": {
|
|
247
|
-
"name": "Component",
|
|
248
|
-
"module": "/src/models"
|
|
249
|
-
},
|
|
250
|
-
"tagName": "mdc-badge",
|
|
251
|
-
"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 */",
|
|
252
|
-
"customElement": true
|
|
231
|
+
]
|
|
253
232
|
}
|
|
254
233
|
],
|
|
255
234
|
"exports": [
|
|
@@ -257,43 +236,117 @@
|
|
|
257
236
|
"kind": "js",
|
|
258
237
|
"name": "default",
|
|
259
238
|
"declaration": {
|
|
260
|
-
"name": "
|
|
261
|
-
"module": "components/
|
|
239
|
+
"name": "Avatar",
|
|
240
|
+
"module": "components/avatar/avatar.component.js"
|
|
262
241
|
}
|
|
263
242
|
}
|
|
264
243
|
]
|
|
265
244
|
},
|
|
266
245
|
{
|
|
267
246
|
"kind": "javascript-module",
|
|
268
|
-
"path": "components/
|
|
247
|
+
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
269
248
|
"declarations": [
|
|
270
249
|
{
|
|
271
250
|
"kind": "class",
|
|
272
|
-
"description": "The `mdc-
|
|
273
|
-
"name": "
|
|
274
|
-
"
|
|
251
|
+
"description": "The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n\nThis component is made by extending `buttonsimple` class.\nThe button component acts as a wrapper for the avatar component.",
|
|
252
|
+
"name": "AvatarButton",
|
|
253
|
+
"members": [
|
|
275
254
|
{
|
|
276
|
-
"
|
|
277
|
-
"name": "
|
|
255
|
+
"kind": "field",
|
|
256
|
+
"name": "ariaLabel",
|
|
257
|
+
"type": {
|
|
258
|
+
"text": "string | null"
|
|
259
|
+
},
|
|
260
|
+
"default": "null",
|
|
261
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
262
|
+
"attribute": "aria-label"
|
|
278
263
|
},
|
|
279
264
|
{
|
|
280
|
-
"
|
|
281
|
-
"name": "
|
|
265
|
+
"kind": "method",
|
|
266
|
+
"name": "setSize",
|
|
267
|
+
"privacy": "private",
|
|
268
|
+
"parameters": [
|
|
269
|
+
{
|
|
270
|
+
"name": "size",
|
|
271
|
+
"type": {
|
|
272
|
+
"text": "AvatarSize"
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
]
|
|
282
276
|
},
|
|
283
277
|
{
|
|
284
|
-
"
|
|
285
|
-
"name": "
|
|
278
|
+
"kind": "field",
|
|
279
|
+
"name": "active",
|
|
280
|
+
"type": {
|
|
281
|
+
"text": "boolean"
|
|
282
|
+
},
|
|
283
|
+
"default": "undefined as unknown",
|
|
284
|
+
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
|
|
285
|
+
"attribute": "active",
|
|
286
|
+
"inheritedFrom": {
|
|
287
|
+
"name": "Buttonsimple",
|
|
288
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
289
|
+
}
|
|
286
290
|
},
|
|
287
291
|
{
|
|
288
|
-
"
|
|
289
|
-
"name": "
|
|
292
|
+
"kind": "field",
|
|
293
|
+
"name": "disabled",
|
|
294
|
+
"type": {
|
|
295
|
+
"text": "boolean"
|
|
296
|
+
},
|
|
297
|
+
"default": "undefined as unknown",
|
|
298
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
299
|
+
"attribute": "disabled",
|
|
300
|
+
"reflects": true,
|
|
301
|
+
"inheritedFrom": {
|
|
302
|
+
"name": "DisabledMixin",
|
|
303
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
304
|
+
}
|
|
290
305
|
},
|
|
291
306
|
{
|
|
292
|
-
"
|
|
293
|
-
"name": "
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
307
|
+
"kind": "field",
|
|
308
|
+
"name": "softDisabled",
|
|
309
|
+
"type": {
|
|
310
|
+
"text": "boolean"
|
|
311
|
+
},
|
|
312
|
+
"default": "undefined as unknown",
|
|
313
|
+
"description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
|
|
314
|
+
"attribute": "soft-disabled",
|
|
315
|
+
"inheritedFrom": {
|
|
316
|
+
"name": "Buttonsimple",
|
|
317
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
318
|
+
}
|
|
319
|
+
},
|
|
320
|
+
{
|
|
321
|
+
"kind": "field",
|
|
322
|
+
"name": "role",
|
|
323
|
+
"description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
|
|
324
|
+
"default": "'button'",
|
|
325
|
+
"attribute": "role",
|
|
326
|
+
"reflects": true,
|
|
327
|
+
"type": {
|
|
328
|
+
"text": "string"
|
|
329
|
+
},
|
|
330
|
+
"inheritedFrom": {
|
|
331
|
+
"name": "Buttonsimple",
|
|
332
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
333
|
+
}
|
|
334
|
+
},
|
|
335
|
+
{
|
|
336
|
+
"kind": "field",
|
|
337
|
+
"name": "type",
|
|
338
|
+
"type": {
|
|
339
|
+
"text": "ButtonType"
|
|
340
|
+
},
|
|
341
|
+
"description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
|
|
342
|
+
"default": "button",
|
|
343
|
+
"attribute": "type",
|
|
344
|
+
"reflects": true,
|
|
345
|
+
"inheritedFrom": {
|
|
346
|
+
"name": "Buttonsimple",
|
|
347
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
348
|
+
}
|
|
349
|
+
},
|
|
297
350
|
{
|
|
298
351
|
"kind": "field",
|
|
299
352
|
"name": "src",
|
|
@@ -337,15 +390,15 @@
|
|
|
337
390
|
"kind": "field",
|
|
338
391
|
"name": "size",
|
|
339
392
|
"type": {
|
|
340
|
-
"text": "
|
|
393
|
+
"text": "ButtonSize"
|
|
341
394
|
},
|
|
342
395
|
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
343
396
|
"default": "32",
|
|
344
397
|
"attribute": "size",
|
|
345
398
|
"reflects": true,
|
|
346
399
|
"inheritedFrom": {
|
|
347
|
-
"name": "
|
|
348
|
-
"module": "
|
|
400
|
+
"name": "Buttonsimple",
|
|
401
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
349
402
|
}
|
|
350
403
|
},
|
|
351
404
|
{
|
|
@@ -387,22 +440,167 @@
|
|
|
387
440
|
"name": "AvatarComponentMixin",
|
|
388
441
|
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
389
442
|
}
|
|
390
|
-
}
|
|
391
|
-
|
|
392
|
-
|
|
443
|
+
},
|
|
444
|
+
{
|
|
445
|
+
"kind": "field",
|
|
446
|
+
"name": "tabIndex",
|
|
447
|
+
"type": {
|
|
448
|
+
"text": "number"
|
|
449
|
+
},
|
|
450
|
+
"default": "0",
|
|
451
|
+
"description": "This property specifies the tab order of the element.",
|
|
452
|
+
"attribute": "tabIndex",
|
|
453
|
+
"reflects": true,
|
|
454
|
+
"inheritedFrom": {
|
|
455
|
+
"name": "TabIndexMixin",
|
|
456
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
457
|
+
}
|
|
458
|
+
},
|
|
459
|
+
{
|
|
460
|
+
"kind": "method",
|
|
461
|
+
"name": "executeAction",
|
|
462
|
+
"privacy": "private",
|
|
463
|
+
"inheritedFrom": {
|
|
464
|
+
"name": "Buttonsimple",
|
|
465
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
466
|
+
}
|
|
467
|
+
},
|
|
468
|
+
{
|
|
469
|
+
"kind": "method",
|
|
470
|
+
"name": "setAriaPressed",
|
|
471
|
+
"privacy": "private",
|
|
472
|
+
"parameters": [
|
|
473
|
+
{
|
|
474
|
+
"name": "element",
|
|
475
|
+
"type": {
|
|
476
|
+
"text": "HTMLElement"
|
|
477
|
+
},
|
|
478
|
+
"description": "The target element."
|
|
479
|
+
},
|
|
480
|
+
{
|
|
481
|
+
"name": "active",
|
|
482
|
+
"type": {
|
|
483
|
+
"text": "boolean"
|
|
484
|
+
},
|
|
485
|
+
"description": "The active state."
|
|
486
|
+
}
|
|
487
|
+
],
|
|
488
|
+
"description": "Sets the aria-pressed attribute based on the active state.",
|
|
489
|
+
"inheritedFrom": {
|
|
490
|
+
"name": "Buttonsimple",
|
|
491
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
492
|
+
}
|
|
493
|
+
},
|
|
494
|
+
{
|
|
495
|
+
"kind": "method",
|
|
496
|
+
"name": "setSoftDisabled",
|
|
497
|
+
"privacy": "private",
|
|
498
|
+
"parameters": [
|
|
499
|
+
{
|
|
500
|
+
"name": "element",
|
|
501
|
+
"type": {
|
|
502
|
+
"text": "HTMLElement"
|
|
503
|
+
},
|
|
504
|
+
"description": "The button element."
|
|
505
|
+
},
|
|
506
|
+
{
|
|
507
|
+
"name": "softDisabled",
|
|
508
|
+
"type": {
|
|
509
|
+
"text": "boolean"
|
|
510
|
+
},
|
|
511
|
+
"description": "The soft-disabled state."
|
|
512
|
+
}
|
|
513
|
+
],
|
|
514
|
+
"description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
|
|
515
|
+
"inheritedFrom": {
|
|
516
|
+
"name": "Buttonsimple",
|
|
517
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
518
|
+
}
|
|
519
|
+
},
|
|
520
|
+
{
|
|
521
|
+
"kind": "method",
|
|
522
|
+
"name": "setDisabled",
|
|
523
|
+
"privacy": "private",
|
|
524
|
+
"parameters": [
|
|
525
|
+
{
|
|
526
|
+
"name": "element",
|
|
527
|
+
"type": {
|
|
528
|
+
"text": "HTMLElement"
|
|
529
|
+
},
|
|
530
|
+
"description": "The button element."
|
|
531
|
+
},
|
|
532
|
+
{
|
|
533
|
+
"name": "disabled",
|
|
534
|
+
"type": {
|
|
535
|
+
"text": "boolean"
|
|
536
|
+
},
|
|
537
|
+
"description": "The disabled state."
|
|
538
|
+
}
|
|
539
|
+
],
|
|
540
|
+
"description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
|
|
541
|
+
"inheritedFrom": {
|
|
542
|
+
"name": "Buttonsimple",
|
|
543
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
544
|
+
}
|
|
545
|
+
},
|
|
546
|
+
{
|
|
547
|
+
"kind": "method",
|
|
548
|
+
"name": "triggerClickEvent",
|
|
549
|
+
"privacy": "private",
|
|
550
|
+
"inheritedFrom": {
|
|
551
|
+
"name": "Buttonsimple",
|
|
552
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
553
|
+
}
|
|
554
|
+
},
|
|
555
|
+
{
|
|
556
|
+
"kind": "method",
|
|
557
|
+
"name": "handleKeyDown",
|
|
558
|
+
"privacy": "private",
|
|
559
|
+
"parameters": [
|
|
560
|
+
{
|
|
561
|
+
"name": "event",
|
|
562
|
+
"type": {
|
|
563
|
+
"text": "KeyboardEvent"
|
|
564
|
+
},
|
|
565
|
+
"description": "The keyboard event."
|
|
566
|
+
}
|
|
567
|
+
],
|
|
568
|
+
"description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.",
|
|
569
|
+
"inheritedFrom": {
|
|
570
|
+
"name": "Buttonsimple",
|
|
571
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
572
|
+
}
|
|
573
|
+
},
|
|
393
574
|
{
|
|
394
|
-
"
|
|
395
|
-
"
|
|
575
|
+
"kind": "method",
|
|
576
|
+
"name": "handleKeyUp",
|
|
577
|
+
"privacy": "private",
|
|
578
|
+
"parameters": [
|
|
579
|
+
{
|
|
580
|
+
"name": "event",
|
|
581
|
+
"type": {
|
|
582
|
+
"text": "KeyboardEvent"
|
|
583
|
+
},
|
|
584
|
+
"description": "The keyboard event."
|
|
585
|
+
}
|
|
586
|
+
],
|
|
587
|
+
"description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
|
|
588
|
+
"inheritedFrom": {
|
|
589
|
+
"name": "Buttonsimple",
|
|
590
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
591
|
+
}
|
|
396
592
|
}
|
|
397
593
|
],
|
|
398
|
-
"superclass": {
|
|
399
|
-
"name": "Component",
|
|
400
|
-
"module": "/src/models"
|
|
401
|
-
},
|
|
402
|
-
"tagName": "mdc-avatar",
|
|
403
|
-
"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 */",
|
|
404
|
-
"customElement": true,
|
|
405
594
|
"attributes": [
|
|
595
|
+
{
|
|
596
|
+
"name": "aria-label",
|
|
597
|
+
"type": {
|
|
598
|
+
"text": "string | null"
|
|
599
|
+
},
|
|
600
|
+
"default": "null",
|
|
601
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
602
|
+
"fieldName": "ariaLabel"
|
|
603
|
+
},
|
|
406
604
|
{
|
|
407
605
|
"name": "src",
|
|
408
606
|
"type": {
|
|
@@ -442,14 +640,14 @@
|
|
|
442
640
|
{
|
|
443
641
|
"name": "size",
|
|
444
642
|
"type": {
|
|
445
|
-
"text": "
|
|
643
|
+
"text": "ButtonSize"
|
|
446
644
|
},
|
|
447
645
|
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
448
646
|
"default": "32",
|
|
449
647
|
"fieldName": "size",
|
|
450
648
|
"inheritedFrom": {
|
|
451
|
-
"name": "
|
|
452
|
-
"module": "src/
|
|
649
|
+
"name": "Buttonsimple",
|
|
650
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
453
651
|
}
|
|
454
652
|
},
|
|
455
653
|
{
|
|
@@ -488,625 +686,427 @@
|
|
|
488
686
|
"name": "AvatarComponentMixin",
|
|
489
687
|
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
490
688
|
}
|
|
491
|
-
}
|
|
492
|
-
]
|
|
493
|
-
}
|
|
494
|
-
],
|
|
495
|
-
"exports": [
|
|
496
|
-
{
|
|
497
|
-
"kind": "js",
|
|
498
|
-
"name": "default",
|
|
499
|
-
"declaration": {
|
|
500
|
-
"name": "Avatar",
|
|
501
|
-
"module": "components/avatar/avatar.component.js"
|
|
502
|
-
}
|
|
503
|
-
}
|
|
504
|
-
]
|
|
505
|
-
},
|
|
506
|
-
{
|
|
507
|
-
"kind": "javascript-module",
|
|
508
|
-
"path": "components/bullet/bullet.component.js",
|
|
509
|
-
"declarations": [
|
|
510
|
-
{
|
|
511
|
-
"kind": "class",
|
|
512
|
-
"description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
|
|
513
|
-
"name": "Bullet",
|
|
514
|
-
"cssProperties": [
|
|
515
|
-
{
|
|
516
|
-
"description": "background color of the bullet",
|
|
517
|
-
"name": "--mdc-bullet-background-color"
|
|
518
|
-
},
|
|
519
|
-
{
|
|
520
|
-
"description": "small size value of the bullet",
|
|
521
|
-
"name": "--mdc-bullet-size-small"
|
|
522
|
-
},
|
|
523
|
-
{
|
|
524
|
-
"description": "medium size value of the bullet",
|
|
525
|
-
"name": "--mdc-bullet-size-medium"
|
|
526
689
|
},
|
|
527
690
|
{
|
|
528
|
-
"
|
|
529
|
-
"name": "--mdc-bullet-size-large"
|
|
530
|
-
}
|
|
531
|
-
],
|
|
532
|
-
"members": [
|
|
533
|
-
{
|
|
534
|
-
"kind": "field",
|
|
535
|
-
"name": "size",
|
|
536
|
-
"type": {
|
|
537
|
-
"text": "Size"
|
|
538
|
-
},
|
|
539
|
-
"privacy": "public",
|
|
540
|
-
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
541
|
-
"default": "small",
|
|
542
|
-
"attribute": "size",
|
|
543
|
-
"reflects": true
|
|
544
|
-
}
|
|
545
|
-
],
|
|
546
|
-
"attributes": [
|
|
547
|
-
{
|
|
548
|
-
"name": "size",
|
|
549
|
-
"type": {
|
|
550
|
-
"text": "Size"
|
|
551
|
-
},
|
|
552
|
-
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
553
|
-
"default": "small",
|
|
554
|
-
"fieldName": "size"
|
|
555
|
-
}
|
|
556
|
-
],
|
|
557
|
-
"superclass": {
|
|
558
|
-
"name": "Component",
|
|
559
|
-
"module": "/src/models"
|
|
560
|
-
},
|
|
561
|
-
"tagName": "mdc-bullet",
|
|
562
|
-
"jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
|
|
563
|
-
"customElement": true
|
|
564
|
-
}
|
|
565
|
-
],
|
|
566
|
-
"exports": [
|
|
567
|
-
{
|
|
568
|
-
"kind": "js",
|
|
569
|
-
"name": "default",
|
|
570
|
-
"declaration": {
|
|
571
|
-
"name": "Bullet",
|
|
572
|
-
"module": "components/bullet/bullet.component.js"
|
|
573
|
-
}
|
|
574
|
-
}
|
|
575
|
-
]
|
|
576
|
-
},
|
|
577
|
-
{
|
|
578
|
-
"kind": "javascript-module",
|
|
579
|
-
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
580
|
-
"declarations": [
|
|
581
|
-
{
|
|
582
|
-
"kind": "class",
|
|
583
|
-
"description": "The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n\nThis component is made by extending `buttonsimple` class.\nThe button component acts as a wrapper for the avatar component.",
|
|
584
|
-
"name": "AvatarButton",
|
|
585
|
-
"members": [
|
|
586
|
-
{
|
|
587
|
-
"kind": "field",
|
|
588
|
-
"name": "ariaLabel",
|
|
691
|
+
"name": "tabIndex",
|
|
589
692
|
"type": {
|
|
590
|
-
"text": "
|
|
693
|
+
"text": "number"
|
|
591
694
|
},
|
|
592
|
-
"default": "
|
|
593
|
-
"description": "
|
|
594
|
-
"
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
"privacy": "private",
|
|
600
|
-
"parameters": [
|
|
601
|
-
{
|
|
602
|
-
"name": "size",
|
|
603
|
-
"type": {
|
|
604
|
-
"text": "AvatarSize"
|
|
605
|
-
}
|
|
606
|
-
}
|
|
607
|
-
]
|
|
695
|
+
"default": "0",
|
|
696
|
+
"description": "This property specifies the tab order of the element.",
|
|
697
|
+
"fieldName": "tabIndex",
|
|
698
|
+
"inheritedFrom": {
|
|
699
|
+
"name": "TabIndexMixin",
|
|
700
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
701
|
+
}
|
|
608
702
|
},
|
|
609
703
|
{
|
|
610
|
-
"
|
|
611
|
-
"name": "active",
|
|
704
|
+
"name": "disabled",
|
|
612
705
|
"type": {
|
|
613
706
|
"text": "boolean"
|
|
614
707
|
},
|
|
615
|
-
"default": "
|
|
616
|
-
"description": "
|
|
617
|
-
"
|
|
708
|
+
"default": "false",
|
|
709
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
710
|
+
"fieldName": "disabled",
|
|
618
711
|
"inheritedFrom": {
|
|
619
|
-
"name": "
|
|
620
|
-
"module": "
|
|
712
|
+
"name": "DisabledMixin",
|
|
713
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
621
714
|
}
|
|
622
715
|
},
|
|
623
716
|
{
|
|
624
|
-
"
|
|
625
|
-
"name": "disabled",
|
|
717
|
+
"name": "active",
|
|
626
718
|
"type": {
|
|
627
719
|
"text": "boolean"
|
|
628
720
|
},
|
|
629
|
-
"default": "
|
|
630
|
-
"description": "
|
|
631
|
-
"
|
|
632
|
-
"reflects": true,
|
|
721
|
+
"default": "false",
|
|
722
|
+
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
|
|
723
|
+
"fieldName": "active",
|
|
633
724
|
"inheritedFrom": {
|
|
634
|
-
"name": "
|
|
635
|
-
"module": "
|
|
725
|
+
"name": "Buttonsimple",
|
|
726
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
636
727
|
}
|
|
637
728
|
},
|
|
638
729
|
{
|
|
639
|
-
"
|
|
640
|
-
"name": "softDisabled",
|
|
730
|
+
"name": "soft-disabled",
|
|
641
731
|
"type": {
|
|
642
732
|
"text": "boolean"
|
|
643
733
|
},
|
|
644
|
-
"default": "
|
|
734
|
+
"default": "false",
|
|
645
735
|
"description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
|
|
646
|
-
"
|
|
736
|
+
"fieldName": "softDisabled",
|
|
647
737
|
"inheritedFrom": {
|
|
648
738
|
"name": "Buttonsimple",
|
|
649
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
739
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
650
740
|
}
|
|
651
741
|
},
|
|
652
742
|
{
|
|
653
|
-
"kind": "field",
|
|
654
743
|
"name": "role",
|
|
655
744
|
"description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
|
|
656
|
-
"default": "
|
|
657
|
-
"
|
|
658
|
-
"
|
|
745
|
+
"default": "button",
|
|
746
|
+
"fieldName": "role",
|
|
747
|
+
"inheritedFrom": {
|
|
748
|
+
"name": "Buttonsimple",
|
|
749
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
750
|
+
}
|
|
751
|
+
},
|
|
752
|
+
{
|
|
753
|
+
"name": "type",
|
|
659
754
|
"type": {
|
|
660
|
-
"text": "
|
|
755
|
+
"text": "ButtonType"
|
|
661
756
|
},
|
|
757
|
+
"description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
|
|
758
|
+
"default": "button",
|
|
759
|
+
"fieldName": "type",
|
|
662
760
|
"inheritedFrom": {
|
|
663
761
|
"name": "Buttonsimple",
|
|
664
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
762
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
665
763
|
}
|
|
666
|
-
}
|
|
764
|
+
}
|
|
765
|
+
],
|
|
766
|
+
"mixins": [
|
|
767
|
+
{
|
|
768
|
+
"name": "AvatarComponentMixin",
|
|
769
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
770
|
+
}
|
|
771
|
+
],
|
|
772
|
+
"superclass": {
|
|
773
|
+
"name": "Buttonsimple",
|
|
774
|
+
"module": "/src/components/buttonsimple"
|
|
775
|
+
},
|
|
776
|
+
"tagName": "mdc-avatarbutton",
|
|
777
|
+
"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 * @tagname mdc-avatarbutton\n */",
|
|
778
|
+
"customElement": true
|
|
779
|
+
}
|
|
780
|
+
],
|
|
781
|
+
"exports": [
|
|
782
|
+
{
|
|
783
|
+
"kind": "js",
|
|
784
|
+
"name": "default",
|
|
785
|
+
"declaration": {
|
|
786
|
+
"name": "AvatarButton",
|
|
787
|
+
"module": "components/avatarbutton/avatarbutton.component.js"
|
|
788
|
+
}
|
|
789
|
+
}
|
|
790
|
+
]
|
|
791
|
+
},
|
|
792
|
+
{
|
|
793
|
+
"kind": "javascript-module",
|
|
794
|
+
"path": "components/badge/badge.component.js",
|
|
795
|
+
"declarations": [
|
|
796
|
+
{
|
|
797
|
+
"kind": "class",
|
|
798
|
+
"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.",
|
|
799
|
+
"name": "Badge",
|
|
800
|
+
"members": [
|
|
667
801
|
{
|
|
668
802
|
"kind": "field",
|
|
669
803
|
"name": "type",
|
|
670
804
|
"type": {
|
|
671
|
-
"text": "
|
|
805
|
+
"text": "BadgeType | undefined"
|
|
672
806
|
},
|
|
673
|
-
"description": "
|
|
674
|
-
"default": "button",
|
|
807
|
+
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
675
808
|
"attribute": "type",
|
|
676
|
-
"reflects": true
|
|
677
|
-
"inheritedFrom": {
|
|
678
|
-
"name": "Buttonsimple",
|
|
679
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
680
|
-
}
|
|
681
|
-
},
|
|
682
|
-
{
|
|
683
|
-
"kind": "field",
|
|
684
|
-
"name": "src",
|
|
685
|
-
"type": {
|
|
686
|
-
"text": "string | undefined"
|
|
687
|
-
},
|
|
688
|
-
"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.",
|
|
689
|
-
"attribute": "src",
|
|
690
|
-
"inheritedFrom": {
|
|
691
|
-
"name": "AvatarComponentMixin",
|
|
692
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
693
|
-
}
|
|
694
|
-
},
|
|
695
|
-
{
|
|
696
|
-
"kind": "field",
|
|
697
|
-
"name": "initials",
|
|
698
|
-
"type": {
|
|
699
|
-
"text": "string | undefined"
|
|
700
|
-
},
|
|
701
|
-
"description": "The initials to be displayed for the avatar.",
|
|
702
|
-
"attribute": "initials",
|
|
703
|
-
"inheritedFrom": {
|
|
704
|
-
"name": "AvatarComponentMixin",
|
|
705
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
706
|
-
}
|
|
809
|
+
"reflects": true
|
|
707
810
|
},
|
|
708
811
|
{
|
|
709
812
|
"kind": "field",
|
|
710
|
-
"name": "
|
|
813
|
+
"name": "iconName",
|
|
711
814
|
"type": {
|
|
712
|
-
"text": "
|
|
815
|
+
"text": "IconNames | undefined"
|
|
713
816
|
},
|
|
714
|
-
"description": "
|
|
715
|
-
"attribute": "
|
|
716
|
-
"inheritedFrom": {
|
|
717
|
-
"name": "AvatarComponentMixin",
|
|
718
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
719
|
-
}
|
|
817
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
818
|
+
"attribute": "icon-name"
|
|
720
819
|
},
|
|
721
820
|
{
|
|
722
821
|
"kind": "field",
|
|
723
|
-
"name": "
|
|
822
|
+
"name": "variant",
|
|
724
823
|
"type": {
|
|
725
|
-
"text": "
|
|
824
|
+
"text": "IconVariant"
|
|
726
825
|
},
|
|
727
|
-
"description": "
|
|
728
|
-
"default": "
|
|
729
|
-
"attribute": "
|
|
730
|
-
"reflects": true
|
|
731
|
-
"inheritedFrom": {
|
|
732
|
-
"name": "Buttonsimple",
|
|
733
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
734
|
-
}
|
|
826
|
+
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
827
|
+
"default": "primary",
|
|
828
|
+
"attribute": "variant",
|
|
829
|
+
"reflects": true
|
|
735
830
|
},
|
|
736
831
|
{
|
|
737
832
|
"kind": "field",
|
|
738
|
-
"name": "
|
|
833
|
+
"name": "counter",
|
|
739
834
|
"type": {
|
|
740
|
-
"text": "
|
|
835
|
+
"text": "number | undefined"
|
|
741
836
|
},
|
|
742
|
-
"description": "
|
|
743
|
-
"attribute": "
|
|
744
|
-
"inheritedFrom": {
|
|
745
|
-
"name": "AvatarComponentMixin",
|
|
746
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
747
|
-
}
|
|
837
|
+
"description": "Counter is the number which can be provided in the badge.",
|
|
838
|
+
"attribute": "counter"
|
|
748
839
|
},
|
|
749
840
|
{
|
|
750
841
|
"kind": "field",
|
|
751
|
-
"name": "
|
|
842
|
+
"name": "maxCounter",
|
|
752
843
|
"type": {
|
|
753
|
-
"text": "number
|
|
844
|
+
"text": "number"
|
|
754
845
|
},
|
|
755
|
-
"description": "The
|
|
756
|
-
"
|
|
757
|
-
"
|
|
758
|
-
|
|
759
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
760
|
-
}
|
|
846
|
+
"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`.",
|
|
847
|
+
"default": "99",
|
|
848
|
+
"attribute": "max-counter",
|
|
849
|
+
"reflects": true
|
|
761
850
|
},
|
|
762
851
|
{
|
|
763
852
|
"kind": "field",
|
|
764
|
-
"name": "
|
|
853
|
+
"name": "overlay",
|
|
765
854
|
"type": {
|
|
766
855
|
"text": "boolean"
|
|
767
856
|
},
|
|
768
857
|
"default": "false",
|
|
769
|
-
"description": "
|
|
770
|
-
"attribute": "
|
|
771
|
-
"inheritedFrom": {
|
|
772
|
-
"name": "AvatarComponentMixin",
|
|
773
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
774
|
-
}
|
|
858
|
+
"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.",
|
|
859
|
+
"attribute": "overlay"
|
|
775
860
|
},
|
|
776
861
|
{
|
|
777
862
|
"kind": "field",
|
|
778
|
-
"name": "
|
|
863
|
+
"name": "ariaLabel",
|
|
779
864
|
"type": {
|
|
780
|
-
"text": "
|
|
865
|
+
"text": "string | null"
|
|
781
866
|
},
|
|
782
|
-
"default": "
|
|
783
|
-
"description": "
|
|
784
|
-
"attribute": "
|
|
785
|
-
"reflects": true,
|
|
786
|
-
"inheritedFrom": {
|
|
787
|
-
"name": "TabIndexMixin",
|
|
788
|
-
"module": "utils/mixins/TabIndexMixin.js"
|
|
789
|
-
}
|
|
790
|
-
},
|
|
791
|
-
{
|
|
792
|
-
"kind": "method",
|
|
793
|
-
"name": "executeAction",
|
|
794
|
-
"privacy": "private",
|
|
795
|
-
"inheritedFrom": {
|
|
796
|
-
"name": "Buttonsimple",
|
|
797
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
798
|
-
}
|
|
867
|
+
"default": "null",
|
|
868
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
869
|
+
"attribute": "aria-label"
|
|
799
870
|
},
|
|
800
871
|
{
|
|
801
872
|
"kind": "method",
|
|
802
|
-
"name": "
|
|
873
|
+
"name": "getCounterText",
|
|
803
874
|
"privacy": "private",
|
|
804
|
-
"
|
|
805
|
-
{
|
|
806
|
-
"
|
|
807
|
-
"type": {
|
|
808
|
-
"text": "HTMLElement"
|
|
809
|
-
},
|
|
810
|
-
"description": "The target element."
|
|
811
|
-
},
|
|
812
|
-
{
|
|
813
|
-
"name": "active",
|
|
814
|
-
"type": {
|
|
815
|
-
"text": "boolean"
|
|
816
|
-
},
|
|
817
|
-
"description": "The active state."
|
|
875
|
+
"return": {
|
|
876
|
+
"type": {
|
|
877
|
+
"text": ""
|
|
818
878
|
}
|
|
819
|
-
|
|
820
|
-
"description": "Sets the aria-pressed attribute based on the active state.",
|
|
821
|
-
"inheritedFrom": {
|
|
822
|
-
"name": "Buttonsimple",
|
|
823
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
824
|
-
}
|
|
825
|
-
},
|
|
826
|
-
{
|
|
827
|
-
"kind": "method",
|
|
828
|
-
"name": "setSoftDisabled",
|
|
829
|
-
"privacy": "private",
|
|
879
|
+
},
|
|
830
880
|
"parameters": [
|
|
831
881
|
{
|
|
832
|
-
"name": "
|
|
882
|
+
"name": "maxCounter",
|
|
833
883
|
"type": {
|
|
834
|
-
"text": "
|
|
884
|
+
"text": "number"
|
|
835
885
|
},
|
|
836
|
-
"description": "
|
|
886
|
+
"description": "the maximum limit which can be displayed on the badge"
|
|
837
887
|
},
|
|
838
888
|
{
|
|
839
|
-
"name": "
|
|
889
|
+
"name": "counter",
|
|
890
|
+
"optional": true,
|
|
840
891
|
"type": {
|
|
841
|
-
"text": "
|
|
892
|
+
"text": "number"
|
|
842
893
|
},
|
|
843
|
-
"description": "
|
|
894
|
+
"description": "the number to be displayed on the badge"
|
|
844
895
|
}
|
|
845
896
|
],
|
|
846
|
-
"description": "
|
|
847
|
-
"inheritedFrom": {
|
|
848
|
-
"name": "Buttonsimple",
|
|
849
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
850
|
-
}
|
|
897
|
+
"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."
|
|
851
898
|
},
|
|
852
899
|
{
|
|
853
900
|
"kind": "method",
|
|
854
|
-
"name": "
|
|
901
|
+
"name": "getBadgeIcon",
|
|
855
902
|
"privacy": "private",
|
|
856
|
-
"
|
|
857
|
-
{
|
|
858
|
-
"
|
|
859
|
-
"type": {
|
|
860
|
-
"text": "HTMLElement"
|
|
861
|
-
},
|
|
862
|
-
"description": "The button element."
|
|
863
|
-
},
|
|
864
|
-
{
|
|
865
|
-
"name": "disabled",
|
|
866
|
-
"type": {
|
|
867
|
-
"text": "boolean"
|
|
868
|
-
},
|
|
869
|
-
"description": "The disabled state."
|
|
903
|
+
"return": {
|
|
904
|
+
"type": {
|
|
905
|
+
"text": ""
|
|
870
906
|
}
|
|
871
|
-
|
|
872
|
-
"description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
|
|
873
|
-
"inheritedFrom": {
|
|
874
|
-
"name": "Buttonsimple",
|
|
875
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
876
|
-
}
|
|
877
|
-
},
|
|
878
|
-
{
|
|
879
|
-
"kind": "method",
|
|
880
|
-
"name": "triggerClickEvent",
|
|
881
|
-
"privacy": "private",
|
|
882
|
-
"inheritedFrom": {
|
|
883
|
-
"name": "Buttonsimple",
|
|
884
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
885
|
-
}
|
|
886
|
-
},
|
|
887
|
-
{
|
|
888
|
-
"kind": "method",
|
|
889
|
-
"name": "handleKeyDown",
|
|
890
|
-
"privacy": "private",
|
|
907
|
+
},
|
|
891
908
|
"parameters": [
|
|
892
909
|
{
|
|
893
|
-
"name": "
|
|
910
|
+
"name": "iconName",
|
|
894
911
|
"type": {
|
|
895
|
-
"text": "
|
|
912
|
+
"text": "string"
|
|
896
913
|
},
|
|
897
|
-
"description": "
|
|
898
|
-
}
|
|
899
|
-
],
|
|
900
|
-
"description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.",
|
|
901
|
-
"inheritedFrom": {
|
|
902
|
-
"name": "Buttonsimple",
|
|
903
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
904
|
-
}
|
|
905
|
-
},
|
|
906
|
-
{
|
|
907
|
-
"kind": "method",
|
|
908
|
-
"name": "handleKeyUp",
|
|
909
|
-
"privacy": "private",
|
|
910
|
-
"parameters": [
|
|
914
|
+
"description": "the name of the icon from the icon set"
|
|
915
|
+
},
|
|
911
916
|
{
|
|
912
|
-
"name": "
|
|
917
|
+
"name": "backgroundClassPostfix",
|
|
913
918
|
"type": {
|
|
914
|
-
"text": "
|
|
919
|
+
"text": "string"
|
|
915
920
|
},
|
|
916
|
-
"description": "
|
|
921
|
+
"description": "postfix for the class to style the badge icon."
|
|
917
922
|
}
|
|
918
923
|
],
|
|
919
|
-
"description": "
|
|
920
|
-
|
|
921
|
-
"name": "Buttonsimple",
|
|
922
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
923
|
-
}
|
|
924
|
-
}
|
|
925
|
-
],
|
|
926
|
-
"attributes": [
|
|
924
|
+
"description": "Method to generate the badge icon."
|
|
925
|
+
},
|
|
927
926
|
{
|
|
928
|
-
"
|
|
929
|
-
"
|
|
930
|
-
|
|
927
|
+
"kind": "method",
|
|
928
|
+
"name": "getBadgeDot",
|
|
929
|
+
"privacy": "private",
|
|
930
|
+
"return": {
|
|
931
|
+
"type": {
|
|
932
|
+
"text": ""
|
|
933
|
+
}
|
|
931
934
|
},
|
|
932
|
-
"
|
|
933
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
934
|
-
"fieldName": "ariaLabel"
|
|
935
|
+
"description": "Method to generate the badge dot template."
|
|
935
936
|
},
|
|
936
937
|
{
|
|
937
|
-
"
|
|
938
|
-
"
|
|
939
|
-
|
|
938
|
+
"kind": "method",
|
|
939
|
+
"name": "getBadgeCounterText",
|
|
940
|
+
"privacy": "private",
|
|
941
|
+
"return": {
|
|
942
|
+
"type": {
|
|
943
|
+
"text": ""
|
|
944
|
+
}
|
|
940
945
|
},
|
|
941
|
-
"description": "
|
|
942
|
-
"fieldName": "src",
|
|
943
|
-
"inheritedFrom": {
|
|
944
|
-
"name": "AvatarComponentMixin",
|
|
945
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
946
|
-
}
|
|
946
|
+
"description": "Method to generate the badge text and counter template."
|
|
947
947
|
},
|
|
948
948
|
{
|
|
949
|
-
"
|
|
950
|
-
"
|
|
951
|
-
|
|
949
|
+
"kind": "method",
|
|
950
|
+
"name": "setRoleByAriaLabel",
|
|
951
|
+
"privacy": "private",
|
|
952
|
+
"return": {
|
|
953
|
+
"type": {
|
|
954
|
+
"text": "void"
|
|
955
|
+
}
|
|
952
956
|
},
|
|
953
|
-
"description": "
|
|
954
|
-
"fieldName": "initials",
|
|
955
|
-
"inheritedFrom": {
|
|
956
|
-
"name": "AvatarComponentMixin",
|
|
957
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
958
|
-
}
|
|
957
|
+
"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."
|
|
959
958
|
},
|
|
960
959
|
{
|
|
961
|
-
"
|
|
962
|
-
"
|
|
963
|
-
|
|
960
|
+
"kind": "method",
|
|
961
|
+
"name": "getBadgeContentBasedOnType",
|
|
962
|
+
"privacy": "private",
|
|
963
|
+
"return": {
|
|
964
|
+
"type": {
|
|
965
|
+
"text": ""
|
|
966
|
+
}
|
|
964
967
|
},
|
|
965
|
-
"description": "
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
970
|
-
}
|
|
971
|
-
},
|
|
968
|
+
"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."
|
|
969
|
+
}
|
|
970
|
+
],
|
|
971
|
+
"attributes": [
|
|
972
972
|
{
|
|
973
|
-
"name": "
|
|
973
|
+
"name": "type",
|
|
974
974
|
"type": {
|
|
975
|
-
"text": "
|
|
975
|
+
"text": "BadgeType | undefined"
|
|
976
976
|
},
|
|
977
|
-
"description": "
|
|
978
|
-
"
|
|
979
|
-
"fieldName": "size",
|
|
980
|
-
"inheritedFrom": {
|
|
981
|
-
"name": "Buttonsimple",
|
|
982
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
983
|
-
}
|
|
977
|
+
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
978
|
+
"fieldName": "type"
|
|
984
979
|
},
|
|
985
980
|
{
|
|
986
981
|
"name": "icon-name",
|
|
987
982
|
"type": {
|
|
988
983
|
"text": "IconNames | undefined"
|
|
989
984
|
},
|
|
990
|
-
"description": "Name of the icon
|
|
991
|
-
"fieldName": "iconName"
|
|
992
|
-
"inheritedFrom": {
|
|
993
|
-
"name": "AvatarComponentMixin",
|
|
994
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
995
|
-
}
|
|
985
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
986
|
+
"fieldName": "iconName"
|
|
996
987
|
},
|
|
997
988
|
{
|
|
998
|
-
"name": "
|
|
989
|
+
"name": "variant",
|
|
999
990
|
"type": {
|
|
1000
|
-
"text": "
|
|
991
|
+
"text": "IconVariant"
|
|
1001
992
|
},
|
|
1002
|
-
"description": "
|
|
1003
|
-
"
|
|
1004
|
-
"
|
|
1005
|
-
"name": "AvatarComponentMixin",
|
|
1006
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1007
|
-
}
|
|
993
|
+
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
994
|
+
"default": "primary",
|
|
995
|
+
"fieldName": "variant"
|
|
1008
996
|
},
|
|
1009
997
|
{
|
|
1010
|
-
"name": "
|
|
998
|
+
"name": "counter",
|
|
1011
999
|
"type": {
|
|
1012
|
-
"text": "
|
|
1000
|
+
"text": "number | undefined"
|
|
1013
1001
|
},
|
|
1014
|
-
"
|
|
1015
|
-
"
|
|
1016
|
-
"fieldName": "isTyping",
|
|
1017
|
-
"inheritedFrom": {
|
|
1018
|
-
"name": "AvatarComponentMixin",
|
|
1019
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1020
|
-
}
|
|
1002
|
+
"description": "Counter is the number which can be provided in the badge.",
|
|
1003
|
+
"fieldName": "counter"
|
|
1021
1004
|
},
|
|
1022
1005
|
{
|
|
1023
|
-
"name": "
|
|
1006
|
+
"name": "max-counter",
|
|
1024
1007
|
"type": {
|
|
1025
1008
|
"text": "number"
|
|
1026
1009
|
},
|
|
1027
|
-
"
|
|
1028
|
-
"
|
|
1029
|
-
"fieldName": "
|
|
1030
|
-
"inheritedFrom": {
|
|
1031
|
-
"name": "TabIndexMixin",
|
|
1032
|
-
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
1033
|
-
}
|
|
1010
|
+
"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`.",
|
|
1011
|
+
"default": "99",
|
|
1012
|
+
"fieldName": "maxCounter"
|
|
1034
1013
|
},
|
|
1035
1014
|
{
|
|
1036
|
-
"name": "
|
|
1015
|
+
"name": "overlay",
|
|
1037
1016
|
"type": {
|
|
1038
1017
|
"text": "boolean"
|
|
1039
1018
|
},
|
|
1040
1019
|
"default": "false",
|
|
1041
|
-
"description": "
|
|
1042
|
-
"fieldName": "
|
|
1043
|
-
"inheritedFrom": {
|
|
1044
|
-
"name": "DisabledMixin",
|
|
1045
|
-
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
1046
|
-
}
|
|
1020
|
+
"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.",
|
|
1021
|
+
"fieldName": "overlay"
|
|
1047
1022
|
},
|
|
1048
1023
|
{
|
|
1049
|
-
"name": "
|
|
1024
|
+
"name": "aria-label",
|
|
1050
1025
|
"type": {
|
|
1051
|
-
"text": "
|
|
1026
|
+
"text": "string | null"
|
|
1052
1027
|
},
|
|
1053
|
-
"default": "
|
|
1054
|
-
"description": "
|
|
1055
|
-
"fieldName": "
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1028
|
+
"default": "null",
|
|
1029
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
1030
|
+
"fieldName": "ariaLabel"
|
|
1031
|
+
}
|
|
1032
|
+
],
|
|
1033
|
+
"superclass": {
|
|
1034
|
+
"name": "Component",
|
|
1035
|
+
"module": "/src/models"
|
|
1036
|
+
},
|
|
1037
|
+
"tagName": "mdc-badge",
|
|
1038
|
+
"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 */",
|
|
1039
|
+
"customElement": true
|
|
1040
|
+
}
|
|
1041
|
+
],
|
|
1042
|
+
"exports": [
|
|
1043
|
+
{
|
|
1044
|
+
"kind": "js",
|
|
1045
|
+
"name": "default",
|
|
1046
|
+
"declaration": {
|
|
1047
|
+
"name": "Badge",
|
|
1048
|
+
"module": "components/badge/badge.component.js"
|
|
1049
|
+
}
|
|
1050
|
+
}
|
|
1051
|
+
]
|
|
1052
|
+
},
|
|
1053
|
+
{
|
|
1054
|
+
"kind": "javascript-module",
|
|
1055
|
+
"path": "components/bullet/bullet.component.js",
|
|
1056
|
+
"declarations": [
|
|
1057
|
+
{
|
|
1058
|
+
"kind": "class",
|
|
1059
|
+
"description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
|
|
1060
|
+
"name": "Bullet",
|
|
1061
|
+
"cssProperties": [
|
|
1062
|
+
{
|
|
1063
|
+
"description": "background color of the bullet",
|
|
1064
|
+
"name": "--mdc-bullet-background-color"
|
|
1060
1065
|
},
|
|
1061
1066
|
{
|
|
1062
|
-
"
|
|
1063
|
-
"
|
|
1064
|
-
"text": "boolean"
|
|
1065
|
-
},
|
|
1066
|
-
"default": "false",
|
|
1067
|
-
"description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
|
|
1068
|
-
"fieldName": "softDisabled",
|
|
1069
|
-
"inheritedFrom": {
|
|
1070
|
-
"name": "Buttonsimple",
|
|
1071
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1072
|
-
}
|
|
1067
|
+
"description": "small size value of the bullet",
|
|
1068
|
+
"name": "--mdc-bullet-size-small"
|
|
1073
1069
|
},
|
|
1074
1070
|
{
|
|
1075
|
-
"
|
|
1076
|
-
"
|
|
1077
|
-
"default": "button",
|
|
1078
|
-
"fieldName": "role",
|
|
1079
|
-
"inheritedFrom": {
|
|
1080
|
-
"name": "Buttonsimple",
|
|
1081
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1082
|
-
}
|
|
1071
|
+
"description": "medium size value of the bullet",
|
|
1072
|
+
"name": "--mdc-bullet-size-medium"
|
|
1083
1073
|
},
|
|
1084
1074
|
{
|
|
1085
|
-
"
|
|
1075
|
+
"description": "large size value of the bullet",
|
|
1076
|
+
"name": "--mdc-bullet-size-large"
|
|
1077
|
+
}
|
|
1078
|
+
],
|
|
1079
|
+
"members": [
|
|
1080
|
+
{
|
|
1081
|
+
"kind": "field",
|
|
1082
|
+
"name": "size",
|
|
1086
1083
|
"type": {
|
|
1087
|
-
"text": "
|
|
1084
|
+
"text": "Size"
|
|
1088
1085
|
},
|
|
1089
|
-
"
|
|
1090
|
-
"
|
|
1091
|
-
"
|
|
1092
|
-
"
|
|
1093
|
-
|
|
1094
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1095
|
-
}
|
|
1086
|
+
"privacy": "public",
|
|
1087
|
+
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
1088
|
+
"default": "small",
|
|
1089
|
+
"attribute": "size",
|
|
1090
|
+
"reflects": true
|
|
1096
1091
|
}
|
|
1097
1092
|
],
|
|
1098
|
-
"
|
|
1093
|
+
"attributes": [
|
|
1099
1094
|
{
|
|
1100
|
-
"name": "
|
|
1101
|
-
"
|
|
1095
|
+
"name": "size",
|
|
1096
|
+
"type": {
|
|
1097
|
+
"text": "Size"
|
|
1098
|
+
},
|
|
1099
|
+
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
1100
|
+
"default": "small",
|
|
1101
|
+
"fieldName": "size"
|
|
1102
1102
|
}
|
|
1103
1103
|
],
|
|
1104
1104
|
"superclass": {
|
|
1105
|
-
"name": "
|
|
1106
|
-
"module": "/src/
|
|
1105
|
+
"name": "Component",
|
|
1106
|
+
"module": "/src/models"
|
|
1107
1107
|
},
|
|
1108
|
-
"tagName": "mdc-
|
|
1109
|
-
"jsDoc": "/**\n *
|
|
1108
|
+
"tagName": "mdc-bullet",
|
|
1109
|
+
"jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
|
|
1110
1110
|
"customElement": true
|
|
1111
1111
|
}
|
|
1112
1112
|
],
|
|
@@ -1115,8 +1115,8 @@
|
|
|
1115
1115
|
"kind": "js",
|
|
1116
1116
|
"name": "default",
|
|
1117
1117
|
"declaration": {
|
|
1118
|
-
"name": "
|
|
1119
|
-
"module": "components/
|
|
1118
|
+
"name": "Bullet",
|
|
1119
|
+
"module": "components/bullet/bullet.component.js"
|
|
1120
1120
|
}
|
|
1121
1121
|
}
|
|
1122
1122
|
]
|