@momentum-design/components 0.103.2 → 0.104.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/custom-elements.json +1047 -1047
- package/dist/react/index.d.ts +4 -4
- package/dist/react/index.js +4 -4
- package/package.json +1 -1
|
@@ -4,25 +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
|
|
16
|
-
"name": "--mdc-
|
|
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
|
+
}
|
|
21
|
+
},
|
|
22
|
+
{
|
|
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
|
+
}
|
|
29
|
+
},
|
|
30
|
+
{
|
|
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
|
+
}
|
|
37
|
+
},
|
|
38
|
+
{
|
|
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
|
+
}
|
|
45
|
+
}
|
|
46
|
+
],
|
|
47
|
+
"cssParts": [
|
|
48
|
+
{
|
|
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
|
+
}
|
|
55
|
+
},
|
|
56
|
+
{
|
|
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
|
+
}
|
|
63
|
+
},
|
|
64
|
+
{
|
|
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
|
+
}
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"description": "The trailing header button of the accordion.",
|
|
74
|
+
"name": "trailing-header__button"
|
|
75
|
+
},
|
|
76
|
+
{
|
|
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
|
+
}
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"description": "The header button section of the accordion button.",
|
|
86
|
+
"name": "header-button-section",
|
|
87
|
+
"inheritedFrom": {
|
|
88
|
+
"name": "AccordionButton",
|
|
89
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
90
|
+
}
|
|
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
|
+
}
|
|
17
99
|
}
|
|
18
100
|
],
|
|
19
101
|
"slots": [
|
|
20
102
|
{
|
|
21
|
-
"description": "The
|
|
22
|
-
"name": "
|
|
103
|
+
"description": "The leading controls slot of the accordion on the header section.",
|
|
104
|
+
"name": "leading-controls"
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"description": "The trailing controls slot of the accordion on the header section.",
|
|
108
|
+
"name": "trailing-controls"
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
|
|
112
|
+
"name": "default",
|
|
113
|
+
"inheritedFrom": {
|
|
114
|
+
"name": "AccordionButton",
|
|
115
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
116
|
+
}
|
|
23
117
|
}
|
|
24
118
|
],
|
|
25
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
|
+
},
|
|
26
150
|
{
|
|
27
151
|
"kind": "field",
|
|
28
152
|
"name": "size",
|
|
@@ -32,7 +156,11 @@
|
|
|
32
156
|
"description": "The size of the accordion item.",
|
|
33
157
|
"default": "'small'",
|
|
34
158
|
"attribute": "size",
|
|
35
|
-
"reflects": true
|
|
159
|
+
"reflects": true,
|
|
160
|
+
"inheritedFrom": {
|
|
161
|
+
"name": "AccordionButton",
|
|
162
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
163
|
+
}
|
|
36
164
|
},
|
|
37
165
|
{
|
|
38
166
|
"kind": "field",
|
|
@@ -41,24 +169,104 @@
|
|
|
41
169
|
"text": "Variant"
|
|
42
170
|
},
|
|
43
171
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
44
|
-
"default": "'
|
|
172
|
+
"default": "'default'",
|
|
45
173
|
"attribute": "variant",
|
|
46
|
-
"reflects": true
|
|
174
|
+
"reflects": true,
|
|
175
|
+
"inheritedFrom": {
|
|
176
|
+
"name": "AccordionButton",
|
|
177
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
178
|
+
}
|
|
47
179
|
},
|
|
48
180
|
{
|
|
49
181
|
"kind": "field",
|
|
50
|
-
"name": "
|
|
182
|
+
"name": "dataAriaLevel",
|
|
183
|
+
"type": {
|
|
184
|
+
"text": "number"
|
|
185
|
+
},
|
|
186
|
+
"description": "The aria level of the accordion component.",
|
|
187
|
+
"default": "3",
|
|
188
|
+
"attribute": "data-aria-level",
|
|
189
|
+
"reflects": true,
|
|
190
|
+
"inheritedFrom": {
|
|
191
|
+
"name": "AccordionButton",
|
|
192
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
193
|
+
}
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
"kind": "field",
|
|
197
|
+
"name": "expanded",
|
|
51
198
|
"type": {
|
|
52
199
|
"text": "boolean"
|
|
53
200
|
},
|
|
201
|
+
"description": "The visibility of the accordion button.",
|
|
54
202
|
"default": "false",
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
203
|
+
"attribute": "expanded",
|
|
204
|
+
"reflects": true,
|
|
205
|
+
"inheritedFrom": {
|
|
206
|
+
"name": "AccordionButton",
|
|
207
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
208
|
+
}
|
|
209
|
+
},
|
|
210
|
+
{
|
|
211
|
+
"kind": "field",
|
|
212
|
+
"name": "headerText",
|
|
213
|
+
"type": {
|
|
214
|
+
"text": "string | undefined"
|
|
215
|
+
},
|
|
216
|
+
"description": "The header text of the accordion item.",
|
|
217
|
+
"attribute": "header-text",
|
|
218
|
+
"reflects": true,
|
|
219
|
+
"inheritedFrom": {
|
|
220
|
+
"name": "AccordionButton",
|
|
221
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
222
|
+
}
|
|
223
|
+
},
|
|
224
|
+
{
|
|
225
|
+
"kind": "field",
|
|
226
|
+
"name": "prefixIcon",
|
|
227
|
+
"type": {
|
|
228
|
+
"text": "IconNames | undefined"
|
|
229
|
+
},
|
|
230
|
+
"description": "The leading icon that is displayed before the header text.",
|
|
231
|
+
"attribute": "prefix-icon",
|
|
232
|
+
"inheritedFrom": {
|
|
233
|
+
"name": "AccordionButton",
|
|
234
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
235
|
+
}
|
|
58
236
|
},
|
|
59
237
|
{
|
|
60
238
|
"kind": "method",
|
|
61
|
-
"name": "
|
|
239
|
+
"name": "handleHeaderClick",
|
|
240
|
+
"privacy": "protected",
|
|
241
|
+
"return": {
|
|
242
|
+
"type": {
|
|
243
|
+
"text": "void"
|
|
244
|
+
}
|
|
245
|
+
},
|
|
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
|
+
}
|
|
251
|
+
},
|
|
252
|
+
{
|
|
253
|
+
"kind": "method",
|
|
254
|
+
"name": "dispatchHeaderClickEvent",
|
|
255
|
+
"privacy": "private",
|
|
256
|
+
"return": {
|
|
257
|
+
"type": {
|
|
258
|
+
"text": "void"
|
|
259
|
+
}
|
|
260
|
+
},
|
|
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
|
+
}
|
|
266
|
+
},
|
|
267
|
+
{
|
|
268
|
+
"kind": "method",
|
|
269
|
+
"name": "handleKeyDown",
|
|
62
270
|
"privacy": "private",
|
|
63
271
|
"return": {
|
|
64
272
|
"type": {
|
|
@@ -69,42 +277,116 @@
|
|
|
69
277
|
{
|
|
70
278
|
"name": "event",
|
|
71
279
|
"type": {
|
|
72
|
-
"text": "
|
|
280
|
+
"text": "KeyboardEvent"
|
|
73
281
|
},
|
|
74
|
-
"description": "The
|
|
282
|
+
"description": "The KeyboardEvent fired."
|
|
75
283
|
}
|
|
76
284
|
],
|
|
77
|
-
"description": "Handles the
|
|
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
|
+
}
|
|
78
290
|
},
|
|
79
291
|
{
|
|
80
292
|
"kind": "method",
|
|
81
|
-
"name": "
|
|
82
|
-
"privacy": "
|
|
293
|
+
"name": "renderIcon",
|
|
294
|
+
"privacy": "protected",
|
|
83
295
|
"return": {
|
|
84
296
|
"type": {
|
|
85
|
-
"text": "
|
|
297
|
+
"text": "TemplateResult | typeof nothing"
|
|
86
298
|
}
|
|
87
299
|
},
|
|
88
300
|
"parameters": [
|
|
89
301
|
{
|
|
90
|
-
"name": "
|
|
91
|
-
"
|
|
92
|
-
"text": "string"
|
|
93
|
-
},
|
|
94
|
-
"description": "The name of the attribute to set."
|
|
95
|
-
},
|
|
96
|
-
{
|
|
97
|
-
"name": "attributeValue",
|
|
302
|
+
"name": "iconName",
|
|
303
|
+
"optional": true,
|
|
98
304
|
"type": {
|
|
99
|
-
"text": "
|
|
100
|
-
}
|
|
101
|
-
"description": "The value to set the attribute to."
|
|
305
|
+
"text": "IconNames"
|
|
306
|
+
}
|
|
102
307
|
}
|
|
103
308
|
],
|
|
104
|
-
"
|
|
309
|
+
"inheritedFrom": {
|
|
310
|
+
"name": "AccordionButton",
|
|
311
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
312
|
+
}
|
|
313
|
+
},
|
|
314
|
+
{
|
|
315
|
+
"kind": "method",
|
|
316
|
+
"name": "renderHeadingText",
|
|
317
|
+
"privacy": "protected",
|
|
318
|
+
"return": {
|
|
319
|
+
"type": {
|
|
320
|
+
"text": "TemplateResult | typeof nothing"
|
|
321
|
+
}
|
|
322
|
+
},
|
|
323
|
+
"inheritedFrom": {
|
|
324
|
+
"name": "AccordionButton",
|
|
325
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
326
|
+
}
|
|
327
|
+
},
|
|
328
|
+
{
|
|
329
|
+
"kind": "method",
|
|
330
|
+
"name": "getArrowIconName",
|
|
331
|
+
"privacy": "protected",
|
|
332
|
+
"return": {
|
|
333
|
+
"type": {
|
|
334
|
+
"text": ""
|
|
335
|
+
}
|
|
336
|
+
},
|
|
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
|
+
}
|
|
342
|
+
},
|
|
343
|
+
{
|
|
344
|
+
"kind": "method",
|
|
345
|
+
"name": "renderBody",
|
|
346
|
+
"privacy": "protected",
|
|
347
|
+
"return": {
|
|
348
|
+
"type": {
|
|
349
|
+
"text": "TemplateResult | typeof nothing"
|
|
350
|
+
}
|
|
351
|
+
},
|
|
352
|
+
"inheritedFrom": {
|
|
353
|
+
"name": "AccordionButton",
|
|
354
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
355
|
+
}
|
|
105
356
|
}
|
|
106
357
|
],
|
|
358
|
+
"events": [
|
|
359
|
+
{
|
|
360
|
+
"description": "(React: onShown) This event is triggered when the accordion is expanded.",
|
|
361
|
+
"name": "shown",
|
|
362
|
+
"reactName": "onShown",
|
|
363
|
+
"inheritedFrom": {
|
|
364
|
+
"name": "AccordionButton",
|
|
365
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
366
|
+
}
|
|
367
|
+
}
|
|
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,
|
|
107
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
|
+
},
|
|
108
390
|
{
|
|
109
391
|
"name": "size",
|
|
110
392
|
"type": {
|
|
@@ -112,7 +394,11 @@
|
|
|
112
394
|
},
|
|
113
395
|
"description": "The size of the accordion item.",
|
|
114
396
|
"default": "'small'",
|
|
115
|
-
"fieldName": "size"
|
|
397
|
+
"fieldName": "size",
|
|
398
|
+
"inheritedFrom": {
|
|
399
|
+
"name": "AccordionButton",
|
|
400
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
401
|
+
}
|
|
116
402
|
},
|
|
117
403
|
{
|
|
118
404
|
"name": "variant",
|
|
@@ -120,26 +406,64 @@
|
|
|
120
406
|
"text": "Variant"
|
|
121
407
|
},
|
|
122
408
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
123
|
-
"default": "'
|
|
124
|
-
"fieldName": "variant"
|
|
409
|
+
"default": "'default'",
|
|
410
|
+
"fieldName": "variant",
|
|
411
|
+
"inheritedFrom": {
|
|
412
|
+
"name": "AccordionButton",
|
|
413
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
414
|
+
}
|
|
125
415
|
},
|
|
126
416
|
{
|
|
127
|
-
"name": "
|
|
417
|
+
"name": "data-aria-level",
|
|
418
|
+
"type": {
|
|
419
|
+
"text": "number"
|
|
420
|
+
},
|
|
421
|
+
"description": "The aria level of the accordion component.",
|
|
422
|
+
"default": "3",
|
|
423
|
+
"fieldName": "dataAriaLevel",
|
|
424
|
+
"inheritedFrom": {
|
|
425
|
+
"name": "AccordionButton",
|
|
426
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
427
|
+
}
|
|
428
|
+
},
|
|
429
|
+
{
|
|
430
|
+
"name": "expanded",
|
|
128
431
|
"type": {
|
|
129
432
|
"text": "boolean"
|
|
130
433
|
},
|
|
434
|
+
"description": "The visibility of the accordion button.",
|
|
131
435
|
"default": "false",
|
|
132
|
-
"
|
|
133
|
-
"
|
|
436
|
+
"fieldName": "expanded",
|
|
437
|
+
"inheritedFrom": {
|
|
438
|
+
"name": "AccordionButton",
|
|
439
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
440
|
+
}
|
|
441
|
+
},
|
|
442
|
+
{
|
|
443
|
+
"name": "header-text",
|
|
444
|
+
"type": {
|
|
445
|
+
"text": "string | undefined"
|
|
446
|
+
},
|
|
447
|
+
"description": "The header text of the accordion item.",
|
|
448
|
+
"fieldName": "headerText",
|
|
449
|
+
"inheritedFrom": {
|
|
450
|
+
"name": "AccordionButton",
|
|
451
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
452
|
+
}
|
|
453
|
+
},
|
|
454
|
+
{
|
|
455
|
+
"name": "prefix-icon",
|
|
456
|
+
"type": {
|
|
457
|
+
"text": "IconNames | undefined"
|
|
458
|
+
},
|
|
459
|
+
"description": "The leading icon that is displayed before the header text.",
|
|
460
|
+
"fieldName": "prefixIcon",
|
|
461
|
+
"inheritedFrom": {
|
|
462
|
+
"name": "AccordionButton",
|
|
463
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
464
|
+
}
|
|
134
465
|
}
|
|
135
|
-
]
|
|
136
|
-
"superclass": {
|
|
137
|
-
"name": "Component",
|
|
138
|
-
"module": "/src/models"
|
|
139
|
-
},
|
|
140
|
-
"tagName": "mdc-accordiongroup",
|
|
141
|
-
"jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
|
|
142
|
-
"customElement": true
|
|
466
|
+
]
|
|
143
467
|
}
|
|
144
468
|
],
|
|
145
469
|
"exports": [
|
|
@@ -147,8 +471,8 @@
|
|
|
147
471
|
"kind": "js",
|
|
148
472
|
"name": "default",
|
|
149
473
|
"declaration": {
|
|
150
|
-
"name": "
|
|
151
|
-
"module": "components/
|
|
474
|
+
"name": "Accordion",
|
|
475
|
+
"module": "components/accordion/accordion.component.js"
|
|
152
476
|
}
|
|
153
477
|
}
|
|
154
478
|
]
|
|
@@ -495,149 +819,25 @@
|
|
|
495
819
|
},
|
|
496
820
|
{
|
|
497
821
|
"kind": "javascript-module",
|
|
498
|
-
"path": "components/
|
|
822
|
+
"path": "components/accordiongroup/accordiongroup.component.js",
|
|
499
823
|
"declarations": [
|
|
500
824
|
{
|
|
501
825
|
"kind": "class",
|
|
502
|
-
"description": "An accordion
|
|
503
|
-
"name": "
|
|
826
|
+
"description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
|
|
827
|
+
"name": "AccordionGroup",
|
|
504
828
|
"cssProperties": [
|
|
505
829
|
{
|
|
506
|
-
"description": "The border color of the
|
|
507
|
-
"name": "--mdc-
|
|
508
|
-
"inheritedFrom": {
|
|
509
|
-
"name": "AccordionButton",
|
|
510
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
511
|
-
}
|
|
512
|
-
},
|
|
513
|
-
{
|
|
514
|
-
"description": "The hover color of the accordion.",
|
|
515
|
-
"name": "--mdc-accordionbutton-hover-color",
|
|
516
|
-
"inheritedFrom": {
|
|
517
|
-
"name": "AccordionButton",
|
|
518
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
519
|
-
}
|
|
520
|
-
},
|
|
521
|
-
{
|
|
522
|
-
"description": "The active color of the accordion.",
|
|
523
|
-
"name": "--mdc-accordionbutton-active-color",
|
|
524
|
-
"inheritedFrom": {
|
|
525
|
-
"name": "AccordionButton",
|
|
526
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
527
|
-
}
|
|
528
|
-
},
|
|
529
|
-
{
|
|
530
|
-
"description": "The disabled color of the accordion.",
|
|
531
|
-
"name": "--mdc-accordionbutton-disabled-color",
|
|
532
|
-
"inheritedFrom": {
|
|
533
|
-
"name": "AccordionButton",
|
|
534
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
535
|
-
}
|
|
536
|
-
}
|
|
537
|
-
],
|
|
538
|
-
"cssParts": [
|
|
539
|
-
{
|
|
540
|
-
"description": "The header section of the accordion.",
|
|
541
|
-
"name": "header-section",
|
|
542
|
-
"inheritedFrom": {
|
|
543
|
-
"name": "AccordionButton",
|
|
544
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
545
|
-
}
|
|
546
|
-
},
|
|
547
|
-
{
|
|
548
|
-
"description": "The leading header of the accordion.",
|
|
549
|
-
"name": "leading-header",
|
|
550
|
-
"inheritedFrom": {
|
|
551
|
-
"name": "AccordionButton",
|
|
552
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
553
|
-
}
|
|
554
|
-
},
|
|
555
|
-
{
|
|
556
|
-
"description": "The trailing header of the accordion.",
|
|
557
|
-
"name": "trailing-header",
|
|
558
|
-
"inheritedFrom": {
|
|
559
|
-
"name": "AccordionButton",
|
|
560
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
561
|
-
}
|
|
562
|
-
},
|
|
563
|
-
{
|
|
564
|
-
"description": "The trailing header button of the accordion.",
|
|
565
|
-
"name": "trailing-header__button"
|
|
566
|
-
},
|
|
567
|
-
{
|
|
568
|
-
"description": "The body section of the accordion.",
|
|
569
|
-
"name": "body-section",
|
|
570
|
-
"inheritedFrom": {
|
|
571
|
-
"name": "AccordionButton",
|
|
572
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
573
|
-
}
|
|
574
|
-
},
|
|
575
|
-
{
|
|
576
|
-
"description": "The header button section of the accordion button.",
|
|
577
|
-
"name": "header-button-section",
|
|
578
|
-
"inheritedFrom": {
|
|
579
|
-
"name": "AccordionButton",
|
|
580
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
581
|
-
}
|
|
582
|
-
},
|
|
583
|
-
{
|
|
584
|
-
"description": "The trailing header icon of the accordion button.",
|
|
585
|
-
"name": "trailing-header__icon",
|
|
586
|
-
"inheritedFrom": {
|
|
587
|
-
"name": "AccordionButton",
|
|
588
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
589
|
-
}
|
|
830
|
+
"description": "The border color of the entire accordiongroup",
|
|
831
|
+
"name": "--mdc-accordiongroup-border-color"
|
|
590
832
|
}
|
|
591
833
|
],
|
|
592
834
|
"slots": [
|
|
593
835
|
{
|
|
594
|
-
"description": "The
|
|
595
|
-
"name": "
|
|
596
|
-
},
|
|
597
|
-
{
|
|
598
|
-
"description": "The trailing controls slot of the accordion on the header section.",
|
|
599
|
-
"name": "trailing-controls"
|
|
600
|
-
},
|
|
601
|
-
{
|
|
602
|
-
"description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
|
|
603
|
-
"name": "default",
|
|
604
|
-
"inheritedFrom": {
|
|
605
|
-
"name": "AccordionButton",
|
|
606
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
607
|
-
}
|
|
836
|
+
"description": "The default slot can contain the `accordion` or `accordionbutton` components.",
|
|
837
|
+
"name": "default"
|
|
608
838
|
}
|
|
609
839
|
],
|
|
610
840
|
"members": [
|
|
611
|
-
{
|
|
612
|
-
"kind": "method",
|
|
613
|
-
"name": "renderHeader",
|
|
614
|
-
"privacy": "protected",
|
|
615
|
-
"return": {
|
|
616
|
-
"type": {
|
|
617
|
-
"text": ""
|
|
618
|
-
}
|
|
619
|
-
},
|
|
620
|
-
"description": "Renders the header section of the accordion.\nThis includes the leading icon, text and controls, and the trailing controls.\nThe trailing controls include the expand/collapse button.\nThe button is disabled if the accordion is disabled.\nThe button is also given the aria-controls attribute set to the id of the body section.\nThe button is also given the aria-expanded attribute set to the expanded state of the accordion.\nThe prefix icon of the button is set to the expanded state of the accordion.",
|
|
621
|
-
"inheritedFrom": {
|
|
622
|
-
"name": "AccordionButton",
|
|
623
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
624
|
-
}
|
|
625
|
-
},
|
|
626
|
-
{
|
|
627
|
-
"kind": "field",
|
|
628
|
-
"name": "disabled",
|
|
629
|
-
"type": {
|
|
630
|
-
"text": "boolean | undefined"
|
|
631
|
-
},
|
|
632
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
633
|
-
"default": "undefined",
|
|
634
|
-
"attribute": "disabled",
|
|
635
|
-
"reflects": true,
|
|
636
|
-
"inheritedFrom": {
|
|
637
|
-
"name": "AccordionButton",
|
|
638
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
639
|
-
}
|
|
640
|
-
},
|
|
641
841
|
{
|
|
642
842
|
"kind": "field",
|
|
643
843
|
"name": "size",
|
|
@@ -647,11 +847,7 @@
|
|
|
647
847
|
"description": "The size of the accordion item.",
|
|
648
848
|
"default": "'small'",
|
|
649
849
|
"attribute": "size",
|
|
650
|
-
"reflects": true
|
|
651
|
-
"inheritedFrom": {
|
|
652
|
-
"name": "AccordionButton",
|
|
653
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
654
|
-
}
|
|
850
|
+
"reflects": true
|
|
655
851
|
},
|
|
656
852
|
{
|
|
657
853
|
"kind": "field",
|
|
@@ -660,104 +856,24 @@
|
|
|
660
856
|
"text": "Variant"
|
|
661
857
|
},
|
|
662
858
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
663
|
-
"default": "'
|
|
859
|
+
"default": "'stacked'",
|
|
664
860
|
"attribute": "variant",
|
|
665
|
-
"reflects": true
|
|
666
|
-
"inheritedFrom": {
|
|
667
|
-
"name": "AccordionButton",
|
|
668
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
669
|
-
}
|
|
670
|
-
},
|
|
671
|
-
{
|
|
672
|
-
"kind": "field",
|
|
673
|
-
"name": "dataAriaLevel",
|
|
674
|
-
"type": {
|
|
675
|
-
"text": "number"
|
|
676
|
-
},
|
|
677
|
-
"description": "The aria level of the accordion component.",
|
|
678
|
-
"default": "3",
|
|
679
|
-
"attribute": "data-aria-level",
|
|
680
|
-
"reflects": true,
|
|
681
|
-
"inheritedFrom": {
|
|
682
|
-
"name": "AccordionButton",
|
|
683
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
684
|
-
}
|
|
861
|
+
"reflects": true
|
|
685
862
|
},
|
|
686
863
|
{
|
|
687
864
|
"kind": "field",
|
|
688
|
-
"name": "
|
|
865
|
+
"name": "allowMultiple",
|
|
689
866
|
"type": {
|
|
690
867
|
"text": "boolean"
|
|
691
868
|
},
|
|
692
|
-
"description": "The visibility of the accordion button.",
|
|
693
869
|
"default": "false",
|
|
694
|
-
"
|
|
695
|
-
"
|
|
696
|
-
"
|
|
697
|
-
"name": "AccordionButton",
|
|
698
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
699
|
-
}
|
|
700
|
-
},
|
|
701
|
-
{
|
|
702
|
-
"kind": "field",
|
|
703
|
-
"name": "headerText",
|
|
704
|
-
"type": {
|
|
705
|
-
"text": "string | undefined"
|
|
706
|
-
},
|
|
707
|
-
"description": "The header text of the accordion item.",
|
|
708
|
-
"attribute": "header-text",
|
|
709
|
-
"reflects": true,
|
|
710
|
-
"inheritedFrom": {
|
|
711
|
-
"name": "AccordionButton",
|
|
712
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
713
|
-
}
|
|
714
|
-
},
|
|
715
|
-
{
|
|
716
|
-
"kind": "field",
|
|
717
|
-
"name": "prefixIcon",
|
|
718
|
-
"type": {
|
|
719
|
-
"text": "IconNames | undefined"
|
|
720
|
-
},
|
|
721
|
-
"description": "The leading icon that is displayed before the header text.",
|
|
722
|
-
"attribute": "prefix-icon",
|
|
723
|
-
"inheritedFrom": {
|
|
724
|
-
"name": "AccordionButton",
|
|
725
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
726
|
-
}
|
|
727
|
-
},
|
|
728
|
-
{
|
|
729
|
-
"kind": "method",
|
|
730
|
-
"name": "handleHeaderClick",
|
|
731
|
-
"privacy": "protected",
|
|
732
|
-
"return": {
|
|
733
|
-
"type": {
|
|
734
|
-
"text": "void"
|
|
735
|
-
}
|
|
736
|
-
},
|
|
737
|
-
"description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state.",
|
|
738
|
-
"inheritedFrom": {
|
|
739
|
-
"name": "AccordionButton",
|
|
740
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
741
|
-
}
|
|
742
|
-
},
|
|
743
|
-
{
|
|
744
|
-
"kind": "method",
|
|
745
|
-
"name": "dispatchHeaderClickEvent",
|
|
746
|
-
"privacy": "private",
|
|
747
|
-
"return": {
|
|
748
|
-
"type": {
|
|
749
|
-
"text": "void"
|
|
750
|
-
}
|
|
751
|
-
},
|
|
752
|
-
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state.",
|
|
753
|
-
"inheritedFrom": {
|
|
754
|
-
"name": "AccordionButton",
|
|
755
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
756
|
-
}
|
|
870
|
+
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
871
|
+
"attribute": "allow-multiple",
|
|
872
|
+
"reflects": true
|
|
757
873
|
},
|
|
758
874
|
{
|
|
759
875
|
"kind": "method",
|
|
760
|
-
"name": "
|
|
876
|
+
"name": "handleAccordionExpanded",
|
|
761
877
|
"privacy": "private",
|
|
762
878
|
"return": {
|
|
763
879
|
"type": {
|
|
@@ -768,116 +884,42 @@
|
|
|
768
884
|
{
|
|
769
885
|
"name": "event",
|
|
770
886
|
"type": {
|
|
771
|
-
"text": "
|
|
887
|
+
"text": "Event"
|
|
772
888
|
},
|
|
773
|
-
"description": "The
|
|
889
|
+
"description": "The event object from the 'shown' event."
|
|
774
890
|
}
|
|
775
891
|
],
|
|
776
|
-
"description": "Handles the
|
|
777
|
-
"inheritedFrom": {
|
|
778
|
-
"name": "AccordionButton",
|
|
779
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
780
|
-
}
|
|
892
|
+
"description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
|
|
781
893
|
},
|
|
782
894
|
{
|
|
783
895
|
"kind": "method",
|
|
784
|
-
"name": "
|
|
785
|
-
"privacy": "
|
|
896
|
+
"name": "setChildrenAccordionAttributes",
|
|
897
|
+
"privacy": "private",
|
|
786
898
|
"return": {
|
|
787
899
|
"type": {
|
|
788
|
-
"text": "
|
|
900
|
+
"text": "void"
|
|
789
901
|
}
|
|
790
902
|
},
|
|
791
903
|
"parameters": [
|
|
792
904
|
{
|
|
793
|
-
"name": "
|
|
794
|
-
"optional": true,
|
|
905
|
+
"name": "attributeName",
|
|
795
906
|
"type": {
|
|
796
|
-
"text": "
|
|
797
|
-
}
|
|
907
|
+
"text": "string"
|
|
908
|
+
},
|
|
909
|
+
"description": "The name of the attribute to set."
|
|
910
|
+
},
|
|
911
|
+
{
|
|
912
|
+
"name": "attributeValue",
|
|
913
|
+
"type": {
|
|
914
|
+
"text": "string"
|
|
915
|
+
},
|
|
916
|
+
"description": "The value to set the attribute to."
|
|
798
917
|
}
|
|
799
918
|
],
|
|
800
|
-
"
|
|
801
|
-
"name": "AccordionButton",
|
|
802
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
803
|
-
}
|
|
804
|
-
},
|
|
805
|
-
{
|
|
806
|
-
"kind": "method",
|
|
807
|
-
"name": "renderHeadingText",
|
|
808
|
-
"privacy": "protected",
|
|
809
|
-
"return": {
|
|
810
|
-
"type": {
|
|
811
|
-
"text": "TemplateResult | typeof nothing"
|
|
812
|
-
}
|
|
813
|
-
},
|
|
814
|
-
"inheritedFrom": {
|
|
815
|
-
"name": "AccordionButton",
|
|
816
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
817
|
-
}
|
|
818
|
-
},
|
|
819
|
-
{
|
|
820
|
-
"kind": "method",
|
|
821
|
-
"name": "getArrowIconName",
|
|
822
|
-
"privacy": "protected",
|
|
823
|
-
"return": {
|
|
824
|
-
"type": {
|
|
825
|
-
"text": ""
|
|
826
|
-
}
|
|
827
|
-
},
|
|
828
|
-
"description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon.",
|
|
829
|
-
"inheritedFrom": {
|
|
830
|
-
"name": "AccordionButton",
|
|
831
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
832
|
-
}
|
|
833
|
-
},
|
|
834
|
-
{
|
|
835
|
-
"kind": "method",
|
|
836
|
-
"name": "renderBody",
|
|
837
|
-
"privacy": "protected",
|
|
838
|
-
"return": {
|
|
839
|
-
"type": {
|
|
840
|
-
"text": "TemplateResult | typeof nothing"
|
|
841
|
-
}
|
|
842
|
-
},
|
|
843
|
-
"inheritedFrom": {
|
|
844
|
-
"name": "AccordionButton",
|
|
845
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
846
|
-
}
|
|
847
|
-
}
|
|
848
|
-
],
|
|
849
|
-
"events": [
|
|
850
|
-
{
|
|
851
|
-
"description": "(React: onShown) This event is triggered when the accordion is expanded.",
|
|
852
|
-
"name": "shown",
|
|
853
|
-
"reactName": "onShown",
|
|
854
|
-
"inheritedFrom": {
|
|
855
|
-
"name": "AccordionButton",
|
|
856
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
857
|
-
}
|
|
919
|
+
"description": "Sets the given attribute on all child accordion or accordionbutton components."
|
|
858
920
|
}
|
|
859
921
|
],
|
|
860
|
-
"superclass": {
|
|
861
|
-
"name": "AccordionButton",
|
|
862
|
-
"module": "/src/components/accordionbutton/accordionbutton.component"
|
|
863
|
-
},
|
|
864
|
-
"tagName": "mdc-accordion",
|
|
865
|
-
"jsDoc": "/**\n * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.\n *\n * @tagname mdc-accordion\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot leading-controls - The leading controls slot of the accordion on the header section.\n * @slot trailing-controls - The trailing controls slot of the accordion on the header section.\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.\n *\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n * @csspart body-section - The body section of the accordion.\n */",
|
|
866
|
-
"customElement": true,
|
|
867
922
|
"attributes": [
|
|
868
|
-
{
|
|
869
|
-
"name": "disabled",
|
|
870
|
-
"type": {
|
|
871
|
-
"text": "boolean | undefined"
|
|
872
|
-
},
|
|
873
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
874
|
-
"default": "undefined",
|
|
875
|
-
"fieldName": "disabled",
|
|
876
|
-
"inheritedFrom": {
|
|
877
|
-
"name": "AccordionButton",
|
|
878
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
879
|
-
}
|
|
880
|
-
},
|
|
881
923
|
{
|
|
882
924
|
"name": "size",
|
|
883
925
|
"type": {
|
|
@@ -885,11 +927,7 @@
|
|
|
885
927
|
},
|
|
886
928
|
"description": "The size of the accordion item.",
|
|
887
929
|
"default": "'small'",
|
|
888
|
-
"fieldName": "size"
|
|
889
|
-
"inheritedFrom": {
|
|
890
|
-
"name": "AccordionButton",
|
|
891
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
892
|
-
}
|
|
930
|
+
"fieldName": "size"
|
|
893
931
|
},
|
|
894
932
|
{
|
|
895
933
|
"name": "variant",
|
|
@@ -897,64 +935,26 @@
|
|
|
897
935
|
"text": "Variant"
|
|
898
936
|
},
|
|
899
937
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
900
|
-
"default": "'
|
|
901
|
-
"fieldName": "variant"
|
|
902
|
-
"inheritedFrom": {
|
|
903
|
-
"name": "AccordionButton",
|
|
904
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
905
|
-
}
|
|
906
|
-
},
|
|
907
|
-
{
|
|
908
|
-
"name": "data-aria-level",
|
|
909
|
-
"type": {
|
|
910
|
-
"text": "number"
|
|
911
|
-
},
|
|
912
|
-
"description": "The aria level of the accordion component.",
|
|
913
|
-
"default": "3",
|
|
914
|
-
"fieldName": "dataAriaLevel",
|
|
915
|
-
"inheritedFrom": {
|
|
916
|
-
"name": "AccordionButton",
|
|
917
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
918
|
-
}
|
|
938
|
+
"default": "'stacked'",
|
|
939
|
+
"fieldName": "variant"
|
|
919
940
|
},
|
|
920
941
|
{
|
|
921
|
-
"name": "
|
|
942
|
+
"name": "allow-multiple",
|
|
922
943
|
"type": {
|
|
923
944
|
"text": "boolean"
|
|
924
945
|
},
|
|
925
|
-
"description": "The visibility of the accordion button.",
|
|
926
946
|
"default": "false",
|
|
927
|
-
"
|
|
928
|
-
"
|
|
929
|
-
"name": "AccordionButton",
|
|
930
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
931
|
-
}
|
|
932
|
-
},
|
|
933
|
-
{
|
|
934
|
-
"name": "header-text",
|
|
935
|
-
"type": {
|
|
936
|
-
"text": "string | undefined"
|
|
937
|
-
},
|
|
938
|
-
"description": "The header text of the accordion item.",
|
|
939
|
-
"fieldName": "headerText",
|
|
940
|
-
"inheritedFrom": {
|
|
941
|
-
"name": "AccordionButton",
|
|
942
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
943
|
-
}
|
|
944
|
-
},
|
|
945
|
-
{
|
|
946
|
-
"name": "prefix-icon",
|
|
947
|
-
"type": {
|
|
948
|
-
"text": "IconNames | undefined"
|
|
949
|
-
},
|
|
950
|
-
"description": "The leading icon that is displayed before the header text.",
|
|
951
|
-
"fieldName": "prefixIcon",
|
|
952
|
-
"inheritedFrom": {
|
|
953
|
-
"name": "AccordionButton",
|
|
954
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
955
|
-
}
|
|
947
|
+
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
948
|
+
"fieldName": "allowMultiple"
|
|
956
949
|
}
|
|
957
|
-
]
|
|
950
|
+
],
|
|
951
|
+
"superclass": {
|
|
952
|
+
"name": "Component",
|
|
953
|
+
"module": "/src/models"
|
|
954
|
+
},
|
|
955
|
+
"tagName": "mdc-accordiongroup",
|
|
956
|
+
"jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
|
|
957
|
+
"customElement": true
|
|
958
958
|
}
|
|
959
959
|
],
|
|
960
960
|
"exports": [
|
|
@@ -962,8 +962,8 @@
|
|
|
962
962
|
"kind": "js",
|
|
963
963
|
"name": "default",
|
|
964
964
|
"declaration": {
|
|
965
|
-
"name": "
|
|
966
|
-
"module": "components/
|
|
965
|
+
"name": "AccordionGroup",
|
|
966
|
+
"module": "components/accordiongroup/accordiongroup.component.js"
|
|
967
967
|
}
|
|
968
968
|
}
|
|
969
969
|
]
|
|
@@ -16284,6 +16284,161 @@
|
|
|
16284
16284
|
}
|
|
16285
16285
|
]
|
|
16286
16286
|
},
|
|
16287
|
+
{
|
|
16288
|
+
"kind": "javascript-module",
|
|
16289
|
+
"path": "components/list/list.component.js",
|
|
16290
|
+
"declarations": [
|
|
16291
|
+
{
|
|
16292
|
+
"kind": "class",
|
|
16293
|
+
"description": "mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n\nTo add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n`mdc-listitem` components can be placed in the default slot.",
|
|
16294
|
+
"name": "List",
|
|
16295
|
+
"cssParts": [
|
|
16296
|
+
{
|
|
16297
|
+
"description": "The container slot around the list items",
|
|
16298
|
+
"name": "container"
|
|
16299
|
+
}
|
|
16300
|
+
],
|
|
16301
|
+
"slots": [
|
|
16302
|
+
{
|
|
16303
|
+
"description": "This is a default/unnamed slot, where listitems can be placed.",
|
|
16304
|
+
"name": "default"
|
|
16305
|
+
},
|
|
16306
|
+
{
|
|
16307
|
+
"description": "This slot is used to pass a header for the list, which can be a `mdc-listheader` component.",
|
|
16308
|
+
"name": "list-header"
|
|
16309
|
+
}
|
|
16310
|
+
],
|
|
16311
|
+
"members": [
|
|
16312
|
+
{
|
|
16313
|
+
"kind": "method",
|
|
16314
|
+
"name": "handleKeyDown",
|
|
16315
|
+
"privacy": "private",
|
|
16316
|
+
"return": {
|
|
16317
|
+
"type": {
|
|
16318
|
+
"text": "void"
|
|
16319
|
+
}
|
|
16320
|
+
},
|
|
16321
|
+
"parameters": [
|
|
16322
|
+
{
|
|
16323
|
+
"name": "event",
|
|
16324
|
+
"type": {
|
|
16325
|
+
"text": "KeyboardEvent"
|
|
16326
|
+
},
|
|
16327
|
+
"description": "The keyboard event."
|
|
16328
|
+
}
|
|
16329
|
+
],
|
|
16330
|
+
"description": "Handles the keydown event on the list element.\nIf the key is 'ArrowUp' or 'ArrowDown', it focuses to the previous or next list item\nand sets the active tabindex of the list item.\nPrevents the default event behavior."
|
|
16331
|
+
},
|
|
16332
|
+
{
|
|
16333
|
+
"kind": "method",
|
|
16334
|
+
"name": "getCurrentIndex",
|
|
16335
|
+
"privacy": "private",
|
|
16336
|
+
"return": {
|
|
16337
|
+
"type": {
|
|
16338
|
+
"text": ""
|
|
16339
|
+
}
|
|
16340
|
+
},
|
|
16341
|
+
"parameters": [
|
|
16342
|
+
{
|
|
16343
|
+
"name": "target",
|
|
16344
|
+
"type": {
|
|
16345
|
+
"text": "EventTarget | null"
|
|
16346
|
+
},
|
|
16347
|
+
"description": "The target element to find the index of."
|
|
16348
|
+
}
|
|
16349
|
+
],
|
|
16350
|
+
"description": "Returns the index of the given target in the listItems array.\nIf the target is not a list item, but a child element of a list item,\nit returns the index of the parent list item."
|
|
16351
|
+
},
|
|
16352
|
+
{
|
|
16353
|
+
"kind": "method",
|
|
16354
|
+
"name": "getNewIndexBasedOnKey",
|
|
16355
|
+
"privacy": "private",
|
|
16356
|
+
"return": {
|
|
16357
|
+
"type": {
|
|
16358
|
+
"text": ""
|
|
16359
|
+
}
|
|
16360
|
+
},
|
|
16361
|
+
"parameters": [
|
|
16362
|
+
{
|
|
16363
|
+
"name": "key",
|
|
16364
|
+
"type": {
|
|
16365
|
+
"text": "string"
|
|
16366
|
+
},
|
|
16367
|
+
"description": "The key that was pressed."
|
|
16368
|
+
},
|
|
16369
|
+
{
|
|
16370
|
+
"name": "currentIndex",
|
|
16371
|
+
"type": {
|
|
16372
|
+
"text": "number"
|
|
16373
|
+
},
|
|
16374
|
+
"description": "The current index of the focused list item."
|
|
16375
|
+
},
|
|
16376
|
+
{
|
|
16377
|
+
"name": "wrappedDivsCount",
|
|
16378
|
+
"type": {
|
|
16379
|
+
"text": "number"
|
|
16380
|
+
},
|
|
16381
|
+
"description": "The total number of list items."
|
|
16382
|
+
}
|
|
16383
|
+
],
|
|
16384
|
+
"description": "Calculates a new index based on the pressed keyboard key.\nSupports navigation keys for moving focus within a list."
|
|
16385
|
+
},
|
|
16386
|
+
{
|
|
16387
|
+
"kind": "method",
|
|
16388
|
+
"name": "handleMouseClick",
|
|
16389
|
+
"privacy": "protected",
|
|
16390
|
+
"return": {
|
|
16391
|
+
"type": {
|
|
16392
|
+
"text": "void"
|
|
16393
|
+
}
|
|
16394
|
+
},
|
|
16395
|
+
"parameters": [
|
|
16396
|
+
{
|
|
16397
|
+
"name": "event",
|
|
16398
|
+
"type": {
|
|
16399
|
+
"text": "MouseEvent"
|
|
16400
|
+
},
|
|
16401
|
+
"description": "The mouse event."
|
|
16402
|
+
}
|
|
16403
|
+
],
|
|
16404
|
+
"description": "Handles the mouse click event on the list element.\nFinds the index of the target element in the list items array and calls\n`resetTabIndexAndSetActiveTabIndex` with that index."
|
|
16405
|
+
},
|
|
16406
|
+
{
|
|
16407
|
+
"kind": "method",
|
|
16408
|
+
"name": "resetTabIndexAndSetActiveTabIndex",
|
|
16409
|
+
"privacy": "private",
|
|
16410
|
+
"parameters": [
|
|
16411
|
+
{
|
|
16412
|
+
"name": "newIndex",
|
|
16413
|
+
"type": {
|
|
16414
|
+
"text": "number"
|
|
16415
|
+
},
|
|
16416
|
+
"description": "The index of the new active element in the list."
|
|
16417
|
+
}
|
|
16418
|
+
],
|
|
16419
|
+
"description": "Resets all list items tabindex to -1 and sets the tabindex of the\nelement at the given index to 0, effectively setting the active\nelement. This is used when navigating the list via keyboard."
|
|
16420
|
+
}
|
|
16421
|
+
],
|
|
16422
|
+
"superclass": {
|
|
16423
|
+
"name": "Component",
|
|
16424
|
+
"module": "/src/models"
|
|
16425
|
+
},
|
|
16426
|
+
"tagName": "mdc-list",
|
|
16427
|
+
"jsDoc": "/**\n * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n *\n * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n * `mdc-listitem` components can be placed in the default slot.\n *\n * @tagname mdc-list\n *\n * @slot default - This is a default/unnamed slot, where listitems can be placed.\n * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.\n *\n * @csspart container - The container slot around the list items\n */",
|
|
16428
|
+
"customElement": true
|
|
16429
|
+
}
|
|
16430
|
+
],
|
|
16431
|
+
"exports": [
|
|
16432
|
+
{
|
|
16433
|
+
"kind": "js",
|
|
16434
|
+
"name": "default",
|
|
16435
|
+
"declaration": {
|
|
16436
|
+
"name": "List",
|
|
16437
|
+
"module": "components/list/list.component.js"
|
|
16438
|
+
}
|
|
16439
|
+
}
|
|
16440
|
+
]
|
|
16441
|
+
},
|
|
16287
16442
|
{
|
|
16288
16443
|
"kind": "javascript-module",
|
|
16289
16444
|
"path": "components/linksimple/linksimple.component.js",
|
|
@@ -16573,161 +16728,6 @@
|
|
|
16573
16728
|
}
|
|
16574
16729
|
]
|
|
16575
16730
|
},
|
|
16576
|
-
{
|
|
16577
|
-
"kind": "javascript-module",
|
|
16578
|
-
"path": "components/list/list.component.js",
|
|
16579
|
-
"declarations": [
|
|
16580
|
-
{
|
|
16581
|
-
"kind": "class",
|
|
16582
|
-
"description": "mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n\nTo add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n`mdc-listitem` components can be placed in the default slot.",
|
|
16583
|
-
"name": "List",
|
|
16584
|
-
"cssParts": [
|
|
16585
|
-
{
|
|
16586
|
-
"description": "The container slot around the list items",
|
|
16587
|
-
"name": "container"
|
|
16588
|
-
}
|
|
16589
|
-
],
|
|
16590
|
-
"slots": [
|
|
16591
|
-
{
|
|
16592
|
-
"description": "This is a default/unnamed slot, where listitems can be placed.",
|
|
16593
|
-
"name": "default"
|
|
16594
|
-
},
|
|
16595
|
-
{
|
|
16596
|
-
"description": "This slot is used to pass a header for the list, which can be a `mdc-listheader` component.",
|
|
16597
|
-
"name": "list-header"
|
|
16598
|
-
}
|
|
16599
|
-
],
|
|
16600
|
-
"members": [
|
|
16601
|
-
{
|
|
16602
|
-
"kind": "method",
|
|
16603
|
-
"name": "handleKeyDown",
|
|
16604
|
-
"privacy": "private",
|
|
16605
|
-
"return": {
|
|
16606
|
-
"type": {
|
|
16607
|
-
"text": "void"
|
|
16608
|
-
}
|
|
16609
|
-
},
|
|
16610
|
-
"parameters": [
|
|
16611
|
-
{
|
|
16612
|
-
"name": "event",
|
|
16613
|
-
"type": {
|
|
16614
|
-
"text": "KeyboardEvent"
|
|
16615
|
-
},
|
|
16616
|
-
"description": "The keyboard event."
|
|
16617
|
-
}
|
|
16618
|
-
],
|
|
16619
|
-
"description": "Handles the keydown event on the list element.\nIf the key is 'ArrowUp' or 'ArrowDown', it focuses to the previous or next list item\nand sets the active tabindex of the list item.\nPrevents the default event behavior."
|
|
16620
|
-
},
|
|
16621
|
-
{
|
|
16622
|
-
"kind": "method",
|
|
16623
|
-
"name": "getCurrentIndex",
|
|
16624
|
-
"privacy": "private",
|
|
16625
|
-
"return": {
|
|
16626
|
-
"type": {
|
|
16627
|
-
"text": ""
|
|
16628
|
-
}
|
|
16629
|
-
},
|
|
16630
|
-
"parameters": [
|
|
16631
|
-
{
|
|
16632
|
-
"name": "target",
|
|
16633
|
-
"type": {
|
|
16634
|
-
"text": "EventTarget | null"
|
|
16635
|
-
},
|
|
16636
|
-
"description": "The target element to find the index of."
|
|
16637
|
-
}
|
|
16638
|
-
],
|
|
16639
|
-
"description": "Returns the index of the given target in the listItems array.\nIf the target is not a list item, but a child element of a list item,\nit returns the index of the parent list item."
|
|
16640
|
-
},
|
|
16641
|
-
{
|
|
16642
|
-
"kind": "method",
|
|
16643
|
-
"name": "getNewIndexBasedOnKey",
|
|
16644
|
-
"privacy": "private",
|
|
16645
|
-
"return": {
|
|
16646
|
-
"type": {
|
|
16647
|
-
"text": ""
|
|
16648
|
-
}
|
|
16649
|
-
},
|
|
16650
|
-
"parameters": [
|
|
16651
|
-
{
|
|
16652
|
-
"name": "key",
|
|
16653
|
-
"type": {
|
|
16654
|
-
"text": "string"
|
|
16655
|
-
},
|
|
16656
|
-
"description": "The key that was pressed."
|
|
16657
|
-
},
|
|
16658
|
-
{
|
|
16659
|
-
"name": "currentIndex",
|
|
16660
|
-
"type": {
|
|
16661
|
-
"text": "number"
|
|
16662
|
-
},
|
|
16663
|
-
"description": "The current index of the focused list item."
|
|
16664
|
-
},
|
|
16665
|
-
{
|
|
16666
|
-
"name": "wrappedDivsCount",
|
|
16667
|
-
"type": {
|
|
16668
|
-
"text": "number"
|
|
16669
|
-
},
|
|
16670
|
-
"description": "The total number of list items."
|
|
16671
|
-
}
|
|
16672
|
-
],
|
|
16673
|
-
"description": "Calculates a new index based on the pressed keyboard key.\nSupports navigation keys for moving focus within a list."
|
|
16674
|
-
},
|
|
16675
|
-
{
|
|
16676
|
-
"kind": "method",
|
|
16677
|
-
"name": "handleMouseClick",
|
|
16678
|
-
"privacy": "protected",
|
|
16679
|
-
"return": {
|
|
16680
|
-
"type": {
|
|
16681
|
-
"text": "void"
|
|
16682
|
-
}
|
|
16683
|
-
},
|
|
16684
|
-
"parameters": [
|
|
16685
|
-
{
|
|
16686
|
-
"name": "event",
|
|
16687
|
-
"type": {
|
|
16688
|
-
"text": "MouseEvent"
|
|
16689
|
-
},
|
|
16690
|
-
"description": "The mouse event."
|
|
16691
|
-
}
|
|
16692
|
-
],
|
|
16693
|
-
"description": "Handles the mouse click event on the list element.\nFinds the index of the target element in the list items array and calls\n`resetTabIndexAndSetActiveTabIndex` with that index."
|
|
16694
|
-
},
|
|
16695
|
-
{
|
|
16696
|
-
"kind": "method",
|
|
16697
|
-
"name": "resetTabIndexAndSetActiveTabIndex",
|
|
16698
|
-
"privacy": "private",
|
|
16699
|
-
"parameters": [
|
|
16700
|
-
{
|
|
16701
|
-
"name": "newIndex",
|
|
16702
|
-
"type": {
|
|
16703
|
-
"text": "number"
|
|
16704
|
-
},
|
|
16705
|
-
"description": "The index of the new active element in the list."
|
|
16706
|
-
}
|
|
16707
|
-
],
|
|
16708
|
-
"description": "Resets all list items tabindex to -1 and sets the tabindex of the\nelement at the given index to 0, effectively setting the active\nelement. This is used when navigating the list via keyboard."
|
|
16709
|
-
}
|
|
16710
|
-
],
|
|
16711
|
-
"superclass": {
|
|
16712
|
-
"name": "Component",
|
|
16713
|
-
"module": "/src/models"
|
|
16714
|
-
},
|
|
16715
|
-
"tagName": "mdc-list",
|
|
16716
|
-
"jsDoc": "/**\n * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n *\n * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n * `mdc-listitem` components can be placed in the default slot.\n *\n * @tagname mdc-list\n *\n * @slot default - This is a default/unnamed slot, where listitems can be placed.\n * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.\n *\n * @csspart container - The container slot around the list items\n */",
|
|
16717
|
-
"customElement": true
|
|
16718
|
-
}
|
|
16719
|
-
],
|
|
16720
|
-
"exports": [
|
|
16721
|
-
{
|
|
16722
|
-
"kind": "js",
|
|
16723
|
-
"name": "default",
|
|
16724
|
-
"declaration": {
|
|
16725
|
-
"name": "List",
|
|
16726
|
-
"module": "components/list/list.component.js"
|
|
16727
|
-
}
|
|
16728
|
-
}
|
|
16729
|
-
]
|
|
16730
|
-
},
|
|
16731
16731
|
{
|
|
16732
16732
|
"kind": "javascript-module",
|
|
16733
16733
|
"path": "components/listheader/listheader.component.js",
|
|
@@ -39495,6 +39495,476 @@
|
|
|
39495
39495
|
}
|
|
39496
39496
|
]
|
|
39497
39497
|
},
|
|
39498
|
+
{
|
|
39499
|
+
"kind": "javascript-module",
|
|
39500
|
+
"path": "components/typewriter/typewriter.component.js",
|
|
39501
|
+
"declarations": [
|
|
39502
|
+
{
|
|
39503
|
+
"kind": "class",
|
|
39504
|
+
"description": "Typewriter component that creates a typewriter effect on text content.\nIt uses the Text component internally, adding a progressive typing effect.\n\nThe `type` attribute allows changing the text style (passed to the internal Text component).\nThe `tagname` attribute allows changing the tag name of the text element (passed to the internal Text component).\nThe default tag name is `p`.\n\nThe `speed` attribute controls typing speed in milliseconds per character:\n- 'very-slow' = 240ms per character\n- 'slow' = 120ms per character\n- 'normal' = 60ms per character (default)\n- 'fast' = 20ms per character\n- 'very-fast' = 1ms per character\n- Or any numeric string representing milliseconds\n\nAdvanced features:\n- Dynamic speed adjustment during typing\n- Chunked text addition via addTextChunk() method\n- Instant text addition via addInstantTextChunk() method or instant parameter\n- Mixed instant and animated chunks in queue\n- Continues typing in background tabs\n- Performance optimized for large text\n- maxQueueSize to limit memory usage from excessive queuing\n- event handling for typing completion and content changes\n\nThe component includes accessibility features:\n- Screen readers announce the complete text, not character by character\n- Uses aria-live=\"polite\" for dynamic content updates\n- Sets aria-busy during typing animation",
|
|
39505
|
+
"name": "Typewriter",
|
|
39506
|
+
"cssParts": [
|
|
39507
|
+
{
|
|
39508
|
+
"description": "Container for the text element",
|
|
39509
|
+
"name": "container"
|
|
39510
|
+
},
|
|
39511
|
+
{
|
|
39512
|
+
"description": "The text element (forwarded to mdc-text)",
|
|
39513
|
+
"name": "text"
|
|
39514
|
+
}
|
|
39515
|
+
],
|
|
39516
|
+
"slots": [
|
|
39517
|
+
{
|
|
39518
|
+
"description": "Default slot for text content",
|
|
39519
|
+
"name": ""
|
|
39520
|
+
}
|
|
39521
|
+
],
|
|
39522
|
+
"members": [
|
|
39523
|
+
{
|
|
39524
|
+
"kind": "field",
|
|
39525
|
+
"name": "type",
|
|
39526
|
+
"type": {
|
|
39527
|
+
"text": "TextType"
|
|
39528
|
+
},
|
|
39529
|
+
"privacy": "public",
|
|
39530
|
+
"description": "Specifies the text style to be applied to the internal text component.\nUses the same types as the Text component.",
|
|
39531
|
+
"default": "body-large-regular",
|
|
39532
|
+
"attribute": "type",
|
|
39533
|
+
"reflects": true
|
|
39534
|
+
},
|
|
39535
|
+
{
|
|
39536
|
+
"kind": "field",
|
|
39537
|
+
"name": "tagname",
|
|
39538
|
+
"type": {
|
|
39539
|
+
"text": "TagName | undefined"
|
|
39540
|
+
},
|
|
39541
|
+
"privacy": "public",
|
|
39542
|
+
"description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the internal text element.\n\nAcceptable values include all valid tag names from the Text component.",
|
|
39543
|
+
"attribute": "tagname",
|
|
39544
|
+
"reflects": true
|
|
39545
|
+
},
|
|
39546
|
+
{
|
|
39547
|
+
"kind": "field",
|
|
39548
|
+
"name": "speed",
|
|
39549
|
+
"type": {
|
|
39550
|
+
"text": "TypewriterSpeed"
|
|
39551
|
+
},
|
|
39552
|
+
"privacy": "public",
|
|
39553
|
+
"description": "Speed of the typewriter effect in milliseconds per character.\nCan be a string preset or a numeric string in milliseconds.\n- 'very-slow' = 240ms per character\n- 'slow' = 120ms per character\n- 'normal' = 60ms per character (default)\n- 'fast' = 20ms per character\n- 'very-fast' = 1ms per character\n- Or any numeric string representing milliseconds (e.g., '100')",
|
|
39554
|
+
"default": "'normal' (60ms per character)",
|
|
39555
|
+
"attribute": "speed",
|
|
39556
|
+
"reflects": true
|
|
39557
|
+
},
|
|
39558
|
+
{
|
|
39559
|
+
"kind": "field",
|
|
39560
|
+
"name": "maxQueueSize",
|
|
39561
|
+
"type": {
|
|
39562
|
+
"text": "number"
|
|
39563
|
+
},
|
|
39564
|
+
"privacy": "public",
|
|
39565
|
+
"description": "Maximum number of text chunks that can be queued before oldest chunks are dropped.\nSet to prevent memory accumulation from excessive queuing.",
|
|
39566
|
+
"default": "Number.MAX_SAFE_INTEGER (effectively unlimited)",
|
|
39567
|
+
"attribute": "max-queue-size",
|
|
39568
|
+
"reflects": true
|
|
39569
|
+
},
|
|
39570
|
+
{
|
|
39571
|
+
"kind": "method",
|
|
39572
|
+
"name": "createTimeout",
|
|
39573
|
+
"privacy": "private",
|
|
39574
|
+
"return": {
|
|
39575
|
+
"type": {
|
|
39576
|
+
"text": "number"
|
|
39577
|
+
}
|
|
39578
|
+
},
|
|
39579
|
+
"parameters": [
|
|
39580
|
+
{
|
|
39581
|
+
"name": "callback",
|
|
39582
|
+
"type": {
|
|
39583
|
+
"text": "() => void"
|
|
39584
|
+
}
|
|
39585
|
+
},
|
|
39586
|
+
{
|
|
39587
|
+
"name": "delay",
|
|
39588
|
+
"type": {
|
|
39589
|
+
"text": "number"
|
|
39590
|
+
}
|
|
39591
|
+
}
|
|
39592
|
+
],
|
|
39593
|
+
"description": "Helper to create tracked setTimeout that will be cleaned up on disconnect"
|
|
39594
|
+
},
|
|
39595
|
+
{
|
|
39596
|
+
"kind": "method",
|
|
39597
|
+
"name": "clearAllTimeouts",
|
|
39598
|
+
"privacy": "private",
|
|
39599
|
+
"return": {
|
|
39600
|
+
"type": {
|
|
39601
|
+
"text": "void"
|
|
39602
|
+
}
|
|
39603
|
+
},
|
|
39604
|
+
"description": "Clear all pending timeouts"
|
|
39605
|
+
},
|
|
39606
|
+
{
|
|
39607
|
+
"kind": "method",
|
|
39608
|
+
"name": "clearQueue",
|
|
39609
|
+
"privacy": "public",
|
|
39610
|
+
"return": {
|
|
39611
|
+
"type": {
|
|
39612
|
+
"text": "void"
|
|
39613
|
+
}
|
|
39614
|
+
},
|
|
39615
|
+
"description": "Clears the text chunk queue and stops processing\nUseful for resetting the component state"
|
|
39616
|
+
},
|
|
39617
|
+
{
|
|
39618
|
+
"kind": "method",
|
|
39619
|
+
"name": "addTextChunk",
|
|
39620
|
+
"privacy": "public",
|
|
39621
|
+
"return": {
|
|
39622
|
+
"type": {
|
|
39623
|
+
"text": "void"
|
|
39624
|
+
}
|
|
39625
|
+
},
|
|
39626
|
+
"parameters": [
|
|
39627
|
+
{
|
|
39628
|
+
"name": "text",
|
|
39629
|
+
"type": {
|
|
39630
|
+
"text": "string"
|
|
39631
|
+
},
|
|
39632
|
+
"description": "The text to add"
|
|
39633
|
+
},
|
|
39634
|
+
{
|
|
39635
|
+
"name": "speed",
|
|
39636
|
+
"optional": true,
|
|
39637
|
+
"type": {
|
|
39638
|
+
"text": "TypewriterSpeed"
|
|
39639
|
+
},
|
|
39640
|
+
"description": "Optional speed override for this chunk"
|
|
39641
|
+
},
|
|
39642
|
+
{
|
|
39643
|
+
"name": "instant",
|
|
39644
|
+
"optional": true,
|
|
39645
|
+
"type": {
|
|
39646
|
+
"text": "boolean"
|
|
39647
|
+
},
|
|
39648
|
+
"description": "If true, text appears instantly without animation"
|
|
39649
|
+
}
|
|
39650
|
+
],
|
|
39651
|
+
"description": "Adds a chunk of text to be typed out, optionally with a different speed"
|
|
39652
|
+
},
|
|
39653
|
+
{
|
|
39654
|
+
"kind": "method",
|
|
39655
|
+
"name": "addInstantTextChunk",
|
|
39656
|
+
"privacy": "public",
|
|
39657
|
+
"return": {
|
|
39658
|
+
"type": {
|
|
39659
|
+
"text": "void"
|
|
39660
|
+
}
|
|
39661
|
+
},
|
|
39662
|
+
"parameters": [
|
|
39663
|
+
{
|
|
39664
|
+
"name": "text",
|
|
39665
|
+
"type": {
|
|
39666
|
+
"text": "string"
|
|
39667
|
+
},
|
|
39668
|
+
"description": "The text to add instantly"
|
|
39669
|
+
}
|
|
39670
|
+
],
|
|
39671
|
+
"description": "Adds a chunk of text instantly without typing animation"
|
|
39672
|
+
},
|
|
39673
|
+
{
|
|
39674
|
+
"kind": "method",
|
|
39675
|
+
"name": "processChunkQueue",
|
|
39676
|
+
"privacy": "private",
|
|
39677
|
+
"return": {
|
|
39678
|
+
"type": {
|
|
39679
|
+
"text": "void"
|
|
39680
|
+
}
|
|
39681
|
+
},
|
|
39682
|
+
"description": "Processes all chunks in the queue"
|
|
39683
|
+
},
|
|
39684
|
+
{
|
|
39685
|
+
"kind": "method",
|
|
39686
|
+
"name": "processNextChunk",
|
|
39687
|
+
"privacy": "private",
|
|
39688
|
+
"return": {
|
|
39689
|
+
"type": {
|
|
39690
|
+
"text": "void"
|
|
39691
|
+
}
|
|
39692
|
+
},
|
|
39693
|
+
"description": "Processes the next chunk in the queue"
|
|
39694
|
+
},
|
|
39695
|
+
{
|
|
39696
|
+
"kind": "method",
|
|
39697
|
+
"name": "getTypingDelayMs",
|
|
39698
|
+
"privacy": "private",
|
|
39699
|
+
"return": {
|
|
39700
|
+
"type": {
|
|
39701
|
+
"text": "number"
|
|
39702
|
+
}
|
|
39703
|
+
},
|
|
39704
|
+
"description": "Gets the typing delay in milliseconds per character"
|
|
39705
|
+
},
|
|
39706
|
+
{
|
|
39707
|
+
"kind": "method",
|
|
39708
|
+
"name": "captureAndProcessContent",
|
|
39709
|
+
"privacy": "private",
|
|
39710
|
+
"return": {
|
|
39711
|
+
"type": {
|
|
39712
|
+
"text": "void"
|
|
39713
|
+
}
|
|
39714
|
+
},
|
|
39715
|
+
"description": "Captures slot content and starts typewriter animation"
|
|
39716
|
+
},
|
|
39717
|
+
{
|
|
39718
|
+
"kind": "method",
|
|
39719
|
+
"name": "startTypingAnimation",
|
|
39720
|
+
"privacy": "private",
|
|
39721
|
+
"return": {
|
|
39722
|
+
"type": {
|
|
39723
|
+
"text": "void"
|
|
39724
|
+
}
|
|
39725
|
+
},
|
|
39726
|
+
"parameters": [
|
|
39727
|
+
{
|
|
39728
|
+
"name": "onComplete",
|
|
39729
|
+
"optional": true,
|
|
39730
|
+
"type": {
|
|
39731
|
+
"text": "() => void"
|
|
39732
|
+
}
|
|
39733
|
+
}
|
|
39734
|
+
],
|
|
39735
|
+
"description": "Starts the typewriter animation"
|
|
39736
|
+
},
|
|
39737
|
+
{
|
|
39738
|
+
"kind": "method",
|
|
39739
|
+
"name": "clearTypingAnimation",
|
|
39740
|
+
"privacy": "private",
|
|
39741
|
+
"return": {
|
|
39742
|
+
"type": {
|
|
39743
|
+
"text": "void"
|
|
39744
|
+
}
|
|
39745
|
+
},
|
|
39746
|
+
"description": "Clears the typing animation timeout"
|
|
39747
|
+
},
|
|
39748
|
+
{
|
|
39749
|
+
"kind": "method",
|
|
39750
|
+
"name": "handleSlotChange",
|
|
39751
|
+
"privacy": "private",
|
|
39752
|
+
"return": {
|
|
39753
|
+
"type": {
|
|
39754
|
+
"text": "void"
|
|
39755
|
+
}
|
|
39756
|
+
},
|
|
39757
|
+
"description": "Handler for slotchange event"
|
|
39758
|
+
}
|
|
39759
|
+
],
|
|
39760
|
+
"events": [
|
|
39761
|
+
{
|
|
39762
|
+
"type": {
|
|
39763
|
+
"text": "CustomEvent"
|
|
39764
|
+
}
|
|
39765
|
+
},
|
|
39766
|
+
{
|
|
39767
|
+
"description": "(React: onTypingComplete) Fired when the typewriter finishes typing all content. Detail: \\{ finalContent: string \\}",
|
|
39768
|
+
"name": "typing-complete",
|
|
39769
|
+
"reactName": "onTypingComplete"
|
|
39770
|
+
},
|
|
39771
|
+
{
|
|
39772
|
+
"description": "(React: onChange) Fired when the content of the typewriter changes. Detail: \\{ content: string, isTyping: boolean \\}",
|
|
39773
|
+
"name": "change",
|
|
39774
|
+
"reactName": "onChange"
|
|
39775
|
+
}
|
|
39776
|
+
],
|
|
39777
|
+
"attributes": [
|
|
39778
|
+
{
|
|
39779
|
+
"name": "type",
|
|
39780
|
+
"type": {
|
|
39781
|
+
"text": "TextType"
|
|
39782
|
+
},
|
|
39783
|
+
"description": "Specifies the text style to be applied to the internal text component.\nUses the same types as the Text component.",
|
|
39784
|
+
"default": "body-large-regular",
|
|
39785
|
+
"fieldName": "type"
|
|
39786
|
+
},
|
|
39787
|
+
{
|
|
39788
|
+
"name": "tagname",
|
|
39789
|
+
"type": {
|
|
39790
|
+
"text": "TagName | undefined"
|
|
39791
|
+
},
|
|
39792
|
+
"description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the internal text element.\n\nAcceptable values include all valid tag names from the Text component.",
|
|
39793
|
+
"fieldName": "tagname"
|
|
39794
|
+
},
|
|
39795
|
+
{
|
|
39796
|
+
"name": "speed",
|
|
39797
|
+
"type": {
|
|
39798
|
+
"text": "TypewriterSpeed"
|
|
39799
|
+
},
|
|
39800
|
+
"description": "Speed of the typewriter effect in milliseconds per character.\nCan be a string preset or a numeric string in milliseconds.\n- 'very-slow' = 240ms per character\n- 'slow' = 120ms per character\n- 'normal' = 60ms per character (default)\n- 'fast' = 20ms per character\n- 'very-fast' = 1ms per character\n- Or any numeric string representing milliseconds (e.g., '100')",
|
|
39801
|
+
"default": "'normal' (60ms per character)",
|
|
39802
|
+
"fieldName": "speed"
|
|
39803
|
+
},
|
|
39804
|
+
{
|
|
39805
|
+
"name": "max-queue-size",
|
|
39806
|
+
"type": {
|
|
39807
|
+
"text": "number"
|
|
39808
|
+
},
|
|
39809
|
+
"description": "Maximum number of text chunks that can be queued before oldest chunks are dropped.\nSet to prevent memory accumulation from excessive queuing.",
|
|
39810
|
+
"default": "Number.MAX_SAFE_INTEGER (effectively unlimited)",
|
|
39811
|
+
"fieldName": "maxQueueSize"
|
|
39812
|
+
}
|
|
39813
|
+
],
|
|
39814
|
+
"superclass": {
|
|
39815
|
+
"name": "Component",
|
|
39816
|
+
"module": "/src/models"
|
|
39817
|
+
},
|
|
39818
|
+
"tagName": "mdc-typewriter",
|
|
39819
|
+
"jsDoc": "/**\n * Typewriter component that creates a typewriter effect on text content.\n * It uses the Text component internally, adding a progressive typing effect.\n *\n * The `type` attribute allows changing the text style (passed to the internal Text component).\n * The `tagname` attribute allows changing the tag name of the text element (passed to the internal Text component).\n * The default tag name is `p`.\n *\n * The `speed` attribute controls typing speed in milliseconds per character:\n * - 'very-slow' = 240ms per character\n * - 'slow' = 120ms per character\n * - 'normal' = 60ms per character (default)\n * - 'fast' = 20ms per character\n * - 'very-fast' = 1ms per character\n * - Or any numeric string representing milliseconds\n *\n * Advanced features:\n * - Dynamic speed adjustment during typing\n * - Chunked text addition via addTextChunk() method\n * - Instant text addition via addInstantTextChunk() method or instant parameter\n * - Mixed instant and animated chunks in queue\n * - Continues typing in background tabs\n * - Performance optimized for large text\n * - maxQueueSize to limit memory usage from excessive queuing\n * - event handling for typing completion and content changes\n *\n * The component includes accessibility features:\n * - Screen readers announce the complete text, not character by character\n * - Uses aria-live=\"polite\" for dynamic content updates\n * - Sets aria-busy during typing animation\n *\n * @dependency mdc-text\n *\n * @tagname mdc-typewriter\n * @slot - Default slot for text content\n *\n * @csspart container - Container for the text element\n * @csspart text - The text element (forwarded to mdc-text)\n *\n * @event typing-complete - (React: onTypingComplete) Fired when the typewriter finishes typing all content.\n * Detail: \\{ finalContent: string \\}\n * @event change - (React: onChange) Fired when the content of the typewriter changes.\n * Detail: \\{ content: string, isTyping: boolean \\}\n */",
|
|
39820
|
+
"customElement": true
|
|
39821
|
+
}
|
|
39822
|
+
],
|
|
39823
|
+
"exports": [
|
|
39824
|
+
{
|
|
39825
|
+
"kind": "js",
|
|
39826
|
+
"name": "default",
|
|
39827
|
+
"declaration": {
|
|
39828
|
+
"name": "Typewriter",
|
|
39829
|
+
"module": "components/typewriter/typewriter.component.js"
|
|
39830
|
+
}
|
|
39831
|
+
}
|
|
39832
|
+
]
|
|
39833
|
+
},
|
|
39834
|
+
{
|
|
39835
|
+
"kind": "javascript-module",
|
|
39836
|
+
"path": "components/virtualizedlist/virtualizedlist.component.js",
|
|
39837
|
+
"declarations": [
|
|
39838
|
+
{
|
|
39839
|
+
"kind": "class",
|
|
39840
|
+
"description": "`mdc-virtualizedlist` component for creating custom virtualized lists.\nIMPORTANT: This component does not create it's own list/list items.\nUse the setlistdata callback prop to update client state in order to\nPass list/listitems as a child of this component, which this will virtuailze\nThis implementation handles dynamic lists as well as fixed sized lists.\nPlease refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.",
|
|
39841
|
+
"name": "VirtualizedList",
|
|
39842
|
+
"slots": [
|
|
39843
|
+
{
|
|
39844
|
+
"description": "Client side List with nested list items.",
|
|
39845
|
+
"name": ""
|
|
39846
|
+
}
|
|
39847
|
+
],
|
|
39848
|
+
"members": [
|
|
39849
|
+
{
|
|
39850
|
+
"kind": "field",
|
|
39851
|
+
"name": "onscroll",
|
|
39852
|
+
"type": {
|
|
39853
|
+
"text": "((this: GlobalEventHandlers, ev: Event) => void) | null"
|
|
39854
|
+
},
|
|
39855
|
+
"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.",
|
|
39856
|
+
"default": "null",
|
|
39857
|
+
"attribute": "onscroll"
|
|
39858
|
+
},
|
|
39859
|
+
{
|
|
39860
|
+
"kind": "field",
|
|
39861
|
+
"name": "virtualizerProps",
|
|
39862
|
+
"type": {
|
|
39863
|
+
"text": "VirtualizerProps"
|
|
39864
|
+
},
|
|
39865
|
+
"description": "Object that sets and updates the virtualizer with any relevant props.\nThere are two required object props in order to get virtualization to work properly.\ncount - The length of your list that you are virtualizing.\nAs your list grows/shrinks, this component must be updated with the appropriate value\n(Same with any other updated prop).\nestimateSize - A function that returns the estimated size of your items.\nIf your list is fixed, this will just be the size of your items.\nIf your list is dynamic, try to return approximate the size of each item.\n\nA full list of possible props can be in\n[Tanstack Virtualizer API Docs](https://tanstack.com/virtual/latest/docs/api/virtualizer)",
|
|
39866
|
+
"attribute": "virtualizerprops"
|
|
39867
|
+
},
|
|
39868
|
+
{
|
|
39869
|
+
"kind": "field",
|
|
39870
|
+
"name": "setlistdata",
|
|
39871
|
+
"type": {
|
|
39872
|
+
"text": "(({ virtualItems, measureElement, listStyle }: SetListDataProps) => void) | null"
|
|
39873
|
+
},
|
|
39874
|
+
"description": "Callback that gets envoked when updates to the virtualizer interally occur.\nThis must be implemented in such a way that this function will trigger update to parent.\n\nvirtualItems - Array that will be what the client displays on screen. Use this to render\na List of your choosing with these items nested inside as your ListItems.\nmeasureElement - Ref to pass to each ListItem rendered client side.\nEach ListItem should also be be passed key and a data-index (which can be found on the virtualItem).\nlistStyle - This should be passed as the style attribute to your List.",
|
|
39875
|
+
"default": "null",
|
|
39876
|
+
"attribute": "setlistdata"
|
|
39877
|
+
},
|
|
39878
|
+
{
|
|
39879
|
+
"kind": "field",
|
|
39880
|
+
"name": "scrollElementRef",
|
|
39881
|
+
"type": {
|
|
39882
|
+
"text": "Ref<HTMLDivElement>"
|
|
39883
|
+
},
|
|
39884
|
+
"privacy": "public"
|
|
39885
|
+
},
|
|
39886
|
+
{
|
|
39887
|
+
"kind": "field",
|
|
39888
|
+
"name": "virtualizer",
|
|
39889
|
+
"type": {
|
|
39890
|
+
"text": "Virtualizer<Element, Element> | null"
|
|
39891
|
+
},
|
|
39892
|
+
"privacy": "public",
|
|
39893
|
+
"default": "null"
|
|
39894
|
+
},
|
|
39895
|
+
{
|
|
39896
|
+
"kind": "field",
|
|
39897
|
+
"name": "virtualItems",
|
|
39898
|
+
"type": {
|
|
39899
|
+
"text": "Array<VirtualItem>"
|
|
39900
|
+
},
|
|
39901
|
+
"privacy": "public",
|
|
39902
|
+
"default": "[]"
|
|
39903
|
+
},
|
|
39904
|
+
{
|
|
39905
|
+
"kind": "field",
|
|
39906
|
+
"name": "virtualizerController",
|
|
39907
|
+
"type": {
|
|
39908
|
+
"text": "null"
|
|
39909
|
+
},
|
|
39910
|
+
"default": "null"
|
|
39911
|
+
}
|
|
39912
|
+
],
|
|
39913
|
+
"events": [
|
|
39914
|
+
{
|
|
39915
|
+
"description": "(React: onScroll) Event that gets called when user scrolls inside of list.",
|
|
39916
|
+
"name": "onscroll",
|
|
39917
|
+
"reactName": "onScroll"
|
|
39918
|
+
}
|
|
39919
|
+
],
|
|
39920
|
+
"attributes": [
|
|
39921
|
+
{
|
|
39922
|
+
"name": "onscroll",
|
|
39923
|
+
"type": {
|
|
39924
|
+
"text": "((this: GlobalEventHandlers, ev: Event) => void) | null"
|
|
39925
|
+
},
|
|
39926
|
+
"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.",
|
|
39927
|
+
"default": "null",
|
|
39928
|
+
"fieldName": "onscroll"
|
|
39929
|
+
},
|
|
39930
|
+
{
|
|
39931
|
+
"name": "virtualizerprops",
|
|
39932
|
+
"type": {
|
|
39933
|
+
"text": "VirtualizerProps"
|
|
39934
|
+
},
|
|
39935
|
+
"description": "Object that sets and updates the virtualizer with any relevant props.\nThere are two required object props in order to get virtualization to work properly.\ncount - The length of your list that you are virtualizing.\nAs your list grows/shrinks, this component must be updated with the appropriate value\n(Same with any other updated prop).\nestimateSize - A function that returns the estimated size of your items.\nIf your list is fixed, this will just be the size of your items.\nIf your list is dynamic, try to return approximate the size of each item.\n\nA full list of possible props can be in\n[Tanstack Virtualizer API Docs](https://tanstack.com/virtual/latest/docs/api/virtualizer)",
|
|
39936
|
+
"fieldName": "virtualizerProps"
|
|
39937
|
+
},
|
|
39938
|
+
{
|
|
39939
|
+
"name": "setlistdata",
|
|
39940
|
+
"type": {
|
|
39941
|
+
"text": "(({ virtualItems, measureElement, listStyle }: SetListDataProps) => void) | null"
|
|
39942
|
+
},
|
|
39943
|
+
"description": "Callback that gets envoked when updates to the virtualizer interally occur.\nThis must be implemented in such a way that this function will trigger update to parent.\n\nvirtualItems - Array that will be what the client displays on screen. Use this to render\na List of your choosing with these items nested inside as your ListItems.\nmeasureElement - Ref to pass to each ListItem rendered client side.\nEach ListItem should also be be passed key and a data-index (which can be found on the virtualItem).\nlistStyle - This should be passed as the style attribute to your List.",
|
|
39944
|
+
"default": "null",
|
|
39945
|
+
"fieldName": "setlistdata"
|
|
39946
|
+
}
|
|
39947
|
+
],
|
|
39948
|
+
"superclass": {
|
|
39949
|
+
"name": "Component",
|
|
39950
|
+
"module": "/src/models"
|
|
39951
|
+
},
|
|
39952
|
+
"tagName": "mdc-virtualizedlist",
|
|
39953
|
+
"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 onscroll - (React: onScroll) Event that gets called when user scrolls inside of list.\n *\n * @slot - Client side List with nested list items.\n */",
|
|
39954
|
+
"customElement": true
|
|
39955
|
+
}
|
|
39956
|
+
],
|
|
39957
|
+
"exports": [
|
|
39958
|
+
{
|
|
39959
|
+
"kind": "js",
|
|
39960
|
+
"name": "default",
|
|
39961
|
+
"declaration": {
|
|
39962
|
+
"name": "VirtualizedList",
|
|
39963
|
+
"module": "components/virtualizedlist/virtualizedlist.component.js"
|
|
39964
|
+
}
|
|
39965
|
+
}
|
|
39966
|
+
]
|
|
39967
|
+
},
|
|
39498
39968
|
{
|
|
39499
39969
|
"kind": "javascript-module",
|
|
39500
39970
|
"path": "components/tooltip/tooltip.component.js",
|
|
@@ -41534,476 +42004,6 @@
|
|
|
41534
42004
|
}
|
|
41535
42005
|
]
|
|
41536
42006
|
},
|
|
41537
|
-
{
|
|
41538
|
-
"kind": "javascript-module",
|
|
41539
|
-
"path": "components/typewriter/typewriter.component.js",
|
|
41540
|
-
"declarations": [
|
|
41541
|
-
{
|
|
41542
|
-
"kind": "class",
|
|
41543
|
-
"description": "Typewriter component that creates a typewriter effect on text content.\nIt uses the Text component internally, adding a progressive typing effect.\n\nThe `type` attribute allows changing the text style (passed to the internal Text component).\nThe `tagname` attribute allows changing the tag name of the text element (passed to the internal Text component).\nThe default tag name is `p`.\n\nThe `speed` attribute controls typing speed in milliseconds per character:\n- 'very-slow' = 240ms per character\n- 'slow' = 120ms per character\n- 'normal' = 60ms per character (default)\n- 'fast' = 20ms per character\n- 'very-fast' = 1ms per character\n- Or any numeric string representing milliseconds\n\nAdvanced features:\n- Dynamic speed adjustment during typing\n- Chunked text addition via addTextChunk() method\n- Instant text addition via addInstantTextChunk() method or instant parameter\n- Mixed instant and animated chunks in queue\n- Continues typing in background tabs\n- Performance optimized for large text\n- maxQueueSize to limit memory usage from excessive queuing\n- event handling for typing completion and content changes\n\nThe component includes accessibility features:\n- Screen readers announce the complete text, not character by character\n- Uses aria-live=\"polite\" for dynamic content updates\n- Sets aria-busy during typing animation",
|
|
41544
|
-
"name": "Typewriter",
|
|
41545
|
-
"cssParts": [
|
|
41546
|
-
{
|
|
41547
|
-
"description": "Container for the text element",
|
|
41548
|
-
"name": "container"
|
|
41549
|
-
},
|
|
41550
|
-
{
|
|
41551
|
-
"description": "The text element (forwarded to mdc-text)",
|
|
41552
|
-
"name": "text"
|
|
41553
|
-
}
|
|
41554
|
-
],
|
|
41555
|
-
"slots": [
|
|
41556
|
-
{
|
|
41557
|
-
"description": "Default slot for text content",
|
|
41558
|
-
"name": ""
|
|
41559
|
-
}
|
|
41560
|
-
],
|
|
41561
|
-
"members": [
|
|
41562
|
-
{
|
|
41563
|
-
"kind": "field",
|
|
41564
|
-
"name": "type",
|
|
41565
|
-
"type": {
|
|
41566
|
-
"text": "TextType"
|
|
41567
|
-
},
|
|
41568
|
-
"privacy": "public",
|
|
41569
|
-
"description": "Specifies the text style to be applied to the internal text component.\nUses the same types as the Text component.",
|
|
41570
|
-
"default": "body-large-regular",
|
|
41571
|
-
"attribute": "type",
|
|
41572
|
-
"reflects": true
|
|
41573
|
-
},
|
|
41574
|
-
{
|
|
41575
|
-
"kind": "field",
|
|
41576
|
-
"name": "tagname",
|
|
41577
|
-
"type": {
|
|
41578
|
-
"text": "TagName | undefined"
|
|
41579
|
-
},
|
|
41580
|
-
"privacy": "public",
|
|
41581
|
-
"description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the internal text element.\n\nAcceptable values include all valid tag names from the Text component.",
|
|
41582
|
-
"attribute": "tagname",
|
|
41583
|
-
"reflects": true
|
|
41584
|
-
},
|
|
41585
|
-
{
|
|
41586
|
-
"kind": "field",
|
|
41587
|
-
"name": "speed",
|
|
41588
|
-
"type": {
|
|
41589
|
-
"text": "TypewriterSpeed"
|
|
41590
|
-
},
|
|
41591
|
-
"privacy": "public",
|
|
41592
|
-
"description": "Speed of the typewriter effect in milliseconds per character.\nCan be a string preset or a numeric string in milliseconds.\n- 'very-slow' = 240ms per character\n- 'slow' = 120ms per character\n- 'normal' = 60ms per character (default)\n- 'fast' = 20ms per character\n- 'very-fast' = 1ms per character\n- Or any numeric string representing milliseconds (e.g., '100')",
|
|
41593
|
-
"default": "'normal' (60ms per character)",
|
|
41594
|
-
"attribute": "speed",
|
|
41595
|
-
"reflects": true
|
|
41596
|
-
},
|
|
41597
|
-
{
|
|
41598
|
-
"kind": "field",
|
|
41599
|
-
"name": "maxQueueSize",
|
|
41600
|
-
"type": {
|
|
41601
|
-
"text": "number"
|
|
41602
|
-
},
|
|
41603
|
-
"privacy": "public",
|
|
41604
|
-
"description": "Maximum number of text chunks that can be queued before oldest chunks are dropped.\nSet to prevent memory accumulation from excessive queuing.",
|
|
41605
|
-
"default": "Number.MAX_SAFE_INTEGER (effectively unlimited)",
|
|
41606
|
-
"attribute": "max-queue-size",
|
|
41607
|
-
"reflects": true
|
|
41608
|
-
},
|
|
41609
|
-
{
|
|
41610
|
-
"kind": "method",
|
|
41611
|
-
"name": "createTimeout",
|
|
41612
|
-
"privacy": "private",
|
|
41613
|
-
"return": {
|
|
41614
|
-
"type": {
|
|
41615
|
-
"text": "number"
|
|
41616
|
-
}
|
|
41617
|
-
},
|
|
41618
|
-
"parameters": [
|
|
41619
|
-
{
|
|
41620
|
-
"name": "callback",
|
|
41621
|
-
"type": {
|
|
41622
|
-
"text": "() => void"
|
|
41623
|
-
}
|
|
41624
|
-
},
|
|
41625
|
-
{
|
|
41626
|
-
"name": "delay",
|
|
41627
|
-
"type": {
|
|
41628
|
-
"text": "number"
|
|
41629
|
-
}
|
|
41630
|
-
}
|
|
41631
|
-
],
|
|
41632
|
-
"description": "Helper to create tracked setTimeout that will be cleaned up on disconnect"
|
|
41633
|
-
},
|
|
41634
|
-
{
|
|
41635
|
-
"kind": "method",
|
|
41636
|
-
"name": "clearAllTimeouts",
|
|
41637
|
-
"privacy": "private",
|
|
41638
|
-
"return": {
|
|
41639
|
-
"type": {
|
|
41640
|
-
"text": "void"
|
|
41641
|
-
}
|
|
41642
|
-
},
|
|
41643
|
-
"description": "Clear all pending timeouts"
|
|
41644
|
-
},
|
|
41645
|
-
{
|
|
41646
|
-
"kind": "method",
|
|
41647
|
-
"name": "clearQueue",
|
|
41648
|
-
"privacy": "public",
|
|
41649
|
-
"return": {
|
|
41650
|
-
"type": {
|
|
41651
|
-
"text": "void"
|
|
41652
|
-
}
|
|
41653
|
-
},
|
|
41654
|
-
"description": "Clears the text chunk queue and stops processing\nUseful for resetting the component state"
|
|
41655
|
-
},
|
|
41656
|
-
{
|
|
41657
|
-
"kind": "method",
|
|
41658
|
-
"name": "addTextChunk",
|
|
41659
|
-
"privacy": "public",
|
|
41660
|
-
"return": {
|
|
41661
|
-
"type": {
|
|
41662
|
-
"text": "void"
|
|
41663
|
-
}
|
|
41664
|
-
},
|
|
41665
|
-
"parameters": [
|
|
41666
|
-
{
|
|
41667
|
-
"name": "text",
|
|
41668
|
-
"type": {
|
|
41669
|
-
"text": "string"
|
|
41670
|
-
},
|
|
41671
|
-
"description": "The text to add"
|
|
41672
|
-
},
|
|
41673
|
-
{
|
|
41674
|
-
"name": "speed",
|
|
41675
|
-
"optional": true,
|
|
41676
|
-
"type": {
|
|
41677
|
-
"text": "TypewriterSpeed"
|
|
41678
|
-
},
|
|
41679
|
-
"description": "Optional speed override for this chunk"
|
|
41680
|
-
},
|
|
41681
|
-
{
|
|
41682
|
-
"name": "instant",
|
|
41683
|
-
"optional": true,
|
|
41684
|
-
"type": {
|
|
41685
|
-
"text": "boolean"
|
|
41686
|
-
},
|
|
41687
|
-
"description": "If true, text appears instantly without animation"
|
|
41688
|
-
}
|
|
41689
|
-
],
|
|
41690
|
-
"description": "Adds a chunk of text to be typed out, optionally with a different speed"
|
|
41691
|
-
},
|
|
41692
|
-
{
|
|
41693
|
-
"kind": "method",
|
|
41694
|
-
"name": "addInstantTextChunk",
|
|
41695
|
-
"privacy": "public",
|
|
41696
|
-
"return": {
|
|
41697
|
-
"type": {
|
|
41698
|
-
"text": "void"
|
|
41699
|
-
}
|
|
41700
|
-
},
|
|
41701
|
-
"parameters": [
|
|
41702
|
-
{
|
|
41703
|
-
"name": "text",
|
|
41704
|
-
"type": {
|
|
41705
|
-
"text": "string"
|
|
41706
|
-
},
|
|
41707
|
-
"description": "The text to add instantly"
|
|
41708
|
-
}
|
|
41709
|
-
],
|
|
41710
|
-
"description": "Adds a chunk of text instantly without typing animation"
|
|
41711
|
-
},
|
|
41712
|
-
{
|
|
41713
|
-
"kind": "method",
|
|
41714
|
-
"name": "processChunkQueue",
|
|
41715
|
-
"privacy": "private",
|
|
41716
|
-
"return": {
|
|
41717
|
-
"type": {
|
|
41718
|
-
"text": "void"
|
|
41719
|
-
}
|
|
41720
|
-
},
|
|
41721
|
-
"description": "Processes all chunks in the queue"
|
|
41722
|
-
},
|
|
41723
|
-
{
|
|
41724
|
-
"kind": "method",
|
|
41725
|
-
"name": "processNextChunk",
|
|
41726
|
-
"privacy": "private",
|
|
41727
|
-
"return": {
|
|
41728
|
-
"type": {
|
|
41729
|
-
"text": "void"
|
|
41730
|
-
}
|
|
41731
|
-
},
|
|
41732
|
-
"description": "Processes the next chunk in the queue"
|
|
41733
|
-
},
|
|
41734
|
-
{
|
|
41735
|
-
"kind": "method",
|
|
41736
|
-
"name": "getTypingDelayMs",
|
|
41737
|
-
"privacy": "private",
|
|
41738
|
-
"return": {
|
|
41739
|
-
"type": {
|
|
41740
|
-
"text": "number"
|
|
41741
|
-
}
|
|
41742
|
-
},
|
|
41743
|
-
"description": "Gets the typing delay in milliseconds per character"
|
|
41744
|
-
},
|
|
41745
|
-
{
|
|
41746
|
-
"kind": "method",
|
|
41747
|
-
"name": "captureAndProcessContent",
|
|
41748
|
-
"privacy": "private",
|
|
41749
|
-
"return": {
|
|
41750
|
-
"type": {
|
|
41751
|
-
"text": "void"
|
|
41752
|
-
}
|
|
41753
|
-
},
|
|
41754
|
-
"description": "Captures slot content and starts typewriter animation"
|
|
41755
|
-
},
|
|
41756
|
-
{
|
|
41757
|
-
"kind": "method",
|
|
41758
|
-
"name": "startTypingAnimation",
|
|
41759
|
-
"privacy": "private",
|
|
41760
|
-
"return": {
|
|
41761
|
-
"type": {
|
|
41762
|
-
"text": "void"
|
|
41763
|
-
}
|
|
41764
|
-
},
|
|
41765
|
-
"parameters": [
|
|
41766
|
-
{
|
|
41767
|
-
"name": "onComplete",
|
|
41768
|
-
"optional": true,
|
|
41769
|
-
"type": {
|
|
41770
|
-
"text": "() => void"
|
|
41771
|
-
}
|
|
41772
|
-
}
|
|
41773
|
-
],
|
|
41774
|
-
"description": "Starts the typewriter animation"
|
|
41775
|
-
},
|
|
41776
|
-
{
|
|
41777
|
-
"kind": "method",
|
|
41778
|
-
"name": "clearTypingAnimation",
|
|
41779
|
-
"privacy": "private",
|
|
41780
|
-
"return": {
|
|
41781
|
-
"type": {
|
|
41782
|
-
"text": "void"
|
|
41783
|
-
}
|
|
41784
|
-
},
|
|
41785
|
-
"description": "Clears the typing animation timeout"
|
|
41786
|
-
},
|
|
41787
|
-
{
|
|
41788
|
-
"kind": "method",
|
|
41789
|
-
"name": "handleSlotChange",
|
|
41790
|
-
"privacy": "private",
|
|
41791
|
-
"return": {
|
|
41792
|
-
"type": {
|
|
41793
|
-
"text": "void"
|
|
41794
|
-
}
|
|
41795
|
-
},
|
|
41796
|
-
"description": "Handler for slotchange event"
|
|
41797
|
-
}
|
|
41798
|
-
],
|
|
41799
|
-
"events": [
|
|
41800
|
-
{
|
|
41801
|
-
"type": {
|
|
41802
|
-
"text": "CustomEvent"
|
|
41803
|
-
}
|
|
41804
|
-
},
|
|
41805
|
-
{
|
|
41806
|
-
"description": "(React: onTypingComplete) Fired when the typewriter finishes typing all content. Detail: \\{ finalContent: string \\}",
|
|
41807
|
-
"name": "typing-complete",
|
|
41808
|
-
"reactName": "onTypingComplete"
|
|
41809
|
-
},
|
|
41810
|
-
{
|
|
41811
|
-
"description": "(React: onChange) Fired when the content of the typewriter changes. Detail: \\{ content: string, isTyping: boolean \\}",
|
|
41812
|
-
"name": "change",
|
|
41813
|
-
"reactName": "onChange"
|
|
41814
|
-
}
|
|
41815
|
-
],
|
|
41816
|
-
"attributes": [
|
|
41817
|
-
{
|
|
41818
|
-
"name": "type",
|
|
41819
|
-
"type": {
|
|
41820
|
-
"text": "TextType"
|
|
41821
|
-
},
|
|
41822
|
-
"description": "Specifies the text style to be applied to the internal text component.\nUses the same types as the Text component.",
|
|
41823
|
-
"default": "body-large-regular",
|
|
41824
|
-
"fieldName": "type"
|
|
41825
|
-
},
|
|
41826
|
-
{
|
|
41827
|
-
"name": "tagname",
|
|
41828
|
-
"type": {
|
|
41829
|
-
"text": "TagName | undefined"
|
|
41830
|
-
},
|
|
41831
|
-
"description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the internal text element.\n\nAcceptable values include all valid tag names from the Text component.",
|
|
41832
|
-
"fieldName": "tagname"
|
|
41833
|
-
},
|
|
41834
|
-
{
|
|
41835
|
-
"name": "speed",
|
|
41836
|
-
"type": {
|
|
41837
|
-
"text": "TypewriterSpeed"
|
|
41838
|
-
},
|
|
41839
|
-
"description": "Speed of the typewriter effect in milliseconds per character.\nCan be a string preset or a numeric string in milliseconds.\n- 'very-slow' = 240ms per character\n- 'slow' = 120ms per character\n- 'normal' = 60ms per character (default)\n- 'fast' = 20ms per character\n- 'very-fast' = 1ms per character\n- Or any numeric string representing milliseconds (e.g., '100')",
|
|
41840
|
-
"default": "'normal' (60ms per character)",
|
|
41841
|
-
"fieldName": "speed"
|
|
41842
|
-
},
|
|
41843
|
-
{
|
|
41844
|
-
"name": "max-queue-size",
|
|
41845
|
-
"type": {
|
|
41846
|
-
"text": "number"
|
|
41847
|
-
},
|
|
41848
|
-
"description": "Maximum number of text chunks that can be queued before oldest chunks are dropped.\nSet to prevent memory accumulation from excessive queuing.",
|
|
41849
|
-
"default": "Number.MAX_SAFE_INTEGER (effectively unlimited)",
|
|
41850
|
-
"fieldName": "maxQueueSize"
|
|
41851
|
-
}
|
|
41852
|
-
],
|
|
41853
|
-
"superclass": {
|
|
41854
|
-
"name": "Component",
|
|
41855
|
-
"module": "/src/models"
|
|
41856
|
-
},
|
|
41857
|
-
"tagName": "mdc-typewriter",
|
|
41858
|
-
"jsDoc": "/**\n * Typewriter component that creates a typewriter effect on text content.\n * It uses the Text component internally, adding a progressive typing effect.\n *\n * The `type` attribute allows changing the text style (passed to the internal Text component).\n * The `tagname` attribute allows changing the tag name of the text element (passed to the internal Text component).\n * The default tag name is `p`.\n *\n * The `speed` attribute controls typing speed in milliseconds per character:\n * - 'very-slow' = 240ms per character\n * - 'slow' = 120ms per character\n * - 'normal' = 60ms per character (default)\n * - 'fast' = 20ms per character\n * - 'very-fast' = 1ms per character\n * - Or any numeric string representing milliseconds\n *\n * Advanced features:\n * - Dynamic speed adjustment during typing\n * - Chunked text addition via addTextChunk() method\n * - Instant text addition via addInstantTextChunk() method or instant parameter\n * - Mixed instant and animated chunks in queue\n * - Continues typing in background tabs\n * - Performance optimized for large text\n * - maxQueueSize to limit memory usage from excessive queuing\n * - event handling for typing completion and content changes\n *\n * The component includes accessibility features:\n * - Screen readers announce the complete text, not character by character\n * - Uses aria-live=\"polite\" for dynamic content updates\n * - Sets aria-busy during typing animation\n *\n * @dependency mdc-text\n *\n * @tagname mdc-typewriter\n * @slot - Default slot for text content\n *\n * @csspart container - Container for the text element\n * @csspart text - The text element (forwarded to mdc-text)\n *\n * @event typing-complete - (React: onTypingComplete) Fired when the typewriter finishes typing all content.\n * Detail: \\{ finalContent: string \\}\n * @event change - (React: onChange) Fired when the content of the typewriter changes.\n * Detail: \\{ content: string, isTyping: boolean \\}\n */",
|
|
41859
|
-
"customElement": true
|
|
41860
|
-
}
|
|
41861
|
-
],
|
|
41862
|
-
"exports": [
|
|
41863
|
-
{
|
|
41864
|
-
"kind": "js",
|
|
41865
|
-
"name": "default",
|
|
41866
|
-
"declaration": {
|
|
41867
|
-
"name": "Typewriter",
|
|
41868
|
-
"module": "components/typewriter/typewriter.component.js"
|
|
41869
|
-
}
|
|
41870
|
-
}
|
|
41871
|
-
]
|
|
41872
|
-
},
|
|
41873
|
-
{
|
|
41874
|
-
"kind": "javascript-module",
|
|
41875
|
-
"path": "components/virtualizedlist/virtualizedlist.component.js",
|
|
41876
|
-
"declarations": [
|
|
41877
|
-
{
|
|
41878
|
-
"kind": "class",
|
|
41879
|
-
"description": "`mdc-virtualizedlist` component for creating custom virtualized lists.\nIMPORTANT: This component does not create it's own list/list items.\nUse the setlistdata callback prop to update client state in order to\nPass list/listitems as a child of this component, which this will virtuailze\nThis implementation handles dynamic lists as well as fixed sized lists.\nPlease refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.",
|
|
41880
|
-
"name": "VirtualizedList",
|
|
41881
|
-
"slots": [
|
|
41882
|
-
{
|
|
41883
|
-
"description": "Client side List with nested list items.",
|
|
41884
|
-
"name": ""
|
|
41885
|
-
}
|
|
41886
|
-
],
|
|
41887
|
-
"members": [
|
|
41888
|
-
{
|
|
41889
|
-
"kind": "field",
|
|
41890
|
-
"name": "onscroll",
|
|
41891
|
-
"type": {
|
|
41892
|
-
"text": "((this: GlobalEventHandlers, ev: Event) => void) | null"
|
|
41893
|
-
},
|
|
41894
|
-
"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.",
|
|
41895
|
-
"default": "null",
|
|
41896
|
-
"attribute": "onscroll"
|
|
41897
|
-
},
|
|
41898
|
-
{
|
|
41899
|
-
"kind": "field",
|
|
41900
|
-
"name": "virtualizerProps",
|
|
41901
|
-
"type": {
|
|
41902
|
-
"text": "VirtualizerProps"
|
|
41903
|
-
},
|
|
41904
|
-
"description": "Object that sets and updates the virtualizer with any relevant props.\nThere are two required object props in order to get virtualization to work properly.\ncount - The length of your list that you are virtualizing.\nAs your list grows/shrinks, this component must be updated with the appropriate value\n(Same with any other updated prop).\nestimateSize - A function that returns the estimated size of your items.\nIf your list is fixed, this will just be the size of your items.\nIf your list is dynamic, try to return approximate the size of each item.\n\nA full list of possible props can be in\n[Tanstack Virtualizer API Docs](https://tanstack.com/virtual/latest/docs/api/virtualizer)",
|
|
41905
|
-
"attribute": "virtualizerprops"
|
|
41906
|
-
},
|
|
41907
|
-
{
|
|
41908
|
-
"kind": "field",
|
|
41909
|
-
"name": "setlistdata",
|
|
41910
|
-
"type": {
|
|
41911
|
-
"text": "(({ virtualItems, measureElement, listStyle }: SetListDataProps) => void) | null"
|
|
41912
|
-
},
|
|
41913
|
-
"description": "Callback that gets envoked when updates to the virtualizer interally occur.\nThis must be implemented in such a way that this function will trigger update to parent.\n\nvirtualItems - Array that will be what the client displays on screen. Use this to render\na List of your choosing with these items nested inside as your ListItems.\nmeasureElement - Ref to pass to each ListItem rendered client side.\nEach ListItem should also be be passed key and a data-index (which can be found on the virtualItem).\nlistStyle - This should be passed as the style attribute to your List.",
|
|
41914
|
-
"default": "null",
|
|
41915
|
-
"attribute": "setlistdata"
|
|
41916
|
-
},
|
|
41917
|
-
{
|
|
41918
|
-
"kind": "field",
|
|
41919
|
-
"name": "scrollElementRef",
|
|
41920
|
-
"type": {
|
|
41921
|
-
"text": "Ref<HTMLDivElement>"
|
|
41922
|
-
},
|
|
41923
|
-
"privacy": "public"
|
|
41924
|
-
},
|
|
41925
|
-
{
|
|
41926
|
-
"kind": "field",
|
|
41927
|
-
"name": "virtualizer",
|
|
41928
|
-
"type": {
|
|
41929
|
-
"text": "Virtualizer<Element, Element> | null"
|
|
41930
|
-
},
|
|
41931
|
-
"privacy": "public",
|
|
41932
|
-
"default": "null"
|
|
41933
|
-
},
|
|
41934
|
-
{
|
|
41935
|
-
"kind": "field",
|
|
41936
|
-
"name": "virtualItems",
|
|
41937
|
-
"type": {
|
|
41938
|
-
"text": "Array<VirtualItem>"
|
|
41939
|
-
},
|
|
41940
|
-
"privacy": "public",
|
|
41941
|
-
"default": "[]"
|
|
41942
|
-
},
|
|
41943
|
-
{
|
|
41944
|
-
"kind": "field",
|
|
41945
|
-
"name": "virtualizerController",
|
|
41946
|
-
"type": {
|
|
41947
|
-
"text": "null"
|
|
41948
|
-
},
|
|
41949
|
-
"default": "null"
|
|
41950
|
-
}
|
|
41951
|
-
],
|
|
41952
|
-
"events": [
|
|
41953
|
-
{
|
|
41954
|
-
"description": "(React: onScroll) Event that gets called when user scrolls inside of list.",
|
|
41955
|
-
"name": "onscroll",
|
|
41956
|
-
"reactName": "onScroll"
|
|
41957
|
-
}
|
|
41958
|
-
],
|
|
41959
|
-
"attributes": [
|
|
41960
|
-
{
|
|
41961
|
-
"name": "onscroll",
|
|
41962
|
-
"type": {
|
|
41963
|
-
"text": "((this: GlobalEventHandlers, ev: Event) => void) | null"
|
|
41964
|
-
},
|
|
41965
|
-
"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.",
|
|
41966
|
-
"default": "null",
|
|
41967
|
-
"fieldName": "onscroll"
|
|
41968
|
-
},
|
|
41969
|
-
{
|
|
41970
|
-
"name": "virtualizerprops",
|
|
41971
|
-
"type": {
|
|
41972
|
-
"text": "VirtualizerProps"
|
|
41973
|
-
},
|
|
41974
|
-
"description": "Object that sets and updates the virtualizer with any relevant props.\nThere are two required object props in order to get virtualization to work properly.\ncount - The length of your list that you are virtualizing.\nAs your list grows/shrinks, this component must be updated with the appropriate value\n(Same with any other updated prop).\nestimateSize - A function that returns the estimated size of your items.\nIf your list is fixed, this will just be the size of your items.\nIf your list is dynamic, try to return approximate the size of each item.\n\nA full list of possible props can be in\n[Tanstack Virtualizer API Docs](https://tanstack.com/virtual/latest/docs/api/virtualizer)",
|
|
41975
|
-
"fieldName": "virtualizerProps"
|
|
41976
|
-
},
|
|
41977
|
-
{
|
|
41978
|
-
"name": "setlistdata",
|
|
41979
|
-
"type": {
|
|
41980
|
-
"text": "(({ virtualItems, measureElement, listStyle }: SetListDataProps) => void) | null"
|
|
41981
|
-
},
|
|
41982
|
-
"description": "Callback that gets envoked when updates to the virtualizer interally occur.\nThis must be implemented in such a way that this function will trigger update to parent.\n\nvirtualItems - Array that will be what the client displays on screen. Use this to render\na List of your choosing with these items nested inside as your ListItems.\nmeasureElement - Ref to pass to each ListItem rendered client side.\nEach ListItem should also be be passed key and a data-index (which can be found on the virtualItem).\nlistStyle - This should be passed as the style attribute to your List.",
|
|
41983
|
-
"default": "null",
|
|
41984
|
-
"fieldName": "setlistdata"
|
|
41985
|
-
}
|
|
41986
|
-
],
|
|
41987
|
-
"superclass": {
|
|
41988
|
-
"name": "Component",
|
|
41989
|
-
"module": "/src/models"
|
|
41990
|
-
},
|
|
41991
|
-
"tagName": "mdc-virtualizedlist",
|
|
41992
|
-
"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 onscroll - (React: onScroll) Event that gets called when user scrolls inside of list.\n *\n * @slot - Client side List with nested list items.\n */",
|
|
41993
|
-
"customElement": true
|
|
41994
|
-
}
|
|
41995
|
-
],
|
|
41996
|
-
"exports": [
|
|
41997
|
-
{
|
|
41998
|
-
"kind": "js",
|
|
41999
|
-
"name": "default",
|
|
42000
|
-
"declaration": {
|
|
42001
|
-
"name": "VirtualizedList",
|
|
42002
|
-
"module": "components/virtualizedlist/virtualizedlist.component.js"
|
|
42003
|
-
}
|
|
42004
|
-
}
|
|
42005
|
-
]
|
|
42006
|
-
},
|
|
42007
42007
|
{
|
|
42008
42008
|
"kind": "javascript-module",
|
|
42009
42009
|
"path": "utils/mixins/AutoFocusMixin.js",
|