@momentum-design/components 0.69.4 → 0.70.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 +833 -833
- package/dist/react/index.d.ts +3 -3
- package/dist/react/index.js +3 -3
- package/package.json +1 -1
|
@@ -4,180 +4,485 @@
|
|
|
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
|
-
"
|
|
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",
|
|
254
|
+
"inheritedFrom": {
|
|
255
|
+
"name": "AvatarComponentMixin",
|
|
256
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
257
|
+
}
|
|
258
|
+
},
|
|
259
|
+
{
|
|
260
|
+
"name": "counter",
|
|
261
|
+
"type": {
|
|
262
|
+
"text": "number | undefined"
|
|
263
|
+
},
|
|
264
|
+
"description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
|
|
265
|
+
"fieldName": "counter",
|
|
266
|
+
"inheritedFrom": {
|
|
267
|
+
"name": "AvatarComponentMixin",
|
|
268
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
269
|
+
}
|
|
270
|
+
},
|
|
271
|
+
{
|
|
272
|
+
"name": "is-typing",
|
|
273
|
+
"type": {
|
|
274
|
+
"text": "boolean"
|
|
275
|
+
},
|
|
276
|
+
"default": "false",
|
|
277
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
278
|
+
"fieldName": "isTyping",
|
|
279
|
+
"inheritedFrom": {
|
|
280
|
+
"name": "AvatarComponentMixin",
|
|
281
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
282
|
+
}
|
|
283
|
+
},
|
|
284
|
+
{
|
|
285
|
+
"name": "icon-name",
|
|
286
|
+
"type": {
|
|
287
|
+
"text": "IconNames | undefined"
|
|
288
|
+
},
|
|
289
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
290
|
+
"fieldName": "iconName",
|
|
291
|
+
"inheritedFrom": {
|
|
292
|
+
"name": "IconNameMixin",
|
|
293
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
]
|
|
297
|
+
}
|
|
298
|
+
],
|
|
299
|
+
"exports": [
|
|
300
|
+
{
|
|
301
|
+
"kind": "js",
|
|
302
|
+
"name": "default",
|
|
303
|
+
"declaration": {
|
|
304
|
+
"name": "Avatar",
|
|
305
|
+
"module": "components/avatar/avatar.component.js"
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
]
|
|
309
|
+
},
|
|
310
|
+
{
|
|
311
|
+
"kind": "javascript-module",
|
|
312
|
+
"path": "components/alertchip/alertchip.component.js",
|
|
313
|
+
"declarations": [
|
|
314
|
+
{
|
|
315
|
+
"kind": "class",
|
|
316
|
+
"description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - neutral, warning, error, success, and informational\n\nThis component is built by extending Buttonsimple.",
|
|
317
|
+
"name": "AlertChip",
|
|
318
|
+
"cssProperties": [
|
|
319
|
+
{
|
|
320
|
+
"description": "The color of the label text",
|
|
321
|
+
"name": "--mdc-chip-color"
|
|
322
|
+
},
|
|
323
|
+
{
|
|
324
|
+
"description": "The color of the icon",
|
|
325
|
+
"name": "--mdc-chip-icon-color"
|
|
326
|
+
},
|
|
327
|
+
{
|
|
328
|
+
"description": "The border color of the alertchip",
|
|
329
|
+
"name": "--mdc-chip-border-color"
|
|
330
|
+
},
|
|
331
|
+
{
|
|
332
|
+
"description": "The background color of the alertchip",
|
|
333
|
+
"name": "--mdc-chip-background-color"
|
|
334
|
+
}
|
|
335
|
+
],
|
|
336
|
+
"members": [
|
|
337
|
+
{
|
|
338
|
+
"kind": "field",
|
|
339
|
+
"name": "variant",
|
|
340
|
+
"type": {
|
|
341
|
+
"text": "VariantType"
|
|
342
|
+
},
|
|
343
|
+
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
344
|
+
"default": "neutral",
|
|
345
|
+
"attribute": "variant"
|
|
346
|
+
},
|
|
347
|
+
{
|
|
348
|
+
"kind": "field",
|
|
349
|
+
"name": "label",
|
|
350
|
+
"type": {
|
|
351
|
+
"text": "string"
|
|
352
|
+
},
|
|
353
|
+
"default": "''",
|
|
354
|
+
"description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
|
355
|
+
"attribute": "label"
|
|
356
|
+
},
|
|
357
|
+
{
|
|
358
|
+
"kind": "field",
|
|
359
|
+
"name": "tabIndex",
|
|
360
|
+
"type": {
|
|
361
|
+
"text": "number"
|
|
362
|
+
},
|
|
363
|
+
"default": "0",
|
|
364
|
+
"description": "This property specifies the tab order of the element.",
|
|
365
|
+
"attribute": "tabIndex",
|
|
366
|
+
"reflects": true,
|
|
367
|
+
"inheritedFrom": {
|
|
368
|
+
"name": "TabIndexMixin",
|
|
369
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
370
|
+
}
|
|
371
|
+
},
|
|
372
|
+
{
|
|
373
|
+
"kind": "field",
|
|
374
|
+
"name": "disabled",
|
|
375
|
+
"type": {
|
|
376
|
+
"text": "boolean | undefined"
|
|
377
|
+
},
|
|
378
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
379
|
+
"default": "undefined",
|
|
380
|
+
"attribute": "disabled",
|
|
381
|
+
"reflects": true,
|
|
382
|
+
"inheritedFrom": {
|
|
383
|
+
"name": "DisabledMixin",
|
|
384
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
385
|
+
}
|
|
386
|
+
},
|
|
387
|
+
{
|
|
388
|
+
"kind": "field",
|
|
389
|
+
"name": "active",
|
|
390
|
+
"type": {
|
|
391
|
+
"text": "boolean | undefined"
|
|
392
|
+
},
|
|
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.",
|
|
394
|
+
"default": "undefined",
|
|
395
|
+
"attribute": "active",
|
|
396
|
+
"reflects": true,
|
|
397
|
+
"inheritedFrom": {
|
|
398
|
+
"name": "Buttonsimple",
|
|
399
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
400
|
+
}
|
|
401
|
+
},
|
|
402
|
+
{
|
|
403
|
+
"kind": "field",
|
|
404
|
+
"name": "softDisabled",
|
|
405
|
+
"type": {
|
|
406
|
+
"text": "boolean | undefined"
|
|
407
|
+
},
|
|
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.",
|
|
409
|
+
"default": "undefined",
|
|
410
|
+
"attribute": "soft-disabled",
|
|
411
|
+
"reflects": true,
|
|
412
|
+
"inheritedFrom": {
|
|
413
|
+
"name": "Buttonsimple",
|
|
414
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
415
|
+
}
|
|
416
|
+
},
|
|
417
|
+
{
|
|
418
|
+
"kind": "field",
|
|
419
|
+
"name": "size",
|
|
420
|
+
"type": {
|
|
421
|
+
"text": "ButtonSize"
|
|
422
|
+
},
|
|
423
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
424
|
+
"default": "32",
|
|
425
|
+
"attribute": "size",
|
|
426
|
+
"reflects": true,
|
|
427
|
+
"inheritedFrom": {
|
|
428
|
+
"name": "Buttonsimple",
|
|
429
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
430
|
+
}
|
|
431
|
+
},
|
|
432
|
+
{
|
|
433
|
+
"kind": "field",
|
|
434
|
+
"name": "role",
|
|
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.",
|
|
436
|
+
"default": "button",
|
|
437
|
+
"attribute": "role",
|
|
438
|
+
"reflects": true,
|
|
439
|
+
"inheritedFrom": {
|
|
440
|
+
"name": "Buttonsimple",
|
|
441
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
442
|
+
}
|
|
443
|
+
},
|
|
444
|
+
{
|
|
445
|
+
"kind": "field",
|
|
446
|
+
"name": "ariaStateKey",
|
|
447
|
+
"type": {
|
|
448
|
+
"text": "string | undefined"
|
|
449
|
+
},
|
|
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`",
|
|
451
|
+
"default": "'aria-pressed' (when)",
|
|
452
|
+
"attribute": "ariaStateKey",
|
|
453
|
+
"reflects": true,
|
|
454
|
+
"inheritedFrom": {
|
|
455
|
+
"name": "Buttonsimple",
|
|
456
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
457
|
+
}
|
|
458
|
+
},
|
|
459
|
+
{
|
|
460
|
+
"kind": "field",
|
|
461
|
+
"name": "type",
|
|
462
|
+
"type": {
|
|
463
|
+
"text": "ButtonType"
|
|
464
|
+
},
|
|
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.",
|
|
466
|
+
"default": "button",
|
|
467
|
+
"attribute": "type",
|
|
468
|
+
"reflects": true,
|
|
469
|
+
"inheritedFrom": {
|
|
470
|
+
"name": "Buttonsimple",
|
|
471
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
472
|
+
}
|
|
473
|
+
},
|
|
474
|
+
{
|
|
475
|
+
"kind": "method",
|
|
476
|
+
"name": "executeAction",
|
|
477
|
+
"privacy": "protected",
|
|
478
|
+
"inheritedFrom": {
|
|
479
|
+
"name": "Buttonsimple",
|
|
480
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
481
|
+
}
|
|
482
|
+
},
|
|
483
|
+
{
|
|
484
|
+
"kind": "method",
|
|
485
|
+
"name": "setActive",
|
|
181
486
|
"privacy": "protected",
|
|
182
487
|
"parameters": [
|
|
183
488
|
{
|
|
@@ -494,96 +799,50 @@
|
|
|
494
799
|
},
|
|
495
800
|
{
|
|
496
801
|
"kind": "javascript-module",
|
|
497
|
-
"path": "components/
|
|
802
|
+
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
498
803
|
"declarations": [
|
|
499
804
|
{
|
|
500
805
|
"kind": "class",
|
|
501
|
-
"description": "The `mdc-
|
|
502
|
-
"name": "
|
|
503
|
-
"
|
|
806
|
+
"description": "The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n\nThis component is made by extending `buttonsimple` class.\nThe button component acts as a wrapper for the avatar component.",
|
|
807
|
+
"name": "AvatarButton",
|
|
808
|
+
"cssProperties": [
|
|
504
809
|
{
|
|
505
|
-
"description": "
|
|
506
|
-
"name": "
|
|
810
|
+
"description": "Background color of the overlay in rest state",
|
|
811
|
+
"name": "--mdc-avatarbutton-overlay-background-color-rest"
|
|
507
812
|
},
|
|
508
813
|
{
|
|
509
|
-
"description": "
|
|
510
|
-
"name": "
|
|
814
|
+
"description": "Background color of the overlay in hover state",
|
|
815
|
+
"name": "--mdc-avatarbutton-overlay-background-color-hover"
|
|
511
816
|
},
|
|
512
817
|
{
|
|
513
|
-
"description": "
|
|
514
|
-
"name": "
|
|
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"
|
|
818
|
+
"description": "Background color of the overlay in active state",
|
|
819
|
+
"name": "--mdc-avatarbutton-overlay-background-color-active"
|
|
533
820
|
}
|
|
534
821
|
],
|
|
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
|
-
},
|
|
569
|
-
{
|
|
570
|
-
"description": "Allows customization of the default foreground color.",
|
|
571
|
-
"name": "--mdc-avatar-default-foreground-color"
|
|
572
|
-
},
|
|
822
|
+
"members": [
|
|
573
823
|
{
|
|
574
|
-
"
|
|
575
|
-
"name": "
|
|
824
|
+
"kind": "field",
|
|
825
|
+
"name": "ariaLabel",
|
|
826
|
+
"type": {
|
|
827
|
+
"text": "string | null"
|
|
828
|
+
},
|
|
829
|
+
"default": "null",
|
|
830
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
831
|
+
"attribute": "aria-label"
|
|
576
832
|
},
|
|
577
833
|
{
|
|
578
|
-
"
|
|
579
|
-
"name": "
|
|
834
|
+
"kind": "method",
|
|
835
|
+
"name": "setSize",
|
|
836
|
+
"privacy": "private",
|
|
837
|
+
"parameters": [
|
|
838
|
+
{
|
|
839
|
+
"name": "size",
|
|
840
|
+
"type": {
|
|
841
|
+
"text": "AvatarSize"
|
|
842
|
+
}
|
|
843
|
+
}
|
|
844
|
+
]
|
|
580
845
|
},
|
|
581
|
-
{
|
|
582
|
-
"description": "Allows customization of the loading overlay background color.",
|
|
583
|
-
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
584
|
-
}
|
|
585
|
-
],
|
|
586
|
-
"members": [
|
|
587
846
|
{
|
|
588
847
|
"kind": "field",
|
|
589
848
|
"name": "src",
|
|
@@ -627,15 +886,15 @@
|
|
|
627
886
|
"kind": "field",
|
|
628
887
|
"name": "size",
|
|
629
888
|
"type": {
|
|
630
|
-
"text": "
|
|
889
|
+
"text": "ButtonSize"
|
|
631
890
|
},
|
|
632
891
|
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
633
892
|
"default": "32",
|
|
634
893
|
"attribute": "size",
|
|
635
894
|
"reflects": true,
|
|
636
895
|
"inheritedFrom": {
|
|
637
|
-
"name": "
|
|
638
|
-
"module": "
|
|
896
|
+
"name": "Buttonsimple",
|
|
897
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
639
898
|
}
|
|
640
899
|
},
|
|
641
900
|
{
|
|
@@ -677,376 +936,117 @@
|
|
|
677
936
|
"name": "IconNameMixin",
|
|
678
937
|
"module": "utils/mixins/IconNameMixin.js"
|
|
679
938
|
}
|
|
680
|
-
}
|
|
681
|
-
],
|
|
682
|
-
"mixins": [
|
|
683
|
-
{
|
|
684
|
-
"name": "AvatarComponentMixin",
|
|
685
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
686
939
|
},
|
|
687
940
|
{
|
|
688
|
-
"
|
|
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",
|
|
941
|
+
"kind": "field",
|
|
942
|
+
"name": "tabIndex",
|
|
702
943
|
"type": {
|
|
703
|
-
"text": "
|
|
944
|
+
"text": "number"
|
|
704
945
|
},
|
|
705
|
-
"
|
|
706
|
-
"
|
|
946
|
+
"default": "0",
|
|
947
|
+
"description": "This property specifies the tab order of the element.",
|
|
948
|
+
"attribute": "tabIndex",
|
|
949
|
+
"reflects": true,
|
|
707
950
|
"inheritedFrom": {
|
|
708
|
-
"name": "
|
|
709
|
-
"module": "
|
|
951
|
+
"name": "TabIndexMixin",
|
|
952
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
710
953
|
}
|
|
711
954
|
},
|
|
712
955
|
{
|
|
713
|
-
"
|
|
956
|
+
"kind": "field",
|
|
957
|
+
"name": "disabled",
|
|
714
958
|
"type": {
|
|
715
|
-
"text": "
|
|
959
|
+
"text": "boolean | undefined"
|
|
716
960
|
},
|
|
717
|
-
"description": "
|
|
718
|
-
"
|
|
961
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
962
|
+
"default": "undefined",
|
|
963
|
+
"attribute": "disabled",
|
|
964
|
+
"reflects": true,
|
|
719
965
|
"inheritedFrom": {
|
|
720
|
-
"name": "
|
|
721
|
-
"module": "
|
|
966
|
+
"name": "DisabledMixin",
|
|
967
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
722
968
|
}
|
|
723
969
|
},
|
|
724
970
|
{
|
|
725
|
-
"
|
|
971
|
+
"kind": "field",
|
|
972
|
+
"name": "active",
|
|
726
973
|
"type": {
|
|
727
|
-
"text": "
|
|
974
|
+
"text": "boolean | undefined"
|
|
728
975
|
},
|
|
729
|
-
"description": "The
|
|
730
|
-
"
|
|
976
|
+
"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.",
|
|
977
|
+
"default": "undefined",
|
|
978
|
+
"attribute": "active",
|
|
979
|
+
"reflects": true,
|
|
731
980
|
"inheritedFrom": {
|
|
732
|
-
"name": "
|
|
733
|
-
"module": "
|
|
981
|
+
"name": "Buttonsimple",
|
|
982
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
734
983
|
}
|
|
735
984
|
},
|
|
736
985
|
{
|
|
737
|
-
"
|
|
986
|
+
"kind": "field",
|
|
987
|
+
"name": "softDisabled",
|
|
738
988
|
"type": {
|
|
739
|
-
"text": "
|
|
989
|
+
"text": "boolean | undefined"
|
|
740
990
|
},
|
|
741
|
-
"description": "
|
|
742
|
-
"default": "
|
|
743
|
-
"
|
|
991
|
+
"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.",
|
|
992
|
+
"default": "undefined",
|
|
993
|
+
"attribute": "soft-disabled",
|
|
994
|
+
"reflects": true,
|
|
744
995
|
"inheritedFrom": {
|
|
745
|
-
"name": "
|
|
746
|
-
"module": "
|
|
996
|
+
"name": "Buttonsimple",
|
|
997
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
747
998
|
}
|
|
748
999
|
},
|
|
749
1000
|
{
|
|
750
|
-
"
|
|
751
|
-
"
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
"
|
|
755
|
-
"
|
|
1001
|
+
"kind": "field",
|
|
1002
|
+
"name": "role",
|
|
1003
|
+
"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.",
|
|
1004
|
+
"default": "button",
|
|
1005
|
+
"attribute": "role",
|
|
1006
|
+
"reflects": true,
|
|
756
1007
|
"inheritedFrom": {
|
|
757
|
-
"name": "
|
|
758
|
-
"module": "
|
|
1008
|
+
"name": "Buttonsimple",
|
|
1009
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
759
1010
|
}
|
|
760
1011
|
},
|
|
761
1012
|
{
|
|
762
|
-
"
|
|
1013
|
+
"kind": "field",
|
|
1014
|
+
"name": "ariaStateKey",
|
|
763
1015
|
"type": {
|
|
764
|
-
"text": "
|
|
1016
|
+
"text": "string | undefined"
|
|
765
1017
|
},
|
|
766
|
-
"
|
|
767
|
-
"
|
|
768
|
-
"
|
|
1018
|
+
"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`",
|
|
1019
|
+
"default": "'aria-pressed' (when)",
|
|
1020
|
+
"attribute": "ariaStateKey",
|
|
1021
|
+
"reflects": true,
|
|
769
1022
|
"inheritedFrom": {
|
|
770
|
-
"name": "
|
|
771
|
-
"module": "
|
|
1023
|
+
"name": "Buttonsimple",
|
|
1024
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
772
1025
|
}
|
|
773
1026
|
},
|
|
774
1027
|
{
|
|
775
|
-
"
|
|
1028
|
+
"kind": "field",
|
|
1029
|
+
"name": "type",
|
|
776
1030
|
"type": {
|
|
777
|
-
"text": "
|
|
1031
|
+
"text": "ButtonType"
|
|
778
1032
|
},
|
|
779
|
-
"description": "
|
|
780
|
-
"
|
|
1033
|
+
"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.",
|
|
1034
|
+
"default": "button",
|
|
1035
|
+
"attribute": "type",
|
|
1036
|
+
"reflects": true,
|
|
781
1037
|
"inheritedFrom": {
|
|
782
|
-
"name": "
|
|
783
|
-
"module": "
|
|
1038
|
+
"name": "Buttonsimple",
|
|
1039
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
784
1040
|
}
|
|
785
|
-
}
|
|
786
|
-
]
|
|
787
|
-
}
|
|
788
|
-
],
|
|
789
|
-
"exports": [
|
|
790
|
-
{
|
|
791
|
-
"kind": "js",
|
|
792
|
-
"name": "default",
|
|
793
|
-
"declaration": {
|
|
794
|
-
"name": "Avatar",
|
|
795
|
-
"module": "components/avatar/avatar.component.js"
|
|
796
|
-
}
|
|
797
|
-
}
|
|
798
|
-
]
|
|
799
|
-
},
|
|
800
|
-
{
|
|
801
|
-
"kind": "javascript-module",
|
|
802
|
-
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
803
|
-
"declarations": [
|
|
804
|
-
{
|
|
805
|
-
"kind": "class",
|
|
806
|
-
"description": "The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n\nThis component is made by extending `buttonsimple` class.\nThe button component acts as a wrapper for the avatar component.",
|
|
807
|
-
"name": "AvatarButton",
|
|
808
|
-
"cssProperties": [
|
|
1041
|
+
},
|
|
809
1042
|
{
|
|
810
|
-
"
|
|
811
|
-
"name": "
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
{
|
|
818
|
-
"description": "Background color of the overlay in active state",
|
|
819
|
-
"name": "--mdc-avatarbutton-overlay-background-color-active"
|
|
820
|
-
}
|
|
821
|
-
],
|
|
822
|
-
"members": [
|
|
823
|
-
{
|
|
824
|
-
"kind": "field",
|
|
825
|
-
"name": "ariaLabel",
|
|
826
|
-
"type": {
|
|
827
|
-
"text": "string | null"
|
|
828
|
-
},
|
|
829
|
-
"default": "null",
|
|
830
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
831
|
-
"attribute": "aria-label"
|
|
832
|
-
},
|
|
833
|
-
{
|
|
834
|
-
"kind": "method",
|
|
835
|
-
"name": "setSize",
|
|
836
|
-
"privacy": "private",
|
|
837
|
-
"parameters": [
|
|
838
|
-
{
|
|
839
|
-
"name": "size",
|
|
840
|
-
"type": {
|
|
841
|
-
"text": "AvatarSize"
|
|
842
|
-
}
|
|
843
|
-
}
|
|
844
|
-
]
|
|
845
|
-
},
|
|
846
|
-
{
|
|
847
|
-
"kind": "field",
|
|
848
|
-
"name": "src",
|
|
849
|
-
"type": {
|
|
850
|
-
"text": "string | undefined"
|
|
851
|
-
},
|
|
852
|
-
"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.",
|
|
853
|
-
"attribute": "src",
|
|
854
|
-
"inheritedFrom": {
|
|
855
|
-
"name": "AvatarComponentMixin",
|
|
856
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
857
|
-
}
|
|
858
|
-
},
|
|
859
|
-
{
|
|
860
|
-
"kind": "field",
|
|
861
|
-
"name": "initials",
|
|
862
|
-
"type": {
|
|
863
|
-
"text": "string | undefined"
|
|
864
|
-
},
|
|
865
|
-
"description": "The initials to be displayed for the avatar.",
|
|
866
|
-
"attribute": "initials",
|
|
867
|
-
"inheritedFrom": {
|
|
868
|
-
"name": "AvatarComponentMixin",
|
|
869
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
870
|
-
}
|
|
871
|
-
},
|
|
872
|
-
{
|
|
873
|
-
"kind": "field",
|
|
874
|
-
"name": "presence",
|
|
875
|
-
"type": {
|
|
876
|
-
"text": "PresenceType | undefined"
|
|
877
|
-
},
|
|
878
|
-
"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`",
|
|
879
|
-
"attribute": "presence",
|
|
880
|
-
"inheritedFrom": {
|
|
881
|
-
"name": "AvatarComponentMixin",
|
|
882
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
883
|
-
}
|
|
884
|
-
},
|
|
885
|
-
{
|
|
886
|
-
"kind": "field",
|
|
887
|
-
"name": "size",
|
|
888
|
-
"type": {
|
|
889
|
-
"text": "ButtonSize"
|
|
890
|
-
},
|
|
891
|
-
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
892
|
-
"default": "32",
|
|
893
|
-
"attribute": "size",
|
|
894
|
-
"reflects": true,
|
|
895
|
-
"inheritedFrom": {
|
|
896
|
-
"name": "Buttonsimple",
|
|
897
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
898
|
-
}
|
|
899
|
-
},
|
|
900
|
-
{
|
|
901
|
-
"kind": "field",
|
|
902
|
-
"name": "counter",
|
|
903
|
-
"type": {
|
|
904
|
-
"text": "number | undefined"
|
|
905
|
-
},
|
|
906
|
-
"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`.",
|
|
907
|
-
"attribute": "counter",
|
|
908
|
-
"inheritedFrom": {
|
|
909
|
-
"name": "AvatarComponentMixin",
|
|
910
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
911
|
-
}
|
|
912
|
-
},
|
|
913
|
-
{
|
|
914
|
-
"kind": "field",
|
|
915
|
-
"name": "isTyping",
|
|
916
|
-
"type": {
|
|
917
|
-
"text": "boolean"
|
|
918
|
-
},
|
|
919
|
-
"default": "false",
|
|
920
|
-
"description": "Represents the typing indicator when the user is typing.",
|
|
921
|
-
"attribute": "is-typing",
|
|
922
|
-
"inheritedFrom": {
|
|
923
|
-
"name": "AvatarComponentMixin",
|
|
924
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
925
|
-
}
|
|
926
|
-
},
|
|
927
|
-
{
|
|
928
|
-
"kind": "field",
|
|
929
|
-
"name": "iconName",
|
|
930
|
-
"type": {
|
|
931
|
-
"text": "IconNames | undefined"
|
|
932
|
-
},
|
|
933
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
934
|
-
"attribute": "icon-name",
|
|
935
|
-
"inheritedFrom": {
|
|
936
|
-
"name": "IconNameMixin",
|
|
937
|
-
"module": "utils/mixins/IconNameMixin.js"
|
|
938
|
-
}
|
|
939
|
-
},
|
|
940
|
-
{
|
|
941
|
-
"kind": "field",
|
|
942
|
-
"name": "tabIndex",
|
|
943
|
-
"type": {
|
|
944
|
-
"text": "number"
|
|
945
|
-
},
|
|
946
|
-
"default": "0",
|
|
947
|
-
"description": "This property specifies the tab order of the element.",
|
|
948
|
-
"attribute": "tabIndex",
|
|
949
|
-
"reflects": true,
|
|
950
|
-
"inheritedFrom": {
|
|
951
|
-
"name": "TabIndexMixin",
|
|
952
|
-
"module": "utils/mixins/TabIndexMixin.js"
|
|
953
|
-
}
|
|
954
|
-
},
|
|
955
|
-
{
|
|
956
|
-
"kind": "field",
|
|
957
|
-
"name": "disabled",
|
|
958
|
-
"type": {
|
|
959
|
-
"text": "boolean | undefined"
|
|
960
|
-
},
|
|
961
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
962
|
-
"default": "undefined",
|
|
963
|
-
"attribute": "disabled",
|
|
964
|
-
"reflects": true,
|
|
965
|
-
"inheritedFrom": {
|
|
966
|
-
"name": "DisabledMixin",
|
|
967
|
-
"module": "utils/mixins/DisabledMixin.js"
|
|
968
|
-
}
|
|
969
|
-
},
|
|
970
|
-
{
|
|
971
|
-
"kind": "field",
|
|
972
|
-
"name": "active",
|
|
973
|
-
"type": {
|
|
974
|
-
"text": "boolean | undefined"
|
|
975
|
-
},
|
|
976
|
-
"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.",
|
|
977
|
-
"default": "undefined",
|
|
978
|
-
"attribute": "active",
|
|
979
|
-
"reflects": true,
|
|
980
|
-
"inheritedFrom": {
|
|
981
|
-
"name": "Buttonsimple",
|
|
982
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
983
|
-
}
|
|
984
|
-
},
|
|
985
|
-
{
|
|
986
|
-
"kind": "field",
|
|
987
|
-
"name": "softDisabled",
|
|
988
|
-
"type": {
|
|
989
|
-
"text": "boolean | undefined"
|
|
990
|
-
},
|
|
991
|
-
"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.",
|
|
992
|
-
"default": "undefined",
|
|
993
|
-
"attribute": "soft-disabled",
|
|
994
|
-
"reflects": true,
|
|
995
|
-
"inheritedFrom": {
|
|
996
|
-
"name": "Buttonsimple",
|
|
997
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
998
|
-
}
|
|
999
|
-
},
|
|
1000
|
-
{
|
|
1001
|
-
"kind": "field",
|
|
1002
|
-
"name": "role",
|
|
1003
|
-
"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.",
|
|
1004
|
-
"default": "button",
|
|
1005
|
-
"attribute": "role",
|
|
1006
|
-
"reflects": true,
|
|
1007
|
-
"inheritedFrom": {
|
|
1008
|
-
"name": "Buttonsimple",
|
|
1009
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
1010
|
-
}
|
|
1011
|
-
},
|
|
1012
|
-
{
|
|
1013
|
-
"kind": "field",
|
|
1014
|
-
"name": "ariaStateKey",
|
|
1015
|
-
"type": {
|
|
1016
|
-
"text": "string | undefined"
|
|
1017
|
-
},
|
|
1018
|
-
"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`",
|
|
1019
|
-
"default": "'aria-pressed' (when)",
|
|
1020
|
-
"attribute": "ariaStateKey",
|
|
1021
|
-
"reflects": true,
|
|
1022
|
-
"inheritedFrom": {
|
|
1023
|
-
"name": "Buttonsimple",
|
|
1024
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
1025
|
-
}
|
|
1026
|
-
},
|
|
1027
|
-
{
|
|
1028
|
-
"kind": "field",
|
|
1029
|
-
"name": "type",
|
|
1030
|
-
"type": {
|
|
1031
|
-
"text": "ButtonType"
|
|
1032
|
-
},
|
|
1033
|
-
"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.",
|
|
1034
|
-
"default": "button",
|
|
1035
|
-
"attribute": "type",
|
|
1036
|
-
"reflects": true,
|
|
1037
|
-
"inheritedFrom": {
|
|
1038
|
-
"name": "Buttonsimple",
|
|
1039
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
1040
|
-
}
|
|
1041
|
-
},
|
|
1042
|
-
{
|
|
1043
|
-
"kind": "method",
|
|
1044
|
-
"name": "executeAction",
|
|
1045
|
-
"privacy": "protected",
|
|
1046
|
-
"inheritedFrom": {
|
|
1047
|
-
"name": "Buttonsimple",
|
|
1048
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
1049
|
-
}
|
|
1043
|
+
"kind": "method",
|
|
1044
|
+
"name": "executeAction",
|
|
1045
|
+
"privacy": "protected",
|
|
1046
|
+
"inheritedFrom": {
|
|
1047
|
+
"name": "Buttonsimple",
|
|
1048
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
1049
|
+
}
|
|
1050
1050
|
},
|
|
1051
1051
|
{
|
|
1052
1052
|
"kind": "method",
|
|
@@ -24832,142 +24832,24 @@
|
|
|
24832
24832
|
},
|
|
24833
24833
|
{
|
|
24834
24834
|
"kind": "javascript-module",
|
|
24835
|
-
"path": "components/
|
|
24835
|
+
"path": "components/toggle/toggle.component.js",
|
|
24836
24836
|
"declarations": [
|
|
24837
24837
|
{
|
|
24838
24838
|
"kind": "class",
|
|
24839
|
-
"description": "
|
|
24840
|
-
"name": "
|
|
24839
|
+
"description": "Toggle Component is an interactive control used to switch between two mutually exclusive options,\nsuch as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\nwhere users need to enable or disable a feature.\nIt contains an optional label and an optional helper text.\n\nTo create a group of toggles, use the FormFieldGroup component.\n\nNote: It internally renders a checkbox styled as a toggle switch.",
|
|
24840
|
+
"name": "Toggle",
|
|
24841
24841
|
"cssProperties": [
|
|
24842
24842
|
{
|
|
24843
|
-
"description": "
|
|
24844
|
-
"name": "--mdc-
|
|
24843
|
+
"description": "Width of the toggle",
|
|
24844
|
+
"name": "--mdc-toggle-width"
|
|
24845
24845
|
},
|
|
24846
24846
|
{
|
|
24847
|
-
"description": "
|
|
24848
|
-
"name": "--mdc-
|
|
24847
|
+
"description": "Height of the toggle",
|
|
24848
|
+
"name": "--mdc-toggle-height"
|
|
24849
24849
|
},
|
|
24850
24850
|
{
|
|
24851
|
-
"description": "
|
|
24852
|
-
"name": "--mdc-
|
|
24853
|
-
},
|
|
24854
|
-
{
|
|
24855
|
-
"description": "Option to override the default letter-spacing, default: `-0.25px` (this is to match the old CiscoSans)",
|
|
24856
|
-
"name": "--mdc-themeprovider-letter-spacing-adjustment"
|
|
24857
|
-
},
|
|
24858
|
-
{
|
|
24859
|
-
"description": "Option to override the font feature settings, default: `\"ss02\" on`",
|
|
24860
|
-
"name": "--mdc-themeprovider-font-feature-settings"
|
|
24861
|
-
},
|
|
24862
|
-
{
|
|
24863
|
-
"description": "Option to override the color of the scrollbar track.",
|
|
24864
|
-
"name": "--mdc-themeprovider-scrollbar-track-color"
|
|
24865
|
-
},
|
|
24866
|
-
{
|
|
24867
|
-
"description": "Option to override the color of the scrollbar thumb.",
|
|
24868
|
-
"name": "--mdc-themeprovider-scrollbar-thumb-color"
|
|
24869
|
-
},
|
|
24870
|
-
{
|
|
24871
|
-
"description": "Option to override the color of the scrollbar thumb on hover. Applicable only on webkit browsers.",
|
|
24872
|
-
"name": "--mdc-themeprovider-scrollbar-thumb-hover-color"
|
|
24873
|
-
},
|
|
24874
|
-
{
|
|
24875
|
-
"description": "Option to override the color of the scrollbar thumb on press. Applicable only on webkit browsers.",
|
|
24876
|
-
"name": "--mdc-themeprovider-scrollbar-thumb-active-color"
|
|
24877
|
-
}
|
|
24878
|
-
],
|
|
24879
|
-
"slots": [
|
|
24880
|
-
{
|
|
24881
|
-
"description": "children",
|
|
24882
|
-
"name": ""
|
|
24883
|
-
}
|
|
24884
|
-
],
|
|
24885
|
-
"members": [
|
|
24886
|
-
{
|
|
24887
|
-
"kind": "field",
|
|
24888
|
-
"name": "Context",
|
|
24889
|
-
"privacy": "public",
|
|
24890
|
-
"static": true,
|
|
24891
|
-
"description": "Context object of the ThemeProvider, to be consumed by child components",
|
|
24892
|
-
"readonly": true
|
|
24893
|
-
},
|
|
24894
|
-
{
|
|
24895
|
-
"kind": "field",
|
|
24896
|
-
"name": "themeclass",
|
|
24897
|
-
"type": {
|
|
24898
|
-
"text": "string"
|
|
24899
|
-
},
|
|
24900
|
-
"description": "Current theme class\n\nHas to be fully qualified, such that\nthe theme class matches the class of the respective\ntheme stylesheet\n\nDefault: 'mds-theme-stable-darkWebex'",
|
|
24901
|
-
"attribute": "themeclass"
|
|
24902
|
-
},
|
|
24903
|
-
{
|
|
24904
|
-
"kind": "method",
|
|
24905
|
-
"name": "updateContext",
|
|
24906
|
-
"privacy": "protected",
|
|
24907
|
-
"return": {
|
|
24908
|
-
"type": {
|
|
24909
|
-
"text": "void"
|
|
24910
|
-
}
|
|
24911
|
-
},
|
|
24912
|
-
"description": "Update all observing components of this\nprovider to update the themeclass\n\nIs called on every re-render, see Provider class"
|
|
24913
|
-
},
|
|
24914
|
-
{
|
|
24915
|
-
"kind": "method",
|
|
24916
|
-
"name": "setThemeInClassList",
|
|
24917
|
-
"privacy": "private",
|
|
24918
|
-
"description": "Function to update the active theme classnames to update the theme tokens\nas CSS variables on the web component."
|
|
24919
|
-
}
|
|
24920
|
-
],
|
|
24921
|
-
"attributes": [
|
|
24922
|
-
{
|
|
24923
|
-
"name": "themeclass",
|
|
24924
|
-
"type": {
|
|
24925
|
-
"text": "string"
|
|
24926
|
-
},
|
|
24927
|
-
"description": "Current theme class\n\nHas to be fully qualified, such that\nthe theme class matches the class of the respective\ntheme stylesheet\n\nDefault: 'mds-theme-stable-darkWebex'",
|
|
24928
|
-
"fieldName": "themeclass"
|
|
24929
|
-
}
|
|
24930
|
-
],
|
|
24931
|
-
"superclass": {
|
|
24932
|
-
"name": "Provider",
|
|
24933
|
-
"module": "/src/models"
|
|
24934
|
-
},
|
|
24935
|
-
"tagName": "mdc-themeprovider",
|
|
24936
|
-
"jsDoc": "/**\n * ThemeProvider component, which sets the passed in themeclass as class.\n * If the themeclass switches, the existing themeclass will be removed as a class\n * and the new themeclass will be added.\n *\n * CSS variables defined in the themeclass will be used for the styling of child dom nodes.\n *\n * Available Momentum theme classes:\n *\n * `mds-theme-stable-darkWebex`, `mds-theme-stable-lightWebex`\n *\n * `mds-theme-stable-darkBronzeWebex`, `mds-theme-stable-lightBronzeWebex`\n *\n * `mds-theme-stable-darkIndigoWebex`, `mds-theme-stable-lightIndigoWebex`\n *\n * `mds-theme-stable-darkJadeWebex`, `mds-theme-stable-lightJadeWebex`\n *\n * `mds-theme-stable-darkLavenderWebex`, `mds-theme-stable-lightLavenderWebex`\n *\n * `mds-theme-stable-darkRoseWebex`, `mds-theme-stable-lightRoseWebex`\n *\n * Themeclass context can be be consumed from Lit child components\n * (see providerUtils.consume for how to consume)\n *\n * ThemeProvider also includes basic font defaults for text.\n *\n * @tagname mdc-themeprovider\n *\n * @slot - children\n *\n * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,\n * default: color-theme-text-primary-normal\n * @cssproperty --mdc-themeprovider-font-family - Option to override the font family,\n * default: `Momentum` (from momentum-design/fonts)\n * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`\n * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,\n * default: `-0.25px` (this is to match the old CiscoSans)\n * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,\n * default: `\"ss02\" on`\n * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-hover-color - Option to override the color of the\n * scrollbar thumb on hover. Applicable only on webkit browsers.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-active-color - Option to override the color of the\n * scrollbar thumb on press. Applicable only on webkit browsers.\n */",
|
|
24937
|
-
"customElement": true
|
|
24938
|
-
}
|
|
24939
|
-
],
|
|
24940
|
-
"exports": [
|
|
24941
|
-
{
|
|
24942
|
-
"kind": "js",
|
|
24943
|
-
"name": "default",
|
|
24944
|
-
"declaration": {
|
|
24945
|
-
"name": "ThemeProvider",
|
|
24946
|
-
"module": "components/themeprovider/themeprovider.component.js"
|
|
24947
|
-
}
|
|
24948
|
-
}
|
|
24949
|
-
]
|
|
24950
|
-
},
|
|
24951
|
-
{
|
|
24952
|
-
"kind": "javascript-module",
|
|
24953
|
-
"path": "components/toggle/toggle.component.js",
|
|
24954
|
-
"declarations": [
|
|
24955
|
-
{
|
|
24956
|
-
"kind": "class",
|
|
24957
|
-
"description": "Toggle Component is an interactive control used to switch between two mutually exclusive options,\nsuch as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\nwhere users need to enable or disable a feature.\nIt contains an optional label and an optional helper text.\n\nTo create a group of toggles, use the FormFieldGroup component.\n\nNote: It internally renders a checkbox styled as a toggle switch.",
|
|
24958
|
-
"name": "Toggle",
|
|
24959
|
-
"cssProperties": [
|
|
24960
|
-
{
|
|
24961
|
-
"description": "Width of the toggle",
|
|
24962
|
-
"name": "--mdc-toggle-width"
|
|
24963
|
-
},
|
|
24964
|
-
{
|
|
24965
|
-
"description": "Height of the toggle",
|
|
24966
|
-
"name": "--mdc-toggle-height"
|
|
24967
|
-
},
|
|
24968
|
-
{
|
|
24969
|
-
"description": "Width of the toggle when it's size is compact",
|
|
24970
|
-
"name": "--mdc-toggle-width-compact"
|
|
24851
|
+
"description": "Width of the toggle when it's size is compact",
|
|
24852
|
+
"name": "--mdc-toggle-width-compact"
|
|
24971
24853
|
},
|
|
24972
24854
|
{
|
|
24973
24855
|
"description": "Height of the toggle when it's size is compact",
|
|
@@ -27171,103 +27053,355 @@
|
|
|
27171
27053
|
}
|
|
27172
27054
|
},
|
|
27173
27055
|
{
|
|
27174
|
-
"name": "z-index",
|
|
27056
|
+
"name": "z-index",
|
|
27057
|
+
"type": {
|
|
27058
|
+
"text": "number"
|
|
27059
|
+
},
|
|
27060
|
+
"description": "The z-index of the popover.",
|
|
27061
|
+
"default": "1000",
|
|
27062
|
+
"fieldName": "zIndex",
|
|
27063
|
+
"inheritedFrom": {
|
|
27064
|
+
"name": "Popover",
|
|
27065
|
+
"module": "src/components/popover/popover.component.ts"
|
|
27066
|
+
}
|
|
27067
|
+
},
|
|
27068
|
+
{
|
|
27069
|
+
"name": "append-to",
|
|
27070
|
+
"type": {
|
|
27071
|
+
"text": "string"
|
|
27072
|
+
},
|
|
27073
|
+
"default": "''",
|
|
27074
|
+
"description": "Element ID that the popover append to.",
|
|
27075
|
+
"fieldName": "appendTo",
|
|
27076
|
+
"inheritedFrom": {
|
|
27077
|
+
"name": "Popover",
|
|
27078
|
+
"module": "src/components/popover/popover.component.ts"
|
|
27079
|
+
}
|
|
27080
|
+
},
|
|
27081
|
+
{
|
|
27082
|
+
"name": "close-button-aria-label",
|
|
27083
|
+
"type": {
|
|
27084
|
+
"text": "string | null"
|
|
27085
|
+
},
|
|
27086
|
+
"default": "null",
|
|
27087
|
+
"description": "aria-label attribute to be set for close button accessibility.",
|
|
27088
|
+
"fieldName": "closeButtonAriaLabel",
|
|
27089
|
+
"inheritedFrom": {
|
|
27090
|
+
"name": "Popover",
|
|
27091
|
+
"module": "src/components/popover/popover.component.ts"
|
|
27092
|
+
}
|
|
27093
|
+
},
|
|
27094
|
+
{
|
|
27095
|
+
"name": "role",
|
|
27096
|
+
"type": {
|
|
27097
|
+
"text": "HTMLElement['role']"
|
|
27098
|
+
},
|
|
27099
|
+
"description": "Role of the popover",
|
|
27100
|
+
"default": "dialog",
|
|
27101
|
+
"fieldName": "role",
|
|
27102
|
+
"inheritedFrom": {
|
|
27103
|
+
"name": "Popover",
|
|
27104
|
+
"module": "src/components/popover/popover.component.ts"
|
|
27105
|
+
}
|
|
27106
|
+
},
|
|
27107
|
+
{
|
|
27108
|
+
"name": "aria-labelledby",
|
|
27109
|
+
"type": {
|
|
27110
|
+
"text": "string | null"
|
|
27111
|
+
},
|
|
27112
|
+
"default": "null",
|
|
27113
|
+
"description": "aria-labelledby for an interactive popover only, defaults to the trigger component id.\nUsed in nested cases where the triggerComponent isn't the actual button.",
|
|
27114
|
+
"fieldName": "ariaLabelledby",
|
|
27115
|
+
"inheritedFrom": {
|
|
27116
|
+
"name": "Popover",
|
|
27117
|
+
"module": "src/components/popover/popover.component.ts"
|
|
27118
|
+
}
|
|
27119
|
+
},
|
|
27120
|
+
{
|
|
27121
|
+
"name": "aria-describedby",
|
|
27122
|
+
"type": {
|
|
27123
|
+
"text": "string | null"
|
|
27124
|
+
},
|
|
27125
|
+
"default": "null",
|
|
27126
|
+
"description": "aria-describedby of the popover.",
|
|
27127
|
+
"fieldName": "ariaDescribedby",
|
|
27128
|
+
"inheritedFrom": {
|
|
27129
|
+
"name": "Popover",
|
|
27130
|
+
"module": "src/components/popover/popover.component.ts"
|
|
27131
|
+
}
|
|
27132
|
+
},
|
|
27133
|
+
{
|
|
27134
|
+
"name": "disable-aria-expanded",
|
|
27135
|
+
"type": {
|
|
27136
|
+
"text": "boolean"
|
|
27137
|
+
},
|
|
27138
|
+
"description": "Disable aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
|
|
27139
|
+
"default": "false",
|
|
27140
|
+
"fieldName": "disableAriaExpanded",
|
|
27141
|
+
"inheritedFrom": {
|
|
27142
|
+
"name": "Popover",
|
|
27143
|
+
"module": "src/components/popover/popover.component.ts"
|
|
27144
|
+
}
|
|
27145
|
+
}
|
|
27146
|
+
],
|
|
27147
|
+
"superclass": {
|
|
27148
|
+
"name": "Popover",
|
|
27149
|
+
"module": "/src/components/popover/popover.component"
|
|
27150
|
+
},
|
|
27151
|
+
"tagName": "mdc-toggletip",
|
|
27152
|
+
"jsDoc": "/**\n * A toggletip is triggered by clicking a trigger element.\n *\n * It can contain interactive content and can be closed by\n * clicking outside the toggletip or pressing the escape key.\n *\n * It can have optional close button to close the toggletip.\n *\n * Toggletip component uses `mdc-screenreaderannouncer` internally to\n * announce the toggletip text content with screen readers when the toggletip is shown.\n *\n * `screenreader-announcer-identity` attribute can be used to provide ID of an element\n * in DOM to which announcement elements are added. If not set, a visually hidden\n * div element is created in DOM to which announcement elements are added.\n *\n * Please refer to the `mdc-screenreaderannouncer` component for more details.\n *\n * @dependency mdc-screenreaderannouncer\n * @dependency mdc-button\n *\n * @tagname mdc-toggletip\n *\n * @event shown - (React: onShown) This event is dispatched when the toggletip is shown\n * @event hidden - (React: onHidden) This event is dispatched when the toggletip is hidden\n * @event created - (React: onCreated) This event is dispatched when the toggletip is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the toggletip\n * is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-toggletip-max-width - The maximum width of the toggletip.\n * @cssproperty --mdc-toggletip-text-color - The text color of the toggletip.\n * @cssproperty --mdc-toggletip-text-color-contrast - The text color of the toggletip\n * when the color is contrast.\n *\n * @slot - Default slot for the toggletip content\n */",
|
|
27153
|
+
"customElement": true
|
|
27154
|
+
}
|
|
27155
|
+
],
|
|
27156
|
+
"exports": [
|
|
27157
|
+
{
|
|
27158
|
+
"kind": "js",
|
|
27159
|
+
"name": "default",
|
|
27160
|
+
"declaration": {
|
|
27161
|
+
"name": "ToggleTip",
|
|
27162
|
+
"module": "components/toggletip/toggletip.component.js"
|
|
27163
|
+
}
|
|
27164
|
+
}
|
|
27165
|
+
]
|
|
27166
|
+
},
|
|
27167
|
+
{
|
|
27168
|
+
"kind": "javascript-module",
|
|
27169
|
+
"path": "components/themeprovider/themeprovider.component.js",
|
|
27170
|
+
"declarations": [
|
|
27171
|
+
{
|
|
27172
|
+
"kind": "class",
|
|
27173
|
+
"description": "ThemeProvider component, which sets the passed in themeclass as class.\nIf the themeclass switches, the existing themeclass will be removed as a class\nand the new themeclass will be added.\n\nCSS variables defined in the themeclass will be used for the styling of child dom nodes.\n\nAvailable Momentum theme classes:\n\n`mds-theme-stable-darkWebex`, `mds-theme-stable-lightWebex`\n\n`mds-theme-stable-darkBronzeWebex`, `mds-theme-stable-lightBronzeWebex`\n\n`mds-theme-stable-darkIndigoWebex`, `mds-theme-stable-lightIndigoWebex`\n\n`mds-theme-stable-darkJadeWebex`, `mds-theme-stable-lightJadeWebex`\n\n`mds-theme-stable-darkLavenderWebex`, `mds-theme-stable-lightLavenderWebex`\n\n`mds-theme-stable-darkRoseWebex`, `mds-theme-stable-lightRoseWebex`\n\nThemeclass context can be be consumed from Lit child components\n(see providerUtils.consume for how to consume)\n\nThemeProvider also includes basic font defaults for text.",
|
|
27174
|
+
"name": "ThemeProvider",
|
|
27175
|
+
"cssProperties": [
|
|
27176
|
+
{
|
|
27177
|
+
"description": "Option to override the default color, default: color-theme-text-primary-normal",
|
|
27178
|
+
"name": "--mdc-themeprovider-color-default"
|
|
27179
|
+
},
|
|
27180
|
+
{
|
|
27181
|
+
"description": "Option to override the font family, default: `Momentum` (from momentum-design/fonts)",
|
|
27182
|
+
"name": "--mdc-themeprovider-font-family"
|
|
27183
|
+
},
|
|
27184
|
+
{
|
|
27185
|
+
"description": "Option to override the font weight, default: `400`",
|
|
27186
|
+
"name": "--mdc-themeprovider-font-weight"
|
|
27187
|
+
},
|
|
27188
|
+
{
|
|
27189
|
+
"description": "Option to override the default letter-spacing, default: `-0.25px` (this is to match the old CiscoSans)",
|
|
27190
|
+
"name": "--mdc-themeprovider-letter-spacing-adjustment"
|
|
27191
|
+
},
|
|
27192
|
+
{
|
|
27193
|
+
"description": "Option to override the font feature settings, default: `\"ss02\" on`",
|
|
27194
|
+
"name": "--mdc-themeprovider-font-feature-settings"
|
|
27195
|
+
},
|
|
27196
|
+
{
|
|
27197
|
+
"description": "Option to override the color of the scrollbar track.",
|
|
27198
|
+
"name": "--mdc-themeprovider-scrollbar-track-color"
|
|
27199
|
+
},
|
|
27200
|
+
{
|
|
27201
|
+
"description": "Option to override the color of the scrollbar thumb.",
|
|
27202
|
+
"name": "--mdc-themeprovider-scrollbar-thumb-color"
|
|
27203
|
+
},
|
|
27204
|
+
{
|
|
27205
|
+
"description": "Option to override the color of the scrollbar thumb on hover. Applicable only on webkit browsers.",
|
|
27206
|
+
"name": "--mdc-themeprovider-scrollbar-thumb-hover-color"
|
|
27207
|
+
},
|
|
27208
|
+
{
|
|
27209
|
+
"description": "Option to override the color of the scrollbar thumb on press. Applicable only on webkit browsers.",
|
|
27210
|
+
"name": "--mdc-themeprovider-scrollbar-thumb-active-color"
|
|
27211
|
+
}
|
|
27212
|
+
],
|
|
27213
|
+
"slots": [
|
|
27214
|
+
{
|
|
27215
|
+
"description": "children",
|
|
27216
|
+
"name": ""
|
|
27217
|
+
}
|
|
27218
|
+
],
|
|
27219
|
+
"members": [
|
|
27220
|
+
{
|
|
27221
|
+
"kind": "field",
|
|
27222
|
+
"name": "Context",
|
|
27223
|
+
"privacy": "public",
|
|
27224
|
+
"static": true,
|
|
27225
|
+
"description": "Context object of the ThemeProvider, to be consumed by child components",
|
|
27226
|
+
"readonly": true
|
|
27227
|
+
},
|
|
27228
|
+
{
|
|
27229
|
+
"kind": "field",
|
|
27230
|
+
"name": "themeclass",
|
|
27231
|
+
"type": {
|
|
27232
|
+
"text": "string"
|
|
27233
|
+
},
|
|
27234
|
+
"description": "Current theme class\n\nHas to be fully qualified, such that\nthe theme class matches the class of the respective\ntheme stylesheet\n\nDefault: 'mds-theme-stable-darkWebex'",
|
|
27235
|
+
"attribute": "themeclass"
|
|
27236
|
+
},
|
|
27237
|
+
{
|
|
27238
|
+
"kind": "method",
|
|
27239
|
+
"name": "updateContext",
|
|
27240
|
+
"privacy": "protected",
|
|
27241
|
+
"return": {
|
|
27242
|
+
"type": {
|
|
27243
|
+
"text": "void"
|
|
27244
|
+
}
|
|
27245
|
+
},
|
|
27246
|
+
"description": "Update all observing components of this\nprovider to update the themeclass\n\nIs called on every re-render, see Provider class"
|
|
27247
|
+
},
|
|
27248
|
+
{
|
|
27249
|
+
"kind": "method",
|
|
27250
|
+
"name": "setThemeInClassList",
|
|
27251
|
+
"privacy": "private",
|
|
27252
|
+
"description": "Function to update the active theme classnames to update the theme tokens\nas CSS variables on the web component."
|
|
27253
|
+
}
|
|
27254
|
+
],
|
|
27255
|
+
"attributes": [
|
|
27256
|
+
{
|
|
27257
|
+
"name": "themeclass",
|
|
27258
|
+
"type": {
|
|
27259
|
+
"text": "string"
|
|
27260
|
+
},
|
|
27261
|
+
"description": "Current theme class\n\nHas to be fully qualified, such that\nthe theme class matches the class of the respective\ntheme stylesheet\n\nDefault: 'mds-theme-stable-darkWebex'",
|
|
27262
|
+
"fieldName": "themeclass"
|
|
27263
|
+
}
|
|
27264
|
+
],
|
|
27265
|
+
"superclass": {
|
|
27266
|
+
"name": "Provider",
|
|
27267
|
+
"module": "/src/models"
|
|
27268
|
+
},
|
|
27269
|
+
"tagName": "mdc-themeprovider",
|
|
27270
|
+
"jsDoc": "/**\n * ThemeProvider component, which sets the passed in themeclass as class.\n * If the themeclass switches, the existing themeclass will be removed as a class\n * and the new themeclass will be added.\n *\n * CSS variables defined in the themeclass will be used for the styling of child dom nodes.\n *\n * Available Momentum theme classes:\n *\n * `mds-theme-stable-darkWebex`, `mds-theme-stable-lightWebex`\n *\n * `mds-theme-stable-darkBronzeWebex`, `mds-theme-stable-lightBronzeWebex`\n *\n * `mds-theme-stable-darkIndigoWebex`, `mds-theme-stable-lightIndigoWebex`\n *\n * `mds-theme-stable-darkJadeWebex`, `mds-theme-stable-lightJadeWebex`\n *\n * `mds-theme-stable-darkLavenderWebex`, `mds-theme-stable-lightLavenderWebex`\n *\n * `mds-theme-stable-darkRoseWebex`, `mds-theme-stable-lightRoseWebex`\n *\n * Themeclass context can be be consumed from Lit child components\n * (see providerUtils.consume for how to consume)\n *\n * ThemeProvider also includes basic font defaults for text.\n *\n * @tagname mdc-themeprovider\n *\n * @slot - children\n *\n * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,\n * default: color-theme-text-primary-normal\n * @cssproperty --mdc-themeprovider-font-family - Option to override the font family,\n * default: `Momentum` (from momentum-design/fonts)\n * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`\n * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,\n * default: `-0.25px` (this is to match the old CiscoSans)\n * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,\n * default: `\"ss02\" on`\n * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-hover-color - Option to override the color of the\n * scrollbar thumb on hover. Applicable only on webkit browsers.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-active-color - Option to override the color of the\n * scrollbar thumb on press. Applicable only on webkit browsers.\n */",
|
|
27271
|
+
"customElement": true
|
|
27272
|
+
}
|
|
27273
|
+
],
|
|
27274
|
+
"exports": [
|
|
27275
|
+
{
|
|
27276
|
+
"kind": "js",
|
|
27277
|
+
"name": "default",
|
|
27278
|
+
"declaration": {
|
|
27279
|
+
"name": "ThemeProvider",
|
|
27280
|
+
"module": "components/themeprovider/themeprovider.component.js"
|
|
27281
|
+
}
|
|
27282
|
+
}
|
|
27283
|
+
]
|
|
27284
|
+
},
|
|
27285
|
+
{
|
|
27286
|
+
"kind": "javascript-module",
|
|
27287
|
+
"path": "components/virtualizedlist/virtualizedlist.component.js",
|
|
27288
|
+
"declarations": [
|
|
27289
|
+
{
|
|
27290
|
+
"kind": "class",
|
|
27291
|
+
"description": "`mdc-virtualizedlist` component for creating custom virtualized lists.\nIMPORTANT: This component does not create it's own list/list items.\nUse the setlistdata callback prop to update client state in order to\nPass list/listitems as a child of this component, which this will virtuailze\nThis implementation handles dynamic lists as well as fixed sized lists.\nPlease refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.",
|
|
27292
|
+
"name": "VirtualizedList",
|
|
27293
|
+
"slots": [
|
|
27294
|
+
{
|
|
27295
|
+
"description": "Client side List with nested list items.",
|
|
27296
|
+
"name": ""
|
|
27297
|
+
}
|
|
27298
|
+
],
|
|
27299
|
+
"members": [
|
|
27300
|
+
{
|
|
27301
|
+
"kind": "field",
|
|
27302
|
+
"name": "onscroll",
|
|
27303
|
+
"type": {
|
|
27304
|
+
"text": "((this: GlobalEventHandlers, ev: Event) => void) | null"
|
|
27305
|
+
},
|
|
27306
|
+
"description": "Callback that gets called when user scrolls inside of list. This gives access to the scroll container element\nas well via the event. Particularly useful for\nhandling logic related when the user scrolls to the top or bottom of a list.",
|
|
27307
|
+
"default": "null",
|
|
27308
|
+
"attribute": "onscroll"
|
|
27309
|
+
},
|
|
27310
|
+
{
|
|
27311
|
+
"kind": "field",
|
|
27312
|
+
"name": "virtualizerProps",
|
|
27313
|
+
"type": {
|
|
27314
|
+
"text": "VirtualizerProps"
|
|
27315
|
+
},
|
|
27316
|
+
"description": "Object that sets and updates the virtualizer with any relevant props.\nThere are two required object props in order to get virtualization to work properly.\ncount - The length of your list that you are virtualizing.\nAs your list grows/shrinks, this component must be updated with the appropriate value\n(Same with any other updated prop).\nestimateSize - A function that returns the estimated size of your items.\nIf your list is fixed, this will just be the size of your items.\nIf your list is dynamic, try to return approximate the size of each item.\n\nA full list of possible props can be in\n[Tanstack Virtualizer API Docs](https://tanstack.com/virtual/latest/docs/api/virtualizer)",
|
|
27317
|
+
"attribute": "virtualizerprops"
|
|
27318
|
+
},
|
|
27319
|
+
{
|
|
27320
|
+
"kind": "field",
|
|
27321
|
+
"name": "setlistdata",
|
|
27322
|
+
"type": {
|
|
27323
|
+
"text": "(({ virtualItems, measureElement, listStyle }: SetListDataProps) => void) | null"
|
|
27324
|
+
},
|
|
27325
|
+
"description": "Callback that gets envoked when updates to the virtualizer interally occur.\nThis must be implemented in such a way that this function will trigger update to parent.\n\nvirtualItems - Array that will be what the client displays on screen. Use this to render\na List of your choosing with these items nested inside as your ListItems.\nmeasureElement - Ref to pass to each ListItem rendered client side.\nEach ListItem should also be be passed key and a data-index (which can be found on the virtualItem).\nlistStyle - This should be passed as the style attribute to your List.",
|
|
27326
|
+
"default": "null",
|
|
27327
|
+
"attribute": "setlistdata"
|
|
27328
|
+
},
|
|
27329
|
+
{
|
|
27330
|
+
"kind": "field",
|
|
27331
|
+
"name": "scrollElementRef",
|
|
27175
27332
|
"type": {
|
|
27176
|
-
"text": "
|
|
27333
|
+
"text": "Ref<HTMLDivElement>"
|
|
27177
27334
|
},
|
|
27178
|
-
"
|
|
27179
|
-
"default": "1000",
|
|
27180
|
-
"fieldName": "zIndex",
|
|
27181
|
-
"inheritedFrom": {
|
|
27182
|
-
"name": "Popover",
|
|
27183
|
-
"module": "src/components/popover/popover.component.ts"
|
|
27184
|
-
}
|
|
27335
|
+
"privacy": "public"
|
|
27185
27336
|
},
|
|
27186
27337
|
{
|
|
27187
|
-
"
|
|
27338
|
+
"kind": "field",
|
|
27339
|
+
"name": "virtualizer",
|
|
27188
27340
|
"type": {
|
|
27189
|
-
"text": "
|
|
27341
|
+
"text": "Virtualizer<Element, Element> | null"
|
|
27190
27342
|
},
|
|
27191
|
-
"
|
|
27192
|
-
"
|
|
27193
|
-
"fieldName": "appendTo",
|
|
27194
|
-
"inheritedFrom": {
|
|
27195
|
-
"name": "Popover",
|
|
27196
|
-
"module": "src/components/popover/popover.component.ts"
|
|
27197
|
-
}
|
|
27343
|
+
"privacy": "public",
|
|
27344
|
+
"default": "null"
|
|
27198
27345
|
},
|
|
27199
27346
|
{
|
|
27200
|
-
"
|
|
27347
|
+
"kind": "field",
|
|
27348
|
+
"name": "virtualItems",
|
|
27201
27349
|
"type": {
|
|
27202
|
-
"text": "
|
|
27350
|
+
"text": "Array<VirtualItem>"
|
|
27203
27351
|
},
|
|
27204
|
-
"
|
|
27205
|
-
"
|
|
27206
|
-
"fieldName": "closeButtonAriaLabel",
|
|
27207
|
-
"inheritedFrom": {
|
|
27208
|
-
"name": "Popover",
|
|
27209
|
-
"module": "src/components/popover/popover.component.ts"
|
|
27210
|
-
}
|
|
27352
|
+
"privacy": "public",
|
|
27353
|
+
"default": "[]"
|
|
27211
27354
|
},
|
|
27212
27355
|
{
|
|
27213
|
-
"
|
|
27356
|
+
"kind": "field",
|
|
27357
|
+
"name": "virtualizerController",
|
|
27214
27358
|
"type": {
|
|
27215
|
-
"text": "
|
|
27359
|
+
"text": "null"
|
|
27216
27360
|
},
|
|
27217
|
-
"
|
|
27218
|
-
|
|
27219
|
-
|
|
27220
|
-
|
|
27221
|
-
"name": "Popover",
|
|
27222
|
-
"module": "src/components/popover/popover.component.ts"
|
|
27223
|
-
}
|
|
27224
|
-
},
|
|
27361
|
+
"default": "null"
|
|
27362
|
+
}
|
|
27363
|
+
],
|
|
27364
|
+
"events": [
|
|
27225
27365
|
{
|
|
27226
|
-
"
|
|
27366
|
+
"description": "(React: onScroll) Event that gets called when user scrolls inside of list.",
|
|
27367
|
+
"name": "onscroll",
|
|
27368
|
+
"reactName": "onScroll"
|
|
27369
|
+
}
|
|
27370
|
+
],
|
|
27371
|
+
"attributes": [
|
|
27372
|
+
{
|
|
27373
|
+
"name": "onscroll",
|
|
27227
27374
|
"type": {
|
|
27228
|
-
"text": "
|
|
27375
|
+
"text": "((this: GlobalEventHandlers, ev: Event) => void) | null"
|
|
27229
27376
|
},
|
|
27377
|
+
"description": "Callback that gets called when user scrolls inside of list. This gives access to the scroll container element\nas well via the event. Particularly useful for\nhandling logic related when the user scrolls to the top or bottom of a list.",
|
|
27230
27378
|
"default": "null",
|
|
27231
|
-
"
|
|
27232
|
-
"fieldName": "ariaLabelledby",
|
|
27233
|
-
"inheritedFrom": {
|
|
27234
|
-
"name": "Popover",
|
|
27235
|
-
"module": "src/components/popover/popover.component.ts"
|
|
27236
|
-
}
|
|
27379
|
+
"fieldName": "onscroll"
|
|
27237
27380
|
},
|
|
27238
27381
|
{
|
|
27239
|
-
"name": "
|
|
27382
|
+
"name": "virtualizerprops",
|
|
27240
27383
|
"type": {
|
|
27241
|
-
"text": "
|
|
27384
|
+
"text": "VirtualizerProps"
|
|
27242
27385
|
},
|
|
27243
|
-
"
|
|
27244
|
-
"
|
|
27245
|
-
"fieldName": "ariaDescribedby",
|
|
27246
|
-
"inheritedFrom": {
|
|
27247
|
-
"name": "Popover",
|
|
27248
|
-
"module": "src/components/popover/popover.component.ts"
|
|
27249
|
-
}
|
|
27386
|
+
"description": "Object that sets and updates the virtualizer with any relevant props.\nThere are two required object props in order to get virtualization to work properly.\ncount - The length of your list that you are virtualizing.\nAs your list grows/shrinks, this component must be updated with the appropriate value\n(Same with any other updated prop).\nestimateSize - A function that returns the estimated size of your items.\nIf your list is fixed, this will just be the size of your items.\nIf your list is dynamic, try to return approximate the size of each item.\n\nA full list of possible props can be in\n[Tanstack Virtualizer API Docs](https://tanstack.com/virtual/latest/docs/api/virtualizer)",
|
|
27387
|
+
"fieldName": "virtualizerProps"
|
|
27250
27388
|
},
|
|
27251
27389
|
{
|
|
27252
|
-
"name": "
|
|
27390
|
+
"name": "setlistdata",
|
|
27253
27391
|
"type": {
|
|
27254
|
-
"text": "
|
|
27392
|
+
"text": "(({ virtualItems, measureElement, listStyle }: SetListDataProps) => void) | null"
|
|
27255
27393
|
},
|
|
27256
|
-
"description": "
|
|
27257
|
-
"default": "
|
|
27258
|
-
"fieldName": "
|
|
27259
|
-
"inheritedFrom": {
|
|
27260
|
-
"name": "Popover",
|
|
27261
|
-
"module": "src/components/popover/popover.component.ts"
|
|
27262
|
-
}
|
|
27394
|
+
"description": "Callback that gets envoked when updates to the virtualizer interally occur.\nThis must be implemented in such a way that this function will trigger update to parent.\n\nvirtualItems - Array that will be what the client displays on screen. Use this to render\na List of your choosing with these items nested inside as your ListItems.\nmeasureElement - Ref to pass to each ListItem rendered client side.\nEach ListItem should also be be passed key and a data-index (which can be found on the virtualItem).\nlistStyle - This should be passed as the style attribute to your List.",
|
|
27395
|
+
"default": "null",
|
|
27396
|
+
"fieldName": "setlistdata"
|
|
27263
27397
|
}
|
|
27264
27398
|
],
|
|
27265
27399
|
"superclass": {
|
|
27266
|
-
"name": "
|
|
27267
|
-
"module": "/src/
|
|
27400
|
+
"name": "Component",
|
|
27401
|
+
"module": "/src/models"
|
|
27268
27402
|
},
|
|
27269
|
-
"tagName": "mdc-
|
|
27270
|
-
"jsDoc": "/**\n *
|
|
27403
|
+
"tagName": "mdc-virtualizedlist",
|
|
27404
|
+
"jsDoc": "/**\n * `mdc-virtualizedlist` component for creating custom virtualized lists.\n * IMPORTANT: This component does not create it's own list/list items.\n * Use the setlistdata callback prop to update client state in order to\n * Pass list/listitems as a child of this component, which this will virtuailze\n * This implementation handles dynamic lists as well as fixed sized lists.\n * Please refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.\n *\n * @tagname mdc-virtualizedlist\n *\n * @event onscroll - (React: onScroll) Event that gets called when user scrolls inside of list.\n *\n * @slot - Client side List with nested list items.\n */",
|
|
27271
27405
|
"customElement": true
|
|
27272
27406
|
}
|
|
27273
27407
|
],
|
|
@@ -27276,8 +27410,8 @@
|
|
|
27276
27410
|
"kind": "js",
|
|
27277
27411
|
"name": "default",
|
|
27278
27412
|
"declaration": {
|
|
27279
|
-
"name": "
|
|
27280
|
-
"module": "components/
|
|
27413
|
+
"name": "VirtualizedList",
|
|
27414
|
+
"module": "components/virtualizedlist/virtualizedlist.component.js"
|
|
27281
27415
|
}
|
|
27282
27416
|
}
|
|
27283
27417
|
]
|
|
@@ -29007,140 +29141,6 @@
|
|
|
29007
29141
|
}
|
|
29008
29142
|
]
|
|
29009
29143
|
},
|
|
29010
|
-
{
|
|
29011
|
-
"kind": "javascript-module",
|
|
29012
|
-
"path": "components/virtualizedlist/virtualizedlist.component.js",
|
|
29013
|
-
"declarations": [
|
|
29014
|
-
{
|
|
29015
|
-
"kind": "class",
|
|
29016
|
-
"description": "`mdc-virtualizedlist` component for creating custom virtualized lists.\nIMPORTANT: This component does not create it's own list/list items.\nUse the setlistdata callback prop to update client state in order to\nPass list/listitems as a child of this component, which this will virtuailze\nThis implementation handles dynamic lists as well as fixed sized lists.\nPlease refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.",
|
|
29017
|
-
"name": "VirtualizedList",
|
|
29018
|
-
"slots": [
|
|
29019
|
-
{
|
|
29020
|
-
"description": "Client side List with nested list items.",
|
|
29021
|
-
"name": ""
|
|
29022
|
-
}
|
|
29023
|
-
],
|
|
29024
|
-
"members": [
|
|
29025
|
-
{
|
|
29026
|
-
"kind": "field",
|
|
29027
|
-
"name": "onscroll",
|
|
29028
|
-
"type": {
|
|
29029
|
-
"text": "((this: GlobalEventHandlers, ev: Event) => void) | null"
|
|
29030
|
-
},
|
|
29031
|
-
"description": "Callback that gets called when user scrolls inside of list. This gives access to the scroll container element\nas well via the event. Particularly useful for\nhandling logic related when the user scrolls to the top or bottom of a list.",
|
|
29032
|
-
"default": "null",
|
|
29033
|
-
"attribute": "onscroll"
|
|
29034
|
-
},
|
|
29035
|
-
{
|
|
29036
|
-
"kind": "field",
|
|
29037
|
-
"name": "virtualizerProps",
|
|
29038
|
-
"type": {
|
|
29039
|
-
"text": "VirtualizerProps"
|
|
29040
|
-
},
|
|
29041
|
-
"description": "Object that sets and updates the virtualizer with any relevant props.\nThere are two required object props in order to get virtualization to work properly.\ncount - The length of your list that you are virtualizing.\nAs your list grows/shrinks, this component must be updated with the appropriate value\n(Same with any other updated prop).\nestimateSize - A function that returns the estimated size of your items.\nIf your list is fixed, this will just be the size of your items.\nIf your list is dynamic, try to return approximate the size of each item.\n\nA full list of possible props can be in\n[Tanstack Virtualizer API Docs](https://tanstack.com/virtual/latest/docs/api/virtualizer)",
|
|
29042
|
-
"attribute": "virtualizerprops"
|
|
29043
|
-
},
|
|
29044
|
-
{
|
|
29045
|
-
"kind": "field",
|
|
29046
|
-
"name": "setlistdata",
|
|
29047
|
-
"type": {
|
|
29048
|
-
"text": "(({ virtualItems, measureElement, listStyle }: SetListDataProps) => void) | null"
|
|
29049
|
-
},
|
|
29050
|
-
"description": "Callback that gets envoked when updates to the virtualizer interally occur.\nThis must be implemented in such a way that this function will trigger update to parent.\n\nvirtualItems - Array that will be what the client displays on screen. Use this to render\na List of your choosing with these items nested inside as your ListItems.\nmeasureElement - Ref to pass to each ListItem rendered client side.\nEach ListItem should also be be passed key and a data-index (which can be found on the virtualItem).\nlistStyle - This should be passed as the style attribute to your List.",
|
|
29051
|
-
"default": "null",
|
|
29052
|
-
"attribute": "setlistdata"
|
|
29053
|
-
},
|
|
29054
|
-
{
|
|
29055
|
-
"kind": "field",
|
|
29056
|
-
"name": "scrollElementRef",
|
|
29057
|
-
"type": {
|
|
29058
|
-
"text": "Ref<HTMLDivElement>"
|
|
29059
|
-
},
|
|
29060
|
-
"privacy": "public"
|
|
29061
|
-
},
|
|
29062
|
-
{
|
|
29063
|
-
"kind": "field",
|
|
29064
|
-
"name": "virtualizer",
|
|
29065
|
-
"type": {
|
|
29066
|
-
"text": "Virtualizer<Element, Element> | null"
|
|
29067
|
-
},
|
|
29068
|
-
"privacy": "public",
|
|
29069
|
-
"default": "null"
|
|
29070
|
-
},
|
|
29071
|
-
{
|
|
29072
|
-
"kind": "field",
|
|
29073
|
-
"name": "virtualItems",
|
|
29074
|
-
"type": {
|
|
29075
|
-
"text": "Array<VirtualItem>"
|
|
29076
|
-
},
|
|
29077
|
-
"privacy": "public",
|
|
29078
|
-
"default": "[]"
|
|
29079
|
-
},
|
|
29080
|
-
{
|
|
29081
|
-
"kind": "field",
|
|
29082
|
-
"name": "virtualizerController",
|
|
29083
|
-
"type": {
|
|
29084
|
-
"text": "null"
|
|
29085
|
-
},
|
|
29086
|
-
"default": "null"
|
|
29087
|
-
}
|
|
29088
|
-
],
|
|
29089
|
-
"events": [
|
|
29090
|
-
{
|
|
29091
|
-
"description": "(React: onScroll) Event that gets called when user scrolls inside of list.",
|
|
29092
|
-
"name": "onscroll",
|
|
29093
|
-
"reactName": "onScroll"
|
|
29094
|
-
}
|
|
29095
|
-
],
|
|
29096
|
-
"attributes": [
|
|
29097
|
-
{
|
|
29098
|
-
"name": "onscroll",
|
|
29099
|
-
"type": {
|
|
29100
|
-
"text": "((this: GlobalEventHandlers, ev: Event) => void) | null"
|
|
29101
|
-
},
|
|
29102
|
-
"description": "Callback that gets called when user scrolls inside of list. This gives access to the scroll container element\nas well via the event. Particularly useful for\nhandling logic related when the user scrolls to the top or bottom of a list.",
|
|
29103
|
-
"default": "null",
|
|
29104
|
-
"fieldName": "onscroll"
|
|
29105
|
-
},
|
|
29106
|
-
{
|
|
29107
|
-
"name": "virtualizerprops",
|
|
29108
|
-
"type": {
|
|
29109
|
-
"text": "VirtualizerProps"
|
|
29110
|
-
},
|
|
29111
|
-
"description": "Object that sets and updates the virtualizer with any relevant props.\nThere are two required object props in order to get virtualization to work properly.\ncount - The length of your list that you are virtualizing.\nAs your list grows/shrinks, this component must be updated with the appropriate value\n(Same with any other updated prop).\nestimateSize - A function that returns the estimated size of your items.\nIf your list is fixed, this will just be the size of your items.\nIf your list is dynamic, try to return approximate the size of each item.\n\nA full list of possible props can be in\n[Tanstack Virtualizer API Docs](https://tanstack.com/virtual/latest/docs/api/virtualizer)",
|
|
29112
|
-
"fieldName": "virtualizerProps"
|
|
29113
|
-
},
|
|
29114
|
-
{
|
|
29115
|
-
"name": "setlistdata",
|
|
29116
|
-
"type": {
|
|
29117
|
-
"text": "(({ virtualItems, measureElement, listStyle }: SetListDataProps) => void) | null"
|
|
29118
|
-
},
|
|
29119
|
-
"description": "Callback that gets envoked when updates to the virtualizer interally occur.\nThis must be implemented in such a way that this function will trigger update to parent.\n\nvirtualItems - Array that will be what the client displays on screen. Use this to render\na List of your choosing with these items nested inside as your ListItems.\nmeasureElement - Ref to pass to each ListItem rendered client side.\nEach ListItem should also be be passed key and a data-index (which can be found on the virtualItem).\nlistStyle - This should be passed as the style attribute to your List.",
|
|
29120
|
-
"default": "null",
|
|
29121
|
-
"fieldName": "setlistdata"
|
|
29122
|
-
}
|
|
29123
|
-
],
|
|
29124
|
-
"superclass": {
|
|
29125
|
-
"name": "Component",
|
|
29126
|
-
"module": "/src/models"
|
|
29127
|
-
},
|
|
29128
|
-
"tagName": "mdc-virtualizedlist",
|
|
29129
|
-
"jsDoc": "/**\n * `mdc-virtualizedlist` component for creating custom virtualized lists.\n * IMPORTANT: This component does not create it's own list/list items.\n * Use the setlistdata callback prop to update client state in order to\n * Pass list/listitems as a child of this component, which this will virtuailze\n * This implementation handles dynamic lists as well as fixed sized lists.\n * Please refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.\n *\n * @tagname mdc-virtualizedlist\n *\n * @event onscroll - (React: onScroll) Event that gets called when user scrolls inside of list.\n *\n * @slot - Client side List with nested list items.\n */",
|
|
29130
|
-
"customElement": true
|
|
29131
|
-
}
|
|
29132
|
-
],
|
|
29133
|
-
"exports": [
|
|
29134
|
-
{
|
|
29135
|
-
"kind": "js",
|
|
29136
|
-
"name": "default",
|
|
29137
|
-
"declaration": {
|
|
29138
|
-
"name": "VirtualizedList",
|
|
29139
|
-
"module": "components/virtualizedlist/virtualizedlist.component.js"
|
|
29140
|
-
}
|
|
29141
|
-
}
|
|
29142
|
-
]
|
|
29143
|
-
},
|
|
29144
29144
|
{
|
|
29145
29145
|
"kind": "javascript-module",
|
|
29146
29146
|
"path": "utils/mixins/AvatarComponentMixin.js",
|