@momentum-design/components 0.50.0 → 0.51.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.
- package/dist/browser/index.js +38 -38
- package/dist/browser/index.js.map +2 -2
- package/dist/components/select/select.component.d.ts +1 -1
- package/dist/components/select/select.component.js +7 -7
- package/dist/custom-elements.json +470 -470
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +1 -1
- package/package.json +1 -1
|
@@ -4,752 +4,752 @@
|
|
|
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.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
|
|
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
|
-
"
|
|
459
|
+
"kind": "method",
|
|
460
|
+
"name": "executeAction",
|
|
461
|
+
"privacy": "protected",
|
|
418
462
|
"inheritedFrom": {
|
|
419
463
|
"name": "Buttonsimple",
|
|
420
|
-
"module": "
|
|
464
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
421
465
|
}
|
|
422
466
|
},
|
|
423
467
|
{
|
|
424
|
-
"
|
|
425
|
-
"name": "
|
|
426
|
-
"
|
|
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.",
|
|
427
488
|
"inheritedFrom": {
|
|
428
489
|
"name": "Buttonsimple",
|
|
429
|
-
"module": "
|
|
490
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
430
491
|
}
|
|
431
492
|
},
|
|
432
493
|
{
|
|
433
|
-
"
|
|
434
|
-
"name": "
|
|
435
|
-
"
|
|
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.",
|
|
436
514
|
"inheritedFrom": {
|
|
437
515
|
"name": "Buttonsimple",
|
|
438
|
-
"module": "
|
|
516
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
439
517
|
}
|
|
440
518
|
},
|
|
441
519
|
{
|
|
442
|
-
"
|
|
443
|
-
"name": "
|
|
444
|
-
"
|
|
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.",
|
|
445
540
|
"inheritedFrom": {
|
|
446
541
|
"name": "Buttonsimple",
|
|
447
|
-
"module": "
|
|
542
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
448
543
|
}
|
|
449
|
-
}
|
|
450
|
-
]
|
|
451
|
-
}
|
|
452
|
-
],
|
|
453
|
-
"exports": [
|
|
454
|
-
{
|
|
455
|
-
"kind": "js",
|
|
456
|
-
"name": "default",
|
|
457
|
-
"declaration": {
|
|
458
|
-
"name": "AlertChip",
|
|
459
|
-
"module": "components/alertchip/alertchip.component.js"
|
|
460
|
-
}
|
|
461
|
-
}
|
|
462
|
-
]
|
|
463
|
-
},
|
|
464
|
-
{
|
|
465
|
-
"kind": "javascript-module",
|
|
466
|
-
"path": "components/appheader/appheader.component.js",
|
|
467
|
-
"declarations": [
|
|
468
|
-
{
|
|
469
|
-
"kind": "class",
|
|
470
|
-
"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**.",
|
|
471
|
-
"name": "Appheader",
|
|
472
|
-
"cssParts": [
|
|
473
|
-
{
|
|
474
|
-
"description": "The main container for styling the header.",
|
|
475
|
-
"name": "container"
|
|
476
|
-
},
|
|
477
|
-
{
|
|
478
|
-
"description": "The leading section of the header.",
|
|
479
|
-
"name": "leading-section"
|
|
480
|
-
},
|
|
481
|
-
{
|
|
482
|
-
"description": "The center section of the header.",
|
|
483
|
-
"name": "center-section"
|
|
484
|
-
},
|
|
485
|
-
{
|
|
486
|
-
"description": "The trailing section of the header.",
|
|
487
|
-
"name": "trailing-section"
|
|
488
|
-
}
|
|
489
|
-
],
|
|
490
|
-
"slots": [
|
|
491
|
-
{
|
|
492
|
-
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
493
|
-
"name": "leading"
|
|
494
|
-
},
|
|
495
|
-
{
|
|
496
|
-
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
497
|
-
"name": "center"
|
|
498
|
-
},
|
|
499
|
-
{
|
|
500
|
-
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
501
|
-
"name": "trailing"
|
|
502
|
-
}
|
|
503
|
-
],
|
|
504
|
-
"members": [],
|
|
505
|
-
"superclass": {
|
|
506
|
-
"name": "Component",
|
|
507
|
-
"module": "/src/models"
|
|
508
|
-
},
|
|
509
|
-
"tagName": "mdc-appheader",
|
|
510
|
-
"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 */",
|
|
511
|
-
"customElement": true
|
|
512
|
-
}
|
|
513
|
-
],
|
|
514
|
-
"exports": [
|
|
515
|
-
{
|
|
516
|
-
"kind": "js",
|
|
517
|
-
"name": "default",
|
|
518
|
-
"declaration": {
|
|
519
|
-
"name": "Appheader",
|
|
520
|
-
"module": "components/appheader/appheader.component.js"
|
|
521
|
-
}
|
|
522
|
-
}
|
|
523
|
-
]
|
|
524
|
-
},
|
|
525
|
-
{
|
|
526
|
-
"kind": "javascript-module",
|
|
527
|
-
"path": "components/avatar/avatar.component.js",
|
|
528
|
-
"declarations": [
|
|
529
|
-
{
|
|
530
|
-
"kind": "class",
|
|
531
|
-
"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.",
|
|
532
|
-
"name": "Avatar",
|
|
533
|
-
"cssProperties": [
|
|
534
|
-
{
|
|
535
|
-
"description": "Allows customization of the default background color.",
|
|
536
|
-
"name": "--mdc-avatar-default-background-color"
|
|
537
|
-
},
|
|
538
|
-
{
|
|
539
|
-
"description": "Allows customization of the default foreground color.",
|
|
540
|
-
"name": "--mdc-avatar-default-foreground-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": "
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
"
|
|
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.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
|
|
564
578
|
"inheritedFrom": {
|
|
565
|
-
"name": "
|
|
566
|
-
"module": "
|
|
579
|
+
"name": "Buttonsimple",
|
|
580
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
567
581
|
}
|
|
568
582
|
},
|
|
569
583
|
{
|
|
570
|
-
"kind": "
|
|
571
|
-
"name": "
|
|
572
|
-
"
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
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.",
|
|
577
597
|
"inheritedFrom": {
|
|
578
|
-
"name": "
|
|
579
|
-
"module": "
|
|
598
|
+
"name": "Buttonsimple",
|
|
599
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
580
600
|
}
|
|
601
|
+
}
|
|
602
|
+
],
|
|
603
|
+
"attributes": [
|
|
604
|
+
{
|
|
605
|
+
"name": "variant",
|
|
606
|
+
"type": {
|
|
607
|
+
"text": "VariantType"
|
|
608
|
+
},
|
|
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"
|
|
581
612
|
},
|
|
582
613
|
{
|
|
583
|
-
"
|
|
584
|
-
"name": "presence",
|
|
614
|
+
"name": "label",
|
|
585
615
|
"type": {
|
|
586
|
-
"text": "
|
|
616
|
+
"text": "string"
|
|
587
617
|
},
|
|
588
|
-
"
|
|
589
|
-
"
|
|
590
|
-
"
|
|
591
|
-
"name": "AvatarComponentMixin",
|
|
592
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
593
|
-
}
|
|
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"
|
|
594
621
|
},
|
|
595
622
|
{
|
|
596
|
-
"
|
|
597
|
-
"name": "size",
|
|
623
|
+
"name": "tabIndex",
|
|
598
624
|
"type": {
|
|
599
|
-
"text": "
|
|
625
|
+
"text": "number"
|
|
600
626
|
},
|
|
601
|
-
"
|
|
602
|
-
"
|
|
603
|
-
"
|
|
604
|
-
"reflects": true,
|
|
627
|
+
"default": "0",
|
|
628
|
+
"description": "This property specifies the tab order of the element.",
|
|
629
|
+
"fieldName": "tabIndex",
|
|
605
630
|
"inheritedFrom": {
|
|
606
|
-
"name": "
|
|
607
|
-
"module": "utils/mixins/
|
|
631
|
+
"name": "TabIndexMixin",
|
|
632
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
608
633
|
}
|
|
609
634
|
},
|
|
610
635
|
{
|
|
611
|
-
"
|
|
612
|
-
"name": "counter",
|
|
636
|
+
"name": "disabled",
|
|
613
637
|
"type": {
|
|
614
|
-
"text": "
|
|
638
|
+
"text": "boolean | undefined"
|
|
615
639
|
},
|
|
616
|
-
"description": "
|
|
617
|
-
"
|
|
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",
|
|
618
643
|
"inheritedFrom": {
|
|
619
|
-
"name": "
|
|
620
|
-
"module": "utils/mixins/
|
|
644
|
+
"name": "DisabledMixin",
|
|
645
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
621
646
|
}
|
|
622
647
|
},
|
|
623
648
|
{
|
|
624
|
-
"
|
|
625
|
-
"name": "isTyping",
|
|
649
|
+
"name": "active",
|
|
626
650
|
"type": {
|
|
627
651
|
"text": "boolean"
|
|
628
652
|
},
|
|
629
653
|
"default": "false",
|
|
630
|
-
"description": "
|
|
631
|
-
"
|
|
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",
|
|
632
656
|
"inheritedFrom": {
|
|
633
|
-
"name": "
|
|
634
|
-
"module": "
|
|
657
|
+
"name": "Buttonsimple",
|
|
658
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
635
659
|
}
|
|
636
660
|
},
|
|
637
661
|
{
|
|
638
|
-
"
|
|
639
|
-
"name": "iconName",
|
|
662
|
+
"name": "soft-disabled",
|
|
640
663
|
"type": {
|
|
641
|
-
"text": "
|
|
664
|
+
"text": "boolean"
|
|
642
665
|
},
|
|
643
|
-
"
|
|
644
|
-
"
|
|
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",
|
|
645
669
|
"inheritedFrom": {
|
|
646
|
-
"name": "
|
|
647
|
-
"module": "
|
|
670
|
+
"name": "Buttonsimple",
|
|
671
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
648
672
|
}
|
|
649
|
-
}
|
|
650
|
-
],
|
|
651
|
-
"mixins": [
|
|
652
|
-
{
|
|
653
|
-
"name": "AvatarComponentMixin",
|
|
654
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
655
673
|
},
|
|
656
674
|
{
|
|
657
|
-
"name": "
|
|
658
|
-
"module": "/src/utils/mixins/IconNameMixin"
|
|
659
|
-
}
|
|
660
|
-
],
|
|
661
|
-
"superclass": {
|
|
662
|
-
"name": "Component",
|
|
663
|
-
"module": "/src/models"
|
|
664
|
-
},
|
|
665
|
-
"tagName": "mdc-avatar",
|
|
666
|
-
"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 */",
|
|
667
|
-
"customElement": true,
|
|
668
|
-
"attributes": [
|
|
669
|
-
{
|
|
670
|
-
"name": "src",
|
|
675
|
+
"name": "size",
|
|
671
676
|
"type": {
|
|
672
|
-
"text": "
|
|
677
|
+
"text": "ButtonSize"
|
|
673
678
|
},
|
|
674
|
-
"description": "
|
|
675
|
-
"
|
|
679
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
680
|
+
"default": "32",
|
|
681
|
+
"fieldName": "size",
|
|
676
682
|
"inheritedFrom": {
|
|
677
|
-
"name": "
|
|
678
|
-
"module": "src/
|
|
683
|
+
"name": "Buttonsimple",
|
|
684
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
679
685
|
}
|
|
680
686
|
},
|
|
681
687
|
{
|
|
682
|
-
"name": "
|
|
683
|
-
"
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
"description": "The initials to be displayed for the avatar.",
|
|
687
|
-
"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",
|
|
688
692
|
"inheritedFrom": {
|
|
689
|
-
"name": "
|
|
690
|
-
"module": "src/
|
|
693
|
+
"name": "Buttonsimple",
|
|
694
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
691
695
|
}
|
|
692
696
|
},
|
|
693
697
|
{
|
|
694
|
-
"name": "
|
|
698
|
+
"name": "type",
|
|
695
699
|
"type": {
|
|
696
|
-
"text": "
|
|
700
|
+
"text": "ButtonType"
|
|
697
701
|
},
|
|
698
|
-
"description": "
|
|
699
|
-
"
|
|
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",
|
|
700
705
|
"inheritedFrom": {
|
|
701
|
-
"name": "
|
|
702
|
-
"module": "src/
|
|
706
|
+
"name": "Buttonsimple",
|
|
707
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
703
708
|
}
|
|
704
|
-
}
|
|
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": [
|
|
705
719
|
{
|
|
706
|
-
"
|
|
707
|
-
"
|
|
708
|
-
|
|
709
|
-
},
|
|
710
|
-
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
711
|
-
"default": "32",
|
|
712
|
-
"fieldName": "size",
|
|
720
|
+
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
|
721
|
+
"name": "click",
|
|
722
|
+
"reactName": "onClick",
|
|
713
723
|
"inheritedFrom": {
|
|
714
|
-
"name": "
|
|
715
|
-
"module": "src/
|
|
724
|
+
"name": "Buttonsimple",
|
|
725
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
716
726
|
}
|
|
717
727
|
},
|
|
718
728
|
{
|
|
719
|
-
"
|
|
720
|
-
"
|
|
721
|
-
|
|
722
|
-
},
|
|
723
|
-
"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`.",
|
|
724
|
-
"fieldName": "counter",
|
|
729
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
|
|
730
|
+
"name": "keydown",
|
|
731
|
+
"reactName": "onKeyDown",
|
|
725
732
|
"inheritedFrom": {
|
|
726
|
-
"name": "
|
|
727
|
-
"module": "src/
|
|
733
|
+
"name": "Buttonsimple",
|
|
734
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
728
735
|
}
|
|
729
736
|
},
|
|
730
737
|
{
|
|
731
|
-
"
|
|
732
|
-
"
|
|
733
|
-
|
|
734
|
-
},
|
|
735
|
-
"default": "false",
|
|
736
|
-
"description": "Represents the typing indicator when the user is typing.",
|
|
737
|
-
"fieldName": "isTyping",
|
|
738
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
|
|
739
|
+
"name": "keyup",
|
|
740
|
+
"reactName": "onKeyUp",
|
|
738
741
|
"inheritedFrom": {
|
|
739
|
-
"name": "
|
|
740
|
-
"module": "src/
|
|
742
|
+
"name": "Buttonsimple",
|
|
743
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
741
744
|
}
|
|
742
745
|
},
|
|
743
746
|
{
|
|
744
|
-
"
|
|
745
|
-
"
|
|
746
|
-
|
|
747
|
-
},
|
|
748
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
749
|
-
"fieldName": "iconName",
|
|
747
|
+
"description": "(React: onFocus) This event is dispatched when the button receives focus.",
|
|
748
|
+
"name": "focus",
|
|
749
|
+
"reactName": "onFocus",
|
|
750
750
|
"inheritedFrom": {
|
|
751
|
-
"name": "
|
|
752
|
-
"module": "src/
|
|
751
|
+
"name": "Buttonsimple",
|
|
752
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
753
753
|
}
|
|
754
754
|
}
|
|
755
755
|
]
|
|
@@ -760,8 +760,8 @@
|
|
|
760
760
|
"kind": "js",
|
|
761
761
|
"name": "default",
|
|
762
762
|
"declaration": {
|
|
763
|
-
"name": "
|
|
764
|
-
"module": "components/
|
|
763
|
+
"name": "AlertChip",
|
|
764
|
+
"module": "components/alertchip/alertchip.component.js"
|
|
765
765
|
}
|
|
766
766
|
}
|
|
767
767
|
]
|