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