@momentum-design/components 0.111.0 → 0.111.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/index.js +223 -219
- package/dist/browser/index.js.map +4 -4
- package/dist/components/list/list.component.d.ts +29 -35
- package/dist/components/list/list.component.js +77 -79
- package/dist/components/list/list.constants.d.ts +5 -1
- package/dist/components/list/list.constants.js +5 -1
- package/dist/components/list/list.styles.js +4 -0
- package/dist/components/listbox/listbox.component.d.ts +1 -1
- package/dist/components/listbox/listbox.component.js +1 -1
- package/dist/custom-elements.json +632 -540
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +1 -1
- package/dist/utils/mixins/ListNavigationMixin.d.ts +3 -2
- package/dist/utils/mixins/ListNavigationMixin.js +34 -18
- package/package.json +1 -1
|
@@ -4,63 +4,149 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "components/
|
|
7
|
+
"path": "components/accordion/accordion.component.js",
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "An accordion
|
|
12
|
-
"name": "
|
|
11
|
+
"description": "An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n- Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n- Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.",
|
|
12
|
+
"name": "Accordion",
|
|
13
13
|
"cssProperties": [
|
|
14
14
|
{
|
|
15
|
-
"description": "The border color of the accordion
|
|
16
|
-
"name": "--mdc-accordionbutton-border-color"
|
|
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
|
+
}
|
|
17
21
|
},
|
|
18
22
|
{
|
|
19
|
-
"description": "The hover color of the accordion
|
|
20
|
-
"name": "--mdc-accordionbutton-hover-color"
|
|
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
|
+
}
|
|
21
29
|
},
|
|
22
30
|
{
|
|
23
|
-
"description": "The active color of the accordion
|
|
24
|
-
"name": "--mdc-accordionbutton-active-color"
|
|
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
|
+
}
|
|
25
37
|
},
|
|
26
38
|
{
|
|
27
|
-
"description": "The disabled color of the accordion
|
|
28
|
-
"name": "--mdc-accordionbutton-disabled-color"
|
|
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
|
+
}
|
|
29
45
|
}
|
|
30
46
|
],
|
|
31
47
|
"cssParts": [
|
|
32
48
|
{
|
|
33
|
-
"description": "The header section of the accordion
|
|
34
|
-
"name": "header-section"
|
|
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
|
+
}
|
|
35
55
|
},
|
|
36
56
|
{
|
|
37
|
-
"description": "The header
|
|
38
|
-
"name": "header
|
|
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
|
+
}
|
|
39
63
|
},
|
|
40
64
|
{
|
|
41
|
-
"description": "The
|
|
42
|
-
"name": "
|
|
65
|
+
"description": "The trailing header of the accordion.",
|
|
66
|
+
"name": "trailing-header",
|
|
67
|
+
"inheritedFrom": {
|
|
68
|
+
"name": "AccordionButton",
|
|
69
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
70
|
+
}
|
|
43
71
|
},
|
|
44
72
|
{
|
|
45
|
-
"description": "The trailing header of the accordion
|
|
46
|
-
"name": "trailing-
|
|
73
|
+
"description": "The trailing header button of the accordion.",
|
|
74
|
+
"name": "trailing-header__button"
|
|
47
75
|
},
|
|
48
76
|
{
|
|
49
|
-
"description": "The
|
|
50
|
-
"name": "
|
|
77
|
+
"description": "The body section of the accordion.",
|
|
78
|
+
"name": "body-section",
|
|
79
|
+
"inheritedFrom": {
|
|
80
|
+
"name": "AccordionButton",
|
|
81
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
82
|
+
}
|
|
51
83
|
},
|
|
52
84
|
{
|
|
53
|
-
"description": "The
|
|
54
|
-
"name": "
|
|
85
|
+
"description": "The header button section of the accordion button.",
|
|
86
|
+
"name": "header-button-section",
|
|
87
|
+
"inheritedFrom": {
|
|
88
|
+
"name": "AccordionButton",
|
|
89
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"description": "The trailing header icon of the accordion button.",
|
|
94
|
+
"name": "trailing-header__icon",
|
|
95
|
+
"inheritedFrom": {
|
|
96
|
+
"name": "AccordionButton",
|
|
97
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
98
|
+
}
|
|
55
99
|
}
|
|
56
100
|
],
|
|
57
101
|
"slots": [
|
|
102
|
+
{
|
|
103
|
+
"description": "The leading controls slot of the accordion on the header section.",
|
|
104
|
+
"name": "leading-controls"
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"description": "The trailing controls slot of the accordion on the header section.",
|
|
108
|
+
"name": "trailing-controls"
|
|
109
|
+
},
|
|
58
110
|
{
|
|
59
111
|
"description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
|
|
60
|
-
"name": "default"
|
|
112
|
+
"name": "default",
|
|
113
|
+
"inheritedFrom": {
|
|
114
|
+
"name": "AccordionButton",
|
|
115
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
116
|
+
}
|
|
61
117
|
}
|
|
62
118
|
],
|
|
63
119
|
"members": [
|
|
120
|
+
{
|
|
121
|
+
"kind": "method",
|
|
122
|
+
"name": "renderHeader",
|
|
123
|
+
"privacy": "protected",
|
|
124
|
+
"return": {
|
|
125
|
+
"type": {
|
|
126
|
+
"text": ""
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
"description": "Renders the header section of the accordion.\nThis includes the leading icon, text and controls, and the trailing controls.\nThe trailing controls include the expand/collapse button.\nThe button is disabled if the accordion is disabled.\nThe button is also given the aria-controls attribute set to the id of the body section.\nThe button is also given the aria-expanded attribute set to the expanded state of the accordion.\nThe prefix icon of the button is set to the expanded state of the accordion.",
|
|
130
|
+
"inheritedFrom": {
|
|
131
|
+
"name": "AccordionButton",
|
|
132
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
133
|
+
}
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"kind": "field",
|
|
137
|
+
"name": "disabled",
|
|
138
|
+
"type": {
|
|
139
|
+
"text": "boolean | undefined"
|
|
140
|
+
},
|
|
141
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
142
|
+
"default": "undefined",
|
|
143
|
+
"attribute": "disabled",
|
|
144
|
+
"reflects": true,
|
|
145
|
+
"inheritedFrom": {
|
|
146
|
+
"name": "DisabledMixin",
|
|
147
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
148
|
+
}
|
|
149
|
+
},
|
|
64
150
|
{
|
|
65
151
|
"kind": "field",
|
|
66
152
|
"name": "size",
|
|
@@ -70,7 +156,11 @@
|
|
|
70
156
|
"description": "The size of the accordion item.",
|
|
71
157
|
"default": "'small'",
|
|
72
158
|
"attribute": "size",
|
|
73
|
-
"reflects": true
|
|
159
|
+
"reflects": true,
|
|
160
|
+
"inheritedFrom": {
|
|
161
|
+
"name": "AccordionButton",
|
|
162
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
163
|
+
}
|
|
74
164
|
},
|
|
75
165
|
{
|
|
76
166
|
"kind": "field",
|
|
@@ -81,7 +171,11 @@
|
|
|
81
171
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
82
172
|
"default": "'default'",
|
|
83
173
|
"attribute": "variant",
|
|
84
|
-
"reflects": true
|
|
174
|
+
"reflects": true,
|
|
175
|
+
"inheritedFrom": {
|
|
176
|
+
"name": "AccordionButton",
|
|
177
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
178
|
+
}
|
|
85
179
|
},
|
|
86
180
|
{
|
|
87
181
|
"kind": "field",
|
|
@@ -92,7 +186,11 @@
|
|
|
92
186
|
"description": "The aria level of the accordion component.",
|
|
93
187
|
"default": "3",
|
|
94
188
|
"attribute": "data-aria-level",
|
|
95
|
-
"reflects": true
|
|
189
|
+
"reflects": true,
|
|
190
|
+
"inheritedFrom": {
|
|
191
|
+
"name": "AccordionButton",
|
|
192
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
193
|
+
}
|
|
96
194
|
},
|
|
97
195
|
{
|
|
98
196
|
"kind": "field",
|
|
@@ -103,7 +201,11 @@
|
|
|
103
201
|
"description": "The visibility of the accordion button.",
|
|
104
202
|
"default": "false",
|
|
105
203
|
"attribute": "expanded",
|
|
106
|
-
"reflects": true
|
|
204
|
+
"reflects": true,
|
|
205
|
+
"inheritedFrom": {
|
|
206
|
+
"name": "AccordionButton",
|
|
207
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
208
|
+
}
|
|
107
209
|
},
|
|
108
210
|
{
|
|
109
211
|
"kind": "field",
|
|
@@ -113,7 +215,11 @@
|
|
|
113
215
|
},
|
|
114
216
|
"description": "The header text of the accordion item.",
|
|
115
217
|
"attribute": "header-text",
|
|
116
|
-
"reflects": true
|
|
218
|
+
"reflects": true,
|
|
219
|
+
"inheritedFrom": {
|
|
220
|
+
"name": "AccordionButton",
|
|
221
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
222
|
+
}
|
|
117
223
|
},
|
|
118
224
|
{
|
|
119
225
|
"kind": "field",
|
|
@@ -122,7 +228,11 @@
|
|
|
122
228
|
"text": "IconNames | undefined"
|
|
123
229
|
},
|
|
124
230
|
"description": "The leading icon that is displayed before the header text.",
|
|
125
|
-
"attribute": "prefix-icon"
|
|
231
|
+
"attribute": "prefix-icon",
|
|
232
|
+
"inheritedFrom": {
|
|
233
|
+
"name": "AccordionButton",
|
|
234
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
235
|
+
}
|
|
126
236
|
},
|
|
127
237
|
{
|
|
128
238
|
"kind": "method",
|
|
@@ -133,7 +243,11 @@
|
|
|
133
243
|
"text": "void"
|
|
134
244
|
}
|
|
135
245
|
},
|
|
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."
|
|
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
|
+
}
|
|
137
251
|
},
|
|
138
252
|
{
|
|
139
253
|
"kind": "method",
|
|
@@ -144,7 +258,11 @@
|
|
|
144
258
|
"text": "void"
|
|
145
259
|
}
|
|
146
260
|
},
|
|
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."
|
|
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
|
+
}
|
|
148
266
|
},
|
|
149
267
|
{
|
|
150
268
|
"kind": "method",
|
|
@@ -164,7 +282,11 @@
|
|
|
164
282
|
"description": "The KeyboardEvent fired."
|
|
165
283
|
}
|
|
166
284
|
],
|
|
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."
|
|
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
|
+
}
|
|
168
290
|
},
|
|
169
291
|
{
|
|
170
292
|
"kind": "method",
|
|
@@ -183,7 +305,11 @@
|
|
|
183
305
|
"text": "IconNames"
|
|
184
306
|
}
|
|
185
307
|
}
|
|
186
|
-
]
|
|
308
|
+
],
|
|
309
|
+
"inheritedFrom": {
|
|
310
|
+
"name": "AccordionButton",
|
|
311
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
312
|
+
}
|
|
187
313
|
},
|
|
188
314
|
{
|
|
189
315
|
"kind": "method",
|
|
@@ -193,16 +319,10 @@
|
|
|
193
319
|
"type": {
|
|
194
320
|
"text": "TemplateResult | typeof nothing"
|
|
195
321
|
}
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
"name": "renderHeader",
|
|
201
|
-
"privacy": "protected",
|
|
202
|
-
"return": {
|
|
203
|
-
"type": {
|
|
204
|
-
"text": "TemplateResult"
|
|
205
|
-
}
|
|
322
|
+
},
|
|
323
|
+
"inheritedFrom": {
|
|
324
|
+
"name": "AccordionButton",
|
|
325
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
206
326
|
}
|
|
207
327
|
},
|
|
208
328
|
{
|
|
@@ -214,7 +334,11 @@
|
|
|
214
334
|
"text": ""
|
|
215
335
|
}
|
|
216
336
|
},
|
|
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."
|
|
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
|
+
}
|
|
218
342
|
},
|
|
219
343
|
{
|
|
220
344
|
"kind": "method",
|
|
@@ -224,32 +348,45 @@
|
|
|
224
348
|
"type": {
|
|
225
349
|
"text": "TemplateResult | typeof nothing"
|
|
226
350
|
}
|
|
227
|
-
}
|
|
228
|
-
},
|
|
229
|
-
{
|
|
230
|
-
"kind": "field",
|
|
231
|
-
"name": "disabled",
|
|
232
|
-
"type": {
|
|
233
|
-
"text": "boolean | undefined"
|
|
234
351
|
},
|
|
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,
|
|
239
352
|
"inheritedFrom": {
|
|
240
|
-
"name": "
|
|
241
|
-
"module": "
|
|
353
|
+
"name": "AccordionButton",
|
|
354
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
242
355
|
}
|
|
243
356
|
}
|
|
244
357
|
],
|
|
245
358
|
"events": [
|
|
246
359
|
{
|
|
247
|
-
"description": "(React: onShown) This event is triggered when the accordion
|
|
360
|
+
"description": "(React: onShown) This event is triggered when the accordion is expanded.",
|
|
248
361
|
"name": "shown",
|
|
249
|
-
"reactName": "onShown"
|
|
362
|
+
"reactName": "onShown",
|
|
363
|
+
"inheritedFrom": {
|
|
364
|
+
"name": "AccordionButton",
|
|
365
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
366
|
+
}
|
|
250
367
|
}
|
|
251
368
|
],
|
|
369
|
+
"superclass": {
|
|
370
|
+
"name": "AccordionButton",
|
|
371
|
+
"module": "/src/components/accordionbutton/accordionbutton.component"
|
|
372
|
+
},
|
|
373
|
+
"tagName": "mdc-accordion",
|
|
374
|
+
"jsDoc": "/**\n * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.\n *\n * @tagname mdc-accordion\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot leading-controls - The leading controls slot of the accordion on the header section.\n * @slot trailing-controls - The trailing controls slot of the accordion on the header section.\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.\n *\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n * @csspart body-section - The body section of the accordion.\n */",
|
|
375
|
+
"customElement": true,
|
|
252
376
|
"attributes": [
|
|
377
|
+
{
|
|
378
|
+
"name": "disabled",
|
|
379
|
+
"type": {
|
|
380
|
+
"text": "boolean | undefined"
|
|
381
|
+
},
|
|
382
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
383
|
+
"default": "undefined",
|
|
384
|
+
"fieldName": "disabled",
|
|
385
|
+
"inheritedFrom": {
|
|
386
|
+
"name": "DisabledMixin",
|
|
387
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
388
|
+
}
|
|
389
|
+
},
|
|
253
390
|
{
|
|
254
391
|
"name": "size",
|
|
255
392
|
"type": {
|
|
@@ -257,7 +394,11 @@
|
|
|
257
394
|
},
|
|
258
395
|
"description": "The size of the accordion item.",
|
|
259
396
|
"default": "'small'",
|
|
260
|
-
"fieldName": "size"
|
|
397
|
+
"fieldName": "size",
|
|
398
|
+
"inheritedFrom": {
|
|
399
|
+
"name": "AccordionButton",
|
|
400
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
401
|
+
}
|
|
261
402
|
},
|
|
262
403
|
{
|
|
263
404
|
"name": "variant",
|
|
@@ -266,7 +407,11 @@
|
|
|
266
407
|
},
|
|
267
408
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
268
409
|
"default": "'default'",
|
|
269
|
-
"fieldName": "variant"
|
|
410
|
+
"fieldName": "variant",
|
|
411
|
+
"inheritedFrom": {
|
|
412
|
+
"name": "AccordionButton",
|
|
413
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
414
|
+
}
|
|
270
415
|
},
|
|
271
416
|
{
|
|
272
417
|
"name": "data-aria-level",
|
|
@@ -275,7 +420,11 @@
|
|
|
275
420
|
},
|
|
276
421
|
"description": "The aria level of the accordion component.",
|
|
277
422
|
"default": "3",
|
|
278
|
-
"fieldName": "dataAriaLevel"
|
|
423
|
+
"fieldName": "dataAriaLevel",
|
|
424
|
+
"inheritedFrom": {
|
|
425
|
+
"name": "AccordionButton",
|
|
426
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
427
|
+
}
|
|
279
428
|
},
|
|
280
429
|
{
|
|
281
430
|
"name": "expanded",
|
|
@@ -284,7 +433,11 @@
|
|
|
284
433
|
},
|
|
285
434
|
"description": "The visibility of the accordion button.",
|
|
286
435
|
"default": "false",
|
|
287
|
-
"fieldName": "expanded"
|
|
436
|
+
"fieldName": "expanded",
|
|
437
|
+
"inheritedFrom": {
|
|
438
|
+
"name": "AccordionButton",
|
|
439
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
440
|
+
}
|
|
288
441
|
},
|
|
289
442
|
{
|
|
290
443
|
"name": "header-text",
|
|
@@ -292,7 +445,11 @@
|
|
|
292
445
|
"text": "string | undefined"
|
|
293
446
|
},
|
|
294
447
|
"description": "The header text of the accordion item.",
|
|
295
|
-
"fieldName": "headerText"
|
|
448
|
+
"fieldName": "headerText",
|
|
449
|
+
"inheritedFrom": {
|
|
450
|
+
"name": "AccordionButton",
|
|
451
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
452
|
+
}
|
|
296
453
|
},
|
|
297
454
|
{
|
|
298
455
|
"name": "prefix-icon",
|
|
@@ -300,186 +457,13 @@
|
|
|
300
457
|
"text": "IconNames | undefined"
|
|
301
458
|
},
|
|
302
459
|
"description": "The leading icon that is displayed before the header text.",
|
|
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",
|
|
460
|
+
"fieldName": "prefixIcon",
|
|
313
461
|
"inheritedFrom": {
|
|
314
|
-
"name": "
|
|
315
|
-
"module": "src/
|
|
462
|
+
"name": "AccordionButton",
|
|
463
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
316
464
|
}
|
|
317
465
|
}
|
|
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
|
|
332
|
-
}
|
|
333
|
-
],
|
|
334
|
-
"exports": [
|
|
335
|
-
{
|
|
336
|
-
"kind": "js",
|
|
337
|
-
"name": "default",
|
|
338
|
-
"declaration": {
|
|
339
|
-
"name": "AccordionButton",
|
|
340
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
341
|
-
}
|
|
342
|
-
}
|
|
343
|
-
]
|
|
344
|
-
},
|
|
345
|
-
{
|
|
346
|
-
"kind": "javascript-module",
|
|
347
|
-
"path": "components/accordiongroup/accordiongroup.component.js",
|
|
348
|
-
"declarations": [
|
|
349
|
-
{
|
|
350
|
-
"kind": "class",
|
|
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",
|
|
353
|
-
"cssProperties": [
|
|
354
|
-
{
|
|
355
|
-
"description": "The border color of the entire accordiongroup",
|
|
356
|
-
"name": "--mdc-accordiongroup-border-color"
|
|
357
|
-
}
|
|
358
|
-
],
|
|
359
|
-
"slots": [
|
|
360
|
-
{
|
|
361
|
-
"description": "The default slot can contain the `accordion` or `accordionbutton` components.",
|
|
362
|
-
"name": "default"
|
|
363
|
-
}
|
|
364
|
-
],
|
|
365
|
-
"members": [
|
|
366
|
-
{
|
|
367
|
-
"kind": "field",
|
|
368
|
-
"name": "size",
|
|
369
|
-
"type": {
|
|
370
|
-
"text": "Size"
|
|
371
|
-
},
|
|
372
|
-
"description": "The size of the accordion item.",
|
|
373
|
-
"default": "'small'",
|
|
374
|
-
"attribute": "size",
|
|
375
|
-
"reflects": true
|
|
376
|
-
},
|
|
377
|
-
{
|
|
378
|
-
"kind": "field",
|
|
379
|
-
"name": "variant",
|
|
380
|
-
"type": {
|
|
381
|
-
"text": "Variant"
|
|
382
|
-
},
|
|
383
|
-
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
384
|
-
"default": "'stacked'",
|
|
385
|
-
"attribute": "variant",
|
|
386
|
-
"reflects": true
|
|
387
|
-
},
|
|
388
|
-
{
|
|
389
|
-
"kind": "field",
|
|
390
|
-
"name": "allowMultiple",
|
|
391
|
-
"type": {
|
|
392
|
-
"text": "boolean"
|
|
393
|
-
},
|
|
394
|
-
"default": "false",
|
|
395
|
-
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
396
|
-
"attribute": "allow-multiple",
|
|
397
|
-
"reflects": true
|
|
398
|
-
},
|
|
399
|
-
{
|
|
400
|
-
"kind": "method",
|
|
401
|
-
"name": "handleAccordionExpanded",
|
|
402
|
-
"privacy": "private",
|
|
403
|
-
"return": {
|
|
404
|
-
"type": {
|
|
405
|
-
"text": "void"
|
|
406
|
-
}
|
|
407
|
-
},
|
|
408
|
-
"parameters": [
|
|
409
|
-
{
|
|
410
|
-
"name": "event",
|
|
411
|
-
"type": {
|
|
412
|
-
"text": "Event"
|
|
413
|
-
},
|
|
414
|
-
"description": "The event object from the 'shown' event."
|
|
415
|
-
}
|
|
416
|
-
],
|
|
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."
|
|
418
|
-
},
|
|
419
|
-
{
|
|
420
|
-
"kind": "method",
|
|
421
|
-
"name": "setChildrenAccordionAttributes",
|
|
422
|
-
"privacy": "private",
|
|
423
|
-
"return": {
|
|
424
|
-
"type": {
|
|
425
|
-
"text": "void"
|
|
426
|
-
}
|
|
427
|
-
},
|
|
428
|
-
"parameters": [
|
|
429
|
-
{
|
|
430
|
-
"name": "attributeName",
|
|
431
|
-
"type": {
|
|
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."
|
|
442
|
-
}
|
|
443
|
-
],
|
|
444
|
-
"description": "Sets the given attribute on all child accordion or accordionbutton components."
|
|
445
|
-
}
|
|
446
|
-
],
|
|
447
|
-
"attributes": [
|
|
448
|
-
{
|
|
449
|
-
"name": "size",
|
|
450
|
-
"type": {
|
|
451
|
-
"text": "Size"
|
|
452
|
-
},
|
|
453
|
-
"description": "The size of the accordion item.",
|
|
454
|
-
"default": "'small'",
|
|
455
|
-
"fieldName": "size"
|
|
456
|
-
},
|
|
457
|
-
{
|
|
458
|
-
"name": "variant",
|
|
459
|
-
"type": {
|
|
460
|
-
"text": "Variant"
|
|
461
|
-
},
|
|
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"
|
|
465
|
-
},
|
|
466
|
-
{
|
|
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
|
|
466
|
+
]
|
|
483
467
|
}
|
|
484
468
|
],
|
|
485
469
|
"exports": [
|
|
@@ -487,157 +471,71 @@
|
|
|
487
471
|
"kind": "js",
|
|
488
472
|
"name": "default",
|
|
489
473
|
"declaration": {
|
|
490
|
-
"name": "
|
|
491
|
-
"module": "components/
|
|
474
|
+
"name": "Accordion",
|
|
475
|
+
"module": "components/accordion/accordion.component.js"
|
|
492
476
|
}
|
|
493
477
|
}
|
|
494
478
|
]
|
|
495
479
|
},
|
|
496
480
|
{
|
|
497
481
|
"kind": "javascript-module",
|
|
498
|
-
"path": "components/
|
|
482
|
+
"path": "components/accordionbutton/accordionbutton.component.js",
|
|
499
483
|
"declarations": [
|
|
500
484
|
{
|
|
501
485
|
"kind": "class",
|
|
502
|
-
"description": "An accordion contains a header and body section with
|
|
503
|
-
"name": "
|
|
486
|
+
"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.",
|
|
487
|
+
"name": "AccordionButton",
|
|
504
488
|
"cssProperties": [
|
|
505
489
|
{
|
|
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
|
-
}
|
|
490
|
+
"description": "The border color of the accordion button.",
|
|
491
|
+
"name": "--mdc-accordionbutton-border-color"
|
|
512
492
|
},
|
|
513
493
|
{
|
|
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
|
-
}
|
|
494
|
+
"description": "The hover color of the accordion button.",
|
|
495
|
+
"name": "--mdc-accordionbutton-hover-color"
|
|
520
496
|
},
|
|
521
497
|
{
|
|
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
|
-
}
|
|
498
|
+
"description": "The active color of the accordion button.",
|
|
499
|
+
"name": "--mdc-accordionbutton-active-color"
|
|
528
500
|
},
|
|
529
501
|
{
|
|
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
|
-
}
|
|
502
|
+
"description": "The disabled color of the accordion button.",
|
|
503
|
+
"name": "--mdc-accordionbutton-disabled-color"
|
|
536
504
|
}
|
|
537
505
|
],
|
|
538
506
|
"cssParts": [
|
|
539
507
|
{
|
|
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
|
-
}
|
|
508
|
+
"description": "The header section of the accordion button.",
|
|
509
|
+
"name": "header-section"
|
|
554
510
|
},
|
|
555
511
|
{
|
|
556
|
-
"description": "The
|
|
557
|
-
"name": "
|
|
558
|
-
"inheritedFrom": {
|
|
559
|
-
"name": "AccordionButton",
|
|
560
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
561
|
-
}
|
|
512
|
+
"description": "The header button section of the accordion button.",
|
|
513
|
+
"name": "header-button-section"
|
|
562
514
|
},
|
|
563
515
|
{
|
|
564
|
-
"description": "The
|
|
565
|
-
"name": "
|
|
516
|
+
"description": "The leading header of the accordion button.",
|
|
517
|
+
"name": "leading-header"
|
|
566
518
|
},
|
|
567
519
|
{
|
|
568
|
-
"description": "The
|
|
569
|
-
"name": "
|
|
570
|
-
"inheritedFrom": {
|
|
571
|
-
"name": "AccordionButton",
|
|
572
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
573
|
-
}
|
|
520
|
+
"description": "The trailing header of the accordion button.",
|
|
521
|
+
"name": "trailing-header"
|
|
574
522
|
},
|
|
575
523
|
{
|
|
576
|
-
"description": "The header
|
|
577
|
-
"name": "
|
|
578
|
-
"inheritedFrom": {
|
|
579
|
-
"name": "AccordionButton",
|
|
580
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
581
|
-
}
|
|
524
|
+
"description": "The trailing header icon of the accordion button.",
|
|
525
|
+
"name": "trailing-header__icon"
|
|
582
526
|
},
|
|
583
527
|
{
|
|
584
|
-
"description": "The
|
|
585
|
-
"name": "
|
|
586
|
-
"inheritedFrom": {
|
|
587
|
-
"name": "AccordionButton",
|
|
588
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
589
|
-
}
|
|
528
|
+
"description": "The body section of the accordion button.",
|
|
529
|
+
"name": "body-section"
|
|
590
530
|
}
|
|
591
531
|
],
|
|
592
532
|
"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
533
|
{
|
|
602
534
|
"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
|
-
}
|
|
535
|
+
"name": "default"
|
|
608
536
|
}
|
|
609
537
|
],
|
|
610
538
|
"members": [
|
|
611
|
-
{
|
|
612
|
-
"kind": "method",
|
|
613
|
-
"name": "renderHeader",
|
|
614
|
-
"privacy": "protected",
|
|
615
|
-
"return": {
|
|
616
|
-
"type": {
|
|
617
|
-
"text": ""
|
|
618
|
-
}
|
|
619
|
-
},
|
|
620
|
-
"description": "Renders the header section of the accordion.\nThis includes the leading icon, text and controls, and the trailing controls.\nThe trailing controls include the expand/collapse button.\nThe button is disabled if the accordion is disabled.\nThe button is also given the aria-controls attribute set to the id of the body section.\nThe button is also given the aria-expanded attribute set to the expanded state of the accordion.\nThe prefix icon of the button is set to the expanded state of the accordion.",
|
|
621
|
-
"inheritedFrom": {
|
|
622
|
-
"name": "AccordionButton",
|
|
623
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
624
|
-
}
|
|
625
|
-
},
|
|
626
|
-
{
|
|
627
|
-
"kind": "field",
|
|
628
|
-
"name": "disabled",
|
|
629
|
-
"type": {
|
|
630
|
-
"text": "boolean | undefined"
|
|
631
|
-
},
|
|
632
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
633
|
-
"default": "undefined",
|
|
634
|
-
"attribute": "disabled",
|
|
635
|
-
"reflects": true,
|
|
636
|
-
"inheritedFrom": {
|
|
637
|
-
"name": "AccordionButton",
|
|
638
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
639
|
-
}
|
|
640
|
-
},
|
|
641
539
|
{
|
|
642
540
|
"kind": "field",
|
|
643
541
|
"name": "size",
|
|
@@ -647,11 +545,7 @@
|
|
|
647
545
|
"description": "The size of the accordion item.",
|
|
648
546
|
"default": "'small'",
|
|
649
547
|
"attribute": "size",
|
|
650
|
-
"reflects": true
|
|
651
|
-
"inheritedFrom": {
|
|
652
|
-
"name": "AccordionButton",
|
|
653
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
654
|
-
}
|
|
548
|
+
"reflects": true
|
|
655
549
|
},
|
|
656
550
|
{
|
|
657
551
|
"kind": "field",
|
|
@@ -662,11 +556,7 @@
|
|
|
662
556
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
663
557
|
"default": "'default'",
|
|
664
558
|
"attribute": "variant",
|
|
665
|
-
"reflects": true
|
|
666
|
-
"inheritedFrom": {
|
|
667
|
-
"name": "AccordionButton",
|
|
668
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
669
|
-
}
|
|
559
|
+
"reflects": true
|
|
670
560
|
},
|
|
671
561
|
{
|
|
672
562
|
"kind": "field",
|
|
@@ -677,11 +567,7 @@
|
|
|
677
567
|
"description": "The aria level of the accordion component.",
|
|
678
568
|
"default": "3",
|
|
679
569
|
"attribute": "data-aria-level",
|
|
680
|
-
"reflects": true
|
|
681
|
-
"inheritedFrom": {
|
|
682
|
-
"name": "AccordionButton",
|
|
683
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
684
|
-
}
|
|
570
|
+
"reflects": true
|
|
685
571
|
},
|
|
686
572
|
{
|
|
687
573
|
"kind": "field",
|
|
@@ -690,13 +576,9 @@
|
|
|
690
576
|
"text": "boolean"
|
|
691
577
|
},
|
|
692
578
|
"description": "The visibility of the accordion button.",
|
|
693
|
-
"default": "false",
|
|
694
|
-
"attribute": "expanded",
|
|
695
|
-
"reflects": true
|
|
696
|
-
"inheritedFrom": {
|
|
697
|
-
"name": "AccordionButton",
|
|
698
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
699
|
-
}
|
|
579
|
+
"default": "false",
|
|
580
|
+
"attribute": "expanded",
|
|
581
|
+
"reflects": true
|
|
700
582
|
},
|
|
701
583
|
{
|
|
702
584
|
"kind": "field",
|
|
@@ -706,11 +588,7 @@
|
|
|
706
588
|
},
|
|
707
589
|
"description": "The header text of the accordion item.",
|
|
708
590
|
"attribute": "header-text",
|
|
709
|
-
"reflects": true
|
|
710
|
-
"inheritedFrom": {
|
|
711
|
-
"name": "AccordionButton",
|
|
712
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
713
|
-
}
|
|
591
|
+
"reflects": true
|
|
714
592
|
},
|
|
715
593
|
{
|
|
716
594
|
"kind": "field",
|
|
@@ -719,11 +597,7 @@
|
|
|
719
597
|
"text": "IconNames | undefined"
|
|
720
598
|
},
|
|
721
599
|
"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
|
-
}
|
|
600
|
+
"attribute": "prefix-icon"
|
|
727
601
|
},
|
|
728
602
|
{
|
|
729
603
|
"kind": "method",
|
|
@@ -734,11 +608,7 @@
|
|
|
734
608
|
"text": "void"
|
|
735
609
|
}
|
|
736
610
|
},
|
|
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
|
-
}
|
|
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."
|
|
742
612
|
},
|
|
743
613
|
{
|
|
744
614
|
"kind": "method",
|
|
@@ -749,11 +619,7 @@
|
|
|
749
619
|
"text": "void"
|
|
750
620
|
}
|
|
751
621
|
},
|
|
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
|
-
}
|
|
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."
|
|
757
623
|
},
|
|
758
624
|
{
|
|
759
625
|
"kind": "method",
|
|
@@ -773,11 +639,7 @@
|
|
|
773
639
|
"description": "The KeyboardEvent fired."
|
|
774
640
|
}
|
|
775
641
|
],
|
|
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
|
-
}
|
|
642
|
+
"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."
|
|
781
643
|
},
|
|
782
644
|
{
|
|
783
645
|
"kind": "method",
|
|
@@ -796,11 +658,7 @@
|
|
|
796
658
|
"text": "IconNames"
|
|
797
659
|
}
|
|
798
660
|
}
|
|
799
|
-
]
|
|
800
|
-
"inheritedFrom": {
|
|
801
|
-
"name": "AccordionButton",
|
|
802
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
803
|
-
}
|
|
661
|
+
]
|
|
804
662
|
},
|
|
805
663
|
{
|
|
806
664
|
"kind": "method",
|
|
@@ -810,10 +668,16 @@
|
|
|
810
668
|
"type": {
|
|
811
669
|
"text": "TemplateResult | typeof nothing"
|
|
812
670
|
}
|
|
813
|
-
}
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
671
|
+
}
|
|
672
|
+
},
|
|
673
|
+
{
|
|
674
|
+
"kind": "method",
|
|
675
|
+
"name": "renderHeader",
|
|
676
|
+
"privacy": "protected",
|
|
677
|
+
"return": {
|
|
678
|
+
"type": {
|
|
679
|
+
"text": "TemplateResult"
|
|
680
|
+
}
|
|
817
681
|
}
|
|
818
682
|
},
|
|
819
683
|
{
|
|
@@ -825,11 +689,7 @@
|
|
|
825
689
|
"text": ""
|
|
826
690
|
}
|
|
827
691
|
},
|
|
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
|
-
}
|
|
692
|
+
"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."
|
|
833
693
|
},
|
|
834
694
|
{
|
|
835
695
|
"kind": "method",
|
|
@@ -839,45 +699,32 @@
|
|
|
839
699
|
"type": {
|
|
840
700
|
"text": "TemplateResult | typeof nothing"
|
|
841
701
|
}
|
|
702
|
+
}
|
|
703
|
+
},
|
|
704
|
+
{
|
|
705
|
+
"kind": "field",
|
|
706
|
+
"name": "disabled",
|
|
707
|
+
"type": {
|
|
708
|
+
"text": "boolean | undefined"
|
|
842
709
|
},
|
|
710
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
711
|
+
"default": "undefined",
|
|
712
|
+
"attribute": "disabled",
|
|
713
|
+
"reflects": true,
|
|
843
714
|
"inheritedFrom": {
|
|
844
|
-
"name": "
|
|
845
|
-
"module": "
|
|
715
|
+
"name": "DisabledMixin",
|
|
716
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
846
717
|
}
|
|
847
718
|
}
|
|
848
719
|
],
|
|
849
720
|
"events": [
|
|
850
721
|
{
|
|
851
|
-
"description": "(React: onShown) This event is triggered when the accordion is expanded.",
|
|
722
|
+
"description": "(React: onShown) This event is triggered when the accordion button is expanded.",
|
|
852
723
|
"name": "shown",
|
|
853
|
-
"reactName": "onShown"
|
|
854
|
-
"inheritedFrom": {
|
|
855
|
-
"name": "AccordionButton",
|
|
856
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
857
|
-
}
|
|
724
|
+
"reactName": "onShown"
|
|
858
725
|
}
|
|
859
726
|
],
|
|
860
|
-
"superclass": {
|
|
861
|
-
"name": "AccordionButton",
|
|
862
|
-
"module": "/src/components/accordionbutton/accordionbutton.component"
|
|
863
|
-
},
|
|
864
|
-
"tagName": "mdc-accordion",
|
|
865
|
-
"jsDoc": "/**\n * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.\n *\n * @tagname mdc-accordion\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot leading-controls - The leading controls slot of the accordion on the header section.\n * @slot trailing-controls - The trailing controls slot of the accordion on the header section.\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.\n *\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n * @csspart body-section - The body section of the accordion.\n */",
|
|
866
|
-
"customElement": true,
|
|
867
727
|
"attributes": [
|
|
868
|
-
{
|
|
869
|
-
"name": "disabled",
|
|
870
|
-
"type": {
|
|
871
|
-
"text": "boolean | undefined"
|
|
872
|
-
},
|
|
873
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
874
|
-
"default": "undefined",
|
|
875
|
-
"fieldName": "disabled",
|
|
876
|
-
"inheritedFrom": {
|
|
877
|
-
"name": "AccordionButton",
|
|
878
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
879
|
-
}
|
|
880
|
-
},
|
|
881
728
|
{
|
|
882
729
|
"name": "size",
|
|
883
730
|
"type": {
|
|
@@ -885,11 +732,7 @@
|
|
|
885
732
|
},
|
|
886
733
|
"description": "The size of the accordion item.",
|
|
887
734
|
"default": "'small'",
|
|
888
|
-
"fieldName": "size"
|
|
889
|
-
"inheritedFrom": {
|
|
890
|
-
"name": "AccordionButton",
|
|
891
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
892
|
-
}
|
|
735
|
+
"fieldName": "size"
|
|
893
736
|
},
|
|
894
737
|
{
|
|
895
738
|
"name": "variant",
|
|
@@ -898,11 +741,7 @@
|
|
|
898
741
|
},
|
|
899
742
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
900
743
|
"default": "'default'",
|
|
901
|
-
"fieldName": "variant"
|
|
902
|
-
"inheritedFrom": {
|
|
903
|
-
"name": "AccordionButton",
|
|
904
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
905
|
-
}
|
|
744
|
+
"fieldName": "variant"
|
|
906
745
|
},
|
|
907
746
|
{
|
|
908
747
|
"name": "data-aria-level",
|
|
@@ -911,11 +750,7 @@
|
|
|
911
750
|
},
|
|
912
751
|
"description": "The aria level of the accordion component.",
|
|
913
752
|
"default": "3",
|
|
914
|
-
"fieldName": "dataAriaLevel"
|
|
915
|
-
"inheritedFrom": {
|
|
916
|
-
"name": "AccordionButton",
|
|
917
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
918
|
-
}
|
|
753
|
+
"fieldName": "dataAriaLevel"
|
|
919
754
|
},
|
|
920
755
|
{
|
|
921
756
|
"name": "expanded",
|
|
@@ -924,11 +759,7 @@
|
|
|
924
759
|
},
|
|
925
760
|
"description": "The visibility of the accordion button.",
|
|
926
761
|
"default": "false",
|
|
927
|
-
"fieldName": "expanded"
|
|
928
|
-
"inheritedFrom": {
|
|
929
|
-
"name": "AccordionButton",
|
|
930
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
931
|
-
}
|
|
762
|
+
"fieldName": "expanded"
|
|
932
763
|
},
|
|
933
764
|
{
|
|
934
765
|
"name": "header-text",
|
|
@@ -936,11 +767,7 @@
|
|
|
936
767
|
"text": "string | undefined"
|
|
937
768
|
},
|
|
938
769
|
"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
|
-
}
|
|
770
|
+
"fieldName": "headerText"
|
|
944
771
|
},
|
|
945
772
|
{
|
|
946
773
|
"name": "prefix-icon",
|
|
@@ -948,13 +775,35 @@
|
|
|
948
775
|
"text": "IconNames | undefined"
|
|
949
776
|
},
|
|
950
777
|
"description": "The leading icon that is displayed before the header text.",
|
|
951
|
-
"fieldName": "prefixIcon"
|
|
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",
|
|
952
788
|
"inheritedFrom": {
|
|
953
|
-
"name": "
|
|
954
|
-
"module": "src/
|
|
789
|
+
"name": "DisabledMixin",
|
|
790
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
955
791
|
}
|
|
956
792
|
}
|
|
957
|
-
]
|
|
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
|
|
958
807
|
}
|
|
959
808
|
],
|
|
960
809
|
"exports": [
|
|
@@ -962,8 +811,159 @@
|
|
|
962
811
|
"kind": "js",
|
|
963
812
|
"name": "default",
|
|
964
813
|
"declaration": {
|
|
965
|
-
"name": "
|
|
966
|
-
"module": "components/
|
|
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": [
|
|
841
|
+
{
|
|
842
|
+
"kind": "field",
|
|
843
|
+
"name": "size",
|
|
844
|
+
"type": {
|
|
845
|
+
"text": "Size"
|
|
846
|
+
},
|
|
847
|
+
"description": "The size of the accordion item.",
|
|
848
|
+
"default": "'small'",
|
|
849
|
+
"attribute": "size",
|
|
850
|
+
"reflects": true
|
|
851
|
+
},
|
|
852
|
+
{
|
|
853
|
+
"kind": "field",
|
|
854
|
+
"name": "variant",
|
|
855
|
+
"type": {
|
|
856
|
+
"text": "Variant"
|
|
857
|
+
},
|
|
858
|
+
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
859
|
+
"default": "'stacked'",
|
|
860
|
+
"attribute": "variant",
|
|
861
|
+
"reflects": true
|
|
862
|
+
},
|
|
863
|
+
{
|
|
864
|
+
"kind": "field",
|
|
865
|
+
"name": "allowMultiple",
|
|
866
|
+
"type": {
|
|
867
|
+
"text": "boolean"
|
|
868
|
+
},
|
|
869
|
+
"default": "false",
|
|
870
|
+
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
871
|
+
"attribute": "allow-multiple",
|
|
872
|
+
"reflects": true
|
|
873
|
+
},
|
|
874
|
+
{
|
|
875
|
+
"kind": "method",
|
|
876
|
+
"name": "handleAccordionExpanded",
|
|
877
|
+
"privacy": "private",
|
|
878
|
+
"return": {
|
|
879
|
+
"type": {
|
|
880
|
+
"text": "void"
|
|
881
|
+
}
|
|
882
|
+
},
|
|
883
|
+
"parameters": [
|
|
884
|
+
{
|
|
885
|
+
"name": "event",
|
|
886
|
+
"type": {
|
|
887
|
+
"text": "Event"
|
|
888
|
+
},
|
|
889
|
+
"description": "The event object from the 'shown' event."
|
|
890
|
+
}
|
|
891
|
+
],
|
|
892
|
+
"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."
|
|
893
|
+
},
|
|
894
|
+
{
|
|
895
|
+
"kind": "method",
|
|
896
|
+
"name": "setChildrenAccordionAttributes",
|
|
897
|
+
"privacy": "private",
|
|
898
|
+
"return": {
|
|
899
|
+
"type": {
|
|
900
|
+
"text": "void"
|
|
901
|
+
}
|
|
902
|
+
},
|
|
903
|
+
"parameters": [
|
|
904
|
+
{
|
|
905
|
+
"name": "attributeName",
|
|
906
|
+
"type": {
|
|
907
|
+
"text": "string"
|
|
908
|
+
},
|
|
909
|
+
"description": "The name of the attribute to set."
|
|
910
|
+
},
|
|
911
|
+
{
|
|
912
|
+
"name": "attributeValue",
|
|
913
|
+
"type": {
|
|
914
|
+
"text": "string"
|
|
915
|
+
},
|
|
916
|
+
"description": "The value to set the attribute to."
|
|
917
|
+
}
|
|
918
|
+
],
|
|
919
|
+
"description": "Sets the given attribute on all child accordion or accordionbutton components."
|
|
920
|
+
}
|
|
921
|
+
],
|
|
922
|
+
"attributes": [
|
|
923
|
+
{
|
|
924
|
+
"name": "size",
|
|
925
|
+
"type": {
|
|
926
|
+
"text": "Size"
|
|
927
|
+
},
|
|
928
|
+
"description": "The size of the accordion item.",
|
|
929
|
+
"default": "'small'",
|
|
930
|
+
"fieldName": "size"
|
|
931
|
+
},
|
|
932
|
+
{
|
|
933
|
+
"name": "variant",
|
|
934
|
+
"type": {
|
|
935
|
+
"text": "Variant"
|
|
936
|
+
},
|
|
937
|
+
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
938
|
+
"default": "'stacked'",
|
|
939
|
+
"fieldName": "variant"
|
|
940
|
+
},
|
|
941
|
+
{
|
|
942
|
+
"name": "allow-multiple",
|
|
943
|
+
"type": {
|
|
944
|
+
"text": "boolean"
|
|
945
|
+
},
|
|
946
|
+
"default": "false",
|
|
947
|
+
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
948
|
+
"fieldName": "allowMultiple"
|
|
949
|
+
}
|
|
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
|
|
958
|
+
}
|
|
959
|
+
],
|
|
960
|
+
"exports": [
|
|
961
|
+
{
|
|
962
|
+
"kind": "js",
|
|
963
|
+
"name": "default",
|
|
964
|
+
"declaration": {
|
|
965
|
+
"name": "AccordionGroup",
|
|
966
|
+
"module": "components/accordiongroup/accordiongroup.component.js"
|
|
967
967
|
}
|
|
968
968
|
}
|
|
969
969
|
]
|
|
@@ -17153,24 +17153,33 @@
|
|
|
17153
17153
|
],
|
|
17154
17154
|
"members": [
|
|
17155
17155
|
{
|
|
17156
|
-
"kind": "
|
|
17157
|
-
"name": "
|
|
17158
|
-
"
|
|
17159
|
-
|
|
17160
|
-
"type": {
|
|
17161
|
-
"text": "void"
|
|
17162
|
-
}
|
|
17156
|
+
"kind": "field",
|
|
17157
|
+
"name": "loop",
|
|
17158
|
+
"type": {
|
|
17159
|
+
"text": "'true' | 'false'"
|
|
17163
17160
|
},
|
|
17164
|
-
"
|
|
17165
|
-
|
|
17166
|
-
|
|
17167
|
-
|
|
17168
|
-
|
|
17169
|
-
|
|
17170
|
-
|
|
17171
|
-
|
|
17172
|
-
|
|
17173
|
-
"
|
|
17161
|
+
"privacy": "public",
|
|
17162
|
+
"description": "Whether to loop navigation when reaching the end of the list.\nIf 'true', pressing the down arrow on the last item will focus the first item,\nand pressing the up arrow on the first item will focus the last item.\nIf 'false', navigation will stop at the first or last item.",
|
|
17163
|
+
"default": "''",
|
|
17164
|
+
"attribute": "loop",
|
|
17165
|
+
"reflects": true
|
|
17166
|
+
},
|
|
17167
|
+
{
|
|
17168
|
+
"kind": "field",
|
|
17169
|
+
"name": "initialFocus",
|
|
17170
|
+
"type": {
|
|
17171
|
+
"text": "number"
|
|
17172
|
+
},
|
|
17173
|
+
"privacy": "public",
|
|
17174
|
+
"description": "The index of the item that should receive focus when the list is first rendered.\nIf the index is out of bounds, the first item (index 0) will receive focus.",
|
|
17175
|
+
"default": "0",
|
|
17176
|
+
"attribute": "initial-focus",
|
|
17177
|
+
"reflects": true
|
|
17178
|
+
},
|
|
17179
|
+
{
|
|
17180
|
+
"kind": "field",
|
|
17181
|
+
"name": "itemsStore",
|
|
17182
|
+
"default": "new ElementStore<ListItem>(this, { isValidItem: this.isValidItem, })"
|
|
17174
17183
|
},
|
|
17175
17184
|
{
|
|
17176
17185
|
"kind": "method",
|
|
@@ -17187,79 +17196,140 @@
|
|
|
17187
17196
|
"type": {
|
|
17188
17197
|
"text": "EventTarget | null"
|
|
17189
17198
|
},
|
|
17190
|
-
"description": "The target element
|
|
17199
|
+
"description": "The target element that triggered the event."
|
|
17191
17200
|
}
|
|
17192
17201
|
],
|
|
17193
|
-
"description": "
|
|
17202
|
+
"description": "Retrieves the current index of the item that triggered the event.",
|
|
17203
|
+
"inheritedFrom": {
|
|
17204
|
+
"name": "ListNavigationMixin",
|
|
17205
|
+
"module": "utils/mixins/ListNavigationMixin.js"
|
|
17206
|
+
}
|
|
17194
17207
|
},
|
|
17195
17208
|
{
|
|
17196
17209
|
"kind": "method",
|
|
17197
|
-
"name": "
|
|
17198
|
-
"privacy": "
|
|
17199
|
-
"return": {
|
|
17200
|
-
"type": {
|
|
17201
|
-
"text": ""
|
|
17202
|
-
}
|
|
17203
|
-
},
|
|
17210
|
+
"name": "resetTabIndexes",
|
|
17211
|
+
"privacy": "protected",
|
|
17204
17212
|
"parameters": [
|
|
17205
17213
|
{
|
|
17206
|
-
"name": "
|
|
17214
|
+
"name": "index",
|
|
17207
17215
|
"type": {
|
|
17208
|
-
"text": "
|
|
17216
|
+
"text": "number"
|
|
17209
17217
|
},
|
|
17210
|
-
"description": "The
|
|
17211
|
-
}
|
|
17218
|
+
"description": "The index of the currently focused item."
|
|
17219
|
+
}
|
|
17220
|
+
],
|
|
17221
|
+
"description": "Reset all tabindex to -1 and set the tabindex of the current item to 0",
|
|
17222
|
+
"inheritedFrom": {
|
|
17223
|
+
"name": "ListNavigationMixin",
|
|
17224
|
+
"module": "utils/mixins/ListNavigationMixin.js"
|
|
17225
|
+
}
|
|
17226
|
+
},
|
|
17227
|
+
{
|
|
17228
|
+
"kind": "method",
|
|
17229
|
+
"name": "resetTabIndexAndSetFocus",
|
|
17230
|
+
"privacy": "protected",
|
|
17231
|
+
"parameters": [
|
|
17212
17232
|
{
|
|
17213
|
-
"name": "
|
|
17233
|
+
"name": "newIndex",
|
|
17214
17234
|
"type": {
|
|
17215
17235
|
"text": "number"
|
|
17216
17236
|
},
|
|
17217
|
-
"description": "The
|
|
17237
|
+
"description": "The index of the new item to focus."
|
|
17218
17238
|
},
|
|
17219
17239
|
{
|
|
17220
|
-
"name": "
|
|
17240
|
+
"name": "oldIndex",
|
|
17241
|
+
"optional": true,
|
|
17221
17242
|
"type": {
|
|
17222
17243
|
"text": "number"
|
|
17223
17244
|
},
|
|
17224
|
-
"description": "The
|
|
17245
|
+
"description": "The index of the currently focused item."
|
|
17246
|
+
},
|
|
17247
|
+
{
|
|
17248
|
+
"name": "focusNewItem",
|
|
17249
|
+
"default": "true",
|
|
17250
|
+
"description": "Call focus() on the new item or not. It should be false during firstUpdate"
|
|
17225
17251
|
}
|
|
17226
17252
|
],
|
|
17227
|
-
"description": "
|
|
17228
|
-
},
|
|
17229
|
-
{
|
|
17230
|
-
"kind": "method",
|
|
17231
|
-
"name": "handleMouseClick",
|
|
17232
|
-
"privacy": "protected",
|
|
17253
|
+
"description": "Resets the tabindex of the currently focused item and sets focus to a new item.",
|
|
17233
17254
|
"return": {
|
|
17234
17255
|
"type": {
|
|
17235
|
-
"text": "
|
|
17256
|
+
"text": ""
|
|
17236
17257
|
}
|
|
17237
17258
|
},
|
|
17238
|
-
"
|
|
17239
|
-
|
|
17240
|
-
|
|
17241
|
-
|
|
17242
|
-
"text": "MouseEvent"
|
|
17243
|
-
},
|
|
17244
|
-
"description": "The mouse event."
|
|
17245
|
-
}
|
|
17246
|
-
],
|
|
17247
|
-
"description": "Handles the mouse click event on the list element.\nFinds the index of the target element in the list items array and calls\n`resetTabIndexAndSetActiveTabIndex` with that index."
|
|
17259
|
+
"inheritedFrom": {
|
|
17260
|
+
"name": "ListNavigationMixin",
|
|
17261
|
+
"module": "utils/mixins/ListNavigationMixin.js"
|
|
17262
|
+
}
|
|
17248
17263
|
},
|
|
17249
17264
|
{
|
|
17250
17265
|
"kind": "method",
|
|
17251
|
-
"name": "
|
|
17266
|
+
"name": "resolveDirectionKey",
|
|
17252
17267
|
"privacy": "private",
|
|
17253
17268
|
"parameters": [
|
|
17254
17269
|
{
|
|
17255
|
-
"name": "
|
|
17270
|
+
"name": "key",
|
|
17256
17271
|
"type": {
|
|
17257
|
-
"text": "
|
|
17272
|
+
"text": "string"
|
|
17273
|
+
},
|
|
17274
|
+
"description": "The key pressed by the user."
|
|
17275
|
+
},
|
|
17276
|
+
{
|
|
17277
|
+
"name": "isRtl",
|
|
17278
|
+
"type": {
|
|
17279
|
+
"text": "boolean"
|
|
17258
17280
|
},
|
|
17259
|
-
"description": "
|
|
17281
|
+
"description": "A boolean indicating if the layout is right-to-left (RTL)."
|
|
17260
17282
|
}
|
|
17261
17283
|
],
|
|
17262
|
-
"description": "
|
|
17284
|
+
"description": "Resolves the key pressed by the user based on the direction of the layout.\nThis method is used to handle keyboard navigation in a right-to-left (RTL) layout.\nIt checks if the layout is RTL and adjusts the arrow keys accordingly.\nFor example, in RTL, the left arrow key behaves like the right arrow key and vice versa.",
|
|
17285
|
+
"return": {
|
|
17286
|
+
"type": {
|
|
17287
|
+
"text": ""
|
|
17288
|
+
}
|
|
17289
|
+
},
|
|
17290
|
+
"inheritedFrom": {
|
|
17291
|
+
"name": "ListNavigationMixin",
|
|
17292
|
+
"module": "utils/mixins/ListNavigationMixin.js"
|
|
17293
|
+
}
|
|
17294
|
+
},
|
|
17295
|
+
{
|
|
17296
|
+
"kind": "method",
|
|
17297
|
+
"name": "shouldLoop",
|
|
17298
|
+
"privacy": "private",
|
|
17299
|
+
"inheritedFrom": {
|
|
17300
|
+
"name": "ListNavigationMixin",
|
|
17301
|
+
"module": "utils/mixins/ListNavigationMixin.js"
|
|
17302
|
+
}
|
|
17303
|
+
}
|
|
17304
|
+
],
|
|
17305
|
+
"attributes": [
|
|
17306
|
+
{
|
|
17307
|
+
"name": "loop",
|
|
17308
|
+
"type": {
|
|
17309
|
+
"text": "'true' | 'false'"
|
|
17310
|
+
},
|
|
17311
|
+
"description": "Whether to loop navigation when reaching the end of the list.\nIf 'true', pressing the down arrow on the last item will focus the first item,\nand pressing the up arrow on the first item will focus the last item.\nIf 'false', navigation will stop at the first or last item.",
|
|
17312
|
+
"default": "''",
|
|
17313
|
+
"fieldName": "loop"
|
|
17314
|
+
},
|
|
17315
|
+
{
|
|
17316
|
+
"name": "initial-focus",
|
|
17317
|
+
"type": {
|
|
17318
|
+
"text": "number"
|
|
17319
|
+
},
|
|
17320
|
+
"description": "The index of the item that should receive focus when the list is first rendered.\nIf the index is out of bounds, the first item (index 0) will receive focus.",
|
|
17321
|
+
"default": "0",
|
|
17322
|
+
"fieldName": "initialFocus"
|
|
17323
|
+
}
|
|
17324
|
+
],
|
|
17325
|
+
"mixins": [
|
|
17326
|
+
{
|
|
17327
|
+
"name": "ListNavigationMixin",
|
|
17328
|
+
"module": "/src/utils/mixins/ListNavigationMixin"
|
|
17329
|
+
},
|
|
17330
|
+
{
|
|
17331
|
+
"name": "CaptureDestroyEventForChildElement",
|
|
17332
|
+
"module": "/src/utils/mixins/lifecycle/CaptureDestroyEventForChildElement"
|
|
17263
17333
|
}
|
|
17264
17334
|
],
|
|
17265
17335
|
"superclass": {
|
|
@@ -17504,6 +17574,15 @@
|
|
|
17504
17574
|
"name": "ListNavigationMixin",
|
|
17505
17575
|
"module": "utils/mixins/ListNavigationMixin.js"
|
|
17506
17576
|
}
|
|
17577
|
+
},
|
|
17578
|
+
{
|
|
17579
|
+
"kind": "method",
|
|
17580
|
+
"name": "shouldLoop",
|
|
17581
|
+
"privacy": "private",
|
|
17582
|
+
"inheritedFrom": {
|
|
17583
|
+
"name": "ListNavigationMixin",
|
|
17584
|
+
"module": "utils/mixins/ListNavigationMixin.js"
|
|
17585
|
+
}
|
|
17507
17586
|
}
|
|
17508
17587
|
],
|
|
17509
17588
|
"events": [
|
|
@@ -45734,7 +45813,7 @@
|
|
|
45734
45813
|
"kind": "field",
|
|
45735
45814
|
"name": "loop",
|
|
45736
45815
|
"type": {
|
|
45737
|
-
"text": "
|
|
45816
|
+
"text": "'true' | 'false'"
|
|
45738
45817
|
},
|
|
45739
45818
|
"privacy": "protected"
|
|
45740
45819
|
},
|
|
@@ -45746,6 +45825,23 @@
|
|
|
45746
45825
|
},
|
|
45747
45826
|
"privacy": "protected"
|
|
45748
45827
|
},
|
|
45828
|
+
{
|
|
45829
|
+
"kind": "field",
|
|
45830
|
+
"name": "initialFocus",
|
|
45831
|
+
"type": {
|
|
45832
|
+
"text": "number"
|
|
45833
|
+
},
|
|
45834
|
+
"privacy": "protected"
|
|
45835
|
+
},
|
|
45836
|
+
{
|
|
45837
|
+
"kind": "field",
|
|
45838
|
+
"name": "navItems",
|
|
45839
|
+
"type": {
|
|
45840
|
+
"text": "HTMLElement[]"
|
|
45841
|
+
},
|
|
45842
|
+
"privacy": "protected",
|
|
45843
|
+
"readonly": true
|
|
45844
|
+
},
|
|
45749
45845
|
{
|
|
45750
45846
|
"kind": "method",
|
|
45751
45847
|
"name": "resetTabIndexes",
|
|
@@ -45764,15 +45860,6 @@
|
|
|
45764
45860
|
}
|
|
45765
45861
|
]
|
|
45766
45862
|
},
|
|
45767
|
-
{
|
|
45768
|
-
"kind": "field",
|
|
45769
|
-
"name": "navItems",
|
|
45770
|
-
"type": {
|
|
45771
|
-
"text": "HTMLElement[]"
|
|
45772
|
-
},
|
|
45773
|
-
"privacy": "protected",
|
|
45774
|
-
"readonly": true
|
|
45775
|
-
},
|
|
45776
45863
|
{
|
|
45777
45864
|
"kind": "method",
|
|
45778
45865
|
"name": "resetTabIndexAndSetFocus",
|
|
@@ -45906,6 +45993,11 @@
|
|
|
45906
45993
|
"text": ""
|
|
45907
45994
|
}
|
|
45908
45995
|
}
|
|
45996
|
+
},
|
|
45997
|
+
{
|
|
45998
|
+
"kind": "method",
|
|
45999
|
+
"name": "shouldLoop",
|
|
46000
|
+
"privacy": "private"
|
|
45909
46001
|
}
|
|
45910
46002
|
],
|
|
45911
46003
|
"parameters": [
|