@momentum-design/components 0.122.7 → 0.122.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +752 -752
- package/dist/react/index.d.ts +3 -3
- package/dist/react/index.js +3 -3
- package/package.json +1 -1
|
@@ -4,169 +4,63 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "components/
|
|
7
|
+
"path": "components/accordionbutton/accordionbutton.component.js",
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "An accordion contains a header and body section with
|
|
12
|
-
"name": "
|
|
11
|
+
"description": "An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you do need any controls on your accordion heading, then it's advised to use `accordion` component.\n\nIf an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.",
|
|
12
|
+
"name": "AccordionButton",
|
|
13
13
|
"cssProperties": [
|
|
14
14
|
{
|
|
15
|
-
"description": "The border color of the accordion.",
|
|
16
|
-
"name": "--mdc-accordionbutton-border-color"
|
|
17
|
-
"inheritedFrom": {
|
|
18
|
-
"name": "AccordionButton",
|
|
19
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
20
|
-
}
|
|
15
|
+
"description": "The border color of the accordion button.",
|
|
16
|
+
"name": "--mdc-accordionbutton-border-color"
|
|
21
17
|
},
|
|
22
18
|
{
|
|
23
|
-
"description": "The hover color of the accordion.",
|
|
24
|
-
"name": "--mdc-accordionbutton-hover-color"
|
|
25
|
-
"inheritedFrom": {
|
|
26
|
-
"name": "AccordionButton",
|
|
27
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
28
|
-
}
|
|
19
|
+
"description": "The hover color of the accordion button.",
|
|
20
|
+
"name": "--mdc-accordionbutton-hover-color"
|
|
29
21
|
},
|
|
30
22
|
{
|
|
31
|
-
"description": "The active color of the accordion.",
|
|
32
|
-
"name": "--mdc-accordionbutton-active-color"
|
|
33
|
-
"inheritedFrom": {
|
|
34
|
-
"name": "AccordionButton",
|
|
35
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
36
|
-
}
|
|
23
|
+
"description": "The active color of the accordion button.",
|
|
24
|
+
"name": "--mdc-accordionbutton-active-color"
|
|
37
25
|
},
|
|
38
26
|
{
|
|
39
|
-
"description": "The disabled color of the accordion.",
|
|
40
|
-
"name": "--mdc-accordionbutton-disabled-color"
|
|
41
|
-
"inheritedFrom": {
|
|
42
|
-
"name": "AccordionButton",
|
|
43
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
44
|
-
}
|
|
27
|
+
"description": "The disabled color of the accordion button.",
|
|
28
|
+
"name": "--mdc-accordionbutton-disabled-color"
|
|
45
29
|
}
|
|
46
30
|
],
|
|
47
31
|
"cssParts": [
|
|
48
32
|
{
|
|
49
|
-
"description": "The body section of the accordion.",
|
|
50
|
-
"name": "body-section"
|
|
51
|
-
"inheritedFrom": {
|
|
52
|
-
"name": "AccordionButton",
|
|
53
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
54
|
-
}
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
"description": "The header section of the accordion.",
|
|
58
|
-
"name": "header-section",
|
|
59
|
-
"inheritedFrom": {
|
|
60
|
-
"name": "AccordionButton",
|
|
61
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
62
|
-
}
|
|
33
|
+
"description": "The body section of the accordion button.",
|
|
34
|
+
"name": "body-section"
|
|
63
35
|
},
|
|
64
36
|
{
|
|
65
|
-
"description": "The
|
|
66
|
-
"name": "
|
|
67
|
-
"inheritedFrom": {
|
|
68
|
-
"name": "AccordionButton",
|
|
69
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
70
|
-
}
|
|
37
|
+
"description": "The header button section of the accordion button.",
|
|
38
|
+
"name": "header-button-section"
|
|
71
39
|
},
|
|
72
40
|
{
|
|
73
|
-
"description": "The
|
|
74
|
-
"name": "
|
|
75
|
-
"inheritedFrom": {
|
|
76
|
-
"name": "AccordionButton",
|
|
77
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
78
|
-
}
|
|
41
|
+
"description": "The header section of the accordion button.",
|
|
42
|
+
"name": "header-section"
|
|
79
43
|
},
|
|
80
44
|
{
|
|
81
|
-
"description": "The
|
|
82
|
-
"name": "
|
|
45
|
+
"description": "The leading header of the accordion button.",
|
|
46
|
+
"name": "leading-header"
|
|
83
47
|
},
|
|
84
48
|
{
|
|
85
|
-
"description": "The header
|
|
86
|
-
"name": "header
|
|
87
|
-
"inheritedFrom": {
|
|
88
|
-
"name": "AccordionButton",
|
|
89
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
90
|
-
}
|
|
49
|
+
"description": "The trailing header of the accordion button.",
|
|
50
|
+
"name": "trailing-header"
|
|
91
51
|
},
|
|
92
52
|
{
|
|
93
53
|
"description": "The trailing header icon of the accordion button.",
|
|
94
|
-
"name": "trailing-header__icon"
|
|
95
|
-
"inheritedFrom": {
|
|
96
|
-
"name": "AccordionButton",
|
|
97
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
98
|
-
}
|
|
54
|
+
"name": "trailing-header__icon"
|
|
99
55
|
}
|
|
100
56
|
],
|
|
101
57
|
"slots": [
|
|
102
|
-
{
|
|
103
|
-
"description": "The leading controls slot of the accordion on the header section.",
|
|
104
|
-
"name": "leading-controls"
|
|
105
|
-
},
|
|
106
|
-
{
|
|
107
|
-
"description": "The trailing controls slot of the accordion on the header section.",
|
|
108
|
-
"name": "trailing-controls"
|
|
109
|
-
},
|
|
110
58
|
{
|
|
111
59
|
"description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
|
|
112
|
-
"name": "default"
|
|
113
|
-
"inheritedFrom": {
|
|
114
|
-
"name": "AccordionButton",
|
|
115
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
116
|
-
}
|
|
60
|
+
"name": "default"
|
|
117
61
|
}
|
|
118
62
|
],
|
|
119
63
|
"members": [
|
|
120
|
-
{
|
|
121
|
-
"kind": "field",
|
|
122
|
-
"name": "openButtonAriaLabel",
|
|
123
|
-
"type": {
|
|
124
|
-
"text": "string | undefined"
|
|
125
|
-
},
|
|
126
|
-
"description": "Aria-label attribute for the trigger button when accordion is collapsed.",
|
|
127
|
-
"attribute": "open-button-aria-label",
|
|
128
|
-
"reflects": true
|
|
129
|
-
},
|
|
130
|
-
{
|
|
131
|
-
"kind": "field",
|
|
132
|
-
"name": "closeButtonAriaLabel",
|
|
133
|
-
"type": {
|
|
134
|
-
"text": "string | undefined"
|
|
135
|
-
},
|
|
136
|
-
"description": "Aria-label attribute for the trigger button when accordion is expanded.",
|
|
137
|
-
"attribute": "close-button-aria-label",
|
|
138
|
-
"reflects": true
|
|
139
|
-
},
|
|
140
|
-
{
|
|
141
|
-
"kind": "method",
|
|
142
|
-
"name": "renderHeader",
|
|
143
|
-
"privacy": "protected",
|
|
144
|
-
"return": {
|
|
145
|
-
"type": {
|
|
146
|
-
"text": ""
|
|
147
|
-
}
|
|
148
|
-
},
|
|
149
|
-
"description": "Renders the header section of the accordion.\nThis includes the leading icon, text and controls, and the trailing controls.\nThe trailing controls include the expand/collapse button.\nThe button is disabled if the accordion is disabled.\nThe button is also given the aria-controls attribute set to the id of the body section.\nThe button is also given the aria-expanded attribute set to the expanded state of the accordion.\nThe prefix icon of the button is set to the expanded state of the accordion.",
|
|
150
|
-
"inheritedFrom": {
|
|
151
|
-
"name": "AccordionButton",
|
|
152
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
153
|
-
}
|
|
154
|
-
},
|
|
155
|
-
{
|
|
156
|
-
"kind": "field",
|
|
157
|
-
"name": "disabled",
|
|
158
|
-
"type": {
|
|
159
|
-
"text": "boolean | undefined"
|
|
160
|
-
},
|
|
161
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
162
|
-
"default": "undefined",
|
|
163
|
-
"attribute": "disabled",
|
|
164
|
-
"reflects": true,
|
|
165
|
-
"inheritedFrom": {
|
|
166
|
-
"name": "DisabledMixin",
|
|
167
|
-
"module": "utils/mixins/DisabledMixin.js"
|
|
168
|
-
}
|
|
169
|
-
},
|
|
170
64
|
{
|
|
171
65
|
"kind": "field",
|
|
172
66
|
"name": "size",
|
|
@@ -176,11 +70,7 @@
|
|
|
176
70
|
"description": "The size of the accordion item.",
|
|
177
71
|
"default": "'small'",
|
|
178
72
|
"attribute": "size",
|
|
179
|
-
"reflects": true
|
|
180
|
-
"inheritedFrom": {
|
|
181
|
-
"name": "AccordionButton",
|
|
182
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
183
|
-
}
|
|
73
|
+
"reflects": true
|
|
184
74
|
},
|
|
185
75
|
{
|
|
186
76
|
"kind": "field",
|
|
@@ -191,11 +81,7 @@
|
|
|
191
81
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
192
82
|
"default": "'default'",
|
|
193
83
|
"attribute": "variant",
|
|
194
|
-
"reflects": true
|
|
195
|
-
"inheritedFrom": {
|
|
196
|
-
"name": "AccordionButton",
|
|
197
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
198
|
-
}
|
|
84
|
+
"reflects": true
|
|
199
85
|
},
|
|
200
86
|
{
|
|
201
87
|
"kind": "field",
|
|
@@ -206,11 +92,7 @@
|
|
|
206
92
|
"description": "The aria level of the accordion component.",
|
|
207
93
|
"default": "3",
|
|
208
94
|
"attribute": "data-aria-level",
|
|
209
|
-
"reflects": true
|
|
210
|
-
"inheritedFrom": {
|
|
211
|
-
"name": "AccordionButton",
|
|
212
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
213
|
-
}
|
|
95
|
+
"reflects": true
|
|
214
96
|
},
|
|
215
97
|
{
|
|
216
98
|
"kind": "field",
|
|
@@ -221,11 +103,7 @@
|
|
|
221
103
|
"description": "The visibility of the accordion button.",
|
|
222
104
|
"default": "false",
|
|
223
105
|
"attribute": "expanded",
|
|
224
|
-
"reflects": true
|
|
225
|
-
"inheritedFrom": {
|
|
226
|
-
"name": "AccordionButton",
|
|
227
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
228
|
-
}
|
|
106
|
+
"reflects": true
|
|
229
107
|
},
|
|
230
108
|
{
|
|
231
109
|
"kind": "field",
|
|
@@ -235,11 +113,7 @@
|
|
|
235
113
|
},
|
|
236
114
|
"description": "The header text of the accordion item.",
|
|
237
115
|
"attribute": "header-text",
|
|
238
|
-
"reflects": true
|
|
239
|
-
"inheritedFrom": {
|
|
240
|
-
"name": "AccordionButton",
|
|
241
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
242
|
-
}
|
|
116
|
+
"reflects": true
|
|
243
117
|
},
|
|
244
118
|
{
|
|
245
119
|
"kind": "field",
|
|
@@ -248,11 +122,7 @@
|
|
|
248
122
|
"text": "IconNames | undefined"
|
|
249
123
|
},
|
|
250
124
|
"description": "The leading icon that is displayed before the header text.",
|
|
251
|
-
"attribute": "prefix-icon"
|
|
252
|
-
"inheritedFrom": {
|
|
253
|
-
"name": "AccordionButton",
|
|
254
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
255
|
-
}
|
|
125
|
+
"attribute": "prefix-icon"
|
|
256
126
|
},
|
|
257
127
|
{
|
|
258
128
|
"kind": "method",
|
|
@@ -263,11 +133,7 @@
|
|
|
263
133
|
"text": "void"
|
|
264
134
|
}
|
|
265
135
|
},
|
|
266
|
-
"description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state."
|
|
267
|
-
"inheritedFrom": {
|
|
268
|
-
"name": "AccordionButton",
|
|
269
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
270
|
-
}
|
|
136
|
+
"description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state."
|
|
271
137
|
},
|
|
272
138
|
{
|
|
273
139
|
"kind": "method",
|
|
@@ -278,11 +144,7 @@
|
|
|
278
144
|
"text": "void"
|
|
279
145
|
}
|
|
280
146
|
},
|
|
281
|
-
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
|
|
282
|
-
"inheritedFrom": {
|
|
283
|
-
"name": "AccordionButton",
|
|
284
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
285
|
-
}
|
|
147
|
+
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
|
|
286
148
|
},
|
|
287
149
|
{
|
|
288
150
|
"kind": "method",
|
|
@@ -302,11 +164,7 @@
|
|
|
302
164
|
"description": "The KeyboardEvent fired."
|
|
303
165
|
}
|
|
304
166
|
],
|
|
305
|
-
"description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys."
|
|
306
|
-
"inheritedFrom": {
|
|
307
|
-
"name": "AccordionButton",
|
|
308
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
309
|
-
}
|
|
167
|
+
"description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys."
|
|
310
168
|
},
|
|
311
169
|
{
|
|
312
170
|
"kind": "method",
|
|
@@ -325,11 +183,7 @@
|
|
|
325
183
|
"text": "IconNames"
|
|
326
184
|
}
|
|
327
185
|
}
|
|
328
|
-
]
|
|
329
|
-
"inheritedFrom": {
|
|
330
|
-
"name": "AccordionButton",
|
|
331
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
332
|
-
}
|
|
186
|
+
]
|
|
333
187
|
},
|
|
334
188
|
{
|
|
335
189
|
"kind": "method",
|
|
@@ -339,10 +193,16 @@
|
|
|
339
193
|
"type": {
|
|
340
194
|
"text": "TemplateResult | typeof nothing"
|
|
341
195
|
}
|
|
342
|
-
}
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
196
|
+
}
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
"kind": "method",
|
|
200
|
+
"name": "renderHeader",
|
|
201
|
+
"privacy": "protected",
|
|
202
|
+
"return": {
|
|
203
|
+
"type": {
|
|
204
|
+
"text": "TemplateResult"
|
|
205
|
+
}
|
|
346
206
|
}
|
|
347
207
|
},
|
|
348
208
|
{
|
|
@@ -354,11 +214,7 @@
|
|
|
354
214
|
"text": ""
|
|
355
215
|
}
|
|
356
216
|
},
|
|
357
|
-
"description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon."
|
|
358
|
-
"inheritedFrom": {
|
|
359
|
-
"name": "AccordionButton",
|
|
360
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
361
|
-
}
|
|
217
|
+
"description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon."
|
|
362
218
|
},
|
|
363
219
|
{
|
|
364
220
|
"kind": "method",
|
|
@@ -368,40 +224,83 @@
|
|
|
368
224
|
"type": {
|
|
369
225
|
"text": "TemplateResult | typeof nothing"
|
|
370
226
|
}
|
|
227
|
+
}
|
|
228
|
+
},
|
|
229
|
+
{
|
|
230
|
+
"kind": "field",
|
|
231
|
+
"name": "disabled",
|
|
232
|
+
"type": {
|
|
233
|
+
"text": "boolean | undefined"
|
|
371
234
|
},
|
|
235
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
236
|
+
"default": "undefined",
|
|
237
|
+
"attribute": "disabled",
|
|
238
|
+
"reflects": true,
|
|
372
239
|
"inheritedFrom": {
|
|
373
|
-
"name": "
|
|
374
|
-
"module": "
|
|
240
|
+
"name": "DisabledMixin",
|
|
241
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
375
242
|
}
|
|
376
243
|
}
|
|
377
244
|
],
|
|
378
245
|
"events": [
|
|
379
246
|
{
|
|
380
|
-
"description": "(React: onShown) This event is triggered when the accordion is expanded.",
|
|
247
|
+
"description": "(React: onShown) This event is triggered when the accordion button is expanded.",
|
|
381
248
|
"name": "shown",
|
|
382
|
-
"reactName": "onShown"
|
|
383
|
-
"inheritedFrom": {
|
|
384
|
-
"name": "AccordionButton",
|
|
385
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
386
|
-
}
|
|
249
|
+
"reactName": "onShown"
|
|
387
250
|
}
|
|
388
251
|
],
|
|
389
252
|
"attributes": [
|
|
390
253
|
{
|
|
391
|
-
"name": "
|
|
254
|
+
"name": "size",
|
|
392
255
|
"type": {
|
|
393
|
-
"text": "
|
|
256
|
+
"text": "Size"
|
|
394
257
|
},
|
|
395
|
-
"description": "
|
|
396
|
-
"
|
|
258
|
+
"description": "The size of the accordion item.",
|
|
259
|
+
"default": "'small'",
|
|
260
|
+
"fieldName": "size"
|
|
397
261
|
},
|
|
398
262
|
{
|
|
399
|
-
"name": "
|
|
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",
|
|
400
291
|
"type": {
|
|
401
292
|
"text": "string | undefined"
|
|
402
293
|
},
|
|
403
|
-
"description": "
|
|
404
|
-
"fieldName": "
|
|
294
|
+
"description": "The header text of the accordion item.",
|
|
295
|
+
"fieldName": "headerText"
|
|
296
|
+
},
|
|
297
|
+
{
|
|
298
|
+
"name": "prefix-icon",
|
|
299
|
+
"type": {
|
|
300
|
+
"text": "IconNames | undefined"
|
|
301
|
+
},
|
|
302
|
+
"description": "The leading icon that is displayed before the header text.",
|
|
303
|
+
"fieldName": "prefixIcon"
|
|
405
304
|
},
|
|
406
305
|
{
|
|
407
306
|
"name": "disabled",
|
|
@@ -415,90 +314,171 @@
|
|
|
415
314
|
"name": "DisabledMixin",
|
|
416
315
|
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
417
316
|
}
|
|
418
|
-
}
|
|
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": [
|
|
419
354
|
{
|
|
355
|
+
"description": "The border color of the entire accordiongroup",
|
|
356
|
+
"name": "--mdc-accordiongroup-border-color"
|
|
357
|
+
}
|
|
358
|
+
],
|
|
359
|
+
"slots": [
|
|
360
|
+
{
|
|
361
|
+
"description": "The default slot can contain the `accordion` or `accordionbutton` components.",
|
|
362
|
+
"name": "default"
|
|
363
|
+
}
|
|
364
|
+
],
|
|
365
|
+
"members": [
|
|
366
|
+
{
|
|
367
|
+
"kind": "field",
|
|
420
368
|
"name": "size",
|
|
421
369
|
"type": {
|
|
422
370
|
"text": "Size"
|
|
423
371
|
},
|
|
424
372
|
"description": "The size of the accordion item.",
|
|
425
373
|
"default": "'small'",
|
|
426
|
-
"
|
|
427
|
-
"
|
|
428
|
-
"name": "AccordionButton",
|
|
429
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
430
|
-
}
|
|
374
|
+
"attribute": "size",
|
|
375
|
+
"reflects": true
|
|
431
376
|
},
|
|
432
377
|
{
|
|
378
|
+
"kind": "field",
|
|
433
379
|
"name": "variant",
|
|
434
380
|
"type": {
|
|
435
381
|
"text": "Variant"
|
|
436
382
|
},
|
|
437
383
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
438
|
-
"default": "'
|
|
439
|
-
"
|
|
440
|
-
"
|
|
441
|
-
"name": "AccordionButton",
|
|
442
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
443
|
-
}
|
|
384
|
+
"default": "'stacked'",
|
|
385
|
+
"attribute": "variant",
|
|
386
|
+
"reflects": true
|
|
444
387
|
},
|
|
445
388
|
{
|
|
446
|
-
"
|
|
389
|
+
"kind": "field",
|
|
390
|
+
"name": "allowMultiple",
|
|
447
391
|
"type": {
|
|
448
|
-
"text": "
|
|
392
|
+
"text": "boolean"
|
|
449
393
|
},
|
|
450
|
-
"
|
|
451
|
-
"
|
|
452
|
-
"
|
|
453
|
-
"
|
|
454
|
-
"name": "AccordionButton",
|
|
455
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
456
|
-
}
|
|
394
|
+
"default": "false",
|
|
395
|
+
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
396
|
+
"attribute": "allow-multiple",
|
|
397
|
+
"reflects": true
|
|
457
398
|
},
|
|
458
399
|
{
|
|
459
|
-
"
|
|
400
|
+
"kind": "method",
|
|
401
|
+
"name": "handleAccordionExpanded",
|
|
402
|
+
"privacy": "private",
|
|
403
|
+
"return": {
|
|
404
|
+
"type": {
|
|
405
|
+
"text": "void"
|
|
406
|
+
}
|
|
407
|
+
},
|
|
408
|
+
"parameters": [
|
|
409
|
+
{
|
|
410
|
+
"name": "event",
|
|
411
|
+
"type": {
|
|
412
|
+
"text": "Event"
|
|
413
|
+
},
|
|
414
|
+
"description": "The event object from the 'shown' event."
|
|
415
|
+
}
|
|
416
|
+
],
|
|
417
|
+
"description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
|
|
418
|
+
},
|
|
419
|
+
{
|
|
420
|
+
"kind": "method",
|
|
421
|
+
"name": "setChildrenAccordionAttributes",
|
|
422
|
+
"privacy": "private",
|
|
423
|
+
"return": {
|
|
424
|
+
"type": {
|
|
425
|
+
"text": "void"
|
|
426
|
+
}
|
|
427
|
+
},
|
|
428
|
+
"parameters": [
|
|
429
|
+
{
|
|
430
|
+
"name": "attributeName",
|
|
431
|
+
"type": {
|
|
432
|
+
"text": "string"
|
|
433
|
+
},
|
|
434
|
+
"description": "The name of the attribute to set."
|
|
435
|
+
},
|
|
436
|
+
{
|
|
437
|
+
"name": "attributeValue",
|
|
438
|
+
"type": {
|
|
439
|
+
"text": "string"
|
|
440
|
+
},
|
|
441
|
+
"description": "The value to set the attribute to."
|
|
442
|
+
}
|
|
443
|
+
],
|
|
444
|
+
"description": "Sets the given attribute on all child accordion or accordionbutton components."
|
|
445
|
+
}
|
|
446
|
+
],
|
|
447
|
+
"attributes": [
|
|
448
|
+
{
|
|
449
|
+
"name": "size",
|
|
460
450
|
"type": {
|
|
461
|
-
"text": "
|
|
451
|
+
"text": "Size"
|
|
462
452
|
},
|
|
463
|
-
"description": "The
|
|
464
|
-
"default": "
|
|
465
|
-
"fieldName": "
|
|
466
|
-
"inheritedFrom": {
|
|
467
|
-
"name": "AccordionButton",
|
|
468
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
469
|
-
}
|
|
453
|
+
"description": "The size of the accordion item.",
|
|
454
|
+
"default": "'small'",
|
|
455
|
+
"fieldName": "size"
|
|
470
456
|
},
|
|
471
457
|
{
|
|
472
|
-
"name": "
|
|
458
|
+
"name": "variant",
|
|
473
459
|
"type": {
|
|
474
|
-
"text": "
|
|
460
|
+
"text": "Variant"
|
|
475
461
|
},
|
|
476
|
-
"description": "The
|
|
477
|
-
"
|
|
478
|
-
"
|
|
479
|
-
"name": "AccordionButton",
|
|
480
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
481
|
-
}
|
|
462
|
+
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
463
|
+
"default": "'stacked'",
|
|
464
|
+
"fieldName": "variant"
|
|
482
465
|
},
|
|
483
466
|
{
|
|
484
|
-
"name": "
|
|
467
|
+
"name": "allow-multiple",
|
|
485
468
|
"type": {
|
|
486
|
-
"text": "
|
|
469
|
+
"text": "boolean"
|
|
487
470
|
},
|
|
488
|
-
"
|
|
489
|
-
"
|
|
490
|
-
"
|
|
491
|
-
"name": "AccordionButton",
|
|
492
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
493
|
-
}
|
|
471
|
+
"default": "false",
|
|
472
|
+
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
473
|
+
"fieldName": "allowMultiple"
|
|
494
474
|
}
|
|
495
475
|
],
|
|
496
476
|
"superclass": {
|
|
497
|
-
"name": "
|
|
498
|
-
"module": "/src/
|
|
477
|
+
"name": "Component",
|
|
478
|
+
"module": "/src/models"
|
|
499
479
|
},
|
|
500
|
-
"tagName": "mdc-
|
|
501
|
-
"jsDoc": "/**\n * An accordion
|
|
480
|
+
"tagName": "mdc-accordiongroup",
|
|
481
|
+
"jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
|
|
502
482
|
"customElement": true
|
|
503
483
|
}
|
|
504
484
|
],
|
|
@@ -507,71 +487,177 @@
|
|
|
507
487
|
"kind": "js",
|
|
508
488
|
"name": "default",
|
|
509
489
|
"declaration": {
|
|
510
|
-
"name": "
|
|
511
|
-
"module": "components/
|
|
490
|
+
"name": "AccordionGroup",
|
|
491
|
+
"module": "components/accordiongroup/accordiongroup.component.js"
|
|
512
492
|
}
|
|
513
493
|
}
|
|
514
494
|
]
|
|
515
495
|
},
|
|
516
496
|
{
|
|
517
497
|
"kind": "javascript-module",
|
|
518
|
-
"path": "components/
|
|
498
|
+
"path": "components/accordion/accordion.component.js",
|
|
519
499
|
"declarations": [
|
|
520
500
|
{
|
|
521
501
|
"kind": "class",
|
|
522
|
-
"description": "An accordion
|
|
523
|
-
"name": "
|
|
502
|
+
"description": "An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n- Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n- Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.",
|
|
503
|
+
"name": "Accordion",
|
|
524
504
|
"cssProperties": [
|
|
525
505
|
{
|
|
526
|
-
"description": "The border color of the accordion
|
|
527
|
-
"name": "--mdc-accordionbutton-border-color"
|
|
506
|
+
"description": "The border color of the accordion.",
|
|
507
|
+
"name": "--mdc-accordionbutton-border-color",
|
|
508
|
+
"inheritedFrom": {
|
|
509
|
+
"name": "AccordionButton",
|
|
510
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
511
|
+
}
|
|
528
512
|
},
|
|
529
513
|
{
|
|
530
|
-
"description": "The hover color of the accordion
|
|
531
|
-
"name": "--mdc-accordionbutton-hover-color"
|
|
514
|
+
"description": "The hover color of the accordion.",
|
|
515
|
+
"name": "--mdc-accordionbutton-hover-color",
|
|
516
|
+
"inheritedFrom": {
|
|
517
|
+
"name": "AccordionButton",
|
|
518
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
519
|
+
}
|
|
532
520
|
},
|
|
533
521
|
{
|
|
534
|
-
"description": "The active color of the accordion
|
|
535
|
-
"name": "--mdc-accordionbutton-active-color"
|
|
522
|
+
"description": "The active color of the accordion.",
|
|
523
|
+
"name": "--mdc-accordionbutton-active-color",
|
|
524
|
+
"inheritedFrom": {
|
|
525
|
+
"name": "AccordionButton",
|
|
526
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
527
|
+
}
|
|
536
528
|
},
|
|
537
529
|
{
|
|
538
|
-
"description": "The disabled color of the accordion
|
|
539
|
-
"name": "--mdc-accordionbutton-disabled-color"
|
|
530
|
+
"description": "The disabled color of the accordion.",
|
|
531
|
+
"name": "--mdc-accordionbutton-disabled-color",
|
|
532
|
+
"inheritedFrom": {
|
|
533
|
+
"name": "AccordionButton",
|
|
534
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
535
|
+
}
|
|
540
536
|
}
|
|
541
537
|
],
|
|
542
538
|
"cssParts": [
|
|
543
539
|
{
|
|
544
|
-
"description": "The body section of the accordion
|
|
545
|
-
"name": "body-section"
|
|
540
|
+
"description": "The body section of the accordion.",
|
|
541
|
+
"name": "body-section",
|
|
542
|
+
"inheritedFrom": {
|
|
543
|
+
"name": "AccordionButton",
|
|
544
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
545
|
+
}
|
|
546
546
|
},
|
|
547
547
|
{
|
|
548
|
-
"description": "The header
|
|
549
|
-
"name": "header-
|
|
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
|
+
}
|
|
550
554
|
},
|
|
551
555
|
{
|
|
552
|
-
"description": "The header
|
|
553
|
-
"name": "header
|
|
556
|
+
"description": "The leading header of the accordion.",
|
|
557
|
+
"name": "leading-header",
|
|
558
|
+
"inheritedFrom": {
|
|
559
|
+
"name": "AccordionButton",
|
|
560
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
561
|
+
}
|
|
554
562
|
},
|
|
555
563
|
{
|
|
556
|
-
"description": "The
|
|
557
|
-
"name": "
|
|
564
|
+
"description": "The trailing header of the accordion.",
|
|
565
|
+
"name": "trailing-header",
|
|
566
|
+
"inheritedFrom": {
|
|
567
|
+
"name": "AccordionButton",
|
|
568
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
569
|
+
}
|
|
558
570
|
},
|
|
559
571
|
{
|
|
560
|
-
"description": "The trailing header of the accordion
|
|
561
|
-
"name": "trailing-
|
|
572
|
+
"description": "The trailing header button of the accordion.",
|
|
573
|
+
"name": "trailing-header__button"
|
|
574
|
+
},
|
|
575
|
+
{
|
|
576
|
+
"description": "The header button section of the accordion button.",
|
|
577
|
+
"name": "header-button-section",
|
|
578
|
+
"inheritedFrom": {
|
|
579
|
+
"name": "AccordionButton",
|
|
580
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
581
|
+
}
|
|
562
582
|
},
|
|
563
583
|
{
|
|
564
584
|
"description": "The trailing header icon of the accordion button.",
|
|
565
|
-
"name": "trailing-header__icon"
|
|
585
|
+
"name": "trailing-header__icon",
|
|
586
|
+
"inheritedFrom": {
|
|
587
|
+
"name": "AccordionButton",
|
|
588
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
589
|
+
}
|
|
566
590
|
}
|
|
567
591
|
],
|
|
568
592
|
"slots": [
|
|
593
|
+
{
|
|
594
|
+
"description": "The leading controls slot of the accordion on the header section.",
|
|
595
|
+
"name": "leading-controls"
|
|
596
|
+
},
|
|
597
|
+
{
|
|
598
|
+
"description": "The trailing controls slot of the accordion on the header section.",
|
|
599
|
+
"name": "trailing-controls"
|
|
600
|
+
},
|
|
569
601
|
{
|
|
570
602
|
"description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
|
|
571
|
-
"name": "default"
|
|
603
|
+
"name": "default",
|
|
604
|
+
"inheritedFrom": {
|
|
605
|
+
"name": "AccordionButton",
|
|
606
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
607
|
+
}
|
|
572
608
|
}
|
|
573
609
|
],
|
|
574
610
|
"members": [
|
|
611
|
+
{
|
|
612
|
+
"kind": "field",
|
|
613
|
+
"name": "openButtonAriaLabel",
|
|
614
|
+
"type": {
|
|
615
|
+
"text": "string | undefined"
|
|
616
|
+
},
|
|
617
|
+
"description": "Aria-label attribute for the trigger button when accordion is collapsed.",
|
|
618
|
+
"attribute": "open-button-aria-label",
|
|
619
|
+
"reflects": true
|
|
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
|
+
},
|
|
575
661
|
{
|
|
576
662
|
"kind": "field",
|
|
577
663
|
"name": "size",
|
|
@@ -581,7 +667,11 @@
|
|
|
581
667
|
"description": "The size of the accordion item.",
|
|
582
668
|
"default": "'small'",
|
|
583
669
|
"attribute": "size",
|
|
584
|
-
"reflects": true
|
|
670
|
+
"reflects": true,
|
|
671
|
+
"inheritedFrom": {
|
|
672
|
+
"name": "AccordionButton",
|
|
673
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
674
|
+
}
|
|
585
675
|
},
|
|
586
676
|
{
|
|
587
677
|
"kind": "field",
|
|
@@ -592,7 +682,11 @@
|
|
|
592
682
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
593
683
|
"default": "'default'",
|
|
594
684
|
"attribute": "variant",
|
|
595
|
-
"reflects": true
|
|
685
|
+
"reflects": true,
|
|
686
|
+
"inheritedFrom": {
|
|
687
|
+
"name": "AccordionButton",
|
|
688
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
689
|
+
}
|
|
596
690
|
},
|
|
597
691
|
{
|
|
598
692
|
"kind": "field",
|
|
@@ -603,7 +697,11 @@
|
|
|
603
697
|
"description": "The aria level of the accordion component.",
|
|
604
698
|
"default": "3",
|
|
605
699
|
"attribute": "data-aria-level",
|
|
606
|
-
"reflects": true
|
|
700
|
+
"reflects": true,
|
|
701
|
+
"inheritedFrom": {
|
|
702
|
+
"name": "AccordionButton",
|
|
703
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
704
|
+
}
|
|
607
705
|
},
|
|
608
706
|
{
|
|
609
707
|
"kind": "field",
|
|
@@ -614,7 +712,11 @@
|
|
|
614
712
|
"description": "The visibility of the accordion button.",
|
|
615
713
|
"default": "false",
|
|
616
714
|
"attribute": "expanded",
|
|
617
|
-
"reflects": true
|
|
715
|
+
"reflects": true,
|
|
716
|
+
"inheritedFrom": {
|
|
717
|
+
"name": "AccordionButton",
|
|
718
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
719
|
+
}
|
|
618
720
|
},
|
|
619
721
|
{
|
|
620
722
|
"kind": "field",
|
|
@@ -624,7 +726,11 @@
|
|
|
624
726
|
},
|
|
625
727
|
"description": "The header text of the accordion item.",
|
|
626
728
|
"attribute": "header-text",
|
|
627
|
-
"reflects": true
|
|
729
|
+
"reflects": true,
|
|
730
|
+
"inheritedFrom": {
|
|
731
|
+
"name": "AccordionButton",
|
|
732
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
733
|
+
}
|
|
628
734
|
},
|
|
629
735
|
{
|
|
630
736
|
"kind": "field",
|
|
@@ -633,7 +739,11 @@
|
|
|
633
739
|
"text": "IconNames | undefined"
|
|
634
740
|
},
|
|
635
741
|
"description": "The leading icon that is displayed before the header text.",
|
|
636
|
-
"attribute": "prefix-icon"
|
|
742
|
+
"attribute": "prefix-icon",
|
|
743
|
+
"inheritedFrom": {
|
|
744
|
+
"name": "AccordionButton",
|
|
745
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
746
|
+
}
|
|
637
747
|
},
|
|
638
748
|
{
|
|
639
749
|
"kind": "method",
|
|
@@ -644,7 +754,11 @@
|
|
|
644
754
|
"text": "void"
|
|
645
755
|
}
|
|
646
756
|
},
|
|
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."
|
|
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
|
+
}
|
|
648
762
|
},
|
|
649
763
|
{
|
|
650
764
|
"kind": "method",
|
|
@@ -655,7 +769,11 @@
|
|
|
655
769
|
"text": "void"
|
|
656
770
|
}
|
|
657
771
|
},
|
|
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."
|
|
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
|
+
}
|
|
659
777
|
},
|
|
660
778
|
{
|
|
661
779
|
"kind": "method",
|
|
@@ -675,7 +793,11 @@
|
|
|
675
793
|
"description": "The KeyboardEvent fired."
|
|
676
794
|
}
|
|
677
795
|
],
|
|
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."
|
|
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
|
+
}
|
|
679
801
|
},
|
|
680
802
|
{
|
|
681
803
|
"kind": "method",
|
|
@@ -694,7 +816,11 @@
|
|
|
694
816
|
"text": "IconNames"
|
|
695
817
|
}
|
|
696
818
|
}
|
|
697
|
-
]
|
|
819
|
+
],
|
|
820
|
+
"inheritedFrom": {
|
|
821
|
+
"name": "AccordionButton",
|
|
822
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
823
|
+
}
|
|
698
824
|
},
|
|
699
825
|
{
|
|
700
826
|
"kind": "method",
|
|
@@ -704,16 +830,10 @@
|
|
|
704
830
|
"type": {
|
|
705
831
|
"text": "TemplateResult | typeof nothing"
|
|
706
832
|
}
|
|
707
|
-
}
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
"name": "renderHeader",
|
|
712
|
-
"privacy": "protected",
|
|
713
|
-
"return": {
|
|
714
|
-
"type": {
|
|
715
|
-
"text": "TemplateResult"
|
|
716
|
-
}
|
|
833
|
+
},
|
|
834
|
+
"inheritedFrom": {
|
|
835
|
+
"name": "AccordionButton",
|
|
836
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
717
837
|
}
|
|
718
838
|
},
|
|
719
839
|
{
|
|
@@ -725,7 +845,11 @@
|
|
|
725
845
|
"text": ""
|
|
726
846
|
}
|
|
727
847
|
},
|
|
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."
|
|
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
|
+
}
|
|
729
853
|
},
|
|
730
854
|
{
|
|
731
855
|
"kind": "method",
|
|
@@ -735,83 +859,40 @@
|
|
|
735
859
|
"type": {
|
|
736
860
|
"text": "TemplateResult | typeof nothing"
|
|
737
861
|
}
|
|
738
|
-
}
|
|
739
|
-
},
|
|
740
|
-
{
|
|
741
|
-
"kind": "field",
|
|
742
|
-
"name": "disabled",
|
|
743
|
-
"type": {
|
|
744
|
-
"text": "boolean | undefined"
|
|
745
862
|
},
|
|
746
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
747
|
-
"default": "undefined",
|
|
748
|
-
"attribute": "disabled",
|
|
749
|
-
"reflects": true,
|
|
750
863
|
"inheritedFrom": {
|
|
751
|
-
"name": "
|
|
752
|
-
"module": "
|
|
864
|
+
"name": "AccordionButton",
|
|
865
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
753
866
|
}
|
|
754
867
|
}
|
|
755
868
|
],
|
|
756
869
|
"events": [
|
|
757
870
|
{
|
|
758
|
-
"description": "(React: onShown) This event is triggered when the accordion
|
|
871
|
+
"description": "(React: onShown) This event is triggered when the accordion is expanded.",
|
|
759
872
|
"name": "shown",
|
|
760
|
-
"reactName": "onShown"
|
|
873
|
+
"reactName": "onShown",
|
|
874
|
+
"inheritedFrom": {
|
|
875
|
+
"name": "AccordionButton",
|
|
876
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
877
|
+
}
|
|
761
878
|
}
|
|
762
879
|
],
|
|
763
880
|
"attributes": [
|
|
764
881
|
{
|
|
765
|
-
"name": "
|
|
766
|
-
"type": {
|
|
767
|
-
"text": "Size"
|
|
768
|
-
},
|
|
769
|
-
"description": "The size of the accordion item.",
|
|
770
|
-
"default": "'small'",
|
|
771
|
-
"fieldName": "size"
|
|
772
|
-
},
|
|
773
|
-
{
|
|
774
|
-
"name": "variant",
|
|
775
|
-
"type": {
|
|
776
|
-
"text": "Variant"
|
|
777
|
-
},
|
|
778
|
-
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
779
|
-
"default": "'default'",
|
|
780
|
-
"fieldName": "variant"
|
|
781
|
-
},
|
|
782
|
-
{
|
|
783
|
-
"name": "data-aria-level",
|
|
784
|
-
"type": {
|
|
785
|
-
"text": "number"
|
|
786
|
-
},
|
|
787
|
-
"description": "The aria level of the accordion component.",
|
|
788
|
-
"default": "3",
|
|
789
|
-
"fieldName": "dataAriaLevel"
|
|
790
|
-
},
|
|
791
|
-
{
|
|
792
|
-
"name": "expanded",
|
|
793
|
-
"type": {
|
|
794
|
-
"text": "boolean"
|
|
795
|
-
},
|
|
796
|
-
"description": "The visibility of the accordion button.",
|
|
797
|
-
"default": "false",
|
|
798
|
-
"fieldName": "expanded"
|
|
799
|
-
},
|
|
800
|
-
{
|
|
801
|
-
"name": "header-text",
|
|
882
|
+
"name": "open-button-aria-label",
|
|
802
883
|
"type": {
|
|
803
884
|
"text": "string | undefined"
|
|
804
885
|
},
|
|
805
|
-
"description": "
|
|
806
|
-
"fieldName": "
|
|
886
|
+
"description": "Aria-label attribute for the trigger button when accordion is collapsed.",
|
|
887
|
+
"fieldName": "openButtonAriaLabel"
|
|
807
888
|
},
|
|
808
889
|
{
|
|
809
|
-
"name": "
|
|
890
|
+
"name": "close-button-aria-label",
|
|
810
891
|
"type": {
|
|
811
|
-
"text": "
|
|
892
|
+
"text": "string | undefined"
|
|
812
893
|
},
|
|
813
|
-
"description": "
|
|
814
|
-
"fieldName": "
|
|
894
|
+
"description": "Aria-label attribute for the trigger button when accordion is expanded.",
|
|
895
|
+
"fieldName": "closeButtonAriaLabel"
|
|
815
896
|
},
|
|
816
897
|
{
|
|
817
898
|
"name": "disabled",
|
|
@@ -822,174 +903,93 @@
|
|
|
822
903
|
"default": "undefined",
|
|
823
904
|
"fieldName": "disabled",
|
|
824
905
|
"inheritedFrom": {
|
|
825
|
-
"name": "
|
|
826
|
-
"module": "src/
|
|
906
|
+
"name": "AccordionButton",
|
|
907
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
827
908
|
}
|
|
828
|
-
}
|
|
829
|
-
],
|
|
830
|
-
"mixins": [
|
|
831
|
-
{
|
|
832
|
-
"name": "DisabledMixin",
|
|
833
|
-
"module": "/src/utils/mixins/DisabledMixin"
|
|
834
|
-
}
|
|
835
|
-
],
|
|
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": {
|
|
850
|
-
"name": "AccordionButton",
|
|
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": [
|
|
909
|
+
},
|
|
877
910
|
{
|
|
878
|
-
"kind": "field",
|
|
879
911
|
"name": "size",
|
|
880
912
|
"type": {
|
|
881
913
|
"text": "Size"
|
|
882
914
|
},
|
|
883
915
|
"description": "The size of the accordion item.",
|
|
884
916
|
"default": "'small'",
|
|
885
|
-
"
|
|
886
|
-
"
|
|
917
|
+
"fieldName": "size",
|
|
918
|
+
"inheritedFrom": {
|
|
919
|
+
"name": "AccordionButton",
|
|
920
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
921
|
+
}
|
|
887
922
|
},
|
|
888
923
|
{
|
|
889
|
-
"kind": "field",
|
|
890
924
|
"name": "variant",
|
|
891
925
|
"type": {
|
|
892
926
|
"text": "Variant"
|
|
893
927
|
},
|
|
894
928
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
895
|
-
"default": "'
|
|
896
|
-
"
|
|
897
|
-
"
|
|
929
|
+
"default": "'default'",
|
|
930
|
+
"fieldName": "variant",
|
|
931
|
+
"inheritedFrom": {
|
|
932
|
+
"name": "AccordionButton",
|
|
933
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
934
|
+
}
|
|
898
935
|
},
|
|
899
936
|
{
|
|
900
|
-
"
|
|
901
|
-
"name": "allowMultiple",
|
|
937
|
+
"name": "data-aria-level",
|
|
902
938
|
"type": {
|
|
903
|
-
"text": "
|
|
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
|
-
}
|
|
939
|
+
"text": "number"
|
|
918
940
|
},
|
|
919
|
-
"
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
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."
|
|
941
|
+
"description": "The aria level of the accordion component.",
|
|
942
|
+
"default": "3",
|
|
943
|
+
"fieldName": "dataAriaLevel",
|
|
944
|
+
"inheritedFrom": {
|
|
945
|
+
"name": "AccordionButton",
|
|
946
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
947
|
+
}
|
|
929
948
|
},
|
|
930
949
|
{
|
|
931
|
-
"
|
|
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",
|
|
950
|
+
"name": "expanded",
|
|
961
951
|
"type": {
|
|
962
|
-
"text": "
|
|
952
|
+
"text": "boolean"
|
|
963
953
|
},
|
|
964
|
-
"description": "The
|
|
965
|
-
"default": "
|
|
966
|
-
"fieldName": "
|
|
954
|
+
"description": "The visibility of the accordion button.",
|
|
955
|
+
"default": "false",
|
|
956
|
+
"fieldName": "expanded",
|
|
957
|
+
"inheritedFrom": {
|
|
958
|
+
"name": "AccordionButton",
|
|
959
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
960
|
+
}
|
|
967
961
|
},
|
|
968
962
|
{
|
|
969
|
-
"name": "
|
|
963
|
+
"name": "header-text",
|
|
970
964
|
"type": {
|
|
971
|
-
"text": "
|
|
965
|
+
"text": "string | undefined"
|
|
972
966
|
},
|
|
973
|
-
"description": "The
|
|
974
|
-
"
|
|
975
|
-
"
|
|
967
|
+
"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
|
+
}
|
|
976
973
|
},
|
|
977
974
|
{
|
|
978
|
-
"name": "
|
|
975
|
+
"name": "prefix-icon",
|
|
979
976
|
"type": {
|
|
980
|
-
"text": "
|
|
977
|
+
"text": "IconNames | undefined"
|
|
981
978
|
},
|
|
982
|
-
"
|
|
983
|
-
"
|
|
984
|
-
"
|
|
979
|
+
"description": "The leading icon that is displayed before the header text.",
|
|
980
|
+
"fieldName": "prefixIcon",
|
|
981
|
+
"inheritedFrom": {
|
|
982
|
+
"name": "AccordionButton",
|
|
983
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
984
|
+
}
|
|
985
985
|
}
|
|
986
986
|
],
|
|
987
987
|
"superclass": {
|
|
988
|
-
"name": "
|
|
989
|
-
"module": "/src/
|
|
988
|
+
"name": "AccordionButton",
|
|
989
|
+
"module": "/src/components/accordionbutton/accordionbutton.component"
|
|
990
990
|
},
|
|
991
|
-
"tagName": "mdc-
|
|
992
|
-
"jsDoc": "/**\n * An accordion
|
|
991
|
+
"tagName": "mdc-accordion",
|
|
992
|
+
"jsDoc": "/**\n * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.\n *\n * @tagname mdc-accordion\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot leading-controls - The leading controls slot of the accordion on the header section.\n * @slot trailing-controls - The trailing controls slot of the accordion on the header section.\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.\n *\n * @csspart body-section - The body section of the accordion.\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n */",
|
|
993
993
|
"customElement": true
|
|
994
994
|
}
|
|
995
995
|
],
|
|
@@ -998,8 +998,8 @@
|
|
|
998
998
|
"kind": "js",
|
|
999
999
|
"name": "default",
|
|
1000
1000
|
"declaration": {
|
|
1001
|
-
"name": "
|
|
1002
|
-
"module": "components/
|
|
1001
|
+
"name": "Accordion",
|
|
1002
|
+
"module": "components/accordion/accordion.component.js"
|
|
1003
1003
|
}
|
|
1004
1004
|
}
|
|
1005
1005
|
]
|
|
@@ -4798,6 +4798,182 @@
|
|
|
4798
4798
|
}
|
|
4799
4799
|
]
|
|
4800
4800
|
},
|
|
4801
|
+
{
|
|
4802
|
+
"kind": "javascript-module",
|
|
4803
|
+
"path": "components/brandvisual/brandvisual.component.js",
|
|
4804
|
+
"declarations": [
|
|
4805
|
+
{
|
|
4806
|
+
"kind": "class",
|
|
4807
|
+
"description": "The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\ndisplayed correctly within applications.\n\nFeatures:\n- Dynamically loads brandvisuals based on the `name` attribute.\n- Emits a `load` event when the brandvisual is successfully fetched.\n- Emits an `error` event when the brandvisual import fails.\n- Supports accessibility best practices.\n- Used for brand representation within the design system.",
|
|
4808
|
+
"name": "Brandvisual",
|
|
4809
|
+
"members": [
|
|
4810
|
+
{
|
|
4811
|
+
"kind": "field",
|
|
4812
|
+
"name": "brandVisualData",
|
|
4813
|
+
"type": {
|
|
4814
|
+
"text": "Element | TemplateResult | undefined"
|
|
4815
|
+
},
|
|
4816
|
+
"privacy": "private"
|
|
4817
|
+
},
|
|
4818
|
+
{
|
|
4819
|
+
"kind": "field",
|
|
4820
|
+
"name": "name",
|
|
4821
|
+
"type": {
|
|
4822
|
+
"text": "BrandVisualNames | undefined"
|
|
4823
|
+
},
|
|
4824
|
+
"description": "Name of the brandVisual (= filename)",
|
|
4825
|
+
"attribute": "name",
|
|
4826
|
+
"reflects": true
|
|
4827
|
+
},
|
|
4828
|
+
{
|
|
4829
|
+
"kind": "field",
|
|
4830
|
+
"name": "altText",
|
|
4831
|
+
"type": {
|
|
4832
|
+
"text": "string | undefined"
|
|
4833
|
+
},
|
|
4834
|
+
"description": "Alt text for the brandvisual image for accessibility.\nThis will only be set if the brandvisual is an image (png).",
|
|
4835
|
+
"attribute": "altText",
|
|
4836
|
+
"reflects": true
|
|
4837
|
+
},
|
|
4838
|
+
{
|
|
4839
|
+
"kind": "method",
|
|
4840
|
+
"name": "getBrandVisualData",
|
|
4841
|
+
"privacy": "private"
|
|
4842
|
+
},
|
|
4843
|
+
{
|
|
4844
|
+
"kind": "method",
|
|
4845
|
+
"name": "injectTemplateAttributes",
|
|
4846
|
+
"privacy": "private",
|
|
4847
|
+
"return": {
|
|
4848
|
+
"type": {
|
|
4849
|
+
"text": "Element | TemplateResult"
|
|
4850
|
+
}
|
|
4851
|
+
},
|
|
4852
|
+
"parameters": [
|
|
4853
|
+
{
|
|
4854
|
+
"name": "litTemplate",
|
|
4855
|
+
"type": {
|
|
4856
|
+
"text": "TemplateResult"
|
|
4857
|
+
}
|
|
4858
|
+
},
|
|
4859
|
+
{
|
|
4860
|
+
"name": "tag",
|
|
4861
|
+
"type": {
|
|
4862
|
+
"text": "string"
|
|
4863
|
+
}
|
|
4864
|
+
},
|
|
4865
|
+
{
|
|
4866
|
+
"name": "props",
|
|
4867
|
+
"type": {
|
|
4868
|
+
"text": "any"
|
|
4869
|
+
}
|
|
4870
|
+
}
|
|
4871
|
+
]
|
|
4872
|
+
},
|
|
4873
|
+
{
|
|
4874
|
+
"kind": "method",
|
|
4875
|
+
"name": "injectHtmlAttributes",
|
|
4876
|
+
"privacy": "private",
|
|
4877
|
+
"return": {
|
|
4878
|
+
"type": {
|
|
4879
|
+
"text": "Element"
|
|
4880
|
+
}
|
|
4881
|
+
},
|
|
4882
|
+
"parameters": [
|
|
4883
|
+
{
|
|
4884
|
+
"name": "html",
|
|
4885
|
+
"type": {
|
|
4886
|
+
"text": "Element"
|
|
4887
|
+
}
|
|
4888
|
+
},
|
|
4889
|
+
{
|
|
4890
|
+
"name": "props",
|
|
4891
|
+
"type": {
|
|
4892
|
+
"text": "imageProps"
|
|
4893
|
+
}
|
|
4894
|
+
}
|
|
4895
|
+
]
|
|
4896
|
+
},
|
|
4897
|
+
{
|
|
4898
|
+
"kind": "method",
|
|
4899
|
+
"name": "handleBrandVisualLoadedSuccess",
|
|
4900
|
+
"privacy": "private",
|
|
4901
|
+
"parameters": [
|
|
4902
|
+
{
|
|
4903
|
+
"name": "brandVisualHtml",
|
|
4904
|
+
"type": {
|
|
4905
|
+
"text": "TemplateResult"
|
|
4906
|
+
},
|
|
4907
|
+
"description": "The brandvisual html element which has been fetched from the brandvisual provider."
|
|
4908
|
+
}
|
|
4909
|
+
],
|
|
4910
|
+
"description": "Sets the brandVisualData state to the fetched brandvisual.\nDispatches a 'load' event on the component once the brandvisual has been successfully loaded."
|
|
4911
|
+
},
|
|
4912
|
+
{
|
|
4913
|
+
"kind": "method",
|
|
4914
|
+
"name": "handleBrandVisualLoadedFailure",
|
|
4915
|
+
"privacy": "private",
|
|
4916
|
+
"parameters": [
|
|
4917
|
+
{
|
|
4918
|
+
"name": "error",
|
|
4919
|
+
"type": {
|
|
4920
|
+
"text": "unknown"
|
|
4921
|
+
}
|
|
4922
|
+
}
|
|
4923
|
+
],
|
|
4924
|
+
"description": "Dispatches an 'error' event on the component when the brandvisual import has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
|
|
4925
|
+
}
|
|
4926
|
+
],
|
|
4927
|
+
"events": [
|
|
4928
|
+
{
|
|
4929
|
+
"description": "(React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.",
|
|
4930
|
+
"name": "load",
|
|
4931
|
+
"reactName": "onLoad"
|
|
4932
|
+
},
|
|
4933
|
+
{
|
|
4934
|
+
"description": "(React: onError) This event is dispatched when the brandvisual fetching has failed.",
|
|
4935
|
+
"name": "error",
|
|
4936
|
+
"reactName": "onError"
|
|
4937
|
+
}
|
|
4938
|
+
],
|
|
4939
|
+
"attributes": [
|
|
4940
|
+
{
|
|
4941
|
+
"name": "name",
|
|
4942
|
+
"type": {
|
|
4943
|
+
"text": "BrandVisualNames | undefined"
|
|
4944
|
+
},
|
|
4945
|
+
"description": "Name of the brandVisual (= filename)",
|
|
4946
|
+
"fieldName": "name"
|
|
4947
|
+
},
|
|
4948
|
+
{
|
|
4949
|
+
"name": "altText",
|
|
4950
|
+
"type": {
|
|
4951
|
+
"text": "string | undefined"
|
|
4952
|
+
},
|
|
4953
|
+
"description": "Alt text for the brandvisual image for accessibility.\nThis will only be set if the brandvisual is an image (png).",
|
|
4954
|
+
"fieldName": "altText"
|
|
4955
|
+
}
|
|
4956
|
+
],
|
|
4957
|
+
"superclass": {
|
|
4958
|
+
"name": "Component",
|
|
4959
|
+
"module": "/src/models"
|
|
4960
|
+
},
|
|
4961
|
+
"tagName": "mdc-brandvisual",
|
|
4962
|
+
"jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\n * - Dynamically loads brandvisuals based on the `name` attribute.\n * - Emits a `load` event when the brandvisual is successfully fetched.\n * - Emits an `error` event when the brandvisual import fails.\n * - Supports accessibility best practices.\n * - Used for brand representation within the design system.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n */",
|
|
4963
|
+
"customElement": true
|
|
4964
|
+
}
|
|
4965
|
+
],
|
|
4966
|
+
"exports": [
|
|
4967
|
+
{
|
|
4968
|
+
"kind": "js",
|
|
4969
|
+
"name": "default",
|
|
4970
|
+
"declaration": {
|
|
4971
|
+
"name": "Brandvisual",
|
|
4972
|
+
"module": "components/brandvisual/brandvisual.component.js"
|
|
4973
|
+
}
|
|
4974
|
+
}
|
|
4975
|
+
]
|
|
4976
|
+
},
|
|
4801
4977
|
{
|
|
4802
4978
|
"kind": "javascript-module",
|
|
4803
4979
|
"path": "components/bullet/bullet.component.js",
|
|
@@ -5822,182 +5998,6 @@
|
|
|
5822
5998
|
}
|
|
5823
5999
|
]
|
|
5824
6000
|
},
|
|
5825
|
-
{
|
|
5826
|
-
"kind": "javascript-module",
|
|
5827
|
-
"path": "components/brandvisual/brandvisual.component.js",
|
|
5828
|
-
"declarations": [
|
|
5829
|
-
{
|
|
5830
|
-
"kind": "class",
|
|
5831
|
-
"description": "The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\ndisplayed correctly within applications.\n\nFeatures:\n- Dynamically loads brandvisuals based on the `name` attribute.\n- Emits a `load` event when the brandvisual is successfully fetched.\n- Emits an `error` event when the brandvisual import fails.\n- Supports accessibility best practices.\n- Used for brand representation within the design system.",
|
|
5832
|
-
"name": "Brandvisual",
|
|
5833
|
-
"members": [
|
|
5834
|
-
{
|
|
5835
|
-
"kind": "field",
|
|
5836
|
-
"name": "brandVisualData",
|
|
5837
|
-
"type": {
|
|
5838
|
-
"text": "Element | TemplateResult | undefined"
|
|
5839
|
-
},
|
|
5840
|
-
"privacy": "private"
|
|
5841
|
-
},
|
|
5842
|
-
{
|
|
5843
|
-
"kind": "field",
|
|
5844
|
-
"name": "name",
|
|
5845
|
-
"type": {
|
|
5846
|
-
"text": "BrandVisualNames | undefined"
|
|
5847
|
-
},
|
|
5848
|
-
"description": "Name of the brandVisual (= filename)",
|
|
5849
|
-
"attribute": "name",
|
|
5850
|
-
"reflects": true
|
|
5851
|
-
},
|
|
5852
|
-
{
|
|
5853
|
-
"kind": "field",
|
|
5854
|
-
"name": "altText",
|
|
5855
|
-
"type": {
|
|
5856
|
-
"text": "string | undefined"
|
|
5857
|
-
},
|
|
5858
|
-
"description": "Alt text for the brandvisual image for accessibility.\nThis will only be set if the brandvisual is an image (png).",
|
|
5859
|
-
"attribute": "altText",
|
|
5860
|
-
"reflects": true
|
|
5861
|
-
},
|
|
5862
|
-
{
|
|
5863
|
-
"kind": "method",
|
|
5864
|
-
"name": "getBrandVisualData",
|
|
5865
|
-
"privacy": "private"
|
|
5866
|
-
},
|
|
5867
|
-
{
|
|
5868
|
-
"kind": "method",
|
|
5869
|
-
"name": "injectTemplateAttributes",
|
|
5870
|
-
"privacy": "private",
|
|
5871
|
-
"return": {
|
|
5872
|
-
"type": {
|
|
5873
|
-
"text": "Element | TemplateResult"
|
|
5874
|
-
}
|
|
5875
|
-
},
|
|
5876
|
-
"parameters": [
|
|
5877
|
-
{
|
|
5878
|
-
"name": "litTemplate",
|
|
5879
|
-
"type": {
|
|
5880
|
-
"text": "TemplateResult"
|
|
5881
|
-
}
|
|
5882
|
-
},
|
|
5883
|
-
{
|
|
5884
|
-
"name": "tag",
|
|
5885
|
-
"type": {
|
|
5886
|
-
"text": "string"
|
|
5887
|
-
}
|
|
5888
|
-
},
|
|
5889
|
-
{
|
|
5890
|
-
"name": "props",
|
|
5891
|
-
"type": {
|
|
5892
|
-
"text": "any"
|
|
5893
|
-
}
|
|
5894
|
-
}
|
|
5895
|
-
]
|
|
5896
|
-
},
|
|
5897
|
-
{
|
|
5898
|
-
"kind": "method",
|
|
5899
|
-
"name": "injectHtmlAttributes",
|
|
5900
|
-
"privacy": "private",
|
|
5901
|
-
"return": {
|
|
5902
|
-
"type": {
|
|
5903
|
-
"text": "Element"
|
|
5904
|
-
}
|
|
5905
|
-
},
|
|
5906
|
-
"parameters": [
|
|
5907
|
-
{
|
|
5908
|
-
"name": "html",
|
|
5909
|
-
"type": {
|
|
5910
|
-
"text": "Element"
|
|
5911
|
-
}
|
|
5912
|
-
},
|
|
5913
|
-
{
|
|
5914
|
-
"name": "props",
|
|
5915
|
-
"type": {
|
|
5916
|
-
"text": "imageProps"
|
|
5917
|
-
}
|
|
5918
|
-
}
|
|
5919
|
-
]
|
|
5920
|
-
},
|
|
5921
|
-
{
|
|
5922
|
-
"kind": "method",
|
|
5923
|
-
"name": "handleBrandVisualLoadedSuccess",
|
|
5924
|
-
"privacy": "private",
|
|
5925
|
-
"parameters": [
|
|
5926
|
-
{
|
|
5927
|
-
"name": "brandVisualHtml",
|
|
5928
|
-
"type": {
|
|
5929
|
-
"text": "TemplateResult"
|
|
5930
|
-
},
|
|
5931
|
-
"description": "The brandvisual html element which has been fetched from the brandvisual provider."
|
|
5932
|
-
}
|
|
5933
|
-
],
|
|
5934
|
-
"description": "Sets the brandVisualData state to the fetched brandvisual.\nDispatches a 'load' event on the component once the brandvisual has been successfully loaded."
|
|
5935
|
-
},
|
|
5936
|
-
{
|
|
5937
|
-
"kind": "method",
|
|
5938
|
-
"name": "handleBrandVisualLoadedFailure",
|
|
5939
|
-
"privacy": "private",
|
|
5940
|
-
"parameters": [
|
|
5941
|
-
{
|
|
5942
|
-
"name": "error",
|
|
5943
|
-
"type": {
|
|
5944
|
-
"text": "unknown"
|
|
5945
|
-
}
|
|
5946
|
-
}
|
|
5947
|
-
],
|
|
5948
|
-
"description": "Dispatches an 'error' event on the component when the brandvisual import has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
|
|
5949
|
-
}
|
|
5950
|
-
],
|
|
5951
|
-
"events": [
|
|
5952
|
-
{
|
|
5953
|
-
"description": "(React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.",
|
|
5954
|
-
"name": "load",
|
|
5955
|
-
"reactName": "onLoad"
|
|
5956
|
-
},
|
|
5957
|
-
{
|
|
5958
|
-
"description": "(React: onError) This event is dispatched when the brandvisual fetching has failed.",
|
|
5959
|
-
"name": "error",
|
|
5960
|
-
"reactName": "onError"
|
|
5961
|
-
}
|
|
5962
|
-
],
|
|
5963
|
-
"attributes": [
|
|
5964
|
-
{
|
|
5965
|
-
"name": "name",
|
|
5966
|
-
"type": {
|
|
5967
|
-
"text": "BrandVisualNames | undefined"
|
|
5968
|
-
},
|
|
5969
|
-
"description": "Name of the brandVisual (= filename)",
|
|
5970
|
-
"fieldName": "name"
|
|
5971
|
-
},
|
|
5972
|
-
{
|
|
5973
|
-
"name": "altText",
|
|
5974
|
-
"type": {
|
|
5975
|
-
"text": "string | undefined"
|
|
5976
|
-
},
|
|
5977
|
-
"description": "Alt text for the brandvisual image for accessibility.\nThis will only be set if the brandvisual is an image (png).",
|
|
5978
|
-
"fieldName": "altText"
|
|
5979
|
-
}
|
|
5980
|
-
],
|
|
5981
|
-
"superclass": {
|
|
5982
|
-
"name": "Component",
|
|
5983
|
-
"module": "/src/models"
|
|
5984
|
-
},
|
|
5985
|
-
"tagName": "mdc-brandvisual",
|
|
5986
|
-
"jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\n * - Dynamically loads brandvisuals based on the `name` attribute.\n * - Emits a `load` event when the brandvisual is successfully fetched.\n * - Emits an `error` event when the brandvisual import fails.\n * - Supports accessibility best practices.\n * - Used for brand representation within the design system.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n */",
|
|
5987
|
-
"customElement": true
|
|
5988
|
-
}
|
|
5989
|
-
],
|
|
5990
|
-
"exports": [
|
|
5991
|
-
{
|
|
5992
|
-
"kind": "js",
|
|
5993
|
-
"name": "default",
|
|
5994
|
-
"declaration": {
|
|
5995
|
-
"name": "Brandvisual",
|
|
5996
|
-
"module": "components/brandvisual/brandvisual.component.js"
|
|
5997
|
-
}
|
|
5998
|
-
}
|
|
5999
|
-
]
|
|
6000
|
-
},
|
|
6001
6001
|
{
|
|
6002
6002
|
"kind": "javascript-module",
|
|
6003
6003
|
"path": "components/buttonlink/buttonlink.component.js",
|
|
@@ -45930,6 +45930,90 @@
|
|
|
45930
45930
|
}
|
|
45931
45931
|
]
|
|
45932
45932
|
},
|
|
45933
|
+
{
|
|
45934
|
+
"kind": "javascript-module",
|
|
45935
|
+
"path": "components/text/text.component.js",
|
|
45936
|
+
"declarations": [
|
|
45937
|
+
{
|
|
45938
|
+
"kind": "class",
|
|
45939
|
+
"description": "Text component for creating styled text elements.\nIt has to be mounted within the ThemeProvider to access color and font tokens.\n\nThe `type` attribute allows changing the text style.\nThe `tagname` attribute allows changing the tag name of the text element.\nThe default tag name is `p`.\n\nThe `tagname` attribute should be a valid HTML tag name.\nIf the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n\nThe styling is applied based on the `type` attribute.",
|
|
45940
|
+
"name": "Text",
|
|
45941
|
+
"cssParts": [
|
|
45942
|
+
{
|
|
45943
|
+
"description": "The text element",
|
|
45944
|
+
"name": "text"
|
|
45945
|
+
}
|
|
45946
|
+
],
|
|
45947
|
+
"slots": [
|
|
45948
|
+
{
|
|
45949
|
+
"description": "Default slot for text content",
|
|
45950
|
+
"name": ""
|
|
45951
|
+
}
|
|
45952
|
+
],
|
|
45953
|
+
"members": [
|
|
45954
|
+
{
|
|
45955
|
+
"kind": "field",
|
|
45956
|
+
"name": "type",
|
|
45957
|
+
"type": {
|
|
45958
|
+
"text": "TextType"
|
|
45959
|
+
},
|
|
45960
|
+
"privacy": "public",
|
|
45961
|
+
"description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
|
|
45962
|
+
"default": "body-midsize-medium",
|
|
45963
|
+
"attribute": "type",
|
|
45964
|
+
"reflects": true
|
|
45965
|
+
},
|
|
45966
|
+
{
|
|
45967
|
+
"kind": "field",
|
|
45968
|
+
"name": "tagname",
|
|
45969
|
+
"type": {
|
|
45970
|
+
"text": "TagName | undefined"
|
|
45971
|
+
},
|
|
45972
|
+
"privacy": "public",
|
|
45973
|
+
"description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
|
|
45974
|
+
"attribute": "tagname",
|
|
45975
|
+
"reflects": true
|
|
45976
|
+
}
|
|
45977
|
+
],
|
|
45978
|
+
"attributes": [
|
|
45979
|
+
{
|
|
45980
|
+
"name": "type",
|
|
45981
|
+
"type": {
|
|
45982
|
+
"text": "TextType"
|
|
45983
|
+
},
|
|
45984
|
+
"description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
|
|
45985
|
+
"default": "body-midsize-medium",
|
|
45986
|
+
"fieldName": "type"
|
|
45987
|
+
},
|
|
45988
|
+
{
|
|
45989
|
+
"name": "tagname",
|
|
45990
|
+
"type": {
|
|
45991
|
+
"text": "TagName | undefined"
|
|
45992
|
+
},
|
|
45993
|
+
"description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
|
|
45994
|
+
"fieldName": "tagname"
|
|
45995
|
+
}
|
|
45996
|
+
],
|
|
45997
|
+
"superclass": {
|
|
45998
|
+
"name": "Component",
|
|
45999
|
+
"module": "/src/models"
|
|
46000
|
+
},
|
|
46001
|
+
"tagName": "mdc-text",
|
|
46002
|
+
"jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
|
|
46003
|
+
"customElement": true
|
|
46004
|
+
}
|
|
46005
|
+
],
|
|
46006
|
+
"exports": [
|
|
46007
|
+
{
|
|
46008
|
+
"kind": "js",
|
|
46009
|
+
"name": "default",
|
|
46010
|
+
"declaration": {
|
|
46011
|
+
"name": "Text",
|
|
46012
|
+
"module": "components/text/text.component.js"
|
|
46013
|
+
}
|
|
46014
|
+
}
|
|
46015
|
+
]
|
|
46016
|
+
},
|
|
45933
46017
|
{
|
|
45934
46018
|
"kind": "javascript-module",
|
|
45935
46019
|
"path": "components/textarea/textarea.component.js",
|
|
@@ -47561,90 +47645,6 @@
|
|
|
47561
47645
|
}
|
|
47562
47646
|
]
|
|
47563
47647
|
},
|
|
47564
|
-
{
|
|
47565
|
-
"kind": "javascript-module",
|
|
47566
|
-
"path": "components/text/text.component.js",
|
|
47567
|
-
"declarations": [
|
|
47568
|
-
{
|
|
47569
|
-
"kind": "class",
|
|
47570
|
-
"description": "Text component for creating styled text elements.\nIt has to be mounted within the ThemeProvider to access color and font tokens.\n\nThe `type` attribute allows changing the text style.\nThe `tagname` attribute allows changing the tag name of the text element.\nThe default tag name is `p`.\n\nThe `tagname` attribute should be a valid HTML tag name.\nIf the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n\nThe styling is applied based on the `type` attribute.",
|
|
47571
|
-
"name": "Text",
|
|
47572
|
-
"cssParts": [
|
|
47573
|
-
{
|
|
47574
|
-
"description": "The text element",
|
|
47575
|
-
"name": "text"
|
|
47576
|
-
}
|
|
47577
|
-
],
|
|
47578
|
-
"slots": [
|
|
47579
|
-
{
|
|
47580
|
-
"description": "Default slot for text content",
|
|
47581
|
-
"name": ""
|
|
47582
|
-
}
|
|
47583
|
-
],
|
|
47584
|
-
"members": [
|
|
47585
|
-
{
|
|
47586
|
-
"kind": "field",
|
|
47587
|
-
"name": "type",
|
|
47588
|
-
"type": {
|
|
47589
|
-
"text": "TextType"
|
|
47590
|
-
},
|
|
47591
|
-
"privacy": "public",
|
|
47592
|
-
"description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
|
|
47593
|
-
"default": "body-midsize-medium",
|
|
47594
|
-
"attribute": "type",
|
|
47595
|
-
"reflects": true
|
|
47596
|
-
},
|
|
47597
|
-
{
|
|
47598
|
-
"kind": "field",
|
|
47599
|
-
"name": "tagname",
|
|
47600
|
-
"type": {
|
|
47601
|
-
"text": "TagName | undefined"
|
|
47602
|
-
},
|
|
47603
|
-
"privacy": "public",
|
|
47604
|
-
"description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
|
|
47605
|
-
"attribute": "tagname",
|
|
47606
|
-
"reflects": true
|
|
47607
|
-
}
|
|
47608
|
-
],
|
|
47609
|
-
"attributes": [
|
|
47610
|
-
{
|
|
47611
|
-
"name": "type",
|
|
47612
|
-
"type": {
|
|
47613
|
-
"text": "TextType"
|
|
47614
|
-
},
|
|
47615
|
-
"description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
|
|
47616
|
-
"default": "body-midsize-medium",
|
|
47617
|
-
"fieldName": "type"
|
|
47618
|
-
},
|
|
47619
|
-
{
|
|
47620
|
-
"name": "tagname",
|
|
47621
|
-
"type": {
|
|
47622
|
-
"text": "TagName | undefined"
|
|
47623
|
-
},
|
|
47624
|
-
"description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
|
|
47625
|
-
"fieldName": "tagname"
|
|
47626
|
-
}
|
|
47627
|
-
],
|
|
47628
|
-
"superclass": {
|
|
47629
|
-
"name": "Component",
|
|
47630
|
-
"module": "/src/models"
|
|
47631
|
-
},
|
|
47632
|
-
"tagName": "mdc-text",
|
|
47633
|
-
"jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
|
|
47634
|
-
"customElement": true
|
|
47635
|
-
}
|
|
47636
|
-
],
|
|
47637
|
-
"exports": [
|
|
47638
|
-
{
|
|
47639
|
-
"kind": "js",
|
|
47640
|
-
"name": "default",
|
|
47641
|
-
"declaration": {
|
|
47642
|
-
"name": "Text",
|
|
47643
|
-
"module": "components/text/text.component.js"
|
|
47644
|
-
}
|
|
47645
|
-
}
|
|
47646
|
-
]
|
|
47647
|
-
},
|
|
47648
47648
|
{
|
|
47649
47649
|
"kind": "javascript-module",
|
|
47650
47650
|
"path": "components/toggle/toggle.component.js",
|