@momentum-design/components 0.47.0 → 0.47.1
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.
|
@@ -4,756 +4,756 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "components/
|
|
7
|
+
"path": "components/appheader/appheader.component.js",
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "mdc-
|
|
12
|
-
"name": "
|
|
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",
|
|
69
|
+
"declarations": [
|
|
70
|
+
{
|
|
71
|
+
"kind": "class",
|
|
72
|
+
"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.",
|
|
73
|
+
"name": "Avatar",
|
|
13
74
|
"cssProperties": [
|
|
14
75
|
{
|
|
15
|
-
"description": "
|
|
16
|
-
"name": "--mdc-
|
|
76
|
+
"description": "Allows customization of the default background color.",
|
|
77
|
+
"name": "--mdc-avatar-default-background-color"
|
|
17
78
|
},
|
|
18
79
|
{
|
|
19
|
-
"description": "
|
|
20
|
-
"name": "--mdc-
|
|
80
|
+
"description": "Allows customization of the default foreground color.",
|
|
81
|
+
"name": "--mdc-avatar-default-foreground-color"
|
|
21
82
|
},
|
|
22
83
|
{
|
|
23
|
-
"description": "
|
|
24
|
-
"name": "--mdc-
|
|
84
|
+
"description": "Allows customization of the loading indicator background color.",
|
|
85
|
+
"name": "--mdc-avatar-loading-indicator-background-color"
|
|
25
86
|
},
|
|
26
87
|
{
|
|
27
|
-
"description": "
|
|
28
|
-
"name": "--mdc-
|
|
88
|
+
"description": "Allows customization of the loading indicator foreground color.",
|
|
89
|
+
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"description": "Allows customization of the loading overlay background color.",
|
|
93
|
+
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
29
94
|
}
|
|
30
95
|
],
|
|
31
96
|
"members": [
|
|
32
97
|
{
|
|
33
98
|
"kind": "field",
|
|
34
|
-
"name": "
|
|
99
|
+
"name": "src",
|
|
35
100
|
"type": {
|
|
36
|
-
"text": "
|
|
101
|
+
"text": "string | undefined"
|
|
37
102
|
},
|
|
38
|
-
"description": "The
|
|
39
|
-
"
|
|
40
|
-
"
|
|
103
|
+
"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.",
|
|
104
|
+
"attribute": "src",
|
|
105
|
+
"inheritedFrom": {
|
|
106
|
+
"name": "AvatarComponentMixin",
|
|
107
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
108
|
+
}
|
|
41
109
|
},
|
|
42
110
|
{
|
|
43
111
|
"kind": "field",
|
|
44
|
-
"name": "
|
|
112
|
+
"name": "initials",
|
|
45
113
|
"type": {
|
|
46
|
-
"text": "string"
|
|
114
|
+
"text": "string | undefined"
|
|
47
115
|
},
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
116
|
+
"description": "The initials to be displayed for the avatar.",
|
|
117
|
+
"attribute": "initials",
|
|
118
|
+
"inheritedFrom": {
|
|
119
|
+
"name": "AvatarComponentMixin",
|
|
120
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
121
|
+
}
|
|
51
122
|
},
|
|
52
123
|
{
|
|
53
124
|
"kind": "field",
|
|
54
|
-
"name": "
|
|
125
|
+
"name": "presence",
|
|
55
126
|
"type": {
|
|
56
|
-
"text": "
|
|
127
|
+
"text": "PresenceType | undefined"
|
|
57
128
|
},
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"attribute": "tabIndex",
|
|
61
|
-
"reflects": true,
|
|
129
|
+
"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`",
|
|
130
|
+
"attribute": "presence",
|
|
62
131
|
"inheritedFrom": {
|
|
63
|
-
"name": "
|
|
64
|
-
"module": "utils/mixins/
|
|
132
|
+
"name": "AvatarComponentMixin",
|
|
133
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
65
134
|
}
|
|
66
135
|
},
|
|
67
136
|
{
|
|
68
137
|
"kind": "field",
|
|
69
|
-
"name": "
|
|
138
|
+
"name": "size",
|
|
70
139
|
"type": {
|
|
71
|
-
"text": "
|
|
140
|
+
"text": "AvatarSize"
|
|
72
141
|
},
|
|
73
|
-
"description": "
|
|
74
|
-
"default": "
|
|
75
|
-
"attribute": "
|
|
142
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
143
|
+
"default": "32",
|
|
144
|
+
"attribute": "size",
|
|
76
145
|
"reflects": true,
|
|
77
146
|
"inheritedFrom": {
|
|
78
|
-
"name": "
|
|
79
|
-
"module": "utils/mixins/
|
|
147
|
+
"name": "AvatarComponentMixin",
|
|
148
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
80
149
|
}
|
|
81
150
|
},
|
|
82
151
|
{
|
|
83
152
|
"kind": "field",
|
|
84
|
-
"name": "
|
|
153
|
+
"name": "counter",
|
|
85
154
|
"type": {
|
|
86
|
-
"text": "
|
|
155
|
+
"text": "number | undefined"
|
|
87
156
|
},
|
|
88
|
-
"
|
|
89
|
-
"
|
|
90
|
-
"attribute": "active",
|
|
91
|
-
"reflects": true,
|
|
157
|
+
"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`.",
|
|
158
|
+
"attribute": "counter",
|
|
92
159
|
"inheritedFrom": {
|
|
93
|
-
"name": "
|
|
94
|
-
"module": "
|
|
160
|
+
"name": "AvatarComponentMixin",
|
|
161
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
95
162
|
}
|
|
96
163
|
},
|
|
97
164
|
{
|
|
98
165
|
"kind": "field",
|
|
99
|
-
"name": "
|
|
166
|
+
"name": "isTyping",
|
|
100
167
|
"type": {
|
|
101
168
|
"text": "boolean"
|
|
102
169
|
},
|
|
103
170
|
"default": "false",
|
|
104
|
-
"description": "
|
|
105
|
-
"attribute": "
|
|
171
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
172
|
+
"attribute": "is-typing",
|
|
106
173
|
"inheritedFrom": {
|
|
107
|
-
"name": "
|
|
108
|
-
"module": "
|
|
174
|
+
"name": "AvatarComponentMixin",
|
|
175
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
109
176
|
}
|
|
110
177
|
},
|
|
111
178
|
{
|
|
112
179
|
"kind": "field",
|
|
113
|
-
"name": "
|
|
180
|
+
"name": "iconName",
|
|
114
181
|
"type": {
|
|
115
|
-
"text": "
|
|
182
|
+
"text": "IconNames | undefined"
|
|
116
183
|
},
|
|
117
|
-
"description": "
|
|
118
|
-
"
|
|
119
|
-
"attribute": "size",
|
|
120
|
-
"reflects": true,
|
|
184
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
185
|
+
"attribute": "icon-name",
|
|
121
186
|
"inheritedFrom": {
|
|
122
|
-
"name": "
|
|
123
|
-
"module": "
|
|
187
|
+
"name": "IconNameMixin",
|
|
188
|
+
"module": "utils/mixins/IconNameMixin.js"
|
|
124
189
|
}
|
|
190
|
+
}
|
|
191
|
+
],
|
|
192
|
+
"mixins": [
|
|
193
|
+
{
|
|
194
|
+
"name": "AvatarComponentMixin",
|
|
195
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
125
196
|
},
|
|
126
197
|
{
|
|
127
|
-
"
|
|
128
|
-
"
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
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",
|
|
212
|
+
"type": {
|
|
213
|
+
"text": "string | undefined"
|
|
214
|
+
},
|
|
215
|
+
"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.",
|
|
216
|
+
"fieldName": "src",
|
|
133
217
|
"inheritedFrom": {
|
|
134
|
-
"name": "
|
|
135
|
-
"module": "
|
|
218
|
+
"name": "AvatarComponentMixin",
|
|
219
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
136
220
|
}
|
|
137
221
|
},
|
|
138
222
|
{
|
|
139
|
-
"
|
|
140
|
-
"name": "type",
|
|
223
|
+
"name": "initials",
|
|
141
224
|
"type": {
|
|
142
|
-
"text": "
|
|
225
|
+
"text": "string | undefined"
|
|
143
226
|
},
|
|
144
|
-
"description": "
|
|
145
|
-
"
|
|
146
|
-
"attribute": "type",
|
|
147
|
-
"reflects": true,
|
|
227
|
+
"description": "The initials to be displayed for the avatar.",
|
|
228
|
+
"fieldName": "initials",
|
|
148
229
|
"inheritedFrom": {
|
|
149
|
-
"name": "
|
|
150
|
-
"module": "
|
|
230
|
+
"name": "AvatarComponentMixin",
|
|
231
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
151
232
|
}
|
|
152
233
|
},
|
|
153
234
|
{
|
|
154
|
-
"
|
|
155
|
-
"
|
|
156
|
-
|
|
235
|
+
"name": "presence",
|
|
236
|
+
"type": {
|
|
237
|
+
"text": "PresenceType | undefined"
|
|
238
|
+
},
|
|
239
|
+
"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`",
|
|
240
|
+
"fieldName": "presence",
|
|
157
241
|
"inheritedFrom": {
|
|
158
|
-
"name": "
|
|
159
|
-
"module": "
|
|
242
|
+
"name": "AvatarComponentMixin",
|
|
243
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
160
244
|
}
|
|
161
245
|
},
|
|
162
246
|
{
|
|
163
|
-
"
|
|
164
|
-
"
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
"text": "HTMLElement"
|
|
171
|
-
},
|
|
172
|
-
"description": "The button element"
|
|
173
|
-
},
|
|
174
|
-
{
|
|
175
|
-
"name": "active",
|
|
176
|
-
"type": {
|
|
177
|
-
"text": "boolean"
|
|
178
|
-
},
|
|
179
|
-
"description": "The active state of the element"
|
|
180
|
-
}
|
|
181
|
-
],
|
|
182
|
-
"description": "Sets the aria-pressed attribute based on the active state of the button.",
|
|
247
|
+
"name": "size",
|
|
248
|
+
"type": {
|
|
249
|
+
"text": "AvatarSize"
|
|
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",
|
|
183
254
|
"inheritedFrom": {
|
|
184
|
-
"name": "
|
|
185
|
-
"module": "
|
|
255
|
+
"name": "AvatarComponentMixin",
|
|
256
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
186
257
|
}
|
|
187
258
|
},
|
|
188
259
|
{
|
|
189
|
-
"
|
|
190
|
-
"
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
"type": {
|
|
196
|
-
"text": "HTMLElement"
|
|
197
|
-
},
|
|
198
|
-
"description": "The button element."
|
|
199
|
-
},
|
|
200
|
-
{
|
|
201
|
-
"name": "softDisabled",
|
|
202
|
-
"type": {
|
|
203
|
-
"text": "boolean"
|
|
204
|
-
},
|
|
205
|
-
"description": "The soft-disabled state."
|
|
206
|
-
}
|
|
207
|
-
],
|
|
208
|
-
"description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
|
|
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",
|
|
209
266
|
"inheritedFrom": {
|
|
210
|
-
"name": "
|
|
211
|
-
"module": "
|
|
267
|
+
"name": "AvatarComponentMixin",
|
|
268
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
212
269
|
}
|
|
213
270
|
},
|
|
214
271
|
{
|
|
215
|
-
"
|
|
216
|
-
"
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
"text": "HTMLElement"
|
|
223
|
-
},
|
|
224
|
-
"description": "The button element."
|
|
225
|
-
},
|
|
226
|
-
{
|
|
227
|
-
"name": "disabled",
|
|
228
|
-
"type": {
|
|
229
|
-
"text": "boolean"
|
|
230
|
-
},
|
|
231
|
-
"description": "The disabled state."
|
|
232
|
-
}
|
|
233
|
-
],
|
|
234
|
-
"description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
|
|
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",
|
|
235
279
|
"inheritedFrom": {
|
|
236
|
-
"name": "
|
|
237
|
-
"module": "
|
|
280
|
+
"name": "AvatarComponentMixin",
|
|
281
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
238
282
|
}
|
|
239
283
|
},
|
|
240
284
|
{
|
|
241
|
-
"
|
|
242
|
-
"
|
|
243
|
-
|
|
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",
|
|
244
291
|
"inheritedFrom": {
|
|
245
|
-
"name": "
|
|
246
|
-
"module": "
|
|
292
|
+
"name": "IconNameMixin",
|
|
293
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
247
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"
|
|
248
322
|
},
|
|
249
323
|
{
|
|
250
|
-
"
|
|
251
|
-
"name": "
|
|
252
|
-
"privacy": "private",
|
|
253
|
-
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
|
254
|
-
"inheritedFrom": {
|
|
255
|
-
"name": "Buttonsimple",
|
|
256
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
257
|
-
}
|
|
324
|
+
"description": "The color of the icon",
|
|
325
|
+
"name": "--mdc-chip-icon-color"
|
|
258
326
|
},
|
|
259
327
|
{
|
|
260
|
-
"
|
|
261
|
-
"name": "
|
|
262
|
-
"privacy": "private",
|
|
263
|
-
"parameters": [
|
|
264
|
-
{
|
|
265
|
-
"name": "event",
|
|
266
|
-
"type": {
|
|
267
|
-
"text": "KeyboardEvent"
|
|
268
|
-
},
|
|
269
|
-
"description": "The keyboard event."
|
|
270
|
-
}
|
|
271
|
-
],
|
|
272
|
-
"description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.",
|
|
273
|
-
"inheritedFrom": {
|
|
274
|
-
"name": "Buttonsimple",
|
|
275
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
276
|
-
}
|
|
328
|
+
"description": "The border color of the alertchip",
|
|
329
|
+
"name": "--mdc-chip-border-color"
|
|
277
330
|
},
|
|
278
331
|
{
|
|
279
|
-
"
|
|
280
|
-
"name": "
|
|
281
|
-
"privacy": "private",
|
|
282
|
-
"parameters": [
|
|
283
|
-
{
|
|
284
|
-
"name": "event",
|
|
285
|
-
"type": {
|
|
286
|
-
"text": "KeyboardEvent"
|
|
287
|
-
},
|
|
288
|
-
"description": "The keyboard event."
|
|
289
|
-
}
|
|
290
|
-
],
|
|
291
|
-
"description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
|
|
292
|
-
"inheritedFrom": {
|
|
293
|
-
"name": "Buttonsimple",
|
|
294
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
295
|
-
}
|
|
332
|
+
"description": "The background color of the alertchip",
|
|
333
|
+
"name": "--mdc-chip-background-color"
|
|
296
334
|
}
|
|
297
335
|
],
|
|
298
|
-
"
|
|
336
|
+
"members": [
|
|
299
337
|
{
|
|
338
|
+
"kind": "field",
|
|
300
339
|
"name": "variant",
|
|
301
340
|
"type": {
|
|
302
341
|
"text": "VariantType"
|
|
303
342
|
},
|
|
304
343
|
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
305
344
|
"default": "neutral",
|
|
306
|
-
"
|
|
345
|
+
"attribute": "variant"
|
|
307
346
|
},
|
|
308
347
|
{
|
|
348
|
+
"kind": "field",
|
|
309
349
|
"name": "label",
|
|
310
350
|
"type": {
|
|
311
351
|
"text": "string"
|
|
312
352
|
},
|
|
313
353
|
"default": "''",
|
|
314
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.",
|
|
315
|
-
"
|
|
355
|
+
"attribute": "label"
|
|
316
356
|
},
|
|
317
357
|
{
|
|
358
|
+
"kind": "field",
|
|
318
359
|
"name": "tabIndex",
|
|
319
360
|
"type": {
|
|
320
361
|
"text": "number"
|
|
321
362
|
},
|
|
322
363
|
"default": "0",
|
|
323
364
|
"description": "This property specifies the tab order of the element.",
|
|
324
|
-
"
|
|
365
|
+
"attribute": "tabIndex",
|
|
366
|
+
"reflects": true,
|
|
325
367
|
"inheritedFrom": {
|
|
326
368
|
"name": "TabIndexMixin",
|
|
327
|
-
"module": "
|
|
369
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
328
370
|
}
|
|
329
371
|
},
|
|
330
372
|
{
|
|
373
|
+
"kind": "field",
|
|
331
374
|
"name": "disabled",
|
|
332
375
|
"type": {
|
|
333
376
|
"text": "boolean | undefined"
|
|
334
377
|
},
|
|
335
378
|
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
336
379
|
"default": "undefined",
|
|
337
|
-
"
|
|
380
|
+
"attribute": "disabled",
|
|
381
|
+
"reflects": true,
|
|
338
382
|
"inheritedFrom": {
|
|
339
383
|
"name": "DisabledMixin",
|
|
340
|
-
"module": "
|
|
384
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
341
385
|
}
|
|
342
386
|
},
|
|
343
387
|
{
|
|
388
|
+
"kind": "field",
|
|
344
389
|
"name": "active",
|
|
345
390
|
"type": {
|
|
346
391
|
"text": "boolean"
|
|
347
392
|
},
|
|
348
393
|
"default": "false",
|
|
349
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.",
|
|
350
|
-
"
|
|
395
|
+
"attribute": "active",
|
|
396
|
+
"reflects": true,
|
|
351
397
|
"inheritedFrom": {
|
|
352
398
|
"name": "Buttonsimple",
|
|
353
|
-
"module": "
|
|
399
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
354
400
|
}
|
|
355
401
|
},
|
|
356
402
|
{
|
|
357
|
-
"
|
|
403
|
+
"kind": "field",
|
|
404
|
+
"name": "softDisabled",
|
|
358
405
|
"type": {
|
|
359
406
|
"text": "boolean"
|
|
360
407
|
},
|
|
361
408
|
"default": "false",
|
|
362
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.",
|
|
363
|
-
"
|
|
410
|
+
"attribute": "soft-disabled",
|
|
364
411
|
"inheritedFrom": {
|
|
365
412
|
"name": "Buttonsimple",
|
|
366
|
-
"module": "
|
|
413
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
367
414
|
}
|
|
368
415
|
},
|
|
369
416
|
{
|
|
417
|
+
"kind": "field",
|
|
370
418
|
"name": "size",
|
|
371
419
|
"type": {
|
|
372
420
|
"text": "ButtonSize"
|
|
373
421
|
},
|
|
374
422
|
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
375
423
|
"default": "32",
|
|
376
|
-
"
|
|
424
|
+
"attribute": "size",
|
|
425
|
+
"reflects": true,
|
|
377
426
|
"inheritedFrom": {
|
|
378
427
|
"name": "Buttonsimple",
|
|
379
|
-
"module": "
|
|
428
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
380
429
|
}
|
|
381
430
|
},
|
|
382
431
|
{
|
|
432
|
+
"kind": "field",
|
|
383
433
|
"name": "role",
|
|
384
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.",
|
|
385
435
|
"default": "button",
|
|
386
|
-
"
|
|
436
|
+
"attribute": "role",
|
|
437
|
+
"reflects": true,
|
|
387
438
|
"inheritedFrom": {
|
|
388
439
|
"name": "Buttonsimple",
|
|
389
|
-
"module": "
|
|
440
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
390
441
|
}
|
|
391
442
|
},
|
|
392
443
|
{
|
|
444
|
+
"kind": "field",
|
|
393
445
|
"name": "type",
|
|
394
446
|
"type": {
|
|
395
447
|
"text": "ButtonType"
|
|
396
448
|
},
|
|
397
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.",
|
|
398
450
|
"default": "button",
|
|
399
|
-
"
|
|
451
|
+
"attribute": "type",
|
|
452
|
+
"reflects": true,
|
|
400
453
|
"inheritedFrom": {
|
|
401
454
|
"name": "Buttonsimple",
|
|
402
|
-
"module": "
|
|
455
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
403
456
|
}
|
|
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": [
|
|
457
|
+
},
|
|
414
458
|
{
|
|
415
|
-
"
|
|
416
|
-
"name": "
|
|
417
|
-
"
|
|
418
|
-
"eventName": "ClickEvent",
|
|
459
|
+
"kind": "method",
|
|
460
|
+
"name": "executeAction",
|
|
461
|
+
"privacy": "protected",
|
|
419
462
|
"inheritedFrom": {
|
|
420
463
|
"name": "Buttonsimple",
|
|
421
|
-
"module": "
|
|
464
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
422
465
|
}
|
|
423
466
|
},
|
|
424
467
|
{
|
|
425
|
-
"
|
|
426
|
-
"name": "
|
|
427
|
-
"
|
|
428
|
-
"
|
|
468
|
+
"kind": "method",
|
|
469
|
+
"name": "setActive",
|
|
470
|
+
"privacy": "protected",
|
|
471
|
+
"parameters": [
|
|
472
|
+
{
|
|
473
|
+
"name": "element",
|
|
474
|
+
"type": {
|
|
475
|
+
"text": "HTMLElement"
|
|
476
|
+
},
|
|
477
|
+
"description": "The button element"
|
|
478
|
+
},
|
|
479
|
+
{
|
|
480
|
+
"name": "active",
|
|
481
|
+
"type": {
|
|
482
|
+
"text": "boolean"
|
|
483
|
+
},
|
|
484
|
+
"description": "The active state of the element"
|
|
485
|
+
}
|
|
486
|
+
],
|
|
487
|
+
"description": "Sets the aria-pressed attribute based on the active state of the button.",
|
|
429
488
|
"inheritedFrom": {
|
|
430
489
|
"name": "Buttonsimple",
|
|
431
|
-
"module": "
|
|
490
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
432
491
|
}
|
|
433
492
|
},
|
|
434
493
|
{
|
|
435
|
-
"
|
|
436
|
-
"name": "
|
|
437
|
-
"
|
|
438
|
-
"
|
|
494
|
+
"kind": "method",
|
|
495
|
+
"name": "setSoftDisabled",
|
|
496
|
+
"privacy": "private",
|
|
497
|
+
"parameters": [
|
|
498
|
+
{
|
|
499
|
+
"name": "element",
|
|
500
|
+
"type": {
|
|
501
|
+
"text": "HTMLElement"
|
|
502
|
+
},
|
|
503
|
+
"description": "The button element."
|
|
504
|
+
},
|
|
505
|
+
{
|
|
506
|
+
"name": "softDisabled",
|
|
507
|
+
"type": {
|
|
508
|
+
"text": "boolean"
|
|
509
|
+
},
|
|
510
|
+
"description": "The soft-disabled state."
|
|
511
|
+
}
|
|
512
|
+
],
|
|
513
|
+
"description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
|
|
439
514
|
"inheritedFrom": {
|
|
440
515
|
"name": "Buttonsimple",
|
|
441
|
-
"module": "
|
|
516
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
442
517
|
}
|
|
443
518
|
},
|
|
444
519
|
{
|
|
445
|
-
"
|
|
446
|
-
"name": "
|
|
447
|
-
"
|
|
448
|
-
"
|
|
520
|
+
"kind": "method",
|
|
521
|
+
"name": "setDisabled",
|
|
522
|
+
"privacy": "private",
|
|
523
|
+
"parameters": [
|
|
524
|
+
{
|
|
525
|
+
"name": "element",
|
|
526
|
+
"type": {
|
|
527
|
+
"text": "HTMLElement"
|
|
528
|
+
},
|
|
529
|
+
"description": "The button element."
|
|
530
|
+
},
|
|
531
|
+
{
|
|
532
|
+
"name": "disabled",
|
|
533
|
+
"type": {
|
|
534
|
+
"text": "boolean"
|
|
535
|
+
},
|
|
536
|
+
"description": "The disabled state."
|
|
537
|
+
}
|
|
538
|
+
],
|
|
539
|
+
"description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
|
|
449
540
|
"inheritedFrom": {
|
|
450
541
|
"name": "Buttonsimple",
|
|
451
|
-
"module": "
|
|
542
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
452
543
|
}
|
|
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
544
|
},
|
|
542
545
|
{
|
|
543
|
-
"
|
|
544
|
-
"name": "
|
|
546
|
+
"kind": "method",
|
|
547
|
+
"name": "triggerClickEvent",
|
|
548
|
+
"privacy": "private",
|
|
549
|
+
"inheritedFrom": {
|
|
550
|
+
"name": "Buttonsimple",
|
|
551
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
552
|
+
}
|
|
545
553
|
},
|
|
546
554
|
{
|
|
547
|
-
"
|
|
548
|
-
"name": "
|
|
555
|
+
"kind": "method",
|
|
556
|
+
"name": "handleBlur",
|
|
557
|
+
"privacy": "private",
|
|
558
|
+
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
|
559
|
+
"inheritedFrom": {
|
|
560
|
+
"name": "Buttonsimple",
|
|
561
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
562
|
+
}
|
|
549
563
|
},
|
|
550
564
|
{
|
|
551
|
-
"
|
|
552
|
-
"name": "
|
|
565
|
+
"kind": "method",
|
|
566
|
+
"name": "handleKeyDown",
|
|
567
|
+
"privacy": "private",
|
|
568
|
+
"parameters": [
|
|
569
|
+
{
|
|
570
|
+
"name": "event",
|
|
571
|
+
"type": {
|
|
572
|
+
"text": "KeyboardEvent"
|
|
573
|
+
},
|
|
574
|
+
"description": "The keyboard event."
|
|
575
|
+
}
|
|
576
|
+
],
|
|
577
|
+
"description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.",
|
|
578
|
+
"inheritedFrom": {
|
|
579
|
+
"name": "Buttonsimple",
|
|
580
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
581
|
+
}
|
|
553
582
|
},
|
|
554
583
|
{
|
|
555
|
-
"
|
|
556
|
-
"name": "
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
"
|
|
584
|
+
"kind": "method",
|
|
585
|
+
"name": "handleKeyUp",
|
|
586
|
+
"privacy": "private",
|
|
587
|
+
"parameters": [
|
|
588
|
+
{
|
|
589
|
+
"name": "event",
|
|
590
|
+
"type": {
|
|
591
|
+
"text": "KeyboardEvent"
|
|
592
|
+
},
|
|
593
|
+
"description": "The keyboard event."
|
|
594
|
+
}
|
|
595
|
+
],
|
|
596
|
+
"description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
|
|
568
597
|
"inheritedFrom": {
|
|
569
|
-
"name": "
|
|
570
|
-
"module": "
|
|
598
|
+
"name": "Buttonsimple",
|
|
599
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
571
600
|
}
|
|
572
|
-
}
|
|
601
|
+
}
|
|
602
|
+
],
|
|
603
|
+
"attributes": [
|
|
573
604
|
{
|
|
574
|
-
"
|
|
575
|
-
"name": "initials",
|
|
605
|
+
"name": "variant",
|
|
576
606
|
"type": {
|
|
577
|
-
"text": "
|
|
607
|
+
"text": "VariantType"
|
|
578
608
|
},
|
|
579
|
-
"description": "The
|
|
580
|
-
"
|
|
581
|
-
"
|
|
582
|
-
"name": "AvatarComponentMixin",
|
|
583
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
584
|
-
}
|
|
609
|
+
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
610
|
+
"default": "neutral",
|
|
611
|
+
"fieldName": "variant"
|
|
585
612
|
},
|
|
586
613
|
{
|
|
587
|
-
"
|
|
588
|
-
"name": "presence",
|
|
614
|
+
"name": "label",
|
|
589
615
|
"type": {
|
|
590
|
-
"text": "
|
|
616
|
+
"text": "string"
|
|
591
617
|
},
|
|
592
|
-
"
|
|
593
|
-
"
|
|
594
|
-
"
|
|
595
|
-
"name": "AvatarComponentMixin",
|
|
596
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
597
|
-
}
|
|
618
|
+
"default": "''",
|
|
619
|
+
"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.",
|
|
620
|
+
"fieldName": "label"
|
|
598
621
|
},
|
|
599
622
|
{
|
|
600
|
-
"
|
|
601
|
-
"name": "size",
|
|
623
|
+
"name": "tabIndex",
|
|
602
624
|
"type": {
|
|
603
|
-
"text": "
|
|
625
|
+
"text": "number"
|
|
604
626
|
},
|
|
605
|
-
"
|
|
606
|
-
"
|
|
607
|
-
"
|
|
608
|
-
"reflects": true,
|
|
627
|
+
"default": "0",
|
|
628
|
+
"description": "This property specifies the tab order of the element.",
|
|
629
|
+
"fieldName": "tabIndex",
|
|
609
630
|
"inheritedFrom": {
|
|
610
|
-
"name": "
|
|
611
|
-
"module": "utils/mixins/
|
|
631
|
+
"name": "TabIndexMixin",
|
|
632
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
612
633
|
}
|
|
613
634
|
},
|
|
614
635
|
{
|
|
615
|
-
"
|
|
616
|
-
"name": "counter",
|
|
636
|
+
"name": "disabled",
|
|
617
637
|
"type": {
|
|
618
|
-
"text": "
|
|
638
|
+
"text": "boolean | undefined"
|
|
619
639
|
},
|
|
620
|
-
"description": "
|
|
621
|
-
"
|
|
640
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
641
|
+
"default": "undefined",
|
|
642
|
+
"fieldName": "disabled",
|
|
622
643
|
"inheritedFrom": {
|
|
623
|
-
"name": "
|
|
624
|
-
"module": "utils/mixins/
|
|
644
|
+
"name": "DisabledMixin",
|
|
645
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
625
646
|
}
|
|
626
647
|
},
|
|
627
648
|
{
|
|
628
|
-
"
|
|
629
|
-
"name": "isTyping",
|
|
649
|
+
"name": "active",
|
|
630
650
|
"type": {
|
|
631
651
|
"text": "boolean"
|
|
632
652
|
},
|
|
633
653
|
"default": "false",
|
|
634
|
-
"description": "
|
|
635
|
-
"
|
|
654
|
+
"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.",
|
|
655
|
+
"fieldName": "active",
|
|
636
656
|
"inheritedFrom": {
|
|
637
|
-
"name": "
|
|
638
|
-
"module": "
|
|
657
|
+
"name": "Buttonsimple",
|
|
658
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
639
659
|
}
|
|
640
660
|
},
|
|
641
661
|
{
|
|
642
|
-
"
|
|
643
|
-
"name": "iconName",
|
|
662
|
+
"name": "soft-disabled",
|
|
644
663
|
"type": {
|
|
645
|
-
"text": "
|
|
664
|
+
"text": "boolean"
|
|
646
665
|
},
|
|
647
|
-
"
|
|
648
|
-
"
|
|
666
|
+
"default": "false",
|
|
667
|
+
"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.",
|
|
668
|
+
"fieldName": "softDisabled",
|
|
649
669
|
"inheritedFrom": {
|
|
650
|
-
"name": "
|
|
651
|
-
"module": "
|
|
670
|
+
"name": "Buttonsimple",
|
|
671
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
652
672
|
}
|
|
653
|
-
}
|
|
654
|
-
],
|
|
655
|
-
"mixins": [
|
|
656
|
-
{
|
|
657
|
-
"name": "AvatarComponentMixin",
|
|
658
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
659
673
|
},
|
|
660
674
|
{
|
|
661
|
-
"name": "
|
|
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
|
+
"name": "size",
|
|
675
676
|
"type": {
|
|
676
|
-
"text": "
|
|
677
|
+
"text": "ButtonSize"
|
|
677
678
|
},
|
|
678
|
-
"description": "
|
|
679
|
-
"
|
|
679
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
680
|
+
"default": "32",
|
|
681
|
+
"fieldName": "size",
|
|
680
682
|
"inheritedFrom": {
|
|
681
|
-
"name": "
|
|
682
|
-
"module": "src/
|
|
683
|
+
"name": "Buttonsimple",
|
|
684
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
683
685
|
}
|
|
684
686
|
},
|
|
685
687
|
{
|
|
686
|
-
"name": "
|
|
687
|
-
"
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
"description": "The initials to be displayed for the avatar.",
|
|
691
|
-
"fieldName": "initials",
|
|
688
|
+
"name": "role",
|
|
689
|
+
"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.",
|
|
690
|
+
"default": "button",
|
|
691
|
+
"fieldName": "role",
|
|
692
692
|
"inheritedFrom": {
|
|
693
|
-
"name": "
|
|
694
|
-
"module": "src/
|
|
693
|
+
"name": "Buttonsimple",
|
|
694
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
695
695
|
}
|
|
696
696
|
},
|
|
697
697
|
{
|
|
698
|
-
"name": "
|
|
698
|
+
"name": "type",
|
|
699
699
|
"type": {
|
|
700
|
-
"text": "
|
|
700
|
+
"text": "ButtonType"
|
|
701
701
|
},
|
|
702
|
-
"description": "
|
|
703
|
-
"
|
|
702
|
+
"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.",
|
|
703
|
+
"default": "button",
|
|
704
|
+
"fieldName": "type",
|
|
704
705
|
"inheritedFrom": {
|
|
705
|
-
"name": "
|
|
706
|
-
"module": "src/
|
|
706
|
+
"name": "Buttonsimple",
|
|
707
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
707
708
|
}
|
|
708
|
-
}
|
|
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": [
|
|
709
719
|
{
|
|
710
|
-
"
|
|
711
|
-
"
|
|
712
|
-
|
|
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",
|
|
720
|
+
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
|
721
|
+
"name": "click",
|
|
722
|
+
"reactName": "onClick",
|
|
723
|
+
"eventName": "ClickEvent",
|
|
717
724
|
"inheritedFrom": {
|
|
718
|
-
"name": "
|
|
719
|
-
"module": "src/
|
|
725
|
+
"name": "Buttonsimple",
|
|
726
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
720
727
|
}
|
|
721
728
|
},
|
|
722
729
|
{
|
|
723
|
-
"
|
|
724
|
-
"
|
|
725
|
-
|
|
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",
|
|
730
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
|
|
731
|
+
"name": "keydown",
|
|
732
|
+
"reactName": "onKeyDown",
|
|
733
|
+
"eventName": "KeydownEvent",
|
|
729
734
|
"inheritedFrom": {
|
|
730
|
-
"name": "
|
|
731
|
-
"module": "src/
|
|
735
|
+
"name": "Buttonsimple",
|
|
736
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
732
737
|
}
|
|
733
738
|
},
|
|
734
739
|
{
|
|
735
|
-
"
|
|
736
|
-
"
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
"default": "false",
|
|
740
|
-
"description": "Represents the typing indicator when the user is typing.",
|
|
741
|
-
"fieldName": "isTyping",
|
|
740
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
|
|
741
|
+
"name": "keyup",
|
|
742
|
+
"reactName": "onKeyUp",
|
|
743
|
+
"eventName": "KeyupEvent",
|
|
742
744
|
"inheritedFrom": {
|
|
743
|
-
"name": "
|
|
744
|
-
"module": "src/
|
|
745
|
+
"name": "Buttonsimple",
|
|
746
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
745
747
|
}
|
|
746
748
|
},
|
|
747
749
|
{
|
|
748
|
-
"
|
|
749
|
-
"
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
753
|
-
"fieldName": "iconName",
|
|
750
|
+
"description": "(React: onFocus) This event is dispatched when the button receives focus.",
|
|
751
|
+
"name": "focus",
|
|
752
|
+
"reactName": "onFocus",
|
|
753
|
+
"eventName": "FocusEvent",
|
|
754
754
|
"inheritedFrom": {
|
|
755
|
-
"name": "
|
|
756
|
-
"module": "src/
|
|
755
|
+
"name": "Buttonsimple",
|
|
756
|
+
"module": "src/components/buttonsimple/buttonsimple.component.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": "AlertChip",
|
|
768
|
+
"module": "components/alertchip/alertchip.component.js"
|
|
769
769
|
}
|
|
770
770
|
}
|
|
771
771
|
]
|