@momentum-design/components 0.105.3 → 0.106.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/index.js +73 -73
- package/dist/browser/index.js.map +3 -3
- package/dist/components/virtualizedlist/virtualizedlist.component.d.ts +5 -8
- package/dist/components/virtualizedlist/virtualizedlist.component.js +10 -7
- package/dist/components/virtualizedlist/virtualizedlist.helper.test.js +1 -1
- package/dist/components/virtualizedlist/virtualizedlist.types.d.ts +3 -2
- package/dist/custom-elements.json +746 -733
- package/dist/index.d.ts +2 -1
- package/dist/react/index.d.ts +3 -3
- package/dist/react/index.js +3 -3
- package/dist/react/virtualizedlist/index.d.ts +2 -2
- package/dist/react/virtualizedlist/index.js +2 -2
- package/package.json +1 -1
|
@@ -4,63 +4,149 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "components/
|
|
7
|
+
"path": "components/accordion/accordion.component.js",
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "An accordion
|
|
12
|
-
"name": "
|
|
11
|
+
"description": "An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n- Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n- Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.",
|
|
12
|
+
"name": "Accordion",
|
|
13
13
|
"cssProperties": [
|
|
14
14
|
{
|
|
15
|
-
"description": "The border color of the accordion
|
|
16
|
-
"name": "--mdc-accordionbutton-border-color"
|
|
15
|
+
"description": "The border color of the accordion.",
|
|
16
|
+
"name": "--mdc-accordionbutton-border-color",
|
|
17
|
+
"inheritedFrom": {
|
|
18
|
+
"name": "AccordionButton",
|
|
19
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
20
|
+
}
|
|
17
21
|
},
|
|
18
22
|
{
|
|
19
|
-
"description": "The hover color of the accordion
|
|
20
|
-
"name": "--mdc-accordionbutton-hover-color"
|
|
23
|
+
"description": "The hover color of the accordion.",
|
|
24
|
+
"name": "--mdc-accordionbutton-hover-color",
|
|
25
|
+
"inheritedFrom": {
|
|
26
|
+
"name": "AccordionButton",
|
|
27
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
28
|
+
}
|
|
21
29
|
},
|
|
22
30
|
{
|
|
23
|
-
"description": "The active color of the accordion
|
|
24
|
-
"name": "--mdc-accordionbutton-active-color"
|
|
31
|
+
"description": "The active color of the accordion.",
|
|
32
|
+
"name": "--mdc-accordionbutton-active-color",
|
|
33
|
+
"inheritedFrom": {
|
|
34
|
+
"name": "AccordionButton",
|
|
35
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
36
|
+
}
|
|
25
37
|
},
|
|
26
38
|
{
|
|
27
|
-
"description": "The disabled color of the accordion
|
|
28
|
-
"name": "--mdc-accordionbutton-disabled-color"
|
|
39
|
+
"description": "The disabled color of the accordion.",
|
|
40
|
+
"name": "--mdc-accordionbutton-disabled-color",
|
|
41
|
+
"inheritedFrom": {
|
|
42
|
+
"name": "AccordionButton",
|
|
43
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
44
|
+
}
|
|
29
45
|
}
|
|
30
46
|
],
|
|
31
47
|
"cssParts": [
|
|
32
48
|
{
|
|
33
|
-
"description": "The header section of the accordion
|
|
34
|
-
"name": "header-section"
|
|
49
|
+
"description": "The header section of the accordion.",
|
|
50
|
+
"name": "header-section",
|
|
51
|
+
"inheritedFrom": {
|
|
52
|
+
"name": "AccordionButton",
|
|
53
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
54
|
+
}
|
|
35
55
|
},
|
|
36
56
|
{
|
|
37
|
-
"description": "The header
|
|
38
|
-
"name": "header
|
|
57
|
+
"description": "The leading header of the accordion.",
|
|
58
|
+
"name": "leading-header",
|
|
59
|
+
"inheritedFrom": {
|
|
60
|
+
"name": "AccordionButton",
|
|
61
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
62
|
+
}
|
|
39
63
|
},
|
|
40
64
|
{
|
|
41
|
-
"description": "The
|
|
42
|
-
"name": "
|
|
65
|
+
"description": "The trailing header of the accordion.",
|
|
66
|
+
"name": "trailing-header",
|
|
67
|
+
"inheritedFrom": {
|
|
68
|
+
"name": "AccordionButton",
|
|
69
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
70
|
+
}
|
|
43
71
|
},
|
|
44
72
|
{
|
|
45
|
-
"description": "The trailing header of the accordion
|
|
46
|
-
"name": "trailing-
|
|
73
|
+
"description": "The trailing header button of the accordion.",
|
|
74
|
+
"name": "trailing-header__button"
|
|
47
75
|
},
|
|
48
76
|
{
|
|
49
|
-
"description": "The
|
|
50
|
-
"name": "
|
|
77
|
+
"description": "The body section of the accordion.",
|
|
78
|
+
"name": "body-section",
|
|
79
|
+
"inheritedFrom": {
|
|
80
|
+
"name": "AccordionButton",
|
|
81
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
82
|
+
}
|
|
51
83
|
},
|
|
52
84
|
{
|
|
53
|
-
"description": "The
|
|
54
|
-
"name": "
|
|
85
|
+
"description": "The header button section of the accordion button.",
|
|
86
|
+
"name": "header-button-section",
|
|
87
|
+
"inheritedFrom": {
|
|
88
|
+
"name": "AccordionButton",
|
|
89
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"description": "The trailing header icon of the accordion button.",
|
|
94
|
+
"name": "trailing-header__icon",
|
|
95
|
+
"inheritedFrom": {
|
|
96
|
+
"name": "AccordionButton",
|
|
97
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
98
|
+
}
|
|
55
99
|
}
|
|
56
100
|
],
|
|
57
101
|
"slots": [
|
|
102
|
+
{
|
|
103
|
+
"description": "The leading controls slot of the accordion on the header section.",
|
|
104
|
+
"name": "leading-controls"
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"description": "The trailing controls slot of the accordion on the header section.",
|
|
108
|
+
"name": "trailing-controls"
|
|
109
|
+
},
|
|
58
110
|
{
|
|
59
111
|
"description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
|
|
60
|
-
"name": "default"
|
|
112
|
+
"name": "default",
|
|
113
|
+
"inheritedFrom": {
|
|
114
|
+
"name": "AccordionButton",
|
|
115
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
116
|
+
}
|
|
61
117
|
}
|
|
62
118
|
],
|
|
63
119
|
"members": [
|
|
120
|
+
{
|
|
121
|
+
"kind": "method",
|
|
122
|
+
"name": "renderHeader",
|
|
123
|
+
"privacy": "protected",
|
|
124
|
+
"return": {
|
|
125
|
+
"type": {
|
|
126
|
+
"text": ""
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
"description": "Renders the header section of the accordion.\nThis includes the leading icon, text and controls, and the trailing controls.\nThe trailing controls include the expand/collapse button.\nThe button is disabled if the accordion is disabled.\nThe button is also given the aria-controls attribute set to the id of the body section.\nThe button is also given the aria-expanded attribute set to the expanded state of the accordion.\nThe prefix icon of the button is set to the expanded state of the accordion.",
|
|
130
|
+
"inheritedFrom": {
|
|
131
|
+
"name": "AccordionButton",
|
|
132
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
133
|
+
}
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"kind": "field",
|
|
137
|
+
"name": "disabled",
|
|
138
|
+
"type": {
|
|
139
|
+
"text": "boolean | undefined"
|
|
140
|
+
},
|
|
141
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
142
|
+
"default": "undefined",
|
|
143
|
+
"attribute": "disabled",
|
|
144
|
+
"reflects": true,
|
|
145
|
+
"inheritedFrom": {
|
|
146
|
+
"name": "DisabledMixin",
|
|
147
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
148
|
+
}
|
|
149
|
+
},
|
|
64
150
|
{
|
|
65
151
|
"kind": "field",
|
|
66
152
|
"name": "size",
|
|
@@ -70,7 +156,11 @@
|
|
|
70
156
|
"description": "The size of the accordion item.",
|
|
71
157
|
"default": "'small'",
|
|
72
158
|
"attribute": "size",
|
|
73
|
-
"reflects": true
|
|
159
|
+
"reflects": true,
|
|
160
|
+
"inheritedFrom": {
|
|
161
|
+
"name": "AccordionButton",
|
|
162
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
163
|
+
}
|
|
74
164
|
},
|
|
75
165
|
{
|
|
76
166
|
"kind": "field",
|
|
@@ -81,7 +171,11 @@
|
|
|
81
171
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
82
172
|
"default": "'default'",
|
|
83
173
|
"attribute": "variant",
|
|
84
|
-
"reflects": true
|
|
174
|
+
"reflects": true,
|
|
175
|
+
"inheritedFrom": {
|
|
176
|
+
"name": "AccordionButton",
|
|
177
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
178
|
+
}
|
|
85
179
|
},
|
|
86
180
|
{
|
|
87
181
|
"kind": "field",
|
|
@@ -92,7 +186,11 @@
|
|
|
92
186
|
"description": "The aria level of the accordion component.",
|
|
93
187
|
"default": "3",
|
|
94
188
|
"attribute": "data-aria-level",
|
|
95
|
-
"reflects": true
|
|
189
|
+
"reflects": true,
|
|
190
|
+
"inheritedFrom": {
|
|
191
|
+
"name": "AccordionButton",
|
|
192
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
193
|
+
}
|
|
96
194
|
},
|
|
97
195
|
{
|
|
98
196
|
"kind": "field",
|
|
@@ -103,7 +201,11 @@
|
|
|
103
201
|
"description": "The visibility of the accordion button.",
|
|
104
202
|
"default": "false",
|
|
105
203
|
"attribute": "expanded",
|
|
106
|
-
"reflects": true
|
|
204
|
+
"reflects": true,
|
|
205
|
+
"inheritedFrom": {
|
|
206
|
+
"name": "AccordionButton",
|
|
207
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
208
|
+
}
|
|
107
209
|
},
|
|
108
210
|
{
|
|
109
211
|
"kind": "field",
|
|
@@ -113,7 +215,11 @@
|
|
|
113
215
|
},
|
|
114
216
|
"description": "The header text of the accordion item.",
|
|
115
217
|
"attribute": "header-text",
|
|
116
|
-
"reflects": true
|
|
218
|
+
"reflects": true,
|
|
219
|
+
"inheritedFrom": {
|
|
220
|
+
"name": "AccordionButton",
|
|
221
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
222
|
+
}
|
|
117
223
|
},
|
|
118
224
|
{
|
|
119
225
|
"kind": "field",
|
|
@@ -122,7 +228,11 @@
|
|
|
122
228
|
"text": "IconNames | undefined"
|
|
123
229
|
},
|
|
124
230
|
"description": "The leading icon that is displayed before the header text.",
|
|
125
|
-
"attribute": "prefix-icon"
|
|
231
|
+
"attribute": "prefix-icon",
|
|
232
|
+
"inheritedFrom": {
|
|
233
|
+
"name": "AccordionButton",
|
|
234
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
235
|
+
}
|
|
126
236
|
},
|
|
127
237
|
{
|
|
128
238
|
"kind": "method",
|
|
@@ -133,7 +243,11 @@
|
|
|
133
243
|
"text": "void"
|
|
134
244
|
}
|
|
135
245
|
},
|
|
136
|
-
"description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state."
|
|
246
|
+
"description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state.",
|
|
247
|
+
"inheritedFrom": {
|
|
248
|
+
"name": "AccordionButton",
|
|
249
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
250
|
+
}
|
|
137
251
|
},
|
|
138
252
|
{
|
|
139
253
|
"kind": "method",
|
|
@@ -144,7 +258,11 @@
|
|
|
144
258
|
"text": "void"
|
|
145
259
|
}
|
|
146
260
|
},
|
|
147
|
-
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
|
|
261
|
+
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state.",
|
|
262
|
+
"inheritedFrom": {
|
|
263
|
+
"name": "AccordionButton",
|
|
264
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
265
|
+
}
|
|
148
266
|
},
|
|
149
267
|
{
|
|
150
268
|
"kind": "method",
|
|
@@ -164,7 +282,11 @@
|
|
|
164
282
|
"description": "The KeyboardEvent fired."
|
|
165
283
|
}
|
|
166
284
|
],
|
|
167
|
-
"description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys."
|
|
285
|
+
"description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys.",
|
|
286
|
+
"inheritedFrom": {
|
|
287
|
+
"name": "AccordionButton",
|
|
288
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
289
|
+
}
|
|
168
290
|
},
|
|
169
291
|
{
|
|
170
292
|
"kind": "method",
|
|
@@ -183,7 +305,11 @@
|
|
|
183
305
|
"text": "IconNames"
|
|
184
306
|
}
|
|
185
307
|
}
|
|
186
|
-
]
|
|
308
|
+
],
|
|
309
|
+
"inheritedFrom": {
|
|
310
|
+
"name": "AccordionButton",
|
|
311
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
312
|
+
}
|
|
187
313
|
},
|
|
188
314
|
{
|
|
189
315
|
"kind": "method",
|
|
@@ -193,16 +319,10 @@
|
|
|
193
319
|
"type": {
|
|
194
320
|
"text": "TemplateResult | typeof nothing"
|
|
195
321
|
}
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
"name": "renderHeader",
|
|
201
|
-
"privacy": "protected",
|
|
202
|
-
"return": {
|
|
203
|
-
"type": {
|
|
204
|
-
"text": "TemplateResult"
|
|
205
|
-
}
|
|
322
|
+
},
|
|
323
|
+
"inheritedFrom": {
|
|
324
|
+
"name": "AccordionButton",
|
|
325
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
206
326
|
}
|
|
207
327
|
},
|
|
208
328
|
{
|
|
@@ -214,7 +334,11 @@
|
|
|
214
334
|
"text": ""
|
|
215
335
|
}
|
|
216
336
|
},
|
|
217
|
-
"description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon."
|
|
337
|
+
"description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon.",
|
|
338
|
+
"inheritedFrom": {
|
|
339
|
+
"name": "AccordionButton",
|
|
340
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
341
|
+
}
|
|
218
342
|
},
|
|
219
343
|
{
|
|
220
344
|
"kind": "method",
|
|
@@ -224,32 +348,45 @@
|
|
|
224
348
|
"type": {
|
|
225
349
|
"text": "TemplateResult | typeof nothing"
|
|
226
350
|
}
|
|
227
|
-
}
|
|
228
|
-
},
|
|
229
|
-
{
|
|
230
|
-
"kind": "field",
|
|
231
|
-
"name": "disabled",
|
|
232
|
-
"type": {
|
|
233
|
-
"text": "boolean | undefined"
|
|
234
351
|
},
|
|
235
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
236
|
-
"default": "undefined",
|
|
237
|
-
"attribute": "disabled",
|
|
238
|
-
"reflects": true,
|
|
239
352
|
"inheritedFrom": {
|
|
240
|
-
"name": "
|
|
241
|
-
"module": "
|
|
353
|
+
"name": "AccordionButton",
|
|
354
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
242
355
|
}
|
|
243
356
|
}
|
|
244
357
|
],
|
|
245
358
|
"events": [
|
|
246
359
|
{
|
|
247
|
-
"description": "(React: onShown) This event is triggered when the accordion
|
|
360
|
+
"description": "(React: onShown) This event is triggered when the accordion is expanded.",
|
|
248
361
|
"name": "shown",
|
|
249
|
-
"reactName": "onShown"
|
|
362
|
+
"reactName": "onShown",
|
|
363
|
+
"inheritedFrom": {
|
|
364
|
+
"name": "AccordionButton",
|
|
365
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
366
|
+
}
|
|
250
367
|
}
|
|
251
368
|
],
|
|
369
|
+
"superclass": {
|
|
370
|
+
"name": "AccordionButton",
|
|
371
|
+
"module": "/src/components/accordionbutton/accordionbutton.component"
|
|
372
|
+
},
|
|
373
|
+
"tagName": "mdc-accordion",
|
|
374
|
+
"jsDoc": "/**\n * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.\n *\n * @tagname mdc-accordion\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot leading-controls - The leading controls slot of the accordion on the header section.\n * @slot trailing-controls - The trailing controls slot of the accordion on the header section.\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.\n *\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n * @csspart body-section - The body section of the accordion.\n */",
|
|
375
|
+
"customElement": true,
|
|
252
376
|
"attributes": [
|
|
377
|
+
{
|
|
378
|
+
"name": "disabled",
|
|
379
|
+
"type": {
|
|
380
|
+
"text": "boolean | undefined"
|
|
381
|
+
},
|
|
382
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
383
|
+
"default": "undefined",
|
|
384
|
+
"fieldName": "disabled",
|
|
385
|
+
"inheritedFrom": {
|
|
386
|
+
"name": "DisabledMixin",
|
|
387
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
388
|
+
}
|
|
389
|
+
},
|
|
253
390
|
{
|
|
254
391
|
"name": "size",
|
|
255
392
|
"type": {
|
|
@@ -257,7 +394,11 @@
|
|
|
257
394
|
},
|
|
258
395
|
"description": "The size of the accordion item.",
|
|
259
396
|
"default": "'small'",
|
|
260
|
-
"fieldName": "size"
|
|
397
|
+
"fieldName": "size",
|
|
398
|
+
"inheritedFrom": {
|
|
399
|
+
"name": "AccordionButton",
|
|
400
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
401
|
+
}
|
|
261
402
|
},
|
|
262
403
|
{
|
|
263
404
|
"name": "variant",
|
|
@@ -266,7 +407,11 @@
|
|
|
266
407
|
},
|
|
267
408
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
268
409
|
"default": "'default'",
|
|
269
|
-
"fieldName": "variant"
|
|
410
|
+
"fieldName": "variant",
|
|
411
|
+
"inheritedFrom": {
|
|
412
|
+
"name": "AccordionButton",
|
|
413
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
414
|
+
}
|
|
270
415
|
},
|
|
271
416
|
{
|
|
272
417
|
"name": "data-aria-level",
|
|
@@ -275,7 +420,11 @@
|
|
|
275
420
|
},
|
|
276
421
|
"description": "The aria level of the accordion component.",
|
|
277
422
|
"default": "3",
|
|
278
|
-
"fieldName": "dataAriaLevel"
|
|
423
|
+
"fieldName": "dataAriaLevel",
|
|
424
|
+
"inheritedFrom": {
|
|
425
|
+
"name": "AccordionButton",
|
|
426
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
427
|
+
}
|
|
279
428
|
},
|
|
280
429
|
{
|
|
281
430
|
"name": "expanded",
|
|
@@ -284,7 +433,11 @@
|
|
|
284
433
|
},
|
|
285
434
|
"description": "The visibility of the accordion button.",
|
|
286
435
|
"default": "false",
|
|
287
|
-
"fieldName": "expanded"
|
|
436
|
+
"fieldName": "expanded",
|
|
437
|
+
"inheritedFrom": {
|
|
438
|
+
"name": "AccordionButton",
|
|
439
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
440
|
+
}
|
|
288
441
|
},
|
|
289
442
|
{
|
|
290
443
|
"name": "header-text",
|
|
@@ -292,7 +445,11 @@
|
|
|
292
445
|
"text": "string | undefined"
|
|
293
446
|
},
|
|
294
447
|
"description": "The header text of the accordion item.",
|
|
295
|
-
"fieldName": "headerText"
|
|
448
|
+
"fieldName": "headerText",
|
|
449
|
+
"inheritedFrom": {
|
|
450
|
+
"name": "AccordionButton",
|
|
451
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
452
|
+
}
|
|
296
453
|
},
|
|
297
454
|
{
|
|
298
455
|
"name": "prefix-icon",
|
|
@@ -300,35 +457,13 @@
|
|
|
300
457
|
"text": "IconNames | undefined"
|
|
301
458
|
},
|
|
302
459
|
"description": "The leading icon that is displayed before the header text.",
|
|
303
|
-
"fieldName": "prefixIcon"
|
|
304
|
-
},
|
|
305
|
-
{
|
|
306
|
-
"name": "disabled",
|
|
307
|
-
"type": {
|
|
308
|
-
"text": "boolean | undefined"
|
|
309
|
-
},
|
|
310
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
311
|
-
"default": "undefined",
|
|
312
|
-
"fieldName": "disabled",
|
|
460
|
+
"fieldName": "prefixIcon",
|
|
313
461
|
"inheritedFrom": {
|
|
314
|
-
"name": "
|
|
315
|
-
"module": "src/
|
|
462
|
+
"name": "AccordionButton",
|
|
463
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
316
464
|
}
|
|
317
465
|
}
|
|
318
|
-
]
|
|
319
|
-
"mixins": [
|
|
320
|
-
{
|
|
321
|
-
"name": "DisabledMixin",
|
|
322
|
-
"module": "/src/utils/mixins/DisabledMixin"
|
|
323
|
-
}
|
|
324
|
-
],
|
|
325
|
-
"superclass": {
|
|
326
|
-
"name": "Component",
|
|
327
|
-
"module": "/src/models"
|
|
328
|
-
},
|
|
329
|
-
"tagName": "mdc-accordionbutton",
|
|
330
|
-
"jsDoc": "/**\n * An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you do need any controls on your accordion heading, then it's advised to use `accordion` component.\n *\n * If an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.\n *\n * @tagname mdc-accordionbutton\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion button is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion button.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.\n *\n * @csspart header-section - The header section of the accordion button.\n * @csspart header-button-section - The header button section of the accordion button.\n * @csspart leading-header - The leading header of the accordion button.\n * @csspart trailing-header - The trailing header of the accordion button.\n * @csspart trailing-header__icon - The trailing header icon of the accordion button.\n * @csspart body-section - The body section of the accordion button.\n */",
|
|
331
|
-
"customElement": true
|
|
466
|
+
]
|
|
332
467
|
}
|
|
333
468
|
],
|
|
334
469
|
"exports": [
|
|
@@ -336,157 +471,71 @@
|
|
|
336
471
|
"kind": "js",
|
|
337
472
|
"name": "default",
|
|
338
473
|
"declaration": {
|
|
339
|
-
"name": "
|
|
340
|
-
"module": "components/
|
|
474
|
+
"name": "Accordion",
|
|
475
|
+
"module": "components/accordion/accordion.component.js"
|
|
341
476
|
}
|
|
342
477
|
}
|
|
343
478
|
]
|
|
344
479
|
},
|
|
345
480
|
{
|
|
346
481
|
"kind": "javascript-module",
|
|
347
|
-
"path": "components/
|
|
482
|
+
"path": "components/accordionbutton/accordionbutton.component.js",
|
|
348
483
|
"declarations": [
|
|
349
484
|
{
|
|
350
485
|
"kind": "class",
|
|
351
|
-
"description": "An accordion contains a header and body section with
|
|
352
|
-
"name": "
|
|
486
|
+
"description": "An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you do need any controls on your accordion heading, then it's advised to use `accordion` component.\n\nIf an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.",
|
|
487
|
+
"name": "AccordionButton",
|
|
353
488
|
"cssProperties": [
|
|
354
489
|
{
|
|
355
|
-
"description": "The border color of the accordion.",
|
|
356
|
-
"name": "--mdc-accordionbutton-border-color"
|
|
357
|
-
"inheritedFrom": {
|
|
358
|
-
"name": "AccordionButton",
|
|
359
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
360
|
-
}
|
|
490
|
+
"description": "The border color of the accordion button.",
|
|
491
|
+
"name": "--mdc-accordionbutton-border-color"
|
|
361
492
|
},
|
|
362
493
|
{
|
|
363
|
-
"description": "The hover color of the accordion.",
|
|
364
|
-
"name": "--mdc-accordionbutton-hover-color"
|
|
365
|
-
"inheritedFrom": {
|
|
366
|
-
"name": "AccordionButton",
|
|
367
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
368
|
-
}
|
|
494
|
+
"description": "The hover color of the accordion button.",
|
|
495
|
+
"name": "--mdc-accordionbutton-hover-color"
|
|
369
496
|
},
|
|
370
497
|
{
|
|
371
|
-
"description": "The active color of the accordion.",
|
|
372
|
-
"name": "--mdc-accordionbutton-active-color"
|
|
373
|
-
"inheritedFrom": {
|
|
374
|
-
"name": "AccordionButton",
|
|
375
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
376
|
-
}
|
|
498
|
+
"description": "The active color of the accordion button.",
|
|
499
|
+
"name": "--mdc-accordionbutton-active-color"
|
|
377
500
|
},
|
|
378
501
|
{
|
|
379
|
-
"description": "The disabled color of the accordion.",
|
|
380
|
-
"name": "--mdc-accordionbutton-disabled-color"
|
|
381
|
-
"inheritedFrom": {
|
|
382
|
-
"name": "AccordionButton",
|
|
383
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
384
|
-
}
|
|
502
|
+
"description": "The disabled color of the accordion button.",
|
|
503
|
+
"name": "--mdc-accordionbutton-disabled-color"
|
|
385
504
|
}
|
|
386
505
|
],
|
|
387
506
|
"cssParts": [
|
|
388
507
|
{
|
|
389
|
-
"description": "The header section of the accordion.",
|
|
390
|
-
"name": "header-section"
|
|
391
|
-
"inheritedFrom": {
|
|
392
|
-
"name": "AccordionButton",
|
|
393
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
394
|
-
}
|
|
395
|
-
},
|
|
396
|
-
{
|
|
397
|
-
"description": "The leading header of the accordion.",
|
|
398
|
-
"name": "leading-header",
|
|
399
|
-
"inheritedFrom": {
|
|
400
|
-
"name": "AccordionButton",
|
|
401
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
402
|
-
}
|
|
508
|
+
"description": "The header section of the accordion button.",
|
|
509
|
+
"name": "header-section"
|
|
403
510
|
},
|
|
404
511
|
{
|
|
405
|
-
"description": "The
|
|
406
|
-
"name": "
|
|
407
|
-
"inheritedFrom": {
|
|
408
|
-
"name": "AccordionButton",
|
|
409
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
410
|
-
}
|
|
512
|
+
"description": "The header button section of the accordion button.",
|
|
513
|
+
"name": "header-button-section"
|
|
411
514
|
},
|
|
412
515
|
{
|
|
413
|
-
"description": "The
|
|
414
|
-
"name": "
|
|
516
|
+
"description": "The leading header of the accordion button.",
|
|
517
|
+
"name": "leading-header"
|
|
415
518
|
},
|
|
416
519
|
{
|
|
417
|
-
"description": "The
|
|
418
|
-
"name": "
|
|
419
|
-
"inheritedFrom": {
|
|
420
|
-
"name": "AccordionButton",
|
|
421
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
422
|
-
}
|
|
520
|
+
"description": "The trailing header of the accordion button.",
|
|
521
|
+
"name": "trailing-header"
|
|
423
522
|
},
|
|
424
523
|
{
|
|
425
|
-
"description": "The header
|
|
426
|
-
"name": "
|
|
427
|
-
"inheritedFrom": {
|
|
428
|
-
"name": "AccordionButton",
|
|
429
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
430
|
-
}
|
|
524
|
+
"description": "The trailing header icon of the accordion button.",
|
|
525
|
+
"name": "trailing-header__icon"
|
|
431
526
|
},
|
|
432
527
|
{
|
|
433
|
-
"description": "The
|
|
434
|
-
"name": "
|
|
435
|
-
"inheritedFrom": {
|
|
436
|
-
"name": "AccordionButton",
|
|
437
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
438
|
-
}
|
|
528
|
+
"description": "The body section of the accordion button.",
|
|
529
|
+
"name": "body-section"
|
|
439
530
|
}
|
|
440
531
|
],
|
|
441
532
|
"slots": [
|
|
442
|
-
{
|
|
443
|
-
"description": "The leading controls slot of the accordion on the header section.",
|
|
444
|
-
"name": "leading-controls"
|
|
445
|
-
},
|
|
446
|
-
{
|
|
447
|
-
"description": "The trailing controls slot of the accordion on the header section.",
|
|
448
|
-
"name": "trailing-controls"
|
|
449
|
-
},
|
|
450
533
|
{
|
|
451
534
|
"description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
|
|
452
|
-
"name": "default"
|
|
453
|
-
"inheritedFrom": {
|
|
454
|
-
"name": "AccordionButton",
|
|
455
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
456
|
-
}
|
|
535
|
+
"name": "default"
|
|
457
536
|
}
|
|
458
537
|
],
|
|
459
538
|
"members": [
|
|
460
|
-
{
|
|
461
|
-
"kind": "method",
|
|
462
|
-
"name": "renderHeader",
|
|
463
|
-
"privacy": "protected",
|
|
464
|
-
"return": {
|
|
465
|
-
"type": {
|
|
466
|
-
"text": ""
|
|
467
|
-
}
|
|
468
|
-
},
|
|
469
|
-
"description": "Renders the header section of the accordion.\nThis includes the leading icon, text and controls, and the trailing controls.\nThe trailing controls include the expand/collapse button.\nThe button is disabled if the accordion is disabled.\nThe button is also given the aria-controls attribute set to the id of the body section.\nThe button is also given the aria-expanded attribute set to the expanded state of the accordion.\nThe prefix icon of the button is set to the expanded state of the accordion.",
|
|
470
|
-
"inheritedFrom": {
|
|
471
|
-
"name": "AccordionButton",
|
|
472
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
473
|
-
}
|
|
474
|
-
},
|
|
475
|
-
{
|
|
476
|
-
"kind": "field",
|
|
477
|
-
"name": "disabled",
|
|
478
|
-
"type": {
|
|
479
|
-
"text": "boolean | undefined"
|
|
480
|
-
},
|
|
481
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
482
|
-
"default": "undefined",
|
|
483
|
-
"attribute": "disabled",
|
|
484
|
-
"reflects": true,
|
|
485
|
-
"inheritedFrom": {
|
|
486
|
-
"name": "AccordionButton",
|
|
487
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
488
|
-
}
|
|
489
|
-
},
|
|
490
539
|
{
|
|
491
540
|
"kind": "field",
|
|
492
541
|
"name": "size",
|
|
@@ -496,11 +545,7 @@
|
|
|
496
545
|
"description": "The size of the accordion item.",
|
|
497
546
|
"default": "'small'",
|
|
498
547
|
"attribute": "size",
|
|
499
|
-
"reflects": true
|
|
500
|
-
"inheritedFrom": {
|
|
501
|
-
"name": "AccordionButton",
|
|
502
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
503
|
-
}
|
|
548
|
+
"reflects": true
|
|
504
549
|
},
|
|
505
550
|
{
|
|
506
551
|
"kind": "field",
|
|
@@ -511,11 +556,7 @@
|
|
|
511
556
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
512
557
|
"default": "'default'",
|
|
513
558
|
"attribute": "variant",
|
|
514
|
-
"reflects": true
|
|
515
|
-
"inheritedFrom": {
|
|
516
|
-
"name": "AccordionButton",
|
|
517
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
518
|
-
}
|
|
559
|
+
"reflects": true
|
|
519
560
|
},
|
|
520
561
|
{
|
|
521
562
|
"kind": "field",
|
|
@@ -526,11 +567,7 @@
|
|
|
526
567
|
"description": "The aria level of the accordion component.",
|
|
527
568
|
"default": "3",
|
|
528
569
|
"attribute": "data-aria-level",
|
|
529
|
-
"reflects": true
|
|
530
|
-
"inheritedFrom": {
|
|
531
|
-
"name": "AccordionButton",
|
|
532
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
533
|
-
}
|
|
570
|
+
"reflects": true
|
|
534
571
|
},
|
|
535
572
|
{
|
|
536
573
|
"kind": "field",
|
|
@@ -541,11 +578,7 @@
|
|
|
541
578
|
"description": "The visibility of the accordion button.",
|
|
542
579
|
"default": "false",
|
|
543
580
|
"attribute": "expanded",
|
|
544
|
-
"reflects": true
|
|
545
|
-
"inheritedFrom": {
|
|
546
|
-
"name": "AccordionButton",
|
|
547
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
548
|
-
}
|
|
581
|
+
"reflects": true
|
|
549
582
|
},
|
|
550
583
|
{
|
|
551
584
|
"kind": "field",
|
|
@@ -555,11 +588,7 @@
|
|
|
555
588
|
},
|
|
556
589
|
"description": "The header text of the accordion item.",
|
|
557
590
|
"attribute": "header-text",
|
|
558
|
-
"reflects": true
|
|
559
|
-
"inheritedFrom": {
|
|
560
|
-
"name": "AccordionButton",
|
|
561
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
562
|
-
}
|
|
591
|
+
"reflects": true
|
|
563
592
|
},
|
|
564
593
|
{
|
|
565
594
|
"kind": "field",
|
|
@@ -568,11 +597,7 @@
|
|
|
568
597
|
"text": "IconNames | undefined"
|
|
569
598
|
},
|
|
570
599
|
"description": "The leading icon that is displayed before the header text.",
|
|
571
|
-
"attribute": "prefix-icon"
|
|
572
|
-
"inheritedFrom": {
|
|
573
|
-
"name": "AccordionButton",
|
|
574
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
575
|
-
}
|
|
600
|
+
"attribute": "prefix-icon"
|
|
576
601
|
},
|
|
577
602
|
{
|
|
578
603
|
"kind": "method",
|
|
@@ -583,11 +608,7 @@
|
|
|
583
608
|
"text": "void"
|
|
584
609
|
}
|
|
585
610
|
},
|
|
586
|
-
"description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state."
|
|
587
|
-
"inheritedFrom": {
|
|
588
|
-
"name": "AccordionButton",
|
|
589
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
590
|
-
}
|
|
611
|
+
"description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state."
|
|
591
612
|
},
|
|
592
613
|
{
|
|
593
614
|
"kind": "method",
|
|
@@ -598,11 +619,7 @@
|
|
|
598
619
|
"text": "void"
|
|
599
620
|
}
|
|
600
621
|
},
|
|
601
|
-
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
|
|
602
|
-
"inheritedFrom": {
|
|
603
|
-
"name": "AccordionButton",
|
|
604
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
605
|
-
}
|
|
622
|
+
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
|
|
606
623
|
},
|
|
607
624
|
{
|
|
608
625
|
"kind": "method",
|
|
@@ -622,11 +639,7 @@
|
|
|
622
639
|
"description": "The KeyboardEvent fired."
|
|
623
640
|
}
|
|
624
641
|
],
|
|
625
|
-
"description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys."
|
|
626
|
-
"inheritedFrom": {
|
|
627
|
-
"name": "AccordionButton",
|
|
628
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
629
|
-
}
|
|
642
|
+
"description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys."
|
|
630
643
|
},
|
|
631
644
|
{
|
|
632
645
|
"kind": "method",
|
|
@@ -645,11 +658,7 @@
|
|
|
645
658
|
"text": "IconNames"
|
|
646
659
|
}
|
|
647
660
|
}
|
|
648
|
-
]
|
|
649
|
-
"inheritedFrom": {
|
|
650
|
-
"name": "AccordionButton",
|
|
651
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
652
|
-
}
|
|
661
|
+
]
|
|
653
662
|
},
|
|
654
663
|
{
|
|
655
664
|
"kind": "method",
|
|
@@ -659,10 +668,16 @@
|
|
|
659
668
|
"type": {
|
|
660
669
|
"text": "TemplateResult | typeof nothing"
|
|
661
670
|
}
|
|
662
|
-
}
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
671
|
+
}
|
|
672
|
+
},
|
|
673
|
+
{
|
|
674
|
+
"kind": "method",
|
|
675
|
+
"name": "renderHeader",
|
|
676
|
+
"privacy": "protected",
|
|
677
|
+
"return": {
|
|
678
|
+
"type": {
|
|
679
|
+
"text": "TemplateResult"
|
|
680
|
+
}
|
|
666
681
|
}
|
|
667
682
|
},
|
|
668
683
|
{
|
|
@@ -674,11 +689,7 @@
|
|
|
674
689
|
"text": ""
|
|
675
690
|
}
|
|
676
691
|
},
|
|
677
|
-
"description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon."
|
|
678
|
-
"inheritedFrom": {
|
|
679
|
-
"name": "AccordionButton",
|
|
680
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
681
|
-
}
|
|
692
|
+
"description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon."
|
|
682
693
|
},
|
|
683
694
|
{
|
|
684
695
|
"kind": "method",
|
|
@@ -688,45 +699,32 @@
|
|
|
688
699
|
"type": {
|
|
689
700
|
"text": "TemplateResult | typeof nothing"
|
|
690
701
|
}
|
|
702
|
+
}
|
|
703
|
+
},
|
|
704
|
+
{
|
|
705
|
+
"kind": "field",
|
|
706
|
+
"name": "disabled",
|
|
707
|
+
"type": {
|
|
708
|
+
"text": "boolean | undefined"
|
|
691
709
|
},
|
|
710
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
711
|
+
"default": "undefined",
|
|
712
|
+
"attribute": "disabled",
|
|
713
|
+
"reflects": true,
|
|
692
714
|
"inheritedFrom": {
|
|
693
|
-
"name": "
|
|
694
|
-
"module": "
|
|
715
|
+
"name": "DisabledMixin",
|
|
716
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
695
717
|
}
|
|
696
718
|
}
|
|
697
719
|
],
|
|
698
720
|
"events": [
|
|
699
721
|
{
|
|
700
|
-
"description": "(React: onShown) This event is triggered when the accordion is expanded.",
|
|
722
|
+
"description": "(React: onShown) This event is triggered when the accordion button is expanded.",
|
|
701
723
|
"name": "shown",
|
|
702
|
-
"reactName": "onShown"
|
|
703
|
-
"inheritedFrom": {
|
|
704
|
-
"name": "AccordionButton",
|
|
705
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
706
|
-
}
|
|
724
|
+
"reactName": "onShown"
|
|
707
725
|
}
|
|
708
726
|
],
|
|
709
|
-
"superclass": {
|
|
710
|
-
"name": "AccordionButton",
|
|
711
|
-
"module": "/src/components/accordionbutton/accordionbutton.component"
|
|
712
|
-
},
|
|
713
|
-
"tagName": "mdc-accordion",
|
|
714
|
-
"jsDoc": "/**\n * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.\n *\n * @tagname mdc-accordion\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot leading-controls - The leading controls slot of the accordion on the header section.\n * @slot trailing-controls - The trailing controls slot of the accordion on the header section.\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.\n *\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n * @csspart body-section - The body section of the accordion.\n */",
|
|
715
|
-
"customElement": true,
|
|
716
727
|
"attributes": [
|
|
717
|
-
{
|
|
718
|
-
"name": "disabled",
|
|
719
|
-
"type": {
|
|
720
|
-
"text": "boolean | undefined"
|
|
721
|
-
},
|
|
722
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
723
|
-
"default": "undefined",
|
|
724
|
-
"fieldName": "disabled",
|
|
725
|
-
"inheritedFrom": {
|
|
726
|
-
"name": "AccordionButton",
|
|
727
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
728
|
-
}
|
|
729
|
-
},
|
|
730
728
|
{
|
|
731
729
|
"name": "size",
|
|
732
730
|
"type": {
|
|
@@ -734,11 +732,7 @@
|
|
|
734
732
|
},
|
|
735
733
|
"description": "The size of the accordion item.",
|
|
736
734
|
"default": "'small'",
|
|
737
|
-
"fieldName": "size"
|
|
738
|
-
"inheritedFrom": {
|
|
739
|
-
"name": "AccordionButton",
|
|
740
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
741
|
-
}
|
|
735
|
+
"fieldName": "size"
|
|
742
736
|
},
|
|
743
737
|
{
|
|
744
738
|
"name": "variant",
|
|
@@ -747,11 +741,7 @@
|
|
|
747
741
|
},
|
|
748
742
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
749
743
|
"default": "'default'",
|
|
750
|
-
"fieldName": "variant"
|
|
751
|
-
"inheritedFrom": {
|
|
752
|
-
"name": "AccordionButton",
|
|
753
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
754
|
-
}
|
|
744
|
+
"fieldName": "variant"
|
|
755
745
|
},
|
|
756
746
|
{
|
|
757
747
|
"name": "data-aria-level",
|
|
@@ -760,11 +750,7 @@
|
|
|
760
750
|
},
|
|
761
751
|
"description": "The aria level of the accordion component.",
|
|
762
752
|
"default": "3",
|
|
763
|
-
"fieldName": "dataAriaLevel"
|
|
764
|
-
"inheritedFrom": {
|
|
765
|
-
"name": "AccordionButton",
|
|
766
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
767
|
-
}
|
|
753
|
+
"fieldName": "dataAriaLevel"
|
|
768
754
|
},
|
|
769
755
|
{
|
|
770
756
|
"name": "expanded",
|
|
@@ -773,11 +759,7 @@
|
|
|
773
759
|
},
|
|
774
760
|
"description": "The visibility of the accordion button.",
|
|
775
761
|
"default": "false",
|
|
776
|
-
"fieldName": "expanded"
|
|
777
|
-
"inheritedFrom": {
|
|
778
|
-
"name": "AccordionButton",
|
|
779
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
780
|
-
}
|
|
762
|
+
"fieldName": "expanded"
|
|
781
763
|
},
|
|
782
764
|
{
|
|
783
765
|
"name": "header-text",
|
|
@@ -785,11 +767,7 @@
|
|
|
785
767
|
"text": "string | undefined"
|
|
786
768
|
},
|
|
787
769
|
"description": "The header text of the accordion item.",
|
|
788
|
-
"fieldName": "headerText"
|
|
789
|
-
"inheritedFrom": {
|
|
790
|
-
"name": "AccordionButton",
|
|
791
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
792
|
-
}
|
|
770
|
+
"fieldName": "headerText"
|
|
793
771
|
},
|
|
794
772
|
{
|
|
795
773
|
"name": "prefix-icon",
|
|
@@ -797,13 +775,35 @@
|
|
|
797
775
|
"text": "IconNames | undefined"
|
|
798
776
|
},
|
|
799
777
|
"description": "The leading icon that is displayed before the header text.",
|
|
800
|
-
"fieldName": "prefixIcon"
|
|
778
|
+
"fieldName": "prefixIcon"
|
|
779
|
+
},
|
|
780
|
+
{
|
|
781
|
+
"name": "disabled",
|
|
782
|
+
"type": {
|
|
783
|
+
"text": "boolean | undefined"
|
|
784
|
+
},
|
|
785
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
786
|
+
"default": "undefined",
|
|
787
|
+
"fieldName": "disabled",
|
|
801
788
|
"inheritedFrom": {
|
|
802
|
-
"name": "
|
|
803
|
-
"module": "src/
|
|
789
|
+
"name": "DisabledMixin",
|
|
790
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
804
791
|
}
|
|
805
792
|
}
|
|
806
|
-
]
|
|
793
|
+
],
|
|
794
|
+
"mixins": [
|
|
795
|
+
{
|
|
796
|
+
"name": "DisabledMixin",
|
|
797
|
+
"module": "/src/utils/mixins/DisabledMixin"
|
|
798
|
+
}
|
|
799
|
+
],
|
|
800
|
+
"superclass": {
|
|
801
|
+
"name": "Component",
|
|
802
|
+
"module": "/src/models"
|
|
803
|
+
},
|
|
804
|
+
"tagName": "mdc-accordionbutton",
|
|
805
|
+
"jsDoc": "/**\n * An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you do need any controls on your accordion heading, then it's advised to use `accordion` component.\n *\n * If an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.\n *\n * @tagname mdc-accordionbutton\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion button is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion button.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.\n *\n * @csspart header-section - The header section of the accordion button.\n * @csspart header-button-section - The header button section of the accordion button.\n * @csspart leading-header - The leading header of the accordion button.\n * @csspart trailing-header - The trailing header of the accordion button.\n * @csspart trailing-header__icon - The trailing header icon of the accordion button.\n * @csspart body-section - The body section of the accordion button.\n */",
|
|
806
|
+
"customElement": true
|
|
807
807
|
}
|
|
808
808
|
],
|
|
809
809
|
"exports": [
|
|
@@ -811,8 +811,8 @@
|
|
|
811
811
|
"kind": "js",
|
|
812
812
|
"name": "default",
|
|
813
813
|
"declaration": {
|
|
814
|
-
"name": "
|
|
815
|
-
"module": "components/
|
|
814
|
+
"name": "AccordionButton",
|
|
815
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
816
816
|
}
|
|
817
817
|
}
|
|
818
818
|
]
|
|
@@ -1502,218 +1502,6 @@
|
|
|
1502
1502
|
}
|
|
1503
1503
|
]
|
|
1504
1504
|
},
|
|
1505
|
-
{
|
|
1506
|
-
"kind": "javascript-module",
|
|
1507
|
-
"path": "components/animation/animation.component.js",
|
|
1508
|
-
"declarations": [
|
|
1509
|
-
{
|
|
1510
|
-
"kind": "class",
|
|
1511
|
-
"description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
|
|
1512
|
-
"name": "Animation",
|
|
1513
|
-
"members": [
|
|
1514
|
-
{
|
|
1515
|
-
"kind": "field",
|
|
1516
|
-
"name": "name",
|
|
1517
|
-
"type": {
|
|
1518
|
-
"text": "AnimationNames | undefined"
|
|
1519
|
-
},
|
|
1520
|
-
"description": "Name of the animation (= filename)",
|
|
1521
|
-
"attribute": "name",
|
|
1522
|
-
"reflects": true
|
|
1523
|
-
},
|
|
1524
|
-
{
|
|
1525
|
-
"kind": "field",
|
|
1526
|
-
"name": "loop",
|
|
1527
|
-
"type": {
|
|
1528
|
-
"text": "LoopType | undefined"
|
|
1529
|
-
},
|
|
1530
|
-
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
1531
|
-
"attribute": "loop",
|
|
1532
|
-
"reflects": true
|
|
1533
|
-
},
|
|
1534
|
-
{
|
|
1535
|
-
"kind": "field",
|
|
1536
|
-
"name": "autoplay",
|
|
1537
|
-
"type": {
|
|
1538
|
-
"text": "boolean | undefined"
|
|
1539
|
-
},
|
|
1540
|
-
"description": "Weather start the animation automatically",
|
|
1541
|
-
"attribute": "autoplay",
|
|
1542
|
-
"reflects": true
|
|
1543
|
-
},
|
|
1544
|
-
{
|
|
1545
|
-
"kind": "field",
|
|
1546
|
-
"name": "ariaLabel",
|
|
1547
|
-
"type": {
|
|
1548
|
-
"text": "string | null"
|
|
1549
|
-
},
|
|
1550
|
-
"default": "null",
|
|
1551
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
1552
|
-
"attribute": "aria-label"
|
|
1553
|
-
},
|
|
1554
|
-
{
|
|
1555
|
-
"kind": "field",
|
|
1556
|
-
"name": "ariaLabelledBy",
|
|
1557
|
-
"type": {
|
|
1558
|
-
"text": "string | null"
|
|
1559
|
-
},
|
|
1560
|
-
"default": "null",
|
|
1561
|
-
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
1562
|
-
"attribute": "aria-labelledby"
|
|
1563
|
-
},
|
|
1564
|
-
{
|
|
1565
|
-
"kind": "field",
|
|
1566
|
-
"name": "lottieInstance",
|
|
1567
|
-
"type": {
|
|
1568
|
-
"text": "AnimationItem | undefined"
|
|
1569
|
-
},
|
|
1570
|
-
"privacy": "private",
|
|
1571
|
-
"description": "Lottie animation instance"
|
|
1572
|
-
},
|
|
1573
|
-
{
|
|
1574
|
-
"kind": "field",
|
|
1575
|
-
"name": "containerRef",
|
|
1576
|
-
"type": {
|
|
1577
|
-
"text": "Ref<HTMLDivElement>"
|
|
1578
|
-
},
|
|
1579
|
-
"privacy": "private",
|
|
1580
|
-
"description": "Container for the animation"
|
|
1581
|
-
},
|
|
1582
|
-
{
|
|
1583
|
-
"kind": "field",
|
|
1584
|
-
"name": "animation",
|
|
1585
|
-
"description": "Exposed API of the animation library (lottie)",
|
|
1586
|
-
"readonly": true
|
|
1587
|
-
},
|
|
1588
|
-
{
|
|
1589
|
-
"kind": "method",
|
|
1590
|
-
"name": "getLoopValue",
|
|
1591
|
-
"privacy": "private"
|
|
1592
|
-
},
|
|
1593
|
-
{
|
|
1594
|
-
"kind": "method",
|
|
1595
|
-
"name": "onLoadSuccessHandler",
|
|
1596
|
-
"privacy": "private",
|
|
1597
|
-
"parameters": [
|
|
1598
|
-
{
|
|
1599
|
-
"name": "animationData",
|
|
1600
|
-
"type": {
|
|
1601
|
-
"text": "any"
|
|
1602
|
-
}
|
|
1603
|
-
}
|
|
1604
|
-
],
|
|
1605
|
-
"description": "Create new lotty instance for the loaded data"
|
|
1606
|
-
},
|
|
1607
|
-
{
|
|
1608
|
-
"kind": "method",
|
|
1609
|
-
"name": "onLoadFailHandler",
|
|
1610
|
-
"privacy": "private",
|
|
1611
|
-
"parameters": [
|
|
1612
|
-
{
|
|
1613
|
-
"name": "error",
|
|
1614
|
-
"type": {
|
|
1615
|
-
"text": "Error"
|
|
1616
|
-
}
|
|
1617
|
-
}
|
|
1618
|
-
],
|
|
1619
|
-
"description": "Error handler for animation loading"
|
|
1620
|
-
},
|
|
1621
|
-
{
|
|
1622
|
-
"kind": "method",
|
|
1623
|
-
"name": "getAnimationData",
|
|
1624
|
-
"privacy": "private",
|
|
1625
|
-
"description": "Import animation data dynamically"
|
|
1626
|
-
},
|
|
1627
|
-
{
|
|
1628
|
-
"kind": "field",
|
|
1629
|
-
"name": "onCompleteHandler",
|
|
1630
|
-
"description": "Re-dispatch the complete event from the animation library\n\nThis handler called with the animation instance instead of the component instance\nso we need to bind it to the component instance. The arrow function just does that."
|
|
1631
|
-
}
|
|
1632
|
-
],
|
|
1633
|
-
"events": [
|
|
1634
|
-
{
|
|
1635
|
-
"name": "load",
|
|
1636
|
-
"type": {
|
|
1637
|
-
"text": "CustomEvent"
|
|
1638
|
-
},
|
|
1639
|
-
"description": "(React: onLoad) This event is dispatched when the animation is loaded",
|
|
1640
|
-
"reactName": "onLoad"
|
|
1641
|
-
},
|
|
1642
|
-
{
|
|
1643
|
-
"description": "(React: onComplete) This event is dispatched when all animation loops completed",
|
|
1644
|
-
"name": "complete",
|
|
1645
|
-
"reactName": "onComplete"
|
|
1646
|
-
},
|
|
1647
|
-
{
|
|
1648
|
-
"description": "(React: onError) This event is dispatched when animation loading failed",
|
|
1649
|
-
"name": "error",
|
|
1650
|
-
"reactName": "onError"
|
|
1651
|
-
}
|
|
1652
|
-
],
|
|
1653
|
-
"attributes": [
|
|
1654
|
-
{
|
|
1655
|
-
"name": "name",
|
|
1656
|
-
"type": {
|
|
1657
|
-
"text": "AnimationNames | undefined"
|
|
1658
|
-
},
|
|
1659
|
-
"description": "Name of the animation (= filename)",
|
|
1660
|
-
"fieldName": "name"
|
|
1661
|
-
},
|
|
1662
|
-
{
|
|
1663
|
-
"name": "loop",
|
|
1664
|
-
"type": {
|
|
1665
|
-
"text": "LoopType | undefined"
|
|
1666
|
-
},
|
|
1667
|
-
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
1668
|
-
"fieldName": "loop"
|
|
1669
|
-
},
|
|
1670
|
-
{
|
|
1671
|
-
"name": "autoplay",
|
|
1672
|
-
"type": {
|
|
1673
|
-
"text": "boolean | undefined"
|
|
1674
|
-
},
|
|
1675
|
-
"description": "Weather start the animation automatically",
|
|
1676
|
-
"fieldName": "autoplay"
|
|
1677
|
-
},
|
|
1678
|
-
{
|
|
1679
|
-
"name": "aria-label",
|
|
1680
|
-
"type": {
|
|
1681
|
-
"text": "string | null"
|
|
1682
|
-
},
|
|
1683
|
-
"default": "null",
|
|
1684
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
1685
|
-
"fieldName": "ariaLabel"
|
|
1686
|
-
},
|
|
1687
|
-
{
|
|
1688
|
-
"name": "aria-labelledby",
|
|
1689
|
-
"type": {
|
|
1690
|
-
"text": "string | null"
|
|
1691
|
-
},
|
|
1692
|
-
"default": "null",
|
|
1693
|
-
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
1694
|
-
"fieldName": "ariaLabelledBy"
|
|
1695
|
-
}
|
|
1696
|
-
],
|
|
1697
|
-
"superclass": {
|
|
1698
|
-
"name": "Component",
|
|
1699
|
-
"module": "/src/models"
|
|
1700
|
-
},
|
|
1701
|
-
"tagName": "mdc-animation",
|
|
1702
|
-
"jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
|
|
1703
|
-
"customElement": true
|
|
1704
|
-
}
|
|
1705
|
-
],
|
|
1706
|
-
"exports": [
|
|
1707
|
-
{
|
|
1708
|
-
"kind": "js",
|
|
1709
|
-
"name": "default",
|
|
1710
|
-
"declaration": {
|
|
1711
|
-
"name": "Animation",
|
|
1712
|
-
"module": "components/animation/animation.component.js"
|
|
1713
|
-
}
|
|
1714
|
-
}
|
|
1715
|
-
]
|
|
1716
|
-
},
|
|
1717
1505
|
{
|
|
1718
1506
|
"kind": "javascript-module",
|
|
1719
1507
|
"path": "components/appheader/appheader.component.js",
|
|
@@ -2041,6 +1829,218 @@
|
|
|
2041
1829
|
}
|
|
2042
1830
|
]
|
|
2043
1831
|
},
|
|
1832
|
+
{
|
|
1833
|
+
"kind": "javascript-module",
|
|
1834
|
+
"path": "components/animation/animation.component.js",
|
|
1835
|
+
"declarations": [
|
|
1836
|
+
{
|
|
1837
|
+
"kind": "class",
|
|
1838
|
+
"description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
|
|
1839
|
+
"name": "Animation",
|
|
1840
|
+
"members": [
|
|
1841
|
+
{
|
|
1842
|
+
"kind": "field",
|
|
1843
|
+
"name": "name",
|
|
1844
|
+
"type": {
|
|
1845
|
+
"text": "AnimationNames | undefined"
|
|
1846
|
+
},
|
|
1847
|
+
"description": "Name of the animation (= filename)",
|
|
1848
|
+
"attribute": "name",
|
|
1849
|
+
"reflects": true
|
|
1850
|
+
},
|
|
1851
|
+
{
|
|
1852
|
+
"kind": "field",
|
|
1853
|
+
"name": "loop",
|
|
1854
|
+
"type": {
|
|
1855
|
+
"text": "LoopType | undefined"
|
|
1856
|
+
},
|
|
1857
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
1858
|
+
"attribute": "loop",
|
|
1859
|
+
"reflects": true
|
|
1860
|
+
},
|
|
1861
|
+
{
|
|
1862
|
+
"kind": "field",
|
|
1863
|
+
"name": "autoplay",
|
|
1864
|
+
"type": {
|
|
1865
|
+
"text": "boolean | undefined"
|
|
1866
|
+
},
|
|
1867
|
+
"description": "Weather start the animation automatically",
|
|
1868
|
+
"attribute": "autoplay",
|
|
1869
|
+
"reflects": true
|
|
1870
|
+
},
|
|
1871
|
+
{
|
|
1872
|
+
"kind": "field",
|
|
1873
|
+
"name": "ariaLabel",
|
|
1874
|
+
"type": {
|
|
1875
|
+
"text": "string | null"
|
|
1876
|
+
},
|
|
1877
|
+
"default": "null",
|
|
1878
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
1879
|
+
"attribute": "aria-label"
|
|
1880
|
+
},
|
|
1881
|
+
{
|
|
1882
|
+
"kind": "field",
|
|
1883
|
+
"name": "ariaLabelledBy",
|
|
1884
|
+
"type": {
|
|
1885
|
+
"text": "string | null"
|
|
1886
|
+
},
|
|
1887
|
+
"default": "null",
|
|
1888
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
1889
|
+
"attribute": "aria-labelledby"
|
|
1890
|
+
},
|
|
1891
|
+
{
|
|
1892
|
+
"kind": "field",
|
|
1893
|
+
"name": "lottieInstance",
|
|
1894
|
+
"type": {
|
|
1895
|
+
"text": "AnimationItem | undefined"
|
|
1896
|
+
},
|
|
1897
|
+
"privacy": "private",
|
|
1898
|
+
"description": "Lottie animation instance"
|
|
1899
|
+
},
|
|
1900
|
+
{
|
|
1901
|
+
"kind": "field",
|
|
1902
|
+
"name": "containerRef",
|
|
1903
|
+
"type": {
|
|
1904
|
+
"text": "Ref<HTMLDivElement>"
|
|
1905
|
+
},
|
|
1906
|
+
"privacy": "private",
|
|
1907
|
+
"description": "Container for the animation"
|
|
1908
|
+
},
|
|
1909
|
+
{
|
|
1910
|
+
"kind": "field",
|
|
1911
|
+
"name": "animation",
|
|
1912
|
+
"description": "Exposed API of the animation library (lottie)",
|
|
1913
|
+
"readonly": true
|
|
1914
|
+
},
|
|
1915
|
+
{
|
|
1916
|
+
"kind": "method",
|
|
1917
|
+
"name": "getLoopValue",
|
|
1918
|
+
"privacy": "private"
|
|
1919
|
+
},
|
|
1920
|
+
{
|
|
1921
|
+
"kind": "method",
|
|
1922
|
+
"name": "onLoadSuccessHandler",
|
|
1923
|
+
"privacy": "private",
|
|
1924
|
+
"parameters": [
|
|
1925
|
+
{
|
|
1926
|
+
"name": "animationData",
|
|
1927
|
+
"type": {
|
|
1928
|
+
"text": "any"
|
|
1929
|
+
}
|
|
1930
|
+
}
|
|
1931
|
+
],
|
|
1932
|
+
"description": "Create new lotty instance for the loaded data"
|
|
1933
|
+
},
|
|
1934
|
+
{
|
|
1935
|
+
"kind": "method",
|
|
1936
|
+
"name": "onLoadFailHandler",
|
|
1937
|
+
"privacy": "private",
|
|
1938
|
+
"parameters": [
|
|
1939
|
+
{
|
|
1940
|
+
"name": "error",
|
|
1941
|
+
"type": {
|
|
1942
|
+
"text": "Error"
|
|
1943
|
+
}
|
|
1944
|
+
}
|
|
1945
|
+
],
|
|
1946
|
+
"description": "Error handler for animation loading"
|
|
1947
|
+
},
|
|
1948
|
+
{
|
|
1949
|
+
"kind": "method",
|
|
1950
|
+
"name": "getAnimationData",
|
|
1951
|
+
"privacy": "private",
|
|
1952
|
+
"description": "Import animation data dynamically"
|
|
1953
|
+
},
|
|
1954
|
+
{
|
|
1955
|
+
"kind": "field",
|
|
1956
|
+
"name": "onCompleteHandler",
|
|
1957
|
+
"description": "Re-dispatch the complete event from the animation library\n\nThis handler called with the animation instance instead of the component instance\nso we need to bind it to the component instance. The arrow function just does that."
|
|
1958
|
+
}
|
|
1959
|
+
],
|
|
1960
|
+
"events": [
|
|
1961
|
+
{
|
|
1962
|
+
"name": "load",
|
|
1963
|
+
"type": {
|
|
1964
|
+
"text": "CustomEvent"
|
|
1965
|
+
},
|
|
1966
|
+
"description": "(React: onLoad) This event is dispatched when the animation is loaded",
|
|
1967
|
+
"reactName": "onLoad"
|
|
1968
|
+
},
|
|
1969
|
+
{
|
|
1970
|
+
"description": "(React: onComplete) This event is dispatched when all animation loops completed",
|
|
1971
|
+
"name": "complete",
|
|
1972
|
+
"reactName": "onComplete"
|
|
1973
|
+
},
|
|
1974
|
+
{
|
|
1975
|
+
"description": "(React: onError) This event is dispatched when animation loading failed",
|
|
1976
|
+
"name": "error",
|
|
1977
|
+
"reactName": "onError"
|
|
1978
|
+
}
|
|
1979
|
+
],
|
|
1980
|
+
"attributes": [
|
|
1981
|
+
{
|
|
1982
|
+
"name": "name",
|
|
1983
|
+
"type": {
|
|
1984
|
+
"text": "AnimationNames | undefined"
|
|
1985
|
+
},
|
|
1986
|
+
"description": "Name of the animation (= filename)",
|
|
1987
|
+
"fieldName": "name"
|
|
1988
|
+
},
|
|
1989
|
+
{
|
|
1990
|
+
"name": "loop",
|
|
1991
|
+
"type": {
|
|
1992
|
+
"text": "LoopType | undefined"
|
|
1993
|
+
},
|
|
1994
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
1995
|
+
"fieldName": "loop"
|
|
1996
|
+
},
|
|
1997
|
+
{
|
|
1998
|
+
"name": "autoplay",
|
|
1999
|
+
"type": {
|
|
2000
|
+
"text": "boolean | undefined"
|
|
2001
|
+
},
|
|
2002
|
+
"description": "Weather start the animation automatically",
|
|
2003
|
+
"fieldName": "autoplay"
|
|
2004
|
+
},
|
|
2005
|
+
{
|
|
2006
|
+
"name": "aria-label",
|
|
2007
|
+
"type": {
|
|
2008
|
+
"text": "string | null"
|
|
2009
|
+
},
|
|
2010
|
+
"default": "null",
|
|
2011
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
2012
|
+
"fieldName": "ariaLabel"
|
|
2013
|
+
},
|
|
2014
|
+
{
|
|
2015
|
+
"name": "aria-labelledby",
|
|
2016
|
+
"type": {
|
|
2017
|
+
"text": "string | null"
|
|
2018
|
+
},
|
|
2019
|
+
"default": "null",
|
|
2020
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
2021
|
+
"fieldName": "ariaLabelledBy"
|
|
2022
|
+
}
|
|
2023
|
+
],
|
|
2024
|
+
"superclass": {
|
|
2025
|
+
"name": "Component",
|
|
2026
|
+
"module": "/src/models"
|
|
2027
|
+
},
|
|
2028
|
+
"tagName": "mdc-animation",
|
|
2029
|
+
"jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
|
|
2030
|
+
"customElement": true
|
|
2031
|
+
}
|
|
2032
|
+
],
|
|
2033
|
+
"exports": [
|
|
2034
|
+
{
|
|
2035
|
+
"kind": "js",
|
|
2036
|
+
"name": "default",
|
|
2037
|
+
"declaration": {
|
|
2038
|
+
"name": "Animation",
|
|
2039
|
+
"module": "components/animation/animation.component.js"
|
|
2040
|
+
}
|
|
2041
|
+
}
|
|
2042
|
+
]
|
|
2043
|
+
},
|
|
2044
2044
|
{
|
|
2045
2045
|
"kind": "javascript-module",
|
|
2046
2046
|
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
@@ -30893,6 +30893,185 @@
|
|
|
30893
30893
|
}
|
|
30894
30894
|
]
|
|
30895
30895
|
},
|
|
30896
|
+
{
|
|
30897
|
+
"kind": "javascript-module",
|
|
30898
|
+
"path": "components/screenreaderannouncer/screenreaderannouncer.component.js",
|
|
30899
|
+
"declarations": [
|
|
30900
|
+
{
|
|
30901
|
+
"kind": "class",
|
|
30902
|
+
"description": "`mdc-screenreaderannouncer` can be used to announce messages with the screen reader.\n\nTo make an announcement set `announcement` attribute on the `mdc-screenreaderannouncer` element.\n\n**Internal logic**\n\nWhen the screenreader announcer is connected to the DOM, if the `identity` attribute is not\nprovided, it is set to `mdc-screenreaderannouncer-identity` and a `<div>` element with this id is created\nin the DOM. If the `identity` attribute is provided, the identity element is used and no new element\nis created in the DOM.\n\nWhen the `announcement` attribute is set, the screenreader announcer will create a `<div>` element with\n`aria-live` attribute set to the value of `data-aria-live` attribute and append it to the `identity` element.\nAfter delay of `delay` milliseconds, a <p> element with the announcement text is appended to the `<div>` element.\n\nThe announcement `<div>` element is removed from the DOM after `timeout` milliseconds.\n\nWhen the screen announcer component is disconnected from the DOM, all the timeouts are cleared and\nall the announcement elements added are removed from the DOM and timeouts cleared.\n\n**Note**\n1. The default delay of 150 miliseconds is used as we dynamically generate the\naria-live region in the DOM and add the announcement text to it.\n3. If no `identity` is provided, all the screen reader components will create and use only one\n`<div>` element with id `mdc-screenreaderannouncer-identity` in the DOM.\n\nReference: https://patrickhlauke.github.io/aria/tests/live-regions/",
|
|
30903
|
+
"name": "ScreenreaderAnnouncer",
|
|
30904
|
+
"members": [
|
|
30905
|
+
{
|
|
30906
|
+
"kind": "field",
|
|
30907
|
+
"name": "announcement",
|
|
30908
|
+
"type": {
|
|
30909
|
+
"text": "string"
|
|
30910
|
+
},
|
|
30911
|
+
"default": "''",
|
|
30912
|
+
"description": "The announcement attribute is a string that is used to announce messages to the screen reader.\nThe announcement is made when the announcement attribute is set to a non-empty string.",
|
|
30913
|
+
"attribute": "announcement",
|
|
30914
|
+
"reflects": true
|
|
30915
|
+
},
|
|
30916
|
+
{
|
|
30917
|
+
"kind": "field",
|
|
30918
|
+
"name": "identity",
|
|
30919
|
+
"type": {
|
|
30920
|
+
"text": "string"
|
|
30921
|
+
},
|
|
30922
|
+
"default": "''",
|
|
30923
|
+
"description": "The id of the element in the light dom, to which announcement elements will be appended.\n\nIf id is not provided, it will be set to `mdc-screenreaderannouncer-identity` and\na div element with this id will be created in the light dom.",
|
|
30924
|
+
"attribute": "identity",
|
|
30925
|
+
"reflects": true
|
|
30926
|
+
},
|
|
30927
|
+
{
|
|
30928
|
+
"kind": "field",
|
|
30929
|
+
"name": "dataAriaLive",
|
|
30930
|
+
"type": {
|
|
30931
|
+
"text": "AriaLive"
|
|
30932
|
+
},
|
|
30933
|
+
"description": "Aria live value for announcement.",
|
|
30934
|
+
"default": "'polite'",
|
|
30935
|
+
"attribute": "data-aria-live",
|
|
30936
|
+
"reflects": true
|
|
30937
|
+
},
|
|
30938
|
+
{
|
|
30939
|
+
"kind": "field",
|
|
30940
|
+
"name": "delay",
|
|
30941
|
+
"type": {
|
|
30942
|
+
"text": "number"
|
|
30943
|
+
},
|
|
30944
|
+
"description": "Milliseconds to wait before adding the announcement to the identiy region in\nDOM, which will announce the message to the screen reader.",
|
|
30945
|
+
"default": "150",
|
|
30946
|
+
"attribute": "delay",
|
|
30947
|
+
"reflects": true
|
|
30948
|
+
},
|
|
30949
|
+
{
|
|
30950
|
+
"kind": "field",
|
|
30951
|
+
"name": "timeout",
|
|
30952
|
+
"type": {
|
|
30953
|
+
"text": "number"
|
|
30954
|
+
},
|
|
30955
|
+
"description": "Milliseconds to wait after which the announcement element will be removed from\nidentity region in DOM, causing the screen reader to not announcing the message.",
|
|
30956
|
+
"default": "20_000",
|
|
30957
|
+
"attribute": "timeout",
|
|
30958
|
+
"reflects": true
|
|
30959
|
+
},
|
|
30960
|
+
{
|
|
30961
|
+
"kind": "method",
|
|
30962
|
+
"name": "announce",
|
|
30963
|
+
"parameters": [
|
|
30964
|
+
{
|
|
30965
|
+
"name": "announcement",
|
|
30966
|
+
"type": {
|
|
30967
|
+
"text": "string"
|
|
30968
|
+
},
|
|
30969
|
+
"description": "The announcement to be made."
|
|
30970
|
+
},
|
|
30971
|
+
{
|
|
30972
|
+
"name": "delay",
|
|
30973
|
+
"type": {
|
|
30974
|
+
"text": "number"
|
|
30975
|
+
},
|
|
30976
|
+
"description": "The delay in milliseconds before announcing the message."
|
|
30977
|
+
},
|
|
30978
|
+
{
|
|
30979
|
+
"name": "timeout",
|
|
30980
|
+
"type": {
|
|
30981
|
+
"text": "number"
|
|
30982
|
+
},
|
|
30983
|
+
"description": "The timeout in milliseconds before removing the announcement."
|
|
30984
|
+
},
|
|
30985
|
+
{
|
|
30986
|
+
"name": "ariaLive",
|
|
30987
|
+
"type": {
|
|
30988
|
+
"text": "AriaLive"
|
|
30989
|
+
},
|
|
30990
|
+
"description": "The aria live value for the announcement."
|
|
30991
|
+
}
|
|
30992
|
+
],
|
|
30993
|
+
"description": "Announces the given announcement to the screen reader.\n\nA div element with aria-live attribute set to the given ariaLive value is created\nand a p element with the announcement text is appended to it.\n\nThe div element is appended to the element in the DOM identified with id as\nidentity attribute."
|
|
30994
|
+
},
|
|
30995
|
+
{
|
|
30996
|
+
"kind": "method",
|
|
30997
|
+
"name": "clearTimeOutsAndAnnouncements",
|
|
30998
|
+
"privacy": "private",
|
|
30999
|
+
"description": "Clears all timeouts and removes all announcements from the screen reader."
|
|
31000
|
+
},
|
|
31001
|
+
{
|
|
31002
|
+
"kind": "method",
|
|
31003
|
+
"name": "createAnnouncementAriaLiveRegion",
|
|
31004
|
+
"privacy": "private",
|
|
31005
|
+
"description": "Creates a div element with id as identity attribute in the DOM.\n\nIf the identity attribute is not provided, it is set internally to\n`mdc-screenreaderannouncer-identity`."
|
|
31006
|
+
}
|
|
31007
|
+
],
|
|
31008
|
+
"attributes": [
|
|
31009
|
+
{
|
|
31010
|
+
"name": "announcement",
|
|
31011
|
+
"type": {
|
|
31012
|
+
"text": "string"
|
|
31013
|
+
},
|
|
31014
|
+
"default": "''",
|
|
31015
|
+
"description": "The announcement attribute is a string that is used to announce messages to the screen reader.\nThe announcement is made when the announcement attribute is set to a non-empty string.",
|
|
31016
|
+
"fieldName": "announcement"
|
|
31017
|
+
},
|
|
31018
|
+
{
|
|
31019
|
+
"name": "identity",
|
|
31020
|
+
"type": {
|
|
31021
|
+
"text": "string"
|
|
31022
|
+
},
|
|
31023
|
+
"default": "''",
|
|
31024
|
+
"description": "The id of the element in the light dom, to which announcement elements will be appended.\n\nIf id is not provided, it will be set to `mdc-screenreaderannouncer-identity` and\na div element with this id will be created in the light dom.",
|
|
31025
|
+
"fieldName": "identity"
|
|
31026
|
+
},
|
|
31027
|
+
{
|
|
31028
|
+
"name": "data-aria-live",
|
|
31029
|
+
"type": {
|
|
31030
|
+
"text": "AriaLive"
|
|
31031
|
+
},
|
|
31032
|
+
"description": "Aria live value for announcement.",
|
|
31033
|
+
"default": "'polite'",
|
|
31034
|
+
"fieldName": "dataAriaLive"
|
|
31035
|
+
},
|
|
31036
|
+
{
|
|
31037
|
+
"name": "delay",
|
|
31038
|
+
"type": {
|
|
31039
|
+
"text": "number"
|
|
31040
|
+
},
|
|
31041
|
+
"description": "Milliseconds to wait before adding the announcement to the identiy region in\nDOM, which will announce the message to the screen reader.",
|
|
31042
|
+
"default": "150",
|
|
31043
|
+
"fieldName": "delay"
|
|
31044
|
+
},
|
|
31045
|
+
{
|
|
31046
|
+
"name": "timeout",
|
|
31047
|
+
"type": {
|
|
31048
|
+
"text": "number"
|
|
31049
|
+
},
|
|
31050
|
+
"description": "Milliseconds to wait after which the announcement element will be removed from\nidentity region in DOM, causing the screen reader to not announcing the message.",
|
|
31051
|
+
"default": "20_000",
|
|
31052
|
+
"fieldName": "timeout"
|
|
31053
|
+
}
|
|
31054
|
+
],
|
|
31055
|
+
"superclass": {
|
|
31056
|
+
"name": "Component",
|
|
31057
|
+
"module": "/src/models"
|
|
31058
|
+
},
|
|
31059
|
+
"tagName": "mdc-screenreaderannouncer",
|
|
31060
|
+
"jsDoc": "/**\n * `mdc-screenreaderannouncer` can be used to announce messages with the screen reader.\n *\n * To make an announcement set `announcement` attribute on the `mdc-screenreaderannouncer` element.\n *\n * **Internal logic**\n *\n * When the screenreader announcer is connected to the DOM, if the `identity` attribute is not\n * provided, it is set to `mdc-screenreaderannouncer-identity` and a `<div>` element with this id is created\n * in the DOM. If the `identity` attribute is provided, the identity element is used and no new element\n * is created in the DOM.\n *\n * When the `announcement` attribute is set, the screenreader announcer will create a `<div>` element with\n * `aria-live` attribute set to the value of `data-aria-live` attribute and append it to the `identity` element.\n * After delay of `delay` milliseconds, a <p> element with the announcement text is appended to the `<div>` element.\n *\n * The announcement `<div>` element is removed from the DOM after `timeout` milliseconds.\n *\n * When the screen announcer component is disconnected from the DOM, all the timeouts are cleared and\n * all the announcement elements added are removed from the DOM and timeouts cleared.\n *\n * **Note**\n * 1. The default delay of 150 miliseconds is used as we dynamically generate the\n * aria-live region in the DOM and add the announcement text to it.\n * 3. If no `identity` is provided, all the screen reader components will create and use only one\n * `<div>` element with id `mdc-screenreaderannouncer-identity` in the DOM.\n *\n * Reference: https://patrickhlauke.github.io/aria/tests/live-regions/\n *\n * @tagname mdc-screenreaderannouncer\n */",
|
|
31061
|
+
"customElement": true
|
|
31062
|
+
}
|
|
31063
|
+
],
|
|
31064
|
+
"exports": [
|
|
31065
|
+
{
|
|
31066
|
+
"kind": "js",
|
|
31067
|
+
"name": "default",
|
|
31068
|
+
"declaration": {
|
|
31069
|
+
"name": "ScreenreaderAnnouncer",
|
|
31070
|
+
"module": "components/screenreaderannouncer/screenreaderannouncer.component.js"
|
|
31071
|
+
}
|
|
31072
|
+
}
|
|
31073
|
+
]
|
|
31074
|
+
},
|
|
30896
31075
|
{
|
|
30897
31076
|
"kind": "javascript-module",
|
|
30898
31077
|
"path": "components/searchfield/searchfield.component.js",
|
|
@@ -32134,185 +32313,6 @@
|
|
|
32134
32313
|
}
|
|
32135
32314
|
]
|
|
32136
32315
|
},
|
|
32137
|
-
{
|
|
32138
|
-
"kind": "javascript-module",
|
|
32139
|
-
"path": "components/screenreaderannouncer/screenreaderannouncer.component.js",
|
|
32140
|
-
"declarations": [
|
|
32141
|
-
{
|
|
32142
|
-
"kind": "class",
|
|
32143
|
-
"description": "`mdc-screenreaderannouncer` can be used to announce messages with the screen reader.\n\nTo make an announcement set `announcement` attribute on the `mdc-screenreaderannouncer` element.\n\n**Internal logic**\n\nWhen the screenreader announcer is connected to the DOM, if the `identity` attribute is not\nprovided, it is set to `mdc-screenreaderannouncer-identity` and a `<div>` element with this id is created\nin the DOM. If the `identity` attribute is provided, the identity element is used and no new element\nis created in the DOM.\n\nWhen the `announcement` attribute is set, the screenreader announcer will create a `<div>` element with\n`aria-live` attribute set to the value of `data-aria-live` attribute and append it to the `identity` element.\nAfter delay of `delay` milliseconds, a <p> element with the announcement text is appended to the `<div>` element.\n\nThe announcement `<div>` element is removed from the DOM after `timeout` milliseconds.\n\nWhen the screen announcer component is disconnected from the DOM, all the timeouts are cleared and\nall the announcement elements added are removed from the DOM and timeouts cleared.\n\n**Note**\n1. The default delay of 150 miliseconds is used as we dynamically generate the\naria-live region in the DOM and add the announcement text to it.\n3. If no `identity` is provided, all the screen reader components will create and use only one\n`<div>` element with id `mdc-screenreaderannouncer-identity` in the DOM.\n\nReference: https://patrickhlauke.github.io/aria/tests/live-regions/",
|
|
32144
|
-
"name": "ScreenreaderAnnouncer",
|
|
32145
|
-
"members": [
|
|
32146
|
-
{
|
|
32147
|
-
"kind": "field",
|
|
32148
|
-
"name": "announcement",
|
|
32149
|
-
"type": {
|
|
32150
|
-
"text": "string"
|
|
32151
|
-
},
|
|
32152
|
-
"default": "''",
|
|
32153
|
-
"description": "The announcement attribute is a string that is used to announce messages to the screen reader.\nThe announcement is made when the announcement attribute is set to a non-empty string.",
|
|
32154
|
-
"attribute": "announcement",
|
|
32155
|
-
"reflects": true
|
|
32156
|
-
},
|
|
32157
|
-
{
|
|
32158
|
-
"kind": "field",
|
|
32159
|
-
"name": "identity",
|
|
32160
|
-
"type": {
|
|
32161
|
-
"text": "string"
|
|
32162
|
-
},
|
|
32163
|
-
"default": "''",
|
|
32164
|
-
"description": "The id of the element in the light dom, to which announcement elements will be appended.\n\nIf id is not provided, it will be set to `mdc-screenreaderannouncer-identity` and\na div element with this id will be created in the light dom.",
|
|
32165
|
-
"attribute": "identity",
|
|
32166
|
-
"reflects": true
|
|
32167
|
-
},
|
|
32168
|
-
{
|
|
32169
|
-
"kind": "field",
|
|
32170
|
-
"name": "dataAriaLive",
|
|
32171
|
-
"type": {
|
|
32172
|
-
"text": "AriaLive"
|
|
32173
|
-
},
|
|
32174
|
-
"description": "Aria live value for announcement.",
|
|
32175
|
-
"default": "'polite'",
|
|
32176
|
-
"attribute": "data-aria-live",
|
|
32177
|
-
"reflects": true
|
|
32178
|
-
},
|
|
32179
|
-
{
|
|
32180
|
-
"kind": "field",
|
|
32181
|
-
"name": "delay",
|
|
32182
|
-
"type": {
|
|
32183
|
-
"text": "number"
|
|
32184
|
-
},
|
|
32185
|
-
"description": "Milliseconds to wait before adding the announcement to the identiy region in\nDOM, which will announce the message to the screen reader.",
|
|
32186
|
-
"default": "150",
|
|
32187
|
-
"attribute": "delay",
|
|
32188
|
-
"reflects": true
|
|
32189
|
-
},
|
|
32190
|
-
{
|
|
32191
|
-
"kind": "field",
|
|
32192
|
-
"name": "timeout",
|
|
32193
|
-
"type": {
|
|
32194
|
-
"text": "number"
|
|
32195
|
-
},
|
|
32196
|
-
"description": "Milliseconds to wait after which the announcement element will be removed from\nidentity region in DOM, causing the screen reader to not announcing the message.",
|
|
32197
|
-
"default": "20_000",
|
|
32198
|
-
"attribute": "timeout",
|
|
32199
|
-
"reflects": true
|
|
32200
|
-
},
|
|
32201
|
-
{
|
|
32202
|
-
"kind": "method",
|
|
32203
|
-
"name": "announce",
|
|
32204
|
-
"parameters": [
|
|
32205
|
-
{
|
|
32206
|
-
"name": "announcement",
|
|
32207
|
-
"type": {
|
|
32208
|
-
"text": "string"
|
|
32209
|
-
},
|
|
32210
|
-
"description": "The announcement to be made."
|
|
32211
|
-
},
|
|
32212
|
-
{
|
|
32213
|
-
"name": "delay",
|
|
32214
|
-
"type": {
|
|
32215
|
-
"text": "number"
|
|
32216
|
-
},
|
|
32217
|
-
"description": "The delay in milliseconds before announcing the message."
|
|
32218
|
-
},
|
|
32219
|
-
{
|
|
32220
|
-
"name": "timeout",
|
|
32221
|
-
"type": {
|
|
32222
|
-
"text": "number"
|
|
32223
|
-
},
|
|
32224
|
-
"description": "The timeout in milliseconds before removing the announcement."
|
|
32225
|
-
},
|
|
32226
|
-
{
|
|
32227
|
-
"name": "ariaLive",
|
|
32228
|
-
"type": {
|
|
32229
|
-
"text": "AriaLive"
|
|
32230
|
-
},
|
|
32231
|
-
"description": "The aria live value for the announcement."
|
|
32232
|
-
}
|
|
32233
|
-
],
|
|
32234
|
-
"description": "Announces the given announcement to the screen reader.\n\nA div element with aria-live attribute set to the given ariaLive value is created\nand a p element with the announcement text is appended to it.\n\nThe div element is appended to the element in the DOM identified with id as\nidentity attribute."
|
|
32235
|
-
},
|
|
32236
|
-
{
|
|
32237
|
-
"kind": "method",
|
|
32238
|
-
"name": "clearTimeOutsAndAnnouncements",
|
|
32239
|
-
"privacy": "private",
|
|
32240
|
-
"description": "Clears all timeouts and removes all announcements from the screen reader."
|
|
32241
|
-
},
|
|
32242
|
-
{
|
|
32243
|
-
"kind": "method",
|
|
32244
|
-
"name": "createAnnouncementAriaLiveRegion",
|
|
32245
|
-
"privacy": "private",
|
|
32246
|
-
"description": "Creates a div element with id as identity attribute in the DOM.\n\nIf the identity attribute is not provided, it is set internally to\n`mdc-screenreaderannouncer-identity`."
|
|
32247
|
-
}
|
|
32248
|
-
],
|
|
32249
|
-
"attributes": [
|
|
32250
|
-
{
|
|
32251
|
-
"name": "announcement",
|
|
32252
|
-
"type": {
|
|
32253
|
-
"text": "string"
|
|
32254
|
-
},
|
|
32255
|
-
"default": "''",
|
|
32256
|
-
"description": "The announcement attribute is a string that is used to announce messages to the screen reader.\nThe announcement is made when the announcement attribute is set to a non-empty string.",
|
|
32257
|
-
"fieldName": "announcement"
|
|
32258
|
-
},
|
|
32259
|
-
{
|
|
32260
|
-
"name": "identity",
|
|
32261
|
-
"type": {
|
|
32262
|
-
"text": "string"
|
|
32263
|
-
},
|
|
32264
|
-
"default": "''",
|
|
32265
|
-
"description": "The id of the element in the light dom, to which announcement elements will be appended.\n\nIf id is not provided, it will be set to `mdc-screenreaderannouncer-identity` and\na div element with this id will be created in the light dom.",
|
|
32266
|
-
"fieldName": "identity"
|
|
32267
|
-
},
|
|
32268
|
-
{
|
|
32269
|
-
"name": "data-aria-live",
|
|
32270
|
-
"type": {
|
|
32271
|
-
"text": "AriaLive"
|
|
32272
|
-
},
|
|
32273
|
-
"description": "Aria live value for announcement.",
|
|
32274
|
-
"default": "'polite'",
|
|
32275
|
-
"fieldName": "dataAriaLive"
|
|
32276
|
-
},
|
|
32277
|
-
{
|
|
32278
|
-
"name": "delay",
|
|
32279
|
-
"type": {
|
|
32280
|
-
"text": "number"
|
|
32281
|
-
},
|
|
32282
|
-
"description": "Milliseconds to wait before adding the announcement to the identiy region in\nDOM, which will announce the message to the screen reader.",
|
|
32283
|
-
"default": "150",
|
|
32284
|
-
"fieldName": "delay"
|
|
32285
|
-
},
|
|
32286
|
-
{
|
|
32287
|
-
"name": "timeout",
|
|
32288
|
-
"type": {
|
|
32289
|
-
"text": "number"
|
|
32290
|
-
},
|
|
32291
|
-
"description": "Milliseconds to wait after which the announcement element will be removed from\nidentity region in DOM, causing the screen reader to not announcing the message.",
|
|
32292
|
-
"default": "20_000",
|
|
32293
|
-
"fieldName": "timeout"
|
|
32294
|
-
}
|
|
32295
|
-
],
|
|
32296
|
-
"superclass": {
|
|
32297
|
-
"name": "Component",
|
|
32298
|
-
"module": "/src/models"
|
|
32299
|
-
},
|
|
32300
|
-
"tagName": "mdc-screenreaderannouncer",
|
|
32301
|
-
"jsDoc": "/**\n * `mdc-screenreaderannouncer` can be used to announce messages with the screen reader.\n *\n * To make an announcement set `announcement` attribute on the `mdc-screenreaderannouncer` element.\n *\n * **Internal logic**\n *\n * When the screenreader announcer is connected to the DOM, if the `identity` attribute is not\n * provided, it is set to `mdc-screenreaderannouncer-identity` and a `<div>` element with this id is created\n * in the DOM. If the `identity` attribute is provided, the identity element is used and no new element\n * is created in the DOM.\n *\n * When the `announcement` attribute is set, the screenreader announcer will create a `<div>` element with\n * `aria-live` attribute set to the value of `data-aria-live` attribute and append it to the `identity` element.\n * After delay of `delay` milliseconds, a <p> element with the announcement text is appended to the `<div>` element.\n *\n * The announcement `<div>` element is removed from the DOM after `timeout` milliseconds.\n *\n * When the screen announcer component is disconnected from the DOM, all the timeouts are cleared and\n * all the announcement elements added are removed from the DOM and timeouts cleared.\n *\n * **Note**\n * 1. The default delay of 150 miliseconds is used as we dynamically generate the\n * aria-live region in the DOM and add the announcement text to it.\n * 3. If no `identity` is provided, all the screen reader components will create and use only one\n * `<div>` element with id `mdc-screenreaderannouncer-identity` in the DOM.\n *\n * Reference: https://patrickhlauke.github.io/aria/tests/live-regions/\n *\n * @tagname mdc-screenreaderannouncer\n */",
|
|
32302
|
-
"customElement": true
|
|
32303
|
-
}
|
|
32304
|
-
],
|
|
32305
|
-
"exports": [
|
|
32306
|
-
{
|
|
32307
|
-
"kind": "js",
|
|
32308
|
-
"name": "default",
|
|
32309
|
-
"declaration": {
|
|
32310
|
-
"name": "ScreenreaderAnnouncer",
|
|
32311
|
-
"module": "components/screenreaderannouncer/screenreaderannouncer.component.js"
|
|
32312
|
-
}
|
|
32313
|
-
}
|
|
32314
|
-
]
|
|
32315
|
-
},
|
|
32316
32316
|
{
|
|
32317
32317
|
"kind": "javascript-module",
|
|
32318
32318
|
"path": "components/select/select.component.js",
|
|
@@ -42876,16 +42876,6 @@
|
|
|
42876
42876
|
}
|
|
42877
42877
|
],
|
|
42878
42878
|
"members": [
|
|
42879
|
-
{
|
|
42880
|
-
"kind": "field",
|
|
42881
|
-
"name": "onscroll",
|
|
42882
|
-
"type": {
|
|
42883
|
-
"text": "((this: GlobalEventHandlers, ev: Event) => void) | null"
|
|
42884
|
-
},
|
|
42885
|
-
"description": "Callback that gets called when user scrolls inside of list. This gives access to the scroll container element\nas well via the event. Particularly useful for\nhandling logic related when the user scrolls to the top or bottom of a list.",
|
|
42886
|
-
"default": "null",
|
|
42887
|
-
"attribute": "onscroll"
|
|
42888
|
-
},
|
|
42889
42879
|
{
|
|
42890
42880
|
"kind": "field",
|
|
42891
42881
|
"name": "virtualizerProps",
|
|
@@ -42931,6 +42921,25 @@
|
|
|
42931
42921
|
"privacy": "public",
|
|
42932
42922
|
"default": "[]"
|
|
42933
42923
|
},
|
|
42924
|
+
{
|
|
42925
|
+
"kind": "method",
|
|
42926
|
+
"name": "handleScroll",
|
|
42927
|
+
"privacy": "private",
|
|
42928
|
+
"return": {
|
|
42929
|
+
"type": {
|
|
42930
|
+
"text": "void"
|
|
42931
|
+
}
|
|
42932
|
+
},
|
|
42933
|
+
"parameters": [
|
|
42934
|
+
{
|
|
42935
|
+
"name": "event",
|
|
42936
|
+
"type": {
|
|
42937
|
+
"text": "Event"
|
|
42938
|
+
}
|
|
42939
|
+
}
|
|
42940
|
+
],
|
|
42941
|
+
"description": "Refires the scroll event from the internal scroll container to the host element"
|
|
42942
|
+
},
|
|
42934
42943
|
{
|
|
42935
42944
|
"kind": "field",
|
|
42936
42945
|
"name": "virtualizerController",
|
|
@@ -42938,25 +42947,29 @@
|
|
|
42938
42947
|
"text": "null"
|
|
42939
42948
|
},
|
|
42940
42949
|
"default": "null"
|
|
42950
|
+
},
|
|
42951
|
+
{
|
|
42952
|
+
"kind": "field",
|
|
42953
|
+
"name": "onscroll",
|
|
42954
|
+
"type": {
|
|
42955
|
+
"text": "null"
|
|
42956
|
+
},
|
|
42957
|
+
"default": "null"
|
|
42941
42958
|
}
|
|
42942
42959
|
],
|
|
42943
42960
|
"events": [
|
|
42961
|
+
{
|
|
42962
|
+
"type": {
|
|
42963
|
+
"text": "EventConstructor"
|
|
42964
|
+
}
|
|
42965
|
+
},
|
|
42944
42966
|
{
|
|
42945
42967
|
"description": "(React: onScroll) Event that gets called when user scrolls inside of list.",
|
|
42946
|
-
"name": "
|
|
42968
|
+
"name": "scroll",
|
|
42947
42969
|
"reactName": "onScroll"
|
|
42948
42970
|
}
|
|
42949
42971
|
],
|
|
42950
42972
|
"attributes": [
|
|
42951
|
-
{
|
|
42952
|
-
"name": "onscroll",
|
|
42953
|
-
"type": {
|
|
42954
|
-
"text": "((this: GlobalEventHandlers, ev: Event) => void) | null"
|
|
42955
|
-
},
|
|
42956
|
-
"description": "Callback that gets called when user scrolls inside of list. This gives access to the scroll container element\nas well via the event. Particularly useful for\nhandling logic related when the user scrolls to the top or bottom of a list.",
|
|
42957
|
-
"default": "null",
|
|
42958
|
-
"fieldName": "onscroll"
|
|
42959
|
-
},
|
|
42960
42973
|
{
|
|
42961
42974
|
"name": "virtualizerprops",
|
|
42962
42975
|
"type": {
|
|
@@ -42980,7 +42993,7 @@
|
|
|
42980
42993
|
"module": "/src/models"
|
|
42981
42994
|
},
|
|
42982
42995
|
"tagName": "mdc-virtualizedlist",
|
|
42983
|
-
"jsDoc": "/**\n * `mdc-virtualizedlist` component for creating custom virtualized lists.\n * IMPORTANT: This component does not create it's own list/list items.\n * Use the setlistdata callback prop to update client state in order to\n * Pass list/listitems as a child of this component, which this will virtuailze\n * This implementation handles dynamic lists as well as fixed sized lists.\n * Please refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.\n *\n * @tagname mdc-virtualizedlist\n *\n * @event
|
|
42996
|
+
"jsDoc": "/**\n * `mdc-virtualizedlist` component for creating custom virtualized lists.\n * IMPORTANT: This component does not create it's own list/list items.\n * Use the setlistdata callback prop to update client state in order to\n * Pass list/listitems as a child of this component, which this will virtuailze\n * This implementation handles dynamic lists as well as fixed sized lists.\n * Please refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.\n *\n * @tagname mdc-virtualizedlist\n *\n * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.\n *\n * @slot - Client side List with nested list items.\n */",
|
|
42984
42997
|
"customElement": true
|
|
42985
42998
|
}
|
|
42986
42999
|
],
|