@momentum-design/components 0.110.2 → 0.111.0
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 +522 -522
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +1 -1
- package/package.json +1 -1
|
@@ -4,149 +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 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
|
-
}
|
|
33
|
+
"description": "The header section of the accordion button.",
|
|
34
|
+
"name": "header-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": "
|
|
41
|
+
"description": "The leading header of the accordion button.",
|
|
42
|
+
"name": "leading-header"
|
|
75
43
|
},
|
|
76
44
|
{
|
|
77
|
-
"description": "The
|
|
78
|
-
"name": "
|
|
79
|
-
"inheritedFrom": {
|
|
80
|
-
"name": "AccordionButton",
|
|
81
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
82
|
-
}
|
|
45
|
+
"description": "The trailing header of the accordion button.",
|
|
46
|
+
"name": "trailing-header"
|
|
83
47
|
},
|
|
84
48
|
{
|
|
85
|
-
"description": "The header
|
|
86
|
-
"name": "
|
|
87
|
-
"inheritedFrom": {
|
|
88
|
-
"name": "AccordionButton",
|
|
89
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
90
|
-
}
|
|
49
|
+
"description": "The trailing header icon of the accordion button.",
|
|
50
|
+
"name": "trailing-header__icon"
|
|
91
51
|
},
|
|
92
52
|
{
|
|
93
|
-
"description": "The
|
|
94
|
-
"name": "
|
|
95
|
-
"inheritedFrom": {
|
|
96
|
-
"name": "AccordionButton",
|
|
97
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
98
|
-
}
|
|
53
|
+
"description": "The body section of the accordion button.",
|
|
54
|
+
"name": "body-section"
|
|
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": "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
64
|
{
|
|
151
65
|
"kind": "field",
|
|
152
66
|
"name": "size",
|
|
@@ -156,11 +70,7 @@
|
|
|
156
70
|
"description": "The size of the accordion item.",
|
|
157
71
|
"default": "'small'",
|
|
158
72
|
"attribute": "size",
|
|
159
|
-
"reflects": true
|
|
160
|
-
"inheritedFrom": {
|
|
161
|
-
"name": "AccordionButton",
|
|
162
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
163
|
-
}
|
|
73
|
+
"reflects": true
|
|
164
74
|
},
|
|
165
75
|
{
|
|
166
76
|
"kind": "field",
|
|
@@ -171,11 +81,7 @@
|
|
|
171
81
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
172
82
|
"default": "'default'",
|
|
173
83
|
"attribute": "variant",
|
|
174
|
-
"reflects": true
|
|
175
|
-
"inheritedFrom": {
|
|
176
|
-
"name": "AccordionButton",
|
|
177
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
178
|
-
}
|
|
84
|
+
"reflects": true
|
|
179
85
|
},
|
|
180
86
|
{
|
|
181
87
|
"kind": "field",
|
|
@@ -186,11 +92,7 @@
|
|
|
186
92
|
"description": "The aria level of the accordion component.",
|
|
187
93
|
"default": "3",
|
|
188
94
|
"attribute": "data-aria-level",
|
|
189
|
-
"reflects": true
|
|
190
|
-
"inheritedFrom": {
|
|
191
|
-
"name": "AccordionButton",
|
|
192
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
193
|
-
}
|
|
95
|
+
"reflects": true
|
|
194
96
|
},
|
|
195
97
|
{
|
|
196
98
|
"kind": "field",
|
|
@@ -201,11 +103,7 @@
|
|
|
201
103
|
"description": "The visibility of the accordion button.",
|
|
202
104
|
"default": "false",
|
|
203
105
|
"attribute": "expanded",
|
|
204
|
-
"reflects": true
|
|
205
|
-
"inheritedFrom": {
|
|
206
|
-
"name": "AccordionButton",
|
|
207
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
208
|
-
}
|
|
106
|
+
"reflects": true
|
|
209
107
|
},
|
|
210
108
|
{
|
|
211
109
|
"kind": "field",
|
|
@@ -215,11 +113,7 @@
|
|
|
215
113
|
},
|
|
216
114
|
"description": "The header text of the accordion item.",
|
|
217
115
|
"attribute": "header-text",
|
|
218
|
-
"reflects": true
|
|
219
|
-
"inheritedFrom": {
|
|
220
|
-
"name": "AccordionButton",
|
|
221
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
222
|
-
}
|
|
116
|
+
"reflects": true
|
|
223
117
|
},
|
|
224
118
|
{
|
|
225
119
|
"kind": "field",
|
|
@@ -228,11 +122,7 @@
|
|
|
228
122
|
"text": "IconNames | undefined"
|
|
229
123
|
},
|
|
230
124
|
"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
|
-
}
|
|
125
|
+
"attribute": "prefix-icon"
|
|
236
126
|
},
|
|
237
127
|
{
|
|
238
128
|
"kind": "method",
|
|
@@ -243,11 +133,7 @@
|
|
|
243
133
|
"text": "void"
|
|
244
134
|
}
|
|
245
135
|
},
|
|
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
|
-
}
|
|
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."
|
|
251
137
|
},
|
|
252
138
|
{
|
|
253
139
|
"kind": "method",
|
|
@@ -258,11 +144,7 @@
|
|
|
258
144
|
"text": "void"
|
|
259
145
|
}
|
|
260
146
|
},
|
|
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
|
-
}
|
|
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."
|
|
266
148
|
},
|
|
267
149
|
{
|
|
268
150
|
"kind": "method",
|
|
@@ -282,11 +164,7 @@
|
|
|
282
164
|
"description": "The KeyboardEvent fired."
|
|
283
165
|
}
|
|
284
166
|
],
|
|
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
|
-
}
|
|
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."
|
|
290
168
|
},
|
|
291
169
|
{
|
|
292
170
|
"kind": "method",
|
|
@@ -305,11 +183,7 @@
|
|
|
305
183
|
"text": "IconNames"
|
|
306
184
|
}
|
|
307
185
|
}
|
|
308
|
-
]
|
|
309
|
-
"inheritedFrom": {
|
|
310
|
-
"name": "AccordionButton",
|
|
311
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
312
|
-
}
|
|
186
|
+
]
|
|
313
187
|
},
|
|
314
188
|
{
|
|
315
189
|
"kind": "method",
|
|
@@ -319,10 +193,16 @@
|
|
|
319
193
|
"type": {
|
|
320
194
|
"text": "TemplateResult | typeof nothing"
|
|
321
195
|
}
|
|
322
|
-
}
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
196
|
+
}
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
"kind": "method",
|
|
200
|
+
"name": "renderHeader",
|
|
201
|
+
"privacy": "protected",
|
|
202
|
+
"return": {
|
|
203
|
+
"type": {
|
|
204
|
+
"text": "TemplateResult"
|
|
205
|
+
}
|
|
326
206
|
}
|
|
327
207
|
},
|
|
328
208
|
{
|
|
@@ -334,11 +214,7 @@
|
|
|
334
214
|
"text": ""
|
|
335
215
|
}
|
|
336
216
|
},
|
|
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
|
-
}
|
|
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."
|
|
342
218
|
},
|
|
343
219
|
{
|
|
344
220
|
"kind": "method",
|
|
@@ -348,57 +224,40 @@
|
|
|
348
224
|
"type": {
|
|
349
225
|
"text": "TemplateResult | typeof nothing"
|
|
350
226
|
}
|
|
227
|
+
}
|
|
228
|
+
},
|
|
229
|
+
{
|
|
230
|
+
"kind": "field",
|
|
231
|
+
"name": "disabled",
|
|
232
|
+
"type": {
|
|
233
|
+
"text": "boolean | undefined"
|
|
351
234
|
},
|
|
235
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
236
|
+
"default": "undefined",
|
|
237
|
+
"attribute": "disabled",
|
|
238
|
+
"reflects": true,
|
|
352
239
|
"inheritedFrom": {
|
|
353
|
-
"name": "
|
|
354
|
-
"module": "
|
|
240
|
+
"name": "DisabledMixin",
|
|
241
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
355
242
|
}
|
|
356
243
|
}
|
|
357
244
|
],
|
|
358
245
|
"events": [
|
|
359
246
|
{
|
|
360
|
-
"description": "(React: onShown) This event is triggered when the accordion is expanded.",
|
|
247
|
+
"description": "(React: onShown) This event is triggered when the accordion button is expanded.",
|
|
361
248
|
"name": "shown",
|
|
362
|
-
"reactName": "onShown"
|
|
363
|
-
"inheritedFrom": {
|
|
364
|
-
"name": "AccordionButton",
|
|
365
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
366
|
-
}
|
|
249
|
+
"reactName": "onShown"
|
|
367
250
|
}
|
|
368
251
|
],
|
|
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
252
|
"attributes": [
|
|
377
253
|
{
|
|
378
|
-
"name": "
|
|
254
|
+
"name": "size",
|
|
379
255
|
"type": {
|
|
380
|
-
"text": "
|
|
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"
|
|
256
|
+
"text": "Size"
|
|
394
257
|
},
|
|
395
258
|
"description": "The size of the accordion item.",
|
|
396
259
|
"default": "'small'",
|
|
397
|
-
"fieldName": "size"
|
|
398
|
-
"inheritedFrom": {
|
|
399
|
-
"name": "AccordionButton",
|
|
400
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
401
|
-
}
|
|
260
|
+
"fieldName": "size"
|
|
402
261
|
},
|
|
403
262
|
{
|
|
404
263
|
"name": "variant",
|
|
@@ -407,11 +266,7 @@
|
|
|
407
266
|
},
|
|
408
267
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
409
268
|
"default": "'default'",
|
|
410
|
-
"fieldName": "variant"
|
|
411
|
-
"inheritedFrom": {
|
|
412
|
-
"name": "AccordionButton",
|
|
413
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
414
|
-
}
|
|
269
|
+
"fieldName": "variant"
|
|
415
270
|
},
|
|
416
271
|
{
|
|
417
272
|
"name": "data-aria-level",
|
|
@@ -420,11 +275,7 @@
|
|
|
420
275
|
},
|
|
421
276
|
"description": "The aria level of the accordion component.",
|
|
422
277
|
"default": "3",
|
|
423
|
-
"fieldName": "dataAriaLevel"
|
|
424
|
-
"inheritedFrom": {
|
|
425
|
-
"name": "AccordionButton",
|
|
426
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
427
|
-
}
|
|
278
|
+
"fieldName": "dataAriaLevel"
|
|
428
279
|
},
|
|
429
280
|
{
|
|
430
281
|
"name": "expanded",
|
|
@@ -433,11 +284,7 @@
|
|
|
433
284
|
},
|
|
434
285
|
"description": "The visibility of the accordion button.",
|
|
435
286
|
"default": "false",
|
|
436
|
-
"fieldName": "expanded"
|
|
437
|
-
"inheritedFrom": {
|
|
438
|
-
"name": "AccordionButton",
|
|
439
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
440
|
-
}
|
|
287
|
+
"fieldName": "expanded"
|
|
441
288
|
},
|
|
442
289
|
{
|
|
443
290
|
"name": "header-text",
|
|
@@ -445,11 +292,7 @@
|
|
|
445
292
|
"text": "string | undefined"
|
|
446
293
|
},
|
|
447
294
|
"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
|
-
}
|
|
295
|
+
"fieldName": "headerText"
|
|
453
296
|
},
|
|
454
297
|
{
|
|
455
298
|
"name": "prefix-icon",
|
|
@@ -457,13 +300,35 @@
|
|
|
457
300
|
"text": "IconNames | undefined"
|
|
458
301
|
},
|
|
459
302
|
"description": "The leading icon that is displayed before the header text.",
|
|
460
|
-
"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",
|
|
461
313
|
"inheritedFrom": {
|
|
462
|
-
"name": "
|
|
463
|
-
"module": "src/
|
|
314
|
+
"name": "DisabledMixin",
|
|
315
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
464
316
|
}
|
|
465
317
|
}
|
|
466
|
-
]
|
|
318
|
+
],
|
|
319
|
+
"mixins": [
|
|
320
|
+
{
|
|
321
|
+
"name": "DisabledMixin",
|
|
322
|
+
"module": "/src/utils/mixins/DisabledMixin"
|
|
323
|
+
}
|
|
324
|
+
],
|
|
325
|
+
"superclass": {
|
|
326
|
+
"name": "Component",
|
|
327
|
+
"module": "/src/models"
|
|
328
|
+
},
|
|
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 header-section - The header section of the accordion button.\n * @csspart header-button-section - The header button 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 * @csspart body-section - The body section of the accordion button.\n */",
|
|
331
|
+
"customElement": true
|
|
467
332
|
}
|
|
468
333
|
],
|
|
469
334
|
"exports": [
|
|
@@ -471,67 +336,29 @@
|
|
|
471
336
|
"kind": "js",
|
|
472
337
|
"name": "default",
|
|
473
338
|
"declaration": {
|
|
474
|
-
"name": "
|
|
475
|
-
"module": "components/
|
|
339
|
+
"name": "AccordionButton",
|
|
340
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
476
341
|
}
|
|
477
342
|
}
|
|
478
343
|
]
|
|
479
344
|
},
|
|
480
345
|
{
|
|
481
346
|
"kind": "javascript-module",
|
|
482
|
-
"path": "components/
|
|
347
|
+
"path": "components/accordiongroup/accordiongroup.component.js",
|
|
483
348
|
"declarations": [
|
|
484
349
|
{
|
|
485
350
|
"kind": "class",
|
|
486
|
-
"description": "An accordion
|
|
487
|
-
"name": "
|
|
351
|
+
"description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
|
|
352
|
+
"name": "AccordionGroup",
|
|
488
353
|
"cssProperties": [
|
|
489
354
|
{
|
|
490
|
-
"description": "The border color of the
|
|
491
|
-
"name": "--mdc-
|
|
492
|
-
},
|
|
493
|
-
{
|
|
494
|
-
"description": "The hover color of the accordion button.",
|
|
495
|
-
"name": "--mdc-accordionbutton-hover-color"
|
|
496
|
-
},
|
|
497
|
-
{
|
|
498
|
-
"description": "The active color of the accordion button.",
|
|
499
|
-
"name": "--mdc-accordionbutton-active-color"
|
|
500
|
-
},
|
|
501
|
-
{
|
|
502
|
-
"description": "The disabled color of the accordion button.",
|
|
503
|
-
"name": "--mdc-accordionbutton-disabled-color"
|
|
504
|
-
}
|
|
505
|
-
],
|
|
506
|
-
"cssParts": [
|
|
507
|
-
{
|
|
508
|
-
"description": "The header section of the accordion button.",
|
|
509
|
-
"name": "header-section"
|
|
510
|
-
},
|
|
511
|
-
{
|
|
512
|
-
"description": "The header button section of the accordion button.",
|
|
513
|
-
"name": "header-button-section"
|
|
514
|
-
},
|
|
515
|
-
{
|
|
516
|
-
"description": "The leading header of the accordion button.",
|
|
517
|
-
"name": "leading-header"
|
|
518
|
-
},
|
|
519
|
-
{
|
|
520
|
-
"description": "The trailing header of the accordion button.",
|
|
521
|
-
"name": "trailing-header"
|
|
522
|
-
},
|
|
523
|
-
{
|
|
524
|
-
"description": "The trailing header icon of the accordion button.",
|
|
525
|
-
"name": "trailing-header__icon"
|
|
526
|
-
},
|
|
527
|
-
{
|
|
528
|
-
"description": "The body section of the accordion button.",
|
|
529
|
-
"name": "body-section"
|
|
355
|
+
"description": "The border color of the entire accordiongroup",
|
|
356
|
+
"name": "--mdc-accordiongroup-border-color"
|
|
530
357
|
}
|
|
531
358
|
],
|
|
532
359
|
"slots": [
|
|
533
360
|
{
|
|
534
|
-
"description": "The default slot
|
|
361
|
+
"description": "The default slot can contain the `accordion` or `accordionbutton` components.",
|
|
535
362
|
"name": "default"
|
|
536
363
|
}
|
|
537
364
|
],
|
|
@@ -554,76 +381,24 @@
|
|
|
554
381
|
"text": "Variant"
|
|
555
382
|
},
|
|
556
383
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
557
|
-
"default": "'
|
|
384
|
+
"default": "'stacked'",
|
|
558
385
|
"attribute": "variant",
|
|
559
386
|
"reflects": true
|
|
560
387
|
},
|
|
561
388
|
{
|
|
562
389
|
"kind": "field",
|
|
563
|
-
"name": "
|
|
564
|
-
"type": {
|
|
565
|
-
"text": "number"
|
|
566
|
-
},
|
|
567
|
-
"description": "The aria level of the accordion component.",
|
|
568
|
-
"default": "3",
|
|
569
|
-
"attribute": "data-aria-level",
|
|
570
|
-
"reflects": true
|
|
571
|
-
},
|
|
572
|
-
{
|
|
573
|
-
"kind": "field",
|
|
574
|
-
"name": "expanded",
|
|
390
|
+
"name": "allowMultiple",
|
|
575
391
|
"type": {
|
|
576
392
|
"text": "boolean"
|
|
577
393
|
},
|
|
578
|
-
"description": "The visibility of the accordion button.",
|
|
579
394
|
"default": "false",
|
|
580
|
-
"
|
|
581
|
-
"
|
|
582
|
-
},
|
|
583
|
-
{
|
|
584
|
-
"kind": "field",
|
|
585
|
-
"name": "headerText",
|
|
586
|
-
"type": {
|
|
587
|
-
"text": "string | undefined"
|
|
588
|
-
},
|
|
589
|
-
"description": "The header text of the accordion item.",
|
|
590
|
-
"attribute": "header-text",
|
|
395
|
+
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
396
|
+
"attribute": "allow-multiple",
|
|
591
397
|
"reflects": true
|
|
592
398
|
},
|
|
593
|
-
{
|
|
594
|
-
"kind": "field",
|
|
595
|
-
"name": "prefixIcon",
|
|
596
|
-
"type": {
|
|
597
|
-
"text": "IconNames | undefined"
|
|
598
|
-
},
|
|
599
|
-
"description": "The leading icon that is displayed before the header text.",
|
|
600
|
-
"attribute": "prefix-icon"
|
|
601
|
-
},
|
|
602
|
-
{
|
|
603
|
-
"kind": "method",
|
|
604
|
-
"name": "handleHeaderClick",
|
|
605
|
-
"privacy": "protected",
|
|
606
|
-
"return": {
|
|
607
|
-
"type": {
|
|
608
|
-
"text": "void"
|
|
609
|
-
}
|
|
610
|
-
},
|
|
611
|
-
"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."
|
|
612
|
-
},
|
|
613
|
-
{
|
|
614
|
-
"kind": "method",
|
|
615
|
-
"name": "dispatchHeaderClickEvent",
|
|
616
|
-
"privacy": "private",
|
|
617
|
-
"return": {
|
|
618
|
-
"type": {
|
|
619
|
-
"text": "void"
|
|
620
|
-
}
|
|
621
|
-
},
|
|
622
|
-
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
|
|
623
|
-
},
|
|
624
399
|
{
|
|
625
400
|
"kind": "method",
|
|
626
|
-
"name": "
|
|
401
|
+
"name": "handleAccordionExpanded",
|
|
627
402
|
"privacy": "private",
|
|
628
403
|
"return": {
|
|
629
404
|
"type": {
|
|
@@ -634,71 +409,218 @@
|
|
|
634
409
|
{
|
|
635
410
|
"name": "event",
|
|
636
411
|
"type": {
|
|
637
|
-
"text": "
|
|
412
|
+
"text": "Event"
|
|
638
413
|
},
|
|
639
|
-
"description": "The
|
|
414
|
+
"description": "The event object from the 'shown' event."
|
|
640
415
|
}
|
|
641
416
|
],
|
|
642
|
-
"description": "Handles the
|
|
417
|
+
"description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
|
|
643
418
|
},
|
|
644
419
|
{
|
|
645
420
|
"kind": "method",
|
|
646
|
-
"name": "
|
|
647
|
-
"privacy": "
|
|
421
|
+
"name": "setChildrenAccordionAttributes",
|
|
422
|
+
"privacy": "private",
|
|
648
423
|
"return": {
|
|
649
424
|
"type": {
|
|
650
|
-
"text": "
|
|
425
|
+
"text": "void"
|
|
651
426
|
}
|
|
652
427
|
},
|
|
653
428
|
"parameters": [
|
|
654
429
|
{
|
|
655
|
-
"name": "
|
|
656
|
-
"optional": true,
|
|
430
|
+
"name": "attributeName",
|
|
657
431
|
"type": {
|
|
658
|
-
"text": "
|
|
659
|
-
}
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
"type": {
|
|
669
|
-
"text": "TemplateResult | typeof nothing"
|
|
432
|
+
"text": "string"
|
|
433
|
+
},
|
|
434
|
+
"description": "The name of the attribute to set."
|
|
435
|
+
},
|
|
436
|
+
{
|
|
437
|
+
"name": "attributeValue",
|
|
438
|
+
"type": {
|
|
439
|
+
"text": "string"
|
|
440
|
+
},
|
|
441
|
+
"description": "The value to set the attribute to."
|
|
670
442
|
}
|
|
671
|
-
|
|
672
|
-
|
|
443
|
+
],
|
|
444
|
+
"description": "Sets the given attribute on all child accordion or accordionbutton components."
|
|
445
|
+
}
|
|
446
|
+
],
|
|
447
|
+
"attributes": [
|
|
673
448
|
{
|
|
674
|
-
"
|
|
675
|
-
"
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
}
|
|
449
|
+
"name": "size",
|
|
450
|
+
"type": {
|
|
451
|
+
"text": "Size"
|
|
452
|
+
},
|
|
453
|
+
"description": "The size of the accordion item.",
|
|
454
|
+
"default": "'small'",
|
|
455
|
+
"fieldName": "size"
|
|
682
456
|
},
|
|
683
457
|
{
|
|
684
|
-
"
|
|
685
|
-
"
|
|
686
|
-
|
|
687
|
-
"return": {
|
|
688
|
-
"type": {
|
|
689
|
-
"text": ""
|
|
690
|
-
}
|
|
458
|
+
"name": "variant",
|
|
459
|
+
"type": {
|
|
460
|
+
"text": "Variant"
|
|
691
461
|
},
|
|
692
|
-
"description": "
|
|
462
|
+
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
463
|
+
"default": "'stacked'",
|
|
464
|
+
"fieldName": "variant"
|
|
693
465
|
},
|
|
694
466
|
{
|
|
695
|
-
"
|
|
696
|
-
"
|
|
467
|
+
"name": "allow-multiple",
|
|
468
|
+
"type": {
|
|
469
|
+
"text": "boolean"
|
|
470
|
+
},
|
|
471
|
+
"default": "false",
|
|
472
|
+
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
473
|
+
"fieldName": "allowMultiple"
|
|
474
|
+
}
|
|
475
|
+
],
|
|
476
|
+
"superclass": {
|
|
477
|
+
"name": "Component",
|
|
478
|
+
"module": "/src/models"
|
|
479
|
+
},
|
|
480
|
+
"tagName": "mdc-accordiongroup",
|
|
481
|
+
"jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
|
|
482
|
+
"customElement": true
|
|
483
|
+
}
|
|
484
|
+
],
|
|
485
|
+
"exports": [
|
|
486
|
+
{
|
|
487
|
+
"kind": "js",
|
|
488
|
+
"name": "default",
|
|
489
|
+
"declaration": {
|
|
490
|
+
"name": "AccordionGroup",
|
|
491
|
+
"module": "components/accordiongroup/accordiongroup.component.js"
|
|
492
|
+
}
|
|
493
|
+
}
|
|
494
|
+
]
|
|
495
|
+
},
|
|
496
|
+
{
|
|
497
|
+
"kind": "javascript-module",
|
|
498
|
+
"path": "components/accordion/accordion.component.js",
|
|
499
|
+
"declarations": [
|
|
500
|
+
{
|
|
501
|
+
"kind": "class",
|
|
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",
|
|
504
|
+
"cssProperties": [
|
|
505
|
+
{
|
|
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
|
+
}
|
|
512
|
+
},
|
|
513
|
+
{
|
|
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
|
+
}
|
|
520
|
+
},
|
|
521
|
+
{
|
|
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
|
+
}
|
|
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",
|
|
697
614
|
"privacy": "protected",
|
|
698
615
|
"return": {
|
|
699
616
|
"type": {
|
|
700
|
-
"text": "
|
|
617
|
+
"text": ""
|
|
701
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"
|
|
702
624
|
}
|
|
703
625
|
},
|
|
704
626
|
{
|
|
@@ -712,168 +634,130 @@
|
|
|
712
634
|
"attribute": "disabled",
|
|
713
635
|
"reflects": true,
|
|
714
636
|
"inheritedFrom": {
|
|
715
|
-
"name": "
|
|
716
|
-
"module": "
|
|
637
|
+
"name": "AccordionButton",
|
|
638
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
717
639
|
}
|
|
718
|
-
}
|
|
719
|
-
],
|
|
720
|
-
"events": [
|
|
721
|
-
{
|
|
722
|
-
"description": "(React: onShown) This event is triggered when the accordion button is expanded.",
|
|
723
|
-
"name": "shown",
|
|
724
|
-
"reactName": "onShown"
|
|
725
|
-
}
|
|
726
|
-
],
|
|
727
|
-
"attributes": [
|
|
640
|
+
},
|
|
728
641
|
{
|
|
642
|
+
"kind": "field",
|
|
729
643
|
"name": "size",
|
|
730
644
|
"type": {
|
|
731
645
|
"text": "Size"
|
|
732
646
|
},
|
|
733
647
|
"description": "The size of the accordion item.",
|
|
734
648
|
"default": "'small'",
|
|
735
|
-
"
|
|
649
|
+
"attribute": "size",
|
|
650
|
+
"reflects": true,
|
|
651
|
+
"inheritedFrom": {
|
|
652
|
+
"name": "AccordionButton",
|
|
653
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
654
|
+
}
|
|
736
655
|
},
|
|
737
656
|
{
|
|
657
|
+
"kind": "field",
|
|
738
658
|
"name": "variant",
|
|
739
659
|
"type": {
|
|
740
660
|
"text": "Variant"
|
|
741
661
|
},
|
|
742
662
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
743
663
|
"default": "'default'",
|
|
744
|
-
"
|
|
664
|
+
"attribute": "variant",
|
|
665
|
+
"reflects": true,
|
|
666
|
+
"inheritedFrom": {
|
|
667
|
+
"name": "AccordionButton",
|
|
668
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
669
|
+
}
|
|
745
670
|
},
|
|
746
671
|
{
|
|
747
|
-
"
|
|
672
|
+
"kind": "field",
|
|
673
|
+
"name": "dataAriaLevel",
|
|
748
674
|
"type": {
|
|
749
675
|
"text": "number"
|
|
750
676
|
},
|
|
751
677
|
"description": "The aria level of the accordion component.",
|
|
752
678
|
"default": "3",
|
|
753
|
-
"
|
|
679
|
+
"attribute": "data-aria-level",
|
|
680
|
+
"reflects": true,
|
|
681
|
+
"inheritedFrom": {
|
|
682
|
+
"name": "AccordionButton",
|
|
683
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
684
|
+
}
|
|
754
685
|
},
|
|
755
686
|
{
|
|
687
|
+
"kind": "field",
|
|
756
688
|
"name": "expanded",
|
|
757
689
|
"type": {
|
|
758
690
|
"text": "boolean"
|
|
759
691
|
},
|
|
760
692
|
"description": "The visibility of the accordion button.",
|
|
761
693
|
"default": "false",
|
|
762
|
-
"
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
"description": "The header text of the accordion item.",
|
|
770
|
-
"fieldName": "headerText"
|
|
771
|
-
},
|
|
772
|
-
{
|
|
773
|
-
"name": "prefix-icon",
|
|
774
|
-
"type": {
|
|
775
|
-
"text": "IconNames | undefined"
|
|
776
|
-
},
|
|
777
|
-
"description": "The leading icon that is displayed before the header text.",
|
|
778
|
-
"fieldName": "prefixIcon"
|
|
779
|
-
},
|
|
780
|
-
{
|
|
781
|
-
"name": "disabled",
|
|
782
|
-
"type": {
|
|
783
|
-
"text": "boolean | undefined"
|
|
784
|
-
},
|
|
785
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
786
|
-
"default": "undefined",
|
|
787
|
-
"fieldName": "disabled",
|
|
788
|
-
"inheritedFrom": {
|
|
789
|
-
"name": "DisabledMixin",
|
|
790
|
-
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
791
|
-
}
|
|
792
|
-
}
|
|
793
|
-
],
|
|
794
|
-
"mixins": [
|
|
795
|
-
{
|
|
796
|
-
"name": "DisabledMixin",
|
|
797
|
-
"module": "/src/utils/mixins/DisabledMixin"
|
|
798
|
-
}
|
|
799
|
-
],
|
|
800
|
-
"superclass": {
|
|
801
|
-
"name": "Component",
|
|
802
|
-
"module": "/src/models"
|
|
803
|
-
},
|
|
804
|
-
"tagName": "mdc-accordionbutton",
|
|
805
|
-
"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 header-section - The header section of the accordion button.\n * @csspart header-button-section - The header button 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 * @csspart body-section - The body section of the accordion button.\n */",
|
|
806
|
-
"customElement": true
|
|
807
|
-
}
|
|
808
|
-
],
|
|
809
|
-
"exports": [
|
|
810
|
-
{
|
|
811
|
-
"kind": "js",
|
|
812
|
-
"name": "default",
|
|
813
|
-
"declaration": {
|
|
814
|
-
"name": "AccordionButton",
|
|
815
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
816
|
-
}
|
|
817
|
-
}
|
|
818
|
-
]
|
|
819
|
-
},
|
|
820
|
-
{
|
|
821
|
-
"kind": "javascript-module",
|
|
822
|
-
"path": "components/accordiongroup/accordiongroup.component.js",
|
|
823
|
-
"declarations": [
|
|
824
|
-
{
|
|
825
|
-
"kind": "class",
|
|
826
|
-
"description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
|
|
827
|
-
"name": "AccordionGroup",
|
|
828
|
-
"cssProperties": [
|
|
829
|
-
{
|
|
830
|
-
"description": "The border color of the entire accordiongroup",
|
|
831
|
-
"name": "--mdc-accordiongroup-border-color"
|
|
832
|
-
}
|
|
833
|
-
],
|
|
834
|
-
"slots": [
|
|
835
|
-
{
|
|
836
|
-
"description": "The default slot can contain the `accordion` or `accordionbutton` components.",
|
|
837
|
-
"name": "default"
|
|
838
|
-
}
|
|
839
|
-
],
|
|
840
|
-
"members": [
|
|
694
|
+
"attribute": "expanded",
|
|
695
|
+
"reflects": true,
|
|
696
|
+
"inheritedFrom": {
|
|
697
|
+
"name": "AccordionButton",
|
|
698
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
699
|
+
}
|
|
700
|
+
},
|
|
841
701
|
{
|
|
842
702
|
"kind": "field",
|
|
843
|
-
"name": "
|
|
703
|
+
"name": "headerText",
|
|
844
704
|
"type": {
|
|
845
|
-
"text": "
|
|
705
|
+
"text": "string | undefined"
|
|
846
706
|
},
|
|
847
|
-
"description": "The
|
|
848
|
-
"
|
|
849
|
-
"
|
|
850
|
-
"
|
|
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
|
+
}
|
|
851
714
|
},
|
|
852
715
|
{
|
|
853
716
|
"kind": "field",
|
|
854
|
-
"name": "
|
|
717
|
+
"name": "prefixIcon",
|
|
855
718
|
"type": {
|
|
856
|
-
"text": "
|
|
719
|
+
"text": "IconNames | undefined"
|
|
857
720
|
},
|
|
858
|
-
"description": "The
|
|
859
|
-
"
|
|
860
|
-
"
|
|
861
|
-
|
|
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
|
+
}
|
|
862
727
|
},
|
|
863
728
|
{
|
|
864
|
-
"kind": "
|
|
865
|
-
"name": "
|
|
866
|
-
"
|
|
867
|
-
|
|
729
|
+
"kind": "method",
|
|
730
|
+
"name": "handleHeaderClick",
|
|
731
|
+
"privacy": "protected",
|
|
732
|
+
"return": {
|
|
733
|
+
"type": {
|
|
734
|
+
"text": "void"
|
|
735
|
+
}
|
|
868
736
|
},
|
|
869
|
-
"
|
|
870
|
-
"
|
|
871
|
-
|
|
872
|
-
|
|
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
|
+
}
|
|
873
742
|
},
|
|
874
743
|
{
|
|
875
744
|
"kind": "method",
|
|
876
|
-
"name": "
|
|
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",
|
|
877
761
|
"privacy": "private",
|
|
878
762
|
"return": {
|
|
879
763
|
"type": {
|
|
@@ -884,42 +768,116 @@
|
|
|
884
768
|
{
|
|
885
769
|
"name": "event",
|
|
886
770
|
"type": {
|
|
887
|
-
"text": "
|
|
771
|
+
"text": "KeyboardEvent"
|
|
888
772
|
},
|
|
889
|
-
"description": "The
|
|
773
|
+
"description": "The KeyboardEvent fired."
|
|
890
774
|
}
|
|
891
775
|
],
|
|
892
|
-
"description": "Handles the
|
|
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
|
+
}
|
|
893
781
|
},
|
|
894
782
|
{
|
|
895
783
|
"kind": "method",
|
|
896
|
-
"name": "
|
|
897
|
-
"privacy": "
|
|
784
|
+
"name": "renderIcon",
|
|
785
|
+
"privacy": "protected",
|
|
898
786
|
"return": {
|
|
899
787
|
"type": {
|
|
900
|
-
"text": "
|
|
788
|
+
"text": "TemplateResult | typeof nothing"
|
|
901
789
|
}
|
|
902
790
|
},
|
|
903
791
|
"parameters": [
|
|
904
792
|
{
|
|
905
|
-
"name": "
|
|
906
|
-
"
|
|
907
|
-
"text": "string"
|
|
908
|
-
},
|
|
909
|
-
"description": "The name of the attribute to set."
|
|
910
|
-
},
|
|
911
|
-
{
|
|
912
|
-
"name": "attributeValue",
|
|
793
|
+
"name": "iconName",
|
|
794
|
+
"optional": true,
|
|
913
795
|
"type": {
|
|
914
|
-
"text": "
|
|
915
|
-
}
|
|
916
|
-
"description": "The value to set the attribute to."
|
|
796
|
+
"text": "IconNames"
|
|
797
|
+
}
|
|
917
798
|
}
|
|
918
799
|
],
|
|
919
|
-
"
|
|
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
|
+
}
|
|
920
858
|
}
|
|
921
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,
|
|
922
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
|
+
},
|
|
923
881
|
{
|
|
924
882
|
"name": "size",
|
|
925
883
|
"type": {
|
|
@@ -927,7 +885,11 @@
|
|
|
927
885
|
},
|
|
928
886
|
"description": "The size of the accordion item.",
|
|
929
887
|
"default": "'small'",
|
|
930
|
-
"fieldName": "size"
|
|
888
|
+
"fieldName": "size",
|
|
889
|
+
"inheritedFrom": {
|
|
890
|
+
"name": "AccordionButton",
|
|
891
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
892
|
+
}
|
|
931
893
|
},
|
|
932
894
|
{
|
|
933
895
|
"name": "variant",
|
|
@@ -935,26 +897,64 @@
|
|
|
935
897
|
"text": "Variant"
|
|
936
898
|
},
|
|
937
899
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
938
|
-
"default": "'
|
|
939
|
-
"fieldName": "variant"
|
|
900
|
+
"default": "'default'",
|
|
901
|
+
"fieldName": "variant",
|
|
902
|
+
"inheritedFrom": {
|
|
903
|
+
"name": "AccordionButton",
|
|
904
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
905
|
+
}
|
|
940
906
|
},
|
|
941
907
|
{
|
|
942
|
-
"name": "
|
|
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",
|
|
943
922
|
"type": {
|
|
944
923
|
"text": "boolean"
|
|
945
924
|
},
|
|
925
|
+
"description": "The visibility of the accordion button.",
|
|
946
926
|
"default": "false",
|
|
947
|
-
"
|
|
948
|
-
"
|
|
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
|
+
}
|
|
949
956
|
}
|
|
950
|
-
]
|
|
951
|
-
"superclass": {
|
|
952
|
-
"name": "Component",
|
|
953
|
-
"module": "/src/models"
|
|
954
|
-
},
|
|
955
|
-
"tagName": "mdc-accordiongroup",
|
|
956
|
-
"jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
|
|
957
|
-
"customElement": true
|
|
957
|
+
]
|
|
958
958
|
}
|
|
959
959
|
],
|
|
960
960
|
"exports": [
|
|
@@ -962,8 +962,8 @@
|
|
|
962
962
|
"kind": "js",
|
|
963
963
|
"name": "default",
|
|
964
964
|
"declaration": {
|
|
965
|
-
"name": "
|
|
966
|
-
"module": "components/
|
|
965
|
+
"name": "Accordion",
|
|
966
|
+
"module": "components/accordion/accordion.component.js"
|
|
967
967
|
}
|
|
968
968
|
}
|
|
969
969
|
]
|