@momentum-design/components 0.120.16 → 0.120.18

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.
Files changed (28) hide show
  1. package/dist/browser/index.js +219 -214
  2. package/dist/browser/index.js.map +4 -4
  3. package/dist/components/controltypeprovider/controltypeprovider.component.d.ts +34 -0
  4. package/dist/components/controltypeprovider/controltypeprovider.component.js +66 -0
  5. package/dist/components/controltypeprovider/controltypeprovider.constants.d.ts +6 -0
  6. package/dist/components/controltypeprovider/controltypeprovider.constants.js +7 -0
  7. package/dist/components/controltypeprovider/controltypeprovider.context.d.ts +5 -0
  8. package/dist/components/controltypeprovider/controltypeprovider.context.js +4 -0
  9. package/dist/components/controltypeprovider/controltypeprovider.types.d.ts +2 -0
  10. package/dist/components/controltypeprovider/controltypeprovider.types.js +1 -0
  11. package/dist/components/controltypeprovider/index.d.ts +7 -0
  12. package/dist/components/controltypeprovider/index.js +4 -0
  13. package/dist/components/formfieldwrapper/formfieldwrapper.subcomponent.js +1 -1
  14. package/dist/components/menuitemcheckbox/menuitemcheckbox.component.d.ts +1 -1
  15. package/dist/components/menuitemcheckbox/menuitemcheckbox.component.js +3 -3
  16. package/dist/components/searchfield/searchfield.styles.js +7 -2
  17. package/dist/custom-elements.json +518 -428
  18. package/dist/index.d.ts +2 -1
  19. package/dist/index.js +2 -1
  20. package/dist/react/controltypeprovider/index.d.ts +17 -0
  21. package/dist/react/controltypeprovider/index.js +26 -0
  22. package/dist/react/index.d.ts +3 -2
  23. package/dist/react/index.js +3 -2
  24. package/dist/utils/mixins/ControlTypeMixin.d.ts +7 -0
  25. package/dist/utils/mixins/ControlTypeMixin.js +40 -0
  26. package/package.json +1 -1
  27. package/dist/utils/mixins/ControlledMixin.d.ts +0 -6
  28. package/dist/utils/mixins/ControlledMixin.js +0 -20
@@ -4,149 +4,63 @@
4
4
  "modules": [
5
5
  {
6
6
  "kind": "javascript-module",
7
- "path": "components/accordion/accordion.component.js",
7
+ "path": "components/accordionbutton/accordionbutton.component.js",
8
8
  "declarations": [
9
9
  {
10
10
  "kind": "class",
11
- "description": "An accordion contains a header and body section with 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",
11
+ "description": "An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you do need any controls on your accordion heading, then it's advised to use `accordion` component.\n\nIf an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.",
12
+ "name": "AccordionButton",
13
13
  "cssProperties": [
14
14
  {
15
- "description": "The border color of the accordion.",
16
- "name": "--mdc-accordionbutton-border-color",
17
- "inheritedFrom": {
18
- "name": "AccordionButton",
19
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
20
- }
15
+ "description": "The border color of the accordion button.",
16
+ "name": "--mdc-accordionbutton-border-color"
21
17
  },
22
18
  {
23
- "description": "The hover color of the accordion.",
24
- "name": "--mdc-accordionbutton-hover-color",
25
- "inheritedFrom": {
26
- "name": "AccordionButton",
27
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
28
- }
19
+ "description": "The hover color of the accordion button.",
20
+ "name": "--mdc-accordionbutton-hover-color"
29
21
  },
30
22
  {
31
- "description": "The active color of the accordion.",
32
- "name": "--mdc-accordionbutton-active-color",
33
- "inheritedFrom": {
34
- "name": "AccordionButton",
35
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
36
- }
23
+ "description": "The active color of the accordion button.",
24
+ "name": "--mdc-accordionbutton-active-color"
37
25
  },
38
26
  {
39
- "description": "The disabled color of the accordion.",
40
- "name": "--mdc-accordionbutton-disabled-color",
41
- "inheritedFrom": {
42
- "name": "AccordionButton",
43
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
44
- }
27
+ "description": "The disabled color of the accordion button.",
28
+ "name": "--mdc-accordionbutton-disabled-color"
45
29
  }
46
30
  ],
47
31
  "cssParts": [
48
32
  {
49
- "description": "The body section of the accordion.",
50
- "name": "body-section",
51
- "inheritedFrom": {
52
- "name": "AccordionButton",
53
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
54
- }
55
- },
56
- {
57
- "description": "The header section of the accordion.",
58
- "name": "header-section",
59
- "inheritedFrom": {
60
- "name": "AccordionButton",
61
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
62
- }
33
+ "description": "The body section of the accordion button.",
34
+ "name": "body-section"
63
35
  },
64
36
  {
65
- "description": "The leading header of the accordion.",
66
- "name": "leading-header",
67
- "inheritedFrom": {
68
- "name": "AccordionButton",
69
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
70
- }
37
+ "description": "The header button section of the accordion button.",
38
+ "name": "header-button-section"
71
39
  },
72
40
  {
73
- "description": "The trailing header of the accordion.",
74
- "name": "trailing-header",
75
- "inheritedFrom": {
76
- "name": "AccordionButton",
77
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
78
- }
41
+ "description": "The header section of the accordion button.",
42
+ "name": "header-section"
79
43
  },
80
44
  {
81
- "description": "The trailing header button of the accordion.",
82
- "name": "trailing-header__button"
45
+ "description": "The leading header of the accordion button.",
46
+ "name": "leading-header"
83
47
  },
84
48
  {
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
- }
49
+ "description": "The trailing header of the accordion button.",
50
+ "name": "trailing-header"
91
51
  },
92
52
  {
93
53
  "description": "The trailing header icon of the accordion button.",
94
- "name": "trailing-header__icon",
95
- "inheritedFrom": {
96
- "name": "AccordionButton",
97
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
98
- }
54
+ "name": "trailing-header__icon"
99
55
  }
100
56
  ],
101
57
  "slots": [
102
- {
103
- "description": "The leading controls slot of the accordion on the header section.",
104
- "name": "leading-controls"
105
- },
106
- {
107
- "description": "The trailing controls slot of the accordion on the header section.",
108
- "name": "trailing-controls"
109
- },
110
58
  {
111
59
  "description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
112
- "name": "default",
113
- "inheritedFrom": {
114
- "name": "AccordionButton",
115
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
116
- }
60
+ "name": "default"
117
61
  }
118
62
  ],
119
63
  "members": [
120
- {
121
- "kind": "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
- },
150
64
  {
151
65
  "kind": "field",
152
66
  "name": "size",
@@ -156,11 +70,7 @@
156
70
  "description": "The size of the accordion item.",
157
71
  "default": "'small'",
158
72
  "attribute": "size",
159
- "reflects": true,
160
- "inheritedFrom": {
161
- "name": "AccordionButton",
162
- "module": "components/accordionbutton/accordionbutton.component.js"
163
- }
73
+ "reflects": true
164
74
  },
165
75
  {
166
76
  "kind": "field",
@@ -171,11 +81,7 @@
171
81
  "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
172
82
  "default": "'default'",
173
83
  "attribute": "variant",
174
- "reflects": true,
175
- "inheritedFrom": {
176
- "name": "AccordionButton",
177
- "module": "components/accordionbutton/accordionbutton.component.js"
178
- }
84
+ "reflects": true
179
85
  },
180
86
  {
181
87
  "kind": "field",
@@ -186,11 +92,7 @@
186
92
  "description": "The aria level of the accordion component.",
187
93
  "default": "3",
188
94
  "attribute": "data-aria-level",
189
- "reflects": true,
190
- "inheritedFrom": {
191
- "name": "AccordionButton",
192
- "module": "components/accordionbutton/accordionbutton.component.js"
193
- }
95
+ "reflects": true
194
96
  },
195
97
  {
196
98
  "kind": "field",
@@ -201,11 +103,7 @@
201
103
  "description": "The visibility of the accordion button.",
202
104
  "default": "false",
203
105
  "attribute": "expanded",
204
- "reflects": true,
205
- "inheritedFrom": {
206
- "name": "AccordionButton",
207
- "module": "components/accordionbutton/accordionbutton.component.js"
208
- }
106
+ "reflects": true
209
107
  },
210
108
  {
211
109
  "kind": "field",
@@ -215,11 +113,7 @@
215
113
  },
216
114
  "description": "The header text of the accordion item.",
217
115
  "attribute": "header-text",
218
- "reflects": true,
219
- "inheritedFrom": {
220
- "name": "AccordionButton",
221
- "module": "components/accordionbutton/accordionbutton.component.js"
222
- }
116
+ "reflects": true
223
117
  },
224
118
  {
225
119
  "kind": "field",
@@ -228,11 +122,7 @@
228
122
  "text": "IconNames | undefined"
229
123
  },
230
124
  "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
- }
125
+ "attribute": "prefix-icon"
236
126
  },
237
127
  {
238
128
  "kind": "method",
@@ -243,11 +133,7 @@
243
133
  "text": "void"
244
134
  }
245
135
  },
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
- }
136
+ "description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state."
251
137
  },
252
138
  {
253
139
  "kind": "method",
@@ -258,11 +144,7 @@
258
144
  "text": "void"
259
145
  }
260
146
  },
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
- }
147
+ "description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
266
148
  },
267
149
  {
268
150
  "kind": "method",
@@ -282,11 +164,7 @@
282
164
  "description": "The KeyboardEvent fired."
283
165
  }
284
166
  ],
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
- }
167
+ "description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys."
290
168
  },
291
169
  {
292
170
  "kind": "method",
@@ -305,11 +183,7 @@
305
183
  "text": "IconNames"
306
184
  }
307
185
  }
308
- ],
309
- "inheritedFrom": {
310
- "name": "AccordionButton",
311
- "module": "components/accordionbutton/accordionbutton.component.js"
312
- }
186
+ ]
313
187
  },
314
188
  {
315
189
  "kind": "method",
@@ -319,10 +193,16 @@
319
193
  "type": {
320
194
  "text": "TemplateResult | typeof nothing"
321
195
  }
322
- },
323
- "inheritedFrom": {
324
- "name": "AccordionButton",
325
- "module": "components/accordionbutton/accordionbutton.component.js"
196
+ }
197
+ },
198
+ {
199
+ "kind": "method",
200
+ "name": "renderHeader",
201
+ "privacy": "protected",
202
+ "return": {
203
+ "type": {
204
+ "text": "TemplateResult"
205
+ }
326
206
  }
327
207
  },
328
208
  {
@@ -334,11 +214,7 @@
334
214
  "text": ""
335
215
  }
336
216
  },
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
- }
217
+ "description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon."
342
218
  },
343
219
  {
344
220
  "kind": "method",
@@ -348,45 +224,32 @@
348
224
  "type": {
349
225
  "text": "TemplateResult | typeof nothing"
350
226
  }
351
- },
352
- "inheritedFrom": {
353
- "name": "AccordionButton",
354
- "module": "components/accordionbutton/accordionbutton.component.js"
355
227
  }
356
- }
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 body-section - The body section of the accordion.\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n */",
375
- "customElement": true,
376
- "attributes": [
228
+ },
377
229
  {
230
+ "kind": "field",
378
231
  "name": "disabled",
379
232
  "type": {
380
233
  "text": "boolean | undefined"
381
234
  },
382
235
  "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
383
236
  "default": "undefined",
384
- "fieldName": "disabled",
237
+ "attribute": "disabled",
238
+ "reflects": true,
385
239
  "inheritedFrom": {
386
240
  "name": "DisabledMixin",
387
- "module": "src/utils/mixins/DisabledMixin.ts"
241
+ "module": "utils/mixins/DisabledMixin.js"
388
242
  }
389
- },
243
+ }
244
+ ],
245
+ "events": [
246
+ {
247
+ "description": "(React: onShown) This event is triggered when the accordion button is expanded.",
248
+ "name": "shown",
249
+ "reactName": "onShown"
250
+ }
251
+ ],
252
+ "attributes": [
390
253
  {
391
254
  "name": "size",
392
255
  "type": {
@@ -394,11 +257,7 @@
394
257
  },
395
258
  "description": "The size of the accordion item.",
396
259
  "default": "'small'",
397
- "fieldName": "size",
398
- "inheritedFrom": {
399
- "name": "AccordionButton",
400
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
401
- }
260
+ "fieldName": "size"
402
261
  },
403
262
  {
404
263
  "name": "variant",
@@ -407,11 +266,7 @@
407
266
  },
408
267
  "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
409
268
  "default": "'default'",
410
- "fieldName": "variant",
411
- "inheritedFrom": {
412
- "name": "AccordionButton",
413
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
414
- }
269
+ "fieldName": "variant"
415
270
  },
416
271
  {
417
272
  "name": "data-aria-level",
@@ -420,11 +275,7 @@
420
275
  },
421
276
  "description": "The aria level of the accordion component.",
422
277
  "default": "3",
423
- "fieldName": "dataAriaLevel",
424
- "inheritedFrom": {
425
- "name": "AccordionButton",
426
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
427
- }
278
+ "fieldName": "dataAriaLevel"
428
279
  },
429
280
  {
430
281
  "name": "expanded",
@@ -433,11 +284,7 @@
433
284
  },
434
285
  "description": "The visibility of the accordion button.",
435
286
  "default": "false",
436
- "fieldName": "expanded",
437
- "inheritedFrom": {
438
- "name": "AccordionButton",
439
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
440
- }
287
+ "fieldName": "expanded"
441
288
  },
442
289
  {
443
290
  "name": "header-text",
@@ -445,11 +292,7 @@
445
292
  "text": "string | undefined"
446
293
  },
447
294
  "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
- }
295
+ "fieldName": "headerText"
453
296
  },
454
297
  {
455
298
  "name": "prefix-icon",
@@ -457,13 +300,35 @@
457
300
  "text": "IconNames | undefined"
458
301
  },
459
302
  "description": "The leading icon that is displayed before the header text.",
460
- "fieldName": "prefixIcon",
303
+ "fieldName": "prefixIcon"
304
+ },
305
+ {
306
+ "name": "disabled",
307
+ "type": {
308
+ "text": "boolean | undefined"
309
+ },
310
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
311
+ "default": "undefined",
312
+ "fieldName": "disabled",
461
313
  "inheritedFrom": {
462
- "name": "AccordionButton",
463
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
314
+ "name": "DisabledMixin",
315
+ "module": "src/utils/mixins/DisabledMixin.ts"
464
316
  }
465
317
  }
466
- ]
318
+ ],
319
+ "mixins": [
320
+ {
321
+ "name": "DisabledMixin",
322
+ "module": "/src/utils/mixins/DisabledMixin"
323
+ }
324
+ ],
325
+ "superclass": {
326
+ "name": "Component",
327
+ "module": "/src/models"
328
+ },
329
+ "tagName": "mdc-accordionbutton",
330
+ "jsDoc": "/**\n * An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you do need any controls on your accordion heading, then it's advised to use `accordion` component.\n *\n * If an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.\n *\n * @tagname mdc-accordionbutton\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion button is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion button.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.\n *\n * @csspart body-section - The body section of the accordion button.\n * @csspart header-button-section - The header button section of the accordion button.\n * @csspart header-section - The header section of the accordion button.\n * @csspart leading-header - The leading header of the accordion button.\n * @csspart trailing-header - The trailing header of the accordion button.\n * @csspart trailing-header__icon - The trailing header icon of the accordion button.\n */",
331
+ "customElement": true
467
332
  }
468
333
  ],
469
334
  "exports": [
@@ -471,71 +336,157 @@
471
336
  "kind": "js",
472
337
  "name": "default",
473
338
  "declaration": {
474
- "name": "Accordion",
475
- "module": "components/accordion/accordion.component.js"
339
+ "name": "AccordionButton",
340
+ "module": "components/accordionbutton/accordionbutton.component.js"
476
341
  }
477
342
  }
478
343
  ]
479
344
  },
480
345
  {
481
346
  "kind": "javascript-module",
482
- "path": "components/accordionbutton/accordionbutton.component.js",
347
+ "path": "components/accordion/accordion.component.js",
483
348
  "declarations": [
484
349
  {
485
350
  "kind": "class",
486
- "description": "An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you do need any controls on your accordion heading, then it's advised to use `accordion` component.\n\nIf an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.",
487
- "name": "AccordionButton",
351
+ "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.",
352
+ "name": "Accordion",
488
353
  "cssProperties": [
489
354
  {
490
- "description": "The border color of the accordion button.",
491
- "name": "--mdc-accordionbutton-border-color"
355
+ "description": "The border color of the accordion.",
356
+ "name": "--mdc-accordionbutton-border-color",
357
+ "inheritedFrom": {
358
+ "name": "AccordionButton",
359
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
360
+ }
492
361
  },
493
362
  {
494
- "description": "The hover color of the accordion button.",
495
- "name": "--mdc-accordionbutton-hover-color"
363
+ "description": "The hover color of the accordion.",
364
+ "name": "--mdc-accordionbutton-hover-color",
365
+ "inheritedFrom": {
366
+ "name": "AccordionButton",
367
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
368
+ }
496
369
  },
497
370
  {
498
- "description": "The active color of the accordion button.",
499
- "name": "--mdc-accordionbutton-active-color"
371
+ "description": "The active color of the accordion.",
372
+ "name": "--mdc-accordionbutton-active-color",
373
+ "inheritedFrom": {
374
+ "name": "AccordionButton",
375
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
376
+ }
500
377
  },
501
378
  {
502
- "description": "The disabled color of the accordion button.",
503
- "name": "--mdc-accordionbutton-disabled-color"
379
+ "description": "The disabled color of the accordion.",
380
+ "name": "--mdc-accordionbutton-disabled-color",
381
+ "inheritedFrom": {
382
+ "name": "AccordionButton",
383
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
384
+ }
504
385
  }
505
386
  ],
506
387
  "cssParts": [
507
388
  {
508
- "description": "The body section of the accordion button.",
509
- "name": "body-section"
389
+ "description": "The body section of the accordion.",
390
+ "name": "body-section",
391
+ "inheritedFrom": {
392
+ "name": "AccordionButton",
393
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
394
+ }
510
395
  },
511
396
  {
512
- "description": "The header button section of the accordion button.",
513
- "name": "header-button-section"
397
+ "description": "The header section of the accordion.",
398
+ "name": "header-section",
399
+ "inheritedFrom": {
400
+ "name": "AccordionButton",
401
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
402
+ }
514
403
  },
515
404
  {
516
- "description": "The header section of the accordion button.",
517
- "name": "header-section"
405
+ "description": "The leading header of the accordion.",
406
+ "name": "leading-header",
407
+ "inheritedFrom": {
408
+ "name": "AccordionButton",
409
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
410
+ }
518
411
  },
519
412
  {
520
- "description": "The leading header of the accordion button.",
521
- "name": "leading-header"
413
+ "description": "The trailing header of the accordion.",
414
+ "name": "trailing-header",
415
+ "inheritedFrom": {
416
+ "name": "AccordionButton",
417
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
418
+ }
522
419
  },
523
420
  {
524
- "description": "The trailing header of the accordion button.",
525
- "name": "trailing-header"
421
+ "description": "The trailing header button of the accordion.",
422
+ "name": "trailing-header__button"
423
+ },
424
+ {
425
+ "description": "The header button section of the accordion button.",
426
+ "name": "header-button-section",
427
+ "inheritedFrom": {
428
+ "name": "AccordionButton",
429
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
430
+ }
526
431
  },
527
432
  {
528
433
  "description": "The trailing header icon of the accordion button.",
529
- "name": "trailing-header__icon"
434
+ "name": "trailing-header__icon",
435
+ "inheritedFrom": {
436
+ "name": "AccordionButton",
437
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
438
+ }
530
439
  }
531
440
  ],
532
441
  "slots": [
442
+ {
443
+ "description": "The leading controls slot of the accordion on the header section.",
444
+ "name": "leading-controls"
445
+ },
446
+ {
447
+ "description": "The trailing controls slot of the accordion on the header section.",
448
+ "name": "trailing-controls"
449
+ },
533
450
  {
534
451
  "description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
535
- "name": "default"
452
+ "name": "default",
453
+ "inheritedFrom": {
454
+ "name": "AccordionButton",
455
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
456
+ }
536
457
  }
537
458
  ],
538
459
  "members": [
460
+ {
461
+ "kind": "method",
462
+ "name": "renderHeader",
463
+ "privacy": "protected",
464
+ "return": {
465
+ "type": {
466
+ "text": ""
467
+ }
468
+ },
469
+ "description": "Renders the header section of the accordion.\nThis includes the leading icon, text and controls, and the trailing controls.\nThe trailing controls include the expand/collapse button.\nThe button is disabled if the accordion is disabled.\nThe button is also given the aria-controls attribute set to the id of the body section.\nThe button is also given the aria-expanded attribute set to the expanded state of the accordion.\nThe prefix icon of the button is set to the expanded state of the accordion.",
470
+ "inheritedFrom": {
471
+ "name": "AccordionButton",
472
+ "module": "components/accordionbutton/accordionbutton.component.js"
473
+ }
474
+ },
475
+ {
476
+ "kind": "field",
477
+ "name": "disabled",
478
+ "type": {
479
+ "text": "boolean | undefined"
480
+ },
481
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
482
+ "default": "undefined",
483
+ "attribute": "disabled",
484
+ "reflects": true,
485
+ "inheritedFrom": {
486
+ "name": "AccordionButton",
487
+ "module": "components/accordionbutton/accordionbutton.component.js"
488
+ }
489
+ },
539
490
  {
540
491
  "kind": "field",
541
492
  "name": "size",
@@ -545,7 +496,11 @@
545
496
  "description": "The size of the accordion item.",
546
497
  "default": "'small'",
547
498
  "attribute": "size",
548
- "reflects": true
499
+ "reflects": true,
500
+ "inheritedFrom": {
501
+ "name": "AccordionButton",
502
+ "module": "components/accordionbutton/accordionbutton.component.js"
503
+ }
549
504
  },
550
505
  {
551
506
  "kind": "field",
@@ -556,7 +511,11 @@
556
511
  "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
557
512
  "default": "'default'",
558
513
  "attribute": "variant",
559
- "reflects": true
514
+ "reflects": true,
515
+ "inheritedFrom": {
516
+ "name": "AccordionButton",
517
+ "module": "components/accordionbutton/accordionbutton.component.js"
518
+ }
560
519
  },
561
520
  {
562
521
  "kind": "field",
@@ -567,7 +526,11 @@
567
526
  "description": "The aria level of the accordion component.",
568
527
  "default": "3",
569
528
  "attribute": "data-aria-level",
570
- "reflects": true
529
+ "reflects": true,
530
+ "inheritedFrom": {
531
+ "name": "AccordionButton",
532
+ "module": "components/accordionbutton/accordionbutton.component.js"
533
+ }
571
534
  },
572
535
  {
573
536
  "kind": "field",
@@ -578,7 +541,11 @@
578
541
  "description": "The visibility of the accordion button.",
579
542
  "default": "false",
580
543
  "attribute": "expanded",
581
- "reflects": true
544
+ "reflects": true,
545
+ "inheritedFrom": {
546
+ "name": "AccordionButton",
547
+ "module": "components/accordionbutton/accordionbutton.component.js"
548
+ }
582
549
  },
583
550
  {
584
551
  "kind": "field",
@@ -588,7 +555,11 @@
588
555
  },
589
556
  "description": "The header text of the accordion item.",
590
557
  "attribute": "header-text",
591
- "reflects": true
558
+ "reflects": true,
559
+ "inheritedFrom": {
560
+ "name": "AccordionButton",
561
+ "module": "components/accordionbutton/accordionbutton.component.js"
562
+ }
592
563
  },
593
564
  {
594
565
  "kind": "field",
@@ -597,7 +568,11 @@
597
568
  "text": "IconNames | undefined"
598
569
  },
599
570
  "description": "The leading icon that is displayed before the header text.",
600
- "attribute": "prefix-icon"
571
+ "attribute": "prefix-icon",
572
+ "inheritedFrom": {
573
+ "name": "AccordionButton",
574
+ "module": "components/accordionbutton/accordionbutton.component.js"
575
+ }
601
576
  },
602
577
  {
603
578
  "kind": "method",
@@ -608,7 +583,11 @@
608
583
  "text": "void"
609
584
  }
610
585
  },
611
- "description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state."
586
+ "description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state.",
587
+ "inheritedFrom": {
588
+ "name": "AccordionButton",
589
+ "module": "components/accordionbutton/accordionbutton.component.js"
590
+ }
612
591
  },
613
592
  {
614
593
  "kind": "method",
@@ -619,7 +598,11 @@
619
598
  "text": "void"
620
599
  }
621
600
  },
622
- "description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
601
+ "description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state.",
602
+ "inheritedFrom": {
603
+ "name": "AccordionButton",
604
+ "module": "components/accordionbutton/accordionbutton.component.js"
605
+ }
623
606
  },
624
607
  {
625
608
  "kind": "method",
@@ -639,7 +622,11 @@
639
622
  "description": "The KeyboardEvent fired."
640
623
  }
641
624
  ],
642
- "description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys."
625
+ "description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys.",
626
+ "inheritedFrom": {
627
+ "name": "AccordionButton",
628
+ "module": "components/accordionbutton/accordionbutton.component.js"
629
+ }
643
630
  },
644
631
  {
645
632
  "kind": "method",
@@ -658,7 +645,11 @@
658
645
  "text": "IconNames"
659
646
  }
660
647
  }
661
- ]
648
+ ],
649
+ "inheritedFrom": {
650
+ "name": "AccordionButton",
651
+ "module": "components/accordionbutton/accordionbutton.component.js"
652
+ }
662
653
  },
663
654
  {
664
655
  "kind": "method",
@@ -668,16 +659,10 @@
668
659
  "type": {
669
660
  "text": "TemplateResult | typeof nothing"
670
661
  }
671
- }
672
- },
673
- {
674
- "kind": "method",
675
- "name": "renderHeader",
676
- "privacy": "protected",
677
- "return": {
678
- "type": {
679
- "text": "TemplateResult"
680
- }
662
+ },
663
+ "inheritedFrom": {
664
+ "name": "AccordionButton",
665
+ "module": "components/accordionbutton/accordionbutton.component.js"
681
666
  }
682
667
  },
683
668
  {
@@ -689,7 +674,11 @@
689
674
  "text": ""
690
675
  }
691
676
  },
692
- "description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon."
677
+ "description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon.",
678
+ "inheritedFrom": {
679
+ "name": "AccordionButton",
680
+ "module": "components/accordionbutton/accordionbutton.component.js"
681
+ }
693
682
  },
694
683
  {
695
684
  "kind": "method",
@@ -699,32 +688,45 @@
699
688
  "type": {
700
689
  "text": "TemplateResult | typeof nothing"
701
690
  }
702
- }
703
- },
704
- {
705
- "kind": "field",
706
- "name": "disabled",
707
- "type": {
708
- "text": "boolean | undefined"
709
691
  },
710
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
711
- "default": "undefined",
712
- "attribute": "disabled",
713
- "reflects": true,
714
692
  "inheritedFrom": {
715
- "name": "DisabledMixin",
716
- "module": "utils/mixins/DisabledMixin.js"
693
+ "name": "AccordionButton",
694
+ "module": "components/accordionbutton/accordionbutton.component.js"
717
695
  }
718
696
  }
719
697
  ],
720
698
  "events": [
721
699
  {
722
- "description": "(React: onShown) This event is triggered when the accordion button is expanded.",
700
+ "description": "(React: onShown) This event is triggered when the accordion is expanded.",
723
701
  "name": "shown",
724
- "reactName": "onShown"
702
+ "reactName": "onShown",
703
+ "inheritedFrom": {
704
+ "name": "AccordionButton",
705
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
706
+ }
725
707
  }
726
708
  ],
709
+ "superclass": {
710
+ "name": "AccordionButton",
711
+ "module": "/src/components/accordionbutton/accordionbutton.component"
712
+ },
713
+ "tagName": "mdc-accordion",
714
+ "jsDoc": "/**\n * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.\n *\n * @tagname mdc-accordion\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot leading-controls - The leading controls slot of the accordion on the header section.\n * @slot trailing-controls - The trailing controls slot of the accordion on the header section.\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.\n *\n * @csspart body-section - The body section of the accordion.\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n */",
715
+ "customElement": true,
727
716
  "attributes": [
717
+ {
718
+ "name": "disabled",
719
+ "type": {
720
+ "text": "boolean | undefined"
721
+ },
722
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
723
+ "default": "undefined",
724
+ "fieldName": "disabled",
725
+ "inheritedFrom": {
726
+ "name": "AccordionButton",
727
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
728
+ }
729
+ },
728
730
  {
729
731
  "name": "size",
730
732
  "type": {
@@ -732,7 +734,11 @@
732
734
  },
733
735
  "description": "The size of the accordion item.",
734
736
  "default": "'small'",
735
- "fieldName": "size"
737
+ "fieldName": "size",
738
+ "inheritedFrom": {
739
+ "name": "AccordionButton",
740
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
741
+ }
736
742
  },
737
743
  {
738
744
  "name": "variant",
@@ -741,7 +747,11 @@
741
747
  },
742
748
  "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
743
749
  "default": "'default'",
744
- "fieldName": "variant"
750
+ "fieldName": "variant",
751
+ "inheritedFrom": {
752
+ "name": "AccordionButton",
753
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
754
+ }
745
755
  },
746
756
  {
747
757
  "name": "data-aria-level",
@@ -750,7 +760,11 @@
750
760
  },
751
761
  "description": "The aria level of the accordion component.",
752
762
  "default": "3",
753
- "fieldName": "dataAriaLevel"
763
+ "fieldName": "dataAriaLevel",
764
+ "inheritedFrom": {
765
+ "name": "AccordionButton",
766
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
767
+ }
754
768
  },
755
769
  {
756
770
  "name": "expanded",
@@ -759,7 +773,11 @@
759
773
  },
760
774
  "description": "The visibility of the accordion button.",
761
775
  "default": "false",
762
- "fieldName": "expanded"
776
+ "fieldName": "expanded",
777
+ "inheritedFrom": {
778
+ "name": "AccordionButton",
779
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
780
+ }
763
781
  },
764
782
  {
765
783
  "name": "header-text",
@@ -767,7 +785,11 @@
767
785
  "text": "string | undefined"
768
786
  },
769
787
  "description": "The header text of the accordion item.",
770
- "fieldName": "headerText"
788
+ "fieldName": "headerText",
789
+ "inheritedFrom": {
790
+ "name": "AccordionButton",
791
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
792
+ }
771
793
  },
772
794
  {
773
795
  "name": "prefix-icon",
@@ -775,35 +797,13 @@
775
797
  "text": "IconNames | undefined"
776
798
  },
777
799
  "description": "The leading icon that is displayed before the header text.",
778
- "fieldName": "prefixIcon"
779
- },
780
- {
781
- "name": "disabled",
782
- "type": {
783
- "text": "boolean | undefined"
784
- },
785
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
786
- "default": "undefined",
787
- "fieldName": "disabled",
800
+ "fieldName": "prefixIcon",
788
801
  "inheritedFrom": {
789
- "name": "DisabledMixin",
790
- "module": "src/utils/mixins/DisabledMixin.ts"
802
+ "name": "AccordionButton",
803
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
791
804
  }
792
805
  }
793
- ],
794
- "mixins": [
795
- {
796
- "name": "DisabledMixin",
797
- "module": "/src/utils/mixins/DisabledMixin"
798
- }
799
- ],
800
- "superclass": {
801
- "name": "Component",
802
- "module": "/src/models"
803
- },
804
- "tagName": "mdc-accordionbutton",
805
- "jsDoc": "/**\n * An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you do need any controls on your accordion heading, then it's advised to use `accordion` component.\n *\n * If an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.\n *\n * @tagname mdc-accordionbutton\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion button is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion button.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.\n *\n * @csspart body-section - The body section of the accordion button.\n * @csspart header-button-section - The header button section of the accordion button.\n * @csspart header-section - The header section of the accordion button.\n * @csspart leading-header - The leading header of the accordion button.\n * @csspart trailing-header - The trailing header of the accordion button.\n * @csspart trailing-header__icon - The trailing header icon of the accordion button.\n */",
806
- "customElement": true
806
+ ]
807
807
  }
808
808
  ],
809
809
  "exports": [
@@ -811,8 +811,8 @@
811
811
  "kind": "js",
812
812
  "name": "default",
813
813
  "declaration": {
814
- "name": "AccordionButton",
815
- "module": "components/accordionbutton/accordionbutton.component.js"
814
+ "name": "Accordion",
815
+ "module": "components/accordion/accordion.component.js"
816
816
  }
817
817
  }
818
818
  ]
@@ -14891,6 +14891,78 @@
14891
14891
  }
14892
14892
  ]
14893
14893
  },
14894
+ {
14895
+ "kind": "javascript-module",
14896
+ "path": "components/controltypeprovider/controltypeprovider.component.js",
14897
+ "declarations": [
14898
+ {
14899
+ "kind": "class",
14900
+ "description": "ContolTypeProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nattribute 'control-type' sets the default control type for all consumers\n - 'controlled' the consumer component will not handle any interaction itself, e.g. toggling a checkbox.\n - 'uncontrolled' the consumer component will handle interactions\n\nControlTypeMixin allows components to consume this context\nnote that this is intended to be set once, ControlTypeMixin will not update on changes to control-type",
14901
+ "name": "ControlTypeProvider",
14902
+ "members": [
14903
+ {
14904
+ "kind": "field",
14905
+ "name": "Context",
14906
+ "privacy": "public",
14907
+ "static": true,
14908
+ "description": "Context object of the ControlTypeProvider, to be consumed by child components",
14909
+ "readonly": true
14910
+ },
14911
+ {
14912
+ "kind": "field",
14913
+ "name": "innerControlType",
14914
+ "type": {
14915
+ "text": "ControlType"
14916
+ },
14917
+ "privacy": "private"
14918
+ },
14919
+ {
14920
+ "kind": "field",
14921
+ "name": "controlType",
14922
+ "description": "Whether the control type is 'controlled' or 'uncontrolled'",
14923
+ "default": "'uncontrolled'",
14924
+ "attribute": "control-type",
14925
+ "reflects": true
14926
+ },
14927
+ {
14928
+ "kind": "method",
14929
+ "name": "updateContext",
14930
+ "privacy": "protected",
14931
+ "return": {
14932
+ "type": {
14933
+ "text": "void"
14934
+ }
14935
+ }
14936
+ }
14937
+ ],
14938
+ "attributes": [
14939
+ {
14940
+ "name": "control-type",
14941
+ "description": "Whether the control type is 'controlled' or 'uncontrolled'",
14942
+ "default": "'uncontrolled'",
14943
+ "fieldName": "controlType"
14944
+ }
14945
+ ],
14946
+ "superclass": {
14947
+ "name": "Provider",
14948
+ "module": "/src/models"
14949
+ },
14950
+ "tagName": "mdc-controltypeprovider",
14951
+ "jsDoc": "/**\n * ContolTypeProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * attribute 'control-type' sets the default control type for all consumers\n - 'controlled' the consumer component will not handle any interaction itself, e.g. toggling a checkbox.\n - 'uncontrolled' the consumer component will handle interactions\n *\n * ControlTypeMixin allows components to consume this context\n * note that this is intended to be set once, ControlTypeMixin will not update on changes to control-type\n *\n * @tagname mdc-controltypeprovider\n *\n */",
14952
+ "customElement": true
14953
+ }
14954
+ ],
14955
+ "exports": [
14956
+ {
14957
+ "kind": "js",
14958
+ "name": "default",
14959
+ "declaration": {
14960
+ "name": "ControlTypeProvider",
14961
+ "module": "components/controltypeprovider/controltypeprovider.component.js"
14962
+ }
14963
+ }
14964
+ ]
14965
+ },
14894
14966
  {
14895
14967
  "kind": "javascript-module",
14896
14968
  "path": "components/dialog/dialog.component.js",
@@ -24444,17 +24516,28 @@
24444
24516
  },
24445
24517
  {
24446
24518
  "kind": "field",
24447
- "name": "controlled",
24519
+ "name": "controlTypeProviderContext",
24520
+ "privacy": "private",
24521
+ "readonly": true,
24522
+ "inheritedFrom": {
24523
+ "name": "ControlTypeMixin",
24524
+ "module": "utils/mixins/ControlTypeMixin.js"
24525
+ }
24526
+ },
24527
+ {
24528
+ "kind": "field",
24529
+ "name": "controlType",
24448
24530
  "type": {
24449
- "text": "boolean | undefined"
24531
+ "text": "ControlType | undefined"
24450
24532
  },
24451
- "description": "Indicates whether the component is controlled.\nWhen the component is controlled, it will not handle any interaction itself, e.g. toggling a checkbox.",
24533
+ "privacy": "public",
24534
+ "description": "Indicates whether the component is controlled or uncontrolled.\n- 'controlled' it will not handle any interaction itself, e.g. toggling a checkbox.\n- 'uncontrolled' it will handle interactions\n- undefined it will get the value from controltypeprovider, or default to 'uncontrolled'",
24452
24535
  "default": "undefined",
24453
- "attribute": "controlled",
24536
+ "attribute": "control-type",
24454
24537
  "reflects": true,
24455
24538
  "inheritedFrom": {
24456
- "name": "ControlledMixin",
24457
- "module": "utils/mixins/ControlledMixin.js"
24539
+ "name": "ControlTypeMixin",
24540
+ "module": "utils/mixins/ControlTypeMixin.js"
24458
24541
  }
24459
24542
  },
24460
24543
  {
@@ -24960,16 +25043,16 @@
24960
25043
  "fieldName": "indicator"
24961
25044
  },
24962
25045
  {
24963
- "name": "controlled",
25046
+ "name": "control-type",
24964
25047
  "type": {
24965
- "text": "boolean | undefined"
25048
+ "text": "ControlType | undefined"
24966
25049
  },
24967
- "description": "Indicates whether the component is controlled.\nWhen the component is controlled, it will not handle any interaction itself, e.g. toggling a checkbox.",
25050
+ "description": "Indicates whether the component is controlled or uncontrolled.\n- 'controlled' it will not handle any interaction itself, e.g. toggling a checkbox.\n- 'uncontrolled' it will handle interactions\n- undefined it will get the value from controltypeprovider, or default to 'uncontrolled'",
24968
25051
  "default": "undefined",
24969
- "fieldName": "controlled",
25052
+ "fieldName": "controlType",
24970
25053
  "inheritedFrom": {
24971
- "name": "ControlledMixin",
24972
- "module": "src/utils/mixins/ControlledMixin.ts"
25054
+ "name": "ControlTypeMixin",
25055
+ "module": "src/utils/mixins/ControlTypeMixin.ts"
24973
25056
  }
24974
25057
  },
24975
25058
  {
@@ -25135,8 +25218,8 @@
25135
25218
  ],
25136
25219
  "mixins": [
25137
25220
  {
25138
- "name": "ControlledMixin",
25139
- "module": "/src/utils/mixins/ControlledMixin"
25221
+ "name": "ControlTypeMixin",
25222
+ "module": "/src/utils/mixins/ControlTypeMixin"
25140
25223
  }
25141
25224
  ],
25142
25225
  "superclass": {
@@ -40252,88 +40335,6 @@
40252
40335
  }
40253
40336
  ]
40254
40337
  },
40255
- {
40256
- "kind": "javascript-module",
40257
- "path": "components/skeleton/skeleton.component.js",
40258
- "declarations": [
40259
- {
40260
- "kind": "class",
40261
- "description": "`mdc-skeleton` is a component that shows a grey placeholder area.\nIt provides visual feedback to users that content is being loaded.\n\n**Skeleton Variants:**\n- **rectangular**: Default variant with 0.25rem border radius\n- **rounded**: Has 0.5rem border radius\n- **circular**: Has 50% border radius for circular shapes\n- **button**: Optimized for button placeholders with 1.25rem border radius\n\n**Sizing Behavior:**\n1. If wrapping content, takes dimensions of wrapped content\n2. Otherwise grows to fill parent container",
40262
- "name": "Skeleton",
40263
- "cssProperties": [
40264
- {
40265
- "description": "background color of the skeleton",
40266
- "name": "--mdc-skeleton-background-color"
40267
- },
40268
- {
40269
- "description": "height of the skeleton",
40270
- "name": "--mdc-skeleton-height"
40271
- },
40272
- {
40273
- "description": "width of the skeleton",
40274
- "name": "--mdc-skeleton-width"
40275
- }
40276
- ],
40277
- "slots": [
40278
- {
40279
- "description": "Content to wrap (optional). When provided, skeleton takes dimensions of this content.",
40280
- "name": ""
40281
- }
40282
- ],
40283
- "members": [
40284
- {
40285
- "kind": "field",
40286
- "name": "variant",
40287
- "type": {
40288
- "text": "SkeletonVariant"
40289
- },
40290
- "description": "The variant of skeleton to display\n- **rectangular**: Default rectangular shape with 0.25rem border radius\n- **rounded**: Rounded rectangle with 0.5rem border radius\n- **circular**: Circular shape with 50% border radius\n- **button**: Button placeholder with 1.25rem border radius",
40291
- "default": "rectangular",
40292
- "attribute": "variant",
40293
- "reflects": true
40294
- },
40295
- {
40296
- "kind": "method",
40297
- "name": "checkSlotContent",
40298
- "privacy": "private",
40299
- "return": {
40300
- "type": {
40301
- "text": "void"
40302
- }
40303
- }
40304
- }
40305
- ],
40306
- "attributes": [
40307
- {
40308
- "name": "variant",
40309
- "type": {
40310
- "text": "SkeletonVariant"
40311
- },
40312
- "description": "The variant of skeleton to display\n- **rectangular**: Default rectangular shape with 0.25rem border radius\n- **rounded**: Rounded rectangle with 0.5rem border radius\n- **circular**: Circular shape with 50% border radius\n- **button**: Button placeholder with 1.25rem border radius",
40313
- "default": "rectangular",
40314
- "fieldName": "variant"
40315
- }
40316
- ],
40317
- "superclass": {
40318
- "name": "Component",
40319
- "module": "/src/models"
40320
- },
40321
- "tagName": "mdc-skeleton",
40322
- "jsDoc": "/**\n * `mdc-skeleton` is a component that shows a grey placeholder area.\n * It provides visual feedback to users that content is being loaded.\n *\n * **Skeleton Variants:**\n * - **rectangular**: Default variant with 0.25rem border radius\n * - **rounded**: Has 0.5rem border radius\n * - **circular**: Has 50% border radius for circular shapes\n * - **button**: Optimized for button placeholders with 1.25rem border radius\n *\n * **Sizing Behavior:**\n * 1. If wrapping content, takes dimensions of wrapped content\n * 2. Otherwise grows to fill parent container\n *\n * @tagname mdc-skeleton\n *\n * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.\n *\n * @cssproperty --mdc-skeleton-background-color - background color of the skeleton\n * @cssproperty --mdc-skeleton-height - height of the skeleton\n * @cssproperty --mdc-skeleton-width - width of the skeleton\n */",
40323
- "customElement": true
40324
- }
40325
- ],
40326
- "exports": [
40327
- {
40328
- "kind": "js",
40329
- "name": "default",
40330
- "declaration": {
40331
- "name": "Skeleton",
40332
- "module": "components/skeleton/skeleton.component.js"
40333
- }
40334
- }
40335
- ]
40336
- },
40337
40338
  {
40338
40339
  "kind": "javascript-module",
40339
40340
  "path": "components/slider/slider.component.js",
@@ -41254,6 +41255,88 @@
41254
41255
  }
41255
41256
  ]
41256
41257
  },
41258
+ {
41259
+ "kind": "javascript-module",
41260
+ "path": "components/skeleton/skeleton.component.js",
41261
+ "declarations": [
41262
+ {
41263
+ "kind": "class",
41264
+ "description": "`mdc-skeleton` is a component that shows a grey placeholder area.\nIt provides visual feedback to users that content is being loaded.\n\n**Skeleton Variants:**\n- **rectangular**: Default variant with 0.25rem border radius\n- **rounded**: Has 0.5rem border radius\n- **circular**: Has 50% border radius for circular shapes\n- **button**: Optimized for button placeholders with 1.25rem border radius\n\n**Sizing Behavior:**\n1. If wrapping content, takes dimensions of wrapped content\n2. Otherwise grows to fill parent container",
41265
+ "name": "Skeleton",
41266
+ "cssProperties": [
41267
+ {
41268
+ "description": "background color of the skeleton",
41269
+ "name": "--mdc-skeleton-background-color"
41270
+ },
41271
+ {
41272
+ "description": "height of the skeleton",
41273
+ "name": "--mdc-skeleton-height"
41274
+ },
41275
+ {
41276
+ "description": "width of the skeleton",
41277
+ "name": "--mdc-skeleton-width"
41278
+ }
41279
+ ],
41280
+ "slots": [
41281
+ {
41282
+ "description": "Content to wrap (optional). When provided, skeleton takes dimensions of this content.",
41283
+ "name": ""
41284
+ }
41285
+ ],
41286
+ "members": [
41287
+ {
41288
+ "kind": "field",
41289
+ "name": "variant",
41290
+ "type": {
41291
+ "text": "SkeletonVariant"
41292
+ },
41293
+ "description": "The variant of skeleton to display\n- **rectangular**: Default rectangular shape with 0.25rem border radius\n- **rounded**: Rounded rectangle with 0.5rem border radius\n- **circular**: Circular shape with 50% border radius\n- **button**: Button placeholder with 1.25rem border radius",
41294
+ "default": "rectangular",
41295
+ "attribute": "variant",
41296
+ "reflects": true
41297
+ },
41298
+ {
41299
+ "kind": "method",
41300
+ "name": "checkSlotContent",
41301
+ "privacy": "private",
41302
+ "return": {
41303
+ "type": {
41304
+ "text": "void"
41305
+ }
41306
+ }
41307
+ }
41308
+ ],
41309
+ "attributes": [
41310
+ {
41311
+ "name": "variant",
41312
+ "type": {
41313
+ "text": "SkeletonVariant"
41314
+ },
41315
+ "description": "The variant of skeleton to display\n- **rectangular**: Default rectangular shape with 0.25rem border radius\n- **rounded**: Rounded rectangle with 0.5rem border radius\n- **circular**: Circular shape with 50% border radius\n- **button**: Button placeholder with 1.25rem border radius",
41316
+ "default": "rectangular",
41317
+ "fieldName": "variant"
41318
+ }
41319
+ ],
41320
+ "superclass": {
41321
+ "name": "Component",
41322
+ "module": "/src/models"
41323
+ },
41324
+ "tagName": "mdc-skeleton",
41325
+ "jsDoc": "/**\n * `mdc-skeleton` is a component that shows a grey placeholder area.\n * It provides visual feedback to users that content is being loaded.\n *\n * **Skeleton Variants:**\n * - **rectangular**: Default variant with 0.25rem border radius\n * - **rounded**: Has 0.5rem border radius\n * - **circular**: Has 50% border radius for circular shapes\n * - **button**: Optimized for button placeholders with 1.25rem border radius\n *\n * **Sizing Behavior:**\n * 1. If wrapping content, takes dimensions of wrapped content\n * 2. Otherwise grows to fill parent container\n *\n * @tagname mdc-skeleton\n *\n * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.\n *\n * @cssproperty --mdc-skeleton-background-color - background color of the skeleton\n * @cssproperty --mdc-skeleton-height - height of the skeleton\n * @cssproperty --mdc-skeleton-width - width of the skeleton\n */",
41326
+ "customElement": true
41327
+ }
41328
+ ],
41329
+ "exports": [
41330
+ {
41331
+ "kind": "js",
41332
+ "name": "default",
41333
+ "declaration": {
41334
+ "name": "Skeleton",
41335
+ "module": "components/skeleton/skeleton.component.js"
41336
+ }
41337
+ }
41338
+ ]
41339
+ },
41257
41340
  {
41258
41341
  "kind": "javascript-module",
41259
41342
  "path": "components/staticcheckbox/staticcheckbox.component.js",
@@ -51660,34 +51743,41 @@
51660
51743
  },
51661
51744
  {
51662
51745
  "kind": "javascript-module",
51663
- "path": "utils/mixins/ControlledMixin.js",
51746
+ "path": "utils/mixins/ControlTypeMixin.js",
51664
51747
  "declarations": [
51665
51748
  {
51666
51749
  "kind": "mixin",
51667
51750
  "description": "",
51668
- "name": "ControlledMixin",
51751
+ "name": "ControlTypeMixin",
51669
51752
  "members": [
51670
51753
  {
51671
51754
  "kind": "field",
51672
- "name": "controlled",
51755
+ "name": "controlTypeProviderContext",
51756
+ "privacy": "private",
51757
+ "readonly": true
51758
+ },
51759
+ {
51760
+ "kind": "field",
51761
+ "name": "controlType",
51673
51762
  "type": {
51674
- "text": "boolean | undefined"
51763
+ "text": "ControlType | undefined"
51675
51764
  },
51676
- "description": "Indicates whether the component is controlled.\nWhen the component is controlled, it will not handle any interaction itself, e.g. toggling a checkbox.",
51765
+ "privacy": "public",
51766
+ "description": "Indicates whether the component is controlled or uncontrolled.\n- 'controlled' it will not handle any interaction itself, e.g. toggling a checkbox.\n- 'uncontrolled' it will handle interactions\n- undefined it will get the value from controltypeprovider, or default to 'uncontrolled'",
51677
51767
  "default": "undefined",
51678
- "attribute": "controlled",
51768
+ "attribute": "control-type",
51679
51769
  "reflects": true
51680
51770
  }
51681
51771
  ],
51682
51772
  "attributes": [
51683
51773
  {
51684
- "name": "controlled",
51774
+ "name": "control-type",
51685
51775
  "type": {
51686
- "text": "boolean | undefined"
51776
+ "text": "ControlType | undefined"
51687
51777
  },
51688
- "description": "Indicates whether the component is controlled.\nWhen the component is controlled, it will not handle any interaction itself, e.g. toggling a checkbox.",
51778
+ "description": "Indicates whether the component is controlled or uncontrolled.\n- 'controlled' it will not handle any interaction itself, e.g. toggling a checkbox.\n- 'uncontrolled' it will handle interactions\n- undefined it will get the value from controltypeprovider, or default to 'uncontrolled'",
51689
51779
  "default": "undefined",
51690
- "fieldName": "controlled"
51780
+ "fieldName": "controlType"
51691
51781
  }
51692
51782
  ],
51693
51783
  "parameters": [
@@ -51703,10 +51793,10 @@
51703
51793
  "exports": [
51704
51794
  {
51705
51795
  "kind": "js",
51706
- "name": "ControlledMixin",
51796
+ "name": "ControlTypeMixin",
51707
51797
  "declaration": {
51708
- "name": "ControlledMixin",
51709
- "module": "utils/mixins/ControlledMixin.js"
51798
+ "name": "ControlTypeMixin",
51799
+ "module": "utils/mixins/ControlTypeMixin.js"
51710
51800
  }
51711
51801
  }
51712
51802
  ]