@momentum-design/components 0.117.4 → 0.118.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/dist/browser/index.js +575 -505
  2. package/dist/browser/index.js.map +4 -4
  3. package/dist/components/announcementdialog/announcementdialog.component.d.ts +87 -0
  4. package/dist/components/announcementdialog/announcementdialog.component.js +131 -0
  5. package/dist/components/announcementdialog/announcementdialog.constants.d.ts +6 -0
  6. package/dist/components/announcementdialog/announcementdialog.constants.js +7 -0
  7. package/dist/components/announcementdialog/announcementdialog.styles.d.ts +2 -0
  8. package/dist/components/announcementdialog/announcementdialog.styles.js +52 -0
  9. package/dist/components/announcementdialog/announcementdialog.types.d.ts +6 -0
  10. package/dist/components/announcementdialog/announcementdialog.types.js +1 -0
  11. package/dist/components/announcementdialog/index.d.ts +9 -0
  12. package/dist/components/announcementdialog/index.js +6 -0
  13. package/dist/components/dialog/dialog.component.d.ts +14 -1
  14. package/dist/components/dialog/dialog.component.js +43 -27
  15. package/dist/components/dialog/dialog.styles.js +2 -0
  16. package/dist/components/dialog/dialog.types.d.ts +1 -1
  17. package/dist/components/list/list.component.d.ts +2 -0
  18. package/dist/components/list/list.component.js +15 -0
  19. package/dist/components/listitem/listitem.component.js +1 -2
  20. package/dist/components/select/select.component.js +8 -0
  21. package/dist/custom-elements.json +2625 -1329
  22. package/dist/index.d.ts +2 -1
  23. package/dist/index.js +2 -1
  24. package/dist/react/announcementdialog/index.d.ts +75 -0
  25. package/dist/react/announcementdialog/index.js +82 -0
  26. package/dist/react/dialog/index.d.ts +1 -0
  27. package/dist/react/dialog/index.js +1 -0
  28. package/dist/react/index.d.ts +5 -4
  29. package/dist/react/index.js +5 -4
  30. package/dist/utils/mixins/lifecycle/lifecycle.contants.d.ts +3 -3
  31. package/package.json +1 -1
package/dist/custom-elements.json CHANGED
@@ -4,63 +4,149 @@
4
4
  "modules": [
5
5
  {
6
6
  "kind": "javascript-module",
7
- "path": "components/accordionbutton/accordionbutton.component.js",
7
+ "path": "components/accordion/accordion.component.js",
8
8
  "declarations": [
9
9
  {
10
10
  "kind": "class",
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",
11
+ "description": "An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n- Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n- Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.",
12
+ "name": "Accordion",
13
13
  "cssProperties": [
14
14
  {
15
- "description": "The border color of the accordion button.",
16
- "name": "--mdc-accordionbutton-border-color"
15
+ "description": "The border color of the accordion.",
16
+ "name": "--mdc-accordionbutton-border-color",
17
+ "inheritedFrom": {
18
+ "name": "AccordionButton",
19
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
20
+ }
17
21
  },
18
22
  {
19
- "description": "The hover color of the accordion button.",
20
- "name": "--mdc-accordionbutton-hover-color"
23
+ "description": "The hover color of the accordion.",
24
+ "name": "--mdc-accordionbutton-hover-color",
25
+ "inheritedFrom": {
26
+ "name": "AccordionButton",
27
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
28
+ }
21
29
  },
22
30
  {
23
- "description": "The active color of the accordion button.",
24
- "name": "--mdc-accordionbutton-active-color"
31
+ "description": "The active color of the accordion.",
32
+ "name": "--mdc-accordionbutton-active-color",
33
+ "inheritedFrom": {
34
+ "name": "AccordionButton",
35
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
36
+ }
25
37
  },
26
38
  {
27
- "description": "The disabled color of the accordion button.",
28
- "name": "--mdc-accordionbutton-disabled-color"
39
+ "description": "The disabled color of the accordion.",
40
+ "name": "--mdc-accordionbutton-disabled-color",
41
+ "inheritedFrom": {
42
+ "name": "AccordionButton",
43
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
44
+ }
29
45
  }
30
46
  ],
31
47
  "cssParts": [
32
48
  {
33
- "description": "The header section of the accordion button.",
34
- "name": "header-section"
49
+ "description": "The header section of the accordion.",
50
+ "name": "header-section",
51
+ "inheritedFrom": {
52
+ "name": "AccordionButton",
53
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
54
+ }
35
55
  },
36
56
  {
37
- "description": "The header button section of the accordion button.",
38
- "name": "header-button-section"
57
+ "description": "The leading header of the accordion.",
58
+ "name": "leading-header",
59
+ "inheritedFrom": {
60
+ "name": "AccordionButton",
61
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
62
+ }
39
63
  },
40
64
  {
41
- "description": "The leading header of the accordion button.",
42
- "name": "leading-header"
65
+ "description": "The trailing header of the accordion.",
66
+ "name": "trailing-header",
67
+ "inheritedFrom": {
68
+ "name": "AccordionButton",
69
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
70
+ }
43
71
  },
44
72
  {
45
- "description": "The trailing header of the accordion button.",
46
- "name": "trailing-header"
73
+ "description": "The trailing header button of the accordion.",
74
+ "name": "trailing-header__button"
47
75
  },
48
76
  {
49
- "description": "The trailing header icon of the accordion button.",
50
- "name": "trailing-header__icon"
77
+ "description": "The body section of the accordion.",
78
+ "name": "body-section",
79
+ "inheritedFrom": {
80
+ "name": "AccordionButton",
81
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
82
+ }
51
83
  },
52
84
  {
53
- "description": "The body section of the accordion button.",
54
- "name": "body-section"
85
+ "description": "The header button section of the accordion button.",
86
+ "name": "header-button-section",
87
+ "inheritedFrom": {
88
+ "name": "AccordionButton",
89
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
90
+ }
91
+ },
92
+ {
93
+ "description": "The trailing header icon of the accordion button.",
94
+ "name": "trailing-header__icon",
95
+ "inheritedFrom": {
96
+ "name": "AccordionButton",
97
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
98
+ }
55
99
  }
56
100
  ],
57
101
  "slots": [
102
+ {
103
+ "description": "The leading controls slot of the accordion on the header section.",
104
+ "name": "leading-controls"
105
+ },
106
+ {
107
+ "description": "The trailing controls slot of the accordion on the header section.",
108
+ "name": "trailing-controls"
109
+ },
58
110
  {
59
111
  "description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
60
- "name": "default"
112
+ "name": "default",
113
+ "inheritedFrom": {
114
+ "name": "AccordionButton",
115
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
116
+ }
61
117
  }
62
118
  ],
63
119
  "members": [
120
+ {
121
+ "kind": "method",
122
+ "name": "renderHeader",
123
+ "privacy": "protected",
124
+ "return": {
125
+ "type": {
126
+ "text": ""
127
+ }
128
+ },
129
+ "description": "Renders the header section of the accordion.\nThis includes the leading icon, text and controls, and the trailing controls.\nThe trailing controls include the expand/collapse button.\nThe button is disabled if the accordion is disabled.\nThe button is also given the aria-controls attribute set to the id of the body section.\nThe button is also given the aria-expanded attribute set to the expanded state of the accordion.\nThe prefix icon of the button is set to the expanded state of the accordion.",
130
+ "inheritedFrom": {
131
+ "name": "AccordionButton",
132
+ "module": "components/accordionbutton/accordionbutton.component.js"
133
+ }
134
+ },
135
+ {
136
+ "kind": "field",
137
+ "name": "disabled",
138
+ "type": {
139
+ "text": "boolean | undefined"
140
+ },
141
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
142
+ "default": "undefined",
143
+ "attribute": "disabled",
144
+ "reflects": true,
145
+ "inheritedFrom": {
146
+ "name": "DisabledMixin",
147
+ "module": "utils/mixins/DisabledMixin.js"
148
+ }
149
+ },
64
150
  {
65
151
  "kind": "field",
66
152
  "name": "size",
@@ -70,7 +156,11 @@
70
156
  "description": "The size of the accordion item.",
71
157
  "default": "'small'",
72
158
  "attribute": "size",
73
- "reflects": true
159
+ "reflects": true,
160
+ "inheritedFrom": {
161
+ "name": "AccordionButton",
162
+ "module": "components/accordionbutton/accordionbutton.component.js"
163
+ }
74
164
  },
75
165
  {
76
166
  "kind": "field",
@@ -81,7 +171,11 @@
81
171
  "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
82
172
  "default": "'default'",
83
173
  "attribute": "variant",
84
- "reflects": true
174
+ "reflects": true,
175
+ "inheritedFrom": {
176
+ "name": "AccordionButton",
177
+ "module": "components/accordionbutton/accordionbutton.component.js"
178
+ }
85
179
  },
86
180
  {
87
181
  "kind": "field",
@@ -92,7 +186,11 @@
92
186
  "description": "The aria level of the accordion component.",
93
187
  "default": "3",
94
188
  "attribute": "data-aria-level",
95
- "reflects": true
189
+ "reflects": true,
190
+ "inheritedFrom": {
191
+ "name": "AccordionButton",
192
+ "module": "components/accordionbutton/accordionbutton.component.js"
193
+ }
96
194
  },
97
195
  {
98
196
  "kind": "field",
@@ -103,7 +201,11 @@
103
201
  "description": "The visibility of the accordion button.",
104
202
  "default": "false",
105
203
  "attribute": "expanded",
106
- "reflects": true
204
+ "reflects": true,
205
+ "inheritedFrom": {
206
+ "name": "AccordionButton",
207
+ "module": "components/accordionbutton/accordionbutton.component.js"
208
+ }
107
209
  },
108
210
  {
109
211
  "kind": "field",
@@ -113,7 +215,11 @@
113
215
  },
114
216
  "description": "The header text of the accordion item.",
115
217
  "attribute": "header-text",
116
- "reflects": true
218
+ "reflects": true,
219
+ "inheritedFrom": {
220
+ "name": "AccordionButton",
221
+ "module": "components/accordionbutton/accordionbutton.component.js"
222
+ }
117
223
  },
118
224
  {
119
225
  "kind": "field",
@@ -122,7 +228,11 @@
122
228
  "text": "IconNames | undefined"
123
229
  },
124
230
  "description": "The leading icon that is displayed before the header text.",
125
- "attribute": "prefix-icon"
231
+ "attribute": "prefix-icon",
232
+ "inheritedFrom": {
233
+ "name": "AccordionButton",
234
+ "module": "components/accordionbutton/accordionbutton.component.js"
235
+ }
126
236
  },
127
237
  {
128
238
  "kind": "method",
@@ -133,7 +243,11 @@
133
243
  "text": "void"
134
244
  }
135
245
  },
136
- "description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state."
246
+ "description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state.",
247
+ "inheritedFrom": {
248
+ "name": "AccordionButton",
249
+ "module": "components/accordionbutton/accordionbutton.component.js"
250
+ }
137
251
  },
138
252
  {
139
253
  "kind": "method",
@@ -144,7 +258,11 @@
144
258
  "text": "void"
145
259
  }
146
260
  },
147
- "description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
261
+ "description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state.",
262
+ "inheritedFrom": {
263
+ "name": "AccordionButton",
264
+ "module": "components/accordionbutton/accordionbutton.component.js"
265
+ }
148
266
  },
149
267
  {
150
268
  "kind": "method",
@@ -164,7 +282,11 @@
164
282
  "description": "The KeyboardEvent fired."
165
283
  }
166
284
  ],
167
- "description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys."
285
+ "description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys.",
286
+ "inheritedFrom": {
287
+ "name": "AccordionButton",
288
+ "module": "components/accordionbutton/accordionbutton.component.js"
289
+ }
168
290
  },
169
291
  {
170
292
  "kind": "method",
@@ -183,7 +305,11 @@
183
305
  "text": "IconNames"
184
306
  }
185
307
  }
186
- ]
308
+ ],
309
+ "inheritedFrom": {
310
+ "name": "AccordionButton",
311
+ "module": "components/accordionbutton/accordionbutton.component.js"
312
+ }
187
313
  },
188
314
  {
189
315
  "kind": "method",
@@ -193,16 +319,10 @@
193
319
  "type": {
194
320
  "text": "TemplateResult | typeof nothing"
195
321
  }
196
- }
197
- },
198
- {
199
- "kind": "method",
200
- "name": "renderHeader",
201
- "privacy": "protected",
202
- "return": {
203
- "type": {
204
- "text": "TemplateResult"
205
- }
322
+ },
323
+ "inheritedFrom": {
324
+ "name": "AccordionButton",
325
+ "module": "components/accordionbutton/accordionbutton.component.js"
206
326
  }
207
327
  },
208
328
  {
@@ -214,7 +334,11 @@
214
334
  "text": ""
215
335
  }
216
336
  },
217
- "description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon."
337
+ "description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon.",
338
+ "inheritedFrom": {
339
+ "name": "AccordionButton",
340
+ "module": "components/accordionbutton/accordionbutton.component.js"
341
+ }
218
342
  },
219
343
  {
220
344
  "kind": "method",
@@ -224,32 +348,45 @@
224
348
  "type": {
225
349
  "text": "TemplateResult | typeof nothing"
226
350
  }
227
- }
228
- },
229
- {
230
- "kind": "field",
231
- "name": "disabled",
232
- "type": {
233
- "text": "boolean | undefined"
234
351
  },
235
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
236
- "default": "undefined",
237
- "attribute": "disabled",
238
- "reflects": true,
239
352
  "inheritedFrom": {
240
- "name": "DisabledMixin",
241
- "module": "utils/mixins/DisabledMixin.js"
353
+ "name": "AccordionButton",
354
+ "module": "components/accordionbutton/accordionbutton.component.js"
242
355
  }
243
356
  }
244
357
  ],
245
358
  "events": [
246
359
  {
247
- "description": "(React: onShown) This event is triggered when the accordion button is expanded.",
360
+ "description": "(React: onShown) This event is triggered when the accordion is expanded.",
248
361
  "name": "shown",
249
- "reactName": "onShown"
362
+ "reactName": "onShown",
363
+ "inheritedFrom": {
364
+ "name": "AccordionButton",
365
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
366
+ }
250
367
  }
251
368
  ],
369
+ "superclass": {
370
+ "name": "AccordionButton",
371
+ "module": "/src/components/accordionbutton/accordionbutton.component"
372
+ },
373
+ "tagName": "mdc-accordion",
374
+ "jsDoc": "/**\n * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.\n *\n * @tagname mdc-accordion\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot leading-controls - The leading controls slot of the accordion on the header section.\n * @slot trailing-controls - The trailing controls slot of the accordion on the header section.\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.\n *\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n * @csspart body-section - The body section of the accordion.\n */",
375
+ "customElement": true,
252
376
  "attributes": [
377
+ {
378
+ "name": "disabled",
379
+ "type": {
380
+ "text": "boolean | undefined"
381
+ },
382
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
383
+ "default": "undefined",
384
+ "fieldName": "disabled",
385
+ "inheritedFrom": {
386
+ "name": "DisabledMixin",
387
+ "module": "src/utils/mixins/DisabledMixin.ts"
388
+ }
389
+ },
253
390
  {
254
391
  "name": "size",
255
392
  "type": {
@@ -257,7 +394,11 @@
257
394
  },
258
395
  "description": "The size of the accordion item.",
259
396
  "default": "'small'",
260
- "fieldName": "size"
397
+ "fieldName": "size",
398
+ "inheritedFrom": {
399
+ "name": "AccordionButton",
400
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
401
+ }
261
402
  },
262
403
  {
263
404
  "name": "variant",
@@ -266,7 +407,11 @@
266
407
  },
267
408
  "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
268
409
  "default": "'default'",
269
- "fieldName": "variant"
410
+ "fieldName": "variant",
411
+ "inheritedFrom": {
412
+ "name": "AccordionButton",
413
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
414
+ }
270
415
  },
271
416
  {
272
417
  "name": "data-aria-level",
@@ -275,7 +420,11 @@
275
420
  },
276
421
  "description": "The aria level of the accordion component.",
277
422
  "default": "3",
278
- "fieldName": "dataAriaLevel"
423
+ "fieldName": "dataAriaLevel",
424
+ "inheritedFrom": {
425
+ "name": "AccordionButton",
426
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
427
+ }
279
428
  },
280
429
  {
281
430
  "name": "expanded",
@@ -284,7 +433,11 @@
284
433
  },
285
434
  "description": "The visibility of the accordion button.",
286
435
  "default": "false",
287
- "fieldName": "expanded"
436
+ "fieldName": "expanded",
437
+ "inheritedFrom": {
438
+ "name": "AccordionButton",
439
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
440
+ }
288
441
  },
289
442
  {
290
443
  "name": "header-text",
@@ -292,7 +445,11 @@
292
445
  "text": "string | undefined"
293
446
  },
294
447
  "description": "The header text of the accordion item.",
295
- "fieldName": "headerText"
448
+ "fieldName": "headerText",
449
+ "inheritedFrom": {
450
+ "name": "AccordionButton",
451
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
452
+ }
296
453
  },
297
454
  {
298
455
  "name": "prefix-icon",
@@ -300,35 +457,13 @@
300
457
  "text": "IconNames | undefined"
301
458
  },
302
459
  "description": "The leading icon that is displayed before the header text.",
303
- "fieldName": "prefixIcon"
304
- },
305
- {
306
- "name": "disabled",
307
- "type": {
308
- "text": "boolean | undefined"
309
- },
310
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
311
- "default": "undefined",
312
- "fieldName": "disabled",
460
+ "fieldName": "prefixIcon",
313
461
  "inheritedFrom": {
314
- "name": "DisabledMixin",
315
- "module": "src/utils/mixins/DisabledMixin.ts"
462
+ "name": "AccordionButton",
463
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
316
464
  }
317
465
  }
318
- ],
319
- "mixins": [
320
- {
321
- "name": "DisabledMixin",
322
- "module": "/src/utils/mixins/DisabledMixin"
323
- }
324
- ],
325
- "superclass": {
326
- "name": "Component",
327
- "module": "/src/models"
328
- },
329
- "tagName": "mdc-accordionbutton",
330
- "jsDoc": "/**\n * An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you do need any controls on your accordion heading, then it's advised to use `accordion` component.\n *\n * If an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.\n *\n * @tagname mdc-accordionbutton\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion button is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion button.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.\n *\n * @csspart header-section - The header section of the accordion button.\n * @csspart header-button-section - The header button section of the accordion button.\n * @csspart leading-header - The leading header of the accordion button.\n * @csspart trailing-header - The trailing header of the accordion button.\n * @csspart trailing-header__icon - The trailing header icon of the accordion button.\n * @csspart body-section - The body section of the accordion button.\n */",
331
- "customElement": true
466
+ ]
332
467
  }
333
468
  ],
334
469
  "exports": [
@@ -336,8 +471,8 @@
336
471
  "kind": "js",
337
472
  "name": "default",
338
473
  "declaration": {
339
- "name": "AccordionButton",
340
- "module": "components/accordionbutton/accordionbutton.component.js"
474
+ "name": "Accordion",
475
+ "module": "components/accordion/accordion.component.js"
341
476
  }
342
477
  }
343
478
  ]
@@ -495,149 +630,63 @@
495
630
  },
496
631
  {
497
632
  "kind": "javascript-module",
498
- "path": "components/accordion/accordion.component.js",
633
+ "path": "components/accordionbutton/accordionbutton.component.js",
499
634
  "declarations": [
500
635
  {
501
636
  "kind": "class",
502
- "description": "An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n- Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n- Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.",
503
- "name": "Accordion",
637
+ "description": "An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you do need any controls on your accordion heading, then it's advised to use `accordion` component.\n\nIf an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.",
638
+ "name": "AccordionButton",
504
639
  "cssProperties": [
505
640
  {
506
- "description": "The border color of the accordion.",
507
- "name": "--mdc-accordionbutton-border-color",
508
- "inheritedFrom": {
509
- "name": "AccordionButton",
510
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
511
- }
641
+ "description": "The border color of the accordion button.",
642
+ "name": "--mdc-accordionbutton-border-color"
512
643
  },
513
644
  {
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
- }
645
+ "description": "The hover color of the accordion button.",
646
+ "name": "--mdc-accordionbutton-hover-color"
520
647
  },
521
648
  {
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
- }
649
+ "description": "The active color of the accordion button.",
650
+ "name": "--mdc-accordionbutton-active-color"
528
651
  },
529
652
  {
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
- }
653
+ "description": "The disabled color of the accordion button.",
654
+ "name": "--mdc-accordionbutton-disabled-color"
536
655
  }
537
656
  ],
538
657
  "cssParts": [
539
658
  {
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
- }
659
+ "description": "The header section of the accordion button.",
660
+ "name": "header-section"
554
661
  },
555
662
  {
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
- }
663
+ "description": "The header button section of the accordion button.",
664
+ "name": "header-button-section"
562
665
  },
563
666
  {
564
- "description": "The trailing header button of the accordion.",
565
- "name": "trailing-header__button"
667
+ "description": "The leading header of the accordion button.",
668
+ "name": "leading-header"
566
669
  },
567
670
  {
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
- }
671
+ "description": "The trailing header of the accordion button.",
672
+ "name": "trailing-header"
574
673
  },
575
674
  {
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
- }
675
+ "description": "The trailing header icon of the accordion button.",
676
+ "name": "trailing-header__icon"
582
677
  },
583
678
  {
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
- }
679
+ "description": "The body section of the accordion button.",
680
+ "name": "body-section"
590
681
  }
591
682
  ],
592
683
  "slots": [
593
- {
594
- "description": "The leading controls slot of the accordion on the header section.",
595
- "name": "leading-controls"
596
- },
597
- {
598
- "description": "The trailing controls slot of the accordion on the header section.",
599
- "name": "trailing-controls"
600
- },
601
684
  {
602
685
  "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
- }
686
+ "name": "default"
608
687
  }
609
688
  ],
610
689
  "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
690
  {
642
691
  "kind": "field",
643
692
  "name": "size",
@@ -647,11 +696,7 @@
647
696
  "description": "The size of the accordion item.",
648
697
  "default": "'small'",
649
698
  "attribute": "size",
650
- "reflects": true,
651
- "inheritedFrom": {
652
- "name": "AccordionButton",
653
- "module": "components/accordionbutton/accordionbutton.component.js"
654
- }
699
+ "reflects": true
655
700
  },
656
701
  {
657
702
  "kind": "field",
@@ -662,11 +707,7 @@
662
707
  "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
663
708
  "default": "'default'",
664
709
  "attribute": "variant",
665
- "reflects": true,
666
- "inheritedFrom": {
667
- "name": "AccordionButton",
668
- "module": "components/accordionbutton/accordionbutton.component.js"
669
- }
710
+ "reflects": true
670
711
  },
671
712
  {
672
713
  "kind": "field",
@@ -677,11 +718,7 @@
677
718
  "description": "The aria level of the accordion component.",
678
719
  "default": "3",
679
720
  "attribute": "data-aria-level",
680
- "reflects": true,
681
- "inheritedFrom": {
682
- "name": "AccordionButton",
683
- "module": "components/accordionbutton/accordionbutton.component.js"
684
- }
721
+ "reflects": true
685
722
  },
686
723
  {
687
724
  "kind": "field",
@@ -692,11 +729,7 @@
692
729
  "description": "The visibility of the accordion button.",
693
730
  "default": "false",
694
731
  "attribute": "expanded",
695
- "reflects": true,
696
- "inheritedFrom": {
697
- "name": "AccordionButton",
698
- "module": "components/accordionbutton/accordionbutton.component.js"
699
- }
732
+ "reflects": true
700
733
  },
701
734
  {
702
735
  "kind": "field",
@@ -706,11 +739,7 @@
706
739
  },
707
740
  "description": "The header text of the accordion item.",
708
741
  "attribute": "header-text",
709
- "reflects": true,
710
- "inheritedFrom": {
711
- "name": "AccordionButton",
712
- "module": "components/accordionbutton/accordionbutton.component.js"
713
- }
742
+ "reflects": true
714
743
  },
715
744
  {
716
745
  "kind": "field",
@@ -719,11 +748,7 @@
719
748
  "text": "IconNames | undefined"
720
749
  },
721
750
  "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
- }
751
+ "attribute": "prefix-icon"
727
752
  },
728
753
  {
729
754
  "kind": "method",
@@ -734,11 +759,7 @@
734
759
  "text": "void"
735
760
  }
736
761
  },
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
- }
762
+ "description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state."
742
763
  },
743
764
  {
744
765
  "kind": "method",
@@ -749,11 +770,7 @@
749
770
  "text": "void"
750
771
  }
751
772
  },
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
- }
773
+ "description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
757
774
  },
758
775
  {
759
776
  "kind": "method",
@@ -773,11 +790,7 @@
773
790
  "description": "The KeyboardEvent fired."
774
791
  }
775
792
  ],
776
- "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.",
777
- "inheritedFrom": {
778
- "name": "AccordionButton",
779
- "module": "components/accordionbutton/accordionbutton.component.js"
780
- }
793
+ "description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys."
781
794
  },
782
795
  {
783
796
  "kind": "method",
@@ -796,11 +809,7 @@
796
809
  "text": "IconNames"
797
810
  }
798
811
  }
799
- ],
800
- "inheritedFrom": {
801
- "name": "AccordionButton",
802
- "module": "components/accordionbutton/accordionbutton.component.js"
803
- }
812
+ ]
804
813
  },
805
814
  {
806
815
  "kind": "method",
@@ -810,10 +819,16 @@
810
819
  "type": {
811
820
  "text": "TemplateResult | typeof nothing"
812
821
  }
813
- },
814
- "inheritedFrom": {
815
- "name": "AccordionButton",
816
- "module": "components/accordionbutton/accordionbutton.component.js"
822
+ }
823
+ },
824
+ {
825
+ "kind": "method",
826
+ "name": "renderHeader",
827
+ "privacy": "protected",
828
+ "return": {
829
+ "type": {
830
+ "text": "TemplateResult"
831
+ }
817
832
  }
818
833
  },
819
834
  {
@@ -825,11 +840,7 @@
825
840
  "text": ""
826
841
  }
827
842
  },
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
- }
843
+ "description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon."
833
844
  },
834
845
  {
835
846
  "kind": "method",
@@ -839,45 +850,32 @@
839
850
  "type": {
840
851
  "text": "TemplateResult | typeof nothing"
841
852
  }
853
+ }
854
+ },
855
+ {
856
+ "kind": "field",
857
+ "name": "disabled",
858
+ "type": {
859
+ "text": "boolean | undefined"
842
860
  },
861
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
862
+ "default": "undefined",
863
+ "attribute": "disabled",
864
+ "reflects": true,
843
865
  "inheritedFrom": {
844
- "name": "AccordionButton",
845
- "module": "components/accordionbutton/accordionbutton.component.js"
866
+ "name": "DisabledMixin",
867
+ "module": "utils/mixins/DisabledMixin.js"
846
868
  }
847
869
  }
848
870
  ],
849
871
  "events": [
850
872
  {
851
- "description": "(React: onShown) This event is triggered when the accordion is expanded.",
873
+ "description": "(React: onShown) This event is triggered when the accordion button is expanded.",
852
874
  "name": "shown",
853
- "reactName": "onShown",
854
- "inheritedFrom": {
855
- "name": "AccordionButton",
856
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
857
- }
875
+ "reactName": "onShown"
858
876
  }
859
877
  ],
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
878
  "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
879
  {
882
880
  "name": "size",
883
881
  "type": {
@@ -885,11 +883,7 @@
885
883
  },
886
884
  "description": "The size of the accordion item.",
887
885
  "default": "'small'",
888
- "fieldName": "size",
889
- "inheritedFrom": {
890
- "name": "AccordionButton",
891
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
892
- }
886
+ "fieldName": "size"
893
887
  },
894
888
  {
895
889
  "name": "variant",
@@ -898,11 +892,7 @@
898
892
  },
899
893
  "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
900
894
  "default": "'default'",
901
- "fieldName": "variant",
902
- "inheritedFrom": {
903
- "name": "AccordionButton",
904
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
905
- }
895
+ "fieldName": "variant"
906
896
  },
907
897
  {
908
898
  "name": "data-aria-level",
@@ -911,11 +901,7 @@
911
901
  },
912
902
  "description": "The aria level of the accordion component.",
913
903
  "default": "3",
914
- "fieldName": "dataAriaLevel",
915
- "inheritedFrom": {
916
- "name": "AccordionButton",
917
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
918
- }
904
+ "fieldName": "dataAriaLevel"
919
905
  },
920
906
  {
921
907
  "name": "expanded",
@@ -924,11 +910,7 @@
924
910
  },
925
911
  "description": "The visibility of the accordion button.",
926
912
  "default": "false",
927
- "fieldName": "expanded",
928
- "inheritedFrom": {
929
- "name": "AccordionButton",
930
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
931
- }
913
+ "fieldName": "expanded"
932
914
  },
933
915
  {
934
916
  "name": "header-text",
@@ -936,11 +918,7 @@
936
918
  "text": "string | undefined"
937
919
  },
938
920
  "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
- }
921
+ "fieldName": "headerText"
944
922
  },
945
923
  {
946
924
  "name": "prefix-icon",
@@ -948,13 +926,35 @@
948
926
  "text": "IconNames | undefined"
949
927
  },
950
928
  "description": "The leading icon that is displayed before the header text.",
951
- "fieldName": "prefixIcon",
929
+ "fieldName": "prefixIcon"
930
+ },
931
+ {
932
+ "name": "disabled",
933
+ "type": {
934
+ "text": "boolean | undefined"
935
+ },
936
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
937
+ "default": "undefined",
938
+ "fieldName": "disabled",
952
939
  "inheritedFrom": {
953
- "name": "AccordionButton",
954
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
940
+ "name": "DisabledMixin",
941
+ "module": "src/utils/mixins/DisabledMixin.ts"
955
942
  }
956
943
  }
957
- ]
944
+ ],
945
+ "mixins": [
946
+ {
947
+ "name": "DisabledMixin",
948
+ "module": "/src/utils/mixins/DisabledMixin"
949
+ }
950
+ ],
951
+ "superclass": {
952
+ "name": "Component",
953
+ "module": "/src/models"
954
+ },
955
+ "tagName": "mdc-accordionbutton",
956
+ "jsDoc": "/**\n * An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you do need any controls on your accordion heading, then it's advised to use `accordion` component.\n *\n * If an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.\n *\n * @tagname mdc-accordionbutton\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion button is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion button.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.\n *\n * @csspart header-section - The header section of the accordion button.\n * @csspart header-button-section - The header button section of the accordion button.\n * @csspart leading-header - The leading header of the accordion button.\n * @csspart trailing-header - The trailing header of the accordion button.\n * @csspart trailing-header__icon - The trailing header icon of the accordion button.\n * @csspart body-section - The body section of the accordion button.\n */",
957
+ "customElement": true
958
958
  }
959
959
  ],
960
960
  "exports": [
@@ -962,8 +962,8 @@
962
962
  "kind": "js",
963
963
  "name": "default",
964
964
  "declaration": {
965
- "name": "Accordion",
966
- "module": "components/accordion/accordion.component.js"
965
+ "name": "AccordionButton",
966
+ "module": "components/accordionbutton/accordionbutton.component.js"
967
967
  }
968
968
  }
969
969
  ]
@@ -1768,52 +1768,257 @@
1768
1768
  },
1769
1769
  {
1770
1770
  "kind": "javascript-module",
1771
- "path": "components/appheader/appheader.component.js",
1771
+ "path": "components/avatar/avatar.component.js",
1772
1772
  "declarations": [
1773
1773
  {
1774
1774
  "kind": "class",
1775
- "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
1776
- "name": "Appheader",
1775
+ "description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
1776
+ "name": "Avatar",
1777
+ "cssProperties": [
1778
+ {
1779
+ "description": "Allows customization of the default background color.",
1780
+ "name": "--mdc-avatar-default-background-color"
1781
+ },
1782
+ {
1783
+ "description": "Allows customization of the default foreground color.",
1784
+ "name": "--mdc-avatar-default-foreground-color"
1785
+ },
1786
+ {
1787
+ "description": "Allows customization of the loading indicator background color.",
1788
+ "name": "--mdc-avatar-loading-indicator-background-color"
1789
+ },
1790
+ {
1791
+ "description": "Allows customization of the loading indicator foreground color.",
1792
+ "name": "--mdc-avatar-loading-indicator-foreground-color"
1793
+ },
1794
+ {
1795
+ "description": "Allows customization of the loading overlay background color.",
1796
+ "name": "--mdc-avatar-loading-overlay-background-color"
1797
+ }
1798
+ ],
1777
1799
  "cssParts": [
1778
1800
  {
1779
- "description": "The main container for styling the header.",
1780
- "name": "container"
1801
+ "description": "The main content of the avatar.",
1802
+ "name": "content"
1781
1803
  },
1782
1804
  {
1783
- "description": "The leading section of the header.",
1784
- "name": "leading-section"
1805
+ "description": "The photo of the avatar.",
1806
+ "name": "photo"
1785
1807
  },
1786
1808
  {
1787
- "description": "The center section of the header.",
1788
- "name": "center-section"
1809
+ "description": "The presence indicator of the avatar.",
1810
+ "name": "presence"
1789
1811
  },
1790
1812
  {
1791
- "description": "The trailing section of the header.",
1792
- "name": "trailing-section"
1813
+ "description": "The wrapper for the loading indicator.",
1814
+ "name": "loading-wrapper"
1815
+ },
1816
+ {
1817
+ "description": "The loading indicator of the avatar.",
1818
+ "name": "loader"
1793
1819
  }
1794
1820
  ],
1795
- "slots": [
1821
+ "members": [
1796
1822
  {
1797
- "description": "Slot for the leading section (e.g., brand logo, brand name).",
1798
- "name": "leading"
1823
+ "kind": "field",
1824
+ "name": "src",
1825
+ "type": {
1826
+ "text": "string | undefined"
1827
+ },
1828
+ "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
1829
+ "attribute": "src",
1830
+ "inheritedFrom": {
1831
+ "name": "AvatarComponentMixin",
1832
+ "module": "utils/mixins/AvatarComponentMixin.js"
1833
+ }
1799
1834
  },
1800
1835
  {
1801
- "description": "Slot for the center section (e.g., search bar, icons).",
1802
- "name": "center"
1836
+ "kind": "field",
1837
+ "name": "initials",
1838
+ "type": {
1839
+ "text": "string | undefined"
1840
+ },
1841
+ "description": "The initials to be displayed for the avatar.",
1842
+ "attribute": "initials",
1843
+ "inheritedFrom": {
1844
+ "name": "AvatarComponentMixin",
1845
+ "module": "utils/mixins/AvatarComponentMixin.js"
1846
+ }
1803
1847
  },
1804
1848
  {
1805
- "description": "Slot for the trailing section (e.g., profile avatar, icons).",
1806
- "name": "trailing"
1849
+ "kind": "field",
1850
+ "name": "presence",
1851
+ "type": {
1852
+ "text": "PresenceType | undefined"
1853
+ },
1854
+ "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
1855
+ "attribute": "presence",
1856
+ "inheritedFrom": {
1857
+ "name": "AvatarComponentMixin",
1858
+ "module": "utils/mixins/AvatarComponentMixin.js"
1859
+ }
1860
+ },
1861
+ {
1862
+ "kind": "field",
1863
+ "name": "size",
1864
+ "type": {
1865
+ "text": "AvatarSize"
1866
+ },
1867
+ "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
1868
+ "default": "32",
1869
+ "attribute": "size",
1870
+ "reflects": true,
1871
+ "inheritedFrom": {
1872
+ "name": "AvatarComponentMixin",
1873
+ "module": "utils/mixins/AvatarComponentMixin.js"
1874
+ }
1875
+ },
1876
+ {
1877
+ "kind": "field",
1878
+ "name": "counter",
1879
+ "type": {
1880
+ "text": "number | undefined"
1881
+ },
1882
+ "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
1883
+ "attribute": "counter",
1884
+ "inheritedFrom": {
1885
+ "name": "AvatarComponentMixin",
1886
+ "module": "utils/mixins/AvatarComponentMixin.js"
1887
+ }
1888
+ },
1889
+ {
1890
+ "kind": "field",
1891
+ "name": "isTyping",
1892
+ "type": {
1893
+ "text": "boolean"
1894
+ },
1895
+ "default": "false",
1896
+ "description": "Represents the typing indicator when the user is typing.",
1897
+ "attribute": "is-typing",
1898
+ "inheritedFrom": {
1899
+ "name": "AvatarComponentMixin",
1900
+ "module": "utils/mixins/AvatarComponentMixin.js"
1901
+ }
1902
+ },
1903
+ {
1904
+ "kind": "field",
1905
+ "name": "iconName",
1906
+ "type": {
1907
+ "text": "IconNames | undefined"
1908
+ },
1909
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
1910
+ "attribute": "icon-name",
1911
+ "inheritedFrom": {
1912
+ "name": "IconNameMixin",
1913
+ "module": "utils/mixins/IconNameMixin.js"
1914
+ }
1915
+ }
1916
+ ],
1917
+ "mixins": [
1918
+ {
1919
+ "name": "AvatarComponentMixin",
1920
+ "module": "/src/utils/mixins/AvatarComponentMixin"
1921
+ },
1922
+ {
1923
+ "name": "IconNameMixin",
1924
+ "module": "/src/utils/mixins/IconNameMixin"
1807
1925
  }
1808
1926
  ],
1809
- "members": [],
1810
1927
  "superclass": {
1811
1928
  "name": "Component",
1812
1929
  "module": "/src/models"
1813
1930
  },
1814
- "tagName": "mdc-appheader",
1815
- "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
1816
- "customElement": true
1931
+ "tagName": "mdc-avatar",
1932
+ "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n * Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n * Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n * Allows customization of the loading overlay background color.\n *\n * @csspart content - The main content of the avatar.\n * @csspart photo - The photo of the avatar.\n * @csspart presence - The presence indicator of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator.\n * @csspart loader - The loading indicator of the avatar.\n */",
1933
+ "customElement": true,
1934
+ "attributes": [
1935
+ {
1936
+ "name": "src",
1937
+ "type": {
1938
+ "text": "string | undefined"
1939
+ },
1940
+ "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
1941
+ "fieldName": "src",
1942
+ "inheritedFrom": {
1943
+ "name": "AvatarComponentMixin",
1944
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
1945
+ }
1946
+ },
1947
+ {
1948
+ "name": "initials",
1949
+ "type": {
1950
+ "text": "string | undefined"
1951
+ },
1952
+ "description": "The initials to be displayed for the avatar.",
1953
+ "fieldName": "initials",
1954
+ "inheritedFrom": {
1955
+ "name": "AvatarComponentMixin",
1956
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
1957
+ }
1958
+ },
1959
+ {
1960
+ "name": "presence",
1961
+ "type": {
1962
+ "text": "PresenceType | undefined"
1963
+ },
1964
+ "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
1965
+ "fieldName": "presence",
1966
+ "inheritedFrom": {
1967
+ "name": "AvatarComponentMixin",
1968
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
1969
+ }
1970
+ },
1971
+ {
1972
+ "name": "size",
1973
+ "type": {
1974
+ "text": "AvatarSize"
1975
+ },
1976
+ "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
1977
+ "default": "32",
1978
+ "fieldName": "size",
1979
+ "inheritedFrom": {
1980
+ "name": "AvatarComponentMixin",
1981
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
1982
+ }
1983
+ },
1984
+ {
1985
+ "name": "counter",
1986
+ "type": {
1987
+ "text": "number | undefined"
1988
+ },
1989
+ "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
1990
+ "fieldName": "counter",
1991
+ "inheritedFrom": {
1992
+ "name": "AvatarComponentMixin",
1993
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
1994
+ }
1995
+ },
1996
+ {
1997
+ "name": "is-typing",
1998
+ "type": {
1999
+ "text": "boolean"
2000
+ },
2001
+ "default": "false",
2002
+ "description": "Represents the typing indicator when the user is typing.",
2003
+ "fieldName": "isTyping",
2004
+ "inheritedFrom": {
2005
+ "name": "AvatarComponentMixin",
2006
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
2007
+ }
2008
+ },
2009
+ {
2010
+ "name": "icon-name",
2011
+ "type": {
2012
+ "text": "IconNames | undefined"
2013
+ },
2014
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
2015
+ "fieldName": "iconName",
2016
+ "inheritedFrom": {
2017
+ "name": "IconNameMixin",
2018
+ "module": "src/utils/mixins/IconNameMixin.ts"
2019
+ }
2020
+ }
2021
+ ]
1817
2022
  }
1818
2023
  ],
1819
2024
  "exports": [
@@ -1821,350 +2026,84 @@
1821
2026
  "kind": "js",
1822
2027
  "name": "default",
1823
2028
  "declaration": {
1824
- "name": "Appheader",
1825
- "module": "components/appheader/appheader.component.js"
2029
+ "name": "Avatar",
2030
+ "module": "components/avatar/avatar.component.js"
1826
2031
  }
1827
2032
  }
1828
2033
  ]
1829
2034
  },
1830
2035
  {
1831
2036
  "kind": "javascript-module",
1832
- "path": "components/avatar/avatar.component.js",
2037
+ "path": "components/avatarbutton/avatarbutton.component.js",
1833
2038
  "declarations": [
1834
2039
  {
1835
2040
  "kind": "class",
1836
- "description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
1837
- "name": "Avatar",
2041
+ "description": "The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n\nThis component is made by extending `buttonsimple` class.\nThe button component acts as a wrapper for the avatar component.\n\nTo override styles of the avatar inside, use the specified css parts.",
2042
+ "name": "AvatarButton",
1838
2043
  "cssProperties": [
1839
2044
  {
1840
- "description": "Allows customization of the default background color.",
1841
- "name": "--mdc-avatar-default-background-color"
1842
- },
1843
- {
1844
- "description": "Allows customization of the default foreground color.",
1845
- "name": "--mdc-avatar-default-foreground-color"
1846
- },
1847
- {
1848
- "description": "Allows customization of the loading indicator background color.",
1849
- "name": "--mdc-avatar-loading-indicator-background-color"
2045
+ "description": "Background color of the overlay in rest state",
2046
+ "name": "--mdc-avatarbutton-overlay-background-color-rest"
1850
2047
  },
1851
2048
  {
1852
- "description": "Allows customization of the loading indicator foreground color.",
1853
- "name": "--mdc-avatar-loading-indicator-foreground-color"
2049
+ "description": "Background color of the overlay in hover state",
2050
+ "name": "--mdc-avatarbutton-overlay-background-color-hover"
1854
2051
  },
1855
2052
  {
1856
- "description": "Allows customization of the loading overlay background color.",
1857
- "name": "--mdc-avatar-loading-overlay-background-color"
2053
+ "description": "Background color of the overlay in active state",
2054
+ "name": "--mdc-avatarbutton-overlay-background-color-active"
1858
2055
  }
1859
2056
  ],
1860
2057
  "cssParts": [
2058
+ {
2059
+ "description": "The overlay part of the avatar button.",
2060
+ "name": "overlay"
2061
+ },
1861
2062
  {
1862
2063
  "description": "The main content of the avatar.",
1863
2064
  "name": "content"
1864
2065
  },
1865
2066
  {
1866
- "description": "The photo of the avatar.",
2067
+ "description": "The photo part of the avatar.",
1867
2068
  "name": "photo"
1868
2069
  },
1869
2070
  {
1870
- "description": "The presence indicator of the avatar.",
2071
+ "description": "The presence indicator part of the avatar.",
1871
2072
  "name": "presence"
1872
2073
  },
1873
2074
  {
1874
- "description": "The wrapper for the loading indicator.",
2075
+ "description": "The wrapper for the loading indicator of the avatar.",
1875
2076
  "name": "loading-wrapper"
1876
2077
  },
1877
2078
  {
1878
- "description": "The loading indicator of the avatar.",
2079
+ "description": "The loading indicator part of the avatar.",
1879
2080
  "name": "loader"
1880
2081
  }
1881
2082
  ],
1882
2083
  "members": [
1883
- {
1884
- "kind": "field",
1885
- "name": "src",
1886
- "type": {
1887
- "text": "string | undefined"
1888
- },
1889
- "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
1890
- "attribute": "src",
1891
- "inheritedFrom": {
1892
- "name": "AvatarComponentMixin",
1893
- "module": "utils/mixins/AvatarComponentMixin.js"
1894
- }
1895
- },
1896
- {
1897
- "kind": "field",
1898
- "name": "initials",
1899
- "type": {
1900
- "text": "string | undefined"
1901
- },
1902
- "description": "The initials to be displayed for the avatar.",
1903
- "attribute": "initials",
1904
- "inheritedFrom": {
1905
- "name": "AvatarComponentMixin",
1906
- "module": "utils/mixins/AvatarComponentMixin.js"
1907
- }
1908
- },
1909
- {
1910
- "kind": "field",
1911
- "name": "presence",
1912
- "type": {
1913
- "text": "PresenceType | undefined"
1914
- },
1915
- "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
1916
- "attribute": "presence",
1917
- "inheritedFrom": {
1918
- "name": "AvatarComponentMixin",
1919
- "module": "utils/mixins/AvatarComponentMixin.js"
1920
- }
1921
- },
1922
- {
1923
- "kind": "field",
1924
- "name": "size",
1925
- "type": {
1926
- "text": "AvatarSize"
1927
- },
1928
- "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
1929
- "default": "32",
1930
- "attribute": "size",
1931
- "reflects": true,
1932
- "inheritedFrom": {
1933
- "name": "AvatarComponentMixin",
1934
- "module": "utils/mixins/AvatarComponentMixin.js"
1935
- }
1936
- },
1937
- {
1938
- "kind": "field",
1939
- "name": "counter",
1940
- "type": {
1941
- "text": "number | undefined"
1942
- },
1943
- "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
1944
- "attribute": "counter",
1945
- "inheritedFrom": {
1946
- "name": "AvatarComponentMixin",
1947
- "module": "utils/mixins/AvatarComponentMixin.js"
1948
- }
1949
- },
1950
- {
1951
- "kind": "field",
1952
- "name": "isTyping",
1953
- "type": {
1954
- "text": "boolean"
1955
- },
1956
- "default": "false",
1957
- "description": "Represents the typing indicator when the user is typing.",
1958
- "attribute": "is-typing",
1959
- "inheritedFrom": {
1960
- "name": "AvatarComponentMixin",
1961
- "module": "utils/mixins/AvatarComponentMixin.js"
1962
- }
1963
- },
1964
- {
1965
- "kind": "field",
1966
- "name": "iconName",
1967
- "type": {
1968
- "text": "IconNames | undefined"
1969
- },
1970
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
1971
- "attribute": "icon-name",
1972
- "inheritedFrom": {
1973
- "name": "IconNameMixin",
1974
- "module": "utils/mixins/IconNameMixin.js"
1975
- }
1976
- }
1977
- ],
1978
- "mixins": [
1979
- {
1980
- "name": "AvatarComponentMixin",
1981
- "module": "/src/utils/mixins/AvatarComponentMixin"
1982
- },
1983
- {
1984
- "name": "IconNameMixin",
1985
- "module": "/src/utils/mixins/IconNameMixin"
1986
- }
1987
- ],
1988
- "superclass": {
1989
- "name": "Component",
1990
- "module": "/src/models"
1991
- },
1992
- "tagName": "mdc-avatar",
1993
- "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n * Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n * Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n * Allows customization of the loading overlay background color.\n *\n * @csspart content - The main content of the avatar.\n * @csspart photo - The photo of the avatar.\n * @csspart presence - The presence indicator of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator.\n * @csspart loader - The loading indicator of the avatar.\n */",
1994
- "customElement": true,
1995
- "attributes": [
1996
- {
1997
- "name": "src",
1998
- "type": {
1999
- "text": "string | undefined"
2000
- },
2001
- "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
2002
- "fieldName": "src",
2003
- "inheritedFrom": {
2004
- "name": "AvatarComponentMixin",
2005
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
2006
- }
2007
- },
2008
- {
2009
- "name": "initials",
2010
- "type": {
2011
- "text": "string | undefined"
2012
- },
2013
- "description": "The initials to be displayed for the avatar.",
2014
- "fieldName": "initials",
2015
- "inheritedFrom": {
2016
- "name": "AvatarComponentMixin",
2017
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
2018
- }
2019
- },
2020
- {
2021
- "name": "presence",
2022
- "type": {
2023
- "text": "PresenceType | undefined"
2024
- },
2025
- "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
2026
- "fieldName": "presence",
2027
- "inheritedFrom": {
2028
- "name": "AvatarComponentMixin",
2029
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
2030
- }
2031
- },
2032
- {
2033
- "name": "size",
2034
- "type": {
2035
- "text": "AvatarSize"
2036
- },
2037
- "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
2038
- "default": "32",
2039
- "fieldName": "size",
2040
- "inheritedFrom": {
2041
- "name": "AvatarComponentMixin",
2042
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
2043
- }
2044
- },
2045
- {
2046
- "name": "counter",
2047
- "type": {
2048
- "text": "number | undefined"
2049
- },
2050
- "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
2051
- "fieldName": "counter",
2052
- "inheritedFrom": {
2053
- "name": "AvatarComponentMixin",
2054
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
2055
- }
2056
- },
2057
- {
2058
- "name": "is-typing",
2059
- "type": {
2060
- "text": "boolean"
2061
- },
2062
- "default": "false",
2063
- "description": "Represents the typing indicator when the user is typing.",
2064
- "fieldName": "isTyping",
2065
- "inheritedFrom": {
2066
- "name": "AvatarComponentMixin",
2067
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
2068
- }
2069
- },
2070
- {
2071
- "name": "icon-name",
2072
- "type": {
2073
- "text": "IconNames | undefined"
2074
- },
2075
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
2076
- "fieldName": "iconName",
2077
- "inheritedFrom": {
2078
- "name": "IconNameMixin",
2079
- "module": "src/utils/mixins/IconNameMixin.ts"
2080
- }
2081
- }
2082
- ]
2083
- }
2084
- ],
2085
- "exports": [
2086
- {
2087
- "kind": "js",
2088
- "name": "default",
2089
- "declaration": {
2090
- "name": "Avatar",
2091
- "module": "components/avatar/avatar.component.js"
2092
- }
2093
- }
2094
- ]
2095
- },
2096
- {
2097
- "kind": "javascript-module",
2098
- "path": "components/avatarbutton/avatarbutton.component.js",
2099
- "declarations": [
2100
- {
2101
- "kind": "class",
2102
- "description": "The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n\nThis component is made by extending `buttonsimple` class.\nThe button component acts as a wrapper for the avatar component.\n\nTo override styles of the avatar inside, use the specified css parts.",
2103
- "name": "AvatarButton",
2104
- "cssProperties": [
2105
- {
2106
- "description": "Background color of the overlay in rest state",
2107
- "name": "--mdc-avatarbutton-overlay-background-color-rest"
2108
- },
2109
- {
2110
- "description": "Background color of the overlay in hover state",
2111
- "name": "--mdc-avatarbutton-overlay-background-color-hover"
2112
- },
2113
- {
2114
- "description": "Background color of the overlay in active state",
2115
- "name": "--mdc-avatarbutton-overlay-background-color-active"
2116
- }
2117
- ],
2118
- "cssParts": [
2119
- {
2120
- "description": "The overlay part of the avatar button.",
2121
- "name": "overlay"
2122
- },
2123
- {
2124
- "description": "The main content of the avatar.",
2125
- "name": "content"
2126
- },
2127
- {
2128
- "description": "The photo part of the avatar.",
2129
- "name": "photo"
2130
- },
2131
- {
2132
- "description": "The presence indicator part of the avatar.",
2133
- "name": "presence"
2134
- },
2135
- {
2136
- "description": "The wrapper for the loading indicator of the avatar.",
2137
- "name": "loading-wrapper"
2138
- },
2139
- {
2140
- "description": "The loading indicator part of the avatar.",
2141
- "name": "loader"
2142
- }
2143
- ],
2144
- "members": [
2145
- {
2146
- "kind": "field",
2147
- "name": "ariaLabel",
2148
- "type": {
2149
- "text": "string | null"
2150
- },
2151
- "default": "null",
2152
- "description": "Aria-label attribute to be set for accessibility",
2153
- "attribute": "aria-label"
2154
- },
2155
- {
2156
- "kind": "method",
2157
- "name": "setSize",
2158
- "privacy": "private",
2159
- "parameters": [
2160
- {
2161
- "name": "size",
2162
- "type": {
2163
- "text": "AvatarSize"
2164
- }
2165
- }
2166
- ]
2167
- },
2084
+ {
2085
+ "kind": "field",
2086
+ "name": "ariaLabel",
2087
+ "type": {
2088
+ "text": "string | null"
2089
+ },
2090
+ "default": "null",
2091
+ "description": "Aria-label attribute to be set for accessibility",
2092
+ "attribute": "aria-label"
2093
+ },
2094
+ {
2095
+ "kind": "method",
2096
+ "name": "setSize",
2097
+ "privacy": "private",
2098
+ "parameters": [
2099
+ {
2100
+ "name": "size",
2101
+ "type": {
2102
+ "text": "AvatarSize"
2103
+ }
2104
+ }
2105
+ ]
2106
+ },
2168
2107
  {
2169
2108
  "kind": "field",
2170
2109
  "name": "src",
@@ -2847,6 +2786,1390 @@
2847
2786
  }
2848
2787
  ]
2849
2788
  },
2789
+ {
2790
+ "kind": "javascript-module",
2791
+ "path": "components/appheader/appheader.component.js",
2792
+ "declarations": [
2793
+ {
2794
+ "kind": "class",
2795
+ "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
2796
+ "name": "Appheader",
2797
+ "cssParts": [
2798
+ {
2799
+ "description": "The main container for styling the header.",
2800
+ "name": "container"
2801
+ },
2802
+ {
2803
+ "description": "The leading section of the header.",
2804
+ "name": "leading-section"
2805
+ },
2806
+ {
2807
+ "description": "The center section of the header.",
2808
+ "name": "center-section"
2809
+ },
2810
+ {
2811
+ "description": "The trailing section of the header.",
2812
+ "name": "trailing-section"
2813
+ }
2814
+ ],
2815
+ "slots": [
2816
+ {
2817
+ "description": "Slot for the leading section (e.g., brand logo, brand name).",
2818
+ "name": "leading"
2819
+ },
2820
+ {
2821
+ "description": "Slot for the center section (e.g., search bar, icons).",
2822
+ "name": "center"
2823
+ },
2824
+ {
2825
+ "description": "Slot for the trailing section (e.g., profile avatar, icons).",
2826
+ "name": "trailing"
2827
+ }
2828
+ ],
2829
+ "members": [],
2830
+ "superclass": {
2831
+ "name": "Component",
2832
+ "module": "/src/models"
2833
+ },
2834
+ "tagName": "mdc-appheader",
2835
+ "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
2836
+ "customElement": true
2837
+ }
2838
+ ],
2839
+ "exports": [
2840
+ {
2841
+ "kind": "js",
2842
+ "name": "default",
2843
+ "declaration": {
2844
+ "name": "Appheader",
2845
+ "module": "components/appheader/appheader.component.js"
2846
+ }
2847
+ }
2848
+ ]
2849
+ },
2850
+ {
2851
+ "kind": "javascript-module",
2852
+ "path": "components/announcementdialog/announcementdialog.component.js",
2853
+ "declarations": [
2854
+ {
2855
+ "kind": "class",
2856
+ "description": "AnnouncementDialog component is a modal dialog that can be used to display announcements, extending the existing Dialog component.\nIt can be used to create custom dialogs where a illustration, content and footer actions are provided by the consumer.\nThe dialog is available in 4 sizes: medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\nThe dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n\nThe dialog can be controlled solely through the `visible` property, no trigger element is required.\nIf a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\nremember the previously focused element before the dialog was opened.\n\nThe dialog is a controlled component, meaning it does not have its own state management for visibility.\nUse the `visible` property to control the visibility of the dialog.\nUse the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\nor Escape is pressed).\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n- Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n\n**Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n- Use `?visible=true/false` as an attribute instead of `visible=true/false`\n- Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions",
2857
+ "name": "AnnouncementDialog",
2858
+ "cssProperties": [
2859
+ {
2860
+ "description": "background color of the illustration section",
2861
+ "name": "--mdc-announcementdialog-illustration-background-color"
2862
+ },
2863
+ {
2864
+ "description": "primary background color of the dialog",
2865
+ "name": "--mdc-dialog-primary-background-color",
2866
+ "inheritedFrom": {
2867
+ "name": "Dialog",
2868
+ "module": "src/components/dialog/dialog.component.ts"
2869
+ }
2870
+ },
2871
+ {
2872
+ "description": "border color of the dialog",
2873
+ "name": "--mdc-dialog-border-color",
2874
+ "inheritedFrom": {
2875
+ "name": "Dialog",
2876
+ "module": "src/components/dialog/dialog.component.ts"
2877
+ }
2878
+ },
2879
+ {
2880
+ "description": "text color of the header/title of the dialog",
2881
+ "name": "--mdc-dialog-header-text-color",
2882
+ "inheritedFrom": {
2883
+ "name": "Dialog",
2884
+ "module": "src/components/dialog/dialog.component.ts"
2885
+ }
2886
+ },
2887
+ {
2888
+ "description": "text color of the below header description of the dialog",
2889
+ "name": "--mdc-dialog-description-text-color",
2890
+ "inheritedFrom": {
2891
+ "name": "Dialog",
2892
+ "module": "src/components/dialog/dialog.component.ts"
2893
+ }
2894
+ },
2895
+ {
2896
+ "description": "elevation of the dialog",
2897
+ "name": "--mdc-dialog-elevation-3",
2898
+ "inheritedFrom": {
2899
+ "name": "Dialog",
2900
+ "module": "src/components/dialog/dialog.component.ts"
2901
+ }
2902
+ },
2903
+ {
2904
+ "description": "width of the dialog",
2905
+ "name": "--mdc-dialog-width",
2906
+ "inheritedFrom": {
2907
+ "name": "Dialog",
2908
+ "module": "src/components/dialog/dialog.component.ts"
2909
+ }
2910
+ },
2911
+ {
2912
+ "description": "height of the dialog",
2913
+ "name": "--mdc-dialog-height",
2914
+ "inheritedFrom": {
2915
+ "name": "Dialog",
2916
+ "module": "src/components/dialog/dialog.component.ts"
2917
+ }
2918
+ }
2919
+ ],
2920
+ "cssParts": [
2921
+ {
2922
+ "description": "The main body container that holds the illustration and content sections",
2923
+ "name": "body"
2924
+ },
2925
+ {
2926
+ "description": "The container for the illustration section",
2927
+ "name": "illustration-container"
2928
+ },
2929
+ {
2930
+ "description": "The container for the content section",
2931
+ "name": "content-container"
2932
+ },
2933
+ {
2934
+ "description": "The header text",
2935
+ "name": "header-text"
2936
+ }
2937
+ ],
2938
+ "slots": [
2939
+ {
2940
+ "description": "Slot for the dialog header content. This can be used to pass custom header content.",
2941
+ "name": "header-prefix",
2942
+ "inheritedFrom": {
2943
+ "name": "Dialog",
2944
+ "module": "src/components/dialog/dialog.component.ts"
2945
+ }
2946
+ },
2947
+ {
2948
+ "description": "Slot for the dialog body content",
2949
+ "name": "dialog-body",
2950
+ "inheritedFrom": {
2951
+ "name": "Dialog",
2952
+ "module": "src/components/dialog/dialog.component.ts"
2953
+ }
2954
+ },
2955
+ {
2956
+ "description": "Slot for the illustration container section",
2957
+ "name": "illustration-container"
2958
+ },
2959
+ {
2960
+ "description": "Slot for the content (header, description, etc) section",
2961
+ "name": "content-container"
2962
+ },
2963
+ {
2964
+ "description": "Slot for the description in the content (below header) - pass in Text, Links etc as needed.",
2965
+ "name": "description-container"
2966
+ },
2967
+ {
2968
+ "description": "This slot is for passing `mdc-link` component within the footer section.",
2969
+ "name": "footer-link",
2970
+ "inheritedFrom": {
2971
+ "name": "Dialog",
2972
+ "module": "src/components/dialog/dialog.component.ts"
2973
+ }
2974
+ },
2975
+ {
2976
+ "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
2977
+ "name": "footer-button-secondary",
2978
+ "inheritedFrom": {
2979
+ "name": "Dialog",
2980
+ "module": "src/components/dialog/dialog.component.ts"
2981
+ }
2982
+ },
2983
+ {
2984
+ "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
2985
+ "name": "footer-button-primary",
2986
+ "inheritedFrom": {
2987
+ "name": "Dialog",
2988
+ "module": "src/components/dialog/dialog.component.ts"
2989
+ }
2990
+ },
2991
+ {
2992
+ "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred",
2993
+ "name": "footer",
2994
+ "inheritedFrom": {
2995
+ "name": "Dialog",
2996
+ "module": "src/components/dialog/dialog.component.ts"
2997
+ }
2998
+ }
2999
+ ],
3000
+ "members": [
3001
+ {
3002
+ "kind": "field",
3003
+ "name": "illustration",
3004
+ "type": {
3005
+ "text": "IllustrationNames | undefined"
3006
+ },
3007
+ "description": "The illustration to display in the announcement dialog.\nThis can be an image URL, icon name, or any other illustration identifier.\n\nMake sure to choose the right illustration respective the size (the filename includes the size information, i.e. threetwozero = 320px)",
3008
+ "attribute": "illustration",
3009
+ "reflects": true
3010
+ },
3011
+ {
3012
+ "kind": "field",
3013
+ "name": "size",
3014
+ "type": {
3015
+ "text": "DialogSize"
3016
+ },
3017
+ "description": "The size of the announcement dialog, can be 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).",
3018
+ "default": "medium",
3019
+ "attribute": "size",
3020
+ "reflects": true,
3021
+ "inheritedFrom": {
3022
+ "name": "Dialog",
3023
+ "module": "components/dialog/dialog.component.js"
3024
+ }
3025
+ },
3026
+ {
3027
+ "kind": "method",
3028
+ "name": "renderHeader",
3029
+ "privacy": "protected"
3030
+ },
3031
+ {
3032
+ "kind": "method",
3033
+ "name": "renderBody",
3034
+ "privacy": "protected"
3035
+ },
3036
+ {
3037
+ "kind": "field",
3038
+ "name": "zIndex",
3039
+ "type": {
3040
+ "text": "number"
3041
+ },
3042
+ "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\nThe backdrop itself will have a z-index of `zIndex - 1`.",
3043
+ "default": "1000",
3044
+ "attribute": "z-index",
3045
+ "reflects": true,
3046
+ "inheritedFrom": {
3047
+ "name": "Dialog",
3048
+ "module": "components/dialog/dialog.component.js"
3049
+ }
3050
+ },
3051
+ {
3052
+ "kind": "method",
3053
+ "name": "activatePreventScroll",
3054
+ "privacy": "protected",
3055
+ "inheritedFrom": {
3056
+ "name": "PreventScrollMixin",
3057
+ "module": "utils/mixins/PreventScrollMixin.js"
3058
+ }
3059
+ },
3060
+ {
3061
+ "kind": "method",
3062
+ "name": "deactivatePreventScroll",
3063
+ "privacy": "protected",
3064
+ "inheritedFrom": {
3065
+ "name": "PreventScrollMixin",
3066
+ "module": "utils/mixins/PreventScrollMixin.js"
3067
+ }
3068
+ },
3069
+ {
3070
+ "kind": "field",
3071
+ "name": "focusTrap",
3072
+ "type": {
3073
+ "text": "boolean"
3074
+ },
3075
+ "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.\n\nIMPLEMENT THIS IN YOUR COMPONENT.",
3076
+ "default": "true",
3077
+ "attribute": "focus-trap",
3078
+ "reflects": true,
3079
+ "privacy": "protected",
3080
+ "inheritedFrom": {
3081
+ "name": "Dialog",
3082
+ "module": "components/dialog/dialog.component.js"
3083
+ }
3084
+ },
3085
+ {
3086
+ "kind": "field",
3087
+ "name": "shouldFocusTrapWrap",
3088
+ "type": {
3089
+ "text": "boolean"
3090
+ },
3091
+ "default": "true",
3092
+ "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
3093
+ "attribute": "should-focus-trap-wrap",
3094
+ "reflects": true,
3095
+ "inheritedFrom": {
3096
+ "name": "FocusTrapMixin",
3097
+ "module": "utils/mixins/FocusTrapMixin.js"
3098
+ }
3099
+ },
3100
+ {
3101
+ "kind": "method",
3102
+ "name": "setIsFocusTrapActivated",
3103
+ "privacy": "private",
3104
+ "parameters": [
3105
+ {
3106
+ "name": "isActivated",
3107
+ "type": {
3108
+ "text": "boolean"
3109
+ }
3110
+ }
3111
+ ],
3112
+ "inheritedFrom": {
3113
+ "name": "FocusTrapMixin",
3114
+ "module": "utils/mixins/FocusTrapMixin.js"
3115
+ }
3116
+ },
3117
+ {
3118
+ "kind": "method",
3119
+ "name": "activateFocusTrap",
3120
+ "privacy": "public",
3121
+ "description": "Activate the focus trap",
3122
+ "inheritedFrom": {
3123
+ "name": "FocusTrapMixin",
3124
+ "module": "utils/mixins/FocusTrapMixin.js"
3125
+ }
3126
+ },
3127
+ {
3128
+ "kind": "method",
3129
+ "name": "deactivateFocusTrap",
3130
+ "privacy": "public",
3131
+ "description": "Deactivate the focus trap.",
3132
+ "inheritedFrom": {
3133
+ "name": "FocusTrapMixin",
3134
+ "module": "utils/mixins/FocusTrapMixin.js"
3135
+ }
3136
+ },
3137
+ {
3138
+ "kind": "method",
3139
+ "name": "hasNoClientRects",
3140
+ "privacy": "private",
3141
+ "parameters": [
3142
+ {
3143
+ "name": "element",
3144
+ "type": {
3145
+ "text": "HTMLElement"
3146
+ },
3147
+ "description": "The element to check."
3148
+ }
3149
+ ],
3150
+ "description": "Checks if the element has no client rectangles (not visible in the viewport).",
3151
+ "return": {
3152
+ "type": {
3153
+ "text": ""
3154
+ }
3155
+ },
3156
+ "inheritedFrom": {
3157
+ "name": "FocusTrapMixin",
3158
+ "module": "utils/mixins/FocusTrapMixin.js"
3159
+ }
3160
+ },
3161
+ {
3162
+ "kind": "method",
3163
+ "name": "hasZeroDimensions",
3164
+ "privacy": "private",
3165
+ "parameters": [
3166
+ {
3167
+ "name": "element",
3168
+ "type": {
3169
+ "text": "HTMLElement"
3170
+ },
3171
+ "description": "The element to check."
3172
+ }
3173
+ ],
3174
+ "description": "Checks if the element has zero dimensions (width and height are both 0).",
3175
+ "return": {
3176
+ "type": {
3177
+ "text": ""
3178
+ }
3179
+ },
3180
+ "inheritedFrom": {
3181
+ "name": "FocusTrapMixin",
3182
+ "module": "utils/mixins/FocusTrapMixin.js"
3183
+ }
3184
+ },
3185
+ {
3186
+ "kind": "method",
3187
+ "name": "isNotVisible",
3188
+ "privacy": "private",
3189
+ "parameters": [
3190
+ {
3191
+ "name": "element",
3192
+ "type": {
3193
+ "text": "HTMLElement"
3194
+ },
3195
+ "description": "The element to check."
3196
+ }
3197
+ ],
3198
+ "description": "Determines if the element is not visible in the DOM.",
3199
+ "return": {
3200
+ "type": {
3201
+ "text": ""
3202
+ }
3203
+ },
3204
+ "inheritedFrom": {
3205
+ "name": "FocusTrapMixin",
3206
+ "module": "utils/mixins/FocusTrapMixin.js"
3207
+ }
3208
+ },
3209
+ {
3210
+ "kind": "method",
3211
+ "name": "hasHiddenStyle",
3212
+ "privacy": "private",
3213
+ "parameters": [
3214
+ {
3215
+ "name": "element",
3216
+ "type": {
3217
+ "text": "HTMLElement"
3218
+ },
3219
+ "description": "The element to check."
3220
+ }
3221
+ ],
3222
+ "description": "Checks if the element has inline styles that make it hidden.",
3223
+ "return": {
3224
+ "type": {
3225
+ "text": ""
3226
+ }
3227
+ },
3228
+ "inheritedFrom": {
3229
+ "name": "FocusTrapMixin",
3230
+ "module": "utils/mixins/FocusTrapMixin.js"
3231
+ }
3232
+ },
3233
+ {
3234
+ "kind": "method",
3235
+ "name": "hasComputedHidden",
3236
+ "privacy": "private",
3237
+ "parameters": [
3238
+ {
3239
+ "name": "element",
3240
+ "type": {
3241
+ "text": "HTMLElement"
3242
+ },
3243
+ "description": "The element to check."
3244
+ }
3245
+ ],
3246
+ "description": "Checks if the element is hidden by a computed style.",
3247
+ "return": {
3248
+ "type": {
3249
+ "text": ""
3250
+ }
3251
+ },
3252
+ "inheritedFrom": {
3253
+ "name": "FocusTrapMixin",
3254
+ "module": "utils/mixins/FocusTrapMixin.js"
3255
+ }
3256
+ },
3257
+ {
3258
+ "kind": "method",
3259
+ "name": "isHidden",
3260
+ "privacy": "private",
3261
+ "parameters": [
3262
+ {
3263
+ "name": "element",
3264
+ "type": {
3265
+ "text": "HTMLElement"
3266
+ },
3267
+ "description": "The element to check."
3268
+ }
3269
+ ],
3270
+ "description": "Checks if the element is hidden from the user.",
3271
+ "return": {
3272
+ "type": {
3273
+ "text": ""
3274
+ }
3275
+ },
3276
+ "inheritedFrom": {
3277
+ "name": "FocusTrapMixin",
3278
+ "module": "utils/mixins/FocusTrapMixin.js"
3279
+ }
3280
+ },
3281
+ {
3282
+ "kind": "method",
3283
+ "name": "isDisabled",
3284
+ "privacy": "private",
3285
+ "parameters": [
3286
+ {
3287
+ "name": "element",
3288
+ "type": {
3289
+ "text": "any"
3290
+ },
3291
+ "description": "The element to check."
3292
+ }
3293
+ ],
3294
+ "description": "Checks if the element is disabled.",
3295
+ "return": {
3296
+ "type": {
3297
+ "text": ""
3298
+ }
3299
+ },
3300
+ "inheritedFrom": {
3301
+ "name": "FocusTrapMixin",
3302
+ "module": "utils/mixins/FocusTrapMixin.js"
3303
+ }
3304
+ },
3305
+ {
3306
+ "kind": "method",
3307
+ "name": "isNotTabbable",
3308
+ "privacy": "private",
3309
+ "parameters": [
3310
+ {
3311
+ "name": "element",
3312
+ "type": {
3313
+ "text": "HTMLElement"
3314
+ },
3315
+ "description": "The element to check."
3316
+ }
3317
+ ],
3318
+ "description": "Checks if the element is not tabbable.",
3319
+ "return": {
3320
+ "type": {
3321
+ "text": ""
3322
+ }
3323
+ },
3324
+ "inheritedFrom": {
3325
+ "name": "FocusTrapMixin",
3326
+ "module": "utils/mixins/FocusTrapMixin.js"
3327
+ }
3328
+ },
3329
+ {
3330
+ "kind": "method",
3331
+ "name": "isInteractiveElement",
3332
+ "privacy": "private",
3333
+ "return": {
3334
+ "type": {
3335
+ "text": ""
3336
+ }
3337
+ },
3338
+ "parameters": [
3339
+ {
3340
+ "name": "element",
3341
+ "type": {
3342
+ "text": "HTMLElement"
3343
+ },
3344
+ "description": "The element to check."
3345
+ }
3346
+ ],
3347
+ "description": "Checks if the element is interactive.",
3348
+ "inheritedFrom": {
3349
+ "name": "FocusTrapMixin",
3350
+ "module": "utils/mixins/FocusTrapMixin.js"
3351
+ }
3352
+ },
3353
+ {
3354
+ "kind": "method",
3355
+ "name": "isFocusable",
3356
+ "privacy": "private",
3357
+ "parameters": [
3358
+ {
3359
+ "name": "element",
3360
+ "type": {
3361
+ "text": "HTMLElement"
3362
+ },
3363
+ "description": "The element to check."
3364
+ }
3365
+ ],
3366
+ "description": "Checks if the element is focusable.",
3367
+ "return": {
3368
+ "type": {
3369
+ "text": ""
3370
+ }
3371
+ },
3372
+ "inheritedFrom": {
3373
+ "name": "FocusTrapMixin",
3374
+ "module": "utils/mixins/FocusTrapMixin.js"
3375
+ }
3376
+ },
3377
+ {
3378
+ "kind": "method",
3379
+ "name": "findFocusable",
3380
+ "privacy": "private",
3381
+ "return": {
3382
+ "type": {
3383
+ "text": ""
3384
+ }
3385
+ },
3386
+ "parameters": [
3387
+ {
3388
+ "name": "root",
3389
+ "type": {
3390
+ "text": "ShadowRoot | HTMLElement"
3391
+ },
3392
+ "description": "The root element to search for focusable elements."
3393
+ },
3394
+ {
3395
+ "name": "matches",
3396
+ "default": "new Set()",
3397
+ "type": {
3398
+ "text": "Set<HTMLElement>"
3399
+ },
3400
+ "description": "The set of focusable elements."
3401
+ }
3402
+ ],
3403
+ "description": "Recursively finds all focusable elements within the given root and its descendants.\n\nMake sure this is performant, as it will be called multiple times.",
3404
+ "inheritedFrom": {
3405
+ "name": "FocusTrapMixin",
3406
+ "module": "utils/mixins/FocusTrapMixin.js"
3407
+ }
3408
+ },
3409
+ {
3410
+ "kind": "method",
3411
+ "name": "setFocusableElements",
3412
+ "privacy": "private",
3413
+ "description": "Updates the list of focusable elements within the component's shadow root.",
3414
+ "inheritedFrom": {
3415
+ "name": "FocusTrapMixin",
3416
+ "module": "utils/mixins/FocusTrapMixin.js"
3417
+ }
3418
+ },
3419
+ {
3420
+ "kind": "method",
3421
+ "name": "setInitialFocus",
3422
+ "privacy": "public",
3423
+ "parameters": [
3424
+ {
3425
+ "name": "elementIndexToReceiveFocus",
3426
+ "default": "0",
3427
+ "type": {
3428
+ "text": "number"
3429
+ },
3430
+ "description": "The index of the preferable element to focus."
3431
+ }
3432
+ ],
3433
+ "description": "Sets the initial focus within the container.",
3434
+ "inheritedFrom": {
3435
+ "name": "FocusTrapMixin",
3436
+ "module": "utils/mixins/FocusTrapMixin.js"
3437
+ }
3438
+ },
3439
+ {
3440
+ "kind": "method",
3441
+ "name": "calculateNextIndex",
3442
+ "privacy": "private",
3443
+ "parameters": [
3444
+ {
3445
+ "name": "currentIndex",
3446
+ "type": {
3447
+ "text": "number"
3448
+ },
3449
+ "description": "The current index."
3450
+ },
3451
+ {
3452
+ "name": "step",
3453
+ "type": {
3454
+ "text": "number"
3455
+ },
3456
+ "description": "The step to calculate the next index."
3457
+ }
3458
+ ],
3459
+ "description": "Calculates the next index for the focus trap.",
3460
+ "return": {
3461
+ "type": {
3462
+ "text": ""
3463
+ }
3464
+ },
3465
+ "inheritedFrom": {
3466
+ "name": "FocusTrapMixin",
3467
+ "module": "utils/mixins/FocusTrapMixin.js"
3468
+ }
3469
+ },
3470
+ {
3471
+ "kind": "method",
3472
+ "name": "getDeepActiveElement",
3473
+ "privacy": "private",
3474
+ "description": "Returns the deepest active element in the shadow DOM.",
3475
+ "return": {
3476
+ "type": {
3477
+ "text": ""
3478
+ }
3479
+ },
3480
+ "inheritedFrom": {
3481
+ "name": "FocusTrapMixin",
3482
+ "module": "utils/mixins/FocusTrapMixin.js"
3483
+ }
3484
+ },
3485
+ {
3486
+ "kind": "method",
3487
+ "name": "findElement",
3488
+ "privacy": "private",
3489
+ "parameters": [
3490
+ {
3491
+ "name": "activeElement",
3492
+ "type": {
3493
+ "text": "HTMLElement"
3494
+ },
3495
+ "description": "The active element."
3496
+ }
3497
+ ],
3498
+ "description": "Finds the index of the active element within the focusable elements.",
3499
+ "return": {
3500
+ "type": {
3501
+ "text": ""
3502
+ }
3503
+ },
3504
+ "inheritedFrom": {
3505
+ "name": "FocusTrapMixin",
3506
+ "module": "utils/mixins/FocusTrapMixin.js"
3507
+ }
3508
+ },
3509
+ {
3510
+ "kind": "method",
3511
+ "name": "isEqualFocusNode",
3512
+ "privacy": "private",
3513
+ "parameters": [
3514
+ {
3515
+ "name": "activeElement",
3516
+ "type": {
3517
+ "text": "HTMLElement"
3518
+ },
3519
+ "description": "The active element."
3520
+ },
3521
+ {
3522
+ "name": "element",
3523
+ "type": {
3524
+ "text": "HTMLElement"
3525
+ },
3526
+ "description": "The element to compare."
3527
+ }
3528
+ ],
3529
+ "description": "Checks if the active element is equal to the given element.",
3530
+ "return": {
3531
+ "type": {
3532
+ "text": ""
3533
+ }
3534
+ },
3535
+ "inheritedFrom": {
3536
+ "name": "FocusTrapMixin",
3537
+ "module": "utils/mixins/FocusTrapMixin.js"
3538
+ }
3539
+ },
3540
+ {
3541
+ "kind": "method",
3542
+ "name": "trapFocus",
3543
+ "privacy": "private",
3544
+ "parameters": [
3545
+ {
3546
+ "name": "event",
3547
+ "type": {
3548
+ "text": "KeyboardEvent"
3549
+ }
3550
+ },
3551
+ {
3552
+ "description": "The direction of the focus trap.\nIf true, the focus will be trapped in the previous element.",
3553
+ "name": "direction"
3554
+ }
3555
+ ],
3556
+ "description": "Traps focus within the container.",
3557
+ "inheritedFrom": {
3558
+ "name": "FocusTrapMixin",
3559
+ "module": "utils/mixins/FocusTrapMixin.js"
3560
+ }
3561
+ },
3562
+ {
3563
+ "kind": "method",
3564
+ "name": "handleTabKeydown",
3565
+ "privacy": "private",
3566
+ "parameters": [
3567
+ {
3568
+ "name": "event",
3569
+ "type": {
3570
+ "text": "KeyboardEvent"
3571
+ },
3572
+ "description": "The keyboard event."
3573
+ }
3574
+ ],
3575
+ "description": "Traps focus within the container.",
3576
+ "inheritedFrom": {
3577
+ "name": "FocusTrapMixin",
3578
+ "module": "utils/mixins/FocusTrapMixin.js"
3579
+ }
3580
+ },
3581
+ {
3582
+ "kind": "method",
3583
+ "name": "renderFooter",
3584
+ "privacy": "protected",
3585
+ "description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
3586
+ "return": {
3587
+ "type": {
3588
+ "text": ""
3589
+ }
3590
+ },
3591
+ "inheritedFrom": {
3592
+ "name": "FooterMixin",
3593
+ "module": "utils/mixins/FooterMixin.js"
3594
+ }
3595
+ },
3596
+ {
3597
+ "kind": "field",
3598
+ "name": "id",
3599
+ "type": {
3600
+ "text": "string"
3601
+ },
3602
+ "default": "''",
3603
+ "description": "The unique ID of the dialog",
3604
+ "attribute": "id",
3605
+ "reflects": true,
3606
+ "inheritedFrom": {
3607
+ "name": "Dialog",
3608
+ "module": "components/dialog/dialog.component.js"
3609
+ }
3610
+ },
3611
+ {
3612
+ "kind": "field",
3613
+ "name": "triggerId",
3614
+ "type": {
3615
+ "text": "string | undefined"
3616
+ },
3617
+ "description": "The ID of the element that triggers the dialog",
3618
+ "default": "undefined",
3619
+ "attribute": "triggerId",
3620
+ "reflects": true,
3621
+ "inheritedFrom": {
3622
+ "name": "Dialog",
3623
+ "module": "components/dialog/dialog.component.js"
3624
+ }
3625
+ },
3626
+ {
3627
+ "kind": "field",
3628
+ "name": "visible",
3629
+ "type": {
3630
+ "text": "boolean"
3631
+ },
3632
+ "description": "The visibility of the dialog\n\nDialog is a controlled component, visible is the only property that controls the visibility of the dialog.",
3633
+ "default": "false",
3634
+ "attribute": "visible",
3635
+ "reflects": true,
3636
+ "inheritedFrom": {
3637
+ "name": "Dialog",
3638
+ "module": "components/dialog/dialog.component.js"
3639
+ }
3640
+ },
3641
+ {
3642
+ "kind": "field",
3643
+ "name": "variant",
3644
+ "type": {
3645
+ "text": "DialogVariant"
3646
+ },
3647
+ "description": "The variant of the dialog, can be 'default' or 'promotional'",
3648
+ "default": "default",
3649
+ "attribute": "variant",
3650
+ "reflects": true,
3651
+ "inheritedFrom": {
3652
+ "name": "Dialog",
3653
+ "module": "components/dialog/dialog.component.js"
3654
+ }
3655
+ },
3656
+ {
3657
+ "kind": "field",
3658
+ "name": "closeButtonAriaLabel",
3659
+ "type": {
3660
+ "text": "string | null"
3661
+ },
3662
+ "default": "null",
3663
+ "description": "Defines a string value for the aria-label attribute for close button accessibility",
3664
+ "attribute": "close-button-aria-label",
3665
+ "inheritedFrom": {
3666
+ "name": "Dialog",
3667
+ "module": "components/dialog/dialog.component.js"
3668
+ }
3669
+ },
3670
+ {
3671
+ "kind": "field",
3672
+ "name": "ariaLabel",
3673
+ "type": {
3674
+ "text": "string | null"
3675
+ },
3676
+ "default": "null",
3677
+ "description": "Defines a string value for the aria-label attribute when header is not used",
3678
+ "attribute": "aria-label",
3679
+ "reflects": true,
3680
+ "inheritedFrom": {
3681
+ "name": "Dialog",
3682
+ "module": "components/dialog/dialog.component.js"
3683
+ }
3684
+ },
3685
+ {
3686
+ "kind": "field",
3687
+ "name": "ariaLabelledby",
3688
+ "type": {
3689
+ "text": "string | null"
3690
+ },
3691
+ "default": "null",
3692
+ "description": "Defines a string value for the aria-labelledby attribute that refers to the element\nlabeling the dialog for accessibility",
3693
+ "attribute": "aria-labelledby",
3694
+ "reflects": true,
3695
+ "inheritedFrom": {
3696
+ "name": "Dialog",
3697
+ "module": "components/dialog/dialog.component.js"
3698
+ }
3699
+ },
3700
+ {
3701
+ "kind": "field",
3702
+ "name": "ariaDescribedBy",
3703
+ "type": {
3704
+ "text": "string | null"
3705
+ },
3706
+ "default": "null",
3707
+ "description": "Defines a string value for the aria-describedby attribute that refers to the element\ndescribing the dialog for accessibility",
3708
+ "attribute": "aria-describedby",
3709
+ "reflects": true,
3710
+ "inheritedFrom": {
3711
+ "name": "Dialog",
3712
+ "module": "components/dialog/dialog.component.js"
3713
+ }
3714
+ },
3715
+ {
3716
+ "kind": "field",
3717
+ "name": "ariaDescription",
3718
+ "type": {
3719
+ "text": "string | null"
3720
+ },
3721
+ "default": "null",
3722
+ "description": "Defines a string value for the aria-description attribute that refers to the element\ndescribing the dialog for accessibility",
3723
+ "attribute": "aria-description",
3724
+ "reflects": true,
3725
+ "inheritedFrom": {
3726
+ "name": "Dialog",
3727
+ "module": "components/dialog/dialog.component.js"
3728
+ }
3729
+ },
3730
+ {
3731
+ "kind": "field",
3732
+ "name": "headerText",
3733
+ "type": {
3734
+ "text": "string | undefined"
3735
+ },
3736
+ "description": "Defines a string value to display as the title of the dialog",
3737
+ "attribute": "header-text",
3738
+ "reflects": true,
3739
+ "inheritedFrom": {
3740
+ "name": "Dialog",
3741
+ "module": "components/dialog/dialog.component.js"
3742
+ }
3743
+ },
3744
+ {
3745
+ "kind": "field",
3746
+ "name": "descriptionText",
3747
+ "type": {
3748
+ "text": "string | undefined"
3749
+ },
3750
+ "description": "Defines a string value to display as the under-header description of the dialog",
3751
+ "attribute": "description-text",
3752
+ "reflects": true,
3753
+ "inheritedFrom": {
3754
+ "name": "Dialog",
3755
+ "module": "components/dialog/dialog.component.js"
3756
+ }
3757
+ },
3758
+ {
3759
+ "kind": "field",
3760
+ "name": "headerTagName",
3761
+ "type": {
3762
+ "text": "string"
3763
+ },
3764
+ "description": "The html tag to be used for the header text",
3765
+ "attribute": "header-tag-name",
3766
+ "reflects": true,
3767
+ "inheritedFrom": {
3768
+ "name": "Dialog",
3769
+ "module": "components/dialog/dialog.component.js"
3770
+ }
3771
+ },
3772
+ {
3773
+ "kind": "field",
3774
+ "name": "descriptionTagName",
3775
+ "type": {
3776
+ "text": "string"
3777
+ },
3778
+ "description": "The html tag to be used for the below-header description text",
3779
+ "attribute": "description-tag-name",
3780
+ "reflects": true,
3781
+ "inheritedFrom": {
3782
+ "name": "Dialog",
3783
+ "module": "components/dialog/dialog.component.js"
3784
+ }
3785
+ },
3786
+ {
3787
+ "kind": "field",
3788
+ "name": "role",
3789
+ "type": {
3790
+ "text": "DialogRole"
3791
+ },
3792
+ "description": "Role of the dialog",
3793
+ "default": "dialog",
3794
+ "attribute": "role",
3795
+ "reflects": true,
3796
+ "inheritedFrom": {
3797
+ "name": "Dialog",
3798
+ "module": "components/dialog/dialog.component.js"
3799
+ }
3800
+ },
3801
+ {
3802
+ "kind": "field",
3803
+ "name": "disableAriaHasPopup",
3804
+ "type": {
3805
+ "text": "boolean"
3806
+ },
3807
+ "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
3808
+ "default": "false",
3809
+ "attribute": "disable-aria-haspopup",
3810
+ "reflects": true,
3811
+ "inheritedFrom": {
3812
+ "name": "Dialog",
3813
+ "module": "components/dialog/dialog.component.js"
3814
+ }
3815
+ },
3816
+ {
3817
+ "kind": "method",
3818
+ "name": "closeDialog",
3819
+ "privacy": "private",
3820
+ "description": "Fired when Close Button is clicked or Escape key is pressed.\nThis method dispatches the close event. Setting visible to false\nhas to be done by the consumer of the component.",
3821
+ "inheritedFrom": {
3822
+ "name": "Dialog",
3823
+ "module": "components/dialog/dialog.component.js"
3824
+ }
3825
+ },
3826
+ {
3827
+ "kind": "method",
3828
+ "name": "isOpenUpdated",
3829
+ "privacy": "private",
3830
+ "parameters": [
3831
+ {
3832
+ "name": "oldValue",
3833
+ "type": {
3834
+ "text": "boolean | undefined"
3835
+ },
3836
+ "description": "The old value of the visible property."
3837
+ },
3838
+ {
3839
+ "name": "newValue",
3840
+ "type": {
3841
+ "text": "boolean"
3842
+ },
3843
+ "description": "The new value of the visible property."
3844
+ }
3845
+ ],
3846
+ "description": "Handles the dialog visibility change.\nHandles the exit event to close the dialog.",
3847
+ "inheritedFrom": {
3848
+ "name": "Dialog",
3849
+ "module": "components/dialog/dialog.component.js"
3850
+ }
3851
+ }
3852
+ ],
3853
+ "events": [
3854
+ {
3855
+ "description": "(React: onShown) Dispatched when the dialog is shown",
3856
+ "name": "shown",
3857
+ "reactName": "onShown",
3858
+ "inheritedFrom": {
3859
+ "name": "Dialog",
3860
+ "module": "src/components/dialog/dialog.component.ts"
3861
+ }
3862
+ },
3863
+ {
3864
+ "description": "(React: onHidden) Dispatched when the dialog is hidden",
3865
+ "name": "hidden",
3866
+ "reactName": "onHidden",
3867
+ "inheritedFrom": {
3868
+ "name": "Dialog",
3869
+ "module": "src/components/dialog/dialog.component.ts"
3870
+ }
3871
+ },
3872
+ {
3873
+ "description": "(React: onCreated) Dispatched when the dialog is created (added to the DOM)",
3874
+ "name": "created",
3875
+ "reactName": "onCreated",
3876
+ "inheritedFrom": {
3877
+ "name": "Dialog",
3878
+ "module": "src/components/dialog/dialog.component.ts"
3879
+ }
3880
+ },
3881
+ {
3882
+ "description": "(React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)",
3883
+ "name": "destroyed",
3884
+ "reactName": "onDestroyed",
3885
+ "inheritedFrom": {
3886
+ "name": "Dialog",
3887
+ "module": "src/components/dialog/dialog.component.ts"
3888
+ }
3889
+ },
3890
+ {
3891
+ "description": "(React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed (this does not hide the dialog)",
3892
+ "name": "close",
3893
+ "reactName": "onClose",
3894
+ "inheritedFrom": {
3895
+ "name": "Dialog",
3896
+ "module": "src/components/dialog/dialog.component.ts"
3897
+ }
3898
+ }
3899
+ ],
3900
+ "attributes": [
3901
+ {
3902
+ "name": "illustration",
3903
+ "type": {
3904
+ "text": "IllustrationNames | undefined"
3905
+ },
3906
+ "description": "The illustration to display in the announcement dialog.\nThis can be an image URL, icon name, or any other illustration identifier.\n\nMake sure to choose the right illustration respective the size (the filename includes the size information, i.e. threetwozero = 320px)",
3907
+ "fieldName": "illustration"
3908
+ },
3909
+ {
3910
+ "name": "size",
3911
+ "type": {
3912
+ "text": "DialogSize"
3913
+ },
3914
+ "description": "The size of the announcement dialog, can be 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).",
3915
+ "default": "medium",
3916
+ "fieldName": "size",
3917
+ "inheritedFrom": {
3918
+ "name": "Dialog",
3919
+ "module": "src/components/dialog/dialog.component.ts"
3920
+ }
3921
+ },
3922
+ {
3923
+ "name": "should-focus-trap-wrap",
3924
+ "type": {
3925
+ "text": "boolean"
3926
+ },
3927
+ "default": "true",
3928
+ "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
3929
+ "fieldName": "shouldFocusTrapWrap",
3930
+ "inheritedFrom": {
3931
+ "name": "FocusTrapMixin",
3932
+ "module": "src/utils/mixins/FocusTrapMixin.ts"
3933
+ }
3934
+ },
3935
+ {
3936
+ "name": "id",
3937
+ "type": {
3938
+ "text": "string"
3939
+ },
3940
+ "default": "''",
3941
+ "description": "The unique ID of the dialog",
3942
+ "fieldName": "id",
3943
+ "inheritedFrom": {
3944
+ "name": "Dialog",
3945
+ "module": "src/components/dialog/dialog.component.ts"
3946
+ }
3947
+ },
3948
+ {
3949
+ "name": "triggerId",
3950
+ "type": {
3951
+ "text": "string | undefined"
3952
+ },
3953
+ "description": "The ID of the element that triggers the dialog",
3954
+ "default": "undefined",
3955
+ "fieldName": "triggerId",
3956
+ "inheritedFrom": {
3957
+ "name": "Dialog",
3958
+ "module": "src/components/dialog/dialog.component.ts"
3959
+ }
3960
+ },
3961
+ {
3962
+ "name": "visible",
3963
+ "type": {
3964
+ "text": "boolean"
3965
+ },
3966
+ "description": "The visibility of the dialog\n\nDialog is a controlled component, visible is the only property that controls the visibility of the dialog.",
3967
+ "default": "false",
3968
+ "fieldName": "visible",
3969
+ "inheritedFrom": {
3970
+ "name": "Dialog",
3971
+ "module": "src/components/dialog/dialog.component.ts"
3972
+ }
3973
+ },
3974
+ {
3975
+ "name": "z-index",
3976
+ "type": {
3977
+ "text": "number"
3978
+ },
3979
+ "description": "The z-index of the dialog\n\nThe backdrop will have z-index of `zIndex - 1`",
3980
+ "default": "1000",
3981
+ "fieldName": "zIndex",
3982
+ "inheritedFrom": {
3983
+ "name": "Dialog",
3984
+ "module": "src/components/dialog/dialog.component.ts"
3985
+ }
3986
+ },
3987
+ {
3988
+ "name": "variant",
3989
+ "type": {
3990
+ "text": "DialogVariant"
3991
+ },
3992
+ "description": "The variant of the dialog, can be 'default' or 'promotional'",
3993
+ "default": "default",
3994
+ "fieldName": "variant",
3995
+ "inheritedFrom": {
3996
+ "name": "Dialog",
3997
+ "module": "src/components/dialog/dialog.component.ts"
3998
+ }
3999
+ },
4000
+ {
4001
+ "name": "close-button-aria-label",
4002
+ "type": {
4003
+ "text": "string | null"
4004
+ },
4005
+ "default": "null",
4006
+ "description": "Defines a string value for the aria-label attribute for close button accessibility",
4007
+ "fieldName": "closeButtonAriaLabel",
4008
+ "inheritedFrom": {
4009
+ "name": "Dialog",
4010
+ "module": "src/components/dialog/dialog.component.ts"
4011
+ }
4012
+ },
4013
+ {
4014
+ "name": "aria-label",
4015
+ "type": {
4016
+ "text": "string | null"
4017
+ },
4018
+ "default": "null",
4019
+ "description": "Defines a string value for the aria-label attribute when header is not used",
4020
+ "fieldName": "ariaLabel",
4021
+ "inheritedFrom": {
4022
+ "name": "Dialog",
4023
+ "module": "src/components/dialog/dialog.component.ts"
4024
+ }
4025
+ },
4026
+ {
4027
+ "name": "aria-labelledby",
4028
+ "type": {
4029
+ "text": "string | null"
4030
+ },
4031
+ "default": "null",
4032
+ "description": "Defines a string value for the aria-labelledby attribute that refers to the element\nlabeling the dialog for accessibility",
4033
+ "fieldName": "ariaLabelledby",
4034
+ "inheritedFrom": {
4035
+ "name": "Dialog",
4036
+ "module": "src/components/dialog/dialog.component.ts"
4037
+ }
4038
+ },
4039
+ {
4040
+ "name": "aria-describedby",
4041
+ "type": {
4042
+ "text": "string | null"
4043
+ },
4044
+ "default": "null",
4045
+ "description": "Defines a string value for the aria-describedby attribute that refers to the element\ndescribing the dialog for accessibility",
4046
+ "fieldName": "ariaDescribedBy",
4047
+ "inheritedFrom": {
4048
+ "name": "Dialog",
4049
+ "module": "src/components/dialog/dialog.component.ts"
4050
+ }
4051
+ },
4052
+ {
4053
+ "name": "aria-description",
4054
+ "type": {
4055
+ "text": "string | null"
4056
+ },
4057
+ "default": "null",
4058
+ "description": "Defines a string value for the aria-description attribute that refers to the element\ndescribing the dialog for accessibility",
4059
+ "fieldName": "ariaDescription",
4060
+ "inheritedFrom": {
4061
+ "name": "Dialog",
4062
+ "module": "src/components/dialog/dialog.component.ts"
4063
+ }
4064
+ },
4065
+ {
4066
+ "name": "header-text",
4067
+ "type": {
4068
+ "text": "string | undefined"
4069
+ },
4070
+ "description": "Defines a string value to display as the title of the dialog",
4071
+ "fieldName": "headerText",
4072
+ "inheritedFrom": {
4073
+ "name": "Dialog",
4074
+ "module": "src/components/dialog/dialog.component.ts"
4075
+ }
4076
+ },
4077
+ {
4078
+ "name": "description-text",
4079
+ "type": {
4080
+ "text": "string | undefined"
4081
+ },
4082
+ "description": "Defines a string value to display as the under-header description of the dialog",
4083
+ "fieldName": "descriptionText",
4084
+ "inheritedFrom": {
4085
+ "name": "Dialog",
4086
+ "module": "src/components/dialog/dialog.component.ts"
4087
+ }
4088
+ },
4089
+ {
4090
+ "name": "header-tag-name",
4091
+ "type": {
4092
+ "text": "string"
4093
+ },
4094
+ "description": "The html tag to be used for the header text",
4095
+ "fieldName": "headerTagName",
4096
+ "inheritedFrom": {
4097
+ "name": "Dialog",
4098
+ "module": "src/components/dialog/dialog.component.ts"
4099
+ }
4100
+ },
4101
+ {
4102
+ "name": "description-tag-name",
4103
+ "type": {
4104
+ "text": "string"
4105
+ },
4106
+ "description": "The html tag to be used for the below-header description text",
4107
+ "fieldName": "descriptionTagName",
4108
+ "inheritedFrom": {
4109
+ "name": "Dialog",
4110
+ "module": "src/components/dialog/dialog.component.ts"
4111
+ }
4112
+ },
4113
+ {
4114
+ "name": "role",
4115
+ "type": {
4116
+ "text": "DialogRole"
4117
+ },
4118
+ "description": "Role of the dialog",
4119
+ "default": "dialog",
4120
+ "fieldName": "role",
4121
+ "inheritedFrom": {
4122
+ "name": "Dialog",
4123
+ "module": "src/components/dialog/dialog.component.ts"
4124
+ }
4125
+ },
4126
+ {
4127
+ "name": "disable-aria-haspopup",
4128
+ "type": {
4129
+ "text": "boolean"
4130
+ },
4131
+ "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
4132
+ "default": "false",
4133
+ "fieldName": "disableAriaHasPopup",
4134
+ "inheritedFrom": {
4135
+ "name": "Dialog",
4136
+ "module": "src/components/dialog/dialog.component.ts"
4137
+ }
4138
+ },
4139
+ {
4140
+ "name": "focus-trap",
4141
+ "type": {
4142
+ "text": "boolean"
4143
+ },
4144
+ "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.\n\nNOTE: this should only be disabled in rare cases! By default a Modal Dialog\nshould trap focus always.",
4145
+ "default": "true",
4146
+ "fieldName": "focusTrap",
4147
+ "inheritedFrom": {
4148
+ "name": "Dialog",
4149
+ "module": "src/components/dialog/dialog.component.ts"
4150
+ }
4151
+ }
4152
+ ],
4153
+ "superclass": {
4154
+ "name": "Dialog",
4155
+ "module": "/src/components/dialog/dialog.component"
4156
+ },
4157
+ "tagName": "mdc-announcementdialog",
4158
+ "jsDoc": "/**\n * AnnouncementDialog component is a modal dialog that can be used to display announcements, extending the existing Dialog component.\n * It can be used to create custom dialogs where a illustration, content and footer actions are provided by the consumer.\n * The dialog is available in 4 sizes: medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * The dialog can be controlled solely through the `visible` property, no trigger element is required.\n * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\n * remember the previously focused element before the dialog was opened.\n *\n * The dialog is a controlled component, meaning it does not have its own state management for visibility.\n * Use the `visible` property to control the visibility of the dialog.\n * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\n * or Escape is pressed).\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n * - Use `?visible=true/false` as an attribute instead of `visible=true/false`\n * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions\n *\n * @dependency mdc-button\n * @dependency mdc-illustration\n * @dependency mdc-text\n *\n * @tagname mdc-announcementdialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed\n * (this does not hide the dialog)\n *\n * @cssproperty --mdc-announcementdialog-illustration-background-color - background color of the illustration section\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n * @cssproperty --mdc-dialog-height - height of the dialog\n *\n * @csspart body - The main body container that holds the illustration and content sections\n * @csspart illustration-container - The container for the illustration section\n * @csspart content-container - The container for the content section\n * @csspart header-text - The header text\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot illustration-container - Slot for the illustration container section\n * @slot content-container - Slot for the content (header, description, etc) section\n * @slot description-container - Slot for the description in the content (below header) - pass in Text, Links etc as needed.\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer - This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred\n */",
4159
+ "customElement": true
4160
+ }
4161
+ ],
4162
+ "exports": [
4163
+ {
4164
+ "kind": "js",
4165
+ "name": "default",
4166
+ "declaration": {
4167
+ "name": "AnnouncementDialog",
4168
+ "module": "components/announcementdialog/announcementdialog.component.js"
4169
+ }
4170
+ }
4171
+ ]
4172
+ },
2850
4173
  {
2851
4174
  "kind": "javascript-module",
2852
4175
  "path": "components/badge/badge.component.js",
@@ -5682,12 +7005,12 @@
5682
7005
  },
5683
7006
  {
5684
7007
  "kind": "javascript-module",
5685
- "path": "components/cardbutton/cardbutton.component.js",
7008
+ "path": "components/card/card.component.js",
5686
7009
  "declarations": [
5687
7010
  {
5688
7011
  "kind": "class",
5689
- "description": "cardbutton component looks like a card and behaves as a button component.\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.\nMake sure to pass only non-interactable elements within the slots.",
5690
- "name": "CardButton",
7012
+ "description": "The card component allows users to organize information in a structured and tangible\nformat that is visually appealing. `mdc-card` is a static component that supports\nthe following features:\n- Image\n- Header\n - Icon\n - Title\n - Subtitle\n- Body\n\nThe card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\n\nThere are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n\nTo make this card interactive, use the following slots:\n- `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n- `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n- `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.\n- `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\nwithin the footer section.\n\nInteractive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.",
7013
+ "name": "Card",
5691
7014
  "cssProperties": [
5692
7015
  {
5693
7016
  "description": "The width of the card",
@@ -5756,6 +7079,14 @@
5756
7079
  {
5757
7080
  "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
5758
7081
  "name": "footer-button-primary"
7082
+ },
7083
+ {
7084
+ "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
7085
+ "name": "footer-button-secondary"
7086
+ },
7087
+ {
7088
+ "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred.",
7089
+ "name": "footer"
5759
7090
  }
5760
7091
  ],
5761
7092
  "members": [
@@ -5949,351 +7280,19 @@
5949
7280
  "module": "utils/mixins/CardComponentMixin.js"
5950
7281
  }
5951
7282
  },
5952
- {
5953
- "kind": "field",
5954
- "name": "autoFocusOnMount",
5955
- "type": {
5956
- "text": "boolean"
5957
- },
5958
- "default": "false",
5959
- "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
5960
- "attribute": "auto-focus-on-mount",
5961
- "reflects": true,
5962
- "inheritedFrom": {
5963
- "name": "Buttonsimple",
5964
- "module": "components/buttonsimple/buttonsimple.component.js"
5965
- }
5966
- },
5967
- {
5968
- "kind": "field",
5969
- "name": "tabIndex",
5970
- "type": {
5971
- "text": "number"
5972
- },
5973
- "default": "0",
5974
- "description": "This property specifies the tab order of the element.",
5975
- "attribute": "tabIndex",
5976
- "reflects": true,
5977
- "inheritedFrom": {
5978
- "name": "Buttonsimple",
5979
- "module": "components/buttonsimple/buttonsimple.component.js"
5980
- }
5981
- },
5982
- {
5983
- "kind": "field",
5984
- "name": "disabled",
5985
- "type": {
5986
- "text": "boolean | undefined"
5987
- },
5988
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
5989
- "default": "undefined",
5990
- "attribute": "disabled",
5991
- "reflects": true,
5992
- "inheritedFrom": {
5993
- "name": "Buttonsimple",
5994
- "module": "components/buttonsimple/buttonsimple.component.js"
5995
- }
5996
- },
5997
- {
5998
- "kind": "field",
5999
- "name": "active",
6000
- "type": {
6001
- "text": "boolean | undefined"
6002
- },
6003
- "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
6004
- "default": "undefined",
6005
- "attribute": "active",
6006
- "reflects": true,
6007
- "inheritedFrom": {
6008
- "name": "Buttonsimple",
6009
- "module": "components/buttonsimple/buttonsimple.component.js"
6010
- }
6011
- },
6012
- {
6013
- "kind": "field",
6014
- "name": "softDisabled",
6015
- "type": {
6016
- "text": "boolean | undefined"
6017
- },
6018
- "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
6019
- "default": "undefined",
6020
- "attribute": "soft-disabled",
6021
- "reflects": true,
6022
- "inheritedFrom": {
6023
- "name": "Buttonsimple",
6024
- "module": "components/buttonsimple/buttonsimple.component.js"
6025
- }
6026
- },
6027
- {
6028
- "kind": "field",
6029
- "name": "size",
6030
- "type": {
6031
- "text": "ButtonSize"
6032
- },
6033
- "description": "Simplebutton size is a super set of all the sizes supported by children components.",
6034
- "default": "32",
6035
- "attribute": "size",
6036
- "reflects": true,
6037
- "inheritedFrom": {
6038
- "name": "Buttonsimple",
6039
- "module": "components/buttonsimple/buttonsimple.component.js"
6040
- }
6041
- },
6042
- {
6043
- "kind": "field",
6044
- "name": "role",
6045
- "type": {
6046
- "text": "RoleType"
6047
- },
6048
- "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
6049
- "default": "button",
6050
- "attribute": "role",
6051
- "reflects": true,
6052
- "inheritedFrom": {
6053
- "name": "Buttonsimple",
6054
- "module": "components/buttonsimple/buttonsimple.component.js"
6055
- }
6056
- },
6057
- {
6058
- "kind": "field",
6059
- "name": "ariaStateKey",
6060
- "type": {
6061
- "text": "string | undefined"
6062
- },
6063
- "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
6064
- "default": "'aria-pressed' (when)",
6065
- "attribute": "ariaStateKey",
6066
- "reflects": true,
6067
- "inheritedFrom": {
6068
- "name": "Buttonsimple",
6069
- "module": "components/buttonsimple/buttonsimple.component.js"
6070
- }
6071
- },
6072
- {
6073
- "kind": "field",
6074
- "name": "type",
6075
- "type": {
6076
- "text": "ButtonType"
6077
- },
6078
- "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
6079
- "default": "button",
6080
- "attribute": "type",
6081
- "reflects": true,
6082
- "inheritedFrom": {
6083
- "name": "Buttonsimple",
6084
- "module": "components/buttonsimple/buttonsimple.component.js"
6085
- }
6086
- },
6087
- {
6088
- "kind": "field",
6089
- "name": "name",
6090
- "type": {
6091
- "text": "string | undefined"
6092
- },
6093
- "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
6094
- "attribute": "name",
6095
- "reflects": true,
6096
- "inheritedFrom": {
6097
- "name": "Buttonsimple",
6098
- "module": "components/buttonsimple/buttonsimple.component.js"
6099
- }
6100
- },
6101
- {
6102
- "kind": "field",
6103
- "name": "value",
6104
- "type": {
6105
- "text": "string | undefined"
6106
- },
6107
- "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
6108
- "attribute": "value",
6109
- "reflects": true,
6110
- "inheritedFrom": {
6111
- "name": "Buttonsimple",
6112
- "module": "components/buttonsimple/buttonsimple.component.js"
6113
- }
6114
- },
6115
7283
  {
6116
7284
  "kind": "method",
6117
- "name": "executeAction",
6118
- "privacy": "protected",
6119
- "inheritedFrom": {
6120
- "name": "Buttonsimple",
6121
- "module": "components/buttonsimple/buttonsimple.component.js"
6122
- }
6123
- },
6124
- {
6125
- "kind": "method",
6126
- "name": "setActive",
7285
+ "name": "renderFooter",
6127
7286
  "privacy": "protected",
6128
- "parameters": [
6129
- {
6130
- "name": "element",
6131
- "type": {
6132
- "text": "HTMLElement"
6133
- },
6134
- "description": "The button element"
6135
- },
6136
- {
6137
- "name": "active",
6138
- "optional": true,
6139
- "type": {
6140
- "text": "boolean"
6141
- },
6142
- "description": "The active state of the element"
6143
- }
6144
- ],
6145
- "description": "Sets the ariaStateKey attributes based on the active state of the button.",
6146
- "inheritedFrom": {
6147
- "name": "Buttonsimple",
6148
- "module": "components/buttonsimple/buttonsimple.component.js"
6149
- }
6150
- },
6151
- {
6152
- "kind": "method",
6153
- "name": "setSoftDisabled",
6154
- "privacy": "private",
6155
- "parameters": [
6156
- {
6157
- "name": "element",
6158
- "type": {
6159
- "text": "HTMLElement"
6160
- },
6161
- "description": "The button element."
6162
- },
6163
- {
6164
- "name": "softDisabled",
6165
- "optional": true,
6166
- "type": {
6167
- "text": "boolean"
6168
- },
6169
- "description": "The soft-disabled state."
6170
- }
6171
- ],
6172
- "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
6173
- "inheritedFrom": {
6174
- "name": "Buttonsimple",
6175
- "module": "components/buttonsimple/buttonsimple.component.js"
6176
- }
6177
- },
6178
- {
6179
- "kind": "method",
6180
- "name": "setDisabled",
6181
- "privacy": "private",
6182
- "parameters": [
6183
- {
6184
- "name": "element",
6185
- "type": {
6186
- "text": "HTMLElement"
6187
- },
6188
- "description": "The button element."
6189
- },
6190
- {
6191
- "name": "disabled",
6192
- "type": {
6193
- "text": "boolean"
6194
- },
6195
- "description": "The disabled state."
6196
- }
6197
- ],
6198
- "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
6199
- "inheritedFrom": {
6200
- "name": "Buttonsimple",
6201
- "module": "components/buttonsimple/buttonsimple.component.js"
6202
- }
6203
- },
6204
- {
6205
- "kind": "method",
6206
- "name": "triggerClickEvent",
6207
- "privacy": "private",
6208
- "inheritedFrom": {
6209
- "name": "Buttonsimple",
6210
- "module": "components/buttonsimple/buttonsimple.component.js"
6211
- }
6212
- },
6213
- {
6214
- "kind": "method",
6215
- "name": "handleBlur",
6216
- "privacy": "private",
6217
- "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
6218
- "inheritedFrom": {
6219
- "name": "Buttonsimple",
6220
- "module": "components/buttonsimple/buttonsimple.component.js"
6221
- }
6222
- },
6223
- {
6224
- "kind": "method",
6225
- "name": "handleKeyDown",
6226
- "privacy": "private",
6227
- "parameters": [
6228
- {
6229
- "name": "event",
6230
- "type": {
6231
- "text": "KeyboardEvent"
6232
- },
6233
- "description": "The keyboard event."
6234
- }
6235
- ],
6236
- "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
6237
- "inheritedFrom": {
6238
- "name": "Buttonsimple",
6239
- "module": "components/buttonsimple/buttonsimple.component.js"
6240
- }
6241
- },
6242
- {
6243
- "kind": "method",
6244
- "name": "handleKeyUp",
6245
- "privacy": "private",
6246
- "parameters": [
6247
- {
6248
- "name": "event",
6249
- "type": {
6250
- "text": "KeyboardEvent"
6251
- },
6252
- "description": "The keyboard event."
7287
+ "description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
7288
+ "return": {
7289
+ "type": {
7290
+ "text": ""
6253
7291
  }
6254
- ],
6255
- "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
6256
- "inheritedFrom": {
6257
- "name": "Buttonsimple",
6258
- "module": "components/buttonsimple/buttonsimple.component.js"
6259
- }
6260
- }
6261
- ],
6262
- "events": [
6263
- {
6264
- "description": "(React: onClick) Event that gets dispatched when the card is clicked.",
6265
- "name": "click",
6266
- "reactName": "onClick",
6267
- "inheritedFrom": {
6268
- "name": "Buttonsimple",
6269
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6270
- }
6271
- },
6272
- {
6273
- "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the card. It fires the click event when enter key is used.",
6274
- "name": "keydown",
6275
- "reactName": "onKeyDown",
6276
- "inheritedFrom": {
6277
- "name": "Buttonsimple",
6278
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6279
- }
6280
- },
6281
- {
6282
- "description": "(React: onKeyUp) This event is dispatched when a key is released on the card. It fires the click event when space key is used.",
6283
- "name": "keyup",
6284
- "reactName": "onKeyUp",
6285
- "inheritedFrom": {
6286
- "name": "Buttonsimple",
6287
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6288
- }
6289
- },
6290
- {
6291
- "description": "(React: onFocus) Event that gets dispatched when the card receives focus.",
6292
- "name": "focus",
6293
- "reactName": "onFocus",
7292
+ },
6294
7293
  "inheritedFrom": {
6295
- "name": "Buttonsimple",
6296
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
7294
+ "name": "FooterMixin",
7295
+ "module": "utils/mixins/FooterMixin.js"
6297
7296
  }
6298
7297
  }
6299
7298
  ],
@@ -6301,271 +7300,134 @@
6301
7300
  {
6302
7301
  "name": "CardComponentMixin",
6303
7302
  "module": "/src/utils/mixins/CardComponentMixin"
6304
- }
6305
- ],
6306
- "superclass": {
6307
- "name": "Buttonsimple",
6308
- "module": "/src/components/buttonsimple/buttonsimple.component"
6309
- },
6310
- "tagName": "mdc-cardbutton",
6311
- "jsDoc": "/**\n * cardbutton component looks like a card and behaves as a button component.\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * @tagname mdc-cardbutton\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It fires the click event when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It fires the click event when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n */",
6312
- "customElement": true,
6313
- "attributes": [
6314
- {
6315
- "name": "card-title",
6316
- "type": {
6317
- "text": "string"
6318
- },
6319
- "default": "''",
6320
- "description": "The title of the card - part of header section",
6321
- "fieldName": "cardTitle",
6322
- "inheritedFrom": {
6323
- "name": "CardComponentMixin",
6324
- "module": "src/utils/mixins/CardComponentMixin.ts"
6325
- }
6326
- },
6327
- {
6328
- "name": "subtitle",
6329
- "type": {
6330
- "text": "string"
6331
- },
6332
- "default": "''",
6333
- "description": "The subtitle of the card - part of header section",
6334
- "fieldName": "subtitle",
6335
- "inheritedFrom": {
6336
- "name": "CardComponentMixin",
6337
- "module": "src/utils/mixins/CardComponentMixin.ts"
6338
- }
6339
- },
6340
- {
6341
- "name": "image-src",
6342
- "type": {
6343
- "text": "string"
6344
- },
6345
- "default": "''",
6346
- "description": "The image source URL to render on the card",
6347
- "fieldName": "imageSrc",
6348
- "inheritedFrom": {
6349
- "name": "CardComponentMixin",
6350
- "module": "src/utils/mixins/CardComponentMixin.ts"
6351
- }
6352
- },
6353
- {
6354
- "name": "image-alt",
6355
- "type": {
6356
- "text": "string"
6357
- },
6358
- "default": "''",
6359
- "description": "The image alt for accessibility support",
6360
- "fieldName": "imageAlt",
6361
- "inheritedFrom": {
6362
- "name": "CardComponentMixin",
6363
- "module": "src/utils/mixins/CardComponentMixin.ts"
6364
- }
6365
- },
6366
- {
6367
- "name": "variant",
6368
- "type": {
6369
- "text": "CardVariant"
6370
- },
6371
- "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
6372
- "default": "'border'",
6373
- "fieldName": "variant",
6374
- "inheritedFrom": {
6375
- "name": "CardComponentMixin",
6376
- "module": "src/utils/mixins/CardComponentMixin.ts"
6377
- }
6378
- },
6379
- {
6380
- "name": "orientation",
6381
- "type": {
6382
- "text": "CardOrientation"
6383
- },
6384
- "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
6385
- "default": "'vertical'",
6386
- "fieldName": "orientation",
6387
- "inheritedFrom": {
6388
- "name": "CardComponentMixin",
6389
- "module": "src/utils/mixins/CardComponentMixin.ts"
6390
- }
6391
7303
  },
6392
7304
  {
6393
- "name": "title-tag-name",
6394
- "type": {
6395
- "text": "TagNameType"
6396
- },
6397
- "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
6398
- "default": "'span'",
6399
- "fieldName": "titleTagName",
6400
- "inheritedFrom": {
6401
- "name": "CardComponentMixin",
6402
- "module": "src/utils/mixins/CardComponentMixin.ts"
6403
- }
6404
- },
6405
- {
6406
- "name": "subtitle-tag-name",
6407
- "type": {
6408
- "text": "TagNameType"
6409
- },
6410
- "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
6411
- "default": "'span'",
6412
- "fieldName": "subtitleTagName",
6413
- "inheritedFrom": {
6414
- "name": "CardComponentMixin",
6415
- "module": "src/utils/mixins/CardComponentMixin.ts"
6416
- }
6417
- },
6418
- {
6419
- "name": "icon-name",
6420
- "type": {
6421
- "text": "IconNames | undefined"
6422
- },
6423
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
6424
- "fieldName": "iconName",
6425
- "inheritedFrom": {
6426
- "name": "CardComponentMixin",
6427
- "module": "src/utils/mixins/CardComponentMixin.ts"
6428
- }
6429
- },
6430
- {
6431
- "name": "auto-focus-on-mount",
6432
- "type": {
6433
- "text": "boolean"
6434
- },
6435
- "default": "false",
6436
- "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
6437
- "fieldName": "autoFocusOnMount",
6438
- "inheritedFrom": {
6439
- "name": "Buttonsimple",
6440
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6441
- }
6442
- },
6443
- {
6444
- "name": "tabIndex",
6445
- "type": {
6446
- "text": "number"
6447
- },
6448
- "default": "0",
6449
- "description": "This property specifies the tab order of the element.",
6450
- "fieldName": "tabIndex",
6451
- "inheritedFrom": {
6452
- "name": "Buttonsimple",
6453
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6454
- }
6455
- },
7305
+ "name": "FooterMixin",
7306
+ "module": "/src/utils/mixins/FooterMixin"
7307
+ }
7308
+ ],
7309
+ "superclass": {
7310
+ "name": "Component",
7311
+ "module": "/src/models"
7312
+ },
7313
+ "tagName": "mdc-card",
7314
+ "jsDoc": "/**\n * The card component allows users to organize information in a structured and tangible\n * format that is visually appealing. `mdc-card` is a static component that supports\n * the following features:\n * - Image\n * - Header\n * - Icon\n * - Title\n * - Subtitle\n * - Body\n *\n * The card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\n *\n * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n *\n * To make this card interactive, use the following slots:\n * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n * - `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.\n * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n *\n * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer - This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @tagname mdc-card\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n */",
7315
+ "customElement": true,
7316
+ "attributes": [
6456
7317
  {
6457
- "name": "disabled",
7318
+ "name": "card-title",
6458
7319
  "type": {
6459
- "text": "boolean | undefined"
7320
+ "text": "string"
6460
7321
  },
6461
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
6462
- "default": "undefined",
6463
- "fieldName": "disabled",
7322
+ "default": "''",
7323
+ "description": "The title of the card - part of header section",
7324
+ "fieldName": "cardTitle",
6464
7325
  "inheritedFrom": {
6465
- "name": "Buttonsimple",
6466
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
7326
+ "name": "CardComponentMixin",
7327
+ "module": "src/utils/mixins/CardComponentMixin.ts"
6467
7328
  }
6468
7329
  },
6469
7330
  {
6470
- "name": "active",
7331
+ "name": "subtitle",
6471
7332
  "type": {
6472
- "text": "boolean | undefined"
7333
+ "text": "string"
6473
7334
  },
6474
- "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
6475
- "default": "undefined",
6476
- "fieldName": "active",
7335
+ "default": "''",
7336
+ "description": "The subtitle of the card - part of header section",
7337
+ "fieldName": "subtitle",
6477
7338
  "inheritedFrom": {
6478
- "name": "Buttonsimple",
6479
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
7339
+ "name": "CardComponentMixin",
7340
+ "module": "src/utils/mixins/CardComponentMixin.ts"
6480
7341
  }
6481
7342
  },
6482
7343
  {
6483
- "name": "soft-disabled",
7344
+ "name": "image-src",
6484
7345
  "type": {
6485
- "text": "boolean | undefined"
7346
+ "text": "string"
6486
7347
  },
6487
- "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
6488
- "default": "undefined",
6489
- "fieldName": "softDisabled",
7348
+ "default": "''",
7349
+ "description": "The image source URL to render on the card",
7350
+ "fieldName": "imageSrc",
6490
7351
  "inheritedFrom": {
6491
- "name": "Buttonsimple",
6492
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
7352
+ "name": "CardComponentMixin",
7353
+ "module": "src/utils/mixins/CardComponentMixin.ts"
6493
7354
  }
6494
7355
  },
6495
7356
  {
6496
- "name": "size",
7357
+ "name": "image-alt",
6497
7358
  "type": {
6498
- "text": "ButtonSize"
7359
+ "text": "string"
6499
7360
  },
6500
- "description": "Simplebutton size is a super set of all the sizes supported by children components.",
6501
- "default": "32",
6502
- "fieldName": "size",
7361
+ "default": "''",
7362
+ "description": "The image alt for accessibility support",
7363
+ "fieldName": "imageAlt",
6503
7364
  "inheritedFrom": {
6504
- "name": "Buttonsimple",
6505
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
7365
+ "name": "CardComponentMixin",
7366
+ "module": "src/utils/mixins/CardComponentMixin.ts"
6506
7367
  }
6507
7368
  },
6508
7369
  {
6509
- "name": "role",
7370
+ "name": "variant",
6510
7371
  "type": {
6511
- "text": "RoleType"
7372
+ "text": "CardVariant"
6512
7373
  },
6513
- "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
6514
- "default": "button",
6515
- "fieldName": "role",
7374
+ "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
7375
+ "default": "'border'",
7376
+ "fieldName": "variant",
6516
7377
  "inheritedFrom": {
6517
- "name": "Buttonsimple",
6518
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
7378
+ "name": "CardComponentMixin",
7379
+ "module": "src/utils/mixins/CardComponentMixin.ts"
6519
7380
  }
6520
7381
  },
6521
7382
  {
6522
- "name": "ariaStateKey",
7383
+ "name": "orientation",
6523
7384
  "type": {
6524
- "text": "string | undefined"
7385
+ "text": "CardOrientation"
6525
7386
  },
6526
- "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
6527
- "default": "'aria-pressed' (when)",
6528
- "fieldName": "ariaStateKey",
7387
+ "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
7388
+ "default": "'vertical'",
7389
+ "fieldName": "orientation",
6529
7390
  "inheritedFrom": {
6530
- "name": "Buttonsimple",
6531
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
7391
+ "name": "CardComponentMixin",
7392
+ "module": "src/utils/mixins/CardComponentMixin.ts"
6532
7393
  }
6533
7394
  },
6534
7395
  {
6535
- "name": "type",
7396
+ "name": "title-tag-name",
6536
7397
  "type": {
6537
- "text": "ButtonType"
7398
+ "text": "TagNameType"
6538
7399
  },
6539
- "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
6540
- "default": "button",
6541
- "fieldName": "type",
7400
+ "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
7401
+ "default": "'span'",
7402
+ "fieldName": "titleTagName",
6542
7403
  "inheritedFrom": {
6543
- "name": "Buttonsimple",
6544
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
7404
+ "name": "CardComponentMixin",
7405
+ "module": "src/utils/mixins/CardComponentMixin.ts"
6545
7406
  }
6546
7407
  },
6547
7408
  {
6548
- "name": "name",
7409
+ "name": "subtitle-tag-name",
6549
7410
  "type": {
6550
- "text": "string | undefined"
7411
+ "text": "TagNameType"
6551
7412
  },
6552
- "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
6553
- "fieldName": "name",
7413
+ "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
7414
+ "default": "'span'",
7415
+ "fieldName": "subtitleTagName",
6554
7416
  "inheritedFrom": {
6555
- "name": "Buttonsimple",
6556
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
7417
+ "name": "CardComponentMixin",
7418
+ "module": "src/utils/mixins/CardComponentMixin.ts"
6557
7419
  }
6558
7420
  },
6559
7421
  {
6560
- "name": "value",
7422
+ "name": "icon-name",
6561
7423
  "type": {
6562
- "text": "string | undefined"
7424
+ "text": "IconNames | undefined"
6563
7425
  },
6564
- "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
6565
- "fieldName": "value",
7426
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
7427
+ "fieldName": "iconName",
6566
7428
  "inheritedFrom": {
6567
- "name": "Buttonsimple",
6568
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
7429
+ "name": "CardComponentMixin",
7430
+ "module": "src/utils/mixins/CardComponentMixin.ts"
6569
7431
  }
6570
7432
  }
6571
7433
  ]
@@ -6576,20 +7438,20 @@
6576
7438
  "kind": "js",
6577
7439
  "name": "default",
6578
7440
  "declaration": {
6579
- "name": "CardButton",
6580
- "module": "components/cardbutton/cardbutton.component.js"
7441
+ "name": "Card",
7442
+ "module": "components/card/card.component.js"
6581
7443
  }
6582
7444
  }
6583
7445
  ]
6584
7446
  },
6585
7447
  {
6586
7448
  "kind": "javascript-module",
6587
- "path": "components/card/card.component.js",
7449
+ "path": "components/cardbutton/cardbutton.component.js",
6588
7450
  "declarations": [
6589
7451
  {
6590
7452
  "kind": "class",
6591
- "description": "The card component allows users to organize information in a structured and tangible\nformat that is visually appealing. `mdc-card` is a static component that supports\nthe following features:\n- Image\n- Header\n - Icon\n - Title\n - Subtitle\n- Body\n\nThe card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\n\nThere are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n\nTo make this card interactive, use the following slots:\n- `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n- `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n- `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.\n- `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\nwithin the footer section.\n\nInteractive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.",
6592
- "name": "Card",
7453
+ "description": "cardbutton component looks like a card and behaves as a button component.\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.\nMake sure to pass only non-interactable elements within the slots.",
7454
+ "name": "CardButton",
6593
7455
  "cssProperties": [
6594
7456
  {
6595
7457
  "description": "The width of the card",
@@ -6658,14 +7520,6 @@
6658
7520
  {
6659
7521
  "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
6660
7522
  "name": "footer-button-primary"
6661
- },
6662
- {
6663
- "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
6664
- "name": "footer-button-secondary"
6665
- },
6666
- {
6667
- "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred.",
6668
- "name": "footer"
6669
7523
  }
6670
7524
  ],
6671
7525
  "members": [
@@ -6859,19 +7713,351 @@
6859
7713
  "module": "utils/mixins/CardComponentMixin.js"
6860
7714
  }
6861
7715
  },
7716
+ {
7717
+ "kind": "field",
7718
+ "name": "autoFocusOnMount",
7719
+ "type": {
7720
+ "text": "boolean"
7721
+ },
7722
+ "default": "false",
7723
+ "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
7724
+ "attribute": "auto-focus-on-mount",
7725
+ "reflects": true,
7726
+ "inheritedFrom": {
7727
+ "name": "Buttonsimple",
7728
+ "module": "components/buttonsimple/buttonsimple.component.js"
7729
+ }
7730
+ },
7731
+ {
7732
+ "kind": "field",
7733
+ "name": "tabIndex",
7734
+ "type": {
7735
+ "text": "number"
7736
+ },
7737
+ "default": "0",
7738
+ "description": "This property specifies the tab order of the element.",
7739
+ "attribute": "tabIndex",
7740
+ "reflects": true,
7741
+ "inheritedFrom": {
7742
+ "name": "Buttonsimple",
7743
+ "module": "components/buttonsimple/buttonsimple.component.js"
7744
+ }
7745
+ },
7746
+ {
7747
+ "kind": "field",
7748
+ "name": "disabled",
7749
+ "type": {
7750
+ "text": "boolean | undefined"
7751
+ },
7752
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
7753
+ "default": "undefined",
7754
+ "attribute": "disabled",
7755
+ "reflects": true,
7756
+ "inheritedFrom": {
7757
+ "name": "Buttonsimple",
7758
+ "module": "components/buttonsimple/buttonsimple.component.js"
7759
+ }
7760
+ },
7761
+ {
7762
+ "kind": "field",
7763
+ "name": "active",
7764
+ "type": {
7765
+ "text": "boolean | undefined"
7766
+ },
7767
+ "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
7768
+ "default": "undefined",
7769
+ "attribute": "active",
7770
+ "reflects": true,
7771
+ "inheritedFrom": {
7772
+ "name": "Buttonsimple",
7773
+ "module": "components/buttonsimple/buttonsimple.component.js"
7774
+ }
7775
+ },
7776
+ {
7777
+ "kind": "field",
7778
+ "name": "softDisabled",
7779
+ "type": {
7780
+ "text": "boolean | undefined"
7781
+ },
7782
+ "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
7783
+ "default": "undefined",
7784
+ "attribute": "soft-disabled",
7785
+ "reflects": true,
7786
+ "inheritedFrom": {
7787
+ "name": "Buttonsimple",
7788
+ "module": "components/buttonsimple/buttonsimple.component.js"
7789
+ }
7790
+ },
7791
+ {
7792
+ "kind": "field",
7793
+ "name": "size",
7794
+ "type": {
7795
+ "text": "ButtonSize"
7796
+ },
7797
+ "description": "Simplebutton size is a super set of all the sizes supported by children components.",
7798
+ "default": "32",
7799
+ "attribute": "size",
7800
+ "reflects": true,
7801
+ "inheritedFrom": {
7802
+ "name": "Buttonsimple",
7803
+ "module": "components/buttonsimple/buttonsimple.component.js"
7804
+ }
7805
+ },
7806
+ {
7807
+ "kind": "field",
7808
+ "name": "role",
7809
+ "type": {
7810
+ "text": "RoleType"
7811
+ },
7812
+ "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
7813
+ "default": "button",
7814
+ "attribute": "role",
7815
+ "reflects": true,
7816
+ "inheritedFrom": {
7817
+ "name": "Buttonsimple",
7818
+ "module": "components/buttonsimple/buttonsimple.component.js"
7819
+ }
7820
+ },
7821
+ {
7822
+ "kind": "field",
7823
+ "name": "ariaStateKey",
7824
+ "type": {
7825
+ "text": "string | undefined"
7826
+ },
7827
+ "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
7828
+ "default": "'aria-pressed' (when)",
7829
+ "attribute": "ariaStateKey",
7830
+ "reflects": true,
7831
+ "inheritedFrom": {
7832
+ "name": "Buttonsimple",
7833
+ "module": "components/buttonsimple/buttonsimple.component.js"
7834
+ }
7835
+ },
7836
+ {
7837
+ "kind": "field",
7838
+ "name": "type",
7839
+ "type": {
7840
+ "text": "ButtonType"
7841
+ },
7842
+ "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
7843
+ "default": "button",
7844
+ "attribute": "type",
7845
+ "reflects": true,
7846
+ "inheritedFrom": {
7847
+ "name": "Buttonsimple",
7848
+ "module": "components/buttonsimple/buttonsimple.component.js"
7849
+ }
7850
+ },
7851
+ {
7852
+ "kind": "field",
7853
+ "name": "name",
7854
+ "type": {
7855
+ "text": "string | undefined"
7856
+ },
7857
+ "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
7858
+ "attribute": "name",
7859
+ "reflects": true,
7860
+ "inheritedFrom": {
7861
+ "name": "Buttonsimple",
7862
+ "module": "components/buttonsimple/buttonsimple.component.js"
7863
+ }
7864
+ },
7865
+ {
7866
+ "kind": "field",
7867
+ "name": "value",
7868
+ "type": {
7869
+ "text": "string | undefined"
7870
+ },
7871
+ "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
7872
+ "attribute": "value",
7873
+ "reflects": true,
7874
+ "inheritedFrom": {
7875
+ "name": "Buttonsimple",
7876
+ "module": "components/buttonsimple/buttonsimple.component.js"
7877
+ }
7878
+ },
6862
7879
  {
6863
7880
  "kind": "method",
6864
- "name": "renderFooter",
7881
+ "name": "executeAction",
6865
7882
  "privacy": "protected",
6866
- "description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
6867
- "return": {
6868
- "type": {
6869
- "text": ""
7883
+ "inheritedFrom": {
7884
+ "name": "Buttonsimple",
7885
+ "module": "components/buttonsimple/buttonsimple.component.js"
7886
+ }
7887
+ },
7888
+ {
7889
+ "kind": "method",
7890
+ "name": "setActive",
7891
+ "privacy": "protected",
7892
+ "parameters": [
7893
+ {
7894
+ "name": "element",
7895
+ "type": {
7896
+ "text": "HTMLElement"
7897
+ },
7898
+ "description": "The button element"
7899
+ },
7900
+ {
7901
+ "name": "active",
7902
+ "optional": true,
7903
+ "type": {
7904
+ "text": "boolean"
7905
+ },
7906
+ "description": "The active state of the element"
6870
7907
  }
6871
- },
7908
+ ],
7909
+ "description": "Sets the ariaStateKey attributes based on the active state of the button.",
6872
7910
  "inheritedFrom": {
6873
- "name": "FooterMixin",
6874
- "module": "utils/mixins/FooterMixin.js"
7911
+ "name": "Buttonsimple",
7912
+ "module": "components/buttonsimple/buttonsimple.component.js"
7913
+ }
7914
+ },
7915
+ {
7916
+ "kind": "method",
7917
+ "name": "setSoftDisabled",
7918
+ "privacy": "private",
7919
+ "parameters": [
7920
+ {
7921
+ "name": "element",
7922
+ "type": {
7923
+ "text": "HTMLElement"
7924
+ },
7925
+ "description": "The button element."
7926
+ },
7927
+ {
7928
+ "name": "softDisabled",
7929
+ "optional": true,
7930
+ "type": {
7931
+ "text": "boolean"
7932
+ },
7933
+ "description": "The soft-disabled state."
7934
+ }
7935
+ ],
7936
+ "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
7937
+ "inheritedFrom": {
7938
+ "name": "Buttonsimple",
7939
+ "module": "components/buttonsimple/buttonsimple.component.js"
7940
+ }
7941
+ },
7942
+ {
7943
+ "kind": "method",
7944
+ "name": "setDisabled",
7945
+ "privacy": "private",
7946
+ "parameters": [
7947
+ {
7948
+ "name": "element",
7949
+ "type": {
7950
+ "text": "HTMLElement"
7951
+ },
7952
+ "description": "The button element."
7953
+ },
7954
+ {
7955
+ "name": "disabled",
7956
+ "type": {
7957
+ "text": "boolean"
7958
+ },
7959
+ "description": "The disabled state."
7960
+ }
7961
+ ],
7962
+ "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
7963
+ "inheritedFrom": {
7964
+ "name": "Buttonsimple",
7965
+ "module": "components/buttonsimple/buttonsimple.component.js"
7966
+ }
7967
+ },
7968
+ {
7969
+ "kind": "method",
7970
+ "name": "triggerClickEvent",
7971
+ "privacy": "private",
7972
+ "inheritedFrom": {
7973
+ "name": "Buttonsimple",
7974
+ "module": "components/buttonsimple/buttonsimple.component.js"
7975
+ }
7976
+ },
7977
+ {
7978
+ "kind": "method",
7979
+ "name": "handleBlur",
7980
+ "privacy": "private",
7981
+ "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
7982
+ "inheritedFrom": {
7983
+ "name": "Buttonsimple",
7984
+ "module": "components/buttonsimple/buttonsimple.component.js"
7985
+ }
7986
+ },
7987
+ {
7988
+ "kind": "method",
7989
+ "name": "handleKeyDown",
7990
+ "privacy": "private",
7991
+ "parameters": [
7992
+ {
7993
+ "name": "event",
7994
+ "type": {
7995
+ "text": "KeyboardEvent"
7996
+ },
7997
+ "description": "The keyboard event."
7998
+ }
7999
+ ],
8000
+ "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
8001
+ "inheritedFrom": {
8002
+ "name": "Buttonsimple",
8003
+ "module": "components/buttonsimple/buttonsimple.component.js"
8004
+ }
8005
+ },
8006
+ {
8007
+ "kind": "method",
8008
+ "name": "handleKeyUp",
8009
+ "privacy": "private",
8010
+ "parameters": [
8011
+ {
8012
+ "name": "event",
8013
+ "type": {
8014
+ "text": "KeyboardEvent"
8015
+ },
8016
+ "description": "The keyboard event."
8017
+ }
8018
+ ],
8019
+ "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
8020
+ "inheritedFrom": {
8021
+ "name": "Buttonsimple",
8022
+ "module": "components/buttonsimple/buttonsimple.component.js"
8023
+ }
8024
+ }
8025
+ ],
8026
+ "events": [
8027
+ {
8028
+ "description": "(React: onClick) Event that gets dispatched when the card is clicked.",
8029
+ "name": "click",
8030
+ "reactName": "onClick",
8031
+ "inheritedFrom": {
8032
+ "name": "Buttonsimple",
8033
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
8034
+ }
8035
+ },
8036
+ {
8037
+ "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the card. It fires the click event when enter key is used.",
8038
+ "name": "keydown",
8039
+ "reactName": "onKeyDown",
8040
+ "inheritedFrom": {
8041
+ "name": "Buttonsimple",
8042
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
8043
+ }
8044
+ },
8045
+ {
8046
+ "description": "(React: onKeyUp) This event is dispatched when a key is released on the card. It fires the click event when space key is used.",
8047
+ "name": "keyup",
8048
+ "reactName": "onKeyUp",
8049
+ "inheritedFrom": {
8050
+ "name": "Buttonsimple",
8051
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
8052
+ }
8053
+ },
8054
+ {
8055
+ "description": "(React: onFocus) Event that gets dispatched when the card receives focus.",
8056
+ "name": "focus",
8057
+ "reactName": "onFocus",
8058
+ "inheritedFrom": {
8059
+ "name": "Buttonsimple",
8060
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
6875
8061
  }
6876
8062
  }
6877
8063
  ],
@@ -6879,18 +8065,14 @@
6879
8065
  {
6880
8066
  "name": "CardComponentMixin",
6881
8067
  "module": "/src/utils/mixins/CardComponentMixin"
6882
- },
6883
- {
6884
- "name": "FooterMixin",
6885
- "module": "/src/utils/mixins/FooterMixin"
6886
8068
  }
6887
8069
  ],
6888
8070
  "superclass": {
6889
- "name": "Component",
6890
- "module": "/src/models"
8071
+ "name": "Buttonsimple",
8072
+ "module": "/src/components/buttonsimple/buttonsimple.component"
6891
8073
  },
6892
- "tagName": "mdc-card",
6893
- "jsDoc": "/**\n * The card component allows users to organize information in a structured and tangible\n * format that is visually appealing. `mdc-card` is a static component that supports\n * the following features:\n * - Image\n * - Header\n * - Icon\n * - Title\n * - Subtitle\n * - Body\n *\n * The card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\n *\n * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n *\n * To make this card interactive, use the following slots:\n * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n * - `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.\n * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n *\n * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer - This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @tagname mdc-card\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n */",
8074
+ "tagName": "mdc-cardbutton",
8075
+ "jsDoc": "/**\n * cardbutton component looks like a card and behaves as a button component.\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * @tagname mdc-cardbutton\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It fires the click event when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It fires the click event when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n */",
6894
8076
  "customElement": true,
6895
8077
  "attributes": [
6896
8078
  {
@@ -7008,6 +8190,147 @@
7008
8190
  "name": "CardComponentMixin",
7009
8191
  "module": "src/utils/mixins/CardComponentMixin.ts"
7010
8192
  }
8193
+ },
8194
+ {
8195
+ "name": "auto-focus-on-mount",
8196
+ "type": {
8197
+ "text": "boolean"
8198
+ },
8199
+ "default": "false",
8200
+ "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
8201
+ "fieldName": "autoFocusOnMount",
8202
+ "inheritedFrom": {
8203
+ "name": "Buttonsimple",
8204
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
8205
+ }
8206
+ },
8207
+ {
8208
+ "name": "tabIndex",
8209
+ "type": {
8210
+ "text": "number"
8211
+ },
8212
+ "default": "0",
8213
+ "description": "This property specifies the tab order of the element.",
8214
+ "fieldName": "tabIndex",
8215
+ "inheritedFrom": {
8216
+ "name": "Buttonsimple",
8217
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
8218
+ }
8219
+ },
8220
+ {
8221
+ "name": "disabled",
8222
+ "type": {
8223
+ "text": "boolean | undefined"
8224
+ },
8225
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
8226
+ "default": "undefined",
8227
+ "fieldName": "disabled",
8228
+ "inheritedFrom": {
8229
+ "name": "Buttonsimple",
8230
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
8231
+ }
8232
+ },
8233
+ {
8234
+ "name": "active",
8235
+ "type": {
8236
+ "text": "boolean | undefined"
8237
+ },
8238
+ "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
8239
+ "default": "undefined",
8240
+ "fieldName": "active",
8241
+ "inheritedFrom": {
8242
+ "name": "Buttonsimple",
8243
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
8244
+ }
8245
+ },
8246
+ {
8247
+ "name": "soft-disabled",
8248
+ "type": {
8249
+ "text": "boolean | undefined"
8250
+ },
8251
+ "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
8252
+ "default": "undefined",
8253
+ "fieldName": "softDisabled",
8254
+ "inheritedFrom": {
8255
+ "name": "Buttonsimple",
8256
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
8257
+ }
8258
+ },
8259
+ {
8260
+ "name": "size",
8261
+ "type": {
8262
+ "text": "ButtonSize"
8263
+ },
8264
+ "description": "Simplebutton size is a super set of all the sizes supported by children components.",
8265
+ "default": "32",
8266
+ "fieldName": "size",
8267
+ "inheritedFrom": {
8268
+ "name": "Buttonsimple",
8269
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
8270
+ }
8271
+ },
8272
+ {
8273
+ "name": "role",
8274
+ "type": {
8275
+ "text": "RoleType"
8276
+ },
8277
+ "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
8278
+ "default": "button",
8279
+ "fieldName": "role",
8280
+ "inheritedFrom": {
8281
+ "name": "Buttonsimple",
8282
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
8283
+ }
8284
+ },
8285
+ {
8286
+ "name": "ariaStateKey",
8287
+ "type": {
8288
+ "text": "string | undefined"
8289
+ },
8290
+ "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
8291
+ "default": "'aria-pressed' (when)",
8292
+ "fieldName": "ariaStateKey",
8293
+ "inheritedFrom": {
8294
+ "name": "Buttonsimple",
8295
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
8296
+ }
8297
+ },
8298
+ {
8299
+ "name": "type",
8300
+ "type": {
8301
+ "text": "ButtonType"
8302
+ },
8303
+ "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
8304
+ "default": "button",
8305
+ "fieldName": "type",
8306
+ "inheritedFrom": {
8307
+ "name": "Buttonsimple",
8308
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
8309
+ }
8310
+ },
8311
+ {
8312
+ "name": "name",
8313
+ "type": {
8314
+ "text": "string | undefined"
8315
+ },
8316
+ "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
8317
+ "fieldName": "name",
8318
+ "inheritedFrom": {
8319
+ "name": "Buttonsimple",
8320
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
8321
+ }
8322
+ },
8323
+ {
8324
+ "name": "value",
8325
+ "type": {
8326
+ "text": "string | undefined"
8327
+ },
8328
+ "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
8329
+ "fieldName": "value",
8330
+ "inheritedFrom": {
8331
+ "name": "Buttonsimple",
8332
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
8333
+ }
7011
8334
  }
7012
8335
  ]
7013
8336
  }
@@ -7017,8 +8340,8 @@
7017
8340
  "kind": "js",
7018
8341
  "name": "default",
7019
8342
  "declaration": {
7020
- "name": "Card",
7021
- "module": "components/card/card.component.js"
8343
+ "name": "CardButton",
8344
+ "module": "components/cardbutton/cardbutton.component.js"
7022
8345
  }
7023
8346
  }
7024
8347
  ]
@@ -10030,22 +11353,6 @@
10030
11353
  "module": "components/popover/popover.component.js"
10031
11354
  }
10032
11355
  },
10033
- {
10034
- "kind": "field",
10035
- "name": "preventScroll",
10036
- "type": {
10037
- "text": "boolean"
10038
- },
10039
- "description": "Prevent outside scrolling when element is shown.\n\nIMPLEMENT THIS IN YOUR COMPONENT.",
10040
- "default": "false",
10041
- "attribute": "prevent-scroll",
10042
- "reflects": true,
10043
- "privacy": "protected",
10044
- "inheritedFrom": {
10045
- "name": "Popover",
10046
- "module": "components/popover/popover.component.js"
10047
- }
10048
- },
10049
11356
  {
10050
11357
  "kind": "method",
10051
11358
  "name": "activatePreventScroll",
@@ -10711,6 +12018,21 @@
10711
12018
  "module": "components/popover/popover.component.js"
10712
12019
  }
10713
12020
  },
12021
+ {
12022
+ "kind": "field",
12023
+ "name": "preventScroll",
12024
+ "type": {
12025
+ "text": "boolean"
12026
+ },
12027
+ "description": "Prevent outside scrolling when popover is shown.",
12028
+ "default": "false",
12029
+ "attribute": "prevent-scroll",
12030
+ "reflects": true,
12031
+ "inheritedFrom": {
12032
+ "name": "Popover",
12033
+ "module": "components/popover/popover.component.js"
12034
+ }
12035
+ },
10714
12036
  {
10715
12037
  "kind": "field",
10716
12038
  "name": "interactive",
@@ -13067,6 +14389,10 @@
13067
14389
  {
13068
14390
  "description": "width of the dialog",
13069
14391
  "name": "--mdc-dialog-width"
14392
+ },
14393
+ {
14394
+ "description": "height of the dialog",
14395
+ "name": "--mdc-dialog-height"
13070
14396
  }
13071
14397
  ],
13072
14398
  "slots": [
@@ -13326,19 +14652,6 @@
13326
14652
  ],
13327
14653
  "description": "Handles the dialog visibility change.\nHandles the exit event to close the dialog."
13328
14654
  },
13329
- {
13330
- "kind": "field",
13331
- "name": "preventScroll",
13332
- "type": {
13333
- "text": "boolean"
13334
- },
13335
- "privacy": "protected",
13336
- "description": "Prevent outside scrolling when element is shown.\n\nIMPLEMENT THIS IN YOUR COMPONENT.",
13337
- "inheritedFrom": {
13338
- "name": "PreventScrollMixin",
13339
- "module": "utils/mixins/PreventScrollMixin.js"
13340
- }
13341
- },
13342
14655
  {
13343
14656
  "kind": "method",
13344
14657
  "name": "activatePreventScroll",
@@ -14092,7 +15405,7 @@
14092
15405
  "module": "/src/models"
14093
15406
  },
14094
15407
  "tagName": "mdc-dialog",
14095
- "jsDoc": "/**\n * Dialog component is a modal dialog that can be used to display information or prompt the user for input.\n * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\n * The dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * The dialog can be controlled solely through the `visible` property, no trigger element is required.\n * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\n * remember the previously focused element before the dialog was opened.\n *\n * The dialog is a controlled component, meaning it does not have its own state management for visibility.\n * Use the `visible` property to control the visibility of the dialog.\n * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\n * or Escape is pressed).\n *\n * Dialog component have 2 variants: default and promotional.\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n * - Use `?visible=true/false` as an attribute instead of `visible=true/false`\n * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions\n *\n * @dependency mdc-button\n * @dependency mdc-text\n *\n * @tagname mdc-dialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed\n * (this does not hide the dialog)\n *\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer - This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred\n */",
15408
+ "jsDoc": "/**\n * Dialog component is a modal dialog that can be used to display information or prompt the user for input.\n * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\n * The dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * The dialog can be controlled solely through the `visible` property, no trigger element is required.\n * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\n * remember the previously focused element before the dialog was opened.\n *\n * The dialog is a controlled component, meaning it does not have its own state management for visibility.\n * Use the `visible` property to control the visibility of the dialog.\n * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\n * or Escape is pressed).\n *\n * Dialog component have 2 variants: default and promotional.\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n * - Use `?visible=true/false` as an attribute instead of `visible=true/false`\n * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions\n *\n * @dependency mdc-button\n * @dependency mdc-text\n *\n * @tagname mdc-dialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed\n * (this does not hide the dialog)\n *\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n * @cssproperty --mdc-dialog-height - height of the dialog\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer - This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred\n */",
14096
15409
  "customElement": true
14097
15410
  }
14098
15411
  ],
@@ -23981,22 +25294,6 @@
23981
25294
  "module": "components/popover/popover.component.js"
23982
25295
  }
23983
25296
  },
23984
- {
23985
- "kind": "field",
23986
- "name": "preventScroll",
23987
- "type": {
23988
- "text": "boolean"
23989
- },
23990
- "description": "Prevent outside scrolling when element is shown.\n\nIMPLEMENT THIS IN YOUR COMPONENT.",
23991
- "default": "false",
23992
- "attribute": "prevent-scroll",
23993
- "reflects": true,
23994
- "privacy": "protected",
23995
- "inheritedFrom": {
23996
- "name": "Popover",
23997
- "module": "components/popover/popover.component.js"
23998
- }
23999
- },
24000
25297
  {
24001
25298
  "kind": "method",
24002
25299
  "name": "activatePreventScroll",
@@ -24662,6 +25959,21 @@
24662
25959
  "module": "components/popover/popover.component.js"
24663
25960
  }
24664
25961
  },
25962
+ {
25963
+ "kind": "field",
25964
+ "name": "preventScroll",
25965
+ "type": {
25966
+ "text": "boolean"
25967
+ },
25968
+ "description": "Prevent outside scrolling when popover is shown.",
25969
+ "default": "false",
25970
+ "attribute": "prevent-scroll",
25971
+ "reflects": true,
25972
+ "inheritedFrom": {
25973
+ "name": "Popover",
25974
+ "module": "components/popover/popover.component.js"
25975
+ }
25976
+ },
24665
25977
  {
24666
25978
  "kind": "field",
24667
25979
  "name": "showArrow",
@@ -29671,15 +30983,10 @@
29671
30983
  "type": {
29672
30984
  "text": "boolean"
29673
30985
  },
29674
- "privacy": "protected",
29675
30986
  "description": "Prevent outside scrolling when popover is shown.",
29676
30987
  "default": "false",
29677
30988
  "attribute": "prevent-scroll",
29678
- "reflects": true,
29679
- "inheritedFrom": {
29680
- "name": "PreventScrollMixin",
29681
- "module": "utils/mixins/PreventScrollMixin.js"
29682
- }
30989
+ "reflects": true
29683
30990
  },
29684
30991
  {
29685
30992
  "kind": "field",
@@ -42017,22 +43324,6 @@
42017
43324
  "module": "components/popover/popover.component.js"
42018
43325
  }
42019
43326
  },
42020
- {
42021
- "kind": "field",
42022
- "name": "preventScroll",
42023
- "type": {
42024
- "text": "boolean"
42025
- },
42026
- "privacy": "protected",
42027
- "description": "Prevent outside scrolling when element is shown.\n\nIMPLEMENT THIS IN YOUR COMPONENT.",
42028
- "default": "false",
42029
- "attribute": "prevent-scroll",
42030
- "reflects": true,
42031
- "inheritedFrom": {
42032
- "name": "Popover",
42033
- "module": "components/popover/popover.component.js"
42034
- }
42035
- },
42036
43327
  {
42037
43328
  "kind": "method",
42038
43329
  "name": "activatePreventScroll",
@@ -42698,6 +43989,21 @@
42698
43989
  "module": "components/popover/popover.component.js"
42699
43990
  }
42700
43991
  },
43992
+ {
43993
+ "kind": "field",
43994
+ "name": "preventScroll",
43995
+ "type": {
43996
+ "text": "boolean"
43997
+ },
43998
+ "description": "Prevent outside scrolling when popover is shown.",
43999
+ "default": "false",
44000
+ "attribute": "prevent-scroll",
44001
+ "reflects": true,
44002
+ "inheritedFrom": {
44003
+ "name": "Popover",
44004
+ "module": "components/popover/popover.component.js"
44005
+ }
44006
+ },
42701
44007
  {
42702
44008
  "kind": "field",
42703
44009
  "name": "showArrow",
@@ -44048,22 +45354,6 @@
44048
45354
  "module": "components/popover/popover.component.js"
44049
45355
  }
44050
45356
  },
44051
- {
44052
- "kind": "field",
44053
- "name": "preventScroll",
44054
- "type": {
44055
- "text": "boolean"
44056
- },
44057
- "privacy": "protected",
44058
- "description": "Prevent outside scrolling when element is shown.\n\nIMPLEMENT THIS IN YOUR COMPONENT.",
44059
- "default": "false",
44060
- "attribute": "prevent-scroll",
44061
- "reflects": true,
44062
- "inheritedFrom": {
44063
- "name": "Popover",
44064
- "module": "components/popover/popover.component.js"
44065
- }
44066
- },
44067
45357
  {
44068
45358
  "kind": "method",
44069
45359
  "name": "activatePreventScroll",
@@ -44744,6 +46034,21 @@
44744
46034
  "module": "components/popover/popover.component.js"
44745
46035
  }
44746
46036
  },
46037
+ {
46038
+ "kind": "field",
46039
+ "name": "preventScroll",
46040
+ "type": {
46041
+ "text": "boolean"
46042
+ },
46043
+ "description": "Prevent outside scrolling when popover is shown.",
46044
+ "default": "false",
46045
+ "attribute": "prevent-scroll",
46046
+ "reflects": true,
46047
+ "inheritedFrom": {
46048
+ "name": "Popover",
46049
+ "module": "components/popover/popover.component.js"
46050
+ }
46051
+ },
44747
46052
  {
44748
46053
  "kind": "field",
44749
46054
  "name": "showArrow",
@@ -49010,15 +50315,6 @@
49010
50315
  "description": "",
49011
50316
  "name": "PreventScrollMixin",
49012
50317
  "members": [
49013
- {
49014
- "kind": "field",
49015
- "name": "preventScroll",
49016
- "type": {
49017
- "text": "boolean"
49018
- },
49019
- "privacy": "protected",
49020
- "description": "Prevent outside scrolling when element is shown.\n\nIMPLEMENT THIS IN YOUR COMPONENT."
49021
- },
49022
50318
  {
49023
50319
  "kind": "method",
49024
50320
  "name": "activatePreventScroll",