@momentum-design/components 0.16.1 → 0.16.3

Sign up to get free protection for your applications and to get access to all the features.
@@ -4,35 +4,109 @@
4
4
  "modules": [
5
5
  {
6
6
  "kind": "javascript-module",
7
- "path": "components/avatar/avatar.component.js",
7
+ "path": "components/avatarbutton/avatarbutton.component.js",
8
8
  "declarations": [
9
9
  {
10
10
  "kind": "class",
11
- "description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
12
- "name": "Avatar",
13
- "cssProperties": [
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",
13
+ "members": [
14
14
  {
15
- "description": "Allows customization of the default background color.",
16
- "name": "--mdc-avatar-default-background-color"
15
+ "kind": "field",
16
+ "name": "ariaLabel",
17
+ "type": {
18
+ "text": "string | null"
19
+ },
20
+ "default": "null",
21
+ "description": "Aria-label attribute to be set for accessibility",
22
+ "attribute": "aria-label"
17
23
  },
18
24
  {
19
- "description": "Allows customization of the default foreground color.",
20
- "name": "--mdc-avatar-default-foreground-color"
25
+ "kind": "method",
26
+ "name": "setSize",
27
+ "privacy": "private",
28
+ "parameters": [
29
+ {
30
+ "name": "size",
31
+ "type": {
32
+ "text": "AvatarSize"
33
+ }
34
+ }
35
+ ]
21
36
  },
22
37
  {
23
- "description": "Allows customization of the loading indicator background color.",
24
- "name": "--mdc-avatar-loading-indicator-background-color"
38
+ "kind": "field",
39
+ "name": "active",
40
+ "type": {
41
+ "text": "boolean"
42
+ },
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
+ "inheritedFrom": {
47
+ "name": "Buttonsimple",
48
+ "module": "components/buttonsimple/buttonsimple.component.js"
49
+ }
25
50
  },
26
51
  {
27
- "description": "Allows customization of the loading indicator foreground color.",
28
- "name": "--mdc-avatar-loading-indicator-foreground-color"
52
+ "kind": "field",
53
+ "name": "disabled",
54
+ "type": {
55
+ "text": "boolean"
56
+ },
57
+ "default": "undefined as unknown",
58
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
59
+ "attribute": "disabled",
60
+ "reflects": true,
61
+ "inheritedFrom": {
62
+ "name": "DisabledMixin",
63
+ "module": "utils/mixins/DisabledMixin.js"
64
+ }
29
65
  },
30
66
  {
31
- "description": "Allows customization of the loading overlay background color.",
32
- "name": "--mdc-avatar-loading-overlay-background-color"
33
- }
34
- ],
35
- "members": [
67
+ "kind": "field",
68
+ "name": "softDisabled",
69
+ "type": {
70
+ "text": "boolean"
71
+ },
72
+ "default": "undefined as unknown",
73
+ "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.",
74
+ "attribute": "soft-disabled",
75
+ "inheritedFrom": {
76
+ "name": "Buttonsimple",
77
+ "module": "components/buttonsimple/buttonsimple.component.js"
78
+ }
79
+ },
80
+ {
81
+ "kind": "field",
82
+ "name": "role",
83
+ "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.",
84
+ "default": "'button'",
85
+ "attribute": "role",
86
+ "reflects": true,
87
+ "type": {
88
+ "text": "string"
89
+ },
90
+ "inheritedFrom": {
91
+ "name": "Buttonsimple",
92
+ "module": "components/buttonsimple/buttonsimple.component.js"
93
+ }
94
+ },
95
+ {
96
+ "kind": "field",
97
+ "name": "type",
98
+ "type": {
99
+ "text": "ButtonType"
100
+ },
101
+ "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.",
102
+ "default": "button",
103
+ "attribute": "type",
104
+ "reflects": true,
105
+ "inheritedFrom": {
106
+ "name": "Buttonsimple",
107
+ "module": "components/buttonsimple/buttonsimple.component.js"
108
+ }
109
+ },
36
110
  {
37
111
  "kind": "field",
38
112
  "name": "src",
@@ -76,15 +150,15 @@
76
150
  "kind": "field",
77
151
  "name": "size",
78
152
  "type": {
79
- "text": "AvatarSize"
153
+ "text": "ButtonSize"
80
154
  },
81
155
  "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
82
156
  "default": "32",
83
157
  "attribute": "size",
84
158
  "reflects": true,
85
159
  "inheritedFrom": {
86
- "name": "AvatarComponentMixin",
87
- "module": "utils/mixins/AvatarComponentMixin.js"
160
+ "name": "Buttonsimple",
161
+ "module": "components/buttonsimple/buttonsimple.component.js"
88
162
  }
89
163
  },
90
164
  {
@@ -126,98 +200,243 @@
126
200
  "name": "AvatarComponentMixin",
127
201
  "module": "utils/mixins/AvatarComponentMixin.js"
128
202
  }
129
- }
130
- ],
131
- "mixins": [
132
- {
133
- "name": "AvatarComponentMixin",
134
- "module": "/src/utils/mixins/AvatarComponentMixin"
135
- }
136
- ],
137
- "superclass": {
138
- "name": "Component",
139
- "module": "/src/models"
140
- },
141
- "tagName": "mdc-avatar",
142
- "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n * Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n * Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n * Allows customization of the loading overlay background color.\n */",
143
- "customElement": true,
144
- "attributes": [
145
- {
146
- "name": "src",
147
- "type": {
148
- "text": "string | undefined"
149
- },
150
- "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.",
151
- "fieldName": "src",
152
- "inheritedFrom": {
153
- "name": "AvatarComponentMixin",
154
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
155
- }
156
203
  },
157
204
  {
158
- "name": "initials",
205
+ "kind": "field",
206
+ "name": "tabIndex",
159
207
  "type": {
160
- "text": "string | undefined"
208
+ "text": "number"
161
209
  },
162
- "description": "The initials to be displayed for the avatar.",
163
- "fieldName": "initials",
210
+ "default": "0",
211
+ "description": "This property specifies the tab order of the element.",
212
+ "attribute": "tabIndex",
213
+ "reflects": true,
164
214
  "inheritedFrom": {
165
- "name": "AvatarComponentMixin",
166
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
215
+ "name": "TabIndexMixin",
216
+ "module": "utils/mixins/TabIndexMixin.js"
167
217
  }
168
218
  },
169
219
  {
170
- "name": "presence",
171
- "type": {
172
- "text": "PresenceType | undefined"
173
- },
174
- "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`",
175
- "fieldName": "presence",
220
+ "kind": "method",
221
+ "name": "executeAction",
222
+ "privacy": "private",
176
223
  "inheritedFrom": {
177
- "name": "AvatarComponentMixin",
178
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
224
+ "name": "Buttonsimple",
225
+ "module": "components/buttonsimple/buttonsimple.component.js"
179
226
  }
180
227
  },
181
228
  {
182
- "name": "size",
183
- "type": {
184
- "text": "AvatarSize"
185
- },
186
- "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
187
- "default": "32",
188
- "fieldName": "size",
229
+ "kind": "method",
230
+ "name": "setAriaPressed",
231
+ "privacy": "private",
232
+ "parameters": [
233
+ {
234
+ "name": "element",
235
+ "type": {
236
+ "text": "HTMLElement"
237
+ },
238
+ "description": "The target element."
239
+ },
240
+ {
241
+ "name": "active",
242
+ "type": {
243
+ "text": "boolean"
244
+ },
245
+ "description": "The active state."
246
+ }
247
+ ],
248
+ "description": "Sets the aria-pressed attribute based on the active state.",
189
249
  "inheritedFrom": {
190
- "name": "AvatarComponentMixin",
191
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
250
+ "name": "Buttonsimple",
251
+ "module": "components/buttonsimple/buttonsimple.component.js"
192
252
  }
193
253
  },
194
254
  {
195
- "name": "icon-name",
196
- "type": {
197
- "text": "IconNames | undefined"
198
- },
199
- "description": "Name of the icon to be displayed inside the Avatar.\nMust be a valid icon name.",
200
- "fieldName": "iconName",
255
+ "kind": "method",
256
+ "name": "setSoftDisabled",
257
+ "privacy": "private",
258
+ "parameters": [
259
+ {
260
+ "name": "element",
261
+ "type": {
262
+ "text": "HTMLElement"
263
+ },
264
+ "description": "The button element."
265
+ },
266
+ {
267
+ "name": "softDisabled",
268
+ "type": {
269
+ "text": "boolean"
270
+ },
271
+ "description": "The soft-disabled state."
272
+ }
273
+ ],
274
+ "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.",
201
275
  "inheritedFrom": {
202
- "name": "AvatarComponentMixin",
203
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
276
+ "name": "Buttonsimple",
277
+ "module": "components/buttonsimple/buttonsimple.component.js"
204
278
  }
205
279
  },
206
280
  {
207
- "name": "counter",
208
- "type": {
209
- "text": "number | undefined"
210
- },
211
- "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`.",
212
- "fieldName": "counter",
281
+ "kind": "method",
282
+ "name": "setDisabled",
283
+ "privacy": "private",
284
+ "parameters": [
285
+ {
286
+ "name": "element",
287
+ "type": {
288
+ "text": "HTMLElement"
289
+ },
290
+ "description": "The button element."
291
+ },
292
+ {
293
+ "name": "disabled",
294
+ "type": {
295
+ "text": "boolean"
296
+ },
297
+ "description": "The disabled state."
298
+ }
299
+ ],
300
+ "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.",
213
301
  "inheritedFrom": {
214
- "name": "AvatarComponentMixin",
215
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
302
+ "name": "Buttonsimple",
303
+ "module": "components/buttonsimple/buttonsimple.component.js"
216
304
  }
217
305
  },
218
306
  {
219
- "name": "is-typing",
220
- "type": {
307
+ "kind": "method",
308
+ "name": "triggerClickEvent",
309
+ "privacy": "private",
310
+ "inheritedFrom": {
311
+ "name": "Buttonsimple",
312
+ "module": "components/buttonsimple/buttonsimple.component.js"
313
+ }
314
+ },
315
+ {
316
+ "kind": "method",
317
+ "name": "handleKeyDown",
318
+ "privacy": "private",
319
+ "parameters": [
320
+ {
321
+ "name": "event",
322
+ "type": {
323
+ "text": "KeyboardEvent"
324
+ },
325
+ "description": "The keyboard event."
326
+ }
327
+ ],
328
+ "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.",
329
+ "inheritedFrom": {
330
+ "name": "Buttonsimple",
331
+ "module": "components/buttonsimple/buttonsimple.component.js"
332
+ }
333
+ },
334
+ {
335
+ "kind": "method",
336
+ "name": "handleKeyUp",
337
+ "privacy": "private",
338
+ "parameters": [
339
+ {
340
+ "name": "event",
341
+ "type": {
342
+ "text": "KeyboardEvent"
343
+ },
344
+ "description": "The keyboard event."
345
+ }
346
+ ],
347
+ "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.",
348
+ "inheritedFrom": {
349
+ "name": "Buttonsimple",
350
+ "module": "components/buttonsimple/buttonsimple.component.js"
351
+ }
352
+ }
353
+ ],
354
+ "attributes": [
355
+ {
356
+ "name": "aria-label",
357
+ "type": {
358
+ "text": "string | null"
359
+ },
360
+ "default": "null",
361
+ "description": "Aria-label attribute to be set for accessibility",
362
+ "fieldName": "ariaLabel"
363
+ },
364
+ {
365
+ "name": "src",
366
+ "type": {
367
+ "text": "string | undefined"
368
+ },
369
+ "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.",
370
+ "fieldName": "src",
371
+ "inheritedFrom": {
372
+ "name": "AvatarComponentMixin",
373
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
374
+ }
375
+ },
376
+ {
377
+ "name": "initials",
378
+ "type": {
379
+ "text": "string | undefined"
380
+ },
381
+ "description": "The initials to be displayed for the avatar.",
382
+ "fieldName": "initials",
383
+ "inheritedFrom": {
384
+ "name": "AvatarComponentMixin",
385
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
386
+ }
387
+ },
388
+ {
389
+ "name": "presence",
390
+ "type": {
391
+ "text": "PresenceType | undefined"
392
+ },
393
+ "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`",
394
+ "fieldName": "presence",
395
+ "inheritedFrom": {
396
+ "name": "AvatarComponentMixin",
397
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
398
+ }
399
+ },
400
+ {
401
+ "name": "size",
402
+ "type": {
403
+ "text": "ButtonSize"
404
+ },
405
+ "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
406
+ "default": "32",
407
+ "fieldName": "size",
408
+ "inheritedFrom": {
409
+ "name": "Buttonsimple",
410
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
411
+ }
412
+ },
413
+ {
414
+ "name": "icon-name",
415
+ "type": {
416
+ "text": "IconNames | undefined"
417
+ },
418
+ "description": "Name of the icon to be displayed inside the Avatar.\nMust be a valid icon name.",
419
+ "fieldName": "iconName",
420
+ "inheritedFrom": {
421
+ "name": "AvatarComponentMixin",
422
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
423
+ }
424
+ },
425
+ {
426
+ "name": "counter",
427
+ "type": {
428
+ "text": "number | undefined"
429
+ },
430
+ "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`.",
431
+ "fieldName": "counter",
432
+ "inheritedFrom": {
433
+ "name": "AvatarComponentMixin",
434
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
435
+ }
436
+ },
437
+ {
438
+ "name": "is-typing",
439
+ "type": {
221
440
  "text": "boolean"
222
441
  },
223
442
  "default": "false",
@@ -227,8 +446,96 @@
227
446
  "name": "AvatarComponentMixin",
228
447
  "module": "src/utils/mixins/AvatarComponentMixin.ts"
229
448
  }
449
+ },
450
+ {
451
+ "name": "tabIndex",
452
+ "type": {
453
+ "text": "number"
454
+ },
455
+ "default": "0",
456
+ "description": "This property specifies the tab order of the element.",
457
+ "fieldName": "tabIndex",
458
+ "inheritedFrom": {
459
+ "name": "TabIndexMixin",
460
+ "module": "src/utils/mixins/TabIndexMixin.ts"
461
+ }
462
+ },
463
+ {
464
+ "name": "disabled",
465
+ "type": {
466
+ "text": "boolean"
467
+ },
468
+ "default": "false",
469
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
470
+ "fieldName": "disabled",
471
+ "inheritedFrom": {
472
+ "name": "DisabledMixin",
473
+ "module": "src/utils/mixins/DisabledMixin.ts"
474
+ }
475
+ },
476
+ {
477
+ "name": "active",
478
+ "type": {
479
+ "text": "boolean"
480
+ },
481
+ "default": "false",
482
+ "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.",
483
+ "fieldName": "active",
484
+ "inheritedFrom": {
485
+ "name": "Buttonsimple",
486
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
487
+ }
488
+ },
489
+ {
490
+ "name": "soft-disabled",
491
+ "type": {
492
+ "text": "boolean"
493
+ },
494
+ "default": "false",
495
+ "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.",
496
+ "fieldName": "softDisabled",
497
+ "inheritedFrom": {
498
+ "name": "Buttonsimple",
499
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
500
+ }
501
+ },
502
+ {
503
+ "name": "role",
504
+ "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.",
505
+ "default": "button",
506
+ "fieldName": "role",
507
+ "inheritedFrom": {
508
+ "name": "Buttonsimple",
509
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
510
+ }
511
+ },
512
+ {
513
+ "name": "type",
514
+ "type": {
515
+ "text": "ButtonType"
516
+ },
517
+ "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.",
518
+ "default": "button",
519
+ "fieldName": "type",
520
+ "inheritedFrom": {
521
+ "name": "Buttonsimple",
522
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
523
+ }
230
524
  }
231
- ]
525
+ ],
526
+ "mixins": [
527
+ {
528
+ "name": "AvatarComponentMixin",
529
+ "module": "/src/utils/mixins/AvatarComponentMixin"
530
+ }
531
+ ],
532
+ "superclass": {
533
+ "name": "Buttonsimple",
534
+ "module": "/src/components/buttonsimple"
535
+ },
536
+ "tagName": "mdc-avatarbutton",
537
+ "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 * @tagname mdc-avatarbutton\n */",
538
+ "customElement": true
232
539
  }
233
540
  ],
234
541
  "exports": [
@@ -236,8 +543,8 @@
236
543
  "kind": "js",
237
544
  "name": "default",
238
545
  "declaration": {
239
- "name": "Avatar",
240
- "module": "components/avatar/avatar.component.js"
546
+ "name": "AvatarButton",
547
+ "module": "components/avatarbutton/avatarbutton.component.js"
241
548
  }
242
549
  }
243
550
  ]
@@ -505,108 +812,35 @@
505
812
  },
506
813
  {
507
814
  "kind": "javascript-module",
508
- "path": "components/avatarbutton/avatarbutton.component.js",
815
+ "path": "components/avatar/avatar.component.js",
509
816
  "declarations": [
510
817
  {
511
818
  "kind": "class",
512
- "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.",
513
- "name": "AvatarButton",
514
- "members": [
819
+ "description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
820
+ "name": "Avatar",
821
+ "cssProperties": [
515
822
  {
516
- "kind": "field",
517
- "name": "ariaLabel",
518
- "type": {
519
- "text": "string | null"
520
- },
521
- "default": "null",
522
- "description": "Aria-label attribute to be set for accessibility",
523
- "attribute": "aria-label"
823
+ "description": "Allows customization of the default background color.",
824
+ "name": "--mdc-avatar-default-background-color"
524
825
  },
525
826
  {
526
- "kind": "method",
527
- "name": "setSize",
528
- "privacy": "private",
529
- "parameters": [
530
- {
531
- "name": "size",
532
- "type": {
533
- "text": "AvatarSize"
534
- }
535
- }
536
- ]
827
+ "description": "Allows customization of the default foreground color.",
828
+ "name": "--mdc-avatar-default-foreground-color"
537
829
  },
538
830
  {
539
- "kind": "field",
540
- "name": "active",
541
- "type": {
542
- "text": "boolean"
543
- },
544
- "default": "undefined as unknown",
545
- "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.",
546
- "attribute": "active",
547
- "inheritedFrom": {
548
- "name": "Buttonsimple",
549
- "module": "components/buttonsimple/buttonsimple.component.js"
550
- }
551
- },
552
- {
553
- "kind": "field",
554
- "name": "disabled",
555
- "type": {
556
- "text": "boolean"
557
- },
558
- "default": "undefined as unknown",
559
- "description": "Indicates whether the button is disabled.\nWhen the button is disabled for user interaction; it is not focusable or clickable.",
560
- "attribute": "disabled",
561
- "inheritedFrom": {
562
- "name": "Buttonsimple",
563
- "module": "components/buttonsimple/buttonsimple.component.js"
564
- }
565
- },
566
- {
567
- "kind": "field",
568
- "name": "softDisabled",
569
- "type": {
570
- "text": "boolean"
571
- },
572
- "default": "undefined as unknown",
573
- "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.",
574
- "attribute": "soft-disabled",
575
- "inheritedFrom": {
576
- "name": "Buttonsimple",
577
- "module": "components/buttonsimple/buttonsimple.component.js"
578
- }
831
+ "description": "Allows customization of the loading indicator background color.",
832
+ "name": "--mdc-avatar-loading-indicator-background-color"
579
833
  },
580
834
  {
581
- "kind": "field",
582
- "name": "role",
583
- "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.",
584
- "default": "'button'",
585
- "attribute": "role",
586
- "reflects": true,
587
- "type": {
588
- "text": "string"
589
- },
590
- "inheritedFrom": {
591
- "name": "Buttonsimple",
592
- "module": "components/buttonsimple/buttonsimple.component.js"
593
- }
835
+ "description": "Allows customization of the loading indicator foreground color.",
836
+ "name": "--mdc-avatar-loading-indicator-foreground-color"
594
837
  },
595
838
  {
596
- "kind": "field",
597
- "name": "type",
598
- "type": {
599
- "text": "ButtonType"
600
- },
601
- "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.",
602
- "default": "button",
603
- "attribute": "type",
604
- "reflects": true,
605
- "inheritedFrom": {
606
- "name": "Buttonsimple",
607
- "module": "components/buttonsimple/buttonsimple.component.js"
608
- }
609
- },
839
+ "description": "Allows customization of the loading overlay background color.",
840
+ "name": "--mdc-avatar-loading-overlay-background-color"
841
+ }
842
+ ],
843
+ "members": [
610
844
  {
611
845
  "kind": "field",
612
846
  "name": "src",
@@ -650,15 +884,15 @@
650
884
  "kind": "field",
651
885
  "name": "size",
652
886
  "type": {
653
- "text": "ButtonSize"
887
+ "text": "AvatarSize"
654
888
  },
655
889
  "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
656
890
  "default": "32",
657
891
  "attribute": "size",
658
892
  "reflects": true,
659
893
  "inheritedFrom": {
660
- "name": "Buttonsimple",
661
- "module": "components/buttonsimple/buttonsimple.component.js"
894
+ "name": "AvatarComponentMixin",
895
+ "module": "utils/mixins/AvatarComponentMixin.js"
662
896
  }
663
897
  },
664
898
  {
@@ -700,167 +934,22 @@
700
934
  "name": "AvatarComponentMixin",
701
935
  "module": "utils/mixins/AvatarComponentMixin.js"
702
936
  }
703
- },
704
- {
705
- "kind": "field",
706
- "name": "tabIndex",
707
- "type": {
708
- "text": "number"
709
- },
710
- "default": "0",
711
- "description": "The tabindex of the button.",
712
- "attribute": "tabIndex",
713
- "reflects": true,
714
- "inheritedFrom": {
715
- "name": "Buttonsimple",
716
- "module": "components/buttonsimple/buttonsimple.component.js"
717
- }
718
- },
719
- {
720
- "kind": "method",
721
- "name": "executeAction",
722
- "privacy": "private",
723
- "inheritedFrom": {
724
- "name": "Buttonsimple",
725
- "module": "components/buttonsimple/buttonsimple.component.js"
726
- }
727
- },
728
- {
729
- "kind": "method",
730
- "name": "setAriaPressed",
731
- "privacy": "private",
732
- "parameters": [
733
- {
734
- "name": "element",
735
- "type": {
736
- "text": "HTMLElement"
737
- },
738
- "description": "The target element."
739
- },
740
- {
741
- "name": "active",
742
- "type": {
743
- "text": "boolean"
744
- },
745
- "description": "The active state."
746
- }
747
- ],
748
- "description": "Sets the aria-pressed attribute based on the active state.",
749
- "inheritedFrom": {
750
- "name": "Buttonsimple",
751
- "module": "components/buttonsimple/buttonsimple.component.js"
752
- }
753
- },
754
- {
755
- "kind": "method",
756
- "name": "setSoftDisabled",
757
- "privacy": "private",
758
- "parameters": [
759
- {
760
- "name": "element",
761
- "type": {
762
- "text": "HTMLElement"
763
- },
764
- "description": "The button element."
765
- },
766
- {
767
- "name": "softDisabled",
768
- "type": {
769
- "text": "boolean"
770
- },
771
- "description": "The soft-disabled state."
772
- }
773
- ],
774
- "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.",
775
- "inheritedFrom": {
776
- "name": "Buttonsimple",
777
- "module": "components/buttonsimple/buttonsimple.component.js"
778
- }
779
- },
780
- {
781
- "kind": "method",
782
- "name": "setDisabled",
783
- "privacy": "private",
784
- "parameters": [
785
- {
786
- "name": "element",
787
- "type": {
788
- "text": "HTMLElement"
789
- },
790
- "description": "The button element."
791
- },
792
- {
793
- "name": "disabled",
794
- "type": {
795
- "text": "boolean"
796
- },
797
- "description": "The disabled state."
798
- }
799
- ],
800
- "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.",
801
- "inheritedFrom": {
802
- "name": "Buttonsimple",
803
- "module": "components/buttonsimple/buttonsimple.component.js"
804
- }
805
- },
806
- {
807
- "kind": "method",
808
- "name": "triggerClickEvent",
809
- "privacy": "private",
810
- "inheritedFrom": {
811
- "name": "Buttonsimple",
812
- "module": "components/buttonsimple/buttonsimple.component.js"
813
- }
814
- },
815
- {
816
- "kind": "method",
817
- "name": "handleKeyDown",
818
- "privacy": "private",
819
- "parameters": [
820
- {
821
- "name": "event",
822
- "type": {
823
- "text": "KeyboardEvent"
824
- },
825
- "description": "The keyboard event."
826
- }
827
- ],
828
- "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.",
829
- "inheritedFrom": {
830
- "name": "Buttonsimple",
831
- "module": "components/buttonsimple/buttonsimple.component.js"
832
- }
833
- },
937
+ }
938
+ ],
939
+ "mixins": [
834
940
  {
835
- "kind": "method",
836
- "name": "handleKeyUp",
837
- "privacy": "private",
838
- "parameters": [
839
- {
840
- "name": "event",
841
- "type": {
842
- "text": "KeyboardEvent"
843
- },
844
- "description": "The keyboard event."
845
- }
846
- ],
847
- "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.",
848
- "inheritedFrom": {
849
- "name": "Buttonsimple",
850
- "module": "components/buttonsimple/buttonsimple.component.js"
851
- }
941
+ "name": "AvatarComponentMixin",
942
+ "module": "/src/utils/mixins/AvatarComponentMixin"
852
943
  }
853
944
  ],
945
+ "superclass": {
946
+ "name": "Component",
947
+ "module": "/src/models"
948
+ },
949
+ "tagName": "mdc-avatar",
950
+ "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n * Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n * Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n * Allows customization of the loading overlay background color.\n */",
951
+ "customElement": true,
854
952
  "attributes": [
855
- {
856
- "name": "aria-label",
857
- "type": {
858
- "text": "string | null"
859
- },
860
- "default": "null",
861
- "description": "Aria-label attribute to be set for accessibility",
862
- "fieldName": "ariaLabel"
863
- },
864
953
  {
865
954
  "name": "src",
866
955
  "type": {
@@ -890,152 +979,64 @@
890
979
  "type": {
891
980
  "text": "PresenceType | undefined"
892
981
  },
893
- "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`",
894
- "fieldName": "presence",
895
- "inheritedFrom": {
896
- "name": "AvatarComponentMixin",
897
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
898
- }
899
- },
900
- {
901
- "name": "size",
902
- "type": {
903
- "text": "ButtonSize"
904
- },
905
- "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
906
- "default": "32",
907
- "fieldName": "size",
908
- "inheritedFrom": {
909
- "name": "Buttonsimple",
910
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
911
- }
912
- },
913
- {
914
- "name": "icon-name",
915
- "type": {
916
- "text": "IconNames | undefined"
917
- },
918
- "description": "Name of the icon to be displayed inside the Avatar.\nMust be a valid icon name.",
919
- "fieldName": "iconName",
920
- "inheritedFrom": {
921
- "name": "AvatarComponentMixin",
922
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
923
- }
924
- },
925
- {
926
- "name": "counter",
927
- "type": {
928
- "text": "number | undefined"
929
- },
930
- "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`.",
931
- "fieldName": "counter",
932
- "inheritedFrom": {
933
- "name": "AvatarComponentMixin",
934
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
935
- }
936
- },
937
- {
938
- "name": "is-typing",
939
- "type": {
940
- "text": "boolean"
941
- },
942
- "default": "false",
943
- "description": "Represents the typing indicator when the user is typing.",
944
- "fieldName": "isTyping",
945
- "inheritedFrom": {
946
- "name": "AvatarComponentMixin",
947
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
948
- }
949
- },
950
- {
951
- "name": "active",
952
- "type": {
953
- "text": "boolean"
954
- },
955
- "default": "false",
956
- "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.",
957
- "fieldName": "active",
958
- "inheritedFrom": {
959
- "name": "Buttonsimple",
960
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
961
- }
962
- },
963
- {
964
- "name": "disabled",
965
- "type": {
966
- "text": "boolean"
967
- },
968
- "default": "false",
969
- "description": "Indicates whether the button is disabled.\nWhen the button is disabled for user interaction; it is not focusable or clickable.",
970
- "fieldName": "disabled",
982
+ "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`",
983
+ "fieldName": "presence",
971
984
  "inheritedFrom": {
972
- "name": "Buttonsimple",
973
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
985
+ "name": "AvatarComponentMixin",
986
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
974
987
  }
975
988
  },
976
989
  {
977
- "name": "soft-disabled",
990
+ "name": "size",
978
991
  "type": {
979
- "text": "boolean"
992
+ "text": "AvatarSize"
980
993
  },
981
- "default": "false",
982
- "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.",
983
- "fieldName": "softDisabled",
994
+ "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
995
+ "default": "32",
996
+ "fieldName": "size",
984
997
  "inheritedFrom": {
985
- "name": "Buttonsimple",
986
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
998
+ "name": "AvatarComponentMixin",
999
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
987
1000
  }
988
1001
  },
989
1002
  {
990
- "name": "tabIndex",
1003
+ "name": "icon-name",
991
1004
  "type": {
992
- "text": "number"
1005
+ "text": "IconNames | undefined"
993
1006
  },
994
- "default": "0",
995
- "description": "The tabindex of the button.",
996
- "fieldName": "tabIndex",
1007
+ "description": "Name of the icon to be displayed inside the Avatar.\nMust be a valid icon name.",
1008
+ "fieldName": "iconName",
997
1009
  "inheritedFrom": {
998
- "name": "Buttonsimple",
999
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
1010
+ "name": "AvatarComponentMixin",
1011
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
1000
1012
  }
1001
1013
  },
1002
1014
  {
1003
- "name": "role",
1004
- "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.",
1005
- "default": "button",
1006
- "fieldName": "role",
1015
+ "name": "counter",
1016
+ "type": {
1017
+ "text": "number | undefined"
1018
+ },
1019
+ "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`.",
1020
+ "fieldName": "counter",
1007
1021
  "inheritedFrom": {
1008
- "name": "Buttonsimple",
1009
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
1022
+ "name": "AvatarComponentMixin",
1023
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
1010
1024
  }
1011
1025
  },
1012
1026
  {
1013
- "name": "type",
1027
+ "name": "is-typing",
1014
1028
  "type": {
1015
- "text": "ButtonType"
1029
+ "text": "boolean"
1016
1030
  },
1017
- "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.",
1018
- "default": "button",
1019
- "fieldName": "type",
1031
+ "default": "false",
1032
+ "description": "Represents the typing indicator when the user is typing.",
1033
+ "fieldName": "isTyping",
1020
1034
  "inheritedFrom": {
1021
- "name": "Buttonsimple",
1022
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
1035
+ "name": "AvatarComponentMixin",
1036
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
1023
1037
  }
1024
1038
  }
1025
- ],
1026
- "mixins": [
1027
- {
1028
- "name": "AvatarComponentMixin",
1029
- "module": "/src/utils/mixins/AvatarComponentMixin"
1030
- }
1031
- ],
1032
- "superclass": {
1033
- "name": "Buttonsimple",
1034
- "module": "/src/components/buttonsimple"
1035
- },
1036
- "tagName": "mdc-avatarbutton",
1037
- "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 * @tagname mdc-avatarbutton\n */",
1038
- "customElement": true
1039
+ ]
1039
1040
  }
1040
1041
  ],
1041
1042
  "exports": [
@@ -1043,8 +1044,8 @@
1043
1044
  "kind": "js",
1044
1045
  "name": "default",
1045
1046
  "declaration": {
1046
- "name": "AvatarButton",
1047
- "module": "components/avatarbutton/avatarbutton.component.js"
1047
+ "name": "Avatar",
1048
+ "module": "components/avatar/avatar.component.js"
1048
1049
  }
1049
1050
  }
1050
1051
  ]
@@ -1190,21 +1191,6 @@
1190
1191
  "default": "default",
1191
1192
  "attribute": "color"
1192
1193
  },
1193
- {
1194
- "kind": "field",
1195
- "name": "tabIndex",
1196
- "type": {
1197
- "text": "number"
1198
- },
1199
- "default": "0",
1200
- "description": "The tabindex of the button.",
1201
- "attribute": "tabIndex",
1202
- "reflects": true,
1203
- "inheritedFrom": {
1204
- "name": "Buttonsimple",
1205
- "module": "components/buttonsimple/buttonsimple.component.js"
1206
- }
1207
- },
1208
1194
  {
1209
1195
  "kind": "field",
1210
1196
  "name": "role",
@@ -1294,16 +1280,17 @@
1294
1280
  },
1295
1281
  {
1296
1282
  "kind": "field",
1297
- "name": "active",
1283
+ "name": "tabIndex",
1298
1284
  "type": {
1299
- "text": "boolean"
1285
+ "text": "number"
1300
1286
  },
1301
- "default": "false",
1302
- "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.",
1303
- "attribute": "active",
1287
+ "default": "0",
1288
+ "description": "This property specifies the tab order of the element.",
1289
+ "attribute": "tabIndex",
1290
+ "reflects": true,
1304
1291
  "inheritedFrom": {
1305
- "name": "Buttonsimple",
1306
- "module": "components/buttonsimple/buttonsimple.component.js"
1292
+ "name": "TabIndexMixin",
1293
+ "module": "utils/mixins/TabIndexMixin.js"
1307
1294
  }
1308
1295
  },
1309
1296
  {
@@ -1313,8 +1300,23 @@
1313
1300
  "text": "boolean"
1314
1301
  },
1315
1302
  "default": "false",
1316
- "description": "Indicates whether the button is disabled.\nWhen the button is disabled for user interaction; it is not focusable or clickable.",
1303
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
1317
1304
  "attribute": "disabled",
1305
+ "reflects": true,
1306
+ "inheritedFrom": {
1307
+ "name": "DisabledMixin",
1308
+ "module": "utils/mixins/DisabledMixin.js"
1309
+ }
1310
+ },
1311
+ {
1312
+ "kind": "field",
1313
+ "name": "active",
1314
+ "type": {
1315
+ "text": "boolean"
1316
+ },
1317
+ "default": "false",
1318
+ "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.",
1319
+ "attribute": "active",
1318
1320
  "inheritedFrom": {
1319
1321
  "name": "Buttonsimple",
1320
1322
  "module": "components/buttonsimple/buttonsimple.component.js"
@@ -1533,52 +1535,52 @@
1533
1535
  "fieldName": "color"
1534
1536
  },
1535
1537
  {
1536
- "name": "tabIndex",
1538
+ "name": "role",
1539
+ "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.",
1540
+ "default": "'button'",
1541
+ "fieldName": "role",
1537
1542
  "type": {
1538
- "text": "number"
1543
+ "text": "string"
1539
1544
  },
1540
- "default": "0",
1541
- "description": "The tabindex of the button.",
1542
- "fieldName": "tabIndex",
1543
1545
  "inheritedFrom": {
1544
1546
  "name": "Buttonsimple",
1545
1547
  "module": "src/components/buttonsimple/buttonsimple.component.ts"
1546
1548
  }
1547
1549
  },
1548
1550
  {
1549
- "name": "role",
1550
- "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.",
1551
- "default": "'button'",
1552
- "fieldName": "role",
1551
+ "name": "tabIndex",
1553
1552
  "type": {
1554
- "text": "string"
1553
+ "text": "number"
1555
1554
  },
1555
+ "default": "0",
1556
+ "description": "This property specifies the tab order of the element.",
1557
+ "fieldName": "tabIndex",
1556
1558
  "inheritedFrom": {
1557
- "name": "Buttonsimple",
1558
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
1559
+ "name": "TabIndexMixin",
1560
+ "module": "src/utils/mixins/TabIndexMixin.ts"
1559
1561
  }
1560
1562
  },
1561
1563
  {
1562
- "name": "active",
1564
+ "name": "disabled",
1563
1565
  "type": {
1564
1566
  "text": "boolean"
1565
1567
  },
1566
1568
  "default": "false",
1567
- "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.",
1568
- "fieldName": "active",
1569
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
1570
+ "fieldName": "disabled",
1569
1571
  "inheritedFrom": {
1570
- "name": "Buttonsimple",
1571
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
1572
+ "name": "DisabledMixin",
1573
+ "module": "src/utils/mixins/DisabledMixin.ts"
1572
1574
  }
1573
1575
  },
1574
1576
  {
1575
- "name": "disabled",
1577
+ "name": "active",
1576
1578
  "type": {
1577
1579
  "text": "boolean"
1578
1580
  },
1579
1581
  "default": "false",
1580
- "description": "Indicates whether the button is disabled.\nWhen the button is disabled for user interaction; it is not focusable or clickable.",
1581
- "fieldName": "disabled",
1582
+ "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.",
1583
+ "fieldName": "active",
1582
1584
  "inheritedFrom": {
1583
1585
  "name": "Buttonsimple",
1584
1586
  "module": "src/components/buttonsimple/buttonsimple.component.ts"
@@ -1650,16 +1652,6 @@
1650
1652
  "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.",
1651
1653
  "attribute": "active"
1652
1654
  },
1653
- {
1654
- "kind": "field",
1655
- "name": "disabled",
1656
- "type": {
1657
- "text": "boolean"
1658
- },
1659
- "default": "false",
1660
- "description": "Indicates whether the button is disabled.\nWhen the button is disabled for user interaction; it is not focusable or clickable.",
1661
- "attribute": "disabled"
1662
- },
1663
1655
  {
1664
1656
  "kind": "field",
1665
1657
  "name": "softDisabled",
@@ -1681,17 +1673,6 @@
1681
1673
  "attribute": "size",
1682
1674
  "reflects": true
1683
1675
  },
1684
- {
1685
- "kind": "field",
1686
- "name": "tabIndex",
1687
- "type": {
1688
- "text": "number"
1689
- },
1690
- "default": "0",
1691
- "description": "The tabindex of the button.",
1692
- "attribute": "tabIndex",
1693
- "reflects": true
1694
- },
1695
1676
  {
1696
1677
  "kind": "field",
1697
1678
  "name": "role",
@@ -1816,6 +1797,36 @@
1816
1797
  }
1817
1798
  ],
1818
1799
  "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."
1800
+ },
1801
+ {
1802
+ "kind": "field",
1803
+ "name": "tabIndex",
1804
+ "type": {
1805
+ "text": "number"
1806
+ },
1807
+ "default": "0",
1808
+ "description": "This property specifies the tab order of the element.",
1809
+ "attribute": "tabIndex",
1810
+ "reflects": true,
1811
+ "inheritedFrom": {
1812
+ "name": "TabIndexMixin",
1813
+ "module": "utils/mixins/TabIndexMixin.js"
1814
+ }
1815
+ },
1816
+ {
1817
+ "kind": "field",
1818
+ "name": "disabled",
1819
+ "type": {
1820
+ "text": "boolean"
1821
+ },
1822
+ "default": "false",
1823
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
1824
+ "attribute": "disabled",
1825
+ "reflects": true,
1826
+ "inheritedFrom": {
1827
+ "name": "DisabledMixin",
1828
+ "module": "utils/mixins/DisabledMixin.js"
1829
+ }
1819
1830
  }
1820
1831
  ],
1821
1832
  "attributes": [
@@ -1828,15 +1839,6 @@
1828
1839
  "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.",
1829
1840
  "fieldName": "active"
1830
1841
  },
1831
- {
1832
- "name": "disabled",
1833
- "type": {
1834
- "text": "boolean"
1835
- },
1836
- "default": "false",
1837
- "description": "Indicates whether the button is disabled.\nWhen the button is disabled for user interaction; it is not focusable or clickable.",
1838
- "fieldName": "disabled"
1839
- },
1840
1842
  {
1841
1843
  "name": "soft-disabled",
1842
1844
  "type": {
@@ -1855,15 +1857,6 @@
1855
1857
  "default": "32",
1856
1858
  "fieldName": "size"
1857
1859
  },
1858
- {
1859
- "name": "tabIndex",
1860
- "type": {
1861
- "text": "number"
1862
- },
1863
- "default": "0",
1864
- "description": "The tabindex of the button.",
1865
- "fieldName": "tabIndex"
1866
- },
1867
1860
  {
1868
1861
  "name": "role",
1869
1862
  "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.",
@@ -1878,6 +1871,42 @@
1878
1871
  "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.",
1879
1872
  "default": "button",
1880
1873
  "fieldName": "type"
1874
+ },
1875
+ {
1876
+ "name": "tabIndex",
1877
+ "type": {
1878
+ "text": "number"
1879
+ },
1880
+ "default": "0",
1881
+ "description": "This property specifies the tab order of the element.",
1882
+ "fieldName": "tabIndex",
1883
+ "inheritedFrom": {
1884
+ "name": "TabIndexMixin",
1885
+ "module": "src/utils/mixins/TabIndexMixin.ts"
1886
+ }
1887
+ },
1888
+ {
1889
+ "name": "disabled",
1890
+ "type": {
1891
+ "text": "boolean"
1892
+ },
1893
+ "default": "false",
1894
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
1895
+ "fieldName": "disabled",
1896
+ "inheritedFrom": {
1897
+ "name": "DisabledMixin",
1898
+ "module": "src/utils/mixins/DisabledMixin.ts"
1899
+ }
1900
+ }
1901
+ ],
1902
+ "mixins": [
1903
+ {
1904
+ "name": "TabIndexMixin",
1905
+ "module": "/src/utils/mixins/TabIndexMixin"
1906
+ },
1907
+ {
1908
+ "name": "DisabledMixin",
1909
+ "module": "/src/utils/mixins/DisabledMixin"
1881
1910
  }
1882
1911
  ],
1883
1912
  "superclass": {
@@ -2604,6 +2633,28 @@
2604
2633
  "privacy": "private",
2605
2634
  "description": "Get the icon name based on the presence type",
2606
2635
  "readonly": true
2636
+ },
2637
+ {
2638
+ "kind": "method",
2639
+ "name": "handleOnLoad",
2640
+ "privacy": "private",
2641
+ "return": {
2642
+ "type": {
2643
+ "text": "void"
2644
+ }
2645
+ },
2646
+ "description": "Handles the successful load of an icon.\nSets the `currentIconType` property to match the `type` property."
2647
+ },
2648
+ {
2649
+ "kind": "method",
2650
+ "name": "handleOnError",
2651
+ "privacy": "private",
2652
+ "return": {
2653
+ "type": {
2654
+ "text": "void"
2655
+ }
2656
+ },
2657
+ "description": "Handles an error that occurs when loading an icon."
2607
2658
  }
2608
2659
  ],
2609
2660
  "attributes": [
@@ -3000,8 +3051,8 @@
3000
3051
  "type": {
3001
3052
  "text": "boolean"
3002
3053
  },
3003
- "privacy": "public",
3004
3054
  "default": "false",
3055
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
3005
3056
  "attribute": "disabled",
3006
3057
  "reflects": true
3007
3058
  }
@@ -3013,6 +3064,7 @@
3013
3064
  "text": "boolean"
3014
3065
  },
3015
3066
  "default": "false",
3067
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
3016
3068
  "fieldName": "disabled"
3017
3069
  }
3018
3070
  ],
@@ -3052,19 +3104,20 @@
3052
3104
  "type": {
3053
3105
  "text": "number"
3054
3106
  },
3055
- "privacy": "public",
3056
3107
  "default": "0",
3057
- "attribute": "tabindex",
3108
+ "description": "This property specifies the tab order of the element.",
3109
+ "attribute": "tabIndex",
3058
3110
  "reflects": true
3059
3111
  }
3060
3112
  ],
3061
3113
  "attributes": [
3062
3114
  {
3063
- "name": "tabindex",
3115
+ "name": "tabIndex",
3064
3116
  "type": {
3065
3117
  "text": "number"
3066
3118
  },
3067
3119
  "default": "0",
3120
+ "description": "This property specifies the tab order of the element.",
3068
3121
  "fieldName": "tabIndex"
3069
3122
  }
3070
3123
  ],