@momentum-design/components 0.39.1 → 0.39.2

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 +1189 -1189
  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/avatarbutton/avatarbutton.component.js",
7
+ "path": "components/alertchip/alertchip.component.js",
8
8
  "declarations": [
9
9
  {
10
10
  "kind": "class",
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",
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
+ ],
13
31
  "members": [
14
32
  {
15
33
  "kind": "field",
16
- "name": "ariaLabel",
34
+ "name": "variant",
17
35
  "type": {
18
- "text": "string | null"
36
+ "text": "VariantType"
19
37
  },
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
- ]
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"
36
41
  },
37
42
  {
38
43
  "kind": "field",
39
- "name": "active",
44
+ "name": "label",
40
45
  "type": {
41
- "text": "boolean"
46
+ "text": "string"
42
47
  },
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
- }
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"
51
51
  },
52
52
  {
53
53
  "kind": "field",
@@ -80,80 +80,26 @@
80
80
  },
81
81
  {
82
82
  "kind": "field",
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,
88
- "type": {
89
- "text": "string"
90
- },
91
- "inheritedFrom": {
92
- "name": "Buttonsimple",
93
- "module": "components/buttonsimple/buttonsimple.component.js"
94
- }
95
- },
96
- {
97
- "kind": "field",
98
- "name": "type",
83
+ "name": "active",
99
84
  "type": {
100
- "text": "ButtonType"
85
+ "text": "boolean"
101
86
  },
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",
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",
105
90
  "reflects": true,
106
91
  "inheritedFrom": {
107
92
  "name": "Buttonsimple",
108
93
  "module": "components/buttonsimple/buttonsimple.component.js"
109
94
  }
110
95
  },
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
- },
150
96
  {
151
97
  "kind": "field",
152
98
  "name": "size",
153
99
  "type": {
154
100
  "text": "ButtonSize"
155
101
  },
156
- "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
102
+ "description": "Simplebutton size is a super set of all the sizes supported by children components.",
157
103
  "default": "32",
158
104
  "attribute": "size",
159
105
  "reflects": true,
@@ -164,42 +110,14 @@
164
110
  },
165
111
  {
166
112
  "kind": "field",
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",
173
- "inheritedFrom": {
174
- "name": "AvatarComponentMixin",
175
- "module": "utils/mixins/AvatarComponentMixin.js"
176
- }
177
- },
178
- {
179
- "kind": "field",
180
- "name": "isTyping",
181
- "type": {
182
- "text": "boolean"
183
- },
184
- "default": "false",
185
- "description": "Represents the typing indicator when the user is typing.",
186
- "attribute": "is-typing",
187
- "inheritedFrom": {
188
- "name": "AvatarComponentMixin",
189
- "module": "utils/mixins/AvatarComponentMixin.js"
190
- }
191
- },
192
- {
193
- "kind": "field",
194
- "name": "iconName",
195
- "type": {
196
- "text": "IconNames | undefined"
197
- },
198
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
199
- "attribute": "icon-name",
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,
200
118
  "inheritedFrom": {
201
- "name": "IconNameMixin",
202
- "module": "utils/mixins/IconNameMixin.js"
119
+ "name": "Buttonsimple",
120
+ "module": "components/buttonsimple/buttonsimple.component.js"
203
121
  }
204
122
  },
205
123
  {
@@ -217,6 +135,21 @@
217
135
  "module": "utils/mixins/TabIndexMixin.js"
218
136
  }
219
137
  },
138
+ {
139
+ "kind": "field",
140
+ "name": "type",
141
+ "type": {
142
+ "text": "ButtonType"
143
+ },
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",
147
+ "reflects": true,
148
+ "inheritedFrom": {
149
+ "name": "Buttonsimple",
150
+ "module": "components/buttonsimple/buttonsimple.component.js"
151
+ }
152
+ },
220
153
  {
221
154
  "kind": "method",
222
155
  "name": "executeAction",
@@ -362,100 +295,83 @@
362
295
  }
363
296
  }
364
297
  ],
365
- "events": [
298
+ "attributes": [
366
299
  {
367
- "description": "(React: onClick) This event is dispatched when the avatarbutton is clicked.",
368
- "name": "click",
369
- "reactName": "onClick",
370
- "eventName": "ClickEvent",
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",
371
325
  "inheritedFrom": {
372
- "name": "Buttonsimple",
373
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
326
+ "name": "TabIndexMixin",
327
+ "module": "src/utils/mixins/TabIndexMixin.ts"
374
328
  }
375
329
  },
376
330
  {
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",
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",
338
+ "inheritedFrom": {
339
+ "name": "DisabledMixin",
340
+ "module": "src/utils/mixins/DisabledMixin.ts"
341
+ }
342
+ },
343
+ {
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",
381
351
  "inheritedFrom": {
382
352
  "name": "Buttonsimple",
383
353
  "module": "src/components/buttonsimple/buttonsimple.component.ts"
384
354
  }
385
355
  },
386
356
  {
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",
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",
391
364
  "inheritedFrom": {
392
365
  "name": "Buttonsimple",
393
366
  "module": "src/components/buttonsimple/buttonsimple.component.ts"
394
367
  }
395
368
  },
396
- {
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
369
  {
454
370
  "name": "size",
455
371
  "type": {
456
372
  "text": "ButtonSize"
457
373
  },
458
- "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
374
+ "description": "Simplebutton size is a super set of all the sizes supported by children components.",
459
375
  "default": "32",
460
376
  "fieldName": "size",
461
377
  "inheritedFrom": {
@@ -464,135 +380,78 @@
464
380
  }
465
381
  },
466
382
  {
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",
473
- "inheritedFrom": {
474
- "name": "AvatarComponentMixin",
475
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
476
- }
477
- },
478
- {
479
- "name": "is-typing",
480
- "type": {
481
- "text": "boolean"
482
- },
483
- "default": "false",
484
- "description": "Represents the typing indicator when the user is typing.",
485
- "fieldName": "isTyping",
486
- "inheritedFrom": {
487
- "name": "AvatarComponentMixin",
488
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
489
- }
490
- },
491
- {
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",
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",
511
387
  "inheritedFrom": {
512
- "name": "TabIndexMixin",
513
- "module": "src/utils/mixins/TabIndexMixin.ts"
388
+ "name": "Buttonsimple",
389
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
514
390
  }
515
391
  },
516
392
  {
517
- "name": "disabled",
393
+ "name": "type",
518
394
  "type": {
519
- "text": "boolean"
395
+ "text": "ButtonType"
520
396
  },
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",
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",
524
400
  "inheritedFrom": {
525
- "name": "DisabledMixin",
526
- "module": "src/utils/mixins/DisabledMixin.ts"
401
+ "name": "Buttonsimple",
402
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
527
403
  }
528
- },
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": [
529
414
  {
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",
415
+ "description": "(React: onClick) This event is dispatched when the button is clicked.",
416
+ "name": "click",
417
+ "reactName": "onClick",
418
+ "eventName": "ClickEvent",
537
419
  "inheritedFrom": {
538
420
  "name": "Buttonsimple",
539
421
  "module": "src/components/buttonsimple/buttonsimple.component.ts"
540
422
  }
541
423
  },
542
424
  {
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",
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",
550
429
  "inheritedFrom": {
551
430
  "name": "Buttonsimple",
552
431
  "module": "src/components/buttonsimple/buttonsimple.component.ts"
553
432
  }
554
433
  },
555
434
  {
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",
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",
560
439
  "inheritedFrom": {
561
440
  "name": "Buttonsimple",
562
441
  "module": "src/components/buttonsimple/buttonsimple.component.ts"
563
442
  }
564
443
  },
565
444
  {
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",
445
+ "description": "(React: onFocus) This event is dispatched when the button receives focus.",
446
+ "name": "focus",
447
+ "reactName": "onFocus",
448
+ "eventName": "FocusEvent",
573
449
  "inheritedFrom": {
574
450
  "name": "Buttonsimple",
575
451
  "module": "src/components/buttonsimple/buttonsimple.component.ts"
576
452
  }
577
453
  }
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
454
+ ]
596
455
  }
597
456
  ],
598
457
  "exports": [
@@ -600,8 +459,8 @@
600
459
  "kind": "js",
601
460
  "name": "default",
602
461
  "declaration": {
603
- "name": "AvatarButton",
604
- "module": "components/avatarbutton/avatarbutton.component.js"
462
+ "name": "AlertChip",
463
+ "module": "components/alertchip/alertchip.component.js"
605
464
  }
606
465
  }
607
466
  ]
@@ -852,60 +711,60 @@
852
711
  },
853
712
  {
854
713
  "kind": "javascript-module",
855
- "path": "components/alertchip/alertchip.component.js",
714
+ "path": "components/avatarbutton/avatarbutton.component.js",
856
715
  "declarations": [
857
716
  {
858
717
  "kind": "class",
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
- ],
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",
879
720
  "members": [
880
721
  {
881
722
  "kind": "field",
882
- "name": "variant",
723
+ "name": "ariaLabel",
883
724
  "type": {
884
- "text": "VariantType"
725
+ "text": "string | null"
885
726
  },
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"
727
+ "default": "null",
728
+ "description": "Aria-label attribute to be set for accessibility",
729
+ "attribute": "aria-label"
889
730
  },
890
731
  {
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"
732
+ "kind": "method",
733
+ "name": "setSize",
734
+ "privacy": "private",
735
+ "parameters": [
736
+ {
737
+ "name": "size",
738
+ "type": {
739
+ "text": "AvatarSize"
740
+ }
741
+ }
742
+ ]
899
743
  },
900
744
  {
901
745
  "kind": "field",
902
- "name": "disabled",
746
+ "name": "active",
903
747
  "type": {
904
748
  "text": "boolean"
905
749
  },
906
750
  "default": "undefined as unknown",
907
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
908
- "attribute": "disabled",
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",
762
+ "type": {
763
+ "text": "boolean"
764
+ },
765
+ "default": "undefined as unknown",
766
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
767
+ "attribute": "disabled",
909
768
  "reflects": true,
910
769
  "inheritedFrom": {
911
770
  "name": "DisabledMixin",
@@ -928,26 +787,80 @@
928
787
  },
929
788
  {
930
789
  "kind": "field",
931
- "name": "active",
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,
932
795
  "type": {
933
- "text": "boolean"
796
+ "text": "string"
934
797
  },
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",
798
+ "inheritedFrom": {
799
+ "name": "Buttonsimple",
800
+ "module": "components/buttonsimple/buttonsimple.component.js"
801
+ }
802
+ },
803
+ {
804
+ "kind": "field",
805
+ "name": "type",
806
+ "type": {
807
+ "text": "ButtonType"
808
+ },
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",
938
812
  "reflects": true,
939
813
  "inheritedFrom": {
940
814
  "name": "Buttonsimple",
941
815
  "module": "components/buttonsimple/buttonsimple.component.js"
942
816
  }
943
817
  },
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
+ },
944
857
  {
945
858
  "kind": "field",
946
859
  "name": "size",
947
860
  "type": {
948
861
  "text": "ButtonSize"
949
862
  },
950
- "description": "Simplebutton size is a super set of all the sizes supported by children components.",
863
+ "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
951
864
  "default": "32",
952
865
  "attribute": "size",
953
866
  "reflects": true,
@@ -958,44 +871,57 @@
958
871
  },
959
872
  {
960
873
  "kind": "field",
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,
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",
966
880
  "inheritedFrom": {
967
- "name": "Buttonsimple",
968
- "module": "components/buttonsimple/buttonsimple.component.js"
881
+ "name": "AvatarComponentMixin",
882
+ "module": "utils/mixins/AvatarComponentMixin.js"
969
883
  }
970
884
  },
971
885
  {
972
886
  "kind": "field",
973
- "name": "tabIndex",
887
+ "name": "isTyping",
974
888
  "type": {
975
- "text": "number"
889
+ "text": "boolean"
976
890
  },
977
- "default": "0",
978
- "description": "This property specifies the tab order of the element.",
979
- "attribute": "tabIndex",
980
- "reflects": true,
891
+ "default": "false",
892
+ "description": "Represents the typing indicator when the user is typing.",
893
+ "attribute": "is-typing",
981
894
  "inheritedFrom": {
982
- "name": "TabIndexMixin",
983
- "module": "utils/mixins/TabIndexMixin.js"
895
+ "name": "AvatarComponentMixin",
896
+ "module": "utils/mixins/AvatarComponentMixin.js"
984
897
  }
985
898
  },
986
899
  {
987
900
  "kind": "field",
988
- "name": "type",
901
+ "name": "iconName",
989
902
  "type": {
990
- "text": "ButtonType"
903
+ "text": "IconNames | undefined"
991
904
  },
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",
905
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
906
+ "attribute": "icon-name",
907
+ "inheritedFrom": {
908
+ "name": "IconNameMixin",
909
+ "module": "utils/mixins/IconNameMixin.js"
910
+ }
911
+ },
912
+ {
913
+ "kind": "field",
914
+ "name": "tabIndex",
915
+ "type": {
916
+ "text": "number"
917
+ },
918
+ "default": "0",
919
+ "description": "This property specifies the tab order of the element.",
920
+ "attribute": "tabIndex",
995
921
  "reflects": true,
996
922
  "inheritedFrom": {
997
- "name": "Buttonsimple",
998
- "module": "components/buttonsimple/buttonsimple.component.js"
923
+ "name": "TabIndexMixin",
924
+ "module": "utils/mixins/TabIndexMixin.js"
999
925
  }
1000
926
  },
1001
927
  {
@@ -1143,75 +1069,92 @@
1143
1069
  }
1144
1070
  }
1145
1071
  ],
1146
- "attributes": [
1072
+ "events": [
1147
1073
  {
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"
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
+ }
1155
1082
  },
1156
1083
  {
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"
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
+ }
1164
1092
  },
1165
1093
  {
1166
- "name": "tabIndex",
1167
- "type": {
1168
- "text": "number"
1169
- },
1170
- "default": "0",
1171
- "description": "This property specifies the tab order of the element.",
1172
- "fieldName": "tabIndex",
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",
1173
1098
  "inheritedFrom": {
1174
- "name": "TabIndexMixin",
1175
- "module": "src/utils/mixins/TabIndexMixin.ts"
1099
+ "name": "Buttonsimple",
1100
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
1176
1101
  }
1177
1102
  },
1178
1103
  {
1179
- "name": "disabled",
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",
1180
1117
  "type": {
1181
- "text": "boolean"
1118
+ "text": "string | null"
1182
1119
  },
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",
1120
+ "default": "null",
1121
+ "description": "Aria-label attribute to be set for accessibility",
1122
+ "fieldName": "ariaLabel"
1123
+ },
1124
+ {
1125
+ "name": "src",
1126
+ "type": {
1127
+ "text": "string | undefined"
1128
+ },
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",
1186
1131
  "inheritedFrom": {
1187
- "name": "DisabledMixin",
1188
- "module": "src/utils/mixins/DisabledMixin.ts"
1132
+ "name": "AvatarComponentMixin",
1133
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
1189
1134
  }
1190
1135
  },
1191
1136
  {
1192
- "name": "active",
1137
+ "name": "initials",
1193
1138
  "type": {
1194
- "text": "boolean"
1139
+ "text": "string | undefined"
1195
1140
  },
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",
1141
+ "description": "The initials to be displayed for the avatar.",
1142
+ "fieldName": "initials",
1199
1143
  "inheritedFrom": {
1200
- "name": "Buttonsimple",
1201
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
1144
+ "name": "AvatarComponentMixin",
1145
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
1202
1146
  }
1203
1147
  },
1204
1148
  {
1205
- "name": "soft-disabled",
1149
+ "name": "presence",
1206
1150
  "type": {
1207
- "text": "boolean"
1151
+ "text": "PresenceType | undefined"
1208
1152
  },
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",
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",
1212
1155
  "inheritedFrom": {
1213
- "name": "Buttonsimple",
1214
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
1156
+ "name": "AvatarComponentMixin",
1157
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
1215
1158
  }
1216
1159
  },
1217
1160
  {
@@ -1219,7 +1162,7 @@
1219
1162
  "type": {
1220
1163
  "text": "ButtonSize"
1221
1164
  },
1222
- "description": "Simplebutton size is a super set of all the sizes supported by children components.",
1165
+ "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
1223
1166
  "default": "32",
1224
1167
  "fieldName": "size",
1225
1168
  "inheritedFrom": {
@@ -1228,78 +1171,135 @@
1228
1171
  }
1229
1172
  },
1230
1173
  {
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",
1235
- "inheritedFrom": {
1236
- "name": "Buttonsimple",
1237
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
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"
1238
1183
  }
1239
1184
  },
1240
1185
  {
1241
- "name": "type",
1186
+ "name": "is-typing",
1242
1187
  "type": {
1243
- "text": "ButtonType"
1188
+ "text": "boolean"
1244
1189
  },
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",
1190
+ "default": "false",
1191
+ "description": "Represents the typing indicator when the user is typing.",
1192
+ "fieldName": "isTyping",
1248
1193
  "inheritedFrom": {
1249
- "name": "Buttonsimple",
1250
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
1194
+ "name": "AvatarComponentMixin",
1195
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
1251
1196
  }
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": [
1197
+ },
1262
1198
  {
1263
- "description": "(React: onClick) This event is dispatched when the button is clicked.",
1264
- "name": "click",
1265
- "reactName": "onClick",
1266
- "eventName": "ClickEvent",
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",
1218
+ "inheritedFrom": {
1219
+ "name": "TabIndexMixin",
1220
+ "module": "src/utils/mixins/TabIndexMixin.ts"
1221
+ }
1222
+ },
1223
+ {
1224
+ "name": "disabled",
1225
+ "type": {
1226
+ "text": "boolean"
1227
+ },
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",
1231
+ "inheritedFrom": {
1232
+ "name": "DisabledMixin",
1233
+ "module": "src/utils/mixins/DisabledMixin.ts"
1234
+ }
1235
+ },
1236
+ {
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",
1267
1244
  "inheritedFrom": {
1268
1245
  "name": "Buttonsimple",
1269
1246
  "module": "src/components/buttonsimple/buttonsimple.component.ts"
1270
1247
  }
1271
1248
  },
1272
1249
  {
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",
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",
1277
1257
  "inheritedFrom": {
1278
1258
  "name": "Buttonsimple",
1279
1259
  "module": "src/components/buttonsimple/buttonsimple.component.ts"
1280
1260
  }
1281
1261
  },
1282
1262
  {
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",
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",
1287
1267
  "inheritedFrom": {
1288
1268
  "name": "Buttonsimple",
1289
1269
  "module": "src/components/buttonsimple/buttonsimple.component.ts"
1290
1270
  }
1291
1271
  },
1292
1272
  {
1293
- "description": "(React: onFocus) This event is dispatched when the button receives focus.",
1294
- "name": "focus",
1295
- "reactName": "onFocus",
1296
- "eventName": "FocusEvent",
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",
1297
1280
  "inheritedFrom": {
1298
1281
  "name": "Buttonsimple",
1299
1282
  "module": "src/components/buttonsimple/buttonsimple.component.ts"
1300
1283
  }
1301
1284
  }
1302
- ]
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
1303
1303
  }
1304
1304
  ],
1305
1305
  "exports": [
@@ -1307,8 +1307,8 @@
1307
1307
  "kind": "js",
1308
1308
  "name": "default",
1309
1309
  "declaration": {
1310
- "name": "AlertChip",
1311
- "module": "components/alertchip/alertchip.component.js"
1310
+ "name": "AvatarButton",
1311
+ "module": "components/avatarbutton/avatarbutton.component.js"
1312
1312
  }
1313
1313
  }
1314
1314
  ]
@@ -2601,1051 +2601,1022 @@
2601
2601
  },
2602
2602
  {
2603
2603
  "kind": "javascript-module",
2604
- "path": "components/chip/chip.component.js",
2604
+ "path": "components/checkbox/checkbox.component.js",
2605
2605
  "declarations": [
2606
2606
  {
2607
2607
  "kind": "class",
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",
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",
2610
2610
  "cssProperties": [
2611
2611
  {
2612
- "description": "The color of the chip.",
2613
- "name": "--mdc-chip-color"
2612
+ "description": "Allows customization of the background color on hover.",
2613
+ "name": "--mdc-checkbox-background-color-hover"
2614
2614
  },
2615
2615
  {
2616
- "description": "The border color of the chip.",
2617
- "name": "--mdc-chip-border-color"
2616
+ "description": "Border color in high contrast.",
2617
+ "name": "--mdc-checkbox-border-color"
2618
2618
  },
2619
2619
  {
2620
- "description": "The background color of the chip.",
2621
- "name": "--mdc-chip-background-color"
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"
2634
+ },
2635
+ {
2636
+ "description": "Border color for a disabled checkbox.",
2637
+ "name": "--mdc-checkbox-disabled-border-color"
2638
+ },
2639
+ {
2640
+ "description": "Background color for a disabled, selected checkbox.",
2641
+ "name": "--mdc-checkbox-disabled-checked-icon-color"
2642
+ },
2643
+ {
2644
+ "description": "Icon color for a disabled checkbox.",
2645
+ "name": "--mdc-checkbox-disabled-icon-color"
2646
+ },
2647
+ {
2648
+ "description": "Background color for an unselected checkbox.",
2649
+ "name": "--mdc-checkbox-icon-background-color"
2650
+ },
2651
+ {
2652
+ "description": "Default background color for an unselected checkbox.",
2653
+ "name": "--mdc-checkbox-icon-border-color"
2654
+ },
2655
+ {
2656
+ "description": "Icon color for an unselected checkbox.",
2657
+ "name": "--mdc-checkbox-icon-color"
2658
+ },
2659
+ {
2660
+ "description": "Background color for a selected checkbox when pressed.",
2661
+ "name": "--mdc-checkbox-pressed-icon-color"
2622
2662
  }
2623
2663
  ],
2624
2664
  "members": [
2625
2665
  {
2626
2666
  "kind": "field",
2627
- "name": "color",
2667
+ "name": "checked",
2628
2668
  "type": {
2629
- "text": "ColorType"
2669
+ "text": "boolean"
2630
2670
  },
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",
2671
+ "default": "false",
2672
+ "description": "Determines whether the checkbox is selected or unselected.",
2673
+ "attribute": "checked",
2634
2674
  "reflects": true
2635
2675
  },
2636
2676
  {
2637
2677
  "kind": "field",
2638
- "name": "label",
2678
+ "name": "indeterminate",
2639
2679
  "type": {
2640
- "text": "string"
2680
+ "text": "boolean"
2641
2681
  },
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"
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
2686
+ },
2687
+ {
2688
+ "kind": "field",
2689
+ "name": "autofocus",
2690
+ "type": {
2691
+ "text": "boolean"
2692
+ },
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
2645
2697
  },
2646
2698
  {
2647
2699
  "kind": "method",
2648
- "name": "renderIcon",
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",
2649
2713
  "privacy": "private",
2650
- "description": "Renders the icon element if available.",
2651
2714
  "return": {
2652
2715
  "type": {
2653
- "text": ""
2716
+ "text": "void"
2654
2717
  }
2655
- }
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."
2656
2720
  },
2657
2721
  {
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
- }
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."
2668
2740
  },
2669
2741
  {
2670
- "kind": "field",
2671
- "name": "size",
2672
- "type": {
2673
- "text": "ButtonSize"
2742
+ "kind": "method",
2743
+ "name": "handleChange",
2744
+ "privacy": "public",
2745
+ "return": {
2746
+ "type": {
2747
+ "text": "void"
2748
+ }
2674
2749
  },
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
- }
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."
2683
2759
  },
2684
2760
  {
2685
2761
  "kind": "field",
2686
- "name": "active",
2687
- "type": {
2688
- "text": "boolean"
2689
- },
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
- }
2762
+ "name": "renderLabelAndHelperText",
2763
+ "privacy": "private"
2698
2764
  },
2699
2765
  {
2700
2766
  "kind": "field",
2701
- "name": "softDisabled",
2767
+ "name": "helpTextType",
2702
2768
  "type": {
2703
- "text": "boolean"
2769
+ "text": "ValidationType"
2704
2770
  },
2771
+ "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
2772
+ "attribute": "help-text-type",
2773
+ "reflects": true,
2705
2774
  "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
2775
  "inheritedFrom": {
2709
- "name": "Buttonsimple",
2710
- "module": "components/buttonsimple/buttonsimple.component.js"
2776
+ "name": "FormfieldWrapper",
2777
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2711
2778
  }
2712
2779
  },
2713
2780
  {
2714
2781
  "kind": "field",
2715
- "name": "iconName",
2782
+ "name": "name",
2716
2783
  "type": {
2717
- "text": "IconNames | undefined"
2784
+ "text": "string"
2718
2785
  },
2719
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
2720
- "attribute": "icon-name",
2786
+ "default": "''",
2787
+ "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
2788
+ "attribute": "name",
2789
+ "reflects": true,
2721
2790
  "inheritedFrom": {
2722
- "name": "IconNameMixin",
2723
- "module": "utils/mixins/IconNameMixin.js"
2791
+ "name": "FormInternalsMixin",
2792
+ "module": "utils/mixins/FormInternalsMixin.js"
2724
2793
  }
2725
2794
  },
2726
2795
  {
2727
2796
  "kind": "field",
2728
- "name": "tabIndex",
2797
+ "name": "value",
2729
2798
  "type": {
2730
- "text": "number"
2799
+ "text": "string"
2731
2800
  },
2732
- "default": "0",
2733
- "description": "This property specifies the tab order of the element.",
2734
- "attribute": "tabIndex",
2801
+ "default": "''",
2802
+ "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
2803
+ "attribute": "value",
2735
2804
  "reflects": true,
2736
2805
  "inheritedFrom": {
2737
- "name": "Buttonsimple",
2738
- "module": "components/buttonsimple/buttonsimple.component.js"
2806
+ "name": "FormInternalsMixin",
2807
+ "module": "utils/mixins/FormInternalsMixin.js"
2739
2808
  }
2740
2809
  },
2741
2810
  {
2742
2811
  "kind": "field",
2743
- "name": "disabled",
2812
+ "name": "validationMessage",
2744
2813
  "type": {
2745
- "text": "boolean"
2814
+ "text": "string | undefined"
2746
2815
  },
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",
2816
+ "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
2817
+ "attribute": "validation-message",
2750
2818
  "reflects": true,
2751
2819
  "inheritedFrom": {
2752
- "name": "Buttonsimple",
2753
- "module": "components/buttonsimple/buttonsimple.component.js"
2820
+ "name": "FormInternalsMixin",
2821
+ "module": "utils/mixins/FormInternalsMixin.js"
2754
2822
  }
2755
2823
  },
2756
2824
  {
2757
2825
  "kind": "field",
2758
- "name": "type",
2826
+ "name": "validity",
2759
2827
  "type": {
2760
- "text": "ButtonType"
2828
+ "text": "ValidityState"
2761
2829
  },
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",
2765
- "reflects": true,
2830
+ "readonly": true,
2766
2831
  "inheritedFrom": {
2767
- "name": "Buttonsimple",
2768
- "module": "components/buttonsimple/buttonsimple.component.js"
2832
+ "name": "FormInternalsMixin",
2833
+ "module": "utils/mixins/FormInternalsMixin.js"
2769
2834
  }
2770
2835
  },
2771
2836
  {
2772
- "kind": "method",
2773
- "name": "executeAction",
2774
- "privacy": "protected",
2837
+ "kind": "field",
2838
+ "name": "willValidate",
2839
+ "readonly": true,
2775
2840
  "inheritedFrom": {
2776
- "name": "Buttonsimple",
2777
- "module": "components/buttonsimple/buttonsimple.component.js"
2841
+ "name": "FormInternalsMixin",
2842
+ "module": "utils/mixins/FormInternalsMixin.js"
2778
2843
  }
2779
2844
  },
2780
2845
  {
2781
2846
  "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"
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": ""
2798
2852
  }
2799
- ],
2800
- "description": "Sets the aria-pressed attribute based on the active state of the button.",
2853
+ },
2801
2854
  "inheritedFrom": {
2802
- "name": "Buttonsimple",
2803
- "module": "components/buttonsimple/buttonsimple.component.js"
2855
+ "name": "FormInternalsMixin",
2856
+ "module": "utils/mixins/FormInternalsMixin.js"
2804
2857
  }
2805
2858
  },
2806
2859
  {
2807
2860
  "kind": "method",
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."
2861
+ "name": "checkValidity",
2862
+ "return": {
2863
+ "type": {
2864
+ "text": "boolean"
2824
2865
  }
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.",
2866
+ },
2827
2867
  "inheritedFrom": {
2828
- "name": "Buttonsimple",
2829
- "module": "components/buttonsimple/buttonsimple.component.js"
2868
+ "name": "FormInternalsMixin",
2869
+ "module": "utils/mixins/FormInternalsMixin.js"
2830
2870
  }
2831
2871
  },
2832
2872
  {
2833
2873
  "kind": "method",
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."
2850
- }
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.",
2874
+ "name": "reportValidity",
2853
2875
  "inheritedFrom": {
2854
- "name": "Buttonsimple",
2855
- "module": "components/buttonsimple/buttonsimple.component.js"
2876
+ "name": "FormInternalsMixin",
2877
+ "module": "utils/mixins/FormInternalsMixin.js"
2856
2878
  }
2857
2879
  },
2858
2880
  {
2859
- "kind": "method",
2860
- "name": "triggerClickEvent",
2861
- "privacy": "private",
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",
2862
2889
  "inheritedFrom": {
2863
- "name": "Buttonsimple",
2864
- "module": "components/buttonsimple/buttonsimple.component.js"
2890
+ "name": "FormfieldWrapper",
2891
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2865
2892
  }
2866
2893
  },
2867
2894
  {
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.",
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,
2872
2904
  "inheritedFrom": {
2873
- "name": "Buttonsimple",
2874
- "module": "components/buttonsimple/buttonsimple.component.js"
2905
+ "name": "DataAriaLabelMixin",
2906
+ "module": "utils/mixins/DataAriaLabelMixin.js"
2875
2907
  }
2876
2908
  },
2877
2909
  {
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.",
2891
- "inheritedFrom": {
2892
- "name": "Buttonsimple",
2893
- "module": "components/buttonsimple/buttonsimple.component.js"
2894
- }
2895
- },
2896
- {
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.",
2910
- "inheritedFrom": {
2911
- "name": "Buttonsimple",
2912
- "module": "components/buttonsimple/buttonsimple.component.js"
2913
- }
2914
- }
2915
- ],
2916
- "attributes": [
2917
- {
2918
- "name": "color",
2910
+ "kind": "field",
2911
+ "name": "disabled",
2919
2912
  "type": {
2920
- "text": "ColorType"
2913
+ "text": "boolean"
2921
2914
  },
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"
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,
2919
+ "inheritedFrom": {
2920
+ "name": "DisabledMixin",
2921
+ "module": "utils/mixins/DisabledMixin.js"
2922
+ }
2925
2923
  },
2926
2924
  {
2925
+ "kind": "field",
2927
2926
  "name": "label",
2928
2927
  "type": {
2929
- "text": "string"
2928
+ "text": "string | undefined"
2930
2929
  },
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"
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
+ }
2934
2937
  },
2935
2938
  {
2936
- "name": "icon-name",
2939
+ "kind": "field",
2940
+ "name": "requiredLabel",
2937
2941
  "type": {
2938
- "text": "IconNames | undefined"
2942
+ "text": "string | undefined"
2939
2943
  },
2940
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
2941
- "fieldName": "iconName",
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,
2942
2947
  "inheritedFrom": {
2943
- "name": "IconNameMixin",
2944
- "module": "src/utils/mixins/IconNameMixin.ts"
2948
+ "name": "FormfieldWrapper",
2949
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2945
2950
  }
2946
2951
  },
2947
2952
  {
2948
- "name": "tabIndex",
2953
+ "kind": "field",
2954
+ "name": "helpText",
2949
2955
  "type": {
2950
- "text": "number"
2956
+ "text": "string | undefined"
2951
2957
  },
2952
- "default": "0",
2953
- "description": "This property specifies the tab order of the element.",
2954
- "fieldName": "tabIndex",
2958
+ "description": "The help text that is displayed below the input field.",
2959
+ "attribute": "help-text",
2960
+ "reflects": true,
2955
2961
  "inheritedFrom": {
2956
- "name": "Buttonsimple",
2957
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
2962
+ "name": "FormfieldWrapper",
2963
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2958
2964
  }
2959
2965
  },
2960
2966
  {
2961
- "name": "disabled",
2962
- "type": {
2963
- "text": "boolean"
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
+ }
2964
2975
  },
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",
2968
2976
  "inheritedFrom": {
2969
- "name": "Buttonsimple",
2970
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
2977
+ "name": "FormfieldWrapper",
2978
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2971
2979
  }
2972
2980
  },
2973
2981
  {
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",
2982
+ "kind": "method",
2983
+ "name": "renderRequiredLabel",
2984
+ "privacy": "protected",
2981
2985
  "inheritedFrom": {
2982
- "name": "Buttonsimple",
2983
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
2986
+ "name": "FormfieldWrapper",
2987
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2984
2988
  }
2985
2989
  },
2986
2990
  {
2987
- "name": "soft-disabled",
2988
- "type": {
2989
- "text": "boolean"
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
+ }
2990
2999
  },
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",
2994
3000
  "inheritedFrom": {
2995
- "name": "Buttonsimple",
2996
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
3001
+ "name": "FormfieldWrapper",
3002
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2997
3003
  }
2998
3004
  },
2999
3005
  {
3000
- "name": "size",
3001
- "type": {
3002
- "text": "ButtonSize"
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
+ }
3003
3014
  },
3004
- "description": "Simplebutton size is a super set of all the sizes supported by children components.",
3005
- "default": "32",
3006
- "fieldName": "size",
3007
3015
  "inheritedFrom": {
3008
- "name": "Buttonsimple",
3009
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
3016
+ "name": "FormfieldWrapper",
3017
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3010
3018
  }
3011
3019
  },
3012
3020
  {
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",
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
+ },
3017
3030
  "inheritedFrom": {
3018
- "name": "Buttonsimple",
3019
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
3031
+ "name": "FormfieldWrapper",
3032
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3020
3033
  }
3021
3034
  },
3022
3035
  {
3023
- "name": "type",
3024
- "type": {
3025
- "text": "ButtonType"
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
+ }
3026
3044
  },
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",
3030
3045
  "inheritedFrom": {
3031
- "name": "Buttonsimple",
3032
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
3046
+ "name": "FormfieldWrapper",
3047
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3033
3048
  }
3034
3049
  }
3035
3050
  ],
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,
3049
3051
  "events": [
3050
3052
  {
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"
3058
- }
3059
- },
3060
- {
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"
3053
+ "type": {
3054
+ "text": "EventConstructor"
3068
3055
  }
3069
3056
  },
3070
3057
  {
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
- }
3058
+ "description": "(React: onChange) Event that gets dispatched when the checkbox state changes.",
3059
+ "name": "change",
3060
+ "reactName": "onChange",
3061
+ "eventName": "ChangeEvent"
3079
3062
  },
3080
3063
  {
3081
- "description": "(React: onFocus) This event is dispatched when the button receives focus.",
3064
+ "description": "(React: onFocus) Event that gets dispatched when the checkbox receives focus.",
3082
3065
  "name": "focus",
3083
3066
  "reactName": "onFocus",
3084
- "eventName": "FocusEvent",
3085
- "inheritedFrom": {
3086
- "name": "Buttonsimple",
3087
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
3088
- }
3089
- }
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
- },
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"
3067
+ "eventName": "FocusEvent"
3164
3068
  }
3165
3069
  ],
3166
- "members": [
3070
+ "attributes": [
3167
3071
  {
3168
- "kind": "field",
3169
3072
  "name": "checked",
3170
3073
  "type": {
3171
3074
  "text": "boolean"
3172
3075
  },
3173
3076
  "default": "false",
3174
3077
  "description": "Determines whether the checkbox is selected or unselected.",
3175
- "attribute": "checked",
3176
- "reflects": true
3078
+ "fieldName": "checked"
3177
3079
  },
3178
3080
  {
3179
- "kind": "field",
3180
3081
  "name": "indeterminate",
3181
3082
  "type": {
3182
3083
  "text": "boolean"
3183
3084
  },
3184
3085
  "default": "false",
3185
3086
  "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.",
3186
- "attribute": "indeterminate",
3187
- "reflects": true
3087
+ "fieldName": "indeterminate"
3188
3088
  },
3189
3089
  {
3190
- "kind": "field",
3191
3090
  "name": "autofocus",
3192
3091
  "type": {
3193
3092
  "text": "boolean"
3194
3093
  },
3195
3094
  "default": "false",
3196
3095
  "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)",
3197
- "attribute": "autofocus",
3198
- "reflects": true
3096
+ "fieldName": "autofocus"
3199
3097
  },
3200
3098
  {
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."
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
+ }
3205
3110
  },
3206
3111
  {
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."
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
+ }
3211
3123
  },
3212
3124
  {
3213
- "kind": "method",
3214
- "name": "toggleState",
3215
- "privacy": "private",
3216
- "return": {
3217
- "type": {
3218
- "text": "void"
3219
- }
3125
+ "name": "validation-message",
3126
+ "type": {
3127
+ "text": "string | undefined"
3220
3128
  },
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."
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
+ }
3222
3135
  },
3223
3136
  {
3224
- "kind": "method",
3225
- "name": "handleKeyDown",
3226
- "privacy": "private",
3227
- "return": {
3228
- "type": {
3229
- "text": "void"
3230
- }
3137
+ "name": "data-aria-label",
3138
+ "type": {
3139
+ "text": "string | null"
3231
3140
  },
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."
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
+ }
3242
3148
  },
3243
3149
  {
3244
- "kind": "method",
3245
- "name": "handleChange",
3246
- "privacy": "public",
3247
- "return": {
3248
- "type": {
3249
- "text": "void"
3250
- }
3150
+ "name": "disabled",
3151
+ "type": {
3152
+ "text": "boolean"
3251
3153
  },
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."
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
+ }
3261
3161
  },
3262
3162
  {
3263
- "kind": "field",
3264
- "name": "renderLabelAndHelperText",
3265
- "privacy": "private"
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
+ }
3266
3173
  },
3267
3174
  {
3268
- "kind": "field",
3269
- "name": "helpTextType",
3175
+ "name": "required-label",
3270
3176
  "type": {
3271
- "text": "ValidationType"
3177
+ "text": "string | undefined"
3272
3178
  },
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",
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",
3277
3181
  "inheritedFrom": {
3278
3182
  "name": "FormfieldWrapper",
3279
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3183
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
3280
3184
  }
3281
3185
  },
3282
3186
  {
3283
- "kind": "field",
3284
- "name": "name",
3187
+ "name": "id",
3285
3188
  "type": {
3286
3189
  "text": "string"
3287
3190
  },
3288
3191
  "default": "''",
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,
3192
+ "description": "The unique id of the input field. It is used to link the input field with the label.",
3193
+ "fieldName": "id",
3292
3194
  "inheritedFrom": {
3293
- "name": "FormInternalsMixin",
3294
- "module": "utils/mixins/FormInternalsMixin.js"
3195
+ "name": "FormfieldWrapper",
3196
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
3295
3197
  }
3296
3198
  },
3297
3199
  {
3298
- "kind": "field",
3299
- "name": "value",
3200
+ "name": "help-text-type",
3300
3201
  "type": {
3301
- "text": "string"
3202
+ "text": "ValidationType"
3302
3203
  },
3303
- "default": "''",
3304
- "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
3305
- "attribute": "value",
3306
- "reflects": true,
3204
+ "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
3205
+ "fieldName": "helpTextType",
3307
3206
  "inheritedFrom": {
3308
- "name": "FormInternalsMixin",
3309
- "module": "utils/mixins/FormInternalsMixin.js"
3207
+ "name": "FormfieldWrapper",
3208
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
3310
3209
  }
3311
3210
  },
3312
3211
  {
3313
- "kind": "field",
3314
- "name": "validationMessage",
3212
+ "name": "help-text",
3315
3213
  "type": {
3316
3214
  "text": "string | undefined"
3317
3215
  },
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,
3216
+ "description": "The help text that is displayed below the input field.",
3217
+ "fieldName": "helpText",
3321
3218
  "inheritedFrom": {
3322
- "name": "FormInternalsMixin",
3323
- "module": "utils/mixins/FormInternalsMixin.js"
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",
3245
+ "inheritedFrom": {
3246
+ "name": "FormfieldWrapper",
3247
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
3324
3248
  }
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
+ },
3277
+ {
3278
+ "description": "The border color of the chip.",
3279
+ "name": "--mdc-chip-border-color"
3325
3280
  },
3281
+ {
3282
+ "description": "The background color of the chip.",
3283
+ "name": "--mdc-chip-background-color"
3284
+ }
3285
+ ],
3286
+ "members": [
3326
3287
  {
3327
3288
  "kind": "field",
3328
- "name": "validity",
3289
+ "name": "color",
3329
3290
  "type": {
3330
- "text": "ValidityState"
3291
+ "text": "ColorType"
3331
3292
  },
3332
- "readonly": true,
3333
- "inheritedFrom": {
3334
- "name": "FormInternalsMixin",
3335
- "module": "utils/mixins/FormInternalsMixin.js"
3336
- }
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
3337
3297
  },
3338
3298
  {
3339
3299
  "kind": "field",
3340
- "name": "willValidate",
3341
- "readonly": true,
3342
- "inheritedFrom": {
3343
- "name": "FormInternalsMixin",
3344
- "module": "utils/mixins/FormInternalsMixin.js"
3345
- }
3300
+ "name": "label",
3301
+ "type": {
3302
+ "text": "string"
3303
+ },
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"
3346
3307
  },
3347
3308
  {
3348
3309
  "kind": "method",
3349
- "name": "setValidity",
3350
- "description": "Sets the validity of the input field based on the input field's validity.",
3310
+ "name": "renderIcon",
3311
+ "privacy": "private",
3312
+ "description": "Renders the icon element if available.",
3351
3313
  "return": {
3352
3314
  "type": {
3353
3315
  "text": ""
3354
3316
  }
3355
- },
3356
- "inheritedFrom": {
3357
- "name": "FormInternalsMixin",
3358
- "module": "utils/mixins/FormInternalsMixin.js"
3359
3317
  }
3360
3318
  },
3361
3319
  {
3362
- "kind": "method",
3363
- "name": "checkValidity",
3364
- "return": {
3365
- "type": {
3366
- "text": "boolean"
3367
- }
3368
- },
3320
+ "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,
3369
3326
  "inheritedFrom": {
3370
- "name": "FormInternalsMixin",
3371
- "module": "utils/mixins/FormInternalsMixin.js"
3327
+ "name": "Buttonsimple",
3328
+ "module": "components/buttonsimple/buttonsimple.component.js"
3372
3329
  }
3373
3330
  },
3374
3331
  {
3375
- "kind": "method",
3376
- "name": "reportValidity",
3332
+ "kind": "field",
3333
+ "name": "size",
3334
+ "type": {
3335
+ "text": "ButtonSize"
3336
+ },
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,
3377
3341
  "inheritedFrom": {
3378
- "name": "FormInternalsMixin",
3379
- "module": "utils/mixins/FormInternalsMixin.js"
3342
+ "name": "Buttonsimple",
3343
+ "module": "components/buttonsimple/buttonsimple.component.js"
3380
3344
  }
3381
3345
  },
3382
3346
  {
3383
3347
  "kind": "field",
3384
- "name": "id",
3348
+ "name": "active",
3385
3349
  "type": {
3386
- "text": "string"
3350
+ "text": "boolean"
3387
3351
  },
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",
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,
3391
3356
  "inheritedFrom": {
3392
- "name": "FormfieldWrapper",
3393
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3357
+ "name": "Buttonsimple",
3358
+ "module": "components/buttonsimple/buttonsimple.component.js"
3394
3359
  }
3395
3360
  },
3396
3361
  {
3397
3362
  "kind": "field",
3398
- "name": "dataAriaLabel",
3363
+ "name": "softDisabled",
3399
3364
  "type": {
3400
- "text": "string | null"
3365
+ "text": "boolean"
3401
3366
  },
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",
3405
- "reflects": true,
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",
3406
3370
  "inheritedFrom": {
3407
- "name": "DataAriaLabelMixin",
3408
- "module": "utils/mixins/DataAriaLabelMixin.js"
3371
+ "name": "Buttonsimple",
3372
+ "module": "components/buttonsimple/buttonsimple.component.js"
3409
3373
  }
3410
3374
  },
3411
3375
  {
3412
3376
  "kind": "field",
3413
- "name": "disabled",
3377
+ "name": "iconName",
3414
3378
  "type": {
3415
- "text": "boolean"
3379
+ "text": "IconNames | undefined"
3416
3380
  },
3417
- "default": "false",
3418
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
3419
- "attribute": "disabled",
3420
- "reflects": true,
3381
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
3382
+ "attribute": "icon-name",
3421
3383
  "inheritedFrom": {
3422
- "name": "DisabledMixin",
3423
- "module": "utils/mixins/DisabledMixin.js"
3384
+ "name": "IconNameMixin",
3385
+ "module": "utils/mixins/IconNameMixin.js"
3424
3386
  }
3425
3387
  },
3426
3388
  {
3427
3389
  "kind": "field",
3428
- "name": "label",
3390
+ "name": "tabIndex",
3429
3391
  "type": {
3430
- "text": "string | undefined"
3392
+ "text": "number"
3431
3393
  },
3432
- "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
3433
- "attribute": "label",
3394
+ "default": "0",
3395
+ "description": "This property specifies the tab order of the element.",
3396
+ "attribute": "tabIndex",
3434
3397
  "reflects": true,
3435
3398
  "inheritedFrom": {
3436
- "name": "FormfieldWrapper",
3437
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3399
+ "name": "Buttonsimple",
3400
+ "module": "components/buttonsimple/buttonsimple.component.js"
3438
3401
  }
3439
3402
  },
3440
3403
  {
3441
3404
  "kind": "field",
3442
- "name": "requiredLabel",
3405
+ "name": "disabled",
3443
3406
  "type": {
3444
- "text": "string | undefined"
3407
+ "text": "boolean"
3445
3408
  },
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",
3409
+ "default": "false",
3410
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
3411
+ "attribute": "disabled",
3448
3412
  "reflects": true,
3449
3413
  "inheritedFrom": {
3450
- "name": "FormfieldWrapper",
3451
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3414
+ "name": "Buttonsimple",
3415
+ "module": "components/buttonsimple/buttonsimple.component.js"
3452
3416
  }
3453
3417
  },
3454
3418
  {
3455
3419
  "kind": "field",
3456
- "name": "helpText",
3420
+ "name": "type",
3457
3421
  "type": {
3458
- "text": "string | undefined"
3422
+ "text": "ButtonType"
3459
3423
  },
3460
- "description": "The help text that is displayed below the input field.",
3461
- "attribute": "help-text",
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",
3462
3427
  "reflects": true,
3463
3428
  "inheritedFrom": {
3464
- "name": "FormfieldWrapper",
3465
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3429
+ "name": "Buttonsimple",
3430
+ "module": "components/buttonsimple/buttonsimple.component.js"
3466
3431
  }
3467
3432
  },
3468
3433
  {
3469
3434
  "kind": "method",
3470
- "name": "renderLabelElement",
3435
+ "name": "executeAction",
3471
3436
  "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": ""
3476
- }
3477
- },
3478
3437
  "inheritedFrom": {
3479
- "name": "FormfieldWrapper",
3480
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3438
+ "name": "Buttonsimple",
3439
+ "module": "components/buttonsimple/buttonsimple.component.js"
3481
3440
  }
3482
3441
  },
3483
3442
  {
3484
3443
  "kind": "method",
3485
- "name": "renderRequiredLabel",
3444
+ "name": "setActive",
3486
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.",
3487
3463
  "inheritedFrom": {
3488
- "name": "FormfieldWrapper",
3489
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3464
+ "name": "Buttonsimple",
3465
+ "module": "components/buttonsimple/buttonsimple.component.js"
3490
3466
  }
3491
3467
  },
3492
3468
  {
3493
3469
  "kind": "method",
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": ""
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."
3500
3486
  }
3501
- },
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.",
3502
3489
  "inheritedFrom": {
3503
- "name": "FormfieldWrapper",
3504
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3490
+ "name": "Buttonsimple",
3491
+ "module": "components/buttonsimple/buttonsimple.component.js"
3505
3492
  }
3506
3493
  },
3507
3494
  {
3508
3495
  "kind": "method",
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": ""
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."
3515
3512
  }
3516
- },
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.",
3517
3515
  "inheritedFrom": {
3518
- "name": "FormfieldWrapper",
3519
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3516
+ "name": "Buttonsimple",
3517
+ "module": "components/buttonsimple/buttonsimple.component.js"
3520
3518
  }
3521
3519
  },
3522
3520
  {
3523
3521
  "kind": "method",
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": ""
3522
+ "name": "triggerClickEvent",
3523
+ "privacy": "private",
3524
+ "inheritedFrom": {
3525
+ "name": "Buttonsimple",
3526
+ "module": "components/buttonsimple/buttonsimple.component.js"
3527
+ }
3528
+ },
3529
+ {
3530
+ "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.",
3534
+ "inheritedFrom": {
3535
+ "name": "Buttonsimple",
3536
+ "module": "components/buttonsimple/buttonsimple.component.js"
3537
+ }
3538
+ },
3539
+ {
3540
+ "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."
3530
3550
  }
3531
- },
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.",
3532
3553
  "inheritedFrom": {
3533
- "name": "FormfieldWrapper",
3534
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3554
+ "name": "Buttonsimple",
3555
+ "module": "components/buttonsimple/buttonsimple.component.js"
3535
3556
  }
3536
3557
  },
3537
3558
  {
3538
3559
  "kind": "method",
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": ""
3560
+ "name": "handleKeyUp",
3561
+ "privacy": "private",
3562
+ "parameters": [
3563
+ {
3564
+ "name": "event",
3565
+ "type": {
3566
+ "text": "KeyboardEvent"
3567
+ },
3568
+ "description": "The keyboard event."
3545
3569
  }
3546
- },
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.",
3547
3572
  "inheritedFrom": {
3548
- "name": "FormfieldWrapper",
3549
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3550
- }
3551
- }
3552
- ],
3553
- "events": [
3554
- {
3555
- "type": {
3556
- "text": "EventConstructor"
3573
+ "name": "Buttonsimple",
3574
+ "module": "components/buttonsimple/buttonsimple.component.js"
3557
3575
  }
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"
3570
3576
  }
3571
3577
  ],
3572
3578
  "attributes": [
3573
3579
  {
3574
- "name": "checked",
3575
- "type": {
3576
- "text": "boolean"
3577
- },
3578
- "default": "false",
3579
- "description": "Determines whether the checkbox is selected or unselected.",
3580
- "fieldName": "checked"
3581
- },
3582
- {
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",
3580
+ "name": "color",
3602
3581
  "type": {
3603
- "text": "string"
3582
+ "text": "ColorType"
3604
3583
  },
3605
- "default": "''",
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
- }
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"
3612
3587
  },
3613
3588
  {
3614
- "name": "value",
3589
+ "name": "label",
3615
3590
  "type": {
3616
3591
  "text": "string"
3617
3592
  },
3618
3593
  "default": "''",
3619
- "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
3620
- "fieldName": "value",
3621
- "inheritedFrom": {
3622
- "name": "FormInternalsMixin",
3623
- "module": "src/utils/mixins/FormInternalsMixin.ts"
3624
- }
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"
3625
3596
  },
3626
3597
  {
3627
- "name": "validation-message",
3598
+ "name": "icon-name",
3628
3599
  "type": {
3629
- "text": "string | undefined"
3600
+ "text": "IconNames | undefined"
3630
3601
  },
3631
- "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
3632
- "fieldName": "validationMessage",
3602
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
3603
+ "fieldName": "iconName",
3633
3604
  "inheritedFrom": {
3634
- "name": "FormInternalsMixin",
3635
- "module": "src/utils/mixins/FormInternalsMixin.ts"
3605
+ "name": "IconNameMixin",
3606
+ "module": "src/utils/mixins/IconNameMixin.ts"
3636
3607
  }
3637
3608
  },
3638
3609
  {
3639
- "name": "data-aria-label",
3610
+ "name": "tabIndex",
3640
3611
  "type": {
3641
- "text": "string | null"
3612
+ "text": "number"
3642
3613
  },
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",
3614
+ "default": "0",
3615
+ "description": "This property specifies the tab order of the element.",
3616
+ "fieldName": "tabIndex",
3646
3617
  "inheritedFrom": {
3647
- "name": "DataAriaLabelMixin",
3648
- "module": "src/utils/mixins/DataAriaLabelMixin.ts"
3618
+ "name": "Buttonsimple",
3619
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
3649
3620
  }
3650
3621
  },
3651
3622
  {
@@ -3657,96 +3628,125 @@
3657
3628
  "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
3658
3629
  "fieldName": "disabled",
3659
3630
  "inheritedFrom": {
3660
- "name": "DisabledMixin",
3661
- "module": "src/utils/mixins/DisabledMixin.ts"
3631
+ "name": "Buttonsimple",
3632
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
3662
3633
  }
3663
3634
  },
3664
3635
  {
3665
- "name": "label",
3636
+ "name": "active",
3666
3637
  "type": {
3667
- "text": "string | undefined"
3638
+ "text": "boolean"
3668
3639
  },
3669
- "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
3670
- "fieldName": "label",
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",
3671
3643
  "inheritedFrom": {
3672
- "name": "FormfieldWrapper",
3673
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
3644
+ "name": "Buttonsimple",
3645
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
3674
3646
  }
3675
3647
  },
3676
3648
  {
3677
- "name": "required-label",
3649
+ "name": "soft-disabled",
3678
3650
  "type": {
3679
- "text": "string | undefined"
3651
+ "text": "boolean"
3680
3652
  },
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",
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",
3683
3656
  "inheritedFrom": {
3684
- "name": "FormfieldWrapper",
3685
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
3657
+ "name": "Buttonsimple",
3658
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
3686
3659
  }
3687
3660
  },
3688
3661
  {
3689
- "name": "id",
3662
+ "name": "size",
3690
3663
  "type": {
3691
- "text": "string"
3664
+ "text": "ButtonSize"
3692
3665
  },
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",
3666
+ "description": "Simplebutton size is a super set of all the sizes supported by children components.",
3667
+ "default": "32",
3668
+ "fieldName": "size",
3696
3669
  "inheritedFrom": {
3697
- "name": "FormfieldWrapper",
3698
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
3670
+ "name": "Buttonsimple",
3671
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
3699
3672
  }
3700
3673
  },
3701
3674
  {
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",
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",
3708
3679
  "inheritedFrom": {
3709
- "name": "FormfieldWrapper",
3710
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
3680
+ "name": "Buttonsimple",
3681
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
3711
3682
  }
3712
3683
  },
3713
3684
  {
3714
- "name": "help-text",
3685
+ "name": "type",
3715
3686
  "type": {
3716
- "text": "string | undefined"
3687
+ "text": "ButtonType"
3717
3688
  },
3718
- "description": "The help text that is displayed below the input field.",
3719
- "fieldName": "helpText",
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",
3720
3692
  "inheritedFrom": {
3721
- "name": "FormfieldWrapper",
3722
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
3693
+ "name": "Buttonsimple",
3694
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
3723
3695
  }
3724
3696
  }
3725
3697
  ],
3726
3698
  "mixins": [
3727
3699
  {
3728
- "name": "FormInternalsMixin",
3729
- "module": "/src/utils/mixins/FormInternalsMixin"
3730
- },
3731
- {
3732
- "name": "DataAriaLabelMixin",
3733
- "module": "/src/utils/mixins/DataAriaLabelMixin"
3700
+ "name": "IconNameMixin",
3701
+ "module": "/src/utils/mixins/IconNameMixin"
3734
3702
  }
3735
3703
  ],
3736
3704
  "superclass": {
3737
- "name": "FormfieldWrapper",
3738
- "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
3705
+ "name": "Buttonsimple",
3706
+ "module": "/src/components/buttonsimple/buttonsimple.component"
3739
3707
  },
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 */",
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 */",
3742
3710
  "customElement": true,
3743
- "slots": [
3711
+ "events": [
3744
3712
  {
3745
- "description": "slot to add the label info icon",
3746
- "name": "label-info",
3713
+ "description": "(React: onClick) This event is dispatched when the button is clicked.",
3714
+ "name": "click",
3715
+ "reactName": "onClick",
3716
+ "eventName": "ClickEvent",
3747
3717
  "inheritedFrom": {
3748
- "name": "FormfieldWrapper",
3749
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
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
+ },
3742
+ {
3743
+ "description": "(React: onFocus) This event is dispatched when the button receives focus.",
3744
+ "name": "focus",
3745
+ "reactName": "onFocus",
3746
+ "eventName": "FocusEvent",
3747
+ "inheritedFrom": {
3748
+ "name": "Buttonsimple",
3749
+ "module": "src/components/buttonsimple/buttonsimple.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": "Checkbox",
3761
- "module": "components/checkbox/checkbox.component.js"
3760
+ "name": "Chip",
3761
+ "module": "components/chip/chip.component.js"
3762
3762
  }
3763
3763
  }
3764
3764
  ]