@momentum-design/components 0.122.8 → 0.122.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +354 -354
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +2 -2
- package/package.json +1 -1
|
@@ -4,169 +4,63 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "components/
|
|
7
|
+
"path": "components/accordionbutton/accordionbutton.component.js",
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "An accordion contains a header and body section with
|
|
12
|
-
"name": "
|
|
11
|
+
"description": "An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion button 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 do need any controls on your accordion heading, then it's advised to use `accordion` component.\n\nIf an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.",
|
|
12
|
+
"name": "AccordionButton",
|
|
13
13
|
"cssProperties": [
|
|
14
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
|
-
}
|
|
15
|
+
"description": "The border color of the accordion button.",
|
|
16
|
+
"name": "--mdc-accordionbutton-border-color"
|
|
21
17
|
},
|
|
22
18
|
{
|
|
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
|
-
}
|
|
19
|
+
"description": "The hover color of the accordion button.",
|
|
20
|
+
"name": "--mdc-accordionbutton-hover-color"
|
|
29
21
|
},
|
|
30
22
|
{
|
|
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
|
-
}
|
|
23
|
+
"description": "The active color of the accordion button.",
|
|
24
|
+
"name": "--mdc-accordionbutton-active-color"
|
|
37
25
|
},
|
|
38
26
|
{
|
|
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
|
-
}
|
|
27
|
+
"description": "The disabled color of the accordion button.",
|
|
28
|
+
"name": "--mdc-accordionbutton-disabled-color"
|
|
45
29
|
}
|
|
46
30
|
],
|
|
47
31
|
"cssParts": [
|
|
48
32
|
{
|
|
49
|
-
"description": "The body section of the accordion.",
|
|
50
|
-
"name": "body-section"
|
|
51
|
-
"inheritedFrom": {
|
|
52
|
-
"name": "AccordionButton",
|
|
53
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
54
|
-
}
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
"description": "The header section of the accordion.",
|
|
58
|
-
"name": "header-section",
|
|
59
|
-
"inheritedFrom": {
|
|
60
|
-
"name": "AccordionButton",
|
|
61
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
62
|
-
}
|
|
33
|
+
"description": "The body section of the accordion button.",
|
|
34
|
+
"name": "body-section"
|
|
63
35
|
},
|
|
64
36
|
{
|
|
65
|
-
"description": "The
|
|
66
|
-
"name": "
|
|
67
|
-
"inheritedFrom": {
|
|
68
|
-
"name": "AccordionButton",
|
|
69
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
70
|
-
}
|
|
37
|
+
"description": "The header button section of the accordion button.",
|
|
38
|
+
"name": "header-button-section"
|
|
71
39
|
},
|
|
72
40
|
{
|
|
73
|
-
"description": "The
|
|
74
|
-
"name": "
|
|
75
|
-
"inheritedFrom": {
|
|
76
|
-
"name": "AccordionButton",
|
|
77
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
78
|
-
}
|
|
41
|
+
"description": "The header section of the accordion button.",
|
|
42
|
+
"name": "header-section"
|
|
79
43
|
},
|
|
80
44
|
{
|
|
81
|
-
"description": "The
|
|
82
|
-
"name": "
|
|
45
|
+
"description": "The leading header of the accordion button.",
|
|
46
|
+
"name": "leading-header"
|
|
83
47
|
},
|
|
84
48
|
{
|
|
85
|
-
"description": "The header
|
|
86
|
-
"name": "header
|
|
87
|
-
"inheritedFrom": {
|
|
88
|
-
"name": "AccordionButton",
|
|
89
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
90
|
-
}
|
|
49
|
+
"description": "The trailing header of the accordion button.",
|
|
50
|
+
"name": "trailing-header"
|
|
91
51
|
},
|
|
92
52
|
{
|
|
93
53
|
"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
|
-
}
|
|
54
|
+
"name": "trailing-header__icon"
|
|
99
55
|
}
|
|
100
56
|
],
|
|
101
57
|
"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
58
|
{
|
|
111
59
|
"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
|
-
}
|
|
60
|
+
"name": "default"
|
|
117
61
|
}
|
|
118
62
|
],
|
|
119
63
|
"members": [
|
|
120
|
-
{
|
|
121
|
-
"kind": "field",
|
|
122
|
-
"name": "openButtonAriaLabel",
|
|
123
|
-
"type": {
|
|
124
|
-
"text": "string | undefined"
|
|
125
|
-
},
|
|
126
|
-
"description": "Aria-label attribute for the trigger button when accordion is collapsed.",
|
|
127
|
-
"attribute": "open-button-aria-label",
|
|
128
|
-
"reflects": true
|
|
129
|
-
},
|
|
130
|
-
{
|
|
131
|
-
"kind": "field",
|
|
132
|
-
"name": "closeButtonAriaLabel",
|
|
133
|
-
"type": {
|
|
134
|
-
"text": "string | undefined"
|
|
135
|
-
},
|
|
136
|
-
"description": "Aria-label attribute for the trigger button when accordion is expanded.",
|
|
137
|
-
"attribute": "close-button-aria-label",
|
|
138
|
-
"reflects": true
|
|
139
|
-
},
|
|
140
|
-
{
|
|
141
|
-
"kind": "method",
|
|
142
|
-
"name": "renderHeader",
|
|
143
|
-
"privacy": "protected",
|
|
144
|
-
"return": {
|
|
145
|
-
"type": {
|
|
146
|
-
"text": ""
|
|
147
|
-
}
|
|
148
|
-
},
|
|
149
|
-
"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.",
|
|
150
|
-
"inheritedFrom": {
|
|
151
|
-
"name": "AccordionButton",
|
|
152
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
153
|
-
}
|
|
154
|
-
},
|
|
155
|
-
{
|
|
156
|
-
"kind": "field",
|
|
157
|
-
"name": "disabled",
|
|
158
|
-
"type": {
|
|
159
|
-
"text": "boolean | undefined"
|
|
160
|
-
},
|
|
161
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
162
|
-
"default": "undefined",
|
|
163
|
-
"attribute": "disabled",
|
|
164
|
-
"reflects": true,
|
|
165
|
-
"inheritedFrom": {
|
|
166
|
-
"name": "DisabledMixin",
|
|
167
|
-
"module": "utils/mixins/DisabledMixin.js"
|
|
168
|
-
}
|
|
169
|
-
},
|
|
170
64
|
{
|
|
171
65
|
"kind": "field",
|
|
172
66
|
"name": "size",
|
|
@@ -176,11 +70,7 @@
|
|
|
176
70
|
"description": "The size of the accordion item.",
|
|
177
71
|
"default": "'small'",
|
|
178
72
|
"attribute": "size",
|
|
179
|
-
"reflects": true
|
|
180
|
-
"inheritedFrom": {
|
|
181
|
-
"name": "AccordionButton",
|
|
182
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
183
|
-
}
|
|
73
|
+
"reflects": true
|
|
184
74
|
},
|
|
185
75
|
{
|
|
186
76
|
"kind": "field",
|
|
@@ -191,11 +81,7 @@
|
|
|
191
81
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
192
82
|
"default": "'default'",
|
|
193
83
|
"attribute": "variant",
|
|
194
|
-
"reflects": true
|
|
195
|
-
"inheritedFrom": {
|
|
196
|
-
"name": "AccordionButton",
|
|
197
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
198
|
-
}
|
|
84
|
+
"reflects": true
|
|
199
85
|
},
|
|
200
86
|
{
|
|
201
87
|
"kind": "field",
|
|
@@ -206,11 +92,7 @@
|
|
|
206
92
|
"description": "The aria level of the accordion component.",
|
|
207
93
|
"default": "3",
|
|
208
94
|
"attribute": "data-aria-level",
|
|
209
|
-
"reflects": true
|
|
210
|
-
"inheritedFrom": {
|
|
211
|
-
"name": "AccordionButton",
|
|
212
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
213
|
-
}
|
|
95
|
+
"reflects": true
|
|
214
96
|
},
|
|
215
97
|
{
|
|
216
98
|
"kind": "field",
|
|
@@ -221,11 +103,7 @@
|
|
|
221
103
|
"description": "The visibility of the accordion button.",
|
|
222
104
|
"default": "false",
|
|
223
105
|
"attribute": "expanded",
|
|
224
|
-
"reflects": true
|
|
225
|
-
"inheritedFrom": {
|
|
226
|
-
"name": "AccordionButton",
|
|
227
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
228
|
-
}
|
|
106
|
+
"reflects": true
|
|
229
107
|
},
|
|
230
108
|
{
|
|
231
109
|
"kind": "field",
|
|
@@ -235,11 +113,7 @@
|
|
|
235
113
|
},
|
|
236
114
|
"description": "The header text of the accordion item.",
|
|
237
115
|
"attribute": "header-text",
|
|
238
|
-
"reflects": true
|
|
239
|
-
"inheritedFrom": {
|
|
240
|
-
"name": "AccordionButton",
|
|
241
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
242
|
-
}
|
|
116
|
+
"reflects": true
|
|
243
117
|
},
|
|
244
118
|
{
|
|
245
119
|
"kind": "field",
|
|
@@ -248,11 +122,7 @@
|
|
|
248
122
|
"text": "IconNames | undefined"
|
|
249
123
|
},
|
|
250
124
|
"description": "The leading icon that is displayed before the header text.",
|
|
251
|
-
"attribute": "prefix-icon"
|
|
252
|
-
"inheritedFrom": {
|
|
253
|
-
"name": "AccordionButton",
|
|
254
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
255
|
-
}
|
|
125
|
+
"attribute": "prefix-icon"
|
|
256
126
|
},
|
|
257
127
|
{
|
|
258
128
|
"kind": "method",
|
|
@@ -263,11 +133,7 @@
|
|
|
263
133
|
"text": "void"
|
|
264
134
|
}
|
|
265
135
|
},
|
|
266
|
-
"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."
|
|
267
|
-
"inheritedFrom": {
|
|
268
|
-
"name": "AccordionButton",
|
|
269
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
270
|
-
}
|
|
136
|
+
"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."
|
|
271
137
|
},
|
|
272
138
|
{
|
|
273
139
|
"kind": "method",
|
|
@@ -278,11 +144,7 @@
|
|
|
278
144
|
"text": "void"
|
|
279
145
|
}
|
|
280
146
|
},
|
|
281
|
-
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
|
|
282
|
-
"inheritedFrom": {
|
|
283
|
-
"name": "AccordionButton",
|
|
284
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
285
|
-
}
|
|
147
|
+
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
|
|
286
148
|
},
|
|
287
149
|
{
|
|
288
150
|
"kind": "method",
|
|
@@ -302,11 +164,7 @@
|
|
|
302
164
|
"description": "The KeyboardEvent fired."
|
|
303
165
|
}
|
|
304
166
|
],
|
|
305
|
-
"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."
|
|
306
|
-
"inheritedFrom": {
|
|
307
|
-
"name": "AccordionButton",
|
|
308
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
309
|
-
}
|
|
167
|
+
"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."
|
|
310
168
|
},
|
|
311
169
|
{
|
|
312
170
|
"kind": "method",
|
|
@@ -325,11 +183,7 @@
|
|
|
325
183
|
"text": "IconNames"
|
|
326
184
|
}
|
|
327
185
|
}
|
|
328
|
-
]
|
|
329
|
-
"inheritedFrom": {
|
|
330
|
-
"name": "AccordionButton",
|
|
331
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
332
|
-
}
|
|
186
|
+
]
|
|
333
187
|
},
|
|
334
188
|
{
|
|
335
189
|
"kind": "method",
|
|
@@ -339,10 +193,16 @@
|
|
|
339
193
|
"type": {
|
|
340
194
|
"text": "TemplateResult | typeof nothing"
|
|
341
195
|
}
|
|
342
|
-
}
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
196
|
+
}
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
"kind": "method",
|
|
200
|
+
"name": "renderHeader",
|
|
201
|
+
"privacy": "protected",
|
|
202
|
+
"return": {
|
|
203
|
+
"type": {
|
|
204
|
+
"text": "TemplateResult"
|
|
205
|
+
}
|
|
346
206
|
}
|
|
347
207
|
},
|
|
348
208
|
{
|
|
@@ -354,11 +214,7 @@
|
|
|
354
214
|
"text": ""
|
|
355
215
|
}
|
|
356
216
|
},
|
|
357
|
-
"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."
|
|
358
|
-
"inheritedFrom": {
|
|
359
|
-
"name": "AccordionButton",
|
|
360
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
361
|
-
}
|
|
217
|
+
"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."
|
|
362
218
|
},
|
|
363
219
|
{
|
|
364
220
|
"kind": "method",
|
|
@@ -368,54 +224,32 @@
|
|
|
368
224
|
"type": {
|
|
369
225
|
"text": "TemplateResult | typeof nothing"
|
|
370
226
|
}
|
|
371
|
-
},
|
|
372
|
-
"inheritedFrom": {
|
|
373
|
-
"name": "AccordionButton",
|
|
374
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
375
227
|
}
|
|
376
|
-
}
|
|
377
|
-
],
|
|
378
|
-
"events": [
|
|
379
|
-
{
|
|
380
|
-
"description": "(React: onShown) This event is triggered when the accordion is expanded.",
|
|
381
|
-
"name": "shown",
|
|
382
|
-
"reactName": "onShown",
|
|
383
|
-
"inheritedFrom": {
|
|
384
|
-
"name": "AccordionButton",
|
|
385
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
386
|
-
}
|
|
387
|
-
}
|
|
388
|
-
],
|
|
389
|
-
"attributes": [
|
|
390
|
-
{
|
|
391
|
-
"name": "open-button-aria-label",
|
|
392
|
-
"type": {
|
|
393
|
-
"text": "string | undefined"
|
|
394
|
-
},
|
|
395
|
-
"description": "Aria-label attribute for the trigger button when accordion is collapsed.",
|
|
396
|
-
"fieldName": "openButtonAriaLabel"
|
|
397
|
-
},
|
|
398
|
-
{
|
|
399
|
-
"name": "close-button-aria-label",
|
|
400
|
-
"type": {
|
|
401
|
-
"text": "string | undefined"
|
|
402
|
-
},
|
|
403
|
-
"description": "Aria-label attribute for the trigger button when accordion is expanded.",
|
|
404
|
-
"fieldName": "closeButtonAriaLabel"
|
|
405
228
|
},
|
|
406
229
|
{
|
|
230
|
+
"kind": "field",
|
|
407
231
|
"name": "disabled",
|
|
408
232
|
"type": {
|
|
409
233
|
"text": "boolean | undefined"
|
|
410
234
|
},
|
|
411
235
|
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
412
236
|
"default": "undefined",
|
|
413
|
-
"
|
|
237
|
+
"attribute": "disabled",
|
|
238
|
+
"reflects": true,
|
|
414
239
|
"inheritedFrom": {
|
|
415
240
|
"name": "DisabledMixin",
|
|
416
|
-
"module": "
|
|
241
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
417
242
|
}
|
|
418
|
-
}
|
|
243
|
+
}
|
|
244
|
+
],
|
|
245
|
+
"events": [
|
|
246
|
+
{
|
|
247
|
+
"description": "(React: onShown) This event is triggered when the accordion button is expanded.",
|
|
248
|
+
"name": "shown",
|
|
249
|
+
"reactName": "onShown"
|
|
250
|
+
}
|
|
251
|
+
],
|
|
252
|
+
"attributes": [
|
|
419
253
|
{
|
|
420
254
|
"name": "size",
|
|
421
255
|
"type": {
|
|
@@ -423,11 +257,7 @@
|
|
|
423
257
|
},
|
|
424
258
|
"description": "The size of the accordion item.",
|
|
425
259
|
"default": "'small'",
|
|
426
|
-
"fieldName": "size"
|
|
427
|
-
"inheritedFrom": {
|
|
428
|
-
"name": "AccordionButton",
|
|
429
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
430
|
-
}
|
|
260
|
+
"fieldName": "size"
|
|
431
261
|
},
|
|
432
262
|
{
|
|
433
263
|
"name": "variant",
|
|
@@ -436,11 +266,7 @@
|
|
|
436
266
|
},
|
|
437
267
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
438
268
|
"default": "'default'",
|
|
439
|
-
"fieldName": "variant"
|
|
440
|
-
"inheritedFrom": {
|
|
441
|
-
"name": "AccordionButton",
|
|
442
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
443
|
-
}
|
|
269
|
+
"fieldName": "variant"
|
|
444
270
|
},
|
|
445
271
|
{
|
|
446
272
|
"name": "data-aria-level",
|
|
@@ -449,11 +275,7 @@
|
|
|
449
275
|
},
|
|
450
276
|
"description": "The aria level of the accordion component.",
|
|
451
277
|
"default": "3",
|
|
452
|
-
"fieldName": "dataAriaLevel"
|
|
453
|
-
"inheritedFrom": {
|
|
454
|
-
"name": "AccordionButton",
|
|
455
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
456
|
-
}
|
|
278
|
+
"fieldName": "dataAriaLevel"
|
|
457
279
|
},
|
|
458
280
|
{
|
|
459
281
|
"name": "expanded",
|
|
@@ -462,11 +284,7 @@
|
|
|
462
284
|
},
|
|
463
285
|
"description": "The visibility of the accordion button.",
|
|
464
286
|
"default": "false",
|
|
465
|
-
"fieldName": "expanded"
|
|
466
|
-
"inheritedFrom": {
|
|
467
|
-
"name": "AccordionButton",
|
|
468
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
469
|
-
}
|
|
287
|
+
"fieldName": "expanded"
|
|
470
288
|
},
|
|
471
289
|
{
|
|
472
290
|
"name": "header-text",
|
|
@@ -474,11 +292,7 @@
|
|
|
474
292
|
"text": "string | undefined"
|
|
475
293
|
},
|
|
476
294
|
"description": "The header text of the accordion item.",
|
|
477
|
-
"fieldName": "headerText"
|
|
478
|
-
"inheritedFrom": {
|
|
479
|
-
"name": "AccordionButton",
|
|
480
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
481
|
-
}
|
|
295
|
+
"fieldName": "headerText"
|
|
482
296
|
},
|
|
483
297
|
{
|
|
484
298
|
"name": "prefix-icon",
|
|
@@ -486,19 +300,34 @@
|
|
|
486
300
|
"text": "IconNames | undefined"
|
|
487
301
|
},
|
|
488
302
|
"description": "The leading icon that is displayed before the header text.",
|
|
489
|
-
"fieldName": "prefixIcon"
|
|
303
|
+
"fieldName": "prefixIcon"
|
|
304
|
+
},
|
|
305
|
+
{
|
|
306
|
+
"name": "disabled",
|
|
307
|
+
"type": {
|
|
308
|
+
"text": "boolean | undefined"
|
|
309
|
+
},
|
|
310
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
311
|
+
"default": "undefined",
|
|
312
|
+
"fieldName": "disabled",
|
|
490
313
|
"inheritedFrom": {
|
|
491
|
-
"name": "
|
|
492
|
-
"module": "src/
|
|
314
|
+
"name": "DisabledMixin",
|
|
315
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
493
316
|
}
|
|
494
317
|
}
|
|
495
318
|
],
|
|
319
|
+
"mixins": [
|
|
320
|
+
{
|
|
321
|
+
"name": "DisabledMixin",
|
|
322
|
+
"module": "/src/utils/mixins/DisabledMixin"
|
|
323
|
+
}
|
|
324
|
+
],
|
|
496
325
|
"superclass": {
|
|
497
|
-
"name": "
|
|
498
|
-
"module": "/src/
|
|
326
|
+
"name": "Component",
|
|
327
|
+
"module": "/src/models"
|
|
499
328
|
},
|
|
500
|
-
"tagName": "mdc-
|
|
501
|
-
"jsDoc": "/**\n * An accordion contains a header and body section with
|
|
329
|
+
"tagName": "mdc-accordionbutton",
|
|
330
|
+
"jsDoc": "/**\n * An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion button 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 do need any controls on your accordion heading, then it's advised to use `accordion` component.\n *\n * If an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.\n *\n * @tagname mdc-accordionbutton\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\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 button is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion button.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.\n *\n * @csspart body-section - The body section of the accordion button.\n * @csspart header-button-section - The header button section of the accordion button.\n * @csspart header-section - The header section of the accordion button.\n * @csspart leading-header - The leading header of the accordion button.\n * @csspart trailing-header - The trailing header of the accordion button.\n * @csspart trailing-header__icon - The trailing header icon of the accordion button.\n */",
|
|
502
331
|
"customElement": true
|
|
503
332
|
}
|
|
504
333
|
],
|
|
@@ -507,8 +336,8 @@
|
|
|
507
336
|
"kind": "js",
|
|
508
337
|
"name": "default",
|
|
509
338
|
"declaration": {
|
|
510
|
-
"name": "
|
|
511
|
-
"module": "components/
|
|
339
|
+
"name": "AccordionButton",
|
|
340
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
512
341
|
}
|
|
513
342
|
}
|
|
514
343
|
]
|
|
@@ -666,63 +495,169 @@
|
|
|
666
495
|
},
|
|
667
496
|
{
|
|
668
497
|
"kind": "javascript-module",
|
|
669
|
-
"path": "components/
|
|
498
|
+
"path": "components/accordion/accordion.component.js",
|
|
670
499
|
"declarations": [
|
|
671
500
|
{
|
|
672
501
|
"kind": "class",
|
|
673
|
-
"description": "An accordion
|
|
674
|
-
"name": "
|
|
502
|
+
"description": "An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n- Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n- Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.",
|
|
503
|
+
"name": "Accordion",
|
|
675
504
|
"cssProperties": [
|
|
676
505
|
{
|
|
677
|
-
"description": "The border color of the accordion
|
|
678
|
-
"name": "--mdc-accordionbutton-border-color"
|
|
506
|
+
"description": "The border color of the accordion.",
|
|
507
|
+
"name": "--mdc-accordionbutton-border-color",
|
|
508
|
+
"inheritedFrom": {
|
|
509
|
+
"name": "AccordionButton",
|
|
510
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
511
|
+
}
|
|
679
512
|
},
|
|
680
513
|
{
|
|
681
|
-
"description": "The hover color of the accordion
|
|
682
|
-
"name": "--mdc-accordionbutton-hover-color"
|
|
514
|
+
"description": "The hover color of the accordion.",
|
|
515
|
+
"name": "--mdc-accordionbutton-hover-color",
|
|
516
|
+
"inheritedFrom": {
|
|
517
|
+
"name": "AccordionButton",
|
|
518
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
519
|
+
}
|
|
683
520
|
},
|
|
684
521
|
{
|
|
685
|
-
"description": "The active color of the accordion
|
|
686
|
-
"name": "--mdc-accordionbutton-active-color"
|
|
522
|
+
"description": "The active color of the accordion.",
|
|
523
|
+
"name": "--mdc-accordionbutton-active-color",
|
|
524
|
+
"inheritedFrom": {
|
|
525
|
+
"name": "AccordionButton",
|
|
526
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
527
|
+
}
|
|
687
528
|
},
|
|
688
529
|
{
|
|
689
|
-
"description": "The disabled color of the accordion
|
|
690
|
-
"name": "--mdc-accordionbutton-disabled-color"
|
|
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
|
+
}
|
|
691
536
|
}
|
|
692
537
|
],
|
|
693
538
|
"cssParts": [
|
|
694
539
|
{
|
|
695
|
-
"description": "The body section of the accordion
|
|
696
|
-
"name": "body-section"
|
|
540
|
+
"description": "The body section of the accordion.",
|
|
541
|
+
"name": "body-section",
|
|
542
|
+
"inheritedFrom": {
|
|
543
|
+
"name": "AccordionButton",
|
|
544
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
545
|
+
}
|
|
546
|
+
},
|
|
547
|
+
{
|
|
548
|
+
"description": "The header section of the accordion.",
|
|
549
|
+
"name": "header-section",
|
|
550
|
+
"inheritedFrom": {
|
|
551
|
+
"name": "AccordionButton",
|
|
552
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
553
|
+
}
|
|
554
|
+
},
|
|
555
|
+
{
|
|
556
|
+
"description": "The leading header of the accordion.",
|
|
557
|
+
"name": "leading-header",
|
|
558
|
+
"inheritedFrom": {
|
|
559
|
+
"name": "AccordionButton",
|
|
560
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
561
|
+
}
|
|
562
|
+
},
|
|
563
|
+
{
|
|
564
|
+
"description": "The trailing header of the accordion.",
|
|
565
|
+
"name": "trailing-header",
|
|
566
|
+
"inheritedFrom": {
|
|
567
|
+
"name": "AccordionButton",
|
|
568
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
569
|
+
}
|
|
570
|
+
},
|
|
571
|
+
{
|
|
572
|
+
"description": "The trailing header button of the accordion.",
|
|
573
|
+
"name": "trailing-header__button"
|
|
697
574
|
},
|
|
698
575
|
{
|
|
699
576
|
"description": "The header button section of the accordion button.",
|
|
700
|
-
"name": "header-button-section"
|
|
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"
|
|
701
596
|
},
|
|
702
597
|
{
|
|
703
|
-
"description": "The
|
|
704
|
-
"name": "
|
|
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": "field",
|
|
613
|
+
"name": "openButtonAriaLabel",
|
|
614
|
+
"type": {
|
|
615
|
+
"text": "string | undefined"
|
|
616
|
+
},
|
|
617
|
+
"description": "Aria-label attribute for the trigger button when accordion is collapsed.",
|
|
618
|
+
"attribute": "open-button-aria-label",
|
|
619
|
+
"reflects": true
|
|
705
620
|
},
|
|
706
621
|
{
|
|
707
|
-
"
|
|
708
|
-
"name": "
|
|
622
|
+
"kind": "field",
|
|
623
|
+
"name": "closeButtonAriaLabel",
|
|
624
|
+
"type": {
|
|
625
|
+
"text": "string | undefined"
|
|
626
|
+
},
|
|
627
|
+
"description": "Aria-label attribute for the trigger button when accordion is expanded.",
|
|
628
|
+
"attribute": "close-button-aria-label",
|
|
629
|
+
"reflects": true
|
|
709
630
|
},
|
|
710
631
|
{
|
|
711
|
-
"
|
|
712
|
-
"name": "
|
|
632
|
+
"kind": "method",
|
|
633
|
+
"name": "renderHeader",
|
|
634
|
+
"privacy": "protected",
|
|
635
|
+
"return": {
|
|
636
|
+
"type": {
|
|
637
|
+
"text": ""
|
|
638
|
+
}
|
|
639
|
+
},
|
|
640
|
+
"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.",
|
|
641
|
+
"inheritedFrom": {
|
|
642
|
+
"name": "AccordionButton",
|
|
643
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
644
|
+
}
|
|
713
645
|
},
|
|
714
646
|
{
|
|
715
|
-
"
|
|
716
|
-
"name": "
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
"
|
|
722
|
-
"
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
647
|
+
"kind": "field",
|
|
648
|
+
"name": "disabled",
|
|
649
|
+
"type": {
|
|
650
|
+
"text": "boolean | undefined"
|
|
651
|
+
},
|
|
652
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
653
|
+
"default": "undefined",
|
|
654
|
+
"attribute": "disabled",
|
|
655
|
+
"reflects": true,
|
|
656
|
+
"inheritedFrom": {
|
|
657
|
+
"name": "AccordionButton",
|
|
658
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
659
|
+
}
|
|
660
|
+
},
|
|
726
661
|
{
|
|
727
662
|
"kind": "field",
|
|
728
663
|
"name": "size",
|
|
@@ -732,7 +667,11 @@
|
|
|
732
667
|
"description": "The size of the accordion item.",
|
|
733
668
|
"default": "'small'",
|
|
734
669
|
"attribute": "size",
|
|
735
|
-
"reflects": true
|
|
670
|
+
"reflects": true,
|
|
671
|
+
"inheritedFrom": {
|
|
672
|
+
"name": "AccordionButton",
|
|
673
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
674
|
+
}
|
|
736
675
|
},
|
|
737
676
|
{
|
|
738
677
|
"kind": "field",
|
|
@@ -743,7 +682,11 @@
|
|
|
743
682
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
744
683
|
"default": "'default'",
|
|
745
684
|
"attribute": "variant",
|
|
746
|
-
"reflects": true
|
|
685
|
+
"reflects": true,
|
|
686
|
+
"inheritedFrom": {
|
|
687
|
+
"name": "AccordionButton",
|
|
688
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
689
|
+
}
|
|
747
690
|
},
|
|
748
691
|
{
|
|
749
692
|
"kind": "field",
|
|
@@ -754,7 +697,11 @@
|
|
|
754
697
|
"description": "The aria level of the accordion component.",
|
|
755
698
|
"default": "3",
|
|
756
699
|
"attribute": "data-aria-level",
|
|
757
|
-
"reflects": true
|
|
700
|
+
"reflects": true,
|
|
701
|
+
"inheritedFrom": {
|
|
702
|
+
"name": "AccordionButton",
|
|
703
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
704
|
+
}
|
|
758
705
|
},
|
|
759
706
|
{
|
|
760
707
|
"kind": "field",
|
|
@@ -765,7 +712,11 @@
|
|
|
765
712
|
"description": "The visibility of the accordion button.",
|
|
766
713
|
"default": "false",
|
|
767
714
|
"attribute": "expanded",
|
|
768
|
-
"reflects": true
|
|
715
|
+
"reflects": true,
|
|
716
|
+
"inheritedFrom": {
|
|
717
|
+
"name": "AccordionButton",
|
|
718
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
719
|
+
}
|
|
769
720
|
},
|
|
770
721
|
{
|
|
771
722
|
"kind": "field",
|
|
@@ -775,7 +726,11 @@
|
|
|
775
726
|
},
|
|
776
727
|
"description": "The header text of the accordion item.",
|
|
777
728
|
"attribute": "header-text",
|
|
778
|
-
"reflects": true
|
|
729
|
+
"reflects": true,
|
|
730
|
+
"inheritedFrom": {
|
|
731
|
+
"name": "AccordionButton",
|
|
732
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
733
|
+
}
|
|
779
734
|
},
|
|
780
735
|
{
|
|
781
736
|
"kind": "field",
|
|
@@ -784,7 +739,11 @@
|
|
|
784
739
|
"text": "IconNames | undefined"
|
|
785
740
|
},
|
|
786
741
|
"description": "The leading icon that is displayed before the header text.",
|
|
787
|
-
"attribute": "prefix-icon"
|
|
742
|
+
"attribute": "prefix-icon",
|
|
743
|
+
"inheritedFrom": {
|
|
744
|
+
"name": "AccordionButton",
|
|
745
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
746
|
+
}
|
|
788
747
|
},
|
|
789
748
|
{
|
|
790
749
|
"kind": "method",
|
|
@@ -795,7 +754,11 @@
|
|
|
795
754
|
"text": "void"
|
|
796
755
|
}
|
|
797
756
|
},
|
|
798
|
-
"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."
|
|
757
|
+
"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.",
|
|
758
|
+
"inheritedFrom": {
|
|
759
|
+
"name": "AccordionButton",
|
|
760
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
761
|
+
}
|
|
799
762
|
},
|
|
800
763
|
{
|
|
801
764
|
"kind": "method",
|
|
@@ -806,7 +769,11 @@
|
|
|
806
769
|
"text": "void"
|
|
807
770
|
}
|
|
808
771
|
},
|
|
809
|
-
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
|
|
772
|
+
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state.",
|
|
773
|
+
"inheritedFrom": {
|
|
774
|
+
"name": "AccordionButton",
|
|
775
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
776
|
+
}
|
|
810
777
|
},
|
|
811
778
|
{
|
|
812
779
|
"kind": "method",
|
|
@@ -826,7 +793,11 @@
|
|
|
826
793
|
"description": "The KeyboardEvent fired."
|
|
827
794
|
}
|
|
828
795
|
],
|
|
829
|
-
"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."
|
|
796
|
+
"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.",
|
|
797
|
+
"inheritedFrom": {
|
|
798
|
+
"name": "AccordionButton",
|
|
799
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
800
|
+
}
|
|
830
801
|
},
|
|
831
802
|
{
|
|
832
803
|
"kind": "method",
|
|
@@ -845,7 +816,11 @@
|
|
|
845
816
|
"text": "IconNames"
|
|
846
817
|
}
|
|
847
818
|
}
|
|
848
|
-
]
|
|
819
|
+
],
|
|
820
|
+
"inheritedFrom": {
|
|
821
|
+
"name": "AccordionButton",
|
|
822
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
823
|
+
}
|
|
849
824
|
},
|
|
850
825
|
{
|
|
851
826
|
"kind": "method",
|
|
@@ -855,16 +830,10 @@
|
|
|
855
830
|
"type": {
|
|
856
831
|
"text": "TemplateResult | typeof nothing"
|
|
857
832
|
}
|
|
858
|
-
}
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
"name": "renderHeader",
|
|
863
|
-
"privacy": "protected",
|
|
864
|
-
"return": {
|
|
865
|
-
"type": {
|
|
866
|
-
"text": "TemplateResult"
|
|
867
|
-
}
|
|
833
|
+
},
|
|
834
|
+
"inheritedFrom": {
|
|
835
|
+
"name": "AccordionButton",
|
|
836
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
868
837
|
}
|
|
869
838
|
},
|
|
870
839
|
{
|
|
@@ -876,7 +845,11 @@
|
|
|
876
845
|
"text": ""
|
|
877
846
|
}
|
|
878
847
|
},
|
|
879
|
-
"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."
|
|
848
|
+
"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.",
|
|
849
|
+
"inheritedFrom": {
|
|
850
|
+
"name": "AccordionButton",
|
|
851
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
852
|
+
}
|
|
880
853
|
},
|
|
881
854
|
{
|
|
882
855
|
"kind": "method",
|
|
@@ -886,32 +859,54 @@
|
|
|
886
859
|
"type": {
|
|
887
860
|
"text": "TemplateResult | typeof nothing"
|
|
888
861
|
}
|
|
889
|
-
}
|
|
890
|
-
},
|
|
891
|
-
{
|
|
892
|
-
"kind": "field",
|
|
893
|
-
"name": "disabled",
|
|
894
|
-
"type": {
|
|
895
|
-
"text": "boolean | undefined"
|
|
896
862
|
},
|
|
897
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
898
|
-
"default": "undefined",
|
|
899
|
-
"attribute": "disabled",
|
|
900
|
-
"reflects": true,
|
|
901
863
|
"inheritedFrom": {
|
|
902
|
-
"name": "
|
|
903
|
-
"module": "
|
|
864
|
+
"name": "AccordionButton",
|
|
865
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
904
866
|
}
|
|
905
867
|
}
|
|
906
868
|
],
|
|
907
869
|
"events": [
|
|
908
870
|
{
|
|
909
|
-
"description": "(React: onShown) This event is triggered when the accordion
|
|
871
|
+
"description": "(React: onShown) This event is triggered when the accordion is expanded.",
|
|
910
872
|
"name": "shown",
|
|
911
|
-
"reactName": "onShown"
|
|
873
|
+
"reactName": "onShown",
|
|
874
|
+
"inheritedFrom": {
|
|
875
|
+
"name": "AccordionButton",
|
|
876
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
877
|
+
}
|
|
912
878
|
}
|
|
913
879
|
],
|
|
914
880
|
"attributes": [
|
|
881
|
+
{
|
|
882
|
+
"name": "open-button-aria-label",
|
|
883
|
+
"type": {
|
|
884
|
+
"text": "string | undefined"
|
|
885
|
+
},
|
|
886
|
+
"description": "Aria-label attribute for the trigger button when accordion is collapsed.",
|
|
887
|
+
"fieldName": "openButtonAriaLabel"
|
|
888
|
+
},
|
|
889
|
+
{
|
|
890
|
+
"name": "close-button-aria-label",
|
|
891
|
+
"type": {
|
|
892
|
+
"text": "string | undefined"
|
|
893
|
+
},
|
|
894
|
+
"description": "Aria-label attribute for the trigger button when accordion is expanded.",
|
|
895
|
+
"fieldName": "closeButtonAriaLabel"
|
|
896
|
+
},
|
|
897
|
+
{
|
|
898
|
+
"name": "disabled",
|
|
899
|
+
"type": {
|
|
900
|
+
"text": "boolean | undefined"
|
|
901
|
+
},
|
|
902
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
903
|
+
"default": "undefined",
|
|
904
|
+
"fieldName": "disabled",
|
|
905
|
+
"inheritedFrom": {
|
|
906
|
+
"name": "AccordionButton",
|
|
907
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
908
|
+
}
|
|
909
|
+
},
|
|
915
910
|
{
|
|
916
911
|
"name": "size",
|
|
917
912
|
"type": {
|
|
@@ -919,7 +914,11 @@
|
|
|
919
914
|
},
|
|
920
915
|
"description": "The size of the accordion item.",
|
|
921
916
|
"default": "'small'",
|
|
922
|
-
"fieldName": "size"
|
|
917
|
+
"fieldName": "size",
|
|
918
|
+
"inheritedFrom": {
|
|
919
|
+
"name": "AccordionButton",
|
|
920
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
921
|
+
}
|
|
923
922
|
},
|
|
924
923
|
{
|
|
925
924
|
"name": "variant",
|
|
@@ -928,7 +927,11 @@
|
|
|
928
927
|
},
|
|
929
928
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
930
929
|
"default": "'default'",
|
|
931
|
-
"fieldName": "variant"
|
|
930
|
+
"fieldName": "variant",
|
|
931
|
+
"inheritedFrom": {
|
|
932
|
+
"name": "AccordionButton",
|
|
933
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
934
|
+
}
|
|
932
935
|
},
|
|
933
936
|
{
|
|
934
937
|
"name": "data-aria-level",
|
|
@@ -937,7 +940,11 @@
|
|
|
937
940
|
},
|
|
938
941
|
"description": "The aria level of the accordion component.",
|
|
939
942
|
"default": "3",
|
|
940
|
-
"fieldName": "dataAriaLevel"
|
|
943
|
+
"fieldName": "dataAriaLevel",
|
|
944
|
+
"inheritedFrom": {
|
|
945
|
+
"name": "AccordionButton",
|
|
946
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
947
|
+
}
|
|
941
948
|
},
|
|
942
949
|
{
|
|
943
950
|
"name": "expanded",
|
|
@@ -946,7 +953,11 @@
|
|
|
946
953
|
},
|
|
947
954
|
"description": "The visibility of the accordion button.",
|
|
948
955
|
"default": "false",
|
|
949
|
-
"fieldName": "expanded"
|
|
956
|
+
"fieldName": "expanded",
|
|
957
|
+
"inheritedFrom": {
|
|
958
|
+
"name": "AccordionButton",
|
|
959
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
960
|
+
}
|
|
950
961
|
},
|
|
951
962
|
{
|
|
952
963
|
"name": "header-text",
|
|
@@ -954,7 +965,11 @@
|
|
|
954
965
|
"text": "string | undefined"
|
|
955
966
|
},
|
|
956
967
|
"description": "The header text of the accordion item.",
|
|
957
|
-
"fieldName": "headerText"
|
|
968
|
+
"fieldName": "headerText",
|
|
969
|
+
"inheritedFrom": {
|
|
970
|
+
"name": "AccordionButton",
|
|
971
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
972
|
+
}
|
|
958
973
|
},
|
|
959
974
|
{
|
|
960
975
|
"name": "prefix-icon",
|
|
@@ -962,34 +977,19 @@
|
|
|
962
977
|
"text": "IconNames | undefined"
|
|
963
978
|
},
|
|
964
979
|
"description": "The leading icon that is displayed before the header text.",
|
|
965
|
-
"fieldName": "prefixIcon"
|
|
966
|
-
},
|
|
967
|
-
{
|
|
968
|
-
"name": "disabled",
|
|
969
|
-
"type": {
|
|
970
|
-
"text": "boolean | undefined"
|
|
971
|
-
},
|
|
972
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
973
|
-
"default": "undefined",
|
|
974
|
-
"fieldName": "disabled",
|
|
980
|
+
"fieldName": "prefixIcon",
|
|
975
981
|
"inheritedFrom": {
|
|
976
|
-
"name": "
|
|
977
|
-
"module": "src/
|
|
982
|
+
"name": "AccordionButton",
|
|
983
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
978
984
|
}
|
|
979
985
|
}
|
|
980
986
|
],
|
|
981
|
-
"mixins": [
|
|
982
|
-
{
|
|
983
|
-
"name": "DisabledMixin",
|
|
984
|
-
"module": "/src/utils/mixins/DisabledMixin"
|
|
985
|
-
}
|
|
986
|
-
],
|
|
987
987
|
"superclass": {
|
|
988
|
-
"name": "
|
|
989
|
-
"module": "/src/
|
|
988
|
+
"name": "AccordionButton",
|
|
989
|
+
"module": "/src/components/accordionbutton/accordionbutton.component"
|
|
990
990
|
},
|
|
991
|
-
"tagName": "mdc-
|
|
992
|
-
"jsDoc": "/**\n * An accordion
|
|
991
|
+
"tagName": "mdc-accordion",
|
|
992
|
+
"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 body-section - The body section of the accordion.\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 */",
|
|
993
993
|
"customElement": true
|
|
994
994
|
}
|
|
995
995
|
],
|
|
@@ -998,8 +998,8 @@
|
|
|
998
998
|
"kind": "js",
|
|
999
999
|
"name": "default",
|
|
1000
1000
|
"declaration": {
|
|
1001
|
-
"name": "
|
|
1002
|
-
"module": "components/
|
|
1001
|
+
"name": "Accordion",
|
|
1002
|
+
"module": "components/accordion/accordion.component.js"
|
|
1003
1003
|
}
|
|
1004
1004
|
}
|
|
1005
1005
|
]
|
package/dist/react/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export { default as Accordion } from './accordion';
|
|
2
|
-
export { default as AccordionGroup } from './accordiongroup';
|
|
3
1
|
export { default as AccordionButton } from './accordionbutton';
|
|
2
|
+
export { default as AccordionGroup } from './accordiongroup';
|
|
3
|
+
export { default as Accordion } from './accordion';
|
|
4
4
|
export { default as AlertChip } from './alertchip';
|
|
5
5
|
export { default as Animation } from './animation';
|
|
6
6
|
export { default as AnnouncementDialog } from './announcementdialog';
|
package/dist/react/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export { default as Accordion } from './accordion';
|
|
2
|
-
export { default as AccordionGroup } from './accordiongroup';
|
|
3
1
|
export { default as AccordionButton } from './accordionbutton';
|
|
2
|
+
export { default as AccordionGroup } from './accordiongroup';
|
|
3
|
+
export { default as Accordion } from './accordion';
|
|
4
4
|
export { default as AlertChip } from './alertchip';
|
|
5
5
|
export { default as Animation } from './animation';
|
|
6
6
|
export { default as AnnouncementDialog } from './announcementdialog';
|