@momentum-design/components 0.16.8 → 0.16.10
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/labelandhelper/index.d.ts +9 -0
- package/dist/components/labelandhelper/index.js +6 -0
- package/dist/components/labelandhelper/labelandhelper.component.d.ts +72 -0
- package/dist/components/labelandhelper/labelandhelper.component.js +137 -0
- package/dist/components/labelandhelper/labelandhelper.constants.d.ts +19 -0
- package/dist/components/labelandhelper/labelandhelper.constants.js +21 -0
- package/dist/components/labelandhelper/labelandhelper.styles.d.ts +2 -0
- package/dist/components/labelandhelper/labelandhelper.styles.js +48 -0
- package/dist/components/labelandhelper/labelandhelper.types.d.ts +4 -0
- package/dist/components/labelandhelper/labelandhelper.types.js +1 -0
- package/dist/components/labelandhelper/labelandhelper.utils.d.ts +4 -0
- package/dist/components/labelandhelper/labelandhelper.utils.js +12 -0
- package/dist/custom-elements.json +686 -358
- package/dist/react/index.d.ts +2 -1
- package/dist/react/index.js +2 -1
- package/dist/react/labelandhelper/index.d.ts +11 -0
- package/dist/react/labelandhelper/index.js +20 -0
- package/dist/utils/mixins/NameMixin.d.ts +6 -0
- package/dist/utils/mixins/{LabelMixin.js → NameMixin.js} +6 -16
- package/dist/utils/mixins/ReadonlyMixin.d.ts +6 -0
- package/dist/utils/mixins/ReadonlyMixin.js +29 -0
- package/dist/utils/mixins/RequiredMixin.d.ts +6 -0
- package/dist/utils/mixins/RequiredMixin.js +29 -0
- package/dist/utils/mixins/ValueMixin.d.ts +6 -0
- package/dist/utils/mixins/ValueMixin.js +28 -0
- package/package.json +3 -2
- package/dist/utils/mixins/LabelMixin.d.ts +0 -7
|
@@ -2,246 +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": "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
|
-
},
|
|
245
5
|
{
|
|
246
6
|
"kind": "javascript-module",
|
|
247
7
|
"path": "components/badge/badge.component.js",
|
|
@@ -410,86 +170,326 @@
|
|
|
410
170
|
"description": "Method to set the role based on the aria-label provided.\nIf the aria-label is provided, the role of the element will be 'img'.\nOtherwise, the role will be null."
|
|
411
171
|
},
|
|
412
172
|
{
|
|
413
|
-
"kind": "method",
|
|
414
|
-
"name": "getBadgeContentBasedOnType",
|
|
415
|
-
"privacy": "private",
|
|
416
|
-
"return": {
|
|
417
|
-
"type": {
|
|
418
|
-
"text": ""
|
|
419
|
-
}
|
|
173
|
+
"kind": "method",
|
|
174
|
+
"name": "getBadgeContentBasedOnType",
|
|
175
|
+
"privacy": "private",
|
|
176
|
+
"return": {
|
|
177
|
+
"type": {
|
|
178
|
+
"text": ""
|
|
179
|
+
}
|
|
180
|
+
},
|
|
181
|
+
"description": "Generates the badge content based on the badge type.\nUtilizes various helper methods to create the appropriate badge template based on the\ncurrent badge type. Supports 'dot', 'icon', 'counter', 'success', 'warning', and 'error'\ntypes, returning the corresponding template result for each type."
|
|
182
|
+
}
|
|
183
|
+
],
|
|
184
|
+
"attributes": [
|
|
185
|
+
{
|
|
186
|
+
"name": "type",
|
|
187
|
+
"type": {
|
|
188
|
+
"text": "BadgeType | undefined"
|
|
189
|
+
},
|
|
190
|
+
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
191
|
+
"fieldName": "type"
|
|
192
|
+
},
|
|
193
|
+
{
|
|
194
|
+
"name": "icon-name",
|
|
195
|
+
"type": {
|
|
196
|
+
"text": "IconNames | undefined"
|
|
197
|
+
},
|
|
198
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
199
|
+
"fieldName": "iconName"
|
|
200
|
+
},
|
|
201
|
+
{
|
|
202
|
+
"name": "variant",
|
|
203
|
+
"type": {
|
|
204
|
+
"text": "IconVariant"
|
|
205
|
+
},
|
|
206
|
+
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
207
|
+
"default": "primary",
|
|
208
|
+
"fieldName": "variant"
|
|
209
|
+
},
|
|
210
|
+
{
|
|
211
|
+
"name": "counter",
|
|
212
|
+
"type": {
|
|
213
|
+
"text": "number | undefined"
|
|
214
|
+
},
|
|
215
|
+
"description": "Counter is the number which can be provided in the badge.",
|
|
216
|
+
"fieldName": "counter"
|
|
217
|
+
},
|
|
218
|
+
{
|
|
219
|
+
"name": "max-counter",
|
|
220
|
+
"type": {
|
|
221
|
+
"text": "number"
|
|
222
|
+
},
|
|
223
|
+
"description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
|
|
224
|
+
"default": "99",
|
|
225
|
+
"fieldName": "maxCounter"
|
|
226
|
+
},
|
|
227
|
+
{
|
|
228
|
+
"name": "overlay",
|
|
229
|
+
"type": {
|
|
230
|
+
"text": "boolean"
|
|
231
|
+
},
|
|
232
|
+
"default": "false",
|
|
233
|
+
"description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
|
|
234
|
+
"fieldName": "overlay"
|
|
235
|
+
},
|
|
236
|
+
{
|
|
237
|
+
"name": "aria-label",
|
|
238
|
+
"type": {
|
|
239
|
+
"text": "string | null"
|
|
240
|
+
},
|
|
241
|
+
"default": "null",
|
|
242
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
243
|
+
"fieldName": "ariaLabel"
|
|
244
|
+
}
|
|
245
|
+
],
|
|
246
|
+
"superclass": {
|
|
247
|
+
"name": "Component",
|
|
248
|
+
"module": "/src/models"
|
|
249
|
+
},
|
|
250
|
+
"tagName": "mdc-badge",
|
|
251
|
+
"jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n */",
|
|
252
|
+
"customElement": true
|
|
253
|
+
}
|
|
254
|
+
],
|
|
255
|
+
"exports": [
|
|
256
|
+
{
|
|
257
|
+
"kind": "js",
|
|
258
|
+
"name": "default",
|
|
259
|
+
"declaration": {
|
|
260
|
+
"name": "Badge",
|
|
261
|
+
"module": "components/badge/badge.component.js"
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
]
|
|
265
|
+
},
|
|
266
|
+
{
|
|
267
|
+
"kind": "javascript-module",
|
|
268
|
+
"path": "components/avatar/avatar.component.js",
|
|
269
|
+
"declarations": [
|
|
270
|
+
{
|
|
271
|
+
"kind": "class",
|
|
272
|
+
"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.",
|
|
273
|
+
"name": "Avatar",
|
|
274
|
+
"cssProperties": [
|
|
275
|
+
{
|
|
276
|
+
"description": "Allows customization of the default background color.",
|
|
277
|
+
"name": "--mdc-avatar-default-background-color"
|
|
278
|
+
},
|
|
279
|
+
{
|
|
280
|
+
"description": "Allows customization of the default foreground color.",
|
|
281
|
+
"name": "--mdc-avatar-default-foreground-color"
|
|
282
|
+
},
|
|
283
|
+
{
|
|
284
|
+
"description": "Allows customization of the loading indicator background color.",
|
|
285
|
+
"name": "--mdc-avatar-loading-indicator-background-color"
|
|
286
|
+
},
|
|
287
|
+
{
|
|
288
|
+
"description": "Allows customization of the loading indicator foreground color.",
|
|
289
|
+
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
|
290
|
+
},
|
|
291
|
+
{
|
|
292
|
+
"description": "Allows customization of the loading overlay background color.",
|
|
293
|
+
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
294
|
+
}
|
|
295
|
+
],
|
|
296
|
+
"members": [
|
|
297
|
+
{
|
|
298
|
+
"kind": "field",
|
|
299
|
+
"name": "src",
|
|
300
|
+
"type": {
|
|
301
|
+
"text": "string | undefined"
|
|
302
|
+
},
|
|
303
|
+
"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.",
|
|
304
|
+
"attribute": "src",
|
|
305
|
+
"inheritedFrom": {
|
|
306
|
+
"name": "AvatarComponentMixin",
|
|
307
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
308
|
+
}
|
|
309
|
+
},
|
|
310
|
+
{
|
|
311
|
+
"kind": "field",
|
|
312
|
+
"name": "initials",
|
|
313
|
+
"type": {
|
|
314
|
+
"text": "string | undefined"
|
|
315
|
+
},
|
|
316
|
+
"description": "The initials to be displayed for the avatar.",
|
|
317
|
+
"attribute": "initials",
|
|
318
|
+
"inheritedFrom": {
|
|
319
|
+
"name": "AvatarComponentMixin",
|
|
320
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
321
|
+
}
|
|
322
|
+
},
|
|
323
|
+
{
|
|
324
|
+
"kind": "field",
|
|
325
|
+
"name": "presence",
|
|
326
|
+
"type": {
|
|
327
|
+
"text": "PresenceType | undefined"
|
|
328
|
+
},
|
|
329
|
+
"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`",
|
|
330
|
+
"attribute": "presence",
|
|
331
|
+
"inheritedFrom": {
|
|
332
|
+
"name": "AvatarComponentMixin",
|
|
333
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
334
|
+
}
|
|
335
|
+
},
|
|
336
|
+
{
|
|
337
|
+
"kind": "field",
|
|
338
|
+
"name": "size",
|
|
339
|
+
"type": {
|
|
340
|
+
"text": "AvatarSize"
|
|
341
|
+
},
|
|
342
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
343
|
+
"default": "32",
|
|
344
|
+
"attribute": "size",
|
|
345
|
+
"reflects": true,
|
|
346
|
+
"inheritedFrom": {
|
|
347
|
+
"name": "AvatarComponentMixin",
|
|
348
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
349
|
+
}
|
|
350
|
+
},
|
|
351
|
+
{
|
|
352
|
+
"kind": "field",
|
|
353
|
+
"name": "iconName",
|
|
354
|
+
"type": {
|
|
355
|
+
"text": "IconNames | undefined"
|
|
356
|
+
},
|
|
357
|
+
"description": "Name of the icon to be displayed inside the Avatar.\nMust be a valid icon name.",
|
|
358
|
+
"attribute": "icon-name",
|
|
359
|
+
"inheritedFrom": {
|
|
360
|
+
"name": "AvatarComponentMixin",
|
|
361
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
362
|
+
}
|
|
363
|
+
},
|
|
364
|
+
{
|
|
365
|
+
"kind": "field",
|
|
366
|
+
"name": "counter",
|
|
367
|
+
"type": {
|
|
368
|
+
"text": "number | undefined"
|
|
369
|
+
},
|
|
370
|
+
"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`.",
|
|
371
|
+
"attribute": "counter",
|
|
372
|
+
"inheritedFrom": {
|
|
373
|
+
"name": "AvatarComponentMixin",
|
|
374
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
375
|
+
}
|
|
376
|
+
},
|
|
377
|
+
{
|
|
378
|
+
"kind": "field",
|
|
379
|
+
"name": "isTyping",
|
|
380
|
+
"type": {
|
|
381
|
+
"text": "boolean"
|
|
420
382
|
},
|
|
421
|
-
"
|
|
383
|
+
"default": "false",
|
|
384
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
385
|
+
"attribute": "is-typing",
|
|
386
|
+
"inheritedFrom": {
|
|
387
|
+
"name": "AvatarComponentMixin",
|
|
388
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
389
|
+
}
|
|
390
|
+
}
|
|
391
|
+
],
|
|
392
|
+
"mixins": [
|
|
393
|
+
{
|
|
394
|
+
"name": "AvatarComponentMixin",
|
|
395
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
422
396
|
}
|
|
423
397
|
],
|
|
398
|
+
"superclass": {
|
|
399
|
+
"name": "Component",
|
|
400
|
+
"module": "/src/models"
|
|
401
|
+
},
|
|
402
|
+
"tagName": "mdc-avatar",
|
|
403
|
+
"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 */",
|
|
404
|
+
"customElement": true,
|
|
424
405
|
"attributes": [
|
|
425
406
|
{
|
|
426
|
-
"name": "
|
|
407
|
+
"name": "src",
|
|
427
408
|
"type": {
|
|
428
|
-
"text": "
|
|
409
|
+
"text": "string | undefined"
|
|
429
410
|
},
|
|
430
|
-
"description": "
|
|
431
|
-
"fieldName": "
|
|
411
|
+
"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.",
|
|
412
|
+
"fieldName": "src",
|
|
413
|
+
"inheritedFrom": {
|
|
414
|
+
"name": "AvatarComponentMixin",
|
|
415
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
416
|
+
}
|
|
432
417
|
},
|
|
433
418
|
{
|
|
434
|
-
"name": "
|
|
419
|
+
"name": "initials",
|
|
435
420
|
"type": {
|
|
436
|
-
"text": "
|
|
421
|
+
"text": "string | undefined"
|
|
437
422
|
},
|
|
438
|
-
"description": "
|
|
439
|
-
"fieldName": "
|
|
423
|
+
"description": "The initials to be displayed for the avatar.",
|
|
424
|
+
"fieldName": "initials",
|
|
425
|
+
"inheritedFrom": {
|
|
426
|
+
"name": "AvatarComponentMixin",
|
|
427
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
428
|
+
}
|
|
440
429
|
},
|
|
441
430
|
{
|
|
442
|
-
"name": "
|
|
431
|
+
"name": "presence",
|
|
443
432
|
"type": {
|
|
444
|
-
"text": "
|
|
433
|
+
"text": "PresenceType | undefined"
|
|
445
434
|
},
|
|
446
|
-
"description": "
|
|
447
|
-
"
|
|
448
|
-
"
|
|
435
|
+
"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`",
|
|
436
|
+
"fieldName": "presence",
|
|
437
|
+
"inheritedFrom": {
|
|
438
|
+
"name": "AvatarComponentMixin",
|
|
439
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
440
|
+
}
|
|
449
441
|
},
|
|
450
442
|
{
|
|
451
|
-
"name": "
|
|
443
|
+
"name": "size",
|
|
452
444
|
"type": {
|
|
453
|
-
"text": "
|
|
445
|
+
"text": "AvatarSize"
|
|
454
446
|
},
|
|
455
|
-
"description": "
|
|
456
|
-
"
|
|
447
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
448
|
+
"default": "32",
|
|
449
|
+
"fieldName": "size",
|
|
450
|
+
"inheritedFrom": {
|
|
451
|
+
"name": "AvatarComponentMixin",
|
|
452
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
453
|
+
}
|
|
457
454
|
},
|
|
458
455
|
{
|
|
459
|
-
"name": "
|
|
456
|
+
"name": "icon-name",
|
|
460
457
|
"type": {
|
|
461
|
-
"text": "
|
|
458
|
+
"text": "IconNames | undefined"
|
|
462
459
|
},
|
|
463
|
-
"description": "
|
|
464
|
-
"
|
|
465
|
-
"
|
|
460
|
+
"description": "Name of the icon to be displayed inside the Avatar.\nMust be a valid icon name.",
|
|
461
|
+
"fieldName": "iconName",
|
|
462
|
+
"inheritedFrom": {
|
|
463
|
+
"name": "AvatarComponentMixin",
|
|
464
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
465
|
+
}
|
|
466
466
|
},
|
|
467
467
|
{
|
|
468
|
-
"name": "
|
|
468
|
+
"name": "counter",
|
|
469
469
|
"type": {
|
|
470
|
-
"text": "
|
|
470
|
+
"text": "number | undefined"
|
|
471
471
|
},
|
|
472
|
-
"
|
|
473
|
-
"
|
|
474
|
-
"
|
|
472
|
+
"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`.",
|
|
473
|
+
"fieldName": "counter",
|
|
474
|
+
"inheritedFrom": {
|
|
475
|
+
"name": "AvatarComponentMixin",
|
|
476
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
477
|
+
}
|
|
475
478
|
},
|
|
476
479
|
{
|
|
477
|
-
"name": "
|
|
480
|
+
"name": "is-typing",
|
|
478
481
|
"type": {
|
|
479
|
-
"text": "
|
|
482
|
+
"text": "boolean"
|
|
480
483
|
},
|
|
481
|
-
"default": "
|
|
482
|
-
"description": "
|
|
483
|
-
"fieldName": "
|
|
484
|
+
"default": "false",
|
|
485
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
486
|
+
"fieldName": "isTyping",
|
|
487
|
+
"inheritedFrom": {
|
|
488
|
+
"name": "AvatarComponentMixin",
|
|
489
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
490
|
+
}
|
|
484
491
|
}
|
|
485
|
-
]
|
|
486
|
-
"superclass": {
|
|
487
|
-
"name": "Component",
|
|
488
|
-
"module": "/src/models"
|
|
489
|
-
},
|
|
490
|
-
"tagName": "mdc-badge",
|
|
491
|
-
"jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n */",
|
|
492
|
-
"customElement": true
|
|
492
|
+
]
|
|
493
493
|
}
|
|
494
494
|
],
|
|
495
495
|
"exports": [
|
|
@@ -497,8 +497,8 @@
|
|
|
497
497
|
"kind": "js",
|
|
498
498
|
"name": "default",
|
|
499
499
|
"declaration": {
|
|
500
|
-
"name": "
|
|
501
|
-
"module": "components/
|
|
500
|
+
"name": "Avatar",
|
|
501
|
+
"module": "components/avatar/avatar.component.js"
|
|
502
502
|
}
|
|
503
503
|
}
|
|
504
504
|
]
|
|
@@ -2405,105 +2405,285 @@
|
|
|
2405
2405
|
},
|
|
2406
2406
|
{
|
|
2407
2407
|
"kind": "field",
|
|
2408
|
-
"name": "url",
|
|
2408
|
+
"name": "url",
|
|
2409
|
+
"type": {
|
|
2410
|
+
"text": "string | undefined"
|
|
2411
|
+
},
|
|
2412
|
+
"description": "Url of where icons will be fetched from",
|
|
2413
|
+
"attribute": "url"
|
|
2414
|
+
},
|
|
2415
|
+
{
|
|
2416
|
+
"kind": "field",
|
|
2417
|
+
"name": "fileExtension",
|
|
2418
|
+
"type": {
|
|
2419
|
+
"text": "string | undefined"
|
|
2420
|
+
},
|
|
2421
|
+
"description": "File extension of icons",
|
|
2422
|
+
"default": "svg",
|
|
2423
|
+
"attribute": "file-extension",
|
|
2424
|
+
"reflects": true
|
|
2425
|
+
},
|
|
2426
|
+
{
|
|
2427
|
+
"kind": "field",
|
|
2428
|
+
"name": "lengthUnit",
|
|
2429
|
+
"type": {
|
|
2430
|
+
"text": "string"
|
|
2431
|
+
},
|
|
2432
|
+
"description": "Length unit used for sizing of icons",
|
|
2433
|
+
"default": "em",
|
|
2434
|
+
"attribute": "length-unit",
|
|
2435
|
+
"reflects": true
|
|
2436
|
+
},
|
|
2437
|
+
{
|
|
2438
|
+
"kind": "field",
|
|
2439
|
+
"name": "size",
|
|
2440
|
+
"type": {
|
|
2441
|
+
"text": "number | undefined"
|
|
2442
|
+
},
|
|
2443
|
+
"description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
|
|
2444
|
+
"default": "1",
|
|
2445
|
+
"attribute": "size",
|
|
2446
|
+
"reflects": true
|
|
2447
|
+
},
|
|
2448
|
+
{
|
|
2449
|
+
"kind": "method",
|
|
2450
|
+
"name": "updateValuesInContext",
|
|
2451
|
+
"privacy": "private"
|
|
2452
|
+
},
|
|
2453
|
+
{
|
|
2454
|
+
"kind": "method",
|
|
2455
|
+
"name": "updateContext",
|
|
2456
|
+
"privacy": "protected",
|
|
2457
|
+
"return": {
|
|
2458
|
+
"type": {
|
|
2459
|
+
"text": "void"
|
|
2460
|
+
}
|
|
2461
|
+
}
|
|
2462
|
+
}
|
|
2463
|
+
],
|
|
2464
|
+
"attributes": [
|
|
2465
|
+
{
|
|
2466
|
+
"name": "url",
|
|
2467
|
+
"type": {
|
|
2468
|
+
"text": "string | undefined"
|
|
2469
|
+
},
|
|
2470
|
+
"description": "Url of where icons will be fetched from",
|
|
2471
|
+
"fieldName": "url"
|
|
2472
|
+
},
|
|
2473
|
+
{
|
|
2474
|
+
"name": "file-extension",
|
|
2475
|
+
"type": {
|
|
2476
|
+
"text": "string | undefined"
|
|
2477
|
+
},
|
|
2478
|
+
"description": "File extension of icons",
|
|
2479
|
+
"default": "svg",
|
|
2480
|
+
"fieldName": "fileExtension"
|
|
2481
|
+
},
|
|
2482
|
+
{
|
|
2483
|
+
"name": "length-unit",
|
|
2484
|
+
"type": {
|
|
2485
|
+
"text": "string"
|
|
2486
|
+
},
|
|
2487
|
+
"description": "Length unit used for sizing of icons",
|
|
2488
|
+
"default": "em",
|
|
2489
|
+
"fieldName": "lengthUnit"
|
|
2490
|
+
},
|
|
2491
|
+
{
|
|
2492
|
+
"name": "size",
|
|
2493
|
+
"type": {
|
|
2494
|
+
"text": "number | undefined"
|
|
2495
|
+
},
|
|
2496
|
+
"description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
|
|
2497
|
+
"default": "1",
|
|
2498
|
+
"fieldName": "size"
|
|
2499
|
+
}
|
|
2500
|
+
],
|
|
2501
|
+
"superclass": {
|
|
2502
|
+
"name": "Provider",
|
|
2503
|
+
"module": "/src/models"
|
|
2504
|
+
},
|
|
2505
|
+
"tagName": "mdc-iconprovider",
|
|
2506
|
+
"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 */",
|
|
2507
|
+
"customElement": true
|
|
2508
|
+
}
|
|
2509
|
+
],
|
|
2510
|
+
"exports": [
|
|
2511
|
+
{
|
|
2512
|
+
"kind": "js",
|
|
2513
|
+
"name": "default",
|
|
2514
|
+
"declaration": {
|
|
2515
|
+
"name": "IconProvider",
|
|
2516
|
+
"module": "components/iconprovider/iconprovider.component.js"
|
|
2517
|
+
}
|
|
2518
|
+
}
|
|
2519
|
+
]
|
|
2520
|
+
},
|
|
2521
|
+
{
|
|
2522
|
+
"kind": "javascript-module",
|
|
2523
|
+
"path": "components/labelandhelper/labelandhelper.component.js",
|
|
2524
|
+
"declarations": [
|
|
2525
|
+
{
|
|
2526
|
+
"kind": "class",
|
|
2527
|
+
"description": "labelandhelper is a component that contains the label and helper/validation text\n that can be configured in various ways to suit different use cases (most of the input related components).\nIt is used as an internal component and is not intended to be used directly by consumers.",
|
|
2528
|
+
"name": "LabelAndHelper",
|
|
2529
|
+
"members": [
|
|
2530
|
+
{
|
|
2531
|
+
"kind": "field",
|
|
2532
|
+
"name": "label",
|
|
2409
2533
|
"type": {
|
|
2410
2534
|
"text": "string | undefined"
|
|
2411
2535
|
},
|
|
2412
|
-
"description": "
|
|
2413
|
-
"attribute": "
|
|
2536
|
+
"description": "The label of the input field. It is linked to the input field using the `for` attribute.",
|
|
2537
|
+
"attribute": "label",
|
|
2538
|
+
"reflects": true
|
|
2414
2539
|
},
|
|
2415
2540
|
{
|
|
2416
2541
|
"kind": "field",
|
|
2417
|
-
"name": "
|
|
2542
|
+
"name": "id",
|
|
2543
|
+
"default": "`mdc-input-${uuidv4()}`",
|
|
2544
|
+
"description": "The unique id of the input field. It is used to link the input field with the label.",
|
|
2545
|
+
"attribute": "id"
|
|
2546
|
+
},
|
|
2547
|
+
{
|
|
2548
|
+
"kind": "field",
|
|
2549
|
+
"name": "helpTextType",
|
|
2418
2550
|
"type": {
|
|
2419
|
-
"text": "
|
|
2551
|
+
"text": "ValidationType"
|
|
2420
2552
|
},
|
|
2421
|
-
"description": "
|
|
2422
|
-
"
|
|
2423
|
-
"attribute": "file-extension",
|
|
2553
|
+
"description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
|
|
2554
|
+
"attribute": "help-text-type",
|
|
2424
2555
|
"reflects": true
|
|
2425
2556
|
},
|
|
2426
2557
|
{
|
|
2427
2558
|
"kind": "field",
|
|
2428
|
-
"name": "
|
|
2559
|
+
"name": "helpText",
|
|
2429
2560
|
"type": {
|
|
2430
|
-
"text": "string"
|
|
2561
|
+
"text": "string | undefined"
|
|
2431
2562
|
},
|
|
2432
|
-
"description": "
|
|
2433
|
-
"
|
|
2434
|
-
"attribute": "length-unit",
|
|
2563
|
+
"description": "The help text that is displayed below the input field.",
|
|
2564
|
+
"attribute": "help-text",
|
|
2435
2565
|
"reflects": true
|
|
2436
2566
|
},
|
|
2437
2567
|
{
|
|
2438
2568
|
"kind": "field",
|
|
2439
|
-
"name": "
|
|
2569
|
+
"name": "labelInfoText",
|
|
2440
2570
|
"type": {
|
|
2441
|
-
"text": "
|
|
2571
|
+
"text": "string | undefined"
|
|
2442
2572
|
},
|
|
2443
|
-
"
|
|
2444
|
-
"default": "1",
|
|
2445
|
-
"attribute": "size",
|
|
2446
|
-
"reflects": true
|
|
2573
|
+
"attribute": "label-info-text"
|
|
2447
2574
|
},
|
|
2448
2575
|
{
|
|
2449
2576
|
"kind": "method",
|
|
2450
|
-
"name": "
|
|
2451
|
-
"privacy": "
|
|
2577
|
+
"name": "renderLabelElement",
|
|
2578
|
+
"privacy": "protected",
|
|
2579
|
+
"description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
|
|
2580
|
+
"return": {
|
|
2581
|
+
"type": {
|
|
2582
|
+
"text": ""
|
|
2583
|
+
}
|
|
2584
|
+
}
|
|
2452
2585
|
},
|
|
2453
2586
|
{
|
|
2454
2587
|
"kind": "method",
|
|
2455
|
-
"name": "
|
|
2588
|
+
"name": "renderLabelInfoToggleTip",
|
|
2456
2589
|
"privacy": "protected",
|
|
2590
|
+
"description": "displays a info icon, which when hovered over, displays the labelInfoText.\nThis is in beta and is subject to change once the toggletip component is ready.",
|
|
2457
2591
|
"return": {
|
|
2458
2592
|
"type": {
|
|
2459
|
-
"text": "
|
|
2593
|
+
"text": ""
|
|
2594
|
+
}
|
|
2595
|
+
}
|
|
2596
|
+
},
|
|
2597
|
+
{
|
|
2598
|
+
"kind": "method",
|
|
2599
|
+
"name": "renderHelpTextIcon",
|
|
2600
|
+
"privacy": "protected",
|
|
2601
|
+
"description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
|
|
2602
|
+
"return": {
|
|
2603
|
+
"type": {
|
|
2604
|
+
"text": ""
|
|
2605
|
+
}
|
|
2606
|
+
}
|
|
2607
|
+
},
|
|
2608
|
+
{
|
|
2609
|
+
"kind": "method",
|
|
2610
|
+
"name": "renderHelpText",
|
|
2611
|
+
"privacy": "protected",
|
|
2612
|
+
"description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
|
|
2613
|
+
"return": {
|
|
2614
|
+
"type": {
|
|
2615
|
+
"text": ""
|
|
2616
|
+
}
|
|
2617
|
+
}
|
|
2618
|
+
},
|
|
2619
|
+
{
|
|
2620
|
+
"kind": "method",
|
|
2621
|
+
"name": "renderLabel",
|
|
2622
|
+
"privacy": "protected",
|
|
2623
|
+
"description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
|
|
2624
|
+
"return": {
|
|
2625
|
+
"type": {
|
|
2626
|
+
"text": ""
|
|
2627
|
+
}
|
|
2628
|
+
}
|
|
2629
|
+
},
|
|
2630
|
+
{
|
|
2631
|
+
"kind": "method",
|
|
2632
|
+
"name": "renderHelperText",
|
|
2633
|
+
"privacy": "protected",
|
|
2634
|
+
"description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
|
|
2635
|
+
"return": {
|
|
2636
|
+
"type": {
|
|
2637
|
+
"text": ""
|
|
2460
2638
|
}
|
|
2461
2639
|
}
|
|
2462
2640
|
}
|
|
2463
2641
|
],
|
|
2464
2642
|
"attributes": [
|
|
2465
2643
|
{
|
|
2466
|
-
"name": "
|
|
2644
|
+
"name": "label",
|
|
2467
2645
|
"type": {
|
|
2468
2646
|
"text": "string | undefined"
|
|
2469
2647
|
},
|
|
2470
|
-
"description": "
|
|
2471
|
-
"fieldName": "
|
|
2648
|
+
"description": "The label of the input field. It is linked to the input field using the `for` attribute.",
|
|
2649
|
+
"fieldName": "label"
|
|
2472
2650
|
},
|
|
2473
2651
|
{
|
|
2474
|
-
"name": "
|
|
2652
|
+
"name": "id",
|
|
2653
|
+
"default": "`mdc-input-${uuidv4()}`",
|
|
2654
|
+
"description": "The unique id of the input field. It is used to link the input field with the label.",
|
|
2655
|
+
"fieldName": "id"
|
|
2656
|
+
},
|
|
2657
|
+
{
|
|
2658
|
+
"name": "help-text-type",
|
|
2475
2659
|
"type": {
|
|
2476
|
-
"text": "
|
|
2660
|
+
"text": "ValidationType"
|
|
2477
2661
|
},
|
|
2478
|
-
"description": "
|
|
2479
|
-
"
|
|
2480
|
-
"fieldName": "fileExtension"
|
|
2662
|
+
"description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
|
|
2663
|
+
"fieldName": "helpTextType"
|
|
2481
2664
|
},
|
|
2482
2665
|
{
|
|
2483
|
-
"name": "
|
|
2666
|
+
"name": "help-text",
|
|
2484
2667
|
"type": {
|
|
2485
|
-
"text": "string"
|
|
2668
|
+
"text": "string | undefined"
|
|
2486
2669
|
},
|
|
2487
|
-
"description": "
|
|
2488
|
-
"
|
|
2489
|
-
"fieldName": "lengthUnit"
|
|
2670
|
+
"description": "The help text that is displayed below the input field.",
|
|
2671
|
+
"fieldName": "helpText"
|
|
2490
2672
|
},
|
|
2491
2673
|
{
|
|
2492
|
-
"name": "
|
|
2674
|
+
"name": "label-info-text",
|
|
2493
2675
|
"type": {
|
|
2494
|
-
"text": "
|
|
2676
|
+
"text": "string | undefined"
|
|
2495
2677
|
},
|
|
2496
|
-
"
|
|
2497
|
-
"default": "1",
|
|
2498
|
-
"fieldName": "size"
|
|
2678
|
+
"fieldName": "labelInfoText"
|
|
2499
2679
|
}
|
|
2500
2680
|
],
|
|
2501
2681
|
"superclass": {
|
|
2502
|
-
"name": "
|
|
2682
|
+
"name": "Component",
|
|
2503
2683
|
"module": "/src/models"
|
|
2504
2684
|
},
|
|
2505
|
-
"tagName": "mdc-
|
|
2506
|
-
"jsDoc": "/**\n *
|
|
2685
|
+
"tagName": "mdc-labelandhelper",
|
|
2686
|
+
"jsDoc": "/**\n * labelandhelper is a component that contains the label and helper/validation text\n * that can be configured in various ways to suit different use cases (most of the input related components).\n * It is used as an internal component and is not intended to be used directly by consumers.\n *\n * @tagname mdc-labelandhelper\n *\n */",
|
|
2507
2687
|
"customElement": true
|
|
2508
2688
|
}
|
|
2509
2689
|
],
|
|
@@ -2512,8 +2692,8 @@
|
|
|
2512
2692
|
"kind": "js",
|
|
2513
2693
|
"name": "default",
|
|
2514
2694
|
"declaration": {
|
|
2515
|
-
"name": "
|
|
2516
|
-
"module": "components/
|
|
2695
|
+
"name": "LabelAndHelper",
|
|
2696
|
+
"module": "components/labelandhelper/labelandhelper.component.js"
|
|
2517
2697
|
}
|
|
2518
2698
|
}
|
|
2519
2699
|
]
|
|
@@ -3091,45 +3271,140 @@
|
|
|
3091
3271
|
},
|
|
3092
3272
|
{
|
|
3093
3273
|
"kind": "javascript-module",
|
|
3094
|
-
"path": "utils/mixins/
|
|
3274
|
+
"path": "utils/mixins/NameMixin.js",
|
|
3095
3275
|
"declarations": [
|
|
3096
3276
|
{
|
|
3097
3277
|
"kind": "mixin",
|
|
3098
3278
|
"description": "",
|
|
3099
|
-
"name": "
|
|
3279
|
+
"name": "NameMixin",
|
|
3100
3280
|
"members": [
|
|
3101
3281
|
{
|
|
3102
3282
|
"kind": "field",
|
|
3103
|
-
"name": "
|
|
3283
|
+
"name": "name",
|
|
3104
3284
|
"type": {
|
|
3105
3285
|
"text": "string"
|
|
3106
3286
|
},
|
|
3107
3287
|
"default": "''",
|
|
3108
|
-
"description": "
|
|
3109
|
-
"attribute": "
|
|
3288
|
+
"description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
|
|
3289
|
+
"attribute": "name",
|
|
3110
3290
|
"reflects": true
|
|
3111
|
-
},
|
|
3112
|
-
{
|
|
3113
|
-
"kind": "method",
|
|
3114
|
-
"name": "renderLabel",
|
|
3115
|
-
"privacy": "public",
|
|
3116
|
-
"description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
|
|
3117
|
-
"return": {
|
|
3118
|
-
"type": {
|
|
3119
|
-
"text": ""
|
|
3120
|
-
}
|
|
3121
|
-
}
|
|
3122
3291
|
}
|
|
3123
3292
|
],
|
|
3124
3293
|
"attributes": [
|
|
3125
3294
|
{
|
|
3126
|
-
"name": "
|
|
3295
|
+
"name": "name",
|
|
3127
3296
|
"type": {
|
|
3128
3297
|
"text": "string"
|
|
3129
3298
|
},
|
|
3130
3299
|
"default": "''",
|
|
3131
|
-
"description": "
|
|
3132
|
-
"fieldName": "
|
|
3300
|
+
"description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
|
|
3301
|
+
"fieldName": "name"
|
|
3302
|
+
}
|
|
3303
|
+
],
|
|
3304
|
+
"parameters": [
|
|
3305
|
+
{
|
|
3306
|
+
"name": "superClass",
|
|
3307
|
+
"type": {
|
|
3308
|
+
"text": "T"
|
|
3309
|
+
}
|
|
3310
|
+
}
|
|
3311
|
+
]
|
|
3312
|
+
}
|
|
3313
|
+
],
|
|
3314
|
+
"exports": [
|
|
3315
|
+
{
|
|
3316
|
+
"kind": "js",
|
|
3317
|
+
"name": "NameMixin",
|
|
3318
|
+
"declaration": {
|
|
3319
|
+
"name": "NameMixin",
|
|
3320
|
+
"module": "utils/mixins/NameMixin.js"
|
|
3321
|
+
}
|
|
3322
|
+
}
|
|
3323
|
+
]
|
|
3324
|
+
},
|
|
3325
|
+
{
|
|
3326
|
+
"kind": "javascript-module",
|
|
3327
|
+
"path": "utils/mixins/ReadonlyMixin.js",
|
|
3328
|
+
"declarations": [
|
|
3329
|
+
{
|
|
3330
|
+
"kind": "mixin",
|
|
3331
|
+
"description": "",
|
|
3332
|
+
"name": "ReadonlyMixin",
|
|
3333
|
+
"members": [
|
|
3334
|
+
{
|
|
3335
|
+
"kind": "field",
|
|
3336
|
+
"name": "readonly",
|
|
3337
|
+
"type": {
|
|
3338
|
+
"text": "boolean"
|
|
3339
|
+
},
|
|
3340
|
+
"default": "false",
|
|
3341
|
+
"description": "Indicates whether the component is readonly.\nWhen the component is readonly, it is not editable.",
|
|
3342
|
+
"attribute": "readonly",
|
|
3343
|
+
"reflects": true
|
|
3344
|
+
}
|
|
3345
|
+
],
|
|
3346
|
+
"attributes": [
|
|
3347
|
+
{
|
|
3348
|
+
"name": "readonly",
|
|
3349
|
+
"type": {
|
|
3350
|
+
"text": "boolean"
|
|
3351
|
+
},
|
|
3352
|
+
"default": "false",
|
|
3353
|
+
"description": "Indicates whether the component is readonly.\nWhen the component is readonly, it is not editable.",
|
|
3354
|
+
"fieldName": "readonly"
|
|
3355
|
+
}
|
|
3356
|
+
],
|
|
3357
|
+
"parameters": [
|
|
3358
|
+
{
|
|
3359
|
+
"name": "superClass",
|
|
3360
|
+
"type": {
|
|
3361
|
+
"text": "T"
|
|
3362
|
+
}
|
|
3363
|
+
}
|
|
3364
|
+
]
|
|
3365
|
+
}
|
|
3366
|
+
],
|
|
3367
|
+
"exports": [
|
|
3368
|
+
{
|
|
3369
|
+
"kind": "js",
|
|
3370
|
+
"name": "ReadonlyMixin",
|
|
3371
|
+
"declaration": {
|
|
3372
|
+
"name": "ReadonlyMixin",
|
|
3373
|
+
"module": "utils/mixins/ReadonlyMixin.js"
|
|
3374
|
+
}
|
|
3375
|
+
}
|
|
3376
|
+
]
|
|
3377
|
+
},
|
|
3378
|
+
{
|
|
3379
|
+
"kind": "javascript-module",
|
|
3380
|
+
"path": "utils/mixins/RequiredMixin.js",
|
|
3381
|
+
"declarations": [
|
|
3382
|
+
{
|
|
3383
|
+
"kind": "mixin",
|
|
3384
|
+
"description": "",
|
|
3385
|
+
"name": "RequiredMixin",
|
|
3386
|
+
"members": [
|
|
3387
|
+
{
|
|
3388
|
+
"kind": "field",
|
|
3389
|
+
"name": "required",
|
|
3390
|
+
"type": {
|
|
3391
|
+
"text": "boolean"
|
|
3392
|
+
},
|
|
3393
|
+
"default": "false",
|
|
3394
|
+
"description": "Indicates whether the component is required.\nWhen the component is required, it is a mandatory field.",
|
|
3395
|
+
"attribute": "required",
|
|
3396
|
+
"reflects": true
|
|
3397
|
+
}
|
|
3398
|
+
],
|
|
3399
|
+
"attributes": [
|
|
3400
|
+
{
|
|
3401
|
+
"name": "required",
|
|
3402
|
+
"type": {
|
|
3403
|
+
"text": "boolean"
|
|
3404
|
+
},
|
|
3405
|
+
"default": "false",
|
|
3406
|
+
"description": "Indicates whether the component is required.\nWhen the component is required, it is a mandatory field.",
|
|
3407
|
+
"fieldName": "required"
|
|
3133
3408
|
}
|
|
3134
3409
|
],
|
|
3135
3410
|
"parameters": [
|
|
@@ -3145,10 +3420,10 @@
|
|
|
3145
3420
|
"exports": [
|
|
3146
3421
|
{
|
|
3147
3422
|
"kind": "js",
|
|
3148
|
-
"name": "
|
|
3423
|
+
"name": "RequiredMixin",
|
|
3149
3424
|
"declaration": {
|
|
3150
|
-
"name": "
|
|
3151
|
-
"module": "utils/mixins/
|
|
3425
|
+
"name": "RequiredMixin",
|
|
3426
|
+
"module": "utils/mixins/RequiredMixin.js"
|
|
3152
3427
|
}
|
|
3153
3428
|
}
|
|
3154
3429
|
]
|
|
@@ -3206,6 +3481,59 @@
|
|
|
3206
3481
|
}
|
|
3207
3482
|
]
|
|
3208
3483
|
},
|
|
3484
|
+
{
|
|
3485
|
+
"kind": "javascript-module",
|
|
3486
|
+
"path": "utils/mixins/ValueMixin.js",
|
|
3487
|
+
"declarations": [
|
|
3488
|
+
{
|
|
3489
|
+
"kind": "mixin",
|
|
3490
|
+
"description": "",
|
|
3491
|
+
"name": "ValueMixin",
|
|
3492
|
+
"members": [
|
|
3493
|
+
{
|
|
3494
|
+
"kind": "field",
|
|
3495
|
+
"name": "value",
|
|
3496
|
+
"type": {
|
|
3497
|
+
"text": "string"
|
|
3498
|
+
},
|
|
3499
|
+
"default": "''",
|
|
3500
|
+
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
|
3501
|
+
"attribute": "value",
|
|
3502
|
+
"reflects": true
|
|
3503
|
+
}
|
|
3504
|
+
],
|
|
3505
|
+
"attributes": [
|
|
3506
|
+
{
|
|
3507
|
+
"name": "value",
|
|
3508
|
+
"type": {
|
|
3509
|
+
"text": "string"
|
|
3510
|
+
},
|
|
3511
|
+
"default": "''",
|
|
3512
|
+
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
|
3513
|
+
"fieldName": "value"
|
|
3514
|
+
}
|
|
3515
|
+
],
|
|
3516
|
+
"parameters": [
|
|
3517
|
+
{
|
|
3518
|
+
"name": "superClass",
|
|
3519
|
+
"type": {
|
|
3520
|
+
"text": "T"
|
|
3521
|
+
}
|
|
3522
|
+
}
|
|
3523
|
+
]
|
|
3524
|
+
}
|
|
3525
|
+
],
|
|
3526
|
+
"exports": [
|
|
3527
|
+
{
|
|
3528
|
+
"kind": "js",
|
|
3529
|
+
"name": "ValueMixin",
|
|
3530
|
+
"declaration": {
|
|
3531
|
+
"name": "ValueMixin",
|
|
3532
|
+
"module": "utils/mixins/ValueMixin.js"
|
|
3533
|
+
}
|
|
3534
|
+
}
|
|
3535
|
+
]
|
|
3536
|
+
},
|
|
3209
3537
|
{
|
|
3210
3538
|
"kind": "javascript-module",
|
|
3211
3539
|
"path": "utils/mixins/index.types.js",
|