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