@momentum-design/components 0.41.7 → 0.43.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/index.js +110 -102
- package/dist/browser/index.js.map +4 -4
- package/dist/components/brandvisual/brandvisual.component.d.ts +44 -0
- package/dist/components/brandvisual/brandvisual.component.js +106 -0
- package/dist/components/brandvisual/brandvisual.constants.d.ts +5 -0
- package/dist/components/brandvisual/brandvisual.constants.js +6 -0
- package/dist/components/brandvisual/brandvisual.styles.d.ts +2 -0
- package/dist/components/brandvisual/brandvisual.styles.js +11 -0
- package/dist/components/brandvisual/brandvisual.types.d.ts +2 -0
- package/dist/components/brandvisual/brandvisual.types.js +1 -0
- package/dist/components/brandvisual/index.d.ts +7 -0
- package/dist/components/brandvisual/index.js +4 -0
- package/dist/custom-elements.json +357 -251
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/react/brandvisual/index.d.ts +23 -0
- package/dist/react/brandvisual/index.js +32 -0
- package/dist/react/index.d.ts +2 -1
- package/dist/react/index.js +2 -1
- package/package.json +1 -1
|
@@ -465,250 +465,6 @@
|
|
|
465
465
|
}
|
|
466
466
|
]
|
|
467
467
|
},
|
|
468
|
-
{
|
|
469
|
-
"kind": "javascript-module",
|
|
470
|
-
"path": "components/avatar/avatar.component.js",
|
|
471
|
-
"declarations": [
|
|
472
|
-
{
|
|
473
|
-
"kind": "class",
|
|
474
|
-
"description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
|
|
475
|
-
"name": "Avatar",
|
|
476
|
-
"cssProperties": [
|
|
477
|
-
{
|
|
478
|
-
"description": "Allows customization of the default background color.",
|
|
479
|
-
"name": "--mdc-avatar-default-background-color"
|
|
480
|
-
},
|
|
481
|
-
{
|
|
482
|
-
"description": "Allows customization of the default foreground color.",
|
|
483
|
-
"name": "--mdc-avatar-default-foreground-color"
|
|
484
|
-
},
|
|
485
|
-
{
|
|
486
|
-
"description": "Allows customization of the loading indicator background color.",
|
|
487
|
-
"name": "--mdc-avatar-loading-indicator-background-color"
|
|
488
|
-
},
|
|
489
|
-
{
|
|
490
|
-
"description": "Allows customization of the loading indicator foreground color.",
|
|
491
|
-
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
|
492
|
-
},
|
|
493
|
-
{
|
|
494
|
-
"description": "Allows customization of the loading overlay background color.",
|
|
495
|
-
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
496
|
-
}
|
|
497
|
-
],
|
|
498
|
-
"members": [
|
|
499
|
-
{
|
|
500
|
-
"kind": "field",
|
|
501
|
-
"name": "src",
|
|
502
|
-
"type": {
|
|
503
|
-
"text": "string | undefined"
|
|
504
|
-
},
|
|
505
|
-
"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.",
|
|
506
|
-
"attribute": "src",
|
|
507
|
-
"inheritedFrom": {
|
|
508
|
-
"name": "AvatarComponentMixin",
|
|
509
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
510
|
-
}
|
|
511
|
-
},
|
|
512
|
-
{
|
|
513
|
-
"kind": "field",
|
|
514
|
-
"name": "initials",
|
|
515
|
-
"type": {
|
|
516
|
-
"text": "string | undefined"
|
|
517
|
-
},
|
|
518
|
-
"description": "The initials to be displayed for the avatar.",
|
|
519
|
-
"attribute": "initials",
|
|
520
|
-
"inheritedFrom": {
|
|
521
|
-
"name": "AvatarComponentMixin",
|
|
522
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
523
|
-
}
|
|
524
|
-
},
|
|
525
|
-
{
|
|
526
|
-
"kind": "field",
|
|
527
|
-
"name": "presence",
|
|
528
|
-
"type": {
|
|
529
|
-
"text": "PresenceType | undefined"
|
|
530
|
-
},
|
|
531
|
-
"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`",
|
|
532
|
-
"attribute": "presence",
|
|
533
|
-
"inheritedFrom": {
|
|
534
|
-
"name": "AvatarComponentMixin",
|
|
535
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
536
|
-
}
|
|
537
|
-
},
|
|
538
|
-
{
|
|
539
|
-
"kind": "field",
|
|
540
|
-
"name": "size",
|
|
541
|
-
"type": {
|
|
542
|
-
"text": "AvatarSize"
|
|
543
|
-
},
|
|
544
|
-
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
545
|
-
"default": "32",
|
|
546
|
-
"attribute": "size",
|
|
547
|
-
"reflects": true,
|
|
548
|
-
"inheritedFrom": {
|
|
549
|
-
"name": "AvatarComponentMixin",
|
|
550
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
551
|
-
}
|
|
552
|
-
},
|
|
553
|
-
{
|
|
554
|
-
"kind": "field",
|
|
555
|
-
"name": "counter",
|
|
556
|
-
"type": {
|
|
557
|
-
"text": "number | undefined"
|
|
558
|
-
},
|
|
559
|
-
"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`.",
|
|
560
|
-
"attribute": "counter",
|
|
561
|
-
"inheritedFrom": {
|
|
562
|
-
"name": "AvatarComponentMixin",
|
|
563
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
564
|
-
}
|
|
565
|
-
},
|
|
566
|
-
{
|
|
567
|
-
"kind": "field",
|
|
568
|
-
"name": "isTyping",
|
|
569
|
-
"type": {
|
|
570
|
-
"text": "boolean"
|
|
571
|
-
},
|
|
572
|
-
"default": "false",
|
|
573
|
-
"description": "Represents the typing indicator when the user is typing.",
|
|
574
|
-
"attribute": "is-typing",
|
|
575
|
-
"inheritedFrom": {
|
|
576
|
-
"name": "AvatarComponentMixin",
|
|
577
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
578
|
-
}
|
|
579
|
-
},
|
|
580
|
-
{
|
|
581
|
-
"kind": "field",
|
|
582
|
-
"name": "iconName",
|
|
583
|
-
"type": {
|
|
584
|
-
"text": "IconNames | undefined"
|
|
585
|
-
},
|
|
586
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
587
|
-
"attribute": "icon-name",
|
|
588
|
-
"inheritedFrom": {
|
|
589
|
-
"name": "IconNameMixin",
|
|
590
|
-
"module": "utils/mixins/IconNameMixin.js"
|
|
591
|
-
}
|
|
592
|
-
}
|
|
593
|
-
],
|
|
594
|
-
"mixins": [
|
|
595
|
-
{
|
|
596
|
-
"name": "AvatarComponentMixin",
|
|
597
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
598
|
-
},
|
|
599
|
-
{
|
|
600
|
-
"name": "IconNameMixin",
|
|
601
|
-
"module": "/src/utils/mixins/IconNameMixin"
|
|
602
|
-
}
|
|
603
|
-
],
|
|
604
|
-
"superclass": {
|
|
605
|
-
"name": "Component",
|
|
606
|
-
"module": "/src/models"
|
|
607
|
-
},
|
|
608
|
-
"tagName": "mdc-avatar",
|
|
609
|
-
"jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n * Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n * Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n * Allows customization of the loading overlay background color.\n */",
|
|
610
|
-
"customElement": true,
|
|
611
|
-
"attributes": [
|
|
612
|
-
{
|
|
613
|
-
"name": "src",
|
|
614
|
-
"type": {
|
|
615
|
-
"text": "string | undefined"
|
|
616
|
-
},
|
|
617
|
-
"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.",
|
|
618
|
-
"fieldName": "src",
|
|
619
|
-
"inheritedFrom": {
|
|
620
|
-
"name": "AvatarComponentMixin",
|
|
621
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
622
|
-
}
|
|
623
|
-
},
|
|
624
|
-
{
|
|
625
|
-
"name": "initials",
|
|
626
|
-
"type": {
|
|
627
|
-
"text": "string | undefined"
|
|
628
|
-
},
|
|
629
|
-
"description": "The initials to be displayed for the avatar.",
|
|
630
|
-
"fieldName": "initials",
|
|
631
|
-
"inheritedFrom": {
|
|
632
|
-
"name": "AvatarComponentMixin",
|
|
633
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
634
|
-
}
|
|
635
|
-
},
|
|
636
|
-
{
|
|
637
|
-
"name": "presence",
|
|
638
|
-
"type": {
|
|
639
|
-
"text": "PresenceType | undefined"
|
|
640
|
-
},
|
|
641
|
-
"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`",
|
|
642
|
-
"fieldName": "presence",
|
|
643
|
-
"inheritedFrom": {
|
|
644
|
-
"name": "AvatarComponentMixin",
|
|
645
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
646
|
-
}
|
|
647
|
-
},
|
|
648
|
-
{
|
|
649
|
-
"name": "size",
|
|
650
|
-
"type": {
|
|
651
|
-
"text": "AvatarSize"
|
|
652
|
-
},
|
|
653
|
-
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
654
|
-
"default": "32",
|
|
655
|
-
"fieldName": "size",
|
|
656
|
-
"inheritedFrom": {
|
|
657
|
-
"name": "AvatarComponentMixin",
|
|
658
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
659
|
-
}
|
|
660
|
-
},
|
|
661
|
-
{
|
|
662
|
-
"name": "counter",
|
|
663
|
-
"type": {
|
|
664
|
-
"text": "number | undefined"
|
|
665
|
-
},
|
|
666
|
-
"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`.",
|
|
667
|
-
"fieldName": "counter",
|
|
668
|
-
"inheritedFrom": {
|
|
669
|
-
"name": "AvatarComponentMixin",
|
|
670
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
671
|
-
}
|
|
672
|
-
},
|
|
673
|
-
{
|
|
674
|
-
"name": "is-typing",
|
|
675
|
-
"type": {
|
|
676
|
-
"text": "boolean"
|
|
677
|
-
},
|
|
678
|
-
"default": "false",
|
|
679
|
-
"description": "Represents the typing indicator when the user is typing.",
|
|
680
|
-
"fieldName": "isTyping",
|
|
681
|
-
"inheritedFrom": {
|
|
682
|
-
"name": "AvatarComponentMixin",
|
|
683
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
684
|
-
}
|
|
685
|
-
},
|
|
686
|
-
{
|
|
687
|
-
"name": "icon-name",
|
|
688
|
-
"type": {
|
|
689
|
-
"text": "IconNames | undefined"
|
|
690
|
-
},
|
|
691
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
692
|
-
"fieldName": "iconName",
|
|
693
|
-
"inheritedFrom": {
|
|
694
|
-
"name": "IconNameMixin",
|
|
695
|
-
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
696
|
-
}
|
|
697
|
-
}
|
|
698
|
-
]
|
|
699
|
-
}
|
|
700
|
-
],
|
|
701
|
-
"exports": [
|
|
702
|
-
{
|
|
703
|
-
"kind": "js",
|
|
704
|
-
"name": "default",
|
|
705
|
-
"declaration": {
|
|
706
|
-
"name": "Avatar",
|
|
707
|
-
"module": "components/avatar/avatar.component.js"
|
|
708
|
-
}
|
|
709
|
-
}
|
|
710
|
-
]
|
|
711
|
-
},
|
|
712
468
|
{
|
|
713
469
|
"kind": "javascript-module",
|
|
714
470
|
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
@@ -1312,20 +1068,264 @@
|
|
|
1312
1068
|
},
|
|
1313
1069
|
{
|
|
1314
1070
|
"kind": "javascript-module",
|
|
1315
|
-
"path": "components/
|
|
1071
|
+
"path": "components/avatar/avatar.component.js",
|
|
1316
1072
|
"declarations": [
|
|
1317
1073
|
{
|
|
1318
1074
|
"kind": "class",
|
|
1319
|
-
"description": "The `mdc-
|
|
1320
|
-
"name": "
|
|
1075
|
+
"description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
|
|
1076
|
+
"name": "Avatar",
|
|
1321
1077
|
"cssProperties": [
|
|
1322
1078
|
{
|
|
1323
|
-
"description": "
|
|
1324
|
-
"name": "--mdc-
|
|
1079
|
+
"description": "Allows customization of the default background color.",
|
|
1080
|
+
"name": "--mdc-avatar-default-background-color"
|
|
1325
1081
|
},
|
|
1326
1082
|
{
|
|
1327
|
-
"description": "
|
|
1328
|
-
"name": "--mdc-
|
|
1083
|
+
"description": "Allows customization of the default foreground color.",
|
|
1084
|
+
"name": "--mdc-avatar-default-foreground-color"
|
|
1085
|
+
},
|
|
1086
|
+
{
|
|
1087
|
+
"description": "Allows customization of the loading indicator background color.",
|
|
1088
|
+
"name": "--mdc-avatar-loading-indicator-background-color"
|
|
1089
|
+
},
|
|
1090
|
+
{
|
|
1091
|
+
"description": "Allows customization of the loading indicator foreground color.",
|
|
1092
|
+
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
|
1093
|
+
},
|
|
1094
|
+
{
|
|
1095
|
+
"description": "Allows customization of the loading overlay background color.",
|
|
1096
|
+
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
1097
|
+
}
|
|
1098
|
+
],
|
|
1099
|
+
"members": [
|
|
1100
|
+
{
|
|
1101
|
+
"kind": "field",
|
|
1102
|
+
"name": "src",
|
|
1103
|
+
"type": {
|
|
1104
|
+
"text": "string | undefined"
|
|
1105
|
+
},
|
|
1106
|
+
"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.",
|
|
1107
|
+
"attribute": "src",
|
|
1108
|
+
"inheritedFrom": {
|
|
1109
|
+
"name": "AvatarComponentMixin",
|
|
1110
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
1111
|
+
}
|
|
1112
|
+
},
|
|
1113
|
+
{
|
|
1114
|
+
"kind": "field",
|
|
1115
|
+
"name": "initials",
|
|
1116
|
+
"type": {
|
|
1117
|
+
"text": "string | undefined"
|
|
1118
|
+
},
|
|
1119
|
+
"description": "The initials to be displayed for the avatar.",
|
|
1120
|
+
"attribute": "initials",
|
|
1121
|
+
"inheritedFrom": {
|
|
1122
|
+
"name": "AvatarComponentMixin",
|
|
1123
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
1124
|
+
}
|
|
1125
|
+
},
|
|
1126
|
+
{
|
|
1127
|
+
"kind": "field",
|
|
1128
|
+
"name": "presence",
|
|
1129
|
+
"type": {
|
|
1130
|
+
"text": "PresenceType | undefined"
|
|
1131
|
+
},
|
|
1132
|
+
"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`",
|
|
1133
|
+
"attribute": "presence",
|
|
1134
|
+
"inheritedFrom": {
|
|
1135
|
+
"name": "AvatarComponentMixin",
|
|
1136
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
1137
|
+
}
|
|
1138
|
+
},
|
|
1139
|
+
{
|
|
1140
|
+
"kind": "field",
|
|
1141
|
+
"name": "size",
|
|
1142
|
+
"type": {
|
|
1143
|
+
"text": "AvatarSize"
|
|
1144
|
+
},
|
|
1145
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
1146
|
+
"default": "32",
|
|
1147
|
+
"attribute": "size",
|
|
1148
|
+
"reflects": true,
|
|
1149
|
+
"inheritedFrom": {
|
|
1150
|
+
"name": "AvatarComponentMixin",
|
|
1151
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
1152
|
+
}
|
|
1153
|
+
},
|
|
1154
|
+
{
|
|
1155
|
+
"kind": "field",
|
|
1156
|
+
"name": "counter",
|
|
1157
|
+
"type": {
|
|
1158
|
+
"text": "number | undefined"
|
|
1159
|
+
},
|
|
1160
|
+
"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`.",
|
|
1161
|
+
"attribute": "counter",
|
|
1162
|
+
"inheritedFrom": {
|
|
1163
|
+
"name": "AvatarComponentMixin",
|
|
1164
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
1165
|
+
}
|
|
1166
|
+
},
|
|
1167
|
+
{
|
|
1168
|
+
"kind": "field",
|
|
1169
|
+
"name": "isTyping",
|
|
1170
|
+
"type": {
|
|
1171
|
+
"text": "boolean"
|
|
1172
|
+
},
|
|
1173
|
+
"default": "false",
|
|
1174
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
1175
|
+
"attribute": "is-typing",
|
|
1176
|
+
"inheritedFrom": {
|
|
1177
|
+
"name": "AvatarComponentMixin",
|
|
1178
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
1179
|
+
}
|
|
1180
|
+
},
|
|
1181
|
+
{
|
|
1182
|
+
"kind": "field",
|
|
1183
|
+
"name": "iconName",
|
|
1184
|
+
"type": {
|
|
1185
|
+
"text": "IconNames | undefined"
|
|
1186
|
+
},
|
|
1187
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
1188
|
+
"attribute": "icon-name",
|
|
1189
|
+
"inheritedFrom": {
|
|
1190
|
+
"name": "IconNameMixin",
|
|
1191
|
+
"module": "utils/mixins/IconNameMixin.js"
|
|
1192
|
+
}
|
|
1193
|
+
}
|
|
1194
|
+
],
|
|
1195
|
+
"mixins": [
|
|
1196
|
+
{
|
|
1197
|
+
"name": "AvatarComponentMixin",
|
|
1198
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
1199
|
+
},
|
|
1200
|
+
{
|
|
1201
|
+
"name": "IconNameMixin",
|
|
1202
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
|
1203
|
+
}
|
|
1204
|
+
],
|
|
1205
|
+
"superclass": {
|
|
1206
|
+
"name": "Component",
|
|
1207
|
+
"module": "/src/models"
|
|
1208
|
+
},
|
|
1209
|
+
"tagName": "mdc-avatar",
|
|
1210
|
+
"jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n * Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n * Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n * Allows customization of the loading overlay background color.\n */",
|
|
1211
|
+
"customElement": true,
|
|
1212
|
+
"attributes": [
|
|
1213
|
+
{
|
|
1214
|
+
"name": "src",
|
|
1215
|
+
"type": {
|
|
1216
|
+
"text": "string | undefined"
|
|
1217
|
+
},
|
|
1218
|
+
"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.",
|
|
1219
|
+
"fieldName": "src",
|
|
1220
|
+
"inheritedFrom": {
|
|
1221
|
+
"name": "AvatarComponentMixin",
|
|
1222
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1223
|
+
}
|
|
1224
|
+
},
|
|
1225
|
+
{
|
|
1226
|
+
"name": "initials",
|
|
1227
|
+
"type": {
|
|
1228
|
+
"text": "string | undefined"
|
|
1229
|
+
},
|
|
1230
|
+
"description": "The initials to be displayed for the avatar.",
|
|
1231
|
+
"fieldName": "initials",
|
|
1232
|
+
"inheritedFrom": {
|
|
1233
|
+
"name": "AvatarComponentMixin",
|
|
1234
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1235
|
+
}
|
|
1236
|
+
},
|
|
1237
|
+
{
|
|
1238
|
+
"name": "presence",
|
|
1239
|
+
"type": {
|
|
1240
|
+
"text": "PresenceType | undefined"
|
|
1241
|
+
},
|
|
1242
|
+
"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`",
|
|
1243
|
+
"fieldName": "presence",
|
|
1244
|
+
"inheritedFrom": {
|
|
1245
|
+
"name": "AvatarComponentMixin",
|
|
1246
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1247
|
+
}
|
|
1248
|
+
},
|
|
1249
|
+
{
|
|
1250
|
+
"name": "size",
|
|
1251
|
+
"type": {
|
|
1252
|
+
"text": "AvatarSize"
|
|
1253
|
+
},
|
|
1254
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
1255
|
+
"default": "32",
|
|
1256
|
+
"fieldName": "size",
|
|
1257
|
+
"inheritedFrom": {
|
|
1258
|
+
"name": "AvatarComponentMixin",
|
|
1259
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1260
|
+
}
|
|
1261
|
+
},
|
|
1262
|
+
{
|
|
1263
|
+
"name": "counter",
|
|
1264
|
+
"type": {
|
|
1265
|
+
"text": "number | undefined"
|
|
1266
|
+
},
|
|
1267
|
+
"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`.",
|
|
1268
|
+
"fieldName": "counter",
|
|
1269
|
+
"inheritedFrom": {
|
|
1270
|
+
"name": "AvatarComponentMixin",
|
|
1271
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1272
|
+
}
|
|
1273
|
+
},
|
|
1274
|
+
{
|
|
1275
|
+
"name": "is-typing",
|
|
1276
|
+
"type": {
|
|
1277
|
+
"text": "boolean"
|
|
1278
|
+
},
|
|
1279
|
+
"default": "false",
|
|
1280
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
1281
|
+
"fieldName": "isTyping",
|
|
1282
|
+
"inheritedFrom": {
|
|
1283
|
+
"name": "AvatarComponentMixin",
|
|
1284
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1285
|
+
}
|
|
1286
|
+
},
|
|
1287
|
+
{
|
|
1288
|
+
"name": "icon-name",
|
|
1289
|
+
"type": {
|
|
1290
|
+
"text": "IconNames | undefined"
|
|
1291
|
+
},
|
|
1292
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
1293
|
+
"fieldName": "iconName",
|
|
1294
|
+
"inheritedFrom": {
|
|
1295
|
+
"name": "IconNameMixin",
|
|
1296
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
1297
|
+
}
|
|
1298
|
+
}
|
|
1299
|
+
]
|
|
1300
|
+
}
|
|
1301
|
+
],
|
|
1302
|
+
"exports": [
|
|
1303
|
+
{
|
|
1304
|
+
"kind": "js",
|
|
1305
|
+
"name": "default",
|
|
1306
|
+
"declaration": {
|
|
1307
|
+
"name": "Avatar",
|
|
1308
|
+
"module": "components/avatar/avatar.component.js"
|
|
1309
|
+
}
|
|
1310
|
+
}
|
|
1311
|
+
]
|
|
1312
|
+
},
|
|
1313
|
+
{
|
|
1314
|
+
"kind": "javascript-module",
|
|
1315
|
+
"path": "components/badge/badge.component.js",
|
|
1316
|
+
"declarations": [
|
|
1317
|
+
{
|
|
1318
|
+
"kind": "class",
|
|
1319
|
+
"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.",
|
|
1320
|
+
"name": "Badge",
|
|
1321
|
+
"cssProperties": [
|
|
1322
|
+
{
|
|
1323
|
+
"description": "The foreground color of the primary badge.",
|
|
1324
|
+
"name": "--mdc-badge-primary-foreground-color"
|
|
1325
|
+
},
|
|
1326
|
+
{
|
|
1327
|
+
"description": "The background color of the primary badge.",
|
|
1328
|
+
"name": "--mdc-badge-primary-background-color"
|
|
1329
1329
|
},
|
|
1330
1330
|
{
|
|
1331
1331
|
"description": "The foreground color of the secondary badge.",
|
|
@@ -1631,6 +1631,112 @@
|
|
|
1631
1631
|
}
|
|
1632
1632
|
]
|
|
1633
1633
|
},
|
|
1634
|
+
{
|
|
1635
|
+
"kind": "javascript-module",
|
|
1636
|
+
"path": "components/brandvisual/brandvisual.component.js",
|
|
1637
|
+
"declarations": [
|
|
1638
|
+
{
|
|
1639
|
+
"kind": "class",
|
|
1640
|
+
"description": "The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\ndisplayed correctly within applications.\n\nFeatures:\n- Dynamically loads brandvisuals based on the `name` attribute.\n- Emits a `load` event when the brandvisual is successfully fetched.\n- Emits an `error` event when the brandvisual import fails.\n- Supports accessibility best practices.\n- Used for brand representation within the design system.",
|
|
1641
|
+
"name": "Brandvisual",
|
|
1642
|
+
"members": [
|
|
1643
|
+
{
|
|
1644
|
+
"kind": "field",
|
|
1645
|
+
"name": "brandVisualData",
|
|
1646
|
+
"type": {
|
|
1647
|
+
"text": "HTMLElement | undefined"
|
|
1648
|
+
},
|
|
1649
|
+
"privacy": "private"
|
|
1650
|
+
},
|
|
1651
|
+
{
|
|
1652
|
+
"kind": "field",
|
|
1653
|
+
"name": "name",
|
|
1654
|
+
"type": {
|
|
1655
|
+
"text": "BrandVisualNames | undefined"
|
|
1656
|
+
},
|
|
1657
|
+
"description": "Name of the brandVisual (= filename)",
|
|
1658
|
+
"attribute": "name",
|
|
1659
|
+
"reflects": true
|
|
1660
|
+
},
|
|
1661
|
+
{
|
|
1662
|
+
"kind": "method",
|
|
1663
|
+
"name": "getBrandVisualData",
|
|
1664
|
+
"privacy": "private"
|
|
1665
|
+
},
|
|
1666
|
+
{
|
|
1667
|
+
"kind": "method",
|
|
1668
|
+
"name": "handleBrandVisualLoadedSuccess",
|
|
1669
|
+
"privacy": "private",
|
|
1670
|
+
"parameters": [
|
|
1671
|
+
{
|
|
1672
|
+
"name": "brandVisualHtml",
|
|
1673
|
+
"type": {
|
|
1674
|
+
"text": "HTMLElement"
|
|
1675
|
+
},
|
|
1676
|
+
"description": "The brandvisual html element which has been fetched from the brandvisual provider."
|
|
1677
|
+
}
|
|
1678
|
+
],
|
|
1679
|
+
"description": "Sets the brandVisualData state to the fetched brandvisual.\nDispatches a 'load' event on the component once the brandvisual has been successfully loaded."
|
|
1680
|
+
},
|
|
1681
|
+
{
|
|
1682
|
+
"kind": "method",
|
|
1683
|
+
"name": "handleBrandVisualLoadedFailure",
|
|
1684
|
+
"privacy": "private",
|
|
1685
|
+
"parameters": [
|
|
1686
|
+
{
|
|
1687
|
+
"name": "error",
|
|
1688
|
+
"type": {
|
|
1689
|
+
"text": "unknown"
|
|
1690
|
+
}
|
|
1691
|
+
}
|
|
1692
|
+
],
|
|
1693
|
+
"description": "Dispatches an 'error' event on the component when the brandvisual import has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
|
|
1694
|
+
}
|
|
1695
|
+
],
|
|
1696
|
+
"events": [
|
|
1697
|
+
{
|
|
1698
|
+
"description": "(React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.",
|
|
1699
|
+
"name": "load",
|
|
1700
|
+
"reactName": "onLoad",
|
|
1701
|
+
"eventName": "LoadEvent"
|
|
1702
|
+
},
|
|
1703
|
+
{
|
|
1704
|
+
"description": "(React: onError) This event is dispatched when the brandvisual fetching has failed.",
|
|
1705
|
+
"name": "error",
|
|
1706
|
+
"reactName": "onError",
|
|
1707
|
+
"eventName": "ErrorEvent"
|
|
1708
|
+
}
|
|
1709
|
+
],
|
|
1710
|
+
"attributes": [
|
|
1711
|
+
{
|
|
1712
|
+
"name": "name",
|
|
1713
|
+
"type": {
|
|
1714
|
+
"text": "BrandVisualNames | undefined"
|
|
1715
|
+
},
|
|
1716
|
+
"description": "Name of the brandVisual (= filename)",
|
|
1717
|
+
"fieldName": "name"
|
|
1718
|
+
}
|
|
1719
|
+
],
|
|
1720
|
+
"superclass": {
|
|
1721
|
+
"name": "Component",
|
|
1722
|
+
"module": "/src/models"
|
|
1723
|
+
},
|
|
1724
|
+
"tagName": "mdc-brandvisual",
|
|
1725
|
+
"jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\n * - Dynamically loads brandvisuals based on the `name` attribute.\n * - Emits a `load` event when the brandvisual is successfully fetched.\n * - Emits an `error` event when the brandvisual import fails.\n * - Supports accessibility best practices.\n * - Used for brand representation within the design system.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n */",
|
|
1726
|
+
"customElement": true
|
|
1727
|
+
}
|
|
1728
|
+
],
|
|
1729
|
+
"exports": [
|
|
1730
|
+
{
|
|
1731
|
+
"kind": "js",
|
|
1732
|
+
"name": "default",
|
|
1733
|
+
"declaration": {
|
|
1734
|
+
"name": "Brandvisual",
|
|
1735
|
+
"module": "components/brandvisual/brandvisual.component.js"
|
|
1736
|
+
}
|
|
1737
|
+
}
|
|
1738
|
+
]
|
|
1739
|
+
},
|
|
1634
1740
|
{
|
|
1635
1741
|
"kind": "javascript-module",
|
|
1636
1742
|
"path": "components/bullet/bullet.component.js",
|
package/dist/index.d.ts
CHANGED
|
@@ -33,6 +33,7 @@ import Progressbar from './components/progressbar';
|
|
|
33
33
|
import Option from './components/option';
|
|
34
34
|
import OptGroup from './components/optgroup';
|
|
35
35
|
import Textarea from './components/textarea';
|
|
36
|
+
import Brandvisual from './components/brandvisual';
|
|
36
37
|
import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.types';
|
|
37
38
|
import type { TextType } from './components/text/text.types';
|
|
38
39
|
import type { PopoverPlacement } from './components/popover/popover.types';
|
|
@@ -40,6 +41,6 @@ import type { BadgeType } from './components/badge/badge.types';
|
|
|
40
41
|
import type { IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor } from './components/button/button.types';
|
|
41
42
|
import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
|
|
42
43
|
import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
|
|
43
|
-
export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, Textarea, Tooltip, };
|
|
44
|
+
export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, Textarea, Tooltip, Brandvisual, };
|
|
44
45
|
export type { TextType, SpinnerSize, SpinnerVariant, PopoverPlacement, BadgeType, IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor, };
|
|
45
46
|
export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };
|