@momentum-design/components 0.18.3 → 0.18.4
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/browser/index.js +0 -14
- package/dist/browser/index.js.map +2 -2
- package/dist/components/badge/badge.component.d.ts +12 -0
- package/dist/components/badge/badge.component.js +12 -0
- package/dist/components/icon/icon.component.d.ts +2 -0
- package/dist/components/icon/icon.component.js +2 -0
- package/dist/components/presence/presence.component.d.ts +16 -0
- package/dist/components/presence/presence.component.js +16 -0
- package/dist/components/presence/presence.styles.js +0 -14
- package/dist/custom-elements.json +617 -501
- package/dist/react/badge/index.d.ts +12 -0
- package/dist/react/badge/index.js +12 -0
- package/dist/react/icon/index.d.ts +2 -0
- package/dist/react/icon/index.js +2 -0
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +1 -1
- package/dist/react/presence/index.d.ts +16 -0
- package/dist/react/presence/index.js +16 -0
- package/package.json +1 -1
|
@@ -244,798 +244,844 @@
|
|
|
244
244
|
},
|
|
245
245
|
{
|
|
246
246
|
"kind": "javascript-module",
|
|
247
|
-
"path": "components/
|
|
247
|
+
"path": "components/badge/badge.component.js",
|
|
248
248
|
"declarations": [
|
|
249
249
|
{
|
|
250
250
|
"kind": "class",
|
|
251
|
-
"description": "The `mdc-
|
|
252
|
-
"name": "
|
|
253
|
-
"
|
|
251
|
+
"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.",
|
|
252
|
+
"name": "Badge",
|
|
253
|
+
"cssProperties": [
|
|
254
254
|
{
|
|
255
|
-
"
|
|
256
|
-
"name": "
|
|
257
|
-
"type": {
|
|
258
|
-
"text": "string | null"
|
|
259
|
-
},
|
|
260
|
-
"default": "null",
|
|
261
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
262
|
-
"attribute": "aria-label"
|
|
255
|
+
"description": "The foreground color of the primary badge.",
|
|
256
|
+
"name": "--mdc-badge-primary-foreground-color"
|
|
263
257
|
},
|
|
264
258
|
{
|
|
265
|
-
"
|
|
266
|
-
"name": "
|
|
267
|
-
"privacy": "private",
|
|
268
|
-
"parameters": [
|
|
269
|
-
{
|
|
270
|
-
"name": "size",
|
|
271
|
-
"type": {
|
|
272
|
-
"text": "AvatarSize"
|
|
273
|
-
}
|
|
274
|
-
}
|
|
275
|
-
]
|
|
259
|
+
"description": "The background color of the primary badge.",
|
|
260
|
+
"name": "--mdc-badge-primary-background-color"
|
|
276
261
|
},
|
|
277
262
|
{
|
|
278
|
-
"
|
|
279
|
-
"name": "
|
|
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
|
-
}
|
|
263
|
+
"description": "The foreground color of the secondary badge.",
|
|
264
|
+
"name": "--mdc-badge-secondary-foreground-color"
|
|
290
265
|
},
|
|
291
266
|
{
|
|
292
|
-
"
|
|
293
|
-
"name": "
|
|
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
|
-
}
|
|
267
|
+
"description": "The background color of the secondary badge.",
|
|
268
|
+
"name": "--mdc-badge-secondary-background-color"
|
|
305
269
|
},
|
|
306
270
|
{
|
|
307
|
-
"
|
|
308
|
-
"name": "
|
|
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
|
-
}
|
|
271
|
+
"description": "The foreground color of the success badge.",
|
|
272
|
+
"name": "--mdc-badge-success-foreground-color"
|
|
319
273
|
},
|
|
320
274
|
{
|
|
321
|
-
"
|
|
322
|
-
"name": "
|
|
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
|
-
}
|
|
275
|
+
"description": "The background color of the success badge.",
|
|
276
|
+
"name": "--mdc-badge-success-background-color"
|
|
334
277
|
},
|
|
335
278
|
{
|
|
336
|
-
"
|
|
337
|
-
"name": "
|
|
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
|
-
}
|
|
279
|
+
"description": "The foreground color of the warning badge.",
|
|
280
|
+
"name": "--mdc-badge-warning-foreground-color"
|
|
349
281
|
},
|
|
350
282
|
{
|
|
351
|
-
"
|
|
352
|
-
"name": "
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
"
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
}
|
|
283
|
+
"description": "The background color of the warning badge.",
|
|
284
|
+
"name": "--mdc-badge-warning-background-color"
|
|
285
|
+
},
|
|
286
|
+
{
|
|
287
|
+
"description": "The foreground color of the error badge.",
|
|
288
|
+
"name": "--mdc-badge-error-foreground-color"
|
|
289
|
+
},
|
|
290
|
+
{
|
|
291
|
+
"description": "The background color of the error badge.",
|
|
292
|
+
"name": "--mdc-badge-error-background-color"
|
|
362
293
|
},
|
|
294
|
+
{
|
|
295
|
+
"description": "The background color of the badge overlay.",
|
|
296
|
+
"name": "--mdc-badge-overlay-background-color"
|
|
297
|
+
}
|
|
298
|
+
],
|
|
299
|
+
"members": [
|
|
363
300
|
{
|
|
364
301
|
"kind": "field",
|
|
365
|
-
"name": "
|
|
302
|
+
"name": "type",
|
|
366
303
|
"type": {
|
|
367
|
-
"text": "
|
|
304
|
+
"text": "BadgeType | undefined"
|
|
368
305
|
},
|
|
369
|
-
"description": "
|
|
370
|
-
"attribute": "
|
|
371
|
-
"
|
|
372
|
-
"name": "AvatarComponentMixin",
|
|
373
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
374
|
-
}
|
|
306
|
+
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
307
|
+
"attribute": "type",
|
|
308
|
+
"reflects": true
|
|
375
309
|
},
|
|
376
310
|
{
|
|
377
311
|
"kind": "field",
|
|
378
|
-
"name": "
|
|
312
|
+
"name": "iconName",
|
|
379
313
|
"type": {
|
|
380
|
-
"text": "
|
|
314
|
+
"text": "IconNames | undefined"
|
|
381
315
|
},
|
|
382
|
-
"description": "
|
|
383
|
-
"attribute": "
|
|
384
|
-
"inheritedFrom": {
|
|
385
|
-
"name": "AvatarComponentMixin",
|
|
386
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
387
|
-
}
|
|
316
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
317
|
+
"attribute": "icon-name"
|
|
388
318
|
},
|
|
389
319
|
{
|
|
390
320
|
"kind": "field",
|
|
391
|
-
"name": "
|
|
321
|
+
"name": "variant",
|
|
392
322
|
"type": {
|
|
393
|
-
"text": "
|
|
323
|
+
"text": "IconVariant"
|
|
394
324
|
},
|
|
395
|
-
"description": "
|
|
396
|
-
"default": "
|
|
397
|
-
"attribute": "
|
|
398
|
-
"reflects": true
|
|
399
|
-
"inheritedFrom": {
|
|
400
|
-
"name": "Buttonsimple",
|
|
401
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
402
|
-
}
|
|
325
|
+
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
326
|
+
"default": "primary",
|
|
327
|
+
"attribute": "variant",
|
|
328
|
+
"reflects": true
|
|
403
329
|
},
|
|
404
330
|
{
|
|
405
331
|
"kind": "field",
|
|
406
|
-
"name": "
|
|
332
|
+
"name": "counter",
|
|
407
333
|
"type": {
|
|
408
|
-
"text": "
|
|
334
|
+
"text": "number | undefined"
|
|
409
335
|
},
|
|
410
|
-
"description": "
|
|
411
|
-
"attribute": "
|
|
412
|
-
"inheritedFrom": {
|
|
413
|
-
"name": "AvatarComponentMixin",
|
|
414
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
415
|
-
}
|
|
336
|
+
"description": "Counter is the number which can be provided in the badge.",
|
|
337
|
+
"attribute": "counter"
|
|
416
338
|
},
|
|
417
339
|
{
|
|
418
340
|
"kind": "field",
|
|
419
|
-
"name": "
|
|
341
|
+
"name": "maxCounter",
|
|
420
342
|
"type": {
|
|
421
|
-
"text": "number
|
|
343
|
+
"text": "number"
|
|
422
344
|
},
|
|
423
|
-
"description": "The
|
|
424
|
-
"
|
|
425
|
-
"
|
|
426
|
-
|
|
427
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
428
|
-
}
|
|
345
|
+
"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`.",
|
|
346
|
+
"default": "99",
|
|
347
|
+
"attribute": "max-counter",
|
|
348
|
+
"reflects": true
|
|
429
349
|
},
|
|
430
350
|
{
|
|
431
351
|
"kind": "field",
|
|
432
|
-
"name": "
|
|
352
|
+
"name": "overlay",
|
|
433
353
|
"type": {
|
|
434
354
|
"text": "boolean"
|
|
435
355
|
},
|
|
436
356
|
"default": "false",
|
|
437
|
-
"description": "
|
|
438
|
-
"attribute": "
|
|
439
|
-
"inheritedFrom": {
|
|
440
|
-
"name": "AvatarComponentMixin",
|
|
441
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
442
|
-
}
|
|
357
|
+
"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.",
|
|
358
|
+
"attribute": "overlay"
|
|
443
359
|
},
|
|
444
360
|
{
|
|
445
361
|
"kind": "field",
|
|
446
|
-
"name": "
|
|
362
|
+
"name": "ariaLabel",
|
|
447
363
|
"type": {
|
|
448
|
-
"text": "
|
|
364
|
+
"text": "string | null"
|
|
449
365
|
},
|
|
450
|
-
"default": "
|
|
451
|
-
"description": "
|
|
452
|
-
"attribute": "
|
|
453
|
-
"reflects": true,
|
|
454
|
-
"inheritedFrom": {
|
|
455
|
-
"name": "TabIndexMixin",
|
|
456
|
-
"module": "utils/mixins/TabIndexMixin.js"
|
|
457
|
-
}
|
|
458
|
-
},
|
|
459
|
-
{
|
|
460
|
-
"kind": "method",
|
|
461
|
-
"name": "executeAction",
|
|
462
|
-
"privacy": "private",
|
|
463
|
-
"inheritedFrom": {
|
|
464
|
-
"name": "Buttonsimple",
|
|
465
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
466
|
-
}
|
|
366
|
+
"default": "null",
|
|
367
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
368
|
+
"attribute": "aria-label"
|
|
467
369
|
},
|
|
468
370
|
{
|
|
469
371
|
"kind": "method",
|
|
470
|
-
"name": "
|
|
372
|
+
"name": "getCounterText",
|
|
471
373
|
"privacy": "private",
|
|
374
|
+
"return": {
|
|
375
|
+
"type": {
|
|
376
|
+
"text": ""
|
|
377
|
+
}
|
|
378
|
+
},
|
|
472
379
|
"parameters": [
|
|
473
380
|
{
|
|
474
|
-
"name": "
|
|
381
|
+
"name": "maxCounter",
|
|
475
382
|
"type": {
|
|
476
|
-
"text": "
|
|
383
|
+
"text": "number"
|
|
477
384
|
},
|
|
478
|
-
"description": "
|
|
385
|
+
"description": "the maximum limit which can be displayed on the badge"
|
|
479
386
|
},
|
|
480
387
|
{
|
|
481
|
-
"name": "
|
|
388
|
+
"name": "counter",
|
|
389
|
+
"optional": true,
|
|
482
390
|
"type": {
|
|
483
|
-
"text": "
|
|
391
|
+
"text": "number"
|
|
484
392
|
},
|
|
485
|
-
"description": "
|
|
393
|
+
"description": "the number to be displayed on the badge"
|
|
486
394
|
}
|
|
487
395
|
],
|
|
488
|
-
"description": "
|
|
489
|
-
"inheritedFrom": {
|
|
490
|
-
"name": "Buttonsimple",
|
|
491
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
492
|
-
}
|
|
396
|
+
"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."
|
|
493
397
|
},
|
|
494
398
|
{
|
|
495
399
|
"kind": "method",
|
|
496
|
-
"name": "
|
|
400
|
+
"name": "getBadgeIcon",
|
|
497
401
|
"privacy": "private",
|
|
402
|
+
"return": {
|
|
403
|
+
"type": {
|
|
404
|
+
"text": ""
|
|
405
|
+
}
|
|
406
|
+
},
|
|
498
407
|
"parameters": [
|
|
499
408
|
{
|
|
500
|
-
"name": "
|
|
409
|
+
"name": "iconName",
|
|
501
410
|
"type": {
|
|
502
|
-
"text": "
|
|
411
|
+
"text": "string"
|
|
503
412
|
},
|
|
504
|
-
"description": "
|
|
413
|
+
"description": "the name of the icon from the icon set"
|
|
505
414
|
},
|
|
506
415
|
{
|
|
507
|
-
"name": "
|
|
416
|
+
"name": "backgroundClassPostfix",
|
|
508
417
|
"type": {
|
|
509
|
-
"text": "
|
|
418
|
+
"text": "string"
|
|
510
419
|
},
|
|
511
|
-
"description": "
|
|
420
|
+
"description": "postfix for the class to style the badge icon."
|
|
512
421
|
}
|
|
513
422
|
],
|
|
514
|
-
"description": "
|
|
515
|
-
"inheritedFrom": {
|
|
516
|
-
"name": "Buttonsimple",
|
|
517
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
518
|
-
}
|
|
423
|
+
"description": "Method to generate the badge icon."
|
|
519
424
|
},
|
|
520
425
|
{
|
|
521
426
|
"kind": "method",
|
|
522
|
-
"name": "
|
|
427
|
+
"name": "getBadgeDot",
|
|
523
428
|
"privacy": "private",
|
|
524
|
-
"
|
|
525
|
-
{
|
|
526
|
-
"
|
|
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."
|
|
429
|
+
"return": {
|
|
430
|
+
"type": {
|
|
431
|
+
"text": ""
|
|
538
432
|
}
|
|
539
|
-
|
|
540
|
-
"description": "
|
|
541
|
-
"inheritedFrom": {
|
|
542
|
-
"name": "Buttonsimple",
|
|
543
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
544
|
-
}
|
|
433
|
+
},
|
|
434
|
+
"description": "Method to generate the badge dot template."
|
|
545
435
|
},
|
|
546
436
|
{
|
|
547
437
|
"kind": "method",
|
|
548
|
-
"name": "
|
|
438
|
+
"name": "getBadgeCounterText",
|
|
549
439
|
"privacy": "private",
|
|
550
|
-
"
|
|
551
|
-
"
|
|
552
|
-
|
|
553
|
-
|
|
440
|
+
"return": {
|
|
441
|
+
"type": {
|
|
442
|
+
"text": ""
|
|
443
|
+
}
|
|
444
|
+
},
|
|
445
|
+
"description": "Method to generate the badge text and counter template."
|
|
554
446
|
},
|
|
555
447
|
{
|
|
556
448
|
"kind": "method",
|
|
557
|
-
"name": "
|
|
449
|
+
"name": "setRoleByAriaLabel",
|
|
558
450
|
"privacy": "private",
|
|
559
|
-
"
|
|
560
|
-
{
|
|
561
|
-
"
|
|
562
|
-
"type": {
|
|
563
|
-
"text": "KeyboardEvent"
|
|
564
|
-
},
|
|
565
|
-
"description": "The keyboard event."
|
|
451
|
+
"return": {
|
|
452
|
+
"type": {
|
|
453
|
+
"text": "void"
|
|
566
454
|
}
|
|
567
|
-
|
|
568
|
-
"description": "
|
|
569
|
-
"inheritedFrom": {
|
|
570
|
-
"name": "Buttonsimple",
|
|
571
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
572
|
-
}
|
|
455
|
+
},
|
|
456
|
+
"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."
|
|
573
457
|
},
|
|
574
458
|
{
|
|
575
459
|
"kind": "method",
|
|
576
|
-
"name": "
|
|
460
|
+
"name": "getBadgeContentBasedOnType",
|
|
577
461
|
"privacy": "private",
|
|
578
|
-
"
|
|
579
|
-
{
|
|
580
|
-
"
|
|
581
|
-
"type": {
|
|
582
|
-
"text": "KeyboardEvent"
|
|
583
|
-
},
|
|
584
|
-
"description": "The keyboard event."
|
|
462
|
+
"return": {
|
|
463
|
+
"type": {
|
|
464
|
+
"text": ""
|
|
585
465
|
}
|
|
586
|
-
|
|
587
|
-
"description": "
|
|
588
|
-
"inheritedFrom": {
|
|
589
|
-
"name": "Buttonsimple",
|
|
590
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
591
|
-
}
|
|
466
|
+
},
|
|
467
|
+
"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."
|
|
592
468
|
}
|
|
593
469
|
],
|
|
594
470
|
"attributes": [
|
|
595
471
|
{
|
|
596
|
-
"name": "
|
|
472
|
+
"name": "type",
|
|
597
473
|
"type": {
|
|
598
|
-
"text": "
|
|
474
|
+
"text": "BadgeType | undefined"
|
|
599
475
|
},
|
|
600
|
-
"
|
|
601
|
-
"
|
|
602
|
-
"fieldName": "ariaLabel"
|
|
476
|
+
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
477
|
+
"fieldName": "type"
|
|
603
478
|
},
|
|
604
479
|
{
|
|
605
|
-
"name": "
|
|
480
|
+
"name": "icon-name",
|
|
606
481
|
"type": {
|
|
607
|
-
"text": "
|
|
482
|
+
"text": "IconNames | undefined"
|
|
608
483
|
},
|
|
609
|
-
"description": "
|
|
610
|
-
"fieldName": "
|
|
611
|
-
"inheritedFrom": {
|
|
612
|
-
"name": "AvatarComponentMixin",
|
|
613
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
614
|
-
}
|
|
484
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
485
|
+
"fieldName": "iconName"
|
|
615
486
|
},
|
|
616
487
|
{
|
|
617
|
-
"name": "
|
|
488
|
+
"name": "variant",
|
|
618
489
|
"type": {
|
|
619
|
-
"text": "
|
|
490
|
+
"text": "IconVariant"
|
|
620
491
|
},
|
|
621
|
-
"description": "
|
|
622
|
-
"
|
|
623
|
-
"
|
|
624
|
-
"name": "AvatarComponentMixin",
|
|
625
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
626
|
-
}
|
|
492
|
+
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
493
|
+
"default": "primary",
|
|
494
|
+
"fieldName": "variant"
|
|
627
495
|
},
|
|
628
496
|
{
|
|
629
|
-
"name": "
|
|
497
|
+
"name": "counter",
|
|
630
498
|
"type": {
|
|
631
|
-
"text": "
|
|
499
|
+
"text": "number | undefined"
|
|
632
500
|
},
|
|
633
|
-
"description": "
|
|
634
|
-
"fieldName": "
|
|
635
|
-
"inheritedFrom": {
|
|
636
|
-
"name": "AvatarComponentMixin",
|
|
637
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
638
|
-
}
|
|
501
|
+
"description": "Counter is the number which can be provided in the badge.",
|
|
502
|
+
"fieldName": "counter"
|
|
639
503
|
},
|
|
640
504
|
{
|
|
641
|
-
"name": "
|
|
505
|
+
"name": "max-counter",
|
|
642
506
|
"type": {
|
|
643
|
-
"text": "
|
|
507
|
+
"text": "number"
|
|
644
508
|
},
|
|
645
|
-
"description": "
|
|
646
|
-
"default": "
|
|
647
|
-
"fieldName": "
|
|
648
|
-
"inheritedFrom": {
|
|
649
|
-
"name": "Buttonsimple",
|
|
650
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
651
|
-
}
|
|
509
|
+
"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`.",
|
|
510
|
+
"default": "99",
|
|
511
|
+
"fieldName": "maxCounter"
|
|
652
512
|
},
|
|
653
513
|
{
|
|
654
|
-
"name": "
|
|
514
|
+
"name": "overlay",
|
|
655
515
|
"type": {
|
|
656
|
-
"text": "
|
|
516
|
+
"text": "boolean"
|
|
657
517
|
},
|
|
658
|
-
"
|
|
659
|
-
"
|
|
660
|
-
"
|
|
661
|
-
"name": "AvatarComponentMixin",
|
|
662
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
663
|
-
}
|
|
518
|
+
"default": "false",
|
|
519
|
+
"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.",
|
|
520
|
+
"fieldName": "overlay"
|
|
664
521
|
},
|
|
665
522
|
{
|
|
666
|
-
"name": "
|
|
523
|
+
"name": "aria-label",
|
|
667
524
|
"type": {
|
|
668
|
-
"text": "
|
|
525
|
+
"text": "string | null"
|
|
669
526
|
},
|
|
670
|
-
"
|
|
671
|
-
"
|
|
672
|
-
"
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
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": [
|
|
677
561
|
{
|
|
678
|
-
"
|
|
562
|
+
"kind": "field",
|
|
563
|
+
"name": "ariaLabel",
|
|
679
564
|
"type": {
|
|
680
|
-
"text": "
|
|
565
|
+
"text": "string | null"
|
|
681
566
|
},
|
|
682
|
-
"default": "
|
|
683
|
-
"description": "
|
|
684
|
-
"
|
|
685
|
-
"inheritedFrom": {
|
|
686
|
-
"name": "AvatarComponentMixin",
|
|
687
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
688
|
-
}
|
|
567
|
+
"default": "null",
|
|
568
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
569
|
+
"attribute": "aria-label"
|
|
689
570
|
},
|
|
690
571
|
{
|
|
691
|
-
"
|
|
572
|
+
"kind": "method",
|
|
573
|
+
"name": "setSize",
|
|
574
|
+
"privacy": "private",
|
|
575
|
+
"parameters": [
|
|
576
|
+
{
|
|
577
|
+
"name": "size",
|
|
578
|
+
"type": {
|
|
579
|
+
"text": "AvatarSize"
|
|
580
|
+
}
|
|
581
|
+
}
|
|
582
|
+
]
|
|
583
|
+
},
|
|
584
|
+
{
|
|
585
|
+
"kind": "field",
|
|
586
|
+
"name": "active",
|
|
692
587
|
"type": {
|
|
693
|
-
"text": "
|
|
588
|
+
"text": "boolean"
|
|
694
589
|
},
|
|
695
|
-
"default": "
|
|
696
|
-
"description": "
|
|
697
|
-
"
|
|
590
|
+
"default": "undefined as unknown",
|
|
591
|
+
"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.",
|
|
592
|
+
"attribute": "active",
|
|
698
593
|
"inheritedFrom": {
|
|
699
|
-
"name": "
|
|
700
|
-
"module": "
|
|
594
|
+
"name": "Buttonsimple",
|
|
595
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
701
596
|
}
|
|
702
597
|
},
|
|
703
598
|
{
|
|
599
|
+
"kind": "field",
|
|
704
600
|
"name": "disabled",
|
|
705
601
|
"type": {
|
|
706
602
|
"text": "boolean"
|
|
707
603
|
},
|
|
708
|
-
"default": "
|
|
604
|
+
"default": "undefined as unknown",
|
|
709
605
|
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
710
|
-
"
|
|
606
|
+
"attribute": "disabled",
|
|
607
|
+
"reflects": true,
|
|
711
608
|
"inheritedFrom": {
|
|
712
609
|
"name": "DisabledMixin",
|
|
713
|
-
"module": "
|
|
610
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
714
611
|
}
|
|
715
612
|
},
|
|
716
613
|
{
|
|
717
|
-
"
|
|
614
|
+
"kind": "field",
|
|
615
|
+
"name": "softDisabled",
|
|
718
616
|
"type": {
|
|
719
617
|
"text": "boolean"
|
|
720
618
|
},
|
|
721
|
-
"default": "
|
|
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",
|
|
619
|
+
"default": "undefined as unknown",
|
|
735
620
|
"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.",
|
|
736
|
-
"
|
|
621
|
+
"attribute": "soft-disabled",
|
|
737
622
|
"inheritedFrom": {
|
|
738
623
|
"name": "Buttonsimple",
|
|
739
|
-
"module": "
|
|
624
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
740
625
|
}
|
|
741
626
|
},
|
|
742
627
|
{
|
|
628
|
+
"kind": "field",
|
|
743
629
|
"name": "role",
|
|
744
630
|
"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.",
|
|
745
|
-
"default": "button",
|
|
746
|
-
"
|
|
631
|
+
"default": "'button'",
|
|
632
|
+
"attribute": "role",
|
|
633
|
+
"reflects": true,
|
|
634
|
+
"type": {
|
|
635
|
+
"text": "string"
|
|
636
|
+
},
|
|
747
637
|
"inheritedFrom": {
|
|
748
638
|
"name": "Buttonsimple",
|
|
749
|
-
"module": "
|
|
639
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
750
640
|
}
|
|
751
641
|
},
|
|
752
642
|
{
|
|
643
|
+
"kind": "field",
|
|
753
644
|
"name": "type",
|
|
754
645
|
"type": {
|
|
755
646
|
"text": "ButtonType"
|
|
756
647
|
},
|
|
757
648
|
"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.",
|
|
758
649
|
"default": "button",
|
|
759
|
-
"
|
|
650
|
+
"attribute": "type",
|
|
651
|
+
"reflects": true,
|
|
760
652
|
"inheritedFrom": {
|
|
761
653
|
"name": "Buttonsimple",
|
|
762
|
-
"module": "
|
|
654
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
763
655
|
}
|
|
764
|
-
}
|
|
765
|
-
],
|
|
766
|
-
"mixins": [
|
|
656
|
+
},
|
|
767
657
|
{
|
|
768
|
-
"
|
|
769
|
-
"
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
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
|
-
"members": [
|
|
658
|
+
"kind": "field",
|
|
659
|
+
"name": "src",
|
|
660
|
+
"type": {
|
|
661
|
+
"text": "string | undefined"
|
|
662
|
+
},
|
|
663
|
+
"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.",
|
|
664
|
+
"attribute": "src",
|
|
665
|
+
"inheritedFrom": {
|
|
666
|
+
"name": "AvatarComponentMixin",
|
|
667
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
668
|
+
}
|
|
669
|
+
},
|
|
801
670
|
{
|
|
802
671
|
"kind": "field",
|
|
803
|
-
"name": "
|
|
672
|
+
"name": "initials",
|
|
804
673
|
"type": {
|
|
805
|
-
"text": "
|
|
674
|
+
"text": "string | undefined"
|
|
806
675
|
},
|
|
807
|
-
"description": "
|
|
808
|
-
"attribute": "
|
|
809
|
-
"
|
|
676
|
+
"description": "The initials to be displayed for the avatar.",
|
|
677
|
+
"attribute": "initials",
|
|
678
|
+
"inheritedFrom": {
|
|
679
|
+
"name": "AvatarComponentMixin",
|
|
680
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
681
|
+
}
|
|
810
682
|
},
|
|
811
683
|
{
|
|
812
684
|
"kind": "field",
|
|
813
|
-
"name": "
|
|
685
|
+
"name": "presence",
|
|
814
686
|
"type": {
|
|
815
|
-
"text": "
|
|
687
|
+
"text": "PresenceType | undefined"
|
|
816
688
|
},
|
|
817
|
-
"description": "
|
|
818
|
-
"attribute": "
|
|
689
|
+
"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`",
|
|
690
|
+
"attribute": "presence",
|
|
691
|
+
"inheritedFrom": {
|
|
692
|
+
"name": "AvatarComponentMixin",
|
|
693
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
694
|
+
}
|
|
819
695
|
},
|
|
820
696
|
{
|
|
821
697
|
"kind": "field",
|
|
822
|
-
"name": "
|
|
698
|
+
"name": "size",
|
|
823
699
|
"type": {
|
|
824
|
-
"text": "
|
|
700
|
+
"text": "ButtonSize"
|
|
825
701
|
},
|
|
826
|
-
"description": "
|
|
827
|
-
"default": "
|
|
828
|
-
"attribute": "
|
|
829
|
-
"reflects": true
|
|
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
|
+
"attribute": "size",
|
|
705
|
+
"reflects": true,
|
|
706
|
+
"inheritedFrom": {
|
|
707
|
+
"name": "Buttonsimple",
|
|
708
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
709
|
+
}
|
|
830
710
|
},
|
|
831
711
|
{
|
|
832
712
|
"kind": "field",
|
|
833
|
-
"name": "
|
|
713
|
+
"name": "iconName",
|
|
834
714
|
"type": {
|
|
835
|
-
"text": "
|
|
715
|
+
"text": "IconNames | undefined"
|
|
836
716
|
},
|
|
837
|
-
"description": "
|
|
838
|
-
"attribute": "
|
|
717
|
+
"description": "Name of the icon to be displayed inside the Avatar.\nMust be a valid icon name.",
|
|
718
|
+
"attribute": "icon-name",
|
|
719
|
+
"inheritedFrom": {
|
|
720
|
+
"name": "AvatarComponentMixin",
|
|
721
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
722
|
+
}
|
|
839
723
|
},
|
|
840
724
|
{
|
|
841
725
|
"kind": "field",
|
|
842
|
-
"name": "
|
|
726
|
+
"name": "counter",
|
|
843
727
|
"type": {
|
|
844
|
-
"text": "number"
|
|
728
|
+
"text": "number | undefined"
|
|
845
729
|
},
|
|
846
|
-
"description": "The
|
|
847
|
-
"
|
|
848
|
-
"
|
|
849
|
-
|
|
730
|
+
"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`.",
|
|
731
|
+
"attribute": "counter",
|
|
732
|
+
"inheritedFrom": {
|
|
733
|
+
"name": "AvatarComponentMixin",
|
|
734
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
735
|
+
}
|
|
850
736
|
},
|
|
851
737
|
{
|
|
852
738
|
"kind": "field",
|
|
853
|
-
"name": "
|
|
739
|
+
"name": "isTyping",
|
|
854
740
|
"type": {
|
|
855
741
|
"text": "boolean"
|
|
856
742
|
},
|
|
857
743
|
"default": "false",
|
|
858
|
-
"description": "
|
|
859
|
-
"attribute": "
|
|
744
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
745
|
+
"attribute": "is-typing",
|
|
746
|
+
"inheritedFrom": {
|
|
747
|
+
"name": "AvatarComponentMixin",
|
|
748
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
749
|
+
}
|
|
860
750
|
},
|
|
861
751
|
{
|
|
862
752
|
"kind": "field",
|
|
863
|
-
"name": "
|
|
753
|
+
"name": "tabIndex",
|
|
864
754
|
"type": {
|
|
865
|
-
"text": "
|
|
755
|
+
"text": "number"
|
|
866
756
|
},
|
|
867
|
-
"default": "
|
|
868
|
-
"description": "
|
|
869
|
-
"attribute": "
|
|
757
|
+
"default": "0",
|
|
758
|
+
"description": "This property specifies the tab order of the element.",
|
|
759
|
+
"attribute": "tabIndex",
|
|
760
|
+
"reflects": true,
|
|
761
|
+
"inheritedFrom": {
|
|
762
|
+
"name": "TabIndexMixin",
|
|
763
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
764
|
+
}
|
|
870
765
|
},
|
|
871
766
|
{
|
|
872
767
|
"kind": "method",
|
|
873
|
-
"name": "
|
|
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",
|
|
874
778
|
"privacy": "private",
|
|
875
|
-
"return": {
|
|
876
|
-
"type": {
|
|
877
|
-
"text": ""
|
|
878
|
-
}
|
|
879
|
-
},
|
|
880
779
|
"parameters": [
|
|
881
780
|
{
|
|
882
|
-
"name": "
|
|
781
|
+
"name": "element",
|
|
883
782
|
"type": {
|
|
884
|
-
"text": "
|
|
783
|
+
"text": "HTMLElement"
|
|
885
784
|
},
|
|
886
|
-
"description": "
|
|
785
|
+
"description": "The target element."
|
|
887
786
|
},
|
|
888
787
|
{
|
|
889
|
-
"name": "
|
|
890
|
-
"optional": true,
|
|
788
|
+
"name": "active",
|
|
891
789
|
"type": {
|
|
892
|
-
"text": "
|
|
790
|
+
"text": "boolean"
|
|
893
791
|
},
|
|
894
|
-
"description": "
|
|
792
|
+
"description": "The active state."
|
|
895
793
|
}
|
|
896
794
|
],
|
|
897
|
-
"description": "
|
|
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
|
+
}
|
|
898
800
|
},
|
|
899
801
|
{
|
|
900
802
|
"kind": "method",
|
|
901
|
-
"name": "
|
|
803
|
+
"name": "setSoftDisabled",
|
|
902
804
|
"privacy": "private",
|
|
903
|
-
"
|
|
904
|
-
|
|
905
|
-
"
|
|
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."
|
|
906
819
|
}
|
|
907
|
-
|
|
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
|
+
}
|
|
826
|
+
},
|
|
827
|
+
{
|
|
828
|
+
"kind": "method",
|
|
829
|
+
"name": "setDisabled",
|
|
830
|
+
"privacy": "private",
|
|
908
831
|
"parameters": [
|
|
909
832
|
{
|
|
910
|
-
"name": "
|
|
833
|
+
"name": "element",
|
|
911
834
|
"type": {
|
|
912
|
-
"text": "
|
|
835
|
+
"text": "HTMLElement"
|
|
913
836
|
},
|
|
914
|
-
"description": "
|
|
837
|
+
"description": "The button element."
|
|
915
838
|
},
|
|
916
839
|
{
|
|
917
|
-
"name": "
|
|
840
|
+
"name": "disabled",
|
|
918
841
|
"type": {
|
|
919
|
-
"text": "
|
|
842
|
+
"text": "boolean"
|
|
920
843
|
},
|
|
921
|
-
"description": "
|
|
844
|
+
"description": "The disabled state."
|
|
922
845
|
}
|
|
923
846
|
],
|
|
924
|
-
"description": "
|
|
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",
|
|
866
|
+
"parameters": [
|
|
867
|
+
{
|
|
868
|
+
"name": "event",
|
|
869
|
+
"type": {
|
|
870
|
+
"text": "KeyboardEvent"
|
|
871
|
+
},
|
|
872
|
+
"description": "The keyboard event."
|
|
873
|
+
}
|
|
874
|
+
],
|
|
875
|
+
"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.",
|
|
876
|
+
"inheritedFrom": {
|
|
877
|
+
"name": "Buttonsimple",
|
|
878
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
879
|
+
}
|
|
925
880
|
},
|
|
926
881
|
{
|
|
927
882
|
"kind": "method",
|
|
928
|
-
"name": "
|
|
883
|
+
"name": "handleKeyUp",
|
|
929
884
|
"privacy": "private",
|
|
930
|
-
"
|
|
931
|
-
|
|
932
|
-
"
|
|
885
|
+
"parameters": [
|
|
886
|
+
{
|
|
887
|
+
"name": "event",
|
|
888
|
+
"type": {
|
|
889
|
+
"text": "KeyboardEvent"
|
|
890
|
+
},
|
|
891
|
+
"description": "The keyboard event."
|
|
933
892
|
}
|
|
893
|
+
],
|
|
894
|
+
"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.",
|
|
895
|
+
"inheritedFrom": {
|
|
896
|
+
"name": "Buttonsimple",
|
|
897
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
898
|
+
}
|
|
899
|
+
}
|
|
900
|
+
],
|
|
901
|
+
"attributes": [
|
|
902
|
+
{
|
|
903
|
+
"name": "aria-label",
|
|
904
|
+
"type": {
|
|
905
|
+
"text": "string | null"
|
|
934
906
|
},
|
|
935
|
-
"
|
|
907
|
+
"default": "null",
|
|
908
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
909
|
+
"fieldName": "ariaLabel"
|
|
936
910
|
},
|
|
937
911
|
{
|
|
938
|
-
"
|
|
939
|
-
"
|
|
940
|
-
|
|
941
|
-
"return": {
|
|
942
|
-
"type": {
|
|
943
|
-
"text": ""
|
|
944
|
-
}
|
|
912
|
+
"name": "src",
|
|
913
|
+
"type": {
|
|
914
|
+
"text": "string | undefined"
|
|
945
915
|
},
|
|
946
|
-
"description": "
|
|
916
|
+
"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.",
|
|
917
|
+
"fieldName": "src",
|
|
918
|
+
"inheritedFrom": {
|
|
919
|
+
"name": "AvatarComponentMixin",
|
|
920
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
921
|
+
}
|
|
947
922
|
},
|
|
948
923
|
{
|
|
949
|
-
"
|
|
950
|
-
"
|
|
951
|
-
|
|
952
|
-
"return": {
|
|
953
|
-
"type": {
|
|
954
|
-
"text": "void"
|
|
955
|
-
}
|
|
924
|
+
"name": "initials",
|
|
925
|
+
"type": {
|
|
926
|
+
"text": "string | undefined"
|
|
956
927
|
},
|
|
957
|
-
"description": "
|
|
928
|
+
"description": "The initials to be displayed for the avatar.",
|
|
929
|
+
"fieldName": "initials",
|
|
930
|
+
"inheritedFrom": {
|
|
931
|
+
"name": "AvatarComponentMixin",
|
|
932
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
933
|
+
}
|
|
958
934
|
},
|
|
959
935
|
{
|
|
960
|
-
"
|
|
961
|
-
"
|
|
962
|
-
|
|
963
|
-
"return": {
|
|
964
|
-
"type": {
|
|
965
|
-
"text": ""
|
|
966
|
-
}
|
|
936
|
+
"name": "presence",
|
|
937
|
+
"type": {
|
|
938
|
+
"text": "PresenceType | undefined"
|
|
967
939
|
},
|
|
968
|
-
"description": "
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
940
|
+
"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`",
|
|
941
|
+
"fieldName": "presence",
|
|
942
|
+
"inheritedFrom": {
|
|
943
|
+
"name": "AvatarComponentMixin",
|
|
944
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
945
|
+
}
|
|
946
|
+
},
|
|
972
947
|
{
|
|
973
|
-
"name": "
|
|
948
|
+
"name": "size",
|
|
974
949
|
"type": {
|
|
975
|
-
"text": "
|
|
950
|
+
"text": "ButtonSize"
|
|
976
951
|
},
|
|
977
|
-
"description": "
|
|
978
|
-
"
|
|
952
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
953
|
+
"default": "32",
|
|
954
|
+
"fieldName": "size",
|
|
955
|
+
"inheritedFrom": {
|
|
956
|
+
"name": "Buttonsimple",
|
|
957
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
958
|
+
}
|
|
979
959
|
},
|
|
980
960
|
{
|
|
981
961
|
"name": "icon-name",
|
|
982
962
|
"type": {
|
|
983
963
|
"text": "IconNames | undefined"
|
|
984
964
|
},
|
|
985
|
-
"description": "Name of the icon
|
|
986
|
-
"fieldName": "iconName"
|
|
965
|
+
"description": "Name of the icon to be displayed inside the Avatar.\nMust be a valid icon name.",
|
|
966
|
+
"fieldName": "iconName",
|
|
967
|
+
"inheritedFrom": {
|
|
968
|
+
"name": "AvatarComponentMixin",
|
|
969
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
970
|
+
}
|
|
987
971
|
},
|
|
988
972
|
{
|
|
989
|
-
"name": "
|
|
973
|
+
"name": "counter",
|
|
990
974
|
"type": {
|
|
991
|
-
"text": "
|
|
975
|
+
"text": "number | undefined"
|
|
992
976
|
},
|
|
993
|
-
"description": "
|
|
994
|
-
"
|
|
995
|
-
"
|
|
977
|
+
"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`.",
|
|
978
|
+
"fieldName": "counter",
|
|
979
|
+
"inheritedFrom": {
|
|
980
|
+
"name": "AvatarComponentMixin",
|
|
981
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
982
|
+
}
|
|
996
983
|
},
|
|
997
984
|
{
|
|
998
|
-
"name": "
|
|
985
|
+
"name": "is-typing",
|
|
999
986
|
"type": {
|
|
1000
|
-
"text": "
|
|
987
|
+
"text": "boolean"
|
|
1001
988
|
},
|
|
1002
|
-
"
|
|
1003
|
-
"
|
|
989
|
+
"default": "false",
|
|
990
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
991
|
+
"fieldName": "isTyping",
|
|
992
|
+
"inheritedFrom": {
|
|
993
|
+
"name": "AvatarComponentMixin",
|
|
994
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
995
|
+
}
|
|
1004
996
|
},
|
|
1005
997
|
{
|
|
1006
|
-
"name": "
|
|
998
|
+
"name": "tabIndex",
|
|
1007
999
|
"type": {
|
|
1008
1000
|
"text": "number"
|
|
1009
1001
|
},
|
|
1010
|
-
"
|
|
1011
|
-
"
|
|
1012
|
-
"fieldName": "
|
|
1002
|
+
"default": "0",
|
|
1003
|
+
"description": "This property specifies the tab order of the element.",
|
|
1004
|
+
"fieldName": "tabIndex",
|
|
1005
|
+
"inheritedFrom": {
|
|
1006
|
+
"name": "TabIndexMixin",
|
|
1007
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
1008
|
+
}
|
|
1013
1009
|
},
|
|
1014
1010
|
{
|
|
1015
|
-
"name": "
|
|
1011
|
+
"name": "disabled",
|
|
1016
1012
|
"type": {
|
|
1017
1013
|
"text": "boolean"
|
|
1018
1014
|
},
|
|
1019
1015
|
"default": "false",
|
|
1020
|
-
"description": "
|
|
1021
|
-
"fieldName": "
|
|
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
1022
|
},
|
|
1023
1023
|
{
|
|
1024
|
-
"name": "
|
|
1024
|
+
"name": "active",
|
|
1025
1025
|
"type": {
|
|
1026
|
-
"text": "
|
|
1026
|
+
"text": "boolean"
|
|
1027
1027
|
},
|
|
1028
|
-
"default": "
|
|
1029
|
-
"description": "
|
|
1030
|
-
"fieldName": "
|
|
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
|
+
}
|
|
1035
|
+
},
|
|
1036
|
+
{
|
|
1037
|
+
"name": "soft-disabled",
|
|
1038
|
+
"type": {
|
|
1039
|
+
"text": "boolean"
|
|
1040
|
+
},
|
|
1041
|
+
"default": "false",
|
|
1042
|
+
"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.",
|
|
1043
|
+
"fieldName": "softDisabled",
|
|
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
|
+
}
|
|
1058
|
+
},
|
|
1059
|
+
{
|
|
1060
|
+
"name": "type",
|
|
1061
|
+
"type": {
|
|
1062
|
+
"text": "ButtonType"
|
|
1063
|
+
},
|
|
1064
|
+
"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.",
|
|
1065
|
+
"default": "button",
|
|
1066
|
+
"fieldName": "type",
|
|
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"
|
|
1031
1077
|
}
|
|
1032
1078
|
],
|
|
1033
1079
|
"superclass": {
|
|
1034
|
-
"name": "
|
|
1035
|
-
"module": "/src/
|
|
1080
|
+
"name": "Buttonsimple",
|
|
1081
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
1036
1082
|
},
|
|
1037
|
-
"tagName": "mdc-
|
|
1038
|
-
"jsDoc": "/**\n * The `mdc-
|
|
1083
|
+
"tagName": "mdc-avatarbutton",
|
|
1084
|
+
"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 */",
|
|
1039
1085
|
"customElement": true
|
|
1040
1086
|
}
|
|
1041
1087
|
],
|
|
@@ -1044,8 +1090,8 @@
|
|
|
1044
1090
|
"kind": "js",
|
|
1045
1091
|
"name": "default",
|
|
1046
1092
|
"declaration": {
|
|
1047
|
-
"name": "
|
|
1048
|
-
"module": "components/
|
|
1093
|
+
"name": "AvatarButton",
|
|
1094
|
+
"module": "components/avatarbutton/avatarbutton.component.js"
|
|
1049
1095
|
}
|
|
1050
1096
|
}
|
|
1051
1097
|
]
|
|
@@ -2365,6 +2411,14 @@
|
|
|
2365
2411
|
{
|
|
2366
2412
|
"description": "Allows customization of the default fill color.",
|
|
2367
2413
|
"name": "--mdc-icon-fill-color"
|
|
2414
|
+
},
|
|
2415
|
+
{
|
|
2416
|
+
"description": "Allows customization of the icon size.",
|
|
2417
|
+
"name": "--mdc-icon-size"
|
|
2418
|
+
},
|
|
2419
|
+
{
|
|
2420
|
+
"description": "Allows customization of the icon border radius.",
|
|
2421
|
+
"name": "--mdc-icon-border-radius"
|
|
2368
2422
|
}
|
|
2369
2423
|
],
|
|
2370
2424
|
"members": [
|
|
@@ -2533,7 +2587,7 @@
|
|
|
2533
2587
|
"module": "/src/models"
|
|
2534
2588
|
},
|
|
2535
2589
|
"tagName": "mdc-icon",
|
|
2536
|
-
"jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n * by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n * the role will be unset.\n *\n * ### Informative Standalone Icons\n * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\n * have a Tooltip that describes what it means.\n * - For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\n * and the `role` will be set to \"img\" automatically.\n * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n */",
|
|
2590
|
+
"jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n * by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n * the role will be unset.\n *\n * ### Informative Standalone Icons\n * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\n * have a Tooltip that describes what it means.\n * - For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\n * and the `role` will be set to \"img\" automatically.\n * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n * @cssproperty --mdc-icon-size - Allows customization of the icon size.\n * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.\n */",
|
|
2537
2591
|
"customElement": true
|
|
2538
2592
|
}
|
|
2539
2593
|
],
|
|
@@ -3105,6 +3159,68 @@
|
|
|
3105
3159
|
"kind": "class",
|
|
3106
3160
|
"description": "The `mdc-presence` component is a versatile UI element used to\ndisplay the presence status of a user or entity within an avatar component.\n\nThis component is ideal for use within avatar UIs where the presence status\nneeds to be visually represented.",
|
|
3107
3161
|
"name": "Presence",
|
|
3162
|
+
"cssProperties": [
|
|
3163
|
+
{
|
|
3164
|
+
"description": "The background color of the presence type active.",
|
|
3165
|
+
"name": "--mdc-presence-active-background-color"
|
|
3166
|
+
},
|
|
3167
|
+
{
|
|
3168
|
+
"description": "The background color of the presence type away.",
|
|
3169
|
+
"name": "--mdc-presence-away-background-color"
|
|
3170
|
+
},
|
|
3171
|
+
{
|
|
3172
|
+
"description": "The background color of the presence type away-calling.",
|
|
3173
|
+
"name": "--mdc-presence-away-calling-background-color"
|
|
3174
|
+
},
|
|
3175
|
+
{
|
|
3176
|
+
"description": "The background color of the presence type busy.",
|
|
3177
|
+
"name": "--mdc-presence-busy-background-color"
|
|
3178
|
+
},
|
|
3179
|
+
{
|
|
3180
|
+
"description": "The background color of the presence type dnd.",
|
|
3181
|
+
"name": "--mdc-presence-dnd-background-color"
|
|
3182
|
+
},
|
|
3183
|
+
{
|
|
3184
|
+
"description": "The background color of the presence type meeting.",
|
|
3185
|
+
"name": "--mdc-presence-meeting-background-color"
|
|
3186
|
+
},
|
|
3187
|
+
{
|
|
3188
|
+
"description": "The background color of the presence type on-call.",
|
|
3189
|
+
"name": "--mdc-presence-on-call-background-color"
|
|
3190
|
+
},
|
|
3191
|
+
{
|
|
3192
|
+
"description": "The background color of the presence type on-device.",
|
|
3193
|
+
"name": "--mdc-presence-on-device-background-color"
|
|
3194
|
+
},
|
|
3195
|
+
{
|
|
3196
|
+
"description": "The background color of the presence type on-mobile.",
|
|
3197
|
+
"name": "--mdc-presence-on-mobile-background-color"
|
|
3198
|
+
},
|
|
3199
|
+
{
|
|
3200
|
+
"description": "The background color of the presence type pause.",
|
|
3201
|
+
"name": "--mdc-presence-pause-background-color"
|
|
3202
|
+
},
|
|
3203
|
+
{
|
|
3204
|
+
"description": "The background color of the presence type pto.",
|
|
3205
|
+
"name": "--mdc-presence-pto-background-color"
|
|
3206
|
+
},
|
|
3207
|
+
{
|
|
3208
|
+
"description": "The background color of the presence type presenting.",
|
|
3209
|
+
"name": "--mdc-presence-presenting-background-color"
|
|
3210
|
+
},
|
|
3211
|
+
{
|
|
3212
|
+
"description": "The background color of the presence type quiet.",
|
|
3213
|
+
"name": "--mdc-presence-quiet-background-color"
|
|
3214
|
+
},
|
|
3215
|
+
{
|
|
3216
|
+
"description": "The background color of the presence type scheduled.",
|
|
3217
|
+
"name": "--mdc-presence-scheduled-background-color"
|
|
3218
|
+
},
|
|
3219
|
+
{
|
|
3220
|
+
"description": "The background color of the presence type overlay.",
|
|
3221
|
+
"name": "--mdc-presence-overlay-background-color"
|
|
3222
|
+
}
|
|
3223
|
+
],
|
|
3108
3224
|
"members": [
|
|
3109
3225
|
{
|
|
3110
3226
|
"kind": "field",
|
|
@@ -3190,7 +3306,7 @@
|
|
|
3190
3306
|
"module": "/src/models"
|
|
3191
3307
|
},
|
|
3192
3308
|
"tagName": "mdc-presence",
|
|
3193
|
-
"jsDoc": "/**\n * The `mdc-presence` component is a versatile UI element used to\n * display the presence status of a user or entity within an avatar component.\n *\n * This component is ideal for use within avatar UIs where the presence status\n * needs to be visually represented.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-presence\n */",
|
|
3309
|
+
"jsDoc": "/**\n * The `mdc-presence` component is a versatile UI element used to\n * display the presence status of a user or entity within an avatar component.\n *\n * This component is ideal for use within avatar UIs where the presence status\n * needs to be visually represented.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-presence\n *\n * @cssproperty --mdc-presence-active-background-color - The background color of the presence type active.\n * @cssproperty --mdc-presence-away-background-color - The background color of the presence type away.\n * @cssproperty --mdc-presence-away-calling-background-color - The background color of the presence type away-calling.\n * @cssproperty --mdc-presence-busy-background-color - The background color of the presence type busy.\n * @cssproperty --mdc-presence-dnd-background-color - The background color of the presence type dnd.\n * @cssproperty --mdc-presence-meeting-background-color - The background color of the presence type meeting.\n * @cssproperty --mdc-presence-on-call-background-color - The background color of the presence type on-call.\n * @cssproperty --mdc-presence-on-device-background-color - The background color of the presence type on-device.\n * @cssproperty --mdc-presence-on-mobile-background-color - The background color of the presence type on-mobile.\n * @cssproperty --mdc-presence-pause-background-color - The background color of the presence type pause.\n * @cssproperty --mdc-presence-pto-background-color - The background color of the presence type pto.\n * @cssproperty --mdc-presence-presenting-background-color - The background color of the presence type presenting.\n * @cssproperty --mdc-presence-quiet-background-color - The background color of the presence type quiet.\n * @cssproperty --mdc-presence-scheduled-background-color - The background color of the presence type scheduled.\n * @cssproperty --mdc-presence-overlay-background-color - The background color of the presence type overlay.\n */",
|
|
3194
3310
|
"customElement": true
|
|
3195
3311
|
}
|
|
3196
3312
|
],
|