@momentum-design/components 0.16.3 → 0.16.5
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/browser/index.js +55 -34
- package/dist/browser/index.js.map +3 -3
- package/dist/components/avatarbutton/avatarbutton.styles.js +1 -1
- package/dist/components/buttonsimple/buttonsimple.styles.js +1 -1
- package/dist/components/icon/icon.component.js +2 -2
- package/dist/components/icon/icon.styles.js +4 -0
- package/dist/custom-elements.json +240 -240
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +1 -1
- package/dist/utils/styles/index.d.ts +1 -1
- package/dist/utils/styles/index.js +58 -28
- package/package.json +1 -1
|
@@ -136,8 +136,8 @@ class Icon extends Component {
|
|
|
136
136
|
var _a;
|
|
137
137
|
if (this.computedIconSize && (this.lengthUnit || this.lengthUnitFromContext)) {
|
|
138
138
|
const value = `${this.computedIconSize}${(_a = this.lengthUnit) !== null && _a !== void 0 ? _a : this.lengthUnitFromContext}`;
|
|
139
|
-
|
|
140
|
-
this.style.
|
|
139
|
+
// set the computed icon size as a css variable to be used in the icon styles
|
|
140
|
+
this.style.setProperty('--computed-icon-size', value);
|
|
141
141
|
}
|
|
142
142
|
}
|
|
143
143
|
setRoleOnIcon() {
|
|
@@ -2,6 +2,246 @@
|
|
|
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": "iconName",
|
|
93
|
+
"type": {
|
|
94
|
+
"text": "IconNames | undefined"
|
|
95
|
+
},
|
|
96
|
+
"description": "Name of the icon to be displayed inside the Avatar.\nMust be a valid icon name.",
|
|
97
|
+
"attribute": "icon-name",
|
|
98
|
+
"inheritedFrom": {
|
|
99
|
+
"name": "AvatarComponentMixin",
|
|
100
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
101
|
+
}
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"kind": "field",
|
|
105
|
+
"name": "counter",
|
|
106
|
+
"type": {
|
|
107
|
+
"text": "number | undefined"
|
|
108
|
+
},
|
|
109
|
+
"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`.",
|
|
110
|
+
"attribute": "counter",
|
|
111
|
+
"inheritedFrom": {
|
|
112
|
+
"name": "AvatarComponentMixin",
|
|
113
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"kind": "field",
|
|
118
|
+
"name": "isTyping",
|
|
119
|
+
"type": {
|
|
120
|
+
"text": "boolean"
|
|
121
|
+
},
|
|
122
|
+
"default": "false",
|
|
123
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
124
|
+
"attribute": "is-typing",
|
|
125
|
+
"inheritedFrom": {
|
|
126
|
+
"name": "AvatarComponentMixin",
|
|
127
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
],
|
|
131
|
+
"mixins": [
|
|
132
|
+
{
|
|
133
|
+
"name": "AvatarComponentMixin",
|
|
134
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
135
|
+
}
|
|
136
|
+
],
|
|
137
|
+
"superclass": {
|
|
138
|
+
"name": "Component",
|
|
139
|
+
"module": "/src/models"
|
|
140
|
+
},
|
|
141
|
+
"tagName": "mdc-avatar",
|
|
142
|
+
"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 */",
|
|
143
|
+
"customElement": true,
|
|
144
|
+
"attributes": [
|
|
145
|
+
{
|
|
146
|
+
"name": "src",
|
|
147
|
+
"type": {
|
|
148
|
+
"text": "string | undefined"
|
|
149
|
+
},
|
|
150
|
+
"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.",
|
|
151
|
+
"fieldName": "src",
|
|
152
|
+
"inheritedFrom": {
|
|
153
|
+
"name": "AvatarComponentMixin",
|
|
154
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
155
|
+
}
|
|
156
|
+
},
|
|
157
|
+
{
|
|
158
|
+
"name": "initials",
|
|
159
|
+
"type": {
|
|
160
|
+
"text": "string | undefined"
|
|
161
|
+
},
|
|
162
|
+
"description": "The initials to be displayed for the avatar.",
|
|
163
|
+
"fieldName": "initials",
|
|
164
|
+
"inheritedFrom": {
|
|
165
|
+
"name": "AvatarComponentMixin",
|
|
166
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
167
|
+
}
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
"name": "presence",
|
|
171
|
+
"type": {
|
|
172
|
+
"text": "PresenceType | undefined"
|
|
173
|
+
},
|
|
174
|
+
"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`",
|
|
175
|
+
"fieldName": "presence",
|
|
176
|
+
"inheritedFrom": {
|
|
177
|
+
"name": "AvatarComponentMixin",
|
|
178
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
179
|
+
}
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
"name": "size",
|
|
183
|
+
"type": {
|
|
184
|
+
"text": "AvatarSize"
|
|
185
|
+
},
|
|
186
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
187
|
+
"default": "32",
|
|
188
|
+
"fieldName": "size",
|
|
189
|
+
"inheritedFrom": {
|
|
190
|
+
"name": "AvatarComponentMixin",
|
|
191
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
192
|
+
}
|
|
193
|
+
},
|
|
194
|
+
{
|
|
195
|
+
"name": "icon-name",
|
|
196
|
+
"type": {
|
|
197
|
+
"text": "IconNames | undefined"
|
|
198
|
+
},
|
|
199
|
+
"description": "Name of the icon to be displayed inside the Avatar.\nMust be a valid icon name.",
|
|
200
|
+
"fieldName": "iconName",
|
|
201
|
+
"inheritedFrom": {
|
|
202
|
+
"name": "AvatarComponentMixin",
|
|
203
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
204
|
+
}
|
|
205
|
+
},
|
|
206
|
+
{
|
|
207
|
+
"name": "counter",
|
|
208
|
+
"type": {
|
|
209
|
+
"text": "number | undefined"
|
|
210
|
+
},
|
|
211
|
+
"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`.",
|
|
212
|
+
"fieldName": "counter",
|
|
213
|
+
"inheritedFrom": {
|
|
214
|
+
"name": "AvatarComponentMixin",
|
|
215
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
216
|
+
}
|
|
217
|
+
},
|
|
218
|
+
{
|
|
219
|
+
"name": "is-typing",
|
|
220
|
+
"type": {
|
|
221
|
+
"text": "boolean"
|
|
222
|
+
},
|
|
223
|
+
"default": "false",
|
|
224
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
225
|
+
"fieldName": "isTyping",
|
|
226
|
+
"inheritedFrom": {
|
|
227
|
+
"name": "AvatarComponentMixin",
|
|
228
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
]
|
|
232
|
+
}
|
|
233
|
+
],
|
|
234
|
+
"exports": [
|
|
235
|
+
{
|
|
236
|
+
"kind": "js",
|
|
237
|
+
"name": "default",
|
|
238
|
+
"declaration": {
|
|
239
|
+
"name": "Avatar",
|
|
240
|
+
"module": "components/avatar/avatar.component.js"
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
]
|
|
244
|
+
},
|
|
5
245
|
{
|
|
6
246
|
"kind": "javascript-module",
|
|
7
247
|
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
@@ -810,246 +1050,6 @@
|
|
|
810
1050
|
}
|
|
811
1051
|
]
|
|
812
1052
|
},
|
|
813
|
-
{
|
|
814
|
-
"kind": "javascript-module",
|
|
815
|
-
"path": "components/avatar/avatar.component.js",
|
|
816
|
-
"declarations": [
|
|
817
|
-
{
|
|
818
|
-
"kind": "class",
|
|
819
|
-
"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.",
|
|
820
|
-
"name": "Avatar",
|
|
821
|
-
"cssProperties": [
|
|
822
|
-
{
|
|
823
|
-
"description": "Allows customization of the default background color.",
|
|
824
|
-
"name": "--mdc-avatar-default-background-color"
|
|
825
|
-
},
|
|
826
|
-
{
|
|
827
|
-
"description": "Allows customization of the default foreground color.",
|
|
828
|
-
"name": "--mdc-avatar-default-foreground-color"
|
|
829
|
-
},
|
|
830
|
-
{
|
|
831
|
-
"description": "Allows customization of the loading indicator background color.",
|
|
832
|
-
"name": "--mdc-avatar-loading-indicator-background-color"
|
|
833
|
-
},
|
|
834
|
-
{
|
|
835
|
-
"description": "Allows customization of the loading indicator foreground color.",
|
|
836
|
-
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
|
837
|
-
},
|
|
838
|
-
{
|
|
839
|
-
"description": "Allows customization of the loading overlay background color.",
|
|
840
|
-
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
841
|
-
}
|
|
842
|
-
],
|
|
843
|
-
"members": [
|
|
844
|
-
{
|
|
845
|
-
"kind": "field",
|
|
846
|
-
"name": "src",
|
|
847
|
-
"type": {
|
|
848
|
-
"text": "string | undefined"
|
|
849
|
-
},
|
|
850
|
-
"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.",
|
|
851
|
-
"attribute": "src",
|
|
852
|
-
"inheritedFrom": {
|
|
853
|
-
"name": "AvatarComponentMixin",
|
|
854
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
855
|
-
}
|
|
856
|
-
},
|
|
857
|
-
{
|
|
858
|
-
"kind": "field",
|
|
859
|
-
"name": "initials",
|
|
860
|
-
"type": {
|
|
861
|
-
"text": "string | undefined"
|
|
862
|
-
},
|
|
863
|
-
"description": "The initials to be displayed for the avatar.",
|
|
864
|
-
"attribute": "initials",
|
|
865
|
-
"inheritedFrom": {
|
|
866
|
-
"name": "AvatarComponentMixin",
|
|
867
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
868
|
-
}
|
|
869
|
-
},
|
|
870
|
-
{
|
|
871
|
-
"kind": "field",
|
|
872
|
-
"name": "presence",
|
|
873
|
-
"type": {
|
|
874
|
-
"text": "PresenceType | undefined"
|
|
875
|
-
},
|
|
876
|
-
"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`",
|
|
877
|
-
"attribute": "presence",
|
|
878
|
-
"inheritedFrom": {
|
|
879
|
-
"name": "AvatarComponentMixin",
|
|
880
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
881
|
-
}
|
|
882
|
-
},
|
|
883
|
-
{
|
|
884
|
-
"kind": "field",
|
|
885
|
-
"name": "size",
|
|
886
|
-
"type": {
|
|
887
|
-
"text": "AvatarSize"
|
|
888
|
-
},
|
|
889
|
-
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
890
|
-
"default": "32",
|
|
891
|
-
"attribute": "size",
|
|
892
|
-
"reflects": true,
|
|
893
|
-
"inheritedFrom": {
|
|
894
|
-
"name": "AvatarComponentMixin",
|
|
895
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
896
|
-
}
|
|
897
|
-
},
|
|
898
|
-
{
|
|
899
|
-
"kind": "field",
|
|
900
|
-
"name": "iconName",
|
|
901
|
-
"type": {
|
|
902
|
-
"text": "IconNames | undefined"
|
|
903
|
-
},
|
|
904
|
-
"description": "Name of the icon to be displayed inside the Avatar.\nMust be a valid icon name.",
|
|
905
|
-
"attribute": "icon-name",
|
|
906
|
-
"inheritedFrom": {
|
|
907
|
-
"name": "AvatarComponentMixin",
|
|
908
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
909
|
-
}
|
|
910
|
-
},
|
|
911
|
-
{
|
|
912
|
-
"kind": "field",
|
|
913
|
-
"name": "counter",
|
|
914
|
-
"type": {
|
|
915
|
-
"text": "number | undefined"
|
|
916
|
-
},
|
|
917
|
-
"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`.",
|
|
918
|
-
"attribute": "counter",
|
|
919
|
-
"inheritedFrom": {
|
|
920
|
-
"name": "AvatarComponentMixin",
|
|
921
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
922
|
-
}
|
|
923
|
-
},
|
|
924
|
-
{
|
|
925
|
-
"kind": "field",
|
|
926
|
-
"name": "isTyping",
|
|
927
|
-
"type": {
|
|
928
|
-
"text": "boolean"
|
|
929
|
-
},
|
|
930
|
-
"default": "false",
|
|
931
|
-
"description": "Represents the typing indicator when the user is typing.",
|
|
932
|
-
"attribute": "is-typing",
|
|
933
|
-
"inheritedFrom": {
|
|
934
|
-
"name": "AvatarComponentMixin",
|
|
935
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
936
|
-
}
|
|
937
|
-
}
|
|
938
|
-
],
|
|
939
|
-
"mixins": [
|
|
940
|
-
{
|
|
941
|
-
"name": "AvatarComponentMixin",
|
|
942
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
943
|
-
}
|
|
944
|
-
],
|
|
945
|
-
"superclass": {
|
|
946
|
-
"name": "Component",
|
|
947
|
-
"module": "/src/models"
|
|
948
|
-
},
|
|
949
|
-
"tagName": "mdc-avatar",
|
|
950
|
-
"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 */",
|
|
951
|
-
"customElement": true,
|
|
952
|
-
"attributes": [
|
|
953
|
-
{
|
|
954
|
-
"name": "src",
|
|
955
|
-
"type": {
|
|
956
|
-
"text": "string | undefined"
|
|
957
|
-
},
|
|
958
|
-
"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.",
|
|
959
|
-
"fieldName": "src",
|
|
960
|
-
"inheritedFrom": {
|
|
961
|
-
"name": "AvatarComponentMixin",
|
|
962
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
963
|
-
}
|
|
964
|
-
},
|
|
965
|
-
{
|
|
966
|
-
"name": "initials",
|
|
967
|
-
"type": {
|
|
968
|
-
"text": "string | undefined"
|
|
969
|
-
},
|
|
970
|
-
"description": "The initials to be displayed for the avatar.",
|
|
971
|
-
"fieldName": "initials",
|
|
972
|
-
"inheritedFrom": {
|
|
973
|
-
"name": "AvatarComponentMixin",
|
|
974
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
975
|
-
}
|
|
976
|
-
},
|
|
977
|
-
{
|
|
978
|
-
"name": "presence",
|
|
979
|
-
"type": {
|
|
980
|
-
"text": "PresenceType | undefined"
|
|
981
|
-
},
|
|
982
|
-
"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`",
|
|
983
|
-
"fieldName": "presence",
|
|
984
|
-
"inheritedFrom": {
|
|
985
|
-
"name": "AvatarComponentMixin",
|
|
986
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
987
|
-
}
|
|
988
|
-
},
|
|
989
|
-
{
|
|
990
|
-
"name": "size",
|
|
991
|
-
"type": {
|
|
992
|
-
"text": "AvatarSize"
|
|
993
|
-
},
|
|
994
|
-
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
995
|
-
"default": "32",
|
|
996
|
-
"fieldName": "size",
|
|
997
|
-
"inheritedFrom": {
|
|
998
|
-
"name": "AvatarComponentMixin",
|
|
999
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1000
|
-
}
|
|
1001
|
-
},
|
|
1002
|
-
{
|
|
1003
|
-
"name": "icon-name",
|
|
1004
|
-
"type": {
|
|
1005
|
-
"text": "IconNames | undefined"
|
|
1006
|
-
},
|
|
1007
|
-
"description": "Name of the icon to be displayed inside the Avatar.\nMust be a valid icon name.",
|
|
1008
|
-
"fieldName": "iconName",
|
|
1009
|
-
"inheritedFrom": {
|
|
1010
|
-
"name": "AvatarComponentMixin",
|
|
1011
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1012
|
-
}
|
|
1013
|
-
},
|
|
1014
|
-
{
|
|
1015
|
-
"name": "counter",
|
|
1016
|
-
"type": {
|
|
1017
|
-
"text": "number | undefined"
|
|
1018
|
-
},
|
|
1019
|
-
"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`.",
|
|
1020
|
-
"fieldName": "counter",
|
|
1021
|
-
"inheritedFrom": {
|
|
1022
|
-
"name": "AvatarComponentMixin",
|
|
1023
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1024
|
-
}
|
|
1025
|
-
},
|
|
1026
|
-
{
|
|
1027
|
-
"name": "is-typing",
|
|
1028
|
-
"type": {
|
|
1029
|
-
"text": "boolean"
|
|
1030
|
-
},
|
|
1031
|
-
"default": "false",
|
|
1032
|
-
"description": "Represents the typing indicator when the user is typing.",
|
|
1033
|
-
"fieldName": "isTyping",
|
|
1034
|
-
"inheritedFrom": {
|
|
1035
|
-
"name": "AvatarComponentMixin",
|
|
1036
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1037
|
-
}
|
|
1038
|
-
}
|
|
1039
|
-
]
|
|
1040
|
-
}
|
|
1041
|
-
],
|
|
1042
|
-
"exports": [
|
|
1043
|
-
{
|
|
1044
|
-
"kind": "js",
|
|
1045
|
-
"name": "default",
|
|
1046
|
-
"declaration": {
|
|
1047
|
-
"name": "Avatar",
|
|
1048
|
-
"module": "components/avatar/avatar.component.js"
|
|
1049
|
-
}
|
|
1050
|
-
}
|
|
1051
|
-
]
|
|
1052
|
-
},
|
|
1053
1053
|
{
|
|
1054
1054
|
"kind": "javascript-module",
|
|
1055
1055
|
"path": "components/bullet/bullet.component.js",
|
package/dist/react/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
export { default as Avatar } from './avatar';
|
|
1
2
|
export { default as AvatarButton } from './avatarbutton';
|
|
2
3
|
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';
|
package/dist/react/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
export { default as Avatar } from './avatar';
|
|
1
2
|
export { default as AvatarButton } from './avatarbutton';
|
|
2
3
|
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';
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
declare const hostFitContentStyles: import("lit").CSSResult;
|
|
2
|
-
declare const hostFocusRingStyles: import("lit").CSSResult;
|
|
2
|
+
declare const hostFocusRingStyles: (applyFocusRingOnClass?: boolean) => import("lit").CSSResult[];
|
|
3
3
|
export { hostFitContentStyles, hostFocusRingStyles };
|
|
@@ -8,35 +8,65 @@ const hostFitContentStyles = css `
|
|
|
8
8
|
width: fit-content;
|
|
9
9
|
}
|
|
10
10
|
`;
|
|
11
|
-
const hostFocusRingStyles =
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
--mdc-focus-ring-inner-width: 0.125rem;
|
|
18
|
-
--mdc-focus-ring-middle-width: calc(2 * var(--mdc-focus-ring-inner-width));
|
|
19
|
-
--mdc-focus-ring-outer-width: calc(0.0625rem + var(--mdc-focus-ring-middle-width));
|
|
11
|
+
const hostFocusRingStyles = (applyFocusRingOnClass = false) => {
|
|
12
|
+
const baseHostStyleVariables = css `
|
|
13
|
+
:host {
|
|
14
|
+
--mdc-focus-ring-inner-color: var(--mds-color-theme-focus-default-0);
|
|
15
|
+
--mdc-focus-ring-middle-color: var(--mds-color-theme-focus-default-1);
|
|
16
|
+
--mdc-focus-ring-outer-color: var(--mds-color-theme-focus-default-2);
|
|
20
17
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
:host([disabled]:focus) {
|
|
25
|
-
box-shadow: none;
|
|
26
|
-
}
|
|
27
|
-
:host(:focus) {
|
|
28
|
-
position: relative;
|
|
29
|
-
box-shadow:
|
|
30
|
-
0 0 0 var(--mdc-focus-ring-inner-width) var(--mdc-focus-ring-inner-color),
|
|
31
|
-
0 0 0 var(--mdc-focus-ring-middle-width) var(--mdc-focus-ring-middle-color),
|
|
32
|
-
0 0 0 var(--mdc-focus-ring-outer-width) var(--mdc-focus-ring-outer-color);
|
|
33
|
-
}
|
|
18
|
+
--mdc-focus-ring-inner-width: 0.125rem;
|
|
19
|
+
--mdc-focus-ring-middle-width: calc(2 * var(--mdc-focus-ring-inner-width));
|
|
20
|
+
--mdc-focus-ring-outer-width: calc(0.0625rem + var(--mdc-focus-ring-middle-width));
|
|
34
21
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
:host(:focus) {
|
|
38
|
-
outline: 0.125rem solid var(--mds-color-theme-focus-default-0);
|
|
22
|
+
--mdc-focus-ring-middle-offset: var(--mdc-focus-ring-inner-width);
|
|
23
|
+
--mdc-focus-ring-outer-offset: calc(var(--mdc-focus-ring-inner-width) + var(--mdc-focus-ring-middle-width));
|
|
39
24
|
}
|
|
40
|
-
|
|
41
|
-
|
|
25
|
+
`;
|
|
26
|
+
const boxShadow = css `0 0 0 var(--mdc-focus-ring-inner-width) var(--mdc-focus-ring-inner-color),
|
|
27
|
+
0 0 0 var(--mdc-focus-ring-middle-width) var(--mdc-focus-ring-middle-color),
|
|
28
|
+
0 0 0 var(--mdc-focus-ring-outer-width) var(--mdc-focus-ring-outer-color)
|
|
29
|
+
`;
|
|
30
|
+
if (applyFocusRingOnClass) {
|
|
31
|
+
return [
|
|
32
|
+
baseHostStyleVariables,
|
|
33
|
+
css `
|
|
34
|
+
.mdc-focus-ring:focus-visible {
|
|
35
|
+
outline: none;
|
|
36
|
+
}
|
|
37
|
+
:host([disabled]) .mdc-focus-ring:focus {
|
|
38
|
+
box-shadow: none;
|
|
39
|
+
}
|
|
40
|
+
.mdc-focus-ring:focus-within {
|
|
41
|
+
position: relative;
|
|
42
|
+
box-shadow: ${boxShadow};
|
|
43
|
+
}
|
|
44
|
+
/* High Contrast Mode */
|
|
45
|
+
@media (forced-colors: active) {
|
|
46
|
+
.mdc-focus-ring:focus-within {
|
|
47
|
+
outline: 0.125rem solid var(--mds-color-theme-focus-default-0);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
`,
|
|
51
|
+
];
|
|
52
|
+
}
|
|
53
|
+
return [
|
|
54
|
+
baseHostStyleVariables,
|
|
55
|
+
css `
|
|
56
|
+
:host([disabled]:focus) {
|
|
57
|
+
box-shadow: none;
|
|
58
|
+
}
|
|
59
|
+
:host(:focus) {
|
|
60
|
+
position: relative;
|
|
61
|
+
box-shadow: ${boxShadow};
|
|
62
|
+
}
|
|
63
|
+
/* High Contrast Mode */
|
|
64
|
+
@media (forced-colors: active) {
|
|
65
|
+
:host(:focus) {
|
|
66
|
+
outline: 0.125rem solid var(--mds-color-theme-focus-default-0);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
`,
|
|
70
|
+
];
|
|
71
|
+
};
|
|
42
72
|
export { hostFitContentStyles, hostFocusRingStyles };
|
package/package.json
CHANGED