@momentum-design/components 0.36.0 → 0.36.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -248,79 +248,163 @@
|
|
|
248
248
|
},
|
|
249
249
|
{
|
|
250
250
|
"kind": "javascript-module",
|
|
251
|
-
"path": "components/
|
|
251
|
+
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
252
252
|
"declarations": [
|
|
253
253
|
{
|
|
254
254
|
"kind": "class",
|
|
255
|
-
"description": "The `mdc-
|
|
256
|
-
"name": "
|
|
257
|
-
"
|
|
258
|
-
{
|
|
259
|
-
"description": "The foreground color of the primary badge.",
|
|
260
|
-
"name": "--mdc-badge-primary-foreground-color"
|
|
261
|
-
},
|
|
255
|
+
"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.",
|
|
256
|
+
"name": "AvatarButton",
|
|
257
|
+
"members": [
|
|
262
258
|
{
|
|
263
|
-
"
|
|
264
|
-
"name": "
|
|
259
|
+
"kind": "field",
|
|
260
|
+
"name": "ariaLabel",
|
|
261
|
+
"type": {
|
|
262
|
+
"text": "string | null"
|
|
263
|
+
},
|
|
264
|
+
"default": "null",
|
|
265
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
266
|
+
"attribute": "aria-label"
|
|
265
267
|
},
|
|
266
268
|
{
|
|
267
|
-
"
|
|
268
|
-
"name": "
|
|
269
|
+
"kind": "method",
|
|
270
|
+
"name": "setSize",
|
|
271
|
+
"privacy": "private",
|
|
272
|
+
"parameters": [
|
|
273
|
+
{
|
|
274
|
+
"name": "size",
|
|
275
|
+
"type": {
|
|
276
|
+
"text": "AvatarSize"
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
]
|
|
269
280
|
},
|
|
270
281
|
{
|
|
271
|
-
"
|
|
272
|
-
"name": "
|
|
282
|
+
"kind": "field",
|
|
283
|
+
"name": "active",
|
|
284
|
+
"type": {
|
|
285
|
+
"text": "boolean"
|
|
286
|
+
},
|
|
287
|
+
"default": "undefined as unknown",
|
|
288
|
+
"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.",
|
|
289
|
+
"attribute": "active",
|
|
290
|
+
"reflects": true,
|
|
291
|
+
"inheritedFrom": {
|
|
292
|
+
"name": "Buttonsimple",
|
|
293
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
294
|
+
}
|
|
273
295
|
},
|
|
274
296
|
{
|
|
275
|
-
"
|
|
276
|
-
"name": "
|
|
297
|
+
"kind": "field",
|
|
298
|
+
"name": "disabled",
|
|
299
|
+
"type": {
|
|
300
|
+
"text": "boolean"
|
|
301
|
+
},
|
|
302
|
+
"default": "undefined as unknown",
|
|
303
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
304
|
+
"attribute": "disabled",
|
|
305
|
+
"reflects": true,
|
|
306
|
+
"inheritedFrom": {
|
|
307
|
+
"name": "DisabledMixin",
|
|
308
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
309
|
+
}
|
|
277
310
|
},
|
|
278
311
|
{
|
|
279
|
-
"
|
|
280
|
-
"name": "
|
|
312
|
+
"kind": "field",
|
|
313
|
+
"name": "softDisabled",
|
|
314
|
+
"type": {
|
|
315
|
+
"text": "boolean"
|
|
316
|
+
},
|
|
317
|
+
"default": "undefined as unknown",
|
|
318
|
+
"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.",
|
|
319
|
+
"attribute": "soft-disabled",
|
|
320
|
+
"inheritedFrom": {
|
|
321
|
+
"name": "Buttonsimple",
|
|
322
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
323
|
+
}
|
|
281
324
|
},
|
|
282
325
|
{
|
|
283
|
-
"
|
|
284
|
-
"name": "
|
|
326
|
+
"kind": "field",
|
|
327
|
+
"name": "role",
|
|
328
|
+
"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.",
|
|
329
|
+
"default": "'button'",
|
|
330
|
+
"attribute": "role",
|
|
331
|
+
"reflects": true,
|
|
332
|
+
"type": {
|
|
333
|
+
"text": "string"
|
|
334
|
+
},
|
|
335
|
+
"inheritedFrom": {
|
|
336
|
+
"name": "Buttonsimple",
|
|
337
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
338
|
+
}
|
|
285
339
|
},
|
|
286
340
|
{
|
|
287
|
-
"
|
|
288
|
-
"name": "
|
|
341
|
+
"kind": "field",
|
|
342
|
+
"name": "type",
|
|
343
|
+
"type": {
|
|
344
|
+
"text": "ButtonType"
|
|
345
|
+
},
|
|
346
|
+
"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.",
|
|
347
|
+
"default": "button",
|
|
348
|
+
"attribute": "type",
|
|
349
|
+
"reflects": true,
|
|
350
|
+
"inheritedFrom": {
|
|
351
|
+
"name": "Buttonsimple",
|
|
352
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
353
|
+
}
|
|
289
354
|
},
|
|
290
355
|
{
|
|
291
|
-
"
|
|
292
|
-
"name": "
|
|
356
|
+
"kind": "field",
|
|
357
|
+
"name": "src",
|
|
358
|
+
"type": {
|
|
359
|
+
"text": "string | undefined"
|
|
360
|
+
},
|
|
361
|
+
"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.",
|
|
362
|
+
"attribute": "src",
|
|
363
|
+
"inheritedFrom": {
|
|
364
|
+
"name": "AvatarComponentMixin",
|
|
365
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
366
|
+
}
|
|
293
367
|
},
|
|
294
368
|
{
|
|
295
|
-
"
|
|
296
|
-
"name": "
|
|
369
|
+
"kind": "field",
|
|
370
|
+
"name": "initials",
|
|
371
|
+
"type": {
|
|
372
|
+
"text": "string | undefined"
|
|
373
|
+
},
|
|
374
|
+
"description": "The initials to be displayed for the avatar.",
|
|
375
|
+
"attribute": "initials",
|
|
376
|
+
"inheritedFrom": {
|
|
377
|
+
"name": "AvatarComponentMixin",
|
|
378
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
379
|
+
}
|
|
297
380
|
},
|
|
298
|
-
{
|
|
299
|
-
"description": "The background color of the badge overlay.",
|
|
300
|
-
"name": "--mdc-badge-overlay-background-color"
|
|
301
|
-
}
|
|
302
|
-
],
|
|
303
|
-
"members": [
|
|
304
381
|
{
|
|
305
382
|
"kind": "field",
|
|
306
|
-
"name": "
|
|
383
|
+
"name": "presence",
|
|
307
384
|
"type": {
|
|
308
|
-
"text": "
|
|
385
|
+
"text": "PresenceType | undefined"
|
|
309
386
|
},
|
|
310
|
-
"description": "
|
|
311
|
-
"attribute": "
|
|
312
|
-
"
|
|
387
|
+
"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`",
|
|
388
|
+
"attribute": "presence",
|
|
389
|
+
"inheritedFrom": {
|
|
390
|
+
"name": "AvatarComponentMixin",
|
|
391
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
392
|
+
}
|
|
313
393
|
},
|
|
314
394
|
{
|
|
315
395
|
"kind": "field",
|
|
316
|
-
"name": "
|
|
396
|
+
"name": "size",
|
|
317
397
|
"type": {
|
|
318
|
-
"text": "
|
|
398
|
+
"text": "ButtonSize"
|
|
319
399
|
},
|
|
320
|
-
"description": "
|
|
321
|
-
"default": "
|
|
322
|
-
"attribute": "
|
|
323
|
-
"reflects": true
|
|
400
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
401
|
+
"default": "32",
|
|
402
|
+
"attribute": "size",
|
|
403
|
+
"reflects": true,
|
|
404
|
+
"inheritedFrom": {
|
|
405
|
+
"name": "Buttonsimple",
|
|
406
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
407
|
+
}
|
|
324
408
|
},
|
|
325
409
|
{
|
|
326
410
|
"kind": "field",
|
|
@@ -328,205 +412,325 @@
|
|
|
328
412
|
"type": {
|
|
329
413
|
"text": "number | undefined"
|
|
330
414
|
},
|
|
331
|
-
"description": "
|
|
332
|
-
"attribute": "counter"
|
|
415
|
+
"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`.",
|
|
416
|
+
"attribute": "counter",
|
|
417
|
+
"inheritedFrom": {
|
|
418
|
+
"name": "AvatarComponentMixin",
|
|
419
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
420
|
+
}
|
|
333
421
|
},
|
|
334
422
|
{
|
|
335
423
|
"kind": "field",
|
|
336
|
-
"name": "
|
|
424
|
+
"name": "isTyping",
|
|
337
425
|
"type": {
|
|
338
|
-
"text": "
|
|
426
|
+
"text": "boolean"
|
|
339
427
|
},
|
|
340
|
-
"
|
|
341
|
-
"
|
|
342
|
-
"attribute": "
|
|
343
|
-
"
|
|
428
|
+
"default": "false",
|
|
429
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
430
|
+
"attribute": "is-typing",
|
|
431
|
+
"inheritedFrom": {
|
|
432
|
+
"name": "AvatarComponentMixin",
|
|
433
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
434
|
+
}
|
|
344
435
|
},
|
|
345
436
|
{
|
|
346
437
|
"kind": "field",
|
|
347
|
-
"name": "
|
|
438
|
+
"name": "iconName",
|
|
348
439
|
"type": {
|
|
349
|
-
"text": "
|
|
440
|
+
"text": "IconNames | undefined"
|
|
350
441
|
},
|
|
351
|
-
"
|
|
352
|
-
"
|
|
353
|
-
"
|
|
442
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
443
|
+
"attribute": "icon-name",
|
|
444
|
+
"inheritedFrom": {
|
|
445
|
+
"name": "IconNameMixin",
|
|
446
|
+
"module": "utils/mixins/IconNameMixin.js"
|
|
447
|
+
}
|
|
354
448
|
},
|
|
355
449
|
{
|
|
356
450
|
"kind": "field",
|
|
357
|
-
"name": "
|
|
451
|
+
"name": "tabIndex",
|
|
358
452
|
"type": {
|
|
359
|
-
"text": "
|
|
453
|
+
"text": "number"
|
|
360
454
|
},
|
|
361
|
-
"default": "
|
|
362
|
-
"description": "
|
|
363
|
-
"attribute": "
|
|
455
|
+
"default": "0",
|
|
456
|
+
"description": "This property specifies the tab order of the element.",
|
|
457
|
+
"attribute": "tabIndex",
|
|
458
|
+
"reflects": true,
|
|
459
|
+
"inheritedFrom": {
|
|
460
|
+
"name": "TabIndexMixin",
|
|
461
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
462
|
+
}
|
|
364
463
|
},
|
|
365
464
|
{
|
|
366
465
|
"kind": "method",
|
|
367
|
-
"name": "
|
|
368
|
-
"privacy": "
|
|
369
|
-
"
|
|
370
|
-
"
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
466
|
+
"name": "executeAction",
|
|
467
|
+
"privacy": "protected",
|
|
468
|
+
"inheritedFrom": {
|
|
469
|
+
"name": "Buttonsimple",
|
|
470
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
471
|
+
}
|
|
472
|
+
},
|
|
473
|
+
{
|
|
474
|
+
"kind": "method",
|
|
475
|
+
"name": "setActive",
|
|
476
|
+
"privacy": "protected",
|
|
374
477
|
"parameters": [
|
|
375
478
|
{
|
|
376
|
-
"name": "
|
|
479
|
+
"name": "element",
|
|
377
480
|
"type": {
|
|
378
|
-
"text": "
|
|
481
|
+
"text": "HTMLElement"
|
|
379
482
|
},
|
|
380
|
-
"description": "
|
|
483
|
+
"description": "The button element"
|
|
381
484
|
},
|
|
382
485
|
{
|
|
383
|
-
"name": "
|
|
384
|
-
"optional": true,
|
|
486
|
+
"name": "active",
|
|
385
487
|
"type": {
|
|
386
|
-
"text": "
|
|
488
|
+
"text": "boolean"
|
|
387
489
|
},
|
|
388
|
-
"description": "
|
|
490
|
+
"description": "The active state of the element"
|
|
389
491
|
}
|
|
390
492
|
],
|
|
391
|
-
"description": "
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
493
|
+
"description": "Sets the aria-pressed attribute based on the active state of the button.",
|
|
494
|
+
"inheritedFrom": {
|
|
495
|
+
"name": "Buttonsimple",
|
|
496
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
497
|
+
}
|
|
498
|
+
},
|
|
499
|
+
{
|
|
500
|
+
"kind": "method",
|
|
501
|
+
"name": "setSoftDisabled",
|
|
396
502
|
"privacy": "private",
|
|
397
|
-
"return": {
|
|
398
|
-
"type": {
|
|
399
|
-
"text": ""
|
|
400
|
-
}
|
|
401
|
-
},
|
|
402
503
|
"parameters": [
|
|
403
504
|
{
|
|
404
|
-
"name": "
|
|
505
|
+
"name": "element",
|
|
405
506
|
"type": {
|
|
406
|
-
"text": "
|
|
507
|
+
"text": "HTMLElement"
|
|
407
508
|
},
|
|
408
|
-
"description": "
|
|
509
|
+
"description": "The button element."
|
|
409
510
|
},
|
|
410
511
|
{
|
|
411
|
-
"name": "
|
|
512
|
+
"name": "softDisabled",
|
|
412
513
|
"type": {
|
|
413
|
-
"text": "
|
|
514
|
+
"text": "boolean"
|
|
414
515
|
},
|
|
415
|
-
"description": "
|
|
516
|
+
"description": "The soft-disabled state."
|
|
416
517
|
}
|
|
417
518
|
],
|
|
418
|
-
"description": "
|
|
519
|
+
"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.",
|
|
520
|
+
"inheritedFrom": {
|
|
521
|
+
"name": "Buttonsimple",
|
|
522
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
523
|
+
}
|
|
419
524
|
},
|
|
420
525
|
{
|
|
421
526
|
"kind": "method",
|
|
422
|
-
"name": "
|
|
527
|
+
"name": "setDisabled",
|
|
423
528
|
"privacy": "private",
|
|
424
|
-
"
|
|
425
|
-
|
|
426
|
-
"
|
|
529
|
+
"parameters": [
|
|
530
|
+
{
|
|
531
|
+
"name": "element",
|
|
532
|
+
"type": {
|
|
533
|
+
"text": "HTMLElement"
|
|
534
|
+
},
|
|
535
|
+
"description": "The button element."
|
|
536
|
+
},
|
|
537
|
+
{
|
|
538
|
+
"name": "disabled",
|
|
539
|
+
"type": {
|
|
540
|
+
"text": "boolean"
|
|
541
|
+
},
|
|
542
|
+
"description": "The disabled state."
|
|
427
543
|
}
|
|
428
|
-
|
|
429
|
-
"description": "
|
|
544
|
+
],
|
|
545
|
+
"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.",
|
|
546
|
+
"inheritedFrom": {
|
|
547
|
+
"name": "Buttonsimple",
|
|
548
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
549
|
+
}
|
|
430
550
|
},
|
|
431
551
|
{
|
|
432
552
|
"kind": "method",
|
|
433
|
-
"name": "
|
|
553
|
+
"name": "triggerClickEvent",
|
|
434
554
|
"privacy": "private",
|
|
435
|
-
"
|
|
436
|
-
"
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
},
|
|
440
|
-
"description": "Method to generate the badge text and counter template."
|
|
555
|
+
"inheritedFrom": {
|
|
556
|
+
"name": "Buttonsimple",
|
|
557
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
558
|
+
}
|
|
441
559
|
},
|
|
442
560
|
{
|
|
443
561
|
"kind": "method",
|
|
444
|
-
"name": "
|
|
562
|
+
"name": "handleBlur",
|
|
445
563
|
"privacy": "private",
|
|
446
|
-
"
|
|
447
|
-
|
|
448
|
-
|
|
564
|
+
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
|
565
|
+
"inheritedFrom": {
|
|
566
|
+
"name": "Buttonsimple",
|
|
567
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
568
|
+
}
|
|
569
|
+
},
|
|
570
|
+
{
|
|
571
|
+
"kind": "method",
|
|
572
|
+
"name": "handleKeyDown",
|
|
573
|
+
"privacy": "private",
|
|
574
|
+
"parameters": [
|
|
575
|
+
{
|
|
576
|
+
"name": "event",
|
|
577
|
+
"type": {
|
|
578
|
+
"text": "KeyboardEvent"
|
|
579
|
+
},
|
|
580
|
+
"description": "The keyboard event."
|
|
449
581
|
}
|
|
450
|
-
|
|
451
|
-
"description": "
|
|
582
|
+
],
|
|
583
|
+
"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.",
|
|
584
|
+
"inheritedFrom": {
|
|
585
|
+
"name": "Buttonsimple",
|
|
586
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
587
|
+
}
|
|
452
588
|
},
|
|
453
589
|
{
|
|
454
590
|
"kind": "method",
|
|
455
|
-
"name": "
|
|
591
|
+
"name": "handleKeyUp",
|
|
456
592
|
"privacy": "private",
|
|
457
|
-
"
|
|
458
|
-
|
|
459
|
-
"
|
|
593
|
+
"parameters": [
|
|
594
|
+
{
|
|
595
|
+
"name": "event",
|
|
596
|
+
"type": {
|
|
597
|
+
"text": "KeyboardEvent"
|
|
598
|
+
},
|
|
599
|
+
"description": "The keyboard event."
|
|
460
600
|
}
|
|
461
|
-
|
|
462
|
-
"description": "
|
|
601
|
+
],
|
|
602
|
+
"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.",
|
|
603
|
+
"inheritedFrom": {
|
|
604
|
+
"name": "Buttonsimple",
|
|
605
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
606
|
+
}
|
|
607
|
+
}
|
|
608
|
+
],
|
|
609
|
+
"events": [
|
|
610
|
+
{
|
|
611
|
+
"description": "(React: onClick) This event is dispatched when the avatarbutton is clicked.",
|
|
612
|
+
"name": "click",
|
|
613
|
+
"reactName": "onClick",
|
|
614
|
+
"eventName": "ClickEvent",
|
|
615
|
+
"inheritedFrom": {
|
|
616
|
+
"name": "Buttonsimple",
|
|
617
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
618
|
+
}
|
|
463
619
|
},
|
|
464
620
|
{
|
|
465
|
-
"
|
|
466
|
-
"name": "
|
|
467
|
-
"
|
|
468
|
-
|
|
469
|
-
},
|
|
470
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
471
|
-
"attribute": "icon-name",
|
|
621
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.",
|
|
622
|
+
"name": "keydown",
|
|
623
|
+
"reactName": "onKeyDown",
|
|
624
|
+
"eventName": "KeydownEvent",
|
|
472
625
|
"inheritedFrom": {
|
|
473
|
-
"name": "
|
|
474
|
-
"module": "
|
|
626
|
+
"name": "Buttonsimple",
|
|
627
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
628
|
+
}
|
|
629
|
+
},
|
|
630
|
+
{
|
|
631
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.",
|
|
632
|
+
"name": "keyup",
|
|
633
|
+
"reactName": "onKeyUp",
|
|
634
|
+
"eventName": "KeyupEvent",
|
|
635
|
+
"inheritedFrom": {
|
|
636
|
+
"name": "Buttonsimple",
|
|
637
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
638
|
+
}
|
|
639
|
+
},
|
|
640
|
+
{
|
|
641
|
+
"description": "(React: onFocus) This event is dispatched when the avatarbutton receives focus.",
|
|
642
|
+
"name": "focus",
|
|
643
|
+
"reactName": "onFocus",
|
|
644
|
+
"eventName": "FocusEvent",
|
|
645
|
+
"inheritedFrom": {
|
|
646
|
+
"name": "Buttonsimple",
|
|
647
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
475
648
|
}
|
|
476
649
|
}
|
|
477
650
|
],
|
|
478
651
|
"attributes": [
|
|
479
652
|
{
|
|
480
|
-
"name": "
|
|
653
|
+
"name": "aria-label",
|
|
481
654
|
"type": {
|
|
482
|
-
"text": "
|
|
655
|
+
"text": "string | null"
|
|
483
656
|
},
|
|
484
|
-
"
|
|
485
|
-
"
|
|
657
|
+
"default": "null",
|
|
658
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
659
|
+
"fieldName": "ariaLabel"
|
|
486
660
|
},
|
|
487
661
|
{
|
|
488
|
-
"name": "
|
|
662
|
+
"name": "src",
|
|
489
663
|
"type": {
|
|
490
|
-
"text": "
|
|
664
|
+
"text": "string | undefined"
|
|
491
665
|
},
|
|
492
|
-
"description": "
|
|
493
|
-
"
|
|
494
|
-
"
|
|
666
|
+
"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.",
|
|
667
|
+
"fieldName": "src",
|
|
668
|
+
"inheritedFrom": {
|
|
669
|
+
"name": "AvatarComponentMixin",
|
|
670
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
671
|
+
}
|
|
495
672
|
},
|
|
496
673
|
{
|
|
497
|
-
"name": "
|
|
674
|
+
"name": "initials",
|
|
498
675
|
"type": {
|
|
499
|
-
"text": "
|
|
676
|
+
"text": "string | undefined"
|
|
500
677
|
},
|
|
501
|
-
"description": "
|
|
502
|
-
"fieldName": "
|
|
678
|
+
"description": "The initials to be displayed for the avatar.",
|
|
679
|
+
"fieldName": "initials",
|
|
680
|
+
"inheritedFrom": {
|
|
681
|
+
"name": "AvatarComponentMixin",
|
|
682
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
683
|
+
}
|
|
503
684
|
},
|
|
504
685
|
{
|
|
505
|
-
"name": "
|
|
686
|
+
"name": "presence",
|
|
506
687
|
"type": {
|
|
507
|
-
"text": "
|
|
688
|
+
"text": "PresenceType | undefined"
|
|
508
689
|
},
|
|
509
|
-
"description": "The
|
|
510
|
-
"
|
|
511
|
-
"
|
|
690
|
+
"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`",
|
|
691
|
+
"fieldName": "presence",
|
|
692
|
+
"inheritedFrom": {
|
|
693
|
+
"name": "AvatarComponentMixin",
|
|
694
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
695
|
+
}
|
|
512
696
|
},
|
|
513
697
|
{
|
|
514
|
-
"name": "
|
|
698
|
+
"name": "size",
|
|
515
699
|
"type": {
|
|
516
|
-
"text": "
|
|
700
|
+
"text": "ButtonSize"
|
|
517
701
|
},
|
|
518
|
-
"
|
|
519
|
-
"
|
|
520
|
-
"fieldName": "
|
|
702
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
703
|
+
"default": "32",
|
|
704
|
+
"fieldName": "size",
|
|
705
|
+
"inheritedFrom": {
|
|
706
|
+
"name": "Buttonsimple",
|
|
707
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
708
|
+
}
|
|
521
709
|
},
|
|
522
710
|
{
|
|
523
|
-
"name": "
|
|
711
|
+
"name": "counter",
|
|
524
712
|
"type": {
|
|
525
|
-
"text": "
|
|
713
|
+
"text": "number | undefined"
|
|
526
714
|
},
|
|
527
|
-
"
|
|
528
|
-
"
|
|
529
|
-
"
|
|
715
|
+
"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`.",
|
|
716
|
+
"fieldName": "counter",
|
|
717
|
+
"inheritedFrom": {
|
|
718
|
+
"name": "AvatarComponentMixin",
|
|
719
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
720
|
+
}
|
|
721
|
+
},
|
|
722
|
+
{
|
|
723
|
+
"name": "is-typing",
|
|
724
|
+
"type": {
|
|
725
|
+
"text": "boolean"
|
|
726
|
+
},
|
|
727
|
+
"default": "false",
|
|
728
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
729
|
+
"fieldName": "isTyping",
|
|
730
|
+
"inheritedFrom": {
|
|
731
|
+
"name": "AvatarComponentMixin",
|
|
732
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
733
|
+
}
|
|
530
734
|
},
|
|
531
735
|
{
|
|
532
736
|
"name": "icon-name",
|
|
@@ -539,193 +743,188 @@
|
|
|
539
743
|
"name": "IconNameMixin",
|
|
540
744
|
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
541
745
|
}
|
|
542
|
-
}
|
|
543
|
-
],
|
|
544
|
-
"mixins": [
|
|
545
|
-
{
|
|
546
|
-
"name": "IconNameMixin",
|
|
547
|
-
"module": "/src/utils/mixins/IconNameMixin"
|
|
548
|
-
}
|
|
549
|
-
],
|
|
550
|
-
"superclass": {
|
|
551
|
-
"name": "Component",
|
|
552
|
-
"module": "/src/models"
|
|
553
|
-
},
|
|
554
|
-
"tagName": "mdc-badge",
|
|
555
|
-
"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 */",
|
|
556
|
-
"customElement": true
|
|
557
|
-
}
|
|
558
|
-
],
|
|
559
|
-
"exports": [
|
|
560
|
-
{
|
|
561
|
-
"kind": "js",
|
|
562
|
-
"name": "default",
|
|
563
|
-
"declaration": {
|
|
564
|
-
"name": "Badge",
|
|
565
|
-
"module": "components/badge/badge.component.js"
|
|
566
|
-
}
|
|
567
|
-
}
|
|
568
|
-
]
|
|
569
|
-
},
|
|
570
|
-
{
|
|
571
|
-
"kind": "javascript-module",
|
|
572
|
-
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
573
|
-
"declarations": [
|
|
574
|
-
{
|
|
575
|
-
"kind": "class",
|
|
576
|
-
"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.",
|
|
577
|
-
"name": "AvatarButton",
|
|
578
|
-
"members": [
|
|
746
|
+
},
|
|
579
747
|
{
|
|
580
|
-
"
|
|
581
|
-
"name": "ariaLabel",
|
|
748
|
+
"name": "tabIndex",
|
|
582
749
|
"type": {
|
|
583
|
-
"text": "
|
|
750
|
+
"text": "number"
|
|
584
751
|
},
|
|
585
|
-
"default": "
|
|
586
|
-
"description": "
|
|
587
|
-
"
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
"privacy": "private",
|
|
593
|
-
"parameters": [
|
|
594
|
-
{
|
|
595
|
-
"name": "size",
|
|
596
|
-
"type": {
|
|
597
|
-
"text": "AvatarSize"
|
|
598
|
-
}
|
|
599
|
-
}
|
|
600
|
-
]
|
|
752
|
+
"default": "0",
|
|
753
|
+
"description": "This property specifies the tab order of the element.",
|
|
754
|
+
"fieldName": "tabIndex",
|
|
755
|
+
"inheritedFrom": {
|
|
756
|
+
"name": "TabIndexMixin",
|
|
757
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
758
|
+
}
|
|
601
759
|
},
|
|
602
760
|
{
|
|
603
|
-
"
|
|
604
|
-
"name": "active",
|
|
761
|
+
"name": "disabled",
|
|
605
762
|
"type": {
|
|
606
763
|
"text": "boolean"
|
|
607
764
|
},
|
|
608
|
-
"default": "
|
|
609
|
-
"description": "
|
|
610
|
-
"
|
|
611
|
-
"reflects": true,
|
|
765
|
+
"default": "false",
|
|
766
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
767
|
+
"fieldName": "disabled",
|
|
612
768
|
"inheritedFrom": {
|
|
613
|
-
"name": "
|
|
614
|
-
"module": "
|
|
769
|
+
"name": "DisabledMixin",
|
|
770
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
615
771
|
}
|
|
616
772
|
},
|
|
617
773
|
{
|
|
618
|
-
"
|
|
619
|
-
"name": "disabled",
|
|
774
|
+
"name": "active",
|
|
620
775
|
"type": {
|
|
621
776
|
"text": "boolean"
|
|
622
777
|
},
|
|
623
|
-
"default": "
|
|
624
|
-
"description": "
|
|
625
|
-
"
|
|
626
|
-
"reflects": true,
|
|
778
|
+
"default": "false",
|
|
779
|
+
"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.",
|
|
780
|
+
"fieldName": "active",
|
|
627
781
|
"inheritedFrom": {
|
|
628
|
-
"name": "
|
|
629
|
-
"module": "
|
|
782
|
+
"name": "Buttonsimple",
|
|
783
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
630
784
|
}
|
|
631
785
|
},
|
|
632
786
|
{
|
|
633
|
-
"
|
|
634
|
-
"name": "softDisabled",
|
|
787
|
+
"name": "soft-disabled",
|
|
635
788
|
"type": {
|
|
636
789
|
"text": "boolean"
|
|
637
790
|
},
|
|
638
|
-
"default": "
|
|
791
|
+
"default": "false",
|
|
639
792
|
"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.",
|
|
640
|
-
"
|
|
793
|
+
"fieldName": "softDisabled",
|
|
641
794
|
"inheritedFrom": {
|
|
642
795
|
"name": "Buttonsimple",
|
|
643
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
796
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
644
797
|
}
|
|
645
798
|
},
|
|
646
799
|
{
|
|
647
|
-
"kind": "field",
|
|
648
800
|
"name": "role",
|
|
649
801
|
"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.",
|
|
650
|
-
"default": "
|
|
651
|
-
"
|
|
652
|
-
"reflects": true,
|
|
653
|
-
"type": {
|
|
654
|
-
"text": "string"
|
|
655
|
-
},
|
|
802
|
+
"default": "button",
|
|
803
|
+
"fieldName": "role",
|
|
656
804
|
"inheritedFrom": {
|
|
657
805
|
"name": "Buttonsimple",
|
|
658
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
806
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
659
807
|
}
|
|
660
808
|
},
|
|
661
809
|
{
|
|
662
|
-
"kind": "field",
|
|
663
810
|
"name": "type",
|
|
664
811
|
"type": {
|
|
665
812
|
"text": "ButtonType"
|
|
666
813
|
},
|
|
667
814
|
"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.",
|
|
668
815
|
"default": "button",
|
|
669
|
-
"
|
|
670
|
-
"reflects": true,
|
|
816
|
+
"fieldName": "type",
|
|
671
817
|
"inheritedFrom": {
|
|
672
818
|
"name": "Buttonsimple",
|
|
673
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
819
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
674
820
|
}
|
|
821
|
+
}
|
|
822
|
+
],
|
|
823
|
+
"mixins": [
|
|
824
|
+
{
|
|
825
|
+
"name": "AvatarComponentMixin",
|
|
826
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
675
827
|
},
|
|
676
828
|
{
|
|
677
|
-
"
|
|
678
|
-
"
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
829
|
+
"name": "IconNameMixin",
|
|
830
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
|
831
|
+
}
|
|
832
|
+
],
|
|
833
|
+
"superclass": {
|
|
834
|
+
"name": "Buttonsimple",
|
|
835
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
836
|
+
},
|
|
837
|
+
"tagName": "mdc-avatarbutton",
|
|
838
|
+
"jsDoc": "/**\n * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n *\n * This component is made by extending `buttonsimple` class.\n * The button component acts as a wrapper for the avatar component.\n *\n * @dependency mdc-avatar\n *\n * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.\n * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.\n *\n * @tagname mdc-avatarbutton\n */",
|
|
839
|
+
"customElement": true
|
|
840
|
+
}
|
|
841
|
+
],
|
|
842
|
+
"exports": [
|
|
843
|
+
{
|
|
844
|
+
"kind": "js",
|
|
845
|
+
"name": "default",
|
|
846
|
+
"declaration": {
|
|
847
|
+
"name": "AvatarButton",
|
|
848
|
+
"module": "components/avatarbutton/avatarbutton.component.js"
|
|
849
|
+
}
|
|
850
|
+
}
|
|
851
|
+
]
|
|
852
|
+
},
|
|
853
|
+
{
|
|
854
|
+
"kind": "javascript-module",
|
|
855
|
+
"path": "components/badge/badge.component.js",
|
|
856
|
+
"declarations": [
|
|
857
|
+
{
|
|
858
|
+
"kind": "class",
|
|
859
|
+
"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.",
|
|
860
|
+
"name": "Badge",
|
|
861
|
+
"cssProperties": [
|
|
862
|
+
{
|
|
863
|
+
"description": "The foreground color of the primary badge.",
|
|
864
|
+
"name": "--mdc-badge-primary-foreground-color"
|
|
688
865
|
},
|
|
689
866
|
{
|
|
690
|
-
"
|
|
691
|
-
"name": "
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
"
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
867
|
+
"description": "The background color of the primary badge.",
|
|
868
|
+
"name": "--mdc-badge-primary-background-color"
|
|
869
|
+
},
|
|
870
|
+
{
|
|
871
|
+
"description": "The foreground color of the secondary badge.",
|
|
872
|
+
"name": "--mdc-badge-secondary-foreground-color"
|
|
873
|
+
},
|
|
874
|
+
{
|
|
875
|
+
"description": "The background color of the secondary badge.",
|
|
876
|
+
"name": "--mdc-badge-secondary-background-color"
|
|
877
|
+
},
|
|
878
|
+
{
|
|
879
|
+
"description": "The foreground color of the success badge.",
|
|
880
|
+
"name": "--mdc-badge-success-foreground-color"
|
|
881
|
+
},
|
|
882
|
+
{
|
|
883
|
+
"description": "The background color of the success badge.",
|
|
884
|
+
"name": "--mdc-badge-success-background-color"
|
|
885
|
+
},
|
|
886
|
+
{
|
|
887
|
+
"description": "The foreground color of the warning badge.",
|
|
888
|
+
"name": "--mdc-badge-warning-foreground-color"
|
|
889
|
+
},
|
|
890
|
+
{
|
|
891
|
+
"description": "The background color of the warning badge.",
|
|
892
|
+
"name": "--mdc-badge-warning-background-color"
|
|
701
893
|
},
|
|
894
|
+
{
|
|
895
|
+
"description": "The foreground color of the error badge.",
|
|
896
|
+
"name": "--mdc-badge-error-foreground-color"
|
|
897
|
+
},
|
|
898
|
+
{
|
|
899
|
+
"description": "The background color of the error badge.",
|
|
900
|
+
"name": "--mdc-badge-error-background-color"
|
|
901
|
+
},
|
|
902
|
+
{
|
|
903
|
+
"description": "The background color of the badge overlay.",
|
|
904
|
+
"name": "--mdc-badge-overlay-background-color"
|
|
905
|
+
}
|
|
906
|
+
],
|
|
907
|
+
"members": [
|
|
702
908
|
{
|
|
703
909
|
"kind": "field",
|
|
704
|
-
"name": "
|
|
910
|
+
"name": "type",
|
|
705
911
|
"type": {
|
|
706
|
-
"text": "
|
|
912
|
+
"text": "BadgeType | undefined"
|
|
707
913
|
},
|
|
708
|
-
"description": "
|
|
709
|
-
"attribute": "
|
|
710
|
-
"
|
|
711
|
-
"name": "AvatarComponentMixin",
|
|
712
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
713
|
-
}
|
|
914
|
+
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
915
|
+
"attribute": "type",
|
|
916
|
+
"reflects": true
|
|
714
917
|
},
|
|
715
918
|
{
|
|
716
919
|
"kind": "field",
|
|
717
|
-
"name": "
|
|
920
|
+
"name": "variant",
|
|
718
921
|
"type": {
|
|
719
|
-
"text": "
|
|
922
|
+
"text": "IconVariant"
|
|
720
923
|
},
|
|
721
|
-
"description": "
|
|
722
|
-
"default": "
|
|
723
|
-
"attribute": "
|
|
724
|
-
"reflects": true
|
|
725
|
-
"inheritedFrom": {
|
|
726
|
-
"name": "Buttonsimple",
|
|
727
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
728
|
-
}
|
|
924
|
+
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
925
|
+
"default": "primary",
|
|
926
|
+
"attribute": "variant",
|
|
927
|
+
"reflects": true
|
|
729
928
|
},
|
|
730
929
|
{
|
|
731
930
|
"kind": "field",
|
|
@@ -733,430 +932,231 @@
|
|
|
733
932
|
"type": {
|
|
734
933
|
"text": "number | undefined"
|
|
735
934
|
},
|
|
736
|
-
"description": "
|
|
737
|
-
"attribute": "counter"
|
|
738
|
-
"inheritedFrom": {
|
|
739
|
-
"name": "AvatarComponentMixin",
|
|
740
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
741
|
-
}
|
|
935
|
+
"description": "Counter is the number which can be provided in the badge.",
|
|
936
|
+
"attribute": "counter"
|
|
742
937
|
},
|
|
743
938
|
{
|
|
744
939
|
"kind": "field",
|
|
745
|
-
"name": "
|
|
940
|
+
"name": "maxCounter",
|
|
746
941
|
"type": {
|
|
747
|
-
"text": "
|
|
942
|
+
"text": "number"
|
|
748
943
|
},
|
|
749
|
-
"
|
|
750
|
-
"
|
|
751
|
-
"attribute": "
|
|
752
|
-
"
|
|
753
|
-
"name": "AvatarComponentMixin",
|
|
754
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
755
|
-
}
|
|
944
|
+
"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`.",
|
|
945
|
+
"default": "99",
|
|
946
|
+
"attribute": "max-counter",
|
|
947
|
+
"reflects": true
|
|
756
948
|
},
|
|
757
949
|
{
|
|
758
950
|
"kind": "field",
|
|
759
|
-
"name": "
|
|
951
|
+
"name": "overlay",
|
|
760
952
|
"type": {
|
|
761
|
-
"text": "
|
|
953
|
+
"text": "boolean"
|
|
762
954
|
},
|
|
763
|
-
"
|
|
764
|
-
"
|
|
765
|
-
"
|
|
766
|
-
"name": "IconNameMixin",
|
|
767
|
-
"module": "utils/mixins/IconNameMixin.js"
|
|
768
|
-
}
|
|
955
|
+
"default": "false",
|
|
956
|
+
"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.",
|
|
957
|
+
"attribute": "overlay"
|
|
769
958
|
},
|
|
770
959
|
{
|
|
771
960
|
"kind": "field",
|
|
772
|
-
"name": "
|
|
961
|
+
"name": "ariaLabel",
|
|
773
962
|
"type": {
|
|
774
|
-
"text": "
|
|
963
|
+
"text": "string | null"
|
|
775
964
|
},
|
|
776
|
-
"default": "
|
|
777
|
-
"description": "
|
|
778
|
-
"attribute": "
|
|
779
|
-
"reflects": true,
|
|
780
|
-
"inheritedFrom": {
|
|
781
|
-
"name": "TabIndexMixin",
|
|
782
|
-
"module": "utils/mixins/TabIndexMixin.js"
|
|
783
|
-
}
|
|
784
|
-
},
|
|
785
|
-
{
|
|
786
|
-
"kind": "method",
|
|
787
|
-
"name": "executeAction",
|
|
788
|
-
"privacy": "protected",
|
|
789
|
-
"inheritedFrom": {
|
|
790
|
-
"name": "Buttonsimple",
|
|
791
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
792
|
-
}
|
|
793
|
-
},
|
|
794
|
-
{
|
|
795
|
-
"kind": "method",
|
|
796
|
-
"name": "setActive",
|
|
797
|
-
"privacy": "protected",
|
|
798
|
-
"parameters": [
|
|
799
|
-
{
|
|
800
|
-
"name": "element",
|
|
801
|
-
"type": {
|
|
802
|
-
"text": "HTMLElement"
|
|
803
|
-
},
|
|
804
|
-
"description": "The button element"
|
|
805
|
-
},
|
|
806
|
-
{
|
|
807
|
-
"name": "active",
|
|
808
|
-
"type": {
|
|
809
|
-
"text": "boolean"
|
|
810
|
-
},
|
|
811
|
-
"description": "The active state of the element"
|
|
812
|
-
}
|
|
813
|
-
],
|
|
814
|
-
"description": "Sets the aria-pressed attribute based on the active state of the button.",
|
|
815
|
-
"inheritedFrom": {
|
|
816
|
-
"name": "Buttonsimple",
|
|
817
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
818
|
-
}
|
|
965
|
+
"default": "null",
|
|
966
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
967
|
+
"attribute": "aria-label"
|
|
819
968
|
},
|
|
820
969
|
{
|
|
821
970
|
"kind": "method",
|
|
822
|
-
"name": "
|
|
971
|
+
"name": "getCounterText",
|
|
823
972
|
"privacy": "private",
|
|
824
|
-
"
|
|
825
|
-
{
|
|
826
|
-
"
|
|
827
|
-
"type": {
|
|
828
|
-
"text": "HTMLElement"
|
|
829
|
-
},
|
|
830
|
-
"description": "The button element."
|
|
831
|
-
},
|
|
832
|
-
{
|
|
833
|
-
"name": "softDisabled",
|
|
834
|
-
"type": {
|
|
835
|
-
"text": "boolean"
|
|
836
|
-
},
|
|
837
|
-
"description": "The soft-disabled state."
|
|
973
|
+
"return": {
|
|
974
|
+
"type": {
|
|
975
|
+
"text": ""
|
|
838
976
|
}
|
|
839
|
-
|
|
840
|
-
"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.",
|
|
841
|
-
"inheritedFrom": {
|
|
842
|
-
"name": "Buttonsimple",
|
|
843
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
844
|
-
}
|
|
845
|
-
},
|
|
846
|
-
{
|
|
847
|
-
"kind": "method",
|
|
848
|
-
"name": "setDisabled",
|
|
849
|
-
"privacy": "private",
|
|
977
|
+
},
|
|
850
978
|
"parameters": [
|
|
851
979
|
{
|
|
852
|
-
"name": "
|
|
980
|
+
"name": "maxCounter",
|
|
853
981
|
"type": {
|
|
854
|
-
"text": "
|
|
982
|
+
"text": "number"
|
|
855
983
|
},
|
|
856
|
-
"description": "
|
|
984
|
+
"description": "the maximum limit which can be displayed on the badge"
|
|
857
985
|
},
|
|
858
986
|
{
|
|
859
|
-
"name": "
|
|
860
|
-
"
|
|
861
|
-
"text": "boolean"
|
|
862
|
-
},
|
|
863
|
-
"description": "The disabled state."
|
|
864
|
-
}
|
|
865
|
-
],
|
|
866
|
-
"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.",
|
|
867
|
-
"inheritedFrom": {
|
|
868
|
-
"name": "Buttonsimple",
|
|
869
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
870
|
-
}
|
|
871
|
-
},
|
|
872
|
-
{
|
|
873
|
-
"kind": "method",
|
|
874
|
-
"name": "triggerClickEvent",
|
|
875
|
-
"privacy": "private",
|
|
876
|
-
"inheritedFrom": {
|
|
877
|
-
"name": "Buttonsimple",
|
|
878
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
879
|
-
}
|
|
880
|
-
},
|
|
881
|
-
{
|
|
882
|
-
"kind": "method",
|
|
883
|
-
"name": "handleBlur",
|
|
884
|
-
"privacy": "private",
|
|
885
|
-
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
|
886
|
-
"inheritedFrom": {
|
|
887
|
-
"name": "Buttonsimple",
|
|
888
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
889
|
-
}
|
|
890
|
-
},
|
|
891
|
-
{
|
|
892
|
-
"kind": "method",
|
|
893
|
-
"name": "handleKeyDown",
|
|
894
|
-
"privacy": "private",
|
|
895
|
-
"parameters": [
|
|
896
|
-
{
|
|
897
|
-
"name": "event",
|
|
898
|
-
"type": {
|
|
899
|
-
"text": "KeyboardEvent"
|
|
900
|
-
},
|
|
901
|
-
"description": "The keyboard event."
|
|
902
|
-
}
|
|
903
|
-
],
|
|
904
|
-
"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.",
|
|
905
|
-
"inheritedFrom": {
|
|
906
|
-
"name": "Buttonsimple",
|
|
907
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
908
|
-
}
|
|
909
|
-
},
|
|
910
|
-
{
|
|
911
|
-
"kind": "method",
|
|
912
|
-
"name": "handleKeyUp",
|
|
913
|
-
"privacy": "private",
|
|
914
|
-
"parameters": [
|
|
915
|
-
{
|
|
916
|
-
"name": "event",
|
|
987
|
+
"name": "counter",
|
|
988
|
+
"optional": true,
|
|
917
989
|
"type": {
|
|
918
|
-
"text": "
|
|
990
|
+
"text": "number"
|
|
919
991
|
},
|
|
920
|
-
"description": "
|
|
921
|
-
}
|
|
922
|
-
],
|
|
923
|
-
"description": "
|
|
924
|
-
"inheritedFrom": {
|
|
925
|
-
"name": "Buttonsimple",
|
|
926
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
927
|
-
}
|
|
928
|
-
}
|
|
929
|
-
],
|
|
930
|
-
"events": [
|
|
931
|
-
{
|
|
932
|
-
"description": "(React: onClick) This event is dispatched when the avatarbutton is clicked.",
|
|
933
|
-
"name": "click",
|
|
934
|
-
"reactName": "onClick",
|
|
935
|
-
"eventName": "ClickEvent",
|
|
936
|
-
"inheritedFrom": {
|
|
937
|
-
"name": "Buttonsimple",
|
|
938
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
939
|
-
}
|
|
940
|
-
},
|
|
941
|
-
{
|
|
942
|
-
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.",
|
|
943
|
-
"name": "keydown",
|
|
944
|
-
"reactName": "onKeyDown",
|
|
945
|
-
"eventName": "KeydownEvent",
|
|
946
|
-
"inheritedFrom": {
|
|
947
|
-
"name": "Buttonsimple",
|
|
948
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
949
|
-
}
|
|
950
|
-
},
|
|
951
|
-
{
|
|
952
|
-
"description": "(React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.",
|
|
953
|
-
"name": "keyup",
|
|
954
|
-
"reactName": "onKeyUp",
|
|
955
|
-
"eventName": "KeyupEvent",
|
|
956
|
-
"inheritedFrom": {
|
|
957
|
-
"name": "Buttonsimple",
|
|
958
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
959
|
-
}
|
|
992
|
+
"description": "the number to be displayed on the badge"
|
|
993
|
+
}
|
|
994
|
+
],
|
|
995
|
+
"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."
|
|
960
996
|
},
|
|
961
997
|
{
|
|
962
|
-
"
|
|
963
|
-
"name": "
|
|
964
|
-
"
|
|
965
|
-
"
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
}
|
|
970
|
-
}
|
|
971
|
-
],
|
|
972
|
-
"attributes": [
|
|
973
|
-
{
|
|
974
|
-
"name": "aria-label",
|
|
975
|
-
"type": {
|
|
976
|
-
"text": "string | null"
|
|
998
|
+
"kind": "method",
|
|
999
|
+
"name": "getBadgeIcon",
|
|
1000
|
+
"privacy": "private",
|
|
1001
|
+
"return": {
|
|
1002
|
+
"type": {
|
|
1003
|
+
"text": ""
|
|
1004
|
+
}
|
|
977
1005
|
},
|
|
978
|
-
"
|
|
979
|
-
|
|
980
|
-
|
|
1006
|
+
"parameters": [
|
|
1007
|
+
{
|
|
1008
|
+
"name": "iconName",
|
|
1009
|
+
"type": {
|
|
1010
|
+
"text": "string"
|
|
1011
|
+
},
|
|
1012
|
+
"description": "the name of the icon from the icon set"
|
|
1013
|
+
},
|
|
1014
|
+
{
|
|
1015
|
+
"name": "backgroundClassPostfix",
|
|
1016
|
+
"type": {
|
|
1017
|
+
"text": "string"
|
|
1018
|
+
},
|
|
1019
|
+
"description": "postfix for the class to style the badge icon."
|
|
1020
|
+
}
|
|
1021
|
+
],
|
|
1022
|
+
"description": "Method to generate the badge icon."
|
|
981
1023
|
},
|
|
982
1024
|
{
|
|
983
|
-
"
|
|
984
|
-
"
|
|
985
|
-
|
|
1025
|
+
"kind": "method",
|
|
1026
|
+
"name": "getBadgeDot",
|
|
1027
|
+
"privacy": "private",
|
|
1028
|
+
"return": {
|
|
1029
|
+
"type": {
|
|
1030
|
+
"text": ""
|
|
1031
|
+
}
|
|
986
1032
|
},
|
|
987
|
-
"description": "
|
|
988
|
-
"fieldName": "src",
|
|
989
|
-
"inheritedFrom": {
|
|
990
|
-
"name": "AvatarComponentMixin",
|
|
991
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
992
|
-
}
|
|
1033
|
+
"description": "Method to generate the badge dot template."
|
|
993
1034
|
},
|
|
994
1035
|
{
|
|
995
|
-
"
|
|
996
|
-
"
|
|
997
|
-
|
|
1036
|
+
"kind": "method",
|
|
1037
|
+
"name": "getBadgeCounterText",
|
|
1038
|
+
"privacy": "private",
|
|
1039
|
+
"return": {
|
|
1040
|
+
"type": {
|
|
1041
|
+
"text": ""
|
|
1042
|
+
}
|
|
998
1043
|
},
|
|
999
|
-
"description": "
|
|
1000
|
-
"fieldName": "initials",
|
|
1001
|
-
"inheritedFrom": {
|
|
1002
|
-
"name": "AvatarComponentMixin",
|
|
1003
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1004
|
-
}
|
|
1044
|
+
"description": "Method to generate the badge text and counter template."
|
|
1005
1045
|
},
|
|
1006
1046
|
{
|
|
1007
|
-
"
|
|
1008
|
-
"
|
|
1009
|
-
|
|
1047
|
+
"kind": "method",
|
|
1048
|
+
"name": "setRoleByAriaLabel",
|
|
1049
|
+
"privacy": "private",
|
|
1050
|
+
"return": {
|
|
1051
|
+
"type": {
|
|
1052
|
+
"text": "void"
|
|
1053
|
+
}
|
|
1010
1054
|
},
|
|
1011
|
-
"description": "
|
|
1012
|
-
"fieldName": "presence",
|
|
1013
|
-
"inheritedFrom": {
|
|
1014
|
-
"name": "AvatarComponentMixin",
|
|
1015
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1016
|
-
}
|
|
1055
|
+
"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."
|
|
1017
1056
|
},
|
|
1018
1057
|
{
|
|
1019
|
-
"
|
|
1020
|
-
"
|
|
1021
|
-
|
|
1058
|
+
"kind": "method",
|
|
1059
|
+
"name": "getBadgeContentBasedOnType",
|
|
1060
|
+
"privacy": "private",
|
|
1061
|
+
"return": {
|
|
1062
|
+
"type": {
|
|
1063
|
+
"text": ""
|
|
1064
|
+
}
|
|
1022
1065
|
},
|
|
1023
|
-
"description": "
|
|
1024
|
-
"default": "32",
|
|
1025
|
-
"fieldName": "size",
|
|
1026
|
-
"inheritedFrom": {
|
|
1027
|
-
"name": "Buttonsimple",
|
|
1028
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1029
|
-
}
|
|
1066
|
+
"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."
|
|
1030
1067
|
},
|
|
1031
1068
|
{
|
|
1032
|
-
"
|
|
1069
|
+
"kind": "field",
|
|
1070
|
+
"name": "iconName",
|
|
1033
1071
|
"type": {
|
|
1034
|
-
"text": "
|
|
1072
|
+
"text": "IconNames | undefined"
|
|
1035
1073
|
},
|
|
1036
|
-
"description": "
|
|
1037
|
-
"
|
|
1074
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
1075
|
+
"attribute": "icon-name",
|
|
1038
1076
|
"inheritedFrom": {
|
|
1039
|
-
"name": "
|
|
1040
|
-
"module": "
|
|
1077
|
+
"name": "IconNameMixin",
|
|
1078
|
+
"module": "utils/mixins/IconNameMixin.js"
|
|
1041
1079
|
}
|
|
1042
|
-
}
|
|
1080
|
+
}
|
|
1081
|
+
],
|
|
1082
|
+
"attributes": [
|
|
1043
1083
|
{
|
|
1044
|
-
"name": "
|
|
1084
|
+
"name": "type",
|
|
1045
1085
|
"type": {
|
|
1046
|
-
"text": "
|
|
1086
|
+
"text": "BadgeType | undefined"
|
|
1047
1087
|
},
|
|
1048
|
-
"
|
|
1049
|
-
"
|
|
1050
|
-
"fieldName": "isTyping",
|
|
1051
|
-
"inheritedFrom": {
|
|
1052
|
-
"name": "AvatarComponentMixin",
|
|
1053
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1054
|
-
}
|
|
1088
|
+
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
1089
|
+
"fieldName": "type"
|
|
1055
1090
|
},
|
|
1056
1091
|
{
|
|
1057
|
-
"name": "
|
|
1092
|
+
"name": "variant",
|
|
1058
1093
|
"type": {
|
|
1059
|
-
"text": "
|
|
1094
|
+
"text": "IconVariant"
|
|
1060
1095
|
},
|
|
1061
|
-
"description": "
|
|
1062
|
-
"
|
|
1063
|
-
"
|
|
1064
|
-
"name": "IconNameMixin",
|
|
1065
|
-
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
1066
|
-
}
|
|
1096
|
+
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
1097
|
+
"default": "primary",
|
|
1098
|
+
"fieldName": "variant"
|
|
1067
1099
|
},
|
|
1068
1100
|
{
|
|
1069
|
-
"name": "
|
|
1101
|
+
"name": "counter",
|
|
1070
1102
|
"type": {
|
|
1071
|
-
"text": "number"
|
|
1103
|
+
"text": "number | undefined"
|
|
1072
1104
|
},
|
|
1073
|
-
"
|
|
1074
|
-
"
|
|
1075
|
-
"fieldName": "tabIndex",
|
|
1076
|
-
"inheritedFrom": {
|
|
1077
|
-
"name": "TabIndexMixin",
|
|
1078
|
-
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
1079
|
-
}
|
|
1105
|
+
"description": "Counter is the number which can be provided in the badge.",
|
|
1106
|
+
"fieldName": "counter"
|
|
1080
1107
|
},
|
|
1081
1108
|
{
|
|
1082
|
-
"name": "
|
|
1109
|
+
"name": "max-counter",
|
|
1083
1110
|
"type": {
|
|
1084
|
-
"text": "
|
|
1111
|
+
"text": "number"
|
|
1085
1112
|
},
|
|
1086
|
-
"
|
|
1087
|
-
"
|
|
1088
|
-
"fieldName": "
|
|
1089
|
-
"inheritedFrom": {
|
|
1090
|
-
"name": "DisabledMixin",
|
|
1091
|
-
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
1092
|
-
}
|
|
1113
|
+
"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`.",
|
|
1114
|
+
"default": "99",
|
|
1115
|
+
"fieldName": "maxCounter"
|
|
1093
1116
|
},
|
|
1094
1117
|
{
|
|
1095
|
-
"name": "
|
|
1118
|
+
"name": "overlay",
|
|
1096
1119
|
"type": {
|
|
1097
1120
|
"text": "boolean"
|
|
1098
1121
|
},
|
|
1099
1122
|
"default": "false",
|
|
1100
|
-
"description": "
|
|
1101
|
-
"fieldName": "
|
|
1102
|
-
"inheritedFrom": {
|
|
1103
|
-
"name": "Buttonsimple",
|
|
1104
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1105
|
-
}
|
|
1123
|
+
"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.",
|
|
1124
|
+
"fieldName": "overlay"
|
|
1106
1125
|
},
|
|
1107
1126
|
{
|
|
1108
|
-
"name": "
|
|
1127
|
+
"name": "aria-label",
|
|
1109
1128
|
"type": {
|
|
1110
|
-
"text": "
|
|
1129
|
+
"text": "string | null"
|
|
1111
1130
|
},
|
|
1112
|
-
"default": "
|
|
1113
|
-
"description": "
|
|
1114
|
-
"fieldName": "
|
|
1115
|
-
"inheritedFrom": {
|
|
1116
|
-
"name": "Buttonsimple",
|
|
1117
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1118
|
-
}
|
|
1119
|
-
},
|
|
1120
|
-
{
|
|
1121
|
-
"name": "role",
|
|
1122
|
-
"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.",
|
|
1123
|
-
"default": "button",
|
|
1124
|
-
"fieldName": "role",
|
|
1125
|
-
"inheritedFrom": {
|
|
1126
|
-
"name": "Buttonsimple",
|
|
1127
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1128
|
-
}
|
|
1131
|
+
"default": "null",
|
|
1132
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
1133
|
+
"fieldName": "ariaLabel"
|
|
1129
1134
|
},
|
|
1130
1135
|
{
|
|
1131
|
-
"name": "
|
|
1136
|
+
"name": "icon-name",
|
|
1132
1137
|
"type": {
|
|
1133
|
-
"text": "
|
|
1138
|
+
"text": "IconNames | undefined"
|
|
1134
1139
|
},
|
|
1135
|
-
"description": "
|
|
1136
|
-
"
|
|
1137
|
-
"fieldName": "type",
|
|
1140
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
1141
|
+
"fieldName": "iconName",
|
|
1138
1142
|
"inheritedFrom": {
|
|
1139
|
-
"name": "
|
|
1140
|
-
"module": "src/
|
|
1143
|
+
"name": "IconNameMixin",
|
|
1144
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
1141
1145
|
}
|
|
1142
1146
|
}
|
|
1143
1147
|
],
|
|
1144
1148
|
"mixins": [
|
|
1145
|
-
{
|
|
1146
|
-
"name": "AvatarComponentMixin",
|
|
1147
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
1148
|
-
},
|
|
1149
1149
|
{
|
|
1150
1150
|
"name": "IconNameMixin",
|
|
1151
1151
|
"module": "/src/utils/mixins/IconNameMixin"
|
|
1152
1152
|
}
|
|
1153
1153
|
],
|
|
1154
1154
|
"superclass": {
|
|
1155
|
-
"name": "
|
|
1156
|
-
"module": "/src/
|
|
1155
|
+
"name": "Component",
|
|
1156
|
+
"module": "/src/models"
|
|
1157
1157
|
},
|
|
1158
|
-
"tagName": "mdc-
|
|
1159
|
-
"jsDoc": "/**\n * The `mdc-
|
|
1158
|
+
"tagName": "mdc-badge",
|
|
1159
|
+
"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 */",
|
|
1160
1160
|
"customElement": true
|
|
1161
1161
|
}
|
|
1162
1162
|
],
|
|
@@ -1165,8 +1165,8 @@
|
|
|
1165
1165
|
"kind": "js",
|
|
1166
1166
|
"name": "default",
|
|
1167
1167
|
"declaration": {
|
|
1168
|
-
"name": "
|
|
1169
|
-
"module": "components/
|
|
1168
|
+
"name": "Badge",
|
|
1169
|
+
"module": "components/badge/badge.component.js"
|
|
1170
1170
|
}
|
|
1171
1171
|
}
|
|
1172
1172
|
]
|
|
@@ -3432,6 +3432,7 @@
|
|
|
3432
3432
|
"default": "''",
|
|
3433
3433
|
"description": "The unique ID of the popover.",
|
|
3434
3434
|
"attribute": "id",
|
|
3435
|
+
"reflects": true,
|
|
3435
3436
|
"inheritedFrom": {
|
|
3436
3437
|
"name": "Popover",
|
|
3437
3438
|
"module": "components/popover/popover.component.js"
|
|
@@ -3446,6 +3447,7 @@
|
|
|
3446
3447
|
"default": "''",
|
|
3447
3448
|
"description": "The ID of the element that triggers the popover.\nThis attribute is required for the popover to work.",
|
|
3448
3449
|
"attribute": "triggerID",
|
|
3450
|
+
"reflects": true,
|
|
3449
3451
|
"inheritedFrom": {
|
|
3450
3452
|
"name": "Popover",
|
|
3451
3453
|
"module": "components/popover/popover.component.js"
|
|
@@ -7462,7 +7464,8 @@
|
|
|
7462
7464
|
},
|
|
7463
7465
|
"default": "''",
|
|
7464
7466
|
"description": "The unique ID of the popover.",
|
|
7465
|
-
"attribute": "id"
|
|
7467
|
+
"attribute": "id",
|
|
7468
|
+
"reflects": true
|
|
7466
7469
|
},
|
|
7467
7470
|
{
|
|
7468
7471
|
"kind": "field",
|
|
@@ -7472,7 +7475,8 @@
|
|
|
7472
7475
|
},
|
|
7473
7476
|
"default": "''",
|
|
7474
7477
|
"description": "The ID of the element that triggers the popover.\nThis attribute is required for the popover to work.",
|
|
7475
|
-
"attribute": "triggerID"
|
|
7478
|
+
"attribute": "triggerID",
|
|
7479
|
+
"reflects": true
|
|
7476
7480
|
},
|
|
7477
7481
|
{
|
|
7478
7482
|
"kind": "field",
|
|
@@ -13534,6 +13538,7 @@
|
|
|
13534
13538
|
"default": "''",
|
|
13535
13539
|
"description": "The unique ID of the popover.",
|
|
13536
13540
|
"attribute": "id",
|
|
13541
|
+
"reflects": true,
|
|
13537
13542
|
"inheritedFrom": {
|
|
13538
13543
|
"name": "Popover",
|
|
13539
13544
|
"module": "components/popover/popover.component.js"
|
|
@@ -13548,6 +13553,7 @@
|
|
|
13548
13553
|
"default": "''",
|
|
13549
13554
|
"description": "The ID of the element that triggers the popover.\nThis attribute is required for the popover to work.",
|
|
13550
13555
|
"attribute": "triggerID",
|
|
13556
|
+
"reflects": true,
|
|
13551
13557
|
"inheritedFrom": {
|
|
13552
13558
|
"name": "Popover",
|
|
13553
13559
|
"module": "components/popover/popover.component.js"
|