@momentum-design/components 0.22.4 → 0.22.5

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.
@@ -2,6 +2,250 @@
2
2
  "schemaVersion": "1.0.0",
3
3
  "readme": "",
4
4
  "modules": [
5
+ {
6
+ "kind": "javascript-module",
7
+ "path": "components/avatar/avatar.component.js",
8
+ "declarations": [
9
+ {
10
+ "kind": "class",
11
+ "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.",
12
+ "name": "Avatar",
13
+ "cssProperties": [
14
+ {
15
+ "description": "Allows customization of the default background color.",
16
+ "name": "--mdc-avatar-default-background-color"
17
+ },
18
+ {
19
+ "description": "Allows customization of the default foreground color.",
20
+ "name": "--mdc-avatar-default-foreground-color"
21
+ },
22
+ {
23
+ "description": "Allows customization of the loading indicator background color.",
24
+ "name": "--mdc-avatar-loading-indicator-background-color"
25
+ },
26
+ {
27
+ "description": "Allows customization of the loading indicator foreground color.",
28
+ "name": "--mdc-avatar-loading-indicator-foreground-color"
29
+ },
30
+ {
31
+ "description": "Allows customization of the loading overlay background color.",
32
+ "name": "--mdc-avatar-loading-overlay-background-color"
33
+ }
34
+ ],
35
+ "members": [
36
+ {
37
+ "kind": "field",
38
+ "name": "src",
39
+ "type": {
40
+ "text": "string | undefined"
41
+ },
42
+ "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.",
43
+ "attribute": "src",
44
+ "inheritedFrom": {
45
+ "name": "AvatarComponentMixin",
46
+ "module": "utils/mixins/AvatarComponentMixin.js"
47
+ }
48
+ },
49
+ {
50
+ "kind": "field",
51
+ "name": "initials",
52
+ "type": {
53
+ "text": "string | undefined"
54
+ },
55
+ "description": "The initials to be displayed for the avatar.",
56
+ "attribute": "initials",
57
+ "inheritedFrom": {
58
+ "name": "AvatarComponentMixin",
59
+ "module": "utils/mixins/AvatarComponentMixin.js"
60
+ }
61
+ },
62
+ {
63
+ "kind": "field",
64
+ "name": "presence",
65
+ "type": {
66
+ "text": "PresenceType | undefined"
67
+ },
68
+ "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`",
69
+ "attribute": "presence",
70
+ "inheritedFrom": {
71
+ "name": "AvatarComponentMixin",
72
+ "module": "utils/mixins/AvatarComponentMixin.js"
73
+ }
74
+ },
75
+ {
76
+ "kind": "field",
77
+ "name": "size",
78
+ "type": {
79
+ "text": "AvatarSize"
80
+ },
81
+ "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
82
+ "default": "32",
83
+ "attribute": "size",
84
+ "reflects": true,
85
+ "inheritedFrom": {
86
+ "name": "AvatarComponentMixin",
87
+ "module": "utils/mixins/AvatarComponentMixin.js"
88
+ }
89
+ },
90
+ {
91
+ "kind": "field",
92
+ "name": "counter",
93
+ "type": {
94
+ "text": "number | undefined"
95
+ },
96
+ "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`.",
97
+ "attribute": "counter",
98
+ "inheritedFrom": {
99
+ "name": "AvatarComponentMixin",
100
+ "module": "utils/mixins/AvatarComponentMixin.js"
101
+ }
102
+ },
103
+ {
104
+ "kind": "field",
105
+ "name": "isTyping",
106
+ "type": {
107
+ "text": "boolean"
108
+ },
109
+ "default": "false",
110
+ "description": "Represents the typing indicator when the user is typing.",
111
+ "attribute": "is-typing",
112
+ "inheritedFrom": {
113
+ "name": "AvatarComponentMixin",
114
+ "module": "utils/mixins/AvatarComponentMixin.js"
115
+ }
116
+ },
117
+ {
118
+ "kind": "field",
119
+ "name": "iconName",
120
+ "type": {
121
+ "text": "IconNames | undefined"
122
+ },
123
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
124
+ "attribute": "icon-name",
125
+ "inheritedFrom": {
126
+ "name": "IconNameMixin",
127
+ "module": "utils/mixins/IconNameMixin.js"
128
+ }
129
+ }
130
+ ],
131
+ "mixins": [
132
+ {
133
+ "name": "AvatarComponentMixin",
134
+ "module": "/src/utils/mixins/AvatarComponentMixin"
135
+ },
136
+ {
137
+ "name": "IconNameMixin",
138
+ "module": "/src/utils/mixins/IconNameMixin"
139
+ }
140
+ ],
141
+ "superclass": {
142
+ "name": "Component",
143
+ "module": "/src/models"
144
+ },
145
+ "tagName": "mdc-avatar",
146
+ "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 */",
147
+ "customElement": true,
148
+ "attributes": [
149
+ {
150
+ "name": "src",
151
+ "type": {
152
+ "text": "string | undefined"
153
+ },
154
+ "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.",
155
+ "fieldName": "src",
156
+ "inheritedFrom": {
157
+ "name": "AvatarComponentMixin",
158
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
159
+ }
160
+ },
161
+ {
162
+ "name": "initials",
163
+ "type": {
164
+ "text": "string | undefined"
165
+ },
166
+ "description": "The initials to be displayed for the avatar.",
167
+ "fieldName": "initials",
168
+ "inheritedFrom": {
169
+ "name": "AvatarComponentMixin",
170
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
171
+ }
172
+ },
173
+ {
174
+ "name": "presence",
175
+ "type": {
176
+ "text": "PresenceType | undefined"
177
+ },
178
+ "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`",
179
+ "fieldName": "presence",
180
+ "inheritedFrom": {
181
+ "name": "AvatarComponentMixin",
182
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
183
+ }
184
+ },
185
+ {
186
+ "name": "size",
187
+ "type": {
188
+ "text": "AvatarSize"
189
+ },
190
+ "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
191
+ "default": "32",
192
+ "fieldName": "size",
193
+ "inheritedFrom": {
194
+ "name": "AvatarComponentMixin",
195
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
196
+ }
197
+ },
198
+ {
199
+ "name": "counter",
200
+ "type": {
201
+ "text": "number | undefined"
202
+ },
203
+ "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`.",
204
+ "fieldName": "counter",
205
+ "inheritedFrom": {
206
+ "name": "AvatarComponentMixin",
207
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
208
+ }
209
+ },
210
+ {
211
+ "name": "is-typing",
212
+ "type": {
213
+ "text": "boolean"
214
+ },
215
+ "default": "false",
216
+ "description": "Represents the typing indicator when the user is typing.",
217
+ "fieldName": "isTyping",
218
+ "inheritedFrom": {
219
+ "name": "AvatarComponentMixin",
220
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
221
+ }
222
+ },
223
+ {
224
+ "name": "icon-name",
225
+ "type": {
226
+ "text": "IconNames | undefined"
227
+ },
228
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
229
+ "fieldName": "iconName",
230
+ "inheritedFrom": {
231
+ "name": "IconNameMixin",
232
+ "module": "src/utils/mixins/IconNameMixin.ts"
233
+ }
234
+ }
235
+ ]
236
+ }
237
+ ],
238
+ "exports": [
239
+ {
240
+ "kind": "js",
241
+ "name": "default",
242
+ "declaration": {
243
+ "name": "Avatar",
244
+ "module": "components/avatar/avatar.component.js"
245
+ }
246
+ }
247
+ ]
248
+ },
5
249
  {
6
250
  "kind": "javascript-module",
7
251
  "path": "components/avatarbutton/avatarbutton.component.js",
@@ -877,260 +1121,16 @@
877
1121
  },
878
1122
  {
879
1123
  "kind": "javascript-module",
880
- "path": "components/avatar/avatar.component.js",
1124
+ "path": "components/bullet/bullet.component.js",
881
1125
  "declarations": [
882
1126
  {
883
1127
  "kind": "class",
884
- "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.",
885
- "name": "Avatar",
1128
+ "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
1129
+ "name": "Bullet",
886
1130
  "cssProperties": [
887
1131
  {
888
- "description": "Allows customization of the default background color.",
889
- "name": "--mdc-avatar-default-background-color"
890
- },
891
- {
892
- "description": "Allows customization of the default foreground color.",
893
- "name": "--mdc-avatar-default-foreground-color"
894
- },
895
- {
896
- "description": "Allows customization of the loading indicator background color.",
897
- "name": "--mdc-avatar-loading-indicator-background-color"
898
- },
899
- {
900
- "description": "Allows customization of the loading indicator foreground color.",
901
- "name": "--mdc-avatar-loading-indicator-foreground-color"
902
- },
903
- {
904
- "description": "Allows customization of the loading overlay background color.",
905
- "name": "--mdc-avatar-loading-overlay-background-color"
906
- }
907
- ],
908
- "members": [
909
- {
910
- "kind": "field",
911
- "name": "src",
912
- "type": {
913
- "text": "string | undefined"
914
- },
915
- "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.",
916
- "attribute": "src",
917
- "inheritedFrom": {
918
- "name": "AvatarComponentMixin",
919
- "module": "utils/mixins/AvatarComponentMixin.js"
920
- }
921
- },
922
- {
923
- "kind": "field",
924
- "name": "initials",
925
- "type": {
926
- "text": "string | undefined"
927
- },
928
- "description": "The initials to be displayed for the avatar.",
929
- "attribute": "initials",
930
- "inheritedFrom": {
931
- "name": "AvatarComponentMixin",
932
- "module": "utils/mixins/AvatarComponentMixin.js"
933
- }
934
- },
935
- {
936
- "kind": "field",
937
- "name": "presence",
938
- "type": {
939
- "text": "PresenceType | undefined"
940
- },
941
- "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`",
942
- "attribute": "presence",
943
- "inheritedFrom": {
944
- "name": "AvatarComponentMixin",
945
- "module": "utils/mixins/AvatarComponentMixin.js"
946
- }
947
- },
948
- {
949
- "kind": "field",
950
- "name": "size",
951
- "type": {
952
- "text": "AvatarSize"
953
- },
954
- "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
955
- "default": "32",
956
- "attribute": "size",
957
- "reflects": true,
958
- "inheritedFrom": {
959
- "name": "AvatarComponentMixin",
960
- "module": "utils/mixins/AvatarComponentMixin.js"
961
- }
962
- },
963
- {
964
- "kind": "field",
965
- "name": "counter",
966
- "type": {
967
- "text": "number | undefined"
968
- },
969
- "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`.",
970
- "attribute": "counter",
971
- "inheritedFrom": {
972
- "name": "AvatarComponentMixin",
973
- "module": "utils/mixins/AvatarComponentMixin.js"
974
- }
975
- },
976
- {
977
- "kind": "field",
978
- "name": "isTyping",
979
- "type": {
980
- "text": "boolean"
981
- },
982
- "default": "false",
983
- "description": "Represents the typing indicator when the user is typing.",
984
- "attribute": "is-typing",
985
- "inheritedFrom": {
986
- "name": "AvatarComponentMixin",
987
- "module": "utils/mixins/AvatarComponentMixin.js"
988
- }
989
- },
990
- {
991
- "kind": "field",
992
- "name": "iconName",
993
- "type": {
994
- "text": "IconNames | undefined"
995
- },
996
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
997
- "attribute": "icon-name",
998
- "inheritedFrom": {
999
- "name": "IconNameMixin",
1000
- "module": "utils/mixins/IconNameMixin.js"
1001
- }
1002
- }
1003
- ],
1004
- "mixins": [
1005
- {
1006
- "name": "AvatarComponentMixin",
1007
- "module": "/src/utils/mixins/AvatarComponentMixin"
1008
- },
1009
- {
1010
- "name": "IconNameMixin",
1011
- "module": "/src/utils/mixins/IconNameMixin"
1012
- }
1013
- ],
1014
- "superclass": {
1015
- "name": "Component",
1016
- "module": "/src/models"
1017
- },
1018
- "tagName": "mdc-avatar",
1019
- "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 */",
1020
- "customElement": true,
1021
- "attributes": [
1022
- {
1023
- "name": "src",
1024
- "type": {
1025
- "text": "string | undefined"
1026
- },
1027
- "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.",
1028
- "fieldName": "src",
1029
- "inheritedFrom": {
1030
- "name": "AvatarComponentMixin",
1031
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
1032
- }
1033
- },
1034
- {
1035
- "name": "initials",
1036
- "type": {
1037
- "text": "string | undefined"
1038
- },
1039
- "description": "The initials to be displayed for the avatar.",
1040
- "fieldName": "initials",
1041
- "inheritedFrom": {
1042
- "name": "AvatarComponentMixin",
1043
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
1044
- }
1045
- },
1046
- {
1047
- "name": "presence",
1048
- "type": {
1049
- "text": "PresenceType | undefined"
1050
- },
1051
- "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`",
1052
- "fieldName": "presence",
1053
- "inheritedFrom": {
1054
- "name": "AvatarComponentMixin",
1055
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
1056
- }
1057
- },
1058
- {
1059
- "name": "size",
1060
- "type": {
1061
- "text": "AvatarSize"
1062
- },
1063
- "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
1064
- "default": "32",
1065
- "fieldName": "size",
1066
- "inheritedFrom": {
1067
- "name": "AvatarComponentMixin",
1068
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
1069
- }
1070
- },
1071
- {
1072
- "name": "counter",
1073
- "type": {
1074
- "text": "number | undefined"
1075
- },
1076
- "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`.",
1077
- "fieldName": "counter",
1078
- "inheritedFrom": {
1079
- "name": "AvatarComponentMixin",
1080
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
1081
- }
1082
- },
1083
- {
1084
- "name": "is-typing",
1085
- "type": {
1086
- "text": "boolean"
1087
- },
1088
- "default": "false",
1089
- "description": "Represents the typing indicator when the user is typing.",
1090
- "fieldName": "isTyping",
1091
- "inheritedFrom": {
1092
- "name": "AvatarComponentMixin",
1093
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
1094
- }
1095
- },
1096
- {
1097
- "name": "icon-name",
1098
- "type": {
1099
- "text": "IconNames | undefined"
1100
- },
1101
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
1102
- "fieldName": "iconName",
1103
- "inheritedFrom": {
1104
- "name": "IconNameMixin",
1105
- "module": "src/utils/mixins/IconNameMixin.ts"
1106
- }
1107
- }
1108
- ]
1109
- }
1110
- ],
1111
- "exports": [
1112
- {
1113
- "kind": "js",
1114
- "name": "default",
1115
- "declaration": {
1116
- "name": "Avatar",
1117
- "module": "components/avatar/avatar.component.js"
1118
- }
1119
- }
1120
- ]
1121
- },
1122
- {
1123
- "kind": "javascript-module",
1124
- "path": "components/bullet/bullet.component.js",
1125
- "declarations": [
1126
- {
1127
- "kind": "class",
1128
- "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
1129
- "name": "Bullet",
1130
- "cssProperties": [
1131
- {
1132
- "description": "background color of the bullet",
1133
- "name": "--mdc-bullet-background-color"
1132
+ "description": "background color of the bullet",
1133
+ "name": "--mdc-bullet-background-color"
1134
1134
  },
1135
1135
  {
1136
1136
  "description": "small size value of the bullet",
@@ -3010,27 +3010,47 @@
3010
3010
  },
3011
3011
  {
3012
3012
  "kind": "method",
3013
- "name": "getIconData",
3014
- "privacy": "private",
3015
- "description": "Get Icon Data function which will fetch the icon (currently only svg)\nand sets state and attributes once fetched successfully\n\nThis method uses abortController.signal to cancel the fetch request when the component is disconnected or updated.\nIf the request is aborted after the fetch() call has been fulfilled but before the response body has been read,\nthen attempting to read the response body will reject with an AbortError exception."
3016
- },
3017
- {
3018
- "kind": "method",
3019
- "name": "handleIconLoadedSuccess",
3013
+ "name": "prepareIconElement",
3020
3014
  "privacy": "private",
3021
3015
  "parameters": [
3022
3016
  {
3023
- "name": "iconHtml",
3017
+ "name": "iconData",
3024
3018
  "type": {
3025
- "text": "HTMLElement"
3019
+ "text": "string"
3026
3020
  },
3027
- "description": "The icon html element which has been fetched from the icon provider."
3021
+ "description": "The icon string to be parsed"
3028
3022
  }
3029
3023
  ],
3030
- "description": "Sets the iconData state to the fetched icon.\nDispatches a 'load' event on the component once the icon has been successfully loaded."
3031
- },
3032
- {
3033
- "kind": "method",
3024
+ "description": "Parse the icon string to an html element, set the attributes and\nreturn the icon element",
3025
+ "return": {
3026
+ "type": {
3027
+ "text": ""
3028
+ }
3029
+ }
3030
+ },
3031
+ {
3032
+ "kind": "method",
3033
+ "name": "getIconData",
3034
+ "privacy": "private",
3035
+ "description": "Fetches the icon (currently only svg) and sets state and attributes once fetched successfully\n\nThis method uses abortController.signal to cancel the fetch request when the component is disconnected or updated.\nIf the request is aborted after the fetch() call has been fulfilled but before the response body has been read,\nthen attempting to read the response body will reject with an AbortError exception."
3036
+ },
3037
+ {
3038
+ "kind": "method",
3039
+ "name": "handleIconLoadedSuccess",
3040
+ "privacy": "private",
3041
+ "parameters": [
3042
+ {
3043
+ "name": "iconHtml",
3044
+ "type": {
3045
+ "text": "HTMLElement"
3046
+ },
3047
+ "description": "The icon html element which has been fetched from the icon provider."
3048
+ }
3049
+ ],
3050
+ "description": "Sets the iconData state to the fetched icon.\nDispatches a 'load' event on the component once the icon has been successfully loaded."
3051
+ },
3052
+ {
3053
+ "kind": "method",
3034
3054
  "name": "handleIconLoadedFailure",
3035
3055
  "privacy": "private",
3036
3056
  "parameters": [
@@ -3111,144 +3131,6 @@
3111
3131
  }
3112
3132
  ]
3113
3133
  },
3114
- {
3115
- "kind": "javascript-module",
3116
- "path": "components/iconprovider/iconprovider.component.js",
3117
- "declarations": [
3118
- {
3119
- "kind": "class",
3120
- "description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nBundling icons will be up to the consumer of this component, such\nthat only a url has to be passed in from which the icons will be\nfetched.",
3121
- "name": "IconProvider",
3122
- "slots": [
3123
- {
3124
- "description": "children",
3125
- "name": ""
3126
- }
3127
- ],
3128
- "members": [
3129
- {
3130
- "kind": "field",
3131
- "name": "Context",
3132
- "privacy": "public",
3133
- "static": true,
3134
- "description": "Context object of the IconProvider, to be consumed by child components",
3135
- "readonly": true
3136
- },
3137
- {
3138
- "kind": "field",
3139
- "name": "url",
3140
- "type": {
3141
- "text": "string | undefined"
3142
- },
3143
- "description": "Url of where icons will be fetched from",
3144
- "attribute": "url"
3145
- },
3146
- {
3147
- "kind": "field",
3148
- "name": "fileExtension",
3149
- "type": {
3150
- "text": "string | undefined"
3151
- },
3152
- "description": "File extension of icons",
3153
- "default": "svg",
3154
- "attribute": "file-extension",
3155
- "reflects": true
3156
- },
3157
- {
3158
- "kind": "field",
3159
- "name": "lengthUnit",
3160
- "type": {
3161
- "text": "string"
3162
- },
3163
- "description": "Length unit used for sizing of icons",
3164
- "default": "em",
3165
- "attribute": "length-unit",
3166
- "reflects": true
3167
- },
3168
- {
3169
- "kind": "field",
3170
- "name": "size",
3171
- "type": {
3172
- "text": "number | undefined"
3173
- },
3174
- "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
3175
- "default": "1",
3176
- "attribute": "size",
3177
- "reflects": true
3178
- },
3179
- {
3180
- "kind": "method",
3181
- "name": "updateValuesInContext",
3182
- "privacy": "private"
3183
- },
3184
- {
3185
- "kind": "method",
3186
- "name": "updateContext",
3187
- "privacy": "protected",
3188
- "return": {
3189
- "type": {
3190
- "text": "void"
3191
- }
3192
- }
3193
- }
3194
- ],
3195
- "attributes": [
3196
- {
3197
- "name": "url",
3198
- "type": {
3199
- "text": "string | undefined"
3200
- },
3201
- "description": "Url of where icons will be fetched from",
3202
- "fieldName": "url"
3203
- },
3204
- {
3205
- "name": "file-extension",
3206
- "type": {
3207
- "text": "string | undefined"
3208
- },
3209
- "description": "File extension of icons",
3210
- "default": "svg",
3211
- "fieldName": "fileExtension"
3212
- },
3213
- {
3214
- "name": "length-unit",
3215
- "type": {
3216
- "text": "string"
3217
- },
3218
- "description": "Length unit used for sizing of icons",
3219
- "default": "em",
3220
- "fieldName": "lengthUnit"
3221
- },
3222
- {
3223
- "name": "size",
3224
- "type": {
3225
- "text": "number | undefined"
3226
- },
3227
- "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
3228
- "default": "1",
3229
- "fieldName": "size"
3230
- }
3231
- ],
3232
- "superclass": {
3233
- "name": "Provider",
3234
- "module": "/src/models"
3235
- },
3236
- "tagName": "mdc-iconprovider",
3237
- "jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Bundling icons will be up to the consumer of this component, such\n * that only a url has to be passed in from which the icons will be\n * fetched.\n *\n * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
3238
- "customElement": true
3239
- }
3240
- ],
3241
- "exports": [
3242
- {
3243
- "kind": "js",
3244
- "name": "default",
3245
- "declaration": {
3246
- "name": "IconProvider",
3247
- "module": "components/iconprovider/iconprovider.component.js"
3248
- }
3249
- }
3250
- ]
3251
- },
3252
3134
  {
3253
3135
  "kind": "javascript-module",
3254
3136
  "path": "components/input/input.component.js",
@@ -4380,109 +4262,148 @@
4380
4262
  },
4381
4263
  {
4382
4264
  "kind": "javascript-module",
4383
- "path": "components/modalcontainer/modalcontainer.component.js",
4265
+ "path": "components/iconprovider/iconprovider.component.js",
4384
4266
  "declarations": [
4385
4267
  {
4386
4268
  "kind": "class",
4387
- "description": "The `mdc-modalcontainer` component is an element used to\ndisplay a modal container that can further be used in popover.",
4388
- "name": "Modalcontainer",
4389
- "cssProperties": [
4269
+ "description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nBundling icons will be up to the consumer of this component, such\nthat only a url has to be passed in from which the icons will be\nfetched.\n\nIf `shouldCache` is set to true, the IconProvider will cache the icons\nin a Map to avoid fetching the same icon multiple times over the network.\nThis is useful when the same icon is used multiple times in the application.\nKeep in mind that this cache is not persisted and will be lost when the\nIconProvider is removed from the DOM.",
4270
+ "name": "IconProvider",
4271
+ "slots": [
4390
4272
  {
4391
- "description": "primary background color of the modalcontainer",
4392
- "name": "--mdc-modalcontainer-primary-background-color"
4393
- },
4273
+ "description": "children",
4274
+ "name": ""
4275
+ }
4276
+ ],
4277
+ "members": [
4394
4278
  {
4395
- "description": "border color of the modalcontainer",
4396
- "name": "--mdc-modalcontainer-border-color"
4279
+ "kind": "field",
4280
+ "name": "Context",
4281
+ "privacy": "public",
4282
+ "static": true,
4283
+ "description": "Context object of the IconProvider, to be consumed by child components",
4284
+ "readonly": true
4397
4285
  },
4398
4286
  {
4399
- "description": "inverted background color of the modalcontainer",
4400
- "name": "--mdc-modalcontainer-inverted-background-color"
4287
+ "kind": "field",
4288
+ "name": "url",
4289
+ "type": {
4290
+ "text": "string | undefined"
4291
+ },
4292
+ "description": "Url of where icons will be fetched from",
4293
+ "attribute": "url"
4401
4294
  },
4402
4295
  {
4403
- "description": "inverted border color of the modalcontainer",
4404
- "name": "--mdc-modalcontainer-inverted-border-color"
4296
+ "kind": "field",
4297
+ "name": "fileExtension",
4298
+ "type": {
4299
+ "text": "string | undefined"
4300
+ },
4301
+ "description": "File extension of icons",
4302
+ "default": "svg",
4303
+ "attribute": "file-extension",
4304
+ "reflects": true
4405
4305
  },
4406
- {
4407
- "description": "inverted text color of the modalcontainer",
4408
- "name": "--mdc-modalcontainer-inverted-text-color"
4409
- }
4410
- ],
4411
- "slots": [
4412
- {
4413
- "description": "Default slot for modal container",
4414
- "name": ""
4415
- }
4416
- ],
4417
- "members": [
4418
4306
  {
4419
4307
  "kind": "field",
4420
- "name": "color",
4308
+ "name": "lengthUnit",
4421
4309
  "type": {
4422
- "text": "ModalContainerColor"
4310
+ "text": "string"
4423
4311
  },
4424
- "description": "Color of the modalcontainer\n- **tonal**\n- **contrast**",
4425
- "default": "tonal",
4426
- "attribute": "color",
4312
+ "description": "Length unit used for sizing of icons",
4313
+ "default": "em",
4314
+ "attribute": "length-unit",
4427
4315
  "reflects": true
4428
4316
  },
4429
4317
  {
4430
4318
  "kind": "field",
4431
- "name": "elevation",
4319
+ "name": "size",
4432
4320
  "type": {
4433
- "text": "ModalContainerElevation"
4321
+ "text": "number | undefined"
4434
4322
  },
4435
- "description": "Elevation of the modalcontainer where each value corresponds to a different drop shadow.\n- **0**\n- **1**\n- **2**\n- **3**\n- **4**",
4436
- "default": "0",
4437
- "attribute": "elevation",
4323
+ "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
4324
+ "default": "1",
4325
+ "attribute": "size",
4438
4326
  "reflects": true
4439
4327
  },
4440
4328
  {
4441
4329
  "kind": "field",
4442
- "name": "role",
4330
+ "name": "shouldCache",
4443
4331
  "type": {
4444
- "text": "ModalContainerRole"
4332
+ "text": "boolean | undefined"
4445
4333
  },
4446
- "description": "Role of the modalcontainer",
4447
- "default": "dialog",
4448
- "attribute": "role"
4334
+ "description": "If the IconProvider should cache the icons\nin a Map to avoid fetching the same icon multiple times",
4335
+ "default": "false",
4336
+ "attribute": "should-cache",
4337
+ "reflects": true
4338
+ },
4339
+ {
4340
+ "kind": "method",
4341
+ "name": "updateValuesInContext",
4342
+ "privacy": "private"
4343
+ },
4344
+ {
4345
+ "kind": "method",
4346
+ "name": "updateContext",
4347
+ "privacy": "protected",
4348
+ "return": {
4349
+ "type": {
4350
+ "text": "void"
4351
+ }
4352
+ }
4449
4353
  }
4450
4354
  ],
4451
4355
  "attributes": [
4452
4356
  {
4453
- "name": "color",
4357
+ "name": "url",
4454
4358
  "type": {
4455
- "text": "ModalContainerColor"
4359
+ "text": "string | undefined"
4456
4360
  },
4457
- "description": "Color of the modalcontainer\n- **tonal**\n- **contrast**",
4458
- "default": "tonal",
4459
- "fieldName": "color"
4361
+ "description": "Url of where icons will be fetched from",
4362
+ "fieldName": "url"
4460
4363
  },
4461
4364
  {
4462
- "name": "elevation",
4365
+ "name": "file-extension",
4463
4366
  "type": {
4464
- "text": "ModalContainerElevation"
4367
+ "text": "string | undefined"
4465
4368
  },
4466
- "description": "Elevation of the modalcontainer where each value corresponds to a different drop shadow.\n- **0**\n- **1**\n- **2**\n- **3**\n- **4**",
4467
- "default": "0",
4468
- "fieldName": "elevation"
4369
+ "description": "File extension of icons",
4370
+ "default": "svg",
4371
+ "fieldName": "fileExtension"
4469
4372
  },
4470
4373
  {
4471
- "name": "role",
4374
+ "name": "length-unit",
4472
4375
  "type": {
4473
- "text": "ModalContainerRole"
4376
+ "text": "string"
4474
4377
  },
4475
- "description": "Role of the modalcontainer",
4476
- "default": "dialog",
4477
- "fieldName": "role"
4378
+ "description": "Length unit used for sizing of icons",
4379
+ "default": "em",
4380
+ "fieldName": "lengthUnit"
4381
+ },
4382
+ {
4383
+ "name": "size",
4384
+ "type": {
4385
+ "text": "number | undefined"
4386
+ },
4387
+ "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
4388
+ "default": "1",
4389
+ "fieldName": "size"
4390
+ },
4391
+ {
4392
+ "name": "should-cache",
4393
+ "type": {
4394
+ "text": "boolean | undefined"
4395
+ },
4396
+ "description": "If the IconProvider should cache the icons\nin a Map to avoid fetching the same icon multiple times",
4397
+ "default": "false",
4398
+ "fieldName": "shouldCache"
4478
4399
  }
4479
4400
  ],
4480
4401
  "superclass": {
4481
- "name": "Component",
4402
+ "name": "Provider",
4482
4403
  "module": "/src/models"
4483
4404
  },
4484
- "tagName": "mdc-modalcontainer",
4485
- "jsDoc": "/**\n * The `mdc-modalcontainer` component is an element used to\n * display a modal container that can further be used in popover.\n *\n * @tagname mdc-modalcontainer\n *\n * @cssproperty --mdc-modalcontainer-primary-background-color - primary background color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-border-color - border color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-background-color - inverted background color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-border-color - inverted border color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-text-color - inverted text color of the modalcontainer\n *\n * @slot - Default slot for modal container\n */",
4405
+ "tagName": "mdc-iconprovider",
4406
+ "jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Bundling icons will be up to the consumer of this component, such\n * that only a url has to be passed in from which the icons will be\n * fetched.\n *\n * If `shouldCache` is set to true, the IconProvider will cache the icons\n * in a Map to avoid fetching the same icon multiple times over the network.\n * This is useful when the same icon is used multiple times in the application.\n * Keep in mind that this cache is not persisted and will be lost when the\n * IconProvider is removed from the DOM.\n *\n * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
4486
4407
  "customElement": true
4487
4408
  }
4488
4409
  ],
@@ -4491,8 +4412,8 @@
4491
4412
  "kind": "js",
4492
4413
  "name": "default",
4493
4414
  "declaration": {
4494
- "name": "Modalcontainer",
4495
- "module": "components/modalcontainer/modalcontainer.component.js"
4415
+ "name": "IconProvider",
4416
+ "module": "components/iconprovider/iconprovider.component.js"
4496
4417
  }
4497
4418
  }
4498
4419
  ]
@@ -4667,6 +4588,125 @@
4667
4588
  }
4668
4589
  ]
4669
4590
  },
4591
+ {
4592
+ "kind": "javascript-module",
4593
+ "path": "components/modalcontainer/modalcontainer.component.js",
4594
+ "declarations": [
4595
+ {
4596
+ "kind": "class",
4597
+ "description": "The `mdc-modalcontainer` component is an element used to\ndisplay a modal container that can further be used in popover.",
4598
+ "name": "Modalcontainer",
4599
+ "cssProperties": [
4600
+ {
4601
+ "description": "primary background color of the modalcontainer",
4602
+ "name": "--mdc-modalcontainer-primary-background-color"
4603
+ },
4604
+ {
4605
+ "description": "border color of the modalcontainer",
4606
+ "name": "--mdc-modalcontainer-border-color"
4607
+ },
4608
+ {
4609
+ "description": "inverted background color of the modalcontainer",
4610
+ "name": "--mdc-modalcontainer-inverted-background-color"
4611
+ },
4612
+ {
4613
+ "description": "inverted border color of the modalcontainer",
4614
+ "name": "--mdc-modalcontainer-inverted-border-color"
4615
+ },
4616
+ {
4617
+ "description": "inverted text color of the modalcontainer",
4618
+ "name": "--mdc-modalcontainer-inverted-text-color"
4619
+ }
4620
+ ],
4621
+ "slots": [
4622
+ {
4623
+ "description": "Default slot for modal container",
4624
+ "name": ""
4625
+ }
4626
+ ],
4627
+ "members": [
4628
+ {
4629
+ "kind": "field",
4630
+ "name": "color",
4631
+ "type": {
4632
+ "text": "ModalContainerColor"
4633
+ },
4634
+ "description": "Color of the modalcontainer\n- **tonal**\n- **contrast**",
4635
+ "default": "tonal",
4636
+ "attribute": "color",
4637
+ "reflects": true
4638
+ },
4639
+ {
4640
+ "kind": "field",
4641
+ "name": "elevation",
4642
+ "type": {
4643
+ "text": "ModalContainerElevation"
4644
+ },
4645
+ "description": "Elevation of the modalcontainer where each value corresponds to a different drop shadow.\n- **0**\n- **1**\n- **2**\n- **3**\n- **4**",
4646
+ "default": "0",
4647
+ "attribute": "elevation",
4648
+ "reflects": true
4649
+ },
4650
+ {
4651
+ "kind": "field",
4652
+ "name": "role",
4653
+ "type": {
4654
+ "text": "ModalContainerRole"
4655
+ },
4656
+ "description": "Role of the modalcontainer",
4657
+ "default": "dialog",
4658
+ "attribute": "role"
4659
+ }
4660
+ ],
4661
+ "attributes": [
4662
+ {
4663
+ "name": "color",
4664
+ "type": {
4665
+ "text": "ModalContainerColor"
4666
+ },
4667
+ "description": "Color of the modalcontainer\n- **tonal**\n- **contrast**",
4668
+ "default": "tonal",
4669
+ "fieldName": "color"
4670
+ },
4671
+ {
4672
+ "name": "elevation",
4673
+ "type": {
4674
+ "text": "ModalContainerElevation"
4675
+ },
4676
+ "description": "Elevation of the modalcontainer where each value corresponds to a different drop shadow.\n- **0**\n- **1**\n- **2**\n- **3**\n- **4**",
4677
+ "default": "0",
4678
+ "fieldName": "elevation"
4679
+ },
4680
+ {
4681
+ "name": "role",
4682
+ "type": {
4683
+ "text": "ModalContainerRole"
4684
+ },
4685
+ "description": "Role of the modalcontainer",
4686
+ "default": "dialog",
4687
+ "fieldName": "role"
4688
+ }
4689
+ ],
4690
+ "superclass": {
4691
+ "name": "Component",
4692
+ "module": "/src/models"
4693
+ },
4694
+ "tagName": "mdc-modalcontainer",
4695
+ "jsDoc": "/**\n * The `mdc-modalcontainer` component is an element used to\n * display a modal container that can further be used in popover.\n *\n * @tagname mdc-modalcontainer\n *\n * @cssproperty --mdc-modalcontainer-primary-background-color - primary background color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-border-color - border color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-background-color - inverted background color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-border-color - inverted border color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-text-color - inverted text color of the modalcontainer\n *\n * @slot - Default slot for modal container\n */",
4696
+ "customElement": true
4697
+ }
4698
+ ],
4699
+ "exports": [
4700
+ {
4701
+ "kind": "js",
4702
+ "name": "default",
4703
+ "declaration": {
4704
+ "name": "Modalcontainer",
4705
+ "module": "components/modalcontainer/modalcontainer.component.js"
4706
+ }
4707
+ }
4708
+ ]
4709
+ },
4670
4710
  {
4671
4711
  "kind": "javascript-module",
4672
4712
  "path": "components/radio/radio.component.js",