@momentum-design/components 0.112.4 → 0.112.5
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.
|
@@ -2,6 +2,481 @@
|
|
|
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
|
+
},
|
|
5
480
|
{
|
|
6
481
|
"kind": "javascript-module",
|
|
7
482
|
"path": "components/accordionbutton/accordionbutton.component.js",
|
|
@@ -495,499 +970,24 @@
|
|
|
495
970
|
},
|
|
496
971
|
{
|
|
497
972
|
"kind": "javascript-module",
|
|
498
|
-
"path": "components/
|
|
973
|
+
"path": "components/alertchip/alertchip.component.js",
|
|
499
974
|
"declarations": [
|
|
500
975
|
{
|
|
501
976
|
"kind": "class",
|
|
502
|
-
"description": "
|
|
503
|
-
"name": "
|
|
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",
|
|
504
979
|
"cssProperties": [
|
|
505
980
|
{
|
|
506
|
-
"description": "The
|
|
507
|
-
"name": "--mdc-
|
|
508
|
-
"inheritedFrom": {
|
|
509
|
-
"name": "AccordionButton",
|
|
510
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
511
|
-
}
|
|
981
|
+
"description": "The color of the label text",
|
|
982
|
+
"name": "--mdc-chip-color"
|
|
512
983
|
},
|
|
513
984
|
{
|
|
514
|
-
"description": "The
|
|
515
|
-
"name": "--mdc-
|
|
516
|
-
"inheritedFrom": {
|
|
517
|
-
"name": "AccordionButton",
|
|
518
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
519
|
-
}
|
|
985
|
+
"description": "The color of the icon",
|
|
986
|
+
"name": "--mdc-chip-icon-color"
|
|
520
987
|
},
|
|
521
988
|
{
|
|
522
|
-
"description": "The
|
|
523
|
-
"name": "--mdc-
|
|
524
|
-
"inheritedFrom": {
|
|
525
|
-
"name": "AccordionButton",
|
|
526
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
527
|
-
}
|
|
528
|
-
},
|
|
529
|
-
{
|
|
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"
|
|
989
|
+
"description": "The border color of the alertchip",
|
|
990
|
+
"name": "--mdc-chip-border-color"
|
|
991
991
|
},
|
|
992
992
|
{
|
|
993
993
|
"description": "The background color of the alertchip",
|
|
@@ -30234,19 +30234,191 @@
|
|
|
30234
30234
|
},
|
|
30235
30235
|
{
|
|
30236
30236
|
"kind": "javascript-module",
|
|
30237
|
-
"path": "components/
|
|
30237
|
+
"path": "components/radio/radio.component.js",
|
|
30238
30238
|
"declarations": [
|
|
30239
30239
|
{
|
|
30240
30240
|
"kind": "class",
|
|
30241
|
-
"description": "
|
|
30242
|
-
"name": "
|
|
30241
|
+
"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.",
|
|
30242
|
+
"name": "Radio",
|
|
30243
30243
|
"cssProperties": [
|
|
30244
30244
|
{
|
|
30245
|
-
"description": "color of the
|
|
30246
|
-
"name": "--mdc-
|
|
30245
|
+
"description": "color of the label when disabled",
|
|
30246
|
+
"name": "--mdc-radio-text-disabled-color"
|
|
30247
|
+
},
|
|
30248
|
+
{
|
|
30249
|
+
"description": "color of the radio button when inactive and hovered",
|
|
30250
|
+
"name": "--mdc-radio-control-inactive-hover"
|
|
30251
|
+
},
|
|
30252
|
+
{
|
|
30253
|
+
"description": "color of the radio button when inactive and pressed",
|
|
30254
|
+
"name": "--mdc-radio-control-inactive-pressed-color"
|
|
30255
|
+
},
|
|
30256
|
+
{
|
|
30257
|
+
"description": "color of the radio button when active and hovered",
|
|
30258
|
+
"name": "--mdc-radio-control-active-hover-color"
|
|
30259
|
+
},
|
|
30260
|
+
{
|
|
30261
|
+
"description": "color of the radio button when active and pressed",
|
|
30262
|
+
"name": "--mdc-radio-control-active-pressed-color"
|
|
30263
|
+
},
|
|
30264
|
+
{
|
|
30265
|
+
"description": "color of the radio button when disabled",
|
|
30266
|
+
"name": "--mdc-radio-disabled-border-color"
|
|
30267
|
+
},
|
|
30268
|
+
{
|
|
30269
|
+
"description": "color of the radio button when active and disabled",
|
|
30270
|
+
"name": "--mdc-radio-control-active-disabled-background"
|
|
30271
|
+
},
|
|
30272
|
+
{
|
|
30273
|
+
"description": "color of the radio button when inactive and disabled",
|
|
30274
|
+
"name": "--mdc-radio-control-inactive-disabled-background"
|
|
30247
30275
|
}
|
|
30248
30276
|
],
|
|
30249
30277
|
"members": [
|
|
30278
|
+
{
|
|
30279
|
+
"kind": "field",
|
|
30280
|
+
"name": "checked",
|
|
30281
|
+
"type": {
|
|
30282
|
+
"text": "boolean"
|
|
30283
|
+
},
|
|
30284
|
+
"default": "false",
|
|
30285
|
+
"description": "Determines whether the radio is selected or unselected.",
|
|
30286
|
+
"attribute": "checked",
|
|
30287
|
+
"reflects": true
|
|
30288
|
+
},
|
|
30289
|
+
{
|
|
30290
|
+
"kind": "field",
|
|
30291
|
+
"name": "readonly",
|
|
30292
|
+
"type": {
|
|
30293
|
+
"text": "boolean"
|
|
30294
|
+
},
|
|
30295
|
+
"default": "false",
|
|
30296
|
+
"description": "Determines whether the radio is read-only.",
|
|
30297
|
+
"attribute": "readonly",
|
|
30298
|
+
"reflects": true
|
|
30299
|
+
},
|
|
30300
|
+
{
|
|
30301
|
+
"kind": "method",
|
|
30302
|
+
"name": "getAllRadiosWithinSameGroup",
|
|
30303
|
+
"privacy": "private",
|
|
30304
|
+
"return": {
|
|
30305
|
+
"type": {
|
|
30306
|
+
"text": "Radio[]"
|
|
30307
|
+
}
|
|
30308
|
+
},
|
|
30309
|
+
"description": "Returns all radios within the same group (name)."
|
|
30310
|
+
},
|
|
30311
|
+
{
|
|
30312
|
+
"kind": "method",
|
|
30313
|
+
"name": "setGroupValidity",
|
|
30314
|
+
"privacy": "private",
|
|
30315
|
+
"parameters": [
|
|
30316
|
+
{
|
|
30317
|
+
"name": "radios",
|
|
30318
|
+
"type": {
|
|
30319
|
+
"text": "Radio[]"
|
|
30320
|
+
},
|
|
30321
|
+
"description": "Array of radios of the same group"
|
|
30322
|
+
},
|
|
30323
|
+
{
|
|
30324
|
+
"name": "isValid",
|
|
30325
|
+
"type": {
|
|
30326
|
+
"text": "boolean"
|
|
30327
|
+
},
|
|
30328
|
+
"description": "Boolean value to set the validity of the group"
|
|
30329
|
+
}
|
|
30330
|
+
],
|
|
30331
|
+
"description": "Sets the validity of the group of radios."
|
|
30332
|
+
},
|
|
30333
|
+
{
|
|
30334
|
+
"kind": "method",
|
|
30335
|
+
"name": "setActualFormValue",
|
|
30336
|
+
"privacy": "private",
|
|
30337
|
+
"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."
|
|
30338
|
+
},
|
|
30339
|
+
{
|
|
30340
|
+
"kind": "method",
|
|
30341
|
+
"name": "handleChange",
|
|
30342
|
+
"privacy": "private",
|
|
30343
|
+
"return": {
|
|
30344
|
+
"type": {
|
|
30345
|
+
"text": "void"
|
|
30346
|
+
}
|
|
30347
|
+
},
|
|
30348
|
+
"description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
|
|
30349
|
+
},
|
|
30350
|
+
{
|
|
30351
|
+
"kind": "method",
|
|
30352
|
+
"name": "updateRadio",
|
|
30353
|
+
"privacy": "private",
|
|
30354
|
+
"parameters": [
|
|
30355
|
+
{
|
|
30356
|
+
"name": "enabledRadios",
|
|
30357
|
+
"type": {
|
|
30358
|
+
"text": "Radio[]"
|
|
30359
|
+
},
|
|
30360
|
+
"description": "An array of enabled radio buttons within the same group."
|
|
30361
|
+
},
|
|
30362
|
+
{
|
|
30363
|
+
"name": "index",
|
|
30364
|
+
"type": {
|
|
30365
|
+
"text": "number"
|
|
30366
|
+
},
|
|
30367
|
+
"description": "The index of the radio button to be updated within the enabled radios array."
|
|
30368
|
+
}
|
|
30369
|
+
],
|
|
30370
|
+
"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."
|
|
30371
|
+
},
|
|
30372
|
+
{
|
|
30373
|
+
"kind": "method",
|
|
30374
|
+
"name": "handleKeyDown",
|
|
30375
|
+
"privacy": "private",
|
|
30376
|
+
"return": {
|
|
30377
|
+
"type": {
|
|
30378
|
+
"text": "void"
|
|
30379
|
+
}
|
|
30380
|
+
},
|
|
30381
|
+
"parameters": [
|
|
30382
|
+
{
|
|
30383
|
+
"name": "event",
|
|
30384
|
+
"type": {
|
|
30385
|
+
"text": "KeyboardEvent"
|
|
30386
|
+
}
|
|
30387
|
+
}
|
|
30388
|
+
],
|
|
30389
|
+
"description": "Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element."
|
|
30390
|
+
},
|
|
30391
|
+
{
|
|
30392
|
+
"kind": "method",
|
|
30393
|
+
"name": "updateTabIndex",
|
|
30394
|
+
"privacy": "private",
|
|
30395
|
+
"return": {
|
|
30396
|
+
"type": {
|
|
30397
|
+
"text": "void"
|
|
30398
|
+
}
|
|
30399
|
+
},
|
|
30400
|
+
"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"
|
|
30401
|
+
},
|
|
30402
|
+
{
|
|
30403
|
+
"kind": "field",
|
|
30404
|
+
"name": "renderLabelAndHelperText",
|
|
30405
|
+
"privacy": "private"
|
|
30406
|
+
},
|
|
30407
|
+
{
|
|
30408
|
+
"kind": "field",
|
|
30409
|
+
"name": "autoFocusOnMount",
|
|
30410
|
+
"type": {
|
|
30411
|
+
"text": "boolean"
|
|
30412
|
+
},
|
|
30413
|
+
"default": "false",
|
|
30414
|
+
"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.",
|
|
30415
|
+
"attribute": "auto-focus-on-mount",
|
|
30416
|
+
"reflects": true,
|
|
30417
|
+
"inheritedFrom": {
|
|
30418
|
+
"name": "AutoFocusOnMountMixin",
|
|
30419
|
+
"module": "utils/mixins/AutoFocusOnMountMixin.js"
|
|
30420
|
+
}
|
|
30421
|
+
},
|
|
30250
30422
|
{
|
|
30251
30423
|
"kind": "field",
|
|
30252
30424
|
"name": "name",
|
|
@@ -30254,8 +30426,98 @@
|
|
|
30254
30426
|
"text": "string"
|
|
30255
30427
|
},
|
|
30256
30428
|
"default": "''",
|
|
30257
|
-
"description": "
|
|
30258
|
-
"attribute": "name"
|
|
30429
|
+
"description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
|
|
30430
|
+
"attribute": "name",
|
|
30431
|
+
"reflects": true,
|
|
30432
|
+
"inheritedFrom": {
|
|
30433
|
+
"name": "FormInternalsMixin",
|
|
30434
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
30435
|
+
}
|
|
30436
|
+
},
|
|
30437
|
+
{
|
|
30438
|
+
"kind": "field",
|
|
30439
|
+
"name": "value",
|
|
30440
|
+
"type": {
|
|
30441
|
+
"text": "string"
|
|
30442
|
+
},
|
|
30443
|
+
"default": "''",
|
|
30444
|
+
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
|
30445
|
+
"attribute": "value",
|
|
30446
|
+
"reflects": true,
|
|
30447
|
+
"inheritedFrom": {
|
|
30448
|
+
"name": "FormInternalsMixin",
|
|
30449
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
30450
|
+
}
|
|
30451
|
+
},
|
|
30452
|
+
{
|
|
30453
|
+
"kind": "field",
|
|
30454
|
+
"name": "validationMessage",
|
|
30455
|
+
"type": {
|
|
30456
|
+
"text": "string | undefined"
|
|
30457
|
+
},
|
|
30458
|
+
"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.",
|
|
30459
|
+
"attribute": "validation-message",
|
|
30460
|
+
"reflects": true,
|
|
30461
|
+
"inheritedFrom": {
|
|
30462
|
+
"name": "FormInternalsMixin",
|
|
30463
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
30464
|
+
}
|
|
30465
|
+
},
|
|
30466
|
+
{
|
|
30467
|
+
"kind": "field",
|
|
30468
|
+
"name": "validity",
|
|
30469
|
+
"type": {
|
|
30470
|
+
"text": "ValidityState"
|
|
30471
|
+
},
|
|
30472
|
+
"readonly": true,
|
|
30473
|
+
"inheritedFrom": {
|
|
30474
|
+
"name": "FormInternalsMixin",
|
|
30475
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
30476
|
+
}
|
|
30477
|
+
},
|
|
30478
|
+
{
|
|
30479
|
+
"kind": "field",
|
|
30480
|
+
"name": "willValidate",
|
|
30481
|
+
"readonly": true,
|
|
30482
|
+
"inheritedFrom": {
|
|
30483
|
+
"name": "FormInternalsMixin",
|
|
30484
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
30485
|
+
}
|
|
30486
|
+
},
|
|
30487
|
+
{
|
|
30488
|
+
"kind": "method",
|
|
30489
|
+
"name": "setValidity",
|
|
30490
|
+
"description": "Sets the validity of the input field based on the input field's validity.",
|
|
30491
|
+
"return": {
|
|
30492
|
+
"type": {
|
|
30493
|
+
"text": ""
|
|
30494
|
+
}
|
|
30495
|
+
},
|
|
30496
|
+
"inheritedFrom": {
|
|
30497
|
+
"name": "FormInternalsMixin",
|
|
30498
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
30499
|
+
}
|
|
30500
|
+
},
|
|
30501
|
+
{
|
|
30502
|
+
"kind": "method",
|
|
30503
|
+
"name": "checkValidity",
|
|
30504
|
+
"return": {
|
|
30505
|
+
"type": {
|
|
30506
|
+
"text": "boolean"
|
|
30507
|
+
}
|
|
30508
|
+
},
|
|
30509
|
+
"inheritedFrom": {
|
|
30510
|
+
"name": "FormInternalsMixin",
|
|
30511
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
30512
|
+
}
|
|
30513
|
+
},
|
|
30514
|
+
{
|
|
30515
|
+
"kind": "method",
|
|
30516
|
+
"name": "reportValidity",
|
|
30517
|
+
"inheritedFrom": {
|
|
30518
|
+
"name": "FormInternalsMixin",
|
|
30519
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
30520
|
+
}
|
|
30259
30521
|
},
|
|
30260
30522
|
{
|
|
30261
30523
|
"kind": "field",
|
|
@@ -30463,15 +30725,90 @@
|
|
|
30463
30725
|
}
|
|
30464
30726
|
}
|
|
30465
30727
|
],
|
|
30728
|
+
"events": [
|
|
30729
|
+
{
|
|
30730
|
+
"name": "change",
|
|
30731
|
+
"type": {
|
|
30732
|
+
"text": "Event"
|
|
30733
|
+
},
|
|
30734
|
+
"description": "(React: onChange) Event that gets dispatched when the radio state changes.",
|
|
30735
|
+
"reactName": "onChange"
|
|
30736
|
+
},
|
|
30737
|
+
{
|
|
30738
|
+
"description": "(React: onFocus) Event that gets dispatched when the radio receives focus.",
|
|
30739
|
+
"name": "focus",
|
|
30740
|
+
"reactName": "onFocus"
|
|
30741
|
+
}
|
|
30742
|
+
],
|
|
30466
30743
|
"attributes": [
|
|
30744
|
+
{
|
|
30745
|
+
"name": "checked",
|
|
30746
|
+
"type": {
|
|
30747
|
+
"text": "boolean"
|
|
30748
|
+
},
|
|
30749
|
+
"default": "false",
|
|
30750
|
+
"description": "Determines whether the radio is selected or unselected.",
|
|
30751
|
+
"fieldName": "checked"
|
|
30752
|
+
},
|
|
30753
|
+
{
|
|
30754
|
+
"name": "readonly",
|
|
30755
|
+
"type": {
|
|
30756
|
+
"text": "boolean"
|
|
30757
|
+
},
|
|
30758
|
+
"default": "false",
|
|
30759
|
+
"description": "Determines whether the radio is read-only.",
|
|
30760
|
+
"fieldName": "readonly"
|
|
30761
|
+
},
|
|
30762
|
+
{
|
|
30763
|
+
"name": "auto-focus-on-mount",
|
|
30764
|
+
"type": {
|
|
30765
|
+
"text": "boolean"
|
|
30766
|
+
},
|
|
30767
|
+
"default": "false",
|
|
30768
|
+
"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.",
|
|
30769
|
+
"fieldName": "autoFocusOnMount",
|
|
30770
|
+
"inheritedFrom": {
|
|
30771
|
+
"name": "AutoFocusOnMountMixin",
|
|
30772
|
+
"module": "src/utils/mixins/AutoFocusOnMountMixin.ts"
|
|
30773
|
+
}
|
|
30774
|
+
},
|
|
30467
30775
|
{
|
|
30468
30776
|
"name": "name",
|
|
30469
30777
|
"type": {
|
|
30470
30778
|
"text": "string"
|
|
30471
30779
|
},
|
|
30472
30780
|
"default": "''",
|
|
30473
|
-
"description": "
|
|
30474
|
-
"fieldName": "name"
|
|
30781
|
+
"description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
|
|
30782
|
+
"fieldName": "name",
|
|
30783
|
+
"inheritedFrom": {
|
|
30784
|
+
"name": "FormInternalsMixin",
|
|
30785
|
+
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
|
30786
|
+
}
|
|
30787
|
+
},
|
|
30788
|
+
{
|
|
30789
|
+
"name": "value",
|
|
30790
|
+
"type": {
|
|
30791
|
+
"text": "string"
|
|
30792
|
+
},
|
|
30793
|
+
"default": "''",
|
|
30794
|
+
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
|
30795
|
+
"fieldName": "value",
|
|
30796
|
+
"inheritedFrom": {
|
|
30797
|
+
"name": "FormInternalsMixin",
|
|
30798
|
+
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
|
30799
|
+
}
|
|
30800
|
+
},
|
|
30801
|
+
{
|
|
30802
|
+
"name": "validation-message",
|
|
30803
|
+
"type": {
|
|
30804
|
+
"text": "string | undefined"
|
|
30805
|
+
},
|
|
30806
|
+
"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.",
|
|
30807
|
+
"fieldName": "validationMessage",
|
|
30808
|
+
"inheritedFrom": {
|
|
30809
|
+
"name": "FormInternalsMixin",
|
|
30810
|
+
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
|
30811
|
+
}
|
|
30475
30812
|
},
|
|
30476
30813
|
{
|
|
30477
30814
|
"name": "data-aria-label",
|
|
@@ -30586,23 +30923,27 @@
|
|
|
30586
30923
|
}
|
|
30587
30924
|
}
|
|
30588
30925
|
],
|
|
30589
|
-
"
|
|
30590
|
-
"name": "FormfieldGroup",
|
|
30591
|
-
"module": "/src/components/formfieldgroup"
|
|
30592
|
-
},
|
|
30593
|
-
"tagName": "mdc-radiogroup",
|
|
30594
|
-
"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 */",
|
|
30595
|
-
"customElement": true,
|
|
30596
|
-
"slots": [
|
|
30926
|
+
"mixins": [
|
|
30597
30927
|
{
|
|
30598
|
-
"
|
|
30599
|
-
"
|
|
30600
|
-
|
|
30601
|
-
|
|
30602
|
-
|
|
30603
|
-
|
|
30928
|
+
"name": "AutoFocusOnMountMixin",
|
|
30929
|
+
"module": "/src/utils/mixins/AutoFocusOnMountMixin"
|
|
30930
|
+
},
|
|
30931
|
+
{
|
|
30932
|
+
"name": "FormInternalsMixin",
|
|
30933
|
+
"module": "/src/utils/mixins/FormInternalsMixin"
|
|
30934
|
+
},
|
|
30935
|
+
{
|
|
30936
|
+
"name": "DataAriaLabelMixin",
|
|
30937
|
+
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
|
30604
30938
|
}
|
|
30605
|
-
]
|
|
30939
|
+
],
|
|
30940
|
+
"superclass": {
|
|
30941
|
+
"name": "FormfieldWrapper",
|
|
30942
|
+
"module": "/src/components/formfieldwrapper/formfieldwrapper.component"
|
|
30943
|
+
},
|
|
30944
|
+
"tagName": "mdc-radio",
|
|
30945
|
+
"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 */",
|
|
30946
|
+
"customElement": true
|
|
30606
30947
|
}
|
|
30607
30948
|
],
|
|
30608
30949
|
"exports": [
|
|
@@ -30610,199 +30951,27 @@
|
|
|
30610
30951
|
"kind": "js",
|
|
30611
30952
|
"name": "default",
|
|
30612
30953
|
"declaration": {
|
|
30613
|
-
"name": "
|
|
30614
|
-
"module": "components/
|
|
30954
|
+
"name": "Radio",
|
|
30955
|
+
"module": "components/radio/radio.component.js"
|
|
30615
30956
|
}
|
|
30616
30957
|
}
|
|
30617
30958
|
]
|
|
30618
30959
|
},
|
|
30619
30960
|
{
|
|
30620
30961
|
"kind": "javascript-module",
|
|
30621
|
-
"path": "components/
|
|
30962
|
+
"path": "components/radiogroup/radiogroup.component.js",
|
|
30622
30963
|
"declarations": [
|
|
30623
30964
|
{
|
|
30624
30965
|
"kind": "class",
|
|
30625
|
-
"description": "
|
|
30626
|
-
"name": "
|
|
30966
|
+
"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.",
|
|
30967
|
+
"name": "RadioGroup",
|
|
30627
30968
|
"cssProperties": [
|
|
30628
30969
|
{
|
|
30629
|
-
"description": "color of the
|
|
30630
|
-
"name": "--mdc-
|
|
30631
|
-
},
|
|
30632
|
-
{
|
|
30633
|
-
"description": "color of the radio button when inactive and hovered",
|
|
30634
|
-
"name": "--mdc-radio-control-inactive-hover"
|
|
30635
|
-
},
|
|
30636
|
-
{
|
|
30637
|
-
"description": "color of the radio button when inactive and pressed",
|
|
30638
|
-
"name": "--mdc-radio-control-inactive-pressed-color"
|
|
30639
|
-
},
|
|
30640
|
-
{
|
|
30641
|
-
"description": "color of the radio button when active and hovered",
|
|
30642
|
-
"name": "--mdc-radio-control-active-hover-color"
|
|
30643
|
-
},
|
|
30644
|
-
{
|
|
30645
|
-
"description": "color of the radio button when active and pressed",
|
|
30646
|
-
"name": "--mdc-radio-control-active-pressed-color"
|
|
30647
|
-
},
|
|
30648
|
-
{
|
|
30649
|
-
"description": "color of the radio button when disabled",
|
|
30650
|
-
"name": "--mdc-radio-disabled-border-color"
|
|
30651
|
-
},
|
|
30652
|
-
{
|
|
30653
|
-
"description": "color of the radio button when active and disabled",
|
|
30654
|
-
"name": "--mdc-radio-control-active-disabled-background"
|
|
30655
|
-
},
|
|
30656
|
-
{
|
|
30657
|
-
"description": "color of the radio button when inactive and disabled",
|
|
30658
|
-
"name": "--mdc-radio-control-inactive-disabled-background"
|
|
30970
|
+
"description": "color of the description text",
|
|
30971
|
+
"name": "--mdc-radiogroup-description-text-normal"
|
|
30659
30972
|
}
|
|
30660
30973
|
],
|
|
30661
30974
|
"members": [
|
|
30662
|
-
{
|
|
30663
|
-
"kind": "field",
|
|
30664
|
-
"name": "checked",
|
|
30665
|
-
"type": {
|
|
30666
|
-
"text": "boolean"
|
|
30667
|
-
},
|
|
30668
|
-
"default": "false",
|
|
30669
|
-
"description": "Determines whether the radio is selected or unselected.",
|
|
30670
|
-
"attribute": "checked",
|
|
30671
|
-
"reflects": true
|
|
30672
|
-
},
|
|
30673
|
-
{
|
|
30674
|
-
"kind": "field",
|
|
30675
|
-
"name": "readonly",
|
|
30676
|
-
"type": {
|
|
30677
|
-
"text": "boolean"
|
|
30678
|
-
},
|
|
30679
|
-
"default": "false",
|
|
30680
|
-
"description": "Determines whether the radio is read-only.",
|
|
30681
|
-
"attribute": "readonly",
|
|
30682
|
-
"reflects": true
|
|
30683
|
-
},
|
|
30684
|
-
{
|
|
30685
|
-
"kind": "method",
|
|
30686
|
-
"name": "getAllRadiosWithinSameGroup",
|
|
30687
|
-
"privacy": "private",
|
|
30688
|
-
"return": {
|
|
30689
|
-
"type": {
|
|
30690
|
-
"text": "Radio[]"
|
|
30691
|
-
}
|
|
30692
|
-
},
|
|
30693
|
-
"description": "Returns all radios within the same group (name)."
|
|
30694
|
-
},
|
|
30695
|
-
{
|
|
30696
|
-
"kind": "method",
|
|
30697
|
-
"name": "setGroupValidity",
|
|
30698
|
-
"privacy": "private",
|
|
30699
|
-
"parameters": [
|
|
30700
|
-
{
|
|
30701
|
-
"name": "radios",
|
|
30702
|
-
"type": {
|
|
30703
|
-
"text": "Radio[]"
|
|
30704
|
-
},
|
|
30705
|
-
"description": "Array of radios of the same group"
|
|
30706
|
-
},
|
|
30707
|
-
{
|
|
30708
|
-
"name": "isValid",
|
|
30709
|
-
"type": {
|
|
30710
|
-
"text": "boolean"
|
|
30711
|
-
},
|
|
30712
|
-
"description": "Boolean value to set the validity of the group"
|
|
30713
|
-
}
|
|
30714
|
-
],
|
|
30715
|
-
"description": "Sets the validity of the group of radios."
|
|
30716
|
-
},
|
|
30717
|
-
{
|
|
30718
|
-
"kind": "method",
|
|
30719
|
-
"name": "setActualFormValue",
|
|
30720
|
-
"privacy": "private",
|
|
30721
|
-
"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."
|
|
30722
|
-
},
|
|
30723
|
-
{
|
|
30724
|
-
"kind": "method",
|
|
30725
|
-
"name": "handleChange",
|
|
30726
|
-
"privacy": "private",
|
|
30727
|
-
"return": {
|
|
30728
|
-
"type": {
|
|
30729
|
-
"text": "void"
|
|
30730
|
-
}
|
|
30731
|
-
},
|
|
30732
|
-
"description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
|
|
30733
|
-
},
|
|
30734
|
-
{
|
|
30735
|
-
"kind": "method",
|
|
30736
|
-
"name": "updateRadio",
|
|
30737
|
-
"privacy": "private",
|
|
30738
|
-
"parameters": [
|
|
30739
|
-
{
|
|
30740
|
-
"name": "enabledRadios",
|
|
30741
|
-
"type": {
|
|
30742
|
-
"text": "Radio[]"
|
|
30743
|
-
},
|
|
30744
|
-
"description": "An array of enabled radio buttons within the same group."
|
|
30745
|
-
},
|
|
30746
|
-
{
|
|
30747
|
-
"name": "index",
|
|
30748
|
-
"type": {
|
|
30749
|
-
"text": "number"
|
|
30750
|
-
},
|
|
30751
|
-
"description": "The index of the radio button to be updated within the enabled radios array."
|
|
30752
|
-
}
|
|
30753
|
-
],
|
|
30754
|
-
"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."
|
|
30755
|
-
},
|
|
30756
|
-
{
|
|
30757
|
-
"kind": "method",
|
|
30758
|
-
"name": "handleKeyDown",
|
|
30759
|
-
"privacy": "private",
|
|
30760
|
-
"return": {
|
|
30761
|
-
"type": {
|
|
30762
|
-
"text": "void"
|
|
30763
|
-
}
|
|
30764
|
-
},
|
|
30765
|
-
"parameters": [
|
|
30766
|
-
{
|
|
30767
|
-
"name": "event",
|
|
30768
|
-
"type": {
|
|
30769
|
-
"text": "KeyboardEvent"
|
|
30770
|
-
}
|
|
30771
|
-
}
|
|
30772
|
-
],
|
|
30773
|
-
"description": "Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element."
|
|
30774
|
-
},
|
|
30775
|
-
{
|
|
30776
|
-
"kind": "method",
|
|
30777
|
-
"name": "updateTabIndex",
|
|
30778
|
-
"privacy": "private",
|
|
30779
|
-
"return": {
|
|
30780
|
-
"type": {
|
|
30781
|
-
"text": "void"
|
|
30782
|
-
}
|
|
30783
|
-
},
|
|
30784
|
-
"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"
|
|
30785
|
-
},
|
|
30786
|
-
{
|
|
30787
|
-
"kind": "field",
|
|
30788
|
-
"name": "renderLabelAndHelperText",
|
|
30789
|
-
"privacy": "private"
|
|
30790
|
-
},
|
|
30791
|
-
{
|
|
30792
|
-
"kind": "field",
|
|
30793
|
-
"name": "autoFocusOnMount",
|
|
30794
|
-
"type": {
|
|
30795
|
-
"text": "boolean"
|
|
30796
|
-
},
|
|
30797
|
-
"default": "false",
|
|
30798
|
-
"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.",
|
|
30799
|
-
"attribute": "auto-focus-on-mount",
|
|
30800
|
-
"reflects": true,
|
|
30801
|
-
"inheritedFrom": {
|
|
30802
|
-
"name": "AutoFocusOnMountMixin",
|
|
30803
|
-
"module": "utils/mixins/AutoFocusOnMountMixin.js"
|
|
30804
|
-
}
|
|
30805
|
-
},
|
|
30806
30975
|
{
|
|
30807
30976
|
"kind": "field",
|
|
30808
30977
|
"name": "name",
|
|
@@ -30810,98 +30979,8 @@
|
|
|
30810
30979
|
"text": "string"
|
|
30811
30980
|
},
|
|
30812
30981
|
"default": "''",
|
|
30813
|
-
"description": "
|
|
30814
|
-
"attribute": "name"
|
|
30815
|
-
"reflects": true,
|
|
30816
|
-
"inheritedFrom": {
|
|
30817
|
-
"name": "FormInternalsMixin",
|
|
30818
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
30819
|
-
}
|
|
30820
|
-
},
|
|
30821
|
-
{
|
|
30822
|
-
"kind": "field",
|
|
30823
|
-
"name": "value",
|
|
30824
|
-
"type": {
|
|
30825
|
-
"text": "string"
|
|
30826
|
-
},
|
|
30827
|
-
"default": "''",
|
|
30828
|
-
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
|
30829
|
-
"attribute": "value",
|
|
30830
|
-
"reflects": true,
|
|
30831
|
-
"inheritedFrom": {
|
|
30832
|
-
"name": "FormInternalsMixin",
|
|
30833
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
30834
|
-
}
|
|
30835
|
-
},
|
|
30836
|
-
{
|
|
30837
|
-
"kind": "field",
|
|
30838
|
-
"name": "validationMessage",
|
|
30839
|
-
"type": {
|
|
30840
|
-
"text": "string | undefined"
|
|
30841
|
-
},
|
|
30842
|
-
"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.",
|
|
30843
|
-
"attribute": "validation-message",
|
|
30844
|
-
"reflects": true,
|
|
30845
|
-
"inheritedFrom": {
|
|
30846
|
-
"name": "FormInternalsMixin",
|
|
30847
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
30848
|
-
}
|
|
30849
|
-
},
|
|
30850
|
-
{
|
|
30851
|
-
"kind": "field",
|
|
30852
|
-
"name": "validity",
|
|
30853
|
-
"type": {
|
|
30854
|
-
"text": "ValidityState"
|
|
30855
|
-
},
|
|
30856
|
-
"readonly": true,
|
|
30857
|
-
"inheritedFrom": {
|
|
30858
|
-
"name": "FormInternalsMixin",
|
|
30859
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
30860
|
-
}
|
|
30861
|
-
},
|
|
30862
|
-
{
|
|
30863
|
-
"kind": "field",
|
|
30864
|
-
"name": "willValidate",
|
|
30865
|
-
"readonly": true,
|
|
30866
|
-
"inheritedFrom": {
|
|
30867
|
-
"name": "FormInternalsMixin",
|
|
30868
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
30869
|
-
}
|
|
30870
|
-
},
|
|
30871
|
-
{
|
|
30872
|
-
"kind": "method",
|
|
30873
|
-
"name": "setValidity",
|
|
30874
|
-
"description": "Sets the validity of the input field based on the input field's validity.",
|
|
30875
|
-
"return": {
|
|
30876
|
-
"type": {
|
|
30877
|
-
"text": ""
|
|
30878
|
-
}
|
|
30879
|
-
},
|
|
30880
|
-
"inheritedFrom": {
|
|
30881
|
-
"name": "FormInternalsMixin",
|
|
30882
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
30883
|
-
}
|
|
30884
|
-
},
|
|
30885
|
-
{
|
|
30886
|
-
"kind": "method",
|
|
30887
|
-
"name": "checkValidity",
|
|
30888
|
-
"return": {
|
|
30889
|
-
"type": {
|
|
30890
|
-
"text": "boolean"
|
|
30891
|
-
}
|
|
30892
|
-
},
|
|
30893
|
-
"inheritedFrom": {
|
|
30894
|
-
"name": "FormInternalsMixin",
|
|
30895
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
30896
|
-
}
|
|
30897
|
-
},
|
|
30898
|
-
{
|
|
30899
|
-
"kind": "method",
|
|
30900
|
-
"name": "reportValidity",
|
|
30901
|
-
"inheritedFrom": {
|
|
30902
|
-
"name": "FormInternalsMixin",
|
|
30903
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
30904
|
-
}
|
|
30982
|
+
"description": "Name of the radio group.\nThey are used to group elements in a form together.",
|
|
30983
|
+
"attribute": "name"
|
|
30905
30984
|
},
|
|
30906
30985
|
{
|
|
30907
30986
|
"kind": "field",
|
|
@@ -31109,90 +31188,15 @@
|
|
|
31109
31188
|
}
|
|
31110
31189
|
}
|
|
31111
31190
|
],
|
|
31112
|
-
"events": [
|
|
31113
|
-
{
|
|
31114
|
-
"name": "change",
|
|
31115
|
-
"type": {
|
|
31116
|
-
"text": "Event"
|
|
31117
|
-
},
|
|
31118
|
-
"description": "(React: onChange) Event that gets dispatched when the radio state changes.",
|
|
31119
|
-
"reactName": "onChange"
|
|
31120
|
-
},
|
|
31121
|
-
{
|
|
31122
|
-
"description": "(React: onFocus) Event that gets dispatched when the radio receives focus.",
|
|
31123
|
-
"name": "focus",
|
|
31124
|
-
"reactName": "onFocus"
|
|
31125
|
-
}
|
|
31126
|
-
],
|
|
31127
31191
|
"attributes": [
|
|
31128
|
-
{
|
|
31129
|
-
"name": "checked",
|
|
31130
|
-
"type": {
|
|
31131
|
-
"text": "boolean"
|
|
31132
|
-
},
|
|
31133
|
-
"default": "false",
|
|
31134
|
-
"description": "Determines whether the radio is selected or unselected.",
|
|
31135
|
-
"fieldName": "checked"
|
|
31136
|
-
},
|
|
31137
|
-
{
|
|
31138
|
-
"name": "readonly",
|
|
31139
|
-
"type": {
|
|
31140
|
-
"text": "boolean"
|
|
31141
|
-
},
|
|
31142
|
-
"default": "false",
|
|
31143
|
-
"description": "Determines whether the radio is read-only.",
|
|
31144
|
-
"fieldName": "readonly"
|
|
31145
|
-
},
|
|
31146
|
-
{
|
|
31147
|
-
"name": "auto-focus-on-mount",
|
|
31148
|
-
"type": {
|
|
31149
|
-
"text": "boolean"
|
|
31150
|
-
},
|
|
31151
|
-
"default": "false",
|
|
31152
|
-
"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.",
|
|
31153
|
-
"fieldName": "autoFocusOnMount",
|
|
31154
|
-
"inheritedFrom": {
|
|
31155
|
-
"name": "AutoFocusOnMountMixin",
|
|
31156
|
-
"module": "src/utils/mixins/AutoFocusOnMountMixin.ts"
|
|
31157
|
-
}
|
|
31158
|
-
},
|
|
31159
31192
|
{
|
|
31160
31193
|
"name": "name",
|
|
31161
31194
|
"type": {
|
|
31162
31195
|
"text": "string"
|
|
31163
31196
|
},
|
|
31164
31197
|
"default": "''",
|
|
31165
|
-
"description": "
|
|
31166
|
-
"fieldName": "name"
|
|
31167
|
-
"inheritedFrom": {
|
|
31168
|
-
"name": "FormInternalsMixin",
|
|
31169
|
-
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
|
31170
|
-
}
|
|
31171
|
-
},
|
|
31172
|
-
{
|
|
31173
|
-
"name": "value",
|
|
31174
|
-
"type": {
|
|
31175
|
-
"text": "string"
|
|
31176
|
-
},
|
|
31177
|
-
"default": "''",
|
|
31178
|
-
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
|
31179
|
-
"fieldName": "value",
|
|
31180
|
-
"inheritedFrom": {
|
|
31181
|
-
"name": "FormInternalsMixin",
|
|
31182
|
-
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
|
31183
|
-
}
|
|
31184
|
-
},
|
|
31185
|
-
{
|
|
31186
|
-
"name": "validation-message",
|
|
31187
|
-
"type": {
|
|
31188
|
-
"text": "string | undefined"
|
|
31189
|
-
},
|
|
31190
|
-
"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.",
|
|
31191
|
-
"fieldName": "validationMessage",
|
|
31192
|
-
"inheritedFrom": {
|
|
31193
|
-
"name": "FormInternalsMixin",
|
|
31194
|
-
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
|
31195
|
-
}
|
|
31198
|
+
"description": "Name of the radio group.\nThey are used to group elements in a form together.",
|
|
31199
|
+
"fieldName": "name"
|
|
31196
31200
|
},
|
|
31197
31201
|
{
|
|
31198
31202
|
"name": "data-aria-label",
|
|
@@ -31307,27 +31311,23 @@
|
|
|
31307
31311
|
}
|
|
31308
31312
|
}
|
|
31309
31313
|
],
|
|
31310
|
-
"mixins": [
|
|
31311
|
-
{
|
|
31312
|
-
"name": "AutoFocusOnMountMixin",
|
|
31313
|
-
"module": "/src/utils/mixins/AutoFocusOnMountMixin"
|
|
31314
|
-
},
|
|
31315
|
-
{
|
|
31316
|
-
"name": "FormInternalsMixin",
|
|
31317
|
-
"module": "/src/utils/mixins/FormInternalsMixin"
|
|
31318
|
-
},
|
|
31319
|
-
{
|
|
31320
|
-
"name": "DataAriaLabelMixin",
|
|
31321
|
-
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
|
31322
|
-
}
|
|
31323
|
-
],
|
|
31324
31314
|
"superclass": {
|
|
31325
|
-
"name": "
|
|
31326
|
-
"module": "/src/components/
|
|
31315
|
+
"name": "FormfieldGroup",
|
|
31316
|
+
"module": "/src/components/formfieldgroup"
|
|
31327
31317
|
},
|
|
31328
|
-
"tagName": "mdc-
|
|
31329
|
-
"jsDoc": "/**\n *
|
|
31330
|
-
"customElement": true
|
|
31318
|
+
"tagName": "mdc-radiogroup",
|
|
31319
|
+
"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 */",
|
|
31320
|
+
"customElement": true,
|
|
31321
|
+
"slots": [
|
|
31322
|
+
{
|
|
31323
|
+
"description": "This is a default slot for checkbox or toggle components.",
|
|
31324
|
+
"name": "default",
|
|
31325
|
+
"inheritedFrom": {
|
|
31326
|
+
"name": "FormfieldGroup",
|
|
31327
|
+
"module": "src/components/formfieldgroup/formfieldgroup.component.ts"
|
|
31328
|
+
}
|
|
31329
|
+
}
|
|
31330
|
+
]
|
|
31331
31331
|
}
|
|
31332
31332
|
],
|
|
31333
31333
|
"exports": [
|
|
@@ -31335,8 +31335,8 @@
|
|
|
31335
31335
|
"kind": "js",
|
|
31336
31336
|
"name": "default",
|
|
31337
31337
|
"declaration": {
|
|
31338
|
-
"name": "
|
|
31339
|
-
"module": "components/
|
|
31338
|
+
"name": "RadioGroup",
|
|
31339
|
+
"module": "components/radiogroup/radiogroup.component.js"
|
|
31340
31340
|
}
|
|
31341
31341
|
}
|
|
31342
31342
|
]
|
|
@@ -36990,100 +36990,6 @@
|
|
|
36990
36990
|
}
|
|
36991
36991
|
]
|
|
36992
36992
|
},
|
|
36993
|
-
{
|
|
36994
|
-
"kind": "javascript-module",
|
|
36995
|
-
"path": "components/tablist/tablist.component.js",
|
|
36996
|
-
"declarations": [
|
|
36997
|
-
{
|
|
36998
|
-
"kind": "class",
|
|
36999
|
-
"description": "Tab list organizes tabs into a container.\n\nChildren of the tab list are `mdc-tab` elements, sent to the default slot.\n\nThe tabs can be navigated using the left/right arrow keys, and selected by clicking,\n or pressing the Enter and Space keys.\n\n**Implicit accessibility rules**\n\n- The element that serves as the container for the set of tabs has role `tablist`.\n- Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n- The active tab element has the state `aria-selected` set to `true`\n and all other tab elements have it set to `false`.\n\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n- The `tablist` element needs to have a label provided by `data-aria-label`.\n- Each element with role `tab` has the property `aria-controls`\n that should refer to its associated `tabpanel` element.\n- Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n- If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.",
|
|
37000
|
-
"name": "TabList",
|
|
37001
|
-
"cssProperties": [
|
|
37002
|
-
{
|
|
37003
|
-
"description": "Gap between tabs",
|
|
37004
|
-
"name": "--mdc-tablist-gap"
|
|
37005
|
-
},
|
|
37006
|
-
{
|
|
37007
|
-
"description": "Width of the tablist",
|
|
37008
|
-
"name": "--mdc-tablist-width"
|
|
37009
|
-
},
|
|
37010
|
-
{
|
|
37011
|
-
"description": "Margin value for the arrow button",
|
|
37012
|
-
"name": "--mdc-tablist-arrow-button-margin"
|
|
37013
|
-
}
|
|
37014
|
-
],
|
|
37015
|
-
"slots": [
|
|
37016
|
-
{
|
|
37017
|
-
"description": "slot for mdc-tab elements.",
|
|
37018
|
-
"name": "Default"
|
|
37019
|
-
}
|
|
37020
|
-
],
|
|
37021
|
-
"members": [
|
|
37022
|
-
{
|
|
37023
|
-
"kind": "field",
|
|
37024
|
-
"name": "activeTabId",
|
|
37025
|
-
"type": {
|
|
37026
|
-
"text": "string | undefined"
|
|
37027
|
-
},
|
|
37028
|
-
"description": "ID of the active tab, defaults to the first tab if not provided",
|
|
37029
|
-
"attribute": "active-tab-id",
|
|
37030
|
-
"reflects": true
|
|
37031
|
-
},
|
|
37032
|
-
{
|
|
37033
|
-
"kind": "field",
|
|
37034
|
-
"name": "dataAriaLabel",
|
|
37035
|
-
"type": {
|
|
37036
|
-
"text": "string | undefined"
|
|
37037
|
-
},
|
|
37038
|
-
"description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
|
|
37039
|
-
"attribute": "data-aria-label"
|
|
37040
|
-
}
|
|
37041
|
-
],
|
|
37042
|
-
"events": [
|
|
37043
|
-
{
|
|
37044
|
-
"description": "(React: onChange) This event is dispatched when the tab is selected. Event that fires when user changes the active tab. The function sent as the argument will receive the fired event and the new tab id can be fetched from event.detail.tabId. `(event: CustomEvent) => handleTabChange(event.detail.tabId);`",
|
|
37045
|
-
"name": "change",
|
|
37046
|
-
"reactName": "onChange"
|
|
37047
|
-
}
|
|
37048
|
-
],
|
|
37049
|
-
"attributes": [
|
|
37050
|
-
{
|
|
37051
|
-
"name": "active-tab-id",
|
|
37052
|
-
"type": {
|
|
37053
|
-
"text": "string | undefined"
|
|
37054
|
-
},
|
|
37055
|
-
"description": "ID of the active tab, defaults to the first tab if not provided",
|
|
37056
|
-
"fieldName": "activeTabId"
|
|
37057
|
-
},
|
|
37058
|
-
{
|
|
37059
|
-
"name": "data-aria-label",
|
|
37060
|
-
"type": {
|
|
37061
|
-
"text": "string | undefined"
|
|
37062
|
-
},
|
|
37063
|
-
"description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
|
|
37064
|
-
"fieldName": "dataAriaLabel"
|
|
37065
|
-
}
|
|
37066
|
-
],
|
|
37067
|
-
"superclass": {
|
|
37068
|
-
"name": "Component",
|
|
37069
|
-
"module": "/src/models"
|
|
37070
|
-
},
|
|
37071
|
-
"tagName": "mdc-tablist",
|
|
37072
|
-
"jsDoc": "/**\n * Tab list organizes tabs into a container.\n *\n * Children of the tab list are `mdc-tab` elements, sent to the default slot.\n *\n * The tabs can be navigated using the left/right arrow keys, and selected by clicking,\n * or pressing the Enter and Space keys.\n *\n * **Implicit accessibility rules**\n *\n * - The element that serves as the container for the set of tabs has role `tablist`.\n * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n * - The active tab element has the state `aria-selected` set to `true`\n * and all other tab elements have it set to `false`.\n *\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n * - The `tablist` element needs to have a label provided by `data-aria-label`.\n * - Each element with role `tab` has the property `aria-controls`\n * that should refer to its associated `tabpanel` element.\n * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n * - If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.\n *\n * @tagname mdc-tablist\n *\n * @dependency mdc-tab\n * @dependency mdc-button\n *\n * @event change - (React: onChange) This event is dispatched when the tab is selected.\n * Event that fires when user changes the active tab.\n * The function sent as the argument will receive the fired event\n * and the new tab id can be fetched from event.detail.tabId.\n *\n * `(event: CustomEvent) => handleTabChange(event.detail.tabId);`\n *\n * @slot Default slot for mdc-tab elements.\n *\n * @cssproperty --mdc-tablist-gap - Gap between tabs\n * @cssproperty --mdc-tablist-width - Width of the tablist\n * @cssproperty --mdc-tablist-arrow-button-margin - Margin value for the arrow button\n */",
|
|
37073
|
-
"customElement": true
|
|
37074
|
-
}
|
|
37075
|
-
],
|
|
37076
|
-
"exports": [
|
|
37077
|
-
{
|
|
37078
|
-
"kind": "js",
|
|
37079
|
-
"name": "default",
|
|
37080
|
-
"declaration": {
|
|
37081
|
-
"name": "TabList",
|
|
37082
|
-
"module": "components/tablist/tablist.component.js"
|
|
37083
|
-
}
|
|
37084
|
-
}
|
|
37085
|
-
]
|
|
37086
|
-
},
|
|
37087
36993
|
{
|
|
37088
36994
|
"kind": "javascript-module",
|
|
37089
36995
|
"path": "components/text/text.component.js",
|
|
@@ -38080,6 +37986,100 @@
|
|
|
38080
37986
|
}
|
|
38081
37987
|
]
|
|
38082
37988
|
},
|
|
37989
|
+
{
|
|
37990
|
+
"kind": "javascript-module",
|
|
37991
|
+
"path": "components/tablist/tablist.component.js",
|
|
37992
|
+
"declarations": [
|
|
37993
|
+
{
|
|
37994
|
+
"kind": "class",
|
|
37995
|
+
"description": "Tab list organizes tabs into a container.\n\nChildren of the tab list are `mdc-tab` elements, sent to the default slot.\n\nThe tabs can be navigated using the left/right arrow keys, and selected by clicking,\n or pressing the Enter and Space keys.\n\n**Implicit accessibility rules**\n\n- The element that serves as the container for the set of tabs has role `tablist`.\n- Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n- The active tab element has the state `aria-selected` set to `true`\n and all other tab elements have it set to `false`.\n\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n- The `tablist` element needs to have a label provided by `data-aria-label`.\n- Each element with role `tab` has the property `aria-controls`\n that should refer to its associated `tabpanel` element.\n- Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n- If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.",
|
|
37996
|
+
"name": "TabList",
|
|
37997
|
+
"cssProperties": [
|
|
37998
|
+
{
|
|
37999
|
+
"description": "Gap between tabs",
|
|
38000
|
+
"name": "--mdc-tablist-gap"
|
|
38001
|
+
},
|
|
38002
|
+
{
|
|
38003
|
+
"description": "Width of the tablist",
|
|
38004
|
+
"name": "--mdc-tablist-width"
|
|
38005
|
+
},
|
|
38006
|
+
{
|
|
38007
|
+
"description": "Margin value for the arrow button",
|
|
38008
|
+
"name": "--mdc-tablist-arrow-button-margin"
|
|
38009
|
+
}
|
|
38010
|
+
],
|
|
38011
|
+
"slots": [
|
|
38012
|
+
{
|
|
38013
|
+
"description": "slot for mdc-tab elements.",
|
|
38014
|
+
"name": "Default"
|
|
38015
|
+
}
|
|
38016
|
+
],
|
|
38017
|
+
"members": [
|
|
38018
|
+
{
|
|
38019
|
+
"kind": "field",
|
|
38020
|
+
"name": "activeTabId",
|
|
38021
|
+
"type": {
|
|
38022
|
+
"text": "string | undefined"
|
|
38023
|
+
},
|
|
38024
|
+
"description": "ID of the active tab, defaults to the first tab if not provided",
|
|
38025
|
+
"attribute": "active-tab-id",
|
|
38026
|
+
"reflects": true
|
|
38027
|
+
},
|
|
38028
|
+
{
|
|
38029
|
+
"kind": "field",
|
|
38030
|
+
"name": "dataAriaLabel",
|
|
38031
|
+
"type": {
|
|
38032
|
+
"text": "string | undefined"
|
|
38033
|
+
},
|
|
38034
|
+
"description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
|
|
38035
|
+
"attribute": "data-aria-label"
|
|
38036
|
+
}
|
|
38037
|
+
],
|
|
38038
|
+
"events": [
|
|
38039
|
+
{
|
|
38040
|
+
"description": "(React: onChange) This event is dispatched when the tab is selected. Event that fires when user changes the active tab. The function sent as the argument will receive the fired event and the new tab id can be fetched from event.detail.tabId. `(event: CustomEvent) => handleTabChange(event.detail.tabId);`",
|
|
38041
|
+
"name": "change",
|
|
38042
|
+
"reactName": "onChange"
|
|
38043
|
+
}
|
|
38044
|
+
],
|
|
38045
|
+
"attributes": [
|
|
38046
|
+
{
|
|
38047
|
+
"name": "active-tab-id",
|
|
38048
|
+
"type": {
|
|
38049
|
+
"text": "string | undefined"
|
|
38050
|
+
},
|
|
38051
|
+
"description": "ID of the active tab, defaults to the first tab if not provided",
|
|
38052
|
+
"fieldName": "activeTabId"
|
|
38053
|
+
},
|
|
38054
|
+
{
|
|
38055
|
+
"name": "data-aria-label",
|
|
38056
|
+
"type": {
|
|
38057
|
+
"text": "string | undefined"
|
|
38058
|
+
},
|
|
38059
|
+
"description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
|
|
38060
|
+
"fieldName": "dataAriaLabel"
|
|
38061
|
+
}
|
|
38062
|
+
],
|
|
38063
|
+
"superclass": {
|
|
38064
|
+
"name": "Component",
|
|
38065
|
+
"module": "/src/models"
|
|
38066
|
+
},
|
|
38067
|
+
"tagName": "mdc-tablist",
|
|
38068
|
+
"jsDoc": "/**\n * Tab list organizes tabs into a container.\n *\n * Children of the tab list are `mdc-tab` elements, sent to the default slot.\n *\n * The tabs can be navigated using the left/right arrow keys, and selected by clicking,\n * or pressing the Enter and Space keys.\n *\n * **Implicit accessibility rules**\n *\n * - The element that serves as the container for the set of tabs has role `tablist`.\n * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n * - The active tab element has the state `aria-selected` set to `true`\n * and all other tab elements have it set to `false`.\n *\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n * - The `tablist` element needs to have a label provided by `data-aria-label`.\n * - Each element with role `tab` has the property `aria-controls`\n * that should refer to its associated `tabpanel` element.\n * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n * - If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.\n *\n * @tagname mdc-tablist\n *\n * @dependency mdc-tab\n * @dependency mdc-button\n *\n * @event change - (React: onChange) This event is dispatched when the tab is selected.\n * Event that fires when user changes the active tab.\n * The function sent as the argument will receive the fired event\n * and the new tab id can be fetched from event.detail.tabId.\n *\n * `(event: CustomEvent) => handleTabChange(event.detail.tabId);`\n *\n * @slot Default slot for mdc-tab elements.\n *\n * @cssproperty --mdc-tablist-gap - Gap between tabs\n * @cssproperty --mdc-tablist-width - Width of the tablist\n * @cssproperty --mdc-tablist-arrow-button-margin - Margin value for the arrow button\n */",
|
|
38069
|
+
"customElement": true
|
|
38070
|
+
}
|
|
38071
|
+
],
|
|
38072
|
+
"exports": [
|
|
38073
|
+
{
|
|
38074
|
+
"kind": "js",
|
|
38075
|
+
"name": "default",
|
|
38076
|
+
"declaration": {
|
|
38077
|
+
"name": "TabList",
|
|
38078
|
+
"module": "components/tablist/tablist.component.js"
|
|
38079
|
+
}
|
|
38080
|
+
}
|
|
38081
|
+
]
|
|
38082
|
+
},
|
|
38083
38083
|
{
|
|
38084
38084
|
"kind": "javascript-module",
|
|
38085
38085
|
"path": "components/themeprovider/themeprovider.component.js",
|