@momentum-design/components 0.118.2 → 0.118.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +1237 -1237
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +2 -2
- package/package.json +1 -1
@@ -2,481 +2,6 @@
|
|
2
2
|
"schemaVersion": "1.0.0",
|
3
3
|
"readme": "",
|
4
4
|
"modules": [
|
5
|
-
{
|
6
|
-
"kind": "javascript-module",
|
7
|
-
"path": "components/accordion/accordion.component.js",
|
8
|
-
"declarations": [
|
9
|
-
{
|
10
|
-
"kind": "class",
|
11
|
-
"description": "An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n- Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n- Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.",
|
12
|
-
"name": "Accordion",
|
13
|
-
"cssProperties": [
|
14
|
-
{
|
15
|
-
"description": "The border color of the accordion.",
|
16
|
-
"name": "--mdc-accordionbutton-border-color",
|
17
|
-
"inheritedFrom": {
|
18
|
-
"name": "AccordionButton",
|
19
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
20
|
-
}
|
21
|
-
},
|
22
|
-
{
|
23
|
-
"description": "The hover color of the accordion.",
|
24
|
-
"name": "--mdc-accordionbutton-hover-color",
|
25
|
-
"inheritedFrom": {
|
26
|
-
"name": "AccordionButton",
|
27
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
28
|
-
}
|
29
|
-
},
|
30
|
-
{
|
31
|
-
"description": "The active color of the accordion.",
|
32
|
-
"name": "--mdc-accordionbutton-active-color",
|
33
|
-
"inheritedFrom": {
|
34
|
-
"name": "AccordionButton",
|
35
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
36
|
-
}
|
37
|
-
},
|
38
|
-
{
|
39
|
-
"description": "The disabled color of the accordion.",
|
40
|
-
"name": "--mdc-accordionbutton-disabled-color",
|
41
|
-
"inheritedFrom": {
|
42
|
-
"name": "AccordionButton",
|
43
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
44
|
-
}
|
45
|
-
}
|
46
|
-
],
|
47
|
-
"cssParts": [
|
48
|
-
{
|
49
|
-
"description": "The header section of the accordion.",
|
50
|
-
"name": "header-section",
|
51
|
-
"inheritedFrom": {
|
52
|
-
"name": "AccordionButton",
|
53
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
54
|
-
}
|
55
|
-
},
|
56
|
-
{
|
57
|
-
"description": "The leading header of the accordion.",
|
58
|
-
"name": "leading-header",
|
59
|
-
"inheritedFrom": {
|
60
|
-
"name": "AccordionButton",
|
61
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
62
|
-
}
|
63
|
-
},
|
64
|
-
{
|
65
|
-
"description": "The trailing header of the accordion.",
|
66
|
-
"name": "trailing-header",
|
67
|
-
"inheritedFrom": {
|
68
|
-
"name": "AccordionButton",
|
69
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
70
|
-
}
|
71
|
-
},
|
72
|
-
{
|
73
|
-
"description": "The trailing header button of the accordion.",
|
74
|
-
"name": "trailing-header__button"
|
75
|
-
},
|
76
|
-
{
|
77
|
-
"description": "The body section of the accordion.",
|
78
|
-
"name": "body-section",
|
79
|
-
"inheritedFrom": {
|
80
|
-
"name": "AccordionButton",
|
81
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
82
|
-
}
|
83
|
-
},
|
84
|
-
{
|
85
|
-
"description": "The header button section of the accordion button.",
|
86
|
-
"name": "header-button-section",
|
87
|
-
"inheritedFrom": {
|
88
|
-
"name": "AccordionButton",
|
89
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
90
|
-
}
|
91
|
-
},
|
92
|
-
{
|
93
|
-
"description": "The trailing header icon of the accordion button.",
|
94
|
-
"name": "trailing-header__icon",
|
95
|
-
"inheritedFrom": {
|
96
|
-
"name": "AccordionButton",
|
97
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
98
|
-
}
|
99
|
-
}
|
100
|
-
],
|
101
|
-
"slots": [
|
102
|
-
{
|
103
|
-
"description": "The leading controls slot of the accordion on the header section.",
|
104
|
-
"name": "leading-controls"
|
105
|
-
},
|
106
|
-
{
|
107
|
-
"description": "The trailing controls slot of the accordion on the header section.",
|
108
|
-
"name": "trailing-controls"
|
109
|
-
},
|
110
|
-
{
|
111
|
-
"description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
|
112
|
-
"name": "default",
|
113
|
-
"inheritedFrom": {
|
114
|
-
"name": "AccordionButton",
|
115
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
116
|
-
}
|
117
|
-
}
|
118
|
-
],
|
119
|
-
"members": [
|
120
|
-
{
|
121
|
-
"kind": "method",
|
122
|
-
"name": "renderHeader",
|
123
|
-
"privacy": "protected",
|
124
|
-
"return": {
|
125
|
-
"type": {
|
126
|
-
"text": ""
|
127
|
-
}
|
128
|
-
},
|
129
|
-
"description": "Renders the header section of the accordion.\nThis includes the leading icon, text and controls, and the trailing controls.\nThe trailing controls include the expand/collapse button.\nThe button is disabled if the accordion is disabled.\nThe button is also given the aria-controls attribute set to the id of the body section.\nThe button is also given the aria-expanded attribute set to the expanded state of the accordion.\nThe prefix icon of the button is set to the expanded state of the accordion.",
|
130
|
-
"inheritedFrom": {
|
131
|
-
"name": "AccordionButton",
|
132
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
133
|
-
}
|
134
|
-
},
|
135
|
-
{
|
136
|
-
"kind": "field",
|
137
|
-
"name": "disabled",
|
138
|
-
"type": {
|
139
|
-
"text": "boolean | undefined"
|
140
|
-
},
|
141
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
142
|
-
"default": "undefined",
|
143
|
-
"attribute": "disabled",
|
144
|
-
"reflects": true,
|
145
|
-
"inheritedFrom": {
|
146
|
-
"name": "DisabledMixin",
|
147
|
-
"module": "utils/mixins/DisabledMixin.js"
|
148
|
-
}
|
149
|
-
},
|
150
|
-
{
|
151
|
-
"kind": "field",
|
152
|
-
"name": "size",
|
153
|
-
"type": {
|
154
|
-
"text": "Size"
|
155
|
-
},
|
156
|
-
"description": "The size of the accordion item.",
|
157
|
-
"default": "'small'",
|
158
|
-
"attribute": "size",
|
159
|
-
"reflects": true,
|
160
|
-
"inheritedFrom": {
|
161
|
-
"name": "AccordionButton",
|
162
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
163
|
-
}
|
164
|
-
},
|
165
|
-
{
|
166
|
-
"kind": "field",
|
167
|
-
"name": "variant",
|
168
|
-
"type": {
|
169
|
-
"text": "Variant"
|
170
|
-
},
|
171
|
-
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
172
|
-
"default": "'default'",
|
173
|
-
"attribute": "variant",
|
174
|
-
"reflects": true,
|
175
|
-
"inheritedFrom": {
|
176
|
-
"name": "AccordionButton",
|
177
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
178
|
-
}
|
179
|
-
},
|
180
|
-
{
|
181
|
-
"kind": "field",
|
182
|
-
"name": "dataAriaLevel",
|
183
|
-
"type": {
|
184
|
-
"text": "number"
|
185
|
-
},
|
186
|
-
"description": "The aria level of the accordion component.",
|
187
|
-
"default": "3",
|
188
|
-
"attribute": "data-aria-level",
|
189
|
-
"reflects": true,
|
190
|
-
"inheritedFrom": {
|
191
|
-
"name": "AccordionButton",
|
192
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
193
|
-
}
|
194
|
-
},
|
195
|
-
{
|
196
|
-
"kind": "field",
|
197
|
-
"name": "expanded",
|
198
|
-
"type": {
|
199
|
-
"text": "boolean"
|
200
|
-
},
|
201
|
-
"description": "The visibility of the accordion button.",
|
202
|
-
"default": "false",
|
203
|
-
"attribute": "expanded",
|
204
|
-
"reflects": true,
|
205
|
-
"inheritedFrom": {
|
206
|
-
"name": "AccordionButton",
|
207
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
208
|
-
}
|
209
|
-
},
|
210
|
-
{
|
211
|
-
"kind": "field",
|
212
|
-
"name": "headerText",
|
213
|
-
"type": {
|
214
|
-
"text": "string | undefined"
|
215
|
-
},
|
216
|
-
"description": "The header text of the accordion item.",
|
217
|
-
"attribute": "header-text",
|
218
|
-
"reflects": true,
|
219
|
-
"inheritedFrom": {
|
220
|
-
"name": "AccordionButton",
|
221
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
222
|
-
}
|
223
|
-
},
|
224
|
-
{
|
225
|
-
"kind": "field",
|
226
|
-
"name": "prefixIcon",
|
227
|
-
"type": {
|
228
|
-
"text": "IconNames | undefined"
|
229
|
-
},
|
230
|
-
"description": "The leading icon that is displayed before the header text.",
|
231
|
-
"attribute": "prefix-icon",
|
232
|
-
"inheritedFrom": {
|
233
|
-
"name": "AccordionButton",
|
234
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
235
|
-
}
|
236
|
-
},
|
237
|
-
{
|
238
|
-
"kind": "method",
|
239
|
-
"name": "handleHeaderClick",
|
240
|
-
"privacy": "protected",
|
241
|
-
"return": {
|
242
|
-
"type": {
|
243
|
-
"text": "void"
|
244
|
-
}
|
245
|
-
},
|
246
|
-
"description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state.",
|
247
|
-
"inheritedFrom": {
|
248
|
-
"name": "AccordionButton",
|
249
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
250
|
-
}
|
251
|
-
},
|
252
|
-
{
|
253
|
-
"kind": "method",
|
254
|
-
"name": "dispatchHeaderClickEvent",
|
255
|
-
"privacy": "private",
|
256
|
-
"return": {
|
257
|
-
"type": {
|
258
|
-
"text": "void"
|
259
|
-
}
|
260
|
-
},
|
261
|
-
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state.",
|
262
|
-
"inheritedFrom": {
|
263
|
-
"name": "AccordionButton",
|
264
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
265
|
-
}
|
266
|
-
},
|
267
|
-
{
|
268
|
-
"kind": "method",
|
269
|
-
"name": "handleKeyDown",
|
270
|
-
"privacy": "private",
|
271
|
-
"return": {
|
272
|
-
"type": {
|
273
|
-
"text": "void"
|
274
|
-
}
|
275
|
-
},
|
276
|
-
"parameters": [
|
277
|
-
{
|
278
|
-
"name": "event",
|
279
|
-
"type": {
|
280
|
-
"text": "KeyboardEvent"
|
281
|
-
},
|
282
|
-
"description": "The KeyboardEvent fired."
|
283
|
-
}
|
284
|
-
],
|
285
|
-
"description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys.",
|
286
|
-
"inheritedFrom": {
|
287
|
-
"name": "AccordionButton",
|
288
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
289
|
-
}
|
290
|
-
},
|
291
|
-
{
|
292
|
-
"kind": "method",
|
293
|
-
"name": "renderIcon",
|
294
|
-
"privacy": "protected",
|
295
|
-
"return": {
|
296
|
-
"type": {
|
297
|
-
"text": "TemplateResult | typeof nothing"
|
298
|
-
}
|
299
|
-
},
|
300
|
-
"parameters": [
|
301
|
-
{
|
302
|
-
"name": "iconName",
|
303
|
-
"optional": true,
|
304
|
-
"type": {
|
305
|
-
"text": "IconNames"
|
306
|
-
}
|
307
|
-
}
|
308
|
-
],
|
309
|
-
"inheritedFrom": {
|
310
|
-
"name": "AccordionButton",
|
311
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
312
|
-
}
|
313
|
-
},
|
314
|
-
{
|
315
|
-
"kind": "method",
|
316
|
-
"name": "renderHeadingText",
|
317
|
-
"privacy": "protected",
|
318
|
-
"return": {
|
319
|
-
"type": {
|
320
|
-
"text": "TemplateResult | typeof nothing"
|
321
|
-
}
|
322
|
-
},
|
323
|
-
"inheritedFrom": {
|
324
|
-
"name": "AccordionButton",
|
325
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
326
|
-
}
|
327
|
-
},
|
328
|
-
{
|
329
|
-
"kind": "method",
|
330
|
-
"name": "getArrowIconName",
|
331
|
-
"privacy": "protected",
|
332
|
-
"return": {
|
333
|
-
"type": {
|
334
|
-
"text": ""
|
335
|
-
}
|
336
|
-
},
|
337
|
-
"description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon.",
|
338
|
-
"inheritedFrom": {
|
339
|
-
"name": "AccordionButton",
|
340
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
341
|
-
}
|
342
|
-
},
|
343
|
-
{
|
344
|
-
"kind": "method",
|
345
|
-
"name": "renderBody",
|
346
|
-
"privacy": "protected",
|
347
|
-
"return": {
|
348
|
-
"type": {
|
349
|
-
"text": "TemplateResult | typeof nothing"
|
350
|
-
}
|
351
|
-
},
|
352
|
-
"inheritedFrom": {
|
353
|
-
"name": "AccordionButton",
|
354
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
355
|
-
}
|
356
|
-
}
|
357
|
-
],
|
358
|
-
"events": [
|
359
|
-
{
|
360
|
-
"description": "(React: onShown) This event is triggered when the accordion is expanded.",
|
361
|
-
"name": "shown",
|
362
|
-
"reactName": "onShown",
|
363
|
-
"inheritedFrom": {
|
364
|
-
"name": "AccordionButton",
|
365
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
366
|
-
}
|
367
|
-
}
|
368
|
-
],
|
369
|
-
"superclass": {
|
370
|
-
"name": "AccordionButton",
|
371
|
-
"module": "/src/components/accordionbutton/accordionbutton.component"
|
372
|
-
},
|
373
|
-
"tagName": "mdc-accordion",
|
374
|
-
"jsDoc": "/**\n * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.\n *\n * @tagname mdc-accordion\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot leading-controls - The leading controls slot of the accordion on the header section.\n * @slot trailing-controls - The trailing controls slot of the accordion on the header section.\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.\n *\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n * @csspart body-section - The body section of the accordion.\n */",
|
375
|
-
"customElement": true,
|
376
|
-
"attributes": [
|
377
|
-
{
|
378
|
-
"name": "disabled",
|
379
|
-
"type": {
|
380
|
-
"text": "boolean | undefined"
|
381
|
-
},
|
382
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
383
|
-
"default": "undefined",
|
384
|
-
"fieldName": "disabled",
|
385
|
-
"inheritedFrom": {
|
386
|
-
"name": "DisabledMixin",
|
387
|
-
"module": "src/utils/mixins/DisabledMixin.ts"
|
388
|
-
}
|
389
|
-
},
|
390
|
-
{
|
391
|
-
"name": "size",
|
392
|
-
"type": {
|
393
|
-
"text": "Size"
|
394
|
-
},
|
395
|
-
"description": "The size of the accordion item.",
|
396
|
-
"default": "'small'",
|
397
|
-
"fieldName": "size",
|
398
|
-
"inheritedFrom": {
|
399
|
-
"name": "AccordionButton",
|
400
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
401
|
-
}
|
402
|
-
},
|
403
|
-
{
|
404
|
-
"name": "variant",
|
405
|
-
"type": {
|
406
|
-
"text": "Variant"
|
407
|
-
},
|
408
|
-
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
409
|
-
"default": "'default'",
|
410
|
-
"fieldName": "variant",
|
411
|
-
"inheritedFrom": {
|
412
|
-
"name": "AccordionButton",
|
413
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
414
|
-
}
|
415
|
-
},
|
416
|
-
{
|
417
|
-
"name": "data-aria-level",
|
418
|
-
"type": {
|
419
|
-
"text": "number"
|
420
|
-
},
|
421
|
-
"description": "The aria level of the accordion component.",
|
422
|
-
"default": "3",
|
423
|
-
"fieldName": "dataAriaLevel",
|
424
|
-
"inheritedFrom": {
|
425
|
-
"name": "AccordionButton",
|
426
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
427
|
-
}
|
428
|
-
},
|
429
|
-
{
|
430
|
-
"name": "expanded",
|
431
|
-
"type": {
|
432
|
-
"text": "boolean"
|
433
|
-
},
|
434
|
-
"description": "The visibility of the accordion button.",
|
435
|
-
"default": "false",
|
436
|
-
"fieldName": "expanded",
|
437
|
-
"inheritedFrom": {
|
438
|
-
"name": "AccordionButton",
|
439
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
440
|
-
}
|
441
|
-
},
|
442
|
-
{
|
443
|
-
"name": "header-text",
|
444
|
-
"type": {
|
445
|
-
"text": "string | undefined"
|
446
|
-
},
|
447
|
-
"description": "The header text of the accordion item.",
|
448
|
-
"fieldName": "headerText",
|
449
|
-
"inheritedFrom": {
|
450
|
-
"name": "AccordionButton",
|
451
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
452
|
-
}
|
453
|
-
},
|
454
|
-
{
|
455
|
-
"name": "prefix-icon",
|
456
|
-
"type": {
|
457
|
-
"text": "IconNames | undefined"
|
458
|
-
},
|
459
|
-
"description": "The leading icon that is displayed before the header text.",
|
460
|
-
"fieldName": "prefixIcon",
|
461
|
-
"inheritedFrom": {
|
462
|
-
"name": "AccordionButton",
|
463
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
464
|
-
}
|
465
|
-
}
|
466
|
-
]
|
467
|
-
}
|
468
|
-
],
|
469
|
-
"exports": [
|
470
|
-
{
|
471
|
-
"kind": "js",
|
472
|
-
"name": "default",
|
473
|
-
"declaration": {
|
474
|
-
"name": "Accordion",
|
475
|
-
"module": "components/accordion/accordion.component.js"
|
476
|
-
}
|
477
|
-
}
|
478
|
-
]
|
479
|
-
},
|
480
5
|
{
|
481
6
|
"kind": "javascript-module",
|
482
7
|
"path": "components/accordionbutton/accordionbutton.component.js",
|
@@ -970,33 +495,508 @@
|
|
970
495
|
},
|
971
496
|
{
|
972
497
|
"kind": "javascript-module",
|
973
|
-
"path": "components/
|
498
|
+
"path": "components/accordion/accordion.component.js",
|
974
499
|
"declarations": [
|
975
500
|
{
|
976
501
|
"kind": "class",
|
977
|
-
"description": "
|
978
|
-
"name": "
|
502
|
+
"description": "An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n- Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n- Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.",
|
503
|
+
"name": "Accordion",
|
979
504
|
"cssProperties": [
|
980
505
|
{
|
981
|
-
"description": "The color of the
|
982
|
-
"name": "--mdc-
|
506
|
+
"description": "The border color of the accordion.",
|
507
|
+
"name": "--mdc-accordionbutton-border-color",
|
508
|
+
"inheritedFrom": {
|
509
|
+
"name": "AccordionButton",
|
510
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
511
|
+
}
|
983
512
|
},
|
984
513
|
{
|
985
|
-
"description": "The color of the
|
986
|
-
"name": "--mdc-
|
514
|
+
"description": "The hover color of the accordion.",
|
515
|
+
"name": "--mdc-accordionbutton-hover-color",
|
516
|
+
"inheritedFrom": {
|
517
|
+
"name": "AccordionButton",
|
518
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
519
|
+
}
|
987
520
|
},
|
988
521
|
{
|
989
|
-
"description": "The
|
990
|
-
"name": "--mdc-
|
522
|
+
"description": "The active color of the accordion.",
|
523
|
+
"name": "--mdc-accordionbutton-active-color",
|
524
|
+
"inheritedFrom": {
|
525
|
+
"name": "AccordionButton",
|
526
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
527
|
+
}
|
991
528
|
},
|
992
529
|
{
|
993
|
-
"description": "The
|
994
|
-
"name": "--mdc-
|
995
|
-
|
996
|
-
|
997
|
-
|
998
|
-
|
999
|
-
|
530
|
+
"description": "The disabled color of the accordion.",
|
531
|
+
"name": "--mdc-accordionbutton-disabled-color",
|
532
|
+
"inheritedFrom": {
|
533
|
+
"name": "AccordionButton",
|
534
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
535
|
+
}
|
536
|
+
}
|
537
|
+
],
|
538
|
+
"cssParts": [
|
539
|
+
{
|
540
|
+
"description": "The header section of the accordion.",
|
541
|
+
"name": "header-section",
|
542
|
+
"inheritedFrom": {
|
543
|
+
"name": "AccordionButton",
|
544
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
545
|
+
}
|
546
|
+
},
|
547
|
+
{
|
548
|
+
"description": "The leading header of the accordion.",
|
549
|
+
"name": "leading-header",
|
550
|
+
"inheritedFrom": {
|
551
|
+
"name": "AccordionButton",
|
552
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
553
|
+
}
|
554
|
+
},
|
555
|
+
{
|
556
|
+
"description": "The trailing header of the accordion.",
|
557
|
+
"name": "trailing-header",
|
558
|
+
"inheritedFrom": {
|
559
|
+
"name": "AccordionButton",
|
560
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
561
|
+
}
|
562
|
+
},
|
563
|
+
{
|
564
|
+
"description": "The trailing header button of the accordion.",
|
565
|
+
"name": "trailing-header__button"
|
566
|
+
},
|
567
|
+
{
|
568
|
+
"description": "The body section of the accordion.",
|
569
|
+
"name": "body-section",
|
570
|
+
"inheritedFrom": {
|
571
|
+
"name": "AccordionButton",
|
572
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
573
|
+
}
|
574
|
+
},
|
575
|
+
{
|
576
|
+
"description": "The header button section of the accordion button.",
|
577
|
+
"name": "header-button-section",
|
578
|
+
"inheritedFrom": {
|
579
|
+
"name": "AccordionButton",
|
580
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
581
|
+
}
|
582
|
+
},
|
583
|
+
{
|
584
|
+
"description": "The trailing header icon of the accordion button.",
|
585
|
+
"name": "trailing-header__icon",
|
586
|
+
"inheritedFrom": {
|
587
|
+
"name": "AccordionButton",
|
588
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
589
|
+
}
|
590
|
+
}
|
591
|
+
],
|
592
|
+
"slots": [
|
593
|
+
{
|
594
|
+
"description": "The leading controls slot of the accordion on the header section.",
|
595
|
+
"name": "leading-controls"
|
596
|
+
},
|
597
|
+
{
|
598
|
+
"description": "The trailing controls slot of the accordion on the header section.",
|
599
|
+
"name": "trailing-controls"
|
600
|
+
},
|
601
|
+
{
|
602
|
+
"description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
|
603
|
+
"name": "default",
|
604
|
+
"inheritedFrom": {
|
605
|
+
"name": "AccordionButton",
|
606
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
607
|
+
}
|
608
|
+
}
|
609
|
+
],
|
610
|
+
"members": [
|
611
|
+
{
|
612
|
+
"kind": "method",
|
613
|
+
"name": "renderHeader",
|
614
|
+
"privacy": "protected",
|
615
|
+
"return": {
|
616
|
+
"type": {
|
617
|
+
"text": ""
|
618
|
+
}
|
619
|
+
},
|
620
|
+
"description": "Renders the header section of the accordion.\nThis includes the leading icon, text and controls, and the trailing controls.\nThe trailing controls include the expand/collapse button.\nThe button is disabled if the accordion is disabled.\nThe button is also given the aria-controls attribute set to the id of the body section.\nThe button is also given the aria-expanded attribute set to the expanded state of the accordion.\nThe prefix icon of the button is set to the expanded state of the accordion.",
|
621
|
+
"inheritedFrom": {
|
622
|
+
"name": "AccordionButton",
|
623
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
624
|
+
}
|
625
|
+
},
|
626
|
+
{
|
627
|
+
"kind": "field",
|
628
|
+
"name": "disabled",
|
629
|
+
"type": {
|
630
|
+
"text": "boolean | undefined"
|
631
|
+
},
|
632
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
633
|
+
"default": "undefined",
|
634
|
+
"attribute": "disabled",
|
635
|
+
"reflects": true,
|
636
|
+
"inheritedFrom": {
|
637
|
+
"name": "AccordionButton",
|
638
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
639
|
+
}
|
640
|
+
},
|
641
|
+
{
|
642
|
+
"kind": "field",
|
643
|
+
"name": "size",
|
644
|
+
"type": {
|
645
|
+
"text": "Size"
|
646
|
+
},
|
647
|
+
"description": "The size of the accordion item.",
|
648
|
+
"default": "'small'",
|
649
|
+
"attribute": "size",
|
650
|
+
"reflects": true,
|
651
|
+
"inheritedFrom": {
|
652
|
+
"name": "AccordionButton",
|
653
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
654
|
+
}
|
655
|
+
},
|
656
|
+
{
|
657
|
+
"kind": "field",
|
658
|
+
"name": "variant",
|
659
|
+
"type": {
|
660
|
+
"text": "Variant"
|
661
|
+
},
|
662
|
+
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
663
|
+
"default": "'default'",
|
664
|
+
"attribute": "variant",
|
665
|
+
"reflects": true,
|
666
|
+
"inheritedFrom": {
|
667
|
+
"name": "AccordionButton",
|
668
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
669
|
+
}
|
670
|
+
},
|
671
|
+
{
|
672
|
+
"kind": "field",
|
673
|
+
"name": "dataAriaLevel",
|
674
|
+
"type": {
|
675
|
+
"text": "number"
|
676
|
+
},
|
677
|
+
"description": "The aria level of the accordion component.",
|
678
|
+
"default": "3",
|
679
|
+
"attribute": "data-aria-level",
|
680
|
+
"reflects": true,
|
681
|
+
"inheritedFrom": {
|
682
|
+
"name": "AccordionButton",
|
683
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
684
|
+
}
|
685
|
+
},
|
686
|
+
{
|
687
|
+
"kind": "field",
|
688
|
+
"name": "expanded",
|
689
|
+
"type": {
|
690
|
+
"text": "boolean"
|
691
|
+
},
|
692
|
+
"description": "The visibility of the accordion button.",
|
693
|
+
"default": "false",
|
694
|
+
"attribute": "expanded",
|
695
|
+
"reflects": true,
|
696
|
+
"inheritedFrom": {
|
697
|
+
"name": "AccordionButton",
|
698
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
699
|
+
}
|
700
|
+
},
|
701
|
+
{
|
702
|
+
"kind": "field",
|
703
|
+
"name": "headerText",
|
704
|
+
"type": {
|
705
|
+
"text": "string | undefined"
|
706
|
+
},
|
707
|
+
"description": "The header text of the accordion item.",
|
708
|
+
"attribute": "header-text",
|
709
|
+
"reflects": true,
|
710
|
+
"inheritedFrom": {
|
711
|
+
"name": "AccordionButton",
|
712
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
713
|
+
}
|
714
|
+
},
|
715
|
+
{
|
716
|
+
"kind": "field",
|
717
|
+
"name": "prefixIcon",
|
718
|
+
"type": {
|
719
|
+
"text": "IconNames | undefined"
|
720
|
+
},
|
721
|
+
"description": "The leading icon that is displayed before the header text.",
|
722
|
+
"attribute": "prefix-icon",
|
723
|
+
"inheritedFrom": {
|
724
|
+
"name": "AccordionButton",
|
725
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
726
|
+
}
|
727
|
+
},
|
728
|
+
{
|
729
|
+
"kind": "method",
|
730
|
+
"name": "handleHeaderClick",
|
731
|
+
"privacy": "protected",
|
732
|
+
"return": {
|
733
|
+
"type": {
|
734
|
+
"text": "void"
|
735
|
+
}
|
736
|
+
},
|
737
|
+
"description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state.",
|
738
|
+
"inheritedFrom": {
|
739
|
+
"name": "AccordionButton",
|
740
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
741
|
+
}
|
742
|
+
},
|
743
|
+
{
|
744
|
+
"kind": "method",
|
745
|
+
"name": "dispatchHeaderClickEvent",
|
746
|
+
"privacy": "private",
|
747
|
+
"return": {
|
748
|
+
"type": {
|
749
|
+
"text": "void"
|
750
|
+
}
|
751
|
+
},
|
752
|
+
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state.",
|
753
|
+
"inheritedFrom": {
|
754
|
+
"name": "AccordionButton",
|
755
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
756
|
+
}
|
757
|
+
},
|
758
|
+
{
|
759
|
+
"kind": "method",
|
760
|
+
"name": "handleKeyDown",
|
761
|
+
"privacy": "private",
|
762
|
+
"return": {
|
763
|
+
"type": {
|
764
|
+
"text": "void"
|
765
|
+
}
|
766
|
+
},
|
767
|
+
"parameters": [
|
768
|
+
{
|
769
|
+
"name": "event",
|
770
|
+
"type": {
|
771
|
+
"text": "KeyboardEvent"
|
772
|
+
},
|
773
|
+
"description": "The KeyboardEvent fired."
|
774
|
+
}
|
775
|
+
],
|
776
|
+
"description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys.",
|
777
|
+
"inheritedFrom": {
|
778
|
+
"name": "AccordionButton",
|
779
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
780
|
+
}
|
781
|
+
},
|
782
|
+
{
|
783
|
+
"kind": "method",
|
784
|
+
"name": "renderIcon",
|
785
|
+
"privacy": "protected",
|
786
|
+
"return": {
|
787
|
+
"type": {
|
788
|
+
"text": "TemplateResult | typeof nothing"
|
789
|
+
}
|
790
|
+
},
|
791
|
+
"parameters": [
|
792
|
+
{
|
793
|
+
"name": "iconName",
|
794
|
+
"optional": true,
|
795
|
+
"type": {
|
796
|
+
"text": "IconNames"
|
797
|
+
}
|
798
|
+
}
|
799
|
+
],
|
800
|
+
"inheritedFrom": {
|
801
|
+
"name": "AccordionButton",
|
802
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
803
|
+
}
|
804
|
+
},
|
805
|
+
{
|
806
|
+
"kind": "method",
|
807
|
+
"name": "renderHeadingText",
|
808
|
+
"privacy": "protected",
|
809
|
+
"return": {
|
810
|
+
"type": {
|
811
|
+
"text": "TemplateResult | typeof nothing"
|
812
|
+
}
|
813
|
+
},
|
814
|
+
"inheritedFrom": {
|
815
|
+
"name": "AccordionButton",
|
816
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
817
|
+
}
|
818
|
+
},
|
819
|
+
{
|
820
|
+
"kind": "method",
|
821
|
+
"name": "getArrowIconName",
|
822
|
+
"privacy": "protected",
|
823
|
+
"return": {
|
824
|
+
"type": {
|
825
|
+
"text": ""
|
826
|
+
}
|
827
|
+
},
|
828
|
+
"description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon.",
|
829
|
+
"inheritedFrom": {
|
830
|
+
"name": "AccordionButton",
|
831
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
832
|
+
}
|
833
|
+
},
|
834
|
+
{
|
835
|
+
"kind": "method",
|
836
|
+
"name": "renderBody",
|
837
|
+
"privacy": "protected",
|
838
|
+
"return": {
|
839
|
+
"type": {
|
840
|
+
"text": "TemplateResult | typeof nothing"
|
841
|
+
}
|
842
|
+
},
|
843
|
+
"inheritedFrom": {
|
844
|
+
"name": "AccordionButton",
|
845
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
846
|
+
}
|
847
|
+
}
|
848
|
+
],
|
849
|
+
"events": [
|
850
|
+
{
|
851
|
+
"description": "(React: onShown) This event is triggered when the accordion is expanded.",
|
852
|
+
"name": "shown",
|
853
|
+
"reactName": "onShown",
|
854
|
+
"inheritedFrom": {
|
855
|
+
"name": "AccordionButton",
|
856
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
857
|
+
}
|
858
|
+
}
|
859
|
+
],
|
860
|
+
"superclass": {
|
861
|
+
"name": "AccordionButton",
|
862
|
+
"module": "/src/components/accordionbutton/accordionbutton.component"
|
863
|
+
},
|
864
|
+
"tagName": "mdc-accordion",
|
865
|
+
"jsDoc": "/**\n * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.\n *\n * @tagname mdc-accordion\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot leading-controls - The leading controls slot of the accordion on the header section.\n * @slot trailing-controls - The trailing controls slot of the accordion on the header section.\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.\n *\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n * @csspart body-section - The body section of the accordion.\n */",
|
866
|
+
"customElement": true,
|
867
|
+
"attributes": [
|
868
|
+
{
|
869
|
+
"name": "disabled",
|
870
|
+
"type": {
|
871
|
+
"text": "boolean | undefined"
|
872
|
+
},
|
873
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
874
|
+
"default": "undefined",
|
875
|
+
"fieldName": "disabled",
|
876
|
+
"inheritedFrom": {
|
877
|
+
"name": "AccordionButton",
|
878
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
879
|
+
}
|
880
|
+
},
|
881
|
+
{
|
882
|
+
"name": "size",
|
883
|
+
"type": {
|
884
|
+
"text": "Size"
|
885
|
+
},
|
886
|
+
"description": "The size of the accordion item.",
|
887
|
+
"default": "'small'",
|
888
|
+
"fieldName": "size",
|
889
|
+
"inheritedFrom": {
|
890
|
+
"name": "AccordionButton",
|
891
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
892
|
+
}
|
893
|
+
},
|
894
|
+
{
|
895
|
+
"name": "variant",
|
896
|
+
"type": {
|
897
|
+
"text": "Variant"
|
898
|
+
},
|
899
|
+
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
900
|
+
"default": "'default'",
|
901
|
+
"fieldName": "variant",
|
902
|
+
"inheritedFrom": {
|
903
|
+
"name": "AccordionButton",
|
904
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
905
|
+
}
|
906
|
+
},
|
907
|
+
{
|
908
|
+
"name": "data-aria-level",
|
909
|
+
"type": {
|
910
|
+
"text": "number"
|
911
|
+
},
|
912
|
+
"description": "The aria level of the accordion component.",
|
913
|
+
"default": "3",
|
914
|
+
"fieldName": "dataAriaLevel",
|
915
|
+
"inheritedFrom": {
|
916
|
+
"name": "AccordionButton",
|
917
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
918
|
+
}
|
919
|
+
},
|
920
|
+
{
|
921
|
+
"name": "expanded",
|
922
|
+
"type": {
|
923
|
+
"text": "boolean"
|
924
|
+
},
|
925
|
+
"description": "The visibility of the accordion button.",
|
926
|
+
"default": "false",
|
927
|
+
"fieldName": "expanded",
|
928
|
+
"inheritedFrom": {
|
929
|
+
"name": "AccordionButton",
|
930
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
931
|
+
}
|
932
|
+
},
|
933
|
+
{
|
934
|
+
"name": "header-text",
|
935
|
+
"type": {
|
936
|
+
"text": "string | undefined"
|
937
|
+
},
|
938
|
+
"description": "The header text of the accordion item.",
|
939
|
+
"fieldName": "headerText",
|
940
|
+
"inheritedFrom": {
|
941
|
+
"name": "AccordionButton",
|
942
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
943
|
+
}
|
944
|
+
},
|
945
|
+
{
|
946
|
+
"name": "prefix-icon",
|
947
|
+
"type": {
|
948
|
+
"text": "IconNames | undefined"
|
949
|
+
},
|
950
|
+
"description": "The leading icon that is displayed before the header text.",
|
951
|
+
"fieldName": "prefixIcon",
|
952
|
+
"inheritedFrom": {
|
953
|
+
"name": "AccordionButton",
|
954
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
955
|
+
}
|
956
|
+
}
|
957
|
+
]
|
958
|
+
}
|
959
|
+
],
|
960
|
+
"exports": [
|
961
|
+
{
|
962
|
+
"kind": "js",
|
963
|
+
"name": "default",
|
964
|
+
"declaration": {
|
965
|
+
"name": "Accordion",
|
966
|
+
"module": "components/accordion/accordion.component.js"
|
967
|
+
}
|
968
|
+
}
|
969
|
+
]
|
970
|
+
},
|
971
|
+
{
|
972
|
+
"kind": "javascript-module",
|
973
|
+
"path": "components/alertchip/alertchip.component.js",
|
974
|
+
"declarations": [
|
975
|
+
{
|
976
|
+
"kind": "class",
|
977
|
+
"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.",
|
978
|
+
"name": "AlertChip",
|
979
|
+
"cssProperties": [
|
980
|
+
{
|
981
|
+
"description": "The color of the label text",
|
982
|
+
"name": "--mdc-chip-color"
|
983
|
+
},
|
984
|
+
{
|
985
|
+
"description": "The color of the icon",
|
986
|
+
"name": "--mdc-chip-icon-color"
|
987
|
+
},
|
988
|
+
{
|
989
|
+
"description": "The border color of the alertchip",
|
990
|
+
"name": "--mdc-chip-border-color"
|
991
|
+
},
|
992
|
+
{
|
993
|
+
"description": "The background color of the alertchip",
|
994
|
+
"name": "--mdc-chip-background-color"
|
995
|
+
}
|
996
|
+
],
|
997
|
+
"cssParts": [
|
998
|
+
{
|
999
|
+
"description": "The alert icon",
|
1000
1000
|
"name": "icon"
|
1001
1001
|
},
|
1002
1002
|
{
|
@@ -33032,178 +33032,204 @@
|
|
33032
33032
|
},
|
33033
33033
|
{
|
33034
33034
|
"kind": "javascript-module",
|
33035
|
-
"path": "components/
|
33035
|
+
"path": "components/radio/radio.component.js",
|
33036
33036
|
"declarations": [
|
33037
33037
|
{
|
33038
33038
|
"kind": "class",
|
33039
|
-
"description": "
|
33040
|
-
"name": "
|
33039
|
+
"description": "Radio allow users to select single options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selection in lists.\n\nA radio component contains an optional label, optional info icon and an optional helper text.",
|
33040
|
+
"name": "Radio",
|
33041
33041
|
"cssProperties": [
|
33042
33042
|
{
|
33043
|
-
"description": "
|
33044
|
-
"name": "--mdc-
|
33045
|
-
},
|
33046
|
-
{
|
33047
|
-
"description": "The color of the spinner track.",
|
33048
|
-
"name": "--mdc-track-color"
|
33043
|
+
"description": "color of the label when disabled",
|
33044
|
+
"name": "--mdc-radio-text-disabled-color"
|
33049
33045
|
},
|
33050
33046
|
{
|
33051
|
-
"description": "
|
33052
|
-
"name": "--mdc-
|
33047
|
+
"description": "color of the radio button when inactive and hovered",
|
33048
|
+
"name": "--mdc-radio-control-inactive-hover"
|
33053
33049
|
},
|
33054
33050
|
{
|
33055
|
-
"description": "
|
33056
|
-
"name": "--mdc-
|
33051
|
+
"description": "color of the radio button when inactive and pressed",
|
33052
|
+
"name": "--mdc-radio-control-inactive-pressed-color"
|
33057
33053
|
},
|
33058
33054
|
{
|
33059
|
-
"description": "
|
33060
|
-
"name": "--mdc-
|
33055
|
+
"description": "color of the radio button when active and hovered",
|
33056
|
+
"name": "--mdc-radio-control-active-hover-color"
|
33061
33057
|
},
|
33062
33058
|
{
|
33063
|
-
"description": "
|
33064
|
-
"name": "--mdc-
|
33065
|
-
"inheritedFrom": {
|
33066
|
-
"name": "Progressbar",
|
33067
|
-
"module": "src/components/progressbar/progressbar.component.ts"
|
33068
|
-
}
|
33059
|
+
"description": "color of the radio button when active and pressed",
|
33060
|
+
"name": "--mdc-radio-control-active-pressed-color"
|
33069
33061
|
},
|
33070
33062
|
{
|
33071
|
-
"description": "
|
33072
|
-
"name": "--mdc-
|
33073
|
-
"inheritedFrom": {
|
33074
|
-
"name": "Progressbar",
|
33075
|
-
"module": "src/components/progressbar/progressbar.component.ts"
|
33076
|
-
}
|
33063
|
+
"description": "color of the radio button when disabled",
|
33064
|
+
"name": "--mdc-radio-disabled-border-color"
|
33077
33065
|
},
|
33078
33066
|
{
|
33079
|
-
"description": "
|
33080
|
-
"name": "--mdc-
|
33081
|
-
"inheritedFrom": {
|
33082
|
-
"name": "Progressbar",
|
33083
|
-
"module": "src/components/progressbar/progressbar.component.ts"
|
33084
|
-
}
|
33067
|
+
"description": "color of the radio button when active and disabled",
|
33068
|
+
"name": "--mdc-radio-control-active-disabled-background"
|
33085
33069
|
},
|
33086
33070
|
{
|
33087
|
-
"description": "
|
33088
|
-
"name": "--mdc-
|
33089
|
-
|
33090
|
-
|
33091
|
-
|
33092
|
-
}
|
33093
|
-
},
|
33071
|
+
"description": "color of the radio button when inactive and disabled",
|
33072
|
+
"name": "--mdc-radio-control-inactive-disabled-background"
|
33073
|
+
}
|
33074
|
+
],
|
33075
|
+
"members": [
|
33094
33076
|
{
|
33095
|
-
"
|
33096
|
-
"name": "
|
33097
|
-
"
|
33098
|
-
"
|
33099
|
-
|
33100
|
-
|
33077
|
+
"kind": "field",
|
33078
|
+
"name": "checked",
|
33079
|
+
"type": {
|
33080
|
+
"text": "boolean"
|
33081
|
+
},
|
33082
|
+
"default": "false",
|
33083
|
+
"description": "Determines whether the radio is selected or unselected.",
|
33084
|
+
"attribute": "checked",
|
33085
|
+
"reflects": true
|
33101
33086
|
},
|
33102
33087
|
{
|
33103
|
-
"
|
33104
|
-
"name": "
|
33105
|
-
"
|
33106
|
-
"
|
33107
|
-
|
33108
|
-
|
33088
|
+
"kind": "field",
|
33089
|
+
"name": "readonly",
|
33090
|
+
"type": {
|
33091
|
+
"text": "boolean"
|
33092
|
+
},
|
33093
|
+
"default": "false",
|
33094
|
+
"description": "Determines whether the radio is read-only.",
|
33095
|
+
"attribute": "readonly",
|
33096
|
+
"reflects": true
|
33109
33097
|
},
|
33110
33098
|
{
|
33111
|
-
"
|
33112
|
-
"name": "
|
33113
|
-
"
|
33114
|
-
|
33115
|
-
"
|
33116
|
-
|
33099
|
+
"kind": "method",
|
33100
|
+
"name": "getAllRadiosWithinSameGroup",
|
33101
|
+
"privacy": "private",
|
33102
|
+
"return": {
|
33103
|
+
"type": {
|
33104
|
+
"text": "Radio[]"
|
33105
|
+
}
|
33106
|
+
},
|
33107
|
+
"description": "Returns all radios within the same group (name)."
|
33117
33108
|
},
|
33118
33109
|
{
|
33119
|
-
"
|
33120
|
-
"name": "
|
33121
|
-
"
|
33122
|
-
|
33123
|
-
|
33124
|
-
|
33110
|
+
"kind": "method",
|
33111
|
+
"name": "setGroupValidity",
|
33112
|
+
"privacy": "private",
|
33113
|
+
"parameters": [
|
33114
|
+
{
|
33115
|
+
"name": "radios",
|
33116
|
+
"type": {
|
33117
|
+
"text": "Radio[]"
|
33118
|
+
},
|
33119
|
+
"description": "Array of radios of the same group"
|
33120
|
+
},
|
33121
|
+
{
|
33122
|
+
"name": "isValid",
|
33123
|
+
"type": {
|
33124
|
+
"text": "boolean"
|
33125
|
+
},
|
33126
|
+
"description": "Boolean value to set the validity of the group"
|
33127
|
+
}
|
33128
|
+
],
|
33129
|
+
"description": "Sets the validity of the group of radios."
|
33125
33130
|
},
|
33126
33131
|
{
|
33127
|
-
"
|
33128
|
-
"name": "
|
33129
|
-
"
|
33130
|
-
|
33131
|
-
"module": "src/components/progressbar/progressbar.component.ts"
|
33132
|
-
}
|
33132
|
+
"kind": "method",
|
33133
|
+
"name": "setActualFormValue",
|
33134
|
+
"privacy": "private",
|
33135
|
+
"description": "Updates the form value to reflect the current state of the radio.\nIf checked, the value is set to the user-provided value.\nIf unchecked, the value is set to null."
|
33133
33136
|
},
|
33134
33137
|
{
|
33135
|
-
"
|
33136
|
-
"name": "
|
33137
|
-
"
|
33138
|
-
|
33139
|
-
"
|
33140
|
-
|
33138
|
+
"kind": "method",
|
33139
|
+
"name": "handleChange",
|
33140
|
+
"privacy": "private",
|
33141
|
+
"return": {
|
33142
|
+
"type": {
|
33143
|
+
"text": "void"
|
33144
|
+
}
|
33145
|
+
},
|
33146
|
+
"description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
|
33141
33147
|
},
|
33142
|
-
{
|
33143
|
-
"description": "Color of the help text.",
|
33144
|
-
"name": "--mdc-progressbar-help-text-color",
|
33145
|
-
"inheritedFrom": {
|
33146
|
-
"name": "Progressbar",
|
33147
|
-
"module": "src/components/progressbar/progressbar.component.ts"
|
33148
|
-
}
|
33149
|
-
}
|
33150
|
-
],
|
33151
|
-
"members": [
|
33152
33148
|
{
|
33153
33149
|
"kind": "method",
|
33154
|
-
"name": "
|
33155
|
-
"privacy": "private"
|
33150
|
+
"name": "updateRadio",
|
33151
|
+
"privacy": "private",
|
33152
|
+
"parameters": [
|
33153
|
+
{
|
33154
|
+
"name": "enabledRadios",
|
33155
|
+
"type": {
|
33156
|
+
"text": "Radio[]"
|
33157
|
+
},
|
33158
|
+
"description": "An array of enabled radio buttons within the same group."
|
33159
|
+
},
|
33160
|
+
{
|
33161
|
+
"name": "index",
|
33162
|
+
"type": {
|
33163
|
+
"text": "number"
|
33164
|
+
},
|
33165
|
+
"description": "The index of the radio button to be updated within the enabled radios array."
|
33166
|
+
}
|
33167
|
+
],
|
33168
|
+
"description": "Updates the state of the radio button at the specified index within the enabled radios.\nFocuses the radio button and triggers the change event if the radio button is not read-only."
|
33156
33169
|
},
|
33157
33170
|
{
|
33158
33171
|
"kind": "method",
|
33159
|
-
"name": "
|
33172
|
+
"name": "handleKeyDown",
|
33160
33173
|
"privacy": "private",
|
33161
|
-
"description": "Renders the error state of the progress spinner.",
|
33162
33174
|
"return": {
|
33163
33175
|
"type": {
|
33164
|
-
"text": ""
|
33176
|
+
"text": "void"
|
33165
33177
|
}
|
33166
|
-
}
|
33178
|
+
},
|
33179
|
+
"parameters": [
|
33180
|
+
{
|
33181
|
+
"name": "event",
|
33182
|
+
"type": {
|
33183
|
+
"text": "KeyboardEvent"
|
33184
|
+
}
|
33185
|
+
}
|
33186
|
+
],
|
33187
|
+
"description": "Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element."
|
33167
33188
|
},
|
33168
33189
|
{
|
33169
33190
|
"kind": "method",
|
33170
|
-
"name": "
|
33191
|
+
"name": "updateTabIndex",
|
33171
33192
|
"privacy": "private",
|
33172
|
-
"description": "Renders the success state of the progress spinner.",
|
33173
33193
|
"return": {
|
33174
33194
|
"type": {
|
33175
|
-
"text": ""
|
33195
|
+
"text": "void"
|
33176
33196
|
}
|
33177
|
-
}
|
33197
|
+
},
|
33198
|
+
"description": "Update tab index for all radios in the same group (name)\nIf any radio group is checked, it will have a tab index of 0\nIf no radio group is checked, the first enabled radio will have a tab index of 0"
|
33178
33199
|
},
|
33179
33200
|
{
|
33180
33201
|
"kind": "field",
|
33181
|
-
"name": "
|
33202
|
+
"name": "renderLabelAndHelperText",
|
33203
|
+
"privacy": "private"
|
33204
|
+
},
|
33205
|
+
{
|
33206
|
+
"kind": "field",
|
33207
|
+
"name": "autoFocusOnMount",
|
33182
33208
|
"type": {
|
33183
|
-
"text": "
|
33209
|
+
"text": "boolean"
|
33184
33210
|
},
|
33185
|
-
"default": "
|
33186
|
-
"description": "
|
33187
|
-
"attribute": "
|
33211
|
+
"default": "false",
|
33212
|
+
"description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
|
33213
|
+
"attribute": "auto-focus-on-mount",
|
33188
33214
|
"reflects": true,
|
33189
33215
|
"inheritedFrom": {
|
33190
|
-
"name": "
|
33191
|
-
"module": "utils/mixins/
|
33216
|
+
"name": "AutoFocusOnMountMixin",
|
33217
|
+
"module": "utils/mixins/AutoFocusOnMountMixin.js"
|
33192
33218
|
}
|
33193
33219
|
},
|
33194
33220
|
{
|
33195
33221
|
"kind": "field",
|
33196
|
-
"name": "
|
33222
|
+
"name": "name",
|
33197
33223
|
"type": {
|
33198
|
-
"text": "
|
33224
|
+
"text": "string"
|
33199
33225
|
},
|
33200
|
-
"
|
33201
|
-
"
|
33202
|
-
"attribute": "
|
33226
|
+
"default": "''",
|
33227
|
+
"description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
|
33228
|
+
"attribute": "name",
|
33203
33229
|
"reflects": true,
|
33204
33230
|
"inheritedFrom": {
|
33205
|
-
"name": "
|
33206
|
-
"module": "
|
33231
|
+
"name": "FormInternalsMixin",
|
33232
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
33207
33233
|
}
|
33208
33234
|
},
|
33209
33235
|
{
|
@@ -33212,42 +33238,98 @@
|
|
33212
33238
|
"type": {
|
33213
33239
|
"text": "string"
|
33214
33240
|
},
|
33215
|
-
"default": "'
|
33216
|
-
"description": "
|
33241
|
+
"default": "''",
|
33242
|
+
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
33217
33243
|
"attribute": "value",
|
33218
33244
|
"reflects": true,
|
33219
33245
|
"inheritedFrom": {
|
33220
|
-
"name": "
|
33221
|
-
"module": "
|
33246
|
+
"name": "FormInternalsMixin",
|
33247
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
33222
33248
|
}
|
33223
33249
|
},
|
33224
33250
|
{
|
33225
33251
|
"kind": "field",
|
33226
|
-
"name": "
|
33252
|
+
"name": "validationMessage",
|
33227
33253
|
"type": {
|
33228
|
-
"text": "
|
33254
|
+
"text": "string | undefined"
|
33229
33255
|
},
|
33230
|
-
"
|
33231
|
-
"
|
33232
|
-
"
|
33256
|
+
"description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
|
33257
|
+
"attribute": "validation-message",
|
33258
|
+
"reflects": true,
|
33233
33259
|
"inheritedFrom": {
|
33234
|
-
"name": "
|
33235
|
-
"module": "
|
33260
|
+
"name": "FormInternalsMixin",
|
33261
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
33262
|
+
}
|
33263
|
+
},
|
33264
|
+
{
|
33265
|
+
"kind": "field",
|
33266
|
+
"name": "validity",
|
33267
|
+
"type": {
|
33268
|
+
"text": "ValidityState"
|
33269
|
+
},
|
33270
|
+
"readonly": true,
|
33271
|
+
"inheritedFrom": {
|
33272
|
+
"name": "FormInternalsMixin",
|
33273
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
33274
|
+
}
|
33275
|
+
},
|
33276
|
+
{
|
33277
|
+
"kind": "field",
|
33278
|
+
"name": "willValidate",
|
33279
|
+
"readonly": true,
|
33280
|
+
"inheritedFrom": {
|
33281
|
+
"name": "FormInternalsMixin",
|
33282
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
33236
33283
|
}
|
33237
33284
|
},
|
33238
33285
|
{
|
33239
33286
|
"kind": "method",
|
33240
|
-
"name": "
|
33241
|
-
"
|
33242
|
-
"description": "Determines the validation state (success, error, or default) based on progress value and error state.",
|
33287
|
+
"name": "setValidity",
|
33288
|
+
"description": "Sets the validity of the input field based on the input field's validity.",
|
33243
33289
|
"return": {
|
33244
33290
|
"type": {
|
33245
33291
|
"text": ""
|
33246
33292
|
}
|
33247
33293
|
},
|
33248
33294
|
"inheritedFrom": {
|
33249
|
-
"name": "
|
33250
|
-
"module": "
|
33295
|
+
"name": "FormInternalsMixin",
|
33296
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
33297
|
+
}
|
33298
|
+
},
|
33299
|
+
{
|
33300
|
+
"kind": "method",
|
33301
|
+
"name": "checkValidity",
|
33302
|
+
"return": {
|
33303
|
+
"type": {
|
33304
|
+
"text": "boolean"
|
33305
|
+
}
|
33306
|
+
},
|
33307
|
+
"inheritedFrom": {
|
33308
|
+
"name": "FormInternalsMixin",
|
33309
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
33310
|
+
}
|
33311
|
+
},
|
33312
|
+
{
|
33313
|
+
"kind": "method",
|
33314
|
+
"name": "reportValidity",
|
33315
|
+
"inheritedFrom": {
|
33316
|
+
"name": "FormInternalsMixin",
|
33317
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
33318
|
+
}
|
33319
|
+
},
|
33320
|
+
{
|
33321
|
+
"kind": "field",
|
33322
|
+
"name": "dataAriaLabel",
|
33323
|
+
"type": {
|
33324
|
+
"text": "string | null"
|
33325
|
+
},
|
33326
|
+
"default": "null",
|
33327
|
+
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
33328
|
+
"attribute": "data-aria-label",
|
33329
|
+
"reflects": true,
|
33330
|
+
"inheritedFrom": {
|
33331
|
+
"name": "DataAriaLabelMixin",
|
33332
|
+
"module": "utils/mixins/DataAriaLabelMixin.js"
|
33251
33333
|
}
|
33252
33334
|
},
|
33253
33335
|
{
|
@@ -33454,38 +33536,64 @@
|
|
33454
33536
|
}
|
33455
33537
|
}
|
33456
33538
|
],
|
33457
|
-
"
|
33458
|
-
|
33459
|
-
|
33460
|
-
|
33461
|
-
|
33462
|
-
|
33463
|
-
|
33539
|
+
"events": [
|
33540
|
+
{
|
33541
|
+
"name": "change",
|
33542
|
+
"type": {
|
33543
|
+
"text": "Event"
|
33544
|
+
},
|
33545
|
+
"description": "(React: onChange) Event that gets dispatched when the radio state changes.",
|
33546
|
+
"reactName": "onChange"
|
33547
|
+
},
|
33548
|
+
{
|
33549
|
+
"description": "(React: onFocus) Event that gets dispatched when the radio receives focus.",
|
33550
|
+
"name": "focus",
|
33551
|
+
"reactName": "onFocus"
|
33552
|
+
}
|
33553
|
+
],
|
33464
33554
|
"attributes": [
|
33465
33555
|
{
|
33466
|
-
"name": "
|
33556
|
+
"name": "checked",
|
33467
33557
|
"type": {
|
33468
|
-
"text": "
|
33558
|
+
"text": "boolean"
|
33469
33559
|
},
|
33470
|
-
"default": "
|
33471
|
-
"description": "
|
33472
|
-
"fieldName": "
|
33560
|
+
"default": "false",
|
33561
|
+
"description": "Determines whether the radio is selected or unselected.",
|
33562
|
+
"fieldName": "checked"
|
33563
|
+
},
|
33564
|
+
{
|
33565
|
+
"name": "readonly",
|
33566
|
+
"type": {
|
33567
|
+
"text": "boolean"
|
33568
|
+
},
|
33569
|
+
"default": "false",
|
33570
|
+
"description": "Determines whether the radio is read-only.",
|
33571
|
+
"fieldName": "readonly"
|
33572
|
+
},
|
33573
|
+
{
|
33574
|
+
"name": "auto-focus-on-mount",
|
33575
|
+
"type": {
|
33576
|
+
"text": "boolean"
|
33577
|
+
},
|
33578
|
+
"default": "false",
|
33579
|
+
"description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
|
33580
|
+
"fieldName": "autoFocusOnMount",
|
33473
33581
|
"inheritedFrom": {
|
33474
|
-
"name": "
|
33475
|
-
"module": "src/utils/mixins/
|
33582
|
+
"name": "AutoFocusOnMountMixin",
|
33583
|
+
"module": "src/utils/mixins/AutoFocusOnMountMixin.ts"
|
33476
33584
|
}
|
33477
33585
|
},
|
33478
33586
|
{
|
33479
|
-
"name": "
|
33587
|
+
"name": "name",
|
33480
33588
|
"type": {
|
33481
|
-
"text": "
|
33589
|
+
"text": "string"
|
33482
33590
|
},
|
33483
|
-
"
|
33484
|
-
"
|
33485
|
-
"fieldName": "
|
33591
|
+
"default": "''",
|
33592
|
+
"description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
|
33593
|
+
"fieldName": "name",
|
33486
33594
|
"inheritedFrom": {
|
33487
|
-
"name": "
|
33488
|
-
"module": "src/
|
33595
|
+
"name": "FormInternalsMixin",
|
33596
|
+
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
33489
33597
|
}
|
33490
33598
|
},
|
33491
33599
|
{
|
@@ -33493,25 +33601,37 @@
|
|
33493
33601
|
"type": {
|
33494
33602
|
"text": "string"
|
33495
33603
|
},
|
33496
|
-
"default": "'
|
33497
|
-
"description": "
|
33604
|
+
"default": "''",
|
33605
|
+
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
33498
33606
|
"fieldName": "value",
|
33499
33607
|
"inheritedFrom": {
|
33500
|
-
"name": "
|
33501
|
-
"module": "src/
|
33608
|
+
"name": "FormInternalsMixin",
|
33609
|
+
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
33502
33610
|
}
|
33503
33611
|
},
|
33504
33612
|
{
|
33505
|
-
"name": "
|
33613
|
+
"name": "validation-message",
|
33506
33614
|
"type": {
|
33507
|
-
"text": "
|
33615
|
+
"text": "string | undefined"
|
33508
33616
|
},
|
33509
|
-
"
|
33510
|
-
"
|
33511
|
-
"fieldName": "error",
|
33617
|
+
"description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
|
33618
|
+
"fieldName": "validationMessage",
|
33512
33619
|
"inheritedFrom": {
|
33513
|
-
"name": "
|
33514
|
-
"module": "src/
|
33620
|
+
"name": "FormInternalsMixin",
|
33621
|
+
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
33622
|
+
}
|
33623
|
+
},
|
33624
|
+
{
|
33625
|
+
"name": "data-aria-label",
|
33626
|
+
"type": {
|
33627
|
+
"text": "string | null"
|
33628
|
+
},
|
33629
|
+
"default": "null",
|
33630
|
+
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
33631
|
+
"fieldName": "dataAriaLabel",
|
33632
|
+
"inheritedFrom": {
|
33633
|
+
"name": "DataAriaLabelMixin",
|
33634
|
+
"module": "src/utils/mixins/DataAriaLabelMixin.ts"
|
33515
33635
|
}
|
33516
33636
|
},
|
33517
33637
|
{
|
@@ -33625,6 +33745,27 @@
|
|
33625
33745
|
}
|
33626
33746
|
}
|
33627
33747
|
],
|
33748
|
+
"mixins": [
|
33749
|
+
{
|
33750
|
+
"name": "AutoFocusOnMountMixin",
|
33751
|
+
"module": "/src/utils/mixins/AutoFocusOnMountMixin"
|
33752
|
+
},
|
33753
|
+
{
|
33754
|
+
"name": "FormInternalsMixin",
|
33755
|
+
"module": "/src/utils/mixins/FormInternalsMixin"
|
33756
|
+
},
|
33757
|
+
{
|
33758
|
+
"name": "DataAriaLabelMixin",
|
33759
|
+
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
33760
|
+
}
|
33761
|
+
],
|
33762
|
+
"superclass": {
|
33763
|
+
"name": "FormfieldWrapper",
|
33764
|
+
"module": "/src/components/formfieldwrapper/formfieldwrapper.component"
|
33765
|
+
},
|
33766
|
+
"tagName": "mdc-radio",
|
33767
|
+
"jsDoc": "/**\n * Radio allow users to select single options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selection in lists.\n *\n * A radio component contains an optional label, optional info icon and an optional helper text.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-staticradio\n * @dependency mdc-toggletip\n *\n * @tagname mdc-radio\n *\n * @event change - (React: onChange) Event that gets dispatched when the radio state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.\n *\n * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered\n * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed\n * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered\n * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed\n * @cssproperty --mdc-radio-disabled-border-color - color of the radio button when disabled\n * @cssproperty --mdc-radio-control-active-disabled-background - color of the radio button when active and disabled\n * @cssproperty --mdc-radio-control-inactive-disabled-background - color of the radio button when inactive and disabled\n *\n */",
|
33768
|
+
"customElement": true,
|
33628
33769
|
"slots": [
|
33629
33770
|
{
|
33630
33771
|
"description": "Slot for the label element. If not provided, the `label` property will be used to render the label.",
|
@@ -33666,302 +33807,40 @@
|
|
33666
33807
|
"kind": "js",
|
33667
33808
|
"name": "default",
|
33668
33809
|
"declaration": {
|
33669
|
-
"name": "
|
33670
|
-
"module": "components/
|
33810
|
+
"name": "Radio",
|
33811
|
+
"module": "components/radio/radio.component.js"
|
33671
33812
|
}
|
33672
33813
|
}
|
33673
33814
|
]
|
33674
33815
|
},
|
33675
33816
|
{
|
33676
33817
|
"kind": "javascript-module",
|
33677
|
-
"path": "components/
|
33818
|
+
"path": "components/radiogroup/radiogroup.component.js",
|
33678
33819
|
"declarations": [
|
33679
33820
|
{
|
33680
33821
|
"kind": "class",
|
33681
|
-
"description": "
|
33682
|
-
"name": "
|
33822
|
+
"description": "`mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.\nIt can have a header text and a description. It enables users to select a single option from a set of options.\nIt is often used in forms, settings, and selection in lists. It automatically group the radio buttons inside it.",
|
33823
|
+
"name": "RadioGroup",
|
33683
33824
|
"cssProperties": [
|
33684
33825
|
{
|
33685
|
-
"description": "color of the
|
33686
|
-
"name": "--mdc-
|
33687
|
-
},
|
33688
|
-
{
|
33689
|
-
"description": "color of the radio button when inactive and hovered",
|
33690
|
-
"name": "--mdc-radio-control-inactive-hover"
|
33691
|
-
},
|
33692
|
-
{
|
33693
|
-
"description": "color of the radio button when inactive and pressed",
|
33694
|
-
"name": "--mdc-radio-control-inactive-pressed-color"
|
33695
|
-
},
|
33696
|
-
{
|
33697
|
-
"description": "color of the radio button when active and hovered",
|
33698
|
-
"name": "--mdc-radio-control-active-hover-color"
|
33699
|
-
},
|
33700
|
-
{
|
33701
|
-
"description": "color of the radio button when active and pressed",
|
33702
|
-
"name": "--mdc-radio-control-active-pressed-color"
|
33703
|
-
},
|
33704
|
-
{
|
33705
|
-
"description": "color of the radio button when disabled",
|
33706
|
-
"name": "--mdc-radio-disabled-border-color"
|
33707
|
-
},
|
33708
|
-
{
|
33709
|
-
"description": "color of the radio button when active and disabled",
|
33710
|
-
"name": "--mdc-radio-control-active-disabled-background"
|
33711
|
-
},
|
33712
|
-
{
|
33713
|
-
"description": "color of the radio button when inactive and disabled",
|
33714
|
-
"name": "--mdc-radio-control-inactive-disabled-background"
|
33826
|
+
"description": "color of the description text",
|
33827
|
+
"name": "--mdc-radiogroup-description-text-normal"
|
33715
33828
|
}
|
33716
33829
|
],
|
33717
33830
|
"members": [
|
33718
33831
|
{
|
33719
33832
|
"kind": "field",
|
33720
|
-
"name": "
|
33833
|
+
"name": "name",
|
33721
33834
|
"type": {
|
33722
|
-
"text": "
|
33835
|
+
"text": "string"
|
33723
33836
|
},
|
33724
|
-
"default": "
|
33725
|
-
"description": "
|
33726
|
-
"attribute": "
|
33727
|
-
"reflects": true
|
33837
|
+
"default": "''",
|
33838
|
+
"description": "Name of the radio group.\nThey are used to group elements in a form together.",
|
33839
|
+
"attribute": "name"
|
33728
33840
|
},
|
33729
33841
|
{
|
33730
33842
|
"kind": "field",
|
33731
|
-
"name": "
|
33732
|
-
"type": {
|
33733
|
-
"text": "boolean"
|
33734
|
-
},
|
33735
|
-
"default": "false",
|
33736
|
-
"description": "Determines whether the radio is read-only.",
|
33737
|
-
"attribute": "readonly",
|
33738
|
-
"reflects": true
|
33739
|
-
},
|
33740
|
-
{
|
33741
|
-
"kind": "method",
|
33742
|
-
"name": "getAllRadiosWithinSameGroup",
|
33743
|
-
"privacy": "private",
|
33744
|
-
"return": {
|
33745
|
-
"type": {
|
33746
|
-
"text": "Radio[]"
|
33747
|
-
}
|
33748
|
-
},
|
33749
|
-
"description": "Returns all radios within the same group (name)."
|
33750
|
-
},
|
33751
|
-
{
|
33752
|
-
"kind": "method",
|
33753
|
-
"name": "setGroupValidity",
|
33754
|
-
"privacy": "private",
|
33755
|
-
"parameters": [
|
33756
|
-
{
|
33757
|
-
"name": "radios",
|
33758
|
-
"type": {
|
33759
|
-
"text": "Radio[]"
|
33760
|
-
},
|
33761
|
-
"description": "Array of radios of the same group"
|
33762
|
-
},
|
33763
|
-
{
|
33764
|
-
"name": "isValid",
|
33765
|
-
"type": {
|
33766
|
-
"text": "boolean"
|
33767
|
-
},
|
33768
|
-
"description": "Boolean value to set the validity of the group"
|
33769
|
-
}
|
33770
|
-
],
|
33771
|
-
"description": "Sets the validity of the group of radios."
|
33772
|
-
},
|
33773
|
-
{
|
33774
|
-
"kind": "method",
|
33775
|
-
"name": "setActualFormValue",
|
33776
|
-
"privacy": "private",
|
33777
|
-
"description": "Updates the form value to reflect the current state of the radio.\nIf checked, the value is set to the user-provided value.\nIf unchecked, the value is set to null."
|
33778
|
-
},
|
33779
|
-
{
|
33780
|
-
"kind": "method",
|
33781
|
-
"name": "handleChange",
|
33782
|
-
"privacy": "private",
|
33783
|
-
"return": {
|
33784
|
-
"type": {
|
33785
|
-
"text": "void"
|
33786
|
-
}
|
33787
|
-
},
|
33788
|
-
"description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
|
33789
|
-
},
|
33790
|
-
{
|
33791
|
-
"kind": "method",
|
33792
|
-
"name": "updateRadio",
|
33793
|
-
"privacy": "private",
|
33794
|
-
"parameters": [
|
33795
|
-
{
|
33796
|
-
"name": "enabledRadios",
|
33797
|
-
"type": {
|
33798
|
-
"text": "Radio[]"
|
33799
|
-
},
|
33800
|
-
"description": "An array of enabled radio buttons within the same group."
|
33801
|
-
},
|
33802
|
-
{
|
33803
|
-
"name": "index",
|
33804
|
-
"type": {
|
33805
|
-
"text": "number"
|
33806
|
-
},
|
33807
|
-
"description": "The index of the radio button to be updated within the enabled radios array."
|
33808
|
-
}
|
33809
|
-
],
|
33810
|
-
"description": "Updates the state of the radio button at the specified index within the enabled radios.\nFocuses the radio button and triggers the change event if the radio button is not read-only."
|
33811
|
-
},
|
33812
|
-
{
|
33813
|
-
"kind": "method",
|
33814
|
-
"name": "handleKeyDown",
|
33815
|
-
"privacy": "private",
|
33816
|
-
"return": {
|
33817
|
-
"type": {
|
33818
|
-
"text": "void"
|
33819
|
-
}
|
33820
|
-
},
|
33821
|
-
"parameters": [
|
33822
|
-
{
|
33823
|
-
"name": "event",
|
33824
|
-
"type": {
|
33825
|
-
"text": "KeyboardEvent"
|
33826
|
-
}
|
33827
|
-
}
|
33828
|
-
],
|
33829
|
-
"description": "Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element."
|
33830
|
-
},
|
33831
|
-
{
|
33832
|
-
"kind": "method",
|
33833
|
-
"name": "updateTabIndex",
|
33834
|
-
"privacy": "private",
|
33835
|
-
"return": {
|
33836
|
-
"type": {
|
33837
|
-
"text": "void"
|
33838
|
-
}
|
33839
|
-
},
|
33840
|
-
"description": "Update tab index for all radios in the same group (name)\nIf any radio group is checked, it will have a tab index of 0\nIf no radio group is checked, the first enabled radio will have a tab index of 0"
|
33841
|
-
},
|
33842
|
-
{
|
33843
|
-
"kind": "field",
|
33844
|
-
"name": "renderLabelAndHelperText",
|
33845
|
-
"privacy": "private"
|
33846
|
-
},
|
33847
|
-
{
|
33848
|
-
"kind": "field",
|
33849
|
-
"name": "autoFocusOnMount",
|
33850
|
-
"type": {
|
33851
|
-
"text": "boolean"
|
33852
|
-
},
|
33853
|
-
"default": "false",
|
33854
|
-
"description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
|
33855
|
-
"attribute": "auto-focus-on-mount",
|
33856
|
-
"reflects": true,
|
33857
|
-
"inheritedFrom": {
|
33858
|
-
"name": "AutoFocusOnMountMixin",
|
33859
|
-
"module": "utils/mixins/AutoFocusOnMountMixin.js"
|
33860
|
-
}
|
33861
|
-
},
|
33862
|
-
{
|
33863
|
-
"kind": "field",
|
33864
|
-
"name": "name",
|
33865
|
-
"type": {
|
33866
|
-
"text": "string"
|
33867
|
-
},
|
33868
|
-
"default": "''",
|
33869
|
-
"description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
|
33870
|
-
"attribute": "name",
|
33871
|
-
"reflects": true,
|
33872
|
-
"inheritedFrom": {
|
33873
|
-
"name": "FormInternalsMixin",
|
33874
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
33875
|
-
}
|
33876
|
-
},
|
33877
|
-
{
|
33878
|
-
"kind": "field",
|
33879
|
-
"name": "value",
|
33880
|
-
"type": {
|
33881
|
-
"text": "string"
|
33882
|
-
},
|
33883
|
-
"default": "''",
|
33884
|
-
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
33885
|
-
"attribute": "value",
|
33886
|
-
"reflects": true,
|
33887
|
-
"inheritedFrom": {
|
33888
|
-
"name": "FormInternalsMixin",
|
33889
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
33890
|
-
}
|
33891
|
-
},
|
33892
|
-
{
|
33893
|
-
"kind": "field",
|
33894
|
-
"name": "validationMessage",
|
33895
|
-
"type": {
|
33896
|
-
"text": "string | undefined"
|
33897
|
-
},
|
33898
|
-
"description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
|
33899
|
-
"attribute": "validation-message",
|
33900
|
-
"reflects": true,
|
33901
|
-
"inheritedFrom": {
|
33902
|
-
"name": "FormInternalsMixin",
|
33903
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
33904
|
-
}
|
33905
|
-
},
|
33906
|
-
{
|
33907
|
-
"kind": "field",
|
33908
|
-
"name": "validity",
|
33909
|
-
"type": {
|
33910
|
-
"text": "ValidityState"
|
33911
|
-
},
|
33912
|
-
"readonly": true,
|
33913
|
-
"inheritedFrom": {
|
33914
|
-
"name": "FormInternalsMixin",
|
33915
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
33916
|
-
}
|
33917
|
-
},
|
33918
|
-
{
|
33919
|
-
"kind": "field",
|
33920
|
-
"name": "willValidate",
|
33921
|
-
"readonly": true,
|
33922
|
-
"inheritedFrom": {
|
33923
|
-
"name": "FormInternalsMixin",
|
33924
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
33925
|
-
}
|
33926
|
-
},
|
33927
|
-
{
|
33928
|
-
"kind": "method",
|
33929
|
-
"name": "setValidity",
|
33930
|
-
"description": "Sets the validity of the input field based on the input field's validity.",
|
33931
|
-
"return": {
|
33932
|
-
"type": {
|
33933
|
-
"text": ""
|
33934
|
-
}
|
33935
|
-
},
|
33936
|
-
"inheritedFrom": {
|
33937
|
-
"name": "FormInternalsMixin",
|
33938
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
33939
|
-
}
|
33940
|
-
},
|
33941
|
-
{
|
33942
|
-
"kind": "method",
|
33943
|
-
"name": "checkValidity",
|
33944
|
-
"return": {
|
33945
|
-
"type": {
|
33946
|
-
"text": "boolean"
|
33947
|
-
}
|
33948
|
-
},
|
33949
|
-
"inheritedFrom": {
|
33950
|
-
"name": "FormInternalsMixin",
|
33951
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
33952
|
-
}
|
33953
|
-
},
|
33954
|
-
{
|
33955
|
-
"kind": "method",
|
33956
|
-
"name": "reportValidity",
|
33957
|
-
"inheritedFrom": {
|
33958
|
-
"name": "FormInternalsMixin",
|
33959
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
33960
|
-
}
|
33961
|
-
},
|
33962
|
-
{
|
33963
|
-
"kind": "field",
|
33964
|
-
"name": "dataAriaLabel",
|
33843
|
+
"name": "dataAriaLabel",
|
33965
33844
|
"type": {
|
33966
33845
|
"text": "string | null"
|
33967
33846
|
},
|
@@ -34178,90 +34057,15 @@
|
|
34178
34057
|
}
|
34179
34058
|
}
|
34180
34059
|
],
|
34181
|
-
"events": [
|
34182
|
-
{
|
34183
|
-
"name": "change",
|
34184
|
-
"type": {
|
34185
|
-
"text": "Event"
|
34186
|
-
},
|
34187
|
-
"description": "(React: onChange) Event that gets dispatched when the radio state changes.",
|
34188
|
-
"reactName": "onChange"
|
34189
|
-
},
|
34190
|
-
{
|
34191
|
-
"description": "(React: onFocus) Event that gets dispatched when the radio receives focus.",
|
34192
|
-
"name": "focus",
|
34193
|
-
"reactName": "onFocus"
|
34194
|
-
}
|
34195
|
-
],
|
34196
34060
|
"attributes": [
|
34197
|
-
{
|
34198
|
-
"name": "checked",
|
34199
|
-
"type": {
|
34200
|
-
"text": "boolean"
|
34201
|
-
},
|
34202
|
-
"default": "false",
|
34203
|
-
"description": "Determines whether the radio is selected or unselected.",
|
34204
|
-
"fieldName": "checked"
|
34205
|
-
},
|
34206
|
-
{
|
34207
|
-
"name": "readonly",
|
34208
|
-
"type": {
|
34209
|
-
"text": "boolean"
|
34210
|
-
},
|
34211
|
-
"default": "false",
|
34212
|
-
"description": "Determines whether the radio is read-only.",
|
34213
|
-
"fieldName": "readonly"
|
34214
|
-
},
|
34215
|
-
{
|
34216
|
-
"name": "auto-focus-on-mount",
|
34217
|
-
"type": {
|
34218
|
-
"text": "boolean"
|
34219
|
-
},
|
34220
|
-
"default": "false",
|
34221
|
-
"description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
|
34222
|
-
"fieldName": "autoFocusOnMount",
|
34223
|
-
"inheritedFrom": {
|
34224
|
-
"name": "AutoFocusOnMountMixin",
|
34225
|
-
"module": "src/utils/mixins/AutoFocusOnMountMixin.ts"
|
34226
|
-
}
|
34227
|
-
},
|
34228
34061
|
{
|
34229
34062
|
"name": "name",
|
34230
34063
|
"type": {
|
34231
34064
|
"text": "string"
|
34232
34065
|
},
|
34233
34066
|
"default": "''",
|
34234
|
-
"description": "
|
34235
|
-
"fieldName": "name"
|
34236
|
-
"inheritedFrom": {
|
34237
|
-
"name": "FormInternalsMixin",
|
34238
|
-
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
34239
|
-
}
|
34240
|
-
},
|
34241
|
-
{
|
34242
|
-
"name": "value",
|
34243
|
-
"type": {
|
34244
|
-
"text": "string"
|
34245
|
-
},
|
34246
|
-
"default": "''",
|
34247
|
-
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
34248
|
-
"fieldName": "value",
|
34249
|
-
"inheritedFrom": {
|
34250
|
-
"name": "FormInternalsMixin",
|
34251
|
-
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
34252
|
-
}
|
34253
|
-
},
|
34254
|
-
{
|
34255
|
-
"name": "validation-message",
|
34256
|
-
"type": {
|
34257
|
-
"text": "string | undefined"
|
34258
|
-
},
|
34259
|
-
"description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
|
34260
|
-
"fieldName": "validationMessage",
|
34261
|
-
"inheritedFrom": {
|
34262
|
-
"name": "FormInternalsMixin",
|
34263
|
-
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
34264
|
-
}
|
34067
|
+
"description": "Name of the radio group.\nThey are used to group elements in a form together.",
|
34068
|
+
"fieldName": "name"
|
34265
34069
|
},
|
34266
34070
|
{
|
34267
34071
|
"name": "data-aria-label",
|
@@ -34387,28 +34191,22 @@
|
|
34387
34191
|
}
|
34388
34192
|
}
|
34389
34193
|
],
|
34390
|
-
"mixins": [
|
34391
|
-
{
|
34392
|
-
"name": "AutoFocusOnMountMixin",
|
34393
|
-
"module": "/src/utils/mixins/AutoFocusOnMountMixin"
|
34394
|
-
},
|
34395
|
-
{
|
34396
|
-
"name": "FormInternalsMixin",
|
34397
|
-
"module": "/src/utils/mixins/FormInternalsMixin"
|
34398
|
-
},
|
34399
|
-
{
|
34400
|
-
"name": "DataAriaLabelMixin",
|
34401
|
-
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
34402
|
-
}
|
34403
|
-
],
|
34404
34194
|
"superclass": {
|
34405
|
-
"name": "
|
34406
|
-
"module": "/src/components/
|
34195
|
+
"name": "FormfieldGroup",
|
34196
|
+
"module": "/src/components/formfieldgroup"
|
34407
34197
|
},
|
34408
|
-
"tagName": "mdc-
|
34409
|
-
"jsDoc": "/**\n *
|
34198
|
+
"tagName": "mdc-radiogroup",
|
34199
|
+
"jsDoc": "/**\n * `mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.\n * It can have a header text and a description. It enables users to select a single option from a set of options.\n * It is often used in forms, settings, and selection in lists. It automatically group the radio buttons inside it.\n *\n * @tagname mdc-radiogroup\n *\n * @cssproperty --mdc-radiogroup-description-text-normal - color of the description text\n *\n */",
|
34410
34200
|
"customElement": true,
|
34411
34201
|
"slots": [
|
34202
|
+
{
|
34203
|
+
"description": "This is a default slot for checkbox or toggle components.",
|
34204
|
+
"name": "default",
|
34205
|
+
"inheritedFrom": {
|
34206
|
+
"name": "FormfieldGroup",
|
34207
|
+
"module": "src/components/formfieldgroup/formfieldgroup.component.ts"
|
34208
|
+
}
|
34209
|
+
},
|
34412
34210
|
{
|
34413
34211
|
"description": "Slot for the label element. If not provided, the `label` property will be used to render the label.",
|
34414
34212
|
"name": "label",
|
@@ -34449,36 +34247,336 @@
|
|
34449
34247
|
"kind": "js",
|
34450
34248
|
"name": "default",
|
34451
34249
|
"declaration": {
|
34452
|
-
"name": "
|
34453
|
-
"module": "components/
|
34250
|
+
"name": "RadioGroup",
|
34251
|
+
"module": "components/radiogroup/radiogroup.component.js"
|
34454
34252
|
}
|
34455
34253
|
}
|
34456
34254
|
]
|
34457
34255
|
},
|
34458
34256
|
{
|
34459
34257
|
"kind": "javascript-module",
|
34460
|
-
"path": "components/
|
34258
|
+
"path": "components/screenreaderannouncer/screenreaderannouncer.component.js",
|
34461
34259
|
"declarations": [
|
34462
34260
|
{
|
34463
34261
|
"kind": "class",
|
34464
|
-
"description": "`mdc-
|
34465
|
-
"name": "
|
34466
|
-
"
|
34262
|
+
"description": "`mdc-screenreaderannouncer` can be used to announce messages with the screen reader.\n\nTo make an announcement set `announcement` attribute on the `mdc-screenreaderannouncer` element.\n\n**Internal logic**\n\nWhen the screenreader announcer is connected to the DOM, if the `identity` attribute is not\nprovided, it is set to `mdc-screenreaderannouncer-identity` and a `<div>` element with this id is created\nin the DOM. If the `identity` attribute is provided, the identity element is used and no new element\nis created in the DOM.\n\nWhen the `announcement` attribute is set, the screenreader announcer will create a `<div>` element with\n`aria-live` attribute set to the value of `data-aria-live` attribute and append it to the `identity` element.\nAfter delay of `delay` milliseconds, a <p> element with the announcement text is appended to the `<div>` element.\n\nThe announcement `<div>` element is removed from the DOM after `timeout` milliseconds.\n\nWhen the screen announcer component is disconnected from the DOM, all the timeouts are cleared and\nall the announcement elements added are removed from the DOM and timeouts cleared.\n\n**Note**\n1. The default delay of 150 miliseconds is used as we dynamically generate the\naria-live region in the DOM and add the announcement text to it.\n3. If no `identity` is provided, all the screen reader components will create and use only one\n`<div>` element with id `mdc-screenreaderannouncer-identity` in the DOM.\n\nReference: https://patrickhlauke.github.io/aria/tests/live-regions/",
|
34263
|
+
"name": "ScreenreaderAnnouncer",
|
34264
|
+
"members": [
|
34467
34265
|
{
|
34468
|
-
"
|
34469
|
-
"name": "
|
34266
|
+
"kind": "field",
|
34267
|
+
"name": "announcement",
|
34268
|
+
"type": {
|
34269
|
+
"text": "string"
|
34270
|
+
},
|
34271
|
+
"default": "''",
|
34272
|
+
"description": "The announcement attribute is a string that is used to announce messages to the screen reader.\nThe announcement is made when the announcement attribute is set to a non-empty string.",
|
34273
|
+
"attribute": "announcement",
|
34274
|
+
"reflects": true
|
34275
|
+
},
|
34276
|
+
{
|
34277
|
+
"kind": "field",
|
34278
|
+
"name": "identity",
|
34279
|
+
"type": {
|
34280
|
+
"text": "string"
|
34281
|
+
},
|
34282
|
+
"default": "''",
|
34283
|
+
"description": "The id of the element in the light dom, to which announcement elements will be appended.\n\nIf id is not provided, it will be set to `mdc-screenreaderannouncer-identity` and\na div element with this id will be created in the light dom.",
|
34284
|
+
"attribute": "identity",
|
34285
|
+
"reflects": true
|
34286
|
+
},
|
34287
|
+
{
|
34288
|
+
"kind": "field",
|
34289
|
+
"name": "dataAriaLive",
|
34290
|
+
"type": {
|
34291
|
+
"text": "AriaLive"
|
34292
|
+
},
|
34293
|
+
"description": "Aria live value for announcement.",
|
34294
|
+
"default": "'polite'",
|
34295
|
+
"attribute": "data-aria-live",
|
34296
|
+
"reflects": true
|
34297
|
+
},
|
34298
|
+
{
|
34299
|
+
"kind": "field",
|
34300
|
+
"name": "delay",
|
34301
|
+
"type": {
|
34302
|
+
"text": "number"
|
34303
|
+
},
|
34304
|
+
"description": "Milliseconds to wait before adding the announcement to the identiy region in\nDOM, which will announce the message to the screen reader.",
|
34305
|
+
"default": "150",
|
34306
|
+
"attribute": "delay",
|
34307
|
+
"reflects": true
|
34308
|
+
},
|
34309
|
+
{
|
34310
|
+
"kind": "field",
|
34311
|
+
"name": "timeout",
|
34312
|
+
"type": {
|
34313
|
+
"text": "number"
|
34314
|
+
},
|
34315
|
+
"description": "Milliseconds to wait after which the announcement element will be removed from\nidentity region in DOM, causing the screen reader to not announcing the message.",
|
34316
|
+
"default": "20_000",
|
34317
|
+
"attribute": "timeout",
|
34318
|
+
"reflects": true
|
34319
|
+
},
|
34320
|
+
{
|
34321
|
+
"kind": "method",
|
34322
|
+
"name": "announce",
|
34323
|
+
"parameters": [
|
34324
|
+
{
|
34325
|
+
"name": "announcement",
|
34326
|
+
"type": {
|
34327
|
+
"text": "string"
|
34328
|
+
},
|
34329
|
+
"description": "The announcement to be made."
|
34330
|
+
},
|
34331
|
+
{
|
34332
|
+
"name": "delay",
|
34333
|
+
"type": {
|
34334
|
+
"text": "number"
|
34335
|
+
},
|
34336
|
+
"description": "The delay in milliseconds before announcing the message."
|
34337
|
+
},
|
34338
|
+
{
|
34339
|
+
"name": "timeout",
|
34340
|
+
"type": {
|
34341
|
+
"text": "number"
|
34342
|
+
},
|
34343
|
+
"description": "The timeout in milliseconds before removing the announcement."
|
34344
|
+
},
|
34345
|
+
{
|
34346
|
+
"name": "ariaLive",
|
34347
|
+
"type": {
|
34348
|
+
"text": "AriaLive"
|
34349
|
+
},
|
34350
|
+
"description": "The aria live value for the announcement."
|
34351
|
+
}
|
34352
|
+
],
|
34353
|
+
"description": "Announces the given announcement to the screen reader.\n\nA div element with aria-live attribute set to the given ariaLive value is created\nand a p element with the announcement text is appended to it.\n\nThe div element is appended to the element in the DOM identified with id as\nidentity attribute."
|
34354
|
+
},
|
34355
|
+
{
|
34356
|
+
"kind": "method",
|
34357
|
+
"name": "clearTimeOutsAndAnnouncements",
|
34358
|
+
"privacy": "private",
|
34359
|
+
"description": "Clears all timeouts and removes all announcements from the screen reader."
|
34360
|
+
},
|
34361
|
+
{
|
34362
|
+
"kind": "method",
|
34363
|
+
"name": "createAnnouncementAriaLiveRegion",
|
34364
|
+
"privacy": "private",
|
34365
|
+
"description": "Creates a div element with id as identity attribute in the DOM.\n\nIf the identity attribute is not provided, it is set internally to\n`mdc-screenreaderannouncer-identity`."
|
34470
34366
|
}
|
34471
34367
|
],
|
34472
|
-
"
|
34368
|
+
"attributes": [
|
34473
34369
|
{
|
34474
|
-
"
|
34475
|
-
"name": "name",
|
34370
|
+
"name": "announcement",
|
34476
34371
|
"type": {
|
34477
34372
|
"text": "string"
|
34478
34373
|
},
|
34479
34374
|
"default": "''",
|
34480
|
-
"description": "
|
34481
|
-
"
|
34375
|
+
"description": "The announcement attribute is a string that is used to announce messages to the screen reader.\nThe announcement is made when the announcement attribute is set to a non-empty string.",
|
34376
|
+
"fieldName": "announcement"
|
34377
|
+
},
|
34378
|
+
{
|
34379
|
+
"name": "identity",
|
34380
|
+
"type": {
|
34381
|
+
"text": "string"
|
34382
|
+
},
|
34383
|
+
"default": "''",
|
34384
|
+
"description": "The id of the element in the light dom, to which announcement elements will be appended.\n\nIf id is not provided, it will be set to `mdc-screenreaderannouncer-identity` and\na div element with this id will be created in the light dom.",
|
34385
|
+
"fieldName": "identity"
|
34386
|
+
},
|
34387
|
+
{
|
34388
|
+
"name": "data-aria-live",
|
34389
|
+
"type": {
|
34390
|
+
"text": "AriaLive"
|
34391
|
+
},
|
34392
|
+
"description": "Aria live value for announcement.",
|
34393
|
+
"default": "'polite'",
|
34394
|
+
"fieldName": "dataAriaLive"
|
34395
|
+
},
|
34396
|
+
{
|
34397
|
+
"name": "delay",
|
34398
|
+
"type": {
|
34399
|
+
"text": "number"
|
34400
|
+
},
|
34401
|
+
"description": "Milliseconds to wait before adding the announcement to the identiy region in\nDOM, which will announce the message to the screen reader.",
|
34402
|
+
"default": "150",
|
34403
|
+
"fieldName": "delay"
|
34404
|
+
},
|
34405
|
+
{
|
34406
|
+
"name": "timeout",
|
34407
|
+
"type": {
|
34408
|
+
"text": "number"
|
34409
|
+
},
|
34410
|
+
"description": "Milliseconds to wait after which the announcement element will be removed from\nidentity region in DOM, causing the screen reader to not announcing the message.",
|
34411
|
+
"default": "20_000",
|
34412
|
+
"fieldName": "timeout"
|
34413
|
+
}
|
34414
|
+
],
|
34415
|
+
"superclass": {
|
34416
|
+
"name": "Component",
|
34417
|
+
"module": "/src/models"
|
34418
|
+
},
|
34419
|
+
"tagName": "mdc-screenreaderannouncer",
|
34420
|
+
"jsDoc": "/**\n * `mdc-screenreaderannouncer` can be used to announce messages with the screen reader.\n *\n * To make an announcement set `announcement` attribute on the `mdc-screenreaderannouncer` element.\n *\n * **Internal logic**\n *\n * When the screenreader announcer is connected to the DOM, if the `identity` attribute is not\n * provided, it is set to `mdc-screenreaderannouncer-identity` and a `<div>` element with this id is created\n * in the DOM. If the `identity` attribute is provided, the identity element is used and no new element\n * is created in the DOM.\n *\n * When the `announcement` attribute is set, the screenreader announcer will create a `<div>` element with\n * `aria-live` attribute set to the value of `data-aria-live` attribute and append it to the `identity` element.\n * After delay of `delay` milliseconds, a <p> element with the announcement text is appended to the `<div>` element.\n *\n * The announcement `<div>` element is removed from the DOM after `timeout` milliseconds.\n *\n * When the screen announcer component is disconnected from the DOM, all the timeouts are cleared and\n * all the announcement elements added are removed from the DOM and timeouts cleared.\n *\n * **Note**\n * 1. The default delay of 150 miliseconds is used as we dynamically generate the\n * aria-live region in the DOM and add the announcement text to it.\n * 3. If no `identity` is provided, all the screen reader components will create and use only one\n * `<div>` element with id `mdc-screenreaderannouncer-identity` in the DOM.\n *\n * Reference: https://patrickhlauke.github.io/aria/tests/live-regions/\n *\n * @tagname mdc-screenreaderannouncer\n */",
|
34421
|
+
"customElement": true
|
34422
|
+
}
|
34423
|
+
],
|
34424
|
+
"exports": [
|
34425
|
+
{
|
34426
|
+
"kind": "js",
|
34427
|
+
"name": "default",
|
34428
|
+
"declaration": {
|
34429
|
+
"name": "ScreenreaderAnnouncer",
|
34430
|
+
"module": "components/screenreaderannouncer/screenreaderannouncer.component.js"
|
34431
|
+
}
|
34432
|
+
}
|
34433
|
+
]
|
34434
|
+
},
|
34435
|
+
{
|
34436
|
+
"kind": "javascript-module",
|
34437
|
+
"path": "components/progressspinner/progressspinner.component.js",
|
34438
|
+
"declarations": [
|
34439
|
+
{
|
34440
|
+
"kind": "class",
|
34441
|
+
"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.",
|
34442
|
+
"name": "Progressspinner",
|
34443
|
+
"cssProperties": [
|
34444
|
+
{
|
34445
|
+
"description": "The size of the spinner.",
|
34446
|
+
"name": "--mdc-spinner-size"
|
34447
|
+
},
|
34448
|
+
{
|
34449
|
+
"description": "The color of the spinner track.",
|
34450
|
+
"name": "--mdc-track-color"
|
34451
|
+
},
|
34452
|
+
{
|
34453
|
+
"description": "The color of the spinner progress.",
|
34454
|
+
"name": "--mdc-progress-color"
|
34455
|
+
},
|
34456
|
+
{
|
34457
|
+
"description": "The color of the spinner when in success state.",
|
34458
|
+
"name": "--mdc-progress-success-color"
|
34459
|
+
},
|
34460
|
+
{
|
34461
|
+
"description": "The color of the spinner when in error state.",
|
34462
|
+
"name": "--mdc-progress-error-color"
|
34463
|
+
},
|
34464
|
+
{
|
34465
|
+
"description": "Background color of the remaining progressbar portion.",
|
34466
|
+
"name": "--mdc-progressbar-background-color",
|
34467
|
+
"inheritedFrom": {
|
34468
|
+
"name": "Progressbar",
|
34469
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
34470
|
+
}
|
34471
|
+
},
|
34472
|
+
{
|
34473
|
+
"description": "Background color of the elapsed progressbar portion.",
|
34474
|
+
"name": "--mdc-progressbar-active-background-color",
|
34475
|
+
"inheritedFrom": {
|
34476
|
+
"name": "Progressbar",
|
34477
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
34478
|
+
}
|
34479
|
+
},
|
34480
|
+
{
|
34481
|
+
"description": "Background color of the progressbar when in success state.",
|
34482
|
+
"name": "--mdc-progressbar-success-color",
|
34483
|
+
"inheritedFrom": {
|
34484
|
+
"name": "Progressbar",
|
34485
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
34486
|
+
}
|
34487
|
+
},
|
34488
|
+
{
|
34489
|
+
"description": "Background color of the progressbar when in error state.",
|
34490
|
+
"name": "--mdc-progressbar-error-color",
|
34491
|
+
"inheritedFrom": {
|
34492
|
+
"name": "Progressbar",
|
34493
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
34494
|
+
}
|
34495
|
+
},
|
34496
|
+
{
|
34497
|
+
"description": "The height of the progressbar.",
|
34498
|
+
"name": "--mdc-progressbar-height",
|
34499
|
+
"inheritedFrom": {
|
34500
|
+
"name": "Progressbar",
|
34501
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
34502
|
+
}
|
34503
|
+
},
|
34504
|
+
{
|
34505
|
+
"description": "The border radius of the progressbar.",
|
34506
|
+
"name": "--mdc-progressbar-border-radius",
|
34507
|
+
"inheritedFrom": {
|
34508
|
+
"name": "Progressbar",
|
34509
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
34510
|
+
}
|
34511
|
+
},
|
34512
|
+
{
|
34513
|
+
"description": "Color of the progressbar label text.",
|
34514
|
+
"name": "--mdc-progressbar-label-color",
|
34515
|
+
"inheritedFrom": {
|
34516
|
+
"name": "Progressbar",
|
34517
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
34518
|
+
}
|
34519
|
+
},
|
34520
|
+
{
|
34521
|
+
"description": "Line height of the label text.",
|
34522
|
+
"name": "--mdc-progressbar-label-line-height",
|
34523
|
+
"inheritedFrom": {
|
34524
|
+
"name": "Progressbar",
|
34525
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
34526
|
+
}
|
34527
|
+
},
|
34528
|
+
{
|
34529
|
+
"description": "Font size of the label text.",
|
34530
|
+
"name": "--mdc-progressbar-label-font-size",
|
34531
|
+
"inheritedFrom": {
|
34532
|
+
"name": "Progressbar",
|
34533
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
34534
|
+
}
|
34535
|
+
},
|
34536
|
+
{
|
34537
|
+
"description": "Font weight of the label text.",
|
34538
|
+
"name": "--mdc-progressbar-label-font-weight",
|
34539
|
+
"inheritedFrom": {
|
34540
|
+
"name": "Progressbar",
|
34541
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
34542
|
+
}
|
34543
|
+
},
|
34544
|
+
{
|
34545
|
+
"description": "Color of the help text.",
|
34546
|
+
"name": "--mdc-progressbar-help-text-color",
|
34547
|
+
"inheritedFrom": {
|
34548
|
+
"name": "Progressbar",
|
34549
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
34550
|
+
}
|
34551
|
+
}
|
34552
|
+
],
|
34553
|
+
"members": [
|
34554
|
+
{
|
34555
|
+
"kind": "method",
|
34556
|
+
"name": "renderProgressSpinner",
|
34557
|
+
"privacy": "private"
|
34558
|
+
},
|
34559
|
+
{
|
34560
|
+
"kind": "method",
|
34561
|
+
"name": "renderErrorState",
|
34562
|
+
"privacy": "private",
|
34563
|
+
"description": "Renders the error state of the progress spinner.",
|
34564
|
+
"return": {
|
34565
|
+
"type": {
|
34566
|
+
"text": ""
|
34567
|
+
}
|
34568
|
+
}
|
34569
|
+
},
|
34570
|
+
{
|
34571
|
+
"kind": "method",
|
34572
|
+
"name": "renderSuccessState",
|
34573
|
+
"privacy": "private",
|
34574
|
+
"description": "Renders the success state of the progress spinner.",
|
34575
|
+
"return": {
|
34576
|
+
"type": {
|
34577
|
+
"text": ""
|
34578
|
+
}
|
34579
|
+
}
|
34482
34580
|
},
|
34483
34581
|
{
|
34484
34582
|
"kind": "field",
|
@@ -34495,6 +34593,65 @@
|
|
34495
34593
|
"module": "utils/mixins/DataAriaLabelMixin.js"
|
34496
34594
|
}
|
34497
34595
|
},
|
34596
|
+
{
|
34597
|
+
"kind": "field",
|
34598
|
+
"name": "variant",
|
34599
|
+
"type": {
|
34600
|
+
"text": "Variant"
|
34601
|
+
},
|
34602
|
+
"description": "Types of the progressbar\n- **Default**\n- **Inline**",
|
34603
|
+
"default": "default",
|
34604
|
+
"attribute": "variant",
|
34605
|
+
"reflects": true,
|
34606
|
+
"inheritedFrom": {
|
34607
|
+
"name": "Progressbar",
|
34608
|
+
"module": "components/progressbar/progressbar.component.js"
|
34609
|
+
}
|
34610
|
+
},
|
34611
|
+
{
|
34612
|
+
"kind": "field",
|
34613
|
+
"name": "value",
|
34614
|
+
"type": {
|
34615
|
+
"text": "string"
|
34616
|
+
},
|
34617
|
+
"default": "'0'",
|
34618
|
+
"description": "The current progress as a percentage, 0 to 100.\nThe value will be clamped between 0 and 100.",
|
34619
|
+
"attribute": "value",
|
34620
|
+
"reflects": true,
|
34621
|
+
"inheritedFrom": {
|
34622
|
+
"name": "Progressbar",
|
34623
|
+
"module": "components/progressbar/progressbar.component.js"
|
34624
|
+
}
|
34625
|
+
},
|
34626
|
+
{
|
34627
|
+
"kind": "field",
|
34628
|
+
"name": "error",
|
34629
|
+
"type": {
|
34630
|
+
"text": "boolean"
|
34631
|
+
},
|
34632
|
+
"default": "false",
|
34633
|
+
"description": "Define error state of the progressbar\n- **true**\n- **false**",
|
34634
|
+
"attribute": "error",
|
34635
|
+
"inheritedFrom": {
|
34636
|
+
"name": "Progressbar",
|
34637
|
+
"module": "components/progressbar/progressbar.component.js"
|
34638
|
+
}
|
34639
|
+
},
|
34640
|
+
{
|
34641
|
+
"kind": "method",
|
34642
|
+
"name": "getValidationVariant",
|
34643
|
+
"privacy": "private",
|
34644
|
+
"description": "Determines the validation state (success, error, or default) based on progress value and error state.",
|
34645
|
+
"return": {
|
34646
|
+
"type": {
|
34647
|
+
"text": ""
|
34648
|
+
}
|
34649
|
+
},
|
34650
|
+
"inheritedFrom": {
|
34651
|
+
"name": "Progressbar",
|
34652
|
+
"module": "components/progressbar/progressbar.component.js"
|
34653
|
+
}
|
34654
|
+
},
|
34498
34655
|
{
|
34499
34656
|
"kind": "field",
|
34500
34657
|
"name": "disabled",
|
@@ -34699,16 +34856,14 @@
|
|
34699
34856
|
}
|
34700
34857
|
}
|
34701
34858
|
],
|
34859
|
+
"superclass": {
|
34860
|
+
"name": "Progressbar",
|
34861
|
+
"module": "/src/components/progressbar/progressbar.component"
|
34862
|
+
},
|
34863
|
+
"tagName": "mdc-progressspinner",
|
34864
|
+
"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 */",
|
34865
|
+
"customElement": true,
|
34702
34866
|
"attributes": [
|
34703
|
-
{
|
34704
|
-
"name": "name",
|
34705
|
-
"type": {
|
34706
|
-
"text": "string"
|
34707
|
-
},
|
34708
|
-
"default": "''",
|
34709
|
-
"description": "Name of the radio group.\nThey are used to group elements in a form together.",
|
34710
|
-
"fieldName": "name"
|
34711
|
-
},
|
34712
34867
|
{
|
34713
34868
|
"name": "data-aria-label",
|
34714
34869
|
"type": {
|
@@ -34722,6 +34877,45 @@
|
|
34722
34877
|
"module": "src/utils/mixins/DataAriaLabelMixin.ts"
|
34723
34878
|
}
|
34724
34879
|
},
|
34880
|
+
{
|
34881
|
+
"name": "variant",
|
34882
|
+
"type": {
|
34883
|
+
"text": "Variant"
|
34884
|
+
},
|
34885
|
+
"description": "Types of the progressbar\n- **Default**\n- **Inline**",
|
34886
|
+
"default": "default",
|
34887
|
+
"fieldName": "variant",
|
34888
|
+
"inheritedFrom": {
|
34889
|
+
"name": "Progressbar",
|
34890
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
34891
|
+
}
|
34892
|
+
},
|
34893
|
+
{
|
34894
|
+
"name": "value",
|
34895
|
+
"type": {
|
34896
|
+
"text": "string"
|
34897
|
+
},
|
34898
|
+
"default": "'0'",
|
34899
|
+
"description": "The current progress as a percentage, 0 to 100.\nThe value will be clamped between 0 and 100.",
|
34900
|
+
"fieldName": "value",
|
34901
|
+
"inheritedFrom": {
|
34902
|
+
"name": "Progressbar",
|
34903
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
34904
|
+
}
|
34905
|
+
},
|
34906
|
+
{
|
34907
|
+
"name": "error",
|
34908
|
+
"type": {
|
34909
|
+
"text": "boolean"
|
34910
|
+
},
|
34911
|
+
"default": "false",
|
34912
|
+
"description": "Define error state of the progressbar\n- **true**\n- **false**",
|
34913
|
+
"fieldName": "error",
|
34914
|
+
"inheritedFrom": {
|
34915
|
+
"name": "Progressbar",
|
34916
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
34917
|
+
}
|
34918
|
+
},
|
34725
34919
|
{
|
34726
34920
|
"name": "disabled",
|
34727
34921
|
"type": {
|
@@ -34833,22 +35027,7 @@
|
|
34833
35027
|
}
|
34834
35028
|
}
|
34835
35029
|
],
|
34836
|
-
"superclass": {
|
34837
|
-
"name": "FormfieldGroup",
|
34838
|
-
"module": "/src/components/formfieldgroup"
|
34839
|
-
},
|
34840
|
-
"tagName": "mdc-radiogroup",
|
34841
|
-
"jsDoc": "/**\n * `mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.\n * It can have a header text and a description. It enables users to select a single option from a set of options.\n * It is often used in forms, settings, and selection in lists. It automatically group the radio buttons inside it.\n *\n * @tagname mdc-radiogroup\n *\n * @cssproperty --mdc-radiogroup-description-text-normal - color of the description text\n *\n */",
|
34842
|
-
"customElement": true,
|
34843
35030
|
"slots": [
|
34844
|
-
{
|
34845
|
-
"description": "This is a default slot for checkbox or toggle components.",
|
34846
|
-
"name": "default",
|
34847
|
-
"inheritedFrom": {
|
34848
|
-
"name": "FormfieldGroup",
|
34849
|
-
"module": "src/components/formfieldgroup/formfieldgroup.component.ts"
|
34850
|
-
}
|
34851
|
-
},
|
34852
35031
|
{
|
34853
35032
|
"description": "Slot for the label element. If not provided, the `label` property will be used to render the label.",
|
34854
35033
|
"name": "label",
|
@@ -34889,187 +35068,8 @@
|
|
34889
35068
|
"kind": "js",
|
34890
35069
|
"name": "default",
|
34891
35070
|
"declaration": {
|
34892
|
-
"name": "
|
34893
|
-
"module": "components/
|
34894
|
-
}
|
34895
|
-
}
|
34896
|
-
]
|
34897
|
-
},
|
34898
|
-
{
|
34899
|
-
"kind": "javascript-module",
|
34900
|
-
"path": "components/screenreaderannouncer/screenreaderannouncer.component.js",
|
34901
|
-
"declarations": [
|
34902
|
-
{
|
34903
|
-
"kind": "class",
|
34904
|
-
"description": "`mdc-screenreaderannouncer` can be used to announce messages with the screen reader.\n\nTo make an announcement set `announcement` attribute on the `mdc-screenreaderannouncer` element.\n\n**Internal logic**\n\nWhen the screenreader announcer is connected to the DOM, if the `identity` attribute is not\nprovided, it is set to `mdc-screenreaderannouncer-identity` and a `<div>` element with this id is created\nin the DOM. If the `identity` attribute is provided, the identity element is used and no new element\nis created in the DOM.\n\nWhen the `announcement` attribute is set, the screenreader announcer will create a `<div>` element with\n`aria-live` attribute set to the value of `data-aria-live` attribute and append it to the `identity` element.\nAfter delay of `delay` milliseconds, a <p> element with the announcement text is appended to the `<div>` element.\n\nThe announcement `<div>` element is removed from the DOM after `timeout` milliseconds.\n\nWhen the screen announcer component is disconnected from the DOM, all the timeouts are cleared and\nall the announcement elements added are removed from the DOM and timeouts cleared.\n\n**Note**\n1. The default delay of 150 miliseconds is used as we dynamically generate the\naria-live region in the DOM and add the announcement text to it.\n3. If no `identity` is provided, all the screen reader components will create and use only one\n`<div>` element with id `mdc-screenreaderannouncer-identity` in the DOM.\n\nReference: https://patrickhlauke.github.io/aria/tests/live-regions/",
|
34905
|
-
"name": "ScreenreaderAnnouncer",
|
34906
|
-
"members": [
|
34907
|
-
{
|
34908
|
-
"kind": "field",
|
34909
|
-
"name": "announcement",
|
34910
|
-
"type": {
|
34911
|
-
"text": "string"
|
34912
|
-
},
|
34913
|
-
"default": "''",
|
34914
|
-
"description": "The announcement attribute is a string that is used to announce messages to the screen reader.\nThe announcement is made when the announcement attribute is set to a non-empty string.",
|
34915
|
-
"attribute": "announcement",
|
34916
|
-
"reflects": true
|
34917
|
-
},
|
34918
|
-
{
|
34919
|
-
"kind": "field",
|
34920
|
-
"name": "identity",
|
34921
|
-
"type": {
|
34922
|
-
"text": "string"
|
34923
|
-
},
|
34924
|
-
"default": "''",
|
34925
|
-
"description": "The id of the element in the light dom, to which announcement elements will be appended.\n\nIf id is not provided, it will be set to `mdc-screenreaderannouncer-identity` and\na div element with this id will be created in the light dom.",
|
34926
|
-
"attribute": "identity",
|
34927
|
-
"reflects": true
|
34928
|
-
},
|
34929
|
-
{
|
34930
|
-
"kind": "field",
|
34931
|
-
"name": "dataAriaLive",
|
34932
|
-
"type": {
|
34933
|
-
"text": "AriaLive"
|
34934
|
-
},
|
34935
|
-
"description": "Aria live value for announcement.",
|
34936
|
-
"default": "'polite'",
|
34937
|
-
"attribute": "data-aria-live",
|
34938
|
-
"reflects": true
|
34939
|
-
},
|
34940
|
-
{
|
34941
|
-
"kind": "field",
|
34942
|
-
"name": "delay",
|
34943
|
-
"type": {
|
34944
|
-
"text": "number"
|
34945
|
-
},
|
34946
|
-
"description": "Milliseconds to wait before adding the announcement to the identiy region in\nDOM, which will announce the message to the screen reader.",
|
34947
|
-
"default": "150",
|
34948
|
-
"attribute": "delay",
|
34949
|
-
"reflects": true
|
34950
|
-
},
|
34951
|
-
{
|
34952
|
-
"kind": "field",
|
34953
|
-
"name": "timeout",
|
34954
|
-
"type": {
|
34955
|
-
"text": "number"
|
34956
|
-
},
|
34957
|
-
"description": "Milliseconds to wait after which the announcement element will be removed from\nidentity region in DOM, causing the screen reader to not announcing the message.",
|
34958
|
-
"default": "20_000",
|
34959
|
-
"attribute": "timeout",
|
34960
|
-
"reflects": true
|
34961
|
-
},
|
34962
|
-
{
|
34963
|
-
"kind": "method",
|
34964
|
-
"name": "announce",
|
34965
|
-
"parameters": [
|
34966
|
-
{
|
34967
|
-
"name": "announcement",
|
34968
|
-
"type": {
|
34969
|
-
"text": "string"
|
34970
|
-
},
|
34971
|
-
"description": "The announcement to be made."
|
34972
|
-
},
|
34973
|
-
{
|
34974
|
-
"name": "delay",
|
34975
|
-
"type": {
|
34976
|
-
"text": "number"
|
34977
|
-
},
|
34978
|
-
"description": "The delay in milliseconds before announcing the message."
|
34979
|
-
},
|
34980
|
-
{
|
34981
|
-
"name": "timeout",
|
34982
|
-
"type": {
|
34983
|
-
"text": "number"
|
34984
|
-
},
|
34985
|
-
"description": "The timeout in milliseconds before removing the announcement."
|
34986
|
-
},
|
34987
|
-
{
|
34988
|
-
"name": "ariaLive",
|
34989
|
-
"type": {
|
34990
|
-
"text": "AriaLive"
|
34991
|
-
},
|
34992
|
-
"description": "The aria live value for the announcement."
|
34993
|
-
}
|
34994
|
-
],
|
34995
|
-
"description": "Announces the given announcement to the screen reader.\n\nA div element with aria-live attribute set to the given ariaLive value is created\nand a p element with the announcement text is appended to it.\n\nThe div element is appended to the element in the DOM identified with id as\nidentity attribute."
|
34996
|
-
},
|
34997
|
-
{
|
34998
|
-
"kind": "method",
|
34999
|
-
"name": "clearTimeOutsAndAnnouncements",
|
35000
|
-
"privacy": "private",
|
35001
|
-
"description": "Clears all timeouts and removes all announcements from the screen reader."
|
35002
|
-
},
|
35003
|
-
{
|
35004
|
-
"kind": "method",
|
35005
|
-
"name": "createAnnouncementAriaLiveRegion",
|
35006
|
-
"privacy": "private",
|
35007
|
-
"description": "Creates a div element with id as identity attribute in the DOM.\n\nIf the identity attribute is not provided, it is set internally to\n`mdc-screenreaderannouncer-identity`."
|
35008
|
-
}
|
35009
|
-
],
|
35010
|
-
"attributes": [
|
35011
|
-
{
|
35012
|
-
"name": "announcement",
|
35013
|
-
"type": {
|
35014
|
-
"text": "string"
|
35015
|
-
},
|
35016
|
-
"default": "''",
|
35017
|
-
"description": "The announcement attribute is a string that is used to announce messages to the screen reader.\nThe announcement is made when the announcement attribute is set to a non-empty string.",
|
35018
|
-
"fieldName": "announcement"
|
35019
|
-
},
|
35020
|
-
{
|
35021
|
-
"name": "identity",
|
35022
|
-
"type": {
|
35023
|
-
"text": "string"
|
35024
|
-
},
|
35025
|
-
"default": "''",
|
35026
|
-
"description": "The id of the element in the light dom, to which announcement elements will be appended.\n\nIf id is not provided, it will be set to `mdc-screenreaderannouncer-identity` and\na div element with this id will be created in the light dom.",
|
35027
|
-
"fieldName": "identity"
|
35028
|
-
},
|
35029
|
-
{
|
35030
|
-
"name": "data-aria-live",
|
35031
|
-
"type": {
|
35032
|
-
"text": "AriaLive"
|
35033
|
-
},
|
35034
|
-
"description": "Aria live value for announcement.",
|
35035
|
-
"default": "'polite'",
|
35036
|
-
"fieldName": "dataAriaLive"
|
35037
|
-
},
|
35038
|
-
{
|
35039
|
-
"name": "delay",
|
35040
|
-
"type": {
|
35041
|
-
"text": "number"
|
35042
|
-
},
|
35043
|
-
"description": "Milliseconds to wait before adding the announcement to the identiy region in\nDOM, which will announce the message to the screen reader.",
|
35044
|
-
"default": "150",
|
35045
|
-
"fieldName": "delay"
|
35046
|
-
},
|
35047
|
-
{
|
35048
|
-
"name": "timeout",
|
35049
|
-
"type": {
|
35050
|
-
"text": "number"
|
35051
|
-
},
|
35052
|
-
"description": "Milliseconds to wait after which the announcement element will be removed from\nidentity region in DOM, causing the screen reader to not announcing the message.",
|
35053
|
-
"default": "20_000",
|
35054
|
-
"fieldName": "timeout"
|
35055
|
-
}
|
35056
|
-
],
|
35057
|
-
"superclass": {
|
35058
|
-
"name": "Component",
|
35059
|
-
"module": "/src/models"
|
35060
|
-
},
|
35061
|
-
"tagName": "mdc-screenreaderannouncer",
|
35062
|
-
"jsDoc": "/**\n * `mdc-screenreaderannouncer` can be used to announce messages with the screen reader.\n *\n * To make an announcement set `announcement` attribute on the `mdc-screenreaderannouncer` element.\n *\n * **Internal logic**\n *\n * When the screenreader announcer is connected to the DOM, if the `identity` attribute is not\n * provided, it is set to `mdc-screenreaderannouncer-identity` and a `<div>` element with this id is created\n * in the DOM. If the `identity` attribute is provided, the identity element is used and no new element\n * is created in the DOM.\n *\n * When the `announcement` attribute is set, the screenreader announcer will create a `<div>` element with\n * `aria-live` attribute set to the value of `data-aria-live` attribute and append it to the `identity` element.\n * After delay of `delay` milliseconds, a <p> element with the announcement text is appended to the `<div>` element.\n *\n * The announcement `<div>` element is removed from the DOM after `timeout` milliseconds.\n *\n * When the screen announcer component is disconnected from the DOM, all the timeouts are cleared and\n * all the announcement elements added are removed from the DOM and timeouts cleared.\n *\n * **Note**\n * 1. The default delay of 150 miliseconds is used as we dynamically generate the\n * aria-live region in the DOM and add the announcement text to it.\n * 3. If no `identity` is provided, all the screen reader components will create and use only one\n * `<div>` element with id `mdc-screenreaderannouncer-identity` in the DOM.\n *\n * Reference: https://patrickhlauke.github.io/aria/tests/live-regions/\n *\n * @tagname mdc-screenreaderannouncer\n */",
|
35063
|
-
"customElement": true
|
35064
|
-
}
|
35065
|
-
],
|
35066
|
-
"exports": [
|
35067
|
-
{
|
35068
|
-
"kind": "js",
|
35069
|
-
"name": "default",
|
35070
|
-
"declaration": {
|
35071
|
-
"name": "ScreenreaderAnnouncer",
|
35072
|
-
"module": "components/screenreaderannouncer/screenreaderannouncer.component.js"
|
35071
|
+
"name": "Progressspinner",
|
35072
|
+
"module": "components/progressspinner/progressspinner.component.js"
|
35073
35073
|
}
|
35074
35074
|
}
|
35075
35075
|
]
|