@momentum-design/components 0.27.6 → 0.28.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +503 -503
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +2 -2
- package/package.json +1 -1
|
@@ -2,250 +2,6 @@
|
|
|
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
|
-
},
|
|
249
5
|
{
|
|
250
6
|
"kind": "javascript-module",
|
|
251
7
|
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
@@ -1163,20 +919,264 @@
|
|
|
1163
919
|
},
|
|
1164
920
|
{
|
|
1165
921
|
"kind": "javascript-module",
|
|
1166
|
-
"path": "components/
|
|
922
|
+
"path": "components/avatar/avatar.component.js",
|
|
1167
923
|
"declarations": [
|
|
1168
924
|
{
|
|
1169
925
|
"kind": "class",
|
|
1170
|
-
"description": "
|
|
1171
|
-
"name": "
|
|
926
|
+
"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.",
|
|
927
|
+
"name": "Avatar",
|
|
1172
928
|
"cssProperties": [
|
|
1173
929
|
{
|
|
1174
|
-
"description": "
|
|
1175
|
-
"name": "--mdc-
|
|
930
|
+
"description": "Allows customization of the default background color.",
|
|
931
|
+
"name": "--mdc-avatar-default-background-color"
|
|
1176
932
|
},
|
|
1177
933
|
{
|
|
1178
|
-
"description": "
|
|
1179
|
-
"name": "--mdc-
|
|
934
|
+
"description": "Allows customization of the default foreground color.",
|
|
935
|
+
"name": "--mdc-avatar-default-foreground-color"
|
|
936
|
+
},
|
|
937
|
+
{
|
|
938
|
+
"description": "Allows customization of the loading indicator background color.",
|
|
939
|
+
"name": "--mdc-avatar-loading-indicator-background-color"
|
|
940
|
+
},
|
|
941
|
+
{
|
|
942
|
+
"description": "Allows customization of the loading indicator foreground color.",
|
|
943
|
+
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
|
944
|
+
},
|
|
945
|
+
{
|
|
946
|
+
"description": "Allows customization of the loading overlay background color.",
|
|
947
|
+
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
948
|
+
}
|
|
949
|
+
],
|
|
950
|
+
"members": [
|
|
951
|
+
{
|
|
952
|
+
"kind": "field",
|
|
953
|
+
"name": "src",
|
|
954
|
+
"type": {
|
|
955
|
+
"text": "string | undefined"
|
|
956
|
+
},
|
|
957
|
+
"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.",
|
|
958
|
+
"attribute": "src",
|
|
959
|
+
"inheritedFrom": {
|
|
960
|
+
"name": "AvatarComponentMixin",
|
|
961
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
962
|
+
}
|
|
963
|
+
},
|
|
964
|
+
{
|
|
965
|
+
"kind": "field",
|
|
966
|
+
"name": "initials",
|
|
967
|
+
"type": {
|
|
968
|
+
"text": "string | undefined"
|
|
969
|
+
},
|
|
970
|
+
"description": "The initials to be displayed for the avatar.",
|
|
971
|
+
"attribute": "initials",
|
|
972
|
+
"inheritedFrom": {
|
|
973
|
+
"name": "AvatarComponentMixin",
|
|
974
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
975
|
+
}
|
|
976
|
+
},
|
|
977
|
+
{
|
|
978
|
+
"kind": "field",
|
|
979
|
+
"name": "presence",
|
|
980
|
+
"type": {
|
|
981
|
+
"text": "PresenceType | undefined"
|
|
982
|
+
},
|
|
983
|
+
"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`",
|
|
984
|
+
"attribute": "presence",
|
|
985
|
+
"inheritedFrom": {
|
|
986
|
+
"name": "AvatarComponentMixin",
|
|
987
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
988
|
+
}
|
|
989
|
+
},
|
|
990
|
+
{
|
|
991
|
+
"kind": "field",
|
|
992
|
+
"name": "size",
|
|
993
|
+
"type": {
|
|
994
|
+
"text": "AvatarSize"
|
|
995
|
+
},
|
|
996
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
997
|
+
"default": "32",
|
|
998
|
+
"attribute": "size",
|
|
999
|
+
"reflects": true,
|
|
1000
|
+
"inheritedFrom": {
|
|
1001
|
+
"name": "AvatarComponentMixin",
|
|
1002
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
1003
|
+
}
|
|
1004
|
+
},
|
|
1005
|
+
{
|
|
1006
|
+
"kind": "field",
|
|
1007
|
+
"name": "counter",
|
|
1008
|
+
"type": {
|
|
1009
|
+
"text": "number | undefined"
|
|
1010
|
+
},
|
|
1011
|
+
"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`.",
|
|
1012
|
+
"attribute": "counter",
|
|
1013
|
+
"inheritedFrom": {
|
|
1014
|
+
"name": "AvatarComponentMixin",
|
|
1015
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
1016
|
+
}
|
|
1017
|
+
},
|
|
1018
|
+
{
|
|
1019
|
+
"kind": "field",
|
|
1020
|
+
"name": "isTyping",
|
|
1021
|
+
"type": {
|
|
1022
|
+
"text": "boolean"
|
|
1023
|
+
},
|
|
1024
|
+
"default": "false",
|
|
1025
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
1026
|
+
"attribute": "is-typing",
|
|
1027
|
+
"inheritedFrom": {
|
|
1028
|
+
"name": "AvatarComponentMixin",
|
|
1029
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
1030
|
+
}
|
|
1031
|
+
},
|
|
1032
|
+
{
|
|
1033
|
+
"kind": "field",
|
|
1034
|
+
"name": "iconName",
|
|
1035
|
+
"type": {
|
|
1036
|
+
"text": "IconNames | undefined"
|
|
1037
|
+
},
|
|
1038
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
1039
|
+
"attribute": "icon-name",
|
|
1040
|
+
"inheritedFrom": {
|
|
1041
|
+
"name": "IconNameMixin",
|
|
1042
|
+
"module": "utils/mixins/IconNameMixin.js"
|
|
1043
|
+
}
|
|
1044
|
+
}
|
|
1045
|
+
],
|
|
1046
|
+
"mixins": [
|
|
1047
|
+
{
|
|
1048
|
+
"name": "AvatarComponentMixin",
|
|
1049
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
1050
|
+
},
|
|
1051
|
+
{
|
|
1052
|
+
"name": "IconNameMixin",
|
|
1053
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
|
1054
|
+
}
|
|
1055
|
+
],
|
|
1056
|
+
"superclass": {
|
|
1057
|
+
"name": "Component",
|
|
1058
|
+
"module": "/src/models"
|
|
1059
|
+
},
|
|
1060
|
+
"tagName": "mdc-avatar",
|
|
1061
|
+
"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 */",
|
|
1062
|
+
"customElement": true,
|
|
1063
|
+
"attributes": [
|
|
1064
|
+
{
|
|
1065
|
+
"name": "src",
|
|
1066
|
+
"type": {
|
|
1067
|
+
"text": "string | undefined"
|
|
1068
|
+
},
|
|
1069
|
+
"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.",
|
|
1070
|
+
"fieldName": "src",
|
|
1071
|
+
"inheritedFrom": {
|
|
1072
|
+
"name": "AvatarComponentMixin",
|
|
1073
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1074
|
+
}
|
|
1075
|
+
},
|
|
1076
|
+
{
|
|
1077
|
+
"name": "initials",
|
|
1078
|
+
"type": {
|
|
1079
|
+
"text": "string | undefined"
|
|
1080
|
+
},
|
|
1081
|
+
"description": "The initials to be displayed for the avatar.",
|
|
1082
|
+
"fieldName": "initials",
|
|
1083
|
+
"inheritedFrom": {
|
|
1084
|
+
"name": "AvatarComponentMixin",
|
|
1085
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1086
|
+
}
|
|
1087
|
+
},
|
|
1088
|
+
{
|
|
1089
|
+
"name": "presence",
|
|
1090
|
+
"type": {
|
|
1091
|
+
"text": "PresenceType | undefined"
|
|
1092
|
+
},
|
|
1093
|
+
"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`",
|
|
1094
|
+
"fieldName": "presence",
|
|
1095
|
+
"inheritedFrom": {
|
|
1096
|
+
"name": "AvatarComponentMixin",
|
|
1097
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1098
|
+
}
|
|
1099
|
+
},
|
|
1100
|
+
{
|
|
1101
|
+
"name": "size",
|
|
1102
|
+
"type": {
|
|
1103
|
+
"text": "AvatarSize"
|
|
1104
|
+
},
|
|
1105
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
1106
|
+
"default": "32",
|
|
1107
|
+
"fieldName": "size",
|
|
1108
|
+
"inheritedFrom": {
|
|
1109
|
+
"name": "AvatarComponentMixin",
|
|
1110
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1111
|
+
}
|
|
1112
|
+
},
|
|
1113
|
+
{
|
|
1114
|
+
"name": "counter",
|
|
1115
|
+
"type": {
|
|
1116
|
+
"text": "number | undefined"
|
|
1117
|
+
},
|
|
1118
|
+
"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`.",
|
|
1119
|
+
"fieldName": "counter",
|
|
1120
|
+
"inheritedFrom": {
|
|
1121
|
+
"name": "AvatarComponentMixin",
|
|
1122
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1123
|
+
}
|
|
1124
|
+
},
|
|
1125
|
+
{
|
|
1126
|
+
"name": "is-typing",
|
|
1127
|
+
"type": {
|
|
1128
|
+
"text": "boolean"
|
|
1129
|
+
},
|
|
1130
|
+
"default": "false",
|
|
1131
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
1132
|
+
"fieldName": "isTyping",
|
|
1133
|
+
"inheritedFrom": {
|
|
1134
|
+
"name": "AvatarComponentMixin",
|
|
1135
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1136
|
+
}
|
|
1137
|
+
},
|
|
1138
|
+
{
|
|
1139
|
+
"name": "icon-name",
|
|
1140
|
+
"type": {
|
|
1141
|
+
"text": "IconNames | undefined"
|
|
1142
|
+
},
|
|
1143
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
1144
|
+
"fieldName": "iconName",
|
|
1145
|
+
"inheritedFrom": {
|
|
1146
|
+
"name": "IconNameMixin",
|
|
1147
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
1148
|
+
}
|
|
1149
|
+
}
|
|
1150
|
+
]
|
|
1151
|
+
}
|
|
1152
|
+
],
|
|
1153
|
+
"exports": [
|
|
1154
|
+
{
|
|
1155
|
+
"kind": "js",
|
|
1156
|
+
"name": "default",
|
|
1157
|
+
"declaration": {
|
|
1158
|
+
"name": "Avatar",
|
|
1159
|
+
"module": "components/avatar/avatar.component.js"
|
|
1160
|
+
}
|
|
1161
|
+
}
|
|
1162
|
+
]
|
|
1163
|
+
},
|
|
1164
|
+
{
|
|
1165
|
+
"kind": "javascript-module",
|
|
1166
|
+
"path": "components/bullet/bullet.component.js",
|
|
1167
|
+
"declarations": [
|
|
1168
|
+
{
|
|
1169
|
+
"kind": "class",
|
|
1170
|
+
"description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
|
|
1171
|
+
"name": "Bullet",
|
|
1172
|
+
"cssProperties": [
|
|
1173
|
+
{
|
|
1174
|
+
"description": "background color of the bullet",
|
|
1175
|
+
"name": "--mdc-bullet-background-color"
|
|
1176
|
+
},
|
|
1177
|
+
{
|
|
1178
|
+
"description": "small size value of the bullet",
|
|
1179
|
+
"name": "--mdc-bullet-size-small"
|
|
1180
1180
|
},
|
|
1181
1181
|
{
|
|
1182
1182
|
"description": "medium size value of the bullet",
|
|
@@ -2669,16 +2669,262 @@
|
|
|
2669
2669
|
},
|
|
2670
2670
|
{
|
|
2671
2671
|
"kind": "javascript-module",
|
|
2672
|
-
"path": "components/
|
|
2672
|
+
"path": "components/divider/divider.component.js",
|
|
2673
2673
|
"declarations": [
|
|
2674
2674
|
{
|
|
2675
2675
|
"kind": "class",
|
|
2676
|
-
"description": "`mdc-
|
|
2677
|
-
"name": "
|
|
2678
|
-
"
|
|
2676
|
+
"description": "`mdc-divider` is a component that provides a line to separate and organize content.\nIt can also include a button or text positioned centrally, allowing users to interact with the layout.\n\n**Divider Orientation:**\n- **Horizontal**: A thin, horizontal line.\n- **Vertical**: A thin, vertical line.\n\n**Divider Variants:**\n- **solid**: Solid line.\n- **gradient**: Gradient Line.\n\n**Divider Types:**\n- The type of divider is inferred based on the kind of slot present.\n - **Primary**: A simple horizontal or vertical divider.\n - **Text**: A horizontal divider with a text label in the center.\n - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n\n**Accessibility:**\n- When the slot is replaced by an `mdc-button`:\n - `aria-label` should be passed to the `mdc-button`.\n - `aria-expanded` should be passed to the `mdc-button`.\n\n**Notes:**\n- If the slot is replaced by an invalid tag name or contains multiple elements,\n the divider defaults to the **Primary** type.\n- To override the styles of the divider, use the provided CSS custom properties.",
|
|
2677
|
+
"name": "Divider",
|
|
2678
|
+
"cssProperties": [
|
|
2679
2679
|
{
|
|
2680
|
-
"description": "
|
|
2681
|
-
"name": "
|
|
2680
|
+
"description": "background color of the divider",
|
|
2681
|
+
"name": "--mdc-divider-background-color"
|
|
2682
|
+
},
|
|
2683
|
+
{
|
|
2684
|
+
"description": "width of the divider",
|
|
2685
|
+
"name": "--mdc-divider-width"
|
|
2686
|
+
},
|
|
2687
|
+
{
|
|
2688
|
+
"description": "gradient of the horizontal divider",
|
|
2689
|
+
"name": "--mdc-divider-horizontal-gradient"
|
|
2690
|
+
},
|
|
2691
|
+
{
|
|
2692
|
+
"description": "gradient of the vertical divider",
|
|
2693
|
+
"name": "--mdc-divider-vertical-gradient"
|
|
2694
|
+
},
|
|
2695
|
+
{
|
|
2696
|
+
"description": "font size of label in the text divider",
|
|
2697
|
+
"name": "--mdc-divider-text-size"
|
|
2698
|
+
},
|
|
2699
|
+
{
|
|
2700
|
+
"description": "font color of label in the text divider",
|
|
2701
|
+
"name": "--mdc-divider-text-color"
|
|
2702
|
+
},
|
|
2703
|
+
{
|
|
2704
|
+
"description": "left and right margin of label in the text divider",
|
|
2705
|
+
"name": "--mdc-divider-text-margin"
|
|
2706
|
+
},
|
|
2707
|
+
{
|
|
2708
|
+
"description": "line height of label in the text divider",
|
|
2709
|
+
"name": "--mdc-divider-text-line-height"
|
|
2710
|
+
},
|
|
2711
|
+
{
|
|
2712
|
+
"description": "background color of the grabber button in rest state",
|
|
2713
|
+
"name": "--mdc-divider-grabber-button-background-color-normal"
|
|
2714
|
+
},
|
|
2715
|
+
{
|
|
2716
|
+
"description": "background color of the grabber button in hover state",
|
|
2717
|
+
"name": "--mdc-divider-grabber-button-background-color-hover"
|
|
2718
|
+
},
|
|
2719
|
+
{
|
|
2720
|
+
"description": "background color of the grabber button in pressed state",
|
|
2721
|
+
"name": "--mdc-divider-grabber-button-background-color-pressed"
|
|
2722
|
+
},
|
|
2723
|
+
{
|
|
2724
|
+
"description": "border color of the grabber button",
|
|
2725
|
+
"name": "--mdc-divider-grabber-button-border-color"
|
|
2726
|
+
},
|
|
2727
|
+
{
|
|
2728
|
+
"description": "border radius of the grabber button",
|
|
2729
|
+
"name": "--mdc-divider-grabber-button-border-radius"
|
|
2730
|
+
}
|
|
2731
|
+
],
|
|
2732
|
+
"members": [
|
|
2733
|
+
{
|
|
2734
|
+
"kind": "field",
|
|
2735
|
+
"name": "orientation",
|
|
2736
|
+
"type": {
|
|
2737
|
+
"text": "DividerOrientation"
|
|
2738
|
+
},
|
|
2739
|
+
"description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
|
|
2740
|
+
"default": "horizontal",
|
|
2741
|
+
"attribute": "orientation",
|
|
2742
|
+
"reflects": true
|
|
2743
|
+
},
|
|
2744
|
+
{
|
|
2745
|
+
"kind": "field",
|
|
2746
|
+
"name": "variant",
|
|
2747
|
+
"type": {
|
|
2748
|
+
"text": "DividerVariant"
|
|
2749
|
+
},
|
|
2750
|
+
"description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
|
|
2751
|
+
"default": "solid",
|
|
2752
|
+
"attribute": "variant",
|
|
2753
|
+
"reflects": true
|
|
2754
|
+
},
|
|
2755
|
+
{
|
|
2756
|
+
"kind": "field",
|
|
2757
|
+
"name": "arrowDirection",
|
|
2758
|
+
"type": {
|
|
2759
|
+
"text": "Directions"
|
|
2760
|
+
},
|
|
2761
|
+
"description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
|
|
2762
|
+
"default": "'negative'",
|
|
2763
|
+
"attribute": "arrow-direction",
|
|
2764
|
+
"reflects": true
|
|
2765
|
+
},
|
|
2766
|
+
{
|
|
2767
|
+
"kind": "field",
|
|
2768
|
+
"name": "buttonPosition",
|
|
2769
|
+
"type": {
|
|
2770
|
+
"text": "Directions"
|
|
2771
|
+
},
|
|
2772
|
+
"description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
|
|
2773
|
+
"default": "'negative'",
|
|
2774
|
+
"attribute": "button-position",
|
|
2775
|
+
"reflects": true
|
|
2776
|
+
},
|
|
2777
|
+
{
|
|
2778
|
+
"kind": "method",
|
|
2779
|
+
"name": "setVariant",
|
|
2780
|
+
"privacy": "private",
|
|
2781
|
+
"parameters": [
|
|
2782
|
+
{
|
|
2783
|
+
"name": "variant",
|
|
2784
|
+
"type": {
|
|
2785
|
+
"text": "DividerVariant"
|
|
2786
|
+
},
|
|
2787
|
+
"description": "The variant to set."
|
|
2788
|
+
}
|
|
2789
|
+
],
|
|
2790
|
+
"description": "Sets the variant attribute for the divider component.\nIf the provided variant is not included in the DIVIDER_VARIANT,\nit defaults to the value specified in DEFAULTS.VARIANT."
|
|
2791
|
+
},
|
|
2792
|
+
{
|
|
2793
|
+
"kind": "method",
|
|
2794
|
+
"name": "setOrientation",
|
|
2795
|
+
"privacy": "private",
|
|
2796
|
+
"parameters": [
|
|
2797
|
+
{
|
|
2798
|
+
"name": "orientation",
|
|
2799
|
+
"type": {
|
|
2800
|
+
"text": "DividerOrientation"
|
|
2801
|
+
},
|
|
2802
|
+
"description": "The orientation to set."
|
|
2803
|
+
}
|
|
2804
|
+
],
|
|
2805
|
+
"description": "Sets the orientation attribute for the divider component.\nIf the provided orientation is not included in the DIVIDER_ORIENTATION,\nit defaults to the value specified in DEFAULTS.ORIENTATION."
|
|
2806
|
+
},
|
|
2807
|
+
{
|
|
2808
|
+
"kind": "method",
|
|
2809
|
+
"name": "ensureValidDirections",
|
|
2810
|
+
"privacy": "private",
|
|
2811
|
+
"description": "Sets the buttonPosition and arrowDirection attribute for the divider component.\nIf the provided buttonPosition and arrowDirection are not included in the DIRECTIONS,\nit defaults to the value specified in DIRECTIONS based on the ORIENTATION.",
|
|
2812
|
+
"parameters": [
|
|
2813
|
+
{
|
|
2814
|
+
"description": "The buttonPosition to set.",
|
|
2815
|
+
"name": "buttonPosition"
|
|
2816
|
+
},
|
|
2817
|
+
{
|
|
2818
|
+
"description": "The arrowDirection to set.",
|
|
2819
|
+
"name": "arrowDirection"
|
|
2820
|
+
}
|
|
2821
|
+
]
|
|
2822
|
+
},
|
|
2823
|
+
{
|
|
2824
|
+
"kind": "method",
|
|
2825
|
+
"name": "setGrabberButton",
|
|
2826
|
+
"privacy": "private",
|
|
2827
|
+
"return": {
|
|
2828
|
+
"type": {
|
|
2829
|
+
"text": "void"
|
|
2830
|
+
}
|
|
2831
|
+
},
|
|
2832
|
+
"description": "Configures the grabber button within the divider.\n\n- Sets the `prefix-icon` attribute for the grabber button based\non the `arrow-direction` and `orientation` properties.\n\nThis method updates the DOM element dynamically if a grabber button is present."
|
|
2833
|
+
},
|
|
2834
|
+
{
|
|
2835
|
+
"kind": "method",
|
|
2836
|
+
"name": "getArrowIcon",
|
|
2837
|
+
"privacy": "private",
|
|
2838
|
+
"return": {
|
|
2839
|
+
"type": {
|
|
2840
|
+
"text": ""
|
|
2841
|
+
}
|
|
2842
|
+
},
|
|
2843
|
+
"description": "Determines the arrow icon based on the consumer-defined `arrowDirection`."
|
|
2844
|
+
},
|
|
2845
|
+
{
|
|
2846
|
+
"kind": "method",
|
|
2847
|
+
"name": "inferDividerType",
|
|
2848
|
+
"privacy": "private",
|
|
2849
|
+
"description": "Infers the type of divider based on the kind of slot present.",
|
|
2850
|
+
"parameters": [
|
|
2851
|
+
{
|
|
2852
|
+
"description": "default slot of divider",
|
|
2853
|
+
"name": "slot"
|
|
2854
|
+
}
|
|
2855
|
+
]
|
|
2856
|
+
}
|
|
2857
|
+
],
|
|
2858
|
+
"attributes": [
|
|
2859
|
+
{
|
|
2860
|
+
"name": "orientation",
|
|
2861
|
+
"type": {
|
|
2862
|
+
"text": "DividerOrientation"
|
|
2863
|
+
},
|
|
2864
|
+
"description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
|
|
2865
|
+
"default": "horizontal",
|
|
2866
|
+
"fieldName": "orientation"
|
|
2867
|
+
},
|
|
2868
|
+
{
|
|
2869
|
+
"name": "variant",
|
|
2870
|
+
"type": {
|
|
2871
|
+
"text": "DividerVariant"
|
|
2872
|
+
},
|
|
2873
|
+
"description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
|
|
2874
|
+
"default": "solid",
|
|
2875
|
+
"fieldName": "variant"
|
|
2876
|
+
},
|
|
2877
|
+
{
|
|
2878
|
+
"name": "arrow-direction",
|
|
2879
|
+
"type": {
|
|
2880
|
+
"text": "Directions"
|
|
2881
|
+
},
|
|
2882
|
+
"description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
|
|
2883
|
+
"default": "'negative'",
|
|
2884
|
+
"fieldName": "arrowDirection"
|
|
2885
|
+
},
|
|
2886
|
+
{
|
|
2887
|
+
"name": "button-position",
|
|
2888
|
+
"type": {
|
|
2889
|
+
"text": "Directions"
|
|
2890
|
+
},
|
|
2891
|
+
"description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
|
|
2892
|
+
"default": "'negative'",
|
|
2893
|
+
"fieldName": "buttonPosition"
|
|
2894
|
+
}
|
|
2895
|
+
],
|
|
2896
|
+
"superclass": {
|
|
2897
|
+
"name": "Component",
|
|
2898
|
+
"module": "/src/models"
|
|
2899
|
+
},
|
|
2900
|
+
"tagName": "mdc-divider",
|
|
2901
|
+
"jsDoc": "/**\n * `mdc-divider` is a component that provides a line to separate and organize content.\n * It can also include a button or text positioned centrally, allowing users to interact with the layout.\n *\n * **Divider Orientation:**\n * - **Horizontal**: A thin, horizontal line.\n * - **Vertical**: A thin, vertical line.\n *\n * **Divider Variants:**\n * - **solid**: Solid line.\n * - **gradient**: Gradient Line.\n *\n * **Divider Types:**\n * - The type of divider is inferred based on the kind of slot present.\n * - **Primary**: A simple horizontal or vertical divider.\n * - **Text**: A horizontal divider with a text label in the center.\n * - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n *\n * **Accessibility:**\n * - When the slot is replaced by an `mdc-button`:\n * - `aria-label` should be passed to the `mdc-button`.\n * - `aria-expanded` should be passed to the `mdc-button`.\n *\n * **Notes:**\n * - If the slot is replaced by an invalid tag name or contains multiple elements,\n * the divider defaults to the **Primary** type.\n * - To override the styles of the divider, use the provided CSS custom properties.\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - background color of the divider\n * @cssproperty --mdc-divider-width - width of the divider\n * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider\n * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider\n * @cssproperty --mdc-divider-text-size - font size of label in the text divider\n * @cssproperty --mdc-divider-text-color - font color of label in the text divider\n * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider\n * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider\n * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button\n * in rest state\n * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button\n * in hover state\n * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button\n * in pressed state\n * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
|
|
2902
|
+
"customElement": true
|
|
2903
|
+
}
|
|
2904
|
+
],
|
|
2905
|
+
"exports": [
|
|
2906
|
+
{
|
|
2907
|
+
"kind": "js",
|
|
2908
|
+
"name": "default",
|
|
2909
|
+
"declaration": {
|
|
2910
|
+
"name": "Divider",
|
|
2911
|
+
"module": "components/divider/divider.component.js"
|
|
2912
|
+
}
|
|
2913
|
+
}
|
|
2914
|
+
]
|
|
2915
|
+
},
|
|
2916
|
+
{
|
|
2917
|
+
"kind": "javascript-module",
|
|
2918
|
+
"path": "components/formfieldgroup/formfieldgroup.component.js",
|
|
2919
|
+
"declarations": [
|
|
2920
|
+
{
|
|
2921
|
+
"kind": "class",
|
|
2922
|
+
"description": "`mdc-formfieldgroup` component, groups the form field components together.\nAll passed in children will have a gap of 12px (0.75rem) each applied.\n\nThis component is specifically for creating a `checkbox` group and a `toggle` group component.\nFor the radiogroup use the RadioGroup component instead.\n\nThe header text and description text are displayed above the items with accessible labels.<br/>\nThe consumer has to provide atleast the header-text or the aria-label,\nlike one of them <b>has</b> to be passed in always, otherwise its not accessible.\n\nThe role will be set to `group`.\nThe aria-label will be set with the data-aria-label property.\nThe aria-labelledby will be set with the header id which contains the header text information.\nThe aria-describedby will be set with the description id which contains the description text information.",
|
|
2923
|
+
"name": "FormfieldGroup",
|
|
2924
|
+
"slots": [
|
|
2925
|
+
{
|
|
2926
|
+
"description": "This is a default slot for checkbox or toggle components.",
|
|
2927
|
+
"name": "default"
|
|
2682
2928
|
},
|
|
2683
2929
|
{
|
|
2684
2930
|
"description": "slot to add the label info icon",
|
|
@@ -3214,252 +3460,6 @@
|
|
|
3214
3460
|
}
|
|
3215
3461
|
]
|
|
3216
3462
|
},
|
|
3217
|
-
{
|
|
3218
|
-
"kind": "javascript-module",
|
|
3219
|
-
"path": "components/divider/divider.component.js",
|
|
3220
|
-
"declarations": [
|
|
3221
|
-
{
|
|
3222
|
-
"kind": "class",
|
|
3223
|
-
"description": "`mdc-divider` is a component that provides a line to separate and organize content.\nIt can also include a button or text positioned centrally, allowing users to interact with the layout.\n\n**Divider Orientation:**\n- **Horizontal**: A thin, horizontal line.\n- **Vertical**: A thin, vertical line.\n\n**Divider Variants:**\n- **solid**: Solid line.\n- **gradient**: Gradient Line.\n\n**Divider Types:**\n- The type of divider is inferred based on the kind of slot present.\n - **Primary**: A simple horizontal or vertical divider.\n - **Text**: A horizontal divider with a text label in the center.\n - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n\n**Accessibility:**\n- When the slot is replaced by an `mdc-button`:\n - `aria-label` should be passed to the `mdc-button`.\n - `aria-expanded` should be passed to the `mdc-button`.\n\n**Notes:**\n- If the slot is replaced by an invalid tag name or contains multiple elements,\n the divider defaults to the **Primary** type.\n- To override the styles of the divider, use the provided CSS custom properties.",
|
|
3224
|
-
"name": "Divider",
|
|
3225
|
-
"cssProperties": [
|
|
3226
|
-
{
|
|
3227
|
-
"description": "background color of the divider",
|
|
3228
|
-
"name": "--mdc-divider-background-color"
|
|
3229
|
-
},
|
|
3230
|
-
{
|
|
3231
|
-
"description": "width of the divider",
|
|
3232
|
-
"name": "--mdc-divider-width"
|
|
3233
|
-
},
|
|
3234
|
-
{
|
|
3235
|
-
"description": "gradient of the horizontal divider",
|
|
3236
|
-
"name": "--mdc-divider-horizontal-gradient"
|
|
3237
|
-
},
|
|
3238
|
-
{
|
|
3239
|
-
"description": "gradient of the vertical divider",
|
|
3240
|
-
"name": "--mdc-divider-vertical-gradient"
|
|
3241
|
-
},
|
|
3242
|
-
{
|
|
3243
|
-
"description": "font size of label in the text divider",
|
|
3244
|
-
"name": "--mdc-divider-text-size"
|
|
3245
|
-
},
|
|
3246
|
-
{
|
|
3247
|
-
"description": "font color of label in the text divider",
|
|
3248
|
-
"name": "--mdc-divider-text-color"
|
|
3249
|
-
},
|
|
3250
|
-
{
|
|
3251
|
-
"description": "left and right margin of label in the text divider",
|
|
3252
|
-
"name": "--mdc-divider-text-margin"
|
|
3253
|
-
},
|
|
3254
|
-
{
|
|
3255
|
-
"description": "line height of label in the text divider",
|
|
3256
|
-
"name": "--mdc-divider-text-line-height"
|
|
3257
|
-
},
|
|
3258
|
-
{
|
|
3259
|
-
"description": "background color of the grabber button in rest state",
|
|
3260
|
-
"name": "--mdc-divider-grabber-button-background-color-normal"
|
|
3261
|
-
},
|
|
3262
|
-
{
|
|
3263
|
-
"description": "background color of the grabber button in hover state",
|
|
3264
|
-
"name": "--mdc-divider-grabber-button-background-color-hover"
|
|
3265
|
-
},
|
|
3266
|
-
{
|
|
3267
|
-
"description": "background color of the grabber button in pressed state",
|
|
3268
|
-
"name": "--mdc-divider-grabber-button-background-color-pressed"
|
|
3269
|
-
},
|
|
3270
|
-
{
|
|
3271
|
-
"description": "border color of the grabber button",
|
|
3272
|
-
"name": "--mdc-divider-grabber-button-border-color"
|
|
3273
|
-
},
|
|
3274
|
-
{
|
|
3275
|
-
"description": "border radius of the grabber button",
|
|
3276
|
-
"name": "--mdc-divider-grabber-button-border-radius"
|
|
3277
|
-
}
|
|
3278
|
-
],
|
|
3279
|
-
"members": [
|
|
3280
|
-
{
|
|
3281
|
-
"kind": "field",
|
|
3282
|
-
"name": "orientation",
|
|
3283
|
-
"type": {
|
|
3284
|
-
"text": "DividerOrientation"
|
|
3285
|
-
},
|
|
3286
|
-
"description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
|
|
3287
|
-
"default": "horizontal",
|
|
3288
|
-
"attribute": "orientation",
|
|
3289
|
-
"reflects": true
|
|
3290
|
-
},
|
|
3291
|
-
{
|
|
3292
|
-
"kind": "field",
|
|
3293
|
-
"name": "variant",
|
|
3294
|
-
"type": {
|
|
3295
|
-
"text": "DividerVariant"
|
|
3296
|
-
},
|
|
3297
|
-
"description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
|
|
3298
|
-
"default": "solid",
|
|
3299
|
-
"attribute": "variant",
|
|
3300
|
-
"reflects": true
|
|
3301
|
-
},
|
|
3302
|
-
{
|
|
3303
|
-
"kind": "field",
|
|
3304
|
-
"name": "arrowDirection",
|
|
3305
|
-
"type": {
|
|
3306
|
-
"text": "Directions"
|
|
3307
|
-
},
|
|
3308
|
-
"description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
|
|
3309
|
-
"default": "'negative'",
|
|
3310
|
-
"attribute": "arrow-direction",
|
|
3311
|
-
"reflects": true
|
|
3312
|
-
},
|
|
3313
|
-
{
|
|
3314
|
-
"kind": "field",
|
|
3315
|
-
"name": "buttonPosition",
|
|
3316
|
-
"type": {
|
|
3317
|
-
"text": "Directions"
|
|
3318
|
-
},
|
|
3319
|
-
"description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
|
|
3320
|
-
"default": "'negative'",
|
|
3321
|
-
"attribute": "button-position",
|
|
3322
|
-
"reflects": true
|
|
3323
|
-
},
|
|
3324
|
-
{
|
|
3325
|
-
"kind": "method",
|
|
3326
|
-
"name": "setVariant",
|
|
3327
|
-
"privacy": "private",
|
|
3328
|
-
"parameters": [
|
|
3329
|
-
{
|
|
3330
|
-
"name": "variant",
|
|
3331
|
-
"type": {
|
|
3332
|
-
"text": "DividerVariant"
|
|
3333
|
-
},
|
|
3334
|
-
"description": "The variant to set."
|
|
3335
|
-
}
|
|
3336
|
-
],
|
|
3337
|
-
"description": "Sets the variant attribute for the divider component.\nIf the provided variant is not included in the DIVIDER_VARIANT,\nit defaults to the value specified in DEFAULTS.VARIANT."
|
|
3338
|
-
},
|
|
3339
|
-
{
|
|
3340
|
-
"kind": "method",
|
|
3341
|
-
"name": "setOrientation",
|
|
3342
|
-
"privacy": "private",
|
|
3343
|
-
"parameters": [
|
|
3344
|
-
{
|
|
3345
|
-
"name": "orientation",
|
|
3346
|
-
"type": {
|
|
3347
|
-
"text": "DividerOrientation"
|
|
3348
|
-
},
|
|
3349
|
-
"description": "The orientation to set."
|
|
3350
|
-
}
|
|
3351
|
-
],
|
|
3352
|
-
"description": "Sets the orientation attribute for the divider component.\nIf the provided orientation is not included in the DIVIDER_ORIENTATION,\nit defaults to the value specified in DEFAULTS.ORIENTATION."
|
|
3353
|
-
},
|
|
3354
|
-
{
|
|
3355
|
-
"kind": "method",
|
|
3356
|
-
"name": "ensureValidDirections",
|
|
3357
|
-
"privacy": "private",
|
|
3358
|
-
"description": "Sets the buttonPosition and arrowDirection attribute for the divider component.\nIf the provided buttonPosition and arrowDirection are not included in the DIRECTIONS,\nit defaults to the value specified in DIRECTIONS based on the ORIENTATION.",
|
|
3359
|
-
"parameters": [
|
|
3360
|
-
{
|
|
3361
|
-
"description": "The buttonPosition to set.",
|
|
3362
|
-
"name": "buttonPosition"
|
|
3363
|
-
},
|
|
3364
|
-
{
|
|
3365
|
-
"description": "The arrowDirection to set.",
|
|
3366
|
-
"name": "arrowDirection"
|
|
3367
|
-
}
|
|
3368
|
-
]
|
|
3369
|
-
},
|
|
3370
|
-
{
|
|
3371
|
-
"kind": "method",
|
|
3372
|
-
"name": "setGrabberButton",
|
|
3373
|
-
"privacy": "private",
|
|
3374
|
-
"return": {
|
|
3375
|
-
"type": {
|
|
3376
|
-
"text": "void"
|
|
3377
|
-
}
|
|
3378
|
-
},
|
|
3379
|
-
"description": "Configures the grabber button within the divider.\n\n- Sets the `prefix-icon` attribute for the grabber button based\non the `arrow-direction` and `orientation` properties.\n\nThis method updates the DOM element dynamically if a grabber button is present."
|
|
3380
|
-
},
|
|
3381
|
-
{
|
|
3382
|
-
"kind": "method",
|
|
3383
|
-
"name": "getArrowIcon",
|
|
3384
|
-
"privacy": "private",
|
|
3385
|
-
"return": {
|
|
3386
|
-
"type": {
|
|
3387
|
-
"text": ""
|
|
3388
|
-
}
|
|
3389
|
-
},
|
|
3390
|
-
"description": "Determines the arrow icon based on the consumer-defined `arrowDirection`."
|
|
3391
|
-
},
|
|
3392
|
-
{
|
|
3393
|
-
"kind": "method",
|
|
3394
|
-
"name": "inferDividerType",
|
|
3395
|
-
"privacy": "private",
|
|
3396
|
-
"description": "Infers the type of divider based on the kind of slot present.",
|
|
3397
|
-
"parameters": [
|
|
3398
|
-
{
|
|
3399
|
-
"description": "default slot of divider",
|
|
3400
|
-
"name": "slot"
|
|
3401
|
-
}
|
|
3402
|
-
]
|
|
3403
|
-
}
|
|
3404
|
-
],
|
|
3405
|
-
"attributes": [
|
|
3406
|
-
{
|
|
3407
|
-
"name": "orientation",
|
|
3408
|
-
"type": {
|
|
3409
|
-
"text": "DividerOrientation"
|
|
3410
|
-
},
|
|
3411
|
-
"description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
|
|
3412
|
-
"default": "horizontal",
|
|
3413
|
-
"fieldName": "orientation"
|
|
3414
|
-
},
|
|
3415
|
-
{
|
|
3416
|
-
"name": "variant",
|
|
3417
|
-
"type": {
|
|
3418
|
-
"text": "DividerVariant"
|
|
3419
|
-
},
|
|
3420
|
-
"description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
|
|
3421
|
-
"default": "solid",
|
|
3422
|
-
"fieldName": "variant"
|
|
3423
|
-
},
|
|
3424
|
-
{
|
|
3425
|
-
"name": "arrow-direction",
|
|
3426
|
-
"type": {
|
|
3427
|
-
"text": "Directions"
|
|
3428
|
-
},
|
|
3429
|
-
"description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
|
|
3430
|
-
"default": "'negative'",
|
|
3431
|
-
"fieldName": "arrowDirection"
|
|
3432
|
-
},
|
|
3433
|
-
{
|
|
3434
|
-
"name": "button-position",
|
|
3435
|
-
"type": {
|
|
3436
|
-
"text": "Directions"
|
|
3437
|
-
},
|
|
3438
|
-
"description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
|
|
3439
|
-
"default": "'negative'",
|
|
3440
|
-
"fieldName": "buttonPosition"
|
|
3441
|
-
}
|
|
3442
|
-
],
|
|
3443
|
-
"superclass": {
|
|
3444
|
-
"name": "Component",
|
|
3445
|
-
"module": "/src/models"
|
|
3446
|
-
},
|
|
3447
|
-
"tagName": "mdc-divider",
|
|
3448
|
-
"jsDoc": "/**\n * `mdc-divider` is a component that provides a line to separate and organize content.\n * It can also include a button or text positioned centrally, allowing users to interact with the layout.\n *\n * **Divider Orientation:**\n * - **Horizontal**: A thin, horizontal line.\n * - **Vertical**: A thin, vertical line.\n *\n * **Divider Variants:**\n * - **solid**: Solid line.\n * - **gradient**: Gradient Line.\n *\n * **Divider Types:**\n * - The type of divider is inferred based on the kind of slot present.\n * - **Primary**: A simple horizontal or vertical divider.\n * - **Text**: A horizontal divider with a text label in the center.\n * - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n *\n * **Accessibility:**\n * - When the slot is replaced by an `mdc-button`:\n * - `aria-label` should be passed to the `mdc-button`.\n * - `aria-expanded` should be passed to the `mdc-button`.\n *\n * **Notes:**\n * - If the slot is replaced by an invalid tag name or contains multiple elements,\n * the divider defaults to the **Primary** type.\n * - To override the styles of the divider, use the provided CSS custom properties.\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - background color of the divider\n * @cssproperty --mdc-divider-width - width of the divider\n * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider\n * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider\n * @cssproperty --mdc-divider-text-size - font size of label in the text divider\n * @cssproperty --mdc-divider-text-color - font color of label in the text divider\n * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider\n * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider\n * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button\n * in rest state\n * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button\n * in hover state\n * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button\n * in pressed state\n * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
|
|
3449
|
-
"customElement": true
|
|
3450
|
-
}
|
|
3451
|
-
],
|
|
3452
|
-
"exports": [
|
|
3453
|
-
{
|
|
3454
|
-
"kind": "js",
|
|
3455
|
-
"name": "default",
|
|
3456
|
-
"declaration": {
|
|
3457
|
-
"name": "Divider",
|
|
3458
|
-
"module": "components/divider/divider.component.js"
|
|
3459
|
-
}
|
|
3460
|
-
}
|
|
3461
|
-
]
|
|
3462
|
-
},
|
|
3463
3463
|
{
|
|
3464
3464
|
"kind": "javascript-module",
|
|
3465
3465
|
"path": "components/icon/icon.component.js",
|
package/dist/react/index.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
export { default as Avatar } from './avatar';
|
|
2
1
|
export { default as AvatarButton } from './avatarbutton';
|
|
3
2
|
export { default as Badge } from './badge';
|
|
3
|
+
export { default as Avatar } from './avatar';
|
|
4
4
|
export { default as Bullet } from './bullet';
|
|
5
5
|
export { default as Button } from './button';
|
|
6
6
|
export { default as Buttonsimple } from './buttonsimple';
|
|
7
7
|
export { default as Checkbox } from './checkbox';
|
|
8
|
+
export { default as Divider } from './divider';
|
|
8
9
|
export { default as FormfieldGroup } from './formfieldgroup';
|
|
9
10
|
export { default as FormfieldWrapper } from './formfieldwrapper';
|
|
10
|
-
export { default as Divider } from './divider';
|
|
11
11
|
export { default as Icon } from './icon';
|
|
12
12
|
export { default as IconProvider } from './iconprovider';
|
|
13
13
|
export { default as Input } from './input';
|
package/dist/react/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
export { default as Avatar } from './avatar';
|
|
2
1
|
export { default as AvatarButton } from './avatarbutton';
|
|
3
2
|
export { default as Badge } from './badge';
|
|
3
|
+
export { default as Avatar } from './avatar';
|
|
4
4
|
export { default as Bullet } from './bullet';
|
|
5
5
|
export { default as Button } from './button';
|
|
6
6
|
export { default as Buttonsimple } from './buttonsimple';
|
|
7
7
|
export { default as Checkbox } from './checkbox';
|
|
8
|
+
export { default as Divider } from './divider';
|
|
8
9
|
export { default as FormfieldGroup } from './formfieldgroup';
|
|
9
10
|
export { default as FormfieldWrapper } from './formfieldwrapper';
|
|
10
|
-
export { default as Divider } from './divider';
|
|
11
11
|
export { default as Icon } from './icon';
|
|
12
12
|
export { default as IconProvider } from './iconprovider';
|
|
13
13
|
export { default as Input } from './input';
|
package/package.json
CHANGED