@momentum-design/components 0.122.18 → 0.122.20
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 +18 -4
- package/dist/browser/index.js.map +2 -2
- package/dist/components/badge/badge.component.d.ts +2 -0
- package/dist/components/badge/badge.component.js +2 -0
- package/dist/components/badge/badge.styles.js +5 -2
- package/dist/components/buttongroup/buttongroup.component.d.ts +17 -2
- package/dist/components/buttongroup/buttongroup.component.js +17 -2
- package/dist/components/buttongroup/buttongroup.styles.js +2 -2
- package/dist/components/navmenuitem/navmenuitem.styles.js +11 -0
- package/dist/custom-elements.json +509 -501
- package/dist/react/badge/index.d.ts +2 -0
- package/dist/react/badge/index.js +2 -0
- package/dist/react/buttongroup/index.d.ts +17 -2
- package/dist/react/buttongroup/index.js +17 -2
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +1 -1
- package/package.json +1 -1
|
@@ -4,63 +4,169 @@
|
|
|
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 body section of the accordion
|
|
34
|
-
"name": "body-section"
|
|
49
|
+
"description": "The body section of the accordion.",
|
|
50
|
+
"name": "body-section",
|
|
51
|
+
"inheritedFrom": {
|
|
52
|
+
"name": "AccordionButton",
|
|
53
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
54
|
+
}
|
|
35
55
|
},
|
|
36
56
|
{
|
|
37
|
-
"description": "The header
|
|
38
|
-
"name": "header-
|
|
57
|
+
"description": "The header section of the accordion.",
|
|
58
|
+
"name": "header-section",
|
|
59
|
+
"inheritedFrom": {
|
|
60
|
+
"name": "AccordionButton",
|
|
61
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
62
|
+
}
|
|
39
63
|
},
|
|
40
64
|
{
|
|
41
|
-
"description": "The header
|
|
42
|
-
"name": "header
|
|
65
|
+
"description": "The leading header of the accordion.",
|
|
66
|
+
"name": "leading-header",
|
|
67
|
+
"inheritedFrom": {
|
|
68
|
+
"name": "AccordionButton",
|
|
69
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
70
|
+
}
|
|
43
71
|
},
|
|
44
72
|
{
|
|
45
|
-
"description": "The
|
|
46
|
-
"name": "
|
|
73
|
+
"description": "The trailing header of the accordion.",
|
|
74
|
+
"name": "trailing-header",
|
|
75
|
+
"inheritedFrom": {
|
|
76
|
+
"name": "AccordionButton",
|
|
77
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
78
|
+
}
|
|
47
79
|
},
|
|
48
80
|
{
|
|
49
|
-
"description": "The trailing header of the accordion
|
|
50
|
-
"name": "trailing-
|
|
81
|
+
"description": "The trailing header button of the accordion.",
|
|
82
|
+
"name": "trailing-header__button"
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"description": "The header button section of the accordion button.",
|
|
86
|
+
"name": "header-button-section",
|
|
87
|
+
"inheritedFrom": {
|
|
88
|
+
"name": "AccordionButton",
|
|
89
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
90
|
+
}
|
|
51
91
|
},
|
|
52
92
|
{
|
|
53
93
|
"description": "The trailing header icon of the accordion button.",
|
|
54
|
-
"name": "trailing-header__icon"
|
|
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": "field",
|
|
122
|
+
"name": "openButtonAriaLabel",
|
|
123
|
+
"type": {
|
|
124
|
+
"text": "string | undefined"
|
|
125
|
+
},
|
|
126
|
+
"description": "Aria-label attribute for the trigger button when accordion is collapsed.",
|
|
127
|
+
"attribute": "open-button-aria-label",
|
|
128
|
+
"reflects": true
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"kind": "field",
|
|
132
|
+
"name": "closeButtonAriaLabel",
|
|
133
|
+
"type": {
|
|
134
|
+
"text": "string | undefined"
|
|
135
|
+
},
|
|
136
|
+
"description": "Aria-label attribute for the trigger button when accordion is expanded.",
|
|
137
|
+
"attribute": "close-button-aria-label",
|
|
138
|
+
"reflects": true
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
"kind": "method",
|
|
142
|
+
"name": "renderHeader",
|
|
143
|
+
"privacy": "protected",
|
|
144
|
+
"return": {
|
|
145
|
+
"type": {
|
|
146
|
+
"text": ""
|
|
147
|
+
}
|
|
148
|
+
},
|
|
149
|
+
"description": "Renders the header section of the accordion.\nThis includes the leading icon, text and controls, and the trailing controls.\nThe trailing controls include the expand/collapse button.\nThe button is disabled if the accordion is disabled.\nThe button is also given the aria-controls attribute set to the id of the body section.\nThe button is also given the aria-expanded attribute set to the expanded state of the accordion.\nThe prefix icon of the button is set to the expanded state of the accordion.",
|
|
150
|
+
"inheritedFrom": {
|
|
151
|
+
"name": "AccordionButton",
|
|
152
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"kind": "field",
|
|
157
|
+
"name": "disabled",
|
|
158
|
+
"type": {
|
|
159
|
+
"text": "boolean | undefined"
|
|
160
|
+
},
|
|
161
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
162
|
+
"default": "undefined",
|
|
163
|
+
"attribute": "disabled",
|
|
164
|
+
"reflects": true,
|
|
165
|
+
"inheritedFrom": {
|
|
166
|
+
"name": "DisabledMixin",
|
|
167
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
168
|
+
}
|
|
169
|
+
},
|
|
64
170
|
{
|
|
65
171
|
"kind": "field",
|
|
66
172
|
"name": "size",
|
|
@@ -70,7 +176,11 @@
|
|
|
70
176
|
"description": "The size of the accordion item.",
|
|
71
177
|
"default": "'small'",
|
|
72
178
|
"attribute": "size",
|
|
73
|
-
"reflects": true
|
|
179
|
+
"reflects": true,
|
|
180
|
+
"inheritedFrom": {
|
|
181
|
+
"name": "AccordionButton",
|
|
182
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
183
|
+
}
|
|
74
184
|
},
|
|
75
185
|
{
|
|
76
186
|
"kind": "field",
|
|
@@ -81,7 +191,11 @@
|
|
|
81
191
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
82
192
|
"default": "'default'",
|
|
83
193
|
"attribute": "variant",
|
|
84
|
-
"reflects": true
|
|
194
|
+
"reflects": true,
|
|
195
|
+
"inheritedFrom": {
|
|
196
|
+
"name": "AccordionButton",
|
|
197
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
198
|
+
}
|
|
85
199
|
},
|
|
86
200
|
{
|
|
87
201
|
"kind": "field",
|
|
@@ -92,7 +206,11 @@
|
|
|
92
206
|
"description": "The aria level of the accordion component.",
|
|
93
207
|
"default": "3",
|
|
94
208
|
"attribute": "data-aria-level",
|
|
95
|
-
"reflects": true
|
|
209
|
+
"reflects": true,
|
|
210
|
+
"inheritedFrom": {
|
|
211
|
+
"name": "AccordionButton",
|
|
212
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
213
|
+
}
|
|
96
214
|
},
|
|
97
215
|
{
|
|
98
216
|
"kind": "field",
|
|
@@ -103,7 +221,11 @@
|
|
|
103
221
|
"description": "The visibility of the accordion button.",
|
|
104
222
|
"default": "false",
|
|
105
223
|
"attribute": "expanded",
|
|
106
|
-
"reflects": true
|
|
224
|
+
"reflects": true,
|
|
225
|
+
"inheritedFrom": {
|
|
226
|
+
"name": "AccordionButton",
|
|
227
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
228
|
+
}
|
|
107
229
|
},
|
|
108
230
|
{
|
|
109
231
|
"kind": "field",
|
|
@@ -113,7 +235,11 @@
|
|
|
113
235
|
},
|
|
114
236
|
"description": "The header text of the accordion item.",
|
|
115
237
|
"attribute": "header-text",
|
|
116
|
-
"reflects": true
|
|
238
|
+
"reflects": true,
|
|
239
|
+
"inheritedFrom": {
|
|
240
|
+
"name": "AccordionButton",
|
|
241
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
242
|
+
}
|
|
117
243
|
},
|
|
118
244
|
{
|
|
119
245
|
"kind": "field",
|
|
@@ -122,7 +248,11 @@
|
|
|
122
248
|
"text": "IconNames | undefined"
|
|
123
249
|
},
|
|
124
250
|
"description": "The leading icon that is displayed before the header text.",
|
|
125
|
-
"attribute": "prefix-icon"
|
|
251
|
+
"attribute": "prefix-icon",
|
|
252
|
+
"inheritedFrom": {
|
|
253
|
+
"name": "AccordionButton",
|
|
254
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
255
|
+
}
|
|
126
256
|
},
|
|
127
257
|
{
|
|
128
258
|
"kind": "method",
|
|
@@ -133,7 +263,11 @@
|
|
|
133
263
|
"text": "void"
|
|
134
264
|
}
|
|
135
265
|
},
|
|
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."
|
|
266
|
+
"description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state.",
|
|
267
|
+
"inheritedFrom": {
|
|
268
|
+
"name": "AccordionButton",
|
|
269
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
270
|
+
}
|
|
137
271
|
},
|
|
138
272
|
{
|
|
139
273
|
"kind": "method",
|
|
@@ -144,7 +278,11 @@
|
|
|
144
278
|
"text": "void"
|
|
145
279
|
}
|
|
146
280
|
},
|
|
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."
|
|
281
|
+
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state.",
|
|
282
|
+
"inheritedFrom": {
|
|
283
|
+
"name": "AccordionButton",
|
|
284
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
285
|
+
}
|
|
148
286
|
},
|
|
149
287
|
{
|
|
150
288
|
"kind": "method",
|
|
@@ -164,7 +302,11 @@
|
|
|
164
302
|
"description": "The KeyboardEvent fired."
|
|
165
303
|
}
|
|
166
304
|
],
|
|
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."
|
|
305
|
+
"description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys.",
|
|
306
|
+
"inheritedFrom": {
|
|
307
|
+
"name": "AccordionButton",
|
|
308
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
309
|
+
}
|
|
168
310
|
},
|
|
169
311
|
{
|
|
170
312
|
"kind": "method",
|
|
@@ -183,7 +325,11 @@
|
|
|
183
325
|
"text": "IconNames"
|
|
184
326
|
}
|
|
185
327
|
}
|
|
186
|
-
]
|
|
328
|
+
],
|
|
329
|
+
"inheritedFrom": {
|
|
330
|
+
"name": "AccordionButton",
|
|
331
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
332
|
+
}
|
|
187
333
|
},
|
|
188
334
|
{
|
|
189
335
|
"kind": "method",
|
|
@@ -193,16 +339,10 @@
|
|
|
193
339
|
"type": {
|
|
194
340
|
"text": "TemplateResult | typeof nothing"
|
|
195
341
|
}
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
"name": "renderHeader",
|
|
201
|
-
"privacy": "protected",
|
|
202
|
-
"return": {
|
|
203
|
-
"type": {
|
|
204
|
-
"text": "TemplateResult"
|
|
205
|
-
}
|
|
342
|
+
},
|
|
343
|
+
"inheritedFrom": {
|
|
344
|
+
"name": "AccordionButton",
|
|
345
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
206
346
|
}
|
|
207
347
|
},
|
|
208
348
|
{
|
|
@@ -214,7 +354,11 @@
|
|
|
214
354
|
"text": ""
|
|
215
355
|
}
|
|
216
356
|
},
|
|
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."
|
|
357
|
+
"description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon.",
|
|
358
|
+
"inheritedFrom": {
|
|
359
|
+
"name": "AccordionButton",
|
|
360
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
361
|
+
}
|
|
218
362
|
},
|
|
219
363
|
{
|
|
220
364
|
"kind": "method",
|
|
@@ -224,83 +368,40 @@
|
|
|
224
368
|
"type": {
|
|
225
369
|
"text": "TemplateResult | typeof nothing"
|
|
226
370
|
}
|
|
227
|
-
}
|
|
228
|
-
},
|
|
229
|
-
{
|
|
230
|
-
"kind": "field",
|
|
231
|
-
"name": "disabled",
|
|
232
|
-
"type": {
|
|
233
|
-
"text": "boolean | undefined"
|
|
234
371
|
},
|
|
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
372
|
"inheritedFrom": {
|
|
240
|
-
"name": "
|
|
241
|
-
"module": "
|
|
373
|
+
"name": "AccordionButton",
|
|
374
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
242
375
|
}
|
|
243
376
|
}
|
|
244
377
|
],
|
|
245
378
|
"events": [
|
|
246
379
|
{
|
|
247
|
-
"description": "(React: onShown) This event is triggered when the accordion
|
|
380
|
+
"description": "(React: onShown) This event is triggered when the accordion is expanded.",
|
|
248
381
|
"name": "shown",
|
|
249
|
-
"reactName": "onShown"
|
|
382
|
+
"reactName": "onShown",
|
|
383
|
+
"inheritedFrom": {
|
|
384
|
+
"name": "AccordionButton",
|
|
385
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
386
|
+
}
|
|
250
387
|
}
|
|
251
388
|
],
|
|
252
389
|
"attributes": [
|
|
253
390
|
{
|
|
254
|
-
"name": "
|
|
255
|
-
"type": {
|
|
256
|
-
"text": "Size"
|
|
257
|
-
},
|
|
258
|
-
"description": "The size of the accordion item.",
|
|
259
|
-
"default": "'small'",
|
|
260
|
-
"fieldName": "size"
|
|
261
|
-
},
|
|
262
|
-
{
|
|
263
|
-
"name": "variant",
|
|
264
|
-
"type": {
|
|
265
|
-
"text": "Variant"
|
|
266
|
-
},
|
|
267
|
-
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
268
|
-
"default": "'default'",
|
|
269
|
-
"fieldName": "variant"
|
|
270
|
-
},
|
|
271
|
-
{
|
|
272
|
-
"name": "data-aria-level",
|
|
273
|
-
"type": {
|
|
274
|
-
"text": "number"
|
|
275
|
-
},
|
|
276
|
-
"description": "The aria level of the accordion component.",
|
|
277
|
-
"default": "3",
|
|
278
|
-
"fieldName": "dataAriaLevel"
|
|
279
|
-
},
|
|
280
|
-
{
|
|
281
|
-
"name": "expanded",
|
|
282
|
-
"type": {
|
|
283
|
-
"text": "boolean"
|
|
284
|
-
},
|
|
285
|
-
"description": "The visibility of the accordion button.",
|
|
286
|
-
"default": "false",
|
|
287
|
-
"fieldName": "expanded"
|
|
288
|
-
},
|
|
289
|
-
{
|
|
290
|
-
"name": "header-text",
|
|
391
|
+
"name": "open-button-aria-label",
|
|
291
392
|
"type": {
|
|
292
393
|
"text": "string | undefined"
|
|
293
394
|
},
|
|
294
|
-
"description": "
|
|
295
|
-
"fieldName": "
|
|
395
|
+
"description": "Aria-label attribute for the trigger button when accordion is collapsed.",
|
|
396
|
+
"fieldName": "openButtonAriaLabel"
|
|
296
397
|
},
|
|
297
398
|
{
|
|
298
|
-
"name": "
|
|
399
|
+
"name": "close-button-aria-label",
|
|
299
400
|
"type": {
|
|
300
|
-
"text": "
|
|
401
|
+
"text": "string | undefined"
|
|
301
402
|
},
|
|
302
|
-
"description": "
|
|
303
|
-
"fieldName": "
|
|
403
|
+
"description": "Aria-label attribute for the trigger button when accordion is expanded.",
|
|
404
|
+
"fieldName": "closeButtonAriaLabel"
|
|
304
405
|
},
|
|
305
406
|
{
|
|
306
407
|
"name": "disabled",
|
|
@@ -314,171 +415,90 @@
|
|
|
314
415
|
"name": "DisabledMixin",
|
|
315
416
|
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
316
417
|
}
|
|
317
|
-
}
|
|
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 body-section - The body section of the accordion button.\n * @csspart header-button-section - The header button section of the accordion button.\n * @csspart header-section - The header section of the accordion button.\n * @csspart leading-header - The leading header of the accordion button.\n * @csspart trailing-header - The trailing header of the accordion button.\n * @csspart trailing-header__icon - The trailing header icon of the accordion button.\n */",
|
|
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": [
|
|
418
|
+
},
|
|
366
419
|
{
|
|
367
|
-
"kind": "field",
|
|
368
420
|
"name": "size",
|
|
369
421
|
"type": {
|
|
370
422
|
"text": "Size"
|
|
371
423
|
},
|
|
372
424
|
"description": "The size of the accordion item.",
|
|
373
425
|
"default": "'small'",
|
|
374
|
-
"
|
|
375
|
-
"
|
|
426
|
+
"fieldName": "size",
|
|
427
|
+
"inheritedFrom": {
|
|
428
|
+
"name": "AccordionButton",
|
|
429
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
430
|
+
}
|
|
376
431
|
},
|
|
377
432
|
{
|
|
378
|
-
"kind": "field",
|
|
379
433
|
"name": "variant",
|
|
380
434
|
"type": {
|
|
381
435
|
"text": "Variant"
|
|
382
436
|
},
|
|
383
437
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
384
|
-
"default": "'
|
|
385
|
-
"
|
|
386
|
-
"
|
|
438
|
+
"default": "'default'",
|
|
439
|
+
"fieldName": "variant",
|
|
440
|
+
"inheritedFrom": {
|
|
441
|
+
"name": "AccordionButton",
|
|
442
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
443
|
+
}
|
|
387
444
|
},
|
|
388
445
|
{
|
|
389
|
-
"
|
|
390
|
-
"name": "allowMultiple",
|
|
446
|
+
"name": "data-aria-level",
|
|
391
447
|
"type": {
|
|
392
|
-
"text": "
|
|
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
|
-
}
|
|
448
|
+
"text": "number"
|
|
407
449
|
},
|
|
408
|
-
"
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
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."
|
|
450
|
+
"description": "The aria level of the accordion component.",
|
|
451
|
+
"default": "3",
|
|
452
|
+
"fieldName": "dataAriaLevel",
|
|
453
|
+
"inheritedFrom": {
|
|
454
|
+
"name": "AccordionButton",
|
|
455
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
456
|
+
}
|
|
418
457
|
},
|
|
419
458
|
{
|
|
420
|
-
"
|
|
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",
|
|
459
|
+
"name": "expanded",
|
|
450
460
|
"type": {
|
|
451
|
-
"text": "
|
|
461
|
+
"text": "boolean"
|
|
452
462
|
},
|
|
453
|
-
"description": "The
|
|
454
|
-
"default": "
|
|
455
|
-
"fieldName": "
|
|
463
|
+
"description": "The visibility of the accordion button.",
|
|
464
|
+
"default": "false",
|
|
465
|
+
"fieldName": "expanded",
|
|
466
|
+
"inheritedFrom": {
|
|
467
|
+
"name": "AccordionButton",
|
|
468
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
469
|
+
}
|
|
456
470
|
},
|
|
457
471
|
{
|
|
458
|
-
"name": "
|
|
472
|
+
"name": "header-text",
|
|
459
473
|
"type": {
|
|
460
|
-
"text": "
|
|
474
|
+
"text": "string | undefined"
|
|
461
475
|
},
|
|
462
|
-
"description": "The
|
|
463
|
-
"
|
|
464
|
-
"
|
|
476
|
+
"description": "The header text of the accordion item.",
|
|
477
|
+
"fieldName": "headerText",
|
|
478
|
+
"inheritedFrom": {
|
|
479
|
+
"name": "AccordionButton",
|
|
480
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
481
|
+
}
|
|
465
482
|
},
|
|
466
483
|
{
|
|
467
|
-
"name": "
|
|
484
|
+
"name": "prefix-icon",
|
|
468
485
|
"type": {
|
|
469
|
-
"text": "
|
|
486
|
+
"text": "IconNames | undefined"
|
|
470
487
|
},
|
|
471
|
-
"
|
|
472
|
-
"
|
|
473
|
-
"
|
|
488
|
+
"description": "The leading icon that is displayed before the header text.",
|
|
489
|
+
"fieldName": "prefixIcon",
|
|
490
|
+
"inheritedFrom": {
|
|
491
|
+
"name": "AccordionButton",
|
|
492
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
493
|
+
}
|
|
474
494
|
}
|
|
475
495
|
],
|
|
476
496
|
"superclass": {
|
|
477
|
-
"name": "
|
|
478
|
-
"module": "/src/
|
|
497
|
+
"name": "AccordionButton",
|
|
498
|
+
"module": "/src/components/accordionbutton/accordionbutton.component"
|
|
479
499
|
},
|
|
480
|
-
"tagName": "mdc-
|
|
481
|
-
"jsDoc": "/**\n * An accordion
|
|
500
|
+
"tagName": "mdc-accordion",
|
|
501
|
+
"jsDoc": "/**\n * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.\n *\n * @tagname mdc-accordion\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot leading-controls - The leading controls slot of the accordion on the header section.\n * @slot trailing-controls - The trailing controls slot of the accordion on the header section.\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.\n *\n * @csspart body-section - The body section of the accordion.\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n */",
|
|
482
502
|
"customElement": true
|
|
483
503
|
}
|
|
484
504
|
],
|
|
@@ -487,177 +507,71 @@
|
|
|
487
507
|
"kind": "js",
|
|
488
508
|
"name": "default",
|
|
489
509
|
"declaration": {
|
|
490
|
-
"name": "
|
|
491
|
-
"module": "components/
|
|
510
|
+
"name": "Accordion",
|
|
511
|
+
"module": "components/accordion/accordion.component.js"
|
|
492
512
|
}
|
|
493
513
|
}
|
|
494
514
|
]
|
|
495
515
|
},
|
|
496
516
|
{
|
|
497
517
|
"kind": "javascript-module",
|
|
498
|
-
"path": "components/
|
|
518
|
+
"path": "components/accordionbutton/accordionbutton.component.js",
|
|
499
519
|
"declarations": [
|
|
500
520
|
{
|
|
501
521
|
"kind": "class",
|
|
502
|
-
"description": "An accordion contains a header and body section with
|
|
503
|
-
"name": "
|
|
522
|
+
"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.",
|
|
523
|
+
"name": "AccordionButton",
|
|
504
524
|
"cssProperties": [
|
|
505
525
|
{
|
|
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
|
-
}
|
|
526
|
+
"description": "The border color of the accordion button.",
|
|
527
|
+
"name": "--mdc-accordionbutton-border-color"
|
|
512
528
|
},
|
|
513
529
|
{
|
|
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
|
-
}
|
|
530
|
+
"description": "The hover color of the accordion button.",
|
|
531
|
+
"name": "--mdc-accordionbutton-hover-color"
|
|
520
532
|
},
|
|
521
533
|
{
|
|
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
|
-
}
|
|
534
|
+
"description": "The active color of the accordion button.",
|
|
535
|
+
"name": "--mdc-accordionbutton-active-color"
|
|
528
536
|
},
|
|
529
537
|
{
|
|
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
|
-
}
|
|
538
|
+
"description": "The disabled color of the accordion button.",
|
|
539
|
+
"name": "--mdc-accordionbutton-disabled-color"
|
|
536
540
|
}
|
|
537
541
|
],
|
|
538
542
|
"cssParts": [
|
|
539
543
|
{
|
|
540
|
-
"description": "The body section of the accordion.",
|
|
541
|
-
"name": "body-section"
|
|
542
|
-
"inheritedFrom": {
|
|
543
|
-
"name": "AccordionButton",
|
|
544
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
545
|
-
}
|
|
546
|
-
},
|
|
547
|
-
{
|
|
548
|
-
"description": "The header section of the accordion.",
|
|
549
|
-
"name": "header-section",
|
|
550
|
-
"inheritedFrom": {
|
|
551
|
-
"name": "AccordionButton",
|
|
552
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
553
|
-
}
|
|
544
|
+
"description": "The body section of the accordion button.",
|
|
545
|
+
"name": "body-section"
|
|
554
546
|
},
|
|
555
547
|
{
|
|
556
|
-
"description": "The
|
|
557
|
-
"name": "
|
|
558
|
-
"inheritedFrom": {
|
|
559
|
-
"name": "AccordionButton",
|
|
560
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
561
|
-
}
|
|
548
|
+
"description": "The header button section of the accordion button.",
|
|
549
|
+
"name": "header-button-section"
|
|
562
550
|
},
|
|
563
551
|
{
|
|
564
|
-
"description": "The
|
|
565
|
-
"name": "
|
|
566
|
-
"inheritedFrom": {
|
|
567
|
-
"name": "AccordionButton",
|
|
568
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
569
|
-
}
|
|
552
|
+
"description": "The header section of the accordion button.",
|
|
553
|
+
"name": "header-section"
|
|
570
554
|
},
|
|
571
555
|
{
|
|
572
|
-
"description": "The
|
|
573
|
-
"name": "
|
|
556
|
+
"description": "The leading header of the accordion button.",
|
|
557
|
+
"name": "leading-header"
|
|
574
558
|
},
|
|
575
559
|
{
|
|
576
|
-
"description": "The header
|
|
577
|
-
"name": "header
|
|
578
|
-
"inheritedFrom": {
|
|
579
|
-
"name": "AccordionButton",
|
|
580
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
581
|
-
}
|
|
560
|
+
"description": "The trailing header of the accordion button.",
|
|
561
|
+
"name": "trailing-header"
|
|
582
562
|
},
|
|
583
563
|
{
|
|
584
564
|
"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
|
-
}
|
|
565
|
+
"name": "trailing-header__icon"
|
|
590
566
|
}
|
|
591
567
|
],
|
|
592
568
|
"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
569
|
{
|
|
602
570
|
"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
|
-
}
|
|
571
|
+
"name": "default"
|
|
608
572
|
}
|
|
609
573
|
],
|
|
610
574
|
"members": [
|
|
611
|
-
{
|
|
612
|
-
"kind": "field",
|
|
613
|
-
"name": "openButtonAriaLabel",
|
|
614
|
-
"type": {
|
|
615
|
-
"text": "string | undefined"
|
|
616
|
-
},
|
|
617
|
-
"description": "Aria-label attribute for the trigger button when accordion is collapsed.",
|
|
618
|
-
"attribute": "open-button-aria-label",
|
|
619
|
-
"reflects": true
|
|
620
|
-
},
|
|
621
|
-
{
|
|
622
|
-
"kind": "field",
|
|
623
|
-
"name": "closeButtonAriaLabel",
|
|
624
|
-
"type": {
|
|
625
|
-
"text": "string | undefined"
|
|
626
|
-
},
|
|
627
|
-
"description": "Aria-label attribute for the trigger button when accordion is expanded.",
|
|
628
|
-
"attribute": "close-button-aria-label",
|
|
629
|
-
"reflects": true
|
|
630
|
-
},
|
|
631
|
-
{
|
|
632
|
-
"kind": "method",
|
|
633
|
-
"name": "renderHeader",
|
|
634
|
-
"privacy": "protected",
|
|
635
|
-
"return": {
|
|
636
|
-
"type": {
|
|
637
|
-
"text": ""
|
|
638
|
-
}
|
|
639
|
-
},
|
|
640
|
-
"description": "Renders the header section of the accordion.\nThis includes the leading icon, text and controls, and the trailing controls.\nThe trailing controls include the expand/collapse button.\nThe button is disabled if the accordion is disabled.\nThe button is also given the aria-controls attribute set to the id of the body section.\nThe button is also given the aria-expanded attribute set to the expanded state of the accordion.\nThe prefix icon of the button is set to the expanded state of the accordion.",
|
|
641
|
-
"inheritedFrom": {
|
|
642
|
-
"name": "AccordionButton",
|
|
643
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
644
|
-
}
|
|
645
|
-
},
|
|
646
|
-
{
|
|
647
|
-
"kind": "field",
|
|
648
|
-
"name": "disabled",
|
|
649
|
-
"type": {
|
|
650
|
-
"text": "boolean | undefined"
|
|
651
|
-
},
|
|
652
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
653
|
-
"default": "undefined",
|
|
654
|
-
"attribute": "disabled",
|
|
655
|
-
"reflects": true,
|
|
656
|
-
"inheritedFrom": {
|
|
657
|
-
"name": "AccordionButton",
|
|
658
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
659
|
-
}
|
|
660
|
-
},
|
|
661
575
|
{
|
|
662
576
|
"kind": "field",
|
|
663
577
|
"name": "size",
|
|
@@ -667,11 +581,7 @@
|
|
|
667
581
|
"description": "The size of the accordion item.",
|
|
668
582
|
"default": "'small'",
|
|
669
583
|
"attribute": "size",
|
|
670
|
-
"reflects": true
|
|
671
|
-
"inheritedFrom": {
|
|
672
|
-
"name": "AccordionButton",
|
|
673
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
674
|
-
}
|
|
584
|
+
"reflects": true
|
|
675
585
|
},
|
|
676
586
|
{
|
|
677
587
|
"kind": "field",
|
|
@@ -682,11 +592,7 @@
|
|
|
682
592
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
683
593
|
"default": "'default'",
|
|
684
594
|
"attribute": "variant",
|
|
685
|
-
"reflects": true
|
|
686
|
-
"inheritedFrom": {
|
|
687
|
-
"name": "AccordionButton",
|
|
688
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
689
|
-
}
|
|
595
|
+
"reflects": true
|
|
690
596
|
},
|
|
691
597
|
{
|
|
692
598
|
"kind": "field",
|
|
@@ -697,11 +603,7 @@
|
|
|
697
603
|
"description": "The aria level of the accordion component.",
|
|
698
604
|
"default": "3",
|
|
699
605
|
"attribute": "data-aria-level",
|
|
700
|
-
"reflects": true
|
|
701
|
-
"inheritedFrom": {
|
|
702
|
-
"name": "AccordionButton",
|
|
703
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
704
|
-
}
|
|
606
|
+
"reflects": true
|
|
705
607
|
},
|
|
706
608
|
{
|
|
707
609
|
"kind": "field",
|
|
@@ -712,11 +614,7 @@
|
|
|
712
614
|
"description": "The visibility of the accordion button.",
|
|
713
615
|
"default": "false",
|
|
714
616
|
"attribute": "expanded",
|
|
715
|
-
"reflects": true
|
|
716
|
-
"inheritedFrom": {
|
|
717
|
-
"name": "AccordionButton",
|
|
718
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
719
|
-
}
|
|
617
|
+
"reflects": true
|
|
720
618
|
},
|
|
721
619
|
{
|
|
722
620
|
"kind": "field",
|
|
@@ -726,11 +624,7 @@
|
|
|
726
624
|
},
|
|
727
625
|
"description": "The header text of the accordion item.",
|
|
728
626
|
"attribute": "header-text",
|
|
729
|
-
"reflects": true
|
|
730
|
-
"inheritedFrom": {
|
|
731
|
-
"name": "AccordionButton",
|
|
732
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
733
|
-
}
|
|
627
|
+
"reflects": true
|
|
734
628
|
},
|
|
735
629
|
{
|
|
736
630
|
"kind": "field",
|
|
@@ -739,11 +633,7 @@
|
|
|
739
633
|
"text": "IconNames | undefined"
|
|
740
634
|
},
|
|
741
635
|
"description": "The leading icon that is displayed before the header text.",
|
|
742
|
-
"attribute": "prefix-icon"
|
|
743
|
-
"inheritedFrom": {
|
|
744
|
-
"name": "AccordionButton",
|
|
745
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
746
|
-
}
|
|
636
|
+
"attribute": "prefix-icon"
|
|
747
637
|
},
|
|
748
638
|
{
|
|
749
639
|
"kind": "method",
|
|
@@ -754,11 +644,7 @@
|
|
|
754
644
|
"text": "void"
|
|
755
645
|
}
|
|
756
646
|
},
|
|
757
|
-
"description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state."
|
|
758
|
-
"inheritedFrom": {
|
|
759
|
-
"name": "AccordionButton",
|
|
760
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
761
|
-
}
|
|
647
|
+
"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."
|
|
762
648
|
},
|
|
763
649
|
{
|
|
764
650
|
"kind": "method",
|
|
@@ -769,11 +655,7 @@
|
|
|
769
655
|
"text": "void"
|
|
770
656
|
}
|
|
771
657
|
},
|
|
772
|
-
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
|
|
773
|
-
"inheritedFrom": {
|
|
774
|
-
"name": "AccordionButton",
|
|
775
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
776
|
-
}
|
|
658
|
+
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
|
|
777
659
|
},
|
|
778
660
|
{
|
|
779
661
|
"kind": "method",
|
|
@@ -793,11 +675,7 @@
|
|
|
793
675
|
"description": "The KeyboardEvent fired."
|
|
794
676
|
}
|
|
795
677
|
],
|
|
796
|
-
"description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys."
|
|
797
|
-
"inheritedFrom": {
|
|
798
|
-
"name": "AccordionButton",
|
|
799
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
800
|
-
}
|
|
678
|
+
"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."
|
|
801
679
|
},
|
|
802
680
|
{
|
|
803
681
|
"kind": "method",
|
|
@@ -816,11 +694,7 @@
|
|
|
816
694
|
"text": "IconNames"
|
|
817
695
|
}
|
|
818
696
|
}
|
|
819
|
-
]
|
|
820
|
-
"inheritedFrom": {
|
|
821
|
-
"name": "AccordionButton",
|
|
822
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
823
|
-
}
|
|
697
|
+
]
|
|
824
698
|
},
|
|
825
699
|
{
|
|
826
700
|
"kind": "method",
|
|
@@ -830,83 +704,63 @@
|
|
|
830
704
|
"type": {
|
|
831
705
|
"text": "TemplateResult | typeof nothing"
|
|
832
706
|
}
|
|
833
|
-
},
|
|
834
|
-
"inheritedFrom": {
|
|
835
|
-
"name": "AccordionButton",
|
|
836
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
837
707
|
}
|
|
838
708
|
},
|
|
839
709
|
{
|
|
840
710
|
"kind": "method",
|
|
841
|
-
"name": "
|
|
711
|
+
"name": "renderHeader",
|
|
842
712
|
"privacy": "protected",
|
|
843
713
|
"return": {
|
|
844
714
|
"type": {
|
|
845
|
-
"text": ""
|
|
715
|
+
"text": "TemplateResult"
|
|
846
716
|
}
|
|
847
|
-
},
|
|
848
|
-
"description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon.",
|
|
849
|
-
"inheritedFrom": {
|
|
850
|
-
"name": "AccordionButton",
|
|
851
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
852
717
|
}
|
|
853
718
|
},
|
|
854
719
|
{
|
|
855
720
|
"kind": "method",
|
|
856
|
-
"name": "
|
|
721
|
+
"name": "getArrowIconName",
|
|
857
722
|
"privacy": "protected",
|
|
858
|
-
"return": {
|
|
859
|
-
"type": {
|
|
860
|
-
"text": "
|
|
861
|
-
}
|
|
862
|
-
},
|
|
863
|
-
"inheritedFrom": {
|
|
864
|
-
"name": "AccordionButton",
|
|
865
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
866
|
-
}
|
|
867
|
-
}
|
|
868
|
-
],
|
|
869
|
-
"events": [
|
|
870
|
-
{
|
|
871
|
-
"description": "(React: onShown) This event is triggered when the accordion is expanded.",
|
|
872
|
-
"name": "shown",
|
|
873
|
-
"reactName": "onShown",
|
|
874
|
-
"inheritedFrom": {
|
|
875
|
-
"name": "AccordionButton",
|
|
876
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
877
|
-
}
|
|
878
|
-
}
|
|
879
|
-
],
|
|
880
|
-
"attributes": [
|
|
881
|
-
{
|
|
882
|
-
"name": "open-button-aria-label",
|
|
883
|
-
"type": {
|
|
884
|
-
"text": "string | undefined"
|
|
723
|
+
"return": {
|
|
724
|
+
"type": {
|
|
725
|
+
"text": ""
|
|
726
|
+
}
|
|
885
727
|
},
|
|
886
|
-
"description": "
|
|
887
|
-
"fieldName": "openButtonAriaLabel"
|
|
728
|
+
"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."
|
|
888
729
|
},
|
|
889
730
|
{
|
|
890
|
-
"
|
|
891
|
-
"
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
731
|
+
"kind": "method",
|
|
732
|
+
"name": "renderBody",
|
|
733
|
+
"privacy": "protected",
|
|
734
|
+
"return": {
|
|
735
|
+
"type": {
|
|
736
|
+
"text": "TemplateResult | typeof nothing"
|
|
737
|
+
}
|
|
738
|
+
}
|
|
896
739
|
},
|
|
897
740
|
{
|
|
741
|
+
"kind": "field",
|
|
898
742
|
"name": "disabled",
|
|
899
743
|
"type": {
|
|
900
744
|
"text": "boolean | undefined"
|
|
901
745
|
},
|
|
902
746
|
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
903
747
|
"default": "undefined",
|
|
904
|
-
"
|
|
748
|
+
"attribute": "disabled",
|
|
749
|
+
"reflects": true,
|
|
905
750
|
"inheritedFrom": {
|
|
906
|
-
"name": "
|
|
907
|
-
"module": "
|
|
751
|
+
"name": "DisabledMixin",
|
|
752
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
908
753
|
}
|
|
909
|
-
}
|
|
754
|
+
}
|
|
755
|
+
],
|
|
756
|
+
"events": [
|
|
757
|
+
{
|
|
758
|
+
"description": "(React: onShown) This event is triggered when the accordion button is expanded.",
|
|
759
|
+
"name": "shown",
|
|
760
|
+
"reactName": "onShown"
|
|
761
|
+
}
|
|
762
|
+
],
|
|
763
|
+
"attributes": [
|
|
910
764
|
{
|
|
911
765
|
"name": "size",
|
|
912
766
|
"type": {
|
|
@@ -914,11 +768,7 @@
|
|
|
914
768
|
},
|
|
915
769
|
"description": "The size of the accordion item.",
|
|
916
770
|
"default": "'small'",
|
|
917
|
-
"fieldName": "size"
|
|
918
|
-
"inheritedFrom": {
|
|
919
|
-
"name": "AccordionButton",
|
|
920
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
921
|
-
}
|
|
771
|
+
"fieldName": "size"
|
|
922
772
|
},
|
|
923
773
|
{
|
|
924
774
|
"name": "variant",
|
|
@@ -927,11 +777,7 @@
|
|
|
927
777
|
},
|
|
928
778
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
929
779
|
"default": "'default'",
|
|
930
|
-
"fieldName": "variant"
|
|
931
|
-
"inheritedFrom": {
|
|
932
|
-
"name": "AccordionButton",
|
|
933
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
934
|
-
}
|
|
780
|
+
"fieldName": "variant"
|
|
935
781
|
},
|
|
936
782
|
{
|
|
937
783
|
"name": "data-aria-level",
|
|
@@ -940,11 +786,7 @@
|
|
|
940
786
|
},
|
|
941
787
|
"description": "The aria level of the accordion component.",
|
|
942
788
|
"default": "3",
|
|
943
|
-
"fieldName": "dataAriaLevel"
|
|
944
|
-
"inheritedFrom": {
|
|
945
|
-
"name": "AccordionButton",
|
|
946
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
947
|
-
}
|
|
789
|
+
"fieldName": "dataAriaLevel"
|
|
948
790
|
},
|
|
949
791
|
{
|
|
950
792
|
"name": "expanded",
|
|
@@ -953,11 +795,7 @@
|
|
|
953
795
|
},
|
|
954
796
|
"description": "The visibility of the accordion button.",
|
|
955
797
|
"default": "false",
|
|
956
|
-
"fieldName": "expanded"
|
|
957
|
-
"inheritedFrom": {
|
|
958
|
-
"name": "AccordionButton",
|
|
959
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
960
|
-
}
|
|
798
|
+
"fieldName": "expanded"
|
|
961
799
|
},
|
|
962
800
|
{
|
|
963
801
|
"name": "header-text",
|
|
@@ -965,11 +803,7 @@
|
|
|
965
803
|
"text": "string | undefined"
|
|
966
804
|
},
|
|
967
805
|
"description": "The header text of the accordion item.",
|
|
968
|
-
"fieldName": "headerText"
|
|
969
|
-
"inheritedFrom": {
|
|
970
|
-
"name": "AccordionButton",
|
|
971
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
972
|
-
}
|
|
806
|
+
"fieldName": "headerText"
|
|
973
807
|
},
|
|
974
808
|
{
|
|
975
809
|
"name": "prefix-icon",
|
|
@@ -977,19 +811,185 @@
|
|
|
977
811
|
"text": "IconNames | undefined"
|
|
978
812
|
},
|
|
979
813
|
"description": "The leading icon that is displayed before the header text.",
|
|
980
|
-
"fieldName": "prefixIcon"
|
|
814
|
+
"fieldName": "prefixIcon"
|
|
815
|
+
},
|
|
816
|
+
{
|
|
817
|
+
"name": "disabled",
|
|
818
|
+
"type": {
|
|
819
|
+
"text": "boolean | undefined"
|
|
820
|
+
},
|
|
821
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
822
|
+
"default": "undefined",
|
|
823
|
+
"fieldName": "disabled",
|
|
981
824
|
"inheritedFrom": {
|
|
982
|
-
"name": "
|
|
983
|
-
"module": "src/
|
|
825
|
+
"name": "DisabledMixin",
|
|
826
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
984
827
|
}
|
|
985
828
|
}
|
|
986
829
|
],
|
|
830
|
+
"mixins": [
|
|
831
|
+
{
|
|
832
|
+
"name": "DisabledMixin",
|
|
833
|
+
"module": "/src/utils/mixins/DisabledMixin"
|
|
834
|
+
}
|
|
835
|
+
],
|
|
987
836
|
"superclass": {
|
|
837
|
+
"name": "Component",
|
|
838
|
+
"module": "/src/models"
|
|
839
|
+
},
|
|
840
|
+
"tagName": "mdc-accordionbutton",
|
|
841
|
+
"jsDoc": "/**\n * An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you do need any controls on your accordion heading, then it's advised to use `accordion` component.\n *\n * If an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.\n *\n * @tagname mdc-accordionbutton\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion button is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion button.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.\n *\n * @csspart body-section - The body section of the accordion button.\n * @csspart header-button-section - The header button section of the accordion button.\n * @csspart header-section - The header section of the accordion button.\n * @csspart leading-header - The leading header of the accordion button.\n * @csspart trailing-header - The trailing header of the accordion button.\n * @csspart trailing-header__icon - The trailing header icon of the accordion button.\n */",
|
|
842
|
+
"customElement": true
|
|
843
|
+
}
|
|
844
|
+
],
|
|
845
|
+
"exports": [
|
|
846
|
+
{
|
|
847
|
+
"kind": "js",
|
|
848
|
+
"name": "default",
|
|
849
|
+
"declaration": {
|
|
988
850
|
"name": "AccordionButton",
|
|
989
|
-
"module": "
|
|
851
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
852
|
+
}
|
|
853
|
+
}
|
|
854
|
+
]
|
|
855
|
+
},
|
|
856
|
+
{
|
|
857
|
+
"kind": "javascript-module",
|
|
858
|
+
"path": "components/accordiongroup/accordiongroup.component.js",
|
|
859
|
+
"declarations": [
|
|
860
|
+
{
|
|
861
|
+
"kind": "class",
|
|
862
|
+
"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.",
|
|
863
|
+
"name": "AccordionGroup",
|
|
864
|
+
"cssProperties": [
|
|
865
|
+
{
|
|
866
|
+
"description": "The border color of the entire accordiongroup",
|
|
867
|
+
"name": "--mdc-accordiongroup-border-color"
|
|
868
|
+
}
|
|
869
|
+
],
|
|
870
|
+
"slots": [
|
|
871
|
+
{
|
|
872
|
+
"description": "The default slot can contain the `accordion` or `accordionbutton` components.",
|
|
873
|
+
"name": "default"
|
|
874
|
+
}
|
|
875
|
+
],
|
|
876
|
+
"members": [
|
|
877
|
+
{
|
|
878
|
+
"kind": "field",
|
|
879
|
+
"name": "size",
|
|
880
|
+
"type": {
|
|
881
|
+
"text": "Size"
|
|
882
|
+
},
|
|
883
|
+
"description": "The size of the accordion item.",
|
|
884
|
+
"default": "'small'",
|
|
885
|
+
"attribute": "size",
|
|
886
|
+
"reflects": true
|
|
887
|
+
},
|
|
888
|
+
{
|
|
889
|
+
"kind": "field",
|
|
890
|
+
"name": "variant",
|
|
891
|
+
"type": {
|
|
892
|
+
"text": "Variant"
|
|
893
|
+
},
|
|
894
|
+
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
895
|
+
"default": "'stacked'",
|
|
896
|
+
"attribute": "variant",
|
|
897
|
+
"reflects": true
|
|
898
|
+
},
|
|
899
|
+
{
|
|
900
|
+
"kind": "field",
|
|
901
|
+
"name": "allowMultiple",
|
|
902
|
+
"type": {
|
|
903
|
+
"text": "boolean"
|
|
904
|
+
},
|
|
905
|
+
"default": "false",
|
|
906
|
+
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
907
|
+
"attribute": "allow-multiple",
|
|
908
|
+
"reflects": true
|
|
909
|
+
},
|
|
910
|
+
{
|
|
911
|
+
"kind": "method",
|
|
912
|
+
"name": "handleAccordionExpanded",
|
|
913
|
+
"privacy": "private",
|
|
914
|
+
"return": {
|
|
915
|
+
"type": {
|
|
916
|
+
"text": "void"
|
|
917
|
+
}
|
|
918
|
+
},
|
|
919
|
+
"parameters": [
|
|
920
|
+
{
|
|
921
|
+
"name": "event",
|
|
922
|
+
"type": {
|
|
923
|
+
"text": "Event"
|
|
924
|
+
},
|
|
925
|
+
"description": "The event object from the 'shown' event."
|
|
926
|
+
}
|
|
927
|
+
],
|
|
928
|
+
"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."
|
|
929
|
+
},
|
|
930
|
+
{
|
|
931
|
+
"kind": "method",
|
|
932
|
+
"name": "setChildrenAccordionAttributes",
|
|
933
|
+
"privacy": "private",
|
|
934
|
+
"return": {
|
|
935
|
+
"type": {
|
|
936
|
+
"text": "void"
|
|
937
|
+
}
|
|
938
|
+
},
|
|
939
|
+
"parameters": [
|
|
940
|
+
{
|
|
941
|
+
"name": "attributeName",
|
|
942
|
+
"type": {
|
|
943
|
+
"text": "string"
|
|
944
|
+
},
|
|
945
|
+
"description": "The name of the attribute to set."
|
|
946
|
+
},
|
|
947
|
+
{
|
|
948
|
+
"name": "attributeValue",
|
|
949
|
+
"type": {
|
|
950
|
+
"text": "string"
|
|
951
|
+
},
|
|
952
|
+
"description": "The value to set the attribute to."
|
|
953
|
+
}
|
|
954
|
+
],
|
|
955
|
+
"description": "Sets the given attribute on all child accordion or accordionbutton components."
|
|
956
|
+
}
|
|
957
|
+
],
|
|
958
|
+
"attributes": [
|
|
959
|
+
{
|
|
960
|
+
"name": "size",
|
|
961
|
+
"type": {
|
|
962
|
+
"text": "Size"
|
|
963
|
+
},
|
|
964
|
+
"description": "The size of the accordion item.",
|
|
965
|
+
"default": "'small'",
|
|
966
|
+
"fieldName": "size"
|
|
967
|
+
},
|
|
968
|
+
{
|
|
969
|
+
"name": "variant",
|
|
970
|
+
"type": {
|
|
971
|
+
"text": "Variant"
|
|
972
|
+
},
|
|
973
|
+
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
974
|
+
"default": "'stacked'",
|
|
975
|
+
"fieldName": "variant"
|
|
976
|
+
},
|
|
977
|
+
{
|
|
978
|
+
"name": "allow-multiple",
|
|
979
|
+
"type": {
|
|
980
|
+
"text": "boolean"
|
|
981
|
+
},
|
|
982
|
+
"default": "false",
|
|
983
|
+
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
984
|
+
"fieldName": "allowMultiple"
|
|
985
|
+
}
|
|
986
|
+
],
|
|
987
|
+
"superclass": {
|
|
988
|
+
"name": "Component",
|
|
989
|
+
"module": "/src/models"
|
|
990
990
|
},
|
|
991
|
-
"tagName": "mdc-
|
|
992
|
-
"jsDoc": "/**\n * An accordion
|
|
991
|
+
"tagName": "mdc-accordiongroup",
|
|
992
|
+
"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 */",
|
|
993
993
|
"customElement": true
|
|
994
994
|
}
|
|
995
995
|
],
|
|
@@ -998,8 +998,8 @@
|
|
|
998
998
|
"kind": "js",
|
|
999
999
|
"name": "default",
|
|
1000
1000
|
"declaration": {
|
|
1001
|
-
"name": "
|
|
1002
|
-
"module": "components/
|
|
1001
|
+
"name": "AccordionGroup",
|
|
1002
|
+
"module": "components/accordiongroup/accordiongroup.component.js"
|
|
1003
1003
|
}
|
|
1004
1004
|
}
|
|
1005
1005
|
]
|
|
@@ -4389,6 +4389,14 @@
|
|
|
4389
4389
|
{
|
|
4390
4390
|
"description": "The background color of the badge overlay.",
|
|
4391
4391
|
"name": "--mdc-badge-overlay-background-color"
|
|
4392
|
+
},
|
|
4393
|
+
{
|
|
4394
|
+
"description": "The width of the dot badge. Default is 0.75rem (12px).",
|
|
4395
|
+
"name": "--mdc-badge-dot-width"
|
|
4396
|
+
},
|
|
4397
|
+
{
|
|
4398
|
+
"description": "The height of the dot badge. Default is 0.75rem (12px).",
|
|
4399
|
+
"name": "--mdc-badge-dot-height"
|
|
4392
4400
|
}
|
|
4393
4401
|
],
|
|
4394
4402
|
"cssParts": [
|
|
@@ -4654,7 +4662,7 @@
|
|
|
4654
4662
|
"module": "/src/models"
|
|
4655
4663
|
},
|
|
4656
4664
|
"tagName": "mdc-badge",
|
|
4657
|
-
"jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n *\n * @csspart badge-dot - The dot notification badge.\n * @csspart badge-icon - The icon badge.\n * @csspart badge-overlay - The overlay badge.\n * @csspart badge-text - The text badge.\n */",
|
|
4665
|
+
"jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n * @cssproperty --mdc-badge-dot-width - The width of the dot badge. Default is 0.75rem (12px).\n * @cssproperty --mdc-badge-dot-height - The height of the dot badge. Default is 0.75rem (12px).\n *\n * @csspart badge-dot - The dot notification badge.\n * @csspart badge-icon - The icon badge.\n * @csspart badge-overlay - The overlay badge.\n * @csspart badge-text - The text badge.\n */",
|
|
4658
4666
|
"customElement": true
|
|
4659
4667
|
}
|
|
4660
4668
|
],
|
|
@@ -5897,7 +5905,7 @@
|
|
|
5897
5905
|
"declarations": [
|
|
5898
5906
|
{
|
|
5899
5907
|
"kind": "class",
|
|
5900
|
-
"description": "buttongroup component, is a
|
|
5908
|
+
"description": "buttongroup component, is a wrapper to group multiple buttons.\nIt can support icon buttons, combination of icon and pill buttons, and text buttons.\nButton group can be positioned in horizontal orientation and vertical orientation.\n\nThe sizes of buttons within the button group can be set using the `size` attribute on the button group,\nwhich will apply the size to all buttons within the group.\n\nButtons of sizes 24, 28, 32, and 40 are only supported inside a button group. Default size is 28.\n\nThe variant of buttons within the button group can be set using the `variant` attribute on the button group,\nwhich will apply the variant to all buttons within the group. Default variant is `primary`.\n\nAll buttons are placed horizontally by default. To change the orientation to vertical, set the `orientation` attribute to `vertical`.\n\nThings to note:\n- Button group will allow only `mdc-button` components as its direct children.\n- Button group will set the `size` and `variant` attributes on the buttons within it,\n so any `size` or `variant` set directly on any button will be overridden.",
|
|
5901
5909
|
"name": "ButtonGroup",
|
|
5902
5910
|
"cssProperties": [
|
|
5903
5911
|
{
|
|
@@ -6014,7 +6022,7 @@
|
|
|
6014
6022
|
"module": "/src/models"
|
|
6015
6023
|
},
|
|
6016
6024
|
"tagName": "mdc-buttongroup",
|
|
6017
|
-
"jsDoc": "/**\n * buttongroup component, is a
|
|
6025
|
+
"jsDoc": "/**\n * buttongroup component, is a wrapper to group multiple buttons.\n * It can support icon buttons, combination of icon and pill buttons, and text buttons.\n * Button group can be positioned in horizontal orientation and vertical orientation.\n *\n * The sizes of buttons within the button group can be set using the `size` attribute on the button group,\n * which will apply the size to all buttons within the group.\n *\n * Buttons of sizes 24, 28, 32, and 40 are only supported inside a button group. Default size is 28.\n *\n * The variant of buttons within the button group can be set using the `variant` attribute on the button group,\n * which will apply the variant to all buttons within the group. Default variant is `primary`.\n *\n * All buttons are placed horizontally by default. To change the orientation to vertical, set the `orientation` attribute to `vertical`.\n *\n * Things to note:\n * - Button group will allow only `mdc-button` components as its direct children.\n * - Button group will set the `size` and `variant` attributes on the buttons within it,\n * so any `size` or `variant` set directly on any button will be overridden.\n *\n * @tagname mdc-buttongroup\n *\n * @slot default - This is a default/unnamed slot, which contains the buttons\n *\n * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup\n * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup\n * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup\n *\n * @csspart container - The container of the buttongroup.\n */",
|
|
6018
6026
|
"customElement": true
|
|
6019
6027
|
}
|
|
6020
6028
|
],
|