@momentum-design/components 0.120.20 → 0.120.21

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 (54) hide show
  1. package/dist/browser/index.js +157 -238
  2. package/dist/browser/index.js.map +3 -3
  3. package/dist/components/checkbox/checkbox.component.d.ts +8 -0
  4. package/dist/components/checkbox/checkbox.component.js +8 -0
  5. package/dist/components/checkbox/checkbox.styles.js +3 -3
  6. package/dist/components/combobox/combobox.component.d.ts +8 -6
  7. package/dist/components/combobox/combobox.component.js +8 -6
  8. package/dist/components/combobox/combobox.styles.js +5 -25
  9. package/dist/components/formfieldgroup/formfieldgroup.component.d.ts +9 -0
  10. package/dist/components/formfieldgroup/formfieldgroup.component.js +9 -0
  11. package/dist/components/formfieldwrapper/formfieldwrapper.component.d.ts +9 -0
  12. package/dist/components/formfieldwrapper/formfieldwrapper.component.js +9 -0
  13. package/dist/components/formfieldwrapper/formfieldwrapper.styles.d.ts +2 -2
  14. package/dist/components/formfieldwrapper/formfieldwrapper.styles.js +68 -66
  15. package/dist/components/input/input.component.d.ts +11 -13
  16. package/dist/components/input/input.component.js +11 -13
  17. package/dist/components/input/input.styles.js +33 -50
  18. package/dist/components/password/password.component.d.ts +31 -27
  19. package/dist/components/password/password.component.js +31 -27
  20. package/dist/components/progressbar/progressbar.component.d.ts +15 -20
  21. package/dist/components/progressbar/progressbar.component.js +16 -21
  22. package/dist/components/progressbar/progressbar.styles.js +7 -19
  23. package/dist/components/searchfield/searchfield.component.d.ts +30 -0
  24. package/dist/components/searchfield/searchfield.component.js +30 -0
  25. package/dist/components/select/select.component.d.ts +19 -21
  26. package/dist/components/select/select.component.js +19 -21
  27. package/dist/components/select/select.styles.js +14 -29
  28. package/dist/components/textarea/textarea.component.d.ts +20 -18
  29. package/dist/components/textarea/textarea.component.js +20 -18
  30. package/dist/components/textarea/textarea.styles.js +27 -49
  31. package/dist/custom-elements.json +1779 -1395
  32. package/dist/react/checkbox/index.d.ts +8 -0
  33. package/dist/react/checkbox/index.js +8 -0
  34. package/dist/react/combobox/index.d.ts +8 -6
  35. package/dist/react/combobox/index.js +8 -6
  36. package/dist/react/formfieldgroup/index.d.ts +9 -0
  37. package/dist/react/formfieldgroup/index.js +9 -0
  38. package/dist/react/formfieldwrapper/index.d.ts +9 -0
  39. package/dist/react/formfieldwrapper/index.js +9 -0
  40. package/dist/react/index.d.ts +4 -4
  41. package/dist/react/index.js +4 -4
  42. package/dist/react/input/index.d.ts +11 -13
  43. package/dist/react/input/index.js +11 -13
  44. package/dist/react/password/index.d.ts +31 -27
  45. package/dist/react/password/index.js +31 -27
  46. package/dist/react/progressbar/index.d.ts +15 -20
  47. package/dist/react/progressbar/index.js +15 -20
  48. package/dist/react/searchfield/index.d.ts +30 -0
  49. package/dist/react/searchfield/index.js +30 -0
  50. package/dist/react/select/index.d.ts +19 -21
  51. package/dist/react/select/index.js +19 -21
  52. package/dist/react/textarea/index.d.ts +20 -18
  53. package/dist/react/textarea/index.js +20 -18
  54. package/package.json +1 -1
@@ -4,149 +4,63 @@
4
4
  "modules": [
5
5
  {
6
6
  "kind": "javascript-module",
7
- "path": "components/accordion/accordion.component.js",
7
+ "path": "components/accordionbutton/accordionbutton.component.js",
8
8
  "declarations": [
9
9
  {
10
10
  "kind": "class",
11
- "description": "An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n- Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n- Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.",
12
- "name": "Accordion",
11
+ "description": "An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you do need any controls on your accordion heading, then it's advised to use `accordion` component.\n\nIf an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.",
12
+ "name": "AccordionButton",
13
13
  "cssProperties": [
14
14
  {
15
- "description": "The border color of the accordion.",
16
- "name": "--mdc-accordionbutton-border-color",
17
- "inheritedFrom": {
18
- "name": "AccordionButton",
19
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
20
- }
15
+ "description": "The border color of the accordion button.",
16
+ "name": "--mdc-accordionbutton-border-color"
21
17
  },
22
18
  {
23
- "description": "The hover color of the accordion.",
24
- "name": "--mdc-accordionbutton-hover-color",
25
- "inheritedFrom": {
26
- "name": "AccordionButton",
27
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
28
- }
19
+ "description": "The hover color of the accordion button.",
20
+ "name": "--mdc-accordionbutton-hover-color"
29
21
  },
30
22
  {
31
- "description": "The active color of the accordion.",
32
- "name": "--mdc-accordionbutton-active-color",
33
- "inheritedFrom": {
34
- "name": "AccordionButton",
35
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
36
- }
23
+ "description": "The active color of the accordion button.",
24
+ "name": "--mdc-accordionbutton-active-color"
37
25
  },
38
26
  {
39
- "description": "The disabled color of the accordion.",
40
- "name": "--mdc-accordionbutton-disabled-color",
41
- "inheritedFrom": {
42
- "name": "AccordionButton",
43
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
44
- }
27
+ "description": "The disabled color of the accordion button.",
28
+ "name": "--mdc-accordionbutton-disabled-color"
45
29
  }
46
30
  ],
47
31
  "cssParts": [
48
32
  {
49
- "description": "The body section of the accordion.",
50
- "name": "body-section",
51
- "inheritedFrom": {
52
- "name": "AccordionButton",
53
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
54
- }
55
- },
56
- {
57
- "description": "The header section of the accordion.",
58
- "name": "header-section",
59
- "inheritedFrom": {
60
- "name": "AccordionButton",
61
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
62
- }
33
+ "description": "The body section of the accordion button.",
34
+ "name": "body-section"
63
35
  },
64
36
  {
65
- "description": "The leading header of the accordion.",
66
- "name": "leading-header",
67
- "inheritedFrom": {
68
- "name": "AccordionButton",
69
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
70
- }
37
+ "description": "The header button section of the accordion button.",
38
+ "name": "header-button-section"
71
39
  },
72
40
  {
73
- "description": "The trailing header of the accordion.",
74
- "name": "trailing-header",
75
- "inheritedFrom": {
76
- "name": "AccordionButton",
77
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
78
- }
41
+ "description": "The header section of the accordion button.",
42
+ "name": "header-section"
79
43
  },
80
44
  {
81
- "description": "The trailing header button of the accordion.",
82
- "name": "trailing-header__button"
45
+ "description": "The leading header of the accordion button.",
46
+ "name": "leading-header"
83
47
  },
84
48
  {
85
- "description": "The header button section of the accordion button.",
86
- "name": "header-button-section",
87
- "inheritedFrom": {
88
- "name": "AccordionButton",
89
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
90
- }
49
+ "description": "The trailing header of the accordion button.",
50
+ "name": "trailing-header"
91
51
  },
92
52
  {
93
53
  "description": "The trailing header icon of the accordion button.",
94
- "name": "trailing-header__icon",
95
- "inheritedFrom": {
96
- "name": "AccordionButton",
97
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
98
- }
54
+ "name": "trailing-header__icon"
99
55
  }
100
56
  ],
101
57
  "slots": [
102
- {
103
- "description": "The leading controls slot of the accordion on the header section.",
104
- "name": "leading-controls"
105
- },
106
- {
107
- "description": "The trailing controls slot of the accordion on the header section.",
108
- "name": "trailing-controls"
109
- },
110
58
  {
111
59
  "description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
112
- "name": "default",
113
- "inheritedFrom": {
114
- "name": "AccordionButton",
115
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
116
- }
60
+ "name": "default"
117
61
  }
118
62
  ],
119
63
  "members": [
120
- {
121
- "kind": "method",
122
- "name": "renderHeader",
123
- "privacy": "protected",
124
- "return": {
125
- "type": {
126
- "text": ""
127
- }
128
- },
129
- "description": "Renders the header section of the accordion.\nThis includes the leading icon, text and controls, and the trailing controls.\nThe trailing controls include the expand/collapse button.\nThe button is disabled if the accordion is disabled.\nThe button is also given the aria-controls attribute set to the id of the body section.\nThe button is also given the aria-expanded attribute set to the expanded state of the accordion.\nThe prefix icon of the button is set to the expanded state of the accordion.",
130
- "inheritedFrom": {
131
- "name": "AccordionButton",
132
- "module": "components/accordionbutton/accordionbutton.component.js"
133
- }
134
- },
135
- {
136
- "kind": "field",
137
- "name": "disabled",
138
- "type": {
139
- "text": "boolean | undefined"
140
- },
141
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
142
- "default": "undefined",
143
- "attribute": "disabled",
144
- "reflects": true,
145
- "inheritedFrom": {
146
- "name": "DisabledMixin",
147
- "module": "utils/mixins/DisabledMixin.js"
148
- }
149
- },
150
64
  {
151
65
  "kind": "field",
152
66
  "name": "size",
@@ -156,11 +70,7 @@
156
70
  "description": "The size of the accordion item.",
157
71
  "default": "'small'",
158
72
  "attribute": "size",
159
- "reflects": true,
160
- "inheritedFrom": {
161
- "name": "AccordionButton",
162
- "module": "components/accordionbutton/accordionbutton.component.js"
163
- }
73
+ "reflects": true
164
74
  },
165
75
  {
166
76
  "kind": "field",
@@ -171,11 +81,7 @@
171
81
  "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
172
82
  "default": "'default'",
173
83
  "attribute": "variant",
174
- "reflects": true,
175
- "inheritedFrom": {
176
- "name": "AccordionButton",
177
- "module": "components/accordionbutton/accordionbutton.component.js"
178
- }
84
+ "reflects": true
179
85
  },
180
86
  {
181
87
  "kind": "field",
@@ -186,11 +92,7 @@
186
92
  "description": "The aria level of the accordion component.",
187
93
  "default": "3",
188
94
  "attribute": "data-aria-level",
189
- "reflects": true,
190
- "inheritedFrom": {
191
- "name": "AccordionButton",
192
- "module": "components/accordionbutton/accordionbutton.component.js"
193
- }
95
+ "reflects": true
194
96
  },
195
97
  {
196
98
  "kind": "field",
@@ -201,11 +103,7 @@
201
103
  "description": "The visibility of the accordion button.",
202
104
  "default": "false",
203
105
  "attribute": "expanded",
204
- "reflects": true,
205
- "inheritedFrom": {
206
- "name": "AccordionButton",
207
- "module": "components/accordionbutton/accordionbutton.component.js"
208
- }
106
+ "reflects": true
209
107
  },
210
108
  {
211
109
  "kind": "field",
@@ -215,11 +113,7 @@
215
113
  },
216
114
  "description": "The header text of the accordion item.",
217
115
  "attribute": "header-text",
218
- "reflects": true,
219
- "inheritedFrom": {
220
- "name": "AccordionButton",
221
- "module": "components/accordionbutton/accordionbutton.component.js"
222
- }
116
+ "reflects": true
223
117
  },
224
118
  {
225
119
  "kind": "field",
@@ -228,11 +122,7 @@
228
122
  "text": "IconNames | undefined"
229
123
  },
230
124
  "description": "The leading icon that is displayed before the header text.",
231
- "attribute": "prefix-icon",
232
- "inheritedFrom": {
233
- "name": "AccordionButton",
234
- "module": "components/accordionbutton/accordionbutton.component.js"
235
- }
125
+ "attribute": "prefix-icon"
236
126
  },
237
127
  {
238
128
  "kind": "method",
@@ -243,11 +133,7 @@
243
133
  "text": "void"
244
134
  }
245
135
  },
246
- "description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state.",
247
- "inheritedFrom": {
248
- "name": "AccordionButton",
249
- "module": "components/accordionbutton/accordionbutton.component.js"
250
- }
136
+ "description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state."
251
137
  },
252
138
  {
253
139
  "kind": "method",
@@ -258,11 +144,7 @@
258
144
  "text": "void"
259
145
  }
260
146
  },
261
- "description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state.",
262
- "inheritedFrom": {
263
- "name": "AccordionButton",
264
- "module": "components/accordionbutton/accordionbutton.component.js"
265
- }
147
+ "description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
266
148
  },
267
149
  {
268
150
  "kind": "method",
@@ -282,11 +164,7 @@
282
164
  "description": "The KeyboardEvent fired."
283
165
  }
284
166
  ],
285
- "description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys.",
286
- "inheritedFrom": {
287
- "name": "AccordionButton",
288
- "module": "components/accordionbutton/accordionbutton.component.js"
289
- }
167
+ "description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys."
290
168
  },
291
169
  {
292
170
  "kind": "method",
@@ -305,11 +183,7 @@
305
183
  "text": "IconNames"
306
184
  }
307
185
  }
308
- ],
309
- "inheritedFrom": {
310
- "name": "AccordionButton",
311
- "module": "components/accordionbutton/accordionbutton.component.js"
312
- }
186
+ ]
313
187
  },
314
188
  {
315
189
  "kind": "method",
@@ -319,10 +193,16 @@
319
193
  "type": {
320
194
  "text": "TemplateResult | typeof nothing"
321
195
  }
322
- },
323
- "inheritedFrom": {
324
- "name": "AccordionButton",
325
- "module": "components/accordionbutton/accordionbutton.component.js"
196
+ }
197
+ },
198
+ {
199
+ "kind": "method",
200
+ "name": "renderHeader",
201
+ "privacy": "protected",
202
+ "return": {
203
+ "type": {
204
+ "text": "TemplateResult"
205
+ }
326
206
  }
327
207
  },
328
208
  {
@@ -334,11 +214,7 @@
334
214
  "text": ""
335
215
  }
336
216
  },
337
- "description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon.",
338
- "inheritedFrom": {
339
- "name": "AccordionButton",
340
- "module": "components/accordionbutton/accordionbutton.component.js"
341
- }
217
+ "description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon."
342
218
  },
343
219
  {
344
220
  "kind": "method",
@@ -348,45 +224,32 @@
348
224
  "type": {
349
225
  "text": "TemplateResult | typeof nothing"
350
226
  }
351
- },
352
- "inheritedFrom": {
353
- "name": "AccordionButton",
354
- "module": "components/accordionbutton/accordionbutton.component.js"
355
- }
356
- }
357
- ],
358
- "events": [
359
- {
360
- "description": "(React: onShown) This event is triggered when the accordion is expanded.",
361
- "name": "shown",
362
- "reactName": "onShown",
363
- "inheritedFrom": {
364
- "name": "AccordionButton",
365
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
366
227
  }
367
- }
368
- ],
369
- "superclass": {
370
- "name": "AccordionButton",
371
- "module": "/src/components/accordionbutton/accordionbutton.component"
372
- },
373
- "tagName": "mdc-accordion",
374
- "jsDoc": "/**\n * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.\n *\n * @tagname mdc-accordion\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot leading-controls - The leading controls slot of the accordion on the header section.\n * @slot trailing-controls - The trailing controls slot of the accordion on the header section.\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.\n *\n * @csspart body-section - The body section of the accordion.\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n */",
375
- "customElement": true,
376
- "attributes": [
228
+ },
377
229
  {
230
+ "kind": "field",
378
231
  "name": "disabled",
379
232
  "type": {
380
233
  "text": "boolean | undefined"
381
234
  },
382
235
  "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
383
236
  "default": "undefined",
384
- "fieldName": "disabled",
237
+ "attribute": "disabled",
238
+ "reflects": true,
385
239
  "inheritedFrom": {
386
240
  "name": "DisabledMixin",
387
- "module": "src/utils/mixins/DisabledMixin.ts"
241
+ "module": "utils/mixins/DisabledMixin.js"
388
242
  }
389
- },
243
+ }
244
+ ],
245
+ "events": [
246
+ {
247
+ "description": "(React: onShown) This event is triggered when the accordion button is expanded.",
248
+ "name": "shown",
249
+ "reactName": "onShown"
250
+ }
251
+ ],
252
+ "attributes": [
390
253
  {
391
254
  "name": "size",
392
255
  "type": {
@@ -394,11 +257,7 @@
394
257
  },
395
258
  "description": "The size of the accordion item.",
396
259
  "default": "'small'",
397
- "fieldName": "size",
398
- "inheritedFrom": {
399
- "name": "AccordionButton",
400
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
401
- }
260
+ "fieldName": "size"
402
261
  },
403
262
  {
404
263
  "name": "variant",
@@ -407,11 +266,7 @@
407
266
  },
408
267
  "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
409
268
  "default": "'default'",
410
- "fieldName": "variant",
411
- "inheritedFrom": {
412
- "name": "AccordionButton",
413
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
414
- }
269
+ "fieldName": "variant"
415
270
  },
416
271
  {
417
272
  "name": "data-aria-level",
@@ -420,11 +275,7 @@
420
275
  },
421
276
  "description": "The aria level of the accordion component.",
422
277
  "default": "3",
423
- "fieldName": "dataAriaLevel",
424
- "inheritedFrom": {
425
- "name": "AccordionButton",
426
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
427
- }
278
+ "fieldName": "dataAriaLevel"
428
279
  },
429
280
  {
430
281
  "name": "expanded",
@@ -433,11 +284,7 @@
433
284
  },
434
285
  "description": "The visibility of the accordion button.",
435
286
  "default": "false",
436
- "fieldName": "expanded",
437
- "inheritedFrom": {
438
- "name": "AccordionButton",
439
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
440
- }
287
+ "fieldName": "expanded"
441
288
  },
442
289
  {
443
290
  "name": "header-text",
@@ -445,11 +292,7 @@
445
292
  "text": "string | undefined"
446
293
  },
447
294
  "description": "The header text of the accordion item.",
448
- "fieldName": "headerText",
449
- "inheritedFrom": {
450
- "name": "AccordionButton",
451
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
452
- }
295
+ "fieldName": "headerText"
453
296
  },
454
297
  {
455
298
  "name": "prefix-icon",
@@ -457,13 +300,35 @@
457
300
  "text": "IconNames | undefined"
458
301
  },
459
302
  "description": "The leading icon that is displayed before the header text.",
460
- "fieldName": "prefixIcon",
303
+ "fieldName": "prefixIcon"
304
+ },
305
+ {
306
+ "name": "disabled",
307
+ "type": {
308
+ "text": "boolean | undefined"
309
+ },
310
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
311
+ "default": "undefined",
312
+ "fieldName": "disabled",
461
313
  "inheritedFrom": {
462
- "name": "AccordionButton",
463
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
314
+ "name": "DisabledMixin",
315
+ "module": "src/utils/mixins/DisabledMixin.ts"
464
316
  }
465
317
  }
466
- ]
318
+ ],
319
+ "mixins": [
320
+ {
321
+ "name": "DisabledMixin",
322
+ "module": "/src/utils/mixins/DisabledMixin"
323
+ }
324
+ ],
325
+ "superclass": {
326
+ "name": "Component",
327
+ "module": "/src/models"
328
+ },
329
+ "tagName": "mdc-accordionbutton",
330
+ "jsDoc": "/**\n * An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you do need any controls on your accordion heading, then it's advised to use `accordion` component.\n *\n * If an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.\n *\n * @tagname mdc-accordionbutton\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion button is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion button.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.\n *\n * @csspart body-section - The body section of the accordion button.\n * @csspart header-button-section - The header button section of the accordion button.\n * @csspart header-section - The header section of the accordion button.\n * @csspart leading-header - The leading header of the accordion button.\n * @csspart trailing-header - The trailing header of the accordion button.\n * @csspart trailing-header__icon - The trailing header icon of the accordion button.\n */",
331
+ "customElement": true
467
332
  }
468
333
  ],
469
334
  "exports": [
@@ -471,71 +336,157 @@
471
336
  "kind": "js",
472
337
  "name": "default",
473
338
  "declaration": {
474
- "name": "Accordion",
475
- "module": "components/accordion/accordion.component.js"
339
+ "name": "AccordionButton",
340
+ "module": "components/accordionbutton/accordionbutton.component.js"
476
341
  }
477
342
  }
478
343
  ]
479
344
  },
480
345
  {
481
346
  "kind": "javascript-module",
482
- "path": "components/accordionbutton/accordionbutton.component.js",
347
+ "path": "components/accordion/accordion.component.js",
483
348
  "declarations": [
484
349
  {
485
350
  "kind": "class",
486
- "description": "An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you do need any controls on your accordion heading, then it's advised to use `accordion` component.\n\nIf an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.",
487
- "name": "AccordionButton",
351
+ "description": "An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n- Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n- Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.",
352
+ "name": "Accordion",
488
353
  "cssProperties": [
489
354
  {
490
- "description": "The border color of the accordion button.",
491
- "name": "--mdc-accordionbutton-border-color"
355
+ "description": "The border color of the accordion.",
356
+ "name": "--mdc-accordionbutton-border-color",
357
+ "inheritedFrom": {
358
+ "name": "AccordionButton",
359
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
360
+ }
492
361
  },
493
362
  {
494
- "description": "The hover color of the accordion button.",
495
- "name": "--mdc-accordionbutton-hover-color"
363
+ "description": "The hover color of the accordion.",
364
+ "name": "--mdc-accordionbutton-hover-color",
365
+ "inheritedFrom": {
366
+ "name": "AccordionButton",
367
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
368
+ }
496
369
  },
497
370
  {
498
- "description": "The active color of the accordion button.",
499
- "name": "--mdc-accordionbutton-active-color"
371
+ "description": "The active color of the accordion.",
372
+ "name": "--mdc-accordionbutton-active-color",
373
+ "inheritedFrom": {
374
+ "name": "AccordionButton",
375
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
376
+ }
500
377
  },
501
378
  {
502
- "description": "The disabled color of the accordion button.",
503
- "name": "--mdc-accordionbutton-disabled-color"
379
+ "description": "The disabled color of the accordion.",
380
+ "name": "--mdc-accordionbutton-disabled-color",
381
+ "inheritedFrom": {
382
+ "name": "AccordionButton",
383
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
384
+ }
504
385
  }
505
386
  ],
506
387
  "cssParts": [
507
388
  {
508
- "description": "The body section of the accordion button.",
509
- "name": "body-section"
389
+ "description": "The body section of the accordion.",
390
+ "name": "body-section",
391
+ "inheritedFrom": {
392
+ "name": "AccordionButton",
393
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
394
+ }
510
395
  },
511
396
  {
512
- "description": "The header button section of the accordion button.",
513
- "name": "header-button-section"
397
+ "description": "The header section of the accordion.",
398
+ "name": "header-section",
399
+ "inheritedFrom": {
400
+ "name": "AccordionButton",
401
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
402
+ }
514
403
  },
515
404
  {
516
- "description": "The header section of the accordion button.",
517
- "name": "header-section"
405
+ "description": "The leading header of the accordion.",
406
+ "name": "leading-header",
407
+ "inheritedFrom": {
408
+ "name": "AccordionButton",
409
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
410
+ }
518
411
  },
519
412
  {
520
- "description": "The leading header of the accordion button.",
521
- "name": "leading-header"
413
+ "description": "The trailing header of the accordion.",
414
+ "name": "trailing-header",
415
+ "inheritedFrom": {
416
+ "name": "AccordionButton",
417
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
418
+ }
522
419
  },
523
420
  {
524
- "description": "The trailing header of the accordion button.",
525
- "name": "trailing-header"
421
+ "description": "The trailing header button of the accordion.",
422
+ "name": "trailing-header__button"
423
+ },
424
+ {
425
+ "description": "The header button section of the accordion button.",
426
+ "name": "header-button-section",
427
+ "inheritedFrom": {
428
+ "name": "AccordionButton",
429
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
430
+ }
526
431
  },
527
432
  {
528
433
  "description": "The trailing header icon of the accordion button.",
529
- "name": "trailing-header__icon"
434
+ "name": "trailing-header__icon",
435
+ "inheritedFrom": {
436
+ "name": "AccordionButton",
437
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
438
+ }
530
439
  }
531
440
  ],
532
441
  "slots": [
442
+ {
443
+ "description": "The leading controls slot of the accordion on the header section.",
444
+ "name": "leading-controls"
445
+ },
446
+ {
447
+ "description": "The trailing controls slot of the accordion on the header section.",
448
+ "name": "trailing-controls"
449
+ },
533
450
  {
534
451
  "description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
535
- "name": "default"
452
+ "name": "default",
453
+ "inheritedFrom": {
454
+ "name": "AccordionButton",
455
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
456
+ }
536
457
  }
537
458
  ],
538
459
  "members": [
460
+ {
461
+ "kind": "method",
462
+ "name": "renderHeader",
463
+ "privacy": "protected",
464
+ "return": {
465
+ "type": {
466
+ "text": ""
467
+ }
468
+ },
469
+ "description": "Renders the header section of the accordion.\nThis includes the leading icon, text and controls, and the trailing controls.\nThe trailing controls include the expand/collapse button.\nThe button is disabled if the accordion is disabled.\nThe button is also given the aria-controls attribute set to the id of the body section.\nThe button is also given the aria-expanded attribute set to the expanded state of the accordion.\nThe prefix icon of the button is set to the expanded state of the accordion.",
470
+ "inheritedFrom": {
471
+ "name": "AccordionButton",
472
+ "module": "components/accordionbutton/accordionbutton.component.js"
473
+ }
474
+ },
475
+ {
476
+ "kind": "field",
477
+ "name": "disabled",
478
+ "type": {
479
+ "text": "boolean | undefined"
480
+ },
481
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
482
+ "default": "undefined",
483
+ "attribute": "disabled",
484
+ "reflects": true,
485
+ "inheritedFrom": {
486
+ "name": "AccordionButton",
487
+ "module": "components/accordionbutton/accordionbutton.component.js"
488
+ }
489
+ },
539
490
  {
540
491
  "kind": "field",
541
492
  "name": "size",
@@ -545,7 +496,11 @@
545
496
  "description": "The size of the accordion item.",
546
497
  "default": "'small'",
547
498
  "attribute": "size",
548
- "reflects": true
499
+ "reflects": true,
500
+ "inheritedFrom": {
501
+ "name": "AccordionButton",
502
+ "module": "components/accordionbutton/accordionbutton.component.js"
503
+ }
549
504
  },
550
505
  {
551
506
  "kind": "field",
@@ -556,7 +511,11 @@
556
511
  "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
557
512
  "default": "'default'",
558
513
  "attribute": "variant",
559
- "reflects": true
514
+ "reflects": true,
515
+ "inheritedFrom": {
516
+ "name": "AccordionButton",
517
+ "module": "components/accordionbutton/accordionbutton.component.js"
518
+ }
560
519
  },
561
520
  {
562
521
  "kind": "field",
@@ -567,7 +526,11 @@
567
526
  "description": "The aria level of the accordion component.",
568
527
  "default": "3",
569
528
  "attribute": "data-aria-level",
570
- "reflects": true
529
+ "reflects": true,
530
+ "inheritedFrom": {
531
+ "name": "AccordionButton",
532
+ "module": "components/accordionbutton/accordionbutton.component.js"
533
+ }
571
534
  },
572
535
  {
573
536
  "kind": "field",
@@ -578,7 +541,11 @@
578
541
  "description": "The visibility of the accordion button.",
579
542
  "default": "false",
580
543
  "attribute": "expanded",
581
- "reflects": true
544
+ "reflects": true,
545
+ "inheritedFrom": {
546
+ "name": "AccordionButton",
547
+ "module": "components/accordionbutton/accordionbutton.component.js"
548
+ }
582
549
  },
583
550
  {
584
551
  "kind": "field",
@@ -588,7 +555,11 @@
588
555
  },
589
556
  "description": "The header text of the accordion item.",
590
557
  "attribute": "header-text",
591
- "reflects": true
558
+ "reflects": true,
559
+ "inheritedFrom": {
560
+ "name": "AccordionButton",
561
+ "module": "components/accordionbutton/accordionbutton.component.js"
562
+ }
592
563
  },
593
564
  {
594
565
  "kind": "field",
@@ -597,7 +568,11 @@
597
568
  "text": "IconNames | undefined"
598
569
  },
599
570
  "description": "The leading icon that is displayed before the header text.",
600
- "attribute": "prefix-icon"
571
+ "attribute": "prefix-icon",
572
+ "inheritedFrom": {
573
+ "name": "AccordionButton",
574
+ "module": "components/accordionbutton/accordionbutton.component.js"
575
+ }
601
576
  },
602
577
  {
603
578
  "kind": "method",
@@ -608,7 +583,11 @@
608
583
  "text": "void"
609
584
  }
610
585
  },
611
- "description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state."
586
+ "description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state.",
587
+ "inheritedFrom": {
588
+ "name": "AccordionButton",
589
+ "module": "components/accordionbutton/accordionbutton.component.js"
590
+ }
612
591
  },
613
592
  {
614
593
  "kind": "method",
@@ -619,7 +598,11 @@
619
598
  "text": "void"
620
599
  }
621
600
  },
622
- "description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
601
+ "description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state.",
602
+ "inheritedFrom": {
603
+ "name": "AccordionButton",
604
+ "module": "components/accordionbutton/accordionbutton.component.js"
605
+ }
623
606
  },
624
607
  {
625
608
  "kind": "method",
@@ -639,7 +622,11 @@
639
622
  "description": "The KeyboardEvent fired."
640
623
  }
641
624
  ],
642
- "description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys."
625
+ "description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys.",
626
+ "inheritedFrom": {
627
+ "name": "AccordionButton",
628
+ "module": "components/accordionbutton/accordionbutton.component.js"
629
+ }
643
630
  },
644
631
  {
645
632
  "kind": "method",
@@ -658,7 +645,11 @@
658
645
  "text": "IconNames"
659
646
  }
660
647
  }
661
- ]
648
+ ],
649
+ "inheritedFrom": {
650
+ "name": "AccordionButton",
651
+ "module": "components/accordionbutton/accordionbutton.component.js"
652
+ }
662
653
  },
663
654
  {
664
655
  "kind": "method",
@@ -668,16 +659,10 @@
668
659
  "type": {
669
660
  "text": "TemplateResult | typeof nothing"
670
661
  }
671
- }
672
- },
673
- {
674
- "kind": "method",
675
- "name": "renderHeader",
676
- "privacy": "protected",
677
- "return": {
678
- "type": {
679
- "text": "TemplateResult"
680
- }
662
+ },
663
+ "inheritedFrom": {
664
+ "name": "AccordionButton",
665
+ "module": "components/accordionbutton/accordionbutton.component.js"
681
666
  }
682
667
  },
683
668
  {
@@ -689,7 +674,11 @@
689
674
  "text": ""
690
675
  }
691
676
  },
692
- "description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon."
677
+ "description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon.",
678
+ "inheritedFrom": {
679
+ "name": "AccordionButton",
680
+ "module": "components/accordionbutton/accordionbutton.component.js"
681
+ }
693
682
  },
694
683
  {
695
684
  "kind": "method",
@@ -699,32 +688,45 @@
699
688
  "type": {
700
689
  "text": "TemplateResult | typeof nothing"
701
690
  }
702
- }
703
- },
704
- {
705
- "kind": "field",
706
- "name": "disabled",
707
- "type": {
708
- "text": "boolean | undefined"
709
691
  },
710
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
711
- "default": "undefined",
712
- "attribute": "disabled",
713
- "reflects": true,
714
692
  "inheritedFrom": {
715
- "name": "DisabledMixin",
716
- "module": "utils/mixins/DisabledMixin.js"
693
+ "name": "AccordionButton",
694
+ "module": "components/accordionbutton/accordionbutton.component.js"
717
695
  }
718
696
  }
719
697
  ],
720
698
  "events": [
721
699
  {
722
- "description": "(React: onShown) This event is triggered when the accordion button is expanded.",
700
+ "description": "(React: onShown) This event is triggered when the accordion is expanded.",
723
701
  "name": "shown",
724
- "reactName": "onShown"
702
+ "reactName": "onShown",
703
+ "inheritedFrom": {
704
+ "name": "AccordionButton",
705
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
706
+ }
725
707
  }
726
708
  ],
709
+ "superclass": {
710
+ "name": "AccordionButton",
711
+ "module": "/src/components/accordionbutton/accordionbutton.component"
712
+ },
713
+ "tagName": "mdc-accordion",
714
+ "jsDoc": "/**\n * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.\n *\n * @tagname mdc-accordion\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot leading-controls - The leading controls slot of the accordion on the header section.\n * @slot trailing-controls - The trailing controls slot of the accordion on the header section.\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.\n *\n * @csspart body-section - The body section of the accordion.\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n */",
715
+ "customElement": true,
727
716
  "attributes": [
717
+ {
718
+ "name": "disabled",
719
+ "type": {
720
+ "text": "boolean | undefined"
721
+ },
722
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
723
+ "default": "undefined",
724
+ "fieldName": "disabled",
725
+ "inheritedFrom": {
726
+ "name": "AccordionButton",
727
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
728
+ }
729
+ },
728
730
  {
729
731
  "name": "size",
730
732
  "type": {
@@ -732,7 +734,11 @@
732
734
  },
733
735
  "description": "The size of the accordion item.",
734
736
  "default": "'small'",
735
- "fieldName": "size"
737
+ "fieldName": "size",
738
+ "inheritedFrom": {
739
+ "name": "AccordionButton",
740
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
741
+ }
736
742
  },
737
743
  {
738
744
  "name": "variant",
@@ -741,7 +747,11 @@
741
747
  },
742
748
  "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
743
749
  "default": "'default'",
744
- "fieldName": "variant"
750
+ "fieldName": "variant",
751
+ "inheritedFrom": {
752
+ "name": "AccordionButton",
753
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
754
+ }
745
755
  },
746
756
  {
747
757
  "name": "data-aria-level",
@@ -750,7 +760,11 @@
750
760
  },
751
761
  "description": "The aria level of the accordion component.",
752
762
  "default": "3",
753
- "fieldName": "dataAriaLevel"
763
+ "fieldName": "dataAriaLevel",
764
+ "inheritedFrom": {
765
+ "name": "AccordionButton",
766
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
767
+ }
754
768
  },
755
769
  {
756
770
  "name": "expanded",
@@ -759,7 +773,11 @@
759
773
  },
760
774
  "description": "The visibility of the accordion button.",
761
775
  "default": "false",
762
- "fieldName": "expanded"
776
+ "fieldName": "expanded",
777
+ "inheritedFrom": {
778
+ "name": "AccordionButton",
779
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
780
+ }
763
781
  },
764
782
  {
765
783
  "name": "header-text",
@@ -767,7 +785,11 @@
767
785
  "text": "string | undefined"
768
786
  },
769
787
  "description": "The header text of the accordion item.",
770
- "fieldName": "headerText"
788
+ "fieldName": "headerText",
789
+ "inheritedFrom": {
790
+ "name": "AccordionButton",
791
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
792
+ }
771
793
  },
772
794
  {
773
795
  "name": "prefix-icon",
@@ -775,35 +797,13 @@
775
797
  "text": "IconNames | undefined"
776
798
  },
777
799
  "description": "The leading icon that is displayed before the header text.",
778
- "fieldName": "prefixIcon"
779
- },
780
- {
781
- "name": "disabled",
782
- "type": {
783
- "text": "boolean | undefined"
784
- },
785
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
786
- "default": "undefined",
787
- "fieldName": "disabled",
800
+ "fieldName": "prefixIcon",
788
801
  "inheritedFrom": {
789
- "name": "DisabledMixin",
790
- "module": "src/utils/mixins/DisabledMixin.ts"
802
+ "name": "AccordionButton",
803
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
791
804
  }
792
805
  }
793
- ],
794
- "mixins": [
795
- {
796
- "name": "DisabledMixin",
797
- "module": "/src/utils/mixins/DisabledMixin"
798
- }
799
- ],
800
- "superclass": {
801
- "name": "Component",
802
- "module": "/src/models"
803
- },
804
- "tagName": "mdc-accordionbutton",
805
- "jsDoc": "/**\n * An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you do need any controls on your accordion heading, then it's advised to use `accordion` component.\n *\n * If an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.\n *\n * @tagname mdc-accordionbutton\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion button is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion button.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.\n *\n * @csspart body-section - The body section of the accordion button.\n * @csspart header-button-section - The header button section of the accordion button.\n * @csspart header-section - The header section of the accordion button.\n * @csspart leading-header - The leading header of the accordion button.\n * @csspart trailing-header - The trailing header of the accordion button.\n * @csspart trailing-header__icon - The trailing header icon of the accordion button.\n */",
806
- "customElement": true
806
+ ]
807
807
  }
808
808
  ],
809
809
  "exports": [
@@ -811,8 +811,8 @@
811
811
  "kind": "js",
812
812
  "name": "default",
813
813
  "declaration": {
814
- "name": "AccordionButton",
815
- "module": "components/accordionbutton/accordionbutton.component.js"
814
+ "name": "Accordion",
815
+ "module": "components/accordion/accordion.component.js"
816
816
  }
817
817
  }
818
818
  ]
@@ -1586,218 +1586,6 @@
1586
1586
  }
1587
1587
  ]
1588
1588
  },
1589
- {
1590
- "kind": "javascript-module",
1591
- "path": "components/animation/animation.component.js",
1592
- "declarations": [
1593
- {
1594
- "kind": "class",
1595
- "description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
1596
- "name": "Animation",
1597
- "members": [
1598
- {
1599
- "kind": "field",
1600
- "name": "name",
1601
- "type": {
1602
- "text": "AnimationNames | undefined"
1603
- },
1604
- "description": "Name of the animation (= filename)",
1605
- "attribute": "name",
1606
- "reflects": true
1607
- },
1608
- {
1609
- "kind": "field",
1610
- "name": "loop",
1611
- "type": {
1612
- "text": "LoopType | undefined"
1613
- },
1614
- "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
1615
- "attribute": "loop",
1616
- "reflects": true
1617
- },
1618
- {
1619
- "kind": "field",
1620
- "name": "autoplay",
1621
- "type": {
1622
- "text": "boolean | undefined"
1623
- },
1624
- "description": "Weather start the animation automatically",
1625
- "attribute": "autoplay",
1626
- "reflects": true
1627
- },
1628
- {
1629
- "kind": "field",
1630
- "name": "ariaLabel",
1631
- "type": {
1632
- "text": "string | null"
1633
- },
1634
- "default": "null",
1635
- "description": "Aria-label attribute to be set for accessibility",
1636
- "attribute": "aria-label"
1637
- },
1638
- {
1639
- "kind": "field",
1640
- "name": "ariaLabelledBy",
1641
- "type": {
1642
- "text": "string | null"
1643
- },
1644
- "default": "null",
1645
- "description": "Aria-labelledby attribute to be set for accessibility",
1646
- "attribute": "aria-labelledby"
1647
- },
1648
- {
1649
- "kind": "field",
1650
- "name": "lottieInstance",
1651
- "type": {
1652
- "text": "AnimationItem | undefined"
1653
- },
1654
- "privacy": "private",
1655
- "description": "Lottie animation instance"
1656
- },
1657
- {
1658
- "kind": "field",
1659
- "name": "containerRef",
1660
- "type": {
1661
- "text": "Ref<HTMLDivElement>"
1662
- },
1663
- "privacy": "private",
1664
- "description": "Container for the animation"
1665
- },
1666
- {
1667
- "kind": "field",
1668
- "name": "animation",
1669
- "description": "Exposed API of the animation library (lottie)",
1670
- "readonly": true
1671
- },
1672
- {
1673
- "kind": "method",
1674
- "name": "getLoopValue",
1675
- "privacy": "private"
1676
- },
1677
- {
1678
- "kind": "method",
1679
- "name": "onLoadSuccessHandler",
1680
- "privacy": "private",
1681
- "parameters": [
1682
- {
1683
- "name": "animationData",
1684
- "type": {
1685
- "text": "any"
1686
- }
1687
- }
1688
- ],
1689
- "description": "Create new lotty instance for the loaded data"
1690
- },
1691
- {
1692
- "kind": "method",
1693
- "name": "onLoadFailHandler",
1694
- "privacy": "private",
1695
- "parameters": [
1696
- {
1697
- "name": "error",
1698
- "type": {
1699
- "text": "Error"
1700
- }
1701
- }
1702
- ],
1703
- "description": "Error handler for animation loading"
1704
- },
1705
- {
1706
- "kind": "method",
1707
- "name": "getAnimationData",
1708
- "privacy": "private",
1709
- "description": "Import animation data dynamically"
1710
- },
1711
- {
1712
- "kind": "field",
1713
- "name": "onCompleteHandler",
1714
- "description": "Re-dispatch the complete event from the animation library\n\nThis handler called with the animation instance instead of the component instance\nso we need to bind it to the component instance. The arrow function just does that."
1715
- }
1716
- ],
1717
- "events": [
1718
- {
1719
- "name": "load",
1720
- "type": {
1721
- "text": "CustomEvent"
1722
- },
1723
- "description": "(React: onLoad) This event is dispatched when the animation is loaded",
1724
- "reactName": "onLoad"
1725
- },
1726
- {
1727
- "description": "(React: onComplete) This event is dispatched when all animation loops completed",
1728
- "name": "complete",
1729
- "reactName": "onComplete"
1730
- },
1731
- {
1732
- "description": "(React: onError) This event is dispatched when animation loading failed",
1733
- "name": "error",
1734
- "reactName": "onError"
1735
- }
1736
- ],
1737
- "attributes": [
1738
- {
1739
- "name": "name",
1740
- "type": {
1741
- "text": "AnimationNames | undefined"
1742
- },
1743
- "description": "Name of the animation (= filename)",
1744
- "fieldName": "name"
1745
- },
1746
- {
1747
- "name": "loop",
1748
- "type": {
1749
- "text": "LoopType | undefined"
1750
- },
1751
- "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
1752
- "fieldName": "loop"
1753
- },
1754
- {
1755
- "name": "autoplay",
1756
- "type": {
1757
- "text": "boolean | undefined"
1758
- },
1759
- "description": "Weather start the animation automatically",
1760
- "fieldName": "autoplay"
1761
- },
1762
- {
1763
- "name": "aria-label",
1764
- "type": {
1765
- "text": "string | null"
1766
- },
1767
- "default": "null",
1768
- "description": "Aria-label attribute to be set for accessibility",
1769
- "fieldName": "ariaLabel"
1770
- },
1771
- {
1772
- "name": "aria-labelledby",
1773
- "type": {
1774
- "text": "string | null"
1775
- },
1776
- "default": "null",
1777
- "description": "Aria-labelledby attribute to be set for accessibility",
1778
- "fieldName": "ariaLabelledBy"
1779
- }
1780
- ],
1781
- "superclass": {
1782
- "name": "Component",
1783
- "module": "/src/models"
1784
- },
1785
- "tagName": "mdc-animation",
1786
- "jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
1787
- "customElement": true
1788
- }
1789
- ],
1790
- "exports": [
1791
- {
1792
- "kind": "js",
1793
- "name": "default",
1794
- "declaration": {
1795
- "name": "Animation",
1796
- "module": "components/animation/animation.component.js"
1797
- }
1798
- }
1799
- ]
1800
- },
1801
1589
  {
1802
1590
  "kind": "javascript-module",
1803
1591
  "path": "components/announcementdialog/announcementdialog.component.js",
@@ -3488,6 +3276,218 @@
3488
3276
  }
3489
3277
  ]
3490
3278
  },
3279
+ {
3280
+ "kind": "javascript-module",
3281
+ "path": "components/animation/animation.component.js",
3282
+ "declarations": [
3283
+ {
3284
+ "kind": "class",
3285
+ "description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
3286
+ "name": "Animation",
3287
+ "members": [
3288
+ {
3289
+ "kind": "field",
3290
+ "name": "name",
3291
+ "type": {
3292
+ "text": "AnimationNames | undefined"
3293
+ },
3294
+ "description": "Name of the animation (= filename)",
3295
+ "attribute": "name",
3296
+ "reflects": true
3297
+ },
3298
+ {
3299
+ "kind": "field",
3300
+ "name": "loop",
3301
+ "type": {
3302
+ "text": "LoopType | undefined"
3303
+ },
3304
+ "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
3305
+ "attribute": "loop",
3306
+ "reflects": true
3307
+ },
3308
+ {
3309
+ "kind": "field",
3310
+ "name": "autoplay",
3311
+ "type": {
3312
+ "text": "boolean | undefined"
3313
+ },
3314
+ "description": "Weather start the animation automatically",
3315
+ "attribute": "autoplay",
3316
+ "reflects": true
3317
+ },
3318
+ {
3319
+ "kind": "field",
3320
+ "name": "ariaLabel",
3321
+ "type": {
3322
+ "text": "string | null"
3323
+ },
3324
+ "default": "null",
3325
+ "description": "Aria-label attribute to be set for accessibility",
3326
+ "attribute": "aria-label"
3327
+ },
3328
+ {
3329
+ "kind": "field",
3330
+ "name": "ariaLabelledBy",
3331
+ "type": {
3332
+ "text": "string | null"
3333
+ },
3334
+ "default": "null",
3335
+ "description": "Aria-labelledby attribute to be set for accessibility",
3336
+ "attribute": "aria-labelledby"
3337
+ },
3338
+ {
3339
+ "kind": "field",
3340
+ "name": "lottieInstance",
3341
+ "type": {
3342
+ "text": "AnimationItem | undefined"
3343
+ },
3344
+ "privacy": "private",
3345
+ "description": "Lottie animation instance"
3346
+ },
3347
+ {
3348
+ "kind": "field",
3349
+ "name": "containerRef",
3350
+ "type": {
3351
+ "text": "Ref<HTMLDivElement>"
3352
+ },
3353
+ "privacy": "private",
3354
+ "description": "Container for the animation"
3355
+ },
3356
+ {
3357
+ "kind": "field",
3358
+ "name": "animation",
3359
+ "description": "Exposed API of the animation library (lottie)",
3360
+ "readonly": true
3361
+ },
3362
+ {
3363
+ "kind": "method",
3364
+ "name": "getLoopValue",
3365
+ "privacy": "private"
3366
+ },
3367
+ {
3368
+ "kind": "method",
3369
+ "name": "onLoadSuccessHandler",
3370
+ "privacy": "private",
3371
+ "parameters": [
3372
+ {
3373
+ "name": "animationData",
3374
+ "type": {
3375
+ "text": "any"
3376
+ }
3377
+ }
3378
+ ],
3379
+ "description": "Create new lotty instance for the loaded data"
3380
+ },
3381
+ {
3382
+ "kind": "method",
3383
+ "name": "onLoadFailHandler",
3384
+ "privacy": "private",
3385
+ "parameters": [
3386
+ {
3387
+ "name": "error",
3388
+ "type": {
3389
+ "text": "Error"
3390
+ }
3391
+ }
3392
+ ],
3393
+ "description": "Error handler for animation loading"
3394
+ },
3395
+ {
3396
+ "kind": "method",
3397
+ "name": "getAnimationData",
3398
+ "privacy": "private",
3399
+ "description": "Import animation data dynamically"
3400
+ },
3401
+ {
3402
+ "kind": "field",
3403
+ "name": "onCompleteHandler",
3404
+ "description": "Re-dispatch the complete event from the animation library\n\nThis handler called with the animation instance instead of the component instance\nso we need to bind it to the component instance. The arrow function just does that."
3405
+ }
3406
+ ],
3407
+ "events": [
3408
+ {
3409
+ "name": "load",
3410
+ "type": {
3411
+ "text": "CustomEvent"
3412
+ },
3413
+ "description": "(React: onLoad) This event is dispatched when the animation is loaded",
3414
+ "reactName": "onLoad"
3415
+ },
3416
+ {
3417
+ "description": "(React: onComplete) This event is dispatched when all animation loops completed",
3418
+ "name": "complete",
3419
+ "reactName": "onComplete"
3420
+ },
3421
+ {
3422
+ "description": "(React: onError) This event is dispatched when animation loading failed",
3423
+ "name": "error",
3424
+ "reactName": "onError"
3425
+ }
3426
+ ],
3427
+ "attributes": [
3428
+ {
3429
+ "name": "name",
3430
+ "type": {
3431
+ "text": "AnimationNames | undefined"
3432
+ },
3433
+ "description": "Name of the animation (= filename)",
3434
+ "fieldName": "name"
3435
+ },
3436
+ {
3437
+ "name": "loop",
3438
+ "type": {
3439
+ "text": "LoopType | undefined"
3440
+ },
3441
+ "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
3442
+ "fieldName": "loop"
3443
+ },
3444
+ {
3445
+ "name": "autoplay",
3446
+ "type": {
3447
+ "text": "boolean | undefined"
3448
+ },
3449
+ "description": "Weather start the animation automatically",
3450
+ "fieldName": "autoplay"
3451
+ },
3452
+ {
3453
+ "name": "aria-label",
3454
+ "type": {
3455
+ "text": "string | null"
3456
+ },
3457
+ "default": "null",
3458
+ "description": "Aria-label attribute to be set for accessibility",
3459
+ "fieldName": "ariaLabel"
3460
+ },
3461
+ {
3462
+ "name": "aria-labelledby",
3463
+ "type": {
3464
+ "text": "string | null"
3465
+ },
3466
+ "default": "null",
3467
+ "description": "Aria-labelledby attribute to be set for accessibility",
3468
+ "fieldName": "ariaLabelledBy"
3469
+ }
3470
+ ],
3471
+ "superclass": {
3472
+ "name": "Component",
3473
+ "module": "/src/models"
3474
+ },
3475
+ "tagName": "mdc-animation",
3476
+ "jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
3477
+ "customElement": true
3478
+ }
3479
+ ],
3480
+ "exports": [
3481
+ {
3482
+ "kind": "js",
3483
+ "name": "default",
3484
+ "declaration": {
3485
+ "name": "Animation",
3486
+ "module": "components/animation/animation.component.js"
3487
+ }
3488
+ }
3489
+ ]
3490
+ },
3491
3491
  {
3492
3492
  "kind": "javascript-module",
3493
3493
  "path": "components/avatarbutton/avatarbutton.component.js",
@@ -10068,6 +10068,70 @@
10068
10068
  {
10069
10069
  "description": "Background color for a selected checkbox when disabled.",
10070
10070
  "name": "--mdc-checkbox-disabled-checked-icon-color"
10071
+ },
10072
+ {
10073
+ "description": "Font size for the label text.",
10074
+ "name": "--mdc-label-font-size",
10075
+ "inheritedFrom": {
10076
+ "name": "FormfieldWrapper",
10077
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
10078
+ }
10079
+ },
10080
+ {
10081
+ "description": "Font weight for the label text.",
10082
+ "name": "--mdc-label-font-weight",
10083
+ "inheritedFrom": {
10084
+ "name": "FormfieldWrapper",
10085
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
10086
+ }
10087
+ },
10088
+ {
10089
+ "description": "Line height for the label text.",
10090
+ "name": "--mdc-label-line-height",
10091
+ "inheritedFrom": {
10092
+ "name": "FormfieldWrapper",
10093
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
10094
+ }
10095
+ },
10096
+ {
10097
+ "description": "Color for the label text.",
10098
+ "name": "--mdc-label-color",
10099
+ "inheritedFrom": {
10100
+ "name": "FormfieldWrapper",
10101
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
10102
+ }
10103
+ },
10104
+ {
10105
+ "description": "Font size for the help text.",
10106
+ "name": "--mdc-help-text-font-size",
10107
+ "inheritedFrom": {
10108
+ "name": "FormfieldWrapper",
10109
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
10110
+ }
10111
+ },
10112
+ {
10113
+ "description": "Font weight for the help text.",
10114
+ "name": "--mdc-help-text-font-weight",
10115
+ "inheritedFrom": {
10116
+ "name": "FormfieldWrapper",
10117
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
10118
+ }
10119
+ },
10120
+ {
10121
+ "description": "Line height for the help text.",
10122
+ "name": "--mdc-help-text-line-height",
10123
+ "inheritedFrom": {
10124
+ "name": "FormfieldWrapper",
10125
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
10126
+ }
10127
+ },
10128
+ {
10129
+ "description": "Color for the help text.",
10130
+ "name": "--mdc-help-text-color",
10131
+ "inheritedFrom": {
10132
+ "name": "FormfieldWrapper",
10133
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
10134
+ }
10071
10135
  }
10072
10136
  ],
10073
10137
  "cssParts": [
@@ -10908,7 +10972,7 @@
10908
10972
  "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
10909
10973
  },
10910
10974
  "tagName": "mdc-checkbox",
10911
- "jsDoc": "/**\n * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selections in lists.\n *\n * A checkbox component contains an optional label and an optional helper text.\n *\n * To create a group of checkboxes, use the FormFieldGroup component.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-checkbox\n *\n * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.\n *\n * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.\n * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart checkbox-input - The native checkbox input element.\n * @csspart text-container - The container for the label and helper text elements.\n */",
10975
+ "jsDoc": "/**\n * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selections in lists.\n *\n * A checkbox component contains an optional label and an optional helper text.\n *\n * To create a group of checkboxes, use the FormFieldGroup component.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-checkbox\n *\n * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.\n *\n * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.\n * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart checkbox-input - The native checkbox input element.\n * @csspart text-container - The container for the label and helper text elements.\n */",
10912
10976
  "customElement": true
10913
10977
  }
10914
10978
  ],
@@ -13576,32 +13640,72 @@
13576
13640
  "name": "--mdc-combobox-hover-background-color"
13577
13641
  },
13578
13642
  {
13579
- "description": "The background color of the combobox when focused",
13580
- "name": "--mdc-combobox-focused-background-color"
13643
+ "description": "The text color of the combobox when disabled",
13644
+ "name": "--mdc-combobox-text-color-disabled"
13581
13645
  },
13582
13646
  {
13583
- "description": "The border color of the combobox when in error state",
13584
- "name": "--mdc-combobox-error-border-color"
13647
+ "description": "Font size for the label text.",
13648
+ "name": "--mdc-label-font-size",
13649
+ "inheritedFrom": {
13650
+ "name": "FormfieldWrapper",
13651
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
13652
+ }
13585
13653
  },
13586
13654
  {
13587
- "description": "The border color of the combobox when in warning state",
13588
- "name": "--mdc-combobox-warning-border-color"
13655
+ "description": "Font weight for the label text.",
13656
+ "name": "--mdc-label-font-weight",
13657
+ "inheritedFrom": {
13658
+ "name": "FormfieldWrapper",
13659
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
13660
+ }
13589
13661
  },
13590
13662
  {
13591
- "description": "The border color of the combobox when in success state",
13592
- "name": "--mdc-combobox-success-border-color"
13663
+ "description": "Line height for the label text.",
13664
+ "name": "--mdc-label-line-height",
13665
+ "inheritedFrom": {
13666
+ "name": "FormfieldWrapper",
13667
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
13668
+ }
13593
13669
  },
13594
13670
  {
13595
- "description": "The border color of the combobox when in primary state",
13596
- "name": "--mdc-combobox-primary-border-color"
13671
+ "description": "Color for the label text.",
13672
+ "name": "--mdc-label-color",
13673
+ "inheritedFrom": {
13674
+ "name": "FormfieldWrapper",
13675
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
13676
+ }
13597
13677
  },
13598
13678
  {
13599
- "description": "The text color of the combobox when disabled",
13600
- "name": "--mdc-combobox-text-color-disabled"
13679
+ "description": "Font size for the help text.",
13680
+ "name": "--mdc-help-text-font-size",
13681
+ "inheritedFrom": {
13682
+ "name": "FormfieldWrapper",
13683
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
13684
+ }
13601
13685
  },
13602
13686
  {
13603
- "description": "The border color of the combobox when focused",
13604
- "name": "--mdc-combobox-focused-border-color"
13687
+ "description": "Font weight for the help text.",
13688
+ "name": "--mdc-help-text-font-weight",
13689
+ "inheritedFrom": {
13690
+ "name": "FormfieldWrapper",
13691
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
13692
+ }
13693
+ },
13694
+ {
13695
+ "description": "Line height for the help text.",
13696
+ "name": "--mdc-help-text-line-height",
13697
+ "inheritedFrom": {
13698
+ "name": "FormfieldWrapper",
13699
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
13700
+ }
13701
+ },
13702
+ {
13703
+ "description": "Color for the help text.",
13704
+ "name": "--mdc-help-text-color",
13705
+ "inheritedFrom": {
13706
+ "name": "FormfieldWrapper",
13707
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
13708
+ }
13605
13709
  }
13606
13710
  ],
13607
13711
  "cssParts": [
@@ -14876,7 +14980,7 @@
14876
14980
  "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
14877
14981
  },
14878
14982
  "tagName": "mdc-combobox",
14879
- "jsDoc": "/**\n * The Combobox component is a text-based dropdown control that allows users to select an option from a predefined list.\n * Users can type text to filter the options and select their desired choice.\n *\n * When the user starts typing, the filter uses a \"starts with\" search and displays options based on the text entered by the user.\n * If the user entered text that doesn't match with any of the options, then the text in the `no-result-text` attribute will be displayed.\n *\n * If there is no text in the `no-result-text` attribute then nothing will be shown.\n *\n * Combobox is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n * The component ensures accessibility and usability while handling various use cases, including long text truncation with tooltip support.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-combobox` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-selectlistbox` element. Read more about it in Options documentation.\n *\n * To understand more about combobox and its patterns, refer to this [WCAG example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/).\n *\n * @dependency mdc-buttonsimple\n * @dependency mdc-icon\n * @dependency mdc-input\n * @dependency mdc-listitem\n * @dependency mdc-popover\n *\n * @tagname mdc-combobox\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @event click - (React: onClick) This event is dispatched when the combobox is clicked.\n * @event change - (React: onChange) This event is dispatched when the combobox is changed.\n * @event input - (React: onInput) This event is dispatched when the combobox is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the combobox.\n * @event focus - (React: onFocus) This event is dispatched when the combobox receives focus.\n *\n * @cssproperty --mdc-combobox-border-color - The border color of the combobox\n * @cssproperty --mdc-combobox-icon-color - The icon color of the combobox\n * @cssproperty --mdc-combobox-listbox-height - The height of the listbox inside the combobox\n * @cssproperty --mdc-combobox-listbox-width - The width of the listbox inside the combobox\n * @cssproperty --mdc-combobox-width - The width of the combobox\n * @cssproperty --mdc-combobox-hover-background-color - The background color of the combobox when hovered\n * @cssproperty --mdc-combobox-focused-background-color - The background color of the combobox when focused\n * @cssproperty --mdc-combobox-error-border-color - The border color of the combobox when in error state\n * @cssproperty --mdc-combobox-warning-border-color - The border color of the combobox when in warning state\n * @cssproperty --mdc-combobox-success-border-color - The border color of the combobox when in success state\n * @cssproperty --mdc-combobox-primary-border-color - The border color of the combobox when in primary state\n * @cssproperty --mdc-combobox-text-color-disabled - The text color of the combobox when disabled\n * @cssproperty --mdc-combobox-focused-border-color - The border color of the combobox when focused\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart internal-native-input - The internal native input element of the combobox.\n * @csspart input-text - The input element of the combobox.\n * @csspart no-result-text - The no result text element of the combobox.\n * @csspart combobox__base - The base container element of the combobox.\n * @csspart combobox__button - The button element of the combobox.\n * @csspart combobox__button-icon - The icon element of the button of the combobox.\n */",
14983
+ "jsDoc": "/**\n * The Combobox component is a text-based dropdown control that allows users to select an option from a predefined list.\n * Users can type text to filter the options and select their desired choice.\n *\n * When the user starts typing, the filter uses a \"starts with\" search and displays options based on the text entered by the user.\n * If the user entered text that doesn't match with any of the options, then the text in the `no-result-text` attribute will be displayed.\n *\n * If there is no text in the `no-result-text` attribute then nothing will be shown.\n *\n * Combobox is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n * The component ensures accessibility and usability while handling various use cases, including long text truncation with tooltip support.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-combobox` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-selectlistbox` element. Read more about it in Options documentation.\n *\n * To understand more about combobox and its patterns, refer to this [WCAG example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/).\n *\n * @dependency mdc-buttonsimple\n * @dependency mdc-icon\n * @dependency mdc-input\n * @dependency mdc-listitem\n * @dependency mdc-popover\n *\n * @tagname mdc-combobox\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @event click - (React: onClick) This event is dispatched when the combobox is clicked.\n * @event change - (React: onChange) This event is dispatched when the combobox is changed.\n * @event input - (React: onInput) This event is dispatched when the combobox is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the combobox.\n * @event focus - (React: onFocus) This event is dispatched when the combobox receives focus.\n *\n * @cssproperty --mdc-combobox-border-color - The border color of the combobox\n * @cssproperty --mdc-combobox-icon-color - The icon color of the combobox\n * @cssproperty --mdc-combobox-listbox-height - The height of the listbox inside the combobox\n * @cssproperty --mdc-combobox-listbox-width - The width of the listbox inside the combobox\n * @cssproperty --mdc-combobox-width - The width of the combobox\n * @cssproperty --mdc-combobox-hover-background-color - The background color of the combobox when hovered\n * @cssproperty --mdc-combobox-text-color-disabled - The text color of the combobox when disabled\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart internal-native-input - The internal native input element of the combobox.\n * @csspart input-text - The input element of the combobox.\n * @csspart no-result-text - The no result text element of the combobox.\n * @csspart combobox__base - The base container element of the combobox.\n * @csspart combobox__button - The button element of the combobox.\n * @csspart combobox__button-icon - The icon element of the button of the combobox.\n */",
14880
14984
  "customElement": true
14881
14985
  }
14882
14986
  ],
@@ -17029,6 +17133,72 @@
17029
17133
  "kind": "class",
17030
17134
  "description": "`mdc-formfieldgroup` component, groups the form field components together.\nAll passed in children will have a gap of 12px (0.75rem) each applied.\n\nThis component is specifically for creating a `checkbox` group and a `toggle` group component.\nFor the radiogroup use the RadioGroup component instead.\n\nThe header text and description text are displayed above the items with accessible labels.<br/>\nThe consumer has to provide atleast the header-text or the aria-label,\nlike one of them <b>has</b> to be passed in always, otherwise its not accessible.\n\nThe role will be set to `group`.\nThe aria-label will be set with the data-aria-label property.\nThe aria-labelledby will be set with the header id which contains the header text information.\nThe aria-describedby will be set with the description id which contains the description text information.",
17031
17135
  "name": "FormfieldGroup",
17136
+ "cssProperties": [
17137
+ {
17138
+ "description": "Font size for the label text.",
17139
+ "name": "--mdc-label-font-size",
17140
+ "inheritedFrom": {
17141
+ "name": "FormfieldWrapper",
17142
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
17143
+ }
17144
+ },
17145
+ {
17146
+ "description": "Font weight for the label text.",
17147
+ "name": "--mdc-label-font-weight",
17148
+ "inheritedFrom": {
17149
+ "name": "FormfieldWrapper",
17150
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
17151
+ }
17152
+ },
17153
+ {
17154
+ "description": "Line height for the label text.",
17155
+ "name": "--mdc-label-line-height",
17156
+ "inheritedFrom": {
17157
+ "name": "FormfieldWrapper",
17158
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
17159
+ }
17160
+ },
17161
+ {
17162
+ "description": "Color for the label text.",
17163
+ "name": "--mdc-label-color",
17164
+ "inheritedFrom": {
17165
+ "name": "FormfieldWrapper",
17166
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
17167
+ }
17168
+ },
17169
+ {
17170
+ "description": "Font size for the help text.",
17171
+ "name": "--mdc-help-text-font-size",
17172
+ "inheritedFrom": {
17173
+ "name": "FormfieldWrapper",
17174
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
17175
+ }
17176
+ },
17177
+ {
17178
+ "description": "Font weight for the help text.",
17179
+ "name": "--mdc-help-text-font-weight",
17180
+ "inheritedFrom": {
17181
+ "name": "FormfieldWrapper",
17182
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
17183
+ }
17184
+ },
17185
+ {
17186
+ "description": "Line height for the help text.",
17187
+ "name": "--mdc-help-text-line-height",
17188
+ "inheritedFrom": {
17189
+ "name": "FormfieldWrapper",
17190
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
17191
+ }
17192
+ },
17193
+ {
17194
+ "description": "Color for the help text.",
17195
+ "name": "--mdc-help-text-color",
17196
+ "inheritedFrom": {
17197
+ "name": "FormfieldWrapper",
17198
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
17199
+ }
17200
+ }
17201
+ ],
17032
17202
  "cssParts": [
17033
17203
  {
17034
17204
  "description": "The label element.",
@@ -17402,7 +17572,7 @@
17402
17572
  "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
17403
17573
  },
17404
17574
  "tagName": "mdc-formfieldgroup",
17405
- "jsDoc": "/**\n * `mdc-formfieldgroup` component, groups the form field components together.\n * All passed in children will have a gap of 12px (0.75rem) each applied.\n *\n * This component is specifically for creating a `checkbox` group and a `toggle` group component.\n * For the radiogroup use the RadioGroup component instead.\n *\n * The header text and description text are displayed above the items with accessible labels.<br/>\n * The consumer has to provide atleast the header-text or the aria-label,\n * like one of them <b>has</b> to be passed in always, otherwise its not accessible.\n *\n * The role will be set to `group`.\n * The aria-label will be set with the data-aria-label property.\n * The aria-labelledby will be set with the header id which contains the header text information.\n * The aria-describedby will be set with the description id which contains the description text information.\n *\n * @tagname mdc-formfieldgroup\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @slot default - This is a default slot for checkbox or toggle components.\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart container - Formfieldgroup host container\n * @csspart group-header - This contains the label and help text for the group\n */",
17575
+ "jsDoc": "/**\n * `mdc-formfieldgroup` component, groups the form field components together.\n * All passed in children will have a gap of 12px (0.75rem) each applied.\n *\n * This component is specifically for creating a `checkbox` group and a `toggle` group component.\n * For the radiogroup use the RadioGroup component instead.\n *\n * The header text and description text are displayed above the items with accessible labels.<br/>\n * The consumer has to provide atleast the header-text or the aria-label,\n * like one of them <b>has</b> to be passed in always, otherwise its not accessible.\n *\n * The role will be set to `group`.\n * The aria-label will be set with the data-aria-label property.\n * The aria-labelledby will be set with the header id which contains the header text information.\n * The aria-describedby will be set with the description id which contains the description text information.\n *\n * @tagname mdc-formfieldgroup\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @slot default - This is a default slot for checkbox or toggle components.\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart container - Formfieldgroup host container\n * @csspart group-header - This contains the label and help text for the group\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n */",
17406
17576
  "customElement": true,
17407
17577
  "attributes": [
17408
17578
  {
@@ -17576,6 +17746,40 @@
17576
17746
  "kind": "class",
17577
17747
  "description": "formfieldwrapper is a component that contains the label and helper/validation text\n that can be configured in various ways to suit different use cases (most of the input related components).\nIt is used as an internal component and is not intended to be used directly by consumers.",
17578
17748
  "name": "FormfieldWrapper",
17749
+ "cssProperties": [
17750
+ {
17751
+ "description": "Font size for the label text.",
17752
+ "name": "--mdc-label-font-size"
17753
+ },
17754
+ {
17755
+ "description": "Font weight for the label text.",
17756
+ "name": "--mdc-label-font-weight"
17757
+ },
17758
+ {
17759
+ "description": "Line height for the label text.",
17760
+ "name": "--mdc-label-line-height"
17761
+ },
17762
+ {
17763
+ "description": "Color for the label text.",
17764
+ "name": "--mdc-label-color"
17765
+ },
17766
+ {
17767
+ "description": "Font size for the help text.",
17768
+ "name": "--mdc-help-text-font-size"
17769
+ },
17770
+ {
17771
+ "description": "Font weight for the help text.",
17772
+ "name": "--mdc-help-text-font-weight"
17773
+ },
17774
+ {
17775
+ "description": "Line height for the help text.",
17776
+ "name": "--mdc-help-text-line-height"
17777
+ },
17778
+ {
17779
+ "description": "Color for the help text.",
17780
+ "name": "--mdc-help-text-color"
17781
+ }
17782
+ ],
17579
17783
  "cssParts": [
17580
17784
  {
17581
17785
  "description": "The label element.",
@@ -17912,7 +18116,7 @@
17912
18116
  "module": "/src/models"
17913
18117
  },
17914
18118
  "tagName": "mdc-formfieldwrapper",
17915
- "jsDoc": "/**\n * formfieldwrapper is a component that contains the label and helper/validation text\n * that can be configured in various ways to suit different use cases (most of the input related components).\n * It is used as an internal component and is not intended to be used directly by consumers.\n *\n * @tagname mdc-formfieldwrapper\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n */",
18119
+ "jsDoc": "/**\n * formfieldwrapper is a component that contains the label and helper/validation text\n * that can be configured in various ways to suit different use cases (most of the input related components).\n * It is used as an internal component and is not intended to be used directly by consumers.\n *\n * @tagname mdc-formfieldwrapper\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n */",
17916
18120
  "customElement": true
17917
18121
  }
17918
18122
  ],
@@ -18715,68 +18919,92 @@
18715
18919
  "name": "Input",
18716
18920
  "cssProperties": [
18717
18921
  {
18718
- "description": "Border color for the input container when disabled",
18719
- "name": "--mdc-input-disabled-border-color"
18720
- },
18721
- {
18722
- "description": "Text color for the input field when disabled",
18723
- "name": "--mdc-input-disabled-text-color"
18724
- },
18725
- {
18726
- "description": "Background color for the input field when disabled",
18727
- "name": "--mdc-input-disabled-background-color"
18922
+ "description": "Font size for the label text.",
18923
+ "name": "--mdc-label-font-size",
18924
+ "inheritedFrom": {
18925
+ "name": "FormfieldWrapper",
18926
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
18927
+ }
18728
18928
  },
18729
18929
  {
18730
- "description": "Border color for the input container",
18731
- "name": "--mdc-input-border-color"
18930
+ "description": "Font weight for the label text.",
18931
+ "name": "--mdc-label-font-weight",
18932
+ "inheritedFrom": {
18933
+ "name": "FormfieldWrapper",
18934
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
18935
+ }
18732
18936
  },
18733
18937
  {
18734
- "description": "Text color for the input field",
18735
- "name": "--mdc-input-text-color"
18938
+ "description": "Line height for the label text.",
18939
+ "name": "--mdc-label-line-height",
18940
+ "inheritedFrom": {
18941
+ "name": "FormfieldWrapper",
18942
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
18943
+ }
18736
18944
  },
18737
18945
  {
18738
- "description": "Background color for the input field",
18739
- "name": "--mdc-input-background-color"
18946
+ "description": "Color for the label text.",
18947
+ "name": "--mdc-label-color",
18948
+ "inheritedFrom": {
18949
+ "name": "FormfieldWrapper",
18950
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
18951
+ }
18740
18952
  },
18741
18953
  {
18742
- "description": "Background color for the selected text",
18743
- "name": "--mdc-input-selection-background-color"
18954
+ "description": "Font size for the help text.",
18955
+ "name": "--mdc-help-text-font-size",
18956
+ "inheritedFrom": {
18957
+ "name": "FormfieldWrapper",
18958
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
18959
+ }
18744
18960
  },
18745
18961
  {
18746
- "description": "Text color for the selected text",
18747
- "name": "--mdc-input-selection-text-color"
18962
+ "description": "Font weight for the help text.",
18963
+ "name": "--mdc-help-text-font-weight",
18964
+ "inheritedFrom": {
18965
+ "name": "FormfieldWrapper",
18966
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
18967
+ }
18748
18968
  },
18749
18969
  {
18750
- "description": "Text color for the help text",
18751
- "name": "--mdc-input-support-text-color"
18970
+ "description": "Line height for the help text.",
18971
+ "name": "--mdc-help-text-line-height",
18972
+ "inheritedFrom": {
18973
+ "name": "FormfieldWrapper",
18974
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
18975
+ }
18752
18976
  },
18753
18977
  {
18754
- "description": "Background color for the input field when hovered",
18755
- "name": "--mdc-input-hover-background-color"
18978
+ "description": "Color for the help text.",
18979
+ "name": "--mdc-help-text-color",
18980
+ "inheritedFrom": {
18981
+ "name": "FormfieldWrapper",
18982
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
18983
+ }
18756
18984
  },
18757
18985
  {
18758
- "description": "Background color for the input field when focused",
18759
- "name": "--mdc-input-focused-background-color"
18986
+ "description": "Text color for the input field",
18987
+ "name": "--mdc-input-text-color"
18760
18988
  },
18761
18989
  {
18762
- "description": "Border color for the input container when focused",
18763
- "name": "--mdc-input-focused-border-color"
18990
+ "description": "Border color for the input container",
18991
+ "name": "--mdc-input-border-color"
18764
18992
  },
18765
18993
  {
18766
- "description": "Border color for the input container when error",
18767
- "name": "--mdc-input-error-border-color"
18994
+ "description": "Background color for the input field",
18995
+ "name": "--mdc-input-background-color"
18768
18996
  },
18769
18997
  {
18770
- "description": "Border color for the input container when warning",
18771
- "name": "--mdc-input-warning-border-color"
18998
+ "description": "Text color for the help text",
18999
+ "name": "--mdc-input-support-text-color"
18772
19000
  },
18773
19001
  {
18774
- "description": "Border color for the input container when success",
18775
- "name": "--mdc-input-success-border-color"
19002
+ "description": "Text color for the selected text",
19003
+ "name": "--mdc-input-selection-text-color"
18776
19004
  },
18777
19005
  {
18778
- "description": "Border color for the input container when primary",
18779
- "name": "--mdc-input-primary-border-color"
19006
+ "description": "Background color for the selected text",
19007
+ "name": "--mdc-input-selection-background-color"
18780
19008
  }
18781
19009
  ],
18782
19010
  "cssParts": [
@@ -19887,7 +20115,7 @@
19887
20115
  "module": "/src/components/formfieldwrapper"
19888
20116
  },
19889
20117
  "tagName": "mdc-input",
19890
- "jsDoc": "/**\n * mdc-input is a component that allows users to input text.\n * It contains:\n * - label field - describe the input field.\n * - input field - contains the value\n * - help text or validation message - displayed below the input field.\n * - trailing button - it displays a clear the input field.\n * - prefix text - displayed before the input field.\n * - leading icon - displayed before the input field.\n * - clear-aria-label - aria label for the trailing button.\n * - all the attributes of the input field.\n *\n * @tagname mdc-input\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n * @slot input - Slot for the input element. If not provided, the input field will be rendered.\n * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.\n * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.\n * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.\n *\n * @cssproperty --mdc-input-disabled-border-color - Border color for the input container when disabled\n * @cssproperty --mdc-input-disabled-text-color - Text color for the input field when disabled\n * @cssproperty --mdc-input-disabled-background-color - Background color for the input field when disabled\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-hover-background-color - Background color for the input field when hovered\n * @cssproperty --mdc-input-focused-background-color - Background color for the input field when focused\n * @cssproperty --mdc-input-focused-border-color - Border color for the input container when focused\n * @cssproperty --mdc-input-error-border-color - Border color for the input container when error\n * @cssproperty --mdc-input-warning-border-color - Border color for the input container when warning\n * @cssproperty --mdc-input-success-border-color - Border color for the input container when success\n * @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart leading-icon - The leading icon element that is displayed before the input field.\n * @csspart prefix-text - The prefix text element that is displayed before the input field.\n * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.\n * @csspart input-section - The container for the input field, leading icon, and prefix text elements.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.\n */",
20118
+ "jsDoc": "/**\n * mdc-input is a component that allows users to input text.\n * It contains:\n * - label field - describe the input field.\n * - input field - contains the value\n * - help text or validation message - displayed below the input field.\n * - trailing button - it displays a clear the input field.\n * - prefix text - displayed before the input field.\n * - leading icon - displayed before the input field.\n * - clear-aria-label - aria label for the trailing button.\n * - all the attributes of the input field.\n *\n * @tagname mdc-input\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n * @slot input - Slot for the input element. If not provided, the input field will be rendered.\n * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.\n * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.\n * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart leading-icon - The leading icon element that is displayed before the input field.\n * @csspart prefix-text - The prefix text element that is displayed before the input field.\n * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.\n * @csspart input-section - The container for the input field, leading icon, and prefix text elements.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.\n */",
19891
20119
  "customElement": true
19892
20120
  }
19893
20121
  ],
@@ -22957,6 +23185,77 @@
22957
23185
  }
22958
23186
  ]
22959
23187
  },
23188
+ {
23189
+ "kind": "javascript-module",
23190
+ "path": "components/marker/marker.component.js",
23191
+ "declarations": [
23192
+ {
23193
+ "kind": "class",
23194
+ "description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
23195
+ "name": "Marker",
23196
+ "cssProperties": [
23197
+ {
23198
+ "description": "Allows customization of the default background color in solid variant.",
23199
+ "name": "--mdc-marker-solid-background-color"
23200
+ },
23201
+ {
23202
+ "description": "Allows customization of the default stripes in striped variant.",
23203
+ "name": "--mdc-marker-striped-color"
23204
+ },
23205
+ {
23206
+ "description": "Allows customization of the default background color in striped variant.",
23207
+ "name": "--mdc-marker-striped-background-color"
23208
+ },
23209
+ {
23210
+ "description": "Allows customization of the default width.",
23211
+ "name": "--mdc-marker-width"
23212
+ }
23213
+ ],
23214
+ "members": [
23215
+ {
23216
+ "kind": "field",
23217
+ "name": "variant",
23218
+ "type": {
23219
+ "text": "MarkerVariants"
23220
+ },
23221
+ "privacy": "public",
23222
+ "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
23223
+ "default": "solid",
23224
+ "attribute": "variant",
23225
+ "reflects": true
23226
+ }
23227
+ ],
23228
+ "attributes": [
23229
+ {
23230
+ "name": "variant",
23231
+ "type": {
23232
+ "text": "MarkerVariants"
23233
+ },
23234
+ "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
23235
+ "default": "solid",
23236
+ "fieldName": "variant"
23237
+ }
23238
+ ],
23239
+ "superclass": {
23240
+ "name": "Component",
23241
+ "module": "/src/models"
23242
+ },
23243
+ "tagName": "mdc-marker",
23244
+ "jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
23245
+ "customElement": true
23246
+ }
23247
+ ],
23248
+ "exports": [
23249
+ {
23250
+ "kind": "js",
23251
+ "name": "default",
23252
+ "declaration": {
23253
+ "name": "Marker",
23254
+ "module": "components/marker/marker.component.js"
23255
+ }
23256
+ }
23257
+ ]
23258
+ },
22960
23259
  {
22961
23260
  "kind": "javascript-module",
22962
23261
  "path": "components/menubar/menubar.component.js",
@@ -25171,77 +25470,6 @@
25171
25470
  }
25172
25471
  ]
25173
25472
  },
25174
- {
25175
- "kind": "javascript-module",
25176
- "path": "components/marker/marker.component.js",
25177
- "declarations": [
25178
- {
25179
- "kind": "class",
25180
- "description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
25181
- "name": "Marker",
25182
- "cssProperties": [
25183
- {
25184
- "description": "Allows customization of the default background color in solid variant.",
25185
- "name": "--mdc-marker-solid-background-color"
25186
- },
25187
- {
25188
- "description": "Allows customization of the default stripes in striped variant.",
25189
- "name": "--mdc-marker-striped-color"
25190
- },
25191
- {
25192
- "description": "Allows customization of the default background color in striped variant.",
25193
- "name": "--mdc-marker-striped-background-color"
25194
- },
25195
- {
25196
- "description": "Allows customization of the default width.",
25197
- "name": "--mdc-marker-width"
25198
- }
25199
- ],
25200
- "members": [
25201
- {
25202
- "kind": "field",
25203
- "name": "variant",
25204
- "type": {
25205
- "text": "MarkerVariants"
25206
- },
25207
- "privacy": "public",
25208
- "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
25209
- "default": "solid",
25210
- "attribute": "variant",
25211
- "reflects": true
25212
- }
25213
- ],
25214
- "attributes": [
25215
- {
25216
- "name": "variant",
25217
- "type": {
25218
- "text": "MarkerVariants"
25219
- },
25220
- "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
25221
- "default": "solid",
25222
- "fieldName": "variant"
25223
- }
25224
- ],
25225
- "superclass": {
25226
- "name": "Component",
25227
- "module": "/src/models"
25228
- },
25229
- "tagName": "mdc-marker",
25230
- "jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
25231
- "customElement": true
25232
- }
25233
- ],
25234
- "exports": [
25235
- {
25236
- "kind": "js",
25237
- "name": "default",
25238
- "declaration": {
25239
- "name": "Marker",
25240
- "module": "components/marker/marker.component.js"
25241
- }
25242
- }
25243
- ]
25244
- },
25245
25473
  {
25246
25474
  "kind": "javascript-module",
25247
25475
  "path": "components/menuitemradio/menuitemradio.component.js",
@@ -30915,135 +31143,151 @@
30915
31143
  "name": "Password",
30916
31144
  "cssProperties": [
30917
31145
  {
30918
- "description": "Border color for the password container when disabled",
30919
- "name": "--mdc-input-disabled-border-color",
31146
+ "description": "Font size for the label text.",
31147
+ "name": "--mdc-label-font-size",
30920
31148
  "inheritedFrom": {
30921
- "name": "Input",
30922
- "module": "src/components/input/input.component.ts"
31149
+ "name": "FormfieldWrapper",
31150
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
30923
31151
  }
30924
31152
  },
30925
31153
  {
30926
- "description": "Text color for the password field when disabled",
30927
- "name": "--mdc-input-disabled-text-color",
31154
+ "description": "Font weight for the label text.",
31155
+ "name": "--mdc-label-font-weight",
30928
31156
  "inheritedFrom": {
30929
- "name": "Input",
30930
- "module": "src/components/input/input.component.ts"
31157
+ "name": "FormfieldWrapper",
31158
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
30931
31159
  }
30932
31160
  },
30933
31161
  {
30934
- "description": "Background color for the password field when disabled",
30935
- "name": "--mdc-input-disabled-background-color",
31162
+ "description": "Line height for the label text.",
31163
+ "name": "--mdc-label-line-height",
30936
31164
  "inheritedFrom": {
30937
- "name": "Input",
30938
- "module": "src/components/input/input.component.ts"
31165
+ "name": "FormfieldWrapper",
31166
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
30939
31167
  }
30940
31168
  },
30941
31169
  {
30942
- "description": "Border color for the password container",
30943
- "name": "--mdc-input-border-color",
31170
+ "description": "Color for the label text.",
31171
+ "name": "--mdc-label-color",
30944
31172
  "inheritedFrom": {
30945
- "name": "Input",
30946
- "module": "src/components/input/input.component.ts"
31173
+ "name": "FormfieldWrapper",
31174
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
30947
31175
  }
30948
31176
  },
30949
31177
  {
30950
- "description": "Text color for the password field",
30951
- "name": "--mdc-input-text-color",
31178
+ "description": "Font size for the help text.",
31179
+ "name": "--mdc-help-text-font-size",
30952
31180
  "inheritedFrom": {
30953
- "name": "Input",
30954
- "module": "src/components/input/input.component.ts"
31181
+ "name": "FormfieldWrapper",
31182
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
30955
31183
  }
30956
31184
  },
30957
31185
  {
30958
- "description": "Background color for the password field",
30959
- "name": "--mdc-input-background-color",
31186
+ "description": "Font weight for the help text.",
31187
+ "name": "--mdc-help-text-font-weight",
30960
31188
  "inheritedFrom": {
30961
- "name": "Input",
30962
- "module": "src/components/input/input.component.ts"
31189
+ "name": "FormfieldWrapper",
31190
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
30963
31191
  }
30964
31192
  },
30965
31193
  {
30966
- "description": "Background color for the selected text",
30967
- "name": "--mdc-input-selection-background-color",
31194
+ "description": "Line height for the help text.",
31195
+ "name": "--mdc-help-text-line-height",
31196
+ "inheritedFrom": {
31197
+ "name": "FormfieldWrapper",
31198
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
31199
+ }
31200
+ },
31201
+ {
31202
+ "description": "Color for the help text.",
31203
+ "name": "--mdc-help-text-color",
31204
+ "inheritedFrom": {
31205
+ "name": "FormfieldWrapper",
31206
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
31207
+ }
31208
+ },
31209
+ {
31210
+ "description": "Text color for the input field",
31211
+ "name": "--mdc-input-text-color",
30968
31212
  "inheritedFrom": {
30969
31213
  "name": "Input",
30970
31214
  "module": "src/components/input/input.component.ts"
30971
31215
  }
30972
31216
  },
30973
31217
  {
30974
- "description": "Text color for the selected text",
30975
- "name": "--mdc-input-selection-text-color",
31218
+ "description": "Border color for the input container",
31219
+ "name": "--mdc-input-border-color",
30976
31220
  "inheritedFrom": {
30977
31221
  "name": "Input",
30978
31222
  "module": "src/components/input/input.component.ts"
30979
31223
  }
30980
31224
  },
30981
31225
  {
30982
- "description": "Text color for the help text",
30983
- "name": "--mdc-input-support-text-color",
31226
+ "description": "Background color for the input field",
31227
+ "name": "--mdc-input-background-color",
30984
31228
  "inheritedFrom": {
30985
31229
  "name": "Input",
30986
31230
  "module": "src/components/input/input.component.ts"
30987
31231
  }
30988
31232
  },
30989
31233
  {
30990
- "description": "Background color for the password field when hovered",
30991
- "name": "--mdc-input-hover-background-color",
31234
+ "description": "Text color for the selected text",
31235
+ "name": "--mdc-input-selection-text-color",
30992
31236
  "inheritedFrom": {
30993
31237
  "name": "Input",
30994
31238
  "module": "src/components/input/input.component.ts"
30995
31239
  }
30996
31240
  },
30997
31241
  {
30998
- "description": "Background color for the password field when focused",
30999
- "name": "--mdc-input-focused-background-color",
31242
+ "description": "Background color for the selected text",
31243
+ "name": "--mdc-input-selection-background-color",
31000
31244
  "inheritedFrom": {
31001
31245
  "name": "Input",
31002
31246
  "module": "src/components/input/input.component.ts"
31003
31247
  }
31004
31248
  },
31005
31249
  {
31006
- "description": "Border color for the password container when focused",
31007
- "name": "--mdc-input-focused-border-color",
31250
+ "description": "Text color for the help text",
31251
+ "name": "--mdc-input-support-text-color",
31008
31252
  "inheritedFrom": {
31009
31253
  "name": "Input",
31010
31254
  "module": "src/components/input/input.component.ts"
31011
31255
  }
31012
- },
31256
+ }
31257
+ ],
31258
+ "cssParts": [
31013
31259
  {
31014
- "description": "Border color for the password container when error",
31015
- "name": "--mdc-input-error-border-color",
31260
+ "description": "The container that wraps the input field, leading icon, prefix text, and trailing button.",
31261
+ "name": "input-container",
31016
31262
  "inheritedFrom": {
31017
31263
  "name": "Input",
31018
31264
  "module": "src/components/input/input.component.ts"
31019
31265
  }
31020
31266
  },
31021
31267
  {
31022
- "description": "Border color for the password container when warning",
31023
- "name": "--mdc-input-warning-border-color",
31268
+ "description": "The container that wraps the input field and prefix text.",
31269
+ "name": "input-section",
31024
31270
  "inheritedFrom": {
31025
31271
  "name": "Input",
31026
31272
  "module": "src/components/input/input.component.ts"
31027
31273
  }
31028
31274
  },
31029
31275
  {
31030
- "description": "Border color for the password container when success",
31031
- "name": "--mdc-input-success-border-color",
31276
+ "description": "The input field element.",
31277
+ "name": "input-text",
31032
31278
  "inheritedFrom": {
31033
31279
  "name": "Input",
31034
31280
  "module": "src/components/input/input.component.ts"
31035
31281
  }
31036
31282
  },
31037
31283
  {
31038
- "description": "Border color for the password container when primary",
31039
- "name": "--mdc-input-primary-border-color",
31284
+ "description": "The trailing button element.",
31285
+ "name": "trailing-button",
31040
31286
  "inheritedFrom": {
31041
31287
  "name": "Input",
31042
31288
  "module": "src/components/input/input.component.ts"
31043
31289
  }
31044
- }
31045
- ],
31046
- "cssParts": [
31290
+ },
31047
31291
  {
31048
31292
  "description": "The label element.",
31049
31293
  "name": "label",
@@ -31052,6 +31296,26 @@
31052
31296
  "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
31053
31297
  }
31054
31298
  },
31299
+ {
31300
+ "description": "The helper/validation text element.",
31301
+ "name": "helper-text"
31302
+ },
31303
+ {
31304
+ "description": "The helper/validation icon element.",
31305
+ "name": "helper-icon",
31306
+ "inheritedFrom": {
31307
+ "name": "FormfieldWrapper",
31308
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
31309
+ }
31310
+ },
31311
+ {
31312
+ "description": "The toggletip icon button element.",
31313
+ "name": "toggletip"
31314
+ },
31315
+ {
31316
+ "description": "The toggletip text element.",
31317
+ "name": "toggletip-text"
31318
+ },
31055
31319
  {
31056
31320
  "description": "The container for the label and required indicator elements.",
31057
31321
  "name": "label-text",
@@ -31092,14 +31356,6 @@
31092
31356
  "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
31093
31357
  }
31094
31358
  },
31095
- {
31096
- "description": "The helper/validation icon element that is displayed next to the helper/validation text.",
31097
- "name": "helper-icon",
31098
- "inheritedFrom": {
31099
- "name": "FormfieldWrapper",
31100
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
31101
- }
31102
- },
31103
31359
  {
31104
31360
  "description": "The container for the helper/validation icon and text elements.",
31105
31361
  "name": "help-text-container",
@@ -31109,48 +31365,82 @@
31109
31365
  }
31110
31366
  },
31111
31367
  {
31112
- "description": "The container for the input field, leading icon, prefix text, and trailing button elements.",
31113
- "name": "input-container",
31368
+ "description": "The leading icon element that is displayed before the input field.",
31369
+ "name": "leading-icon",
31114
31370
  "inheritedFrom": {
31115
31371
  "name": "Input",
31116
31372
  "module": "src/components/input/input.component.ts"
31117
31373
  }
31118
31374
  },
31119
31375
  {
31120
- "description": "The container for the input field, leading icon, and prefix text elements.",
31121
- "name": "input-section",
31376
+ "description": "The prefix text element that is displayed before the input field.",
31377
+ "name": "prefix-text",
31122
31378
  "inheritedFrom": {
31123
31379
  "name": "Input",
31124
31380
  "module": "src/components/input/input.component.ts"
31125
31381
  }
31382
+ }
31383
+ ],
31384
+ "slots": [
31385
+ {
31386
+ "description": "Slot for the label element. If not provided, the `label` property will be used to render the label.",
31387
+ "name": "label",
31388
+ "inheritedFrom": {
31389
+ "name": "FormfieldWrapper",
31390
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
31391
+ }
31126
31392
  },
31127
31393
  {
31128
- "description": "The input field element.",
31129
- "name": "input-text",
31394
+ "description": "Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.",
31395
+ "name": "toggletip",
31396
+ "inheritedFrom": {
31397
+ "name": "FormfieldWrapper",
31398
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
31399
+ }
31400
+ },
31401
+ {
31402
+ "description": "Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.",
31403
+ "name": "help-icon",
31404
+ "inheritedFrom": {
31405
+ "name": "FormfieldWrapper",
31406
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
31407
+ }
31408
+ },
31409
+ {
31410
+ "description": "Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.",
31411
+ "name": "help-text",
31412
+ "inheritedFrom": {
31413
+ "name": "FormfieldWrapper",
31414
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
31415
+ }
31416
+ },
31417
+ {
31418
+ "description": "Slot for the input element. If not provided, the input field will be rendered.",
31419
+ "name": "input",
31130
31420
  "inheritedFrom": {
31131
31421
  "name": "Input",
31132
31422
  "module": "src/components/input/input.component.ts"
31133
31423
  }
31134
31424
  },
31135
31425
  {
31136
- "description": "The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.",
31137
- "name": "trailing-button",
31426
+ "description": "Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.",
31427
+ "name": "input-leading-icon",
31138
31428
  "inheritedFrom": {
31139
31429
  "name": "Input",
31140
31430
  "module": "src/components/input/input.component.ts"
31141
31431
  }
31142
31432
  },
31143
31433
  {
31144
- "description": "The leading icon element that is displayed before the input field.",
31145
- "name": "leading-icon",
31434
+ "description": "Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.",
31435
+ "name": "input-prefix-text",
31146
31436
  "inheritedFrom": {
31147
31437
  "name": "Input",
31148
31438
  "module": "src/components/input/input.component.ts"
31149
31439
  }
31150
31440
  },
31151
31441
  {
31152
- "description": "The prefix text element that is displayed before the input field.",
31153
- "name": "prefix-text",
31442
+ "description": "Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.",
31443
+ "name": "trailing-button",
31154
31444
  "inheritedFrom": {
31155
31445
  "name": "Input",
31156
31446
  "module": "src/components/input/input.component.ts"
@@ -32318,74 +32608,8 @@
32318
32608
  "module": "/src/components/input/input.component"
32319
32609
  },
32320
32610
  "tagName": "mdc-password",
32321
- "jsDoc": "/**\n * `mdc-password` is a component that allows users to input their password.\n * It extends the `mdc-input` component and provides additional features specific to password fields.\n * It contains:\n * - `label` field - describe the password field.\n * - `password` field - contains the value\n * - `help-text` or `validation-message` - displayed below the password field.\n * - `help-text-type` - type of the help text, can be 'default', 'error', 'warning', 'success', 'priority'.\n * - `show-hide-button-aria-label` - aria label for the trailing show/hide button.\n * - all the attributes of the native password field.\n *\n * @tagname mdc-password\n *\n * @event input - (React: onInput) This event is dispatched when the value of the password field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the password field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the password receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the password loses focus.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n * @cssproperty --mdc-input-disabled-border-color - Border color for the password container when disabled\n * @cssproperty --mdc-input-disabled-text-color - Text color for the password field when disabled\n * @cssproperty --mdc-input-disabled-background-color - Background color for the password field when disabled\n * @cssproperty --mdc-input-border-color - Border color for the password container\n * @cssproperty --mdc-input-text-color - Text color for the password field\n * @cssproperty --mdc-input-background-color - Background color for the password field\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-hover-background-color - Background color for the password field when hovered\n * @cssproperty --mdc-input-focused-background-color - Background color for the password field when focused\n * @cssproperty --mdc-input-focused-border-color - Border color for the password container when focused\n * @cssproperty --mdc-input-error-border-color - Border color for the password container when error\n * @cssproperty --mdc-input-warning-border-color - Border color for the password container when warning\n * @cssproperty --mdc-input-success-border-color - Border color for the password container when success\n * @cssproperty --mdc-input-primary-border-color - Border color for the password container when primary\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.\n * @csspart input-section - The container for the input field, leading icon, and prefix text elements.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.\n */",
32322
- "customElement": true,
32323
- "slots": [
32324
- {
32325
- "description": "Slot for the label element. If not provided, the `label` property will be used to render the label.",
32326
- "name": "label",
32327
- "inheritedFrom": {
32328
- "name": "FormfieldWrapper",
32329
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
32330
- }
32331
- },
32332
- {
32333
- "description": "Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.",
32334
- "name": "toggletip",
32335
- "inheritedFrom": {
32336
- "name": "FormfieldWrapper",
32337
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
32338
- }
32339
- },
32340
- {
32341
- "description": "Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.",
32342
- "name": "help-icon",
32343
- "inheritedFrom": {
32344
- "name": "FormfieldWrapper",
32345
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
32346
- }
32347
- },
32348
- {
32349
- "description": "Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.",
32350
- "name": "help-text",
32351
- "inheritedFrom": {
32352
- "name": "FormfieldWrapper",
32353
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
32354
- }
32355
- },
32356
- {
32357
- "description": "Slot for the input element. If not provided, the input field will be rendered.",
32358
- "name": "input",
32359
- "inheritedFrom": {
32360
- "name": "Input",
32361
- "module": "src/components/input/input.component.ts"
32362
- }
32363
- },
32364
- {
32365
- "description": "Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.",
32366
- "name": "input-leading-icon",
32367
- "inheritedFrom": {
32368
- "name": "Input",
32369
- "module": "src/components/input/input.component.ts"
32370
- }
32371
- },
32372
- {
32373
- "description": "Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.",
32374
- "name": "input-prefix-text",
32375
- "inheritedFrom": {
32376
- "name": "Input",
32377
- "module": "src/components/input/input.component.ts"
32378
- }
32379
- },
32380
- {
32381
- "description": "Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.",
32382
- "name": "trailing-button",
32383
- "inheritedFrom": {
32384
- "name": "Input",
32385
- "module": "src/components/input/input.component.ts"
32386
- }
32387
- }
32388
- ]
32611
+ "jsDoc": "/**\n * `mdc-password` is a component that allows users to input their password.\n * It extends the `mdc-input` component and provides additional features specific to password fields.\n * It contains:\n * - `label` field - describe the password field.\n * - `password` field - contains the value\n * - `help-text` or `validation-message` - displayed below the password field.\n * - `help-text-type` - type of the help text, can be 'default', 'error', 'warning', 'success', 'priority'.\n * - `show-hide-button-aria-label` - aria label for the trailing show/hide button.\n * - all the attributes of the native password field.\n *\n * @tagname mdc-password\n *\n * @event input - (React: onInput) This event is dispatched when the value of the password field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the password field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the password receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the password loses focus.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n * @slot input - Slot for the input element. If not provided, the input field will be rendered.\n * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.\n * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.\n * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.\n *\n * @csspart input-container - The container that wraps the input field, leading icon, prefix text, and trailing button.\n * @csspart input-section - The container that wraps the input field and prefix text.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element.\n * @csspart label - The label element.\n * @csspart helper-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element.\n * @csspart toggletip - The toggletip icon button element.\n * @csspart toggletip-text - The toggletip text element.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n *\n */",
32612
+ "customElement": true
32389
32613
  }
32390
32614
  ],
32391
32615
  "exports": [
@@ -34220,48 +34444,84 @@
34220
34444
  "name": "Progressbar",
34221
34445
  "cssProperties": [
34222
34446
  {
34223
- "description": "Background color of the remaining progressbar portion.",
34224
- "name": "--mdc-progressbar-background-color"
34447
+ "description": "Font size for the label text.",
34448
+ "name": "--mdc-label-font-size",
34449
+ "inheritedFrom": {
34450
+ "name": "FormfieldWrapper",
34451
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34452
+ }
34225
34453
  },
34226
34454
  {
34227
- "description": "Background color of the elapsed progressbar portion.",
34228
- "name": "--mdc-progressbar-active-background-color"
34455
+ "description": "Font weight for the label text.",
34456
+ "name": "--mdc-label-font-weight",
34457
+ "inheritedFrom": {
34458
+ "name": "FormfieldWrapper",
34459
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34460
+ }
34229
34461
  },
34230
34462
  {
34231
- "description": "Background color of the progressbar when in success state.",
34232
- "name": "--mdc-progressbar-success-color"
34463
+ "description": "Line height for the label text.",
34464
+ "name": "--mdc-label-line-height",
34465
+ "inheritedFrom": {
34466
+ "name": "FormfieldWrapper",
34467
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34468
+ }
34233
34469
  },
34234
34470
  {
34235
- "description": "Background color of the progressbar when in error state.",
34236
- "name": "--mdc-progressbar-error-color"
34471
+ "description": "Color for the label text.",
34472
+ "name": "--mdc-label-color",
34473
+ "inheritedFrom": {
34474
+ "name": "FormfieldWrapper",
34475
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34476
+ }
34237
34477
  },
34238
34478
  {
34239
- "description": "The height of the progressbar.",
34240
- "name": "--mdc-progressbar-height"
34479
+ "description": "Font size for the help text.",
34480
+ "name": "--mdc-help-text-font-size",
34481
+ "inheritedFrom": {
34482
+ "name": "FormfieldWrapper",
34483
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34484
+ }
34241
34485
  },
34242
34486
  {
34243
- "description": "The border radius of the progressbar.",
34244
- "name": "--mdc-progressbar-border-radius"
34487
+ "description": "Font weight for the help text.",
34488
+ "name": "--mdc-help-text-font-weight",
34489
+ "inheritedFrom": {
34490
+ "name": "FormfieldWrapper",
34491
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34492
+ }
34493
+ },
34494
+ {
34495
+ "description": "Line height for the help text.",
34496
+ "name": "--mdc-help-text-line-height",
34497
+ "inheritedFrom": {
34498
+ "name": "FormfieldWrapper",
34499
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34500
+ }
34245
34501
  },
34246
34502
  {
34247
- "description": "Color of the progressbar label text.",
34248
- "name": "--mdc-progressbar-label-color"
34503
+ "description": "Color for the help text.",
34504
+ "name": "--mdc-help-text-color",
34505
+ "inheritedFrom": {
34506
+ "name": "FormfieldWrapper",
34507
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34508
+ }
34249
34509
  },
34250
34510
  {
34251
- "description": "Line height of the label text.",
34252
- "name": "--mdc-progressbar-label-line-height"
34511
+ "description": "Background color of the remaining progressbar portion.",
34512
+ "name": "--mdc-progressbar-background-color"
34253
34513
  },
34254
34514
  {
34255
- "description": "Font size of the label text.",
34256
- "name": "--mdc-progressbar-label-font-size"
34515
+ "description": "Background color of the elapsed progressbar portion.",
34516
+ "name": "--mdc-progressbar-progress-background-color"
34257
34517
  },
34258
34518
  {
34259
- "description": "Font weight of the label text.",
34260
- "name": "--mdc-progressbar-label-font-weight"
34519
+ "description": "The height of the progressbar.",
34520
+ "name": "--mdc-progressbar-height"
34261
34521
  },
34262
34522
  {
34263
- "description": "Color of the help text.",
34264
- "name": "--mdc-progressbar-help-text-color"
34523
+ "description": "The border radius of the progressbar.",
34524
+ "name": "--mdc-progressbar-border-radius"
34265
34525
  }
34266
34526
  ],
34267
34527
  "cssParts": [
@@ -34282,76 +34542,82 @@
34282
34542
  }
34283
34543
  },
34284
34544
  {
34285
- "description": "The info icon button element that is displayed next to the label when the `toggletip-text` property is set.",
34286
- "name": "info-icon-btn",
34545
+ "description": "The helper/validation text element.",
34546
+ "name": "help-text",
34287
34547
  "inheritedFrom": {
34288
34548
  "name": "FormfieldWrapper",
34289
34549
  "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34290
34550
  }
34291
34551
  },
34292
34552
  {
34293
- "description": "The helper/validation text element.",
34294
- "name": "help-text",
34553
+ "description": "The container for the helper/validation icon and text elements.",
34554
+ "name": "help-text-container",
34295
34555
  "inheritedFrom": {
34296
34556
  "name": "FormfieldWrapper",
34297
34557
  "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34298
34558
  }
34299
34559
  },
34300
34560
  {
34301
- "description": "The helper/validation icon element that is displayed next to the helper/validation text.",
34302
- "name": "helper-icon",
34561
+ "description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
34562
+ "name": "required-indicator",
34303
34563
  "inheritedFrom": {
34304
34564
  "name": "FormfieldWrapper",
34305
34565
  "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34306
34566
  }
34307
34567
  },
34308
34568
  {
34309
- "description": "The container for the helper/validation icon and text elements.",
34310
- "name": "help-text-container",
34569
+ "description": "The info icon button element that is displayed next to the label when the `toggletip-text` property is set.",
34570
+ "name": "info-icon-btn",
34311
34571
  "inheritedFrom": {
34312
34572
  "name": "FormfieldWrapper",
34313
34573
  "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34314
34574
  }
34315
34575
  },
34316
34576
  {
34317
- "description": "The gap between the label and the progressbar.",
34318
- "name": "gap"
34319
- },
34320
- {
34321
- "description": "The container of the label in inline variant.",
34322
- "name": "inline-label-container"
34323
- },
34324
- {
34325
- "description": "The container of the label in inline variant.",
34326
- "name": "label-container"
34327
- },
34328
- {
34329
- "description": "The container of the label in inline variant.",
34330
- "name": "percentage"
34577
+ "description": "The toggletip element that is displayed when the info icon button is clicked.",
34578
+ "name": "label-toggletip",
34579
+ "inheritedFrom": {
34580
+ "name": "FormfieldWrapper",
34581
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34582
+ }
34331
34583
  },
34332
34584
  {
34333
- "description": "The container of the label in inline variant.",
34334
- "name": "progress-bar"
34335
- },
34585
+ "description": "The helper/validation icon element that is displayed next to the helper/validation text.",
34586
+ "name": "helper-icon",
34587
+ "inheritedFrom": {
34588
+ "name": "FormfieldWrapper",
34589
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34590
+ }
34591
+ }
34592
+ ],
34593
+ "slots": [
34336
34594
  {
34337
- "description": "The container of the label in inline variant.",
34338
- "name": "progress-container"
34595
+ "description": "Slot for the label element. If not provided, the `label` property will be used to render the label.",
34596
+ "name": "label",
34597
+ "inheritedFrom": {
34598
+ "name": "FormfieldWrapper",
34599
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34600
+ }
34339
34601
  },
34340
34602
  {
34341
- "description": "The container of the remaining progressbar portion.",
34342
- "name": "remaining"
34603
+ "description": "Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.",
34604
+ "name": "help-icon",
34605
+ "inheritedFrom": {
34606
+ "name": "FormfieldWrapper",
34607
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34608
+ }
34343
34609
  },
34344
34610
  {
34345
- "description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
34346
- "name": "required-indicator",
34611
+ "description": "Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.",
34612
+ "name": "toggletip",
34347
34613
  "inheritedFrom": {
34348
34614
  "name": "FormfieldWrapper",
34349
34615
  "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34350
34616
  }
34351
34617
  },
34352
34618
  {
34353
- "description": "The toggletip element that is displayed when the info icon button is clicked.",
34354
- "name": "label-toggletip",
34619
+ "description": "Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.",
34620
+ "name": "help-text",
34355
34621
  "inheritedFrom": {
34356
34622
  "name": "FormfieldWrapper",
34357
34623
  "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
@@ -34840,42 +35106,8 @@
34840
35106
  "module": "/src/components/formfieldwrapper"
34841
35107
  },
34842
35108
  "tagName": "mdc-progressbar",
34843
- "jsDoc": "/**\n * mdc-progressbar component visually represents a progress indicator, typically used to show\n * the completion state of an ongoing process (e.g., loading, file upload, etc.).\n * It contains an optional label and an optional helper text.\n *\n * - It supports mainly two types: Default and Inline\n * - It supports three validation variants: Default, Success and Error.\n *\n * This component is created by extending FormfieldWrapper.\n *\n * @tagname mdc-progressbar\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-progressbar-background-color - Background color of the remaining progressbar portion.\n * @cssproperty --mdc-progressbar-active-background-color - Background color of the elapsed progressbar portion.\n * @cssproperty --mdc-progressbar-success-color - Background color of the progressbar when in success state.\n * @cssproperty --mdc-progressbar-error-color - Background color of the progressbar when in error state.\n * @cssproperty --mdc-progressbar-height - The height of the progressbar.\n * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.\n * @cssproperty --mdc-progressbar-label-color - Color of the progressbar label text.\n * @cssproperty --mdc-progressbar-label-line-height - Line height of the label text.\n * @cssproperty --mdc-progressbar-label-font-size - Font size of the label text.\n * @cssproperty --mdc-progressbar-label-font-weight - Font weight of the label text.\n * @cssproperty --mdc-progressbar-help-text-color - Color of the help text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart gap - The gap between the label and the progressbar.\n * @csspart inline-label-container - The container of the label in inline variant.\n * @csspart label-container - The container of the label in inline variant.\n * @csspart percentage - The container of the label in inline variant.\n * @csspart progress-bar - The container of the label in inline variant.\n * @csspart progress-container - The container of the label in inline variant.\n * @csspart remaining - The container of the remaining progressbar portion.\n */",
34844
- "customElement": true,
34845
- "slots": [
34846
- {
34847
- "description": "Slot for the label element. If not provided, the `label` property will be used to render the label.",
34848
- "name": "label",
34849
- "inheritedFrom": {
34850
- "name": "FormfieldWrapper",
34851
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34852
- }
34853
- },
34854
- {
34855
- "description": "Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.",
34856
- "name": "toggletip",
34857
- "inheritedFrom": {
34858
- "name": "FormfieldWrapper",
34859
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34860
- }
34861
- },
34862
- {
34863
- "description": "Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.",
34864
- "name": "help-icon",
34865
- "inheritedFrom": {
34866
- "name": "FormfieldWrapper",
34867
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34868
- }
34869
- },
34870
- {
34871
- "description": "Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.",
34872
- "name": "help-text",
34873
- "inheritedFrom": {
34874
- "name": "FormfieldWrapper",
34875
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34876
- }
34877
- }
34878
- ]
35109
+ "jsDoc": "/**\n * mdc-progressbar component visually represents a progress indicator, typically used to show\n * the completion state of an ongoing process (e.g., loading, file upload, etc.).\n * It contains an optional label and an optional helper text.\n *\n * - It supports mainly two types: Default and Inline\n * - It supports three validation variants: Default, Success and Error.\n *\n * This component is created by extending FormfieldWrapper.\n *\n * @tagname mdc-progressbar\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart help-text - The helper/validation text element.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-progressbar-background-color - Background color of the remaining progressbar portion.\n * @cssproperty --mdc-progressbar-progress-background-color - Background color of the elapsed progressbar portion.\n * @cssproperty --mdc-progressbar-height - The height of the progressbar.\n * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.\n */",
35110
+ "customElement": true
34879
35111
  }
34880
35112
  ],
34881
35113
  "exports": [
@@ -34919,88 +35151,96 @@
34919
35151
  "name": "--mdc-progress-error-color"
34920
35152
  },
34921
35153
  {
34922
- "description": "Background color of the remaining progressbar portion.",
34923
- "name": "--mdc-progressbar-background-color",
35154
+ "description": "Font size for the label text.",
35155
+ "name": "--mdc-label-font-size",
34924
35156
  "inheritedFrom": {
34925
- "name": "Progressbar",
34926
- "module": "src/components/progressbar/progressbar.component.ts"
35157
+ "name": "FormfieldWrapper",
35158
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34927
35159
  }
34928
35160
  },
34929
35161
  {
34930
- "description": "Background color of the elapsed progressbar portion.",
34931
- "name": "--mdc-progressbar-active-background-color",
35162
+ "description": "Font weight for the label text.",
35163
+ "name": "--mdc-label-font-weight",
34932
35164
  "inheritedFrom": {
34933
- "name": "Progressbar",
34934
- "module": "src/components/progressbar/progressbar.component.ts"
35165
+ "name": "FormfieldWrapper",
35166
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34935
35167
  }
34936
35168
  },
34937
35169
  {
34938
- "description": "Background color of the progressbar when in success state.",
34939
- "name": "--mdc-progressbar-success-color",
35170
+ "description": "Line height for the label text.",
35171
+ "name": "--mdc-label-line-height",
34940
35172
  "inheritedFrom": {
34941
- "name": "Progressbar",
34942
- "module": "src/components/progressbar/progressbar.component.ts"
35173
+ "name": "FormfieldWrapper",
35174
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34943
35175
  }
34944
35176
  },
34945
35177
  {
34946
- "description": "Background color of the progressbar when in error state.",
34947
- "name": "--mdc-progressbar-error-color",
35178
+ "description": "Color for the label text.",
35179
+ "name": "--mdc-label-color",
34948
35180
  "inheritedFrom": {
34949
- "name": "Progressbar",
34950
- "module": "src/components/progressbar/progressbar.component.ts"
35181
+ "name": "FormfieldWrapper",
35182
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34951
35183
  }
34952
35184
  },
34953
35185
  {
34954
- "description": "The height of the progressbar.",
34955
- "name": "--mdc-progressbar-height",
35186
+ "description": "Font size for the help text.",
35187
+ "name": "--mdc-help-text-font-size",
34956
35188
  "inheritedFrom": {
34957
- "name": "Progressbar",
34958
- "module": "src/components/progressbar/progressbar.component.ts"
35189
+ "name": "FormfieldWrapper",
35190
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34959
35191
  }
34960
35192
  },
34961
35193
  {
34962
- "description": "The border radius of the progressbar.",
34963
- "name": "--mdc-progressbar-border-radius",
35194
+ "description": "Font weight for the help text.",
35195
+ "name": "--mdc-help-text-font-weight",
34964
35196
  "inheritedFrom": {
34965
- "name": "Progressbar",
34966
- "module": "src/components/progressbar/progressbar.component.ts"
35197
+ "name": "FormfieldWrapper",
35198
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34967
35199
  }
34968
35200
  },
34969
35201
  {
34970
- "description": "Color of the progressbar label text.",
34971
- "name": "--mdc-progressbar-label-color",
35202
+ "description": "Line height for the help text.",
35203
+ "name": "--mdc-help-text-line-height",
34972
35204
  "inheritedFrom": {
34973
- "name": "Progressbar",
34974
- "module": "src/components/progressbar/progressbar.component.ts"
35205
+ "name": "FormfieldWrapper",
35206
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
35207
+ }
35208
+ },
35209
+ {
35210
+ "description": "Color for the help text.",
35211
+ "name": "--mdc-help-text-color",
35212
+ "inheritedFrom": {
35213
+ "name": "FormfieldWrapper",
35214
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34975
35215
  }
34976
35216
  },
34977
35217
  {
34978
- "description": "Line height of the label text.",
34979
- "name": "--mdc-progressbar-label-line-height",
35218
+ "description": "Background color of the remaining progressbar portion.",
35219
+ "name": "--mdc-progressbar-background-color",
34980
35220
  "inheritedFrom": {
34981
35221
  "name": "Progressbar",
34982
35222
  "module": "src/components/progressbar/progressbar.component.ts"
34983
35223
  }
34984
35224
  },
34985
35225
  {
34986
- "description": "Font size of the label text.",
34987
- "name": "--mdc-progressbar-label-font-size",
35226
+ "description": "Background color of the elapsed progressbar portion.",
35227
+ "name": "--mdc-progressbar-progress-background-color",
34988
35228
  "inheritedFrom": {
34989
35229
  "name": "Progressbar",
34990
35230
  "module": "src/components/progressbar/progressbar.component.ts"
34991
35231
  }
34992
35232
  },
34993
35233
  {
34994
- "description": "Font weight of the label text.",
34995
- "name": "--mdc-progressbar-label-font-weight",
35234
+ "description": "The height of the progressbar.",
35235
+ "name": "--mdc-progressbar-height",
34996
35236
  "inheritedFrom": {
34997
35237
  "name": "Progressbar",
34998
35238
  "module": "src/components/progressbar/progressbar.component.ts"
34999
35239
  }
35000
35240
  },
35001
35241
  {
35002
- "description": "Color of the help text.",
35003
- "name": "--mdc-progressbar-help-text-color",
35242
+ "description": "The border radius of the progressbar.",
35243
+ "name": "--mdc-progressbar-border-radius",
35004
35244
  "inheritedFrom": {
35005
35245
  "name": "Progressbar",
35006
35246
  "module": "src/components/progressbar/progressbar.component.ts"
@@ -35048,14 +35288,6 @@
35048
35288
  "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
35049
35289
  }
35050
35290
  },
35051
- {
35052
- "description": "The info icon button element that is displayed next to the label when the `toggletip-text` property is set.",
35053
- "name": "info-icon-btn",
35054
- "inheritedFrom": {
35055
- "name": "FormfieldWrapper",
35056
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
35057
- }
35058
- },
35059
35291
  {
35060
35292
  "description": "The helper/validation text element.",
35061
35293
  "name": "help-text",
@@ -35064,14 +35296,6 @@
35064
35296
  "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
35065
35297
  }
35066
35298
  },
35067
- {
35068
- "description": "The helper/validation icon element that is displayed next to the helper/validation text.",
35069
- "name": "helper-icon",
35070
- "inheritedFrom": {
35071
- "name": "FormfieldWrapper",
35072
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
35073
- }
35074
- },
35075
35299
  {
35076
35300
  "description": "The container for the helper/validation icon and text elements.",
35077
35301
  "name": "help-text-container",
@@ -35081,72 +35305,32 @@
35081
35305
  }
35082
35306
  },
35083
35307
  {
35084
- "description": "The gap between the label and the progressbar.",
35085
- "name": "gap",
35086
- "inheritedFrom": {
35087
- "name": "Progressbar",
35088
- "module": "src/components/progressbar/progressbar.component.ts"
35089
- }
35090
- },
35091
- {
35092
- "description": "The container of the label in inline variant.",
35093
- "name": "inline-label-container",
35094
- "inheritedFrom": {
35095
- "name": "Progressbar",
35096
- "module": "src/components/progressbar/progressbar.component.ts"
35097
- }
35098
- },
35099
- {
35100
- "description": "The container of the label in inline variant.",
35101
- "name": "label-container",
35102
- "inheritedFrom": {
35103
- "name": "Progressbar",
35104
- "module": "src/components/progressbar/progressbar.component.ts"
35105
- }
35106
- },
35107
- {
35108
- "description": "The container of the label in inline variant.",
35109
- "name": "percentage",
35110
- "inheritedFrom": {
35111
- "name": "Progressbar",
35112
- "module": "src/components/progressbar/progressbar.component.ts"
35113
- }
35114
- },
35115
- {
35116
- "description": "The container of the label in inline variant.",
35117
- "name": "progress-bar",
35118
- "inheritedFrom": {
35119
- "name": "Progressbar",
35120
- "module": "src/components/progressbar/progressbar.component.ts"
35121
- }
35122
- },
35123
- {
35124
- "description": "The container of the label in inline variant.",
35125
- "name": "progress-container",
35308
+ "description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
35309
+ "name": "required-indicator",
35126
35310
  "inheritedFrom": {
35127
- "name": "Progressbar",
35128
- "module": "src/components/progressbar/progressbar.component.ts"
35311
+ "name": "FormfieldWrapper",
35312
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
35129
35313
  }
35130
35314
  },
35131
35315
  {
35132
- "description": "The container of the remaining progressbar portion.",
35133
- "name": "remaining",
35316
+ "description": "The info icon button element that is displayed next to the label when the `toggletip-text` property is set.",
35317
+ "name": "info-icon-btn",
35134
35318
  "inheritedFrom": {
35135
- "name": "Progressbar",
35136
- "module": "src/components/progressbar/progressbar.component.ts"
35319
+ "name": "FormfieldWrapper",
35320
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
35137
35321
  }
35138
35322
  },
35139
35323
  {
35140
- "description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
35141
- "name": "required-indicator",
35324
+ "description": "The toggletip element that is displayed when the info icon button is clicked.",
35325
+ "name": "label-toggletip",
35142
35326
  "inheritedFrom": {
35143
35327
  "name": "FormfieldWrapper",
35144
35328
  "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
35145
35329
  }
35146
35330
  },
35147
35331
  {
35148
- "description": "The toggletip element that is displayed when the info icon button is clicked.",
35149
- "name": "label-toggletip",
35332
+ "description": "The helper/validation icon element that is displayed next to the helper/validation text.",
35333
+ "name": "helper-icon",
35150
35334
  "inheritedFrom": {
35151
35335
  "name": "FormfieldWrapper",
35152
35336
  "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
@@ -35696,16 +35880,16 @@
35696
35880
  }
35697
35881
  },
35698
35882
  {
35699
- "description": "Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.",
35700
- "name": "toggletip",
35883
+ "description": "Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.",
35884
+ "name": "help-icon",
35701
35885
  "inheritedFrom": {
35702
35886
  "name": "FormfieldWrapper",
35703
35887
  "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
35704
35888
  }
35705
35889
  },
35706
35890
  {
35707
- "description": "Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.",
35708
- "name": "help-icon",
35891
+ "description": "Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.",
35892
+ "name": "toggletip",
35709
35893
  "inheritedFrom": {
35710
35894
  "name": "FormfieldWrapper",
35711
35895
  "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
@@ -35773,6 +35957,70 @@
35773
35957
  {
35774
35958
  "description": "color of the radio button when inactive and disabled",
35775
35959
  "name": "--mdc-radio-control-inactive-disabled-background"
35960
+ },
35961
+ {
35962
+ "description": "Font size for the label text.",
35963
+ "name": "--mdc-label-font-size",
35964
+ "inheritedFrom": {
35965
+ "name": "FormfieldWrapper",
35966
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
35967
+ }
35968
+ },
35969
+ {
35970
+ "description": "Font weight for the label text.",
35971
+ "name": "--mdc-label-font-weight",
35972
+ "inheritedFrom": {
35973
+ "name": "FormfieldWrapper",
35974
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
35975
+ }
35976
+ },
35977
+ {
35978
+ "description": "Line height for the label text.",
35979
+ "name": "--mdc-label-line-height",
35980
+ "inheritedFrom": {
35981
+ "name": "FormfieldWrapper",
35982
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
35983
+ }
35984
+ },
35985
+ {
35986
+ "description": "Color for the label text.",
35987
+ "name": "--mdc-label-color",
35988
+ "inheritedFrom": {
35989
+ "name": "FormfieldWrapper",
35990
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
35991
+ }
35992
+ },
35993
+ {
35994
+ "description": "Font size for the help text.",
35995
+ "name": "--mdc-help-text-font-size",
35996
+ "inheritedFrom": {
35997
+ "name": "FormfieldWrapper",
35998
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
35999
+ }
36000
+ },
36001
+ {
36002
+ "description": "Font weight for the help text.",
36003
+ "name": "--mdc-help-text-font-weight",
36004
+ "inheritedFrom": {
36005
+ "name": "FormfieldWrapper",
36006
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
36007
+ }
36008
+ },
36009
+ {
36010
+ "description": "Line height for the help text.",
36011
+ "name": "--mdc-help-text-line-height",
36012
+ "inheritedFrom": {
36013
+ "name": "FormfieldWrapper",
36014
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
36015
+ }
36016
+ },
36017
+ {
36018
+ "description": "Color for the help text.",
36019
+ "name": "--mdc-help-text-color",
36020
+ "inheritedFrom": {
36021
+ "name": "FormfieldWrapper",
36022
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
36023
+ }
35776
36024
  }
35777
36025
  ],
35778
36026
  "cssParts": [
@@ -36638,6 +36886,70 @@
36638
36886
  {
36639
36887
  "description": "color of the description text",
36640
36888
  "name": "--mdc-radiogroup-description-text-normal"
36889
+ },
36890
+ {
36891
+ "description": "Font size for the label text.",
36892
+ "name": "--mdc-label-font-size",
36893
+ "inheritedFrom": {
36894
+ "name": "FormfieldWrapper",
36895
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
36896
+ }
36897
+ },
36898
+ {
36899
+ "description": "Font weight for the label text.",
36900
+ "name": "--mdc-label-font-weight",
36901
+ "inheritedFrom": {
36902
+ "name": "FormfieldWrapper",
36903
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
36904
+ }
36905
+ },
36906
+ {
36907
+ "description": "Line height for the label text.",
36908
+ "name": "--mdc-label-line-height",
36909
+ "inheritedFrom": {
36910
+ "name": "FormfieldWrapper",
36911
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
36912
+ }
36913
+ },
36914
+ {
36915
+ "description": "Color for the label text.",
36916
+ "name": "--mdc-label-color",
36917
+ "inheritedFrom": {
36918
+ "name": "FormfieldWrapper",
36919
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
36920
+ }
36921
+ },
36922
+ {
36923
+ "description": "Font size for the help text.",
36924
+ "name": "--mdc-help-text-font-size",
36925
+ "inheritedFrom": {
36926
+ "name": "FormfieldWrapper",
36927
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
36928
+ }
36929
+ },
36930
+ {
36931
+ "description": "Font weight for the help text.",
36932
+ "name": "--mdc-help-text-font-weight",
36933
+ "inheritedFrom": {
36934
+ "name": "FormfieldWrapper",
36935
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
36936
+ }
36937
+ },
36938
+ {
36939
+ "description": "Line height for the help text.",
36940
+ "name": "--mdc-help-text-line-height",
36941
+ "inheritedFrom": {
36942
+ "name": "FormfieldWrapper",
36943
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
36944
+ }
36945
+ },
36946
+ {
36947
+ "description": "Color for the help text.",
36948
+ "name": "--mdc-help-text-color",
36949
+ "inheritedFrom": {
36950
+ "name": "FormfieldWrapper",
36951
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
36952
+ }
36641
36953
  }
36642
36954
  ],
36643
36955
  "members": [
@@ -37391,63 +37703,137 @@
37391
37703
  "kind": "class",
37392
37704
  "description": "`mdc-searchfield` component is used as an input field for search functionality.\n\nIt supports `mdc-inputchip` as filters.\n\nThis component is built by extending the `mdc-input` component.",
37393
37705
  "name": "Searchfield",
37394
- "cssParts": [
37706
+ "cssProperties": [
37395
37707
  {
37396
- "description": "The label element.",
37397
- "name": "label",
37708
+ "description": "Font size for the label text.",
37709
+ "name": "--mdc-label-font-size",
37398
37710
  "inheritedFrom": {
37399
37711
  "name": "FormfieldWrapper",
37400
37712
  "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
37401
37713
  }
37402
37714
  },
37403
37715
  {
37404
- "description": "The container for the label and required indicator elements.",
37405
- "name": "label-text",
37716
+ "description": "Font weight for the label text.",
37717
+ "name": "--mdc-label-font-weight",
37406
37718
  "inheritedFrom": {
37407
37719
  "name": "FormfieldWrapper",
37408
37720
  "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
37409
37721
  }
37410
37722
  },
37411
37723
  {
37412
- "description": "The leading icon element that is displayed before the input field.",
37413
- "name": "leading-icon",
37724
+ "description": "Line height for the label text.",
37725
+ "name": "--mdc-label-line-height",
37726
+ "inheritedFrom": {
37727
+ "name": "FormfieldWrapper",
37728
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
37729
+ }
37730
+ },
37731
+ {
37732
+ "description": "Color for the label text.",
37733
+ "name": "--mdc-label-color",
37734
+ "inheritedFrom": {
37735
+ "name": "FormfieldWrapper",
37736
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
37737
+ }
37738
+ },
37739
+ {
37740
+ "description": "Font size for the help text.",
37741
+ "name": "--mdc-help-text-font-size",
37742
+ "inheritedFrom": {
37743
+ "name": "FormfieldWrapper",
37744
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
37745
+ }
37746
+ },
37747
+ {
37748
+ "description": "Font weight for the help text.",
37749
+ "name": "--mdc-help-text-font-weight",
37750
+ "inheritedFrom": {
37751
+ "name": "FormfieldWrapper",
37752
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
37753
+ }
37754
+ },
37755
+ {
37756
+ "description": "Line height for the help text.",
37757
+ "name": "--mdc-help-text-line-height",
37758
+ "inheritedFrom": {
37759
+ "name": "FormfieldWrapper",
37760
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
37761
+ }
37762
+ },
37763
+ {
37764
+ "description": "Color for the help text.",
37765
+ "name": "--mdc-help-text-color",
37766
+ "inheritedFrom": {
37767
+ "name": "FormfieldWrapper",
37768
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
37769
+ }
37770
+ },
37771
+ {
37772
+ "description": "Text color for the input field",
37773
+ "name": "--mdc-input-text-color",
37414
37774
  "inheritedFrom": {
37415
37775
  "name": "Input",
37416
37776
  "module": "src/components/input/input.component.ts"
37417
37777
  }
37418
37778
  },
37419
37779
  {
37420
- "description": "The container for the input field, leading icon, prefix text, and trailing button elements.",
37421
- "name": "input-container",
37780
+ "description": "Border color for the input container",
37781
+ "name": "--mdc-input-border-color",
37422
37782
  "inheritedFrom": {
37423
37783
  "name": "Input",
37424
37784
  "module": "src/components/input/input.component.ts"
37425
37785
  }
37426
37786
  },
37427
37787
  {
37428
- "description": "The container for the input field, leading icon, and prefix text elements.",
37429
- "name": "input-section",
37788
+ "description": "Background color for the input field",
37789
+ "name": "--mdc-input-background-color",
37430
37790
  "inheritedFrom": {
37431
37791
  "name": "Input",
37432
37792
  "module": "src/components/input/input.component.ts"
37433
37793
  }
37434
37794
  },
37435
37795
  {
37436
- "description": "The input field element.",
37437
- "name": "input-text",
37796
+ "description": "Text color for the help text",
37797
+ "name": "--mdc-input-support-text-color",
37438
37798
  "inheritedFrom": {
37439
37799
  "name": "Input",
37440
37800
  "module": "src/components/input/input.component.ts"
37441
37801
  }
37442
37802
  },
37443
37803
  {
37444
- "description": "The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.",
37445
- "name": "trailing-button",
37804
+ "description": "Text color for the selected text",
37805
+ "name": "--mdc-input-selection-text-color",
37446
37806
  "inheritedFrom": {
37447
37807
  "name": "Input",
37448
37808
  "module": "src/components/input/input.component.ts"
37449
37809
  }
37450
37810
  },
37811
+ {
37812
+ "description": "Background color for the selected text",
37813
+ "name": "--mdc-input-selection-background-color",
37814
+ "inheritedFrom": {
37815
+ "name": "Input",
37816
+ "module": "src/components/input/input.component.ts"
37817
+ }
37818
+ }
37819
+ ],
37820
+ "cssParts": [
37821
+ {
37822
+ "description": "The label element.",
37823
+ "name": "label",
37824
+ "inheritedFrom": {
37825
+ "name": "FormfieldWrapper",
37826
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
37827
+ }
37828
+ },
37829
+ {
37830
+ "description": "The container for the label and required indicator elements.",
37831
+ "name": "label-text",
37832
+ "inheritedFrom": {
37833
+ "name": "FormfieldWrapper",
37834
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
37835
+ }
37836
+ },
37451
37837
  {
37452
37838
  "description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
37453
37839
  "name": "required-indicator",
@@ -37496,6 +37882,14 @@
37496
37882
  "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
37497
37883
  }
37498
37884
  },
37885
+ {
37886
+ "description": "The leading icon element that is displayed before the input field.",
37887
+ "name": "leading-icon",
37888
+ "inheritedFrom": {
37889
+ "name": "Input",
37890
+ "module": "src/components/input/input.component.ts"
37891
+ }
37892
+ },
37499
37893
  {
37500
37894
  "description": "The prefix text element that is displayed before the input field.",
37501
37895
  "name": "prefix-text",
@@ -37503,6 +37897,38 @@
37503
37897
  "name": "Input",
37504
37898
  "module": "src/components/input/input.component.ts"
37505
37899
  }
37900
+ },
37901
+ {
37902
+ "description": "The container for the input field, leading icon, prefix text, and trailing button elements.",
37903
+ "name": "input-container",
37904
+ "inheritedFrom": {
37905
+ "name": "Input",
37906
+ "module": "src/components/input/input.component.ts"
37907
+ }
37908
+ },
37909
+ {
37910
+ "description": "The container for the input field, leading icon, and prefix text elements.",
37911
+ "name": "input-section",
37912
+ "inheritedFrom": {
37913
+ "name": "Input",
37914
+ "module": "src/components/input/input.component.ts"
37915
+ }
37916
+ },
37917
+ {
37918
+ "description": "The input field element.",
37919
+ "name": "input-text",
37920
+ "inheritedFrom": {
37921
+ "name": "Input",
37922
+ "module": "src/components/input/input.component.ts"
37923
+ }
37924
+ },
37925
+ {
37926
+ "description": "The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.",
37927
+ "name": "trailing-button",
37928
+ "inheritedFrom": {
37929
+ "name": "Input",
37930
+ "module": "src/components/input/input.component.ts"
37931
+ }
37506
37932
  }
37507
37933
  ],
37508
37934
  "slots": [
@@ -38346,7 +38772,7 @@
38346
38772
  "module": "/src/components/input/input.component"
38347
38773
  },
38348
38774
  "tagName": "mdc-searchfield",
38349
- "jsDoc": "/**\n * `mdc-searchfield` component is used as an input field for search functionality.\n *\n * It supports `mdc-inputchip` as filters.\n *\n * This component is built by extending the `mdc-input` component.\n *\n * @tagname mdc-searchfield\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n *\n * @slot filters - Slot for input chips\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart leading-icon - The leading icon element that is displayed before the input field.\n * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.\n * @csspart input-section - The container for the input field, leading icon, and prefix text elements.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.\n */",
38775
+ "jsDoc": "/**\n * `mdc-searchfield` component is used as an input field for search functionality.\n *\n * It supports `mdc-inputchip` as filters.\n *\n * This component is built by extending the `mdc-input` component.\n *\n * @tagname mdc-searchfield\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n *\n * @slot filters - Slot for input chips\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n * @slot input - Slot for the input element. If not provided, the input field will be rendered.\n * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.\n * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.\n * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart leading-icon - The leading icon element that is displayed before the input field.\n * @csspart prefix-text - The prefix text element that is displayed before the input field.\n * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.\n * @csspart input-section - The container for the input field, leading icon, and prefix text elements.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.\n */",
38350
38776
  "customElement": true,
38351
38777
  "attributes": [
38352
38778
  {
@@ -38711,136 +39137,6 @@
38711
39137
  "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
38712
39138
  }
38713
39139
  }
38714
- ],
38715
- "cssProperties": [
38716
- {
38717
- "description": "Border color for the input container when disabled",
38718
- "name": "--mdc-input-disabled-border-color",
38719
- "inheritedFrom": {
38720
- "name": "Input",
38721
- "module": "src/components/input/input.component.ts"
38722
- }
38723
- },
38724
- {
38725
- "description": "Text color for the input field when disabled",
38726
- "name": "--mdc-input-disabled-text-color",
38727
- "inheritedFrom": {
38728
- "name": "Input",
38729
- "module": "src/components/input/input.component.ts"
38730
- }
38731
- },
38732
- {
38733
- "description": "Background color for the input field when disabled",
38734
- "name": "--mdc-input-disabled-background-color",
38735
- "inheritedFrom": {
38736
- "name": "Input",
38737
- "module": "src/components/input/input.component.ts"
38738
- }
38739
- },
38740
- {
38741
- "description": "Border color for the input container",
38742
- "name": "--mdc-input-border-color",
38743
- "inheritedFrom": {
38744
- "name": "Input",
38745
- "module": "src/components/input/input.component.ts"
38746
- }
38747
- },
38748
- {
38749
- "description": "Text color for the input field",
38750
- "name": "--mdc-input-text-color",
38751
- "inheritedFrom": {
38752
- "name": "Input",
38753
- "module": "src/components/input/input.component.ts"
38754
- }
38755
- },
38756
- {
38757
- "description": "Background color for the input field",
38758
- "name": "--mdc-input-background-color",
38759
- "inheritedFrom": {
38760
- "name": "Input",
38761
- "module": "src/components/input/input.component.ts"
38762
- }
38763
- },
38764
- {
38765
- "description": "Background color for the selected text",
38766
- "name": "--mdc-input-selection-background-color",
38767
- "inheritedFrom": {
38768
- "name": "Input",
38769
- "module": "src/components/input/input.component.ts"
38770
- }
38771
- },
38772
- {
38773
- "description": "Text color for the selected text",
38774
- "name": "--mdc-input-selection-text-color",
38775
- "inheritedFrom": {
38776
- "name": "Input",
38777
- "module": "src/components/input/input.component.ts"
38778
- }
38779
- },
38780
- {
38781
- "description": "Text color for the help text",
38782
- "name": "--mdc-input-support-text-color",
38783
- "inheritedFrom": {
38784
- "name": "Input",
38785
- "module": "src/components/input/input.component.ts"
38786
- }
38787
- },
38788
- {
38789
- "description": "Background color for the input field when hovered",
38790
- "name": "--mdc-input-hover-background-color",
38791
- "inheritedFrom": {
38792
- "name": "Input",
38793
- "module": "src/components/input/input.component.ts"
38794
- }
38795
- },
38796
- {
38797
- "description": "Background color for the input field when focused",
38798
- "name": "--mdc-input-focused-background-color",
38799
- "inheritedFrom": {
38800
- "name": "Input",
38801
- "module": "src/components/input/input.component.ts"
38802
- }
38803
- },
38804
- {
38805
- "description": "Border color for the input container when focused",
38806
- "name": "--mdc-input-focused-border-color",
38807
- "inheritedFrom": {
38808
- "name": "Input",
38809
- "module": "src/components/input/input.component.ts"
38810
- }
38811
- },
38812
- {
38813
- "description": "Border color for the input container when error",
38814
- "name": "--mdc-input-error-border-color",
38815
- "inheritedFrom": {
38816
- "name": "Input",
38817
- "module": "src/components/input/input.component.ts"
38818
- }
38819
- },
38820
- {
38821
- "description": "Border color for the input container when warning",
38822
- "name": "--mdc-input-warning-border-color",
38823
- "inheritedFrom": {
38824
- "name": "Input",
38825
- "module": "src/components/input/input.component.ts"
38826
- }
38827
- },
38828
- {
38829
- "description": "Border color for the input container when success",
38830
- "name": "--mdc-input-success-border-color",
38831
- "inheritedFrom": {
38832
- "name": "Input",
38833
- "module": "src/components/input/input.component.ts"
38834
- }
38835
- },
38836
- {
38837
- "description": "Border color for the input container when primary",
38838
- "name": "--mdc-input-primary-border-color",
38839
- "inheritedFrom": {
38840
- "name": "Input",
38841
- "module": "src/components/input/input.component.ts"
38842
- }
38843
- }
38844
39140
  ]
38845
39141
  }
38846
39142
  ],
@@ -38865,52 +39161,80 @@
38865
39161
  "name": "Select",
38866
39162
  "cssProperties": [
38867
39163
  {
38868
- "description": "The background color of the combobox of select.",
38869
- "name": "--mdc-select-background-color"
38870
- },
38871
- {
38872
- "description": "The background color of the combobox of select when hovered.",
38873
- "name": "--mdc-select-background-color-hover"
39164
+ "description": "Font size for the label text.",
39165
+ "name": "--mdc-label-font-size",
39166
+ "inheritedFrom": {
39167
+ "name": "FormfieldWrapper",
39168
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
39169
+ }
38874
39170
  },
38875
39171
  {
38876
- "description": "The background color of the combobox of select when active.",
38877
- "name": "--mdc-select-background-color-active"
39172
+ "description": "Font weight for the label text.",
39173
+ "name": "--mdc-label-font-weight",
39174
+ "inheritedFrom": {
39175
+ "name": "FormfieldWrapper",
39176
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
39177
+ }
38878
39178
  },
38879
39179
  {
38880
- "description": "The background color of the combobox of select when disabled.",
38881
- "name": "--mdc-select-background-color-disabled"
39180
+ "description": "Line height for the label text.",
39181
+ "name": "--mdc-label-line-height",
39182
+ "inheritedFrom": {
39183
+ "name": "FormfieldWrapper",
39184
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
39185
+ }
38882
39186
  },
38883
39187
  {
38884
- "description": "The text color of the select.",
38885
- "name": "--mdc-select-text-color"
39188
+ "description": "Color for the label text.",
39189
+ "name": "--mdc-label-color",
39190
+ "inheritedFrom": {
39191
+ "name": "FormfieldWrapper",
39192
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
39193
+ }
38886
39194
  },
38887
39195
  {
38888
- "description": "The text color of the selected option in the select.",
38889
- "name": "--mdc-select-text-color-selected"
39196
+ "description": "Font size for the help text.",
39197
+ "name": "--mdc-help-text-font-size",
39198
+ "inheritedFrom": {
39199
+ "name": "FormfieldWrapper",
39200
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
39201
+ }
38890
39202
  },
38891
39203
  {
38892
- "description": "The text color of the select when disabled.",
38893
- "name": "--mdc-select-text-color-disabled"
39204
+ "description": "Font weight for the help text.",
39205
+ "name": "--mdc-help-text-font-weight",
39206
+ "inheritedFrom": {
39207
+ "name": "FormfieldWrapper",
39208
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
39209
+ }
38894
39210
  },
38895
39211
  {
38896
- "description": "The border color of the select.",
38897
- "name": "--mdc-select-border-color"
39212
+ "description": "Line height for the help text.",
39213
+ "name": "--mdc-help-text-line-height",
39214
+ "inheritedFrom": {
39215
+ "name": "FormfieldWrapper",
39216
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
39217
+ }
38898
39218
  },
38899
39219
  {
38900
- "description": "The border color of the select when disabled.",
38901
- "name": "--mdc-select-border-color-disabled"
39220
+ "description": "Color for the help text.",
39221
+ "name": "--mdc-help-text-color",
39222
+ "inheritedFrom": {
39223
+ "name": "FormfieldWrapper",
39224
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
39225
+ }
38902
39226
  },
38903
39227
  {
38904
- "description": "The border color of the select when in success state.",
38905
- "name": "--mdc-select-border-color-success"
39228
+ "description": "The background color of the combobox of select.",
39229
+ "name": "--mdc-select-background-color"
38906
39230
  },
38907
39231
  {
38908
- "description": "The border color of the select when in warning state.",
38909
- "name": "--mdc-select-border-color-warning"
39232
+ "description": "The text color of the select.",
39233
+ "name": "--mdc-select-text-color"
38910
39234
  },
38911
39235
  {
38912
- "description": "The border color of the select when in error state.",
38913
- "name": "--mdc-select-border-color-error"
39236
+ "description": "The border color of the select.",
39237
+ "name": "--mdc-select-border-color"
38914
39238
  },
38915
39239
  {
38916
39240
  "description": "The width of the select.",
@@ -38989,30 +39313,6 @@
38989
39313
  "name": "FormfieldWrapper",
38990
39314
  "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
38991
39315
  }
38992
- },
38993
- {
38994
- "description": "The container element that wraps the visual combobox and the dropdown icon.",
38995
- "name": "container"
38996
- },
38997
- {
38998
- "description": "The container element that wraps the visual combobox, dropdown icon, and the popover.",
38999
- "name": "base-container"
39000
- },
39001
- {
39002
- "description": "The icon element that is displayed next to the selected option in the dropdown list.",
39003
- "name": "selected-icon"
39004
- },
39005
- {
39006
- "description": "The text element that displays the selected option or placeholder in the visual combobox.",
39007
- "name": "base-text"
39008
- },
39009
- {
39010
- "description": "The container element that wraps the dropdown icon.",
39011
- "name": "icon-container"
39012
- },
39013
- {
39014
- "description": "The native hidden input element.",
39015
- "name": "native-input"
39016
39316
  }
39017
39317
  ],
39018
39318
  "slots": [
@@ -40062,7 +40362,7 @@
40062
40362
  "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
40063
40363
  },
40064
40364
  "tagName": "mdc-select",
40065
- "jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n * You can also set the `value` attribute on the `mdc-select` element to match the value of the desired option. The component will select the corresponding option automatically.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event input - (React: onInput) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n *\n * @cssproperty --mdc-select-background-color - The background color of the combobox of select.\n * @cssproperty --mdc-select-background-color-hover - The background color of the combobox of select when hovered.\n * @cssproperty --mdc-select-background-color-active - The background color of the combobox of select when active.\n * @cssproperty --mdc-select-background-color-disabled - The background color of the combobox of select when disabled.\n * @cssproperty --mdc-select-text-color - The text color of the select.\n * @cssproperty --mdc-select-text-color-selected - The text color of the selected option in the select.\n * @cssproperty --mdc-select-text-color-disabled - The text color of the select when disabled.\n * @cssproperty --mdc-select-border-color - The border color of the select.\n * @cssproperty --mdc-select-border-color-disabled - The border color of the select when disabled.\n * @cssproperty --mdc-select-border-color-success - The border color of the select when in success state.\n * @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.\n * @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.\n * @cssproperty --mdc-select-width - The width of the select.\n * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.\n * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart container - The container element that wraps the visual combobox and the dropdown icon.\n * @csspart base-container - The container element that wraps the visual combobox, dropdown icon, and the popover.\n * @csspart selected-icon - The icon element that is displayed next to the selected option in the dropdown list.\n * @csspart base-text - The text element that displays the selected option or placeholder in the visual combobox.\n * @csspart icon-container - The container element that wraps the dropdown icon.\n * @csspart native-input - The native hidden input element.\n */",
40365
+ "jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n * You can also set the `value` attribute on the `mdc-select` element to match the value of the desired option. The component will select the corresponding option automatically.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event input - (React: onInput) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-select-background-color - The background color of the combobox of select.\n * @cssproperty --mdc-select-text-color - The text color of the select.\n * @cssproperty --mdc-select-border-color - The border color of the select.\n * @cssproperty --mdc-select-width - The width of the select.\n * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.\n * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).\n */",
40066
40366
  "customElement": true
40067
40367
  }
40068
40368
  ],
@@ -41537,139 +41837,6 @@
41537
41837
  }
41538
41838
  ]
41539
41839
  },
41540
- {
41541
- "kind": "javascript-module",
41542
- "path": "components/staticchip/staticchip.component.js",
41543
- "declarations": [
41544
- {
41545
- "kind": "class",
41546
- "description": "mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.\n\nIt is recommended to keep the label text for the chip component concise and compact.\nFor best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.",
41547
- "name": "StaticChip",
41548
- "cssProperties": [
41549
- {
41550
- "description": "The color of the static chip.",
41551
- "name": "--mdc-chip-color"
41552
- },
41553
- {
41554
- "description": "The border color of the static chip.",
41555
- "name": "--mdc-chip-border-color"
41556
- },
41557
- {
41558
- "description": "The background color of the static chip.",
41559
- "name": "--mdc-chip-background-color"
41560
- }
41561
- ],
41562
- "cssParts": [
41563
- {
41564
- "description": "The label of the static chip.",
41565
- "name": "label"
41566
- }
41567
- ],
41568
- "members": [
41569
- {
41570
- "kind": "field",
41571
- "name": "color",
41572
- "type": {
41573
- "text": "ColorType"
41574
- },
41575
- "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
41576
- "default": "default",
41577
- "attribute": "color",
41578
- "reflects": true
41579
- },
41580
- {
41581
- "kind": "field",
41582
- "name": "label",
41583
- "type": {
41584
- "text": "string"
41585
- },
41586
- "default": "''",
41587
- "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
41588
- "attribute": "label"
41589
- },
41590
- {
41591
- "kind": "method",
41592
- "name": "renderIcon",
41593
- "privacy": "private",
41594
- "description": "Renders the icon element if available.",
41595
- "return": {
41596
- "type": {
41597
- "text": ""
41598
- }
41599
- }
41600
- },
41601
- {
41602
- "kind": "field",
41603
- "name": "iconName",
41604
- "type": {
41605
- "text": "IconNames | undefined"
41606
- },
41607
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
41608
- "attribute": "icon-name",
41609
- "inheritedFrom": {
41610
- "name": "IconNameMixin",
41611
- "module": "utils/mixins/IconNameMixin.js"
41612
- }
41613
- }
41614
- ],
41615
- "attributes": [
41616
- {
41617
- "name": "color",
41618
- "type": {
41619
- "text": "ColorType"
41620
- },
41621
- "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
41622
- "default": "default",
41623
- "fieldName": "color"
41624
- },
41625
- {
41626
- "name": "label",
41627
- "type": {
41628
- "text": "string"
41629
- },
41630
- "default": "''",
41631
- "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
41632
- "fieldName": "label"
41633
- },
41634
- {
41635
- "name": "icon-name",
41636
- "type": {
41637
- "text": "IconNames | undefined"
41638
- },
41639
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
41640
- "fieldName": "iconName",
41641
- "inheritedFrom": {
41642
- "name": "IconNameMixin",
41643
- "module": "src/utils/mixins/IconNameMixin.ts"
41644
- }
41645
- }
41646
- ],
41647
- "mixins": [
41648
- {
41649
- "name": "IconNameMixin",
41650
- "module": "/src/utils/mixins/IconNameMixin"
41651
- }
41652
- ],
41653
- "superclass": {
41654
- "name": "Component",
41655
- "module": "/src/models"
41656
- },
41657
- "tagName": "mdc-staticchip",
41658
- "jsDoc": "/**\n * mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.\n *\n * It is recommended to keep the label text for the chip component concise and compact.\n * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.\n *\n *\n * @tagname mdc-staticchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the static chip.\n * @cssproperty --mdc-chip-border-color - The border color of the static chip.\n * @cssproperty --mdc-chip-background-color - The background color of the static chip.\n *\n * @csspart label - The label of the static chip.\n */",
41659
- "customElement": true
41660
- }
41661
- ],
41662
- "exports": [
41663
- {
41664
- "kind": "js",
41665
- "name": "default",
41666
- "declaration": {
41667
- "name": "StaticChip",
41668
- "module": "components/staticchip/staticchip.component.js"
41669
- }
41670
- }
41671
- ]
41672
- },
41673
41840
  {
41674
41841
  "kind": "javascript-module",
41675
41842
  "path": "components/staticradio/staticradio.component.js",
@@ -42078,6 +42245,139 @@
42078
42245
  }
42079
42246
  ]
42080
42247
  },
42248
+ {
42249
+ "kind": "javascript-module",
42250
+ "path": "components/staticchip/staticchip.component.js",
42251
+ "declarations": [
42252
+ {
42253
+ "kind": "class",
42254
+ "description": "mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.\n\nIt is recommended to keep the label text for the chip component concise and compact.\nFor best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.",
42255
+ "name": "StaticChip",
42256
+ "cssProperties": [
42257
+ {
42258
+ "description": "The color of the static chip.",
42259
+ "name": "--mdc-chip-color"
42260
+ },
42261
+ {
42262
+ "description": "The border color of the static chip.",
42263
+ "name": "--mdc-chip-border-color"
42264
+ },
42265
+ {
42266
+ "description": "The background color of the static chip.",
42267
+ "name": "--mdc-chip-background-color"
42268
+ }
42269
+ ],
42270
+ "cssParts": [
42271
+ {
42272
+ "description": "The label of the static chip.",
42273
+ "name": "label"
42274
+ }
42275
+ ],
42276
+ "members": [
42277
+ {
42278
+ "kind": "field",
42279
+ "name": "color",
42280
+ "type": {
42281
+ "text": "ColorType"
42282
+ },
42283
+ "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
42284
+ "default": "default",
42285
+ "attribute": "color",
42286
+ "reflects": true
42287
+ },
42288
+ {
42289
+ "kind": "field",
42290
+ "name": "label",
42291
+ "type": {
42292
+ "text": "string"
42293
+ },
42294
+ "default": "''",
42295
+ "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
42296
+ "attribute": "label"
42297
+ },
42298
+ {
42299
+ "kind": "method",
42300
+ "name": "renderIcon",
42301
+ "privacy": "private",
42302
+ "description": "Renders the icon element if available.",
42303
+ "return": {
42304
+ "type": {
42305
+ "text": ""
42306
+ }
42307
+ }
42308
+ },
42309
+ {
42310
+ "kind": "field",
42311
+ "name": "iconName",
42312
+ "type": {
42313
+ "text": "IconNames | undefined"
42314
+ },
42315
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
42316
+ "attribute": "icon-name",
42317
+ "inheritedFrom": {
42318
+ "name": "IconNameMixin",
42319
+ "module": "utils/mixins/IconNameMixin.js"
42320
+ }
42321
+ }
42322
+ ],
42323
+ "attributes": [
42324
+ {
42325
+ "name": "color",
42326
+ "type": {
42327
+ "text": "ColorType"
42328
+ },
42329
+ "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
42330
+ "default": "default",
42331
+ "fieldName": "color"
42332
+ },
42333
+ {
42334
+ "name": "label",
42335
+ "type": {
42336
+ "text": "string"
42337
+ },
42338
+ "default": "''",
42339
+ "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
42340
+ "fieldName": "label"
42341
+ },
42342
+ {
42343
+ "name": "icon-name",
42344
+ "type": {
42345
+ "text": "IconNames | undefined"
42346
+ },
42347
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
42348
+ "fieldName": "iconName",
42349
+ "inheritedFrom": {
42350
+ "name": "IconNameMixin",
42351
+ "module": "src/utils/mixins/IconNameMixin.ts"
42352
+ }
42353
+ }
42354
+ ],
42355
+ "mixins": [
42356
+ {
42357
+ "name": "IconNameMixin",
42358
+ "module": "/src/utils/mixins/IconNameMixin"
42359
+ }
42360
+ ],
42361
+ "superclass": {
42362
+ "name": "Component",
42363
+ "module": "/src/models"
42364
+ },
42365
+ "tagName": "mdc-staticchip",
42366
+ "jsDoc": "/**\n * mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.\n *\n * It is recommended to keep the label text for the chip component concise and compact.\n * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.\n *\n *\n * @tagname mdc-staticchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the static chip.\n * @cssproperty --mdc-chip-border-color - The border color of the static chip.\n * @cssproperty --mdc-chip-background-color - The background color of the static chip.\n *\n * @csspart label - The label of the static chip.\n */",
42367
+ "customElement": true
42368
+ }
42369
+ ],
42370
+ "exports": [
42371
+ {
42372
+ "kind": "js",
42373
+ "name": "default",
42374
+ "declaration": {
42375
+ "name": "StaticChip",
42376
+ "module": "components/staticchip/staticchip.component.js"
42377
+ }
42378
+ }
42379
+ ]
42380
+ },
42081
42381
  {
42082
42382
  "kind": "javascript-module",
42083
42383
  "path": "components/stepper/stepper.component.js",
@@ -43671,60 +43971,96 @@
43671
43971
  "name": "Textarea",
43672
43972
  "cssProperties": [
43673
43973
  {
43674
- "description": "Border color for the textarea container when disabled",
43675
- "name": "--mdc-textarea-disabled-border-color"
43974
+ "description": "Font size for the label text.",
43975
+ "name": "--mdc-label-font-size",
43976
+ "inheritedFrom": {
43977
+ "name": "FormfieldWrapper",
43978
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
43979
+ }
43676
43980
  },
43677
43981
  {
43678
- "description": "Text color for the textarea field when disabled",
43679
- "name": "--mdc-textarea-disabled-text-color"
43982
+ "description": "Font weight for the label text.",
43983
+ "name": "--mdc-label-font-weight",
43984
+ "inheritedFrom": {
43985
+ "name": "FormfieldWrapper",
43986
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
43987
+ }
43680
43988
  },
43681
43989
  {
43682
- "description": "Background color for the textarea field when disabled",
43683
- "name": "--mdc-textarea-disabled-background-color"
43990
+ "description": "Line height for the label text.",
43991
+ "name": "--mdc-label-line-height",
43992
+ "inheritedFrom": {
43993
+ "name": "FormfieldWrapper",
43994
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
43995
+ }
43684
43996
  },
43685
43997
  {
43686
- "description": "Text color for the textarea field",
43687
- "name": "--mdc-textarea-text-color"
43998
+ "description": "Color for the label text.",
43999
+ "name": "--mdc-label-color",
44000
+ "inheritedFrom": {
44001
+ "name": "FormfieldWrapper",
44002
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
44003
+ }
43688
44004
  },
43689
44005
  {
43690
- "description": "Background color for the textarea field",
43691
- "name": "--mdc-textarea-background-color"
44006
+ "description": "Font size for the help text.",
44007
+ "name": "--mdc-help-text-font-size",
44008
+ "inheritedFrom": {
44009
+ "name": "FormfieldWrapper",
44010
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
44011
+ }
43692
44012
  },
43693
44013
  {
43694
- "description": "Border color for the textarea field",
43695
- "name": "--mdc-textarea-border-color"
44014
+ "description": "Font weight for the help text.",
44015
+ "name": "--mdc-help-text-font-weight",
44016
+ "inheritedFrom": {
44017
+ "name": "FormfieldWrapper",
44018
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
44019
+ }
43696
44020
  },
43697
44021
  {
43698
- "description": "Text color for the character counter",
43699
- "name": "--mdc-textarea-text-secondary-normal"
44022
+ "description": "Line height for the help text.",
44023
+ "name": "--mdc-help-text-line-height",
44024
+ "inheritedFrom": {
44025
+ "name": "FormfieldWrapper",
44026
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
44027
+ }
43700
44028
  },
43701
44029
  {
43702
- "description": "Border color for the error related help text",
43703
- "name": "--mdc-textarea-error-border-color"
44030
+ "description": "Color for the help text.",
44031
+ "name": "--mdc-help-text-color",
44032
+ "inheritedFrom": {
44033
+ "name": "FormfieldWrapper",
44034
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
44035
+ }
44036
+ },
44037
+ {
44038
+ "description": "Text color for the textarea field",
44039
+ "name": "--mdc-textarea-text-color"
43704
44040
  },
43705
44041
  {
43706
- "description": "Border color for the warning related help text",
43707
- "name": "--mdc-textarea-warning-border-color"
44042
+ "description": "Background color for the textarea field",
44043
+ "name": "--mdc-textarea-background-color"
43708
44044
  },
43709
44045
  {
43710
- "description": "Border color for the success related help text",
43711
- "name": "--mdc-textarea-success-border-color"
44046
+ "description": "Border color for the textarea field",
44047
+ "name": "--mdc-textarea-border-color"
43712
44048
  },
43713
44049
  {
43714
- "description": "Border color for the priority related help text",
43715
- "name": "--mdc-textarea-primary-border-color"
44050
+ "description": "Text color for the character counter",
44051
+ "name": "--mdc-textarea-text-secondary-normal"
43716
44052
  },
43717
44053
  {
43718
- "description": "Background color for the textarea container when hover",
43719
- "name": "--mdc-textarea-hover-background-color"
44054
+ "description": "Font size for the textarea field",
44055
+ "name": "--mdc-textarea-text-font-size"
43720
44056
  },
43721
44057
  {
43722
- "description": "Background color for the textarea container when focused",
43723
- "name": "--mdc-textarea-focused-background-color"
44058
+ "description": "Line height for the textarea field",
44059
+ "name": "--mdc-textarea-text-line-height"
43724
44060
  },
43725
44061
  {
43726
- "description": "Border color for the textarea container when focused",
43727
- "name": "--mdc-textarea-focused-border-color"
44062
+ "description": "Background color for the textarea container",
44063
+ "name": "--mdc-textarea-container-background-color"
43728
44064
  }
43729
44065
  ],
43730
44066
  "cssParts": [
@@ -43791,22 +44127,40 @@
43791
44127
  "name": "FormfieldWrapper",
43792
44128
  "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
43793
44129
  }
43794
- },
44130
+ }
44131
+ ],
44132
+ "slots": [
43795
44133
  {
43796
- "description": "The character counter element that is displayed when the `max-character-limit` property is set.",
43797
- "name": "character-counter"
44134
+ "description": "Slot for the label element. If not provided, the `label` property will be used to render the label.",
44135
+ "name": "label",
44136
+ "inheritedFrom": {
44137
+ "name": "FormfieldWrapper",
44138
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
44139
+ }
43798
44140
  },
43799
44141
  {
43800
- "description": "The container for the help text and character counter elements.",
43801
- "name": "textarea-footer"
44142
+ "description": "Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.",
44143
+ "name": "toggletip",
44144
+ "inheritedFrom": {
44145
+ "name": "FormfieldWrapper",
44146
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
44147
+ }
43802
44148
  },
43803
44149
  {
43804
- "description": "The textarea container",
43805
- "name": "textarea-container"
44150
+ "description": "Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.",
44151
+ "name": "help-icon",
44152
+ "inheritedFrom": {
44153
+ "name": "FormfieldWrapper",
44154
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
44155
+ }
43806
44156
  },
43807
44157
  {
43808
- "description": "The textarea field element.",
43809
- "name": "textarea"
44158
+ "description": "Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.",
44159
+ "name": "help-text",
44160
+ "inheritedFrom": {
44161
+ "name": "FormfieldWrapper",
44162
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
44163
+ }
43810
44164
  }
43811
44165
  ],
43812
44166
  "members": [
@@ -44701,42 +45055,8 @@
44701
45055
  "module": "/src/components/formfieldwrapper"
44702
45056
  },
44703
45057
  "tagName": "mdc-textarea",
44704
- "jsDoc": "/**\n * mdc-textarea component, which is used to get the multi-line text input from the user.\n * It contains:\n * - label: It is the title of the textarea field.\n * - required: A boolean attribute depicting that the textarea field is required.\n * - Textarea: It is the multi-line text input field.\n * - helper-text: It is the text that provides additional information about the textarea field.\n * - max-character-limit: It is the text that shows the character count of the textarea field.\n * - Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n * about the textarea field based on the validation state.\n * - limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n * This event exposes 3 properties:\n * - currentCharacterCount - the current number of characters in the textarea field,\n * - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n * - value - the current value of the textarea field,\n *\n * **Note**: Consumers must set the help-text-type with 'error' and\n * help-text attribute with the error message using limitexceeded event.\n * The same help-text value will be used for the validation message to be displayed.\n *\n * @tagname mdc-textarea\n *\n * @event input - (React: onInput) This event is dispatched when the value of the textarea field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the textarea field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the textarea receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the textarea loses focus.\n * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit\n * exceeds or restored.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled\n * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled\n * @cssproperty --mdc-textarea-disabled-background-color - Background color for the textarea field when disabled\n * @cssproperty --mdc-textarea-text-color - Text color for the textarea field\n * @cssproperty --mdc-textarea-background-color - Background color for the textarea field\n * @cssproperty --mdc-textarea-border-color - Border color for the textarea field\n * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter\n * @cssproperty --mdc-textarea-error-border-color - Border color for the error related help text\n * @cssproperty --mdc-textarea-warning-border-color - Border color for the warning related help text\n * @cssproperty --mdc-textarea-success-border-color - Border color for the success related help text\n * @cssproperty --mdc-textarea-primary-border-color - Border color for the priority related help text\n * @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover\n * @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused\n * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart character-counter - The character counter element that is displayed when the `max-character-limit` property is set.\n * @csspart textarea-footer - The container for the help text and character counter elements.\n * @csspart textarea-container - The textarea container\n * @csspart textarea - The textarea field element.\n */",
44705
- "customElement": true,
44706
- "slots": [
44707
- {
44708
- "description": "Slot for the label element. If not provided, the `label` property will be used to render the label.",
44709
- "name": "label",
44710
- "inheritedFrom": {
44711
- "name": "FormfieldWrapper",
44712
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
44713
- }
44714
- },
44715
- {
44716
- "description": "Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.",
44717
- "name": "toggletip",
44718
- "inheritedFrom": {
44719
- "name": "FormfieldWrapper",
44720
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
44721
- }
44722
- },
44723
- {
44724
- "description": "Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.",
44725
- "name": "help-icon",
44726
- "inheritedFrom": {
44727
- "name": "FormfieldWrapper",
44728
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
44729
- }
44730
- },
44731
- {
44732
- "description": "Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.",
44733
- "name": "help-text",
44734
- "inheritedFrom": {
44735
- "name": "FormfieldWrapper",
44736
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
44737
- }
44738
- }
44739
- ]
45058
+ "jsDoc": "/**\n * mdc-textarea component, which is used to get the multi-line text input from the user.\n * It contains:\n * - label: It is the title of the textarea field.\n * - required: A boolean attribute depicting that the textarea field is required.\n * - Textarea: It is the multi-line text input field.\n * - helper-text: It is the text that provides additional information about the textarea field.\n * - max-character-limit: It is the text that shows the character count of the textarea field.\n * - Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n * about the textarea field based on the validation state.\n * - limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n * This event exposes 3 properties:\n * - currentCharacterCount - the current number of characters in the textarea field,\n * - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n * - value - the current value of the textarea field,\n *\n * **Note**: Consumers must set the help-text-type with 'error' and\n * help-text attribute with the error message using limitexceeded event.\n * The same help-text value will be used for the validation message to be displayed.\n *\n * @tagname mdc-textarea\n *\n * @event input - (React: onInput) This event is dispatched when the value of the textarea field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the textarea field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the textarea receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the textarea loses focus.\n * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit\n * exceeds or restored.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-textarea-text-color - Text color for the textarea field\n * @cssproperty --mdc-textarea-background-color - Background color for the textarea field\n * @cssproperty --mdc-textarea-border-color - Border color for the textarea field\n * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter\n * @cssproperty --mdc-textarea-text-font-size - Font size for the textarea field\n * @cssproperty --mdc-textarea-text-line-height - Line height for the textarea field\n * @cssproperty --mdc-textarea-container-background-color - Background color for the textarea container\n */",
45059
+ "customElement": true
44740
45060
  }
44741
45061
  ],
44742
45062
  "exports": [
@@ -45298,6 +45618,70 @@
45298
45618
  {
45299
45619
  "description": "Background color of the inactive toggle in pressed state",
45300
45620
  "name": "--mdc-toggle-inactive-pressed-color"
45621
+ },
45622
+ {
45623
+ "description": "Font size for the label text.",
45624
+ "name": "--mdc-label-font-size",
45625
+ "inheritedFrom": {
45626
+ "name": "FormfieldWrapper",
45627
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
45628
+ }
45629
+ },
45630
+ {
45631
+ "description": "Font weight for the label text.",
45632
+ "name": "--mdc-label-font-weight",
45633
+ "inheritedFrom": {
45634
+ "name": "FormfieldWrapper",
45635
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
45636
+ }
45637
+ },
45638
+ {
45639
+ "description": "Line height for the label text.",
45640
+ "name": "--mdc-label-line-height",
45641
+ "inheritedFrom": {
45642
+ "name": "FormfieldWrapper",
45643
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
45644
+ }
45645
+ },
45646
+ {
45647
+ "description": "Color for the label text.",
45648
+ "name": "--mdc-label-color",
45649
+ "inheritedFrom": {
45650
+ "name": "FormfieldWrapper",
45651
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
45652
+ }
45653
+ },
45654
+ {
45655
+ "description": "Font size for the help text.",
45656
+ "name": "--mdc-help-text-font-size",
45657
+ "inheritedFrom": {
45658
+ "name": "FormfieldWrapper",
45659
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
45660
+ }
45661
+ },
45662
+ {
45663
+ "description": "Font weight for the help text.",
45664
+ "name": "--mdc-help-text-font-weight",
45665
+ "inheritedFrom": {
45666
+ "name": "FormfieldWrapper",
45667
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
45668
+ }
45669
+ },
45670
+ {
45671
+ "description": "Line height for the help text.",
45672
+ "name": "--mdc-help-text-line-height",
45673
+ "inheritedFrom": {
45674
+ "name": "FormfieldWrapper",
45675
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
45676
+ }
45677
+ },
45678
+ {
45679
+ "description": "Color for the help text.",
45680
+ "name": "--mdc-help-text-color",
45681
+ "inheritedFrom": {
45682
+ "name": "FormfieldWrapper",
45683
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
45684
+ }
45301
45685
  }
45302
45686
  ],
45303
45687
  "cssParts": [