@momentum-design/components 0.18.7 → 0.19.0
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.
- package/dist/custom-elements.json +560 -560
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +1 -1
- package/package.json +1 -1
|
@@ -244,844 +244,844 @@
|
|
|
244
244
|
},
|
|
245
245
|
{
|
|
246
246
|
"kind": "javascript-module",
|
|
247
|
-
"path": "components/
|
|
247
|
+
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
248
248
|
"declarations": [
|
|
249
249
|
{
|
|
250
250
|
"kind": "class",
|
|
251
|
-
"description": "The `mdc-
|
|
252
|
-
"name": "
|
|
253
|
-
"
|
|
254
|
-
{
|
|
255
|
-
"description": "The foreground color of the primary badge.",
|
|
256
|
-
"name": "--mdc-badge-primary-foreground-color"
|
|
257
|
-
},
|
|
258
|
-
{
|
|
259
|
-
"description": "The background color of the primary badge.",
|
|
260
|
-
"name": "--mdc-badge-primary-background-color"
|
|
261
|
-
},
|
|
251
|
+
"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.",
|
|
252
|
+
"name": "AvatarButton",
|
|
253
|
+
"members": [
|
|
262
254
|
{
|
|
263
|
-
"
|
|
264
|
-
"name": "
|
|
255
|
+
"kind": "field",
|
|
256
|
+
"name": "ariaLabel",
|
|
257
|
+
"type": {
|
|
258
|
+
"text": "string | null"
|
|
259
|
+
},
|
|
260
|
+
"default": "null",
|
|
261
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
262
|
+
"attribute": "aria-label"
|
|
265
263
|
},
|
|
266
264
|
{
|
|
267
|
-
"
|
|
268
|
-
"name": "
|
|
265
|
+
"kind": "method",
|
|
266
|
+
"name": "setSize",
|
|
267
|
+
"privacy": "private",
|
|
268
|
+
"parameters": [
|
|
269
|
+
{
|
|
270
|
+
"name": "size",
|
|
271
|
+
"type": {
|
|
272
|
+
"text": "AvatarSize"
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
]
|
|
269
276
|
},
|
|
270
277
|
{
|
|
271
|
-
"
|
|
272
|
-
"name": "
|
|
278
|
+
"kind": "field",
|
|
279
|
+
"name": "active",
|
|
280
|
+
"type": {
|
|
281
|
+
"text": "boolean"
|
|
282
|
+
},
|
|
283
|
+
"default": "undefined as unknown",
|
|
284
|
+
"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.",
|
|
285
|
+
"attribute": "active",
|
|
286
|
+
"inheritedFrom": {
|
|
287
|
+
"name": "Buttonsimple",
|
|
288
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
289
|
+
}
|
|
273
290
|
},
|
|
274
291
|
{
|
|
275
|
-
"
|
|
276
|
-
"name": "
|
|
292
|
+
"kind": "field",
|
|
293
|
+
"name": "disabled",
|
|
294
|
+
"type": {
|
|
295
|
+
"text": "boolean"
|
|
296
|
+
},
|
|
297
|
+
"default": "undefined as unknown",
|
|
298
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
299
|
+
"attribute": "disabled",
|
|
300
|
+
"reflects": true,
|
|
301
|
+
"inheritedFrom": {
|
|
302
|
+
"name": "DisabledMixin",
|
|
303
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
304
|
+
}
|
|
277
305
|
},
|
|
278
306
|
{
|
|
279
|
-
"
|
|
280
|
-
"name": "
|
|
307
|
+
"kind": "field",
|
|
308
|
+
"name": "softDisabled",
|
|
309
|
+
"type": {
|
|
310
|
+
"text": "boolean"
|
|
311
|
+
},
|
|
312
|
+
"default": "undefined as unknown",
|
|
313
|
+
"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.",
|
|
314
|
+
"attribute": "soft-disabled",
|
|
315
|
+
"inheritedFrom": {
|
|
316
|
+
"name": "Buttonsimple",
|
|
317
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
318
|
+
}
|
|
281
319
|
},
|
|
282
320
|
{
|
|
283
|
-
"
|
|
284
|
-
"name": "
|
|
321
|
+
"kind": "field",
|
|
322
|
+
"name": "role",
|
|
323
|
+
"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.",
|
|
324
|
+
"default": "'button'",
|
|
325
|
+
"attribute": "role",
|
|
326
|
+
"reflects": true,
|
|
327
|
+
"type": {
|
|
328
|
+
"text": "string"
|
|
329
|
+
},
|
|
330
|
+
"inheritedFrom": {
|
|
331
|
+
"name": "Buttonsimple",
|
|
332
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
333
|
+
}
|
|
285
334
|
},
|
|
286
335
|
{
|
|
287
|
-
"
|
|
288
|
-
"name": "
|
|
336
|
+
"kind": "field",
|
|
337
|
+
"name": "type",
|
|
338
|
+
"type": {
|
|
339
|
+
"text": "ButtonType"
|
|
340
|
+
},
|
|
341
|
+
"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.",
|
|
342
|
+
"default": "button",
|
|
343
|
+
"attribute": "type",
|
|
344
|
+
"reflects": true,
|
|
345
|
+
"inheritedFrom": {
|
|
346
|
+
"name": "Buttonsimple",
|
|
347
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
348
|
+
}
|
|
289
349
|
},
|
|
290
350
|
{
|
|
291
|
-
"
|
|
292
|
-
"name": "
|
|
351
|
+
"kind": "field",
|
|
352
|
+
"name": "src",
|
|
353
|
+
"type": {
|
|
354
|
+
"text": "string | undefined"
|
|
355
|
+
},
|
|
356
|
+
"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.",
|
|
357
|
+
"attribute": "src",
|
|
358
|
+
"inheritedFrom": {
|
|
359
|
+
"name": "AvatarComponentMixin",
|
|
360
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
361
|
+
}
|
|
293
362
|
},
|
|
294
|
-
{
|
|
295
|
-
"description": "The background color of the badge overlay.",
|
|
296
|
-
"name": "--mdc-badge-overlay-background-color"
|
|
297
|
-
}
|
|
298
|
-
],
|
|
299
|
-
"members": [
|
|
300
363
|
{
|
|
301
364
|
"kind": "field",
|
|
302
|
-
"name": "
|
|
365
|
+
"name": "initials",
|
|
303
366
|
"type": {
|
|
304
|
-
"text": "
|
|
367
|
+
"text": "string | undefined"
|
|
305
368
|
},
|
|
306
|
-
"description": "
|
|
307
|
-
"attribute": "
|
|
308
|
-
"
|
|
369
|
+
"description": "The initials to be displayed for the avatar.",
|
|
370
|
+
"attribute": "initials",
|
|
371
|
+
"inheritedFrom": {
|
|
372
|
+
"name": "AvatarComponentMixin",
|
|
373
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
374
|
+
}
|
|
309
375
|
},
|
|
310
376
|
{
|
|
311
377
|
"kind": "field",
|
|
312
|
-
"name": "
|
|
378
|
+
"name": "presence",
|
|
313
379
|
"type": {
|
|
314
|
-
"text": "
|
|
380
|
+
"text": "PresenceType | undefined"
|
|
315
381
|
},
|
|
316
|
-
"description": "
|
|
317
|
-
"attribute": "
|
|
382
|
+
"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`",
|
|
383
|
+
"attribute": "presence",
|
|
384
|
+
"inheritedFrom": {
|
|
385
|
+
"name": "AvatarComponentMixin",
|
|
386
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
387
|
+
}
|
|
318
388
|
},
|
|
319
389
|
{
|
|
320
390
|
"kind": "field",
|
|
321
|
-
"name": "
|
|
391
|
+
"name": "size",
|
|
322
392
|
"type": {
|
|
323
|
-
"text": "
|
|
393
|
+
"text": "ButtonSize"
|
|
324
394
|
},
|
|
325
|
-
"description": "
|
|
326
|
-
"default": "
|
|
327
|
-
"attribute": "
|
|
328
|
-
"reflects": true
|
|
395
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
396
|
+
"default": "32",
|
|
397
|
+
"attribute": "size",
|
|
398
|
+
"reflects": true,
|
|
399
|
+
"inheritedFrom": {
|
|
400
|
+
"name": "Buttonsimple",
|
|
401
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
402
|
+
}
|
|
329
403
|
},
|
|
330
404
|
{
|
|
331
405
|
"kind": "field",
|
|
332
|
-
"name": "
|
|
406
|
+
"name": "iconName",
|
|
333
407
|
"type": {
|
|
334
|
-
"text": "
|
|
408
|
+
"text": "IconNames | undefined"
|
|
335
409
|
},
|
|
336
|
-
"description": "
|
|
337
|
-
"attribute": "
|
|
410
|
+
"description": "Name of the icon to be displayed inside the Avatar.\nMust be a valid icon name.",
|
|
411
|
+
"attribute": "icon-name",
|
|
412
|
+
"inheritedFrom": {
|
|
413
|
+
"name": "AvatarComponentMixin",
|
|
414
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
415
|
+
}
|
|
338
416
|
},
|
|
339
417
|
{
|
|
340
418
|
"kind": "field",
|
|
341
|
-
"name": "
|
|
419
|
+
"name": "counter",
|
|
342
420
|
"type": {
|
|
343
|
-
"text": "number"
|
|
421
|
+
"text": "number | undefined"
|
|
344
422
|
},
|
|
345
|
-
"description": "The
|
|
346
|
-
"
|
|
347
|
-
"
|
|
348
|
-
|
|
423
|
+
"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`.",
|
|
424
|
+
"attribute": "counter",
|
|
425
|
+
"inheritedFrom": {
|
|
426
|
+
"name": "AvatarComponentMixin",
|
|
427
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
428
|
+
}
|
|
349
429
|
},
|
|
350
430
|
{
|
|
351
431
|
"kind": "field",
|
|
352
|
-
"name": "
|
|
432
|
+
"name": "isTyping",
|
|
353
433
|
"type": {
|
|
354
434
|
"text": "boolean"
|
|
355
435
|
},
|
|
356
436
|
"default": "false",
|
|
357
|
-
"description": "
|
|
358
|
-
"attribute": "
|
|
437
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
438
|
+
"attribute": "is-typing",
|
|
439
|
+
"inheritedFrom": {
|
|
440
|
+
"name": "AvatarComponentMixin",
|
|
441
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
442
|
+
}
|
|
359
443
|
},
|
|
360
444
|
{
|
|
361
445
|
"kind": "field",
|
|
362
|
-
"name": "
|
|
446
|
+
"name": "tabIndex",
|
|
363
447
|
"type": {
|
|
364
|
-
"text": "
|
|
448
|
+
"text": "number"
|
|
365
449
|
},
|
|
366
|
-
"default": "
|
|
367
|
-
"description": "
|
|
368
|
-
"attribute": "
|
|
450
|
+
"default": "0",
|
|
451
|
+
"description": "This property specifies the tab order of the element.",
|
|
452
|
+
"attribute": "tabIndex",
|
|
453
|
+
"reflects": true,
|
|
454
|
+
"inheritedFrom": {
|
|
455
|
+
"name": "TabIndexMixin",
|
|
456
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
457
|
+
}
|
|
369
458
|
},
|
|
370
459
|
{
|
|
371
460
|
"kind": "method",
|
|
372
|
-
"name": "
|
|
461
|
+
"name": "executeAction",
|
|
462
|
+
"privacy": "private",
|
|
463
|
+
"inheritedFrom": {
|
|
464
|
+
"name": "Buttonsimple",
|
|
465
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
466
|
+
}
|
|
467
|
+
},
|
|
468
|
+
{
|
|
469
|
+
"kind": "method",
|
|
470
|
+
"name": "setAriaPressed",
|
|
373
471
|
"privacy": "private",
|
|
374
|
-
"return": {
|
|
375
|
-
"type": {
|
|
376
|
-
"text": ""
|
|
377
|
-
}
|
|
378
|
-
},
|
|
379
472
|
"parameters": [
|
|
380
473
|
{
|
|
381
|
-
"name": "
|
|
474
|
+
"name": "element",
|
|
382
475
|
"type": {
|
|
383
|
-
"text": "
|
|
476
|
+
"text": "HTMLElement"
|
|
384
477
|
},
|
|
385
|
-
"description": "
|
|
478
|
+
"description": "The target element."
|
|
386
479
|
},
|
|
387
480
|
{
|
|
388
|
-
"name": "
|
|
389
|
-
"optional": true,
|
|
481
|
+
"name": "active",
|
|
390
482
|
"type": {
|
|
391
|
-
"text": "
|
|
483
|
+
"text": "boolean"
|
|
392
484
|
},
|
|
393
|
-
"description": "
|
|
485
|
+
"description": "The active state."
|
|
394
486
|
}
|
|
395
487
|
],
|
|
396
|
-
"description": "
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
488
|
+
"description": "Sets the aria-pressed attribute based on the active state.",
|
|
489
|
+
"inheritedFrom": {
|
|
490
|
+
"name": "Buttonsimple",
|
|
491
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
492
|
+
}
|
|
493
|
+
},
|
|
494
|
+
{
|
|
495
|
+
"kind": "method",
|
|
496
|
+
"name": "setSoftDisabled",
|
|
401
497
|
"privacy": "private",
|
|
402
|
-
"return": {
|
|
403
|
-
"type": {
|
|
404
|
-
"text": ""
|
|
405
|
-
}
|
|
406
|
-
},
|
|
407
498
|
"parameters": [
|
|
408
499
|
{
|
|
409
|
-
"name": "
|
|
500
|
+
"name": "element",
|
|
410
501
|
"type": {
|
|
411
|
-
"text": "
|
|
502
|
+
"text": "HTMLElement"
|
|
412
503
|
},
|
|
413
|
-
"description": "
|
|
504
|
+
"description": "The button element."
|
|
414
505
|
},
|
|
415
506
|
{
|
|
416
|
-
"name": "
|
|
507
|
+
"name": "softDisabled",
|
|
417
508
|
"type": {
|
|
418
|
-
"text": "
|
|
509
|
+
"text": "boolean"
|
|
419
510
|
},
|
|
420
|
-
"description": "
|
|
511
|
+
"description": "The soft-disabled state."
|
|
421
512
|
}
|
|
422
513
|
],
|
|
423
|
-
"description": "
|
|
514
|
+
"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.",
|
|
515
|
+
"inheritedFrom": {
|
|
516
|
+
"name": "Buttonsimple",
|
|
517
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
518
|
+
}
|
|
424
519
|
},
|
|
425
520
|
{
|
|
426
521
|
"kind": "method",
|
|
427
|
-
"name": "
|
|
522
|
+
"name": "setDisabled",
|
|
428
523
|
"privacy": "private",
|
|
429
|
-
"
|
|
430
|
-
|
|
431
|
-
"
|
|
524
|
+
"parameters": [
|
|
525
|
+
{
|
|
526
|
+
"name": "element",
|
|
527
|
+
"type": {
|
|
528
|
+
"text": "HTMLElement"
|
|
529
|
+
},
|
|
530
|
+
"description": "The button element."
|
|
531
|
+
},
|
|
532
|
+
{
|
|
533
|
+
"name": "disabled",
|
|
534
|
+
"type": {
|
|
535
|
+
"text": "boolean"
|
|
536
|
+
},
|
|
537
|
+
"description": "The disabled state."
|
|
432
538
|
}
|
|
433
|
-
|
|
434
|
-
"description": "
|
|
539
|
+
],
|
|
540
|
+
"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.",
|
|
541
|
+
"inheritedFrom": {
|
|
542
|
+
"name": "Buttonsimple",
|
|
543
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
544
|
+
}
|
|
435
545
|
},
|
|
436
546
|
{
|
|
437
547
|
"kind": "method",
|
|
438
|
-
"name": "
|
|
548
|
+
"name": "triggerClickEvent",
|
|
439
549
|
"privacy": "private",
|
|
440
|
-
"
|
|
441
|
-
"
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
},
|
|
445
|
-
"description": "Method to generate the badge text and counter template."
|
|
550
|
+
"inheritedFrom": {
|
|
551
|
+
"name": "Buttonsimple",
|
|
552
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
553
|
+
}
|
|
446
554
|
},
|
|
447
555
|
{
|
|
448
556
|
"kind": "method",
|
|
449
|
-
"name": "
|
|
557
|
+
"name": "handleKeyDown",
|
|
450
558
|
"privacy": "private",
|
|
451
|
-
"
|
|
452
|
-
|
|
453
|
-
"
|
|
559
|
+
"parameters": [
|
|
560
|
+
{
|
|
561
|
+
"name": "event",
|
|
562
|
+
"type": {
|
|
563
|
+
"text": "KeyboardEvent"
|
|
564
|
+
},
|
|
565
|
+
"description": "The keyboard event."
|
|
454
566
|
}
|
|
455
|
-
|
|
456
|
-
"description": "
|
|
567
|
+
],
|
|
568
|
+
"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.",
|
|
569
|
+
"inheritedFrom": {
|
|
570
|
+
"name": "Buttonsimple",
|
|
571
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
572
|
+
}
|
|
457
573
|
},
|
|
458
574
|
{
|
|
459
575
|
"kind": "method",
|
|
460
|
-
"name": "
|
|
576
|
+
"name": "handleKeyUp",
|
|
461
577
|
"privacy": "private",
|
|
462
|
-
"
|
|
463
|
-
|
|
464
|
-
"
|
|
578
|
+
"parameters": [
|
|
579
|
+
{
|
|
580
|
+
"name": "event",
|
|
581
|
+
"type": {
|
|
582
|
+
"text": "KeyboardEvent"
|
|
583
|
+
},
|
|
584
|
+
"description": "The keyboard event."
|
|
465
585
|
}
|
|
466
|
-
|
|
467
|
-
"description": "
|
|
586
|
+
],
|
|
587
|
+
"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.",
|
|
588
|
+
"inheritedFrom": {
|
|
589
|
+
"name": "Buttonsimple",
|
|
590
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
591
|
+
}
|
|
468
592
|
}
|
|
469
593
|
],
|
|
470
594
|
"attributes": [
|
|
471
595
|
{
|
|
472
|
-
"name": "
|
|
596
|
+
"name": "aria-label",
|
|
473
597
|
"type": {
|
|
474
|
-
"text": "
|
|
598
|
+
"text": "string | null"
|
|
475
599
|
},
|
|
476
|
-
"
|
|
477
|
-
"
|
|
600
|
+
"default": "null",
|
|
601
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
602
|
+
"fieldName": "ariaLabel"
|
|
478
603
|
},
|
|
479
604
|
{
|
|
480
|
-
"name": "
|
|
605
|
+
"name": "src",
|
|
481
606
|
"type": {
|
|
482
|
-
"text": "
|
|
607
|
+
"text": "string | undefined"
|
|
483
608
|
},
|
|
484
|
-
"description": "
|
|
485
|
-
"fieldName": "
|
|
609
|
+
"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.",
|
|
610
|
+
"fieldName": "src",
|
|
611
|
+
"inheritedFrom": {
|
|
612
|
+
"name": "AvatarComponentMixin",
|
|
613
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
614
|
+
}
|
|
486
615
|
},
|
|
487
616
|
{
|
|
488
|
-
"name": "
|
|
617
|
+
"name": "initials",
|
|
489
618
|
"type": {
|
|
490
|
-
"text": "
|
|
619
|
+
"text": "string | undefined"
|
|
491
620
|
},
|
|
492
|
-
"description": "
|
|
493
|
-
"
|
|
494
|
-
"
|
|
621
|
+
"description": "The initials to be displayed for the avatar.",
|
|
622
|
+
"fieldName": "initials",
|
|
623
|
+
"inheritedFrom": {
|
|
624
|
+
"name": "AvatarComponentMixin",
|
|
625
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
626
|
+
}
|
|
495
627
|
},
|
|
496
628
|
{
|
|
497
|
-
"name": "
|
|
629
|
+
"name": "presence",
|
|
498
630
|
"type": {
|
|
499
|
-
"text": "
|
|
631
|
+
"text": "PresenceType | undefined"
|
|
500
632
|
},
|
|
501
|
-
"description": "
|
|
502
|
-
"fieldName": "
|
|
633
|
+
"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`",
|
|
634
|
+
"fieldName": "presence",
|
|
635
|
+
"inheritedFrom": {
|
|
636
|
+
"name": "AvatarComponentMixin",
|
|
637
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
638
|
+
}
|
|
503
639
|
},
|
|
504
640
|
{
|
|
505
|
-
"name": "
|
|
641
|
+
"name": "size",
|
|
506
642
|
"type": {
|
|
507
|
-
"text": "
|
|
643
|
+
"text": "ButtonSize"
|
|
508
644
|
},
|
|
509
|
-
"description": "
|
|
510
|
-
"default": "
|
|
511
|
-
"fieldName": "
|
|
645
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
646
|
+
"default": "32",
|
|
647
|
+
"fieldName": "size",
|
|
648
|
+
"inheritedFrom": {
|
|
649
|
+
"name": "Buttonsimple",
|
|
650
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
651
|
+
}
|
|
512
652
|
},
|
|
513
653
|
{
|
|
514
|
-
"name": "
|
|
654
|
+
"name": "icon-name",
|
|
515
655
|
"type": {
|
|
516
|
-
"text": "
|
|
656
|
+
"text": "IconNames | undefined"
|
|
517
657
|
},
|
|
518
|
-
"
|
|
519
|
-
"
|
|
520
|
-
"
|
|
658
|
+
"description": "Name of the icon to be displayed inside the Avatar.\nMust be a valid icon name.",
|
|
659
|
+
"fieldName": "iconName",
|
|
660
|
+
"inheritedFrom": {
|
|
661
|
+
"name": "AvatarComponentMixin",
|
|
662
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
663
|
+
}
|
|
521
664
|
},
|
|
522
665
|
{
|
|
523
|
-
"name": "
|
|
524
|
-
"type": {
|
|
525
|
-
"text": "string | null"
|
|
526
|
-
},
|
|
527
|
-
"default": "null",
|
|
528
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
529
|
-
"fieldName": "ariaLabel"
|
|
530
|
-
}
|
|
531
|
-
],
|
|
532
|
-
"superclass": {
|
|
533
|
-
"name": "Component",
|
|
534
|
-
"module": "/src/models"
|
|
535
|
-
},
|
|
536
|
-
"tagName": "mdc-badge",
|
|
537
|
-
"jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n */",
|
|
538
|
-
"customElement": true
|
|
539
|
-
}
|
|
540
|
-
],
|
|
541
|
-
"exports": [
|
|
542
|
-
{
|
|
543
|
-
"kind": "js",
|
|
544
|
-
"name": "default",
|
|
545
|
-
"declaration": {
|
|
546
|
-
"name": "Badge",
|
|
547
|
-
"module": "components/badge/badge.component.js"
|
|
548
|
-
}
|
|
549
|
-
}
|
|
550
|
-
]
|
|
551
|
-
},
|
|
552
|
-
{
|
|
553
|
-
"kind": "javascript-module",
|
|
554
|
-
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
555
|
-
"declarations": [
|
|
556
|
-
{
|
|
557
|
-
"kind": "class",
|
|
558
|
-
"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.",
|
|
559
|
-
"name": "AvatarButton",
|
|
560
|
-
"members": [
|
|
561
|
-
{
|
|
562
|
-
"kind": "field",
|
|
563
|
-
"name": "ariaLabel",
|
|
666
|
+
"name": "counter",
|
|
564
667
|
"type": {
|
|
565
|
-
"text": "
|
|
668
|
+
"text": "number | undefined"
|
|
566
669
|
},
|
|
567
|
-
"
|
|
568
|
-
"
|
|
569
|
-
"
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
"name": "setSize",
|
|
574
|
-
"privacy": "private",
|
|
575
|
-
"parameters": [
|
|
576
|
-
{
|
|
577
|
-
"name": "size",
|
|
578
|
-
"type": {
|
|
579
|
-
"text": "AvatarSize"
|
|
580
|
-
}
|
|
581
|
-
}
|
|
582
|
-
]
|
|
670
|
+
"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`.",
|
|
671
|
+
"fieldName": "counter",
|
|
672
|
+
"inheritedFrom": {
|
|
673
|
+
"name": "AvatarComponentMixin",
|
|
674
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
675
|
+
}
|
|
583
676
|
},
|
|
584
677
|
{
|
|
585
|
-
"
|
|
586
|
-
"name": "active",
|
|
678
|
+
"name": "is-typing",
|
|
587
679
|
"type": {
|
|
588
680
|
"text": "boolean"
|
|
589
681
|
},
|
|
590
|
-
"default": "
|
|
591
|
-
"description": "
|
|
592
|
-
"
|
|
682
|
+
"default": "false",
|
|
683
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
684
|
+
"fieldName": "isTyping",
|
|
593
685
|
"inheritedFrom": {
|
|
594
|
-
"name": "
|
|
595
|
-
"module": "
|
|
686
|
+
"name": "AvatarComponentMixin",
|
|
687
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
688
|
+
}
|
|
689
|
+
},
|
|
690
|
+
{
|
|
691
|
+
"name": "tabIndex",
|
|
692
|
+
"type": {
|
|
693
|
+
"text": "number"
|
|
694
|
+
},
|
|
695
|
+
"default": "0",
|
|
696
|
+
"description": "This property specifies the tab order of the element.",
|
|
697
|
+
"fieldName": "tabIndex",
|
|
698
|
+
"inheritedFrom": {
|
|
699
|
+
"name": "TabIndexMixin",
|
|
700
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
596
701
|
}
|
|
597
702
|
},
|
|
598
703
|
{
|
|
599
|
-
"kind": "field",
|
|
600
704
|
"name": "disabled",
|
|
601
705
|
"type": {
|
|
602
706
|
"text": "boolean"
|
|
603
707
|
},
|
|
604
|
-
"default": "
|
|
708
|
+
"default": "false",
|
|
605
709
|
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
606
|
-
"
|
|
607
|
-
"reflects": true,
|
|
710
|
+
"fieldName": "disabled",
|
|
608
711
|
"inheritedFrom": {
|
|
609
712
|
"name": "DisabledMixin",
|
|
610
|
-
"module": "utils/mixins/DisabledMixin.
|
|
713
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
611
714
|
}
|
|
612
715
|
},
|
|
613
716
|
{
|
|
614
|
-
"
|
|
615
|
-
"name": "softDisabled",
|
|
717
|
+
"name": "active",
|
|
616
718
|
"type": {
|
|
617
719
|
"text": "boolean"
|
|
618
720
|
},
|
|
619
|
-
"default": "
|
|
721
|
+
"default": "false",
|
|
722
|
+
"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.",
|
|
723
|
+
"fieldName": "active",
|
|
724
|
+
"inheritedFrom": {
|
|
725
|
+
"name": "Buttonsimple",
|
|
726
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
727
|
+
}
|
|
728
|
+
},
|
|
729
|
+
{
|
|
730
|
+
"name": "soft-disabled",
|
|
731
|
+
"type": {
|
|
732
|
+
"text": "boolean"
|
|
733
|
+
},
|
|
734
|
+
"default": "false",
|
|
620
735
|
"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.",
|
|
621
|
-
"
|
|
736
|
+
"fieldName": "softDisabled",
|
|
622
737
|
"inheritedFrom": {
|
|
623
738
|
"name": "Buttonsimple",
|
|
624
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
739
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
625
740
|
}
|
|
626
741
|
},
|
|
627
742
|
{
|
|
628
|
-
"kind": "field",
|
|
629
743
|
"name": "role",
|
|
630
744
|
"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.",
|
|
631
|
-
"default": "
|
|
632
|
-
"
|
|
633
|
-
"reflects": true,
|
|
634
|
-
"type": {
|
|
635
|
-
"text": "string"
|
|
636
|
-
},
|
|
745
|
+
"default": "button",
|
|
746
|
+
"fieldName": "role",
|
|
637
747
|
"inheritedFrom": {
|
|
638
748
|
"name": "Buttonsimple",
|
|
639
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
749
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
640
750
|
}
|
|
641
751
|
},
|
|
642
752
|
{
|
|
643
|
-
"kind": "field",
|
|
644
753
|
"name": "type",
|
|
645
754
|
"type": {
|
|
646
755
|
"text": "ButtonType"
|
|
647
756
|
},
|
|
648
757
|
"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.",
|
|
649
758
|
"default": "button",
|
|
650
|
-
"
|
|
651
|
-
"reflects": true,
|
|
759
|
+
"fieldName": "type",
|
|
652
760
|
"inheritedFrom": {
|
|
653
761
|
"name": "Buttonsimple",
|
|
654
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
762
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
655
763
|
}
|
|
764
|
+
}
|
|
765
|
+
],
|
|
766
|
+
"mixins": [
|
|
767
|
+
{
|
|
768
|
+
"name": "AvatarComponentMixin",
|
|
769
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
770
|
+
}
|
|
771
|
+
],
|
|
772
|
+
"superclass": {
|
|
773
|
+
"name": "Buttonsimple",
|
|
774
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
775
|
+
},
|
|
776
|
+
"tagName": "mdc-avatarbutton",
|
|
777
|
+
"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 */",
|
|
778
|
+
"customElement": true
|
|
779
|
+
}
|
|
780
|
+
],
|
|
781
|
+
"exports": [
|
|
782
|
+
{
|
|
783
|
+
"kind": "js",
|
|
784
|
+
"name": "default",
|
|
785
|
+
"declaration": {
|
|
786
|
+
"name": "AvatarButton",
|
|
787
|
+
"module": "components/avatarbutton/avatarbutton.component.js"
|
|
788
|
+
}
|
|
789
|
+
}
|
|
790
|
+
]
|
|
791
|
+
},
|
|
792
|
+
{
|
|
793
|
+
"kind": "javascript-module",
|
|
794
|
+
"path": "components/badge/badge.component.js",
|
|
795
|
+
"declarations": [
|
|
796
|
+
{
|
|
797
|
+
"kind": "class",
|
|
798
|
+
"description": "The `mdc-badge` component is a versatile UI element used to\ndisplay dot, icons, counters, success, warning and error type badge.\n\nSupported badge types:\n- `dot`: Displays a dot notification badge with a blue color.\n- `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n- `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\nit shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n- `success`: Displays a success badge with a check circle icon and green color.\n- `warning`: Displays a warning badge with a warning icon and yellow color.\n- `error`: Displays a error badge with a error legacy icon and red color.\n\nFor `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n\nFor the `counter` type, the `mdc-text` component is used to render the counter value.",
|
|
799
|
+
"name": "Badge",
|
|
800
|
+
"cssProperties": [
|
|
801
|
+
{
|
|
802
|
+
"description": "The foreground color of the primary badge.",
|
|
803
|
+
"name": "--mdc-badge-primary-foreground-color"
|
|
656
804
|
},
|
|
657
805
|
{
|
|
658
|
-
"
|
|
659
|
-
"name": "
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
"
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
806
|
+
"description": "The background color of the primary badge.",
|
|
807
|
+
"name": "--mdc-badge-primary-background-color"
|
|
808
|
+
},
|
|
809
|
+
{
|
|
810
|
+
"description": "The foreground color of the secondary badge.",
|
|
811
|
+
"name": "--mdc-badge-secondary-foreground-color"
|
|
812
|
+
},
|
|
813
|
+
{
|
|
814
|
+
"description": "The background color of the secondary badge.",
|
|
815
|
+
"name": "--mdc-badge-secondary-background-color"
|
|
816
|
+
},
|
|
817
|
+
{
|
|
818
|
+
"description": "The foreground color of the success badge.",
|
|
819
|
+
"name": "--mdc-badge-success-foreground-color"
|
|
820
|
+
},
|
|
821
|
+
{
|
|
822
|
+
"description": "The background color of the success badge.",
|
|
823
|
+
"name": "--mdc-badge-success-background-color"
|
|
824
|
+
},
|
|
825
|
+
{
|
|
826
|
+
"description": "The foreground color of the warning badge.",
|
|
827
|
+
"name": "--mdc-badge-warning-foreground-color"
|
|
828
|
+
},
|
|
829
|
+
{
|
|
830
|
+
"description": "The background color of the warning badge.",
|
|
831
|
+
"name": "--mdc-badge-warning-background-color"
|
|
832
|
+
},
|
|
833
|
+
{
|
|
834
|
+
"description": "The foreground color of the error badge.",
|
|
835
|
+
"name": "--mdc-badge-error-foreground-color"
|
|
669
836
|
},
|
|
837
|
+
{
|
|
838
|
+
"description": "The background color of the error badge.",
|
|
839
|
+
"name": "--mdc-badge-error-background-color"
|
|
840
|
+
},
|
|
841
|
+
{
|
|
842
|
+
"description": "The background color of the badge overlay.",
|
|
843
|
+
"name": "--mdc-badge-overlay-background-color"
|
|
844
|
+
}
|
|
845
|
+
],
|
|
846
|
+
"members": [
|
|
670
847
|
{
|
|
671
848
|
"kind": "field",
|
|
672
|
-
"name": "
|
|
849
|
+
"name": "type",
|
|
673
850
|
"type": {
|
|
674
|
-
"text": "
|
|
851
|
+
"text": "BadgeType | undefined"
|
|
675
852
|
},
|
|
676
|
-
"description": "
|
|
677
|
-
"attribute": "
|
|
678
|
-
"
|
|
679
|
-
"name": "AvatarComponentMixin",
|
|
680
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
681
|
-
}
|
|
853
|
+
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
854
|
+
"attribute": "type",
|
|
855
|
+
"reflects": true
|
|
682
856
|
},
|
|
683
857
|
{
|
|
684
858
|
"kind": "field",
|
|
685
|
-
"name": "
|
|
859
|
+
"name": "iconName",
|
|
686
860
|
"type": {
|
|
687
|
-
"text": "
|
|
861
|
+
"text": "IconNames | undefined"
|
|
688
862
|
},
|
|
689
|
-
"description": "
|
|
690
|
-
"attribute": "
|
|
691
|
-
"inheritedFrom": {
|
|
692
|
-
"name": "AvatarComponentMixin",
|
|
693
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
694
|
-
}
|
|
863
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
864
|
+
"attribute": "icon-name"
|
|
695
865
|
},
|
|
696
866
|
{
|
|
697
867
|
"kind": "field",
|
|
698
|
-
"name": "
|
|
868
|
+
"name": "variant",
|
|
699
869
|
"type": {
|
|
700
|
-
"text": "
|
|
870
|
+
"text": "IconVariant"
|
|
701
871
|
},
|
|
702
|
-
"description": "
|
|
703
|
-
"default": "
|
|
704
|
-
"attribute": "
|
|
705
|
-
"reflects": true
|
|
706
|
-
"inheritedFrom": {
|
|
707
|
-
"name": "Buttonsimple",
|
|
708
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
709
|
-
}
|
|
872
|
+
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
873
|
+
"default": "primary",
|
|
874
|
+
"attribute": "variant",
|
|
875
|
+
"reflects": true
|
|
710
876
|
},
|
|
711
877
|
{
|
|
712
878
|
"kind": "field",
|
|
713
|
-
"name": "
|
|
879
|
+
"name": "counter",
|
|
714
880
|
"type": {
|
|
715
|
-
"text": "
|
|
881
|
+
"text": "number | undefined"
|
|
716
882
|
},
|
|
717
|
-
"description": "
|
|
718
|
-
"attribute": "
|
|
719
|
-
"inheritedFrom": {
|
|
720
|
-
"name": "AvatarComponentMixin",
|
|
721
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
722
|
-
}
|
|
883
|
+
"description": "Counter is the number which can be provided in the badge.",
|
|
884
|
+
"attribute": "counter"
|
|
723
885
|
},
|
|
724
886
|
{
|
|
725
887
|
"kind": "field",
|
|
726
|
-
"name": "
|
|
888
|
+
"name": "maxCounter",
|
|
727
889
|
"type": {
|
|
728
|
-
"text": "number
|
|
890
|
+
"text": "number"
|
|
729
891
|
},
|
|
730
|
-
"description": "The
|
|
731
|
-
"
|
|
732
|
-
"
|
|
733
|
-
|
|
734
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
735
|
-
}
|
|
892
|
+
"description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
|
|
893
|
+
"default": "99",
|
|
894
|
+
"attribute": "max-counter",
|
|
895
|
+
"reflects": true
|
|
736
896
|
},
|
|
737
897
|
{
|
|
738
898
|
"kind": "field",
|
|
739
|
-
"name": "
|
|
899
|
+
"name": "overlay",
|
|
740
900
|
"type": {
|
|
741
901
|
"text": "boolean"
|
|
742
902
|
},
|
|
743
903
|
"default": "false",
|
|
744
|
-
"description": "
|
|
745
|
-
"attribute": "
|
|
746
|
-
"inheritedFrom": {
|
|
747
|
-
"name": "AvatarComponentMixin",
|
|
748
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
749
|
-
}
|
|
904
|
+
"description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
|
|
905
|
+
"attribute": "overlay"
|
|
750
906
|
},
|
|
751
907
|
{
|
|
752
908
|
"kind": "field",
|
|
753
|
-
"name": "
|
|
909
|
+
"name": "ariaLabel",
|
|
754
910
|
"type": {
|
|
755
|
-
"text": "
|
|
911
|
+
"text": "string | null"
|
|
756
912
|
},
|
|
757
|
-
"default": "
|
|
758
|
-
"description": "
|
|
759
|
-
"attribute": "
|
|
760
|
-
"reflects": true,
|
|
761
|
-
"inheritedFrom": {
|
|
762
|
-
"name": "TabIndexMixin",
|
|
763
|
-
"module": "utils/mixins/TabIndexMixin.js"
|
|
764
|
-
}
|
|
765
|
-
},
|
|
766
|
-
{
|
|
767
|
-
"kind": "method",
|
|
768
|
-
"name": "executeAction",
|
|
769
|
-
"privacy": "private",
|
|
770
|
-
"inheritedFrom": {
|
|
771
|
-
"name": "Buttonsimple",
|
|
772
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
773
|
-
}
|
|
774
|
-
},
|
|
775
|
-
{
|
|
776
|
-
"kind": "method",
|
|
777
|
-
"name": "setAriaPressed",
|
|
778
|
-
"privacy": "private",
|
|
779
|
-
"parameters": [
|
|
780
|
-
{
|
|
781
|
-
"name": "element",
|
|
782
|
-
"type": {
|
|
783
|
-
"text": "HTMLElement"
|
|
784
|
-
},
|
|
785
|
-
"description": "The target element."
|
|
786
|
-
},
|
|
787
|
-
{
|
|
788
|
-
"name": "active",
|
|
789
|
-
"type": {
|
|
790
|
-
"text": "boolean"
|
|
791
|
-
},
|
|
792
|
-
"description": "The active state."
|
|
793
|
-
}
|
|
794
|
-
],
|
|
795
|
-
"description": "Sets the aria-pressed attribute based on the active state.",
|
|
796
|
-
"inheritedFrom": {
|
|
797
|
-
"name": "Buttonsimple",
|
|
798
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
799
|
-
}
|
|
800
|
-
},
|
|
801
|
-
{
|
|
802
|
-
"kind": "method",
|
|
803
|
-
"name": "setSoftDisabled",
|
|
804
|
-
"privacy": "private",
|
|
805
|
-
"parameters": [
|
|
806
|
-
{
|
|
807
|
-
"name": "element",
|
|
808
|
-
"type": {
|
|
809
|
-
"text": "HTMLElement"
|
|
810
|
-
},
|
|
811
|
-
"description": "The button element."
|
|
812
|
-
},
|
|
813
|
-
{
|
|
814
|
-
"name": "softDisabled",
|
|
815
|
-
"type": {
|
|
816
|
-
"text": "boolean"
|
|
817
|
-
},
|
|
818
|
-
"description": "The soft-disabled state."
|
|
819
|
-
}
|
|
820
|
-
],
|
|
821
|
-
"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.",
|
|
822
|
-
"inheritedFrom": {
|
|
823
|
-
"name": "Buttonsimple",
|
|
824
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
825
|
-
}
|
|
913
|
+
"default": "null",
|
|
914
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
915
|
+
"attribute": "aria-label"
|
|
826
916
|
},
|
|
827
917
|
{
|
|
828
918
|
"kind": "method",
|
|
829
|
-
"name": "
|
|
919
|
+
"name": "getCounterText",
|
|
830
920
|
"privacy": "private",
|
|
831
|
-
"
|
|
832
|
-
{
|
|
833
|
-
"
|
|
834
|
-
"type": {
|
|
835
|
-
"text": "HTMLElement"
|
|
836
|
-
},
|
|
837
|
-
"description": "The button element."
|
|
838
|
-
},
|
|
839
|
-
{
|
|
840
|
-
"name": "disabled",
|
|
841
|
-
"type": {
|
|
842
|
-
"text": "boolean"
|
|
843
|
-
},
|
|
844
|
-
"description": "The disabled state."
|
|
921
|
+
"return": {
|
|
922
|
+
"type": {
|
|
923
|
+
"text": ""
|
|
845
924
|
}
|
|
846
|
-
|
|
847
|
-
"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.",
|
|
848
|
-
"inheritedFrom": {
|
|
849
|
-
"name": "Buttonsimple",
|
|
850
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
851
|
-
}
|
|
852
|
-
},
|
|
853
|
-
{
|
|
854
|
-
"kind": "method",
|
|
855
|
-
"name": "triggerClickEvent",
|
|
856
|
-
"privacy": "private",
|
|
857
|
-
"inheritedFrom": {
|
|
858
|
-
"name": "Buttonsimple",
|
|
859
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
860
|
-
}
|
|
861
|
-
},
|
|
862
|
-
{
|
|
863
|
-
"kind": "method",
|
|
864
|
-
"name": "handleKeyDown",
|
|
865
|
-
"privacy": "private",
|
|
925
|
+
},
|
|
866
926
|
"parameters": [
|
|
867
927
|
{
|
|
868
|
-
"name": "
|
|
928
|
+
"name": "maxCounter",
|
|
869
929
|
"type": {
|
|
870
|
-
"text": "
|
|
930
|
+
"text": "number"
|
|
871
931
|
},
|
|
872
|
-
"description": "
|
|
932
|
+
"description": "the maximum limit which can be displayed on the badge"
|
|
933
|
+
},
|
|
934
|
+
{
|
|
935
|
+
"name": "counter",
|
|
936
|
+
"optional": true,
|
|
937
|
+
"type": {
|
|
938
|
+
"text": "number"
|
|
939
|
+
},
|
|
940
|
+
"description": "the number to be displayed on the badge"
|
|
873
941
|
}
|
|
874
942
|
],
|
|
875
|
-
"description": "
|
|
876
|
-
"inheritedFrom": {
|
|
877
|
-
"name": "Buttonsimple",
|
|
878
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
879
|
-
}
|
|
943
|
+
"description": "If `type` is set to `counter` and if `counter` is greater than `maxCounter`,\nthen it will return a string the maxCounter value as string.\nOtherwise, it will return a string representation of `counter`.\nIf `counter` is not a number, it will return an empty string."
|
|
880
944
|
},
|
|
881
945
|
{
|
|
882
946
|
"kind": "method",
|
|
883
|
-
"name": "
|
|
947
|
+
"name": "getBadgeIcon",
|
|
884
948
|
"privacy": "private",
|
|
949
|
+
"return": {
|
|
950
|
+
"type": {
|
|
951
|
+
"text": ""
|
|
952
|
+
}
|
|
953
|
+
},
|
|
885
954
|
"parameters": [
|
|
886
955
|
{
|
|
887
|
-
"name": "
|
|
956
|
+
"name": "iconName",
|
|
888
957
|
"type": {
|
|
889
|
-
"text": "
|
|
958
|
+
"text": "string"
|
|
890
959
|
},
|
|
891
|
-
"description": "
|
|
960
|
+
"description": "the name of the icon from the icon set"
|
|
961
|
+
},
|
|
962
|
+
{
|
|
963
|
+
"name": "backgroundClassPostfix",
|
|
964
|
+
"type": {
|
|
965
|
+
"text": "string"
|
|
966
|
+
},
|
|
967
|
+
"description": "postfix for the class to style the badge icon."
|
|
892
968
|
}
|
|
893
969
|
],
|
|
894
|
-
"description": "
|
|
895
|
-
|
|
896
|
-
"name": "Buttonsimple",
|
|
897
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
898
|
-
}
|
|
899
|
-
}
|
|
900
|
-
],
|
|
901
|
-
"attributes": [
|
|
970
|
+
"description": "Method to generate the badge icon."
|
|
971
|
+
},
|
|
902
972
|
{
|
|
903
|
-
"
|
|
904
|
-
"
|
|
905
|
-
|
|
973
|
+
"kind": "method",
|
|
974
|
+
"name": "getBadgeDot",
|
|
975
|
+
"privacy": "private",
|
|
976
|
+
"return": {
|
|
977
|
+
"type": {
|
|
978
|
+
"text": ""
|
|
979
|
+
}
|
|
906
980
|
},
|
|
907
|
-
"
|
|
908
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
909
|
-
"fieldName": "ariaLabel"
|
|
981
|
+
"description": "Method to generate the badge dot template."
|
|
910
982
|
},
|
|
911
983
|
{
|
|
912
|
-
"
|
|
913
|
-
"
|
|
914
|
-
|
|
984
|
+
"kind": "method",
|
|
985
|
+
"name": "getBadgeCounterText",
|
|
986
|
+
"privacy": "private",
|
|
987
|
+
"return": {
|
|
988
|
+
"type": {
|
|
989
|
+
"text": ""
|
|
990
|
+
}
|
|
915
991
|
},
|
|
916
|
-
"description": "
|
|
917
|
-
"fieldName": "src",
|
|
918
|
-
"inheritedFrom": {
|
|
919
|
-
"name": "AvatarComponentMixin",
|
|
920
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
921
|
-
}
|
|
992
|
+
"description": "Method to generate the badge text and counter template."
|
|
922
993
|
},
|
|
923
994
|
{
|
|
924
|
-
"
|
|
925
|
-
"
|
|
926
|
-
|
|
995
|
+
"kind": "method",
|
|
996
|
+
"name": "setRoleByAriaLabel",
|
|
997
|
+
"privacy": "private",
|
|
998
|
+
"return": {
|
|
999
|
+
"type": {
|
|
1000
|
+
"text": "void"
|
|
1001
|
+
}
|
|
927
1002
|
},
|
|
928
|
-
"description": "
|
|
929
|
-
"fieldName": "initials",
|
|
930
|
-
"inheritedFrom": {
|
|
931
|
-
"name": "AvatarComponentMixin",
|
|
932
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
933
|
-
}
|
|
1003
|
+
"description": "Method to set the role based on the aria-label provided.\nIf the aria-label is provided, the role of the element will be 'img'.\nOtherwise, the role will be null."
|
|
934
1004
|
},
|
|
935
1005
|
{
|
|
936
|
-
"
|
|
937
|
-
"
|
|
938
|
-
|
|
1006
|
+
"kind": "method",
|
|
1007
|
+
"name": "getBadgeContentBasedOnType",
|
|
1008
|
+
"privacy": "private",
|
|
1009
|
+
"return": {
|
|
1010
|
+
"type": {
|
|
1011
|
+
"text": ""
|
|
1012
|
+
}
|
|
939
1013
|
},
|
|
940
|
-
"description": "
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
945
|
-
}
|
|
946
|
-
},
|
|
1014
|
+
"description": "Generates the badge content based on the badge type.\nUtilizes various helper methods to create the appropriate badge template based on the\ncurrent badge type. Supports 'dot', 'icon', 'counter', 'success', 'warning', and 'error'\ntypes, returning the corresponding template result for each type."
|
|
1015
|
+
}
|
|
1016
|
+
],
|
|
1017
|
+
"attributes": [
|
|
947
1018
|
{
|
|
948
|
-
"name": "
|
|
1019
|
+
"name": "type",
|
|
949
1020
|
"type": {
|
|
950
|
-
"text": "
|
|
1021
|
+
"text": "BadgeType | undefined"
|
|
951
1022
|
},
|
|
952
|
-
"description": "
|
|
953
|
-
"
|
|
954
|
-
"fieldName": "size",
|
|
955
|
-
"inheritedFrom": {
|
|
956
|
-
"name": "Buttonsimple",
|
|
957
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
958
|
-
}
|
|
1023
|
+
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
1024
|
+
"fieldName": "type"
|
|
959
1025
|
},
|
|
960
1026
|
{
|
|
961
1027
|
"name": "icon-name",
|
|
962
1028
|
"type": {
|
|
963
1029
|
"text": "IconNames | undefined"
|
|
964
1030
|
},
|
|
965
|
-
"description": "Name of the icon
|
|
966
|
-
"fieldName": "iconName"
|
|
967
|
-
"inheritedFrom": {
|
|
968
|
-
"name": "AvatarComponentMixin",
|
|
969
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
970
|
-
}
|
|
1031
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
1032
|
+
"fieldName": "iconName"
|
|
971
1033
|
},
|
|
972
1034
|
{
|
|
973
|
-
"name": "
|
|
1035
|
+
"name": "variant",
|
|
974
1036
|
"type": {
|
|
975
|
-
"text": "
|
|
1037
|
+
"text": "IconVariant"
|
|
976
1038
|
},
|
|
977
|
-
"description": "
|
|
978
|
-
"
|
|
979
|
-
"
|
|
980
|
-
"name": "AvatarComponentMixin",
|
|
981
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
982
|
-
}
|
|
1039
|
+
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
1040
|
+
"default": "primary",
|
|
1041
|
+
"fieldName": "variant"
|
|
983
1042
|
},
|
|
984
1043
|
{
|
|
985
|
-
"name": "
|
|
1044
|
+
"name": "counter",
|
|
986
1045
|
"type": {
|
|
987
|
-
"text": "
|
|
1046
|
+
"text": "number | undefined"
|
|
988
1047
|
},
|
|
989
|
-
"
|
|
990
|
-
"
|
|
991
|
-
"fieldName": "isTyping",
|
|
992
|
-
"inheritedFrom": {
|
|
993
|
-
"name": "AvatarComponentMixin",
|
|
994
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
995
|
-
}
|
|
1048
|
+
"description": "Counter is the number which can be provided in the badge.",
|
|
1049
|
+
"fieldName": "counter"
|
|
996
1050
|
},
|
|
997
1051
|
{
|
|
998
|
-
"name": "
|
|
1052
|
+
"name": "max-counter",
|
|
999
1053
|
"type": {
|
|
1000
1054
|
"text": "number"
|
|
1001
1055
|
},
|
|
1002
|
-
"
|
|
1003
|
-
"
|
|
1004
|
-
"fieldName": "
|
|
1005
|
-
"inheritedFrom": {
|
|
1006
|
-
"name": "TabIndexMixin",
|
|
1007
|
-
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
1008
|
-
}
|
|
1009
|
-
},
|
|
1010
|
-
{
|
|
1011
|
-
"name": "disabled",
|
|
1012
|
-
"type": {
|
|
1013
|
-
"text": "boolean"
|
|
1014
|
-
},
|
|
1015
|
-
"default": "false",
|
|
1016
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
1017
|
-
"fieldName": "disabled",
|
|
1018
|
-
"inheritedFrom": {
|
|
1019
|
-
"name": "DisabledMixin",
|
|
1020
|
-
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
1021
|
-
}
|
|
1022
|
-
},
|
|
1023
|
-
{
|
|
1024
|
-
"name": "active",
|
|
1025
|
-
"type": {
|
|
1026
|
-
"text": "boolean"
|
|
1027
|
-
},
|
|
1028
|
-
"default": "false",
|
|
1029
|
-
"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.",
|
|
1030
|
-
"fieldName": "active",
|
|
1031
|
-
"inheritedFrom": {
|
|
1032
|
-
"name": "Buttonsimple",
|
|
1033
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1034
|
-
}
|
|
1056
|
+
"description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
|
|
1057
|
+
"default": "99",
|
|
1058
|
+
"fieldName": "maxCounter"
|
|
1035
1059
|
},
|
|
1036
1060
|
{
|
|
1037
|
-
"name": "
|
|
1061
|
+
"name": "overlay",
|
|
1038
1062
|
"type": {
|
|
1039
1063
|
"text": "boolean"
|
|
1040
1064
|
},
|
|
1041
1065
|
"default": "false",
|
|
1042
|
-
"description": "
|
|
1043
|
-
"fieldName": "
|
|
1044
|
-
"inheritedFrom": {
|
|
1045
|
-
"name": "Buttonsimple",
|
|
1046
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1047
|
-
}
|
|
1048
|
-
},
|
|
1049
|
-
{
|
|
1050
|
-
"name": "role",
|
|
1051
|
-
"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.",
|
|
1052
|
-
"default": "button",
|
|
1053
|
-
"fieldName": "role",
|
|
1054
|
-
"inheritedFrom": {
|
|
1055
|
-
"name": "Buttonsimple",
|
|
1056
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1057
|
-
}
|
|
1066
|
+
"description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
|
|
1067
|
+
"fieldName": "overlay"
|
|
1058
1068
|
},
|
|
1059
1069
|
{
|
|
1060
|
-
"name": "
|
|
1070
|
+
"name": "aria-label",
|
|
1061
1071
|
"type": {
|
|
1062
|
-
"text": "
|
|
1072
|
+
"text": "string | null"
|
|
1063
1073
|
},
|
|
1064
|
-
"
|
|
1065
|
-
"
|
|
1066
|
-
"fieldName": "
|
|
1067
|
-
"inheritedFrom": {
|
|
1068
|
-
"name": "Buttonsimple",
|
|
1069
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1070
|
-
}
|
|
1071
|
-
}
|
|
1072
|
-
],
|
|
1073
|
-
"mixins": [
|
|
1074
|
-
{
|
|
1075
|
-
"name": "AvatarComponentMixin",
|
|
1076
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
1074
|
+
"default": "null",
|
|
1075
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
1076
|
+
"fieldName": "ariaLabel"
|
|
1077
1077
|
}
|
|
1078
1078
|
],
|
|
1079
1079
|
"superclass": {
|
|
1080
|
-
"name": "
|
|
1081
|
-
"module": "/src/
|
|
1080
|
+
"name": "Component",
|
|
1081
|
+
"module": "/src/models"
|
|
1082
1082
|
},
|
|
1083
|
-
"tagName": "mdc-
|
|
1084
|
-
"jsDoc": "/**\n * The `mdc-
|
|
1083
|
+
"tagName": "mdc-badge",
|
|
1084
|
+
"jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n */",
|
|
1085
1085
|
"customElement": true
|
|
1086
1086
|
}
|
|
1087
1087
|
],
|
|
@@ -1090,8 +1090,8 @@
|
|
|
1090
1090
|
"kind": "js",
|
|
1091
1091
|
"name": "default",
|
|
1092
1092
|
"declaration": {
|
|
1093
|
-
"name": "
|
|
1094
|
-
"module": "components/
|
|
1093
|
+
"name": "Badge",
|
|
1094
|
+
"module": "components/badge/badge.component.js"
|
|
1095
1095
|
}
|
|
1096
1096
|
}
|
|
1097
1097
|
]
|