@momentum-design/components 0.81.4 → 0.81.6
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 +6 -11
- package/dist/browser/index.js.map +2 -2
- package/dist/components/dialog/dialog.component.js +5 -4
- package/dist/components/dialog/dialog.styles.js +2 -7
- package/dist/custom-elements.json +999 -999
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +2 -2
- package/package.json +1 -1
|
@@ -4,203 +4,509 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "components/
|
|
7
|
+
"path": "components/alertchip/alertchip.component.js",
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "
|
|
12
|
-
"name": "
|
|
11
|
+
"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.",
|
|
12
|
+
"name": "AlertChip",
|
|
13
|
+
"cssProperties": [
|
|
14
|
+
{
|
|
15
|
+
"description": "The color of the label text",
|
|
16
|
+
"name": "--mdc-chip-color"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"description": "The color of the icon",
|
|
20
|
+
"name": "--mdc-chip-icon-color"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"description": "The border color of the alertchip",
|
|
24
|
+
"name": "--mdc-chip-border-color"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"description": "The background color of the alertchip",
|
|
28
|
+
"name": "--mdc-chip-background-color"
|
|
29
|
+
}
|
|
30
|
+
],
|
|
13
31
|
"members": [
|
|
14
32
|
{
|
|
15
33
|
"kind": "field",
|
|
16
|
-
"name": "
|
|
34
|
+
"name": "variant",
|
|
17
35
|
"type": {
|
|
18
|
-
"text": "
|
|
36
|
+
"text": "VariantType"
|
|
19
37
|
},
|
|
20
|
-
"description": "
|
|
21
|
-
"
|
|
22
|
-
"
|
|
38
|
+
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
39
|
+
"default": "neutral",
|
|
40
|
+
"attribute": "variant"
|
|
23
41
|
},
|
|
24
42
|
{
|
|
25
43
|
"kind": "field",
|
|
26
|
-
"name": "
|
|
44
|
+
"name": "label",
|
|
27
45
|
"type": {
|
|
28
|
-
"text": "
|
|
46
|
+
"text": "string"
|
|
29
47
|
},
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
48
|
+
"default": "''",
|
|
49
|
+
"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.",
|
|
50
|
+
"attribute": "label"
|
|
33
51
|
},
|
|
34
52
|
{
|
|
35
53
|
"kind": "field",
|
|
36
|
-
"name": "
|
|
54
|
+
"name": "autofocus",
|
|
55
|
+
"type": {
|
|
56
|
+
"text": "boolean"
|
|
57
|
+
},
|
|
58
|
+
"default": "false",
|
|
59
|
+
"description": "This property indicates whether the element should receive focus automatically when it is rendered.",
|
|
60
|
+
"attribute": "autofocus",
|
|
61
|
+
"reflects": true,
|
|
62
|
+
"inheritedFrom": {
|
|
63
|
+
"name": "AutoFocusMixin",
|
|
64
|
+
"module": "utils/mixins/AutoFocusMixin.js"
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"kind": "field",
|
|
69
|
+
"name": "tabIndex",
|
|
70
|
+
"type": {
|
|
71
|
+
"text": "number"
|
|
72
|
+
},
|
|
73
|
+
"default": "0",
|
|
74
|
+
"description": "This property specifies the tab order of the element.",
|
|
75
|
+
"attribute": "tabIndex",
|
|
76
|
+
"reflects": true,
|
|
77
|
+
"inheritedFrom": {
|
|
78
|
+
"name": "TabIndexMixin",
|
|
79
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"kind": "field",
|
|
84
|
+
"name": "disabled",
|
|
37
85
|
"type": {
|
|
38
86
|
"text": "boolean | undefined"
|
|
39
87
|
},
|
|
40
|
-
"description": "
|
|
41
|
-
"
|
|
42
|
-
"
|
|
88
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
89
|
+
"default": "undefined",
|
|
90
|
+
"attribute": "disabled",
|
|
91
|
+
"reflects": true,
|
|
92
|
+
"inheritedFrom": {
|
|
93
|
+
"name": "DisabledMixin",
|
|
94
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
95
|
+
}
|
|
43
96
|
},
|
|
44
97
|
{
|
|
45
98
|
"kind": "field",
|
|
46
|
-
"name": "
|
|
99
|
+
"name": "active",
|
|
47
100
|
"type": {
|
|
48
|
-
"text": "
|
|
101
|
+
"text": "boolean | undefined"
|
|
49
102
|
},
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"attribute": "
|
|
103
|
+
"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.",
|
|
104
|
+
"default": "undefined",
|
|
105
|
+
"attribute": "active",
|
|
106
|
+
"reflects": true,
|
|
107
|
+
"inheritedFrom": {
|
|
108
|
+
"name": "Buttonsimple",
|
|
109
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
110
|
+
}
|
|
53
111
|
},
|
|
54
112
|
{
|
|
55
113
|
"kind": "field",
|
|
56
|
-
"name": "
|
|
114
|
+
"name": "softDisabled",
|
|
57
115
|
"type": {
|
|
58
|
-
"text": "
|
|
116
|
+
"text": "boolean | undefined"
|
|
59
117
|
},
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"attribute": "
|
|
118
|
+
"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.",
|
|
119
|
+
"default": "undefined",
|
|
120
|
+
"attribute": "soft-disabled",
|
|
121
|
+
"reflects": true,
|
|
122
|
+
"inheritedFrom": {
|
|
123
|
+
"name": "Buttonsimple",
|
|
124
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
125
|
+
}
|
|
63
126
|
},
|
|
64
127
|
{
|
|
65
128
|
"kind": "field",
|
|
66
|
-
"name": "
|
|
129
|
+
"name": "size",
|
|
67
130
|
"type": {
|
|
68
|
-
"text": "
|
|
131
|
+
"text": "ButtonSize"
|
|
69
132
|
},
|
|
70
|
-
"
|
|
71
|
-
"
|
|
133
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
134
|
+
"default": "32",
|
|
135
|
+
"attribute": "size",
|
|
136
|
+
"reflects": true,
|
|
137
|
+
"inheritedFrom": {
|
|
138
|
+
"name": "Buttonsimple",
|
|
139
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
140
|
+
}
|
|
72
141
|
},
|
|
73
142
|
{
|
|
74
143
|
"kind": "field",
|
|
75
|
-
"name": "
|
|
144
|
+
"name": "role",
|
|
145
|
+
"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.",
|
|
146
|
+
"default": "button",
|
|
147
|
+
"attribute": "role",
|
|
148
|
+
"reflects": true,
|
|
149
|
+
"inheritedFrom": {
|
|
150
|
+
"name": "Buttonsimple",
|
|
151
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
152
|
+
}
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
"kind": "field",
|
|
156
|
+
"name": "ariaStateKey",
|
|
76
157
|
"type": {
|
|
77
|
-
"text": "
|
|
158
|
+
"text": "string | undefined"
|
|
78
159
|
},
|
|
79
|
-
"
|
|
80
|
-
"
|
|
160
|
+
"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`",
|
|
161
|
+
"default": "'aria-pressed' (when)",
|
|
162
|
+
"attribute": "ariaStateKey",
|
|
163
|
+
"reflects": true,
|
|
164
|
+
"inheritedFrom": {
|
|
165
|
+
"name": "Buttonsimple",
|
|
166
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
167
|
+
}
|
|
81
168
|
},
|
|
82
169
|
{
|
|
83
170
|
"kind": "field",
|
|
84
|
-
"name": "
|
|
85
|
-
"
|
|
86
|
-
|
|
171
|
+
"name": "type",
|
|
172
|
+
"type": {
|
|
173
|
+
"text": "ButtonType"
|
|
174
|
+
},
|
|
175
|
+
"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.",
|
|
176
|
+
"default": "button",
|
|
177
|
+
"attribute": "type",
|
|
178
|
+
"reflects": true,
|
|
179
|
+
"inheritedFrom": {
|
|
180
|
+
"name": "Buttonsimple",
|
|
181
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
182
|
+
}
|
|
87
183
|
},
|
|
88
184
|
{
|
|
89
185
|
"kind": "method",
|
|
90
|
-
"name": "
|
|
91
|
-
"privacy": "
|
|
186
|
+
"name": "executeAction",
|
|
187
|
+
"privacy": "protected",
|
|
188
|
+
"inheritedFrom": {
|
|
189
|
+
"name": "Buttonsimple",
|
|
190
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
191
|
+
}
|
|
92
192
|
},
|
|
93
193
|
{
|
|
94
194
|
"kind": "method",
|
|
95
|
-
"name": "
|
|
96
|
-
"privacy": "
|
|
195
|
+
"name": "setActive",
|
|
196
|
+
"privacy": "protected",
|
|
97
197
|
"parameters": [
|
|
98
198
|
{
|
|
99
|
-
"name": "
|
|
199
|
+
"name": "element",
|
|
100
200
|
"type": {
|
|
101
|
-
"text": "
|
|
102
|
-
}
|
|
201
|
+
"text": "HTMLElement"
|
|
202
|
+
},
|
|
203
|
+
"description": "The button element"
|
|
204
|
+
},
|
|
205
|
+
{
|
|
206
|
+
"name": "active",
|
|
207
|
+
"optional": true,
|
|
208
|
+
"type": {
|
|
209
|
+
"text": "boolean"
|
|
210
|
+
},
|
|
211
|
+
"description": "The active state of the element"
|
|
103
212
|
}
|
|
104
213
|
],
|
|
105
|
-
"description": "
|
|
214
|
+
"description": "Sets the ariaStateKey attributes based on the active state of the button.",
|
|
215
|
+
"inheritedFrom": {
|
|
216
|
+
"name": "Buttonsimple",
|
|
217
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
218
|
+
}
|
|
106
219
|
},
|
|
107
220
|
{
|
|
108
221
|
"kind": "method",
|
|
109
|
-
"name": "
|
|
222
|
+
"name": "setSoftDisabled",
|
|
110
223
|
"privacy": "private",
|
|
111
224
|
"parameters": [
|
|
112
225
|
{
|
|
113
|
-
"name": "
|
|
226
|
+
"name": "element",
|
|
114
227
|
"type": {
|
|
115
|
-
"text": "
|
|
116
|
-
}
|
|
228
|
+
"text": "HTMLElement"
|
|
229
|
+
},
|
|
230
|
+
"description": "The button element."
|
|
231
|
+
},
|
|
232
|
+
{
|
|
233
|
+
"name": "softDisabled",
|
|
234
|
+
"optional": true,
|
|
235
|
+
"type": {
|
|
236
|
+
"text": "boolean"
|
|
237
|
+
},
|
|
238
|
+
"description": "The soft-disabled state."
|
|
117
239
|
}
|
|
118
240
|
],
|
|
119
|
-
"description": "
|
|
241
|
+
"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.",
|
|
242
|
+
"inheritedFrom": {
|
|
243
|
+
"name": "Buttonsimple",
|
|
244
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
245
|
+
}
|
|
120
246
|
},
|
|
121
247
|
{
|
|
122
248
|
"kind": "method",
|
|
123
|
-
"name": "
|
|
249
|
+
"name": "setDisabled",
|
|
124
250
|
"privacy": "private",
|
|
125
|
-
"
|
|
251
|
+
"parameters": [
|
|
252
|
+
{
|
|
253
|
+
"name": "element",
|
|
254
|
+
"type": {
|
|
255
|
+
"text": "HTMLElement"
|
|
256
|
+
},
|
|
257
|
+
"description": "The button element."
|
|
258
|
+
},
|
|
259
|
+
{
|
|
260
|
+
"name": "disabled",
|
|
261
|
+
"type": {
|
|
262
|
+
"text": "boolean"
|
|
263
|
+
},
|
|
264
|
+
"description": "The disabled state."
|
|
265
|
+
}
|
|
266
|
+
],
|
|
267
|
+
"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.",
|
|
268
|
+
"inheritedFrom": {
|
|
269
|
+
"name": "Buttonsimple",
|
|
270
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
271
|
+
}
|
|
126
272
|
},
|
|
127
273
|
{
|
|
128
|
-
"kind": "
|
|
129
|
-
"name": "
|
|
130
|
-
"
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
274
|
+
"kind": "method",
|
|
275
|
+
"name": "triggerClickEvent",
|
|
276
|
+
"privacy": "private",
|
|
277
|
+
"inheritedFrom": {
|
|
278
|
+
"name": "Buttonsimple",
|
|
279
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
280
|
+
}
|
|
281
|
+
},
|
|
134
282
|
{
|
|
135
|
-
"
|
|
136
|
-
"
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
"
|
|
140
|
-
|
|
283
|
+
"kind": "method",
|
|
284
|
+
"name": "handleBlur",
|
|
285
|
+
"privacy": "private",
|
|
286
|
+
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
|
287
|
+
"inheritedFrom": {
|
|
288
|
+
"name": "Buttonsimple",
|
|
289
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
290
|
+
}
|
|
141
291
|
},
|
|
142
292
|
{
|
|
143
|
-
"
|
|
144
|
-
"name": "
|
|
145
|
-
"
|
|
293
|
+
"kind": "method",
|
|
294
|
+
"name": "handleKeyDown",
|
|
295
|
+
"privacy": "private",
|
|
296
|
+
"parameters": [
|
|
297
|
+
{
|
|
298
|
+
"name": "event",
|
|
299
|
+
"type": {
|
|
300
|
+
"text": "KeyboardEvent"
|
|
301
|
+
},
|
|
302
|
+
"description": "The keyboard event."
|
|
303
|
+
}
|
|
304
|
+
],
|
|
305
|
+
"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.",
|
|
306
|
+
"inheritedFrom": {
|
|
307
|
+
"name": "Buttonsimple",
|
|
308
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
309
|
+
}
|
|
146
310
|
},
|
|
147
311
|
{
|
|
148
|
-
"
|
|
149
|
-
"name": "
|
|
150
|
-
"
|
|
312
|
+
"kind": "method",
|
|
313
|
+
"name": "handleKeyUp",
|
|
314
|
+
"privacy": "private",
|
|
315
|
+
"parameters": [
|
|
316
|
+
{
|
|
317
|
+
"name": "event",
|
|
318
|
+
"type": {
|
|
319
|
+
"text": "KeyboardEvent"
|
|
320
|
+
},
|
|
321
|
+
"description": "The keyboard event."
|
|
322
|
+
}
|
|
323
|
+
],
|
|
324
|
+
"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.",
|
|
325
|
+
"inheritedFrom": {
|
|
326
|
+
"name": "Buttonsimple",
|
|
327
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
328
|
+
}
|
|
151
329
|
}
|
|
152
330
|
],
|
|
153
331
|
"attributes": [
|
|
154
332
|
{
|
|
155
|
-
"name": "
|
|
333
|
+
"name": "variant",
|
|
156
334
|
"type": {
|
|
157
|
-
"text": "
|
|
335
|
+
"text": "VariantType"
|
|
158
336
|
},
|
|
159
|
-
"description": "
|
|
160
|
-
"
|
|
337
|
+
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
338
|
+
"default": "neutral",
|
|
339
|
+
"fieldName": "variant"
|
|
161
340
|
},
|
|
162
341
|
{
|
|
163
|
-
"name": "
|
|
342
|
+
"name": "label",
|
|
164
343
|
"type": {
|
|
165
|
-
"text": "
|
|
344
|
+
"text": "string"
|
|
166
345
|
},
|
|
167
|
-
"
|
|
168
|
-
"
|
|
346
|
+
"default": "''",
|
|
347
|
+
"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.",
|
|
348
|
+
"fieldName": "label"
|
|
169
349
|
},
|
|
170
350
|
{
|
|
171
|
-
"name": "
|
|
351
|
+
"name": "autofocus",
|
|
352
|
+
"type": {
|
|
353
|
+
"text": "boolean"
|
|
354
|
+
},
|
|
355
|
+
"default": "false",
|
|
356
|
+
"description": "This property indicates whether the element should receive focus automatically when it is rendered.",
|
|
357
|
+
"fieldName": "autofocus",
|
|
358
|
+
"inheritedFrom": {
|
|
359
|
+
"name": "AutoFocusMixin",
|
|
360
|
+
"module": "src/utils/mixins/AutoFocusMixin.ts"
|
|
361
|
+
}
|
|
362
|
+
},
|
|
363
|
+
{
|
|
364
|
+
"name": "tabIndex",
|
|
365
|
+
"type": {
|
|
366
|
+
"text": "number"
|
|
367
|
+
},
|
|
368
|
+
"default": "0",
|
|
369
|
+
"description": "This property specifies the tab order of the element.",
|
|
370
|
+
"fieldName": "tabIndex",
|
|
371
|
+
"inheritedFrom": {
|
|
372
|
+
"name": "TabIndexMixin",
|
|
373
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
374
|
+
}
|
|
375
|
+
},
|
|
376
|
+
{
|
|
377
|
+
"name": "disabled",
|
|
172
378
|
"type": {
|
|
173
379
|
"text": "boolean | undefined"
|
|
174
380
|
},
|
|
175
|
-
"description": "
|
|
176
|
-
"
|
|
381
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
382
|
+
"default": "undefined",
|
|
383
|
+
"fieldName": "disabled",
|
|
384
|
+
"inheritedFrom": {
|
|
385
|
+
"name": "DisabledMixin",
|
|
386
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
387
|
+
}
|
|
177
388
|
},
|
|
178
389
|
{
|
|
179
|
-
"name": "
|
|
390
|
+
"name": "active",
|
|
180
391
|
"type": {
|
|
181
|
-
"text": "
|
|
392
|
+
"text": "boolean | undefined"
|
|
182
393
|
},
|
|
183
|
-
"
|
|
184
|
-
"
|
|
185
|
-
"fieldName": "
|
|
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.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
|
395
|
+
"default": "undefined",
|
|
396
|
+
"fieldName": "active",
|
|
397
|
+
"inheritedFrom": {
|
|
398
|
+
"name": "Buttonsimple",
|
|
399
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
400
|
+
}
|
|
186
401
|
},
|
|
187
402
|
{
|
|
188
|
-
"name": "
|
|
403
|
+
"name": "soft-disabled",
|
|
189
404
|
"type": {
|
|
190
|
-
"text": "
|
|
405
|
+
"text": "boolean | undefined"
|
|
191
406
|
},
|
|
192
|
-
"
|
|
193
|
-
"
|
|
194
|
-
"fieldName": "
|
|
407
|
+
"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.",
|
|
408
|
+
"default": "undefined",
|
|
409
|
+
"fieldName": "softDisabled",
|
|
410
|
+
"inheritedFrom": {
|
|
411
|
+
"name": "Buttonsimple",
|
|
412
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
413
|
+
}
|
|
414
|
+
},
|
|
415
|
+
{
|
|
416
|
+
"name": "size",
|
|
417
|
+
"type": {
|
|
418
|
+
"text": "ButtonSize"
|
|
419
|
+
},
|
|
420
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
421
|
+
"default": "32",
|
|
422
|
+
"fieldName": "size",
|
|
423
|
+
"inheritedFrom": {
|
|
424
|
+
"name": "Buttonsimple",
|
|
425
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
426
|
+
}
|
|
427
|
+
},
|
|
428
|
+
{
|
|
429
|
+
"name": "role",
|
|
430
|
+
"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.",
|
|
431
|
+
"default": "button",
|
|
432
|
+
"fieldName": "role",
|
|
433
|
+
"inheritedFrom": {
|
|
434
|
+
"name": "Buttonsimple",
|
|
435
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
436
|
+
}
|
|
437
|
+
},
|
|
438
|
+
{
|
|
439
|
+
"name": "ariaStateKey",
|
|
440
|
+
"type": {
|
|
441
|
+
"text": "string | undefined"
|
|
442
|
+
},
|
|
443
|
+
"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`",
|
|
444
|
+
"default": "'aria-pressed' (when)",
|
|
445
|
+
"fieldName": "ariaStateKey",
|
|
446
|
+
"inheritedFrom": {
|
|
447
|
+
"name": "Buttonsimple",
|
|
448
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
449
|
+
}
|
|
450
|
+
},
|
|
451
|
+
{
|
|
452
|
+
"name": "type",
|
|
453
|
+
"type": {
|
|
454
|
+
"text": "ButtonType"
|
|
455
|
+
},
|
|
456
|
+
"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.",
|
|
457
|
+
"default": "button",
|
|
458
|
+
"fieldName": "type",
|
|
459
|
+
"inheritedFrom": {
|
|
460
|
+
"name": "Buttonsimple",
|
|
461
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
462
|
+
}
|
|
195
463
|
}
|
|
196
464
|
],
|
|
197
465
|
"superclass": {
|
|
198
|
-
"name": "
|
|
199
|
-
"module": "/src/
|
|
466
|
+
"name": "Buttonsimple",
|
|
467
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
200
468
|
},
|
|
201
|
-
"tagName": "mdc-
|
|
202
|
-
"jsDoc": "/**\n *
|
|
203
|
-
"customElement": true
|
|
469
|
+
"tagName": "mdc-alertchip",
|
|
470
|
+
"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 */",
|
|
471
|
+
"customElement": true,
|
|
472
|
+
"events": [
|
|
473
|
+
{
|
|
474
|
+
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
|
475
|
+
"name": "click",
|
|
476
|
+
"reactName": "onClick",
|
|
477
|
+
"inheritedFrom": {
|
|
478
|
+
"name": "Buttonsimple",
|
|
479
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
480
|
+
}
|
|
481
|
+
},
|
|
482
|
+
{
|
|
483
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
|
|
484
|
+
"name": "keydown",
|
|
485
|
+
"reactName": "onKeyDown",
|
|
486
|
+
"inheritedFrom": {
|
|
487
|
+
"name": "Buttonsimple",
|
|
488
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
489
|
+
}
|
|
490
|
+
},
|
|
491
|
+
{
|
|
492
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
|
|
493
|
+
"name": "keyup",
|
|
494
|
+
"reactName": "onKeyUp",
|
|
495
|
+
"inheritedFrom": {
|
|
496
|
+
"name": "Buttonsimple",
|
|
497
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
498
|
+
}
|
|
499
|
+
},
|
|
500
|
+
{
|
|
501
|
+
"description": "(React: onFocus) This event is dispatched when the button receives focus.",
|
|
502
|
+
"name": "focus",
|
|
503
|
+
"reactName": "onFocus",
|
|
504
|
+
"inheritedFrom": {
|
|
505
|
+
"name": "Buttonsimple",
|
|
506
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
507
|
+
}
|
|
508
|
+
}
|
|
509
|
+
]
|
|
204
510
|
}
|
|
205
511
|
],
|
|
206
512
|
"exports": [
|
|
@@ -208,21 +514,233 @@
|
|
|
208
514
|
"kind": "js",
|
|
209
515
|
"name": "default",
|
|
210
516
|
"declaration": {
|
|
211
|
-
"name": "
|
|
212
|
-
"module": "components/
|
|
517
|
+
"name": "AlertChip",
|
|
518
|
+
"module": "components/alertchip/alertchip.component.js"
|
|
213
519
|
}
|
|
214
520
|
}
|
|
215
521
|
]
|
|
216
522
|
},
|
|
217
523
|
{
|
|
218
524
|
"kind": "javascript-module",
|
|
219
|
-
"path": "components/
|
|
525
|
+
"path": "components/animation/animation.component.js",
|
|
220
526
|
"declarations": [
|
|
221
527
|
{
|
|
222
528
|
"kind": "class",
|
|
223
|
-
"description": "The `mdc-
|
|
224
|
-
"name": "
|
|
225
|
-
"
|
|
529
|
+
"description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
|
|
530
|
+
"name": "Animation",
|
|
531
|
+
"members": [
|
|
532
|
+
{
|
|
533
|
+
"kind": "field",
|
|
534
|
+
"name": "name",
|
|
535
|
+
"type": {
|
|
536
|
+
"text": "AnimationNames | undefined"
|
|
537
|
+
},
|
|
538
|
+
"description": "Name of the animation (= filename)",
|
|
539
|
+
"attribute": "name",
|
|
540
|
+
"reflects": true
|
|
541
|
+
},
|
|
542
|
+
{
|
|
543
|
+
"kind": "field",
|
|
544
|
+
"name": "loop",
|
|
545
|
+
"type": {
|
|
546
|
+
"text": "LoopType | undefined"
|
|
547
|
+
},
|
|
548
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
549
|
+
"attribute": "loop",
|
|
550
|
+
"reflects": true
|
|
551
|
+
},
|
|
552
|
+
{
|
|
553
|
+
"kind": "field",
|
|
554
|
+
"name": "autoplay",
|
|
555
|
+
"type": {
|
|
556
|
+
"text": "boolean | undefined"
|
|
557
|
+
},
|
|
558
|
+
"description": "Weather start the animation automatically",
|
|
559
|
+
"attribute": "autoplay",
|
|
560
|
+
"reflects": true
|
|
561
|
+
},
|
|
562
|
+
{
|
|
563
|
+
"kind": "field",
|
|
564
|
+
"name": "ariaLabel",
|
|
565
|
+
"type": {
|
|
566
|
+
"text": "string | null"
|
|
567
|
+
},
|
|
568
|
+
"default": "null",
|
|
569
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
570
|
+
"attribute": "aria-label"
|
|
571
|
+
},
|
|
572
|
+
{
|
|
573
|
+
"kind": "field",
|
|
574
|
+
"name": "ariaLabelledBy",
|
|
575
|
+
"type": {
|
|
576
|
+
"text": "string | null"
|
|
577
|
+
},
|
|
578
|
+
"default": "null",
|
|
579
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
580
|
+
"attribute": "aria-labelledby"
|
|
581
|
+
},
|
|
582
|
+
{
|
|
583
|
+
"kind": "field",
|
|
584
|
+
"name": "lottieInstance",
|
|
585
|
+
"type": {
|
|
586
|
+
"text": "AnimationItem | undefined"
|
|
587
|
+
},
|
|
588
|
+
"privacy": "private",
|
|
589
|
+
"description": "Lottie animation instance"
|
|
590
|
+
},
|
|
591
|
+
{
|
|
592
|
+
"kind": "field",
|
|
593
|
+
"name": "containerRef",
|
|
594
|
+
"type": {
|
|
595
|
+
"text": "Ref<HTMLDivElement>"
|
|
596
|
+
},
|
|
597
|
+
"privacy": "private",
|
|
598
|
+
"description": "Container for the animation"
|
|
599
|
+
},
|
|
600
|
+
{
|
|
601
|
+
"kind": "field",
|
|
602
|
+
"name": "animation",
|
|
603
|
+
"description": "Exposed API of the animation library (lottie)",
|
|
604
|
+
"readonly": true
|
|
605
|
+
},
|
|
606
|
+
{
|
|
607
|
+
"kind": "method",
|
|
608
|
+
"name": "getLoopValue",
|
|
609
|
+
"privacy": "private"
|
|
610
|
+
},
|
|
611
|
+
{
|
|
612
|
+
"kind": "method",
|
|
613
|
+
"name": "onLoadSuccessHandler",
|
|
614
|
+
"privacy": "private",
|
|
615
|
+
"parameters": [
|
|
616
|
+
{
|
|
617
|
+
"name": "animationData",
|
|
618
|
+
"type": {
|
|
619
|
+
"text": "any"
|
|
620
|
+
}
|
|
621
|
+
}
|
|
622
|
+
],
|
|
623
|
+
"description": "Create new lotty instance for the loaded data"
|
|
624
|
+
},
|
|
625
|
+
{
|
|
626
|
+
"kind": "method",
|
|
627
|
+
"name": "onLoadFailHandler",
|
|
628
|
+
"privacy": "private",
|
|
629
|
+
"parameters": [
|
|
630
|
+
{
|
|
631
|
+
"name": "error",
|
|
632
|
+
"type": {
|
|
633
|
+
"text": "Error"
|
|
634
|
+
}
|
|
635
|
+
}
|
|
636
|
+
],
|
|
637
|
+
"description": "Error handler for animation loading"
|
|
638
|
+
},
|
|
639
|
+
{
|
|
640
|
+
"kind": "method",
|
|
641
|
+
"name": "getAnimationData",
|
|
642
|
+
"privacy": "private",
|
|
643
|
+
"description": "Import animation data dynamically"
|
|
644
|
+
},
|
|
645
|
+
{
|
|
646
|
+
"kind": "field",
|
|
647
|
+
"name": "onCompleteHandler",
|
|
648
|
+
"description": "Re-dispatch the complete event from the animation library\n\nThis handler called with the animation instance instead of the component instance\nso we need to bind it to the component instance. The arrow function just does that."
|
|
649
|
+
}
|
|
650
|
+
],
|
|
651
|
+
"events": [
|
|
652
|
+
{
|
|
653
|
+
"name": "load",
|
|
654
|
+
"type": {
|
|
655
|
+
"text": "CustomEvent"
|
|
656
|
+
},
|
|
657
|
+
"description": "(React: onLoad) This event is dispatched when the animation is loaded",
|
|
658
|
+
"reactName": "onLoad"
|
|
659
|
+
},
|
|
660
|
+
{
|
|
661
|
+
"description": "(React: onComplete) This event is dispatched when all animation loops completed",
|
|
662
|
+
"name": "complete",
|
|
663
|
+
"reactName": "onComplete"
|
|
664
|
+
},
|
|
665
|
+
{
|
|
666
|
+
"description": "(React: onError) This event is dispatched when animation loading failed",
|
|
667
|
+
"name": "error",
|
|
668
|
+
"reactName": "onError"
|
|
669
|
+
}
|
|
670
|
+
],
|
|
671
|
+
"attributes": [
|
|
672
|
+
{
|
|
673
|
+
"name": "name",
|
|
674
|
+
"type": {
|
|
675
|
+
"text": "AnimationNames | undefined"
|
|
676
|
+
},
|
|
677
|
+
"description": "Name of the animation (= filename)",
|
|
678
|
+
"fieldName": "name"
|
|
679
|
+
},
|
|
680
|
+
{
|
|
681
|
+
"name": "loop",
|
|
682
|
+
"type": {
|
|
683
|
+
"text": "LoopType | undefined"
|
|
684
|
+
},
|
|
685
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
686
|
+
"fieldName": "loop"
|
|
687
|
+
},
|
|
688
|
+
{
|
|
689
|
+
"name": "autoplay",
|
|
690
|
+
"type": {
|
|
691
|
+
"text": "boolean | undefined"
|
|
692
|
+
},
|
|
693
|
+
"description": "Weather start the animation automatically",
|
|
694
|
+
"fieldName": "autoplay"
|
|
695
|
+
},
|
|
696
|
+
{
|
|
697
|
+
"name": "aria-label",
|
|
698
|
+
"type": {
|
|
699
|
+
"text": "string | null"
|
|
700
|
+
},
|
|
701
|
+
"default": "null",
|
|
702
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
703
|
+
"fieldName": "ariaLabel"
|
|
704
|
+
},
|
|
705
|
+
{
|
|
706
|
+
"name": "aria-labelledby",
|
|
707
|
+
"type": {
|
|
708
|
+
"text": "string | null"
|
|
709
|
+
},
|
|
710
|
+
"default": "null",
|
|
711
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
712
|
+
"fieldName": "ariaLabelledBy"
|
|
713
|
+
}
|
|
714
|
+
],
|
|
715
|
+
"superclass": {
|
|
716
|
+
"name": "Component",
|
|
717
|
+
"module": "/src/models"
|
|
718
|
+
},
|
|
719
|
+
"tagName": "mdc-animation",
|
|
720
|
+
"jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
|
|
721
|
+
"customElement": true
|
|
722
|
+
}
|
|
723
|
+
],
|
|
724
|
+
"exports": [
|
|
725
|
+
{
|
|
726
|
+
"kind": "js",
|
|
727
|
+
"name": "default",
|
|
728
|
+
"declaration": {
|
|
729
|
+
"name": "Animation",
|
|
730
|
+
"module": "components/animation/animation.component.js"
|
|
731
|
+
}
|
|
732
|
+
}
|
|
733
|
+
]
|
|
734
|
+
},
|
|
735
|
+
{
|
|
736
|
+
"kind": "javascript-module",
|
|
737
|
+
"path": "components/appheader/appheader.component.js",
|
|
738
|
+
"declarations": [
|
|
739
|
+
{
|
|
740
|
+
"kind": "class",
|
|
741
|
+
"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**.",
|
|
742
|
+
"name": "Appheader",
|
|
743
|
+
"cssParts": [
|
|
226
744
|
{
|
|
227
745
|
"description": "The main container for styling the header.",
|
|
228
746
|
"name": "container"
|
|
@@ -280,747 +798,229 @@
|
|
|
280
798
|
"path": "components/avatar/avatar.component.js",
|
|
281
799
|
"declarations": [
|
|
282
800
|
{
|
|
283
|
-
"kind": "class",
|
|
284
|
-
"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.",
|
|
285
|
-
"name": "Avatar",
|
|
286
|
-
"cssProperties": [
|
|
287
|
-
{
|
|
288
|
-
"description": "Allows customization of the default background color.",
|
|
289
|
-
"name": "--mdc-avatar-default-background-color"
|
|
290
|
-
},
|
|
291
|
-
{
|
|
292
|
-
"description": "Allows customization of the default foreground color.",
|
|
293
|
-
"name": "--mdc-avatar-default-foreground-color"
|
|
294
|
-
},
|
|
295
|
-
{
|
|
296
|
-
"description": "Allows customization of the loading indicator background color.",
|
|
297
|
-
"name": "--mdc-avatar-loading-indicator-background-color"
|
|
298
|
-
},
|
|
299
|
-
{
|
|
300
|
-
"description": "Allows customization of the loading indicator foreground color.",
|
|
301
|
-
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
|
302
|
-
},
|
|
303
|
-
{
|
|
304
|
-
"description": "Allows customization of the loading overlay background color.",
|
|
305
|
-
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
306
|
-
}
|
|
307
|
-
],
|
|
308
|
-
"members": [
|
|
309
|
-
{
|
|
310
|
-
"kind": "field",
|
|
311
|
-
"name": "src",
|
|
312
|
-
"type": {
|
|
313
|
-
"text": "string | undefined"
|
|
314
|
-
},
|
|
315
|
-
"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.",
|
|
316
|
-
"attribute": "src",
|
|
317
|
-
"inheritedFrom": {
|
|
318
|
-
"name": "AvatarComponentMixin",
|
|
319
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
320
|
-
}
|
|
321
|
-
},
|
|
322
|
-
{
|
|
323
|
-
"kind": "field",
|
|
324
|
-
"name": "initials",
|
|
325
|
-
"type": {
|
|
326
|
-
"text": "string | undefined"
|
|
327
|
-
},
|
|
328
|
-
"description": "The initials to be displayed for the avatar.",
|
|
329
|
-
"attribute": "initials",
|
|
330
|
-
"inheritedFrom": {
|
|
331
|
-
"name": "AvatarComponentMixin",
|
|
332
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
333
|
-
}
|
|
334
|
-
},
|
|
335
|
-
{
|
|
336
|
-
"kind": "field",
|
|
337
|
-
"name": "presence",
|
|
338
|
-
"type": {
|
|
339
|
-
"text": "PresenceType | undefined"
|
|
340
|
-
},
|
|
341
|
-
"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`",
|
|
342
|
-
"attribute": "presence",
|
|
343
|
-
"inheritedFrom": {
|
|
344
|
-
"name": "AvatarComponentMixin",
|
|
345
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
346
|
-
}
|
|
347
|
-
},
|
|
348
|
-
{
|
|
349
|
-
"kind": "field",
|
|
350
|
-
"name": "size",
|
|
351
|
-
"type": {
|
|
352
|
-
"text": "AvatarSize"
|
|
353
|
-
},
|
|
354
|
-
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
355
|
-
"default": "32",
|
|
356
|
-
"attribute": "size",
|
|
357
|
-
"reflects": true,
|
|
358
|
-
"inheritedFrom": {
|
|
359
|
-
"name": "AvatarComponentMixin",
|
|
360
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
361
|
-
}
|
|
362
|
-
},
|
|
363
|
-
{
|
|
364
|
-
"kind": "field",
|
|
365
|
-
"name": "counter",
|
|
366
|
-
"type": {
|
|
367
|
-
"text": "number | undefined"
|
|
368
|
-
},
|
|
369
|
-
"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`.",
|
|
370
|
-
"attribute": "counter",
|
|
371
|
-
"inheritedFrom": {
|
|
372
|
-
"name": "AvatarComponentMixin",
|
|
373
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
374
|
-
}
|
|
375
|
-
},
|
|
376
|
-
{
|
|
377
|
-
"kind": "field",
|
|
378
|
-
"name": "isTyping",
|
|
379
|
-
"type": {
|
|
380
|
-
"text": "boolean"
|
|
381
|
-
},
|
|
382
|
-
"default": "false",
|
|
383
|
-
"description": "Represents the typing indicator when the user is typing.",
|
|
384
|
-
"attribute": "is-typing",
|
|
385
|
-
"inheritedFrom": {
|
|
386
|
-
"name": "AvatarComponentMixin",
|
|
387
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
388
|
-
}
|
|
389
|
-
},
|
|
390
|
-
{
|
|
391
|
-
"kind": "field",
|
|
392
|
-
"name": "iconName",
|
|
393
|
-
"type": {
|
|
394
|
-
"text": "IconNames | undefined"
|
|
395
|
-
},
|
|
396
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
397
|
-
"attribute": "icon-name",
|
|
398
|
-
"inheritedFrom": {
|
|
399
|
-
"name": "IconNameMixin",
|
|
400
|
-
"module": "utils/mixins/IconNameMixin.js"
|
|
401
|
-
}
|
|
402
|
-
}
|
|
403
|
-
],
|
|
404
|
-
"mixins": [
|
|
405
|
-
{
|
|
406
|
-
"name": "AvatarComponentMixin",
|
|
407
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
408
|
-
},
|
|
409
|
-
{
|
|
410
|
-
"name": "IconNameMixin",
|
|
411
|
-
"module": "/src/utils/mixins/IconNameMixin"
|
|
412
|
-
}
|
|
413
|
-
],
|
|
414
|
-
"superclass": {
|
|
415
|
-
"name": "Component",
|
|
416
|
-
"module": "/src/models"
|
|
417
|
-
},
|
|
418
|
-
"tagName": "mdc-avatar",
|
|
419
|
-
"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 */",
|
|
420
|
-
"customElement": true,
|
|
421
|
-
"attributes": [
|
|
422
|
-
{
|
|
423
|
-
"name": "src",
|
|
424
|
-
"type": {
|
|
425
|
-
"text": "string | undefined"
|
|
426
|
-
},
|
|
427
|
-
"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.",
|
|
428
|
-
"fieldName": "src",
|
|
429
|
-
"inheritedFrom": {
|
|
430
|
-
"name": "AvatarComponentMixin",
|
|
431
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
432
|
-
}
|
|
433
|
-
},
|
|
434
|
-
{
|
|
435
|
-
"name": "initials",
|
|
436
|
-
"type": {
|
|
437
|
-
"text": "string | undefined"
|
|
438
|
-
},
|
|
439
|
-
"description": "The initials to be displayed for the avatar.",
|
|
440
|
-
"fieldName": "initials",
|
|
441
|
-
"inheritedFrom": {
|
|
442
|
-
"name": "AvatarComponentMixin",
|
|
443
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
444
|
-
}
|
|
445
|
-
},
|
|
446
|
-
{
|
|
447
|
-
"name": "presence",
|
|
448
|
-
"type": {
|
|
449
|
-
"text": "PresenceType | undefined"
|
|
450
|
-
},
|
|
451
|
-
"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`",
|
|
452
|
-
"fieldName": "presence",
|
|
453
|
-
"inheritedFrom": {
|
|
454
|
-
"name": "AvatarComponentMixin",
|
|
455
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
456
|
-
}
|
|
457
|
-
},
|
|
458
|
-
{
|
|
459
|
-
"name": "size",
|
|
460
|
-
"type": {
|
|
461
|
-
"text": "AvatarSize"
|
|
462
|
-
},
|
|
463
|
-
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
464
|
-
"default": "32",
|
|
465
|
-
"fieldName": "size",
|
|
466
|
-
"inheritedFrom": {
|
|
467
|
-
"name": "AvatarComponentMixin",
|
|
468
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
469
|
-
}
|
|
470
|
-
},
|
|
471
|
-
{
|
|
472
|
-
"name": "counter",
|
|
473
|
-
"type": {
|
|
474
|
-
"text": "number | undefined"
|
|
475
|
-
},
|
|
476
|
-
"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`.",
|
|
477
|
-
"fieldName": "counter",
|
|
478
|
-
"inheritedFrom": {
|
|
479
|
-
"name": "AvatarComponentMixin",
|
|
480
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
481
|
-
}
|
|
482
|
-
},
|
|
483
|
-
{
|
|
484
|
-
"name": "is-typing",
|
|
485
|
-
"type": {
|
|
486
|
-
"text": "boolean"
|
|
487
|
-
},
|
|
488
|
-
"default": "false",
|
|
489
|
-
"description": "Represents the typing indicator when the user is typing.",
|
|
490
|
-
"fieldName": "isTyping",
|
|
491
|
-
"inheritedFrom": {
|
|
492
|
-
"name": "AvatarComponentMixin",
|
|
493
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
494
|
-
}
|
|
495
|
-
},
|
|
496
|
-
{
|
|
497
|
-
"name": "icon-name",
|
|
498
|
-
"type": {
|
|
499
|
-
"text": "IconNames | undefined"
|
|
500
|
-
},
|
|
501
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
502
|
-
"fieldName": "iconName",
|
|
503
|
-
"inheritedFrom": {
|
|
504
|
-
"name": "IconNameMixin",
|
|
505
|
-
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
506
|
-
}
|
|
507
|
-
}
|
|
508
|
-
]
|
|
509
|
-
}
|
|
510
|
-
],
|
|
511
|
-
"exports": [
|
|
512
|
-
{
|
|
513
|
-
"kind": "js",
|
|
514
|
-
"name": "default",
|
|
515
|
-
"declaration": {
|
|
516
|
-
"name": "Avatar",
|
|
517
|
-
"module": "components/avatar/avatar.component.js"
|
|
518
|
-
}
|
|
519
|
-
}
|
|
520
|
-
]
|
|
521
|
-
},
|
|
522
|
-
{
|
|
523
|
-
"kind": "javascript-module",
|
|
524
|
-
"path": "components/alertchip/alertchip.component.js",
|
|
525
|
-
"declarations": [
|
|
526
|
-
{
|
|
527
|
-
"kind": "class",
|
|
528
|
-
"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.",
|
|
529
|
-
"name": "AlertChip",
|
|
530
|
-
"cssProperties": [
|
|
531
|
-
{
|
|
532
|
-
"description": "The color of the label text",
|
|
533
|
-
"name": "--mdc-chip-color"
|
|
534
|
-
},
|
|
535
|
-
{
|
|
536
|
-
"description": "The color of the icon",
|
|
537
|
-
"name": "--mdc-chip-icon-color"
|
|
538
|
-
},
|
|
539
|
-
{
|
|
540
|
-
"description": "The border color of the alertchip",
|
|
541
|
-
"name": "--mdc-chip-border-color"
|
|
542
|
-
},
|
|
543
|
-
{
|
|
544
|
-
"description": "The background color of the alertchip",
|
|
545
|
-
"name": "--mdc-chip-background-color"
|
|
546
|
-
}
|
|
547
|
-
],
|
|
548
|
-
"members": [
|
|
549
|
-
{
|
|
550
|
-
"kind": "field",
|
|
551
|
-
"name": "variant",
|
|
552
|
-
"type": {
|
|
553
|
-
"text": "VariantType"
|
|
554
|
-
},
|
|
555
|
-
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
556
|
-
"default": "neutral",
|
|
557
|
-
"attribute": "variant"
|
|
558
|
-
},
|
|
559
|
-
{
|
|
560
|
-
"kind": "field",
|
|
561
|
-
"name": "label",
|
|
562
|
-
"type": {
|
|
563
|
-
"text": "string"
|
|
564
|
-
},
|
|
565
|
-
"default": "''",
|
|
566
|
-
"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.",
|
|
567
|
-
"attribute": "label"
|
|
568
|
-
},
|
|
569
|
-
{
|
|
570
|
-
"kind": "field",
|
|
571
|
-
"name": "autofocus",
|
|
572
|
-
"type": {
|
|
573
|
-
"text": "boolean"
|
|
574
|
-
},
|
|
575
|
-
"default": "false",
|
|
576
|
-
"description": "This property indicates whether the element should receive focus automatically when it is rendered.",
|
|
577
|
-
"attribute": "autofocus",
|
|
578
|
-
"reflects": true,
|
|
579
|
-
"inheritedFrom": {
|
|
580
|
-
"name": "AutoFocusMixin",
|
|
581
|
-
"module": "utils/mixins/AutoFocusMixin.js"
|
|
582
|
-
}
|
|
583
|
-
},
|
|
584
|
-
{
|
|
585
|
-
"kind": "field",
|
|
586
|
-
"name": "tabIndex",
|
|
587
|
-
"type": {
|
|
588
|
-
"text": "number"
|
|
589
|
-
},
|
|
590
|
-
"default": "0",
|
|
591
|
-
"description": "This property specifies the tab order of the element.",
|
|
592
|
-
"attribute": "tabIndex",
|
|
593
|
-
"reflects": true,
|
|
594
|
-
"inheritedFrom": {
|
|
595
|
-
"name": "TabIndexMixin",
|
|
596
|
-
"module": "utils/mixins/TabIndexMixin.js"
|
|
597
|
-
}
|
|
598
|
-
},
|
|
599
|
-
{
|
|
600
|
-
"kind": "field",
|
|
601
|
-
"name": "disabled",
|
|
602
|
-
"type": {
|
|
603
|
-
"text": "boolean | undefined"
|
|
604
|
-
},
|
|
605
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
606
|
-
"default": "undefined",
|
|
607
|
-
"attribute": "disabled",
|
|
608
|
-
"reflects": true,
|
|
609
|
-
"inheritedFrom": {
|
|
610
|
-
"name": "DisabledMixin",
|
|
611
|
-
"module": "utils/mixins/DisabledMixin.js"
|
|
612
|
-
}
|
|
613
|
-
},
|
|
614
|
-
{
|
|
615
|
-
"kind": "field",
|
|
616
|
-
"name": "active",
|
|
617
|
-
"type": {
|
|
618
|
-
"text": "boolean | undefined"
|
|
619
|
-
},
|
|
620
|
-
"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.",
|
|
621
|
-
"default": "undefined",
|
|
622
|
-
"attribute": "active",
|
|
623
|
-
"reflects": true,
|
|
624
|
-
"inheritedFrom": {
|
|
625
|
-
"name": "Buttonsimple",
|
|
626
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
627
|
-
}
|
|
628
|
-
},
|
|
629
|
-
{
|
|
630
|
-
"kind": "field",
|
|
631
|
-
"name": "softDisabled",
|
|
632
|
-
"type": {
|
|
633
|
-
"text": "boolean | undefined"
|
|
634
|
-
},
|
|
635
|
-
"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.",
|
|
636
|
-
"default": "undefined",
|
|
637
|
-
"attribute": "soft-disabled",
|
|
638
|
-
"reflects": true,
|
|
639
|
-
"inheritedFrom": {
|
|
640
|
-
"name": "Buttonsimple",
|
|
641
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
642
|
-
}
|
|
643
|
-
},
|
|
644
|
-
{
|
|
645
|
-
"kind": "field",
|
|
646
|
-
"name": "size",
|
|
647
|
-
"type": {
|
|
648
|
-
"text": "ButtonSize"
|
|
649
|
-
},
|
|
650
|
-
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
651
|
-
"default": "32",
|
|
652
|
-
"attribute": "size",
|
|
653
|
-
"reflects": true,
|
|
654
|
-
"inheritedFrom": {
|
|
655
|
-
"name": "Buttonsimple",
|
|
656
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
657
|
-
}
|
|
658
|
-
},
|
|
659
|
-
{
|
|
660
|
-
"kind": "field",
|
|
661
|
-
"name": "role",
|
|
662
|
-
"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.",
|
|
663
|
-
"default": "button",
|
|
664
|
-
"attribute": "role",
|
|
665
|
-
"reflects": true,
|
|
666
|
-
"inheritedFrom": {
|
|
667
|
-
"name": "Buttonsimple",
|
|
668
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
669
|
-
}
|
|
670
|
-
},
|
|
671
|
-
{
|
|
672
|
-
"kind": "field",
|
|
673
|
-
"name": "ariaStateKey",
|
|
674
|
-
"type": {
|
|
675
|
-
"text": "string | undefined"
|
|
676
|
-
},
|
|
677
|
-
"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`",
|
|
678
|
-
"default": "'aria-pressed' (when)",
|
|
679
|
-
"attribute": "ariaStateKey",
|
|
680
|
-
"reflects": true,
|
|
681
|
-
"inheritedFrom": {
|
|
682
|
-
"name": "Buttonsimple",
|
|
683
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
684
|
-
}
|
|
685
|
-
},
|
|
686
|
-
{
|
|
687
|
-
"kind": "field",
|
|
688
|
-
"name": "type",
|
|
689
|
-
"type": {
|
|
690
|
-
"text": "ButtonType"
|
|
691
|
-
},
|
|
692
|
-
"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.",
|
|
693
|
-
"default": "button",
|
|
694
|
-
"attribute": "type",
|
|
695
|
-
"reflects": true,
|
|
696
|
-
"inheritedFrom": {
|
|
697
|
-
"name": "Buttonsimple",
|
|
698
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
699
|
-
}
|
|
700
|
-
},
|
|
701
|
-
{
|
|
702
|
-
"kind": "method",
|
|
703
|
-
"name": "executeAction",
|
|
704
|
-
"privacy": "protected",
|
|
705
|
-
"inheritedFrom": {
|
|
706
|
-
"name": "Buttonsimple",
|
|
707
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
708
|
-
}
|
|
709
|
-
},
|
|
710
|
-
{
|
|
711
|
-
"kind": "method",
|
|
712
|
-
"name": "setActive",
|
|
713
|
-
"privacy": "protected",
|
|
714
|
-
"parameters": [
|
|
715
|
-
{
|
|
716
|
-
"name": "element",
|
|
717
|
-
"type": {
|
|
718
|
-
"text": "HTMLElement"
|
|
719
|
-
},
|
|
720
|
-
"description": "The button element"
|
|
721
|
-
},
|
|
722
|
-
{
|
|
723
|
-
"name": "active",
|
|
724
|
-
"optional": true,
|
|
725
|
-
"type": {
|
|
726
|
-
"text": "boolean"
|
|
727
|
-
},
|
|
728
|
-
"description": "The active state of the element"
|
|
729
|
-
}
|
|
730
|
-
],
|
|
731
|
-
"description": "Sets the ariaStateKey attributes based on the active state of the button.",
|
|
732
|
-
"inheritedFrom": {
|
|
733
|
-
"name": "Buttonsimple",
|
|
734
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
735
|
-
}
|
|
736
|
-
},
|
|
737
|
-
{
|
|
738
|
-
"kind": "method",
|
|
739
|
-
"name": "setSoftDisabled",
|
|
740
|
-
"privacy": "private",
|
|
741
|
-
"parameters": [
|
|
742
|
-
{
|
|
743
|
-
"name": "element",
|
|
744
|
-
"type": {
|
|
745
|
-
"text": "HTMLElement"
|
|
746
|
-
},
|
|
747
|
-
"description": "The button element."
|
|
748
|
-
},
|
|
749
|
-
{
|
|
750
|
-
"name": "softDisabled",
|
|
751
|
-
"optional": true,
|
|
752
|
-
"type": {
|
|
753
|
-
"text": "boolean"
|
|
754
|
-
},
|
|
755
|
-
"description": "The soft-disabled state."
|
|
756
|
-
}
|
|
757
|
-
],
|
|
758
|
-
"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.",
|
|
759
|
-
"inheritedFrom": {
|
|
760
|
-
"name": "Buttonsimple",
|
|
761
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
762
|
-
}
|
|
763
|
-
},
|
|
764
|
-
{
|
|
765
|
-
"kind": "method",
|
|
766
|
-
"name": "setDisabled",
|
|
767
|
-
"privacy": "private",
|
|
768
|
-
"parameters": [
|
|
769
|
-
{
|
|
770
|
-
"name": "element",
|
|
771
|
-
"type": {
|
|
772
|
-
"text": "HTMLElement"
|
|
773
|
-
},
|
|
774
|
-
"description": "The button element."
|
|
775
|
-
},
|
|
776
|
-
{
|
|
777
|
-
"name": "disabled",
|
|
778
|
-
"type": {
|
|
779
|
-
"text": "boolean"
|
|
780
|
-
},
|
|
781
|
-
"description": "The disabled state."
|
|
782
|
-
}
|
|
783
|
-
],
|
|
784
|
-
"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.",
|
|
785
|
-
"inheritedFrom": {
|
|
786
|
-
"name": "Buttonsimple",
|
|
787
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
788
|
-
}
|
|
801
|
+
"kind": "class",
|
|
802
|
+
"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.",
|
|
803
|
+
"name": "Avatar",
|
|
804
|
+
"cssProperties": [
|
|
805
|
+
{
|
|
806
|
+
"description": "Allows customization of the default background color.",
|
|
807
|
+
"name": "--mdc-avatar-default-background-color"
|
|
789
808
|
},
|
|
790
809
|
{
|
|
791
|
-
"
|
|
792
|
-
"name": "
|
|
793
|
-
"privacy": "private",
|
|
794
|
-
"inheritedFrom": {
|
|
795
|
-
"name": "Buttonsimple",
|
|
796
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
797
|
-
}
|
|
810
|
+
"description": "Allows customization of the default foreground color.",
|
|
811
|
+
"name": "--mdc-avatar-default-foreground-color"
|
|
798
812
|
},
|
|
799
813
|
{
|
|
800
|
-
"
|
|
801
|
-
"name": "
|
|
802
|
-
"privacy": "private",
|
|
803
|
-
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
|
804
|
-
"inheritedFrom": {
|
|
805
|
-
"name": "Buttonsimple",
|
|
806
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
807
|
-
}
|
|
814
|
+
"description": "Allows customization of the loading indicator background color.",
|
|
815
|
+
"name": "--mdc-avatar-loading-indicator-background-color"
|
|
808
816
|
},
|
|
809
817
|
{
|
|
810
|
-
"
|
|
811
|
-
"name": "
|
|
812
|
-
"privacy": "private",
|
|
813
|
-
"parameters": [
|
|
814
|
-
{
|
|
815
|
-
"name": "event",
|
|
816
|
-
"type": {
|
|
817
|
-
"text": "KeyboardEvent"
|
|
818
|
-
},
|
|
819
|
-
"description": "The keyboard event."
|
|
820
|
-
}
|
|
821
|
-
],
|
|
822
|
-
"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.",
|
|
823
|
-
"inheritedFrom": {
|
|
824
|
-
"name": "Buttonsimple",
|
|
825
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
826
|
-
}
|
|
818
|
+
"description": "Allows customization of the loading indicator foreground color.",
|
|
819
|
+
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
|
827
820
|
},
|
|
828
821
|
{
|
|
829
|
-
"
|
|
830
|
-
"name": "
|
|
831
|
-
"privacy": "private",
|
|
832
|
-
"parameters": [
|
|
833
|
-
{
|
|
834
|
-
"name": "event",
|
|
835
|
-
"type": {
|
|
836
|
-
"text": "KeyboardEvent"
|
|
837
|
-
},
|
|
838
|
-
"description": "The keyboard event."
|
|
839
|
-
}
|
|
840
|
-
],
|
|
841
|
-
"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.",
|
|
842
|
-
"inheritedFrom": {
|
|
843
|
-
"name": "Buttonsimple",
|
|
844
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
845
|
-
}
|
|
822
|
+
"description": "Allows customization of the loading overlay background color.",
|
|
823
|
+
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
846
824
|
}
|
|
847
825
|
],
|
|
848
|
-
"
|
|
849
|
-
{
|
|
850
|
-
"name": "variant",
|
|
851
|
-
"type": {
|
|
852
|
-
"text": "VariantType"
|
|
853
|
-
},
|
|
854
|
-
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
855
|
-
"default": "neutral",
|
|
856
|
-
"fieldName": "variant"
|
|
857
|
-
},
|
|
826
|
+
"members": [
|
|
858
827
|
{
|
|
859
|
-
"
|
|
828
|
+
"kind": "field",
|
|
829
|
+
"name": "src",
|
|
860
830
|
"type": {
|
|
861
|
-
"text": "string"
|
|
831
|
+
"text": "string | undefined"
|
|
862
832
|
},
|
|
863
|
-
"
|
|
864
|
-
"
|
|
865
|
-
"
|
|
833
|
+
"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.",
|
|
834
|
+
"attribute": "src",
|
|
835
|
+
"inheritedFrom": {
|
|
836
|
+
"name": "AvatarComponentMixin",
|
|
837
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
838
|
+
}
|
|
866
839
|
},
|
|
867
840
|
{
|
|
868
|
-
"
|
|
841
|
+
"kind": "field",
|
|
842
|
+
"name": "initials",
|
|
869
843
|
"type": {
|
|
870
|
-
"text": "
|
|
844
|
+
"text": "string | undefined"
|
|
871
845
|
},
|
|
872
|
-
"
|
|
873
|
-
"
|
|
874
|
-
"fieldName": "autofocus",
|
|
846
|
+
"description": "The initials to be displayed for the avatar.",
|
|
847
|
+
"attribute": "initials",
|
|
875
848
|
"inheritedFrom": {
|
|
876
|
-
"name": "
|
|
877
|
-
"module": "
|
|
849
|
+
"name": "AvatarComponentMixin",
|
|
850
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
878
851
|
}
|
|
879
852
|
},
|
|
880
853
|
{
|
|
881
|
-
"
|
|
854
|
+
"kind": "field",
|
|
855
|
+
"name": "presence",
|
|
882
856
|
"type": {
|
|
883
|
-
"text": "
|
|
857
|
+
"text": "PresenceType | undefined"
|
|
884
858
|
},
|
|
885
|
-
"
|
|
886
|
-
"
|
|
887
|
-
"fieldName": "tabIndex",
|
|
859
|
+
"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`",
|
|
860
|
+
"attribute": "presence",
|
|
888
861
|
"inheritedFrom": {
|
|
889
|
-
"name": "
|
|
890
|
-
"module": "
|
|
862
|
+
"name": "AvatarComponentMixin",
|
|
863
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
891
864
|
}
|
|
892
865
|
},
|
|
893
866
|
{
|
|
894
|
-
"
|
|
867
|
+
"kind": "field",
|
|
868
|
+
"name": "size",
|
|
895
869
|
"type": {
|
|
896
|
-
"text": "
|
|
870
|
+
"text": "AvatarSize"
|
|
897
871
|
},
|
|
898
|
-
"description": "
|
|
899
|
-
"default": "
|
|
900
|
-
"
|
|
872
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
873
|
+
"default": "32",
|
|
874
|
+
"attribute": "size",
|
|
875
|
+
"reflects": true,
|
|
901
876
|
"inheritedFrom": {
|
|
902
|
-
"name": "
|
|
903
|
-
"module": "
|
|
877
|
+
"name": "AvatarComponentMixin",
|
|
878
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
904
879
|
}
|
|
905
880
|
},
|
|
906
881
|
{
|
|
907
|
-
"
|
|
882
|
+
"kind": "field",
|
|
883
|
+
"name": "counter",
|
|
908
884
|
"type": {
|
|
909
|
-
"text": "
|
|
885
|
+
"text": "number | undefined"
|
|
910
886
|
},
|
|
911
|
-
"description": "The
|
|
912
|
-
"
|
|
913
|
-
"fieldName": "active",
|
|
887
|
+
"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`.",
|
|
888
|
+
"attribute": "counter",
|
|
914
889
|
"inheritedFrom": {
|
|
915
|
-
"name": "
|
|
916
|
-
"module": "
|
|
890
|
+
"name": "AvatarComponentMixin",
|
|
891
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
917
892
|
}
|
|
918
893
|
},
|
|
919
894
|
{
|
|
920
|
-
"
|
|
895
|
+
"kind": "field",
|
|
896
|
+
"name": "isTyping",
|
|
921
897
|
"type": {
|
|
922
|
-
"text": "boolean
|
|
898
|
+
"text": "boolean"
|
|
923
899
|
},
|
|
924
|
-
"
|
|
925
|
-
"
|
|
926
|
-
"
|
|
900
|
+
"default": "false",
|
|
901
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
902
|
+
"attribute": "is-typing",
|
|
927
903
|
"inheritedFrom": {
|
|
928
|
-
"name": "
|
|
929
|
-
"module": "
|
|
904
|
+
"name": "AvatarComponentMixin",
|
|
905
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
930
906
|
}
|
|
931
907
|
},
|
|
932
908
|
{
|
|
933
|
-
"
|
|
909
|
+
"kind": "field",
|
|
910
|
+
"name": "iconName",
|
|
934
911
|
"type": {
|
|
935
|
-
"text": "
|
|
912
|
+
"text": "IconNames | undefined"
|
|
936
913
|
},
|
|
937
|
-
"description": "
|
|
938
|
-
"
|
|
939
|
-
"fieldName": "size",
|
|
914
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
915
|
+
"attribute": "icon-name",
|
|
940
916
|
"inheritedFrom": {
|
|
941
|
-
"name": "
|
|
942
|
-
"module": "
|
|
917
|
+
"name": "IconNameMixin",
|
|
918
|
+
"module": "utils/mixins/IconNameMixin.js"
|
|
943
919
|
}
|
|
920
|
+
}
|
|
921
|
+
],
|
|
922
|
+
"mixins": [
|
|
923
|
+
{
|
|
924
|
+
"name": "AvatarComponentMixin",
|
|
925
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
944
926
|
},
|
|
945
927
|
{
|
|
946
|
-
"name": "
|
|
947
|
-
"
|
|
948
|
-
|
|
949
|
-
|
|
928
|
+
"name": "IconNameMixin",
|
|
929
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
|
930
|
+
}
|
|
931
|
+
],
|
|
932
|
+
"superclass": {
|
|
933
|
+
"name": "Component",
|
|
934
|
+
"module": "/src/models"
|
|
935
|
+
},
|
|
936
|
+
"tagName": "mdc-avatar",
|
|
937
|
+
"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 */",
|
|
938
|
+
"customElement": true,
|
|
939
|
+
"attributes": [
|
|
940
|
+
{
|
|
941
|
+
"name": "src",
|
|
942
|
+
"type": {
|
|
943
|
+
"text": "string | undefined"
|
|
944
|
+
},
|
|
945
|
+
"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.",
|
|
946
|
+
"fieldName": "src",
|
|
950
947
|
"inheritedFrom": {
|
|
951
|
-
"name": "
|
|
952
|
-
"module": "src/
|
|
948
|
+
"name": "AvatarComponentMixin",
|
|
949
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
953
950
|
}
|
|
954
951
|
},
|
|
955
952
|
{
|
|
956
|
-
"name": "
|
|
953
|
+
"name": "initials",
|
|
957
954
|
"type": {
|
|
958
955
|
"text": "string | undefined"
|
|
959
956
|
},
|
|
960
|
-
"description": "
|
|
961
|
-
"
|
|
962
|
-
"fieldName": "ariaStateKey",
|
|
957
|
+
"description": "The initials to be displayed for the avatar.",
|
|
958
|
+
"fieldName": "initials",
|
|
963
959
|
"inheritedFrom": {
|
|
964
|
-
"name": "
|
|
965
|
-
"module": "src/
|
|
960
|
+
"name": "AvatarComponentMixin",
|
|
961
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
966
962
|
}
|
|
967
963
|
},
|
|
968
964
|
{
|
|
969
|
-
"name": "
|
|
965
|
+
"name": "presence",
|
|
970
966
|
"type": {
|
|
971
|
-
"text": "
|
|
967
|
+
"text": "PresenceType | undefined"
|
|
972
968
|
},
|
|
973
|
-
"description": "
|
|
974
|
-
"
|
|
975
|
-
"fieldName": "type",
|
|
969
|
+
"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`",
|
|
970
|
+
"fieldName": "presence",
|
|
976
971
|
"inheritedFrom": {
|
|
977
|
-
"name": "
|
|
978
|
-
"module": "src/
|
|
972
|
+
"name": "AvatarComponentMixin",
|
|
973
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
979
974
|
}
|
|
980
|
-
}
|
|
981
|
-
],
|
|
982
|
-
"superclass": {
|
|
983
|
-
"name": "Buttonsimple",
|
|
984
|
-
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
985
|
-
},
|
|
986
|
-
"tagName": "mdc-alertchip",
|
|
987
|
-
"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 */",
|
|
988
|
-
"customElement": true,
|
|
989
|
-
"events": [
|
|
975
|
+
},
|
|
990
976
|
{
|
|
991
|
-
"
|
|
992
|
-
"
|
|
993
|
-
|
|
977
|
+
"name": "size",
|
|
978
|
+
"type": {
|
|
979
|
+
"text": "AvatarSize"
|
|
980
|
+
},
|
|
981
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
982
|
+
"default": "32",
|
|
983
|
+
"fieldName": "size",
|
|
994
984
|
"inheritedFrom": {
|
|
995
|
-
"name": "
|
|
996
|
-
"module": "src/
|
|
985
|
+
"name": "AvatarComponentMixin",
|
|
986
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
997
987
|
}
|
|
998
988
|
},
|
|
999
989
|
{
|
|
1000
|
-
"
|
|
1001
|
-
"
|
|
1002
|
-
|
|
990
|
+
"name": "counter",
|
|
991
|
+
"type": {
|
|
992
|
+
"text": "number | undefined"
|
|
993
|
+
},
|
|
994
|
+
"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`.",
|
|
995
|
+
"fieldName": "counter",
|
|
1003
996
|
"inheritedFrom": {
|
|
1004
|
-
"name": "
|
|
1005
|
-
"module": "src/
|
|
997
|
+
"name": "AvatarComponentMixin",
|
|
998
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1006
999
|
}
|
|
1007
1000
|
},
|
|
1008
1001
|
{
|
|
1009
|
-
"
|
|
1010
|
-
"
|
|
1011
|
-
|
|
1002
|
+
"name": "is-typing",
|
|
1003
|
+
"type": {
|
|
1004
|
+
"text": "boolean"
|
|
1005
|
+
},
|
|
1006
|
+
"default": "false",
|
|
1007
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
1008
|
+
"fieldName": "isTyping",
|
|
1012
1009
|
"inheritedFrom": {
|
|
1013
|
-
"name": "
|
|
1014
|
-
"module": "src/
|
|
1010
|
+
"name": "AvatarComponentMixin",
|
|
1011
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1015
1012
|
}
|
|
1016
1013
|
},
|
|
1017
1014
|
{
|
|
1018
|
-
"
|
|
1019
|
-
"
|
|
1020
|
-
|
|
1015
|
+
"name": "icon-name",
|
|
1016
|
+
"type": {
|
|
1017
|
+
"text": "IconNames | undefined"
|
|
1018
|
+
},
|
|
1019
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
1020
|
+
"fieldName": "iconName",
|
|
1021
1021
|
"inheritedFrom": {
|
|
1022
|
-
"name": "
|
|
1023
|
-
"module": "src/
|
|
1022
|
+
"name": "IconNameMixin",
|
|
1023
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
1024
1024
|
}
|
|
1025
1025
|
}
|
|
1026
1026
|
]
|
|
@@ -1031,8 +1031,8 @@
|
|
|
1031
1031
|
"kind": "js",
|
|
1032
1032
|
"name": "default",
|
|
1033
1033
|
"declaration": {
|
|
1034
|
-
"name": "
|
|
1035
|
-
"module": "components/
|
|
1034
|
+
"name": "Avatar",
|
|
1035
|
+
"module": "components/avatar/avatar.component.js"
|
|
1036
1036
|
}
|
|
1037
1037
|
}
|
|
1038
1038
|
]
|
|
@@ -24316,59 +24316,165 @@
|
|
|
24316
24316
|
},
|
|
24317
24317
|
{
|
|
24318
24318
|
"kind": "javascript-module",
|
|
24319
|
-
"path": "components/
|
|
24319
|
+
"path": "components/progressspinner/progressspinner.component.js",
|
|
24320
24320
|
"declarations": [
|
|
24321
24321
|
{
|
|
24322
24322
|
"kind": "class",
|
|
24323
|
-
"description": "mdc-
|
|
24324
|
-
"name": "
|
|
24323
|
+
"description": "`mdc-progressspinner` is a customizable, circular progress indicator component.\nIt visually represents the current completion state of a process, such as loading,\nsyncing, uploading, or any ongoing task that has a measurable percentage.\n\nThe spinner is built using SVG with two concentric `<circle>` elements:\n- The `progress` arc represents the portion of work completed.\n- The `track` arc represents the remaining part.\n\nA visual gap is maintained between the progress and track arcs to clearly\ndistinguish the two segments. The component smoothly animates arc length\nand respects accessibility best practices with ARIA attributes.\n\nThe component supports different states:\n- **Default**: Circular spinner shows the progress.\n- **Success**: Displays a checkmark icon when progress reaches 100%.\n- **Error**: Displays an error icon when in an error state.",
|
|
24324
|
+
"name": "Progressspinner",
|
|
24325
24325
|
"cssProperties": [
|
|
24326
|
+
{
|
|
24327
|
+
"description": "The size of the spinner.",
|
|
24328
|
+
"name": "--mdc-spinner-size"
|
|
24329
|
+
},
|
|
24330
|
+
{
|
|
24331
|
+
"description": "The color of the spinner track.",
|
|
24332
|
+
"name": "--mdc-track-color"
|
|
24333
|
+
},
|
|
24334
|
+
{
|
|
24335
|
+
"description": "The color of the spinner progress.",
|
|
24336
|
+
"name": "--mdc-progress-color"
|
|
24337
|
+
},
|
|
24338
|
+
{
|
|
24339
|
+
"description": "The color of the spinner when in success state.",
|
|
24340
|
+
"name": "--mdc-progress-success-color"
|
|
24341
|
+
},
|
|
24342
|
+
{
|
|
24343
|
+
"description": "The color of the spinner when in error state.",
|
|
24344
|
+
"name": "--mdc-progress-error-color"
|
|
24345
|
+
},
|
|
24326
24346
|
{
|
|
24327
24347
|
"description": "Background color of the progressbar when inactive.",
|
|
24328
|
-
"name": "--mdc-progressbar-default-background-color"
|
|
24348
|
+
"name": "--mdc-progressbar-default-background-color",
|
|
24349
|
+
"inheritedFrom": {
|
|
24350
|
+
"name": "Progressbar",
|
|
24351
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
24352
|
+
}
|
|
24329
24353
|
},
|
|
24330
24354
|
{
|
|
24331
24355
|
"description": "Background color of the progressbar when active.",
|
|
24332
|
-
"name": "--mdc-progressbar-default-active-background-color"
|
|
24356
|
+
"name": "--mdc-progressbar-default-active-background-color",
|
|
24357
|
+
"inheritedFrom": {
|
|
24358
|
+
"name": "Progressbar",
|
|
24359
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
24360
|
+
}
|
|
24333
24361
|
},
|
|
24334
24362
|
{
|
|
24335
24363
|
"description": "Background color of the progressbar when in success state.",
|
|
24336
|
-
"name": "--mdc-progressbar-success-background-color"
|
|
24364
|
+
"name": "--mdc-progressbar-success-background-color",
|
|
24365
|
+
"inheritedFrom": {
|
|
24366
|
+
"name": "Progressbar",
|
|
24367
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
24368
|
+
}
|
|
24337
24369
|
},
|
|
24338
24370
|
{
|
|
24339
24371
|
"description": "Background color of the progressbar when in error state.",
|
|
24340
|
-
"name": "--mdc-progressbar-error-background-color"
|
|
24372
|
+
"name": "--mdc-progressbar-error-background-color",
|
|
24373
|
+
"inheritedFrom": {
|
|
24374
|
+
"name": "Progressbar",
|
|
24375
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
24376
|
+
}
|
|
24341
24377
|
},
|
|
24342
24378
|
{
|
|
24343
24379
|
"description": "The height of the progressbar.",
|
|
24344
|
-
"name": "--mdc-progressbar-height"
|
|
24380
|
+
"name": "--mdc-progressbar-height",
|
|
24381
|
+
"inheritedFrom": {
|
|
24382
|
+
"name": "Progressbar",
|
|
24383
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
24384
|
+
}
|
|
24345
24385
|
},
|
|
24346
24386
|
{
|
|
24347
24387
|
"description": "The border radius of the progressbar.",
|
|
24348
|
-
"name": "--mdc-progressbar-border-radius"
|
|
24388
|
+
"name": "--mdc-progressbar-border-radius",
|
|
24389
|
+
"inheritedFrom": {
|
|
24390
|
+
"name": "Progressbar",
|
|
24391
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
24392
|
+
}
|
|
24349
24393
|
},
|
|
24350
24394
|
{
|
|
24351
24395
|
"description": "Color of the progressbar label text.",
|
|
24352
|
-
"name": "--mdc-progressbar-label-color"
|
|
24396
|
+
"name": "--mdc-progressbar-label-color",
|
|
24397
|
+
"inheritedFrom": {
|
|
24398
|
+
"name": "Progressbar",
|
|
24399
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
24400
|
+
}
|
|
24353
24401
|
},
|
|
24354
24402
|
{
|
|
24355
24403
|
"description": "Line height of the label text.",
|
|
24356
|
-
"name": "--mdc-progressbar-label-lineheight"
|
|
24404
|
+
"name": "--mdc-progressbar-label-lineheight",
|
|
24405
|
+
"inheritedFrom": {
|
|
24406
|
+
"name": "Progressbar",
|
|
24407
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
24408
|
+
}
|
|
24357
24409
|
},
|
|
24358
24410
|
{
|
|
24359
24411
|
"description": "Font size of the label text.",
|
|
24360
|
-
"name": "--mdc-progressbar-label-fontsize"
|
|
24412
|
+
"name": "--mdc-progressbar-label-fontsize",
|
|
24413
|
+
"inheritedFrom": {
|
|
24414
|
+
"name": "Progressbar",
|
|
24415
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
24416
|
+
}
|
|
24361
24417
|
},
|
|
24362
24418
|
{
|
|
24363
24419
|
"description": "Font weight of the label text.",
|
|
24364
|
-
"name": "--mdc-progressbar-label-fontweight"
|
|
24420
|
+
"name": "--mdc-progressbar-label-fontweight",
|
|
24421
|
+
"inheritedFrom": {
|
|
24422
|
+
"name": "Progressbar",
|
|
24423
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
24424
|
+
}
|
|
24365
24425
|
},
|
|
24366
24426
|
{
|
|
24367
24427
|
"description": "Color of the help text.",
|
|
24368
|
-
"name": "--mdc-progressbar-help-text-color"
|
|
24428
|
+
"name": "--mdc-progressbar-help-text-color",
|
|
24429
|
+
"inheritedFrom": {
|
|
24430
|
+
"name": "Progressbar",
|
|
24431
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
24432
|
+
}
|
|
24369
24433
|
}
|
|
24370
24434
|
],
|
|
24371
24435
|
"members": [
|
|
24436
|
+
{
|
|
24437
|
+
"kind": "method",
|
|
24438
|
+
"name": "renderProgressSpinner",
|
|
24439
|
+
"privacy": "private"
|
|
24440
|
+
},
|
|
24441
|
+
{
|
|
24442
|
+
"kind": "method",
|
|
24443
|
+
"name": "renderErrorState",
|
|
24444
|
+
"privacy": "private",
|
|
24445
|
+
"description": "Renders the error state of the progress spinner.",
|
|
24446
|
+
"return": {
|
|
24447
|
+
"type": {
|
|
24448
|
+
"text": ""
|
|
24449
|
+
}
|
|
24450
|
+
}
|
|
24451
|
+
},
|
|
24452
|
+
{
|
|
24453
|
+
"kind": "method",
|
|
24454
|
+
"name": "renderSuccessState",
|
|
24455
|
+
"privacy": "private",
|
|
24456
|
+
"description": "Renders the success state of the progress spinner.",
|
|
24457
|
+
"return": {
|
|
24458
|
+
"type": {
|
|
24459
|
+
"text": ""
|
|
24460
|
+
}
|
|
24461
|
+
}
|
|
24462
|
+
},
|
|
24463
|
+
{
|
|
24464
|
+
"kind": "field",
|
|
24465
|
+
"name": "dataAriaLabel",
|
|
24466
|
+
"type": {
|
|
24467
|
+
"text": "string | null"
|
|
24468
|
+
},
|
|
24469
|
+
"default": "null",
|
|
24470
|
+
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
24471
|
+
"attribute": "data-aria-label",
|
|
24472
|
+
"reflects": true,
|
|
24473
|
+
"inheritedFrom": {
|
|
24474
|
+
"name": "DataAriaLabelMixin",
|
|
24475
|
+
"module": "utils/mixins/DataAriaLabelMixin.js"
|
|
24476
|
+
}
|
|
24477
|
+
},
|
|
24372
24478
|
{
|
|
24373
24479
|
"kind": "field",
|
|
24374
24480
|
"name": "variant",
|
|
@@ -24378,7 +24484,11 @@
|
|
|
24378
24484
|
"description": "Types of the progressbar\n- **Default**\n- **Inline**",
|
|
24379
24485
|
"default": "default",
|
|
24380
24486
|
"attribute": "variant",
|
|
24381
|
-
"reflects": true
|
|
24487
|
+
"reflects": true,
|
|
24488
|
+
"inheritedFrom": {
|
|
24489
|
+
"name": "Progressbar",
|
|
24490
|
+
"module": "components/progressbar/progressbar.component.js"
|
|
24491
|
+
}
|
|
24382
24492
|
},
|
|
24383
24493
|
{
|
|
24384
24494
|
"kind": "field",
|
|
@@ -24389,7 +24499,11 @@
|
|
|
24389
24499
|
"default": "'0'",
|
|
24390
24500
|
"description": "The current progress as a percentage, 0 to 100.\nThe value will be clamped between 0 and 100.",
|
|
24391
24501
|
"attribute": "value",
|
|
24392
|
-
"reflects": true
|
|
24502
|
+
"reflects": true,
|
|
24503
|
+
"inheritedFrom": {
|
|
24504
|
+
"name": "Progressbar",
|
|
24505
|
+
"module": "components/progressbar/progressbar.component.js"
|
|
24506
|
+
}
|
|
24393
24507
|
},
|
|
24394
24508
|
{
|
|
24395
24509
|
"kind": "field",
|
|
@@ -24399,7 +24513,11 @@
|
|
|
24399
24513
|
},
|
|
24400
24514
|
"default": "false",
|
|
24401
24515
|
"description": "Define error state of the progressbar\n- **true**\n- **false**",
|
|
24402
|
-
"attribute": "error"
|
|
24516
|
+
"attribute": "error",
|
|
24517
|
+
"inheritedFrom": {
|
|
24518
|
+
"name": "Progressbar",
|
|
24519
|
+
"module": "components/progressbar/progressbar.component.js"
|
|
24520
|
+
}
|
|
24403
24521
|
},
|
|
24404
24522
|
{
|
|
24405
24523
|
"kind": "method",
|
|
@@ -24410,21 +24528,10 @@
|
|
|
24410
24528
|
"type": {
|
|
24411
24529
|
"text": ""
|
|
24412
24530
|
}
|
|
24413
|
-
}
|
|
24414
|
-
},
|
|
24415
|
-
{
|
|
24416
|
-
"kind": "field",
|
|
24417
|
-
"name": "dataAriaLabel",
|
|
24418
|
-
"type": {
|
|
24419
|
-
"text": "string | null"
|
|
24420
24531
|
},
|
|
24421
|
-
"default": "null",
|
|
24422
|
-
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
24423
|
-
"attribute": "data-aria-label",
|
|
24424
|
-
"reflects": true,
|
|
24425
24532
|
"inheritedFrom": {
|
|
24426
|
-
"name": "
|
|
24427
|
-
"module": "
|
|
24533
|
+
"name": "Progressbar",
|
|
24534
|
+
"module": "components/progressbar/progressbar.component.js"
|
|
24428
24535
|
}
|
|
24429
24536
|
},
|
|
24430
24537
|
{
|
|
@@ -24632,7 +24739,27 @@
|
|
|
24632
24739
|
}
|
|
24633
24740
|
}
|
|
24634
24741
|
],
|
|
24742
|
+
"superclass": {
|
|
24743
|
+
"name": "Progressbar",
|
|
24744
|
+
"module": "/src/components/progressbar/progressbar.component"
|
|
24745
|
+
},
|
|
24746
|
+
"tagName": "mdc-progressspinner",
|
|
24747
|
+
"jsDoc": "/**\n * `mdc-progressspinner` is a customizable, circular progress indicator component.\n * It visually represents the current completion state of a process, such as loading,\n * syncing, uploading, or any ongoing task that has a measurable percentage.\n *\n * The spinner is built using SVG with two concentric `<circle>` elements:\n * - The `progress` arc represents the portion of work completed.\n * - The `track` arc represents the remaining part.\n *\n * A visual gap is maintained between the progress and track arcs to clearly\n * distinguish the two segments. The component smoothly animates arc length\n * and respects accessibility best practices with ARIA attributes.\n *\n * The component supports different states:\n * - **Default**: Circular spinner shows the progress.\n * - **Success**: Displays a checkmark icon when progress reaches 100%.\n * - **Error**: Displays an error icon when in an error state.\n *\n * @tagname mdc-progressspinner\n *\n * @cssproperty --mdc-spinner-size - The size of the spinner.\n * @cssproperty --mdc-track-color - The color of the spinner track.\n * @cssproperty --mdc-progress-color - The color of the spinner progress.\n * @cssproperty --mdc-progress-success-color - The color of the spinner when in success state.\n * @cssproperty --mdc-progress-error-color - The color of the spinner when in error state.\n *\n */",
|
|
24748
|
+
"customElement": true,
|
|
24635
24749
|
"attributes": [
|
|
24750
|
+
{
|
|
24751
|
+
"name": "data-aria-label",
|
|
24752
|
+
"type": {
|
|
24753
|
+
"text": "string | null"
|
|
24754
|
+
},
|
|
24755
|
+
"default": "null",
|
|
24756
|
+
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
24757
|
+
"fieldName": "dataAriaLabel",
|
|
24758
|
+
"inheritedFrom": {
|
|
24759
|
+
"name": "DataAriaLabelMixin",
|
|
24760
|
+
"module": "src/utils/mixins/DataAriaLabelMixin.ts"
|
|
24761
|
+
}
|
|
24762
|
+
},
|
|
24636
24763
|
{
|
|
24637
24764
|
"name": "variant",
|
|
24638
24765
|
"type": {
|
|
@@ -24640,7 +24767,11 @@
|
|
|
24640
24767
|
},
|
|
24641
24768
|
"description": "Types of the progressbar\n- **Default**\n- **Inline**",
|
|
24642
24769
|
"default": "default",
|
|
24643
|
-
"fieldName": "variant"
|
|
24770
|
+
"fieldName": "variant",
|
|
24771
|
+
"inheritedFrom": {
|
|
24772
|
+
"name": "Progressbar",
|
|
24773
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
24774
|
+
}
|
|
24644
24775
|
},
|
|
24645
24776
|
{
|
|
24646
24777
|
"name": "value",
|
|
@@ -24649,7 +24780,11 @@
|
|
|
24649
24780
|
},
|
|
24650
24781
|
"default": "'0'",
|
|
24651
24782
|
"description": "The current progress as a percentage, 0 to 100.\nThe value will be clamped between 0 and 100.",
|
|
24652
|
-
"fieldName": "value"
|
|
24783
|
+
"fieldName": "value",
|
|
24784
|
+
"inheritedFrom": {
|
|
24785
|
+
"name": "Progressbar",
|
|
24786
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
24787
|
+
}
|
|
24653
24788
|
},
|
|
24654
24789
|
{
|
|
24655
24790
|
"name": "error",
|
|
@@ -24658,19 +24793,10 @@
|
|
|
24658
24793
|
},
|
|
24659
24794
|
"default": "false",
|
|
24660
24795
|
"description": "Define error state of the progressbar\n- **true**\n- **false**",
|
|
24661
|
-
"fieldName": "error"
|
|
24662
|
-
},
|
|
24663
|
-
{
|
|
24664
|
-
"name": "data-aria-label",
|
|
24665
|
-
"type": {
|
|
24666
|
-
"text": "string | null"
|
|
24667
|
-
},
|
|
24668
|
-
"default": "null",
|
|
24669
|
-
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
24670
|
-
"fieldName": "dataAriaLabel",
|
|
24796
|
+
"fieldName": "error",
|
|
24671
24797
|
"inheritedFrom": {
|
|
24672
|
-
"name": "
|
|
24673
|
-
"module": "src/
|
|
24798
|
+
"name": "Progressbar",
|
|
24799
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
24674
24800
|
}
|
|
24675
24801
|
},
|
|
24676
24802
|
{
|
|
@@ -24785,20 +24911,7 @@
|
|
|
24785
24911
|
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
24786
24912
|
}
|
|
24787
24913
|
}
|
|
24788
|
-
]
|
|
24789
|
-
"mixins": [
|
|
24790
|
-
{
|
|
24791
|
-
"name": "DataAriaLabelMixin",
|
|
24792
|
-
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
|
24793
|
-
}
|
|
24794
|
-
],
|
|
24795
|
-
"superclass": {
|
|
24796
|
-
"name": "FormfieldWrapper",
|
|
24797
|
-
"module": "/src/components/formfieldwrapper"
|
|
24798
|
-
},
|
|
24799
|
-
"tagName": "mdc-progressbar",
|
|
24800
|
-
"jsDoc": "/**\n * mdc-progressbar component visually represents a progress indicator, typically used to show\n * the completion state of an ongoing process (e.g., loading, file upload, etc.).\n * It contains an optional label and an optional helper text.\n *\n * - It supports mainly two types: Default and Inline\n * - It supports three validation variants: Default, Success and Error.\n *\n * This component is created by extending FormfieldWrapper.\n *\n * @tagname mdc-progressbar\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-progressbar-default-background-color - Background color of the progressbar when inactive.\n * @cssproperty --mdc-progressbar-default-active-background-color - Background color of the progressbar when active.\n * @cssproperty --mdc-progressbar-success-background-color - Background color of the progressbar when in success state.\n * @cssproperty --mdc-progressbar-error-background-color - Background color of the progressbar when in error state.\n * @cssproperty --mdc-progressbar-height - The height of the progressbar.\n * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.\n * @cssproperty --mdc-progressbar-label-color - Color of the progressbar label text.\n * @cssproperty --mdc-progressbar-label-lineheight - Line height of the label text.\n * @cssproperty --mdc-progressbar-label-fontsize - Font size of the label text.\n * @cssproperty --mdc-progressbar-label-fontweight - Font weight of the label text.\n * @cssproperty --mdc-progressbar-help-text-color - Color of the help text.\n */",
|
|
24801
|
-
"customElement": true
|
|
24914
|
+
]
|
|
24802
24915
|
}
|
|
24803
24916
|
],
|
|
24804
24917
|
"exports": [
|
|
@@ -24806,173 +24919,67 @@
|
|
|
24806
24919
|
"kind": "js",
|
|
24807
24920
|
"name": "default",
|
|
24808
24921
|
"declaration": {
|
|
24809
|
-
"name": "
|
|
24810
|
-
"module": "components/
|
|
24922
|
+
"name": "Progressspinner",
|
|
24923
|
+
"module": "components/progressspinner/progressspinner.component.js"
|
|
24811
24924
|
}
|
|
24812
24925
|
}
|
|
24813
24926
|
]
|
|
24814
24927
|
},
|
|
24815
24928
|
{
|
|
24816
24929
|
"kind": "javascript-module",
|
|
24817
|
-
"path": "components/
|
|
24930
|
+
"path": "components/progressbar/progressbar.component.js",
|
|
24818
24931
|
"declarations": [
|
|
24819
24932
|
{
|
|
24820
24933
|
"kind": "class",
|
|
24821
|
-
"description": "
|
|
24822
|
-
"name": "
|
|
24934
|
+
"description": "mdc-progressbar component visually represents a progress indicator, typically used to show\nthe completion state of an ongoing process (e.g., loading, file upload, etc.).\nIt contains an optional label and an optional helper text.\n\n- It supports mainly two types: Default and Inline\n- It supports three validation variants: Default, Success and Error.\n\nThis component is created by extending FormfieldWrapper.",
|
|
24935
|
+
"name": "Progressbar",
|
|
24823
24936
|
"cssProperties": [
|
|
24824
|
-
{
|
|
24825
|
-
"description": "The size of the spinner.",
|
|
24826
|
-
"name": "--mdc-spinner-size"
|
|
24827
|
-
},
|
|
24828
|
-
{
|
|
24829
|
-
"description": "The color of the spinner track.",
|
|
24830
|
-
"name": "--mdc-track-color"
|
|
24831
|
-
},
|
|
24832
|
-
{
|
|
24833
|
-
"description": "The color of the spinner progress.",
|
|
24834
|
-
"name": "--mdc-progress-color"
|
|
24835
|
-
},
|
|
24836
|
-
{
|
|
24837
|
-
"description": "The color of the spinner when in success state.",
|
|
24838
|
-
"name": "--mdc-progress-success-color"
|
|
24839
|
-
},
|
|
24840
|
-
{
|
|
24841
|
-
"description": "The color of the spinner when in error state.",
|
|
24842
|
-
"name": "--mdc-progress-error-color"
|
|
24843
|
-
},
|
|
24844
24937
|
{
|
|
24845
24938
|
"description": "Background color of the progressbar when inactive.",
|
|
24846
|
-
"name": "--mdc-progressbar-default-background-color"
|
|
24847
|
-
"inheritedFrom": {
|
|
24848
|
-
"name": "Progressbar",
|
|
24849
|
-
"module": "src/components/progressbar/progressbar.component.ts"
|
|
24850
|
-
}
|
|
24939
|
+
"name": "--mdc-progressbar-default-background-color"
|
|
24851
24940
|
},
|
|
24852
24941
|
{
|
|
24853
24942
|
"description": "Background color of the progressbar when active.",
|
|
24854
|
-
"name": "--mdc-progressbar-default-active-background-color"
|
|
24855
|
-
"inheritedFrom": {
|
|
24856
|
-
"name": "Progressbar",
|
|
24857
|
-
"module": "src/components/progressbar/progressbar.component.ts"
|
|
24858
|
-
}
|
|
24943
|
+
"name": "--mdc-progressbar-default-active-background-color"
|
|
24859
24944
|
},
|
|
24860
24945
|
{
|
|
24861
24946
|
"description": "Background color of the progressbar when in success state.",
|
|
24862
|
-
"name": "--mdc-progressbar-success-background-color"
|
|
24863
|
-
"inheritedFrom": {
|
|
24864
|
-
"name": "Progressbar",
|
|
24865
|
-
"module": "src/components/progressbar/progressbar.component.ts"
|
|
24866
|
-
}
|
|
24947
|
+
"name": "--mdc-progressbar-success-background-color"
|
|
24867
24948
|
},
|
|
24868
24949
|
{
|
|
24869
24950
|
"description": "Background color of the progressbar when in error state.",
|
|
24870
|
-
"name": "--mdc-progressbar-error-background-color"
|
|
24871
|
-
"inheritedFrom": {
|
|
24872
|
-
"name": "Progressbar",
|
|
24873
|
-
"module": "src/components/progressbar/progressbar.component.ts"
|
|
24874
|
-
}
|
|
24951
|
+
"name": "--mdc-progressbar-error-background-color"
|
|
24875
24952
|
},
|
|
24876
24953
|
{
|
|
24877
24954
|
"description": "The height of the progressbar.",
|
|
24878
|
-
"name": "--mdc-progressbar-height"
|
|
24879
|
-
"inheritedFrom": {
|
|
24880
|
-
"name": "Progressbar",
|
|
24881
|
-
"module": "src/components/progressbar/progressbar.component.ts"
|
|
24882
|
-
}
|
|
24955
|
+
"name": "--mdc-progressbar-height"
|
|
24883
24956
|
},
|
|
24884
24957
|
{
|
|
24885
24958
|
"description": "The border radius of the progressbar.",
|
|
24886
|
-
"name": "--mdc-progressbar-border-radius"
|
|
24887
|
-
"inheritedFrom": {
|
|
24888
|
-
"name": "Progressbar",
|
|
24889
|
-
"module": "src/components/progressbar/progressbar.component.ts"
|
|
24890
|
-
}
|
|
24959
|
+
"name": "--mdc-progressbar-border-radius"
|
|
24891
24960
|
},
|
|
24892
24961
|
{
|
|
24893
24962
|
"description": "Color of the progressbar label text.",
|
|
24894
|
-
"name": "--mdc-progressbar-label-color"
|
|
24895
|
-
"inheritedFrom": {
|
|
24896
|
-
"name": "Progressbar",
|
|
24897
|
-
"module": "src/components/progressbar/progressbar.component.ts"
|
|
24898
|
-
}
|
|
24963
|
+
"name": "--mdc-progressbar-label-color"
|
|
24899
24964
|
},
|
|
24900
24965
|
{
|
|
24901
24966
|
"description": "Line height of the label text.",
|
|
24902
|
-
"name": "--mdc-progressbar-label-lineheight"
|
|
24903
|
-
"inheritedFrom": {
|
|
24904
|
-
"name": "Progressbar",
|
|
24905
|
-
"module": "src/components/progressbar/progressbar.component.ts"
|
|
24906
|
-
}
|
|
24967
|
+
"name": "--mdc-progressbar-label-lineheight"
|
|
24907
24968
|
},
|
|
24908
24969
|
{
|
|
24909
24970
|
"description": "Font size of the label text.",
|
|
24910
|
-
"name": "--mdc-progressbar-label-fontsize"
|
|
24911
|
-
"inheritedFrom": {
|
|
24912
|
-
"name": "Progressbar",
|
|
24913
|
-
"module": "src/components/progressbar/progressbar.component.ts"
|
|
24914
|
-
}
|
|
24971
|
+
"name": "--mdc-progressbar-label-fontsize"
|
|
24915
24972
|
},
|
|
24916
24973
|
{
|
|
24917
24974
|
"description": "Font weight of the label text.",
|
|
24918
|
-
"name": "--mdc-progressbar-label-fontweight"
|
|
24919
|
-
"inheritedFrom": {
|
|
24920
|
-
"name": "Progressbar",
|
|
24921
|
-
"module": "src/components/progressbar/progressbar.component.ts"
|
|
24922
|
-
}
|
|
24975
|
+
"name": "--mdc-progressbar-label-fontweight"
|
|
24923
24976
|
},
|
|
24924
24977
|
{
|
|
24925
24978
|
"description": "Color of the help text.",
|
|
24926
|
-
"name": "--mdc-progressbar-help-text-color"
|
|
24927
|
-
"inheritedFrom": {
|
|
24928
|
-
"name": "Progressbar",
|
|
24929
|
-
"module": "src/components/progressbar/progressbar.component.ts"
|
|
24930
|
-
}
|
|
24979
|
+
"name": "--mdc-progressbar-help-text-color"
|
|
24931
24980
|
}
|
|
24932
24981
|
],
|
|
24933
24982
|
"members": [
|
|
24934
|
-
{
|
|
24935
|
-
"kind": "method",
|
|
24936
|
-
"name": "renderProgressSpinner",
|
|
24937
|
-
"privacy": "private"
|
|
24938
|
-
},
|
|
24939
|
-
{
|
|
24940
|
-
"kind": "method",
|
|
24941
|
-
"name": "renderErrorState",
|
|
24942
|
-
"privacy": "private",
|
|
24943
|
-
"description": "Renders the error state of the progress spinner.",
|
|
24944
|
-
"return": {
|
|
24945
|
-
"type": {
|
|
24946
|
-
"text": ""
|
|
24947
|
-
}
|
|
24948
|
-
}
|
|
24949
|
-
},
|
|
24950
|
-
{
|
|
24951
|
-
"kind": "method",
|
|
24952
|
-
"name": "renderSuccessState",
|
|
24953
|
-
"privacy": "private",
|
|
24954
|
-
"description": "Renders the success state of the progress spinner.",
|
|
24955
|
-
"return": {
|
|
24956
|
-
"type": {
|
|
24957
|
-
"text": ""
|
|
24958
|
-
}
|
|
24959
|
-
}
|
|
24960
|
-
},
|
|
24961
|
-
{
|
|
24962
|
-
"kind": "field",
|
|
24963
|
-
"name": "dataAriaLabel",
|
|
24964
|
-
"type": {
|
|
24965
|
-
"text": "string | null"
|
|
24966
|
-
},
|
|
24967
|
-
"default": "null",
|
|
24968
|
-
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
24969
|
-
"attribute": "data-aria-label",
|
|
24970
|
-
"reflects": true,
|
|
24971
|
-
"inheritedFrom": {
|
|
24972
|
-
"name": "DataAriaLabelMixin",
|
|
24973
|
-
"module": "utils/mixins/DataAriaLabelMixin.js"
|
|
24974
|
-
}
|
|
24975
|
-
},
|
|
24976
24983
|
{
|
|
24977
24984
|
"kind": "field",
|
|
24978
24985
|
"name": "variant",
|
|
@@ -24982,11 +24989,7 @@
|
|
|
24982
24989
|
"description": "Types of the progressbar\n- **Default**\n- **Inline**",
|
|
24983
24990
|
"default": "default",
|
|
24984
24991
|
"attribute": "variant",
|
|
24985
|
-
"reflects": true
|
|
24986
|
-
"inheritedFrom": {
|
|
24987
|
-
"name": "Progressbar",
|
|
24988
|
-
"module": "components/progressbar/progressbar.component.js"
|
|
24989
|
-
}
|
|
24992
|
+
"reflects": true
|
|
24990
24993
|
},
|
|
24991
24994
|
{
|
|
24992
24995
|
"kind": "field",
|
|
@@ -24997,11 +25000,7 @@
|
|
|
24997
25000
|
"default": "'0'",
|
|
24998
25001
|
"description": "The current progress as a percentage, 0 to 100.\nThe value will be clamped between 0 and 100.",
|
|
24999
25002
|
"attribute": "value",
|
|
25000
|
-
"reflects": true
|
|
25001
|
-
"inheritedFrom": {
|
|
25002
|
-
"name": "Progressbar",
|
|
25003
|
-
"module": "components/progressbar/progressbar.component.js"
|
|
25004
|
-
}
|
|
25003
|
+
"reflects": true
|
|
25005
25004
|
},
|
|
25006
25005
|
{
|
|
25007
25006
|
"kind": "field",
|
|
@@ -25011,11 +25010,7 @@
|
|
|
25011
25010
|
},
|
|
25012
25011
|
"default": "false",
|
|
25013
25012
|
"description": "Define error state of the progressbar\n- **true**\n- **false**",
|
|
25014
|
-
"attribute": "error"
|
|
25015
|
-
"inheritedFrom": {
|
|
25016
|
-
"name": "Progressbar",
|
|
25017
|
-
"module": "components/progressbar/progressbar.component.js"
|
|
25018
|
-
}
|
|
25013
|
+
"attribute": "error"
|
|
25019
25014
|
},
|
|
25020
25015
|
{
|
|
25021
25016
|
"kind": "method",
|
|
@@ -25026,10 +25021,21 @@
|
|
|
25026
25021
|
"type": {
|
|
25027
25022
|
"text": ""
|
|
25028
25023
|
}
|
|
25024
|
+
}
|
|
25025
|
+
},
|
|
25026
|
+
{
|
|
25027
|
+
"kind": "field",
|
|
25028
|
+
"name": "dataAriaLabel",
|
|
25029
|
+
"type": {
|
|
25030
|
+
"text": "string | null"
|
|
25029
25031
|
},
|
|
25032
|
+
"default": "null",
|
|
25033
|
+
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
25034
|
+
"attribute": "data-aria-label",
|
|
25035
|
+
"reflects": true,
|
|
25030
25036
|
"inheritedFrom": {
|
|
25031
|
-
"name": "
|
|
25032
|
-
"module": "
|
|
25037
|
+
"name": "DataAriaLabelMixin",
|
|
25038
|
+
"module": "utils/mixins/DataAriaLabelMixin.js"
|
|
25033
25039
|
}
|
|
25034
25040
|
},
|
|
25035
25041
|
{
|
|
@@ -25237,27 +25243,7 @@
|
|
|
25237
25243
|
}
|
|
25238
25244
|
}
|
|
25239
25245
|
],
|
|
25240
|
-
"superclass": {
|
|
25241
|
-
"name": "Progressbar",
|
|
25242
|
-
"module": "/src/components/progressbar/progressbar.component"
|
|
25243
|
-
},
|
|
25244
|
-
"tagName": "mdc-progressspinner",
|
|
25245
|
-
"jsDoc": "/**\n * `mdc-progressspinner` is a customizable, circular progress indicator component.\n * It visually represents the current completion state of a process, such as loading,\n * syncing, uploading, or any ongoing task that has a measurable percentage.\n *\n * The spinner is built using SVG with two concentric `<circle>` elements:\n * - The `progress` arc represents the portion of work completed.\n * - The `track` arc represents the remaining part.\n *\n * A visual gap is maintained between the progress and track arcs to clearly\n * distinguish the two segments. The component smoothly animates arc length\n * and respects accessibility best practices with ARIA attributes.\n *\n * The component supports different states:\n * - **Default**: Circular spinner shows the progress.\n * - **Success**: Displays a checkmark icon when progress reaches 100%.\n * - **Error**: Displays an error icon when in an error state.\n *\n * @tagname mdc-progressspinner\n *\n * @cssproperty --mdc-spinner-size - The size of the spinner.\n * @cssproperty --mdc-track-color - The color of the spinner track.\n * @cssproperty --mdc-progress-color - The color of the spinner progress.\n * @cssproperty --mdc-progress-success-color - The color of the spinner when in success state.\n * @cssproperty --mdc-progress-error-color - The color of the spinner when in error state.\n *\n */",
|
|
25246
|
-
"customElement": true,
|
|
25247
25246
|
"attributes": [
|
|
25248
|
-
{
|
|
25249
|
-
"name": "data-aria-label",
|
|
25250
|
-
"type": {
|
|
25251
|
-
"text": "string | null"
|
|
25252
|
-
},
|
|
25253
|
-
"default": "null",
|
|
25254
|
-
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
25255
|
-
"fieldName": "dataAriaLabel",
|
|
25256
|
-
"inheritedFrom": {
|
|
25257
|
-
"name": "DataAriaLabelMixin",
|
|
25258
|
-
"module": "src/utils/mixins/DataAriaLabelMixin.ts"
|
|
25259
|
-
}
|
|
25260
|
-
},
|
|
25261
25247
|
{
|
|
25262
25248
|
"name": "variant",
|
|
25263
25249
|
"type": {
|
|
@@ -25265,11 +25251,7 @@
|
|
|
25265
25251
|
},
|
|
25266
25252
|
"description": "Types of the progressbar\n- **Default**\n- **Inline**",
|
|
25267
25253
|
"default": "default",
|
|
25268
|
-
"fieldName": "variant"
|
|
25269
|
-
"inheritedFrom": {
|
|
25270
|
-
"name": "Progressbar",
|
|
25271
|
-
"module": "src/components/progressbar/progressbar.component.ts"
|
|
25272
|
-
}
|
|
25254
|
+
"fieldName": "variant"
|
|
25273
25255
|
},
|
|
25274
25256
|
{
|
|
25275
25257
|
"name": "value",
|
|
@@ -25278,11 +25260,7 @@
|
|
|
25278
25260
|
},
|
|
25279
25261
|
"default": "'0'",
|
|
25280
25262
|
"description": "The current progress as a percentage, 0 to 100.\nThe value will be clamped between 0 and 100.",
|
|
25281
|
-
"fieldName": "value"
|
|
25282
|
-
"inheritedFrom": {
|
|
25283
|
-
"name": "Progressbar",
|
|
25284
|
-
"module": "src/components/progressbar/progressbar.component.ts"
|
|
25285
|
-
}
|
|
25263
|
+
"fieldName": "value"
|
|
25286
25264
|
},
|
|
25287
25265
|
{
|
|
25288
25266
|
"name": "error",
|
|
@@ -25291,10 +25269,19 @@
|
|
|
25291
25269
|
},
|
|
25292
25270
|
"default": "false",
|
|
25293
25271
|
"description": "Define error state of the progressbar\n- **true**\n- **false**",
|
|
25294
|
-
"fieldName": "error"
|
|
25272
|
+
"fieldName": "error"
|
|
25273
|
+
},
|
|
25274
|
+
{
|
|
25275
|
+
"name": "data-aria-label",
|
|
25276
|
+
"type": {
|
|
25277
|
+
"text": "string | null"
|
|
25278
|
+
},
|
|
25279
|
+
"default": "null",
|
|
25280
|
+
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
25281
|
+
"fieldName": "dataAriaLabel",
|
|
25295
25282
|
"inheritedFrom": {
|
|
25296
|
-
"name": "
|
|
25297
|
-
"module": "src/
|
|
25283
|
+
"name": "DataAriaLabelMixin",
|
|
25284
|
+
"module": "src/utils/mixins/DataAriaLabelMixin.ts"
|
|
25298
25285
|
}
|
|
25299
25286
|
},
|
|
25300
25287
|
{
|
|
@@ -25409,7 +25396,20 @@
|
|
|
25409
25396
|
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
25410
25397
|
}
|
|
25411
25398
|
}
|
|
25412
|
-
]
|
|
25399
|
+
],
|
|
25400
|
+
"mixins": [
|
|
25401
|
+
{
|
|
25402
|
+
"name": "DataAriaLabelMixin",
|
|
25403
|
+
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
|
25404
|
+
}
|
|
25405
|
+
],
|
|
25406
|
+
"superclass": {
|
|
25407
|
+
"name": "FormfieldWrapper",
|
|
25408
|
+
"module": "/src/components/formfieldwrapper"
|
|
25409
|
+
},
|
|
25410
|
+
"tagName": "mdc-progressbar",
|
|
25411
|
+
"jsDoc": "/**\n * mdc-progressbar component visually represents a progress indicator, typically used to show\n * the completion state of an ongoing process (e.g., loading, file upload, etc.).\n * It contains an optional label and an optional helper text.\n *\n * - It supports mainly two types: Default and Inline\n * - It supports three validation variants: Default, Success and Error.\n *\n * This component is created by extending FormfieldWrapper.\n *\n * @tagname mdc-progressbar\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-progressbar-default-background-color - Background color of the progressbar when inactive.\n * @cssproperty --mdc-progressbar-default-active-background-color - Background color of the progressbar when active.\n * @cssproperty --mdc-progressbar-success-background-color - Background color of the progressbar when in success state.\n * @cssproperty --mdc-progressbar-error-background-color - Background color of the progressbar when in error state.\n * @cssproperty --mdc-progressbar-height - The height of the progressbar.\n * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.\n * @cssproperty --mdc-progressbar-label-color - Color of the progressbar label text.\n * @cssproperty --mdc-progressbar-label-lineheight - Line height of the label text.\n * @cssproperty --mdc-progressbar-label-fontsize - Font size of the label text.\n * @cssproperty --mdc-progressbar-label-fontweight - Font weight of the label text.\n * @cssproperty --mdc-progressbar-help-text-color - Color of the help text.\n */",
|
|
25412
|
+
"customElement": true
|
|
25413
25413
|
}
|
|
25414
25414
|
],
|
|
25415
25415
|
"exports": [
|
|
@@ -25417,8 +25417,8 @@
|
|
|
25417
25417
|
"kind": "js",
|
|
25418
25418
|
"name": "default",
|
|
25419
25419
|
"declaration": {
|
|
25420
|
-
"name": "
|
|
25421
|
-
"module": "components/
|
|
25420
|
+
"name": "Progressbar",
|
|
25421
|
+
"module": "components/progressbar/progressbar.component.js"
|
|
25422
25422
|
}
|
|
25423
25423
|
}
|
|
25424
25424
|
]
|