@momentum-design/components 0.47.1 → 0.48.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 +638 -638
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +2 -2
- package/package.json +1 -1
|
@@ -4,464 +4,159 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "components/
|
|
8
|
-
"declarations": [
|
|
9
|
-
{
|
|
10
|
-
"kind": "class",
|
|
11
|
-
"description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
|
|
12
|
-
"name": "Appheader",
|
|
13
|
-
"cssParts": [
|
|
14
|
-
{
|
|
15
|
-
"description": "The main container for styling the header.",
|
|
16
|
-
"name": "container"
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
"description": "The leading section of the header.",
|
|
20
|
-
"name": "leading-section"
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
"description": "The center section of the header.",
|
|
24
|
-
"name": "center-section"
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
"description": "The trailing section of the header.",
|
|
28
|
-
"name": "trailing-section"
|
|
29
|
-
}
|
|
30
|
-
],
|
|
31
|
-
"slots": [
|
|
32
|
-
{
|
|
33
|
-
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
34
|
-
"name": "leading"
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
38
|
-
"name": "center"
|
|
39
|
-
},
|
|
40
|
-
{
|
|
41
|
-
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
42
|
-
"name": "trailing"
|
|
43
|
-
}
|
|
44
|
-
],
|
|
45
|
-
"members": [],
|
|
46
|
-
"superclass": {
|
|
47
|
-
"name": "Component",
|
|
48
|
-
"module": "/src/models"
|
|
49
|
-
},
|
|
50
|
-
"tagName": "mdc-appheader",
|
|
51
|
-
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
|
52
|
-
"customElement": true
|
|
53
|
-
}
|
|
54
|
-
],
|
|
55
|
-
"exports": [
|
|
56
|
-
{
|
|
57
|
-
"kind": "js",
|
|
58
|
-
"name": "default",
|
|
59
|
-
"declaration": {
|
|
60
|
-
"name": "Appheader",
|
|
61
|
-
"module": "components/appheader/appheader.component.js"
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
]
|
|
65
|
-
},
|
|
66
|
-
{
|
|
67
|
-
"kind": "javascript-module",
|
|
68
|
-
"path": "components/avatar/avatar.component.js",
|
|
7
|
+
"path": "components/alertchip/alertchip.component.js",
|
|
69
8
|
"declarations": [
|
|
70
9
|
{
|
|
71
10
|
"kind": "class",
|
|
72
|
-
"description": "
|
|
73
|
-
"name": "
|
|
11
|
+
"description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - neutral, warning, error, success, and informational\n\nThis component is built by extending Buttonsimple.",
|
|
12
|
+
"name": "AlertChip",
|
|
74
13
|
"cssProperties": [
|
|
75
14
|
{
|
|
76
|
-
"description": "
|
|
77
|
-
"name": "--mdc-
|
|
78
|
-
},
|
|
79
|
-
{
|
|
80
|
-
"description": "Allows customization of the default foreground color.",
|
|
81
|
-
"name": "--mdc-avatar-default-foreground-color"
|
|
15
|
+
"description": "The color of the label text",
|
|
16
|
+
"name": "--mdc-chip-color"
|
|
82
17
|
},
|
|
83
18
|
{
|
|
84
|
-
"description": "
|
|
85
|
-
"name": "--mdc-
|
|
19
|
+
"description": "The color of the icon",
|
|
20
|
+
"name": "--mdc-chip-icon-color"
|
|
86
21
|
},
|
|
87
22
|
{
|
|
88
|
-
"description": "
|
|
89
|
-
"name": "--mdc-
|
|
23
|
+
"description": "The border color of the alertchip",
|
|
24
|
+
"name": "--mdc-chip-border-color"
|
|
90
25
|
},
|
|
91
26
|
{
|
|
92
|
-
"description": "
|
|
93
|
-
"name": "--mdc-
|
|
27
|
+
"description": "The background color of the alertchip",
|
|
28
|
+
"name": "--mdc-chip-background-color"
|
|
94
29
|
}
|
|
95
30
|
],
|
|
96
31
|
"members": [
|
|
97
32
|
{
|
|
98
33
|
"kind": "field",
|
|
99
|
-
"name": "
|
|
34
|
+
"name": "variant",
|
|
100
35
|
"type": {
|
|
101
|
-
"text": "
|
|
36
|
+
"text": "VariantType"
|
|
102
37
|
},
|
|
103
|
-
"description": "The
|
|
104
|
-
"
|
|
105
|
-
"
|
|
106
|
-
"name": "AvatarComponentMixin",
|
|
107
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
108
|
-
}
|
|
38
|
+
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
39
|
+
"default": "neutral",
|
|
40
|
+
"attribute": "variant"
|
|
109
41
|
},
|
|
110
42
|
{
|
|
111
43
|
"kind": "field",
|
|
112
|
-
"name": "
|
|
44
|
+
"name": "label",
|
|
113
45
|
"type": {
|
|
114
|
-
"text": "string
|
|
46
|
+
"text": "string"
|
|
115
47
|
},
|
|
116
|
-
"
|
|
117
|
-
"
|
|
118
|
-
"
|
|
119
|
-
"name": "AvatarComponentMixin",
|
|
120
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
121
|
-
}
|
|
48
|
+
"default": "''",
|
|
49
|
+
"description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
|
50
|
+
"attribute": "label"
|
|
122
51
|
},
|
|
123
52
|
{
|
|
124
53
|
"kind": "field",
|
|
125
|
-
"name": "
|
|
54
|
+
"name": "tabIndex",
|
|
126
55
|
"type": {
|
|
127
|
-
"text": "
|
|
56
|
+
"text": "number"
|
|
128
57
|
},
|
|
129
|
-
"
|
|
130
|
-
"
|
|
58
|
+
"default": "0",
|
|
59
|
+
"description": "This property specifies the tab order of the element.",
|
|
60
|
+
"attribute": "tabIndex",
|
|
61
|
+
"reflects": true,
|
|
131
62
|
"inheritedFrom": {
|
|
132
|
-
"name": "
|
|
133
|
-
"module": "utils/mixins/
|
|
63
|
+
"name": "TabIndexMixin",
|
|
64
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
134
65
|
}
|
|
135
66
|
},
|
|
136
67
|
{
|
|
137
68
|
"kind": "field",
|
|
138
|
-
"name": "
|
|
69
|
+
"name": "disabled",
|
|
139
70
|
"type": {
|
|
140
|
-
"text": "
|
|
71
|
+
"text": "boolean | undefined"
|
|
141
72
|
},
|
|
142
|
-
"description": "
|
|
143
|
-
"default": "
|
|
144
|
-
"attribute": "
|
|
73
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
74
|
+
"default": "undefined",
|
|
75
|
+
"attribute": "disabled",
|
|
145
76
|
"reflects": true,
|
|
146
77
|
"inheritedFrom": {
|
|
147
|
-
"name": "
|
|
148
|
-
"module": "utils/mixins/
|
|
78
|
+
"name": "DisabledMixin",
|
|
79
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
149
80
|
}
|
|
150
81
|
},
|
|
151
82
|
{
|
|
152
83
|
"kind": "field",
|
|
153
|
-
"name": "
|
|
84
|
+
"name": "active",
|
|
154
85
|
"type": {
|
|
155
|
-
"text": "
|
|
86
|
+
"text": "boolean"
|
|
156
87
|
},
|
|
157
|
-
"
|
|
158
|
-
"
|
|
88
|
+
"default": "false",
|
|
89
|
+
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
|
|
90
|
+
"attribute": "active",
|
|
91
|
+
"reflects": true,
|
|
159
92
|
"inheritedFrom": {
|
|
160
|
-
"name": "
|
|
161
|
-
"module": "
|
|
93
|
+
"name": "Buttonsimple",
|
|
94
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
162
95
|
}
|
|
163
96
|
},
|
|
164
97
|
{
|
|
165
98
|
"kind": "field",
|
|
166
|
-
"name": "
|
|
99
|
+
"name": "softDisabled",
|
|
167
100
|
"type": {
|
|
168
101
|
"text": "boolean"
|
|
169
102
|
},
|
|
170
103
|
"default": "false",
|
|
171
|
-
"description": "
|
|
172
|
-
"attribute": "
|
|
104
|
+
"description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
|
|
105
|
+
"attribute": "soft-disabled",
|
|
173
106
|
"inheritedFrom": {
|
|
174
|
-
"name": "
|
|
175
|
-
"module": "
|
|
107
|
+
"name": "Buttonsimple",
|
|
108
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
176
109
|
}
|
|
177
110
|
},
|
|
178
111
|
{
|
|
179
112
|
"kind": "field",
|
|
180
|
-
"name": "
|
|
181
|
-
"type": {
|
|
182
|
-
"text": "IconNames | undefined"
|
|
183
|
-
},
|
|
184
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
185
|
-
"attribute": "icon-name",
|
|
186
|
-
"inheritedFrom": {
|
|
187
|
-
"name": "IconNameMixin",
|
|
188
|
-
"module": "utils/mixins/IconNameMixin.js"
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
],
|
|
192
|
-
"mixins": [
|
|
193
|
-
{
|
|
194
|
-
"name": "AvatarComponentMixin",
|
|
195
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
196
|
-
},
|
|
197
|
-
{
|
|
198
|
-
"name": "IconNameMixin",
|
|
199
|
-
"module": "/src/utils/mixins/IconNameMixin"
|
|
200
|
-
}
|
|
201
|
-
],
|
|
202
|
-
"superclass": {
|
|
203
|
-
"name": "Component",
|
|
204
|
-
"module": "/src/models"
|
|
205
|
-
},
|
|
206
|
-
"tagName": "mdc-avatar",
|
|
207
|
-
"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 */",
|
|
208
|
-
"customElement": true,
|
|
209
|
-
"attributes": [
|
|
210
|
-
{
|
|
211
|
-
"name": "src",
|
|
113
|
+
"name": "size",
|
|
212
114
|
"type": {
|
|
213
|
-
"text": "
|
|
115
|
+
"text": "ButtonSize"
|
|
214
116
|
},
|
|
215
|
-
"description": "
|
|
216
|
-
"
|
|
117
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
118
|
+
"default": "32",
|
|
119
|
+
"attribute": "size",
|
|
120
|
+
"reflects": true,
|
|
217
121
|
"inheritedFrom": {
|
|
218
|
-
"name": "
|
|
219
|
-
"module": "
|
|
122
|
+
"name": "Buttonsimple",
|
|
123
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
220
124
|
}
|
|
221
125
|
},
|
|
222
126
|
{
|
|
223
|
-
"
|
|
224
|
-
"
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
"
|
|
228
|
-
"
|
|
127
|
+
"kind": "field",
|
|
128
|
+
"name": "role",
|
|
129
|
+
"description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
|
|
130
|
+
"default": "button",
|
|
131
|
+
"attribute": "role",
|
|
132
|
+
"reflects": true,
|
|
229
133
|
"inheritedFrom": {
|
|
230
|
-
"name": "
|
|
231
|
-
"module": "
|
|
134
|
+
"name": "Buttonsimple",
|
|
135
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
232
136
|
}
|
|
233
137
|
},
|
|
234
138
|
{
|
|
235
|
-
"
|
|
139
|
+
"kind": "field",
|
|
140
|
+
"name": "type",
|
|
236
141
|
"type": {
|
|
237
|
-
"text": "
|
|
142
|
+
"text": "ButtonType"
|
|
238
143
|
},
|
|
239
|
-
"description": "
|
|
240
|
-
"
|
|
144
|
+
"description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
|
|
145
|
+
"default": "button",
|
|
146
|
+
"attribute": "type",
|
|
147
|
+
"reflects": true,
|
|
241
148
|
"inheritedFrom": {
|
|
242
|
-
"name": "
|
|
243
|
-
"module": "
|
|
149
|
+
"name": "Buttonsimple",
|
|
150
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
244
151
|
}
|
|
245
152
|
},
|
|
246
153
|
{
|
|
247
|
-
"
|
|
248
|
-
"
|
|
249
|
-
|
|
250
|
-
},
|
|
251
|
-
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
252
|
-
"default": "32",
|
|
253
|
-
"fieldName": "size",
|
|
154
|
+
"kind": "method",
|
|
155
|
+
"name": "executeAction",
|
|
156
|
+
"privacy": "protected",
|
|
254
157
|
"inheritedFrom": {
|
|
255
|
-
"name": "
|
|
256
|
-
"module": "
|
|
257
|
-
}
|
|
258
|
-
},
|
|
259
|
-
{
|
|
260
|
-
"name": "counter",
|
|
261
|
-
"type": {
|
|
262
|
-
"text": "number | undefined"
|
|
263
|
-
},
|
|
264
|
-
"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`.",
|
|
265
|
-
"fieldName": "counter",
|
|
266
|
-
"inheritedFrom": {
|
|
267
|
-
"name": "AvatarComponentMixin",
|
|
268
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
269
|
-
}
|
|
270
|
-
},
|
|
271
|
-
{
|
|
272
|
-
"name": "is-typing",
|
|
273
|
-
"type": {
|
|
274
|
-
"text": "boolean"
|
|
275
|
-
},
|
|
276
|
-
"default": "false",
|
|
277
|
-
"description": "Represents the typing indicator when the user is typing.",
|
|
278
|
-
"fieldName": "isTyping",
|
|
279
|
-
"inheritedFrom": {
|
|
280
|
-
"name": "AvatarComponentMixin",
|
|
281
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
282
|
-
}
|
|
283
|
-
},
|
|
284
|
-
{
|
|
285
|
-
"name": "icon-name",
|
|
286
|
-
"type": {
|
|
287
|
-
"text": "IconNames | undefined"
|
|
288
|
-
},
|
|
289
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
290
|
-
"fieldName": "iconName",
|
|
291
|
-
"inheritedFrom": {
|
|
292
|
-
"name": "IconNameMixin",
|
|
293
|
-
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
294
|
-
}
|
|
295
|
-
}
|
|
296
|
-
]
|
|
297
|
-
}
|
|
298
|
-
],
|
|
299
|
-
"exports": [
|
|
300
|
-
{
|
|
301
|
-
"kind": "js",
|
|
302
|
-
"name": "default",
|
|
303
|
-
"declaration": {
|
|
304
|
-
"name": "Avatar",
|
|
305
|
-
"module": "components/avatar/avatar.component.js"
|
|
306
|
-
}
|
|
307
|
-
}
|
|
308
|
-
]
|
|
309
|
-
},
|
|
310
|
-
{
|
|
311
|
-
"kind": "javascript-module",
|
|
312
|
-
"path": "components/alertchip/alertchip.component.js",
|
|
313
|
-
"declarations": [
|
|
314
|
-
{
|
|
315
|
-
"kind": "class",
|
|
316
|
-
"description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - neutral, warning, error, success, and informational\n\nThis component is built by extending Buttonsimple.",
|
|
317
|
-
"name": "AlertChip",
|
|
318
|
-
"cssProperties": [
|
|
319
|
-
{
|
|
320
|
-
"description": "The color of the label text",
|
|
321
|
-
"name": "--mdc-chip-color"
|
|
322
|
-
},
|
|
323
|
-
{
|
|
324
|
-
"description": "The color of the icon",
|
|
325
|
-
"name": "--mdc-chip-icon-color"
|
|
326
|
-
},
|
|
327
|
-
{
|
|
328
|
-
"description": "The border color of the alertchip",
|
|
329
|
-
"name": "--mdc-chip-border-color"
|
|
330
|
-
},
|
|
331
|
-
{
|
|
332
|
-
"description": "The background color of the alertchip",
|
|
333
|
-
"name": "--mdc-chip-background-color"
|
|
334
|
-
}
|
|
335
|
-
],
|
|
336
|
-
"members": [
|
|
337
|
-
{
|
|
338
|
-
"kind": "field",
|
|
339
|
-
"name": "variant",
|
|
340
|
-
"type": {
|
|
341
|
-
"text": "VariantType"
|
|
342
|
-
},
|
|
343
|
-
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
344
|
-
"default": "neutral",
|
|
345
|
-
"attribute": "variant"
|
|
346
|
-
},
|
|
347
|
-
{
|
|
348
|
-
"kind": "field",
|
|
349
|
-
"name": "label",
|
|
350
|
-
"type": {
|
|
351
|
-
"text": "string"
|
|
352
|
-
},
|
|
353
|
-
"default": "''",
|
|
354
|
-
"description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
|
355
|
-
"attribute": "label"
|
|
356
|
-
},
|
|
357
|
-
{
|
|
358
|
-
"kind": "field",
|
|
359
|
-
"name": "tabIndex",
|
|
360
|
-
"type": {
|
|
361
|
-
"text": "number"
|
|
362
|
-
},
|
|
363
|
-
"default": "0",
|
|
364
|
-
"description": "This property specifies the tab order of the element.",
|
|
365
|
-
"attribute": "tabIndex",
|
|
366
|
-
"reflects": true,
|
|
367
|
-
"inheritedFrom": {
|
|
368
|
-
"name": "TabIndexMixin",
|
|
369
|
-
"module": "utils/mixins/TabIndexMixin.js"
|
|
370
|
-
}
|
|
371
|
-
},
|
|
372
|
-
{
|
|
373
|
-
"kind": "field",
|
|
374
|
-
"name": "disabled",
|
|
375
|
-
"type": {
|
|
376
|
-
"text": "boolean | undefined"
|
|
377
|
-
},
|
|
378
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
379
|
-
"default": "undefined",
|
|
380
|
-
"attribute": "disabled",
|
|
381
|
-
"reflects": true,
|
|
382
|
-
"inheritedFrom": {
|
|
383
|
-
"name": "DisabledMixin",
|
|
384
|
-
"module": "utils/mixins/DisabledMixin.js"
|
|
385
|
-
}
|
|
386
|
-
},
|
|
387
|
-
{
|
|
388
|
-
"kind": "field",
|
|
389
|
-
"name": "active",
|
|
390
|
-
"type": {
|
|
391
|
-
"text": "boolean"
|
|
392
|
-
},
|
|
393
|
-
"default": "false",
|
|
394
|
-
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
|
|
395
|
-
"attribute": "active",
|
|
396
|
-
"reflects": true,
|
|
397
|
-
"inheritedFrom": {
|
|
398
|
-
"name": "Buttonsimple",
|
|
399
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
400
|
-
}
|
|
401
|
-
},
|
|
402
|
-
{
|
|
403
|
-
"kind": "field",
|
|
404
|
-
"name": "softDisabled",
|
|
405
|
-
"type": {
|
|
406
|
-
"text": "boolean"
|
|
407
|
-
},
|
|
408
|
-
"default": "false",
|
|
409
|
-
"description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
|
|
410
|
-
"attribute": "soft-disabled",
|
|
411
|
-
"inheritedFrom": {
|
|
412
|
-
"name": "Buttonsimple",
|
|
413
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
414
|
-
}
|
|
415
|
-
},
|
|
416
|
-
{
|
|
417
|
-
"kind": "field",
|
|
418
|
-
"name": "size",
|
|
419
|
-
"type": {
|
|
420
|
-
"text": "ButtonSize"
|
|
421
|
-
},
|
|
422
|
-
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
423
|
-
"default": "32",
|
|
424
|
-
"attribute": "size",
|
|
425
|
-
"reflects": true,
|
|
426
|
-
"inheritedFrom": {
|
|
427
|
-
"name": "Buttonsimple",
|
|
428
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
429
|
-
}
|
|
430
|
-
},
|
|
431
|
-
{
|
|
432
|
-
"kind": "field",
|
|
433
|
-
"name": "role",
|
|
434
|
-
"description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
|
|
435
|
-
"default": "button",
|
|
436
|
-
"attribute": "role",
|
|
437
|
-
"reflects": true,
|
|
438
|
-
"inheritedFrom": {
|
|
439
|
-
"name": "Buttonsimple",
|
|
440
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
441
|
-
}
|
|
442
|
-
},
|
|
443
|
-
{
|
|
444
|
-
"kind": "field",
|
|
445
|
-
"name": "type",
|
|
446
|
-
"type": {
|
|
447
|
-
"text": "ButtonType"
|
|
448
|
-
},
|
|
449
|
-
"description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
|
|
450
|
-
"default": "button",
|
|
451
|
-
"attribute": "type",
|
|
452
|
-
"reflects": true,
|
|
453
|
-
"inheritedFrom": {
|
|
454
|
-
"name": "Buttonsimple",
|
|
455
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
456
|
-
}
|
|
457
|
-
},
|
|
458
|
-
{
|
|
459
|
-
"kind": "method",
|
|
460
|
-
"name": "executeAction",
|
|
461
|
-
"privacy": "protected",
|
|
462
|
-
"inheritedFrom": {
|
|
463
|
-
"name": "Buttonsimple",
|
|
464
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
158
|
+
"name": "Buttonsimple",
|
|
159
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
465
160
|
}
|
|
466
161
|
},
|
|
467
162
|
{
|
|
@@ -706,54 +401,359 @@
|
|
|
706
401
|
"name": "Buttonsimple",
|
|
707
402
|
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
708
403
|
}
|
|
709
|
-
}
|
|
710
|
-
],
|
|
711
|
-
"superclass": {
|
|
712
|
-
"name": "Buttonsimple",
|
|
713
|
-
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
714
|
-
},
|
|
715
|
-
"tagName": "mdc-alertchip",
|
|
716
|
-
"jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - neutral, warning, error, success, and informational\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n */",
|
|
717
|
-
"customElement": true,
|
|
718
|
-
"events": [
|
|
404
|
+
}
|
|
405
|
+
],
|
|
406
|
+
"superclass": {
|
|
407
|
+
"name": "Buttonsimple",
|
|
408
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
409
|
+
},
|
|
410
|
+
"tagName": "mdc-alertchip",
|
|
411
|
+
"jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - neutral, warning, error, success, and informational\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n */",
|
|
412
|
+
"customElement": true,
|
|
413
|
+
"events": [
|
|
414
|
+
{
|
|
415
|
+
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
|
416
|
+
"name": "click",
|
|
417
|
+
"reactName": "onClick",
|
|
418
|
+
"eventName": "ClickEvent",
|
|
419
|
+
"inheritedFrom": {
|
|
420
|
+
"name": "Buttonsimple",
|
|
421
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
422
|
+
}
|
|
423
|
+
},
|
|
424
|
+
{
|
|
425
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
|
|
426
|
+
"name": "keydown",
|
|
427
|
+
"reactName": "onKeyDown",
|
|
428
|
+
"eventName": "KeydownEvent",
|
|
429
|
+
"inheritedFrom": {
|
|
430
|
+
"name": "Buttonsimple",
|
|
431
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
432
|
+
}
|
|
433
|
+
},
|
|
434
|
+
{
|
|
435
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
|
|
436
|
+
"name": "keyup",
|
|
437
|
+
"reactName": "onKeyUp",
|
|
438
|
+
"eventName": "KeyupEvent",
|
|
439
|
+
"inheritedFrom": {
|
|
440
|
+
"name": "Buttonsimple",
|
|
441
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
442
|
+
}
|
|
443
|
+
},
|
|
444
|
+
{
|
|
445
|
+
"description": "(React: onFocus) This event is dispatched when the button receives focus.",
|
|
446
|
+
"name": "focus",
|
|
447
|
+
"reactName": "onFocus",
|
|
448
|
+
"eventName": "FocusEvent",
|
|
449
|
+
"inheritedFrom": {
|
|
450
|
+
"name": "Buttonsimple",
|
|
451
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
452
|
+
}
|
|
453
|
+
}
|
|
454
|
+
]
|
|
455
|
+
}
|
|
456
|
+
],
|
|
457
|
+
"exports": [
|
|
458
|
+
{
|
|
459
|
+
"kind": "js",
|
|
460
|
+
"name": "default",
|
|
461
|
+
"declaration": {
|
|
462
|
+
"name": "AlertChip",
|
|
463
|
+
"module": "components/alertchip/alertchip.component.js"
|
|
464
|
+
}
|
|
465
|
+
}
|
|
466
|
+
]
|
|
467
|
+
},
|
|
468
|
+
{
|
|
469
|
+
"kind": "javascript-module",
|
|
470
|
+
"path": "components/appheader/appheader.component.js",
|
|
471
|
+
"declarations": [
|
|
472
|
+
{
|
|
473
|
+
"kind": "class",
|
|
474
|
+
"description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
|
|
475
|
+
"name": "Appheader",
|
|
476
|
+
"cssParts": [
|
|
477
|
+
{
|
|
478
|
+
"description": "The main container for styling the header.",
|
|
479
|
+
"name": "container"
|
|
480
|
+
},
|
|
481
|
+
{
|
|
482
|
+
"description": "The leading section of the header.",
|
|
483
|
+
"name": "leading-section"
|
|
484
|
+
},
|
|
485
|
+
{
|
|
486
|
+
"description": "The center section of the header.",
|
|
487
|
+
"name": "center-section"
|
|
488
|
+
},
|
|
489
|
+
{
|
|
490
|
+
"description": "The trailing section of the header.",
|
|
491
|
+
"name": "trailing-section"
|
|
492
|
+
}
|
|
493
|
+
],
|
|
494
|
+
"slots": [
|
|
495
|
+
{
|
|
496
|
+
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
497
|
+
"name": "leading"
|
|
498
|
+
},
|
|
499
|
+
{
|
|
500
|
+
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
501
|
+
"name": "center"
|
|
502
|
+
},
|
|
503
|
+
{
|
|
504
|
+
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
505
|
+
"name": "trailing"
|
|
506
|
+
}
|
|
507
|
+
],
|
|
508
|
+
"members": [],
|
|
509
|
+
"superclass": {
|
|
510
|
+
"name": "Component",
|
|
511
|
+
"module": "/src/models"
|
|
512
|
+
},
|
|
513
|
+
"tagName": "mdc-appheader",
|
|
514
|
+
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
|
515
|
+
"customElement": true
|
|
516
|
+
}
|
|
517
|
+
],
|
|
518
|
+
"exports": [
|
|
519
|
+
{
|
|
520
|
+
"kind": "js",
|
|
521
|
+
"name": "default",
|
|
522
|
+
"declaration": {
|
|
523
|
+
"name": "Appheader",
|
|
524
|
+
"module": "components/appheader/appheader.component.js"
|
|
525
|
+
}
|
|
526
|
+
}
|
|
527
|
+
]
|
|
528
|
+
},
|
|
529
|
+
{
|
|
530
|
+
"kind": "javascript-module",
|
|
531
|
+
"path": "components/avatar/avatar.component.js",
|
|
532
|
+
"declarations": [
|
|
533
|
+
{
|
|
534
|
+
"kind": "class",
|
|
535
|
+
"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.",
|
|
536
|
+
"name": "Avatar",
|
|
537
|
+
"cssProperties": [
|
|
538
|
+
{
|
|
539
|
+
"description": "Allows customization of the default background color.",
|
|
540
|
+
"name": "--mdc-avatar-default-background-color"
|
|
541
|
+
},
|
|
542
|
+
{
|
|
543
|
+
"description": "Allows customization of the default foreground color.",
|
|
544
|
+
"name": "--mdc-avatar-default-foreground-color"
|
|
545
|
+
},
|
|
546
|
+
{
|
|
547
|
+
"description": "Allows customization of the loading indicator background color.",
|
|
548
|
+
"name": "--mdc-avatar-loading-indicator-background-color"
|
|
549
|
+
},
|
|
550
|
+
{
|
|
551
|
+
"description": "Allows customization of the loading indicator foreground color.",
|
|
552
|
+
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
|
553
|
+
},
|
|
554
|
+
{
|
|
555
|
+
"description": "Allows customization of the loading overlay background color.",
|
|
556
|
+
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
557
|
+
}
|
|
558
|
+
],
|
|
559
|
+
"members": [
|
|
560
|
+
{
|
|
561
|
+
"kind": "field",
|
|
562
|
+
"name": "src",
|
|
563
|
+
"type": {
|
|
564
|
+
"text": "string | undefined"
|
|
565
|
+
},
|
|
566
|
+
"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.",
|
|
567
|
+
"attribute": "src",
|
|
568
|
+
"inheritedFrom": {
|
|
569
|
+
"name": "AvatarComponentMixin",
|
|
570
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
571
|
+
}
|
|
572
|
+
},
|
|
573
|
+
{
|
|
574
|
+
"kind": "field",
|
|
575
|
+
"name": "initials",
|
|
576
|
+
"type": {
|
|
577
|
+
"text": "string | undefined"
|
|
578
|
+
},
|
|
579
|
+
"description": "The initials to be displayed for the avatar.",
|
|
580
|
+
"attribute": "initials",
|
|
581
|
+
"inheritedFrom": {
|
|
582
|
+
"name": "AvatarComponentMixin",
|
|
583
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
584
|
+
}
|
|
585
|
+
},
|
|
586
|
+
{
|
|
587
|
+
"kind": "field",
|
|
588
|
+
"name": "presence",
|
|
589
|
+
"type": {
|
|
590
|
+
"text": "PresenceType | undefined"
|
|
591
|
+
},
|
|
592
|
+
"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`",
|
|
593
|
+
"attribute": "presence",
|
|
594
|
+
"inheritedFrom": {
|
|
595
|
+
"name": "AvatarComponentMixin",
|
|
596
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
597
|
+
}
|
|
598
|
+
},
|
|
599
|
+
{
|
|
600
|
+
"kind": "field",
|
|
601
|
+
"name": "size",
|
|
602
|
+
"type": {
|
|
603
|
+
"text": "AvatarSize"
|
|
604
|
+
},
|
|
605
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
606
|
+
"default": "32",
|
|
607
|
+
"attribute": "size",
|
|
608
|
+
"reflects": true,
|
|
609
|
+
"inheritedFrom": {
|
|
610
|
+
"name": "AvatarComponentMixin",
|
|
611
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
612
|
+
}
|
|
613
|
+
},
|
|
614
|
+
{
|
|
615
|
+
"kind": "field",
|
|
616
|
+
"name": "counter",
|
|
617
|
+
"type": {
|
|
618
|
+
"text": "number | undefined"
|
|
619
|
+
},
|
|
620
|
+
"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`.",
|
|
621
|
+
"attribute": "counter",
|
|
622
|
+
"inheritedFrom": {
|
|
623
|
+
"name": "AvatarComponentMixin",
|
|
624
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
625
|
+
}
|
|
626
|
+
},
|
|
627
|
+
{
|
|
628
|
+
"kind": "field",
|
|
629
|
+
"name": "isTyping",
|
|
630
|
+
"type": {
|
|
631
|
+
"text": "boolean"
|
|
632
|
+
},
|
|
633
|
+
"default": "false",
|
|
634
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
635
|
+
"attribute": "is-typing",
|
|
636
|
+
"inheritedFrom": {
|
|
637
|
+
"name": "AvatarComponentMixin",
|
|
638
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
639
|
+
}
|
|
640
|
+
},
|
|
641
|
+
{
|
|
642
|
+
"kind": "field",
|
|
643
|
+
"name": "iconName",
|
|
644
|
+
"type": {
|
|
645
|
+
"text": "IconNames | undefined"
|
|
646
|
+
},
|
|
647
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
648
|
+
"attribute": "icon-name",
|
|
649
|
+
"inheritedFrom": {
|
|
650
|
+
"name": "IconNameMixin",
|
|
651
|
+
"module": "utils/mixins/IconNameMixin.js"
|
|
652
|
+
}
|
|
653
|
+
}
|
|
654
|
+
],
|
|
655
|
+
"mixins": [
|
|
656
|
+
{
|
|
657
|
+
"name": "AvatarComponentMixin",
|
|
658
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
659
|
+
},
|
|
660
|
+
{
|
|
661
|
+
"name": "IconNameMixin",
|
|
662
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
|
663
|
+
}
|
|
664
|
+
],
|
|
665
|
+
"superclass": {
|
|
666
|
+
"name": "Component",
|
|
667
|
+
"module": "/src/models"
|
|
668
|
+
},
|
|
669
|
+
"tagName": "mdc-avatar",
|
|
670
|
+
"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 */",
|
|
671
|
+
"customElement": true,
|
|
672
|
+
"attributes": [
|
|
673
|
+
{
|
|
674
|
+
"name": "src",
|
|
675
|
+
"type": {
|
|
676
|
+
"text": "string | undefined"
|
|
677
|
+
},
|
|
678
|
+
"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.",
|
|
679
|
+
"fieldName": "src",
|
|
680
|
+
"inheritedFrom": {
|
|
681
|
+
"name": "AvatarComponentMixin",
|
|
682
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
683
|
+
}
|
|
684
|
+
},
|
|
685
|
+
{
|
|
686
|
+
"name": "initials",
|
|
687
|
+
"type": {
|
|
688
|
+
"text": "string | undefined"
|
|
689
|
+
},
|
|
690
|
+
"description": "The initials to be displayed for the avatar.",
|
|
691
|
+
"fieldName": "initials",
|
|
692
|
+
"inheritedFrom": {
|
|
693
|
+
"name": "AvatarComponentMixin",
|
|
694
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
695
|
+
}
|
|
696
|
+
},
|
|
697
|
+
{
|
|
698
|
+
"name": "presence",
|
|
699
|
+
"type": {
|
|
700
|
+
"text": "PresenceType | undefined"
|
|
701
|
+
},
|
|
702
|
+
"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`",
|
|
703
|
+
"fieldName": "presence",
|
|
704
|
+
"inheritedFrom": {
|
|
705
|
+
"name": "AvatarComponentMixin",
|
|
706
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
707
|
+
}
|
|
708
|
+
},
|
|
719
709
|
{
|
|
720
|
-
"
|
|
721
|
-
"
|
|
722
|
-
|
|
723
|
-
|
|
710
|
+
"name": "size",
|
|
711
|
+
"type": {
|
|
712
|
+
"text": "AvatarSize"
|
|
713
|
+
},
|
|
714
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
715
|
+
"default": "32",
|
|
716
|
+
"fieldName": "size",
|
|
724
717
|
"inheritedFrom": {
|
|
725
|
-
"name": "
|
|
726
|
-
"module": "src/
|
|
718
|
+
"name": "AvatarComponentMixin",
|
|
719
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
727
720
|
}
|
|
728
721
|
},
|
|
729
722
|
{
|
|
730
|
-
"
|
|
731
|
-
"
|
|
732
|
-
|
|
733
|
-
|
|
723
|
+
"name": "counter",
|
|
724
|
+
"type": {
|
|
725
|
+
"text": "number | undefined"
|
|
726
|
+
},
|
|
727
|
+
"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`.",
|
|
728
|
+
"fieldName": "counter",
|
|
734
729
|
"inheritedFrom": {
|
|
735
|
-
"name": "
|
|
736
|
-
"module": "src/
|
|
730
|
+
"name": "AvatarComponentMixin",
|
|
731
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
737
732
|
}
|
|
738
733
|
},
|
|
739
734
|
{
|
|
740
|
-
"
|
|
741
|
-
"
|
|
742
|
-
|
|
743
|
-
|
|
735
|
+
"name": "is-typing",
|
|
736
|
+
"type": {
|
|
737
|
+
"text": "boolean"
|
|
738
|
+
},
|
|
739
|
+
"default": "false",
|
|
740
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
741
|
+
"fieldName": "isTyping",
|
|
744
742
|
"inheritedFrom": {
|
|
745
|
-
"name": "
|
|
746
|
-
"module": "src/
|
|
743
|
+
"name": "AvatarComponentMixin",
|
|
744
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
747
745
|
}
|
|
748
746
|
},
|
|
749
747
|
{
|
|
750
|
-
"
|
|
751
|
-
"
|
|
752
|
-
|
|
753
|
-
|
|
748
|
+
"name": "icon-name",
|
|
749
|
+
"type": {
|
|
750
|
+
"text": "IconNames | undefined"
|
|
751
|
+
},
|
|
752
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
753
|
+
"fieldName": "iconName",
|
|
754
754
|
"inheritedFrom": {
|
|
755
|
-
"name": "
|
|
756
|
-
"module": "src/
|
|
755
|
+
"name": "IconNameMixin",
|
|
756
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
757
757
|
}
|
|
758
758
|
}
|
|
759
759
|
]
|
|
@@ -764,8 +764,8 @@
|
|
|
764
764
|
"kind": "js",
|
|
765
765
|
"name": "default",
|
|
766
766
|
"declaration": {
|
|
767
|
-
"name": "
|
|
768
|
-
"module": "components/
|
|
767
|
+
"name": "Avatar",
|
|
768
|
+
"module": "components/avatar/avatar.component.js"
|
|
769
769
|
}
|
|
770
770
|
}
|
|
771
771
|
]
|
|
@@ -1305,58 +1305,235 @@
|
|
|
1305
1305
|
}
|
|
1306
1306
|
},
|
|
1307
1307
|
{
|
|
1308
|
-
"name": "soft-disabled",
|
|
1309
|
-
"type": {
|
|
1310
|
-
"text": "boolean"
|
|
1311
|
-
},
|
|
1312
|
-
"default": "false",
|
|
1313
|
-
"description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
|
|
1314
|
-
"fieldName": "softDisabled",
|
|
1315
|
-
"inheritedFrom": {
|
|
1316
|
-
"name": "Buttonsimple",
|
|
1317
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1318
|
-
}
|
|
1308
|
+
"name": "soft-disabled",
|
|
1309
|
+
"type": {
|
|
1310
|
+
"text": "boolean"
|
|
1311
|
+
},
|
|
1312
|
+
"default": "false",
|
|
1313
|
+
"description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
|
|
1314
|
+
"fieldName": "softDisabled",
|
|
1315
|
+
"inheritedFrom": {
|
|
1316
|
+
"name": "Buttonsimple",
|
|
1317
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1318
|
+
}
|
|
1319
|
+
},
|
|
1320
|
+
{
|
|
1321
|
+
"name": "role",
|
|
1322
|
+
"description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
|
|
1323
|
+
"default": "button",
|
|
1324
|
+
"fieldName": "role",
|
|
1325
|
+
"inheritedFrom": {
|
|
1326
|
+
"name": "Buttonsimple",
|
|
1327
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1328
|
+
}
|
|
1329
|
+
},
|
|
1330
|
+
{
|
|
1331
|
+
"name": "type",
|
|
1332
|
+
"type": {
|
|
1333
|
+
"text": "ButtonType"
|
|
1334
|
+
},
|
|
1335
|
+
"description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
|
|
1336
|
+
"default": "button",
|
|
1337
|
+
"fieldName": "type",
|
|
1338
|
+
"inheritedFrom": {
|
|
1339
|
+
"name": "Buttonsimple",
|
|
1340
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1341
|
+
}
|
|
1342
|
+
}
|
|
1343
|
+
],
|
|
1344
|
+
"mixins": [
|
|
1345
|
+
{
|
|
1346
|
+
"name": "AvatarComponentMixin",
|
|
1347
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
1348
|
+
},
|
|
1349
|
+
{
|
|
1350
|
+
"name": "IconNameMixin",
|
|
1351
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
|
1352
|
+
}
|
|
1353
|
+
],
|
|
1354
|
+
"superclass": {
|
|
1355
|
+
"name": "Buttonsimple",
|
|
1356
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
1357
|
+
},
|
|
1358
|
+
"tagName": "mdc-avatarbutton",
|
|
1359
|
+
"jsDoc": "/**\n * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n *\n * This component is made by extending `buttonsimple` class.\n * The button component acts as a wrapper for the avatar component.\n *\n * @dependency mdc-avatar\n *\n * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.\n * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.\n *\n * @tagname mdc-avatarbutton\n */",
|
|
1360
|
+
"customElement": true
|
|
1361
|
+
}
|
|
1362
|
+
],
|
|
1363
|
+
"exports": [
|
|
1364
|
+
{
|
|
1365
|
+
"kind": "js",
|
|
1366
|
+
"name": "default",
|
|
1367
|
+
"declaration": {
|
|
1368
|
+
"name": "AvatarButton",
|
|
1369
|
+
"module": "components/avatarbutton/avatarbutton.component.js"
|
|
1370
|
+
}
|
|
1371
|
+
}
|
|
1372
|
+
]
|
|
1373
|
+
},
|
|
1374
|
+
{
|
|
1375
|
+
"kind": "javascript-module",
|
|
1376
|
+
"path": "components/brandvisual/brandvisual.component.js",
|
|
1377
|
+
"declarations": [
|
|
1378
|
+
{
|
|
1379
|
+
"kind": "class",
|
|
1380
|
+
"description": "The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\ndisplayed correctly within applications.\n\nFeatures:\n- Dynamically loads brandvisuals based on the `name` attribute.\n- Emits a `load` event when the brandvisual is successfully fetched.\n- Emits an `error` event when the brandvisual import fails.\n- Supports accessibility best practices.\n- Used for brand representation within the design system.",
|
|
1381
|
+
"name": "Brandvisual",
|
|
1382
|
+
"members": [
|
|
1383
|
+
{
|
|
1384
|
+
"kind": "field",
|
|
1385
|
+
"name": "brandVisualData",
|
|
1386
|
+
"type": {
|
|
1387
|
+
"text": "HTMLElement | undefined"
|
|
1388
|
+
},
|
|
1389
|
+
"privacy": "private"
|
|
1390
|
+
},
|
|
1391
|
+
{
|
|
1392
|
+
"kind": "field",
|
|
1393
|
+
"name": "name",
|
|
1394
|
+
"type": {
|
|
1395
|
+
"text": "BrandVisualNames | undefined"
|
|
1396
|
+
},
|
|
1397
|
+
"description": "Name of the brandVisual (= filename)",
|
|
1398
|
+
"attribute": "name",
|
|
1399
|
+
"reflects": true
|
|
1400
|
+
},
|
|
1401
|
+
{
|
|
1402
|
+
"kind": "method",
|
|
1403
|
+
"name": "getBrandVisualData",
|
|
1404
|
+
"privacy": "private"
|
|
1405
|
+
},
|
|
1406
|
+
{
|
|
1407
|
+
"kind": "method",
|
|
1408
|
+
"name": "handleBrandVisualLoadedSuccess",
|
|
1409
|
+
"privacy": "private",
|
|
1410
|
+
"parameters": [
|
|
1411
|
+
{
|
|
1412
|
+
"name": "brandVisualHtml",
|
|
1413
|
+
"type": {
|
|
1414
|
+
"text": "HTMLElement"
|
|
1415
|
+
},
|
|
1416
|
+
"description": "The brandvisual html element which has been fetched from the brandvisual provider."
|
|
1417
|
+
}
|
|
1418
|
+
],
|
|
1419
|
+
"description": "Sets the brandVisualData state to the fetched brandvisual.\nDispatches a 'load' event on the component once the brandvisual has been successfully loaded."
|
|
1420
|
+
},
|
|
1421
|
+
{
|
|
1422
|
+
"kind": "method",
|
|
1423
|
+
"name": "handleBrandVisualLoadedFailure",
|
|
1424
|
+
"privacy": "private",
|
|
1425
|
+
"parameters": [
|
|
1426
|
+
{
|
|
1427
|
+
"name": "error",
|
|
1428
|
+
"type": {
|
|
1429
|
+
"text": "unknown"
|
|
1430
|
+
}
|
|
1431
|
+
}
|
|
1432
|
+
],
|
|
1433
|
+
"description": "Dispatches an 'error' event on the component when the brandvisual import has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
|
|
1434
|
+
}
|
|
1435
|
+
],
|
|
1436
|
+
"events": [
|
|
1437
|
+
{
|
|
1438
|
+
"description": "(React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.",
|
|
1439
|
+
"name": "load",
|
|
1440
|
+
"reactName": "onLoad",
|
|
1441
|
+
"eventName": "LoadEvent"
|
|
1442
|
+
},
|
|
1443
|
+
{
|
|
1444
|
+
"description": "(React: onError) This event is dispatched when the brandvisual fetching has failed.",
|
|
1445
|
+
"name": "error",
|
|
1446
|
+
"reactName": "onError",
|
|
1447
|
+
"eventName": "ErrorEvent"
|
|
1448
|
+
}
|
|
1449
|
+
],
|
|
1450
|
+
"attributes": [
|
|
1451
|
+
{
|
|
1452
|
+
"name": "name",
|
|
1453
|
+
"type": {
|
|
1454
|
+
"text": "BrandVisualNames | undefined"
|
|
1455
|
+
},
|
|
1456
|
+
"description": "Name of the brandVisual (= filename)",
|
|
1457
|
+
"fieldName": "name"
|
|
1458
|
+
}
|
|
1459
|
+
],
|
|
1460
|
+
"superclass": {
|
|
1461
|
+
"name": "Component",
|
|
1462
|
+
"module": "/src/models"
|
|
1463
|
+
},
|
|
1464
|
+
"tagName": "mdc-brandvisual",
|
|
1465
|
+
"jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\n * - Dynamically loads brandvisuals based on the `name` attribute.\n * - Emits a `load` event when the brandvisual is successfully fetched.\n * - Emits an `error` event when the brandvisual import fails.\n * - Supports accessibility best practices.\n * - Used for brand representation within the design system.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n */",
|
|
1466
|
+
"customElement": true
|
|
1467
|
+
}
|
|
1468
|
+
],
|
|
1469
|
+
"exports": [
|
|
1470
|
+
{
|
|
1471
|
+
"kind": "js",
|
|
1472
|
+
"name": "default",
|
|
1473
|
+
"declaration": {
|
|
1474
|
+
"name": "Brandvisual",
|
|
1475
|
+
"module": "components/brandvisual/brandvisual.component.js"
|
|
1476
|
+
}
|
|
1477
|
+
}
|
|
1478
|
+
]
|
|
1479
|
+
},
|
|
1480
|
+
{
|
|
1481
|
+
"kind": "javascript-module",
|
|
1482
|
+
"path": "components/bullet/bullet.component.js",
|
|
1483
|
+
"declarations": [
|
|
1484
|
+
{
|
|
1485
|
+
"kind": "class",
|
|
1486
|
+
"description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
|
|
1487
|
+
"name": "Bullet",
|
|
1488
|
+
"cssProperties": [
|
|
1489
|
+
{
|
|
1490
|
+
"description": "background color of the bullet",
|
|
1491
|
+
"name": "--mdc-bullet-background-color"
|
|
1492
|
+
},
|
|
1493
|
+
{
|
|
1494
|
+
"description": "small size value of the bullet",
|
|
1495
|
+
"name": "--mdc-bullet-size-small"
|
|
1319
1496
|
},
|
|
1320
1497
|
{
|
|
1321
|
-
"
|
|
1322
|
-
"
|
|
1323
|
-
"default": "button",
|
|
1324
|
-
"fieldName": "role",
|
|
1325
|
-
"inheritedFrom": {
|
|
1326
|
-
"name": "Buttonsimple",
|
|
1327
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1328
|
-
}
|
|
1498
|
+
"description": "medium size value of the bullet",
|
|
1499
|
+
"name": "--mdc-bullet-size-medium"
|
|
1329
1500
|
},
|
|
1330
1501
|
{
|
|
1331
|
-
"
|
|
1502
|
+
"description": "large size value of the bullet",
|
|
1503
|
+
"name": "--mdc-bullet-size-large"
|
|
1504
|
+
}
|
|
1505
|
+
],
|
|
1506
|
+
"members": [
|
|
1507
|
+
{
|
|
1508
|
+
"kind": "field",
|
|
1509
|
+
"name": "size",
|
|
1332
1510
|
"type": {
|
|
1333
|
-
"text": "
|
|
1511
|
+
"text": "Size"
|
|
1334
1512
|
},
|
|
1335
|
-
"
|
|
1336
|
-
"
|
|
1337
|
-
"
|
|
1338
|
-
"
|
|
1339
|
-
|
|
1340
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1341
|
-
}
|
|
1513
|
+
"privacy": "public",
|
|
1514
|
+
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
1515
|
+
"default": "small",
|
|
1516
|
+
"attribute": "size",
|
|
1517
|
+
"reflects": true
|
|
1342
1518
|
}
|
|
1343
1519
|
],
|
|
1344
|
-
"
|
|
1345
|
-
{
|
|
1346
|
-
"name": "AvatarComponentMixin",
|
|
1347
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
1348
|
-
},
|
|
1520
|
+
"attributes": [
|
|
1349
1521
|
{
|
|
1350
|
-
"name": "
|
|
1351
|
-
"
|
|
1522
|
+
"name": "size",
|
|
1523
|
+
"type": {
|
|
1524
|
+
"text": "Size"
|
|
1525
|
+
},
|
|
1526
|
+
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
1527
|
+
"default": "small",
|
|
1528
|
+
"fieldName": "size"
|
|
1352
1529
|
}
|
|
1353
1530
|
],
|
|
1354
1531
|
"superclass": {
|
|
1355
|
-
"name": "
|
|
1356
|
-
"module": "/src/
|
|
1532
|
+
"name": "Component",
|
|
1533
|
+
"module": "/src/models"
|
|
1357
1534
|
},
|
|
1358
|
-
"tagName": "mdc-
|
|
1359
|
-
"jsDoc": "/**\n *
|
|
1535
|
+
"tagName": "mdc-bullet",
|
|
1536
|
+
"jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
|
|
1360
1537
|
"customElement": true
|
|
1361
1538
|
}
|
|
1362
1539
|
],
|
|
@@ -1365,8 +1542,8 @@
|
|
|
1365
1542
|
"kind": "js",
|
|
1366
1543
|
"name": "default",
|
|
1367
1544
|
"declaration": {
|
|
1368
|
-
"name": "
|
|
1369
|
-
"module": "components/
|
|
1545
|
+
"name": "Bullet",
|
|
1546
|
+
"module": "components/bullet/bullet.component.js"
|
|
1370
1547
|
}
|
|
1371
1548
|
}
|
|
1372
1549
|
]
|
|
@@ -1692,183 +1869,6 @@
|
|
|
1692
1869
|
}
|
|
1693
1870
|
]
|
|
1694
1871
|
},
|
|
1695
|
-
{
|
|
1696
|
-
"kind": "javascript-module",
|
|
1697
|
-
"path": "components/brandvisual/brandvisual.component.js",
|
|
1698
|
-
"declarations": [
|
|
1699
|
-
{
|
|
1700
|
-
"kind": "class",
|
|
1701
|
-
"description": "The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\ndisplayed correctly within applications.\n\nFeatures:\n- Dynamically loads brandvisuals based on the `name` attribute.\n- Emits a `load` event when the brandvisual is successfully fetched.\n- Emits an `error` event when the brandvisual import fails.\n- Supports accessibility best practices.\n- Used for brand representation within the design system.",
|
|
1702
|
-
"name": "Brandvisual",
|
|
1703
|
-
"members": [
|
|
1704
|
-
{
|
|
1705
|
-
"kind": "field",
|
|
1706
|
-
"name": "brandVisualData",
|
|
1707
|
-
"type": {
|
|
1708
|
-
"text": "HTMLElement | undefined"
|
|
1709
|
-
},
|
|
1710
|
-
"privacy": "private"
|
|
1711
|
-
},
|
|
1712
|
-
{
|
|
1713
|
-
"kind": "field",
|
|
1714
|
-
"name": "name",
|
|
1715
|
-
"type": {
|
|
1716
|
-
"text": "BrandVisualNames | undefined"
|
|
1717
|
-
},
|
|
1718
|
-
"description": "Name of the brandVisual (= filename)",
|
|
1719
|
-
"attribute": "name",
|
|
1720
|
-
"reflects": true
|
|
1721
|
-
},
|
|
1722
|
-
{
|
|
1723
|
-
"kind": "method",
|
|
1724
|
-
"name": "getBrandVisualData",
|
|
1725
|
-
"privacy": "private"
|
|
1726
|
-
},
|
|
1727
|
-
{
|
|
1728
|
-
"kind": "method",
|
|
1729
|
-
"name": "handleBrandVisualLoadedSuccess",
|
|
1730
|
-
"privacy": "private",
|
|
1731
|
-
"parameters": [
|
|
1732
|
-
{
|
|
1733
|
-
"name": "brandVisualHtml",
|
|
1734
|
-
"type": {
|
|
1735
|
-
"text": "HTMLElement"
|
|
1736
|
-
},
|
|
1737
|
-
"description": "The brandvisual html element which has been fetched from the brandvisual provider."
|
|
1738
|
-
}
|
|
1739
|
-
],
|
|
1740
|
-
"description": "Sets the brandVisualData state to the fetched brandvisual.\nDispatches a 'load' event on the component once the brandvisual has been successfully loaded."
|
|
1741
|
-
},
|
|
1742
|
-
{
|
|
1743
|
-
"kind": "method",
|
|
1744
|
-
"name": "handleBrandVisualLoadedFailure",
|
|
1745
|
-
"privacy": "private",
|
|
1746
|
-
"parameters": [
|
|
1747
|
-
{
|
|
1748
|
-
"name": "error",
|
|
1749
|
-
"type": {
|
|
1750
|
-
"text": "unknown"
|
|
1751
|
-
}
|
|
1752
|
-
}
|
|
1753
|
-
],
|
|
1754
|
-
"description": "Dispatches an 'error' event on the component when the brandvisual import has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
|
|
1755
|
-
}
|
|
1756
|
-
],
|
|
1757
|
-
"events": [
|
|
1758
|
-
{
|
|
1759
|
-
"description": "(React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.",
|
|
1760
|
-
"name": "load",
|
|
1761
|
-
"reactName": "onLoad",
|
|
1762
|
-
"eventName": "LoadEvent"
|
|
1763
|
-
},
|
|
1764
|
-
{
|
|
1765
|
-
"description": "(React: onError) This event is dispatched when the brandvisual fetching has failed.",
|
|
1766
|
-
"name": "error",
|
|
1767
|
-
"reactName": "onError",
|
|
1768
|
-
"eventName": "ErrorEvent"
|
|
1769
|
-
}
|
|
1770
|
-
],
|
|
1771
|
-
"attributes": [
|
|
1772
|
-
{
|
|
1773
|
-
"name": "name",
|
|
1774
|
-
"type": {
|
|
1775
|
-
"text": "BrandVisualNames | undefined"
|
|
1776
|
-
},
|
|
1777
|
-
"description": "Name of the brandVisual (= filename)",
|
|
1778
|
-
"fieldName": "name"
|
|
1779
|
-
}
|
|
1780
|
-
],
|
|
1781
|
-
"superclass": {
|
|
1782
|
-
"name": "Component",
|
|
1783
|
-
"module": "/src/models"
|
|
1784
|
-
},
|
|
1785
|
-
"tagName": "mdc-brandvisual",
|
|
1786
|
-
"jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\n * - Dynamically loads brandvisuals based on the `name` attribute.\n * - Emits a `load` event when the brandvisual is successfully fetched.\n * - Emits an `error` event when the brandvisual import fails.\n * - Supports accessibility best practices.\n * - Used for brand representation within the design system.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n */",
|
|
1787
|
-
"customElement": true
|
|
1788
|
-
}
|
|
1789
|
-
],
|
|
1790
|
-
"exports": [
|
|
1791
|
-
{
|
|
1792
|
-
"kind": "js",
|
|
1793
|
-
"name": "default",
|
|
1794
|
-
"declaration": {
|
|
1795
|
-
"name": "Brandvisual",
|
|
1796
|
-
"module": "components/brandvisual/brandvisual.component.js"
|
|
1797
|
-
}
|
|
1798
|
-
}
|
|
1799
|
-
]
|
|
1800
|
-
},
|
|
1801
|
-
{
|
|
1802
|
-
"kind": "javascript-module",
|
|
1803
|
-
"path": "components/bullet/bullet.component.js",
|
|
1804
|
-
"declarations": [
|
|
1805
|
-
{
|
|
1806
|
-
"kind": "class",
|
|
1807
|
-
"description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
|
|
1808
|
-
"name": "Bullet",
|
|
1809
|
-
"cssProperties": [
|
|
1810
|
-
{
|
|
1811
|
-
"description": "background color of the bullet",
|
|
1812
|
-
"name": "--mdc-bullet-background-color"
|
|
1813
|
-
},
|
|
1814
|
-
{
|
|
1815
|
-
"description": "small size value of the bullet",
|
|
1816
|
-
"name": "--mdc-bullet-size-small"
|
|
1817
|
-
},
|
|
1818
|
-
{
|
|
1819
|
-
"description": "medium size value of the bullet",
|
|
1820
|
-
"name": "--mdc-bullet-size-medium"
|
|
1821
|
-
},
|
|
1822
|
-
{
|
|
1823
|
-
"description": "large size value of the bullet",
|
|
1824
|
-
"name": "--mdc-bullet-size-large"
|
|
1825
|
-
}
|
|
1826
|
-
],
|
|
1827
|
-
"members": [
|
|
1828
|
-
{
|
|
1829
|
-
"kind": "field",
|
|
1830
|
-
"name": "size",
|
|
1831
|
-
"type": {
|
|
1832
|
-
"text": "Size"
|
|
1833
|
-
},
|
|
1834
|
-
"privacy": "public",
|
|
1835
|
-
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
1836
|
-
"default": "small",
|
|
1837
|
-
"attribute": "size",
|
|
1838
|
-
"reflects": true
|
|
1839
|
-
}
|
|
1840
|
-
],
|
|
1841
|
-
"attributes": [
|
|
1842
|
-
{
|
|
1843
|
-
"name": "size",
|
|
1844
|
-
"type": {
|
|
1845
|
-
"text": "Size"
|
|
1846
|
-
},
|
|
1847
|
-
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
1848
|
-
"default": "small",
|
|
1849
|
-
"fieldName": "size"
|
|
1850
|
-
}
|
|
1851
|
-
],
|
|
1852
|
-
"superclass": {
|
|
1853
|
-
"name": "Component",
|
|
1854
|
-
"module": "/src/models"
|
|
1855
|
-
},
|
|
1856
|
-
"tagName": "mdc-bullet",
|
|
1857
|
-
"jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
|
|
1858
|
-
"customElement": true
|
|
1859
|
-
}
|
|
1860
|
-
],
|
|
1861
|
-
"exports": [
|
|
1862
|
-
{
|
|
1863
|
-
"kind": "js",
|
|
1864
|
-
"name": "default",
|
|
1865
|
-
"declaration": {
|
|
1866
|
-
"name": "Bullet",
|
|
1867
|
-
"module": "components/bullet/bullet.component.js"
|
|
1868
|
-
}
|
|
1869
|
-
}
|
|
1870
|
-
]
|
|
1871
|
-
},
|
|
1872
1872
|
{
|
|
1873
1873
|
"kind": "javascript-module",
|
|
1874
1874
|
"path": "components/button/button.component.js",
|