@momentum-design/components 0.70.0 → 0.70.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/index.js +10 -6
- package/dist/browser/index.js.map +2 -2
- package/dist/components/button/button.component.js +4 -2
- package/dist/components/buttonlink/buttonlink.component.js +4 -2
- package/dist/components/option/option.component.js +2 -2
- package/dist/custom-elements.json +839 -839
- package/dist/react/index.d.ts +3 -3
- package/dist/react/index.js +3 -3
- package/package.json +1 -1
|
@@ -4,480 +4,175 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "components/
|
|
8
|
-
"declarations": [
|
|
9
|
-
{
|
|
10
|
-
"kind": "class",
|
|
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",
|
|
7
|
+
"path": "components/alertchip/alertchip.component.js",
|
|
69
8
|
"declarations": [
|
|
70
9
|
{
|
|
71
10
|
"kind": "class",
|
|
72
|
-
"description": "
|
|
73
|
-
"name": "
|
|
11
|
+
"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.",
|
|
12
|
+
"name": "AlertChip",
|
|
74
13
|
"cssProperties": [
|
|
75
14
|
{
|
|
76
|
-
"description": "
|
|
77
|
-
"name": "--mdc-
|
|
78
|
-
},
|
|
79
|
-
{
|
|
80
|
-
"description": "Allows customization of the default foreground color.",
|
|
81
|
-
"name": "--mdc-avatar-default-foreground-color"
|
|
15
|
+
"description": "The color of the label text",
|
|
16
|
+
"name": "--mdc-chip-color"
|
|
82
17
|
},
|
|
83
18
|
{
|
|
84
|
-
"description": "
|
|
85
|
-
"name": "--mdc-
|
|
19
|
+
"description": "The color of the icon",
|
|
20
|
+
"name": "--mdc-chip-icon-color"
|
|
86
21
|
},
|
|
87
22
|
{
|
|
88
|
-
"description": "
|
|
89
|
-
"name": "--mdc-
|
|
23
|
+
"description": "The border color of the alertchip",
|
|
24
|
+
"name": "--mdc-chip-border-color"
|
|
90
25
|
},
|
|
91
26
|
{
|
|
92
|
-
"description": "
|
|
93
|
-
"name": "--mdc-
|
|
27
|
+
"description": "The background color of the alertchip",
|
|
28
|
+
"name": "--mdc-chip-background-color"
|
|
94
29
|
}
|
|
95
30
|
],
|
|
96
31
|
"members": [
|
|
97
32
|
{
|
|
98
33
|
"kind": "field",
|
|
99
|
-
"name": "
|
|
34
|
+
"name": "variant",
|
|
100
35
|
"type": {
|
|
101
|
-
"text": "
|
|
36
|
+
"text": "VariantType"
|
|
102
37
|
},
|
|
103
|
-
"description": "The
|
|
104
|
-
"
|
|
105
|
-
"
|
|
106
|
-
"name": "AvatarComponentMixin",
|
|
107
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
108
|
-
}
|
|
38
|
+
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
39
|
+
"default": "neutral",
|
|
40
|
+
"attribute": "variant"
|
|
109
41
|
},
|
|
110
42
|
{
|
|
111
43
|
"kind": "field",
|
|
112
|
-
"name": "
|
|
44
|
+
"name": "label",
|
|
113
45
|
"type": {
|
|
114
|
-
"text": "string
|
|
46
|
+
"text": "string"
|
|
115
47
|
},
|
|
116
|
-
"
|
|
117
|
-
"
|
|
118
|
-
"
|
|
119
|
-
"name": "AvatarComponentMixin",
|
|
120
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
121
|
-
}
|
|
48
|
+
"default": "''",
|
|
49
|
+
"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.",
|
|
50
|
+
"attribute": "label"
|
|
122
51
|
},
|
|
123
52
|
{
|
|
124
53
|
"kind": "field",
|
|
125
|
-
"name": "
|
|
54
|
+
"name": "tabIndex",
|
|
126
55
|
"type": {
|
|
127
|
-
"text": "
|
|
56
|
+
"text": "number"
|
|
128
57
|
},
|
|
129
|
-
"
|
|
130
|
-
"
|
|
58
|
+
"default": "0",
|
|
59
|
+
"description": "This property specifies the tab order of the element.",
|
|
60
|
+
"attribute": "tabIndex",
|
|
61
|
+
"reflects": true,
|
|
131
62
|
"inheritedFrom": {
|
|
132
|
-
"name": "
|
|
133
|
-
"module": "utils/mixins/
|
|
63
|
+
"name": "TabIndexMixin",
|
|
64
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
134
65
|
}
|
|
135
66
|
},
|
|
136
67
|
{
|
|
137
68
|
"kind": "field",
|
|
138
|
-
"name": "
|
|
69
|
+
"name": "disabled",
|
|
139
70
|
"type": {
|
|
140
|
-
"text": "
|
|
71
|
+
"text": "boolean | undefined"
|
|
141
72
|
},
|
|
142
|
-
"description": "
|
|
143
|
-
"default": "
|
|
144
|
-
"attribute": "
|
|
73
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
74
|
+
"default": "undefined",
|
|
75
|
+
"attribute": "disabled",
|
|
145
76
|
"reflects": true,
|
|
146
77
|
"inheritedFrom": {
|
|
147
|
-
"name": "
|
|
148
|
-
"module": "utils/mixins/
|
|
78
|
+
"name": "DisabledMixin",
|
|
79
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
149
80
|
}
|
|
150
81
|
},
|
|
151
82
|
{
|
|
152
83
|
"kind": "field",
|
|
153
|
-
"name": "
|
|
84
|
+
"name": "active",
|
|
154
85
|
"type": {
|
|
155
|
-
"text": "
|
|
86
|
+
"text": "boolean | undefined"
|
|
156
87
|
},
|
|
157
|
-
"description": "The
|
|
158
|
-
"
|
|
88
|
+
"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.",
|
|
89
|
+
"default": "undefined",
|
|
90
|
+
"attribute": "active",
|
|
91
|
+
"reflects": true,
|
|
159
92
|
"inheritedFrom": {
|
|
160
|
-
"name": "
|
|
161
|
-
"module": "
|
|
93
|
+
"name": "Buttonsimple",
|
|
94
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
162
95
|
}
|
|
163
96
|
},
|
|
164
97
|
{
|
|
165
98
|
"kind": "field",
|
|
166
|
-
"name": "
|
|
99
|
+
"name": "softDisabled",
|
|
167
100
|
"type": {
|
|
168
|
-
"text": "boolean"
|
|
101
|
+
"text": "boolean | undefined"
|
|
169
102
|
},
|
|
170
|
-
"
|
|
171
|
-
"
|
|
172
|
-
"attribute": "
|
|
103
|
+
"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.",
|
|
104
|
+
"default": "undefined",
|
|
105
|
+
"attribute": "soft-disabled",
|
|
106
|
+
"reflects": true,
|
|
173
107
|
"inheritedFrom": {
|
|
174
|
-
"name": "
|
|
175
|
-
"module": "
|
|
108
|
+
"name": "Buttonsimple",
|
|
109
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
176
110
|
}
|
|
177
111
|
},
|
|
178
112
|
{
|
|
179
113
|
"kind": "field",
|
|
180
|
-
"name": "
|
|
114
|
+
"name": "size",
|
|
181
115
|
"type": {
|
|
182
|
-
"text": "
|
|
116
|
+
"text": "ButtonSize"
|
|
183
117
|
},
|
|
184
|
-
"description": "
|
|
185
|
-
"
|
|
118
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
119
|
+
"default": "32",
|
|
120
|
+
"attribute": "size",
|
|
121
|
+
"reflects": true,
|
|
186
122
|
"inheritedFrom": {
|
|
187
|
-
"name": "
|
|
188
|
-
"module": "
|
|
123
|
+
"name": "Buttonsimple",
|
|
124
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
189
125
|
}
|
|
190
|
-
}
|
|
191
|
-
],
|
|
192
|
-
"mixins": [
|
|
193
|
-
{
|
|
194
|
-
"name": "AvatarComponentMixin",
|
|
195
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
196
126
|
},
|
|
197
127
|
{
|
|
198
|
-
"
|
|
199
|
-
"
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
"attributes": [
|
|
128
|
+
"kind": "field",
|
|
129
|
+
"name": "role",
|
|
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
|
+
}
|
|
138
|
+
},
|
|
210
139
|
{
|
|
211
|
-
"
|
|
140
|
+
"kind": "field",
|
|
141
|
+
"name": "ariaStateKey",
|
|
212
142
|
"type": {
|
|
213
143
|
"text": "string | undefined"
|
|
214
144
|
},
|
|
215
|
-
"description": "
|
|
216
|
-
"
|
|
145
|
+
"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`",
|
|
146
|
+
"default": "'aria-pressed' (when)",
|
|
147
|
+
"attribute": "ariaStateKey",
|
|
148
|
+
"reflects": true,
|
|
217
149
|
"inheritedFrom": {
|
|
218
|
-
"name": "
|
|
219
|
-
"module": "
|
|
150
|
+
"name": "Buttonsimple",
|
|
151
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
220
152
|
}
|
|
221
153
|
},
|
|
222
154
|
{
|
|
223
|
-
"
|
|
155
|
+
"kind": "field",
|
|
156
|
+
"name": "type",
|
|
224
157
|
"type": {
|
|
225
|
-
"text": "
|
|
158
|
+
"text": "ButtonType"
|
|
226
159
|
},
|
|
227
|
-
"description": "The
|
|
228
|
-
"
|
|
160
|
+
"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.",
|
|
161
|
+
"default": "button",
|
|
162
|
+
"attribute": "type",
|
|
163
|
+
"reflects": true,
|
|
229
164
|
"inheritedFrom": {
|
|
230
|
-
"name": "
|
|
231
|
-
"module": "
|
|
165
|
+
"name": "Buttonsimple",
|
|
166
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
232
167
|
}
|
|
233
168
|
},
|
|
234
169
|
{
|
|
235
|
-
"
|
|
236
|
-
"
|
|
237
|
-
|
|
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",
|
|
170
|
+
"kind": "method",
|
|
171
|
+
"name": "executeAction",
|
|
172
|
+
"privacy": "protected",
|
|
241
173
|
"inheritedFrom": {
|
|
242
|
-
"name": "
|
|
243
|
-
"module": "
|
|
244
|
-
}
|
|
245
|
-
},
|
|
246
|
-
{
|
|
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"
|
|
174
|
+
"name": "Buttonsimple",
|
|
175
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
481
176
|
}
|
|
482
177
|
},
|
|
483
178
|
{
|
|
@@ -799,50 +494,96 @@
|
|
|
799
494
|
},
|
|
800
495
|
{
|
|
801
496
|
"kind": "javascript-module",
|
|
802
|
-
"path": "components/
|
|
497
|
+
"path": "components/appheader/appheader.component.js",
|
|
803
498
|
"declarations": [
|
|
804
499
|
{
|
|
805
500
|
"kind": "class",
|
|
806
|
-
"description": "The `mdc-
|
|
807
|
-
"name": "
|
|
808
|
-
"
|
|
501
|
+
"description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
|
|
502
|
+
"name": "Appheader",
|
|
503
|
+
"cssParts": [
|
|
809
504
|
{
|
|
810
|
-
"description": "
|
|
811
|
-
"name": "
|
|
505
|
+
"description": "The main container for styling the header.",
|
|
506
|
+
"name": "container"
|
|
812
507
|
},
|
|
813
508
|
{
|
|
814
|
-
"description": "
|
|
815
|
-
"name": "
|
|
509
|
+
"description": "The leading section of the header.",
|
|
510
|
+
"name": "leading-section"
|
|
816
511
|
},
|
|
817
512
|
{
|
|
818
|
-
"description": "
|
|
819
|
-
"name": "
|
|
820
|
-
}
|
|
821
|
-
],
|
|
822
|
-
"members": [
|
|
513
|
+
"description": "The center section of the header.",
|
|
514
|
+
"name": "center-section"
|
|
515
|
+
},
|
|
823
516
|
{
|
|
824
|
-
"
|
|
825
|
-
"name": "
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
"description": "
|
|
831
|
-
"
|
|
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"
|
|
832
525
|
},
|
|
833
526
|
{
|
|
834
|
-
"
|
|
835
|
-
"name": "
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
527
|
+
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
528
|
+
"name": "center"
|
|
529
|
+
},
|
|
530
|
+
{
|
|
531
|
+
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
532
|
+
"name": "trailing"
|
|
533
|
+
}
|
|
534
|
+
],
|
|
535
|
+
"members": [],
|
|
536
|
+
"superclass": {
|
|
537
|
+
"name": "Component",
|
|
538
|
+
"module": "/src/models"
|
|
539
|
+
},
|
|
540
|
+
"tagName": "mdc-appheader",
|
|
541
|
+
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
|
542
|
+
"customElement": true
|
|
543
|
+
}
|
|
544
|
+
],
|
|
545
|
+
"exports": [
|
|
546
|
+
{
|
|
547
|
+
"kind": "js",
|
|
548
|
+
"name": "default",
|
|
549
|
+
"declaration": {
|
|
550
|
+
"name": "Appheader",
|
|
551
|
+
"module": "components/appheader/appheader.component.js"
|
|
552
|
+
}
|
|
553
|
+
}
|
|
554
|
+
]
|
|
555
|
+
},
|
|
556
|
+
{
|
|
557
|
+
"kind": "javascript-module",
|
|
558
|
+
"path": "components/avatar/avatar.component.js",
|
|
559
|
+
"declarations": [
|
|
560
|
+
{
|
|
561
|
+
"kind": "class",
|
|
562
|
+
"description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
|
|
563
|
+
"name": "Avatar",
|
|
564
|
+
"cssProperties": [
|
|
565
|
+
{
|
|
566
|
+
"description": "Allows customization of the default background color.",
|
|
567
|
+
"name": "--mdc-avatar-default-background-color"
|
|
568
|
+
},
|
|
569
|
+
{
|
|
570
|
+
"description": "Allows customization of the default foreground color.",
|
|
571
|
+
"name": "--mdc-avatar-default-foreground-color"
|
|
572
|
+
},
|
|
573
|
+
{
|
|
574
|
+
"description": "Allows customization of the loading indicator background color.",
|
|
575
|
+
"name": "--mdc-avatar-loading-indicator-background-color"
|
|
576
|
+
},
|
|
577
|
+
{
|
|
578
|
+
"description": "Allows customization of the loading indicator foreground color.",
|
|
579
|
+
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
|
845
580
|
},
|
|
581
|
+
{
|
|
582
|
+
"description": "Allows customization of the loading overlay background color.",
|
|
583
|
+
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
584
|
+
}
|
|
585
|
+
],
|
|
586
|
+
"members": [
|
|
846
587
|
{
|
|
847
588
|
"kind": "field",
|
|
848
589
|
"name": "src",
|
|
@@ -886,15 +627,15 @@
|
|
|
886
627
|
"kind": "field",
|
|
887
628
|
"name": "size",
|
|
888
629
|
"type": {
|
|
889
|
-
"text": "
|
|
630
|
+
"text": "AvatarSize"
|
|
890
631
|
},
|
|
891
632
|
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
892
633
|
"default": "32",
|
|
893
634
|
"attribute": "size",
|
|
894
635
|
"reflects": true,
|
|
895
636
|
"inheritedFrom": {
|
|
896
|
-
"name": "
|
|
897
|
-
"module": "
|
|
637
|
+
"name": "AvatarComponentMixin",
|
|
638
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
898
639
|
}
|
|
899
640
|
},
|
|
900
641
|
{
|
|
@@ -936,117 +677,376 @@
|
|
|
936
677
|
"name": "IconNameMixin",
|
|
937
678
|
"module": "utils/mixins/IconNameMixin.js"
|
|
938
679
|
}
|
|
680
|
+
}
|
|
681
|
+
],
|
|
682
|
+
"mixins": [
|
|
683
|
+
{
|
|
684
|
+
"name": "AvatarComponentMixin",
|
|
685
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
939
686
|
},
|
|
940
687
|
{
|
|
941
|
-
"
|
|
942
|
-
"
|
|
688
|
+
"name": "IconNameMixin",
|
|
689
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
|
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",
|
|
943
702
|
"type": {
|
|
944
|
-
"text": "
|
|
703
|
+
"text": "string | undefined"
|
|
945
704
|
},
|
|
946
|
-
"
|
|
947
|
-
"
|
|
948
|
-
"attribute": "tabIndex",
|
|
949
|
-
"reflects": true,
|
|
705
|
+
"description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
|
|
706
|
+
"fieldName": "src",
|
|
950
707
|
"inheritedFrom": {
|
|
951
|
-
"name": "
|
|
952
|
-
"module": "utils/mixins/
|
|
708
|
+
"name": "AvatarComponentMixin",
|
|
709
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
953
710
|
}
|
|
954
711
|
},
|
|
955
712
|
{
|
|
956
|
-
"
|
|
957
|
-
"name": "disabled",
|
|
713
|
+
"name": "initials",
|
|
958
714
|
"type": {
|
|
959
|
-
"text": "
|
|
715
|
+
"text": "string | undefined"
|
|
960
716
|
},
|
|
961
|
-
"description": "
|
|
962
|
-
"
|
|
963
|
-
"attribute": "disabled",
|
|
964
|
-
"reflects": true,
|
|
717
|
+
"description": "The initials to be displayed for the avatar.",
|
|
718
|
+
"fieldName": "initials",
|
|
965
719
|
"inheritedFrom": {
|
|
966
|
-
"name": "
|
|
967
|
-
"module": "utils/mixins/
|
|
720
|
+
"name": "AvatarComponentMixin",
|
|
721
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
968
722
|
}
|
|
969
723
|
},
|
|
970
724
|
{
|
|
971
|
-
"
|
|
972
|
-
"name": "active",
|
|
725
|
+
"name": "presence",
|
|
973
726
|
"type": {
|
|
974
|
-
"text": "
|
|
727
|
+
"text": "PresenceType | undefined"
|
|
975
728
|
},
|
|
976
|
-
"description": "The
|
|
977
|
-
"
|
|
978
|
-
"attribute": "active",
|
|
979
|
-
"reflects": true,
|
|
729
|
+
"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`",
|
|
730
|
+
"fieldName": "presence",
|
|
980
731
|
"inheritedFrom": {
|
|
981
|
-
"name": "
|
|
982
|
-
"module": "
|
|
732
|
+
"name": "AvatarComponentMixin",
|
|
733
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
983
734
|
}
|
|
984
735
|
},
|
|
985
736
|
{
|
|
986
|
-
"
|
|
987
|
-
"name": "softDisabled",
|
|
737
|
+
"name": "size",
|
|
988
738
|
"type": {
|
|
989
|
-
"text": "
|
|
739
|
+
"text": "AvatarSize"
|
|
990
740
|
},
|
|
991
|
-
"description": "
|
|
992
|
-
"default": "
|
|
993
|
-
"
|
|
994
|
-
"reflects": true,
|
|
741
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
742
|
+
"default": "32",
|
|
743
|
+
"fieldName": "size",
|
|
995
744
|
"inheritedFrom": {
|
|
996
|
-
"name": "
|
|
997
|
-
"module": "
|
|
745
|
+
"name": "AvatarComponentMixin",
|
|
746
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
998
747
|
}
|
|
999
748
|
},
|
|
1000
749
|
{
|
|
1001
|
-
"
|
|
1002
|
-
"
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
"
|
|
1006
|
-
"
|
|
750
|
+
"name": "counter",
|
|
751
|
+
"type": {
|
|
752
|
+
"text": "number | undefined"
|
|
753
|
+
},
|
|
754
|
+
"description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
|
|
755
|
+
"fieldName": "counter",
|
|
1007
756
|
"inheritedFrom": {
|
|
1008
|
-
"name": "
|
|
1009
|
-
"module": "
|
|
757
|
+
"name": "AvatarComponentMixin",
|
|
758
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1010
759
|
}
|
|
1011
760
|
},
|
|
1012
761
|
{
|
|
1013
|
-
"
|
|
1014
|
-
"name": "ariaStateKey",
|
|
762
|
+
"name": "is-typing",
|
|
1015
763
|
"type": {
|
|
1016
|
-
"text": "
|
|
764
|
+
"text": "boolean"
|
|
1017
765
|
},
|
|
1018
|
-
"
|
|
1019
|
-
"
|
|
1020
|
-
"
|
|
1021
|
-
"reflects": true,
|
|
766
|
+
"default": "false",
|
|
767
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
768
|
+
"fieldName": "isTyping",
|
|
1022
769
|
"inheritedFrom": {
|
|
1023
|
-
"name": "
|
|
1024
|
-
"module": "
|
|
770
|
+
"name": "AvatarComponentMixin",
|
|
771
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1025
772
|
}
|
|
1026
773
|
},
|
|
1027
774
|
{
|
|
1028
|
-
"
|
|
1029
|
-
"name": "type",
|
|
775
|
+
"name": "icon-name",
|
|
1030
776
|
"type": {
|
|
1031
|
-
"text": "
|
|
777
|
+
"text": "IconNames | undefined"
|
|
1032
778
|
},
|
|
1033
|
-
"description": "
|
|
1034
|
-
"
|
|
1035
|
-
"attribute": "type",
|
|
1036
|
-
"reflects": true,
|
|
779
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
780
|
+
"fieldName": "iconName",
|
|
1037
781
|
"inheritedFrom": {
|
|
1038
|
-
"name": "
|
|
1039
|
-
"module": "
|
|
782
|
+
"name": "IconNameMixin",
|
|
783
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
1040
784
|
}
|
|
1041
|
-
}
|
|
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": [
|
|
1042
809
|
{
|
|
1043
|
-
"
|
|
1044
|
-
"name": "
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
810
|
+
"description": "Background color of the overlay in rest state",
|
|
811
|
+
"name": "--mdc-avatarbutton-overlay-background-color-rest"
|
|
812
|
+
},
|
|
813
|
+
{
|
|
814
|
+
"description": "Background color of the overlay in hover state",
|
|
815
|
+
"name": "--mdc-avatarbutton-overlay-background-color-hover"
|
|
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
|
+
}
|
|
1050
1050
|
},
|
|
1051
1051
|
{
|
|
1052
1052
|
"kind": "method",
|
|
@@ -24832,24 +24832,142 @@
|
|
|
24832
24832
|
},
|
|
24833
24833
|
{
|
|
24834
24834
|
"kind": "javascript-module",
|
|
24835
|
-
"path": "components/
|
|
24835
|
+
"path": "components/themeprovider/themeprovider.component.js",
|
|
24836
24836
|
"declarations": [
|
|
24837
24837
|
{
|
|
24838
24838
|
"kind": "class",
|
|
24839
|
-
"description": "
|
|
24840
|
-
"name": "
|
|
24839
|
+
"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.",
|
|
24840
|
+
"name": "ThemeProvider",
|
|
24841
24841
|
"cssProperties": [
|
|
24842
24842
|
{
|
|
24843
|
-
"description": "
|
|
24844
|
-
"name": "--mdc-
|
|
24843
|
+
"description": "Option to override the default color, default: color-theme-text-primary-normal",
|
|
24844
|
+
"name": "--mdc-themeprovider-color-default"
|
|
24845
24845
|
},
|
|
24846
24846
|
{
|
|
24847
|
-
"description": "
|
|
24848
|
-
"name": "--mdc-
|
|
24847
|
+
"description": "Option to override the font family, default: `Momentum` (from momentum-design/fonts)",
|
|
24848
|
+
"name": "--mdc-themeprovider-font-family"
|
|
24849
24849
|
},
|
|
24850
24850
|
{
|
|
24851
|
-
"description": "
|
|
24852
|
-
"name": "--mdc-
|
|
24851
|
+
"description": "Option to override the font weight, default: `400`",
|
|
24852
|
+
"name": "--mdc-themeprovider-font-weight"
|
|
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"
|
|
24853
24971
|
},
|
|
24854
24972
|
{
|
|
24855
24973
|
"description": "Height of the toggle when it's size is compact",
|
|
@@ -27045,363 +27163,111 @@
|
|
|
27045
27163
|
"text": "boolean"
|
|
27046
27164
|
},
|
|
27047
27165
|
"description": "Changes the size of popover to keep it in view when scrolling.",
|
|
27048
|
-
"default": "false",
|
|
27049
|
-
"fieldName": "size",
|
|
27050
|
-
"inheritedFrom": {
|
|
27051
|
-
"name": "Popover",
|
|
27052
|
-
"module": "src/components/popover/popover.component.ts"
|
|
27053
|
-
}
|
|
27054
|
-
},
|
|
27055
|
-
{
|
|
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"
|
|
27166
|
+
"default": "false",
|
|
27167
|
+
"fieldName": "size",
|
|
27168
|
+
"inheritedFrom": {
|
|
27169
|
+
"name": "Popover",
|
|
27170
|
+
"module": "src/components/popover/popover.component.ts"
|
|
27171
|
+
}
|
|
27328
27172
|
},
|
|
27329
27173
|
{
|
|
27330
|
-
"
|
|
27331
|
-
"name": "scrollElementRef",
|
|
27174
|
+
"name": "z-index",
|
|
27332
27175
|
"type": {
|
|
27333
|
-
"text": "
|
|
27176
|
+
"text": "number"
|
|
27334
27177
|
},
|
|
27335
|
-
"
|
|
27178
|
+
"description": "The z-index of the popover.",
|
|
27179
|
+
"default": "1000",
|
|
27180
|
+
"fieldName": "zIndex",
|
|
27181
|
+
"inheritedFrom": {
|
|
27182
|
+
"name": "Popover",
|
|
27183
|
+
"module": "src/components/popover/popover.component.ts"
|
|
27184
|
+
}
|
|
27336
27185
|
},
|
|
27337
27186
|
{
|
|
27338
|
-
"
|
|
27339
|
-
"name": "virtualizer",
|
|
27187
|
+
"name": "append-to",
|
|
27340
27188
|
"type": {
|
|
27341
|
-
"text": "
|
|
27189
|
+
"text": "string"
|
|
27342
27190
|
},
|
|
27343
|
-
"
|
|
27344
|
-
"
|
|
27191
|
+
"default": "''",
|
|
27192
|
+
"description": "Element ID that the popover append to.",
|
|
27193
|
+
"fieldName": "appendTo",
|
|
27194
|
+
"inheritedFrom": {
|
|
27195
|
+
"name": "Popover",
|
|
27196
|
+
"module": "src/components/popover/popover.component.ts"
|
|
27197
|
+
}
|
|
27345
27198
|
},
|
|
27346
27199
|
{
|
|
27347
|
-
"
|
|
27348
|
-
"name": "virtualItems",
|
|
27200
|
+
"name": "close-button-aria-label",
|
|
27349
27201
|
"type": {
|
|
27350
|
-
"text": "
|
|
27202
|
+
"text": "string | null"
|
|
27351
27203
|
},
|
|
27352
|
-
"
|
|
27353
|
-
"
|
|
27204
|
+
"default": "null",
|
|
27205
|
+
"description": "aria-label attribute to be set for close button accessibility.",
|
|
27206
|
+
"fieldName": "closeButtonAriaLabel",
|
|
27207
|
+
"inheritedFrom": {
|
|
27208
|
+
"name": "Popover",
|
|
27209
|
+
"module": "src/components/popover/popover.component.ts"
|
|
27210
|
+
}
|
|
27354
27211
|
},
|
|
27355
27212
|
{
|
|
27356
|
-
"
|
|
27357
|
-
"name": "virtualizerController",
|
|
27213
|
+
"name": "role",
|
|
27358
27214
|
"type": {
|
|
27359
|
-
"text": "
|
|
27215
|
+
"text": "HTMLElement['role']"
|
|
27360
27216
|
},
|
|
27361
|
-
"
|
|
27362
|
-
|
|
27363
|
-
|
|
27364
|
-
|
|
27365
|
-
|
|
27366
|
-
|
|
27367
|
-
|
|
27368
|
-
|
|
27369
|
-
}
|
|
27370
|
-
],
|
|
27371
|
-
"attributes": [
|
|
27217
|
+
"description": "Role of the popover",
|
|
27218
|
+
"default": "dialog",
|
|
27219
|
+
"fieldName": "role",
|
|
27220
|
+
"inheritedFrom": {
|
|
27221
|
+
"name": "Popover",
|
|
27222
|
+
"module": "src/components/popover/popover.component.ts"
|
|
27223
|
+
}
|
|
27224
|
+
},
|
|
27372
27225
|
{
|
|
27373
|
-
"name": "
|
|
27226
|
+
"name": "aria-labelledby",
|
|
27374
27227
|
"type": {
|
|
27375
|
-
"text": "
|
|
27228
|
+
"text": "string | null"
|
|
27376
27229
|
},
|
|
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.",
|
|
27378
27230
|
"default": "null",
|
|
27379
|
-
"
|
|
27231
|
+
"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.",
|
|
27232
|
+
"fieldName": "ariaLabelledby",
|
|
27233
|
+
"inheritedFrom": {
|
|
27234
|
+
"name": "Popover",
|
|
27235
|
+
"module": "src/components/popover/popover.component.ts"
|
|
27236
|
+
}
|
|
27380
27237
|
},
|
|
27381
27238
|
{
|
|
27382
|
-
"name": "
|
|
27239
|
+
"name": "aria-describedby",
|
|
27383
27240
|
"type": {
|
|
27384
|
-
"text": "
|
|
27241
|
+
"text": "string | null"
|
|
27385
27242
|
},
|
|
27386
|
-
"
|
|
27387
|
-
"
|
|
27243
|
+
"default": "null",
|
|
27244
|
+
"description": "aria-describedby of the popover.",
|
|
27245
|
+
"fieldName": "ariaDescribedby",
|
|
27246
|
+
"inheritedFrom": {
|
|
27247
|
+
"name": "Popover",
|
|
27248
|
+
"module": "src/components/popover/popover.component.ts"
|
|
27249
|
+
}
|
|
27388
27250
|
},
|
|
27389
27251
|
{
|
|
27390
|
-
"name": "
|
|
27252
|
+
"name": "disable-aria-expanded",
|
|
27391
27253
|
"type": {
|
|
27392
|
-
"text": "
|
|
27254
|
+
"text": "boolean"
|
|
27393
27255
|
},
|
|
27394
|
-
"description": "
|
|
27395
|
-
"default": "
|
|
27396
|
-
"fieldName": "
|
|
27256
|
+
"description": "Disable aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
|
|
27257
|
+
"default": "false",
|
|
27258
|
+
"fieldName": "disableAriaExpanded",
|
|
27259
|
+
"inheritedFrom": {
|
|
27260
|
+
"name": "Popover",
|
|
27261
|
+
"module": "src/components/popover/popover.component.ts"
|
|
27262
|
+
}
|
|
27397
27263
|
}
|
|
27398
27264
|
],
|
|
27399
27265
|
"superclass": {
|
|
27400
|
-
"name": "
|
|
27401
|
-
"module": "/src/
|
|
27266
|
+
"name": "Popover",
|
|
27267
|
+
"module": "/src/components/popover/popover.component"
|
|
27402
27268
|
},
|
|
27403
|
-
"tagName": "mdc-
|
|
27404
|
-
"jsDoc": "/**\n *
|
|
27269
|
+
"tagName": "mdc-toggletip",
|
|
27270
|
+
"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 */",
|
|
27405
27271
|
"customElement": true
|
|
27406
27272
|
}
|
|
27407
27273
|
],
|
|
@@ -27410,8 +27276,8 @@
|
|
|
27410
27276
|
"kind": "js",
|
|
27411
27277
|
"name": "default",
|
|
27412
27278
|
"declaration": {
|
|
27413
|
-
"name": "
|
|
27414
|
-
"module": "components/
|
|
27279
|
+
"name": "ToggleTip",
|
|
27280
|
+
"module": "components/toggletip/toggletip.component.js"
|
|
27415
27281
|
}
|
|
27416
27282
|
}
|
|
27417
27283
|
]
|
|
@@ -29141,6 +29007,140 @@
|
|
|
29141
29007
|
}
|
|
29142
29008
|
]
|
|
29143
29009
|
},
|
|
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",
|