@momentum-design/components 0.43.1 → 0.44.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.
@@ -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",
@@ -1203,100 +959,344 @@
1203
959
  "name": "IconNameMixin",
1204
960
  "module": "src/utils/mixins/IconNameMixin.ts"
1205
961
  }
1206
- },
1207
- {
1208
- "name": "tabIndex",
1209
- "type": {
1210
- "text": "number"
1211
- },
1212
- "default": "0",
1213
- "description": "This property specifies the tab order of the element.",
1214
- "fieldName": "tabIndex",
1215
- "inheritedFrom": {
1216
- "name": "TabIndexMixin",
1217
- "module": "src/utils/mixins/TabIndexMixin.ts"
1218
- }
1219
- },
1220
- {
1221
- "name": "disabled",
1222
- "type": {
1223
- "text": "boolean | undefined"
1224
- },
1225
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
1226
- "default": "undefined",
1227
- "fieldName": "disabled",
1228
- "inheritedFrom": {
1229
- "name": "DisabledMixin",
1230
- "module": "src/utils/mixins/DisabledMixin.ts"
1231
- }
1232
- },
1233
- {
1234
- "name": "active",
1235
- "type": {
1236
- "text": "boolean"
1237
- },
1238
- "default": "false",
1239
- "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.",
1240
- "fieldName": "active",
1241
- "inheritedFrom": {
1242
- "name": "Buttonsimple",
1243
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
1244
- }
1245
- },
1246
- {
1247
- "name": "soft-disabled",
1248
- "type": {
1249
- "text": "boolean"
1250
- },
1251
- "default": "false",
1252
- "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.",
1253
- "fieldName": "softDisabled",
1254
- "inheritedFrom": {
1255
- "name": "Buttonsimple",
1256
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
1257
- }
1258
- },
1259
- {
1260
- "name": "role",
1261
- "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.",
1262
- "default": "button",
1263
- "fieldName": "role",
1264
- "inheritedFrom": {
1265
- "name": "Buttonsimple",
1266
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
1267
- }
1268
- },
1269
- {
1270
- "name": "type",
1271
- "type": {
1272
- "text": "ButtonType"
1273
- },
1274
- "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.",
1275
- "default": "button",
1276
- "fieldName": "type",
1277
- "inheritedFrom": {
1278
- "name": "Buttonsimple",
1279
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
1280
- }
1281
- }
1282
- ],
1283
- "mixins": [
1284
- {
1285
- "name": "AvatarComponentMixin",
1286
- "module": "/src/utils/mixins/AvatarComponentMixin"
1287
- },
1288
- {
1289
- "name": "IconNameMixin",
1290
- "module": "/src/utils/mixins/IconNameMixin"
962
+ },
963
+ {
964
+ "name": "tabIndex",
965
+ "type": {
966
+ "text": "number"
967
+ },
968
+ "default": "0",
969
+ "description": "This property specifies the tab order of the element.",
970
+ "fieldName": "tabIndex",
971
+ "inheritedFrom": {
972
+ "name": "TabIndexMixin",
973
+ "module": "src/utils/mixins/TabIndexMixin.ts"
974
+ }
975
+ },
976
+ {
977
+ "name": "disabled",
978
+ "type": {
979
+ "text": "boolean | undefined"
980
+ },
981
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
982
+ "default": "undefined",
983
+ "fieldName": "disabled",
984
+ "inheritedFrom": {
985
+ "name": "DisabledMixin",
986
+ "module": "src/utils/mixins/DisabledMixin.ts"
987
+ }
988
+ },
989
+ {
990
+ "name": "active",
991
+ "type": {
992
+ "text": "boolean"
993
+ },
994
+ "default": "false",
995
+ "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.",
996
+ "fieldName": "active",
997
+ "inheritedFrom": {
998
+ "name": "Buttonsimple",
999
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
1000
+ }
1001
+ },
1002
+ {
1003
+ "name": "soft-disabled",
1004
+ "type": {
1005
+ "text": "boolean"
1006
+ },
1007
+ "default": "false",
1008
+ "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.",
1009
+ "fieldName": "softDisabled",
1010
+ "inheritedFrom": {
1011
+ "name": "Buttonsimple",
1012
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
1013
+ }
1014
+ },
1015
+ {
1016
+ "name": "role",
1017
+ "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.",
1018
+ "default": "button",
1019
+ "fieldName": "role",
1020
+ "inheritedFrom": {
1021
+ "name": "Buttonsimple",
1022
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
1023
+ }
1024
+ },
1025
+ {
1026
+ "name": "type",
1027
+ "type": {
1028
+ "text": "ButtonType"
1029
+ },
1030
+ "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.",
1031
+ "default": "button",
1032
+ "fieldName": "type",
1033
+ "inheritedFrom": {
1034
+ "name": "Buttonsimple",
1035
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
1036
+ }
1037
+ }
1038
+ ],
1039
+ "mixins": [
1040
+ {
1041
+ "name": "AvatarComponentMixin",
1042
+ "module": "/src/utils/mixins/AvatarComponentMixin"
1043
+ },
1044
+ {
1045
+ "name": "IconNameMixin",
1046
+ "module": "/src/utils/mixins/IconNameMixin"
1047
+ }
1048
+ ],
1049
+ "superclass": {
1050
+ "name": "Buttonsimple",
1051
+ "module": "/src/components/buttonsimple/buttonsimple.component"
1052
+ },
1053
+ "tagName": "mdc-avatarbutton",
1054
+ "jsDoc": "/**\n * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n *\n * This component is made by extending `buttonsimple` class.\n * The button component acts as a wrapper for the avatar component.\n *\n * @dependency mdc-avatar\n *\n * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.\n * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.\n *\n * @tagname mdc-avatarbutton\n */",
1055
+ "customElement": true
1056
+ }
1057
+ ],
1058
+ "exports": [
1059
+ {
1060
+ "kind": "js",
1061
+ "name": "default",
1062
+ "declaration": {
1063
+ "name": "AvatarButton",
1064
+ "module": "components/avatarbutton/avatarbutton.component.js"
1065
+ }
1066
+ }
1067
+ ]
1068
+ },
1069
+ {
1070
+ "kind": "javascript-module",
1071
+ "path": "components/avatar/avatar.component.js",
1072
+ "declarations": [
1073
+ {
1074
+ "kind": "class",
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",
1077
+ "cssProperties": [
1078
+ {
1079
+ "description": "Allows customization of the default background color.",
1080
+ "name": "--mdc-avatar-default-background-color"
1081
+ },
1082
+ {
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
+ }
1291
1298
  }
1292
- ],
1293
- "superclass": {
1294
- "name": "Buttonsimple",
1295
- "module": "/src/components/buttonsimple/buttonsimple.component"
1296
- },
1297
- "tagName": "mdc-avatarbutton",
1298
- "jsDoc": "/**\n * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n *\n * This component is made by extending `buttonsimple` class.\n * The button component acts as a wrapper for the avatar component.\n *\n * @dependency mdc-avatar\n *\n * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.\n * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.\n *\n * @tagname mdc-avatarbutton\n */",
1299
- "customElement": true
1299
+ ]
1300
1300
  }
1301
1301
  ],
1302
1302
  "exports": [
@@ -1304,8 +1304,8 @@
1304
1304
  "kind": "js",
1305
1305
  "name": "default",
1306
1306
  "declaration": {
1307
- "name": "AvatarButton",
1308
- "module": "components/avatarbutton/avatarbutton.component.js"
1307
+ "name": "Avatar",
1308
+ "module": "components/avatar/avatar.component.js"
1309
1309
  }
1310
1310
  }
1311
1311
  ]
@@ -13008,103 +13008,236 @@
13008
13008
  {
13009
13009
  "name": "disabled",
13010
13010
  "type": {
13011
- "text": "boolean | undefined"
13011
+ "text": "boolean | undefined"
13012
+ },
13013
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
13014
+ "default": "undefined",
13015
+ "fieldName": "disabled",
13016
+ "inheritedFrom": {
13017
+ "name": "FormfieldWrapper",
13018
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
13019
+ }
13020
+ },
13021
+ {
13022
+ "name": "label",
13023
+ "type": {
13024
+ "text": "string | undefined"
13025
+ },
13026
+ "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
13027
+ "fieldName": "label",
13028
+ "inheritedFrom": {
13029
+ "name": "FormfieldWrapper",
13030
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
13031
+ }
13032
+ },
13033
+ {
13034
+ "name": "required-label",
13035
+ "type": {
13036
+ "text": "string | undefined"
13037
+ },
13038
+ "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
13039
+ "fieldName": "requiredLabel",
13040
+ "inheritedFrom": {
13041
+ "name": "FormfieldWrapper",
13042
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
13043
+ }
13044
+ },
13045
+ {
13046
+ "name": "id",
13047
+ "type": {
13048
+ "text": "string"
13049
+ },
13050
+ "default": "''",
13051
+ "description": "The unique id of the input field. It is used to link the input field with the label.",
13052
+ "fieldName": "id",
13053
+ "inheritedFrom": {
13054
+ "name": "FormfieldWrapper",
13055
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
13056
+ }
13057
+ },
13058
+ {
13059
+ "name": "help-text-type",
13060
+ "type": {
13061
+ "text": "ValidationType"
13062
+ },
13063
+ "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
13064
+ "fieldName": "helpTextType",
13065
+ "inheritedFrom": {
13066
+ "name": "FormfieldWrapper",
13067
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
13068
+ }
13069
+ },
13070
+ {
13071
+ "name": "help-text",
13072
+ "type": {
13073
+ "text": "string | undefined"
13074
+ },
13075
+ "description": "The help text that is displayed below the input field.",
13076
+ "fieldName": "helpText",
13077
+ "inheritedFrom": {
13078
+ "name": "FormfieldWrapper",
13079
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
13080
+ }
13081
+ }
13082
+ ],
13083
+ "superclass": {
13084
+ "name": "FormfieldGroup",
13085
+ "module": "/src/components/formfieldgroup"
13086
+ },
13087
+ "tagName": "mdc-radiogroup",
13088
+ "jsDoc": "/**\n * `mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.\n * It can have a header text and a description. It enables users to select a single option from a set of options.\n * It is often used in forms, settings, and selection in lists. It automatically group the radio buttons inside it.\n *\n * @tagname mdc-radiogroup\n *\n * @cssproperty --mdc-radiogroup-description-text-normal - color of the description text\n *\n */",
13089
+ "customElement": true,
13090
+ "slots": [
13091
+ {
13092
+ "description": "This is a default slot for checkbox or toggle components.",
13093
+ "name": "default",
13094
+ "inheritedFrom": {
13095
+ "name": "FormfieldGroup",
13096
+ "module": "src/components/formfieldgroup/formfieldgroup.component.ts"
13097
+ }
13098
+ },
13099
+ {
13100
+ "description": "slot to add the label info icon",
13101
+ "name": "label-info",
13102
+ "inheritedFrom": {
13103
+ "name": "FormfieldWrapper",
13104
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
13105
+ }
13106
+ }
13107
+ ]
13108
+ }
13109
+ ],
13110
+ "exports": [
13111
+ {
13112
+ "kind": "js",
13113
+ "name": "default",
13114
+ "declaration": {
13115
+ "name": "RadioGroup",
13116
+ "module": "components/radiogroup/radiogroup.component.js"
13117
+ }
13118
+ }
13119
+ ]
13120
+ },
13121
+ {
13122
+ "kind": "javascript-module",
13123
+ "path": "components/spinner/spinner.component.js",
13124
+ "declarations": [
13125
+ {
13126
+ "kind": "class",
13127
+ "description": "`mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\nit's best for cases where the progress or duration of a process is variable or unknown.\n\nSpinner Variants:\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\nicon or label text.\n\nSpinner Sizes:\n- **Large (96px)**: Use when replacing entire regions or pages that are still loading\n- **MidSize (48px) (Default)**: Use for most use cases.\n- **Small (24px)**: Use for inline with loading text.\n\nCustomisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\nCSS property.\n\nSpinner Colors:\n- **Default**: Use for most use cases.\n- **Inverted**: Only to be used within inverted components, such as coachmarks.\n\nRegarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\nwill be unset\nand aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.",
13128
+ "name": "Spinner",
13129
+ "cssProperties": [
13130
+ {
13131
+ "description": "Allows customization of the default spinner color.",
13132
+ "name": "--mdc-spinner-default-color"
13133
+ },
13134
+ {
13135
+ "description": "Allows customization of the inverted spinner color.",
13136
+ "name": "--mdc-spinner-inverted-color"
13137
+ },
13138
+ {
13139
+ "description": "Allows customization of the spinner Button variant color.",
13140
+ "name": "--mdc-spinner-button-variant-color"
13141
+ },
13142
+ {
13143
+ "description": "Allows customization of the spinner size.",
13144
+ "name": "--mdc-spinner-size"
13145
+ }
13146
+ ],
13147
+ "cssParts": [
13148
+ {
13149
+ "description": "The svg which contains the circle spinner.",
13150
+ "name": "container"
13151
+ },
13152
+ {
13153
+ "description": "The circle of the spinner.",
13154
+ "name": "circle"
13155
+ }
13156
+ ],
13157
+ "members": [
13158
+ {
13159
+ "kind": "field",
13160
+ "name": "inverted",
13161
+ "description": "The spinner color can be inverted by setting the inverted attribute to true.",
13162
+ "default": "false",
13163
+ "attribute": "inverted",
13164
+ "reflects": true
13165
+ },
13166
+ {
13167
+ "kind": "field",
13168
+ "name": "size",
13169
+ "type": {
13170
+ "text": "SpinnerSize | undefined"
13012
13171
  },
13013
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
13014
- "default": "undefined",
13015
- "fieldName": "disabled",
13016
- "inheritedFrom": {
13017
- "name": "FormfieldWrapper",
13018
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
13019
- }
13172
+ "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
13173
+ "default": "midsize",
13174
+ "attribute": "size",
13175
+ "reflects": true
13020
13176
  },
13021
13177
  {
13022
- "name": "label",
13178
+ "kind": "field",
13179
+ "name": "ariaLabel",
13023
13180
  "type": {
13024
- "text": "string | undefined"
13181
+ "text": "string | null"
13025
13182
  },
13026
- "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
13027
- "fieldName": "label",
13028
- "inheritedFrom": {
13029
- "name": "FormfieldWrapper",
13030
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
13031
- }
13183
+ "default": "null",
13184
+ "description": "Aria-label attribute to be set for accessibility",
13185
+ "attribute": "aria-label"
13032
13186
  },
13033
13187
  {
13034
- "name": "required-label",
13188
+ "kind": "field",
13189
+ "name": "variant",
13035
13190
  "type": {
13036
- "text": "string | undefined"
13191
+ "text": "SpinnerVariant"
13037
13192
  },
13038
- "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
13039
- "fieldName": "requiredLabel",
13040
- "inheritedFrom": {
13041
- "name": "FormfieldWrapper",
13042
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
13043
- }
13193
+ "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
13194
+ "default": "standalone",
13195
+ "attribute": "variant",
13196
+ "reflects": true
13197
+ }
13198
+ ],
13199
+ "attributes": [
13200
+ {
13201
+ "name": "inverted",
13202
+ "description": "The spinner color can be inverted by setting the inverted attribute to true.",
13203
+ "default": "false",
13204
+ "fieldName": "inverted"
13044
13205
  },
13045
13206
  {
13046
- "name": "id",
13207
+ "name": "size",
13047
13208
  "type": {
13048
- "text": "string"
13209
+ "text": "SpinnerSize | undefined"
13049
13210
  },
13050
- "default": "''",
13051
- "description": "The unique id of the input field. It is used to link the input field with the label.",
13052
- "fieldName": "id",
13053
- "inheritedFrom": {
13054
- "name": "FormfieldWrapper",
13055
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
13056
- }
13211
+ "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
13212
+ "default": "midsize",
13213
+ "fieldName": "size"
13057
13214
  },
13058
13215
  {
13059
- "name": "help-text-type",
13216
+ "name": "aria-label",
13060
13217
  "type": {
13061
- "text": "ValidationType"
13218
+ "text": "string | null"
13062
13219
  },
13063
- "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
13064
- "fieldName": "helpTextType",
13065
- "inheritedFrom": {
13066
- "name": "FormfieldWrapper",
13067
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
13068
- }
13220
+ "default": "null",
13221
+ "description": "Aria-label attribute to be set for accessibility",
13222
+ "fieldName": "ariaLabel"
13069
13223
  },
13070
13224
  {
13071
- "name": "help-text",
13225
+ "name": "variant",
13072
13226
  "type": {
13073
- "text": "string | undefined"
13227
+ "text": "SpinnerVariant"
13074
13228
  },
13075
- "description": "The help text that is displayed below the input field.",
13076
- "fieldName": "helpText",
13077
- "inheritedFrom": {
13078
- "name": "FormfieldWrapper",
13079
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
13080
- }
13229
+ "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
13230
+ "default": "standalone",
13231
+ "fieldName": "variant"
13081
13232
  }
13082
13233
  ],
13083
13234
  "superclass": {
13084
- "name": "FormfieldGroup",
13085
- "module": "/src/components/formfieldgroup"
13235
+ "name": "Component",
13236
+ "module": "/src/models"
13086
13237
  },
13087
- "tagName": "mdc-radiogroup",
13088
- "jsDoc": "/**\n * `mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.\n * It can have a header text and a description. It enables users to select a single option from a set of options.\n * It is often used in forms, settings, and selection in lists. It automatically group the radio buttons inside it.\n *\n * @tagname mdc-radiogroup\n *\n * @cssproperty --mdc-radiogroup-description-text-normal - color of the description text\n *\n */",
13089
- "customElement": true,
13090
- "slots": [
13091
- {
13092
- "description": "This is a default slot for checkbox or toggle components.",
13093
- "name": "default",
13094
- "inheritedFrom": {
13095
- "name": "FormfieldGroup",
13096
- "module": "src/components/formfieldgroup/formfieldgroup.component.ts"
13097
- }
13098
- },
13099
- {
13100
- "description": "slot to add the label info icon",
13101
- "name": "label-info",
13102
- "inheritedFrom": {
13103
- "name": "FormfieldWrapper",
13104
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
13105
- }
13106
- }
13107
- ]
13238
+ "tagName": "mdc-spinner",
13239
+ "jsDoc": "/**\n * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\n * it's best for cases where the progress or duration of a process is variable or unknown.\n *\n * Spinner Variants:\n * - **Standalone (Default)**: Track has a blue color.\n * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\n * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\n * icon or label text.\n *\n * Spinner Sizes:\n * - **Large (96px)**: Use when replacing entire regions or pages that are still loading\n * - **MidSize (48px) (Default)**: Use for most use cases.\n * - **Small (24px)**: Use for inline with loading text.\n *\n * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\n * CSS property.\n *\n * Spinner Colors:\n * - **Default**: Use for most use cases.\n * - **Inverted**: Only to be used within inverted components, such as coachmarks.\n *\n * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\n * will be unset\n * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.\n *\n * @tagname mdc-spinner\n *\n * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.\n * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.\n * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.\n * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.\n *\n * @csspart container - The svg which contains the circle spinner.\n * @csspart circle - The circle of the spinner.\n */",
13240
+ "customElement": true
13108
13241
  }
13109
13242
  ],
13110
13243
  "exports": [
@@ -13112,8 +13245,8 @@
13112
13245
  "kind": "js",
13113
13246
  "name": "default",
13114
13247
  "declaration": {
13115
- "name": "RadioGroup",
13116
- "module": "components/radiogroup/radiogroup.component.js"
13248
+ "name": "Spinner",
13249
+ "module": "components/spinner/spinner.component.js"
13117
13250
  }
13118
13251
  }
13119
13252
  ]
@@ -14316,139 +14449,6 @@
14316
14449
  }
14317
14450
  ]
14318
14451
  },
14319
- {
14320
- "kind": "javascript-module",
14321
- "path": "components/spinner/spinner.component.js",
14322
- "declarations": [
14323
- {
14324
- "kind": "class",
14325
- "description": "`mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\nit's best for cases where the progress or duration of a process is variable or unknown.\n\nSpinner Variants:\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\nicon or label text.\n\nSpinner Sizes:\n- **Large (96px)**: Use when replacing entire regions or pages that are still loading\n- **MidSize (48px) (Default)**: Use for most use cases.\n- **Small (24px)**: Use for inline with loading text.\n\nCustomisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\nCSS property.\n\nSpinner Colors:\n- **Default**: Use for most use cases.\n- **Inverted**: Only to be used within inverted components, such as coachmarks.\n\nRegarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\nwill be unset\nand aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.",
14326
- "name": "Spinner",
14327
- "cssProperties": [
14328
- {
14329
- "description": "Allows customization of the default spinner color.",
14330
- "name": "--mdc-spinner-default-color"
14331
- },
14332
- {
14333
- "description": "Allows customization of the inverted spinner color.",
14334
- "name": "--mdc-spinner-inverted-color"
14335
- },
14336
- {
14337
- "description": "Allows customization of the spinner Button variant color.",
14338
- "name": "--mdc-spinner-button-variant-color"
14339
- },
14340
- {
14341
- "description": "Allows customization of the spinner size.",
14342
- "name": "--mdc-spinner-size"
14343
- }
14344
- ],
14345
- "cssParts": [
14346
- {
14347
- "description": "The svg which contains the circle spinner.",
14348
- "name": "container"
14349
- },
14350
- {
14351
- "description": "The circle of the spinner.",
14352
- "name": "circle"
14353
- }
14354
- ],
14355
- "members": [
14356
- {
14357
- "kind": "field",
14358
- "name": "inverted",
14359
- "description": "The spinner color can be inverted by setting the inverted attribute to true.",
14360
- "default": "false",
14361
- "attribute": "inverted",
14362
- "reflects": true
14363
- },
14364
- {
14365
- "kind": "field",
14366
- "name": "size",
14367
- "type": {
14368
- "text": "SpinnerSize | undefined"
14369
- },
14370
- "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
14371
- "default": "midsize",
14372
- "attribute": "size",
14373
- "reflects": true
14374
- },
14375
- {
14376
- "kind": "field",
14377
- "name": "ariaLabel",
14378
- "type": {
14379
- "text": "string | null"
14380
- },
14381
- "default": "null",
14382
- "description": "Aria-label attribute to be set for accessibility",
14383
- "attribute": "aria-label"
14384
- },
14385
- {
14386
- "kind": "field",
14387
- "name": "variant",
14388
- "type": {
14389
- "text": "SpinnerVariant"
14390
- },
14391
- "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
14392
- "default": "standalone",
14393
- "attribute": "variant",
14394
- "reflects": true
14395
- }
14396
- ],
14397
- "attributes": [
14398
- {
14399
- "name": "inverted",
14400
- "description": "The spinner color can be inverted by setting the inverted attribute to true.",
14401
- "default": "false",
14402
- "fieldName": "inverted"
14403
- },
14404
- {
14405
- "name": "size",
14406
- "type": {
14407
- "text": "SpinnerSize | undefined"
14408
- },
14409
- "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
14410
- "default": "midsize",
14411
- "fieldName": "size"
14412
- },
14413
- {
14414
- "name": "aria-label",
14415
- "type": {
14416
- "text": "string | null"
14417
- },
14418
- "default": "null",
14419
- "description": "Aria-label attribute to be set for accessibility",
14420
- "fieldName": "ariaLabel"
14421
- },
14422
- {
14423
- "name": "variant",
14424
- "type": {
14425
- "text": "SpinnerVariant"
14426
- },
14427
- "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
14428
- "default": "standalone",
14429
- "fieldName": "variant"
14430
- }
14431
- ],
14432
- "superclass": {
14433
- "name": "Component",
14434
- "module": "/src/models"
14435
- },
14436
- "tagName": "mdc-spinner",
14437
- "jsDoc": "/**\n * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\n * it's best for cases where the progress or duration of a process is variable or unknown.\n *\n * Spinner Variants:\n * - **Standalone (Default)**: Track has a blue color.\n * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\n * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\n * icon or label text.\n *\n * Spinner Sizes:\n * - **Large (96px)**: Use when replacing entire regions or pages that are still loading\n * - **MidSize (48px) (Default)**: Use for most use cases.\n * - **Small (24px)**: Use for inline with loading text.\n *\n * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\n * CSS property.\n *\n * Spinner Colors:\n * - **Default**: Use for most use cases.\n * - **Inverted**: Only to be used within inverted components, such as coachmarks.\n *\n * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\n * will be unset\n * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.\n *\n * @tagname mdc-spinner\n *\n * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.\n * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.\n * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.\n * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.\n *\n * @csspart container - The svg which contains the circle spinner.\n * @csspart circle - The circle of the spinner.\n */",
14438
- "customElement": true
14439
- }
14440
- ],
14441
- "exports": [
14442
- {
14443
- "kind": "js",
14444
- "name": "default",
14445
- "declaration": {
14446
- "name": "Spinner",
14447
- "module": "components/spinner/spinner.component.js"
14448
- }
14449
- }
14450
- ]
14451
- },
14452
14452
  {
14453
14453
  "kind": "javascript-module",
14454
14454
  "path": "components/tab/tab.component.js",
@@ -1,6 +1,6 @@
1
1
  export { default as AlertChip } from './alertchip';
2
- export { default as Avatar } from './avatar';
3
2
  export { default as AvatarButton } from './avatarbutton';
3
+ export { default as Avatar } from './avatar';
4
4
  export { default as Badge } from './badge';
5
5
  export { default as Brandvisual } from './brandvisual';
6
6
  export { default as Bullet } from './bullet';
@@ -28,8 +28,8 @@ export { default as Presence } from './presence';
28
28
  export { default as Progressbar } from './progressbar';
29
29
  export { default as Radio } from './radio';
30
30
  export { default as RadioGroup } from './radiogroup';
31
- export { default as Searchfield } from './searchfield';
32
31
  export { default as Spinner } from './spinner';
32
+ export { default as Searchfield } from './searchfield';
33
33
  export { default as Tab } from './tab';
34
34
  export { default as Text } from './text';
35
35
  export { default as Textarea } from './textarea';
@@ -1,6 +1,6 @@
1
1
  export { default as AlertChip } from './alertchip';
2
- export { default as Avatar } from './avatar';
3
2
  export { default as AvatarButton } from './avatarbutton';
3
+ export { default as Avatar } from './avatar';
4
4
  export { default as Badge } from './badge';
5
5
  export { default as Brandvisual } from './brandvisual';
6
6
  export { default as Bullet } from './bullet';
@@ -28,8 +28,8 @@ export { default as Presence } from './presence';
28
28
  export { default as Progressbar } from './progressbar';
29
29
  export { default as Radio } from './radio';
30
30
  export { default as RadioGroup } from './radiogroup';
31
- export { default as Searchfield } from './searchfield';
32
31
  export { default as Spinner } from './spinner';
32
+ export { default as Searchfield } from './searchfield';
33
33
  export { default as Tab } from './tab';
34
34
  export { default as Text } from './text';
35
35
  export { default as Textarea } from './textarea';
package/package.json CHANGED
@@ -38,5 +38,5 @@
38
38
  "lit": "^3.2.0",
39
39
  "uuid": "^11.0.5"
40
40
  },
41
- "version": "0.43.1"
41
+ "version": "0.44.0"
42
42
  }