@momentum-design/components 0.51.0 → 0.51.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/index.js +38 -38
- package/dist/browser/index.js.map +2 -2
- package/dist/components/select/select.component.d.ts +1 -1
- package/dist/components/select/select.component.js +7 -7
- package/dist/custom-elements.json +671 -671
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +2 -2
- package/package.json +1 -1
|
@@ -4,176 +4,481 @@
|
|
|
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
|
-
"
|
|
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
168
|
"text": "boolean"
|
|
102
169
|
},
|
|
103
170
|
"default": "false",
|
|
104
|
-
"description": "
|
|
105
|
-
"attribute": "
|
|
171
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
172
|
+
"attribute": "is-typing",
|
|
106
173
|
"inheritedFrom": {
|
|
107
|
-
"name": "
|
|
108
|
-
"module": "
|
|
174
|
+
"name": "AvatarComponentMixin",
|
|
175
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
109
176
|
}
|
|
110
177
|
},
|
|
111
178
|
{
|
|
112
179
|
"kind": "field",
|
|
113
|
-
"name": "
|
|
180
|
+
"name": "iconName",
|
|
114
181
|
"type": {
|
|
115
|
-
"text": "
|
|
182
|
+
"text": "IconNames | undefined"
|
|
116
183
|
},
|
|
117
|
-
"description": "
|
|
118
|
-
"
|
|
119
|
-
"attribute": "size",
|
|
120
|
-
"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",
|
|
121
186
|
"inheritedFrom": {
|
|
122
|
-
"name": "
|
|
123
|
-
"module": "
|
|
187
|
+
"name": "IconNameMixin",
|
|
188
|
+
"module": "utils/mixins/IconNameMixin.js"
|
|
124
189
|
}
|
|
190
|
+
}
|
|
191
|
+
],
|
|
192
|
+
"mixins": [
|
|
193
|
+
{
|
|
194
|
+
"name": "AvatarComponentMixin",
|
|
195
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
125
196
|
},
|
|
126
197
|
{
|
|
127
|
-
"
|
|
128
|
-
"
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
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",
|
|
212
|
+
"type": {
|
|
213
|
+
"text": "string | undefined"
|
|
214
|
+
},
|
|
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",
|
|
133
217
|
"inheritedFrom": {
|
|
134
|
-
"name": "
|
|
135
|
-
"module": "
|
|
218
|
+
"name": "AvatarComponentMixin",
|
|
219
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
136
220
|
}
|
|
137
221
|
},
|
|
138
222
|
{
|
|
139
|
-
"
|
|
140
|
-
"name": "type",
|
|
223
|
+
"name": "initials",
|
|
141
224
|
"type": {
|
|
142
|
-
"text": "
|
|
225
|
+
"text": "string | undefined"
|
|
143
226
|
},
|
|
144
|
-
"description": "
|
|
145
|
-
"
|
|
146
|
-
"attribute": "type",
|
|
147
|
-
"reflects": true,
|
|
227
|
+
"description": "The initials to be displayed for the avatar.",
|
|
228
|
+
"fieldName": "initials",
|
|
148
229
|
"inheritedFrom": {
|
|
149
|
-
"name": "
|
|
150
|
-
"module": "
|
|
230
|
+
"name": "AvatarComponentMixin",
|
|
231
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
151
232
|
}
|
|
152
233
|
},
|
|
153
234
|
{
|
|
154
|
-
"
|
|
155
|
-
"
|
|
156
|
-
|
|
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",
|
|
157
241
|
"inheritedFrom": {
|
|
158
|
-
"name": "
|
|
159
|
-
"module": "
|
|
242
|
+
"name": "AvatarComponentMixin",
|
|
243
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
160
244
|
}
|
|
161
245
|
},
|
|
162
246
|
{
|
|
163
|
-
"
|
|
164
|
-
"
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
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"
|
|
392
|
+
},
|
|
393
|
+
"default": "false",
|
|
394
|
+
"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.",
|
|
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"
|
|
407
|
+
},
|
|
408
|
+
"default": "false",
|
|
409
|
+
"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.",
|
|
410
|
+
"attribute": "soft-disabled",
|
|
411
|
+
"inheritedFrom": {
|
|
412
|
+
"name": "Buttonsimple",
|
|
413
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
414
|
+
}
|
|
415
|
+
},
|
|
416
|
+
{
|
|
417
|
+
"kind": "field",
|
|
418
|
+
"name": "size",
|
|
419
|
+
"type": {
|
|
420
|
+
"text": "ButtonSize"
|
|
421
|
+
},
|
|
422
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
423
|
+
"default": "32",
|
|
424
|
+
"attribute": "size",
|
|
425
|
+
"reflects": true,
|
|
426
|
+
"inheritedFrom": {
|
|
427
|
+
"name": "Buttonsimple",
|
|
428
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
429
|
+
}
|
|
430
|
+
},
|
|
431
|
+
{
|
|
432
|
+
"kind": "field",
|
|
433
|
+
"name": "role",
|
|
434
|
+
"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.",
|
|
435
|
+
"default": "button",
|
|
436
|
+
"attribute": "role",
|
|
437
|
+
"reflects": true,
|
|
438
|
+
"inheritedFrom": {
|
|
439
|
+
"name": "Buttonsimple",
|
|
440
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
441
|
+
}
|
|
442
|
+
},
|
|
443
|
+
{
|
|
444
|
+
"kind": "field",
|
|
445
|
+
"name": "type",
|
|
446
|
+
"type": {
|
|
447
|
+
"text": "ButtonType"
|
|
448
|
+
},
|
|
449
|
+
"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.",
|
|
450
|
+
"default": "button",
|
|
451
|
+
"attribute": "type",
|
|
452
|
+
"reflects": true,
|
|
453
|
+
"inheritedFrom": {
|
|
454
|
+
"name": "Buttonsimple",
|
|
455
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
456
|
+
}
|
|
457
|
+
},
|
|
458
|
+
{
|
|
459
|
+
"kind": "method",
|
|
460
|
+
"name": "executeAction",
|
|
461
|
+
"privacy": "protected",
|
|
462
|
+
"inheritedFrom": {
|
|
463
|
+
"name": "Buttonsimple",
|
|
464
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
465
|
+
}
|
|
466
|
+
},
|
|
467
|
+
{
|
|
468
|
+
"kind": "method",
|
|
469
|
+
"name": "setActive",
|
|
470
|
+
"privacy": "protected",
|
|
471
|
+
"parameters": [
|
|
472
|
+
{
|
|
473
|
+
"name": "element",
|
|
474
|
+
"type": {
|
|
475
|
+
"text": "HTMLElement"
|
|
476
|
+
},
|
|
477
|
+
"description": "The button element"
|
|
478
|
+
},
|
|
479
|
+
{
|
|
480
|
+
"name": "active",
|
|
481
|
+
"type": {
|
|
177
482
|
"text": "boolean"
|
|
178
483
|
},
|
|
179
484
|
"description": "The active state of the element"
|
|
@@ -341,415 +646,110 @@
|
|
|
341
646
|
}
|
|
342
647
|
},
|
|
343
648
|
{
|
|
344
|
-
"name": "active",
|
|
345
|
-
"type": {
|
|
346
|
-
"text": "boolean"
|
|
347
|
-
},
|
|
348
|
-
"default": "false",
|
|
349
|
-
"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.",
|
|
350
|
-
"fieldName": "active",
|
|
351
|
-
"inheritedFrom": {
|
|
352
|
-
"name": "Buttonsimple",
|
|
353
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
354
|
-
}
|
|
355
|
-
},
|
|
356
|
-
{
|
|
357
|
-
"name": "soft-disabled",
|
|
358
|
-
"type": {
|
|
359
|
-
"text": "boolean"
|
|
360
|
-
},
|
|
361
|
-
"default": "false",
|
|
362
|
-
"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.",
|
|
363
|
-
"fieldName": "softDisabled",
|
|
364
|
-
"inheritedFrom": {
|
|
365
|
-
"name": "Buttonsimple",
|
|
366
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
367
|
-
}
|
|
368
|
-
},
|
|
369
|
-
{
|
|
370
|
-
"name": "size",
|
|
371
|
-
"type": {
|
|
372
|
-
"text": "ButtonSize"
|
|
373
|
-
},
|
|
374
|
-
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
375
|
-
"default": "32",
|
|
376
|
-
"fieldName": "size",
|
|
377
|
-
"inheritedFrom": {
|
|
378
|
-
"name": "Buttonsimple",
|
|
379
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
380
|
-
}
|
|
381
|
-
},
|
|
382
|
-
{
|
|
383
|
-
"name": "role",
|
|
384
|
-
"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.",
|
|
385
|
-
"default": "button",
|
|
386
|
-
"fieldName": "role",
|
|
387
|
-
"inheritedFrom": {
|
|
388
|
-
"name": "Buttonsimple",
|
|
389
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
390
|
-
}
|
|
391
|
-
},
|
|
392
|
-
{
|
|
393
|
-
"name": "type",
|
|
394
|
-
"type": {
|
|
395
|
-
"text": "ButtonType"
|
|
396
|
-
},
|
|
397
|
-
"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.",
|
|
398
|
-
"default": "button",
|
|
399
|
-
"fieldName": "type",
|
|
400
|
-
"inheritedFrom": {
|
|
401
|
-
"name": "Buttonsimple",
|
|
402
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
403
|
-
}
|
|
404
|
-
}
|
|
405
|
-
],
|
|
406
|
-
"superclass": {
|
|
407
|
-
"name": "Buttonsimple",
|
|
408
|
-
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
409
|
-
},
|
|
410
|
-
"tagName": "mdc-alertchip",
|
|
411
|
-
"jsDoc": "/**\n * 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 *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n */",
|
|
412
|
-
"customElement": true,
|
|
413
|
-
"events": [
|
|
414
|
-
{
|
|
415
|
-
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
|
416
|
-
"name": "click",
|
|
417
|
-
"reactName": "onClick",
|
|
418
|
-
"inheritedFrom": {
|
|
419
|
-
"name": "Buttonsimple",
|
|
420
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
421
|
-
}
|
|
422
|
-
},
|
|
423
|
-
{
|
|
424
|
-
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
|
|
425
|
-
"name": "keydown",
|
|
426
|
-
"reactName": "onKeyDown",
|
|
427
|
-
"inheritedFrom": {
|
|
428
|
-
"name": "Buttonsimple",
|
|
429
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
430
|
-
}
|
|
431
|
-
},
|
|
432
|
-
{
|
|
433
|
-
"description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
|
|
434
|
-
"name": "keyup",
|
|
435
|
-
"reactName": "onKeyUp",
|
|
436
|
-
"inheritedFrom": {
|
|
437
|
-
"name": "Buttonsimple",
|
|
438
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
439
|
-
}
|
|
440
|
-
},
|
|
441
|
-
{
|
|
442
|
-
"description": "(React: onFocus) This event is dispatched when the button receives focus.",
|
|
443
|
-
"name": "focus",
|
|
444
|
-
"reactName": "onFocus",
|
|
445
|
-
"inheritedFrom": {
|
|
446
|
-
"name": "Buttonsimple",
|
|
447
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
448
|
-
}
|
|
449
|
-
}
|
|
450
|
-
]
|
|
451
|
-
}
|
|
452
|
-
],
|
|
453
|
-
"exports": [
|
|
454
|
-
{
|
|
455
|
-
"kind": "js",
|
|
456
|
-
"name": "default",
|
|
457
|
-
"declaration": {
|
|
458
|
-
"name": "AlertChip",
|
|
459
|
-
"module": "components/alertchip/alertchip.component.js"
|
|
460
|
-
}
|
|
461
|
-
}
|
|
462
|
-
]
|
|
463
|
-
},
|
|
464
|
-
{
|
|
465
|
-
"kind": "javascript-module",
|
|
466
|
-
"path": "components/appheader/appheader.component.js",
|
|
467
|
-
"declarations": [
|
|
468
|
-
{
|
|
469
|
-
"kind": "class",
|
|
470
|
-
"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**.",
|
|
471
|
-
"name": "Appheader",
|
|
472
|
-
"cssParts": [
|
|
473
|
-
{
|
|
474
|
-
"description": "The main container for styling the header.",
|
|
475
|
-
"name": "container"
|
|
476
|
-
},
|
|
477
|
-
{
|
|
478
|
-
"description": "The leading section of the header.",
|
|
479
|
-
"name": "leading-section"
|
|
480
|
-
},
|
|
481
|
-
{
|
|
482
|
-
"description": "The center section of the header.",
|
|
483
|
-
"name": "center-section"
|
|
484
|
-
},
|
|
485
|
-
{
|
|
486
|
-
"description": "The trailing section of the header.",
|
|
487
|
-
"name": "trailing-section"
|
|
488
|
-
}
|
|
489
|
-
],
|
|
490
|
-
"slots": [
|
|
491
|
-
{
|
|
492
|
-
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
493
|
-
"name": "leading"
|
|
494
|
-
},
|
|
495
|
-
{
|
|
496
|
-
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
497
|
-
"name": "center"
|
|
498
|
-
},
|
|
499
|
-
{
|
|
500
|
-
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
501
|
-
"name": "trailing"
|
|
502
|
-
}
|
|
503
|
-
],
|
|
504
|
-
"members": [],
|
|
505
|
-
"superclass": {
|
|
506
|
-
"name": "Component",
|
|
507
|
-
"module": "/src/models"
|
|
508
|
-
},
|
|
509
|
-
"tagName": "mdc-appheader",
|
|
510
|
-
"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 */",
|
|
511
|
-
"customElement": true
|
|
512
|
-
}
|
|
513
|
-
],
|
|
514
|
-
"exports": [
|
|
515
|
-
{
|
|
516
|
-
"kind": "js",
|
|
517
|
-
"name": "default",
|
|
518
|
-
"declaration": {
|
|
519
|
-
"name": "Appheader",
|
|
520
|
-
"module": "components/appheader/appheader.component.js"
|
|
521
|
-
}
|
|
522
|
-
}
|
|
523
|
-
]
|
|
524
|
-
},
|
|
525
|
-
{
|
|
526
|
-
"kind": "javascript-module",
|
|
527
|
-
"path": "components/avatar/avatar.component.js",
|
|
528
|
-
"declarations": [
|
|
529
|
-
{
|
|
530
|
-
"kind": "class",
|
|
531
|
-
"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.",
|
|
532
|
-
"name": "Avatar",
|
|
533
|
-
"cssProperties": [
|
|
534
|
-
{
|
|
535
|
-
"description": "Allows customization of the default background color.",
|
|
536
|
-
"name": "--mdc-avatar-default-background-color"
|
|
537
|
-
},
|
|
538
|
-
{
|
|
539
|
-
"description": "Allows customization of the default foreground color.",
|
|
540
|
-
"name": "--mdc-avatar-default-foreground-color"
|
|
541
|
-
},
|
|
542
|
-
{
|
|
543
|
-
"description": "Allows customization of the loading indicator background color.",
|
|
544
|
-
"name": "--mdc-avatar-loading-indicator-background-color"
|
|
545
|
-
},
|
|
546
|
-
{
|
|
547
|
-
"description": "Allows customization of the loading indicator foreground color.",
|
|
548
|
-
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
|
549
|
-
},
|
|
550
|
-
{
|
|
551
|
-
"description": "Allows customization of the loading overlay background color.",
|
|
552
|
-
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
553
|
-
}
|
|
554
|
-
],
|
|
555
|
-
"members": [
|
|
556
|
-
{
|
|
557
|
-
"kind": "field",
|
|
558
|
-
"name": "src",
|
|
559
|
-
"type": {
|
|
560
|
-
"text": "string | undefined"
|
|
561
|
-
},
|
|
562
|
-
"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.",
|
|
563
|
-
"attribute": "src",
|
|
564
|
-
"inheritedFrom": {
|
|
565
|
-
"name": "AvatarComponentMixin",
|
|
566
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
567
|
-
}
|
|
568
|
-
},
|
|
569
|
-
{
|
|
570
|
-
"kind": "field",
|
|
571
|
-
"name": "initials",
|
|
572
|
-
"type": {
|
|
573
|
-
"text": "string | undefined"
|
|
574
|
-
},
|
|
575
|
-
"description": "The initials to be displayed for the avatar.",
|
|
576
|
-
"attribute": "initials",
|
|
577
|
-
"inheritedFrom": {
|
|
578
|
-
"name": "AvatarComponentMixin",
|
|
579
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
580
|
-
}
|
|
581
|
-
},
|
|
582
|
-
{
|
|
583
|
-
"kind": "field",
|
|
584
|
-
"name": "presence",
|
|
585
|
-
"type": {
|
|
586
|
-
"text": "PresenceType | undefined"
|
|
587
|
-
},
|
|
588
|
-
"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`",
|
|
589
|
-
"attribute": "presence",
|
|
590
|
-
"inheritedFrom": {
|
|
591
|
-
"name": "AvatarComponentMixin",
|
|
592
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
593
|
-
}
|
|
594
|
-
},
|
|
595
|
-
{
|
|
596
|
-
"kind": "field",
|
|
597
|
-
"name": "size",
|
|
598
|
-
"type": {
|
|
599
|
-
"text": "AvatarSize"
|
|
600
|
-
},
|
|
601
|
-
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
602
|
-
"default": "32",
|
|
603
|
-
"attribute": "size",
|
|
604
|
-
"reflects": true,
|
|
605
|
-
"inheritedFrom": {
|
|
606
|
-
"name": "AvatarComponentMixin",
|
|
607
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
608
|
-
}
|
|
609
|
-
},
|
|
610
|
-
{
|
|
611
|
-
"kind": "field",
|
|
612
|
-
"name": "counter",
|
|
613
|
-
"type": {
|
|
614
|
-
"text": "number | undefined"
|
|
615
|
-
},
|
|
616
|
-
"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`.",
|
|
617
|
-
"attribute": "counter",
|
|
618
|
-
"inheritedFrom": {
|
|
619
|
-
"name": "AvatarComponentMixin",
|
|
620
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
621
|
-
}
|
|
622
|
-
},
|
|
623
|
-
{
|
|
624
|
-
"kind": "field",
|
|
625
|
-
"name": "isTyping",
|
|
626
|
-
"type": {
|
|
627
|
-
"text": "boolean"
|
|
628
|
-
},
|
|
629
|
-
"default": "false",
|
|
630
|
-
"description": "Represents the typing indicator when the user is typing.",
|
|
631
|
-
"attribute": "is-typing",
|
|
632
|
-
"inheritedFrom": {
|
|
633
|
-
"name": "AvatarComponentMixin",
|
|
634
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
635
|
-
}
|
|
636
|
-
},
|
|
637
|
-
{
|
|
638
|
-
"kind": "field",
|
|
639
|
-
"name": "iconName",
|
|
640
|
-
"type": {
|
|
641
|
-
"text": "IconNames | undefined"
|
|
642
|
-
},
|
|
643
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
644
|
-
"attribute": "icon-name",
|
|
645
|
-
"inheritedFrom": {
|
|
646
|
-
"name": "IconNameMixin",
|
|
647
|
-
"module": "utils/mixins/IconNameMixin.js"
|
|
648
|
-
}
|
|
649
|
-
}
|
|
650
|
-
],
|
|
651
|
-
"mixins": [
|
|
652
|
-
{
|
|
653
|
-
"name": "AvatarComponentMixin",
|
|
654
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
655
|
-
},
|
|
656
|
-
{
|
|
657
|
-
"name": "IconNameMixin",
|
|
658
|
-
"module": "/src/utils/mixins/IconNameMixin"
|
|
659
|
-
}
|
|
660
|
-
],
|
|
661
|
-
"superclass": {
|
|
662
|
-
"name": "Component",
|
|
663
|
-
"module": "/src/models"
|
|
664
|
-
},
|
|
665
|
-
"tagName": "mdc-avatar",
|
|
666
|
-
"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 */",
|
|
667
|
-
"customElement": true,
|
|
668
|
-
"attributes": [
|
|
669
|
-
{
|
|
670
|
-
"name": "src",
|
|
671
|
-
"type": {
|
|
672
|
-
"text": "string | undefined"
|
|
673
|
-
},
|
|
674
|
-
"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.",
|
|
675
|
-
"fieldName": "src",
|
|
676
|
-
"inheritedFrom": {
|
|
677
|
-
"name": "AvatarComponentMixin",
|
|
678
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
679
|
-
}
|
|
680
|
-
},
|
|
681
|
-
{
|
|
682
|
-
"name": "initials",
|
|
649
|
+
"name": "active",
|
|
683
650
|
"type": {
|
|
684
|
-
"text": "
|
|
651
|
+
"text": "boolean"
|
|
685
652
|
},
|
|
686
|
-
"
|
|
687
|
-
"
|
|
653
|
+
"default": "false",
|
|
654
|
+
"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.",
|
|
655
|
+
"fieldName": "active",
|
|
688
656
|
"inheritedFrom": {
|
|
689
|
-
"name": "
|
|
690
|
-
"module": "src/
|
|
657
|
+
"name": "Buttonsimple",
|
|
658
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
691
659
|
}
|
|
692
660
|
},
|
|
693
661
|
{
|
|
694
|
-
"name": "
|
|
662
|
+
"name": "soft-disabled",
|
|
695
663
|
"type": {
|
|
696
|
-
"text": "
|
|
664
|
+
"text": "boolean"
|
|
697
665
|
},
|
|
698
|
-
"
|
|
699
|
-
"
|
|
666
|
+
"default": "false",
|
|
667
|
+
"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.",
|
|
668
|
+
"fieldName": "softDisabled",
|
|
700
669
|
"inheritedFrom": {
|
|
701
|
-
"name": "
|
|
702
|
-
"module": "src/
|
|
670
|
+
"name": "Buttonsimple",
|
|
671
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
703
672
|
}
|
|
704
673
|
},
|
|
705
674
|
{
|
|
706
675
|
"name": "size",
|
|
707
676
|
"type": {
|
|
708
|
-
"text": "
|
|
677
|
+
"text": "ButtonSize"
|
|
709
678
|
},
|
|
710
|
-
"description": "
|
|
679
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
711
680
|
"default": "32",
|
|
712
681
|
"fieldName": "size",
|
|
713
682
|
"inheritedFrom": {
|
|
714
|
-
"name": "
|
|
715
|
-
"module": "src/
|
|
683
|
+
"name": "Buttonsimple",
|
|
684
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
716
685
|
}
|
|
717
686
|
},
|
|
718
687
|
{
|
|
719
|
-
"name": "
|
|
720
|
-
"
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
"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`.",
|
|
724
|
-
"fieldName": "counter",
|
|
688
|
+
"name": "role",
|
|
689
|
+
"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.",
|
|
690
|
+
"default": "button",
|
|
691
|
+
"fieldName": "role",
|
|
725
692
|
"inheritedFrom": {
|
|
726
|
-
"name": "
|
|
727
|
-
"module": "src/
|
|
693
|
+
"name": "Buttonsimple",
|
|
694
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
728
695
|
}
|
|
729
696
|
},
|
|
730
697
|
{
|
|
731
|
-
"name": "
|
|
698
|
+
"name": "type",
|
|
732
699
|
"type": {
|
|
733
|
-
"text": "
|
|
700
|
+
"text": "ButtonType"
|
|
734
701
|
},
|
|
735
|
-
"
|
|
736
|
-
"
|
|
737
|
-
"fieldName": "
|
|
702
|
+
"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.",
|
|
703
|
+
"default": "button",
|
|
704
|
+
"fieldName": "type",
|
|
738
705
|
"inheritedFrom": {
|
|
739
|
-
"name": "
|
|
740
|
-
"module": "src/
|
|
706
|
+
"name": "Buttonsimple",
|
|
707
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
708
|
+
}
|
|
709
|
+
}
|
|
710
|
+
],
|
|
711
|
+
"superclass": {
|
|
712
|
+
"name": "Buttonsimple",
|
|
713
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
714
|
+
},
|
|
715
|
+
"tagName": "mdc-alertchip",
|
|
716
|
+
"jsDoc": "/**\n * 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 *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n */",
|
|
717
|
+
"customElement": true,
|
|
718
|
+
"events": [
|
|
719
|
+
{
|
|
720
|
+
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
|
721
|
+
"name": "click",
|
|
722
|
+
"reactName": "onClick",
|
|
723
|
+
"inheritedFrom": {
|
|
724
|
+
"name": "Buttonsimple",
|
|
725
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
741
726
|
}
|
|
742
727
|
},
|
|
743
728
|
{
|
|
744
|
-
"
|
|
745
|
-
"
|
|
746
|
-
|
|
747
|
-
},
|
|
748
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
749
|
-
"fieldName": "iconName",
|
|
729
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
|
|
730
|
+
"name": "keydown",
|
|
731
|
+
"reactName": "onKeyDown",
|
|
750
732
|
"inheritedFrom": {
|
|
751
|
-
"name": "
|
|
752
|
-
"module": "src/
|
|
733
|
+
"name": "Buttonsimple",
|
|
734
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
735
|
+
}
|
|
736
|
+
},
|
|
737
|
+
{
|
|
738
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
|
|
739
|
+
"name": "keyup",
|
|
740
|
+
"reactName": "onKeyUp",
|
|
741
|
+
"inheritedFrom": {
|
|
742
|
+
"name": "Buttonsimple",
|
|
743
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
744
|
+
}
|
|
745
|
+
},
|
|
746
|
+
{
|
|
747
|
+
"description": "(React: onFocus) This event is dispatched when the button receives focus.",
|
|
748
|
+
"name": "focus",
|
|
749
|
+
"reactName": "onFocus",
|
|
750
|
+
"inheritedFrom": {
|
|
751
|
+
"name": "Buttonsimple",
|
|
752
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
753
753
|
}
|
|
754
754
|
}
|
|
755
755
|
]
|
|
@@ -760,8 +760,8 @@
|
|
|
760
760
|
"kind": "js",
|
|
761
761
|
"name": "default",
|
|
762
762
|
"declaration": {
|
|
763
|
-
"name": "
|
|
764
|
-
"module": "components/
|
|
763
|
+
"name": "AlertChip",
|
|
764
|
+
"module": "components/alertchip/alertchip.component.js"
|
|
765
765
|
}
|
|
766
766
|
}
|
|
767
767
|
]
|
|
@@ -15353,96 +15353,229 @@
|
|
|
15353
15353
|
}
|
|
15354
15354
|
},
|
|
15355
15355
|
{
|
|
15356
|
-
"name": "disabled",
|
|
15356
|
+
"name": "disabled",
|
|
15357
|
+
"type": {
|
|
15358
|
+
"text": "boolean | undefined"
|
|
15359
|
+
},
|
|
15360
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
15361
|
+
"default": "undefined",
|
|
15362
|
+
"fieldName": "disabled",
|
|
15363
|
+
"inheritedFrom": {
|
|
15364
|
+
"name": "FormfieldWrapper",
|
|
15365
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
15366
|
+
}
|
|
15367
|
+
},
|
|
15368
|
+
{
|
|
15369
|
+
"name": "label",
|
|
15370
|
+
"type": {
|
|
15371
|
+
"text": "string | undefined"
|
|
15372
|
+
},
|
|
15373
|
+
"description": "The label of the input field. It is linked to the input field using the `for` attribute.",
|
|
15374
|
+
"fieldName": "label",
|
|
15375
|
+
"inheritedFrom": {
|
|
15376
|
+
"name": "FormfieldWrapper",
|
|
15377
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
15378
|
+
}
|
|
15379
|
+
},
|
|
15380
|
+
{
|
|
15381
|
+
"name": "required-label",
|
|
15382
|
+
"type": {
|
|
15383
|
+
"text": "string | undefined"
|
|
15384
|
+
},
|
|
15385
|
+
"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.",
|
|
15386
|
+
"fieldName": "requiredLabel",
|
|
15387
|
+
"inheritedFrom": {
|
|
15388
|
+
"name": "FormfieldWrapper",
|
|
15389
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
15390
|
+
}
|
|
15391
|
+
},
|
|
15392
|
+
{
|
|
15393
|
+
"name": "id",
|
|
15394
|
+
"type": {
|
|
15395
|
+
"text": "string"
|
|
15396
|
+
},
|
|
15397
|
+
"default": "''",
|
|
15398
|
+
"description": "The unique id of the input field. It is used to link the input field with the label.",
|
|
15399
|
+
"fieldName": "id",
|
|
15400
|
+
"inheritedFrom": {
|
|
15401
|
+
"name": "FormfieldWrapper",
|
|
15402
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
15403
|
+
}
|
|
15404
|
+
},
|
|
15405
|
+
{
|
|
15406
|
+
"name": "help-text-type",
|
|
15407
|
+
"type": {
|
|
15408
|
+
"text": "ValidationType"
|
|
15409
|
+
},
|
|
15410
|
+
"description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
|
|
15411
|
+
"fieldName": "helpTextType",
|
|
15412
|
+
"inheritedFrom": {
|
|
15413
|
+
"name": "FormfieldWrapper",
|
|
15414
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
15415
|
+
}
|
|
15416
|
+
},
|
|
15417
|
+
{
|
|
15418
|
+
"name": "help-text",
|
|
15419
|
+
"type": {
|
|
15420
|
+
"text": "string | undefined"
|
|
15421
|
+
},
|
|
15422
|
+
"description": "The help text that is displayed below the input field.",
|
|
15423
|
+
"fieldName": "helpText",
|
|
15424
|
+
"inheritedFrom": {
|
|
15425
|
+
"name": "FormfieldWrapper",
|
|
15426
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
15427
|
+
}
|
|
15428
|
+
}
|
|
15429
|
+
],
|
|
15430
|
+
"mixins": [
|
|
15431
|
+
{
|
|
15432
|
+
"name": "FormInternalsMixin",
|
|
15433
|
+
"module": "/src/utils/mixins/FormInternalsMixin"
|
|
15434
|
+
},
|
|
15435
|
+
{
|
|
15436
|
+
"name": "DataAriaLabelMixin",
|
|
15437
|
+
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
|
15438
|
+
}
|
|
15439
|
+
],
|
|
15440
|
+
"superclass": {
|
|
15441
|
+
"name": "FormfieldWrapper",
|
|
15442
|
+
"module": "/src/components/formfieldwrapper/formfieldwrapper.component"
|
|
15443
|
+
},
|
|
15444
|
+
"tagName": "mdc-select",
|
|
15445
|
+
"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 */",
|
|
15446
|
+
"customElement": true
|
|
15447
|
+
}
|
|
15448
|
+
],
|
|
15449
|
+
"exports": [
|
|
15450
|
+
{
|
|
15451
|
+
"kind": "js",
|
|
15452
|
+
"name": "default",
|
|
15453
|
+
"declaration": {
|
|
15454
|
+
"name": "Select",
|
|
15455
|
+
"module": "components/select/select.component.js"
|
|
15456
|
+
}
|
|
15457
|
+
}
|
|
15458
|
+
]
|
|
15459
|
+
},
|
|
15460
|
+
{
|
|
15461
|
+
"kind": "javascript-module",
|
|
15462
|
+
"path": "components/spinner/spinner.component.js",
|
|
15463
|
+
"declarations": [
|
|
15464
|
+
{
|
|
15465
|
+
"kind": "class",
|
|
15466
|
+
"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.",
|
|
15467
|
+
"name": "Spinner",
|
|
15468
|
+
"cssProperties": [
|
|
15469
|
+
{
|
|
15470
|
+
"description": "Allows customization of the default spinner color.",
|
|
15471
|
+
"name": "--mdc-spinner-default-color"
|
|
15472
|
+
},
|
|
15473
|
+
{
|
|
15474
|
+
"description": "Allows customization of the inverted spinner color.",
|
|
15475
|
+
"name": "--mdc-spinner-inverted-color"
|
|
15476
|
+
},
|
|
15477
|
+
{
|
|
15478
|
+
"description": "Allows customization of the spinner Button variant color.",
|
|
15479
|
+
"name": "--mdc-spinner-button-variant-color"
|
|
15480
|
+
},
|
|
15481
|
+
{
|
|
15482
|
+
"description": "Allows customization of the spinner size.",
|
|
15483
|
+
"name": "--mdc-spinner-size"
|
|
15484
|
+
}
|
|
15485
|
+
],
|
|
15486
|
+
"cssParts": [
|
|
15487
|
+
{
|
|
15488
|
+
"description": "The svg which contains the circle spinner.",
|
|
15489
|
+
"name": "container"
|
|
15490
|
+
},
|
|
15491
|
+
{
|
|
15492
|
+
"description": "The circle of the spinner.",
|
|
15493
|
+
"name": "circle"
|
|
15494
|
+
}
|
|
15495
|
+
],
|
|
15496
|
+
"members": [
|
|
15497
|
+
{
|
|
15498
|
+
"kind": "field",
|
|
15499
|
+
"name": "inverted",
|
|
15500
|
+
"description": "The spinner color can be inverted by setting the inverted attribute to true.",
|
|
15501
|
+
"default": "false",
|
|
15502
|
+
"attribute": "inverted",
|
|
15503
|
+
"reflects": true
|
|
15504
|
+
},
|
|
15505
|
+
{
|
|
15506
|
+
"kind": "field",
|
|
15507
|
+
"name": "size",
|
|
15357
15508
|
"type": {
|
|
15358
|
-
"text": "
|
|
15509
|
+
"text": "SpinnerSize | undefined"
|
|
15359
15510
|
},
|
|
15360
|
-
"description": "
|
|
15361
|
-
"default": "
|
|
15362
|
-
"
|
|
15363
|
-
"
|
|
15364
|
-
"name": "FormfieldWrapper",
|
|
15365
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
15366
|
-
}
|
|
15511
|
+
"description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
|
|
15512
|
+
"default": "midsize",
|
|
15513
|
+
"attribute": "size",
|
|
15514
|
+
"reflects": true
|
|
15367
15515
|
},
|
|
15368
15516
|
{
|
|
15369
|
-
"
|
|
15517
|
+
"kind": "field",
|
|
15518
|
+
"name": "ariaLabel",
|
|
15370
15519
|
"type": {
|
|
15371
|
-
"text": "string |
|
|
15520
|
+
"text": "string | null"
|
|
15372
15521
|
},
|
|
15373
|
-
"
|
|
15374
|
-
"
|
|
15375
|
-
"
|
|
15376
|
-
"name": "FormfieldWrapper",
|
|
15377
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
15378
|
-
}
|
|
15522
|
+
"default": "null",
|
|
15523
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
15524
|
+
"attribute": "aria-label"
|
|
15379
15525
|
},
|
|
15380
15526
|
{
|
|
15381
|
-
"
|
|
15527
|
+
"kind": "field",
|
|
15528
|
+
"name": "variant",
|
|
15382
15529
|
"type": {
|
|
15383
|
-
"text": "
|
|
15530
|
+
"text": "SpinnerVariant"
|
|
15384
15531
|
},
|
|
15385
|
-
"description": "
|
|
15386
|
-
"
|
|
15387
|
-
"
|
|
15388
|
-
|
|
15389
|
-
|
|
15390
|
-
|
|
15532
|
+
"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.",
|
|
15533
|
+
"default": "standalone",
|
|
15534
|
+
"attribute": "variant",
|
|
15535
|
+
"reflects": true
|
|
15536
|
+
}
|
|
15537
|
+
],
|
|
15538
|
+
"attributes": [
|
|
15539
|
+
{
|
|
15540
|
+
"name": "inverted",
|
|
15541
|
+
"description": "The spinner color can be inverted by setting the inverted attribute to true.",
|
|
15542
|
+
"default": "false",
|
|
15543
|
+
"fieldName": "inverted"
|
|
15391
15544
|
},
|
|
15392
15545
|
{
|
|
15393
|
-
"name": "
|
|
15546
|
+
"name": "size",
|
|
15394
15547
|
"type": {
|
|
15395
|
-
"text": "
|
|
15548
|
+
"text": "SpinnerSize | undefined"
|
|
15396
15549
|
},
|
|
15397
|
-
"
|
|
15398
|
-
"
|
|
15399
|
-
"fieldName": "
|
|
15400
|
-
"inheritedFrom": {
|
|
15401
|
-
"name": "FormfieldWrapper",
|
|
15402
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
15403
|
-
}
|
|
15550
|
+
"description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
|
|
15551
|
+
"default": "midsize",
|
|
15552
|
+
"fieldName": "size"
|
|
15404
15553
|
},
|
|
15405
15554
|
{
|
|
15406
|
-
"name": "
|
|
15555
|
+
"name": "aria-label",
|
|
15407
15556
|
"type": {
|
|
15408
|
-
"text": "
|
|
15557
|
+
"text": "string | null"
|
|
15409
15558
|
},
|
|
15410
|
-
"
|
|
15411
|
-
"
|
|
15412
|
-
"
|
|
15413
|
-
"name": "FormfieldWrapper",
|
|
15414
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
15415
|
-
}
|
|
15559
|
+
"default": "null",
|
|
15560
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
15561
|
+
"fieldName": "ariaLabel"
|
|
15416
15562
|
},
|
|
15417
15563
|
{
|
|
15418
|
-
"name": "
|
|
15564
|
+
"name": "variant",
|
|
15419
15565
|
"type": {
|
|
15420
|
-
"text": "
|
|
15566
|
+
"text": "SpinnerVariant"
|
|
15421
15567
|
},
|
|
15422
|
-
"description": "
|
|
15423
|
-
"
|
|
15424
|
-
"
|
|
15425
|
-
"name": "FormfieldWrapper",
|
|
15426
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
15427
|
-
}
|
|
15428
|
-
}
|
|
15429
|
-
],
|
|
15430
|
-
"mixins": [
|
|
15431
|
-
{
|
|
15432
|
-
"name": "FormInternalsMixin",
|
|
15433
|
-
"module": "/src/utils/mixins/FormInternalsMixin"
|
|
15434
|
-
},
|
|
15435
|
-
{
|
|
15436
|
-
"name": "DataAriaLabelMixin",
|
|
15437
|
-
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
|
15568
|
+
"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.",
|
|
15569
|
+
"default": "standalone",
|
|
15570
|
+
"fieldName": "variant"
|
|
15438
15571
|
}
|
|
15439
15572
|
],
|
|
15440
15573
|
"superclass": {
|
|
15441
|
-
"name": "
|
|
15442
|
-
"module": "/src/
|
|
15574
|
+
"name": "Component",
|
|
15575
|
+
"module": "/src/models"
|
|
15443
15576
|
},
|
|
15444
|
-
"tagName": "mdc-
|
|
15445
|
-
"jsDoc": "/**\n *
|
|
15577
|
+
"tagName": "mdc-spinner",
|
|
15578
|
+
"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 */",
|
|
15446
15579
|
"customElement": true
|
|
15447
15580
|
}
|
|
15448
15581
|
],
|
|
@@ -15451,8 +15584,8 @@
|
|
|
15451
15584
|
"kind": "js",
|
|
15452
15585
|
"name": "default",
|
|
15453
15586
|
"declaration": {
|
|
15454
|
-
"name": "
|
|
15455
|
-
"module": "components/
|
|
15587
|
+
"name": "Spinner",
|
|
15588
|
+
"module": "components/spinner/spinner.component.js"
|
|
15456
15589
|
}
|
|
15457
15590
|
}
|
|
15458
15591
|
]
|
|
@@ -16255,139 +16388,6 @@
|
|
|
16255
16388
|
}
|
|
16256
16389
|
]
|
|
16257
16390
|
},
|
|
16258
|
-
{
|
|
16259
|
-
"kind": "javascript-module",
|
|
16260
|
-
"path": "components/spinner/spinner.component.js",
|
|
16261
|
-
"declarations": [
|
|
16262
|
-
{
|
|
16263
|
-
"kind": "class",
|
|
16264
|
-
"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.",
|
|
16265
|
-
"name": "Spinner",
|
|
16266
|
-
"cssProperties": [
|
|
16267
|
-
{
|
|
16268
|
-
"description": "Allows customization of the default spinner color.",
|
|
16269
|
-
"name": "--mdc-spinner-default-color"
|
|
16270
|
-
},
|
|
16271
|
-
{
|
|
16272
|
-
"description": "Allows customization of the inverted spinner color.",
|
|
16273
|
-
"name": "--mdc-spinner-inverted-color"
|
|
16274
|
-
},
|
|
16275
|
-
{
|
|
16276
|
-
"description": "Allows customization of the spinner Button variant color.",
|
|
16277
|
-
"name": "--mdc-spinner-button-variant-color"
|
|
16278
|
-
},
|
|
16279
|
-
{
|
|
16280
|
-
"description": "Allows customization of the spinner size.",
|
|
16281
|
-
"name": "--mdc-spinner-size"
|
|
16282
|
-
}
|
|
16283
|
-
],
|
|
16284
|
-
"cssParts": [
|
|
16285
|
-
{
|
|
16286
|
-
"description": "The svg which contains the circle spinner.",
|
|
16287
|
-
"name": "container"
|
|
16288
|
-
},
|
|
16289
|
-
{
|
|
16290
|
-
"description": "The circle of the spinner.",
|
|
16291
|
-
"name": "circle"
|
|
16292
|
-
}
|
|
16293
|
-
],
|
|
16294
|
-
"members": [
|
|
16295
|
-
{
|
|
16296
|
-
"kind": "field",
|
|
16297
|
-
"name": "inverted",
|
|
16298
|
-
"description": "The spinner color can be inverted by setting the inverted attribute to true.",
|
|
16299
|
-
"default": "false",
|
|
16300
|
-
"attribute": "inverted",
|
|
16301
|
-
"reflects": true
|
|
16302
|
-
},
|
|
16303
|
-
{
|
|
16304
|
-
"kind": "field",
|
|
16305
|
-
"name": "size",
|
|
16306
|
-
"type": {
|
|
16307
|
-
"text": "SpinnerSize | undefined"
|
|
16308
|
-
},
|
|
16309
|
-
"description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
|
|
16310
|
-
"default": "midsize",
|
|
16311
|
-
"attribute": "size",
|
|
16312
|
-
"reflects": true
|
|
16313
|
-
},
|
|
16314
|
-
{
|
|
16315
|
-
"kind": "field",
|
|
16316
|
-
"name": "ariaLabel",
|
|
16317
|
-
"type": {
|
|
16318
|
-
"text": "string | null"
|
|
16319
|
-
},
|
|
16320
|
-
"default": "null",
|
|
16321
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
16322
|
-
"attribute": "aria-label"
|
|
16323
|
-
},
|
|
16324
|
-
{
|
|
16325
|
-
"kind": "field",
|
|
16326
|
-
"name": "variant",
|
|
16327
|
-
"type": {
|
|
16328
|
-
"text": "SpinnerVariant"
|
|
16329
|
-
},
|
|
16330
|
-
"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.",
|
|
16331
|
-
"default": "standalone",
|
|
16332
|
-
"attribute": "variant",
|
|
16333
|
-
"reflects": true
|
|
16334
|
-
}
|
|
16335
|
-
],
|
|
16336
|
-
"attributes": [
|
|
16337
|
-
{
|
|
16338
|
-
"name": "inverted",
|
|
16339
|
-
"description": "The spinner color can be inverted by setting the inverted attribute to true.",
|
|
16340
|
-
"default": "false",
|
|
16341
|
-
"fieldName": "inverted"
|
|
16342
|
-
},
|
|
16343
|
-
{
|
|
16344
|
-
"name": "size",
|
|
16345
|
-
"type": {
|
|
16346
|
-
"text": "SpinnerSize | undefined"
|
|
16347
|
-
},
|
|
16348
|
-
"description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
|
|
16349
|
-
"default": "midsize",
|
|
16350
|
-
"fieldName": "size"
|
|
16351
|
-
},
|
|
16352
|
-
{
|
|
16353
|
-
"name": "aria-label",
|
|
16354
|
-
"type": {
|
|
16355
|
-
"text": "string | null"
|
|
16356
|
-
},
|
|
16357
|
-
"default": "null",
|
|
16358
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
16359
|
-
"fieldName": "ariaLabel"
|
|
16360
|
-
},
|
|
16361
|
-
{
|
|
16362
|
-
"name": "variant",
|
|
16363
|
-
"type": {
|
|
16364
|
-
"text": "SpinnerVariant"
|
|
16365
|
-
},
|
|
16366
|
-
"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.",
|
|
16367
|
-
"default": "standalone",
|
|
16368
|
-
"fieldName": "variant"
|
|
16369
|
-
}
|
|
16370
|
-
],
|
|
16371
|
-
"superclass": {
|
|
16372
|
-
"name": "Component",
|
|
16373
|
-
"module": "/src/models"
|
|
16374
|
-
},
|
|
16375
|
-
"tagName": "mdc-spinner",
|
|
16376
|
-
"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 */",
|
|
16377
|
-
"customElement": true
|
|
16378
|
-
}
|
|
16379
|
-
],
|
|
16380
|
-
"exports": [
|
|
16381
|
-
{
|
|
16382
|
-
"kind": "js",
|
|
16383
|
-
"name": "default",
|
|
16384
|
-
"declaration": {
|
|
16385
|
-
"name": "Spinner",
|
|
16386
|
-
"module": "components/spinner/spinner.component.js"
|
|
16387
|
-
}
|
|
16388
|
-
}
|
|
16389
|
-
]
|
|
16390
|
-
},
|
|
16391
16391
|
{
|
|
16392
16392
|
"kind": "javascript-module",
|
|
16393
16393
|
"path": "components/textarea/textarea.component.js",
|