@momentum-design/components 0.54.0 → 0.54.2
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 +65 -65
- package/dist/browser/index.js.map +2 -2
- package/dist/components/button/button.component.d.ts +3 -3
- package/dist/components/button/button.component.js +20 -15
- package/dist/components/buttonsimple/buttonsimple.component.js +4 -2
- package/dist/custom-elements.json +482 -482
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +1 -1
- package/package.json +1 -1
|
@@ -4,782 +4,782 @@
|
|
|
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
|
-
"description": "The
|
|
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
|
-
"text": "boolean
|
|
168
|
+
"text": "boolean"
|
|
102
169
|
},
|
|
103
|
-
"
|
|
104
|
-
"
|
|
105
|
-
"attribute": "
|
|
170
|
+
"default": "false",
|
|
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
|
}
|
|
125
|
-
}
|
|
190
|
+
}
|
|
191
|
+
],
|
|
192
|
+
"mixins": [
|
|
126
193
|
{
|
|
127
|
-
"
|
|
128
|
-
"
|
|
129
|
-
"description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
|
|
130
|
-
"default": "button",
|
|
131
|
-
"attribute": "role",
|
|
132
|
-
"reflects": true,
|
|
133
|
-
"inheritedFrom": {
|
|
134
|
-
"name": "Buttonsimple",
|
|
135
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
136
|
-
}
|
|
194
|
+
"name": "AvatarComponentMixin",
|
|
195
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
137
196
|
},
|
|
138
197
|
{
|
|
139
|
-
"
|
|
140
|
-
"
|
|
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",
|
|
141
212
|
"type": {
|
|
142
213
|
"text": "string | undefined"
|
|
143
214
|
},
|
|
144
|
-
"description": "
|
|
145
|
-
"
|
|
146
|
-
"attribute": "ariaStateKey",
|
|
147
|
-
"reflects": true,
|
|
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",
|
|
148
217
|
"inheritedFrom": {
|
|
149
|
-
"name": "
|
|
150
|
-
"module": "
|
|
218
|
+
"name": "AvatarComponentMixin",
|
|
219
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
151
220
|
}
|
|
152
221
|
},
|
|
153
222
|
{
|
|
154
|
-
"
|
|
155
|
-
"name": "type",
|
|
223
|
+
"name": "initials",
|
|
156
224
|
"type": {
|
|
157
|
-
"text": "
|
|
225
|
+
"text": "string | undefined"
|
|
158
226
|
},
|
|
159
|
-
"description": "
|
|
160
|
-
"
|
|
161
|
-
"attribute": "type",
|
|
162
|
-
"reflects": true,
|
|
227
|
+
"description": "The initials to be displayed for the avatar.",
|
|
228
|
+
"fieldName": "initials",
|
|
163
229
|
"inheritedFrom": {
|
|
164
|
-
"name": "
|
|
165
|
-
"module": "
|
|
230
|
+
"name": "AvatarComponentMixin",
|
|
231
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
166
232
|
}
|
|
167
233
|
},
|
|
168
234
|
{
|
|
169
|
-
"
|
|
170
|
-
"
|
|
171
|
-
|
|
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",
|
|
172
241
|
"inheritedFrom": {
|
|
173
|
-
"name": "
|
|
174
|
-
"module": "
|
|
242
|
+
"name": "AvatarComponentMixin",
|
|
243
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
175
244
|
}
|
|
176
245
|
},
|
|
177
246
|
{
|
|
178
|
-
"
|
|
179
|
-
"
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
"text": "HTMLElement"
|
|
186
|
-
},
|
|
187
|
-
"description": "The button element"
|
|
188
|
-
},
|
|
189
|
-
{
|
|
190
|
-
"name": "active",
|
|
191
|
-
"optional": true,
|
|
192
|
-
"type": {
|
|
193
|
-
"text": "boolean"
|
|
194
|
-
},
|
|
195
|
-
"description": "The active state of the element"
|
|
196
|
-
}
|
|
197
|
-
],
|
|
198
|
-
"description": "Sets the ariaStateKey attributes 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",
|
|
199
254
|
"inheritedFrom": {
|
|
200
|
-
"name": "
|
|
201
|
-
"module": "
|
|
255
|
+
"name": "AvatarComponentMixin",
|
|
256
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
202
257
|
}
|
|
203
258
|
},
|
|
204
259
|
{
|
|
205
|
-
"
|
|
206
|
-
"
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
"type": {
|
|
212
|
-
"text": "HTMLElement"
|
|
213
|
-
},
|
|
214
|
-
"description": "The button element."
|
|
215
|
-
},
|
|
216
|
-
{
|
|
217
|
-
"name": "softDisabled",
|
|
218
|
-
"optional": true,
|
|
219
|
-
"type": {
|
|
220
|
-
"text": "boolean"
|
|
221
|
-
},
|
|
222
|
-
"description": "The soft-disabled state."
|
|
223
|
-
}
|
|
224
|
-
],
|
|
225
|
-
"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",
|
|
226
266
|
"inheritedFrom": {
|
|
227
|
-
"name": "
|
|
228
|
-
"module": "
|
|
267
|
+
"name": "AvatarComponentMixin",
|
|
268
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
229
269
|
}
|
|
230
270
|
},
|
|
231
271
|
{
|
|
232
|
-
"
|
|
233
|
-
"
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
"text": "HTMLElement"
|
|
240
|
-
},
|
|
241
|
-
"description": "The button element."
|
|
242
|
-
},
|
|
243
|
-
{
|
|
244
|
-
"name": "disabled",
|
|
245
|
-
"type": {
|
|
246
|
-
"text": "boolean"
|
|
247
|
-
},
|
|
248
|
-
"description": "The disabled state."
|
|
249
|
-
}
|
|
250
|
-
],
|
|
251
|
-
"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",
|
|
252
279
|
"inheritedFrom": {
|
|
253
|
-
"name": "
|
|
254
|
-
"module": "
|
|
280
|
+
"name": "AvatarComponentMixin",
|
|
281
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
255
282
|
}
|
|
256
283
|
},
|
|
257
284
|
{
|
|
258
|
-
"
|
|
259
|
-
"
|
|
260
|
-
|
|
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",
|
|
261
291
|
"inheritedFrom": {
|
|
262
|
-
"name": "
|
|
263
|
-
"module": "
|
|
292
|
+
"name": "IconNameMixin",
|
|
293
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
264
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"
|
|
265
322
|
},
|
|
266
323
|
{
|
|
267
|
-
"
|
|
268
|
-
"name": "
|
|
269
|
-
"privacy": "private",
|
|
270
|
-
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
|
271
|
-
"inheritedFrom": {
|
|
272
|
-
"name": "Buttonsimple",
|
|
273
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
274
|
-
}
|
|
324
|
+
"description": "The color of the icon",
|
|
325
|
+
"name": "--mdc-chip-icon-color"
|
|
275
326
|
},
|
|
276
327
|
{
|
|
277
|
-
"
|
|
278
|
-
"name": "
|
|
279
|
-
"privacy": "private",
|
|
280
|
-
"parameters": [
|
|
281
|
-
{
|
|
282
|
-
"name": "event",
|
|
283
|
-
"type": {
|
|
284
|
-
"text": "KeyboardEvent"
|
|
285
|
-
},
|
|
286
|
-
"description": "The keyboard event."
|
|
287
|
-
}
|
|
288
|
-
],
|
|
289
|
-
"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.",
|
|
290
|
-
"inheritedFrom": {
|
|
291
|
-
"name": "Buttonsimple",
|
|
292
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
293
|
-
}
|
|
328
|
+
"description": "The border color of the alertchip",
|
|
329
|
+
"name": "--mdc-chip-border-color"
|
|
294
330
|
},
|
|
295
331
|
{
|
|
296
|
-
"
|
|
297
|
-
"name": "
|
|
298
|
-
"privacy": "private",
|
|
299
|
-
"parameters": [
|
|
300
|
-
{
|
|
301
|
-
"name": "event",
|
|
302
|
-
"type": {
|
|
303
|
-
"text": "KeyboardEvent"
|
|
304
|
-
},
|
|
305
|
-
"description": "The keyboard event."
|
|
306
|
-
}
|
|
307
|
-
],
|
|
308
|
-
"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.",
|
|
309
|
-
"inheritedFrom": {
|
|
310
|
-
"name": "Buttonsimple",
|
|
311
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
312
|
-
}
|
|
332
|
+
"description": "The background color of the alertchip",
|
|
333
|
+
"name": "--mdc-chip-background-color"
|
|
313
334
|
}
|
|
314
335
|
],
|
|
315
|
-
"
|
|
336
|
+
"members": [
|
|
316
337
|
{
|
|
338
|
+
"kind": "field",
|
|
317
339
|
"name": "variant",
|
|
318
340
|
"type": {
|
|
319
341
|
"text": "VariantType"
|
|
320
342
|
},
|
|
321
343
|
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
322
344
|
"default": "neutral",
|
|
323
|
-
"
|
|
345
|
+
"attribute": "variant"
|
|
324
346
|
},
|
|
325
347
|
{
|
|
348
|
+
"kind": "field",
|
|
326
349
|
"name": "label",
|
|
327
350
|
"type": {
|
|
328
351
|
"text": "string"
|
|
329
352
|
},
|
|
330
353
|
"default": "''",
|
|
331
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.",
|
|
332
|
-
"
|
|
355
|
+
"attribute": "label"
|
|
333
356
|
},
|
|
334
357
|
{
|
|
358
|
+
"kind": "field",
|
|
335
359
|
"name": "tabIndex",
|
|
336
360
|
"type": {
|
|
337
361
|
"text": "number"
|
|
338
362
|
},
|
|
339
363
|
"default": "0",
|
|
340
364
|
"description": "This property specifies the tab order of the element.",
|
|
341
|
-
"
|
|
365
|
+
"attribute": "tabIndex",
|
|
366
|
+
"reflects": true,
|
|
342
367
|
"inheritedFrom": {
|
|
343
368
|
"name": "TabIndexMixin",
|
|
344
|
-
"module": "
|
|
369
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
345
370
|
}
|
|
346
371
|
},
|
|
347
372
|
{
|
|
373
|
+
"kind": "field",
|
|
348
374
|
"name": "disabled",
|
|
349
375
|
"type": {
|
|
350
376
|
"text": "boolean | undefined"
|
|
351
377
|
},
|
|
352
378
|
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
353
379
|
"default": "undefined",
|
|
354
|
-
"
|
|
380
|
+
"attribute": "disabled",
|
|
381
|
+
"reflects": true,
|
|
355
382
|
"inheritedFrom": {
|
|
356
383
|
"name": "DisabledMixin",
|
|
357
|
-
"module": "
|
|
384
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
358
385
|
}
|
|
359
386
|
},
|
|
360
387
|
{
|
|
388
|
+
"kind": "field",
|
|
361
389
|
"name": "active",
|
|
362
390
|
"type": {
|
|
363
391
|
"text": "boolean | undefined"
|
|
364
392
|
},
|
|
365
393
|
"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.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
|
366
394
|
"default": "undefined",
|
|
367
|
-
"
|
|
395
|
+
"attribute": "active",
|
|
396
|
+
"reflects": true,
|
|
368
397
|
"inheritedFrom": {
|
|
369
398
|
"name": "Buttonsimple",
|
|
370
|
-
"module": "
|
|
399
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
371
400
|
}
|
|
372
401
|
},
|
|
373
402
|
{
|
|
374
|
-
"
|
|
403
|
+
"kind": "field",
|
|
404
|
+
"name": "softDisabled",
|
|
375
405
|
"type": {
|
|
376
406
|
"text": "boolean | undefined"
|
|
377
407
|
},
|
|
378
408
|
"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.",
|
|
379
409
|
"default": "undefined",
|
|
380
|
-
"
|
|
410
|
+
"attribute": "soft-disabled",
|
|
381
411
|
"inheritedFrom": {
|
|
382
412
|
"name": "Buttonsimple",
|
|
383
|
-
"module": "
|
|
413
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
384
414
|
}
|
|
385
415
|
},
|
|
386
416
|
{
|
|
417
|
+
"kind": "field",
|
|
387
418
|
"name": "size",
|
|
388
419
|
"type": {
|
|
389
420
|
"text": "ButtonSize"
|
|
390
421
|
},
|
|
391
422
|
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
392
423
|
"default": "32",
|
|
393
|
-
"
|
|
424
|
+
"attribute": "size",
|
|
425
|
+
"reflects": true,
|
|
394
426
|
"inheritedFrom": {
|
|
395
427
|
"name": "Buttonsimple",
|
|
396
|
-
"module": "
|
|
428
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
397
429
|
}
|
|
398
430
|
},
|
|
399
431
|
{
|
|
432
|
+
"kind": "field",
|
|
400
433
|
"name": "role",
|
|
401
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.",
|
|
402
435
|
"default": "button",
|
|
403
|
-
"
|
|
436
|
+
"attribute": "role",
|
|
437
|
+
"reflects": true,
|
|
404
438
|
"inheritedFrom": {
|
|
405
439
|
"name": "Buttonsimple",
|
|
406
|
-
"module": "
|
|
440
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
407
441
|
}
|
|
408
442
|
},
|
|
409
443
|
{
|
|
444
|
+
"kind": "field",
|
|
410
445
|
"name": "ariaStateKey",
|
|
411
446
|
"type": {
|
|
412
447
|
"text": "string | undefined"
|
|
413
448
|
},
|
|
414
449
|
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
|
415
450
|
"default": "'aria-pressed' (when)",
|
|
416
|
-
"
|
|
451
|
+
"attribute": "ariaStateKey",
|
|
452
|
+
"reflects": true,
|
|
417
453
|
"inheritedFrom": {
|
|
418
454
|
"name": "Buttonsimple",
|
|
419
|
-
"module": "
|
|
455
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
420
456
|
}
|
|
421
457
|
},
|
|
422
458
|
{
|
|
459
|
+
"kind": "field",
|
|
423
460
|
"name": "type",
|
|
424
461
|
"type": {
|
|
425
462
|
"text": "ButtonType"
|
|
426
463
|
},
|
|
427
464
|
"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.",
|
|
428
465
|
"default": "button",
|
|
429
|
-
"
|
|
466
|
+
"attribute": "type",
|
|
467
|
+
"reflects": true,
|
|
430
468
|
"inheritedFrom": {
|
|
431
469
|
"name": "Buttonsimple",
|
|
432
|
-
"module": "
|
|
470
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
433
471
|
}
|
|
434
|
-
}
|
|
435
|
-
],
|
|
436
|
-
"superclass": {
|
|
437
|
-
"name": "Buttonsimple",
|
|
438
|
-
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
439
|
-
},
|
|
440
|
-
"tagName": "mdc-alertchip",
|
|
441
|
-
"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 */",
|
|
442
|
-
"customElement": true,
|
|
443
|
-
"events": [
|
|
472
|
+
},
|
|
444
473
|
{
|
|
445
|
-
"
|
|
446
|
-
"name": "
|
|
447
|
-
"
|
|
474
|
+
"kind": "method",
|
|
475
|
+
"name": "executeAction",
|
|
476
|
+
"privacy": "protected",
|
|
448
477
|
"inheritedFrom": {
|
|
449
478
|
"name": "Buttonsimple",
|
|
450
|
-
"module": "
|
|
479
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
451
480
|
}
|
|
452
481
|
},
|
|
453
482
|
{
|
|
454
|
-
"
|
|
455
|
-
"name": "
|
|
456
|
-
"
|
|
483
|
+
"kind": "method",
|
|
484
|
+
"name": "setActive",
|
|
485
|
+
"privacy": "protected",
|
|
486
|
+
"parameters": [
|
|
487
|
+
{
|
|
488
|
+
"name": "element",
|
|
489
|
+
"type": {
|
|
490
|
+
"text": "HTMLElement"
|
|
491
|
+
},
|
|
492
|
+
"description": "The button element"
|
|
493
|
+
},
|
|
494
|
+
{
|
|
495
|
+
"name": "active",
|
|
496
|
+
"optional": true,
|
|
497
|
+
"type": {
|
|
498
|
+
"text": "boolean"
|
|
499
|
+
},
|
|
500
|
+
"description": "The active state of the element"
|
|
501
|
+
}
|
|
502
|
+
],
|
|
503
|
+
"description": "Sets the ariaStateKey attributes based on the active state of the button.",
|
|
457
504
|
"inheritedFrom": {
|
|
458
505
|
"name": "Buttonsimple",
|
|
459
|
-
"module": "
|
|
506
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
460
507
|
}
|
|
461
508
|
},
|
|
462
509
|
{
|
|
463
|
-
"
|
|
464
|
-
"name": "
|
|
465
|
-
"
|
|
510
|
+
"kind": "method",
|
|
511
|
+
"name": "setSoftDisabled",
|
|
512
|
+
"privacy": "private",
|
|
513
|
+
"parameters": [
|
|
514
|
+
{
|
|
515
|
+
"name": "element",
|
|
516
|
+
"type": {
|
|
517
|
+
"text": "HTMLElement"
|
|
518
|
+
},
|
|
519
|
+
"description": "The button element."
|
|
520
|
+
},
|
|
521
|
+
{
|
|
522
|
+
"name": "softDisabled",
|
|
523
|
+
"optional": true,
|
|
524
|
+
"type": {
|
|
525
|
+
"text": "boolean"
|
|
526
|
+
},
|
|
527
|
+
"description": "The soft-disabled state."
|
|
528
|
+
}
|
|
529
|
+
],
|
|
530
|
+
"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.",
|
|
466
531
|
"inheritedFrom": {
|
|
467
532
|
"name": "Buttonsimple",
|
|
468
|
-
"module": "
|
|
533
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
469
534
|
}
|
|
470
535
|
},
|
|
471
536
|
{
|
|
472
|
-
"
|
|
473
|
-
"name": "
|
|
474
|
-
"
|
|
537
|
+
"kind": "method",
|
|
538
|
+
"name": "setDisabled",
|
|
539
|
+
"privacy": "private",
|
|
540
|
+
"parameters": [
|
|
541
|
+
{
|
|
542
|
+
"name": "element",
|
|
543
|
+
"type": {
|
|
544
|
+
"text": "HTMLElement"
|
|
545
|
+
},
|
|
546
|
+
"description": "The button element."
|
|
547
|
+
},
|
|
548
|
+
{
|
|
549
|
+
"name": "disabled",
|
|
550
|
+
"type": {
|
|
551
|
+
"text": "boolean"
|
|
552
|
+
},
|
|
553
|
+
"description": "The disabled state."
|
|
554
|
+
}
|
|
555
|
+
],
|
|
556
|
+
"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.",
|
|
475
557
|
"inheritedFrom": {
|
|
476
558
|
"name": "Buttonsimple",
|
|
477
|
-
"module": "
|
|
559
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
478
560
|
}
|
|
479
|
-
}
|
|
480
|
-
]
|
|
481
|
-
}
|
|
482
|
-
],
|
|
483
|
-
"exports": [
|
|
484
|
-
{
|
|
485
|
-
"kind": "js",
|
|
486
|
-
"name": "default",
|
|
487
|
-
"declaration": {
|
|
488
|
-
"name": "AlertChip",
|
|
489
|
-
"module": "components/alertchip/alertchip.component.js"
|
|
490
|
-
}
|
|
491
|
-
}
|
|
492
|
-
]
|
|
493
|
-
},
|
|
494
|
-
{
|
|
495
|
-
"kind": "javascript-module",
|
|
496
|
-
"path": "components/appheader/appheader.component.js",
|
|
497
|
-
"declarations": [
|
|
498
|
-
{
|
|
499
|
-
"kind": "class",
|
|
500
|
-
"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**.",
|
|
501
|
-
"name": "Appheader",
|
|
502
|
-
"cssParts": [
|
|
503
|
-
{
|
|
504
|
-
"description": "The main container for styling the header.",
|
|
505
|
-
"name": "container"
|
|
506
|
-
},
|
|
507
|
-
{
|
|
508
|
-
"description": "The leading section of the header.",
|
|
509
|
-
"name": "leading-section"
|
|
510
|
-
},
|
|
511
|
-
{
|
|
512
|
-
"description": "The center section of the header.",
|
|
513
|
-
"name": "center-section"
|
|
514
|
-
},
|
|
515
|
-
{
|
|
516
|
-
"description": "The trailing section of the header.",
|
|
517
|
-
"name": "trailing-section"
|
|
518
|
-
}
|
|
519
|
-
],
|
|
520
|
-
"slots": [
|
|
521
|
-
{
|
|
522
|
-
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
523
|
-
"name": "leading"
|
|
524
|
-
},
|
|
525
|
-
{
|
|
526
|
-
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
527
|
-
"name": "center"
|
|
528
|
-
},
|
|
529
|
-
{
|
|
530
|
-
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
531
|
-
"name": "trailing"
|
|
532
|
-
}
|
|
533
|
-
],
|
|
534
|
-
"members": [],
|
|
535
|
-
"superclass": {
|
|
536
|
-
"name": "Component",
|
|
537
|
-
"module": "/src/models"
|
|
538
|
-
},
|
|
539
|
-
"tagName": "mdc-appheader",
|
|
540
|
-
"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 */",
|
|
541
|
-
"customElement": true
|
|
542
|
-
}
|
|
543
|
-
],
|
|
544
|
-
"exports": [
|
|
545
|
-
{
|
|
546
|
-
"kind": "js",
|
|
547
|
-
"name": "default",
|
|
548
|
-
"declaration": {
|
|
549
|
-
"name": "Appheader",
|
|
550
|
-
"module": "components/appheader/appheader.component.js"
|
|
551
|
-
}
|
|
552
|
-
}
|
|
553
|
-
]
|
|
554
|
-
},
|
|
555
|
-
{
|
|
556
|
-
"kind": "javascript-module",
|
|
557
|
-
"path": "components/avatar/avatar.component.js",
|
|
558
|
-
"declarations": [
|
|
559
|
-
{
|
|
560
|
-
"kind": "class",
|
|
561
|
-
"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.",
|
|
562
|
-
"name": "Avatar",
|
|
563
|
-
"cssProperties": [
|
|
564
|
-
{
|
|
565
|
-
"description": "Allows customization of the default background color.",
|
|
566
|
-
"name": "--mdc-avatar-default-background-color"
|
|
567
561
|
},
|
|
568
562
|
{
|
|
569
|
-
"
|
|
570
|
-
"name": "
|
|
563
|
+
"kind": "method",
|
|
564
|
+
"name": "triggerClickEvent",
|
|
565
|
+
"privacy": "private",
|
|
566
|
+
"inheritedFrom": {
|
|
567
|
+
"name": "Buttonsimple",
|
|
568
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
569
|
+
}
|
|
571
570
|
},
|
|
572
571
|
{
|
|
573
|
-
"
|
|
574
|
-
"name": "
|
|
572
|
+
"kind": "method",
|
|
573
|
+
"name": "handleBlur",
|
|
574
|
+
"privacy": "private",
|
|
575
|
+
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
|
576
|
+
"inheritedFrom": {
|
|
577
|
+
"name": "Buttonsimple",
|
|
578
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
579
|
+
}
|
|
575
580
|
},
|
|
576
581
|
{
|
|
577
|
-
"
|
|
578
|
-
"name": "
|
|
582
|
+
"kind": "method",
|
|
583
|
+
"name": "handleKeyDown",
|
|
584
|
+
"privacy": "private",
|
|
585
|
+
"parameters": [
|
|
586
|
+
{
|
|
587
|
+
"name": "event",
|
|
588
|
+
"type": {
|
|
589
|
+
"text": "KeyboardEvent"
|
|
590
|
+
},
|
|
591
|
+
"description": "The keyboard event."
|
|
592
|
+
}
|
|
593
|
+
],
|
|
594
|
+
"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.",
|
|
595
|
+
"inheritedFrom": {
|
|
596
|
+
"name": "Buttonsimple",
|
|
597
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
598
|
+
}
|
|
579
599
|
},
|
|
580
600
|
{
|
|
581
|
-
"
|
|
582
|
-
"name": "
|
|
601
|
+
"kind": "method",
|
|
602
|
+
"name": "handleKeyUp",
|
|
603
|
+
"privacy": "private",
|
|
604
|
+
"parameters": [
|
|
605
|
+
{
|
|
606
|
+
"name": "event",
|
|
607
|
+
"type": {
|
|
608
|
+
"text": "KeyboardEvent"
|
|
609
|
+
},
|
|
610
|
+
"description": "The keyboard event."
|
|
611
|
+
}
|
|
612
|
+
],
|
|
613
|
+
"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.",
|
|
614
|
+
"inheritedFrom": {
|
|
615
|
+
"name": "Buttonsimple",
|
|
616
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
617
|
+
}
|
|
583
618
|
}
|
|
584
619
|
],
|
|
585
|
-
"
|
|
620
|
+
"attributes": [
|
|
586
621
|
{
|
|
587
|
-
"
|
|
588
|
-
"name": "src",
|
|
622
|
+
"name": "variant",
|
|
589
623
|
"type": {
|
|
590
|
-
"text": "
|
|
624
|
+
"text": "VariantType"
|
|
591
625
|
},
|
|
592
|
-
"description": "The
|
|
593
|
-
"
|
|
594
|
-
"
|
|
595
|
-
"name": "AvatarComponentMixin",
|
|
596
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
597
|
-
}
|
|
626
|
+
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
627
|
+
"default": "neutral",
|
|
628
|
+
"fieldName": "variant"
|
|
598
629
|
},
|
|
599
630
|
{
|
|
600
|
-
"
|
|
601
|
-
"name": "initials",
|
|
631
|
+
"name": "label",
|
|
602
632
|
"type": {
|
|
603
|
-
"text": "string
|
|
633
|
+
"text": "string"
|
|
604
634
|
},
|
|
605
|
-
"
|
|
606
|
-
"
|
|
607
|
-
"
|
|
608
|
-
"name": "AvatarComponentMixin",
|
|
609
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
610
|
-
}
|
|
635
|
+
"default": "''",
|
|
636
|
+
"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.",
|
|
637
|
+
"fieldName": "label"
|
|
611
638
|
},
|
|
612
639
|
{
|
|
613
|
-
"
|
|
614
|
-
"name": "presence",
|
|
640
|
+
"name": "tabIndex",
|
|
615
641
|
"type": {
|
|
616
|
-
"text": "
|
|
642
|
+
"text": "number"
|
|
617
643
|
},
|
|
618
|
-
"
|
|
619
|
-
"
|
|
644
|
+
"default": "0",
|
|
645
|
+
"description": "This property specifies the tab order of the element.",
|
|
646
|
+
"fieldName": "tabIndex",
|
|
620
647
|
"inheritedFrom": {
|
|
621
|
-
"name": "
|
|
622
|
-
"module": "utils/mixins/
|
|
648
|
+
"name": "TabIndexMixin",
|
|
649
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
623
650
|
}
|
|
624
651
|
},
|
|
625
652
|
{
|
|
626
|
-
"
|
|
627
|
-
"name": "size",
|
|
653
|
+
"name": "disabled",
|
|
628
654
|
"type": {
|
|
629
|
-
"text": "
|
|
655
|
+
"text": "boolean | undefined"
|
|
630
656
|
},
|
|
631
|
-
"description": "
|
|
632
|
-
"default": "
|
|
633
|
-
"
|
|
634
|
-
"reflects": true,
|
|
657
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
658
|
+
"default": "undefined",
|
|
659
|
+
"fieldName": "disabled",
|
|
635
660
|
"inheritedFrom": {
|
|
636
|
-
"name": "
|
|
637
|
-
"module": "utils/mixins/
|
|
661
|
+
"name": "DisabledMixin",
|
|
662
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
638
663
|
}
|
|
639
664
|
},
|
|
640
665
|
{
|
|
641
|
-
"
|
|
642
|
-
"name": "counter",
|
|
666
|
+
"name": "active",
|
|
643
667
|
"type": {
|
|
644
|
-
"text": "
|
|
668
|
+
"text": "boolean | undefined"
|
|
645
669
|
},
|
|
646
|
-
"description": "The
|
|
647
|
-
"
|
|
670
|
+
"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.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
|
671
|
+
"default": "undefined",
|
|
672
|
+
"fieldName": "active",
|
|
648
673
|
"inheritedFrom": {
|
|
649
|
-
"name": "
|
|
650
|
-
"module": "
|
|
674
|
+
"name": "Buttonsimple",
|
|
675
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
651
676
|
}
|
|
652
677
|
},
|
|
653
678
|
{
|
|
654
|
-
"
|
|
655
|
-
"name": "isTyping",
|
|
679
|
+
"name": "soft-disabled",
|
|
656
680
|
"type": {
|
|
657
|
-
"text": "boolean"
|
|
681
|
+
"text": "boolean | undefined"
|
|
658
682
|
},
|
|
659
|
-
"
|
|
660
|
-
"
|
|
661
|
-
"
|
|
683
|
+
"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.",
|
|
684
|
+
"default": "undefined",
|
|
685
|
+
"fieldName": "softDisabled",
|
|
662
686
|
"inheritedFrom": {
|
|
663
|
-
"name": "
|
|
664
|
-
"module": "
|
|
687
|
+
"name": "Buttonsimple",
|
|
688
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
665
689
|
}
|
|
666
690
|
},
|
|
667
691
|
{
|
|
668
|
-
"
|
|
669
|
-
"name": "iconName",
|
|
692
|
+
"name": "size",
|
|
670
693
|
"type": {
|
|
671
|
-
"text": "
|
|
694
|
+
"text": "ButtonSize"
|
|
672
695
|
},
|
|
673
|
-
"description": "
|
|
674
|
-
"
|
|
696
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
697
|
+
"default": "32",
|
|
698
|
+
"fieldName": "size",
|
|
675
699
|
"inheritedFrom": {
|
|
676
|
-
"name": "
|
|
677
|
-
"module": "
|
|
700
|
+
"name": "Buttonsimple",
|
|
701
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
678
702
|
}
|
|
679
|
-
}
|
|
680
|
-
],
|
|
681
|
-
"mixins": [
|
|
682
|
-
{
|
|
683
|
-
"name": "AvatarComponentMixin",
|
|
684
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
685
703
|
},
|
|
686
704
|
{
|
|
687
|
-
"name": "
|
|
688
|
-
"
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
"superclass": {
|
|
692
|
-
"name": "Component",
|
|
693
|
-
"module": "/src/models"
|
|
694
|
-
},
|
|
695
|
-
"tagName": "mdc-avatar",
|
|
696
|
-
"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 */",
|
|
697
|
-
"customElement": true,
|
|
698
|
-
"attributes": [
|
|
699
|
-
{
|
|
700
|
-
"name": "src",
|
|
701
|
-
"type": {
|
|
702
|
-
"text": "string | undefined"
|
|
703
|
-
},
|
|
704
|
-
"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.",
|
|
705
|
-
"fieldName": "src",
|
|
705
|
+
"name": "role",
|
|
706
|
+
"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.",
|
|
707
|
+
"default": "button",
|
|
708
|
+
"fieldName": "role",
|
|
706
709
|
"inheritedFrom": {
|
|
707
|
-
"name": "
|
|
708
|
-
"module": "src/
|
|
710
|
+
"name": "Buttonsimple",
|
|
711
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
709
712
|
}
|
|
710
713
|
},
|
|
711
714
|
{
|
|
712
|
-
"name": "
|
|
715
|
+
"name": "ariaStateKey",
|
|
713
716
|
"type": {
|
|
714
717
|
"text": "string | undefined"
|
|
715
718
|
},
|
|
716
|
-
"description": "
|
|
717
|
-
"
|
|
719
|
+
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
|
720
|
+
"default": "'aria-pressed' (when)",
|
|
721
|
+
"fieldName": "ariaStateKey",
|
|
718
722
|
"inheritedFrom": {
|
|
719
|
-
"name": "
|
|
720
|
-
"module": "src/
|
|
723
|
+
"name": "Buttonsimple",
|
|
724
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
721
725
|
}
|
|
722
726
|
},
|
|
723
727
|
{
|
|
724
|
-
"name": "
|
|
728
|
+
"name": "type",
|
|
725
729
|
"type": {
|
|
726
|
-
"text": "
|
|
730
|
+
"text": "ButtonType"
|
|
727
731
|
},
|
|
728
|
-
"description": "
|
|
729
|
-
"
|
|
732
|
+
"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.",
|
|
733
|
+
"default": "button",
|
|
734
|
+
"fieldName": "type",
|
|
730
735
|
"inheritedFrom": {
|
|
731
|
-
"name": "
|
|
732
|
-
"module": "src/
|
|
736
|
+
"name": "Buttonsimple",
|
|
737
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
733
738
|
}
|
|
734
|
-
}
|
|
739
|
+
}
|
|
740
|
+
],
|
|
741
|
+
"superclass": {
|
|
742
|
+
"name": "Buttonsimple",
|
|
743
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
744
|
+
},
|
|
745
|
+
"tagName": "mdc-alertchip",
|
|
746
|
+
"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 */",
|
|
747
|
+
"customElement": true,
|
|
748
|
+
"events": [
|
|
735
749
|
{
|
|
736
|
-
"
|
|
737
|
-
"
|
|
738
|
-
|
|
739
|
-
},
|
|
740
|
-
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
741
|
-
"default": "32",
|
|
742
|
-
"fieldName": "size",
|
|
750
|
+
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
|
751
|
+
"name": "click",
|
|
752
|
+
"reactName": "onClick",
|
|
743
753
|
"inheritedFrom": {
|
|
744
|
-
"name": "
|
|
745
|
-
"module": "src/
|
|
754
|
+
"name": "Buttonsimple",
|
|
755
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
746
756
|
}
|
|
747
757
|
},
|
|
748
758
|
{
|
|
749
|
-
"
|
|
750
|
-
"
|
|
751
|
-
|
|
752
|
-
},
|
|
753
|
-
"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`.",
|
|
754
|
-
"fieldName": "counter",
|
|
759
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
|
|
760
|
+
"name": "keydown",
|
|
761
|
+
"reactName": "onKeyDown",
|
|
755
762
|
"inheritedFrom": {
|
|
756
|
-
"name": "
|
|
757
|
-
"module": "src/
|
|
763
|
+
"name": "Buttonsimple",
|
|
764
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
758
765
|
}
|
|
759
766
|
},
|
|
760
767
|
{
|
|
761
|
-
"
|
|
762
|
-
"
|
|
763
|
-
|
|
764
|
-
},
|
|
765
|
-
"default": "false",
|
|
766
|
-
"description": "Represents the typing indicator when the user is typing.",
|
|
767
|
-
"fieldName": "isTyping",
|
|
768
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
|
|
769
|
+
"name": "keyup",
|
|
770
|
+
"reactName": "onKeyUp",
|
|
768
771
|
"inheritedFrom": {
|
|
769
|
-
"name": "
|
|
770
|
-
"module": "src/
|
|
772
|
+
"name": "Buttonsimple",
|
|
773
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
771
774
|
}
|
|
772
775
|
},
|
|
773
776
|
{
|
|
774
|
-
"
|
|
775
|
-
"
|
|
776
|
-
|
|
777
|
-
},
|
|
778
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
779
|
-
"fieldName": "iconName",
|
|
777
|
+
"description": "(React: onFocus) This event is dispatched when the button receives focus.",
|
|
778
|
+
"name": "focus",
|
|
779
|
+
"reactName": "onFocus",
|
|
780
780
|
"inheritedFrom": {
|
|
781
|
-
"name": "
|
|
782
|
-
"module": "src/
|
|
781
|
+
"name": "Buttonsimple",
|
|
782
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
783
783
|
}
|
|
784
784
|
}
|
|
785
785
|
]
|
|
@@ -790,8 +790,8 @@
|
|
|
790
790
|
"kind": "js",
|
|
791
791
|
"name": "default",
|
|
792
792
|
"declaration": {
|
|
793
|
-
"name": "
|
|
794
|
-
"module": "components/
|
|
793
|
+
"name": "AlertChip",
|
|
794
|
+
"module": "components/alertchip/alertchip.component.js"
|
|
795
795
|
}
|
|
796
796
|
}
|
|
797
797
|
]
|
|
@@ -2020,7 +2020,7 @@
|
|
|
2020
2020
|
},
|
|
2021
2021
|
{
|
|
2022
2022
|
"kind": "method",
|
|
2023
|
-
"name": "
|
|
2023
|
+
"name": "inferFilledIconName",
|
|
2024
2024
|
"privacy": "private",
|
|
2025
2025
|
"parameters": [
|
|
2026
2026
|
{
|