@momentum-design/components 0.110.0 → 0.110.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +491 -491
- package/dist/react/index.d.ts +3 -3
- package/dist/react/index.js +3 -3
- 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,34 +457,163 @@
|
|
|
300
457
|
"text": "IconNames | undefined"
|
|
301
458
|
},
|
|
302
459
|
"description": "The leading icon that is displayed before the header text.",
|
|
303
|
-
"fieldName": "prefixIcon"
|
|
460
|
+
"fieldName": "prefixIcon",
|
|
461
|
+
"inheritedFrom": {
|
|
462
|
+
"name": "AccordionButton",
|
|
463
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
464
|
+
}
|
|
465
|
+
}
|
|
466
|
+
]
|
|
467
|
+
}
|
|
468
|
+
],
|
|
469
|
+
"exports": [
|
|
470
|
+
{
|
|
471
|
+
"kind": "js",
|
|
472
|
+
"name": "default",
|
|
473
|
+
"declaration": {
|
|
474
|
+
"name": "Accordion",
|
|
475
|
+
"module": "components/accordion/accordion.component.js"
|
|
476
|
+
}
|
|
477
|
+
}
|
|
478
|
+
]
|
|
479
|
+
},
|
|
480
|
+
{
|
|
481
|
+
"kind": "javascript-module",
|
|
482
|
+
"path": "components/accordiongroup/accordiongroup.component.js",
|
|
483
|
+
"declarations": [
|
|
484
|
+
{
|
|
485
|
+
"kind": "class",
|
|
486
|
+
"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.",
|
|
487
|
+
"name": "AccordionGroup",
|
|
488
|
+
"cssProperties": [
|
|
489
|
+
{
|
|
490
|
+
"description": "The border color of the entire accordiongroup",
|
|
491
|
+
"name": "--mdc-accordiongroup-border-color"
|
|
492
|
+
}
|
|
493
|
+
],
|
|
494
|
+
"slots": [
|
|
495
|
+
{
|
|
496
|
+
"description": "The default slot can contain the `accordion` or `accordionbutton` components.",
|
|
497
|
+
"name": "default"
|
|
498
|
+
}
|
|
499
|
+
],
|
|
500
|
+
"members": [
|
|
501
|
+
{
|
|
502
|
+
"kind": "field",
|
|
503
|
+
"name": "size",
|
|
504
|
+
"type": {
|
|
505
|
+
"text": "Size"
|
|
506
|
+
},
|
|
507
|
+
"description": "The size of the accordion item.",
|
|
508
|
+
"default": "'small'",
|
|
509
|
+
"attribute": "size",
|
|
510
|
+
"reflects": true
|
|
304
511
|
},
|
|
305
512
|
{
|
|
306
|
-
"
|
|
513
|
+
"kind": "field",
|
|
514
|
+
"name": "variant",
|
|
307
515
|
"type": {
|
|
308
|
-
"text": "
|
|
516
|
+
"text": "Variant"
|
|
309
517
|
},
|
|
310
|
-
"description": "
|
|
311
|
-
"default": "
|
|
312
|
-
"
|
|
313
|
-
"
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
518
|
+
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
519
|
+
"default": "'stacked'",
|
|
520
|
+
"attribute": "variant",
|
|
521
|
+
"reflects": true
|
|
522
|
+
},
|
|
523
|
+
{
|
|
524
|
+
"kind": "field",
|
|
525
|
+
"name": "allowMultiple",
|
|
526
|
+
"type": {
|
|
527
|
+
"text": "boolean"
|
|
528
|
+
},
|
|
529
|
+
"default": "false",
|
|
530
|
+
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
531
|
+
"attribute": "allow-multiple",
|
|
532
|
+
"reflects": true
|
|
533
|
+
},
|
|
534
|
+
{
|
|
535
|
+
"kind": "method",
|
|
536
|
+
"name": "handleAccordionExpanded",
|
|
537
|
+
"privacy": "private",
|
|
538
|
+
"return": {
|
|
539
|
+
"type": {
|
|
540
|
+
"text": "void"
|
|
541
|
+
}
|
|
542
|
+
},
|
|
543
|
+
"parameters": [
|
|
544
|
+
{
|
|
545
|
+
"name": "event",
|
|
546
|
+
"type": {
|
|
547
|
+
"text": "Event"
|
|
548
|
+
},
|
|
549
|
+
"description": "The event object from the 'shown' event."
|
|
550
|
+
}
|
|
551
|
+
],
|
|
552
|
+
"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."
|
|
553
|
+
},
|
|
554
|
+
{
|
|
555
|
+
"kind": "method",
|
|
556
|
+
"name": "setChildrenAccordionAttributes",
|
|
557
|
+
"privacy": "private",
|
|
558
|
+
"return": {
|
|
559
|
+
"type": {
|
|
560
|
+
"text": "void"
|
|
561
|
+
}
|
|
562
|
+
},
|
|
563
|
+
"parameters": [
|
|
564
|
+
{
|
|
565
|
+
"name": "attributeName",
|
|
566
|
+
"type": {
|
|
567
|
+
"text": "string"
|
|
568
|
+
},
|
|
569
|
+
"description": "The name of the attribute to set."
|
|
570
|
+
},
|
|
571
|
+
{
|
|
572
|
+
"name": "attributeValue",
|
|
573
|
+
"type": {
|
|
574
|
+
"text": "string"
|
|
575
|
+
},
|
|
576
|
+
"description": "The value to set the attribute to."
|
|
577
|
+
}
|
|
578
|
+
],
|
|
579
|
+
"description": "Sets the given attribute on all child accordion or accordionbutton components."
|
|
317
580
|
}
|
|
318
581
|
],
|
|
319
|
-
"
|
|
582
|
+
"attributes": [
|
|
320
583
|
{
|
|
321
|
-
"name": "
|
|
322
|
-
"
|
|
584
|
+
"name": "size",
|
|
585
|
+
"type": {
|
|
586
|
+
"text": "Size"
|
|
587
|
+
},
|
|
588
|
+
"description": "The size of the accordion item.",
|
|
589
|
+
"default": "'small'",
|
|
590
|
+
"fieldName": "size"
|
|
591
|
+
},
|
|
592
|
+
{
|
|
593
|
+
"name": "variant",
|
|
594
|
+
"type": {
|
|
595
|
+
"text": "Variant"
|
|
596
|
+
},
|
|
597
|
+
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
598
|
+
"default": "'stacked'",
|
|
599
|
+
"fieldName": "variant"
|
|
600
|
+
},
|
|
601
|
+
{
|
|
602
|
+
"name": "allow-multiple",
|
|
603
|
+
"type": {
|
|
604
|
+
"text": "boolean"
|
|
605
|
+
},
|
|
606
|
+
"default": "false",
|
|
607
|
+
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
608
|
+
"fieldName": "allowMultiple"
|
|
323
609
|
}
|
|
324
610
|
],
|
|
325
611
|
"superclass": {
|
|
326
612
|
"name": "Component",
|
|
327
613
|
"module": "/src/models"
|
|
328
614
|
},
|
|
329
|
-
"tagName": "mdc-
|
|
330
|
-
"jsDoc": "/**\n * An accordion
|
|
615
|
+
"tagName": "mdc-accordiongroup",
|
|
616
|
+
"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 */",
|
|
331
617
|
"customElement": true
|
|
332
618
|
}
|
|
333
619
|
],
|
|
@@ -336,157 +622,71 @@
|
|
|
336
622
|
"kind": "js",
|
|
337
623
|
"name": "default",
|
|
338
624
|
"declaration": {
|
|
339
|
-
"name": "
|
|
340
|
-
"module": "components/
|
|
625
|
+
"name": "AccordionGroup",
|
|
626
|
+
"module": "components/accordiongroup/accordiongroup.component.js"
|
|
341
627
|
}
|
|
342
628
|
}
|
|
343
629
|
]
|
|
344
630
|
},
|
|
345
631
|
{
|
|
346
632
|
"kind": "javascript-module",
|
|
347
|
-
"path": "components/
|
|
633
|
+
"path": "components/accordionbutton/accordionbutton.component.js",
|
|
348
634
|
"declarations": [
|
|
349
635
|
{
|
|
350
636
|
"kind": "class",
|
|
351
|
-
"description": "An accordion contains a header and body section with
|
|
352
|
-
"name": "
|
|
637
|
+
"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.",
|
|
638
|
+
"name": "AccordionButton",
|
|
353
639
|
"cssProperties": [
|
|
354
640
|
{
|
|
355
|
-
"description": "The border color of the accordion.",
|
|
356
|
-
"name": "--mdc-accordionbutton-border-color"
|
|
357
|
-
"inheritedFrom": {
|
|
358
|
-
"name": "AccordionButton",
|
|
359
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
360
|
-
}
|
|
361
|
-
},
|
|
362
|
-
{
|
|
363
|
-
"description": "The hover color of the accordion.",
|
|
364
|
-
"name": "--mdc-accordionbutton-hover-color",
|
|
365
|
-
"inheritedFrom": {
|
|
366
|
-
"name": "AccordionButton",
|
|
367
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
368
|
-
}
|
|
641
|
+
"description": "The border color of the accordion button.",
|
|
642
|
+
"name": "--mdc-accordionbutton-border-color"
|
|
369
643
|
},
|
|
370
644
|
{
|
|
371
|
-
"description": "The
|
|
372
|
-
"name": "--mdc-accordionbutton-
|
|
373
|
-
"inheritedFrom": {
|
|
374
|
-
"name": "AccordionButton",
|
|
375
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
376
|
-
}
|
|
645
|
+
"description": "The hover color of the accordion button.",
|
|
646
|
+
"name": "--mdc-accordionbutton-hover-color"
|
|
377
647
|
},
|
|
378
648
|
{
|
|
379
|
-
"description": "The
|
|
380
|
-
"name": "--mdc-accordionbutton-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
649
|
+
"description": "The active color of the accordion button.",
|
|
650
|
+
"name": "--mdc-accordionbutton-active-color"
|
|
651
|
+
},
|
|
652
|
+
{
|
|
653
|
+
"description": "The disabled color of the accordion button.",
|
|
654
|
+
"name": "--mdc-accordionbutton-disabled-color"
|
|
385
655
|
}
|
|
386
656
|
],
|
|
387
657
|
"cssParts": [
|
|
388
658
|
{
|
|
389
|
-
"description": "The header section of the accordion.",
|
|
390
|
-
"name": "header-section"
|
|
391
|
-
"inheritedFrom": {
|
|
392
|
-
"name": "AccordionButton",
|
|
393
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
394
|
-
}
|
|
395
|
-
},
|
|
396
|
-
{
|
|
397
|
-
"description": "The leading header of the accordion.",
|
|
398
|
-
"name": "leading-header",
|
|
399
|
-
"inheritedFrom": {
|
|
400
|
-
"name": "AccordionButton",
|
|
401
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
402
|
-
}
|
|
659
|
+
"description": "The header section of the accordion button.",
|
|
660
|
+
"name": "header-section"
|
|
403
661
|
},
|
|
404
662
|
{
|
|
405
|
-
"description": "The
|
|
406
|
-
"name": "
|
|
407
|
-
"inheritedFrom": {
|
|
408
|
-
"name": "AccordionButton",
|
|
409
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
410
|
-
}
|
|
663
|
+
"description": "The header button section of the accordion button.",
|
|
664
|
+
"name": "header-button-section"
|
|
411
665
|
},
|
|
412
666
|
{
|
|
413
|
-
"description": "The
|
|
414
|
-
"name": "
|
|
667
|
+
"description": "The leading header of the accordion button.",
|
|
668
|
+
"name": "leading-header"
|
|
415
669
|
},
|
|
416
670
|
{
|
|
417
|
-
"description": "The
|
|
418
|
-
"name": "
|
|
419
|
-
"inheritedFrom": {
|
|
420
|
-
"name": "AccordionButton",
|
|
421
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
422
|
-
}
|
|
671
|
+
"description": "The trailing header of the accordion button.",
|
|
672
|
+
"name": "trailing-header"
|
|
423
673
|
},
|
|
424
674
|
{
|
|
425
|
-
"description": "The header
|
|
426
|
-
"name": "
|
|
427
|
-
"inheritedFrom": {
|
|
428
|
-
"name": "AccordionButton",
|
|
429
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
430
|
-
}
|
|
675
|
+
"description": "The trailing header icon of the accordion button.",
|
|
676
|
+
"name": "trailing-header__icon"
|
|
431
677
|
},
|
|
432
678
|
{
|
|
433
|
-
"description": "The
|
|
434
|
-
"name": "
|
|
435
|
-
"inheritedFrom": {
|
|
436
|
-
"name": "AccordionButton",
|
|
437
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
438
|
-
}
|
|
679
|
+
"description": "The body section of the accordion button.",
|
|
680
|
+
"name": "body-section"
|
|
439
681
|
}
|
|
440
682
|
],
|
|
441
683
|
"slots": [
|
|
442
|
-
{
|
|
443
|
-
"description": "The leading controls slot of the accordion on the header section.",
|
|
444
|
-
"name": "leading-controls"
|
|
445
|
-
},
|
|
446
|
-
{
|
|
447
|
-
"description": "The trailing controls slot of the accordion on the header section.",
|
|
448
|
-
"name": "trailing-controls"
|
|
449
|
-
},
|
|
450
684
|
{
|
|
451
685
|
"description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
|
|
452
|
-
"name": "default"
|
|
453
|
-
"inheritedFrom": {
|
|
454
|
-
"name": "AccordionButton",
|
|
455
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
456
|
-
}
|
|
686
|
+
"name": "default"
|
|
457
687
|
}
|
|
458
688
|
],
|
|
459
689
|
"members": [
|
|
460
|
-
{
|
|
461
|
-
"kind": "method",
|
|
462
|
-
"name": "renderHeader",
|
|
463
|
-
"privacy": "protected",
|
|
464
|
-
"return": {
|
|
465
|
-
"type": {
|
|
466
|
-
"text": ""
|
|
467
|
-
}
|
|
468
|
-
},
|
|
469
|
-
"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.",
|
|
470
|
-
"inheritedFrom": {
|
|
471
|
-
"name": "AccordionButton",
|
|
472
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
473
|
-
}
|
|
474
|
-
},
|
|
475
|
-
{
|
|
476
|
-
"kind": "field",
|
|
477
|
-
"name": "disabled",
|
|
478
|
-
"type": {
|
|
479
|
-
"text": "boolean | undefined"
|
|
480
|
-
},
|
|
481
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
482
|
-
"default": "undefined",
|
|
483
|
-
"attribute": "disabled",
|
|
484
|
-
"reflects": true,
|
|
485
|
-
"inheritedFrom": {
|
|
486
|
-
"name": "AccordionButton",
|
|
487
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
488
|
-
}
|
|
489
|
-
},
|
|
490
690
|
{
|
|
491
691
|
"kind": "field",
|
|
492
692
|
"name": "size",
|
|
@@ -496,11 +696,7 @@
|
|
|
496
696
|
"description": "The size of the accordion item.",
|
|
497
697
|
"default": "'small'",
|
|
498
698
|
"attribute": "size",
|
|
499
|
-
"reflects": true
|
|
500
|
-
"inheritedFrom": {
|
|
501
|
-
"name": "AccordionButton",
|
|
502
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
503
|
-
}
|
|
699
|
+
"reflects": true
|
|
504
700
|
},
|
|
505
701
|
{
|
|
506
702
|
"kind": "field",
|
|
@@ -511,11 +707,7 @@
|
|
|
511
707
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
512
708
|
"default": "'default'",
|
|
513
709
|
"attribute": "variant",
|
|
514
|
-
"reflects": true
|
|
515
|
-
"inheritedFrom": {
|
|
516
|
-
"name": "AccordionButton",
|
|
517
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
518
|
-
}
|
|
710
|
+
"reflects": true
|
|
519
711
|
},
|
|
520
712
|
{
|
|
521
713
|
"kind": "field",
|
|
@@ -526,11 +718,7 @@
|
|
|
526
718
|
"description": "The aria level of the accordion component.",
|
|
527
719
|
"default": "3",
|
|
528
720
|
"attribute": "data-aria-level",
|
|
529
|
-
"reflects": true
|
|
530
|
-
"inheritedFrom": {
|
|
531
|
-
"name": "AccordionButton",
|
|
532
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
533
|
-
}
|
|
721
|
+
"reflects": true
|
|
534
722
|
},
|
|
535
723
|
{
|
|
536
724
|
"kind": "field",
|
|
@@ -541,11 +729,7 @@
|
|
|
541
729
|
"description": "The visibility of the accordion button.",
|
|
542
730
|
"default": "false",
|
|
543
731
|
"attribute": "expanded",
|
|
544
|
-
"reflects": true
|
|
545
|
-
"inheritedFrom": {
|
|
546
|
-
"name": "AccordionButton",
|
|
547
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
548
|
-
}
|
|
732
|
+
"reflects": true
|
|
549
733
|
},
|
|
550
734
|
{
|
|
551
735
|
"kind": "field",
|
|
@@ -555,11 +739,7 @@
|
|
|
555
739
|
},
|
|
556
740
|
"description": "The header text of the accordion item.",
|
|
557
741
|
"attribute": "header-text",
|
|
558
|
-
"reflects": true
|
|
559
|
-
"inheritedFrom": {
|
|
560
|
-
"name": "AccordionButton",
|
|
561
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
562
|
-
}
|
|
742
|
+
"reflects": true
|
|
563
743
|
},
|
|
564
744
|
{
|
|
565
745
|
"kind": "field",
|
|
@@ -568,11 +748,7 @@
|
|
|
568
748
|
"text": "IconNames | undefined"
|
|
569
749
|
},
|
|
570
750
|
"description": "The leading icon that is displayed before the header text.",
|
|
571
|
-
"attribute": "prefix-icon"
|
|
572
|
-
"inheritedFrom": {
|
|
573
|
-
"name": "AccordionButton",
|
|
574
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
575
|
-
}
|
|
751
|
+
"attribute": "prefix-icon"
|
|
576
752
|
},
|
|
577
753
|
{
|
|
578
754
|
"kind": "method",
|
|
@@ -583,11 +759,7 @@
|
|
|
583
759
|
"text": "void"
|
|
584
760
|
}
|
|
585
761
|
},
|
|
586
|
-
"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."
|
|
587
|
-
"inheritedFrom": {
|
|
588
|
-
"name": "AccordionButton",
|
|
589
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
590
|
-
}
|
|
762
|
+
"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."
|
|
591
763
|
},
|
|
592
764
|
{
|
|
593
765
|
"kind": "method",
|
|
@@ -598,11 +770,7 @@
|
|
|
598
770
|
"text": "void"
|
|
599
771
|
}
|
|
600
772
|
},
|
|
601
|
-
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
|
|
602
|
-
"inheritedFrom": {
|
|
603
|
-
"name": "AccordionButton",
|
|
604
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
605
|
-
}
|
|
773
|
+
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
|
|
606
774
|
},
|
|
607
775
|
{
|
|
608
776
|
"kind": "method",
|
|
@@ -622,11 +790,7 @@
|
|
|
622
790
|
"description": "The KeyboardEvent fired."
|
|
623
791
|
}
|
|
624
792
|
],
|
|
625
|
-
"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."
|
|
626
|
-
"inheritedFrom": {
|
|
627
|
-
"name": "AccordionButton",
|
|
628
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
629
|
-
}
|
|
793
|
+
"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."
|
|
630
794
|
},
|
|
631
795
|
{
|
|
632
796
|
"kind": "method",
|
|
@@ -645,11 +809,7 @@
|
|
|
645
809
|
"text": "IconNames"
|
|
646
810
|
}
|
|
647
811
|
}
|
|
648
|
-
]
|
|
649
|
-
"inheritedFrom": {
|
|
650
|
-
"name": "AccordionButton",
|
|
651
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
652
|
-
}
|
|
812
|
+
]
|
|
653
813
|
},
|
|
654
814
|
{
|
|
655
815
|
"kind": "method",
|
|
@@ -659,10 +819,16 @@
|
|
|
659
819
|
"type": {
|
|
660
820
|
"text": "TemplateResult | typeof nothing"
|
|
661
821
|
}
|
|
662
|
-
}
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
822
|
+
}
|
|
823
|
+
},
|
|
824
|
+
{
|
|
825
|
+
"kind": "method",
|
|
826
|
+
"name": "renderHeader",
|
|
827
|
+
"privacy": "protected",
|
|
828
|
+
"return": {
|
|
829
|
+
"type": {
|
|
830
|
+
"text": "TemplateResult"
|
|
831
|
+
}
|
|
666
832
|
}
|
|
667
833
|
},
|
|
668
834
|
{
|
|
@@ -674,11 +840,7 @@
|
|
|
674
840
|
"text": ""
|
|
675
841
|
}
|
|
676
842
|
},
|
|
677
|
-
"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."
|
|
678
|
-
"inheritedFrom": {
|
|
679
|
-
"name": "AccordionButton",
|
|
680
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
681
|
-
}
|
|
843
|
+
"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."
|
|
682
844
|
},
|
|
683
845
|
{
|
|
684
846
|
"kind": "method",
|
|
@@ -688,45 +850,32 @@
|
|
|
688
850
|
"type": {
|
|
689
851
|
"text": "TemplateResult | typeof nothing"
|
|
690
852
|
}
|
|
853
|
+
}
|
|
854
|
+
},
|
|
855
|
+
{
|
|
856
|
+
"kind": "field",
|
|
857
|
+
"name": "disabled",
|
|
858
|
+
"type": {
|
|
859
|
+
"text": "boolean | undefined"
|
|
691
860
|
},
|
|
861
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
862
|
+
"default": "undefined",
|
|
863
|
+
"attribute": "disabled",
|
|
864
|
+
"reflects": true,
|
|
692
865
|
"inheritedFrom": {
|
|
693
|
-
"name": "
|
|
694
|
-
"module": "
|
|
866
|
+
"name": "DisabledMixin",
|
|
867
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
695
868
|
}
|
|
696
869
|
}
|
|
697
870
|
],
|
|
698
871
|
"events": [
|
|
699
872
|
{
|
|
700
|
-
"description": "(React: onShown) This event is triggered when the accordion is expanded.",
|
|
873
|
+
"description": "(React: onShown) This event is triggered when the accordion button is expanded.",
|
|
701
874
|
"name": "shown",
|
|
702
|
-
"reactName": "onShown"
|
|
703
|
-
"inheritedFrom": {
|
|
704
|
-
"name": "AccordionButton",
|
|
705
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
706
|
-
}
|
|
875
|
+
"reactName": "onShown"
|
|
707
876
|
}
|
|
708
877
|
],
|
|
709
|
-
"superclass": {
|
|
710
|
-
"name": "AccordionButton",
|
|
711
|
-
"module": "/src/components/accordionbutton/accordionbutton.component"
|
|
712
|
-
},
|
|
713
|
-
"tagName": "mdc-accordion",
|
|
714
|
-
"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 */",
|
|
715
|
-
"customElement": true,
|
|
716
878
|
"attributes": [
|
|
717
|
-
{
|
|
718
|
-
"name": "disabled",
|
|
719
|
-
"type": {
|
|
720
|
-
"text": "boolean | undefined"
|
|
721
|
-
},
|
|
722
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
723
|
-
"default": "undefined",
|
|
724
|
-
"fieldName": "disabled",
|
|
725
|
-
"inheritedFrom": {
|
|
726
|
-
"name": "AccordionButton",
|
|
727
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
728
|
-
}
|
|
729
|
-
},
|
|
730
879
|
{
|
|
731
880
|
"name": "size",
|
|
732
881
|
"type": {
|
|
@@ -734,24 +883,16 @@
|
|
|
734
883
|
},
|
|
735
884
|
"description": "The size of the accordion item.",
|
|
736
885
|
"default": "'small'",
|
|
737
|
-
"fieldName": "size"
|
|
738
|
-
"inheritedFrom": {
|
|
739
|
-
"name": "AccordionButton",
|
|
740
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
741
|
-
}
|
|
886
|
+
"fieldName": "size"
|
|
742
887
|
},
|
|
743
888
|
{
|
|
744
889
|
"name": "variant",
|
|
745
890
|
"type": {
|
|
746
|
-
"text": "Variant"
|
|
747
|
-
},
|
|
748
|
-
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
749
|
-
"default": "'default'",
|
|
750
|
-
"fieldName": "variant"
|
|
751
|
-
"inheritedFrom": {
|
|
752
|
-
"name": "AccordionButton",
|
|
753
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
754
|
-
}
|
|
891
|
+
"text": "Variant"
|
|
892
|
+
},
|
|
893
|
+
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
894
|
+
"default": "'default'",
|
|
895
|
+
"fieldName": "variant"
|
|
755
896
|
},
|
|
756
897
|
{
|
|
757
898
|
"name": "data-aria-level",
|
|
@@ -760,11 +901,7 @@
|
|
|
760
901
|
},
|
|
761
902
|
"description": "The aria level of the accordion component.",
|
|
762
903
|
"default": "3",
|
|
763
|
-
"fieldName": "dataAriaLevel"
|
|
764
|
-
"inheritedFrom": {
|
|
765
|
-
"name": "AccordionButton",
|
|
766
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
767
|
-
}
|
|
904
|
+
"fieldName": "dataAriaLevel"
|
|
768
905
|
},
|
|
769
906
|
{
|
|
770
907
|
"name": "expanded",
|
|
@@ -773,11 +910,7 @@
|
|
|
773
910
|
},
|
|
774
911
|
"description": "The visibility of the accordion button.",
|
|
775
912
|
"default": "false",
|
|
776
|
-
"fieldName": "expanded"
|
|
777
|
-
"inheritedFrom": {
|
|
778
|
-
"name": "AccordionButton",
|
|
779
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
780
|
-
}
|
|
913
|
+
"fieldName": "expanded"
|
|
781
914
|
},
|
|
782
915
|
{
|
|
783
916
|
"name": "header-text",
|
|
@@ -785,11 +918,7 @@
|
|
|
785
918
|
"text": "string | undefined"
|
|
786
919
|
},
|
|
787
920
|
"description": "The header text of the accordion item.",
|
|
788
|
-
"fieldName": "headerText"
|
|
789
|
-
"inheritedFrom": {
|
|
790
|
-
"name": "AccordionButton",
|
|
791
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
792
|
-
}
|
|
921
|
+
"fieldName": "headerText"
|
|
793
922
|
},
|
|
794
923
|
{
|
|
795
924
|
"name": "prefix-icon",
|
|
@@ -797,13 +926,35 @@
|
|
|
797
926
|
"text": "IconNames | undefined"
|
|
798
927
|
},
|
|
799
928
|
"description": "The leading icon that is displayed before the header text.",
|
|
800
|
-
"fieldName": "prefixIcon"
|
|
929
|
+
"fieldName": "prefixIcon"
|
|
930
|
+
},
|
|
931
|
+
{
|
|
932
|
+
"name": "disabled",
|
|
933
|
+
"type": {
|
|
934
|
+
"text": "boolean | undefined"
|
|
935
|
+
},
|
|
936
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
937
|
+
"default": "undefined",
|
|
938
|
+
"fieldName": "disabled",
|
|
801
939
|
"inheritedFrom": {
|
|
802
|
-
"name": "
|
|
803
|
-
"module": "src/
|
|
940
|
+
"name": "DisabledMixin",
|
|
941
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
804
942
|
}
|
|
805
943
|
}
|
|
806
|
-
]
|
|
944
|
+
],
|
|
945
|
+
"mixins": [
|
|
946
|
+
{
|
|
947
|
+
"name": "DisabledMixin",
|
|
948
|
+
"module": "/src/utils/mixins/DisabledMixin"
|
|
949
|
+
}
|
|
950
|
+
],
|
|
951
|
+
"superclass": {
|
|
952
|
+
"name": "Component",
|
|
953
|
+
"module": "/src/models"
|
|
954
|
+
},
|
|
955
|
+
"tagName": "mdc-accordionbutton",
|
|
956
|
+
"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 */",
|
|
957
|
+
"customElement": true
|
|
807
958
|
}
|
|
808
959
|
],
|
|
809
960
|
"exports": [
|
|
@@ -811,8 +962,8 @@
|
|
|
811
962
|
"kind": "js",
|
|
812
963
|
"name": "default",
|
|
813
964
|
"declaration": {
|
|
814
|
-
"name": "
|
|
815
|
-
"module": "components/
|
|
965
|
+
"name": "AccordionButton",
|
|
966
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
816
967
|
}
|
|
817
968
|
}
|
|
818
969
|
]
|
|
@@ -1617,141 +1768,51 @@
|
|
|
1617
1768
|
},
|
|
1618
1769
|
{
|
|
1619
1770
|
"kind": "javascript-module",
|
|
1620
|
-
"path": "components/
|
|
1771
|
+
"path": "components/appheader/appheader.component.js",
|
|
1621
1772
|
"declarations": [
|
|
1622
1773
|
{
|
|
1623
1774
|
"kind": "class",
|
|
1624
|
-
"description": "
|
|
1625
|
-
"name": "
|
|
1626
|
-
"
|
|
1627
|
-
{
|
|
1628
|
-
"description": "The border color of the entire accordiongroup",
|
|
1629
|
-
"name": "--mdc-accordiongroup-border-color"
|
|
1630
|
-
}
|
|
1631
|
-
],
|
|
1632
|
-
"slots": [
|
|
1633
|
-
{
|
|
1634
|
-
"description": "The default slot can contain the `accordion` or `accordionbutton` components.",
|
|
1635
|
-
"name": "default"
|
|
1636
|
-
}
|
|
1637
|
-
],
|
|
1638
|
-
"members": [
|
|
1639
|
-
{
|
|
1640
|
-
"kind": "field",
|
|
1641
|
-
"name": "size",
|
|
1642
|
-
"type": {
|
|
1643
|
-
"text": "Size"
|
|
1644
|
-
},
|
|
1645
|
-
"description": "The size of the accordion item.",
|
|
1646
|
-
"default": "'small'",
|
|
1647
|
-
"attribute": "size",
|
|
1648
|
-
"reflects": true
|
|
1649
|
-
},
|
|
1775
|
+
"description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
|
|
1776
|
+
"name": "Appheader",
|
|
1777
|
+
"cssParts": [
|
|
1650
1778
|
{
|
|
1651
|
-
"
|
|
1652
|
-
"name": "
|
|
1653
|
-
"type": {
|
|
1654
|
-
"text": "Variant"
|
|
1655
|
-
},
|
|
1656
|
-
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
1657
|
-
"default": "'stacked'",
|
|
1658
|
-
"attribute": "variant",
|
|
1659
|
-
"reflects": true
|
|
1779
|
+
"description": "The main container for styling the header.",
|
|
1780
|
+
"name": "container"
|
|
1660
1781
|
},
|
|
1661
1782
|
{
|
|
1662
|
-
"
|
|
1663
|
-
"name": "
|
|
1664
|
-
"type": {
|
|
1665
|
-
"text": "boolean"
|
|
1666
|
-
},
|
|
1667
|
-
"default": "false",
|
|
1668
|
-
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
1669
|
-
"attribute": "allow-multiple",
|
|
1670
|
-
"reflects": true
|
|
1783
|
+
"description": "The leading section of the header.",
|
|
1784
|
+
"name": "leading-section"
|
|
1671
1785
|
},
|
|
1672
1786
|
{
|
|
1673
|
-
"
|
|
1674
|
-
"name": "
|
|
1675
|
-
"privacy": "private",
|
|
1676
|
-
"return": {
|
|
1677
|
-
"type": {
|
|
1678
|
-
"text": "void"
|
|
1679
|
-
}
|
|
1680
|
-
},
|
|
1681
|
-
"parameters": [
|
|
1682
|
-
{
|
|
1683
|
-
"name": "event",
|
|
1684
|
-
"type": {
|
|
1685
|
-
"text": "Event"
|
|
1686
|
-
},
|
|
1687
|
-
"description": "The event object from the 'shown' event."
|
|
1688
|
-
}
|
|
1689
|
-
],
|
|
1690
|
-
"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."
|
|
1787
|
+
"description": "The center section of the header.",
|
|
1788
|
+
"name": "center-section"
|
|
1691
1789
|
},
|
|
1692
1790
|
{
|
|
1693
|
-
"
|
|
1694
|
-
"name": "
|
|
1695
|
-
"privacy": "private",
|
|
1696
|
-
"return": {
|
|
1697
|
-
"type": {
|
|
1698
|
-
"text": "void"
|
|
1699
|
-
}
|
|
1700
|
-
},
|
|
1701
|
-
"parameters": [
|
|
1702
|
-
{
|
|
1703
|
-
"name": "attributeName",
|
|
1704
|
-
"type": {
|
|
1705
|
-
"text": "string"
|
|
1706
|
-
},
|
|
1707
|
-
"description": "The name of the attribute to set."
|
|
1708
|
-
},
|
|
1709
|
-
{
|
|
1710
|
-
"name": "attributeValue",
|
|
1711
|
-
"type": {
|
|
1712
|
-
"text": "string"
|
|
1713
|
-
},
|
|
1714
|
-
"description": "The value to set the attribute to."
|
|
1715
|
-
}
|
|
1716
|
-
],
|
|
1717
|
-
"description": "Sets the given attribute on all child accordion or accordionbutton components."
|
|
1791
|
+
"description": "The trailing section of the header.",
|
|
1792
|
+
"name": "trailing-section"
|
|
1718
1793
|
}
|
|
1719
1794
|
],
|
|
1720
|
-
"
|
|
1795
|
+
"slots": [
|
|
1721
1796
|
{
|
|
1722
|
-
"
|
|
1723
|
-
"
|
|
1724
|
-
"text": "Size"
|
|
1725
|
-
},
|
|
1726
|
-
"description": "The size of the accordion item.",
|
|
1727
|
-
"default": "'small'",
|
|
1728
|
-
"fieldName": "size"
|
|
1797
|
+
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
1798
|
+
"name": "leading"
|
|
1729
1799
|
},
|
|
1730
1800
|
{
|
|
1731
|
-
"
|
|
1732
|
-
"
|
|
1733
|
-
"text": "Variant"
|
|
1734
|
-
},
|
|
1735
|
-
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
1736
|
-
"default": "'stacked'",
|
|
1737
|
-
"fieldName": "variant"
|
|
1801
|
+
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
1802
|
+
"name": "center"
|
|
1738
1803
|
},
|
|
1739
1804
|
{
|
|
1740
|
-
"
|
|
1741
|
-
"
|
|
1742
|
-
"text": "boolean"
|
|
1743
|
-
},
|
|
1744
|
-
"default": "false",
|
|
1745
|
-
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
1746
|
-
"fieldName": "allowMultiple"
|
|
1805
|
+
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
1806
|
+
"name": "trailing"
|
|
1747
1807
|
}
|
|
1748
1808
|
],
|
|
1809
|
+
"members": [],
|
|
1749
1810
|
"superclass": {
|
|
1750
1811
|
"name": "Component",
|
|
1751
1812
|
"module": "/src/models"
|
|
1752
1813
|
},
|
|
1753
|
-
"tagName": "mdc-
|
|
1754
|
-
"jsDoc": "/**\n *
|
|
1814
|
+
"tagName": "mdc-appheader",
|
|
1815
|
+
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
|
1755
1816
|
"customElement": true
|
|
1756
1817
|
}
|
|
1757
1818
|
],
|
|
@@ -1760,8 +1821,8 @@
|
|
|
1760
1821
|
"kind": "js",
|
|
1761
1822
|
"name": "default",
|
|
1762
1823
|
"declaration": {
|
|
1763
|
-
"name": "
|
|
1764
|
-
"module": "components/
|
|
1824
|
+
"name": "Appheader",
|
|
1825
|
+
"module": "components/appheader/appheader.component.js"
|
|
1765
1826
|
}
|
|
1766
1827
|
}
|
|
1767
1828
|
]
|
|
@@ -2032,67 +2093,6 @@
|
|
|
2032
2093
|
}
|
|
2033
2094
|
]
|
|
2034
2095
|
},
|
|
2035
|
-
{
|
|
2036
|
-
"kind": "javascript-module",
|
|
2037
|
-
"path": "components/appheader/appheader.component.js",
|
|
2038
|
-
"declarations": [
|
|
2039
|
-
{
|
|
2040
|
-
"kind": "class",
|
|
2041
|
-
"description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
|
|
2042
|
-
"name": "Appheader",
|
|
2043
|
-
"cssParts": [
|
|
2044
|
-
{
|
|
2045
|
-
"description": "The main container for styling the header.",
|
|
2046
|
-
"name": "container"
|
|
2047
|
-
},
|
|
2048
|
-
{
|
|
2049
|
-
"description": "The leading section of the header.",
|
|
2050
|
-
"name": "leading-section"
|
|
2051
|
-
},
|
|
2052
|
-
{
|
|
2053
|
-
"description": "The center section of the header.",
|
|
2054
|
-
"name": "center-section"
|
|
2055
|
-
},
|
|
2056
|
-
{
|
|
2057
|
-
"description": "The trailing section of the header.",
|
|
2058
|
-
"name": "trailing-section"
|
|
2059
|
-
}
|
|
2060
|
-
],
|
|
2061
|
-
"slots": [
|
|
2062
|
-
{
|
|
2063
|
-
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
2064
|
-
"name": "leading"
|
|
2065
|
-
},
|
|
2066
|
-
{
|
|
2067
|
-
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
2068
|
-
"name": "center"
|
|
2069
|
-
},
|
|
2070
|
-
{
|
|
2071
|
-
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
2072
|
-
"name": "trailing"
|
|
2073
|
-
}
|
|
2074
|
-
],
|
|
2075
|
-
"members": [],
|
|
2076
|
-
"superclass": {
|
|
2077
|
-
"name": "Component",
|
|
2078
|
-
"module": "/src/models"
|
|
2079
|
-
},
|
|
2080
|
-
"tagName": "mdc-appheader",
|
|
2081
|
-
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
|
2082
|
-
"customElement": true
|
|
2083
|
-
}
|
|
2084
|
-
],
|
|
2085
|
-
"exports": [
|
|
2086
|
-
{
|
|
2087
|
-
"kind": "js",
|
|
2088
|
-
"name": "default",
|
|
2089
|
-
"declaration": {
|
|
2090
|
-
"name": "Appheader",
|
|
2091
|
-
"module": "components/appheader/appheader.component.js"
|
|
2092
|
-
}
|
|
2093
|
-
}
|
|
2094
|
-
]
|
|
2095
|
-
},
|
|
2096
2096
|
{
|
|
2097
2097
|
"kind": "javascript-module",
|
|
2098
2098
|
"path": "components/avatarbutton/avatarbutton.component.js",
|