@momentum-design/components 0.38.1 → 0.39.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/browser/index.js +1 -1
  2. package/dist/browser/index.js.map +2 -2
  3. package/dist/components/popover/popover.component.js +1 -1
  4. package/dist/custom-elements.json +1198 -1198
  5. package/dist/react/index.d.ts +3 -3
  6. package/dist/react/index.js +3 -3
  7. package/package.json +1 -1
package/dist/custom-elements.json CHANGED
@@ -4,50 +4,50 @@
4
4
  "modules": [
5
5
  {
6
6
  "kind": "javascript-module",
7
- "path": "components/alertchip/alertchip.component.js",
7
+ "path": "components/avatarbutton/avatarbutton.component.js",
8
8
  "declarations": [
9
9
  {
10
10
  "kind": "class",
11
- "description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - neutral, warning, error, success, and informational\n\nThis component is built by extending Buttonsimple.",
12
- "name": "AlertChip",
13
- "cssProperties": [
14
- {
15
- "description": "The color of the label text",
16
- "name": "--mdc-chip-color"
17
- },
18
- {
19
- "description": "The color of the icon",
20
- "name": "--mdc-chip-icon-color"
21
- },
22
- {
23
- "description": "The border color of the alertchip",
24
- "name": "--mdc-chip-border-color"
25
- },
26
- {
27
- "description": "The background color of the alertchip",
28
- "name": "--mdc-chip-background-color"
29
- }
30
- ],
11
+ "description": "The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n\nThis component is made by extending `buttonsimple` class.\nThe button component acts as a wrapper for the avatar component.",
12
+ "name": "AvatarButton",
31
13
  "members": [
32
14
  {
33
15
  "kind": "field",
34
- "name": "variant",
16
+ "name": "ariaLabel",
35
17
  "type": {
36
- "text": "VariantType"
18
+ "text": "string | null"
37
19
  },
38
- "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
39
- "default": "neutral",
40
- "attribute": "variant"
20
+ "default": "null",
21
+ "description": "Aria-label attribute to be set for accessibility",
22
+ "attribute": "aria-label"
23
+ },
24
+ {
25
+ "kind": "method",
26
+ "name": "setSize",
27
+ "privacy": "private",
28
+ "parameters": [
29
+ {
30
+ "name": "size",
31
+ "type": {
32
+ "text": "AvatarSize"
33
+ }
34
+ }
35
+ ]
41
36
  },
42
37
  {
43
38
  "kind": "field",
44
- "name": "label",
39
+ "name": "active",
45
40
  "type": {
46
- "text": "string"
41
+ "text": "boolean"
47
42
  },
48
- "default": "''",
49
- "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
50
- "attribute": "label"
43
+ "default": "undefined as unknown",
44
+ "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
45
+ "attribute": "active",
46
+ "reflects": true,
47
+ "inheritedFrom": {
48
+ "name": "Buttonsimple",
49
+ "module": "components/buttonsimple/buttonsimple.component.js"
50
+ }
51
51
  },
52
52
  {
53
53
  "kind": "field",
@@ -80,26 +80,80 @@
80
80
  },
81
81
  {
82
82
  "kind": "field",
83
- "name": "active",
83
+ "name": "role",
84
+ "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
85
+ "default": "'button'",
86
+ "attribute": "role",
87
+ "reflects": true,
84
88
  "type": {
85
- "text": "boolean"
89
+ "text": "string"
86
90
  },
87
- "default": "undefined as unknown",
88
- "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
89
- "attribute": "active",
91
+ "inheritedFrom": {
92
+ "name": "Buttonsimple",
93
+ "module": "components/buttonsimple/buttonsimple.component.js"
94
+ }
95
+ },
96
+ {
97
+ "kind": "field",
98
+ "name": "type",
99
+ "type": {
100
+ "text": "ButtonType"
101
+ },
102
+ "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
103
+ "default": "button",
104
+ "attribute": "type",
90
105
  "reflects": true,
91
106
  "inheritedFrom": {
92
107
  "name": "Buttonsimple",
93
108
  "module": "components/buttonsimple/buttonsimple.component.js"
94
109
  }
95
110
  },
111
+ {
112
+ "kind": "field",
113
+ "name": "src",
114
+ "type": {
115
+ "text": "string | undefined"
116
+ },
117
+ "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
118
+ "attribute": "src",
119
+ "inheritedFrom": {
120
+ "name": "AvatarComponentMixin",
121
+ "module": "utils/mixins/AvatarComponentMixin.js"
122
+ }
123
+ },
124
+ {
125
+ "kind": "field",
126
+ "name": "initials",
127
+ "type": {
128
+ "text": "string | undefined"
129
+ },
130
+ "description": "The initials to be displayed for the avatar.",
131
+ "attribute": "initials",
132
+ "inheritedFrom": {
133
+ "name": "AvatarComponentMixin",
134
+ "module": "utils/mixins/AvatarComponentMixin.js"
135
+ }
136
+ },
137
+ {
138
+ "kind": "field",
139
+ "name": "presence",
140
+ "type": {
141
+ "text": "PresenceType | undefined"
142
+ },
143
+ "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
144
+ "attribute": "presence",
145
+ "inheritedFrom": {
146
+ "name": "AvatarComponentMixin",
147
+ "module": "utils/mixins/AvatarComponentMixin.js"
148
+ }
149
+ },
96
150
  {
97
151
  "kind": "field",
98
152
  "name": "size",
99
153
  "type": {
100
154
  "text": "ButtonSize"
101
155
  },
102
- "description": "Simplebutton size is a super set of all the sizes supported by children components.",
156
+ "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
103
157
  "default": "32",
104
158
  "attribute": "size",
105
159
  "reflects": true,
@@ -110,44 +164,57 @@
110
164
  },
111
165
  {
112
166
  "kind": "field",
113
- "name": "role",
114
- "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
115
- "default": "button",
116
- "attribute": "role",
117
- "reflects": true,
167
+ "name": "counter",
168
+ "type": {
169
+ "text": "number | undefined"
170
+ },
171
+ "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
172
+ "attribute": "counter",
118
173
  "inheritedFrom": {
119
- "name": "Buttonsimple",
120
- "module": "components/buttonsimple/buttonsimple.component.js"
174
+ "name": "AvatarComponentMixin",
175
+ "module": "utils/mixins/AvatarComponentMixin.js"
121
176
  }
122
177
  },
123
178
  {
124
179
  "kind": "field",
125
- "name": "tabIndex",
180
+ "name": "isTyping",
126
181
  "type": {
127
- "text": "number"
182
+ "text": "boolean"
128
183
  },
129
- "default": "0",
130
- "description": "This property specifies the tab order of the element.",
131
- "attribute": "tabIndex",
132
- "reflects": true,
184
+ "default": "false",
185
+ "description": "Represents the typing indicator when the user is typing.",
186
+ "attribute": "is-typing",
133
187
  "inheritedFrom": {
134
- "name": "TabIndexMixin",
135
- "module": "utils/mixins/TabIndexMixin.js"
188
+ "name": "AvatarComponentMixin",
189
+ "module": "utils/mixins/AvatarComponentMixin.js"
136
190
  }
137
191
  },
138
192
  {
139
193
  "kind": "field",
140
- "name": "type",
194
+ "name": "iconName",
141
195
  "type": {
142
- "text": "ButtonType"
196
+ "text": "IconNames | undefined"
143
197
  },
144
- "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
145
- "default": "button",
146
- "attribute": "type",
198
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
199
+ "attribute": "icon-name",
200
+ "inheritedFrom": {
201
+ "name": "IconNameMixin",
202
+ "module": "utils/mixins/IconNameMixin.js"
203
+ }
204
+ },
205
+ {
206
+ "kind": "field",
207
+ "name": "tabIndex",
208
+ "type": {
209
+ "text": "number"
210
+ },
211
+ "default": "0",
212
+ "description": "This property specifies the tab order of the element.",
213
+ "attribute": "tabIndex",
147
214
  "reflects": true,
148
215
  "inheritedFrom": {
149
- "name": "Buttonsimple",
150
- "module": "components/buttonsimple/buttonsimple.component.js"
216
+ "name": "TabIndexMixin",
217
+ "module": "utils/mixins/TabIndexMixin.js"
151
218
  }
152
219
  },
153
220
  {
@@ -295,83 +362,100 @@
295
362
  }
296
363
  }
297
364
  ],
298
- "attributes": [
299
- {
300
- "name": "variant",
301
- "type": {
302
- "text": "VariantType"
303
- },
304
- "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
305
- "default": "neutral",
306
- "fieldName": "variant"
307
- },
308
- {
309
- "name": "label",
310
- "type": {
311
- "text": "string"
312
- },
313
- "default": "''",
314
- "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
315
- "fieldName": "label"
316
- },
317
- {
318
- "name": "tabIndex",
319
- "type": {
320
- "text": "number"
321
- },
322
- "default": "0",
323
- "description": "This property specifies the tab order of the element.",
324
- "fieldName": "tabIndex",
325
- "inheritedFrom": {
326
- "name": "TabIndexMixin",
327
- "module": "src/utils/mixins/TabIndexMixin.ts"
328
- }
329
- },
365
+ "events": [
330
366
  {
331
- "name": "disabled",
332
- "type": {
333
- "text": "boolean"
334
- },
335
- "default": "false",
336
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
337
- "fieldName": "disabled",
367
+ "description": "(React: onClick) This event is dispatched when the avatarbutton is clicked.",
368
+ "name": "click",
369
+ "reactName": "onClick",
370
+ "eventName": "ClickEvent",
338
371
  "inheritedFrom": {
339
- "name": "DisabledMixin",
340
- "module": "src/utils/mixins/DisabledMixin.ts"
372
+ "name": "Buttonsimple",
373
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
341
374
  }
342
375
  },
343
376
  {
344
- "name": "active",
345
- "type": {
346
- "text": "boolean"
347
- },
348
- "default": "false",
349
- "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
350
- "fieldName": "active",
377
+ "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.",
378
+ "name": "keydown",
379
+ "reactName": "onKeyDown",
380
+ "eventName": "KeydownEvent",
351
381
  "inheritedFrom": {
352
382
  "name": "Buttonsimple",
353
383
  "module": "src/components/buttonsimple/buttonsimple.component.ts"
354
384
  }
355
385
  },
356
386
  {
357
- "name": "soft-disabled",
358
- "type": {
359
- "text": "boolean"
360
- },
361
- "default": "false",
362
- "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
363
- "fieldName": "softDisabled",
387
+ "description": "(React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.",
388
+ "name": "keyup",
389
+ "reactName": "onKeyUp",
390
+ "eventName": "KeyupEvent",
364
391
  "inheritedFrom": {
365
392
  "name": "Buttonsimple",
366
393
  "module": "src/components/buttonsimple/buttonsimple.component.ts"
367
394
  }
368
395
  },
369
396
  {
370
- "name": "size",
397
+ "description": "(React: onFocus) This event is dispatched when the avatarbutton receives focus.",
398
+ "name": "focus",
399
+ "reactName": "onFocus",
400
+ "eventName": "FocusEvent",
401
+ "inheritedFrom": {
402
+ "name": "Buttonsimple",
403
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
404
+ }
405
+ }
406
+ ],
407
+ "attributes": [
408
+ {
409
+ "name": "aria-label",
410
+ "type": {
411
+ "text": "string | null"
412
+ },
413
+ "default": "null",
414
+ "description": "Aria-label attribute to be set for accessibility",
415
+ "fieldName": "ariaLabel"
416
+ },
417
+ {
418
+ "name": "src",
419
+ "type": {
420
+ "text": "string | undefined"
421
+ },
422
+ "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
423
+ "fieldName": "src",
424
+ "inheritedFrom": {
425
+ "name": "AvatarComponentMixin",
426
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
427
+ }
428
+ },
429
+ {
430
+ "name": "initials",
431
+ "type": {
432
+ "text": "string | undefined"
433
+ },
434
+ "description": "The initials to be displayed for the avatar.",
435
+ "fieldName": "initials",
436
+ "inheritedFrom": {
437
+ "name": "AvatarComponentMixin",
438
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
439
+ }
440
+ },
441
+ {
442
+ "name": "presence",
443
+ "type": {
444
+ "text": "PresenceType | undefined"
445
+ },
446
+ "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
447
+ "fieldName": "presence",
448
+ "inheritedFrom": {
449
+ "name": "AvatarComponentMixin",
450
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
451
+ }
452
+ },
453
+ {
454
+ "name": "size",
371
455
  "type": {
372
456
  "text": "ButtonSize"
373
457
  },
374
- "description": "Simplebutton size is a super set of all the sizes supported by children components.",
458
+ "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
375
459
  "default": "32",
376
460
  "fieldName": "size",
377
461
  "inheritedFrom": {
@@ -380,78 +464,135 @@
380
464
  }
381
465
  },
382
466
  {
383
- "name": "role",
384
- "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
385
- "default": "button",
386
- "fieldName": "role",
467
+ "name": "counter",
468
+ "type": {
469
+ "text": "number | undefined"
470
+ },
471
+ "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
472
+ "fieldName": "counter",
387
473
  "inheritedFrom": {
388
- "name": "Buttonsimple",
389
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
474
+ "name": "AvatarComponentMixin",
475
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
390
476
  }
391
477
  },
392
478
  {
393
- "name": "type",
479
+ "name": "is-typing",
394
480
  "type": {
395
- "text": "ButtonType"
481
+ "text": "boolean"
396
482
  },
397
- "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
398
- "default": "button",
399
- "fieldName": "type",
483
+ "default": "false",
484
+ "description": "Represents the typing indicator when the user is typing.",
485
+ "fieldName": "isTyping",
400
486
  "inheritedFrom": {
401
- "name": "Buttonsimple",
402
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
487
+ "name": "AvatarComponentMixin",
488
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
403
489
  }
404
- }
405
- ],
406
- "superclass": {
407
- "name": "Buttonsimple",
408
- "module": "/src/components/buttonsimple/buttonsimple.component"
409
- },
410
- "tagName": "mdc-alertchip",
411
- "jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - neutral, warning, error, success, and informational\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n */",
412
- "customElement": true,
413
- "events": [
490
+ },
414
491
  {
415
- "description": "(React: onClick) This event is dispatched when the button is clicked.",
416
- "name": "click",
417
- "reactName": "onClick",
418
- "eventName": "ClickEvent",
492
+ "name": "icon-name",
493
+ "type": {
494
+ "text": "IconNames | undefined"
495
+ },
496
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
497
+ "fieldName": "iconName",
498
+ "inheritedFrom": {
499
+ "name": "IconNameMixin",
500
+ "module": "src/utils/mixins/IconNameMixin.ts"
501
+ }
502
+ },
503
+ {
504
+ "name": "tabIndex",
505
+ "type": {
506
+ "text": "number"
507
+ },
508
+ "default": "0",
509
+ "description": "This property specifies the tab order of the element.",
510
+ "fieldName": "tabIndex",
511
+ "inheritedFrom": {
512
+ "name": "TabIndexMixin",
513
+ "module": "src/utils/mixins/TabIndexMixin.ts"
514
+ }
515
+ },
516
+ {
517
+ "name": "disabled",
518
+ "type": {
519
+ "text": "boolean"
520
+ },
521
+ "default": "false",
522
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
523
+ "fieldName": "disabled",
524
+ "inheritedFrom": {
525
+ "name": "DisabledMixin",
526
+ "module": "src/utils/mixins/DisabledMixin.ts"
527
+ }
528
+ },
529
+ {
530
+ "name": "active",
531
+ "type": {
532
+ "text": "boolean"
533
+ },
534
+ "default": "false",
535
+ "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
536
+ "fieldName": "active",
419
537
  "inheritedFrom": {
420
538
  "name": "Buttonsimple",
421
539
  "module": "src/components/buttonsimple/buttonsimple.component.ts"
422
540
  }
423
541
  },
424
542
  {
425
- "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
426
- "name": "keydown",
427
- "reactName": "onKeyDown",
428
- "eventName": "KeydownEvent",
543
+ "name": "soft-disabled",
544
+ "type": {
545
+ "text": "boolean"
546
+ },
547
+ "default": "false",
548
+ "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
549
+ "fieldName": "softDisabled",
429
550
  "inheritedFrom": {
430
551
  "name": "Buttonsimple",
431
552
  "module": "src/components/buttonsimple/buttonsimple.component.ts"
432
553
  }
433
554
  },
434
555
  {
435
- "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
436
- "name": "keyup",
437
- "reactName": "onKeyUp",
438
- "eventName": "KeyupEvent",
556
+ "name": "role",
557
+ "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
558
+ "default": "button",
559
+ "fieldName": "role",
439
560
  "inheritedFrom": {
440
561
  "name": "Buttonsimple",
441
562
  "module": "src/components/buttonsimple/buttonsimple.component.ts"
442
563
  }
443
564
  },
444
565
  {
445
- "description": "(React: onFocus) This event is dispatched when the button receives focus.",
446
- "name": "focus",
447
- "reactName": "onFocus",
448
- "eventName": "FocusEvent",
566
+ "name": "type",
567
+ "type": {
568
+ "text": "ButtonType"
569
+ },
570
+ "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
571
+ "default": "button",
572
+ "fieldName": "type",
449
573
  "inheritedFrom": {
450
574
  "name": "Buttonsimple",
451
575
  "module": "src/components/buttonsimple/buttonsimple.component.ts"
452
576
  }
453
577
  }
454
- ]
578
+ ],
579
+ "mixins": [
580
+ {
581
+ "name": "AvatarComponentMixin",
582
+ "module": "/src/utils/mixins/AvatarComponentMixin"
583
+ },
584
+ {
585
+ "name": "IconNameMixin",
586
+ "module": "/src/utils/mixins/IconNameMixin"
587
+ }
588
+ ],
589
+ "superclass": {
590
+ "name": "Buttonsimple",
591
+ "module": "/src/components/buttonsimple/buttonsimple.component"
592
+ },
593
+ "tagName": "mdc-avatarbutton",
594
+ "jsDoc": "/**\n * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n *\n * This component is made by extending `buttonsimple` class.\n * The button component acts as a wrapper for the avatar component.\n *\n * @dependency mdc-avatar\n *\n * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.\n * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.\n *\n * @tagname mdc-avatarbutton\n */",
595
+ "customElement": true
455
596
  }
456
597
  ],
457
598
  "exports": [
@@ -459,8 +600,8 @@
459
600
  "kind": "js",
460
601
  "name": "default",
461
602
  "declaration": {
462
- "name": "AlertChip",
463
- "module": "components/alertchip/alertchip.component.js"
603
+ "name": "AvatarButton",
604
+ "module": "components/avatarbutton/avatarbutton.component.js"
464
605
  }
465
606
  }
466
607
  ]
@@ -711,54 +852,54 @@
711
852
  },
712
853
  {
713
854
  "kind": "javascript-module",
714
- "path": "components/avatarbutton/avatarbutton.component.js",
855
+ "path": "components/alertchip/alertchip.component.js",
715
856
  "declarations": [
716
857
  {
717
858
  "kind": "class",
718
- "description": "The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n\nThis component is made by extending `buttonsimple` class.\nThe button component acts as a wrapper for the avatar component.",
719
- "name": "AvatarButton",
859
+ "description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - neutral, warning, error, success, and informational\n\nThis component is built by extending Buttonsimple.",
860
+ "name": "AlertChip",
861
+ "cssProperties": [
862
+ {
863
+ "description": "The color of the label text",
864
+ "name": "--mdc-chip-color"
865
+ },
866
+ {
867
+ "description": "The color of the icon",
868
+ "name": "--mdc-chip-icon-color"
869
+ },
870
+ {
871
+ "description": "The border color of the alertchip",
872
+ "name": "--mdc-chip-border-color"
873
+ },
874
+ {
875
+ "description": "The background color of the alertchip",
876
+ "name": "--mdc-chip-background-color"
877
+ }
878
+ ],
720
879
  "members": [
721
880
  {
722
881
  "kind": "field",
723
- "name": "ariaLabel",
882
+ "name": "variant",
724
883
  "type": {
725
- "text": "string | null"
884
+ "text": "VariantType"
726
885
  },
727
- "default": "null",
728
- "description": "Aria-label attribute to be set for accessibility",
729
- "attribute": "aria-label"
886
+ "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
887
+ "default": "neutral",
888
+ "attribute": "variant"
730
889
  },
731
890
  {
732
- "kind": "method",
733
- "name": "setSize",
734
- "privacy": "private",
735
- "parameters": [
736
- {
737
- "name": "size",
738
- "type": {
739
- "text": "AvatarSize"
740
- }
741
- }
742
- ]
891
+ "kind": "field",
892
+ "name": "label",
893
+ "type": {
894
+ "text": "string"
895
+ },
896
+ "default": "''",
897
+ "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
898
+ "attribute": "label"
743
899
  },
744
900
  {
745
901
  "kind": "field",
746
- "name": "active",
747
- "type": {
748
- "text": "boolean"
749
- },
750
- "default": "undefined as unknown",
751
- "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
752
- "attribute": "active",
753
- "reflects": true,
754
- "inheritedFrom": {
755
- "name": "Buttonsimple",
756
- "module": "components/buttonsimple/buttonsimple.component.js"
757
- }
758
- },
759
- {
760
- "kind": "field",
761
- "name": "disabled",
902
+ "name": "disabled",
762
903
  "type": {
763
904
  "text": "boolean"
764
905
  },
@@ -787,80 +928,26 @@
787
928
  },
788
929
  {
789
930
  "kind": "field",
790
- "name": "role",
791
- "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
792
- "default": "'button'",
793
- "attribute": "role",
794
- "reflects": true,
795
- "type": {
796
- "text": "string"
797
- },
798
- "inheritedFrom": {
799
- "name": "Buttonsimple",
800
- "module": "components/buttonsimple/buttonsimple.component.js"
801
- }
802
- },
803
- {
804
- "kind": "field",
805
- "name": "type",
931
+ "name": "active",
806
932
  "type": {
807
- "text": "ButtonType"
933
+ "text": "boolean"
808
934
  },
809
- "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
810
- "default": "button",
811
- "attribute": "type",
935
+ "default": "undefined as unknown",
936
+ "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
937
+ "attribute": "active",
812
938
  "reflects": true,
813
939
  "inheritedFrom": {
814
940
  "name": "Buttonsimple",
815
941
  "module": "components/buttonsimple/buttonsimple.component.js"
816
942
  }
817
943
  },
818
- {
819
- "kind": "field",
820
- "name": "src",
821
- "type": {
822
- "text": "string | undefined"
823
- },
824
- "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
825
- "attribute": "src",
826
- "inheritedFrom": {
827
- "name": "AvatarComponentMixin",
828
- "module": "utils/mixins/AvatarComponentMixin.js"
829
- }
830
- },
831
- {
832
- "kind": "field",
833
- "name": "initials",
834
- "type": {
835
- "text": "string | undefined"
836
- },
837
- "description": "The initials to be displayed for the avatar.",
838
- "attribute": "initials",
839
- "inheritedFrom": {
840
- "name": "AvatarComponentMixin",
841
- "module": "utils/mixins/AvatarComponentMixin.js"
842
- }
843
- },
844
- {
845
- "kind": "field",
846
- "name": "presence",
847
- "type": {
848
- "text": "PresenceType | undefined"
849
- },
850
- "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
851
- "attribute": "presence",
852
- "inheritedFrom": {
853
- "name": "AvatarComponentMixin",
854
- "module": "utils/mixins/AvatarComponentMixin.js"
855
- }
856
- },
857
944
  {
858
945
  "kind": "field",
859
946
  "name": "size",
860
947
  "type": {
861
948
  "text": "ButtonSize"
862
949
  },
863
- "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
950
+ "description": "Simplebutton size is a super set of all the sizes supported by children components.",
864
951
  "default": "32",
865
952
  "attribute": "size",
866
953
  "reflects": true,
@@ -871,42 +958,14 @@
871
958
  },
872
959
  {
873
960
  "kind": "field",
874
- "name": "counter",
875
- "type": {
876
- "text": "number | undefined"
877
- },
878
- "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
879
- "attribute": "counter",
880
- "inheritedFrom": {
881
- "name": "AvatarComponentMixin",
882
- "module": "utils/mixins/AvatarComponentMixin.js"
883
- }
884
- },
885
- {
886
- "kind": "field",
887
- "name": "isTyping",
888
- "type": {
889
- "text": "boolean"
890
- },
891
- "default": "false",
892
- "description": "Represents the typing indicator when the user is typing.",
893
- "attribute": "is-typing",
894
- "inheritedFrom": {
895
- "name": "AvatarComponentMixin",
896
- "module": "utils/mixins/AvatarComponentMixin.js"
897
- }
898
- },
899
- {
900
- "kind": "field",
901
- "name": "iconName",
902
- "type": {
903
- "text": "IconNames | undefined"
904
- },
905
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
906
- "attribute": "icon-name",
961
+ "name": "role",
962
+ "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
963
+ "default": "button",
964
+ "attribute": "role",
965
+ "reflects": true,
907
966
  "inheritedFrom": {
908
- "name": "IconNameMixin",
909
- "module": "utils/mixins/IconNameMixin.js"
967
+ "name": "Buttonsimple",
968
+ "module": "components/buttonsimple/buttonsimple.component.js"
910
969
  }
911
970
  },
912
971
  {
@@ -924,6 +983,21 @@
924
983
  "module": "utils/mixins/TabIndexMixin.js"
925
984
  }
926
985
  },
986
+ {
987
+ "kind": "field",
988
+ "name": "type",
989
+ "type": {
990
+ "text": "ButtonType"
991
+ },
992
+ "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
993
+ "default": "button",
994
+ "attribute": "type",
995
+ "reflects": true,
996
+ "inheritedFrom": {
997
+ "name": "Buttonsimple",
998
+ "module": "components/buttonsimple/buttonsimple.component.js"
999
+ }
1000
+ },
927
1001
  {
928
1002
  "kind": "method",
929
1003
  "name": "executeAction",
@@ -1069,92 +1143,75 @@
1069
1143
  }
1070
1144
  }
1071
1145
  ],
1072
- "events": [
1073
- {
1074
- "description": "(React: onClick) This event is dispatched when the avatarbutton is clicked.",
1075
- "name": "click",
1076
- "reactName": "onClick",
1077
- "eventName": "ClickEvent",
1078
- "inheritedFrom": {
1079
- "name": "Buttonsimple",
1080
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
1081
- }
1082
- },
1146
+ "attributes": [
1083
1147
  {
1084
- "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.",
1085
- "name": "keydown",
1086
- "reactName": "onKeyDown",
1087
- "eventName": "KeydownEvent",
1088
- "inheritedFrom": {
1089
- "name": "Buttonsimple",
1090
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
1091
- }
1148
+ "name": "variant",
1149
+ "type": {
1150
+ "text": "VariantType"
1151
+ },
1152
+ "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
1153
+ "default": "neutral",
1154
+ "fieldName": "variant"
1092
1155
  },
1093
1156
  {
1094
- "description": "(React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.",
1095
- "name": "keyup",
1096
- "reactName": "onKeyUp",
1097
- "eventName": "KeyupEvent",
1098
- "inheritedFrom": {
1099
- "name": "Buttonsimple",
1100
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
1101
- }
1157
+ "name": "label",
1158
+ "type": {
1159
+ "text": "string"
1160
+ },
1161
+ "default": "''",
1162
+ "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
1163
+ "fieldName": "label"
1102
1164
  },
1103
1165
  {
1104
- "description": "(React: onFocus) This event is dispatched when the avatarbutton receives focus.",
1105
- "name": "focus",
1106
- "reactName": "onFocus",
1107
- "eventName": "FocusEvent",
1108
- "inheritedFrom": {
1109
- "name": "Buttonsimple",
1110
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
1111
- }
1112
- }
1113
- ],
1114
- "attributes": [
1115
- {
1116
- "name": "aria-label",
1166
+ "name": "tabIndex",
1117
1167
  "type": {
1118
- "text": "string | null"
1168
+ "text": "number"
1119
1169
  },
1120
- "default": "null",
1121
- "description": "Aria-label attribute to be set for accessibility",
1122
- "fieldName": "ariaLabel"
1170
+ "default": "0",
1171
+ "description": "This property specifies the tab order of the element.",
1172
+ "fieldName": "tabIndex",
1173
+ "inheritedFrom": {
1174
+ "name": "TabIndexMixin",
1175
+ "module": "src/utils/mixins/TabIndexMixin.ts"
1176
+ }
1123
1177
  },
1124
1178
  {
1125
- "name": "src",
1179
+ "name": "disabled",
1126
1180
  "type": {
1127
- "text": "string | undefined"
1181
+ "text": "boolean"
1128
1182
  },
1129
- "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
1130
- "fieldName": "src",
1183
+ "default": "false",
1184
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
1185
+ "fieldName": "disabled",
1131
1186
  "inheritedFrom": {
1132
- "name": "AvatarComponentMixin",
1133
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
1187
+ "name": "DisabledMixin",
1188
+ "module": "src/utils/mixins/DisabledMixin.ts"
1134
1189
  }
1135
1190
  },
1136
1191
  {
1137
- "name": "initials",
1192
+ "name": "active",
1138
1193
  "type": {
1139
- "text": "string | undefined"
1194
+ "text": "boolean"
1140
1195
  },
1141
- "description": "The initials to be displayed for the avatar.",
1142
- "fieldName": "initials",
1196
+ "default": "false",
1197
+ "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
1198
+ "fieldName": "active",
1143
1199
  "inheritedFrom": {
1144
- "name": "AvatarComponentMixin",
1145
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
1200
+ "name": "Buttonsimple",
1201
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
1146
1202
  }
1147
1203
  },
1148
1204
  {
1149
- "name": "presence",
1205
+ "name": "soft-disabled",
1150
1206
  "type": {
1151
- "text": "PresenceType | undefined"
1207
+ "text": "boolean"
1152
1208
  },
1153
- "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
1154
- "fieldName": "presence",
1209
+ "default": "false",
1210
+ "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
1211
+ "fieldName": "softDisabled",
1155
1212
  "inheritedFrom": {
1156
- "name": "AvatarComponentMixin",
1157
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
1213
+ "name": "Buttonsimple",
1214
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
1158
1215
  }
1159
1216
  },
1160
1217
  {
@@ -1162,7 +1219,7 @@
1162
1219
  "type": {
1163
1220
  "text": "ButtonSize"
1164
1221
  },
1165
- "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
1222
+ "description": "Simplebutton size is a super set of all the sizes supported by children components.",
1166
1223
  "default": "32",
1167
1224
  "fieldName": "size",
1168
1225
  "inheritedFrom": {
@@ -1171,135 +1228,78 @@
1171
1228
  }
1172
1229
  },
1173
1230
  {
1174
- "name": "counter",
1175
- "type": {
1176
- "text": "number | undefined"
1177
- },
1178
- "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
1179
- "fieldName": "counter",
1180
- "inheritedFrom": {
1181
- "name": "AvatarComponentMixin",
1182
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
1183
- }
1184
- },
1185
- {
1186
- "name": "is-typing",
1187
- "type": {
1188
- "text": "boolean"
1189
- },
1190
- "default": "false",
1191
- "description": "Represents the typing indicator when the user is typing.",
1192
- "fieldName": "isTyping",
1193
- "inheritedFrom": {
1194
- "name": "AvatarComponentMixin",
1195
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
1196
- }
1197
- },
1198
- {
1199
- "name": "icon-name",
1200
- "type": {
1201
- "text": "IconNames | undefined"
1202
- },
1203
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
1204
- "fieldName": "iconName",
1205
- "inheritedFrom": {
1206
- "name": "IconNameMixin",
1207
- "module": "src/utils/mixins/IconNameMixin.ts"
1208
- }
1209
- },
1210
- {
1211
- "name": "tabIndex",
1212
- "type": {
1213
- "text": "number"
1214
- },
1215
- "default": "0",
1216
- "description": "This property specifies the tab order of the element.",
1217
- "fieldName": "tabIndex",
1231
+ "name": "role",
1232
+ "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
1233
+ "default": "button",
1234
+ "fieldName": "role",
1218
1235
  "inheritedFrom": {
1219
- "name": "TabIndexMixin",
1220
- "module": "src/utils/mixins/TabIndexMixin.ts"
1236
+ "name": "Buttonsimple",
1237
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
1221
1238
  }
1222
1239
  },
1223
1240
  {
1224
- "name": "disabled",
1241
+ "name": "type",
1225
1242
  "type": {
1226
- "text": "boolean"
1243
+ "text": "ButtonType"
1227
1244
  },
1228
- "default": "false",
1229
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
1230
- "fieldName": "disabled",
1245
+ "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
1246
+ "default": "button",
1247
+ "fieldName": "type",
1231
1248
  "inheritedFrom": {
1232
- "name": "DisabledMixin",
1233
- "module": "src/utils/mixins/DisabledMixin.ts"
1249
+ "name": "Buttonsimple",
1250
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
1234
1251
  }
1235
- },
1252
+ }
1253
+ ],
1254
+ "superclass": {
1255
+ "name": "Buttonsimple",
1256
+ "module": "/src/components/buttonsimple/buttonsimple.component"
1257
+ },
1258
+ "tagName": "mdc-alertchip",
1259
+ "jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - neutral, warning, error, success, and informational\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n */",
1260
+ "customElement": true,
1261
+ "events": [
1236
1262
  {
1237
- "name": "active",
1238
- "type": {
1239
- "text": "boolean"
1240
- },
1241
- "default": "false",
1242
- "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
1243
- "fieldName": "active",
1263
+ "description": "(React: onClick) This event is dispatched when the button is clicked.",
1264
+ "name": "click",
1265
+ "reactName": "onClick",
1266
+ "eventName": "ClickEvent",
1244
1267
  "inheritedFrom": {
1245
1268
  "name": "Buttonsimple",
1246
1269
  "module": "src/components/buttonsimple/buttonsimple.component.ts"
1247
1270
  }
1248
1271
  },
1249
1272
  {
1250
- "name": "soft-disabled",
1251
- "type": {
1252
- "text": "boolean"
1253
- },
1254
- "default": "false",
1255
- "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
1256
- "fieldName": "softDisabled",
1273
+ "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
1274
+ "name": "keydown",
1275
+ "reactName": "onKeyDown",
1276
+ "eventName": "KeydownEvent",
1257
1277
  "inheritedFrom": {
1258
1278
  "name": "Buttonsimple",
1259
1279
  "module": "src/components/buttonsimple/buttonsimple.component.ts"
1260
1280
  }
1261
1281
  },
1262
1282
  {
1263
- "name": "role",
1264
- "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
1265
- "default": "button",
1266
- "fieldName": "role",
1283
+ "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
1284
+ "name": "keyup",
1285
+ "reactName": "onKeyUp",
1286
+ "eventName": "KeyupEvent",
1267
1287
  "inheritedFrom": {
1268
1288
  "name": "Buttonsimple",
1269
1289
  "module": "src/components/buttonsimple/buttonsimple.component.ts"
1270
1290
  }
1271
1291
  },
1272
1292
  {
1273
- "name": "type",
1274
- "type": {
1275
- "text": "ButtonType"
1276
- },
1277
- "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
1278
- "default": "button",
1279
- "fieldName": "type",
1293
+ "description": "(React: onFocus) This event is dispatched when the button receives focus.",
1294
+ "name": "focus",
1295
+ "reactName": "onFocus",
1296
+ "eventName": "FocusEvent",
1280
1297
  "inheritedFrom": {
1281
1298
  "name": "Buttonsimple",
1282
1299
  "module": "src/components/buttonsimple/buttonsimple.component.ts"
1283
1300
  }
1284
1301
  }
1285
- ],
1286
- "mixins": [
1287
- {
1288
- "name": "AvatarComponentMixin",
1289
- "module": "/src/utils/mixins/AvatarComponentMixin"
1290
- },
1291
- {
1292
- "name": "IconNameMixin",
1293
- "module": "/src/utils/mixins/IconNameMixin"
1294
- }
1295
- ],
1296
- "superclass": {
1297
- "name": "Buttonsimple",
1298
- "module": "/src/components/buttonsimple/buttonsimple.component"
1299
- },
1300
- "tagName": "mdc-avatarbutton",
1301
- "jsDoc": "/**\n * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n *\n * This component is made by extending `buttonsimple` class.\n * The button component acts as a wrapper for the avatar component.\n *\n * @dependency mdc-avatar\n *\n * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.\n * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.\n *\n * @tagname mdc-avatarbutton\n */",
1302
- "customElement": true
1302
+ ]
1303
1303
  }
1304
1304
  ],
1305
1305
  "exports": [
@@ -1307,8 +1307,8 @@
1307
1307
  "kind": "js",
1308
1308
  "name": "default",
1309
1309
  "declaration": {
1310
- "name": "AvatarButton",
1311
- "module": "components/avatarbutton/avatarbutton.component.js"
1310
+ "name": "AlertChip",
1311
+ "module": "components/alertchip/alertchip.component.js"
1312
1312
  }
1313
1313
  }
1314
1314
  ]
@@ -2601,803 +2601,811 @@
2601
2601
  },
2602
2602
  {
2603
2603
  "kind": "javascript-module",
2604
- "path": "components/checkbox/checkbox.component.js",
2604
+ "path": "components/chip/chip.component.js",
2605
2605
  "declarations": [
2606
2606
  {
2607
2607
  "kind": "class",
2608
- "description": "Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selections in lists.\n\nA checkbox component contains an optional label and an optional helper text.\n\nTo create a group of checkboxes, use the FormFieldGroup component.",
2609
- "name": "Checkbox",
2608
+ "description": "mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.\nConsumers can wrap this component around a tooltip to provide additional context.\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>,\nincluding empty spaces to split words.\n\nThis component is built by extending Buttonsimple.",
2609
+ "name": "Chip",
2610
2610
  "cssProperties": [
2611
2611
  {
2612
- "description": "Allows customization of the background color on hover.",
2613
- "name": "--mdc-checkbox-background-color-hover"
2614
- },
2615
- {
2616
- "description": "Border color in high contrast.",
2617
- "name": "--mdc-checkbox-border-color"
2618
- },
2619
- {
2620
- "description": "Background color for a selected checkbox.",
2621
- "name": "--mdc-checkbox-checked-background-color"
2622
- },
2623
- {
2624
- "description": "Background color for a selected checkbox when hovered.",
2625
- "name": "--mdc-checkbox-checked-background-color-hover"
2626
- },
2627
- {
2628
- "description": "Background color for a selected checkbox when pressed.",
2629
- "name": "--mdc-checkbox-checked-pressed-icon-color"
2630
- },
2631
- {
2632
- "description": "Background color for a disabled checkbox.",
2633
- "name": "--mdc-checkbox-disabled-background-color"
2612
+ "description": "The color of the chip.",
2613
+ "name": "--mdc-chip-color"
2634
2614
  },
2635
2615
  {
2636
- "description": "Border color for a disabled checkbox.",
2637
- "name": "--mdc-checkbox-disabled-border-color"
2616
+ "description": "The border color of the chip.",
2617
+ "name": "--mdc-chip-border-color"
2638
2618
  },
2639
2619
  {
2640
- "description": "Background color for a disabled, selected checkbox.",
2641
- "name": "--mdc-checkbox-disabled-checked-icon-color"
2642
- },
2620
+ "description": "The background color of the chip.",
2621
+ "name": "--mdc-chip-background-color"
2622
+ }
2623
+ ],
2624
+ "members": [
2643
2625
  {
2644
- "description": "Icon color for a disabled checkbox.",
2645
- "name": "--mdc-checkbox-disabled-icon-color"
2626
+ "kind": "field",
2627
+ "name": "color",
2628
+ "type": {
2629
+ "text": "ColorType"
2630
+ },
2631
+ "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- pink\n- purple\n- slate\n- violet",
2632
+ "default": "default",
2633
+ "attribute": "color",
2634
+ "reflects": true
2646
2635
  },
2647
2636
  {
2648
- "description": "Background color for an unselected checkbox.",
2649
- "name": "--mdc-checkbox-icon-background-color"
2637
+ "kind": "field",
2638
+ "name": "label",
2639
+ "type": {
2640
+ "text": "string"
2641
+ },
2642
+ "default": "''",
2643
+ "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.",
2644
+ "attribute": "label"
2650
2645
  },
2651
2646
  {
2652
- "description": "Default background color for an unselected checkbox.",
2653
- "name": "--mdc-checkbox-icon-border-color"
2647
+ "kind": "method",
2648
+ "name": "renderIcon",
2649
+ "privacy": "private",
2650
+ "description": "Renders the icon element if available.",
2651
+ "return": {
2652
+ "type": {
2653
+ "text": ""
2654
+ }
2655
+ }
2654
2656
  },
2655
2657
  {
2656
- "description": "Icon color for an unselected checkbox.",
2657
- "name": "--mdc-checkbox-icon-color"
2658
+ "kind": "field",
2659
+ "name": "role",
2660
+ "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
2661
+ "default": "button",
2662
+ "attribute": "role",
2663
+ "reflects": true,
2664
+ "inheritedFrom": {
2665
+ "name": "Buttonsimple",
2666
+ "module": "components/buttonsimple/buttonsimple.component.js"
2667
+ }
2658
2668
  },
2659
- {
2660
- "description": "Background color for a selected checkbox when pressed.",
2661
- "name": "--mdc-checkbox-pressed-icon-color"
2662
- }
2663
- ],
2664
- "members": [
2665
2669
  {
2666
2670
  "kind": "field",
2667
- "name": "checked",
2671
+ "name": "size",
2668
2672
  "type": {
2669
- "text": "boolean"
2673
+ "text": "ButtonSize"
2670
2674
  },
2671
- "default": "false",
2672
- "description": "Determines whether the checkbox is selected or unselected.",
2673
- "attribute": "checked",
2674
- "reflects": true
2675
+ "description": "Simplebutton size is a super set of all the sizes supported by children components.",
2676
+ "default": "32",
2677
+ "attribute": "size",
2678
+ "reflects": true,
2679
+ "inheritedFrom": {
2680
+ "name": "Buttonsimple",
2681
+ "module": "components/buttonsimple/buttonsimple.component.js"
2682
+ }
2675
2683
  },
2676
2684
  {
2677
2685
  "kind": "field",
2678
- "name": "indeterminate",
2686
+ "name": "active",
2679
2687
  "type": {
2680
2688
  "text": "boolean"
2681
2689
  },
2682
- "default": "false",
2683
- "description": "This property is used to determine the parent checkbox in a nested checkbox group.\nIf any one of the children is unselected, then the parent checkbox will be indeterminate.\nIf all children are either selected or unselected, then the parent checkbox will not be indeterminate.",
2684
- "attribute": "indeterminate",
2685
- "reflects": true
2690
+ "default": "undefined as unknown",
2691
+ "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
2692
+ "attribute": "active",
2693
+ "reflects": true,
2694
+ "inheritedFrom": {
2695
+ "name": "Buttonsimple",
2696
+ "module": "components/buttonsimple/buttonsimple.component.js"
2697
+ }
2686
2698
  },
2687
2699
  {
2688
2700
  "kind": "field",
2689
- "name": "autofocus",
2701
+ "name": "softDisabled",
2690
2702
  "type": {
2691
2703
  "text": "boolean"
2692
2704
  },
2693
- "default": "false",
2694
- "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
2695
- "attribute": "autofocus",
2696
- "reflects": true
2697
- },
2698
- {
2699
- "kind": "method",
2700
- "name": "setFormValue",
2701
- "privacy": "private",
2702
- "description": "Updates the form value to reflect the current state of the checkbox.\nIf checked, the value is set to either the user-provided value or 'on' if no value is provided.\nIf unchecked, the value is set to null."
2703
- },
2704
- {
2705
- "kind": "method",
2706
- "name": "manageRequired",
2707
- "privacy": "private",
2708
- "description": "Manages the required state of the checkbox.\nIf the checkbox is not checked and the requiredLabel property is set, then the checkbox is invalid."
2709
- },
2710
- {
2711
- "kind": "method",
2712
- "name": "toggleState",
2713
- "privacy": "private",
2714
- "return": {
2715
- "type": {
2716
- "text": "void"
2717
- }
2718
- },
2719
- "description": "Toggles the state of the checkbox element.\nIf the element is not disabled, then\nthe checked property is toggled and the indeterminate property is set to false."
2720
- },
2721
- {
2722
- "kind": "method",
2723
- "name": "handleKeyDown",
2724
- "privacy": "private",
2725
- "return": {
2726
- "type": {
2727
- "text": "void"
2728
- }
2729
- },
2730
- "parameters": [
2731
- {
2732
- "name": "event",
2733
- "type": {
2734
- "text": "KeyboardEvent"
2735
- },
2736
- "description": "The keyboard event."
2737
- }
2738
- ],
2739
- "description": "Handles the keydown event on the checkbox.\nWhen the user presses Enter, the form is submitted."
2740
- },
2741
- {
2742
- "kind": "method",
2743
- "name": "handleChange",
2744
- "privacy": "public",
2745
- "return": {
2746
- "type": {
2747
- "text": "void"
2748
- }
2749
- },
2750
- "parameters": [
2751
- {
2752
- "name": "event",
2753
- "type": {
2754
- "text": "Event"
2755
- }
2756
- }
2757
- ],
2758
- "description": "Toggles the state of the checkbox element.\nand dispatch the new change event."
2759
- },
2760
- {
2761
- "kind": "field",
2762
- "name": "renderLabelAndHelperText",
2763
- "privacy": "private"
2705
+ "default": "undefined as unknown",
2706
+ "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
2707
+ "attribute": "soft-disabled",
2708
+ "inheritedFrom": {
2709
+ "name": "Buttonsimple",
2710
+ "module": "components/buttonsimple/buttonsimple.component.js"
2711
+ }
2764
2712
  },
2765
2713
  {
2766
2714
  "kind": "field",
2767
- "name": "helpTextType",
2715
+ "name": "iconName",
2768
2716
  "type": {
2769
- "text": "ValidationType"
2717
+ "text": "IconNames | undefined"
2770
2718
  },
2771
- "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
2772
- "attribute": "help-text-type",
2773
- "reflects": true,
2774
- "default": "undefined as unknown",
2719
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
2720
+ "attribute": "icon-name",
2775
2721
  "inheritedFrom": {
2776
- "name": "FormfieldWrapper",
2777
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2722
+ "name": "IconNameMixin",
2723
+ "module": "utils/mixins/IconNameMixin.js"
2778
2724
  }
2779
2725
  },
2780
2726
  {
2781
2727
  "kind": "field",
2782
- "name": "name",
2728
+ "name": "tabIndex",
2783
2729
  "type": {
2784
- "text": "string"
2730
+ "text": "number"
2785
2731
  },
2786
- "default": "''",
2787
- "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
2788
- "attribute": "name",
2732
+ "default": "0",
2733
+ "description": "This property specifies the tab order of the element.",
2734
+ "attribute": "tabIndex",
2789
2735
  "reflects": true,
2790
2736
  "inheritedFrom": {
2791
- "name": "FormInternalsMixin",
2792
- "module": "utils/mixins/FormInternalsMixin.js"
2737
+ "name": "Buttonsimple",
2738
+ "module": "components/buttonsimple/buttonsimple.component.js"
2793
2739
  }
2794
2740
  },
2795
2741
  {
2796
2742
  "kind": "field",
2797
- "name": "value",
2743
+ "name": "disabled",
2798
2744
  "type": {
2799
- "text": "string"
2745
+ "text": "boolean"
2800
2746
  },
2801
- "default": "''",
2802
- "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
2803
- "attribute": "value",
2747
+ "default": "false",
2748
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
2749
+ "attribute": "disabled",
2804
2750
  "reflects": true,
2805
2751
  "inheritedFrom": {
2806
- "name": "FormInternalsMixin",
2807
- "module": "utils/mixins/FormInternalsMixin.js"
2752
+ "name": "Buttonsimple",
2753
+ "module": "components/buttonsimple/buttonsimple.component.js"
2808
2754
  }
2809
2755
  },
2810
2756
  {
2811
2757
  "kind": "field",
2812
- "name": "validationMessage",
2758
+ "name": "type",
2813
2759
  "type": {
2814
- "text": "string | undefined"
2760
+ "text": "ButtonType"
2815
2761
  },
2816
- "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
2817
- "attribute": "validation-message",
2762
+ "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
2763
+ "default": "button",
2764
+ "attribute": "type",
2818
2765
  "reflects": true,
2819
2766
  "inheritedFrom": {
2820
- "name": "FormInternalsMixin",
2821
- "module": "utils/mixins/FormInternalsMixin.js"
2767
+ "name": "Buttonsimple",
2768
+ "module": "components/buttonsimple/buttonsimple.component.js"
2822
2769
  }
2823
2770
  },
2824
2771
  {
2825
- "kind": "field",
2826
- "name": "validity",
2827
- "type": {
2828
- "text": "ValidityState"
2829
- },
2830
- "readonly": true,
2772
+ "kind": "method",
2773
+ "name": "executeAction",
2774
+ "privacy": "protected",
2831
2775
  "inheritedFrom": {
2832
- "name": "FormInternalsMixin",
2833
- "module": "utils/mixins/FormInternalsMixin.js"
2776
+ "name": "Buttonsimple",
2777
+ "module": "components/buttonsimple/buttonsimple.component.js"
2834
2778
  }
2835
2779
  },
2836
2780
  {
2837
- "kind": "field",
2838
- "name": "willValidate",
2839
- "readonly": true,
2781
+ "kind": "method",
2782
+ "name": "setActive",
2783
+ "privacy": "protected",
2784
+ "parameters": [
2785
+ {
2786
+ "name": "element",
2787
+ "type": {
2788
+ "text": "HTMLElement"
2789
+ },
2790
+ "description": "The button element"
2791
+ },
2792
+ {
2793
+ "name": "active",
2794
+ "type": {
2795
+ "text": "boolean"
2796
+ },
2797
+ "description": "The active state of the element"
2798
+ }
2799
+ ],
2800
+ "description": "Sets the aria-pressed attribute based on the active state of the button.",
2840
2801
  "inheritedFrom": {
2841
- "name": "FormInternalsMixin",
2842
- "module": "utils/mixins/FormInternalsMixin.js"
2802
+ "name": "Buttonsimple",
2803
+ "module": "components/buttonsimple/buttonsimple.component.js"
2843
2804
  }
2844
2805
  },
2845
2806
  {
2846
2807
  "kind": "method",
2847
- "name": "setValidity",
2848
- "description": "Sets the validity of the input field based on the input field's validity.",
2849
- "return": {
2850
- "type": {
2851
- "text": ""
2808
+ "name": "setSoftDisabled",
2809
+ "privacy": "private",
2810
+ "parameters": [
2811
+ {
2812
+ "name": "element",
2813
+ "type": {
2814
+ "text": "HTMLElement"
2815
+ },
2816
+ "description": "The button element."
2817
+ },
2818
+ {
2819
+ "name": "softDisabled",
2820
+ "type": {
2821
+ "text": "boolean"
2822
+ },
2823
+ "description": "The soft-disabled state."
2852
2824
  }
2853
- },
2825
+ ],
2826
+ "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
2854
2827
  "inheritedFrom": {
2855
- "name": "FormInternalsMixin",
2856
- "module": "utils/mixins/FormInternalsMixin.js"
2828
+ "name": "Buttonsimple",
2829
+ "module": "components/buttonsimple/buttonsimple.component.js"
2857
2830
  }
2858
2831
  },
2859
2832
  {
2860
2833
  "kind": "method",
2861
- "name": "checkValidity",
2862
- "return": {
2863
- "type": {
2864
- "text": "boolean"
2834
+ "name": "setDisabled",
2835
+ "privacy": "private",
2836
+ "parameters": [
2837
+ {
2838
+ "name": "element",
2839
+ "type": {
2840
+ "text": "HTMLElement"
2841
+ },
2842
+ "description": "The button element."
2843
+ },
2844
+ {
2845
+ "name": "disabled",
2846
+ "type": {
2847
+ "text": "boolean"
2848
+ },
2849
+ "description": "The disabled state."
2865
2850
  }
2866
- },
2851
+ ],
2852
+ "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
2867
2853
  "inheritedFrom": {
2868
- "name": "FormInternalsMixin",
2869
- "module": "utils/mixins/FormInternalsMixin.js"
2854
+ "name": "Buttonsimple",
2855
+ "module": "components/buttonsimple/buttonsimple.component.js"
2870
2856
  }
2871
2857
  },
2872
2858
  {
2873
2859
  "kind": "method",
2874
- "name": "reportValidity",
2860
+ "name": "triggerClickEvent",
2861
+ "privacy": "private",
2875
2862
  "inheritedFrom": {
2876
- "name": "FormInternalsMixin",
2877
- "module": "utils/mixins/FormInternalsMixin.js"
2863
+ "name": "Buttonsimple",
2864
+ "module": "components/buttonsimple/buttonsimple.component.js"
2878
2865
  }
2879
2866
  },
2880
2867
  {
2881
- "kind": "field",
2882
- "name": "id",
2883
- "type": {
2884
- "text": "string"
2885
- },
2886
- "default": "`mdc-input-${uuidv4()}`",
2887
- "description": "The unique id of the input field. It is used to link the input field with the label.",
2888
- "attribute": "id",
2868
+ "kind": "method",
2869
+ "name": "handleBlur",
2870
+ "privacy": "private",
2871
+ "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
2889
2872
  "inheritedFrom": {
2890
- "name": "FormfieldWrapper",
2891
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2873
+ "name": "Buttonsimple",
2874
+ "module": "components/buttonsimple/buttonsimple.component.js"
2892
2875
  }
2893
2876
  },
2894
2877
  {
2895
- "kind": "field",
2896
- "name": "dataAriaLabel",
2897
- "type": {
2898
- "text": "string | null"
2899
- },
2900
- "default": "null",
2901
- "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
2902
- "attribute": "data-aria-label",
2903
- "reflects": true,
2878
+ "kind": "method",
2879
+ "name": "handleKeyDown",
2880
+ "privacy": "private",
2881
+ "parameters": [
2882
+ {
2883
+ "name": "event",
2884
+ "type": {
2885
+ "text": "KeyboardEvent"
2886
+ },
2887
+ "description": "The keyboard event."
2888
+ }
2889
+ ],
2890
+ "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.",
2904
2891
  "inheritedFrom": {
2905
- "name": "DataAriaLabelMixin",
2906
- "module": "utils/mixins/DataAriaLabelMixin.js"
2892
+ "name": "Buttonsimple",
2893
+ "module": "components/buttonsimple/buttonsimple.component.js"
2907
2894
  }
2908
2895
  },
2909
2896
  {
2910
- "kind": "field",
2911
- "name": "disabled",
2912
- "type": {
2913
- "text": "boolean"
2914
- },
2915
- "default": "false",
2916
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
2917
- "attribute": "disabled",
2918
- "reflects": true,
2897
+ "kind": "method",
2898
+ "name": "handleKeyUp",
2899
+ "privacy": "private",
2900
+ "parameters": [
2901
+ {
2902
+ "name": "event",
2903
+ "type": {
2904
+ "text": "KeyboardEvent"
2905
+ },
2906
+ "description": "The keyboard event."
2907
+ }
2908
+ ],
2909
+ "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
2919
2910
  "inheritedFrom": {
2920
- "name": "DisabledMixin",
2921
- "module": "utils/mixins/DisabledMixin.js"
2911
+ "name": "Buttonsimple",
2912
+ "module": "components/buttonsimple/buttonsimple.component.js"
2922
2913
  }
2914
+ }
2915
+ ],
2916
+ "attributes": [
2917
+ {
2918
+ "name": "color",
2919
+ "type": {
2920
+ "text": "ColorType"
2921
+ },
2922
+ "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- pink\n- purple\n- slate\n- violet",
2923
+ "default": "default",
2924
+ "fieldName": "color"
2923
2925
  },
2924
2926
  {
2925
- "kind": "field",
2926
2927
  "name": "label",
2927
2928
  "type": {
2928
- "text": "string | undefined"
2929
+ "text": "string"
2929
2930
  },
2930
- "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
2931
- "attribute": "label",
2932
- "reflects": true,
2933
- "inheritedFrom": {
2934
- "name": "FormfieldWrapper",
2935
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2936
- }
2931
+ "default": "''",
2932
+ "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.",
2933
+ "fieldName": "label"
2937
2934
  },
2938
2935
  {
2939
- "kind": "field",
2940
- "name": "requiredLabel",
2936
+ "name": "icon-name",
2941
2937
  "type": {
2942
- "text": "string | undefined"
2938
+ "text": "IconNames | undefined"
2943
2939
  },
2944
- "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
2945
- "attribute": "required-label",
2946
- "reflects": true,
2940
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
2941
+ "fieldName": "iconName",
2947
2942
  "inheritedFrom": {
2948
- "name": "FormfieldWrapper",
2949
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2943
+ "name": "IconNameMixin",
2944
+ "module": "src/utils/mixins/IconNameMixin.ts"
2950
2945
  }
2951
2946
  },
2952
2947
  {
2953
- "kind": "field",
2954
- "name": "helpText",
2948
+ "name": "tabIndex",
2955
2949
  "type": {
2956
- "text": "string | undefined"
2950
+ "text": "number"
2957
2951
  },
2958
- "description": "The help text that is displayed below the input field.",
2959
- "attribute": "help-text",
2960
- "reflects": true,
2952
+ "default": "0",
2953
+ "description": "This property specifies the tab order of the element.",
2954
+ "fieldName": "tabIndex",
2961
2955
  "inheritedFrom": {
2962
- "name": "FormfieldWrapper",
2963
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2956
+ "name": "Buttonsimple",
2957
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
2964
2958
  }
2965
2959
  },
2966
2960
  {
2967
- "kind": "method",
2968
- "name": "renderLabelElement",
2969
- "privacy": "protected",
2970
- "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
2971
- "return": {
2972
- "type": {
2973
- "text": ""
2974
- }
2961
+ "name": "disabled",
2962
+ "type": {
2963
+ "text": "boolean"
2975
2964
  },
2965
+ "default": "false",
2966
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
2967
+ "fieldName": "disabled",
2976
2968
  "inheritedFrom": {
2977
- "name": "FormfieldWrapper",
2978
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2969
+ "name": "Buttonsimple",
2970
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
2979
2971
  }
2980
2972
  },
2981
2973
  {
2982
- "kind": "method",
2983
- "name": "renderRequiredLabel",
2984
- "privacy": "protected",
2974
+ "name": "active",
2975
+ "type": {
2976
+ "text": "boolean"
2977
+ },
2978
+ "default": "false",
2979
+ "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
2980
+ "fieldName": "active",
2985
2981
  "inheritedFrom": {
2986
- "name": "FormfieldWrapper",
2987
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2982
+ "name": "Buttonsimple",
2983
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
2988
2984
  }
2989
2985
  },
2990
2986
  {
2991
- "kind": "method",
2992
- "name": "renderHelpTextIcon",
2993
- "privacy": "protected",
2994
- "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
2995
- "return": {
2996
- "type": {
2997
- "text": ""
2998
- }
2987
+ "name": "soft-disabled",
2988
+ "type": {
2989
+ "text": "boolean"
2999
2990
  },
2991
+ "default": "false",
2992
+ "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
2993
+ "fieldName": "softDisabled",
3000
2994
  "inheritedFrom": {
3001
- "name": "FormfieldWrapper",
3002
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2995
+ "name": "Buttonsimple",
2996
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
3003
2997
  }
3004
2998
  },
3005
2999
  {
3006
- "kind": "method",
3007
- "name": "renderHelpText",
3008
- "privacy": "protected",
3009
- "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
3010
- "return": {
3011
- "type": {
3012
- "text": ""
3013
- }
3000
+ "name": "size",
3001
+ "type": {
3002
+ "text": "ButtonSize"
3014
3003
  },
3004
+ "description": "Simplebutton size is a super set of all the sizes supported by children components.",
3005
+ "default": "32",
3006
+ "fieldName": "size",
3015
3007
  "inheritedFrom": {
3016
- "name": "FormfieldWrapper",
3017
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3008
+ "name": "Buttonsimple",
3009
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
3018
3010
  }
3019
3011
  },
3020
3012
  {
3021
- "kind": "method",
3022
- "name": "renderLabel",
3023
- "privacy": "protected",
3024
- "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
3025
- "return": {
3026
- "type": {
3027
- "text": ""
3028
- }
3029
- },
3013
+ "name": "role",
3014
+ "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
3015
+ "default": "button",
3016
+ "fieldName": "role",
3030
3017
  "inheritedFrom": {
3031
- "name": "FormfieldWrapper",
3032
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3018
+ "name": "Buttonsimple",
3019
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
3033
3020
  }
3034
3021
  },
3035
3022
  {
3036
- "kind": "method",
3037
- "name": "renderHelperText",
3038
- "privacy": "protected",
3039
- "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
3040
- "return": {
3041
- "type": {
3042
- "text": ""
3043
- }
3023
+ "name": "type",
3024
+ "type": {
3025
+ "text": "ButtonType"
3044
3026
  },
3027
+ "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
3028
+ "default": "button",
3029
+ "fieldName": "type",
3045
3030
  "inheritedFrom": {
3046
- "name": "FormfieldWrapper",
3047
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3031
+ "name": "Buttonsimple",
3032
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
3048
3033
  }
3049
3034
  }
3050
3035
  ],
3036
+ "mixins": [
3037
+ {
3038
+ "name": "IconNameMixin",
3039
+ "module": "/src/utils/mixins/IconNameMixin"
3040
+ }
3041
+ ],
3042
+ "superclass": {
3043
+ "name": "Buttonsimple",
3044
+ "module": "/src/components/buttonsimple/buttonsimple.component"
3045
+ },
3046
+ "tagName": "mdc-chip",
3047
+ "jsDoc": "/**\n * mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.\n * Consumers can wrap this component around a tooltip to provide additional context.\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>,\n * including empty spaces to split words.\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-chip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the chip.\n * @cssproperty --mdc-chip-border-color - The border color of the chip.\n * @cssproperty --mdc-chip-background-color - The background color of the chip.\n *\n */",
3048
+ "customElement": true,
3051
3049
  "events": [
3052
3050
  {
3053
- "type": {
3054
- "text": "EventConstructor"
3051
+ "description": "(React: onClick) This event is dispatched when the button is clicked.",
3052
+ "name": "click",
3053
+ "reactName": "onClick",
3054
+ "eventName": "ClickEvent",
3055
+ "inheritedFrom": {
3056
+ "name": "Buttonsimple",
3057
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
3055
3058
  }
3056
3059
  },
3057
3060
  {
3058
- "description": "(React: onChange) Event that gets dispatched when the checkbox state changes.",
3059
- "name": "change",
3060
- "reactName": "onChange",
3061
- "eventName": "ChangeEvent"
3061
+ "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
3062
+ "name": "keydown",
3063
+ "reactName": "onKeyDown",
3064
+ "eventName": "KeydownEvent",
3065
+ "inheritedFrom": {
3066
+ "name": "Buttonsimple",
3067
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
3068
+ }
3062
3069
  },
3063
3070
  {
3064
- "description": "(React: onFocus) Event that gets dispatched when the checkbox receives focus.",
3071
+ "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
3072
+ "name": "keyup",
3073
+ "reactName": "onKeyUp",
3074
+ "eventName": "KeyupEvent",
3075
+ "inheritedFrom": {
3076
+ "name": "Buttonsimple",
3077
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
3078
+ }
3079
+ },
3080
+ {
3081
+ "description": "(React: onFocus) This event is dispatched when the button receives focus.",
3065
3082
  "name": "focus",
3066
3083
  "reactName": "onFocus",
3067
- "eventName": "FocusEvent"
3084
+ "eventName": "FocusEvent",
3085
+ "inheritedFrom": {
3086
+ "name": "Buttonsimple",
3087
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
3088
+ }
3068
3089
  }
3069
- ],
3070
- "attributes": [
3090
+ ]
3091
+ }
3092
+ ],
3093
+ "exports": [
3094
+ {
3095
+ "kind": "js",
3096
+ "name": "default",
3097
+ "declaration": {
3098
+ "name": "Chip",
3099
+ "module": "components/chip/chip.component.js"
3100
+ }
3101
+ }
3102
+ ]
3103
+ },
3104
+ {
3105
+ "kind": "javascript-module",
3106
+ "path": "components/checkbox/checkbox.component.js",
3107
+ "declarations": [
3108
+ {
3109
+ "kind": "class",
3110
+ "description": "Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selections in lists.\n\nA checkbox component contains an optional label and an optional helper text.\n\nTo create a group of checkboxes, use the FormFieldGroup component.",
3111
+ "name": "Checkbox",
3112
+ "cssProperties": [
3113
+ {
3114
+ "description": "Allows customization of the background color on hover.",
3115
+ "name": "--mdc-checkbox-background-color-hover"
3116
+ },
3117
+ {
3118
+ "description": "Border color in high contrast.",
3119
+ "name": "--mdc-checkbox-border-color"
3120
+ },
3121
+ {
3122
+ "description": "Background color for a selected checkbox.",
3123
+ "name": "--mdc-checkbox-checked-background-color"
3124
+ },
3125
+ {
3126
+ "description": "Background color for a selected checkbox when hovered.",
3127
+ "name": "--mdc-checkbox-checked-background-color-hover"
3128
+ },
3129
+ {
3130
+ "description": "Background color for a selected checkbox when pressed.",
3131
+ "name": "--mdc-checkbox-checked-pressed-icon-color"
3132
+ },
3071
3133
  {
3134
+ "description": "Background color for a disabled checkbox.",
3135
+ "name": "--mdc-checkbox-disabled-background-color"
3136
+ },
3137
+ {
3138
+ "description": "Border color for a disabled checkbox.",
3139
+ "name": "--mdc-checkbox-disabled-border-color"
3140
+ },
3141
+ {
3142
+ "description": "Background color for a disabled, selected checkbox.",
3143
+ "name": "--mdc-checkbox-disabled-checked-icon-color"
3144
+ },
3145
+ {
3146
+ "description": "Icon color for a disabled checkbox.",
3147
+ "name": "--mdc-checkbox-disabled-icon-color"
3148
+ },
3149
+ {
3150
+ "description": "Background color for an unselected checkbox.",
3151
+ "name": "--mdc-checkbox-icon-background-color"
3152
+ },
3153
+ {
3154
+ "description": "Default background color for an unselected checkbox.",
3155
+ "name": "--mdc-checkbox-icon-border-color"
3156
+ },
3157
+ {
3158
+ "description": "Icon color for an unselected checkbox.",
3159
+ "name": "--mdc-checkbox-icon-color"
3160
+ },
3161
+ {
3162
+ "description": "Background color for a selected checkbox when pressed.",
3163
+ "name": "--mdc-checkbox-pressed-icon-color"
3164
+ }
3165
+ ],
3166
+ "members": [
3167
+ {
3168
+ "kind": "field",
3072
3169
  "name": "checked",
3073
3170
  "type": {
3074
3171
  "text": "boolean"
3075
3172
  },
3076
3173
  "default": "false",
3077
3174
  "description": "Determines whether the checkbox is selected or unselected.",
3078
- "fieldName": "checked"
3175
+ "attribute": "checked",
3176
+ "reflects": true
3079
3177
  },
3080
3178
  {
3179
+ "kind": "field",
3081
3180
  "name": "indeterminate",
3082
3181
  "type": {
3083
3182
  "text": "boolean"
3084
3183
  },
3085
3184
  "default": "false",
3086
3185
  "description": "This property is used to determine the parent checkbox in a nested checkbox group.\nIf any one of the children is unselected, then the parent checkbox will be indeterminate.\nIf all children are either selected or unselected, then the parent checkbox will not be indeterminate.",
3087
- "fieldName": "indeterminate"
3186
+ "attribute": "indeterminate",
3187
+ "reflects": true
3088
3188
  },
3089
3189
  {
3190
+ "kind": "field",
3090
3191
  "name": "autofocus",
3091
3192
  "type": {
3092
3193
  "text": "boolean"
3093
3194
  },
3094
3195
  "default": "false",
3095
3196
  "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
3096
- "fieldName": "autofocus"
3197
+ "attribute": "autofocus",
3198
+ "reflects": true
3097
3199
  },
3098
3200
  {
3099
- "name": "name",
3100
- "type": {
3101
- "text": "string"
3102
- },
3103
- "default": "''",
3104
- "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
3105
- "fieldName": "name",
3106
- "inheritedFrom": {
3107
- "name": "FormInternalsMixin",
3108
- "module": "src/utils/mixins/FormInternalsMixin.ts"
3109
- }
3201
+ "kind": "method",
3202
+ "name": "setFormValue",
3203
+ "privacy": "private",
3204
+ "description": "Updates the form value to reflect the current state of the checkbox.\nIf checked, the value is set to either the user-provided value or 'on' if no value is provided.\nIf unchecked, the value is set to null."
3110
3205
  },
3111
3206
  {
3112
- "name": "value",
3113
- "type": {
3114
- "text": "string"
3115
- },
3116
- "default": "''",
3117
- "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
3118
- "fieldName": "value",
3119
- "inheritedFrom": {
3120
- "name": "FormInternalsMixin",
3121
- "module": "src/utils/mixins/FormInternalsMixin.ts"
3122
- }
3207
+ "kind": "method",
3208
+ "name": "manageRequired",
3209
+ "privacy": "private",
3210
+ "description": "Manages the required state of the checkbox.\nIf the checkbox is not checked and the requiredLabel property is set, then the checkbox is invalid."
3123
3211
  },
3124
3212
  {
3125
- "name": "validation-message",
3126
- "type": {
3127
- "text": "string | undefined"
3213
+ "kind": "method",
3214
+ "name": "toggleState",
3215
+ "privacy": "private",
3216
+ "return": {
3217
+ "type": {
3218
+ "text": "void"
3219
+ }
3128
3220
  },
3129
- "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
3130
- "fieldName": "validationMessage",
3131
- "inheritedFrom": {
3132
- "name": "FormInternalsMixin",
3133
- "module": "src/utils/mixins/FormInternalsMixin.ts"
3134
- }
3221
+ "description": "Toggles the state of the checkbox element.\nIf the element is not disabled, then\nthe checked property is toggled and the indeterminate property is set to false."
3135
3222
  },
3136
3223
  {
3137
- "name": "data-aria-label",
3138
- "type": {
3139
- "text": "string | null"
3224
+ "kind": "method",
3225
+ "name": "handleKeyDown",
3226
+ "privacy": "private",
3227
+ "return": {
3228
+ "type": {
3229
+ "text": "void"
3230
+ }
3140
3231
  },
3141
- "default": "null",
3142
- "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
3143
- "fieldName": "dataAriaLabel",
3144
- "inheritedFrom": {
3145
- "name": "DataAriaLabelMixin",
3146
- "module": "src/utils/mixins/DataAriaLabelMixin.ts"
3147
- }
3232
+ "parameters": [
3233
+ {
3234
+ "name": "event",
3235
+ "type": {
3236
+ "text": "KeyboardEvent"
3237
+ },
3238
+ "description": "The keyboard event."
3239
+ }
3240
+ ],
3241
+ "description": "Handles the keydown event on the checkbox.\nWhen the user presses Enter, the form is submitted."
3148
3242
  },
3149
3243
  {
3150
- "name": "disabled",
3151
- "type": {
3152
- "text": "boolean"
3244
+ "kind": "method",
3245
+ "name": "handleChange",
3246
+ "privacy": "public",
3247
+ "return": {
3248
+ "type": {
3249
+ "text": "void"
3250
+ }
3153
3251
  },
3154
- "default": "false",
3155
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
3156
- "fieldName": "disabled",
3157
- "inheritedFrom": {
3158
- "name": "DisabledMixin",
3159
- "module": "src/utils/mixins/DisabledMixin.ts"
3160
- }
3252
+ "parameters": [
3253
+ {
3254
+ "name": "event",
3255
+ "type": {
3256
+ "text": "Event"
3257
+ }
3258
+ }
3259
+ ],
3260
+ "description": "Toggles the state of the checkbox element.\nand dispatch the new change event."
3161
3261
  },
3162
3262
  {
3163
- "name": "label",
3164
- "type": {
3165
- "text": "string | undefined"
3166
- },
3167
- "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
3168
- "fieldName": "label",
3169
- "inheritedFrom": {
3170
- "name": "FormfieldWrapper",
3171
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
3172
- }
3263
+ "kind": "field",
3264
+ "name": "renderLabelAndHelperText",
3265
+ "privacy": "private"
3173
3266
  },
3174
3267
  {
3175
- "name": "required-label",
3268
+ "kind": "field",
3269
+ "name": "helpTextType",
3176
3270
  "type": {
3177
- "text": "string | undefined"
3271
+ "text": "ValidationType"
3178
3272
  },
3179
- "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
3180
- "fieldName": "requiredLabel",
3273
+ "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
3274
+ "attribute": "help-text-type",
3275
+ "reflects": true,
3276
+ "default": "undefined as unknown",
3181
3277
  "inheritedFrom": {
3182
3278
  "name": "FormfieldWrapper",
3183
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
3279
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3184
3280
  }
3185
3281
  },
3186
3282
  {
3187
- "name": "id",
3283
+ "kind": "field",
3284
+ "name": "name",
3188
3285
  "type": {
3189
3286
  "text": "string"
3190
3287
  },
3191
3288
  "default": "''",
3192
- "description": "The unique id of the input field. It is used to link the input field with the label.",
3193
- "fieldName": "id",
3289
+ "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
3290
+ "attribute": "name",
3291
+ "reflects": true,
3194
3292
  "inheritedFrom": {
3195
- "name": "FormfieldWrapper",
3196
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
3293
+ "name": "FormInternalsMixin",
3294
+ "module": "utils/mixins/FormInternalsMixin.js"
3197
3295
  }
3198
3296
  },
3199
3297
  {
3200
- "name": "help-text-type",
3298
+ "kind": "field",
3299
+ "name": "value",
3201
3300
  "type": {
3202
- "text": "ValidationType"
3301
+ "text": "string"
3203
3302
  },
3204
- "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
3205
- "fieldName": "helpTextType",
3303
+ "default": "''",
3304
+ "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
3305
+ "attribute": "value",
3306
+ "reflects": true,
3206
3307
  "inheritedFrom": {
3207
- "name": "FormfieldWrapper",
3208
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
3308
+ "name": "FormInternalsMixin",
3309
+ "module": "utils/mixins/FormInternalsMixin.js"
3209
3310
  }
3210
3311
  },
3211
3312
  {
3212
- "name": "help-text",
3313
+ "kind": "field",
3314
+ "name": "validationMessage",
3213
3315
  "type": {
3214
3316
  "text": "string | undefined"
3215
3317
  },
3216
- "description": "The help text that is displayed below the input field.",
3217
- "fieldName": "helpText",
3218
- "inheritedFrom": {
3219
- "name": "FormfieldWrapper",
3220
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
3221
- }
3222
- }
3223
- ],
3224
- "mixins": [
3225
- {
3226
- "name": "FormInternalsMixin",
3227
- "module": "/src/utils/mixins/FormInternalsMixin"
3228
- },
3229
- {
3230
- "name": "DataAriaLabelMixin",
3231
- "module": "/src/utils/mixins/DataAriaLabelMixin"
3232
- }
3233
- ],
3234
- "superclass": {
3235
- "name": "FormfieldWrapper",
3236
- "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
3237
- },
3238
- "tagName": "mdc-checkbox",
3239
- "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-icon\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-border-color - Border color in high contrast.\n * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.\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-disabled-background-color - Background color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.\n * @cssproperty --mdc-checkbox-disabled-icon-color - Icon color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-icon-background-color - Background color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-icon-border-color - Default background color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-icon-color - Icon color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.\n */",
3240
- "customElement": true,
3241
- "slots": [
3242
- {
3243
- "description": "slot to add the label info icon",
3244
- "name": "label-info",
3318
+ "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
3319
+ "attribute": "validation-message",
3320
+ "reflects": true,
3245
3321
  "inheritedFrom": {
3246
- "name": "FormfieldWrapper",
3247
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
3322
+ "name": "FormInternalsMixin",
3323
+ "module": "utils/mixins/FormInternalsMixin.js"
3248
3324
  }
3249
- }
3250
- ]
3251
- }
3252
- ],
3253
- "exports": [
3254
- {
3255
- "kind": "js",
3256
- "name": "default",
3257
- "declaration": {
3258
- "name": "Checkbox",
3259
- "module": "components/checkbox/checkbox.component.js"
3260
- }
3261
- }
3262
- ]
3263
- },
3264
- {
3265
- "kind": "javascript-module",
3266
- "path": "components/chip/chip.component.js",
3267
- "declarations": [
3268
- {
3269
- "kind": "class",
3270
- "description": "mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.\nConsumers can wrap this component around a tooltip to provide additional context.\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>,\nincluding empty spaces to split words.\n\nThis component is built by extending Buttonsimple.",
3271
- "name": "Chip",
3272
- "cssProperties": [
3273
- {
3274
- "description": "The color of the chip.",
3275
- "name": "--mdc-chip-color"
3276
3325
  },
3277
- {
3278
- "description": "The border color of the chip.",
3279
- "name": "--mdc-chip-border-color"
3280
- },
3281
- {
3282
- "description": "The background color of the chip.",
3283
- "name": "--mdc-chip-background-color"
3284
- }
3285
- ],
3286
- "members": [
3287
3326
  {
3288
3327
  "kind": "field",
3289
- "name": "color",
3290
- "type": {
3291
- "text": "ColorType"
3292
- },
3293
- "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- pink\n- purple\n- slate\n- violet",
3294
- "default": "default",
3295
- "attribute": "color",
3296
- "reflects": true
3297
- },
3298
- {
3299
- "kind": "field",
3300
- "name": "label",
3328
+ "name": "validity",
3301
3329
  "type": {
3302
- "text": "string"
3330
+ "text": "ValidityState"
3303
3331
  },
3304
- "default": "''",
3305
- "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.",
3306
- "attribute": "label"
3307
- },
3308
- {
3309
- "kind": "method",
3310
- "name": "renderIcon",
3311
- "privacy": "private",
3312
- "description": "Renders the icon element if available.",
3313
- "return": {
3314
- "type": {
3315
- "text": ""
3316
- }
3332
+ "readonly": true,
3333
+ "inheritedFrom": {
3334
+ "name": "FormInternalsMixin",
3335
+ "module": "utils/mixins/FormInternalsMixin.js"
3317
3336
  }
3318
3337
  },
3319
3338
  {
3320
3339
  "kind": "field",
3321
- "name": "role",
3322
- "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
3323
- "default": "button",
3324
- "attribute": "role",
3325
- "reflects": true,
3340
+ "name": "willValidate",
3341
+ "readonly": true,
3326
3342
  "inheritedFrom": {
3327
- "name": "Buttonsimple",
3328
- "module": "components/buttonsimple/buttonsimple.component.js"
3343
+ "name": "FormInternalsMixin",
3344
+ "module": "utils/mixins/FormInternalsMixin.js"
3329
3345
  }
3330
3346
  },
3331
3347
  {
3332
- "kind": "field",
3333
- "name": "size",
3334
- "type": {
3335
- "text": "ButtonSize"
3348
+ "kind": "method",
3349
+ "name": "setValidity",
3350
+ "description": "Sets the validity of the input field based on the input field's validity.",
3351
+ "return": {
3352
+ "type": {
3353
+ "text": ""
3354
+ }
3336
3355
  },
3337
- "description": "Simplebutton size is a super set of all the sizes supported by children components.",
3338
- "default": "32",
3339
- "attribute": "size",
3340
- "reflects": true,
3341
3356
  "inheritedFrom": {
3342
- "name": "Buttonsimple",
3343
- "module": "components/buttonsimple/buttonsimple.component.js"
3357
+ "name": "FormInternalsMixin",
3358
+ "module": "utils/mixins/FormInternalsMixin.js"
3344
3359
  }
3345
3360
  },
3346
3361
  {
3347
- "kind": "field",
3348
- "name": "active",
3349
- "type": {
3350
- "text": "boolean"
3362
+ "kind": "method",
3363
+ "name": "checkValidity",
3364
+ "return": {
3365
+ "type": {
3366
+ "text": "boolean"
3367
+ }
3351
3368
  },
3352
- "default": "undefined as unknown",
3353
- "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
3354
- "attribute": "active",
3355
- "reflects": true,
3356
3369
  "inheritedFrom": {
3357
- "name": "Buttonsimple",
3358
- "module": "components/buttonsimple/buttonsimple.component.js"
3370
+ "name": "FormInternalsMixin",
3371
+ "module": "utils/mixins/FormInternalsMixin.js"
3359
3372
  }
3360
3373
  },
3361
3374
  {
3362
- "kind": "field",
3363
- "name": "softDisabled",
3364
- "type": {
3365
- "text": "boolean"
3366
- },
3367
- "default": "undefined as unknown",
3368
- "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
3369
- "attribute": "soft-disabled",
3375
+ "kind": "method",
3376
+ "name": "reportValidity",
3370
3377
  "inheritedFrom": {
3371
- "name": "Buttonsimple",
3372
- "module": "components/buttonsimple/buttonsimple.component.js"
3378
+ "name": "FormInternalsMixin",
3379
+ "module": "utils/mixins/FormInternalsMixin.js"
3373
3380
  }
3374
3381
  },
3375
3382
  {
3376
3383
  "kind": "field",
3377
- "name": "iconName",
3384
+ "name": "id",
3378
3385
  "type": {
3379
- "text": "IconNames | undefined"
3386
+ "text": "string"
3380
3387
  },
3381
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
3382
- "attribute": "icon-name",
3388
+ "default": "`mdc-input-${uuidv4()}`",
3389
+ "description": "The unique id of the input field. It is used to link the input field with the label.",
3390
+ "attribute": "id",
3383
3391
  "inheritedFrom": {
3384
- "name": "IconNameMixin",
3385
- "module": "utils/mixins/IconNameMixin.js"
3392
+ "name": "FormfieldWrapper",
3393
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3386
3394
  }
3387
3395
  },
3388
3396
  {
3389
3397
  "kind": "field",
3390
- "name": "tabIndex",
3398
+ "name": "dataAriaLabel",
3391
3399
  "type": {
3392
- "text": "number"
3400
+ "text": "string | null"
3393
3401
  },
3394
- "default": "0",
3395
- "description": "This property specifies the tab order of the element.",
3396
- "attribute": "tabIndex",
3402
+ "default": "null",
3403
+ "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
3404
+ "attribute": "data-aria-label",
3397
3405
  "reflects": true,
3398
3406
  "inheritedFrom": {
3399
- "name": "Buttonsimple",
3400
- "module": "components/buttonsimple/buttonsimple.component.js"
3407
+ "name": "DataAriaLabelMixin",
3408
+ "module": "utils/mixins/DataAriaLabelMixin.js"
3401
3409
  }
3402
3410
  },
3403
3411
  {
@@ -3411,212 +3419,233 @@
3411
3419
  "attribute": "disabled",
3412
3420
  "reflects": true,
3413
3421
  "inheritedFrom": {
3414
- "name": "Buttonsimple",
3415
- "module": "components/buttonsimple/buttonsimple.component.js"
3422
+ "name": "DisabledMixin",
3423
+ "module": "utils/mixins/DisabledMixin.js"
3416
3424
  }
3417
3425
  },
3418
3426
  {
3419
3427
  "kind": "field",
3420
- "name": "type",
3428
+ "name": "label",
3421
3429
  "type": {
3422
- "text": "ButtonType"
3430
+ "text": "string | undefined"
3423
3431
  },
3424
- "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
3425
- "default": "button",
3426
- "attribute": "type",
3432
+ "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
3433
+ "attribute": "label",
3427
3434
  "reflects": true,
3428
3435
  "inheritedFrom": {
3429
- "name": "Buttonsimple",
3430
- "module": "components/buttonsimple/buttonsimple.component.js"
3436
+ "name": "FormfieldWrapper",
3437
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3431
3438
  }
3432
3439
  },
3433
3440
  {
3434
- "kind": "method",
3435
- "name": "executeAction",
3436
- "privacy": "protected",
3441
+ "kind": "field",
3442
+ "name": "requiredLabel",
3443
+ "type": {
3444
+ "text": "string | undefined"
3445
+ },
3446
+ "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
3447
+ "attribute": "required-label",
3448
+ "reflects": true,
3437
3449
  "inheritedFrom": {
3438
- "name": "Buttonsimple",
3439
- "module": "components/buttonsimple/buttonsimple.component.js"
3450
+ "name": "FormfieldWrapper",
3451
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3440
3452
  }
3441
3453
  },
3442
3454
  {
3443
- "kind": "method",
3444
- "name": "setActive",
3445
- "privacy": "protected",
3446
- "parameters": [
3447
- {
3448
- "name": "element",
3449
- "type": {
3450
- "text": "HTMLElement"
3451
- },
3452
- "description": "The button element"
3453
- },
3454
- {
3455
- "name": "active",
3456
- "type": {
3457
- "text": "boolean"
3458
- },
3459
- "description": "The active state of the element"
3460
- }
3461
- ],
3462
- "description": "Sets the aria-pressed attribute based on the active state of the button.",
3455
+ "kind": "field",
3456
+ "name": "helpText",
3457
+ "type": {
3458
+ "text": "string | undefined"
3459
+ },
3460
+ "description": "The help text that is displayed below the input field.",
3461
+ "attribute": "help-text",
3462
+ "reflects": true,
3463
3463
  "inheritedFrom": {
3464
- "name": "Buttonsimple",
3465
- "module": "components/buttonsimple/buttonsimple.component.js"
3464
+ "name": "FormfieldWrapper",
3465
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3466
3466
  }
3467
3467
  },
3468
3468
  {
3469
3469
  "kind": "method",
3470
- "name": "setSoftDisabled",
3471
- "privacy": "private",
3472
- "parameters": [
3473
- {
3474
- "name": "element",
3475
- "type": {
3476
- "text": "HTMLElement"
3477
- },
3478
- "description": "The button element."
3479
- },
3480
- {
3481
- "name": "softDisabled",
3482
- "type": {
3483
- "text": "boolean"
3484
- },
3485
- "description": "The soft-disabled state."
3470
+ "name": "renderLabelElement",
3471
+ "privacy": "protected",
3472
+ "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
3473
+ "return": {
3474
+ "type": {
3475
+ "text": ""
3486
3476
  }
3487
- ],
3488
- "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
3477
+ },
3489
3478
  "inheritedFrom": {
3490
- "name": "Buttonsimple",
3491
- "module": "components/buttonsimple/buttonsimple.component.js"
3479
+ "name": "FormfieldWrapper",
3480
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3492
3481
  }
3493
3482
  },
3494
3483
  {
3495
3484
  "kind": "method",
3496
- "name": "setDisabled",
3497
- "privacy": "private",
3498
- "parameters": [
3499
- {
3500
- "name": "element",
3501
- "type": {
3502
- "text": "HTMLElement"
3503
- },
3504
- "description": "The button element."
3505
- },
3506
- {
3507
- "name": "disabled",
3508
- "type": {
3509
- "text": "boolean"
3510
- },
3511
- "description": "The disabled state."
3512
- }
3513
- ],
3514
- "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
3485
+ "name": "renderRequiredLabel",
3486
+ "privacy": "protected",
3515
3487
  "inheritedFrom": {
3516
- "name": "Buttonsimple",
3517
- "module": "components/buttonsimple/buttonsimple.component.js"
3488
+ "name": "FormfieldWrapper",
3489
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3518
3490
  }
3519
3491
  },
3520
3492
  {
3521
3493
  "kind": "method",
3522
- "name": "triggerClickEvent",
3523
- "privacy": "private",
3494
+ "name": "renderHelpTextIcon",
3495
+ "privacy": "protected",
3496
+ "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
3497
+ "return": {
3498
+ "type": {
3499
+ "text": ""
3500
+ }
3501
+ },
3524
3502
  "inheritedFrom": {
3525
- "name": "Buttonsimple",
3526
- "module": "components/buttonsimple/buttonsimple.component.js"
3503
+ "name": "FormfieldWrapper",
3504
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3527
3505
  }
3528
3506
  },
3529
3507
  {
3530
3508
  "kind": "method",
3531
- "name": "handleBlur",
3532
- "privacy": "private",
3533
- "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
3509
+ "name": "renderHelpText",
3510
+ "privacy": "protected",
3511
+ "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
3512
+ "return": {
3513
+ "type": {
3514
+ "text": ""
3515
+ }
3516
+ },
3534
3517
  "inheritedFrom": {
3535
- "name": "Buttonsimple",
3536
- "module": "components/buttonsimple/buttonsimple.component.js"
3518
+ "name": "FormfieldWrapper",
3519
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3537
3520
  }
3538
3521
  },
3539
3522
  {
3540
3523
  "kind": "method",
3541
- "name": "handleKeyDown",
3542
- "privacy": "private",
3543
- "parameters": [
3544
- {
3545
- "name": "event",
3546
- "type": {
3547
- "text": "KeyboardEvent"
3548
- },
3549
- "description": "The keyboard event."
3524
+ "name": "renderLabel",
3525
+ "privacy": "protected",
3526
+ "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
3527
+ "return": {
3528
+ "type": {
3529
+ "text": ""
3550
3530
  }
3551
- ],
3552
- "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.",
3531
+ },
3553
3532
  "inheritedFrom": {
3554
- "name": "Buttonsimple",
3555
- "module": "components/buttonsimple/buttonsimple.component.js"
3533
+ "name": "FormfieldWrapper",
3534
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3556
3535
  }
3557
3536
  },
3558
3537
  {
3559
3538
  "kind": "method",
3560
- "name": "handleKeyUp",
3561
- "privacy": "private",
3562
- "parameters": [
3563
- {
3564
- "name": "event",
3565
- "type": {
3566
- "text": "KeyboardEvent"
3567
- },
3568
- "description": "The keyboard event."
3539
+ "name": "renderHelperText",
3540
+ "privacy": "protected",
3541
+ "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
3542
+ "return": {
3543
+ "type": {
3544
+ "text": ""
3569
3545
  }
3570
- ],
3571
- "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
3546
+ },
3572
3547
  "inheritedFrom": {
3573
- "name": "Buttonsimple",
3574
- "module": "components/buttonsimple/buttonsimple.component.js"
3548
+ "name": "FormfieldWrapper",
3549
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3550
+ }
3551
+ }
3552
+ ],
3553
+ "events": [
3554
+ {
3555
+ "type": {
3556
+ "text": "EventConstructor"
3575
3557
  }
3558
+ },
3559
+ {
3560
+ "description": "(React: onChange) Event that gets dispatched when the checkbox state changes.",
3561
+ "name": "change",
3562
+ "reactName": "onChange",
3563
+ "eventName": "ChangeEvent"
3564
+ },
3565
+ {
3566
+ "description": "(React: onFocus) Event that gets dispatched when the checkbox receives focus.",
3567
+ "name": "focus",
3568
+ "reactName": "onFocus",
3569
+ "eventName": "FocusEvent"
3576
3570
  }
3577
3571
  ],
3578
3572
  "attributes": [
3579
3573
  {
3580
- "name": "color",
3574
+ "name": "checked",
3581
3575
  "type": {
3582
- "text": "ColorType"
3576
+ "text": "boolean"
3583
3577
  },
3584
- "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- pink\n- purple\n- slate\n- violet",
3585
- "default": "default",
3586
- "fieldName": "color"
3578
+ "default": "false",
3579
+ "description": "Determines whether the checkbox is selected or unselected.",
3580
+ "fieldName": "checked"
3587
3581
  },
3588
3582
  {
3589
- "name": "label",
3583
+ "name": "indeterminate",
3584
+ "type": {
3585
+ "text": "boolean"
3586
+ },
3587
+ "default": "false",
3588
+ "description": "This property is used to determine the parent checkbox in a nested checkbox group.\nIf any one of the children is unselected, then the parent checkbox will be indeterminate.\nIf all children are either selected or unselected, then the parent checkbox will not be indeterminate.",
3589
+ "fieldName": "indeterminate"
3590
+ },
3591
+ {
3592
+ "name": "autofocus",
3593
+ "type": {
3594
+ "text": "boolean"
3595
+ },
3596
+ "default": "false",
3597
+ "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
3598
+ "fieldName": "autofocus"
3599
+ },
3600
+ {
3601
+ "name": "name",
3590
3602
  "type": {
3591
3603
  "text": "string"
3592
3604
  },
3593
3605
  "default": "''",
3594
- "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.",
3595
- "fieldName": "label"
3606
+ "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
3607
+ "fieldName": "name",
3608
+ "inheritedFrom": {
3609
+ "name": "FormInternalsMixin",
3610
+ "module": "src/utils/mixins/FormInternalsMixin.ts"
3611
+ }
3596
3612
  },
3597
3613
  {
3598
- "name": "icon-name",
3614
+ "name": "value",
3599
3615
  "type": {
3600
- "text": "IconNames | undefined"
3616
+ "text": "string"
3601
3617
  },
3602
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
3603
- "fieldName": "iconName",
3618
+ "default": "''",
3619
+ "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
3620
+ "fieldName": "value",
3604
3621
  "inheritedFrom": {
3605
- "name": "IconNameMixin",
3606
- "module": "src/utils/mixins/IconNameMixin.ts"
3622
+ "name": "FormInternalsMixin",
3623
+ "module": "src/utils/mixins/FormInternalsMixin.ts"
3607
3624
  }
3608
3625
  },
3609
3626
  {
3610
- "name": "tabIndex",
3627
+ "name": "validation-message",
3611
3628
  "type": {
3612
- "text": "number"
3629
+ "text": "string | undefined"
3613
3630
  },
3614
- "default": "0",
3615
- "description": "This property specifies the tab order of the element.",
3616
- "fieldName": "tabIndex",
3631
+ "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
3632
+ "fieldName": "validationMessage",
3617
3633
  "inheritedFrom": {
3618
- "name": "Buttonsimple",
3619
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
3634
+ "name": "FormInternalsMixin",
3635
+ "module": "src/utils/mixins/FormInternalsMixin.ts"
3636
+ }
3637
+ },
3638
+ {
3639
+ "name": "data-aria-label",
3640
+ "type": {
3641
+ "text": "string | null"
3642
+ },
3643
+ "default": "null",
3644
+ "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
3645
+ "fieldName": "dataAriaLabel",
3646
+ "inheritedFrom": {
3647
+ "name": "DataAriaLabelMixin",
3648
+ "module": "src/utils/mixins/DataAriaLabelMixin.ts"
3620
3649
  }
3621
3650
  },
3622
3651
  {
@@ -3628,125 +3657,96 @@
3628
3657
  "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
3629
3658
  "fieldName": "disabled",
3630
3659
  "inheritedFrom": {
3631
- "name": "Buttonsimple",
3632
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
3660
+ "name": "DisabledMixin",
3661
+ "module": "src/utils/mixins/DisabledMixin.ts"
3633
3662
  }
3634
3663
  },
3635
3664
  {
3636
- "name": "active",
3665
+ "name": "label",
3637
3666
  "type": {
3638
- "text": "boolean"
3667
+ "text": "string | undefined"
3639
3668
  },
3640
- "default": "false",
3641
- "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
3642
- "fieldName": "active",
3669
+ "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
3670
+ "fieldName": "label",
3643
3671
  "inheritedFrom": {
3644
- "name": "Buttonsimple",
3645
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
3672
+ "name": "FormfieldWrapper",
3673
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
3646
3674
  }
3647
3675
  },
3648
3676
  {
3649
- "name": "soft-disabled",
3677
+ "name": "required-label",
3650
3678
  "type": {
3651
- "text": "boolean"
3679
+ "text": "string | undefined"
3652
3680
  },
3653
- "default": "false",
3654
- "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
3655
- "fieldName": "softDisabled",
3681
+ "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
3682
+ "fieldName": "requiredLabel",
3656
3683
  "inheritedFrom": {
3657
- "name": "Buttonsimple",
3658
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
3684
+ "name": "FormfieldWrapper",
3685
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
3659
3686
  }
3660
3687
  },
3661
3688
  {
3662
- "name": "size",
3689
+ "name": "id",
3663
3690
  "type": {
3664
- "text": "ButtonSize"
3691
+ "text": "string"
3665
3692
  },
3666
- "description": "Simplebutton size is a super set of all the sizes supported by children components.",
3667
- "default": "32",
3668
- "fieldName": "size",
3693
+ "default": "''",
3694
+ "description": "The unique id of the input field. It is used to link the input field with the label.",
3695
+ "fieldName": "id",
3669
3696
  "inheritedFrom": {
3670
- "name": "Buttonsimple",
3671
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
3697
+ "name": "FormfieldWrapper",
3698
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
3672
3699
  }
3673
3700
  },
3674
3701
  {
3675
- "name": "role",
3676
- "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
3677
- "default": "button",
3678
- "fieldName": "role",
3702
+ "name": "help-text-type",
3703
+ "type": {
3704
+ "text": "ValidationType"
3705
+ },
3706
+ "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
3707
+ "fieldName": "helpTextType",
3679
3708
  "inheritedFrom": {
3680
- "name": "Buttonsimple",
3681
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
3709
+ "name": "FormfieldWrapper",
3710
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
3682
3711
  }
3683
3712
  },
3684
3713
  {
3685
- "name": "type",
3714
+ "name": "help-text",
3686
3715
  "type": {
3687
- "text": "ButtonType"
3716
+ "text": "string | undefined"
3688
3717
  },
3689
- "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
3690
- "default": "button",
3691
- "fieldName": "type",
3718
+ "description": "The help text that is displayed below the input field.",
3719
+ "fieldName": "helpText",
3692
3720
  "inheritedFrom": {
3693
- "name": "Buttonsimple",
3694
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
3721
+ "name": "FormfieldWrapper",
3722
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
3695
3723
  }
3696
3724
  }
3697
3725
  ],
3698
3726
  "mixins": [
3699
3727
  {
3700
- "name": "IconNameMixin",
3701
- "module": "/src/utils/mixins/IconNameMixin"
3728
+ "name": "FormInternalsMixin",
3729
+ "module": "/src/utils/mixins/FormInternalsMixin"
3730
+ },
3731
+ {
3732
+ "name": "DataAriaLabelMixin",
3733
+ "module": "/src/utils/mixins/DataAriaLabelMixin"
3702
3734
  }
3703
3735
  ],
3704
3736
  "superclass": {
3705
- "name": "Buttonsimple",
3706
- "module": "/src/components/buttonsimple/buttonsimple.component"
3737
+ "name": "FormfieldWrapper",
3738
+ "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
3707
3739
  },
3708
- "tagName": "mdc-chip",
3709
- "jsDoc": "/**\n * mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.\n * Consumers can wrap this component around a tooltip to provide additional context.\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>,\n * including empty spaces to split words.\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-chip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the chip.\n * @cssproperty --mdc-chip-border-color - The border color of the chip.\n * @cssproperty --mdc-chip-background-color - The background color of the chip.\n *\n */",
3740
+ "tagName": "mdc-checkbox",
3741
+ "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-icon\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-border-color - Border color in high contrast.\n * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.\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-disabled-background-color - Background color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.\n * @cssproperty --mdc-checkbox-disabled-icon-color - Icon color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-icon-background-color - Background color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-icon-border-color - Default background color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-icon-color - Icon color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.\n */",
3710
3742
  "customElement": true,
3711
- "events": [
3712
- {
3713
- "description": "(React: onClick) This event is dispatched when the button is clicked.",
3714
- "name": "click",
3715
- "reactName": "onClick",
3716
- "eventName": "ClickEvent",
3717
- "inheritedFrom": {
3718
- "name": "Buttonsimple",
3719
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
3720
- }
3721
- },
3722
- {
3723
- "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
3724
- "name": "keydown",
3725
- "reactName": "onKeyDown",
3726
- "eventName": "KeydownEvent",
3727
- "inheritedFrom": {
3728
- "name": "Buttonsimple",
3729
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
3730
- }
3731
- },
3732
- {
3733
- "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
3734
- "name": "keyup",
3735
- "reactName": "onKeyUp",
3736
- "eventName": "KeyupEvent",
3737
- "inheritedFrom": {
3738
- "name": "Buttonsimple",
3739
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
3740
- }
3741
- },
3743
+ "slots": [
3742
3744
  {
3743
- "description": "(React: onFocus) This event is dispatched when the button receives focus.",
3744
- "name": "focus",
3745
- "reactName": "onFocus",
3746
- "eventName": "FocusEvent",
3745
+ "description": "slot to add the label info icon",
3746
+ "name": "label-info",
3747
3747
  "inheritedFrom": {
3748
- "name": "Buttonsimple",
3749
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
3748
+ "name": "FormfieldWrapper",
3749
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
3750
3750
  }
3751
3751
  }
3752
3752
  ]
@@ -3757,8 +3757,8 @@
3757
3757
  "kind": "js",
3758
3758
  "name": "default",
3759
3759
  "declaration": {
3760
- "name": "Chip",
3761
- "module": "components/chip/chip.component.js"
3760
+ "name": "Checkbox",
3761
+ "module": "components/checkbox/checkbox.component.js"
3762
3762
  }
3763
3763
  }
3764
3764
  ]