@momentum-design/components 0.64.1 → 0.65.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 +1289 -1289
- package/dist/react/index.d.ts +3 -3
- package/dist/react/index.js +3 -3
- package/package.json +1 -1
|
@@ -4,180 +4,485 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "components/
|
|
7
|
+
"path": "components/appheader/appheader.component.js",
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "mdc-
|
|
12
|
-
"name": "
|
|
11
|
+
"description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
|
|
12
|
+
"name": "Appheader",
|
|
13
|
+
"cssParts": [
|
|
14
|
+
{
|
|
15
|
+
"description": "The main container for styling the header.",
|
|
16
|
+
"name": "container"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"description": "The leading section of the header.",
|
|
20
|
+
"name": "leading-section"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"description": "The center section of the header.",
|
|
24
|
+
"name": "center-section"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"description": "The trailing section of the header.",
|
|
28
|
+
"name": "trailing-section"
|
|
29
|
+
}
|
|
30
|
+
],
|
|
31
|
+
"slots": [
|
|
32
|
+
{
|
|
33
|
+
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
34
|
+
"name": "leading"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
38
|
+
"name": "center"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
42
|
+
"name": "trailing"
|
|
43
|
+
}
|
|
44
|
+
],
|
|
45
|
+
"members": [],
|
|
46
|
+
"superclass": {
|
|
47
|
+
"name": "Component",
|
|
48
|
+
"module": "/src/models"
|
|
49
|
+
},
|
|
50
|
+
"tagName": "mdc-appheader",
|
|
51
|
+
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
|
52
|
+
"customElement": true
|
|
53
|
+
}
|
|
54
|
+
],
|
|
55
|
+
"exports": [
|
|
56
|
+
{
|
|
57
|
+
"kind": "js",
|
|
58
|
+
"name": "default",
|
|
59
|
+
"declaration": {
|
|
60
|
+
"name": "Appheader",
|
|
61
|
+
"module": "components/appheader/appheader.component.js"
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
]
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"kind": "javascript-module",
|
|
68
|
+
"path": "components/avatar/avatar.component.js",
|
|
69
|
+
"declarations": [
|
|
70
|
+
{
|
|
71
|
+
"kind": "class",
|
|
72
|
+
"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.",
|
|
73
|
+
"name": "Avatar",
|
|
13
74
|
"cssProperties": [
|
|
14
75
|
{
|
|
15
|
-
"description": "
|
|
16
|
-
"name": "--mdc-
|
|
76
|
+
"description": "Allows customization of the default background color.",
|
|
77
|
+
"name": "--mdc-avatar-default-background-color"
|
|
17
78
|
},
|
|
18
79
|
{
|
|
19
|
-
"description": "
|
|
20
|
-
"name": "--mdc-
|
|
80
|
+
"description": "Allows customization of the default foreground color.",
|
|
81
|
+
"name": "--mdc-avatar-default-foreground-color"
|
|
21
82
|
},
|
|
22
83
|
{
|
|
23
|
-
"description": "
|
|
24
|
-
"name": "--mdc-
|
|
84
|
+
"description": "Allows customization of the loading indicator background color.",
|
|
85
|
+
"name": "--mdc-avatar-loading-indicator-background-color"
|
|
25
86
|
},
|
|
26
87
|
{
|
|
27
|
-
"description": "
|
|
28
|
-
"name": "--mdc-
|
|
88
|
+
"description": "Allows customization of the loading indicator foreground color.",
|
|
89
|
+
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"description": "Allows customization of the loading overlay background color.",
|
|
93
|
+
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
29
94
|
}
|
|
30
95
|
],
|
|
31
96
|
"members": [
|
|
32
97
|
{
|
|
33
98
|
"kind": "field",
|
|
34
|
-
"name": "
|
|
99
|
+
"name": "src",
|
|
35
100
|
"type": {
|
|
36
|
-
"text": "
|
|
101
|
+
"text": "string | undefined"
|
|
37
102
|
},
|
|
38
|
-
"description": "The
|
|
39
|
-
"
|
|
40
|
-
"
|
|
103
|
+
"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.",
|
|
104
|
+
"attribute": "src",
|
|
105
|
+
"inheritedFrom": {
|
|
106
|
+
"name": "AvatarComponentMixin",
|
|
107
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
108
|
+
}
|
|
41
109
|
},
|
|
42
110
|
{
|
|
43
111
|
"kind": "field",
|
|
44
|
-
"name": "
|
|
112
|
+
"name": "initials",
|
|
45
113
|
"type": {
|
|
46
|
-
"text": "string"
|
|
114
|
+
"text": "string | undefined"
|
|
47
115
|
},
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
116
|
+
"description": "The initials to be displayed for the avatar.",
|
|
117
|
+
"attribute": "initials",
|
|
118
|
+
"inheritedFrom": {
|
|
119
|
+
"name": "AvatarComponentMixin",
|
|
120
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
121
|
+
}
|
|
51
122
|
},
|
|
52
123
|
{
|
|
53
124
|
"kind": "field",
|
|
54
|
-
"name": "
|
|
125
|
+
"name": "presence",
|
|
55
126
|
"type": {
|
|
56
|
-
"text": "
|
|
127
|
+
"text": "PresenceType | undefined"
|
|
57
128
|
},
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"attribute": "tabIndex",
|
|
61
|
-
"reflects": true,
|
|
129
|
+
"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`",
|
|
130
|
+
"attribute": "presence",
|
|
62
131
|
"inheritedFrom": {
|
|
63
|
-
"name": "
|
|
64
|
-
"module": "utils/mixins/
|
|
132
|
+
"name": "AvatarComponentMixin",
|
|
133
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
65
134
|
}
|
|
66
135
|
},
|
|
67
136
|
{
|
|
68
137
|
"kind": "field",
|
|
69
|
-
"name": "
|
|
138
|
+
"name": "size",
|
|
70
139
|
"type": {
|
|
71
|
-
"text": "
|
|
140
|
+
"text": "AvatarSize"
|
|
72
141
|
},
|
|
73
|
-
"description": "
|
|
74
|
-
"default": "
|
|
75
|
-
"attribute": "
|
|
142
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
143
|
+
"default": "32",
|
|
144
|
+
"attribute": "size",
|
|
76
145
|
"reflects": true,
|
|
77
146
|
"inheritedFrom": {
|
|
78
|
-
"name": "
|
|
79
|
-
"module": "utils/mixins/
|
|
147
|
+
"name": "AvatarComponentMixin",
|
|
148
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
80
149
|
}
|
|
81
150
|
},
|
|
82
151
|
{
|
|
83
152
|
"kind": "field",
|
|
84
|
-
"name": "
|
|
153
|
+
"name": "counter",
|
|
85
154
|
"type": {
|
|
86
|
-
"text": "
|
|
155
|
+
"text": "number | undefined"
|
|
87
156
|
},
|
|
88
|
-
"description": "The
|
|
89
|
-
"
|
|
90
|
-
"attribute": "active",
|
|
91
|
-
"reflects": true,
|
|
157
|
+
"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`.",
|
|
158
|
+
"attribute": "counter",
|
|
92
159
|
"inheritedFrom": {
|
|
93
|
-
"name": "
|
|
94
|
-
"module": "
|
|
160
|
+
"name": "AvatarComponentMixin",
|
|
161
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
95
162
|
}
|
|
96
163
|
},
|
|
97
164
|
{
|
|
98
165
|
"kind": "field",
|
|
99
|
-
"name": "
|
|
166
|
+
"name": "isTyping",
|
|
100
167
|
"type": {
|
|
101
|
-
"text": "boolean
|
|
168
|
+
"text": "boolean"
|
|
102
169
|
},
|
|
103
|
-
"
|
|
104
|
-
"
|
|
105
|
-
"attribute": "
|
|
106
|
-
"reflects": true,
|
|
170
|
+
"default": "false",
|
|
171
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
172
|
+
"attribute": "is-typing",
|
|
107
173
|
"inheritedFrom": {
|
|
108
|
-
"name": "
|
|
109
|
-
"module": "
|
|
174
|
+
"name": "AvatarComponentMixin",
|
|
175
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
110
176
|
}
|
|
111
177
|
},
|
|
112
178
|
{
|
|
113
179
|
"kind": "field",
|
|
114
|
-
"name": "
|
|
180
|
+
"name": "iconName",
|
|
115
181
|
"type": {
|
|
116
|
-
"text": "
|
|
182
|
+
"text": "IconNames | undefined"
|
|
117
183
|
},
|
|
118
|
-
"description": "
|
|
119
|
-
"
|
|
120
|
-
"attribute": "size",
|
|
121
|
-
"reflects": true,
|
|
184
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
185
|
+
"attribute": "icon-name",
|
|
122
186
|
"inheritedFrom": {
|
|
123
|
-
"name": "
|
|
124
|
-
"module": "
|
|
187
|
+
"name": "IconNameMixin",
|
|
188
|
+
"module": "utils/mixins/IconNameMixin.js"
|
|
125
189
|
}
|
|
126
|
-
}
|
|
190
|
+
}
|
|
191
|
+
],
|
|
192
|
+
"mixins": [
|
|
127
193
|
{
|
|
128
|
-
"
|
|
129
|
-
"
|
|
130
|
-
"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.",
|
|
131
|
-
"default": "button",
|
|
132
|
-
"attribute": "role",
|
|
133
|
-
"reflects": true,
|
|
134
|
-
"inheritedFrom": {
|
|
135
|
-
"name": "Buttonsimple",
|
|
136
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
137
|
-
}
|
|
194
|
+
"name": "AvatarComponentMixin",
|
|
195
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
138
196
|
},
|
|
139
197
|
{
|
|
140
|
-
"
|
|
141
|
-
"
|
|
198
|
+
"name": "IconNameMixin",
|
|
199
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
|
200
|
+
}
|
|
201
|
+
],
|
|
202
|
+
"superclass": {
|
|
203
|
+
"name": "Component",
|
|
204
|
+
"module": "/src/models"
|
|
205
|
+
},
|
|
206
|
+
"tagName": "mdc-avatar",
|
|
207
|
+
"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 */",
|
|
208
|
+
"customElement": true,
|
|
209
|
+
"attributes": [
|
|
210
|
+
{
|
|
211
|
+
"name": "src",
|
|
142
212
|
"type": {
|
|
143
213
|
"text": "string | undefined"
|
|
144
214
|
},
|
|
145
|
-
"description": "
|
|
146
|
-
"
|
|
147
|
-
"attribute": "ariaStateKey",
|
|
148
|
-
"reflects": true,
|
|
215
|
+
"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.",
|
|
216
|
+
"fieldName": "src",
|
|
149
217
|
"inheritedFrom": {
|
|
150
|
-
"name": "
|
|
151
|
-
"module": "
|
|
218
|
+
"name": "AvatarComponentMixin",
|
|
219
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
152
220
|
}
|
|
153
221
|
},
|
|
154
222
|
{
|
|
155
|
-
"
|
|
156
|
-
"name": "type",
|
|
223
|
+
"name": "initials",
|
|
157
224
|
"type": {
|
|
158
|
-
"text": "
|
|
225
|
+
"text": "string | undefined"
|
|
159
226
|
},
|
|
160
|
-
"description": "
|
|
161
|
-
"
|
|
162
|
-
"attribute": "type",
|
|
163
|
-
"reflects": true,
|
|
227
|
+
"description": "The initials to be displayed for the avatar.",
|
|
228
|
+
"fieldName": "initials",
|
|
164
229
|
"inheritedFrom": {
|
|
165
|
-
"name": "
|
|
166
|
-
"module": "
|
|
230
|
+
"name": "AvatarComponentMixin",
|
|
231
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
167
232
|
}
|
|
168
233
|
},
|
|
169
234
|
{
|
|
170
|
-
"
|
|
171
|
-
"
|
|
172
|
-
|
|
235
|
+
"name": "presence",
|
|
236
|
+
"type": {
|
|
237
|
+
"text": "PresenceType | undefined"
|
|
238
|
+
},
|
|
239
|
+
"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`",
|
|
240
|
+
"fieldName": "presence",
|
|
173
241
|
"inheritedFrom": {
|
|
174
|
-
"name": "
|
|
175
|
-
"module": "
|
|
242
|
+
"name": "AvatarComponentMixin",
|
|
243
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
176
244
|
}
|
|
177
245
|
},
|
|
178
246
|
{
|
|
179
|
-
"
|
|
180
|
-
"
|
|
247
|
+
"name": "size",
|
|
248
|
+
"type": {
|
|
249
|
+
"text": "AvatarSize"
|
|
250
|
+
},
|
|
251
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
252
|
+
"default": "32",
|
|
253
|
+
"fieldName": "size",
|
|
254
|
+
"inheritedFrom": {
|
|
255
|
+
"name": "AvatarComponentMixin",
|
|
256
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
257
|
+
}
|
|
258
|
+
},
|
|
259
|
+
{
|
|
260
|
+
"name": "counter",
|
|
261
|
+
"type": {
|
|
262
|
+
"text": "number | undefined"
|
|
263
|
+
},
|
|
264
|
+
"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`.",
|
|
265
|
+
"fieldName": "counter",
|
|
266
|
+
"inheritedFrom": {
|
|
267
|
+
"name": "AvatarComponentMixin",
|
|
268
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
269
|
+
}
|
|
270
|
+
},
|
|
271
|
+
{
|
|
272
|
+
"name": "is-typing",
|
|
273
|
+
"type": {
|
|
274
|
+
"text": "boolean"
|
|
275
|
+
},
|
|
276
|
+
"default": "false",
|
|
277
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
278
|
+
"fieldName": "isTyping",
|
|
279
|
+
"inheritedFrom": {
|
|
280
|
+
"name": "AvatarComponentMixin",
|
|
281
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
282
|
+
}
|
|
283
|
+
},
|
|
284
|
+
{
|
|
285
|
+
"name": "icon-name",
|
|
286
|
+
"type": {
|
|
287
|
+
"text": "IconNames | undefined"
|
|
288
|
+
},
|
|
289
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
290
|
+
"fieldName": "iconName",
|
|
291
|
+
"inheritedFrom": {
|
|
292
|
+
"name": "IconNameMixin",
|
|
293
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
]
|
|
297
|
+
}
|
|
298
|
+
],
|
|
299
|
+
"exports": [
|
|
300
|
+
{
|
|
301
|
+
"kind": "js",
|
|
302
|
+
"name": "default",
|
|
303
|
+
"declaration": {
|
|
304
|
+
"name": "Avatar",
|
|
305
|
+
"module": "components/avatar/avatar.component.js"
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
]
|
|
309
|
+
},
|
|
310
|
+
{
|
|
311
|
+
"kind": "javascript-module",
|
|
312
|
+
"path": "components/alertchip/alertchip.component.js",
|
|
313
|
+
"declarations": [
|
|
314
|
+
{
|
|
315
|
+
"kind": "class",
|
|
316
|
+
"description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - neutral, warning, error, success, and informational\n\nThis component is built by extending Buttonsimple.",
|
|
317
|
+
"name": "AlertChip",
|
|
318
|
+
"cssProperties": [
|
|
319
|
+
{
|
|
320
|
+
"description": "The color of the label text",
|
|
321
|
+
"name": "--mdc-chip-color"
|
|
322
|
+
},
|
|
323
|
+
{
|
|
324
|
+
"description": "The color of the icon",
|
|
325
|
+
"name": "--mdc-chip-icon-color"
|
|
326
|
+
},
|
|
327
|
+
{
|
|
328
|
+
"description": "The border color of the alertchip",
|
|
329
|
+
"name": "--mdc-chip-border-color"
|
|
330
|
+
},
|
|
331
|
+
{
|
|
332
|
+
"description": "The background color of the alertchip",
|
|
333
|
+
"name": "--mdc-chip-background-color"
|
|
334
|
+
}
|
|
335
|
+
],
|
|
336
|
+
"members": [
|
|
337
|
+
{
|
|
338
|
+
"kind": "field",
|
|
339
|
+
"name": "variant",
|
|
340
|
+
"type": {
|
|
341
|
+
"text": "VariantType"
|
|
342
|
+
},
|
|
343
|
+
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
344
|
+
"default": "neutral",
|
|
345
|
+
"attribute": "variant"
|
|
346
|
+
},
|
|
347
|
+
{
|
|
348
|
+
"kind": "field",
|
|
349
|
+
"name": "label",
|
|
350
|
+
"type": {
|
|
351
|
+
"text": "string"
|
|
352
|
+
},
|
|
353
|
+
"default": "''",
|
|
354
|
+
"description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
|
355
|
+
"attribute": "label"
|
|
356
|
+
},
|
|
357
|
+
{
|
|
358
|
+
"kind": "field",
|
|
359
|
+
"name": "tabIndex",
|
|
360
|
+
"type": {
|
|
361
|
+
"text": "number"
|
|
362
|
+
},
|
|
363
|
+
"default": "0",
|
|
364
|
+
"description": "This property specifies the tab order of the element.",
|
|
365
|
+
"attribute": "tabIndex",
|
|
366
|
+
"reflects": true,
|
|
367
|
+
"inheritedFrom": {
|
|
368
|
+
"name": "TabIndexMixin",
|
|
369
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
370
|
+
}
|
|
371
|
+
},
|
|
372
|
+
{
|
|
373
|
+
"kind": "field",
|
|
374
|
+
"name": "disabled",
|
|
375
|
+
"type": {
|
|
376
|
+
"text": "boolean | undefined"
|
|
377
|
+
},
|
|
378
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
379
|
+
"default": "undefined",
|
|
380
|
+
"attribute": "disabled",
|
|
381
|
+
"reflects": true,
|
|
382
|
+
"inheritedFrom": {
|
|
383
|
+
"name": "DisabledMixin",
|
|
384
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
385
|
+
}
|
|
386
|
+
},
|
|
387
|
+
{
|
|
388
|
+
"kind": "field",
|
|
389
|
+
"name": "active",
|
|
390
|
+
"type": {
|
|
391
|
+
"text": "boolean | undefined"
|
|
392
|
+
},
|
|
393
|
+
"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.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
|
394
|
+
"default": "undefined",
|
|
395
|
+
"attribute": "active",
|
|
396
|
+
"reflects": true,
|
|
397
|
+
"inheritedFrom": {
|
|
398
|
+
"name": "Buttonsimple",
|
|
399
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
400
|
+
}
|
|
401
|
+
},
|
|
402
|
+
{
|
|
403
|
+
"kind": "field",
|
|
404
|
+
"name": "softDisabled",
|
|
405
|
+
"type": {
|
|
406
|
+
"text": "boolean | undefined"
|
|
407
|
+
},
|
|
408
|
+
"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.",
|
|
409
|
+
"default": "undefined",
|
|
410
|
+
"attribute": "soft-disabled",
|
|
411
|
+
"reflects": true,
|
|
412
|
+
"inheritedFrom": {
|
|
413
|
+
"name": "Buttonsimple",
|
|
414
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
415
|
+
}
|
|
416
|
+
},
|
|
417
|
+
{
|
|
418
|
+
"kind": "field",
|
|
419
|
+
"name": "size",
|
|
420
|
+
"type": {
|
|
421
|
+
"text": "ButtonSize"
|
|
422
|
+
},
|
|
423
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
424
|
+
"default": "32",
|
|
425
|
+
"attribute": "size",
|
|
426
|
+
"reflects": true,
|
|
427
|
+
"inheritedFrom": {
|
|
428
|
+
"name": "Buttonsimple",
|
|
429
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
430
|
+
}
|
|
431
|
+
},
|
|
432
|
+
{
|
|
433
|
+
"kind": "field",
|
|
434
|
+
"name": "role",
|
|
435
|
+
"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.",
|
|
436
|
+
"default": "button",
|
|
437
|
+
"attribute": "role",
|
|
438
|
+
"reflects": true,
|
|
439
|
+
"inheritedFrom": {
|
|
440
|
+
"name": "Buttonsimple",
|
|
441
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
442
|
+
}
|
|
443
|
+
},
|
|
444
|
+
{
|
|
445
|
+
"kind": "field",
|
|
446
|
+
"name": "ariaStateKey",
|
|
447
|
+
"type": {
|
|
448
|
+
"text": "string | undefined"
|
|
449
|
+
},
|
|
450
|
+
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
|
451
|
+
"default": "'aria-pressed' (when)",
|
|
452
|
+
"attribute": "ariaStateKey",
|
|
453
|
+
"reflects": true,
|
|
454
|
+
"inheritedFrom": {
|
|
455
|
+
"name": "Buttonsimple",
|
|
456
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
457
|
+
}
|
|
458
|
+
},
|
|
459
|
+
{
|
|
460
|
+
"kind": "field",
|
|
461
|
+
"name": "type",
|
|
462
|
+
"type": {
|
|
463
|
+
"text": "ButtonType"
|
|
464
|
+
},
|
|
465
|
+
"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.",
|
|
466
|
+
"default": "button",
|
|
467
|
+
"attribute": "type",
|
|
468
|
+
"reflects": true,
|
|
469
|
+
"inheritedFrom": {
|
|
470
|
+
"name": "Buttonsimple",
|
|
471
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
472
|
+
}
|
|
473
|
+
},
|
|
474
|
+
{
|
|
475
|
+
"kind": "method",
|
|
476
|
+
"name": "executeAction",
|
|
477
|
+
"privacy": "protected",
|
|
478
|
+
"inheritedFrom": {
|
|
479
|
+
"name": "Buttonsimple",
|
|
480
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
481
|
+
}
|
|
482
|
+
},
|
|
483
|
+
{
|
|
484
|
+
"kind": "method",
|
|
485
|
+
"name": "setActive",
|
|
181
486
|
"privacy": "protected",
|
|
182
487
|
"parameters": [
|
|
183
488
|
{
|
|
@@ -494,96 +799,50 @@
|
|
|
494
799
|
},
|
|
495
800
|
{
|
|
496
801
|
"kind": "javascript-module",
|
|
497
|
-
"path": "components/
|
|
802
|
+
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
498
803
|
"declarations": [
|
|
499
804
|
{
|
|
500
805
|
"kind": "class",
|
|
501
|
-
"description": "The `mdc-
|
|
502
|
-
"name": "
|
|
503
|
-
"
|
|
806
|
+
"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.",
|
|
807
|
+
"name": "AvatarButton",
|
|
808
|
+
"cssProperties": [
|
|
504
809
|
{
|
|
505
|
-
"description": "
|
|
506
|
-
"name": "
|
|
810
|
+
"description": "Background color of the overlay in rest state",
|
|
811
|
+
"name": "--mdc-avatarbutton-overlay-background-color-rest"
|
|
507
812
|
},
|
|
508
813
|
{
|
|
509
|
-
"description": "
|
|
510
|
-
"name": "
|
|
814
|
+
"description": "Background color of the overlay in hover state",
|
|
815
|
+
"name": "--mdc-avatarbutton-overlay-background-color-hover"
|
|
511
816
|
},
|
|
512
817
|
{
|
|
513
|
-
"description": "
|
|
514
|
-
"name": "
|
|
515
|
-
},
|
|
516
|
-
{
|
|
517
|
-
"description": "The trailing section of the header.",
|
|
518
|
-
"name": "trailing-section"
|
|
519
|
-
}
|
|
520
|
-
],
|
|
521
|
-
"slots": [
|
|
522
|
-
{
|
|
523
|
-
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
524
|
-
"name": "leading"
|
|
525
|
-
},
|
|
526
|
-
{
|
|
527
|
-
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
528
|
-
"name": "center"
|
|
529
|
-
},
|
|
530
|
-
{
|
|
531
|
-
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
532
|
-
"name": "trailing"
|
|
818
|
+
"description": "Background color of the overlay in active state",
|
|
819
|
+
"name": "--mdc-avatarbutton-overlay-background-color-active"
|
|
533
820
|
}
|
|
534
821
|
],
|
|
535
|
-
"members": [
|
|
536
|
-
"superclass": {
|
|
537
|
-
"name": "Component",
|
|
538
|
-
"module": "/src/models"
|
|
539
|
-
},
|
|
540
|
-
"tagName": "mdc-appheader",
|
|
541
|
-
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
|
542
|
-
"customElement": true
|
|
543
|
-
}
|
|
544
|
-
],
|
|
545
|
-
"exports": [
|
|
546
|
-
{
|
|
547
|
-
"kind": "js",
|
|
548
|
-
"name": "default",
|
|
549
|
-
"declaration": {
|
|
550
|
-
"name": "Appheader",
|
|
551
|
-
"module": "components/appheader/appheader.component.js"
|
|
552
|
-
}
|
|
553
|
-
}
|
|
554
|
-
]
|
|
555
|
-
},
|
|
556
|
-
{
|
|
557
|
-
"kind": "javascript-module",
|
|
558
|
-
"path": "components/avatar/avatar.component.js",
|
|
559
|
-
"declarations": [
|
|
560
|
-
{
|
|
561
|
-
"kind": "class",
|
|
562
|
-
"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.",
|
|
563
|
-
"name": "Avatar",
|
|
564
|
-
"cssProperties": [
|
|
565
|
-
{
|
|
566
|
-
"description": "Allows customization of the default background color.",
|
|
567
|
-
"name": "--mdc-avatar-default-background-color"
|
|
568
|
-
},
|
|
569
|
-
{
|
|
570
|
-
"description": "Allows customization of the default foreground color.",
|
|
571
|
-
"name": "--mdc-avatar-default-foreground-color"
|
|
572
|
-
},
|
|
822
|
+
"members": [
|
|
573
823
|
{
|
|
574
|
-
"
|
|
575
|
-
"name": "
|
|
824
|
+
"kind": "field",
|
|
825
|
+
"name": "ariaLabel",
|
|
826
|
+
"type": {
|
|
827
|
+
"text": "string | null"
|
|
828
|
+
},
|
|
829
|
+
"default": "null",
|
|
830
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
831
|
+
"attribute": "aria-label"
|
|
576
832
|
},
|
|
577
833
|
{
|
|
578
|
-
"
|
|
579
|
-
"name": "
|
|
834
|
+
"kind": "method",
|
|
835
|
+
"name": "setSize",
|
|
836
|
+
"privacy": "private",
|
|
837
|
+
"parameters": [
|
|
838
|
+
{
|
|
839
|
+
"name": "size",
|
|
840
|
+
"type": {
|
|
841
|
+
"text": "AvatarSize"
|
|
842
|
+
}
|
|
843
|
+
}
|
|
844
|
+
]
|
|
580
845
|
},
|
|
581
|
-
{
|
|
582
|
-
"description": "Allows customization of the loading overlay background color.",
|
|
583
|
-
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
584
|
-
}
|
|
585
|
-
],
|
|
586
|
-
"members": [
|
|
587
846
|
{
|
|
588
847
|
"kind": "field",
|
|
589
848
|
"name": "src",
|
|
@@ -627,15 +886,15 @@
|
|
|
627
886
|
"kind": "field",
|
|
628
887
|
"name": "size",
|
|
629
888
|
"type": {
|
|
630
|
-
"text": "
|
|
889
|
+
"text": "ButtonSize"
|
|
631
890
|
},
|
|
632
891
|
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
633
892
|
"default": "32",
|
|
634
893
|
"attribute": "size",
|
|
635
894
|
"reflects": true,
|
|
636
895
|
"inheritedFrom": {
|
|
637
|
-
"name": "
|
|
638
|
-
"module": "
|
|
896
|
+
"name": "Buttonsimple",
|
|
897
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
639
898
|
}
|
|
640
899
|
},
|
|
641
900
|
{
|
|
@@ -677,376 +936,117 @@
|
|
|
677
936
|
"name": "IconNameMixin",
|
|
678
937
|
"module": "utils/mixins/IconNameMixin.js"
|
|
679
938
|
}
|
|
680
|
-
}
|
|
681
|
-
],
|
|
682
|
-
"mixins": [
|
|
683
|
-
{
|
|
684
|
-
"name": "AvatarComponentMixin",
|
|
685
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
686
939
|
},
|
|
687
940
|
{
|
|
688
|
-
"
|
|
689
|
-
"
|
|
690
|
-
}
|
|
691
|
-
],
|
|
692
|
-
"superclass": {
|
|
693
|
-
"name": "Component",
|
|
694
|
-
"module": "/src/models"
|
|
695
|
-
},
|
|
696
|
-
"tagName": "mdc-avatar",
|
|
697
|
-
"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 */",
|
|
698
|
-
"customElement": true,
|
|
699
|
-
"attributes": [
|
|
700
|
-
{
|
|
701
|
-
"name": "src",
|
|
941
|
+
"kind": "field",
|
|
942
|
+
"name": "tabIndex",
|
|
702
943
|
"type": {
|
|
703
|
-
"text": "
|
|
944
|
+
"text": "number"
|
|
704
945
|
},
|
|
705
|
-
"
|
|
706
|
-
"
|
|
946
|
+
"default": "0",
|
|
947
|
+
"description": "This property specifies the tab order of the element.",
|
|
948
|
+
"attribute": "tabIndex",
|
|
949
|
+
"reflects": true,
|
|
707
950
|
"inheritedFrom": {
|
|
708
|
-
"name": "
|
|
709
|
-
"module": "
|
|
951
|
+
"name": "TabIndexMixin",
|
|
952
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
710
953
|
}
|
|
711
954
|
},
|
|
712
955
|
{
|
|
713
|
-
"
|
|
956
|
+
"kind": "field",
|
|
957
|
+
"name": "disabled",
|
|
714
958
|
"type": {
|
|
715
|
-
"text": "
|
|
959
|
+
"text": "boolean | undefined"
|
|
716
960
|
},
|
|
717
|
-
"description": "
|
|
718
|
-
"
|
|
961
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
962
|
+
"default": "undefined",
|
|
963
|
+
"attribute": "disabled",
|
|
964
|
+
"reflects": true,
|
|
719
965
|
"inheritedFrom": {
|
|
720
|
-
"name": "
|
|
721
|
-
"module": "
|
|
966
|
+
"name": "DisabledMixin",
|
|
967
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
722
968
|
}
|
|
723
969
|
},
|
|
724
970
|
{
|
|
725
|
-
"
|
|
971
|
+
"kind": "field",
|
|
972
|
+
"name": "active",
|
|
726
973
|
"type": {
|
|
727
|
-
"text": "
|
|
974
|
+
"text": "boolean | undefined"
|
|
728
975
|
},
|
|
729
|
-
"description": "The
|
|
730
|
-
"
|
|
976
|
+
"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.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
|
977
|
+
"default": "undefined",
|
|
978
|
+
"attribute": "active",
|
|
979
|
+
"reflects": true,
|
|
731
980
|
"inheritedFrom": {
|
|
732
|
-
"name": "
|
|
733
|
-
"module": "
|
|
981
|
+
"name": "Buttonsimple",
|
|
982
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
734
983
|
}
|
|
735
984
|
},
|
|
736
985
|
{
|
|
737
|
-
"
|
|
986
|
+
"kind": "field",
|
|
987
|
+
"name": "softDisabled",
|
|
738
988
|
"type": {
|
|
739
|
-
"text": "
|
|
989
|
+
"text": "boolean | undefined"
|
|
740
990
|
},
|
|
741
|
-
"description": "
|
|
742
|
-
"default": "
|
|
743
|
-
"
|
|
991
|
+
"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.",
|
|
992
|
+
"default": "undefined",
|
|
993
|
+
"attribute": "soft-disabled",
|
|
994
|
+
"reflects": true,
|
|
744
995
|
"inheritedFrom": {
|
|
745
|
-
"name": "
|
|
746
|
-
"module": "
|
|
996
|
+
"name": "Buttonsimple",
|
|
997
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
747
998
|
}
|
|
748
999
|
},
|
|
749
1000
|
{
|
|
750
|
-
"
|
|
751
|
-
"
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
"
|
|
755
|
-
"
|
|
1001
|
+
"kind": "field",
|
|
1002
|
+
"name": "role",
|
|
1003
|
+
"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.",
|
|
1004
|
+
"default": "button",
|
|
1005
|
+
"attribute": "role",
|
|
1006
|
+
"reflects": true,
|
|
756
1007
|
"inheritedFrom": {
|
|
757
|
-
"name": "
|
|
758
|
-
"module": "
|
|
1008
|
+
"name": "Buttonsimple",
|
|
1009
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
759
1010
|
}
|
|
760
1011
|
},
|
|
761
1012
|
{
|
|
762
|
-
"
|
|
1013
|
+
"kind": "field",
|
|
1014
|
+
"name": "ariaStateKey",
|
|
763
1015
|
"type": {
|
|
764
|
-
"text": "
|
|
1016
|
+
"text": "string | undefined"
|
|
765
1017
|
},
|
|
766
|
-
"
|
|
767
|
-
"
|
|
768
|
-
"
|
|
1018
|
+
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
|
1019
|
+
"default": "'aria-pressed' (when)",
|
|
1020
|
+
"attribute": "ariaStateKey",
|
|
1021
|
+
"reflects": true,
|
|
769
1022
|
"inheritedFrom": {
|
|
770
|
-
"name": "
|
|
771
|
-
"module": "
|
|
1023
|
+
"name": "Buttonsimple",
|
|
1024
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
772
1025
|
}
|
|
773
1026
|
},
|
|
774
1027
|
{
|
|
775
|
-
"
|
|
1028
|
+
"kind": "field",
|
|
1029
|
+
"name": "type",
|
|
776
1030
|
"type": {
|
|
777
|
-
"text": "
|
|
1031
|
+
"text": "ButtonType"
|
|
778
1032
|
},
|
|
779
|
-
"description": "
|
|
780
|
-
"
|
|
1033
|
+
"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.",
|
|
1034
|
+
"default": "button",
|
|
1035
|
+
"attribute": "type",
|
|
1036
|
+
"reflects": true,
|
|
781
1037
|
"inheritedFrom": {
|
|
782
|
-
"name": "
|
|
783
|
-
"module": "
|
|
1038
|
+
"name": "Buttonsimple",
|
|
1039
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
784
1040
|
}
|
|
785
|
-
}
|
|
786
|
-
]
|
|
787
|
-
}
|
|
788
|
-
],
|
|
789
|
-
"exports": [
|
|
790
|
-
{
|
|
791
|
-
"kind": "js",
|
|
792
|
-
"name": "default",
|
|
793
|
-
"declaration": {
|
|
794
|
-
"name": "Avatar",
|
|
795
|
-
"module": "components/avatar/avatar.component.js"
|
|
796
|
-
}
|
|
797
|
-
}
|
|
798
|
-
]
|
|
799
|
-
},
|
|
800
|
-
{
|
|
801
|
-
"kind": "javascript-module",
|
|
802
|
-
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
803
|
-
"declarations": [
|
|
804
|
-
{
|
|
805
|
-
"kind": "class",
|
|
806
|
-
"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.",
|
|
807
|
-
"name": "AvatarButton",
|
|
808
|
-
"cssProperties": [
|
|
1041
|
+
},
|
|
809
1042
|
{
|
|
810
|
-
"
|
|
811
|
-
"name": "
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
{
|
|
818
|
-
"description": "Background color of the overlay in active state",
|
|
819
|
-
"name": "--mdc-avatarbutton-overlay-background-color-active"
|
|
820
|
-
}
|
|
821
|
-
],
|
|
822
|
-
"members": [
|
|
823
|
-
{
|
|
824
|
-
"kind": "field",
|
|
825
|
-
"name": "ariaLabel",
|
|
826
|
-
"type": {
|
|
827
|
-
"text": "string | null"
|
|
828
|
-
},
|
|
829
|
-
"default": "null",
|
|
830
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
831
|
-
"attribute": "aria-label"
|
|
832
|
-
},
|
|
833
|
-
{
|
|
834
|
-
"kind": "method",
|
|
835
|
-
"name": "setSize",
|
|
836
|
-
"privacy": "private",
|
|
837
|
-
"parameters": [
|
|
838
|
-
{
|
|
839
|
-
"name": "size",
|
|
840
|
-
"type": {
|
|
841
|
-
"text": "AvatarSize"
|
|
842
|
-
}
|
|
843
|
-
}
|
|
844
|
-
]
|
|
845
|
-
},
|
|
846
|
-
{
|
|
847
|
-
"kind": "field",
|
|
848
|
-
"name": "src",
|
|
849
|
-
"type": {
|
|
850
|
-
"text": "string | undefined"
|
|
851
|
-
},
|
|
852
|
-
"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.",
|
|
853
|
-
"attribute": "src",
|
|
854
|
-
"inheritedFrom": {
|
|
855
|
-
"name": "AvatarComponentMixin",
|
|
856
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
857
|
-
}
|
|
858
|
-
},
|
|
859
|
-
{
|
|
860
|
-
"kind": "field",
|
|
861
|
-
"name": "initials",
|
|
862
|
-
"type": {
|
|
863
|
-
"text": "string | undefined"
|
|
864
|
-
},
|
|
865
|
-
"description": "The initials to be displayed for the avatar.",
|
|
866
|
-
"attribute": "initials",
|
|
867
|
-
"inheritedFrom": {
|
|
868
|
-
"name": "AvatarComponentMixin",
|
|
869
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
870
|
-
}
|
|
871
|
-
},
|
|
872
|
-
{
|
|
873
|
-
"kind": "field",
|
|
874
|
-
"name": "presence",
|
|
875
|
-
"type": {
|
|
876
|
-
"text": "PresenceType | undefined"
|
|
877
|
-
},
|
|
878
|
-
"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`",
|
|
879
|
-
"attribute": "presence",
|
|
880
|
-
"inheritedFrom": {
|
|
881
|
-
"name": "AvatarComponentMixin",
|
|
882
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
883
|
-
}
|
|
884
|
-
},
|
|
885
|
-
{
|
|
886
|
-
"kind": "field",
|
|
887
|
-
"name": "size",
|
|
888
|
-
"type": {
|
|
889
|
-
"text": "ButtonSize"
|
|
890
|
-
},
|
|
891
|
-
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
892
|
-
"default": "32",
|
|
893
|
-
"attribute": "size",
|
|
894
|
-
"reflects": true,
|
|
895
|
-
"inheritedFrom": {
|
|
896
|
-
"name": "Buttonsimple",
|
|
897
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
898
|
-
}
|
|
899
|
-
},
|
|
900
|
-
{
|
|
901
|
-
"kind": "field",
|
|
902
|
-
"name": "counter",
|
|
903
|
-
"type": {
|
|
904
|
-
"text": "number | undefined"
|
|
905
|
-
},
|
|
906
|
-
"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`.",
|
|
907
|
-
"attribute": "counter",
|
|
908
|
-
"inheritedFrom": {
|
|
909
|
-
"name": "AvatarComponentMixin",
|
|
910
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
911
|
-
}
|
|
912
|
-
},
|
|
913
|
-
{
|
|
914
|
-
"kind": "field",
|
|
915
|
-
"name": "isTyping",
|
|
916
|
-
"type": {
|
|
917
|
-
"text": "boolean"
|
|
918
|
-
},
|
|
919
|
-
"default": "false",
|
|
920
|
-
"description": "Represents the typing indicator when the user is typing.",
|
|
921
|
-
"attribute": "is-typing",
|
|
922
|
-
"inheritedFrom": {
|
|
923
|
-
"name": "AvatarComponentMixin",
|
|
924
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
925
|
-
}
|
|
926
|
-
},
|
|
927
|
-
{
|
|
928
|
-
"kind": "field",
|
|
929
|
-
"name": "iconName",
|
|
930
|
-
"type": {
|
|
931
|
-
"text": "IconNames | undefined"
|
|
932
|
-
},
|
|
933
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
934
|
-
"attribute": "icon-name",
|
|
935
|
-
"inheritedFrom": {
|
|
936
|
-
"name": "IconNameMixin",
|
|
937
|
-
"module": "utils/mixins/IconNameMixin.js"
|
|
938
|
-
}
|
|
939
|
-
},
|
|
940
|
-
{
|
|
941
|
-
"kind": "field",
|
|
942
|
-
"name": "tabIndex",
|
|
943
|
-
"type": {
|
|
944
|
-
"text": "number"
|
|
945
|
-
},
|
|
946
|
-
"default": "0",
|
|
947
|
-
"description": "This property specifies the tab order of the element.",
|
|
948
|
-
"attribute": "tabIndex",
|
|
949
|
-
"reflects": true,
|
|
950
|
-
"inheritedFrom": {
|
|
951
|
-
"name": "TabIndexMixin",
|
|
952
|
-
"module": "utils/mixins/TabIndexMixin.js"
|
|
953
|
-
}
|
|
954
|
-
},
|
|
955
|
-
{
|
|
956
|
-
"kind": "field",
|
|
957
|
-
"name": "disabled",
|
|
958
|
-
"type": {
|
|
959
|
-
"text": "boolean | undefined"
|
|
960
|
-
},
|
|
961
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
962
|
-
"default": "undefined",
|
|
963
|
-
"attribute": "disabled",
|
|
964
|
-
"reflects": true,
|
|
965
|
-
"inheritedFrom": {
|
|
966
|
-
"name": "DisabledMixin",
|
|
967
|
-
"module": "utils/mixins/DisabledMixin.js"
|
|
968
|
-
}
|
|
969
|
-
},
|
|
970
|
-
{
|
|
971
|
-
"kind": "field",
|
|
972
|
-
"name": "active",
|
|
973
|
-
"type": {
|
|
974
|
-
"text": "boolean | undefined"
|
|
975
|
-
},
|
|
976
|
-
"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.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
|
977
|
-
"default": "undefined",
|
|
978
|
-
"attribute": "active",
|
|
979
|
-
"reflects": true,
|
|
980
|
-
"inheritedFrom": {
|
|
981
|
-
"name": "Buttonsimple",
|
|
982
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
983
|
-
}
|
|
984
|
-
},
|
|
985
|
-
{
|
|
986
|
-
"kind": "field",
|
|
987
|
-
"name": "softDisabled",
|
|
988
|
-
"type": {
|
|
989
|
-
"text": "boolean | undefined"
|
|
990
|
-
},
|
|
991
|
-
"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.",
|
|
992
|
-
"default": "undefined",
|
|
993
|
-
"attribute": "soft-disabled",
|
|
994
|
-
"reflects": true,
|
|
995
|
-
"inheritedFrom": {
|
|
996
|
-
"name": "Buttonsimple",
|
|
997
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
998
|
-
}
|
|
999
|
-
},
|
|
1000
|
-
{
|
|
1001
|
-
"kind": "field",
|
|
1002
|
-
"name": "role",
|
|
1003
|
-
"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.",
|
|
1004
|
-
"default": "button",
|
|
1005
|
-
"attribute": "role",
|
|
1006
|
-
"reflects": true,
|
|
1007
|
-
"inheritedFrom": {
|
|
1008
|
-
"name": "Buttonsimple",
|
|
1009
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
1010
|
-
}
|
|
1011
|
-
},
|
|
1012
|
-
{
|
|
1013
|
-
"kind": "field",
|
|
1014
|
-
"name": "ariaStateKey",
|
|
1015
|
-
"type": {
|
|
1016
|
-
"text": "string | undefined"
|
|
1017
|
-
},
|
|
1018
|
-
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
|
1019
|
-
"default": "'aria-pressed' (when)",
|
|
1020
|
-
"attribute": "ariaStateKey",
|
|
1021
|
-
"reflects": true,
|
|
1022
|
-
"inheritedFrom": {
|
|
1023
|
-
"name": "Buttonsimple",
|
|
1024
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
1025
|
-
}
|
|
1026
|
-
},
|
|
1027
|
-
{
|
|
1028
|
-
"kind": "field",
|
|
1029
|
-
"name": "type",
|
|
1030
|
-
"type": {
|
|
1031
|
-
"text": "ButtonType"
|
|
1032
|
-
},
|
|
1033
|
-
"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.",
|
|
1034
|
-
"default": "button",
|
|
1035
|
-
"attribute": "type",
|
|
1036
|
-
"reflects": true,
|
|
1037
|
-
"inheritedFrom": {
|
|
1038
|
-
"name": "Buttonsimple",
|
|
1039
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
1040
|
-
}
|
|
1041
|
-
},
|
|
1042
|
-
{
|
|
1043
|
-
"kind": "method",
|
|
1044
|
-
"name": "executeAction",
|
|
1045
|
-
"privacy": "protected",
|
|
1046
|
-
"inheritedFrom": {
|
|
1047
|
-
"name": "Buttonsimple",
|
|
1048
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
1049
|
-
}
|
|
1043
|
+
"kind": "method",
|
|
1044
|
+
"name": "executeAction",
|
|
1045
|
+
"privacy": "protected",
|
|
1046
|
+
"inheritedFrom": {
|
|
1047
|
+
"name": "Buttonsimple",
|
|
1048
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
1049
|
+
}
|
|
1050
1050
|
},
|
|
1051
1051
|
{
|
|
1052
1052
|
"kind": "method",
|
|
@@ -2600,22 +2600,22 @@
|
|
|
2600
2600
|
},
|
|
2601
2601
|
{
|
|
2602
2602
|
"kind": "javascript-module",
|
|
2603
|
-
"path": "components/
|
|
2603
|
+
"path": "components/buttonlink/buttonlink.component.js",
|
|
2604
2604
|
"declarations": [
|
|
2605
2605
|
{
|
|
2606
2606
|
"kind": "class",
|
|
2607
|
-
"description": "`mdc-
|
|
2608
|
-
"name": "
|
|
2607
|
+
"description": "`mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\nfeatures of `mdc-button`. This includes support for variants, sizing, and optional\nprefix and postfix icons via slots.\n\n### Features:\n- Behaves like an link while visually resembling a button.\n- Supports slots for `prefix-icon` and `postfix-icon`.\n- Customizable size, color, and variant through attributes.\n- Inherits accessibility and keyboard interaction support from `mdc-linksimple`.",
|
|
2608
|
+
"name": "ButtonLink",
|
|
2609
2609
|
"members": [
|
|
2610
2610
|
{
|
|
2611
2611
|
"kind": "field",
|
|
2612
|
-
"name": "
|
|
2612
|
+
"name": "size",
|
|
2613
2613
|
"type": {
|
|
2614
|
-
"text": "
|
|
2614
|
+
"text": "PillButtonSize | IconButtonSize"
|
|
2615
2615
|
},
|
|
2616
|
-
"description": "
|
|
2617
|
-
"default": "
|
|
2618
|
-
"attribute": "
|
|
2616
|
+
"description": "ButtonLink sizing is based on the buttonlink type.\n - **Pill buttonlink**: 40, 32, 28, 24.\n - **Icon buttonlink**: 64, 52, 40, 32, 28, 24.\n - Tertiary icon buttonlink can also be 20.",
|
|
2617
|
+
"default": "32",
|
|
2618
|
+
"attribute": "size",
|
|
2619
2619
|
"reflects": true
|
|
2620
2620
|
},
|
|
2621
2621
|
{
|
|
@@ -2624,165 +2624,173 @@
|
|
|
2624
2624
|
"type": {
|
|
2625
2625
|
"text": "boolean | undefined"
|
|
2626
2626
|
},
|
|
2627
|
-
"description": "Indicates whether the
|
|
2627
|
+
"description": "Indicates whether the buttonlink is soft disabled.\nWhen set to `true`, the buttonlink 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 buttonlink behaves like a disabled buttonlink, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
|
|
2628
2628
|
"default": "undefined",
|
|
2629
2629
|
"attribute": "soft-disabled",
|
|
2630
2630
|
"reflects": true
|
|
2631
2631
|
},
|
|
2632
|
+
{
|
|
2633
|
+
"kind": "method",
|
|
2634
|
+
"name": "setSoftDisabled",
|
|
2635
|
+
"privacy": "private",
|
|
2636
|
+
"parameters": [
|
|
2637
|
+
{
|
|
2638
|
+
"name": "element",
|
|
2639
|
+
"type": {
|
|
2640
|
+
"text": "HTMLElement"
|
|
2641
|
+
},
|
|
2642
|
+
"description": "The buttonlink element."
|
|
2643
|
+
},
|
|
2644
|
+
{
|
|
2645
|
+
"name": "softDisabled",
|
|
2646
|
+
"optional": true,
|
|
2647
|
+
"type": {
|
|
2648
|
+
"text": "boolean"
|
|
2649
|
+
},
|
|
2650
|
+
"description": "The soft-disabled state."
|
|
2651
|
+
}
|
|
2652
|
+
],
|
|
2653
|
+
"description": "Sets the soft-disabled attribute for the buttonlink.\nWhen soft-disabled, the buttonlink looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute."
|
|
2654
|
+
},
|
|
2632
2655
|
{
|
|
2633
2656
|
"kind": "field",
|
|
2634
|
-
"name": "
|
|
2657
|
+
"name": "prefixIcon",
|
|
2635
2658
|
"type": {
|
|
2636
|
-
"text": "
|
|
2659
|
+
"text": "IconNames | undefined"
|
|
2637
2660
|
},
|
|
2638
|
-
"description": "
|
|
2639
|
-
"
|
|
2640
|
-
"
|
|
2641
|
-
"
|
|
2661
|
+
"description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
|
|
2662
|
+
"attribute": "prefix-icon",
|
|
2663
|
+
"reflects": true,
|
|
2664
|
+
"inheritedFrom": {
|
|
2665
|
+
"name": "ButtonComponentMixin",
|
|
2666
|
+
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
2667
|
+
}
|
|
2642
2668
|
},
|
|
2643
2669
|
{
|
|
2644
2670
|
"kind": "field",
|
|
2645
|
-
"name": "
|
|
2646
|
-
"
|
|
2647
|
-
|
|
2648
|
-
|
|
2649
|
-
"
|
|
2671
|
+
"name": "postfixIcon",
|
|
2672
|
+
"type": {
|
|
2673
|
+
"text": "IconNames | undefined"
|
|
2674
|
+
},
|
|
2675
|
+
"description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
|
|
2676
|
+
"attribute": "postfix-icon",
|
|
2677
|
+
"reflects": true,
|
|
2678
|
+
"inheritedFrom": {
|
|
2679
|
+
"name": "ButtonComponentMixin",
|
|
2680
|
+
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
2681
|
+
}
|
|
2650
2682
|
},
|
|
2651
2683
|
{
|
|
2652
2684
|
"kind": "field",
|
|
2653
|
-
"name": "
|
|
2685
|
+
"name": "variant",
|
|
2654
2686
|
"type": {
|
|
2655
|
-
"text": "
|
|
2687
|
+
"text": "ButtonVariant"
|
|
2656
2688
|
},
|
|
2657
|
-
"description": "
|
|
2658
|
-
"default": "
|
|
2659
|
-
"attribute": "
|
|
2660
|
-
"
|
|
2689
|
+
"description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
|
|
2690
|
+
"default": "primary",
|
|
2691
|
+
"attribute": "variant",
|
|
2692
|
+
"inheritedFrom": {
|
|
2693
|
+
"name": "ButtonComponentMixin",
|
|
2694
|
+
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
2695
|
+
}
|
|
2661
2696
|
},
|
|
2662
2697
|
{
|
|
2663
2698
|
"kind": "field",
|
|
2664
|
-
"name": "
|
|
2699
|
+
"name": "color",
|
|
2665
2700
|
"type": {
|
|
2666
|
-
"text": "
|
|
2701
|
+
"text": "ButtonColor"
|
|
2667
2702
|
},
|
|
2668
|
-
"description": "
|
|
2669
|
-
"default": "
|
|
2670
|
-
"attribute": "
|
|
2671
|
-
"
|
|
2672
|
-
|
|
2673
|
-
|
|
2674
|
-
|
|
2675
|
-
"name": "executeAction",
|
|
2676
|
-
"privacy": "protected"
|
|
2703
|
+
"description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
|
|
2704
|
+
"default": "default",
|
|
2705
|
+
"attribute": "color",
|
|
2706
|
+
"inheritedFrom": {
|
|
2707
|
+
"name": "ButtonComponentMixin",
|
|
2708
|
+
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
2709
|
+
}
|
|
2677
2710
|
},
|
|
2678
2711
|
{
|
|
2679
2712
|
"kind": "method",
|
|
2680
|
-
"name": "
|
|
2681
|
-
"privacy": "protected",
|
|
2713
|
+
"name": "setVariant",
|
|
2682
2714
|
"parameters": [
|
|
2683
2715
|
{
|
|
2684
|
-
"name": "
|
|
2685
|
-
"type": {
|
|
2686
|
-
"text": "HTMLElement"
|
|
2687
|
-
},
|
|
2688
|
-
"description": "The button element"
|
|
2689
|
-
},
|
|
2690
|
-
{
|
|
2691
|
-
"name": "active",
|
|
2692
|
-
"optional": true,
|
|
2716
|
+
"name": "variant",
|
|
2693
2717
|
"type": {
|
|
2694
|
-
"text": "
|
|
2718
|
+
"text": "ButtonVariant"
|
|
2695
2719
|
},
|
|
2696
|
-
"description": "The
|
|
2720
|
+
"description": "The variant to set."
|
|
2697
2721
|
}
|
|
2698
2722
|
],
|
|
2699
|
-
"description": "Sets the
|
|
2723
|
+
"description": "Sets the variant attribute for the button component.\nIf the provided variant is not included in the BUTTON_VARIANTS,\nit defaults to the value specified in DEFAULTS.VARIANT.",
|
|
2724
|
+
"inheritedFrom": {
|
|
2725
|
+
"name": "ButtonComponentMixin",
|
|
2726
|
+
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
2727
|
+
}
|
|
2700
2728
|
},
|
|
2701
2729
|
{
|
|
2702
2730
|
"kind": "method",
|
|
2703
|
-
"name": "
|
|
2704
|
-
"privacy": "private",
|
|
2731
|
+
"name": "setColor",
|
|
2705
2732
|
"parameters": [
|
|
2706
2733
|
{
|
|
2707
|
-
"name": "
|
|
2708
|
-
"type": {
|
|
2709
|
-
"text": "HTMLElement"
|
|
2710
|
-
},
|
|
2711
|
-
"description": "The button element."
|
|
2712
|
-
},
|
|
2713
|
-
{
|
|
2714
|
-
"name": "softDisabled",
|
|
2715
|
-
"optional": true,
|
|
2734
|
+
"name": "color",
|
|
2716
2735
|
"type": {
|
|
2717
|
-
"text": "
|
|
2736
|
+
"text": "ButtonColor"
|
|
2718
2737
|
},
|
|
2719
|
-
"description": "The
|
|
2738
|
+
"description": "The color to set."
|
|
2720
2739
|
}
|
|
2721
2740
|
],
|
|
2722
|
-
"description": "Sets the
|
|
2741
|
+
"description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or for tertiary button.",
|
|
2742
|
+
"inheritedFrom": {
|
|
2743
|
+
"name": "ButtonComponentMixin",
|
|
2744
|
+
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
2745
|
+
}
|
|
2723
2746
|
},
|
|
2724
2747
|
{
|
|
2725
2748
|
"kind": "method",
|
|
2726
|
-
"name": "
|
|
2727
|
-
"privacy": "private",
|
|
2749
|
+
"name": "setSize",
|
|
2728
2750
|
"parameters": [
|
|
2729
2751
|
{
|
|
2730
|
-
"name": "
|
|
2731
|
-
"type": {
|
|
2732
|
-
"text": "HTMLElement"
|
|
2733
|
-
},
|
|
2734
|
-
"description": "The button element."
|
|
2735
|
-
},
|
|
2736
|
-
{
|
|
2737
|
-
"name": "disabled",
|
|
2752
|
+
"name": "size",
|
|
2738
2753
|
"type": {
|
|
2739
|
-
"text": "
|
|
2754
|
+
"text": "PillButtonSize | IconButtonSize"
|
|
2740
2755
|
},
|
|
2741
|
-
"description": "The
|
|
2756
|
+
"description": "The size to set."
|
|
2742
2757
|
}
|
|
2743
2758
|
],
|
|
2744
|
-
"description": "Sets the
|
|
2745
|
-
|
|
2746
|
-
|
|
2747
|
-
|
|
2748
|
-
|
|
2749
|
-
"privacy": "private"
|
|
2750
|
-
},
|
|
2751
|
-
{
|
|
2752
|
-
"kind": "method",
|
|
2753
|
-
"name": "handleBlur",
|
|
2754
|
-
"privacy": "private",
|
|
2755
|
-
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed."
|
|
2759
|
+
"description": "Sets the size attribute for the button component.\nValidates the size based on the button type (icon, pill, or tertiary).\nDefaults to DEFAULTS.SIZE if invalid.",
|
|
2760
|
+
"inheritedFrom": {
|
|
2761
|
+
"name": "ButtonComponentMixin",
|
|
2762
|
+
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
2763
|
+
}
|
|
2756
2764
|
},
|
|
2757
2765
|
{
|
|
2758
2766
|
"kind": "method",
|
|
2759
|
-
"name": "
|
|
2760
|
-
"
|
|
2767
|
+
"name": "inferButtonType",
|
|
2768
|
+
"description": "Infers the type of button based on the presence of slot and/or prefix and postfix icons.",
|
|
2761
2769
|
"parameters": [
|
|
2762
2770
|
{
|
|
2763
|
-
"
|
|
2764
|
-
"
|
|
2765
|
-
"text": "KeyboardEvent"
|
|
2766
|
-
},
|
|
2767
|
-
"description": "The keyboard event."
|
|
2771
|
+
"description": "default slot of button",
|
|
2772
|
+
"name": "slot"
|
|
2768
2773
|
}
|
|
2769
2774
|
],
|
|
2770
|
-
"
|
|
2775
|
+
"inheritedFrom": {
|
|
2776
|
+
"name": "ButtonComponentMixin",
|
|
2777
|
+
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
2778
|
+
}
|
|
2771
2779
|
},
|
|
2772
2780
|
{
|
|
2773
|
-
"kind": "
|
|
2774
|
-
"name": "
|
|
2775
|
-
"
|
|
2776
|
-
|
|
2777
|
-
|
|
2778
|
-
|
|
2779
|
-
|
|
2780
|
-
|
|
2781
|
-
|
|
2782
|
-
|
|
2783
|
-
|
|
2784
|
-
|
|
2785
|
-
|
|
2781
|
+
"kind": "field",
|
|
2782
|
+
"name": "disabled",
|
|
2783
|
+
"type": {
|
|
2784
|
+
"text": "boolean | undefined"
|
|
2785
|
+
},
|
|
2786
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
2787
|
+
"default": "undefined",
|
|
2788
|
+
"attribute": "disabled",
|
|
2789
|
+
"reflects": true,
|
|
2790
|
+
"inheritedFrom": {
|
|
2791
|
+
"name": "DisabledMixin",
|
|
2792
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
2793
|
+
}
|
|
2786
2794
|
},
|
|
2787
2795
|
{
|
|
2788
2796
|
"kind": "field",
|
|
@@ -2801,748 +2809,740 @@
|
|
|
2801
2809
|
},
|
|
2802
2810
|
{
|
|
2803
2811
|
"kind": "field",
|
|
2804
|
-
"name": "
|
|
2812
|
+
"name": "inline",
|
|
2805
2813
|
"type": {
|
|
2806
|
-
"text": "boolean
|
|
2814
|
+
"text": "boolean"
|
|
2807
2815
|
},
|
|
2808
|
-
"description": "
|
|
2809
|
-
"default": "
|
|
2810
|
-
"attribute": "
|
|
2816
|
+
"description": "The link can be inline or standalone.",
|
|
2817
|
+
"default": "false",
|
|
2818
|
+
"attribute": "inline",
|
|
2811
2819
|
"reflects": true,
|
|
2812
2820
|
"inheritedFrom": {
|
|
2813
|
-
"name": "
|
|
2814
|
-
"module": "
|
|
2821
|
+
"name": "Linksimple",
|
|
2822
|
+
"module": "components/linksimple/linksimple.component.js"
|
|
2815
2823
|
}
|
|
2816
|
-
}
|
|
2817
|
-
],
|
|
2818
|
-
"events": [
|
|
2819
|
-
{
|
|
2820
|
-
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
|
2821
|
-
"name": "click",
|
|
2822
|
-
"reactName": "onClick"
|
|
2823
|
-
},
|
|
2824
|
-
{
|
|
2825
|
-
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
|
|
2826
|
-
"name": "keydown",
|
|
2827
|
-
"reactName": "onKeyDown"
|
|
2828
|
-
},
|
|
2829
|
-
{
|
|
2830
|
-
"description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
|
|
2831
|
-
"name": "keyup",
|
|
2832
|
-
"reactName": "onKeyUp"
|
|
2833
2824
|
},
|
|
2834
2825
|
{
|
|
2835
|
-
"
|
|
2836
|
-
"name": "
|
|
2837
|
-
"reactName": "onFocus"
|
|
2838
|
-
}
|
|
2839
|
-
],
|
|
2840
|
-
"attributes": [
|
|
2841
|
-
{
|
|
2842
|
-
"name": "active",
|
|
2826
|
+
"kind": "field",
|
|
2827
|
+
"name": "inverted",
|
|
2843
2828
|
"type": {
|
|
2844
|
-
"text": "boolean
|
|
2829
|
+
"text": "boolean"
|
|
2845
2830
|
},
|
|
2846
|
-
"description": "The
|
|
2847
|
-
"default": "
|
|
2848
|
-
"
|
|
2831
|
+
"description": "The link color can be inverted by setting the inverted attribute to true.",
|
|
2832
|
+
"default": "false",
|
|
2833
|
+
"attribute": "inverted",
|
|
2834
|
+
"reflects": true,
|
|
2835
|
+
"inheritedFrom": {
|
|
2836
|
+
"name": "Linksimple",
|
|
2837
|
+
"module": "components/linksimple/linksimple.component.js"
|
|
2838
|
+
}
|
|
2849
2839
|
},
|
|
2850
2840
|
{
|
|
2851
|
-
"
|
|
2841
|
+
"kind": "field",
|
|
2842
|
+
"name": "href",
|
|
2852
2843
|
"type": {
|
|
2853
|
-
"text": "
|
|
2844
|
+
"text": "string"
|
|
2854
2845
|
},
|
|
2855
|
-
"
|
|
2856
|
-
"
|
|
2857
|
-
"
|
|
2846
|
+
"default": "'#'",
|
|
2847
|
+
"description": "Href for navigation. The URL that the hyperlink points to",
|
|
2848
|
+
"attribute": "href",
|
|
2849
|
+
"reflects": true,
|
|
2850
|
+
"inheritedFrom": {
|
|
2851
|
+
"name": "Linksimple",
|
|
2852
|
+
"module": "components/linksimple/linksimple.component.js"
|
|
2853
|
+
}
|
|
2858
2854
|
},
|
|
2859
2855
|
{
|
|
2860
|
-
"
|
|
2856
|
+
"kind": "field",
|
|
2857
|
+
"name": "target",
|
|
2861
2858
|
"type": {
|
|
2862
|
-
"text": "
|
|
2859
|
+
"text": "string"
|
|
2863
2860
|
},
|
|
2864
|
-
"
|
|
2865
|
-
"
|
|
2866
|
-
"
|
|
2867
|
-
|
|
2868
|
-
|
|
2869
|
-
|
|
2870
|
-
|
|
2871
|
-
|
|
2872
|
-
"fieldName": "role"
|
|
2861
|
+
"default": "'_self'",
|
|
2862
|
+
"description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
|
|
2863
|
+
"attribute": "target",
|
|
2864
|
+
"reflects": true,
|
|
2865
|
+
"inheritedFrom": {
|
|
2866
|
+
"name": "Linksimple",
|
|
2867
|
+
"module": "components/linksimple/linksimple.component.js"
|
|
2868
|
+
}
|
|
2873
2869
|
},
|
|
2874
2870
|
{
|
|
2875
|
-
"
|
|
2871
|
+
"kind": "field",
|
|
2872
|
+
"name": "rel",
|
|
2876
2873
|
"type": {
|
|
2877
2874
|
"text": "string | undefined"
|
|
2878
2875
|
},
|
|
2879
|
-
"description": "
|
|
2880
|
-
"
|
|
2881
|
-
"
|
|
2882
|
-
|
|
2883
|
-
|
|
2884
|
-
|
|
2885
|
-
|
|
2886
|
-
"text": "ButtonType"
|
|
2887
|
-
},
|
|
2888
|
-
"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.",
|
|
2889
|
-
"default": "button",
|
|
2890
|
-
"fieldName": "type"
|
|
2876
|
+
"description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
|
|
2877
|
+
"attribute": "rel",
|
|
2878
|
+
"reflects": true,
|
|
2879
|
+
"inheritedFrom": {
|
|
2880
|
+
"name": "Linksimple",
|
|
2881
|
+
"module": "components/linksimple/linksimple.component.js"
|
|
2882
|
+
}
|
|
2891
2883
|
},
|
|
2892
2884
|
{
|
|
2893
|
-
"
|
|
2894
|
-
"
|
|
2895
|
-
|
|
2896
|
-
},
|
|
2897
|
-
"default": "0",
|
|
2898
|
-
"description": "This property specifies the tab order of the element.",
|
|
2899
|
-
"fieldName": "tabIndex",
|
|
2885
|
+
"kind": "field",
|
|
2886
|
+
"name": "handleNavigation",
|
|
2887
|
+
"privacy": "private",
|
|
2900
2888
|
"inheritedFrom": {
|
|
2901
|
-
"name": "
|
|
2902
|
-
"module": "
|
|
2889
|
+
"name": "Linksimple",
|
|
2890
|
+
"module": "components/linksimple/linksimple.component.js"
|
|
2903
2891
|
}
|
|
2904
2892
|
},
|
|
2905
2893
|
{
|
|
2906
|
-
"
|
|
2907
|
-
"
|
|
2908
|
-
|
|
2909
|
-
|
|
2910
|
-
|
|
2911
|
-
|
|
2912
|
-
|
|
2894
|
+
"kind": "method",
|
|
2895
|
+
"name": "setDisabled",
|
|
2896
|
+
"privacy": "private",
|
|
2897
|
+
"parameters": [
|
|
2898
|
+
{
|
|
2899
|
+
"name": "disabled",
|
|
2900
|
+
"type": {
|
|
2901
|
+
"text": "boolean"
|
|
2902
|
+
},
|
|
2903
|
+
"description": "Whether the element should be disabled"
|
|
2904
|
+
}
|
|
2905
|
+
],
|
|
2906
|
+
"description": "Sets or removes `aria-disabled` and updates `tabIndex` to reflect\nthe disabled state. When disabled, the element becomes unfocusable;\nwhen enabled, the previous `tabIndex` is restored.",
|
|
2913
2907
|
"inheritedFrom": {
|
|
2914
|
-
"name": "
|
|
2915
|
-
"module": "
|
|
2908
|
+
"name": "Linksimple",
|
|
2909
|
+
"module": "components/linksimple/linksimple.component.js"
|
|
2916
2910
|
}
|
|
2917
2911
|
}
|
|
2918
2912
|
],
|
|
2919
|
-
"
|
|
2913
|
+
"events": [
|
|
2920
2914
|
{
|
|
2921
|
-
"
|
|
2922
|
-
"
|
|
2915
|
+
"description": "(React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.",
|
|
2916
|
+
"name": "click",
|
|
2917
|
+
"reactName": "onClick",
|
|
2918
|
+
"inheritedFrom": {
|
|
2919
|
+
"name": "Linksimple",
|
|
2920
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2921
|
+
}
|
|
2923
2922
|
},
|
|
2924
2923
|
{
|
|
2925
|
-
"
|
|
2926
|
-
"
|
|
2924
|
+
"description": "(React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.",
|
|
2925
|
+
"name": "keydown",
|
|
2926
|
+
"reactName": "onKeyDown",
|
|
2927
|
+
"inheritedFrom": {
|
|
2928
|
+
"name": "Linksimple",
|
|
2929
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2930
|
+
}
|
|
2931
|
+
},
|
|
2932
|
+
{
|
|
2933
|
+
"description": "(React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.",
|
|
2934
|
+
"name": "focus",
|
|
2935
|
+
"reactName": "onFocus",
|
|
2936
|
+
"inheritedFrom": {
|
|
2937
|
+
"name": "Linksimple",
|
|
2938
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2939
|
+
}
|
|
2940
|
+
},
|
|
2941
|
+
{
|
|
2942
|
+
"description": "(React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.",
|
|
2943
|
+
"name": "blur",
|
|
2944
|
+
"reactName": "onBlur",
|
|
2945
|
+
"inheritedFrom": {
|
|
2946
|
+
"name": "Linksimple",
|
|
2947
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2948
|
+
}
|
|
2927
2949
|
}
|
|
2928
2950
|
],
|
|
2929
|
-
"
|
|
2930
|
-
"name": "Component",
|
|
2931
|
-
"module": "/src/models"
|
|
2932
|
-
},
|
|
2933
|
-
"tagName": "mdc-buttonsimple",
|
|
2934
|
-
"jsDoc": "/**\n * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.\n * It is used as an internal component and is not intended to be used directly by consumers.\n * Consumers should use the `mdc-button` component instead.\n *\n * @event click - (React: onClick) This event is dispatched when the button is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.\n * @event focus - (React: onFocus) This event is dispatched when the button receives focus.\n *\n * @tagname mdc-buttonsimple\n */",
|
|
2935
|
-
"customElement": true
|
|
2936
|
-
}
|
|
2937
|
-
],
|
|
2938
|
-
"exports": [
|
|
2939
|
-
{
|
|
2940
|
-
"kind": "js",
|
|
2941
|
-
"name": "default",
|
|
2942
|
-
"declaration": {
|
|
2943
|
-
"name": "Buttonsimple",
|
|
2944
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2945
|
-
}
|
|
2946
|
-
}
|
|
2947
|
-
]
|
|
2948
|
-
},
|
|
2949
|
-
{
|
|
2950
|
-
"kind": "javascript-module",
|
|
2951
|
-
"path": "components/buttonlink/buttonlink.component.js",
|
|
2952
|
-
"declarations": [
|
|
2953
|
-
{
|
|
2954
|
-
"kind": "class",
|
|
2955
|
-
"description": "`mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\nfeatures of `mdc-button`. This includes support for variants, sizing, and optional\nprefix and postfix icons via slots.\n\n### Features:\n- Behaves like an link while visually resembling a button.\n- Supports slots for `prefix-icon` and `postfix-icon`.\n- Customizable size, color, and variant through attributes.\n- Inherits accessibility and keyboard interaction support from `mdc-linksimple`.",
|
|
2956
|
-
"name": "ButtonLink",
|
|
2957
|
-
"members": [
|
|
2951
|
+
"attributes": [
|
|
2958
2952
|
{
|
|
2959
|
-
"kind": "field",
|
|
2960
2953
|
"name": "size",
|
|
2961
2954
|
"type": {
|
|
2962
2955
|
"text": "PillButtonSize | IconButtonSize"
|
|
2963
2956
|
},
|
|
2964
2957
|
"description": "ButtonLink sizing is based on the buttonlink type.\n - **Pill buttonlink**: 40, 32, 28, 24.\n - **Icon buttonlink**: 64, 52, 40, 32, 28, 24.\n - Tertiary icon buttonlink can also be 20.",
|
|
2965
2958
|
"default": "32",
|
|
2966
|
-
"
|
|
2967
|
-
"reflects": true
|
|
2959
|
+
"fieldName": "size"
|
|
2968
2960
|
},
|
|
2969
2961
|
{
|
|
2970
|
-
"
|
|
2971
|
-
"name": "softDisabled",
|
|
2962
|
+
"name": "soft-disabled",
|
|
2972
2963
|
"type": {
|
|
2973
2964
|
"text": "boolean | undefined"
|
|
2974
2965
|
},
|
|
2975
2966
|
"description": "Indicates whether the buttonlink is soft disabled.\nWhen set to `true`, the buttonlink 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 buttonlink behaves like a disabled buttonlink, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
|
|
2976
2967
|
"default": "undefined",
|
|
2977
|
-
"
|
|
2978
|
-
"reflects": true
|
|
2979
|
-
},
|
|
2980
|
-
{
|
|
2981
|
-
"kind": "method",
|
|
2982
|
-
"name": "setSoftDisabled",
|
|
2983
|
-
"privacy": "private",
|
|
2984
|
-
"parameters": [
|
|
2985
|
-
{
|
|
2986
|
-
"name": "element",
|
|
2987
|
-
"type": {
|
|
2988
|
-
"text": "HTMLElement"
|
|
2989
|
-
},
|
|
2990
|
-
"description": "The buttonlink element."
|
|
2991
|
-
},
|
|
2992
|
-
{
|
|
2993
|
-
"name": "softDisabled",
|
|
2994
|
-
"optional": true,
|
|
2995
|
-
"type": {
|
|
2996
|
-
"text": "boolean"
|
|
2997
|
-
},
|
|
2998
|
-
"description": "The soft-disabled state."
|
|
2999
|
-
}
|
|
3000
|
-
],
|
|
3001
|
-
"description": "Sets the soft-disabled attribute for the buttonlink.\nWhen soft-disabled, the buttonlink looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute."
|
|
2968
|
+
"fieldName": "softDisabled"
|
|
3002
2969
|
},
|
|
3003
2970
|
{
|
|
3004
|
-
"
|
|
3005
|
-
"name": "prefixIcon",
|
|
2971
|
+
"name": "prefix-icon",
|
|
3006
2972
|
"type": {
|
|
3007
2973
|
"text": "IconNames | undefined"
|
|
3008
2974
|
},
|
|
3009
2975
|
"description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
|
|
3010
|
-
"
|
|
3011
|
-
"reflects": true,
|
|
2976
|
+
"fieldName": "prefixIcon",
|
|
3012
2977
|
"inheritedFrom": {
|
|
3013
2978
|
"name": "ButtonComponentMixin",
|
|
3014
|
-
"module": "utils/mixins/ButtonComponentMixin.
|
|
2979
|
+
"module": "src/utils/mixins/ButtonComponentMixin.ts"
|
|
3015
2980
|
}
|
|
3016
2981
|
},
|
|
3017
2982
|
{
|
|
3018
|
-
"
|
|
3019
|
-
"name": "postfixIcon",
|
|
2983
|
+
"name": "postfix-icon",
|
|
3020
2984
|
"type": {
|
|
3021
2985
|
"text": "IconNames | undefined"
|
|
3022
2986
|
},
|
|
3023
2987
|
"description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
|
|
3024
|
-
"
|
|
3025
|
-
"reflects": true,
|
|
2988
|
+
"fieldName": "postfixIcon",
|
|
3026
2989
|
"inheritedFrom": {
|
|
3027
2990
|
"name": "ButtonComponentMixin",
|
|
3028
|
-
"module": "utils/mixins/ButtonComponentMixin.
|
|
2991
|
+
"module": "src/utils/mixins/ButtonComponentMixin.ts"
|
|
3029
2992
|
}
|
|
3030
2993
|
},
|
|
3031
2994
|
{
|
|
3032
|
-
"kind": "field",
|
|
3033
2995
|
"name": "variant",
|
|
3034
2996
|
"type": {
|
|
3035
2997
|
"text": "ButtonVariant"
|
|
3036
2998
|
},
|
|
3037
2999
|
"description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
|
|
3038
3000
|
"default": "primary",
|
|
3039
|
-
"
|
|
3001
|
+
"fieldName": "variant",
|
|
3040
3002
|
"inheritedFrom": {
|
|
3041
3003
|
"name": "ButtonComponentMixin",
|
|
3042
|
-
"module": "utils/mixins/ButtonComponentMixin.
|
|
3004
|
+
"module": "src/utils/mixins/ButtonComponentMixin.ts"
|
|
3043
3005
|
}
|
|
3044
3006
|
},
|
|
3045
3007
|
{
|
|
3046
|
-
"kind": "field",
|
|
3047
3008
|
"name": "color",
|
|
3048
3009
|
"type": {
|
|
3049
3010
|
"text": "ButtonColor"
|
|
3050
3011
|
},
|
|
3051
3012
|
"description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
|
|
3052
3013
|
"default": "default",
|
|
3053
|
-
"
|
|
3014
|
+
"fieldName": "color",
|
|
3054
3015
|
"inheritedFrom": {
|
|
3055
3016
|
"name": "ButtonComponentMixin",
|
|
3056
|
-
"module": "utils/mixins/ButtonComponentMixin.
|
|
3017
|
+
"module": "src/utils/mixins/ButtonComponentMixin.ts"
|
|
3057
3018
|
}
|
|
3058
3019
|
},
|
|
3059
3020
|
{
|
|
3060
|
-
"
|
|
3061
|
-
"
|
|
3062
|
-
|
|
3063
|
-
|
|
3064
|
-
|
|
3065
|
-
|
|
3066
|
-
|
|
3067
|
-
},
|
|
3068
|
-
"description": "The variant to set."
|
|
3069
|
-
}
|
|
3070
|
-
],
|
|
3071
|
-
"description": "Sets the variant attribute for the button component.\nIf the provided variant is not included in the BUTTON_VARIANTS,\nit defaults to the value specified in DEFAULTS.VARIANT.",
|
|
3021
|
+
"name": "disabled",
|
|
3022
|
+
"type": {
|
|
3023
|
+
"text": "boolean | undefined"
|
|
3024
|
+
},
|
|
3025
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
3026
|
+
"default": "undefined",
|
|
3027
|
+
"fieldName": "disabled",
|
|
3072
3028
|
"inheritedFrom": {
|
|
3073
|
-
"name": "
|
|
3074
|
-
"module": "utils/mixins/
|
|
3029
|
+
"name": "DisabledMixin",
|
|
3030
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
3075
3031
|
}
|
|
3076
3032
|
},
|
|
3077
3033
|
{
|
|
3078
|
-
"kind": "method",
|
|
3079
|
-
"name": "setColor",
|
|
3080
|
-
"parameters": [
|
|
3081
|
-
{
|
|
3082
|
-
"name": "color",
|
|
3083
|
-
"type": {
|
|
3084
|
-
"text": "ButtonColor"
|
|
3085
|
-
},
|
|
3086
|
-
"description": "The color to set."
|
|
3087
|
-
}
|
|
3088
|
-
],
|
|
3089
|
-
"description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or for tertiary button.",
|
|
3090
|
-
"inheritedFrom": {
|
|
3091
|
-
"name": "ButtonComponentMixin",
|
|
3092
|
-
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
3093
|
-
}
|
|
3094
|
-
},
|
|
3095
|
-
{
|
|
3096
|
-
"kind": "method",
|
|
3097
|
-
"name": "setSize",
|
|
3098
|
-
"parameters": [
|
|
3099
|
-
{
|
|
3100
|
-
"name": "size",
|
|
3101
|
-
"type": {
|
|
3102
|
-
"text": "PillButtonSize | IconButtonSize"
|
|
3103
|
-
},
|
|
3104
|
-
"description": "The size to set."
|
|
3105
|
-
}
|
|
3106
|
-
],
|
|
3107
|
-
"description": "Sets the size attribute for the button component.\nValidates the size based on the button type (icon, pill, or tertiary).\nDefaults to DEFAULTS.SIZE if invalid.",
|
|
3108
|
-
"inheritedFrom": {
|
|
3109
|
-
"name": "ButtonComponentMixin",
|
|
3110
|
-
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
3111
|
-
}
|
|
3112
|
-
},
|
|
3113
|
-
{
|
|
3114
|
-
"kind": "method",
|
|
3115
|
-
"name": "inferButtonType",
|
|
3116
|
-
"description": "Infers the type of button based on the presence of slot and/or prefix and postfix icons.",
|
|
3117
|
-
"parameters": [
|
|
3118
|
-
{
|
|
3119
|
-
"description": "default slot of button",
|
|
3120
|
-
"name": "slot"
|
|
3121
|
-
}
|
|
3122
|
-
],
|
|
3123
|
-
"inheritedFrom": {
|
|
3124
|
-
"name": "ButtonComponentMixin",
|
|
3125
|
-
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
3126
|
-
}
|
|
3127
|
-
},
|
|
3128
|
-
{
|
|
3129
|
-
"kind": "field",
|
|
3130
|
-
"name": "disabled",
|
|
3131
|
-
"type": {
|
|
3132
|
-
"text": "boolean | undefined"
|
|
3133
|
-
},
|
|
3134
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
3135
|
-
"default": "undefined",
|
|
3136
|
-
"attribute": "disabled",
|
|
3137
|
-
"reflects": true,
|
|
3138
|
-
"inheritedFrom": {
|
|
3139
|
-
"name": "DisabledMixin",
|
|
3140
|
-
"module": "utils/mixins/DisabledMixin.js"
|
|
3141
|
-
}
|
|
3142
|
-
},
|
|
3143
|
-
{
|
|
3144
|
-
"kind": "field",
|
|
3145
3034
|
"name": "tabIndex",
|
|
3146
3035
|
"type": {
|
|
3147
3036
|
"text": "number"
|
|
3148
3037
|
},
|
|
3149
3038
|
"default": "0",
|
|
3150
3039
|
"description": "This property specifies the tab order of the element.",
|
|
3151
|
-
"
|
|
3152
|
-
"reflects": true,
|
|
3040
|
+
"fieldName": "tabIndex",
|
|
3153
3041
|
"inheritedFrom": {
|
|
3154
3042
|
"name": "TabIndexMixin",
|
|
3155
|
-
"module": "utils/mixins/TabIndexMixin.
|
|
3043
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
3156
3044
|
}
|
|
3157
3045
|
},
|
|
3158
3046
|
{
|
|
3159
|
-
"kind": "field",
|
|
3160
3047
|
"name": "inline",
|
|
3161
3048
|
"type": {
|
|
3162
3049
|
"text": "boolean"
|
|
3163
3050
|
},
|
|
3164
3051
|
"description": "The link can be inline or standalone.",
|
|
3165
3052
|
"default": "false",
|
|
3166
|
-
"
|
|
3167
|
-
"reflects": true,
|
|
3053
|
+
"fieldName": "inline",
|
|
3168
3054
|
"inheritedFrom": {
|
|
3169
3055
|
"name": "Linksimple",
|
|
3170
|
-
"module": "components/linksimple/linksimple.component.
|
|
3056
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3171
3057
|
}
|
|
3172
3058
|
},
|
|
3173
3059
|
{
|
|
3174
|
-
"kind": "field",
|
|
3175
3060
|
"name": "inverted",
|
|
3176
3061
|
"type": {
|
|
3177
3062
|
"text": "boolean"
|
|
3178
3063
|
},
|
|
3179
3064
|
"description": "The link color can be inverted by setting the inverted attribute to true.",
|
|
3180
3065
|
"default": "false",
|
|
3181
|
-
"
|
|
3182
|
-
"reflects": true,
|
|
3066
|
+
"fieldName": "inverted",
|
|
3183
3067
|
"inheritedFrom": {
|
|
3184
3068
|
"name": "Linksimple",
|
|
3185
|
-
"module": "components/linksimple/linksimple.component.
|
|
3069
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3186
3070
|
}
|
|
3187
3071
|
},
|
|
3188
3072
|
{
|
|
3189
|
-
"kind": "field",
|
|
3190
3073
|
"name": "href",
|
|
3191
3074
|
"type": {
|
|
3192
3075
|
"text": "string"
|
|
3193
3076
|
},
|
|
3194
3077
|
"default": "'#'",
|
|
3195
3078
|
"description": "Href for navigation. The URL that the hyperlink points to",
|
|
3196
|
-
"
|
|
3197
|
-
"reflects": true,
|
|
3079
|
+
"fieldName": "href",
|
|
3198
3080
|
"inheritedFrom": {
|
|
3199
3081
|
"name": "Linksimple",
|
|
3200
|
-
"module": "components/linksimple/linksimple.component.
|
|
3082
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3201
3083
|
}
|
|
3202
3084
|
},
|
|
3203
3085
|
{
|
|
3204
|
-
"kind": "field",
|
|
3205
3086
|
"name": "target",
|
|
3206
3087
|
"type": {
|
|
3207
3088
|
"text": "string"
|
|
3208
3089
|
},
|
|
3209
3090
|
"default": "'_self'",
|
|
3210
3091
|
"description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
|
|
3211
|
-
"
|
|
3212
|
-
"reflects": true,
|
|
3092
|
+
"fieldName": "target",
|
|
3213
3093
|
"inheritedFrom": {
|
|
3214
3094
|
"name": "Linksimple",
|
|
3215
|
-
"module": "components/linksimple/linksimple.component.
|
|
3095
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3216
3096
|
}
|
|
3217
3097
|
},
|
|
3218
3098
|
{
|
|
3219
|
-
"kind": "field",
|
|
3220
3099
|
"name": "rel",
|
|
3221
3100
|
"type": {
|
|
3222
3101
|
"text": "string | undefined"
|
|
3223
3102
|
},
|
|
3224
3103
|
"description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
|
|
3225
|
-
"
|
|
3226
|
-
"reflects": true,
|
|
3104
|
+
"fieldName": "rel",
|
|
3227
3105
|
"inheritedFrom": {
|
|
3228
3106
|
"name": "Linksimple",
|
|
3229
|
-
"module": "components/linksimple/linksimple.component.
|
|
3107
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3108
|
+
}
|
|
3109
|
+
}
|
|
3110
|
+
],
|
|
3111
|
+
"mixins": [
|
|
3112
|
+
{
|
|
3113
|
+
"name": "ButtonComponentMixin",
|
|
3114
|
+
"module": "/src/utils/mixins/ButtonComponentMixin"
|
|
3115
|
+
}
|
|
3116
|
+
],
|
|
3117
|
+
"superclass": {
|
|
3118
|
+
"name": "Linksimple",
|
|
3119
|
+
"module": "/src/components/linksimple/linksimple.component"
|
|
3120
|
+
},
|
|
3121
|
+
"tagName": "mdc-buttonlink",
|
|
3122
|
+
"jsDoc": "/**\n * `mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\n * features of `mdc-button`. This includes support for variants, sizing, and optional\n * prefix and postfix icons via slots.\n *\n * ### Features:\n * - Behaves like an link while visually resembling a button.\n * - Supports slots for `prefix-icon` and `postfix-icon`.\n * - Customizable size, color, and variant through attributes.\n * - Inherits accessibility and keyboard interaction support from `mdc-linksimple`.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-buttonlink\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n */",
|
|
3123
|
+
"customElement": true,
|
|
3124
|
+
"cssProperties": [
|
|
3125
|
+
{
|
|
3126
|
+
"description": "Border radius of the link.",
|
|
3127
|
+
"name": "--mdc-link-border-radius",
|
|
3128
|
+
"inheritedFrom": {
|
|
3129
|
+
"name": "Linksimple",
|
|
3130
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3230
3131
|
}
|
|
3231
3132
|
},
|
|
3232
3133
|
{
|
|
3233
|
-
"
|
|
3234
|
-
"name": "
|
|
3235
|
-
"privacy": "private",
|
|
3134
|
+
"description": "Color of the link’s child content in the active state.",
|
|
3135
|
+
"name": "--mdc-link-color-active",
|
|
3236
3136
|
"inheritedFrom": {
|
|
3237
3137
|
"name": "Linksimple",
|
|
3238
|
-
"module": "components/linksimple/linksimple.component.
|
|
3138
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3239
3139
|
}
|
|
3240
3140
|
},
|
|
3241
3141
|
{
|
|
3242
|
-
"
|
|
3243
|
-
"name": "
|
|
3244
|
-
"privacy": "private",
|
|
3245
|
-
"parameters": [
|
|
3246
|
-
{
|
|
3247
|
-
"name": "disabled",
|
|
3248
|
-
"type": {
|
|
3249
|
-
"text": "boolean"
|
|
3250
|
-
},
|
|
3251
|
-
"description": "Whether the element should be disabled"
|
|
3252
|
-
}
|
|
3253
|
-
],
|
|
3254
|
-
"description": "Sets or removes `aria-disabled` and updates `tabIndex` to reflect\nthe disabled state. When disabled, the element becomes unfocusable;\nwhen enabled, the previous `tabIndex` is restored.",
|
|
3142
|
+
"description": "Color of the link’s child content in the disabled state.",
|
|
3143
|
+
"name": "--mdc-link-color-disabled",
|
|
3255
3144
|
"inheritedFrom": {
|
|
3256
3145
|
"name": "Linksimple",
|
|
3257
|
-
"module": "components/linksimple/linksimple.component.
|
|
3146
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3258
3147
|
}
|
|
3259
|
-
}
|
|
3260
|
-
],
|
|
3261
|
-
"events": [
|
|
3148
|
+
},
|
|
3262
3149
|
{
|
|
3263
|
-
"description": "
|
|
3264
|
-
"name": "
|
|
3265
|
-
"reactName": "onClick",
|
|
3150
|
+
"description": "Color of the link’s child content in the hover state.",
|
|
3151
|
+
"name": "--mdc-link-color-hover",
|
|
3266
3152
|
"inheritedFrom": {
|
|
3267
3153
|
"name": "Linksimple",
|
|
3268
3154
|
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3269
3155
|
}
|
|
3270
3156
|
},
|
|
3271
3157
|
{
|
|
3272
|
-
"description": "
|
|
3273
|
-
"name": "
|
|
3274
|
-
"reactName": "onKeyDown",
|
|
3158
|
+
"description": "Color of the link’s child content in the normal state.",
|
|
3159
|
+
"name": "--mdc-link-color-normal",
|
|
3275
3160
|
"inheritedFrom": {
|
|
3276
3161
|
"name": "Linksimple",
|
|
3277
3162
|
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3278
3163
|
}
|
|
3279
3164
|
},
|
|
3280
3165
|
{
|
|
3281
|
-
"description": "
|
|
3282
|
-
"name": "
|
|
3283
|
-
"reactName": "onFocus",
|
|
3166
|
+
"description": "Color of the inverted link’s child content in the active state.",
|
|
3167
|
+
"name": "--mdc-link-inverted-color-active",
|
|
3284
3168
|
"inheritedFrom": {
|
|
3285
3169
|
"name": "Linksimple",
|
|
3286
3170
|
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3287
3171
|
}
|
|
3288
3172
|
},
|
|
3289
3173
|
{
|
|
3290
|
-
"description": "
|
|
3291
|
-
"name": "
|
|
3292
|
-
"
|
|
3174
|
+
"description": "Color of the inverted link’s child content in the disabled state.",
|
|
3175
|
+
"name": "--mdc-link-inverted-color-disabled",
|
|
3176
|
+
"inheritedFrom": {
|
|
3177
|
+
"name": "Linksimple",
|
|
3178
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3179
|
+
}
|
|
3180
|
+
},
|
|
3181
|
+
{
|
|
3182
|
+
"description": "Color of the inverted link’s child content in the hover state.",
|
|
3183
|
+
"name": "--mdc-link-inverted-color-hover",
|
|
3184
|
+
"inheritedFrom": {
|
|
3185
|
+
"name": "Linksimple",
|
|
3186
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3187
|
+
}
|
|
3188
|
+
},
|
|
3189
|
+
{
|
|
3190
|
+
"description": "Color of the inverted link’s child content in the normal state.",
|
|
3191
|
+
"name": "--mdc-link-inverted-color-normal",
|
|
3293
3192
|
"inheritedFrom": {
|
|
3294
3193
|
"name": "Linksimple",
|
|
3295
3194
|
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3296
3195
|
}
|
|
3297
3196
|
}
|
|
3298
|
-
]
|
|
3299
|
-
|
|
3197
|
+
]
|
|
3198
|
+
}
|
|
3199
|
+
],
|
|
3200
|
+
"exports": [
|
|
3201
|
+
{
|
|
3202
|
+
"kind": "js",
|
|
3203
|
+
"name": "default",
|
|
3204
|
+
"declaration": {
|
|
3205
|
+
"name": "ButtonLink",
|
|
3206
|
+
"module": "components/buttonlink/buttonlink.component.js"
|
|
3207
|
+
}
|
|
3208
|
+
}
|
|
3209
|
+
]
|
|
3210
|
+
},
|
|
3211
|
+
{
|
|
3212
|
+
"kind": "javascript-module",
|
|
3213
|
+
"path": "components/buttonsimple/buttonsimple.component.js",
|
|
3214
|
+
"declarations": [
|
|
3215
|
+
{
|
|
3216
|
+
"kind": "class",
|
|
3217
|
+
"description": "`mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.\nIt is used as an internal component and is not intended to be used directly by consumers.\nConsumers should use the `mdc-button` component instead.",
|
|
3218
|
+
"name": "Buttonsimple",
|
|
3219
|
+
"members": [
|
|
3300
3220
|
{
|
|
3301
|
-
"
|
|
3221
|
+
"kind": "field",
|
|
3222
|
+
"name": "active",
|
|
3302
3223
|
"type": {
|
|
3303
|
-
"text": "
|
|
3224
|
+
"text": "boolean | undefined"
|
|
3304
3225
|
},
|
|
3305
|
-
"description": "
|
|
3306
|
-
"default": "
|
|
3307
|
-
"
|
|
3226
|
+
"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.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
|
3227
|
+
"default": "undefined",
|
|
3228
|
+
"attribute": "active",
|
|
3229
|
+
"reflects": true
|
|
3308
3230
|
},
|
|
3309
3231
|
{
|
|
3310
|
-
"
|
|
3232
|
+
"kind": "field",
|
|
3233
|
+
"name": "softDisabled",
|
|
3311
3234
|
"type": {
|
|
3312
3235
|
"text": "boolean | undefined"
|
|
3313
3236
|
},
|
|
3314
|
-
"description": "Indicates whether the
|
|
3237
|
+
"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.",
|
|
3315
3238
|
"default": "undefined",
|
|
3316
|
-
"
|
|
3239
|
+
"attribute": "soft-disabled",
|
|
3240
|
+
"reflects": true
|
|
3317
3241
|
},
|
|
3318
3242
|
{
|
|
3319
|
-
"
|
|
3243
|
+
"kind": "field",
|
|
3244
|
+
"name": "size",
|
|
3320
3245
|
"type": {
|
|
3321
|
-
"text": "
|
|
3246
|
+
"text": "ButtonSize"
|
|
3322
3247
|
},
|
|
3323
|
-
"description": "
|
|
3324
|
-
"
|
|
3325
|
-
"
|
|
3326
|
-
|
|
3327
|
-
"module": "src/utils/mixins/ButtonComponentMixin.ts"
|
|
3328
|
-
}
|
|
3248
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
3249
|
+
"default": "32",
|
|
3250
|
+
"attribute": "size",
|
|
3251
|
+
"reflects": true
|
|
3329
3252
|
},
|
|
3330
3253
|
{
|
|
3331
|
-
"
|
|
3332
|
-
"
|
|
3333
|
-
|
|
3334
|
-
|
|
3335
|
-
"
|
|
3336
|
-
"
|
|
3337
|
-
"inheritedFrom": {
|
|
3338
|
-
"name": "ButtonComponentMixin",
|
|
3339
|
-
"module": "src/utils/mixins/ButtonComponentMixin.ts"
|
|
3340
|
-
}
|
|
3254
|
+
"kind": "field",
|
|
3255
|
+
"name": "role",
|
|
3256
|
+
"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.",
|
|
3257
|
+
"default": "button",
|
|
3258
|
+
"attribute": "role",
|
|
3259
|
+
"reflects": true
|
|
3341
3260
|
},
|
|
3342
3261
|
{
|
|
3343
|
-
"
|
|
3262
|
+
"kind": "field",
|
|
3263
|
+
"name": "ariaStateKey",
|
|
3344
3264
|
"type": {
|
|
3345
|
-
"text": "
|
|
3265
|
+
"text": "string | undefined"
|
|
3346
3266
|
},
|
|
3347
|
-
"description": "
|
|
3348
|
-
"default": "
|
|
3349
|
-
"
|
|
3350
|
-
"
|
|
3351
|
-
"name": "ButtonComponentMixin",
|
|
3352
|
-
"module": "src/utils/mixins/ButtonComponentMixin.ts"
|
|
3353
|
-
}
|
|
3267
|
+
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
|
3268
|
+
"default": "'aria-pressed' (when)",
|
|
3269
|
+
"attribute": "ariaStateKey",
|
|
3270
|
+
"reflects": true
|
|
3354
3271
|
},
|
|
3355
3272
|
{
|
|
3356
|
-
"
|
|
3273
|
+
"kind": "field",
|
|
3274
|
+
"name": "type",
|
|
3357
3275
|
"type": {
|
|
3358
|
-
"text": "
|
|
3276
|
+
"text": "ButtonType"
|
|
3359
3277
|
},
|
|
3360
|
-
"description": "
|
|
3361
|
-
"default": "
|
|
3362
|
-
"
|
|
3363
|
-
"
|
|
3364
|
-
"name": "ButtonComponentMixin",
|
|
3365
|
-
"module": "src/utils/mixins/ButtonComponentMixin.ts"
|
|
3366
|
-
}
|
|
3278
|
+
"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.",
|
|
3279
|
+
"default": "button",
|
|
3280
|
+
"attribute": "type",
|
|
3281
|
+
"reflects": true
|
|
3367
3282
|
},
|
|
3368
3283
|
{
|
|
3369
|
-
"
|
|
3370
|
-
"
|
|
3371
|
-
|
|
3372
|
-
|
|
3373
|
-
|
|
3374
|
-
"
|
|
3375
|
-
"
|
|
3376
|
-
"
|
|
3377
|
-
|
|
3378
|
-
|
|
3379
|
-
|
|
3284
|
+
"kind": "method",
|
|
3285
|
+
"name": "executeAction",
|
|
3286
|
+
"privacy": "protected"
|
|
3287
|
+
},
|
|
3288
|
+
{
|
|
3289
|
+
"kind": "method",
|
|
3290
|
+
"name": "setActive",
|
|
3291
|
+
"privacy": "protected",
|
|
3292
|
+
"parameters": [
|
|
3293
|
+
{
|
|
3294
|
+
"name": "element",
|
|
3295
|
+
"type": {
|
|
3296
|
+
"text": "HTMLElement"
|
|
3297
|
+
},
|
|
3298
|
+
"description": "The button element"
|
|
3299
|
+
},
|
|
3300
|
+
{
|
|
3301
|
+
"name": "active",
|
|
3302
|
+
"optional": true,
|
|
3303
|
+
"type": {
|
|
3304
|
+
"text": "boolean"
|
|
3305
|
+
},
|
|
3306
|
+
"description": "The active state of the element"
|
|
3307
|
+
}
|
|
3308
|
+
],
|
|
3309
|
+
"description": "Sets the ariaStateKey attributes based on the active state of the button."
|
|
3310
|
+
},
|
|
3311
|
+
{
|
|
3312
|
+
"kind": "method",
|
|
3313
|
+
"name": "setSoftDisabled",
|
|
3314
|
+
"privacy": "private",
|
|
3315
|
+
"parameters": [
|
|
3316
|
+
{
|
|
3317
|
+
"name": "element",
|
|
3318
|
+
"type": {
|
|
3319
|
+
"text": "HTMLElement"
|
|
3320
|
+
},
|
|
3321
|
+
"description": "The button element."
|
|
3322
|
+
},
|
|
3323
|
+
{
|
|
3324
|
+
"name": "softDisabled",
|
|
3325
|
+
"optional": true,
|
|
3326
|
+
"type": {
|
|
3327
|
+
"text": "boolean"
|
|
3328
|
+
},
|
|
3329
|
+
"description": "The soft-disabled state."
|
|
3330
|
+
}
|
|
3331
|
+
],
|
|
3332
|
+
"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."
|
|
3333
|
+
},
|
|
3334
|
+
{
|
|
3335
|
+
"kind": "method",
|
|
3336
|
+
"name": "setDisabled",
|
|
3337
|
+
"privacy": "private",
|
|
3338
|
+
"parameters": [
|
|
3339
|
+
{
|
|
3340
|
+
"name": "element",
|
|
3341
|
+
"type": {
|
|
3342
|
+
"text": "HTMLElement"
|
|
3343
|
+
},
|
|
3344
|
+
"description": "The button element."
|
|
3345
|
+
},
|
|
3346
|
+
{
|
|
3347
|
+
"name": "disabled",
|
|
3348
|
+
"type": {
|
|
3349
|
+
"text": "boolean"
|
|
3350
|
+
},
|
|
3351
|
+
"description": "The disabled state."
|
|
3352
|
+
}
|
|
3353
|
+
],
|
|
3354
|
+
"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."
|
|
3355
|
+
},
|
|
3356
|
+
{
|
|
3357
|
+
"kind": "method",
|
|
3358
|
+
"name": "triggerClickEvent",
|
|
3359
|
+
"privacy": "private"
|
|
3360
|
+
},
|
|
3361
|
+
{
|
|
3362
|
+
"kind": "method",
|
|
3363
|
+
"name": "handleBlur",
|
|
3364
|
+
"privacy": "private",
|
|
3365
|
+
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed."
|
|
3366
|
+
},
|
|
3367
|
+
{
|
|
3368
|
+
"kind": "method",
|
|
3369
|
+
"name": "handleKeyDown",
|
|
3370
|
+
"privacy": "private",
|
|
3371
|
+
"parameters": [
|
|
3372
|
+
{
|
|
3373
|
+
"name": "event",
|
|
3374
|
+
"type": {
|
|
3375
|
+
"text": "KeyboardEvent"
|
|
3376
|
+
},
|
|
3377
|
+
"description": "The keyboard event."
|
|
3378
|
+
}
|
|
3379
|
+
],
|
|
3380
|
+
"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.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application."
|
|
3380
3381
|
},
|
|
3381
3382
|
{
|
|
3383
|
+
"kind": "method",
|
|
3384
|
+
"name": "handleKeyUp",
|
|
3385
|
+
"privacy": "private",
|
|
3386
|
+
"parameters": [
|
|
3387
|
+
{
|
|
3388
|
+
"name": "event",
|
|
3389
|
+
"type": {
|
|
3390
|
+
"text": "KeyboardEvent"
|
|
3391
|
+
},
|
|
3392
|
+
"description": "The keyboard event."
|
|
3393
|
+
}
|
|
3394
|
+
],
|
|
3395
|
+
"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."
|
|
3396
|
+
},
|
|
3397
|
+
{
|
|
3398
|
+
"kind": "field",
|
|
3382
3399
|
"name": "tabIndex",
|
|
3383
3400
|
"type": {
|
|
3384
3401
|
"text": "number"
|
|
3385
3402
|
},
|
|
3386
3403
|
"default": "0",
|
|
3387
3404
|
"description": "This property specifies the tab order of the element.",
|
|
3388
|
-
"
|
|
3405
|
+
"attribute": "tabIndex",
|
|
3406
|
+
"reflects": true,
|
|
3389
3407
|
"inheritedFrom": {
|
|
3390
3408
|
"name": "TabIndexMixin",
|
|
3391
|
-
"module": "
|
|
3409
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
3392
3410
|
}
|
|
3393
3411
|
},
|
|
3394
3412
|
{
|
|
3395
|
-
"
|
|
3413
|
+
"kind": "field",
|
|
3414
|
+
"name": "disabled",
|
|
3396
3415
|
"type": {
|
|
3397
|
-
"text": "boolean"
|
|
3416
|
+
"text": "boolean | undefined"
|
|
3398
3417
|
},
|
|
3399
|
-
"description": "
|
|
3400
|
-
"default": "
|
|
3401
|
-
"
|
|
3418
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
3419
|
+
"default": "undefined",
|
|
3420
|
+
"attribute": "disabled",
|
|
3421
|
+
"reflects": true,
|
|
3402
3422
|
"inheritedFrom": {
|
|
3403
|
-
"name": "
|
|
3404
|
-
"module": "
|
|
3423
|
+
"name": "DisabledMixin",
|
|
3424
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
3405
3425
|
}
|
|
3406
|
-
}
|
|
3426
|
+
}
|
|
3427
|
+
],
|
|
3428
|
+
"events": [
|
|
3407
3429
|
{
|
|
3408
|
-
"
|
|
3409
|
-
"
|
|
3410
|
-
|
|
3411
|
-
},
|
|
3412
|
-
"description": "The link color can be inverted by setting the inverted attribute to true.",
|
|
3413
|
-
"default": "false",
|
|
3414
|
-
"fieldName": "inverted",
|
|
3415
|
-
"inheritedFrom": {
|
|
3416
|
-
"name": "Linksimple",
|
|
3417
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3418
|
-
}
|
|
3430
|
+
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
|
3431
|
+
"name": "click",
|
|
3432
|
+
"reactName": "onClick"
|
|
3419
3433
|
},
|
|
3420
3434
|
{
|
|
3421
|
-
"
|
|
3422
|
-
"
|
|
3423
|
-
|
|
3424
|
-
},
|
|
3425
|
-
"default": "'#'",
|
|
3426
|
-
"description": "Href for navigation. The URL that the hyperlink points to",
|
|
3427
|
-
"fieldName": "href",
|
|
3428
|
-
"inheritedFrom": {
|
|
3429
|
-
"name": "Linksimple",
|
|
3430
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3431
|
-
}
|
|
3435
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
|
|
3436
|
+
"name": "keydown",
|
|
3437
|
+
"reactName": "onKeyDown"
|
|
3432
3438
|
},
|
|
3433
3439
|
{
|
|
3434
|
-
"
|
|
3435
|
-
"
|
|
3436
|
-
|
|
3437
|
-
},
|
|
3438
|
-
"default": "'_self'",
|
|
3439
|
-
"description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
|
|
3440
|
-
"fieldName": "target",
|
|
3441
|
-
"inheritedFrom": {
|
|
3442
|
-
"name": "Linksimple",
|
|
3443
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3444
|
-
}
|
|
3440
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
|
|
3441
|
+
"name": "keyup",
|
|
3442
|
+
"reactName": "onKeyUp"
|
|
3445
3443
|
},
|
|
3446
3444
|
{
|
|
3447
|
-
"
|
|
3448
|
-
"
|
|
3449
|
-
|
|
3450
|
-
},
|
|
3451
|
-
"description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
|
|
3452
|
-
"fieldName": "rel",
|
|
3453
|
-
"inheritedFrom": {
|
|
3454
|
-
"name": "Linksimple",
|
|
3455
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3456
|
-
}
|
|
3445
|
+
"description": "(React: onFocus) This event is dispatched when the button receives focus.",
|
|
3446
|
+
"name": "focus",
|
|
3447
|
+
"reactName": "onFocus"
|
|
3457
3448
|
}
|
|
3458
3449
|
],
|
|
3459
|
-
"
|
|
3450
|
+
"attributes": [
|
|
3460
3451
|
{
|
|
3461
|
-
"name": "
|
|
3462
|
-
"
|
|
3463
|
-
|
|
3464
|
-
|
|
3465
|
-
|
|
3466
|
-
|
|
3467
|
-
|
|
3468
|
-
|
|
3469
|
-
"tagName": "mdc-buttonlink",
|
|
3470
|
-
"jsDoc": "/**\n * `mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\n * features of `mdc-button`. This includes support for variants, sizing, and optional\n * prefix and postfix icons via slots.\n *\n * ### Features:\n * - Behaves like an link while visually resembling a button.\n * - Supports slots for `prefix-icon` and `postfix-icon`.\n * - Customizable size, color, and variant through attributes.\n * - Inherits accessibility and keyboard interaction support from `mdc-linksimple`.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-buttonlink\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n */",
|
|
3471
|
-
"customElement": true,
|
|
3472
|
-
"cssProperties": [
|
|
3452
|
+
"name": "active",
|
|
3453
|
+
"type": {
|
|
3454
|
+
"text": "boolean | undefined"
|
|
3455
|
+
},
|
|
3456
|
+
"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.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
|
3457
|
+
"default": "undefined",
|
|
3458
|
+
"fieldName": "active"
|
|
3459
|
+
},
|
|
3473
3460
|
{
|
|
3474
|
-
"
|
|
3475
|
-
"
|
|
3476
|
-
|
|
3477
|
-
|
|
3478
|
-
|
|
3479
|
-
|
|
3461
|
+
"name": "soft-disabled",
|
|
3462
|
+
"type": {
|
|
3463
|
+
"text": "boolean | undefined"
|
|
3464
|
+
},
|
|
3465
|
+
"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.",
|
|
3466
|
+
"default": "undefined",
|
|
3467
|
+
"fieldName": "softDisabled"
|
|
3480
3468
|
},
|
|
3481
3469
|
{
|
|
3482
|
-
"
|
|
3483
|
-
"
|
|
3484
|
-
|
|
3485
|
-
|
|
3486
|
-
|
|
3487
|
-
|
|
3470
|
+
"name": "size",
|
|
3471
|
+
"type": {
|
|
3472
|
+
"text": "ButtonSize"
|
|
3473
|
+
},
|
|
3474
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
3475
|
+
"default": "32",
|
|
3476
|
+
"fieldName": "size"
|
|
3488
3477
|
},
|
|
3489
3478
|
{
|
|
3490
|
-
"
|
|
3491
|
-
"
|
|
3492
|
-
"
|
|
3493
|
-
|
|
3494
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3495
|
-
}
|
|
3479
|
+
"name": "role",
|
|
3480
|
+
"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.",
|
|
3481
|
+
"default": "button",
|
|
3482
|
+
"fieldName": "role"
|
|
3496
3483
|
},
|
|
3497
3484
|
{
|
|
3498
|
-
"
|
|
3499
|
-
"
|
|
3500
|
-
|
|
3501
|
-
|
|
3502
|
-
|
|
3503
|
-
|
|
3485
|
+
"name": "ariaStateKey",
|
|
3486
|
+
"type": {
|
|
3487
|
+
"text": "string | undefined"
|
|
3488
|
+
},
|
|
3489
|
+
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
|
3490
|
+
"default": "'aria-pressed' (when)",
|
|
3491
|
+
"fieldName": "ariaStateKey"
|
|
3504
3492
|
},
|
|
3505
3493
|
{
|
|
3506
|
-
"
|
|
3507
|
-
"
|
|
3508
|
-
|
|
3509
|
-
|
|
3510
|
-
|
|
3511
|
-
|
|
3494
|
+
"name": "type",
|
|
3495
|
+
"type": {
|
|
3496
|
+
"text": "ButtonType"
|
|
3497
|
+
},
|
|
3498
|
+
"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.",
|
|
3499
|
+
"default": "button",
|
|
3500
|
+
"fieldName": "type"
|
|
3512
3501
|
},
|
|
3513
3502
|
{
|
|
3514
|
-
"
|
|
3515
|
-
"
|
|
3503
|
+
"name": "tabIndex",
|
|
3504
|
+
"type": {
|
|
3505
|
+
"text": "number"
|
|
3506
|
+
},
|
|
3507
|
+
"default": "0",
|
|
3508
|
+
"description": "This property specifies the tab order of the element.",
|
|
3509
|
+
"fieldName": "tabIndex",
|
|
3516
3510
|
"inheritedFrom": {
|
|
3517
|
-
"name": "
|
|
3518
|
-
"module": "src/
|
|
3511
|
+
"name": "TabIndexMixin",
|
|
3512
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
3519
3513
|
}
|
|
3520
3514
|
},
|
|
3521
3515
|
{
|
|
3522
|
-
"
|
|
3523
|
-
"
|
|
3516
|
+
"name": "disabled",
|
|
3517
|
+
"type": {
|
|
3518
|
+
"text": "boolean | undefined"
|
|
3519
|
+
},
|
|
3520
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
3521
|
+
"default": "undefined",
|
|
3522
|
+
"fieldName": "disabled",
|
|
3524
3523
|
"inheritedFrom": {
|
|
3525
|
-
"name": "
|
|
3526
|
-
"module": "src/
|
|
3524
|
+
"name": "DisabledMixin",
|
|
3525
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
3527
3526
|
}
|
|
3528
|
-
}
|
|
3527
|
+
}
|
|
3528
|
+
],
|
|
3529
|
+
"mixins": [
|
|
3529
3530
|
{
|
|
3530
|
-
"
|
|
3531
|
-
"
|
|
3532
|
-
"inheritedFrom": {
|
|
3533
|
-
"name": "Linksimple",
|
|
3534
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3535
|
-
}
|
|
3531
|
+
"name": "TabIndexMixin",
|
|
3532
|
+
"module": "/src/utils/mixins/TabIndexMixin"
|
|
3536
3533
|
},
|
|
3537
3534
|
{
|
|
3538
|
-
"
|
|
3539
|
-
"
|
|
3540
|
-
"inheritedFrom": {
|
|
3541
|
-
"name": "Linksimple",
|
|
3542
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3543
|
-
}
|
|
3535
|
+
"name": "DisabledMixin",
|
|
3536
|
+
"module": "/src/utils/mixins/DisabledMixin"
|
|
3544
3537
|
}
|
|
3545
|
-
]
|
|
3538
|
+
],
|
|
3539
|
+
"superclass": {
|
|
3540
|
+
"name": "Component",
|
|
3541
|
+
"module": "/src/models"
|
|
3542
|
+
},
|
|
3543
|
+
"tagName": "mdc-buttonsimple",
|
|
3544
|
+
"jsDoc": "/**\n * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.\n * It is used as an internal component and is not intended to be used directly by consumers.\n * Consumers should use the `mdc-button` component instead.\n *\n * @event click - (React: onClick) This event is dispatched when the button is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.\n * @event focus - (React: onFocus) This event is dispatched when the button receives focus.\n *\n * @tagname mdc-buttonsimple\n */",
|
|
3545
|
+
"customElement": true
|
|
3546
3546
|
}
|
|
3547
3547
|
],
|
|
3548
3548
|
"exports": [
|
|
@@ -3550,8 +3550,8 @@
|
|
|
3550
3550
|
"kind": "js",
|
|
3551
3551
|
"name": "default",
|
|
3552
3552
|
"declaration": {
|
|
3553
|
-
"name": "
|
|
3554
|
-
"module": "components/
|
|
3553
|
+
"name": "Buttonsimple",
|
|
3554
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3555
3555
|
}
|
|
3556
3556
|
}
|
|
3557
3557
|
]
|
|
@@ -19833,96 +19833,229 @@
|
|
|
19833
19833
|
}
|
|
19834
19834
|
},
|
|
19835
19835
|
{
|
|
19836
|
-
"name": "disabled",
|
|
19836
|
+
"name": "disabled",
|
|
19837
|
+
"type": {
|
|
19838
|
+
"text": "boolean | undefined"
|
|
19839
|
+
},
|
|
19840
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
19841
|
+
"default": "undefined",
|
|
19842
|
+
"fieldName": "disabled",
|
|
19843
|
+
"inheritedFrom": {
|
|
19844
|
+
"name": "FormfieldWrapper",
|
|
19845
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
19846
|
+
}
|
|
19847
|
+
},
|
|
19848
|
+
{
|
|
19849
|
+
"name": "label",
|
|
19850
|
+
"type": {
|
|
19851
|
+
"text": "string | undefined"
|
|
19852
|
+
},
|
|
19853
|
+
"description": "The label of the input field. It is linked to the input field using the `for` attribute.",
|
|
19854
|
+
"fieldName": "label",
|
|
19855
|
+
"inheritedFrom": {
|
|
19856
|
+
"name": "FormfieldWrapper",
|
|
19857
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
19858
|
+
}
|
|
19859
|
+
},
|
|
19860
|
+
{
|
|
19861
|
+
"name": "required-label",
|
|
19862
|
+
"type": {
|
|
19863
|
+
"text": "string | undefined"
|
|
19864
|
+
},
|
|
19865
|
+
"description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
|
|
19866
|
+
"fieldName": "requiredLabel",
|
|
19867
|
+
"inheritedFrom": {
|
|
19868
|
+
"name": "FormfieldWrapper",
|
|
19869
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
19870
|
+
}
|
|
19871
|
+
},
|
|
19872
|
+
{
|
|
19873
|
+
"name": "id",
|
|
19874
|
+
"type": {
|
|
19875
|
+
"text": "string"
|
|
19876
|
+
},
|
|
19877
|
+
"default": "''",
|
|
19878
|
+
"description": "The unique id of the input field. It is used to link the input field with the label.",
|
|
19879
|
+
"fieldName": "id",
|
|
19880
|
+
"inheritedFrom": {
|
|
19881
|
+
"name": "FormfieldWrapper",
|
|
19882
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
19883
|
+
}
|
|
19884
|
+
},
|
|
19885
|
+
{
|
|
19886
|
+
"name": "help-text-type",
|
|
19887
|
+
"type": {
|
|
19888
|
+
"text": "ValidationType"
|
|
19889
|
+
},
|
|
19890
|
+
"description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
|
|
19891
|
+
"fieldName": "helpTextType",
|
|
19892
|
+
"inheritedFrom": {
|
|
19893
|
+
"name": "FormfieldWrapper",
|
|
19894
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
19895
|
+
}
|
|
19896
|
+
},
|
|
19897
|
+
{
|
|
19898
|
+
"name": "help-text",
|
|
19899
|
+
"type": {
|
|
19900
|
+
"text": "string | undefined"
|
|
19901
|
+
},
|
|
19902
|
+
"description": "The help text that is displayed below the input field.",
|
|
19903
|
+
"fieldName": "helpText",
|
|
19904
|
+
"inheritedFrom": {
|
|
19905
|
+
"name": "FormfieldWrapper",
|
|
19906
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
19907
|
+
}
|
|
19908
|
+
}
|
|
19909
|
+
],
|
|
19910
|
+
"mixins": [
|
|
19911
|
+
{
|
|
19912
|
+
"name": "FormInternalsMixin",
|
|
19913
|
+
"module": "/src/utils/mixins/FormInternalsMixin"
|
|
19914
|
+
},
|
|
19915
|
+
{
|
|
19916
|
+
"name": "DataAriaLabelMixin",
|
|
19917
|
+
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
|
19918
|
+
}
|
|
19919
|
+
],
|
|
19920
|
+
"superclass": {
|
|
19921
|
+
"name": "FormfieldWrapper",
|
|
19922
|
+
"module": "/src/components/formfieldwrapper/formfieldwrapper.component"
|
|
19923
|
+
},
|
|
19924
|
+
"tagName": "mdc-select",
|
|
19925
|
+
"jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n * The component ensures accessibility and usability while handling various use cases,\n * including long text truncation with tooltip support.\n *\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n */",
|
|
19926
|
+
"customElement": true
|
|
19927
|
+
}
|
|
19928
|
+
],
|
|
19929
|
+
"exports": [
|
|
19930
|
+
{
|
|
19931
|
+
"kind": "js",
|
|
19932
|
+
"name": "default",
|
|
19933
|
+
"declaration": {
|
|
19934
|
+
"name": "Select",
|
|
19935
|
+
"module": "components/select/select.component.js"
|
|
19936
|
+
}
|
|
19937
|
+
}
|
|
19938
|
+
]
|
|
19939
|
+
},
|
|
19940
|
+
{
|
|
19941
|
+
"kind": "javascript-module",
|
|
19942
|
+
"path": "components/spinner/spinner.component.js",
|
|
19943
|
+
"declarations": [
|
|
19944
|
+
{
|
|
19945
|
+
"kind": "class",
|
|
19946
|
+
"description": "`mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\nit's best for cases where the progress or duration of a process is variable or unknown.\n\nSpinner Variants:\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\nicon or label text.\n\nSpinner Sizes:\n- **Large (96px)**: Use when replacing entire regions or pages that are still loading\n- **MidSize (48px) (Default)**: Use for most use cases.\n- **Small (24px)**: Use for inline with loading text.\n\nCustomisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\nCSS property.\n\nSpinner Colors:\n- **Default**: Use for most use cases.\n- **Inverted**: Only to be used within inverted components, such as coachmarks.\n\nRegarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\nwill be unset\nand aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.",
|
|
19947
|
+
"name": "Spinner",
|
|
19948
|
+
"cssProperties": [
|
|
19949
|
+
{
|
|
19950
|
+
"description": "Allows customization of the default spinner color.",
|
|
19951
|
+
"name": "--mdc-spinner-default-color"
|
|
19952
|
+
},
|
|
19953
|
+
{
|
|
19954
|
+
"description": "Allows customization of the inverted spinner color.",
|
|
19955
|
+
"name": "--mdc-spinner-inverted-color"
|
|
19956
|
+
},
|
|
19957
|
+
{
|
|
19958
|
+
"description": "Allows customization of the spinner Button variant color.",
|
|
19959
|
+
"name": "--mdc-spinner-button-variant-color"
|
|
19960
|
+
},
|
|
19961
|
+
{
|
|
19962
|
+
"description": "Allows customization of the spinner size.",
|
|
19963
|
+
"name": "--mdc-spinner-size"
|
|
19964
|
+
}
|
|
19965
|
+
],
|
|
19966
|
+
"cssParts": [
|
|
19967
|
+
{
|
|
19968
|
+
"description": "The svg which contains the circle spinner.",
|
|
19969
|
+
"name": "container"
|
|
19970
|
+
},
|
|
19971
|
+
{
|
|
19972
|
+
"description": "The circle of the spinner.",
|
|
19973
|
+
"name": "circle"
|
|
19974
|
+
}
|
|
19975
|
+
],
|
|
19976
|
+
"members": [
|
|
19977
|
+
{
|
|
19978
|
+
"kind": "field",
|
|
19979
|
+
"name": "inverted",
|
|
19980
|
+
"description": "The spinner color can be inverted by setting the inverted attribute to true.",
|
|
19981
|
+
"default": "false",
|
|
19982
|
+
"attribute": "inverted",
|
|
19983
|
+
"reflects": true
|
|
19984
|
+
},
|
|
19985
|
+
{
|
|
19986
|
+
"kind": "field",
|
|
19987
|
+
"name": "size",
|
|
19837
19988
|
"type": {
|
|
19838
|
-
"text": "
|
|
19989
|
+
"text": "SpinnerSize | undefined"
|
|
19839
19990
|
},
|
|
19840
|
-
"description": "
|
|
19841
|
-
"default": "
|
|
19842
|
-
"
|
|
19843
|
-
"
|
|
19844
|
-
"name": "FormfieldWrapper",
|
|
19845
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
19846
|
-
}
|
|
19991
|
+
"description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
|
|
19992
|
+
"default": "midsize",
|
|
19993
|
+
"attribute": "size",
|
|
19994
|
+
"reflects": true
|
|
19847
19995
|
},
|
|
19848
19996
|
{
|
|
19849
|
-
"
|
|
19997
|
+
"kind": "field",
|
|
19998
|
+
"name": "ariaLabel",
|
|
19850
19999
|
"type": {
|
|
19851
|
-
"text": "string |
|
|
20000
|
+
"text": "string | null"
|
|
19852
20001
|
},
|
|
19853
|
-
"
|
|
19854
|
-
"
|
|
19855
|
-
"
|
|
19856
|
-
"name": "FormfieldWrapper",
|
|
19857
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
19858
|
-
}
|
|
20002
|
+
"default": "null",
|
|
20003
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
20004
|
+
"attribute": "aria-label"
|
|
19859
20005
|
},
|
|
19860
20006
|
{
|
|
19861
|
-
"
|
|
20007
|
+
"kind": "field",
|
|
20008
|
+
"name": "variant",
|
|
19862
20009
|
"type": {
|
|
19863
|
-
"text": "
|
|
20010
|
+
"text": "SpinnerVariant"
|
|
19864
20011
|
},
|
|
19865
|
-
"description": "
|
|
19866
|
-
"
|
|
19867
|
-
"
|
|
19868
|
-
|
|
19869
|
-
|
|
19870
|
-
|
|
20012
|
+
"description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
|
|
20013
|
+
"default": "standalone",
|
|
20014
|
+
"attribute": "variant",
|
|
20015
|
+
"reflects": true
|
|
20016
|
+
}
|
|
20017
|
+
],
|
|
20018
|
+
"attributes": [
|
|
20019
|
+
{
|
|
20020
|
+
"name": "inverted",
|
|
20021
|
+
"description": "The spinner color can be inverted by setting the inverted attribute to true.",
|
|
20022
|
+
"default": "false",
|
|
20023
|
+
"fieldName": "inverted"
|
|
19871
20024
|
},
|
|
19872
20025
|
{
|
|
19873
|
-
"name": "
|
|
20026
|
+
"name": "size",
|
|
19874
20027
|
"type": {
|
|
19875
|
-
"text": "
|
|
20028
|
+
"text": "SpinnerSize | undefined"
|
|
19876
20029
|
},
|
|
19877
|
-
"
|
|
19878
|
-
"
|
|
19879
|
-
"fieldName": "
|
|
19880
|
-
"inheritedFrom": {
|
|
19881
|
-
"name": "FormfieldWrapper",
|
|
19882
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
19883
|
-
}
|
|
20030
|
+
"description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
|
|
20031
|
+
"default": "midsize",
|
|
20032
|
+
"fieldName": "size"
|
|
19884
20033
|
},
|
|
19885
20034
|
{
|
|
19886
|
-
"name": "
|
|
20035
|
+
"name": "aria-label",
|
|
19887
20036
|
"type": {
|
|
19888
|
-
"text": "
|
|
20037
|
+
"text": "string | null"
|
|
19889
20038
|
},
|
|
19890
|
-
"
|
|
19891
|
-
"
|
|
19892
|
-
"
|
|
19893
|
-
"name": "FormfieldWrapper",
|
|
19894
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
19895
|
-
}
|
|
20039
|
+
"default": "null",
|
|
20040
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
20041
|
+
"fieldName": "ariaLabel"
|
|
19896
20042
|
},
|
|
19897
20043
|
{
|
|
19898
|
-
"name": "
|
|
20044
|
+
"name": "variant",
|
|
19899
20045
|
"type": {
|
|
19900
|
-
"text": "
|
|
20046
|
+
"text": "SpinnerVariant"
|
|
19901
20047
|
},
|
|
19902
|
-
"description": "
|
|
19903
|
-
"
|
|
19904
|
-
"
|
|
19905
|
-
"name": "FormfieldWrapper",
|
|
19906
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
19907
|
-
}
|
|
19908
|
-
}
|
|
19909
|
-
],
|
|
19910
|
-
"mixins": [
|
|
19911
|
-
{
|
|
19912
|
-
"name": "FormInternalsMixin",
|
|
19913
|
-
"module": "/src/utils/mixins/FormInternalsMixin"
|
|
19914
|
-
},
|
|
19915
|
-
{
|
|
19916
|
-
"name": "DataAriaLabelMixin",
|
|
19917
|
-
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
|
20048
|
+
"description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
|
|
20049
|
+
"default": "standalone",
|
|
20050
|
+
"fieldName": "variant"
|
|
19918
20051
|
}
|
|
19919
20052
|
],
|
|
19920
20053
|
"superclass": {
|
|
19921
|
-
"name": "
|
|
19922
|
-
"module": "/src/
|
|
20054
|
+
"name": "Component",
|
|
20055
|
+
"module": "/src/models"
|
|
19923
20056
|
},
|
|
19924
|
-
"tagName": "mdc-
|
|
19925
|
-
"jsDoc": "/**\n *
|
|
20057
|
+
"tagName": "mdc-spinner",
|
|
20058
|
+
"jsDoc": "/**\n * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\n * it's best for cases where the progress or duration of a process is variable or unknown.\n *\n * Spinner Variants:\n * - **Standalone (Default)**: Track has a blue color.\n * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\n * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\n * icon or label text.\n *\n * Spinner Sizes:\n * - **Large (96px)**: Use when replacing entire regions or pages that are still loading\n * - **MidSize (48px) (Default)**: Use for most use cases.\n * - **Small (24px)**: Use for inline with loading text.\n *\n * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\n * CSS property.\n *\n * Spinner Colors:\n * - **Default**: Use for most use cases.\n * - **Inverted**: Only to be used within inverted components, such as coachmarks.\n *\n * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\n * will be unset\n * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.\n *\n * @tagname mdc-spinner\n *\n * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.\n * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.\n * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.\n * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.\n *\n * @csspart container - The svg which contains the circle spinner.\n * @csspart circle - The circle of the spinner.\n */",
|
|
19926
20059
|
"customElement": true
|
|
19927
20060
|
}
|
|
19928
20061
|
],
|
|
@@ -19931,8 +20064,8 @@
|
|
|
19931
20064
|
"kind": "js",
|
|
19932
20065
|
"name": "default",
|
|
19933
20066
|
"declaration": {
|
|
19934
|
-
"name": "
|
|
19935
|
-
"module": "components/
|
|
20067
|
+
"name": "Spinner",
|
|
20068
|
+
"module": "components/spinner/spinner.component.js"
|
|
19936
20069
|
}
|
|
19937
20070
|
}
|
|
19938
20071
|
]
|
|
@@ -20081,139 +20214,6 @@
|
|
|
20081
20214
|
}
|
|
20082
20215
|
]
|
|
20083
20216
|
},
|
|
20084
|
-
{
|
|
20085
|
-
"kind": "javascript-module",
|
|
20086
|
-
"path": "components/spinner/spinner.component.js",
|
|
20087
|
-
"declarations": [
|
|
20088
|
-
{
|
|
20089
|
-
"kind": "class",
|
|
20090
|
-
"description": "`mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\nit's best for cases where the progress or duration of a process is variable or unknown.\n\nSpinner Variants:\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\nicon or label text.\n\nSpinner Sizes:\n- **Large (96px)**: Use when replacing entire regions or pages that are still loading\n- **MidSize (48px) (Default)**: Use for most use cases.\n- **Small (24px)**: Use for inline with loading text.\n\nCustomisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\nCSS property.\n\nSpinner Colors:\n- **Default**: Use for most use cases.\n- **Inverted**: Only to be used within inverted components, such as coachmarks.\n\nRegarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\nwill be unset\nand aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.",
|
|
20091
|
-
"name": "Spinner",
|
|
20092
|
-
"cssProperties": [
|
|
20093
|
-
{
|
|
20094
|
-
"description": "Allows customization of the default spinner color.",
|
|
20095
|
-
"name": "--mdc-spinner-default-color"
|
|
20096
|
-
},
|
|
20097
|
-
{
|
|
20098
|
-
"description": "Allows customization of the inverted spinner color.",
|
|
20099
|
-
"name": "--mdc-spinner-inverted-color"
|
|
20100
|
-
},
|
|
20101
|
-
{
|
|
20102
|
-
"description": "Allows customization of the spinner Button variant color.",
|
|
20103
|
-
"name": "--mdc-spinner-button-variant-color"
|
|
20104
|
-
},
|
|
20105
|
-
{
|
|
20106
|
-
"description": "Allows customization of the spinner size.",
|
|
20107
|
-
"name": "--mdc-spinner-size"
|
|
20108
|
-
}
|
|
20109
|
-
],
|
|
20110
|
-
"cssParts": [
|
|
20111
|
-
{
|
|
20112
|
-
"description": "The svg which contains the circle spinner.",
|
|
20113
|
-
"name": "container"
|
|
20114
|
-
},
|
|
20115
|
-
{
|
|
20116
|
-
"description": "The circle of the spinner.",
|
|
20117
|
-
"name": "circle"
|
|
20118
|
-
}
|
|
20119
|
-
],
|
|
20120
|
-
"members": [
|
|
20121
|
-
{
|
|
20122
|
-
"kind": "field",
|
|
20123
|
-
"name": "inverted",
|
|
20124
|
-
"description": "The spinner color can be inverted by setting the inverted attribute to true.",
|
|
20125
|
-
"default": "false",
|
|
20126
|
-
"attribute": "inverted",
|
|
20127
|
-
"reflects": true
|
|
20128
|
-
},
|
|
20129
|
-
{
|
|
20130
|
-
"kind": "field",
|
|
20131
|
-
"name": "size",
|
|
20132
|
-
"type": {
|
|
20133
|
-
"text": "SpinnerSize | undefined"
|
|
20134
|
-
},
|
|
20135
|
-
"description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
|
|
20136
|
-
"default": "midsize",
|
|
20137
|
-
"attribute": "size",
|
|
20138
|
-
"reflects": true
|
|
20139
|
-
},
|
|
20140
|
-
{
|
|
20141
|
-
"kind": "field",
|
|
20142
|
-
"name": "ariaLabel",
|
|
20143
|
-
"type": {
|
|
20144
|
-
"text": "string | null"
|
|
20145
|
-
},
|
|
20146
|
-
"default": "null",
|
|
20147
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
20148
|
-
"attribute": "aria-label"
|
|
20149
|
-
},
|
|
20150
|
-
{
|
|
20151
|
-
"kind": "field",
|
|
20152
|
-
"name": "variant",
|
|
20153
|
-
"type": {
|
|
20154
|
-
"text": "SpinnerVariant"
|
|
20155
|
-
},
|
|
20156
|
-
"description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
|
|
20157
|
-
"default": "standalone",
|
|
20158
|
-
"attribute": "variant",
|
|
20159
|
-
"reflects": true
|
|
20160
|
-
}
|
|
20161
|
-
],
|
|
20162
|
-
"attributes": [
|
|
20163
|
-
{
|
|
20164
|
-
"name": "inverted",
|
|
20165
|
-
"description": "The spinner color can be inverted by setting the inverted attribute to true.",
|
|
20166
|
-
"default": "false",
|
|
20167
|
-
"fieldName": "inverted"
|
|
20168
|
-
},
|
|
20169
|
-
{
|
|
20170
|
-
"name": "size",
|
|
20171
|
-
"type": {
|
|
20172
|
-
"text": "SpinnerSize | undefined"
|
|
20173
|
-
},
|
|
20174
|
-
"description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
|
|
20175
|
-
"default": "midsize",
|
|
20176
|
-
"fieldName": "size"
|
|
20177
|
-
},
|
|
20178
|
-
{
|
|
20179
|
-
"name": "aria-label",
|
|
20180
|
-
"type": {
|
|
20181
|
-
"text": "string | null"
|
|
20182
|
-
},
|
|
20183
|
-
"default": "null",
|
|
20184
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
20185
|
-
"fieldName": "ariaLabel"
|
|
20186
|
-
},
|
|
20187
|
-
{
|
|
20188
|
-
"name": "variant",
|
|
20189
|
-
"type": {
|
|
20190
|
-
"text": "SpinnerVariant"
|
|
20191
|
-
},
|
|
20192
|
-
"description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
|
|
20193
|
-
"default": "standalone",
|
|
20194
|
-
"fieldName": "variant"
|
|
20195
|
-
}
|
|
20196
|
-
],
|
|
20197
|
-
"superclass": {
|
|
20198
|
-
"name": "Component",
|
|
20199
|
-
"module": "/src/models"
|
|
20200
|
-
},
|
|
20201
|
-
"tagName": "mdc-spinner",
|
|
20202
|
-
"jsDoc": "/**\n * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\n * it's best for cases where the progress or duration of a process is variable or unknown.\n *\n * Spinner Variants:\n * - **Standalone (Default)**: Track has a blue color.\n * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\n * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\n * icon or label text.\n *\n * Spinner Sizes:\n * - **Large (96px)**: Use when replacing entire regions or pages that are still loading\n * - **MidSize (48px) (Default)**: Use for most use cases.\n * - **Small (24px)**: Use for inline with loading text.\n *\n * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\n * CSS property.\n *\n * Spinner Colors:\n * - **Default**: Use for most use cases.\n * - **Inverted**: Only to be used within inverted components, such as coachmarks.\n *\n * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\n * will be unset\n * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.\n *\n * @tagname mdc-spinner\n *\n * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.\n * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.\n * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.\n * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.\n *\n * @csspart container - The svg which contains the circle spinner.\n * @csspart circle - The circle of the spinner.\n */",
|
|
20203
|
-
"customElement": true
|
|
20204
|
-
}
|
|
20205
|
-
],
|
|
20206
|
-
"exports": [
|
|
20207
|
-
{
|
|
20208
|
-
"kind": "js",
|
|
20209
|
-
"name": "default",
|
|
20210
|
-
"declaration": {
|
|
20211
|
-
"name": "Spinner",
|
|
20212
|
-
"module": "components/spinner/spinner.component.js"
|
|
20213
|
-
}
|
|
20214
|
-
}
|
|
20215
|
-
]
|
|
20216
|
-
},
|
|
20217
20217
|
{
|
|
20218
20218
|
"kind": "javascript-module",
|
|
20219
20219
|
"path": "components/staticradio/staticradio.component.js",
|