@momentum-design/components 0.70.0 → 0.70.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/index.js +11 -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/components/popover/popover.styles.js +1 -0
- package/dist/custom-elements.json +1409 -1409
- package/dist/react/index.d.ts +4 -4
- package/dist/react/index.js +4 -4
- 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",
|
|
@@ -3566,12 +3566,12 @@
|
|
|
3566
3566
|
},
|
|
3567
3567
|
{
|
|
3568
3568
|
"kind": "javascript-module",
|
|
3569
|
-
"path": "components/
|
|
3569
|
+
"path": "components/cardbutton/cardbutton.component.js",
|
|
3570
3570
|
"declarations": [
|
|
3571
3571
|
{
|
|
3572
3572
|
"kind": "class",
|
|
3573
|
-
"description": "
|
|
3574
|
-
"name": "
|
|
3573
|
+
"description": "cardbutton component looks like a card and behaves as a button component.\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.\nMake sure to pass only non-interactable elements within the slots.",
|
|
3574
|
+
"name": "CardButton",
|
|
3575
3575
|
"slots": [
|
|
3576
3576
|
{
|
|
3577
3577
|
"description": "This slot is for passing the content before the body",
|
|
@@ -3584,33 +3584,9 @@
|
|
|
3584
3584
|
{
|
|
3585
3585
|
"description": "This slot is for passing the content after the body",
|
|
3586
3586
|
"name": "after-body"
|
|
3587
|
-
}
|
|
3588
|
-
|
|
3589
|
-
|
|
3590
|
-
"name": "footer-link"
|
|
3591
|
-
},
|
|
3592
|
-
{
|
|
3593
|
-
"description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
|
|
3594
|
-
"name": "footer-button-primary"
|
|
3595
|
-
},
|
|
3596
|
-
{
|
|
3597
|
-
"description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
|
|
3598
|
-
"name": "footer-button-secondary"
|
|
3599
|
-
},
|
|
3600
|
-
{
|
|
3601
|
-
"description": "This slot is for passing the content before the body",
|
|
3602
|
-
"name": "before-body"
|
|
3603
|
-
},
|
|
3604
|
-
{
|
|
3605
|
-
"description": "This slot is for passing the text content for the card",
|
|
3606
|
-
"name": "body"
|
|
3607
|
-
},
|
|
3608
|
-
{
|
|
3609
|
-
"description": "This slot is for passing the content after the body",
|
|
3610
|
-
"name": "after-body"
|
|
3611
|
-
}
|
|
3612
|
-
],
|
|
3613
|
-
"members": [
|
|
3587
|
+
}
|
|
3588
|
+
],
|
|
3589
|
+
"members": [
|
|
3614
3590
|
{
|
|
3615
3591
|
"kind": "method",
|
|
3616
3592
|
"name": "renderHeader",
|
|
@@ -3794,673 +3770,794 @@
|
|
|
3794
3770
|
}
|
|
3795
3771
|
},
|
|
3796
3772
|
{
|
|
3797
|
-
"kind": "
|
|
3798
|
-
"name": "
|
|
3799
|
-
"
|
|
3800
|
-
|
|
3801
|
-
"return": {
|
|
3802
|
-
"type": {
|
|
3803
|
-
"text": ""
|
|
3804
|
-
}
|
|
3773
|
+
"kind": "field",
|
|
3774
|
+
"name": "tabIndex",
|
|
3775
|
+
"type": {
|
|
3776
|
+
"text": "number"
|
|
3805
3777
|
},
|
|
3778
|
+
"default": "0",
|
|
3779
|
+
"description": "This property specifies the tab order of the element.",
|
|
3780
|
+
"attribute": "tabIndex",
|
|
3781
|
+
"reflects": true,
|
|
3806
3782
|
"inheritedFrom": {
|
|
3807
|
-
"name": "
|
|
3808
|
-
"module": "
|
|
3783
|
+
"name": "Buttonsimple",
|
|
3784
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3809
3785
|
}
|
|
3810
|
-
}
|
|
3811
|
-
],
|
|
3812
|
-
"mixins": [
|
|
3813
|
-
{
|
|
3814
|
-
"name": "CardComponentMixin",
|
|
3815
|
-
"module": "/src/utils/mixins/CardComponentMixin"
|
|
3816
3786
|
},
|
|
3817
3787
|
{
|
|
3818
|
-
"
|
|
3819
|
-
"
|
|
3820
|
-
}
|
|
3821
|
-
],
|
|
3822
|
-
"superclass": {
|
|
3823
|
-
"name": "Component",
|
|
3824
|
-
"module": "/src/models"
|
|
3825
|
-
},
|
|
3826
|
-
"tagName": "mdc-card",
|
|
3827
|
-
"jsDoc": "/**\n * The card component allows users to organize information in a structured and tangible\n * format that is visually appealing. `mdc-card` is a static component that supports\n * the following features:\n * - Image\n * - Header\n * - Icon\n * - Title\n * - Subtitle\n * - Body\n *\n * The card can either be vertically or horizontally oriented.\n *\n * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n *\n * To make this card interactive, use the following slots:\n * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n * - `footer-button-primary`: This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n *\n * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n *\n * @tagname mdc-card\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n *\n */",
|
|
3828
|
-
"customElement": true,
|
|
3829
|
-
"attributes": [
|
|
3830
|
-
{
|
|
3831
|
-
"name": "card-title",
|
|
3788
|
+
"kind": "field",
|
|
3789
|
+
"name": "disabled",
|
|
3832
3790
|
"type": {
|
|
3833
|
-
"text": "
|
|
3791
|
+
"text": "boolean | undefined"
|
|
3834
3792
|
},
|
|
3835
|
-
"
|
|
3836
|
-
"
|
|
3837
|
-
"
|
|
3793
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
3794
|
+
"default": "undefined",
|
|
3795
|
+
"attribute": "disabled",
|
|
3796
|
+
"reflects": true,
|
|
3838
3797
|
"inheritedFrom": {
|
|
3839
|
-
"name": "
|
|
3840
|
-
"module": "
|
|
3798
|
+
"name": "Buttonsimple",
|
|
3799
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3841
3800
|
}
|
|
3842
3801
|
},
|
|
3843
3802
|
{
|
|
3844
|
-
"
|
|
3803
|
+
"kind": "field",
|
|
3804
|
+
"name": "active",
|
|
3845
3805
|
"type": {
|
|
3846
|
-
"text": "
|
|
3806
|
+
"text": "boolean | undefined"
|
|
3847
3807
|
},
|
|
3848
|
-
"
|
|
3849
|
-
"
|
|
3850
|
-
"
|
|
3808
|
+
"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.",
|
|
3809
|
+
"default": "undefined",
|
|
3810
|
+
"attribute": "active",
|
|
3811
|
+
"reflects": true,
|
|
3851
3812
|
"inheritedFrom": {
|
|
3852
|
-
"name": "
|
|
3853
|
-
"module": "
|
|
3813
|
+
"name": "Buttonsimple",
|
|
3814
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3854
3815
|
}
|
|
3855
3816
|
},
|
|
3856
3817
|
{
|
|
3857
|
-
"
|
|
3818
|
+
"kind": "field",
|
|
3819
|
+
"name": "softDisabled",
|
|
3858
3820
|
"type": {
|
|
3859
|
-
"text": "
|
|
3821
|
+
"text": "boolean | undefined"
|
|
3860
3822
|
},
|
|
3861
|
-
"
|
|
3862
|
-
"
|
|
3863
|
-
"
|
|
3823
|
+
"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.",
|
|
3824
|
+
"default": "undefined",
|
|
3825
|
+
"attribute": "soft-disabled",
|
|
3826
|
+
"reflects": true,
|
|
3864
3827
|
"inheritedFrom": {
|
|
3865
|
-
"name": "
|
|
3866
|
-
"module": "
|
|
3828
|
+
"name": "Buttonsimple",
|
|
3829
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3867
3830
|
}
|
|
3868
3831
|
},
|
|
3869
3832
|
{
|
|
3870
|
-
"
|
|
3833
|
+
"kind": "field",
|
|
3834
|
+
"name": "size",
|
|
3871
3835
|
"type": {
|
|
3872
|
-
"text": "
|
|
3836
|
+
"text": "ButtonSize"
|
|
3873
3837
|
},
|
|
3874
|
-
"
|
|
3875
|
-
"
|
|
3876
|
-
"
|
|
3838
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
3839
|
+
"default": "32",
|
|
3840
|
+
"attribute": "size",
|
|
3841
|
+
"reflects": true,
|
|
3877
3842
|
"inheritedFrom": {
|
|
3878
|
-
"name": "
|
|
3879
|
-
"module": "
|
|
3843
|
+
"name": "Buttonsimple",
|
|
3844
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3880
3845
|
}
|
|
3881
3846
|
},
|
|
3882
3847
|
{
|
|
3883
|
-
"
|
|
3884
|
-
"
|
|
3885
|
-
|
|
3886
|
-
|
|
3887
|
-
"
|
|
3888
|
-
"
|
|
3889
|
-
"fieldName": "variant",
|
|
3848
|
+
"kind": "field",
|
|
3849
|
+
"name": "role",
|
|
3850
|
+
"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.",
|
|
3851
|
+
"default": "button",
|
|
3852
|
+
"attribute": "role",
|
|
3853
|
+
"reflects": true,
|
|
3890
3854
|
"inheritedFrom": {
|
|
3891
|
-
"name": "
|
|
3892
|
-
"module": "
|
|
3855
|
+
"name": "Buttonsimple",
|
|
3856
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3893
3857
|
}
|
|
3894
3858
|
},
|
|
3895
3859
|
{
|
|
3896
|
-
"
|
|
3860
|
+
"kind": "field",
|
|
3861
|
+
"name": "ariaStateKey",
|
|
3897
3862
|
"type": {
|
|
3898
|
-
"text": "
|
|
3863
|
+
"text": "string | undefined"
|
|
3899
3864
|
},
|
|
3900
|
-
"description": "
|
|
3901
|
-
"default": "'
|
|
3902
|
-
"
|
|
3865
|
+
"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`",
|
|
3866
|
+
"default": "'aria-pressed' (when)",
|
|
3867
|
+
"attribute": "ariaStateKey",
|
|
3868
|
+
"reflects": true,
|
|
3903
3869
|
"inheritedFrom": {
|
|
3904
|
-
"name": "
|
|
3905
|
-
"module": "
|
|
3870
|
+
"name": "Buttonsimple",
|
|
3871
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3906
3872
|
}
|
|
3907
3873
|
},
|
|
3908
3874
|
{
|
|
3909
|
-
"
|
|
3875
|
+
"kind": "field",
|
|
3876
|
+
"name": "type",
|
|
3910
3877
|
"type": {
|
|
3911
|
-
"text": "
|
|
3878
|
+
"text": "ButtonType"
|
|
3912
3879
|
},
|
|
3913
|
-
"description": "
|
|
3914
|
-
"default": "
|
|
3915
|
-
"
|
|
3880
|
+
"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.",
|
|
3881
|
+
"default": "button",
|
|
3882
|
+
"attribute": "type",
|
|
3883
|
+
"reflects": true,
|
|
3916
3884
|
"inheritedFrom": {
|
|
3917
|
-
"name": "
|
|
3918
|
-
"module": "
|
|
3885
|
+
"name": "Buttonsimple",
|
|
3886
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3919
3887
|
}
|
|
3920
3888
|
},
|
|
3921
3889
|
{
|
|
3922
|
-
"
|
|
3923
|
-
"
|
|
3924
|
-
|
|
3925
|
-
},
|
|
3926
|
-
"description": "The tag name for the subtitle. It supports all the types that `msc-text` supports",
|
|
3927
|
-
"default": "'span'",
|
|
3928
|
-
"fieldName": "subtitleTagName",
|
|
3890
|
+
"kind": "method",
|
|
3891
|
+
"name": "executeAction",
|
|
3892
|
+
"privacy": "protected",
|
|
3929
3893
|
"inheritedFrom": {
|
|
3930
|
-
"name": "
|
|
3931
|
-
"module": "
|
|
3894
|
+
"name": "Buttonsimple",
|
|
3895
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3932
3896
|
}
|
|
3933
3897
|
},
|
|
3934
3898
|
{
|
|
3935
|
-
"
|
|
3936
|
-
"
|
|
3937
|
-
|
|
3938
|
-
|
|
3939
|
-
|
|
3940
|
-
|
|
3899
|
+
"kind": "method",
|
|
3900
|
+
"name": "setActive",
|
|
3901
|
+
"privacy": "protected",
|
|
3902
|
+
"parameters": [
|
|
3903
|
+
{
|
|
3904
|
+
"name": "element",
|
|
3905
|
+
"type": {
|
|
3906
|
+
"text": "HTMLElement"
|
|
3907
|
+
},
|
|
3908
|
+
"description": "The button element"
|
|
3909
|
+
},
|
|
3910
|
+
{
|
|
3911
|
+
"name": "active",
|
|
3912
|
+
"optional": true,
|
|
3913
|
+
"type": {
|
|
3914
|
+
"text": "boolean"
|
|
3915
|
+
},
|
|
3916
|
+
"description": "The active state of the element"
|
|
3917
|
+
}
|
|
3918
|
+
],
|
|
3919
|
+
"description": "Sets the ariaStateKey attributes based on the active state of the button.",
|
|
3941
3920
|
"inheritedFrom": {
|
|
3942
|
-
"name": "
|
|
3943
|
-
"module": "
|
|
3921
|
+
"name": "Buttonsimple",
|
|
3922
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3944
3923
|
}
|
|
3945
|
-
}
|
|
3946
|
-
]
|
|
3947
|
-
}
|
|
3948
|
-
],
|
|
3949
|
-
"exports": [
|
|
3950
|
-
{
|
|
3951
|
-
"kind": "js",
|
|
3952
|
-
"name": "default",
|
|
3953
|
-
"declaration": {
|
|
3954
|
-
"name": "Card",
|
|
3955
|
-
"module": "components/card/card.component.js"
|
|
3956
|
-
}
|
|
3957
|
-
}
|
|
3958
|
-
]
|
|
3959
|
-
},
|
|
3960
|
-
{
|
|
3961
|
-
"kind": "javascript-module",
|
|
3962
|
-
"path": "components/cardbutton/cardbutton.component.js",
|
|
3963
|
-
"declarations": [
|
|
3964
|
-
{
|
|
3965
|
-
"kind": "class",
|
|
3966
|
-
"description": "cardbutton component looks like a card and behaves as a button component.\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.\nMake sure to pass only non-interactable elements within the slots.",
|
|
3967
|
-
"name": "CardButton",
|
|
3968
|
-
"slots": [
|
|
3969
|
-
{
|
|
3970
|
-
"description": "This slot is for passing the content before the body",
|
|
3971
|
-
"name": "before-body"
|
|
3972
|
-
},
|
|
3973
|
-
{
|
|
3974
|
-
"description": "This slot is for passing the text content for the card",
|
|
3975
|
-
"name": "body"
|
|
3976
3924
|
},
|
|
3977
|
-
{
|
|
3978
|
-
"description": "This slot is for passing the content after the body",
|
|
3979
|
-
"name": "after-body"
|
|
3980
|
-
}
|
|
3981
|
-
],
|
|
3982
|
-
"members": [
|
|
3983
3925
|
{
|
|
3984
3926
|
"kind": "method",
|
|
3985
|
-
"name": "
|
|
3986
|
-
"privacy": "
|
|
3987
|
-
"
|
|
3988
|
-
|
|
3989
|
-
|
|
3990
|
-
"
|
|
3927
|
+
"name": "setSoftDisabled",
|
|
3928
|
+
"privacy": "private",
|
|
3929
|
+
"parameters": [
|
|
3930
|
+
{
|
|
3931
|
+
"name": "element",
|
|
3932
|
+
"type": {
|
|
3933
|
+
"text": "HTMLElement"
|
|
3934
|
+
},
|
|
3935
|
+
"description": "The button element."
|
|
3936
|
+
},
|
|
3937
|
+
{
|
|
3938
|
+
"name": "softDisabled",
|
|
3939
|
+
"optional": true,
|
|
3940
|
+
"type": {
|
|
3941
|
+
"text": "boolean"
|
|
3942
|
+
},
|
|
3943
|
+
"description": "The soft-disabled state."
|
|
3991
3944
|
}
|
|
3945
|
+
],
|
|
3946
|
+
"description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
|
|
3947
|
+
"inheritedFrom": {
|
|
3948
|
+
"name": "Buttonsimple",
|
|
3949
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3992
3950
|
}
|
|
3993
3951
|
},
|
|
3994
3952
|
{
|
|
3995
|
-
"kind": "
|
|
3996
|
-
"name": "
|
|
3953
|
+
"kind": "method",
|
|
3954
|
+
"name": "setDisabled",
|
|
3955
|
+
"privacy": "private",
|
|
3956
|
+
"parameters": [
|
|
3957
|
+
{
|
|
3958
|
+
"name": "element",
|
|
3959
|
+
"type": {
|
|
3960
|
+
"text": "HTMLElement"
|
|
3961
|
+
},
|
|
3962
|
+
"description": "The button element."
|
|
3963
|
+
},
|
|
3964
|
+
{
|
|
3965
|
+
"name": "disabled",
|
|
3966
|
+
"type": {
|
|
3967
|
+
"text": "boolean"
|
|
3968
|
+
},
|
|
3969
|
+
"description": "The disabled state."
|
|
3970
|
+
}
|
|
3971
|
+
],
|
|
3972
|
+
"description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
|
|
3973
|
+
"inheritedFrom": {
|
|
3974
|
+
"name": "Buttonsimple",
|
|
3975
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3976
|
+
}
|
|
3977
|
+
},
|
|
3978
|
+
{
|
|
3979
|
+
"kind": "method",
|
|
3980
|
+
"name": "triggerClickEvent",
|
|
3981
|
+
"privacy": "private",
|
|
3982
|
+
"inheritedFrom": {
|
|
3983
|
+
"name": "Buttonsimple",
|
|
3984
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3985
|
+
}
|
|
3986
|
+
},
|
|
3987
|
+
{
|
|
3988
|
+
"kind": "method",
|
|
3989
|
+
"name": "handleBlur",
|
|
3990
|
+
"privacy": "private",
|
|
3991
|
+
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
|
3992
|
+
"inheritedFrom": {
|
|
3993
|
+
"name": "Buttonsimple",
|
|
3994
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3995
|
+
}
|
|
3996
|
+
},
|
|
3997
|
+
{
|
|
3998
|
+
"kind": "method",
|
|
3999
|
+
"name": "handleKeyDown",
|
|
4000
|
+
"privacy": "private",
|
|
4001
|
+
"parameters": [
|
|
4002
|
+
{
|
|
4003
|
+
"name": "event",
|
|
4004
|
+
"type": {
|
|
4005
|
+
"text": "KeyboardEvent"
|
|
4006
|
+
},
|
|
4007
|
+
"description": "The keyboard event."
|
|
4008
|
+
}
|
|
4009
|
+
],
|
|
4010
|
+
"description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
|
|
4011
|
+
"inheritedFrom": {
|
|
4012
|
+
"name": "Buttonsimple",
|
|
4013
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
4014
|
+
}
|
|
4015
|
+
},
|
|
4016
|
+
{
|
|
4017
|
+
"kind": "method",
|
|
4018
|
+
"name": "handleKeyUp",
|
|
4019
|
+
"privacy": "private",
|
|
4020
|
+
"parameters": [
|
|
4021
|
+
{
|
|
4022
|
+
"name": "event",
|
|
4023
|
+
"type": {
|
|
4024
|
+
"text": "KeyboardEvent"
|
|
4025
|
+
},
|
|
4026
|
+
"description": "The keyboard event."
|
|
4027
|
+
}
|
|
4028
|
+
],
|
|
4029
|
+
"description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
|
|
4030
|
+
"inheritedFrom": {
|
|
4031
|
+
"name": "Buttonsimple",
|
|
4032
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
4033
|
+
}
|
|
4034
|
+
}
|
|
4035
|
+
],
|
|
4036
|
+
"events": [
|
|
4037
|
+
{
|
|
4038
|
+
"description": "(React: onClick) Event that gets dispatched when the card is clicked.",
|
|
4039
|
+
"name": "click",
|
|
4040
|
+
"reactName": "onClick",
|
|
4041
|
+
"inheritedFrom": {
|
|
4042
|
+
"name": "Buttonsimple",
|
|
4043
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
4044
|
+
}
|
|
4045
|
+
},
|
|
4046
|
+
{
|
|
4047
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the card. It fires the click event when enter key is used.",
|
|
4048
|
+
"name": "keydown",
|
|
4049
|
+
"reactName": "onKeyDown",
|
|
4050
|
+
"inheritedFrom": {
|
|
4051
|
+
"name": "Buttonsimple",
|
|
4052
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
4053
|
+
}
|
|
4054
|
+
},
|
|
4055
|
+
{
|
|
4056
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the card. It fires the click event when space key is used.",
|
|
4057
|
+
"name": "keyup",
|
|
4058
|
+
"reactName": "onKeyUp",
|
|
4059
|
+
"inheritedFrom": {
|
|
4060
|
+
"name": "Buttonsimple",
|
|
4061
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
4062
|
+
}
|
|
4063
|
+
},
|
|
4064
|
+
{
|
|
4065
|
+
"description": "(React: onFocus) Event that gets dispatched when the card receives focus.",
|
|
4066
|
+
"name": "focus",
|
|
4067
|
+
"reactName": "onFocus",
|
|
4068
|
+
"inheritedFrom": {
|
|
4069
|
+
"name": "Buttonsimple",
|
|
4070
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
4071
|
+
}
|
|
4072
|
+
}
|
|
4073
|
+
],
|
|
4074
|
+
"mixins": [
|
|
4075
|
+
{
|
|
4076
|
+
"name": "CardComponentMixin",
|
|
4077
|
+
"module": "/src/utils/mixins/CardComponentMixin"
|
|
4078
|
+
}
|
|
4079
|
+
],
|
|
4080
|
+
"superclass": {
|
|
4081
|
+
"name": "Buttonsimple",
|
|
4082
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
4083
|
+
},
|
|
4084
|
+
"tagName": "mdc-cardbutton",
|
|
4085
|
+
"jsDoc": "/**\n * cardbutton component looks like a card and behaves as a button component.\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * @tagname mdc-cardbutton\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It fires the click event when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It fires the click event when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n */",
|
|
4086
|
+
"customElement": true,
|
|
4087
|
+
"attributes": [
|
|
4088
|
+
{
|
|
4089
|
+
"name": "card-title",
|
|
3997
4090
|
"type": {
|
|
3998
4091
|
"text": "string"
|
|
3999
4092
|
},
|
|
4000
4093
|
"default": "''",
|
|
4001
4094
|
"description": "The title of the card - part of header section",
|
|
4002
|
-
"
|
|
4095
|
+
"fieldName": "cardTitle",
|
|
4003
4096
|
"inheritedFrom": {
|
|
4004
4097
|
"name": "CardComponentMixin",
|
|
4005
|
-
"module": "utils/mixins/CardComponentMixin.
|
|
4098
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
4006
4099
|
}
|
|
4007
4100
|
},
|
|
4008
4101
|
{
|
|
4009
|
-
"kind": "field",
|
|
4010
4102
|
"name": "subtitle",
|
|
4011
4103
|
"type": {
|
|
4012
4104
|
"text": "string"
|
|
4013
4105
|
},
|
|
4014
4106
|
"default": "''",
|
|
4015
4107
|
"description": "The subtitle of the card - part of header section",
|
|
4016
|
-
"
|
|
4108
|
+
"fieldName": "subtitle",
|
|
4017
4109
|
"inheritedFrom": {
|
|
4018
4110
|
"name": "CardComponentMixin",
|
|
4019
|
-
"module": "utils/mixins/CardComponentMixin.
|
|
4111
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
4020
4112
|
}
|
|
4021
4113
|
},
|
|
4022
4114
|
{
|
|
4023
|
-
"
|
|
4024
|
-
"name": "imageSrc",
|
|
4115
|
+
"name": "image-src",
|
|
4025
4116
|
"type": {
|
|
4026
4117
|
"text": "string"
|
|
4027
4118
|
},
|
|
4028
4119
|
"default": "''",
|
|
4029
4120
|
"description": "The image source URL to render on the card",
|
|
4030
|
-
"
|
|
4121
|
+
"fieldName": "imageSrc",
|
|
4031
4122
|
"inheritedFrom": {
|
|
4032
4123
|
"name": "CardComponentMixin",
|
|
4033
|
-
"module": "utils/mixins/CardComponentMixin.
|
|
4124
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
4034
4125
|
}
|
|
4035
4126
|
},
|
|
4036
4127
|
{
|
|
4037
|
-
"
|
|
4038
|
-
"name": "imageAlt",
|
|
4128
|
+
"name": "image-alt",
|
|
4039
4129
|
"type": {
|
|
4040
4130
|
"text": "string"
|
|
4041
4131
|
},
|
|
4042
4132
|
"default": "''",
|
|
4043
4133
|
"description": "The image alt for accessibility support",
|
|
4044
|
-
"
|
|
4134
|
+
"fieldName": "imageAlt",
|
|
4045
4135
|
"inheritedFrom": {
|
|
4046
4136
|
"name": "CardComponentMixin",
|
|
4047
|
-
"module": "utils/mixins/CardComponentMixin.
|
|
4137
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
4048
4138
|
}
|
|
4049
4139
|
},
|
|
4050
4140
|
{
|
|
4051
|
-
"kind": "field",
|
|
4052
4141
|
"name": "variant",
|
|
4053
4142
|
"type": {
|
|
4054
4143
|
"text": "CardVariant"
|
|
4055
4144
|
},
|
|
4056
4145
|
"description": "The variant of the card. It can either be set to 'border' or 'ghost'",
|
|
4057
4146
|
"default": "'border'",
|
|
4058
|
-
"
|
|
4147
|
+
"fieldName": "variant",
|
|
4059
4148
|
"inheritedFrom": {
|
|
4060
4149
|
"name": "CardComponentMixin",
|
|
4061
|
-
"module": "utils/mixins/CardComponentMixin.
|
|
4150
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
4062
4151
|
}
|
|
4063
4152
|
},
|
|
4064
4153
|
{
|
|
4065
|
-
"kind": "field",
|
|
4066
4154
|
"name": "orientation",
|
|
4067
4155
|
"type": {
|
|
4068
4156
|
"text": "CardOrientation"
|
|
4069
4157
|
},
|
|
4070
4158
|
"description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
|
|
4071
4159
|
"default": "'vertical'",
|
|
4072
|
-
"
|
|
4073
|
-
"reflects": true,
|
|
4160
|
+
"fieldName": "orientation",
|
|
4074
4161
|
"inheritedFrom": {
|
|
4075
4162
|
"name": "CardComponentMixin",
|
|
4076
|
-
"module": "utils/mixins/CardComponentMixin.
|
|
4163
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
4077
4164
|
}
|
|
4078
4165
|
},
|
|
4079
4166
|
{
|
|
4080
|
-
"
|
|
4081
|
-
"name": "titleTagName",
|
|
4167
|
+
"name": "title-tag-name",
|
|
4082
4168
|
"type": {
|
|
4083
4169
|
"text": "TagNameType"
|
|
4084
4170
|
},
|
|
4085
4171
|
"description": "The tag name for the card title. It supports all the types that `msc-text` supports",
|
|
4086
4172
|
"default": "'span'",
|
|
4087
|
-
"
|
|
4173
|
+
"fieldName": "titleTagName",
|
|
4088
4174
|
"inheritedFrom": {
|
|
4089
4175
|
"name": "CardComponentMixin",
|
|
4090
|
-
"module": "utils/mixins/CardComponentMixin.
|
|
4176
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
4091
4177
|
}
|
|
4092
4178
|
},
|
|
4093
4179
|
{
|
|
4094
|
-
"
|
|
4095
|
-
"name": "subtitleTagName",
|
|
4180
|
+
"name": "subtitle-tag-name",
|
|
4096
4181
|
"type": {
|
|
4097
4182
|
"text": "TagNameType"
|
|
4098
4183
|
},
|
|
4099
4184
|
"description": "The tag name for the subtitle. It supports all the types that `msc-text` supports",
|
|
4100
4185
|
"default": "'span'",
|
|
4101
|
-
"
|
|
4186
|
+
"fieldName": "subtitleTagName",
|
|
4102
4187
|
"inheritedFrom": {
|
|
4103
4188
|
"name": "CardComponentMixin",
|
|
4104
|
-
"module": "utils/mixins/CardComponentMixin.
|
|
4189
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
4105
4190
|
}
|
|
4106
4191
|
},
|
|
4107
4192
|
{
|
|
4108
|
-
"
|
|
4109
|
-
"name": "iconName",
|
|
4193
|
+
"name": "icon-name",
|
|
4110
4194
|
"type": {
|
|
4111
4195
|
"text": "IconNames | undefined"
|
|
4112
4196
|
},
|
|
4113
4197
|
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
4114
|
-
"
|
|
4198
|
+
"fieldName": "iconName",
|
|
4115
4199
|
"inheritedFrom": {
|
|
4116
4200
|
"name": "CardComponentMixin",
|
|
4117
|
-
"module": "utils/mixins/CardComponentMixin.
|
|
4201
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
4118
4202
|
}
|
|
4119
4203
|
},
|
|
4120
4204
|
{
|
|
4121
|
-
"
|
|
4122
|
-
"
|
|
4123
|
-
|
|
4124
|
-
"description": "Renders the image on the card if image source is provided",
|
|
4125
|
-
"return": {
|
|
4126
|
-
"type": {
|
|
4127
|
-
"text": ""
|
|
4128
|
-
}
|
|
4205
|
+
"name": "tabIndex",
|
|
4206
|
+
"type": {
|
|
4207
|
+
"text": "number"
|
|
4129
4208
|
},
|
|
4209
|
+
"default": "0",
|
|
4210
|
+
"description": "This property specifies the tab order of the element.",
|
|
4211
|
+
"fieldName": "tabIndex",
|
|
4130
4212
|
"inheritedFrom": {
|
|
4131
|
-
"name": "
|
|
4132
|
-
"module": "
|
|
4213
|
+
"name": "Buttonsimple",
|
|
4214
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
4133
4215
|
}
|
|
4134
4216
|
},
|
|
4135
4217
|
{
|
|
4136
|
-
"
|
|
4137
|
-
"
|
|
4138
|
-
|
|
4139
|
-
"description": "Renders the icon on the card if icon name is provided",
|
|
4140
|
-
"return": {
|
|
4141
|
-
"type": {
|
|
4142
|
-
"text": ""
|
|
4143
|
-
}
|
|
4218
|
+
"name": "disabled",
|
|
4219
|
+
"type": {
|
|
4220
|
+
"text": "boolean | undefined"
|
|
4144
4221
|
},
|
|
4222
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
4223
|
+
"default": "undefined",
|
|
4224
|
+
"fieldName": "disabled",
|
|
4145
4225
|
"inheritedFrom": {
|
|
4146
|
-
"name": "
|
|
4147
|
-
"module": "
|
|
4226
|
+
"name": "Buttonsimple",
|
|
4227
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
4148
4228
|
}
|
|
4149
4229
|
},
|
|
4150
4230
|
{
|
|
4151
|
-
"kind": "method",
|
|
4152
|
-
"name": "renderTitle",
|
|
4153
|
-
"privacy": "protected",
|
|
4154
|
-
"description": "Renders the title and subtitle on the card",
|
|
4155
|
-
"return": {
|
|
4156
|
-
"type": {
|
|
4157
|
-
"text": ""
|
|
4158
|
-
}
|
|
4159
|
-
},
|
|
4160
|
-
"inheritedFrom": {
|
|
4161
|
-
"name": "CardComponentMixin",
|
|
4162
|
-
"module": "utils/mixins/CardComponentMixin.js"
|
|
4163
|
-
}
|
|
4164
|
-
},
|
|
4165
|
-
{
|
|
4166
|
-
"kind": "field",
|
|
4167
|
-
"name": "tabIndex",
|
|
4168
|
-
"type": {
|
|
4169
|
-
"text": "number"
|
|
4170
|
-
},
|
|
4171
|
-
"default": "0",
|
|
4172
|
-
"description": "This property specifies the tab order of the element.",
|
|
4173
|
-
"attribute": "tabIndex",
|
|
4174
|
-
"reflects": true,
|
|
4175
|
-
"inheritedFrom": {
|
|
4176
|
-
"name": "Buttonsimple",
|
|
4177
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
4178
|
-
}
|
|
4179
|
-
},
|
|
4180
|
-
{
|
|
4181
|
-
"kind": "field",
|
|
4182
|
-
"name": "disabled",
|
|
4183
|
-
"type": {
|
|
4184
|
-
"text": "boolean | undefined"
|
|
4185
|
-
},
|
|
4186
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
4187
|
-
"default": "undefined",
|
|
4188
|
-
"attribute": "disabled",
|
|
4189
|
-
"reflects": true,
|
|
4190
|
-
"inheritedFrom": {
|
|
4191
|
-
"name": "Buttonsimple",
|
|
4192
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
4193
|
-
}
|
|
4194
|
-
},
|
|
4195
|
-
{
|
|
4196
|
-
"kind": "field",
|
|
4197
4231
|
"name": "active",
|
|
4198
4232
|
"type": {
|
|
4199
4233
|
"text": "boolean | undefined"
|
|
4200
4234
|
},
|
|
4201
4235
|
"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.",
|
|
4202
4236
|
"default": "undefined",
|
|
4203
|
-
"
|
|
4204
|
-
"reflects": true,
|
|
4237
|
+
"fieldName": "active",
|
|
4205
4238
|
"inheritedFrom": {
|
|
4206
4239
|
"name": "Buttonsimple",
|
|
4207
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
4240
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
4208
4241
|
}
|
|
4209
4242
|
},
|
|
4210
4243
|
{
|
|
4211
|
-
"
|
|
4212
|
-
"name": "softDisabled",
|
|
4244
|
+
"name": "soft-disabled",
|
|
4213
4245
|
"type": {
|
|
4214
4246
|
"text": "boolean | undefined"
|
|
4215
4247
|
},
|
|
4216
4248
|
"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.",
|
|
4217
4249
|
"default": "undefined",
|
|
4218
|
-
"
|
|
4219
|
-
"reflects": true,
|
|
4250
|
+
"fieldName": "softDisabled",
|
|
4220
4251
|
"inheritedFrom": {
|
|
4221
4252
|
"name": "Buttonsimple",
|
|
4222
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
4253
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
4223
4254
|
}
|
|
4224
4255
|
},
|
|
4225
4256
|
{
|
|
4226
|
-
"kind": "field",
|
|
4227
4257
|
"name": "size",
|
|
4228
4258
|
"type": {
|
|
4229
4259
|
"text": "ButtonSize"
|
|
4230
4260
|
},
|
|
4231
4261
|
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
4232
4262
|
"default": "32",
|
|
4233
|
-
"
|
|
4234
|
-
"reflects": true,
|
|
4263
|
+
"fieldName": "size",
|
|
4235
4264
|
"inheritedFrom": {
|
|
4236
4265
|
"name": "Buttonsimple",
|
|
4237
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
4266
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
4238
4267
|
}
|
|
4239
4268
|
},
|
|
4240
4269
|
{
|
|
4241
|
-
"kind": "field",
|
|
4242
4270
|
"name": "role",
|
|
4243
4271
|
"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.",
|
|
4244
4272
|
"default": "button",
|
|
4245
|
-
"
|
|
4246
|
-
"reflects": true,
|
|
4273
|
+
"fieldName": "role",
|
|
4247
4274
|
"inheritedFrom": {
|
|
4248
4275
|
"name": "Buttonsimple",
|
|
4249
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
4276
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
4250
4277
|
}
|
|
4251
4278
|
},
|
|
4252
4279
|
{
|
|
4253
|
-
"kind": "field",
|
|
4254
4280
|
"name": "ariaStateKey",
|
|
4255
4281
|
"type": {
|
|
4256
4282
|
"text": "string | undefined"
|
|
4257
4283
|
},
|
|
4258
4284
|
"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`",
|
|
4259
4285
|
"default": "'aria-pressed' (when)",
|
|
4260
|
-
"
|
|
4261
|
-
"reflects": true,
|
|
4286
|
+
"fieldName": "ariaStateKey",
|
|
4262
4287
|
"inheritedFrom": {
|
|
4263
4288
|
"name": "Buttonsimple",
|
|
4264
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
4289
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
4265
4290
|
}
|
|
4266
4291
|
},
|
|
4267
4292
|
{
|
|
4268
|
-
"kind": "field",
|
|
4269
4293
|
"name": "type",
|
|
4270
4294
|
"type": {
|
|
4271
4295
|
"text": "ButtonType"
|
|
4272
4296
|
},
|
|
4273
4297
|
"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.",
|
|
4274
4298
|
"default": "button",
|
|
4275
|
-
"
|
|
4276
|
-
"reflects": true,
|
|
4299
|
+
"fieldName": "type",
|
|
4277
4300
|
"inheritedFrom": {
|
|
4278
4301
|
"name": "Buttonsimple",
|
|
4279
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
4302
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
4280
4303
|
}
|
|
4304
|
+
}
|
|
4305
|
+
]
|
|
4306
|
+
}
|
|
4307
|
+
],
|
|
4308
|
+
"exports": [
|
|
4309
|
+
{
|
|
4310
|
+
"kind": "js",
|
|
4311
|
+
"name": "default",
|
|
4312
|
+
"declaration": {
|
|
4313
|
+
"name": "CardButton",
|
|
4314
|
+
"module": "components/cardbutton/cardbutton.component.js"
|
|
4315
|
+
}
|
|
4316
|
+
}
|
|
4317
|
+
]
|
|
4318
|
+
},
|
|
4319
|
+
{
|
|
4320
|
+
"kind": "javascript-module",
|
|
4321
|
+
"path": "components/card/card.component.js",
|
|
4322
|
+
"declarations": [
|
|
4323
|
+
{
|
|
4324
|
+
"kind": "class",
|
|
4325
|
+
"description": "The card component allows users to organize information in a structured and tangible\nformat that is visually appealing. `mdc-card` is a static component that supports\nthe following features:\n- Image\n- Header\n - Icon\n - Title\n - Subtitle\n- Body\n\nThe card can either be vertically or horizontally oriented.\n\nThere are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n\nTo make this card interactive, use the following slots:\n- `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n- `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n- `footer-button-primary`: This slot is for passing primary variant of\n`mdc-button` component within the footer section.\n- `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\nwithin the footer section.\n\nInteractive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.",
|
|
4326
|
+
"name": "Card",
|
|
4327
|
+
"slots": [
|
|
4328
|
+
{
|
|
4329
|
+
"description": "This slot is for passing the content before the body",
|
|
4330
|
+
"name": "before-body"
|
|
4281
4331
|
},
|
|
4282
4332
|
{
|
|
4283
|
-
"
|
|
4284
|
-
"name": "
|
|
4285
|
-
|
|
4286
|
-
|
|
4287
|
-
|
|
4288
|
-
|
|
4289
|
-
|
|
4333
|
+
"description": "This slot is for passing the text content for the card",
|
|
4334
|
+
"name": "body"
|
|
4335
|
+
},
|
|
4336
|
+
{
|
|
4337
|
+
"description": "This slot is for passing the content after the body",
|
|
4338
|
+
"name": "after-body"
|
|
4339
|
+
},
|
|
4340
|
+
{
|
|
4341
|
+
"description": "This slot is for passing `mdc-link` component within the footer section.",
|
|
4342
|
+
"name": "footer-link"
|
|
4343
|
+
},
|
|
4344
|
+
{
|
|
4345
|
+
"description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
|
|
4346
|
+
"name": "footer-button-primary"
|
|
4347
|
+
},
|
|
4348
|
+
{
|
|
4349
|
+
"description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
|
|
4350
|
+
"name": "footer-button-secondary"
|
|
4351
|
+
},
|
|
4352
|
+
{
|
|
4353
|
+
"description": "This slot is for passing the content before the body",
|
|
4354
|
+
"name": "before-body"
|
|
4355
|
+
},
|
|
4356
|
+
{
|
|
4357
|
+
"description": "This slot is for passing the text content for the card",
|
|
4358
|
+
"name": "body"
|
|
4290
4359
|
},
|
|
4360
|
+
{
|
|
4361
|
+
"description": "This slot is for passing the content after the body",
|
|
4362
|
+
"name": "after-body"
|
|
4363
|
+
}
|
|
4364
|
+
],
|
|
4365
|
+
"members": [
|
|
4291
4366
|
{
|
|
4292
4367
|
"kind": "method",
|
|
4293
|
-
"name": "
|
|
4368
|
+
"name": "renderHeader",
|
|
4294
4369
|
"privacy": "protected",
|
|
4295
|
-
"
|
|
4296
|
-
|
|
4297
|
-
|
|
4298
|
-
"
|
|
4299
|
-
"text": "HTMLElement"
|
|
4300
|
-
},
|
|
4301
|
-
"description": "The button element"
|
|
4302
|
-
},
|
|
4303
|
-
{
|
|
4304
|
-
"name": "active",
|
|
4305
|
-
"optional": true,
|
|
4306
|
-
"type": {
|
|
4307
|
-
"text": "boolean"
|
|
4308
|
-
},
|
|
4309
|
-
"description": "The active state of the element"
|
|
4370
|
+
"description": "Renders the header of the card if title is provided",
|
|
4371
|
+
"return": {
|
|
4372
|
+
"type": {
|
|
4373
|
+
"text": ""
|
|
4310
4374
|
}
|
|
4311
|
-
],
|
|
4312
|
-
"description": "Sets the ariaStateKey attributes based on the active state of the button.",
|
|
4313
|
-
"inheritedFrom": {
|
|
4314
|
-
"name": "Buttonsimple",
|
|
4315
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
4316
4375
|
}
|
|
4317
4376
|
},
|
|
4318
4377
|
{
|
|
4319
|
-
"kind": "
|
|
4320
|
-
"name": "
|
|
4321
|
-
"
|
|
4322
|
-
|
|
4323
|
-
|
|
4324
|
-
|
|
4325
|
-
|
|
4326
|
-
|
|
4327
|
-
},
|
|
4328
|
-
"description": "The button element."
|
|
4329
|
-
},
|
|
4330
|
-
{
|
|
4331
|
-
"name": "softDisabled",
|
|
4332
|
-
"optional": true,
|
|
4333
|
-
"type": {
|
|
4334
|
-
"text": "boolean"
|
|
4335
|
-
},
|
|
4336
|
-
"description": "The soft-disabled state."
|
|
4337
|
-
}
|
|
4338
|
-
],
|
|
4339
|
-
"description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
|
|
4378
|
+
"kind": "field",
|
|
4379
|
+
"name": "cardTitle",
|
|
4380
|
+
"type": {
|
|
4381
|
+
"text": "string"
|
|
4382
|
+
},
|
|
4383
|
+
"default": "''",
|
|
4384
|
+
"description": "The title of the card - part of header section",
|
|
4385
|
+
"attribute": "card-title",
|
|
4340
4386
|
"inheritedFrom": {
|
|
4341
|
-
"name": "
|
|
4342
|
-
"module": "
|
|
4387
|
+
"name": "CardComponentMixin",
|
|
4388
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
4343
4389
|
}
|
|
4344
4390
|
},
|
|
4345
4391
|
{
|
|
4346
|
-
"kind": "
|
|
4347
|
-
"name": "
|
|
4348
|
-
"
|
|
4349
|
-
|
|
4350
|
-
|
|
4351
|
-
|
|
4352
|
-
|
|
4353
|
-
|
|
4354
|
-
},
|
|
4355
|
-
"description": "The button element."
|
|
4356
|
-
},
|
|
4357
|
-
{
|
|
4358
|
-
"name": "disabled",
|
|
4359
|
-
"type": {
|
|
4360
|
-
"text": "boolean"
|
|
4361
|
-
},
|
|
4362
|
-
"description": "The disabled state."
|
|
4363
|
-
}
|
|
4364
|
-
],
|
|
4365
|
-
"description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
|
|
4392
|
+
"kind": "field",
|
|
4393
|
+
"name": "subtitle",
|
|
4394
|
+
"type": {
|
|
4395
|
+
"text": "string"
|
|
4396
|
+
},
|
|
4397
|
+
"default": "''",
|
|
4398
|
+
"description": "The subtitle of the card - part of header section",
|
|
4399
|
+
"attribute": "subtitle",
|
|
4366
4400
|
"inheritedFrom": {
|
|
4367
|
-
"name": "
|
|
4368
|
-
"module": "
|
|
4401
|
+
"name": "CardComponentMixin",
|
|
4402
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
4369
4403
|
}
|
|
4370
4404
|
},
|
|
4371
4405
|
{
|
|
4372
|
-
"kind": "
|
|
4373
|
-
"name": "
|
|
4374
|
-
"
|
|
4406
|
+
"kind": "field",
|
|
4407
|
+
"name": "imageSrc",
|
|
4408
|
+
"type": {
|
|
4409
|
+
"text": "string"
|
|
4410
|
+
},
|
|
4411
|
+
"default": "''",
|
|
4412
|
+
"description": "The image source URL to render on the card",
|
|
4413
|
+
"attribute": "image-src",
|
|
4375
4414
|
"inheritedFrom": {
|
|
4376
|
-
"name": "
|
|
4377
|
-
"module": "
|
|
4415
|
+
"name": "CardComponentMixin",
|
|
4416
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
4378
4417
|
}
|
|
4379
4418
|
},
|
|
4380
4419
|
{
|
|
4381
|
-
"kind": "
|
|
4382
|
-
"name": "
|
|
4383
|
-
"
|
|
4384
|
-
|
|
4420
|
+
"kind": "field",
|
|
4421
|
+
"name": "imageAlt",
|
|
4422
|
+
"type": {
|
|
4423
|
+
"text": "string"
|
|
4424
|
+
},
|
|
4425
|
+
"default": "''",
|
|
4426
|
+
"description": "The image alt for accessibility support",
|
|
4427
|
+
"attribute": "image-alt",
|
|
4385
4428
|
"inheritedFrom": {
|
|
4386
|
-
"name": "
|
|
4387
|
-
"module": "
|
|
4429
|
+
"name": "CardComponentMixin",
|
|
4430
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
4388
4431
|
}
|
|
4389
4432
|
},
|
|
4390
4433
|
{
|
|
4391
|
-
"kind": "
|
|
4392
|
-
"name": "
|
|
4393
|
-
"
|
|
4394
|
-
|
|
4395
|
-
|
|
4396
|
-
|
|
4397
|
-
|
|
4398
|
-
|
|
4399
|
-
},
|
|
4400
|
-
"description": "The keyboard event."
|
|
4401
|
-
}
|
|
4402
|
-
],
|
|
4403
|
-
"description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
|
|
4434
|
+
"kind": "field",
|
|
4435
|
+
"name": "variant",
|
|
4436
|
+
"type": {
|
|
4437
|
+
"text": "CardVariant"
|
|
4438
|
+
},
|
|
4439
|
+
"description": "The variant of the card. It can either be set to 'border' or 'ghost'",
|
|
4440
|
+
"default": "'border'",
|
|
4441
|
+
"attribute": "variant",
|
|
4404
4442
|
"inheritedFrom": {
|
|
4405
|
-
"name": "
|
|
4406
|
-
"module": "
|
|
4443
|
+
"name": "CardComponentMixin",
|
|
4444
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
4407
4445
|
}
|
|
4408
4446
|
},
|
|
4409
4447
|
{
|
|
4410
|
-
"kind": "
|
|
4411
|
-
"name": "
|
|
4412
|
-
"
|
|
4413
|
-
|
|
4414
|
-
|
|
4415
|
-
|
|
4416
|
-
|
|
4417
|
-
|
|
4418
|
-
|
|
4419
|
-
"description": "The keyboard event."
|
|
4420
|
-
}
|
|
4421
|
-
],
|
|
4422
|
-
"description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
|
|
4448
|
+
"kind": "field",
|
|
4449
|
+
"name": "orientation",
|
|
4450
|
+
"type": {
|
|
4451
|
+
"text": "CardOrientation"
|
|
4452
|
+
},
|
|
4453
|
+
"description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
|
|
4454
|
+
"default": "'vertical'",
|
|
4455
|
+
"attribute": "orientation",
|
|
4456
|
+
"reflects": true,
|
|
4423
4457
|
"inheritedFrom": {
|
|
4424
|
-
"name": "
|
|
4425
|
-
"module": "
|
|
4458
|
+
"name": "CardComponentMixin",
|
|
4459
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
4426
4460
|
}
|
|
4427
|
-
}
|
|
4428
|
-
],
|
|
4429
|
-
"events": [
|
|
4461
|
+
},
|
|
4430
4462
|
{
|
|
4431
|
-
"
|
|
4432
|
-
"name": "
|
|
4433
|
-
"
|
|
4463
|
+
"kind": "field",
|
|
4464
|
+
"name": "titleTagName",
|
|
4465
|
+
"type": {
|
|
4466
|
+
"text": "TagNameType"
|
|
4467
|
+
},
|
|
4468
|
+
"description": "The tag name for the card title. It supports all the types that `msc-text` supports",
|
|
4469
|
+
"default": "'span'",
|
|
4470
|
+
"attribute": "title-tag-name",
|
|
4434
4471
|
"inheritedFrom": {
|
|
4435
|
-
"name": "
|
|
4436
|
-
"module": "
|
|
4472
|
+
"name": "CardComponentMixin",
|
|
4473
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
4437
4474
|
}
|
|
4438
4475
|
},
|
|
4439
4476
|
{
|
|
4440
|
-
"
|
|
4441
|
-
"name": "
|
|
4442
|
-
"
|
|
4477
|
+
"kind": "field",
|
|
4478
|
+
"name": "subtitleTagName",
|
|
4479
|
+
"type": {
|
|
4480
|
+
"text": "TagNameType"
|
|
4481
|
+
},
|
|
4482
|
+
"description": "The tag name for the subtitle. It supports all the types that `msc-text` supports",
|
|
4483
|
+
"default": "'span'",
|
|
4484
|
+
"attribute": "subtitle-tag-name",
|
|
4443
4485
|
"inheritedFrom": {
|
|
4444
|
-
"name": "
|
|
4445
|
-
"module": "
|
|
4486
|
+
"name": "CardComponentMixin",
|
|
4487
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
4446
4488
|
}
|
|
4447
4489
|
},
|
|
4448
4490
|
{
|
|
4449
|
-
"
|
|
4450
|
-
"name": "
|
|
4451
|
-
"
|
|
4491
|
+
"kind": "field",
|
|
4492
|
+
"name": "iconName",
|
|
4493
|
+
"type": {
|
|
4494
|
+
"text": "IconNames | undefined"
|
|
4495
|
+
},
|
|
4496
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
4497
|
+
"attribute": "icon-name",
|
|
4452
4498
|
"inheritedFrom": {
|
|
4453
|
-
"name": "
|
|
4454
|
-
"module": "
|
|
4499
|
+
"name": "CardComponentMixin",
|
|
4500
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
4455
4501
|
}
|
|
4456
4502
|
},
|
|
4457
4503
|
{
|
|
4458
|
-
"
|
|
4459
|
-
"name": "
|
|
4460
|
-
"
|
|
4504
|
+
"kind": "method",
|
|
4505
|
+
"name": "renderImage",
|
|
4506
|
+
"privacy": "protected",
|
|
4507
|
+
"description": "Renders the image on the card if image source is provided",
|
|
4508
|
+
"return": {
|
|
4509
|
+
"type": {
|
|
4510
|
+
"text": ""
|
|
4511
|
+
}
|
|
4512
|
+
},
|
|
4461
4513
|
"inheritedFrom": {
|
|
4462
|
-
"name": "
|
|
4463
|
-
"module": "
|
|
4514
|
+
"name": "CardComponentMixin",
|
|
4515
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
4516
|
+
}
|
|
4517
|
+
},
|
|
4518
|
+
{
|
|
4519
|
+
"kind": "method",
|
|
4520
|
+
"name": "renderIcon",
|
|
4521
|
+
"privacy": "protected",
|
|
4522
|
+
"description": "Renders the icon on the card if icon name is provided",
|
|
4523
|
+
"return": {
|
|
4524
|
+
"type": {
|
|
4525
|
+
"text": ""
|
|
4526
|
+
}
|
|
4527
|
+
},
|
|
4528
|
+
"inheritedFrom": {
|
|
4529
|
+
"name": "CardComponentMixin",
|
|
4530
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
4531
|
+
}
|
|
4532
|
+
},
|
|
4533
|
+
{
|
|
4534
|
+
"kind": "method",
|
|
4535
|
+
"name": "renderTitle",
|
|
4536
|
+
"privacy": "protected",
|
|
4537
|
+
"description": "Renders the title and subtitle on the card",
|
|
4538
|
+
"return": {
|
|
4539
|
+
"type": {
|
|
4540
|
+
"text": ""
|
|
4541
|
+
}
|
|
4542
|
+
},
|
|
4543
|
+
"inheritedFrom": {
|
|
4544
|
+
"name": "CardComponentMixin",
|
|
4545
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
4546
|
+
}
|
|
4547
|
+
},
|
|
4548
|
+
{
|
|
4549
|
+
"kind": "method",
|
|
4550
|
+
"name": "renderFooter",
|
|
4551
|
+
"privacy": "protected",
|
|
4552
|
+
"description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
|
|
4553
|
+
"return": {
|
|
4554
|
+
"type": {
|
|
4555
|
+
"text": ""
|
|
4556
|
+
}
|
|
4557
|
+
},
|
|
4558
|
+
"inheritedFrom": {
|
|
4559
|
+
"name": "CardAndDialogFooterMixin",
|
|
4560
|
+
"module": "utils/mixins/CardAndDialogFooterMixin.js"
|
|
4464
4561
|
}
|
|
4465
4562
|
}
|
|
4466
4563
|
],
|
|
@@ -4468,14 +4565,18 @@
|
|
|
4468
4565
|
{
|
|
4469
4566
|
"name": "CardComponentMixin",
|
|
4470
4567
|
"module": "/src/utils/mixins/CardComponentMixin"
|
|
4568
|
+
},
|
|
4569
|
+
{
|
|
4570
|
+
"name": "CardAndDialogFooterMixin",
|
|
4571
|
+
"module": "/src/utils/mixins/CardAndDialogFooterMixin"
|
|
4471
4572
|
}
|
|
4472
4573
|
],
|
|
4473
4574
|
"superclass": {
|
|
4474
|
-
"name": "
|
|
4475
|
-
"module": "/src/
|
|
4575
|
+
"name": "Component",
|
|
4576
|
+
"module": "/src/models"
|
|
4476
4577
|
},
|
|
4477
|
-
"tagName": "mdc-
|
|
4478
|
-
"jsDoc": "/**\n *
|
|
4578
|
+
"tagName": "mdc-card",
|
|
4579
|
+
"jsDoc": "/**\n * The card component allows users to organize information in a structured and tangible\n * format that is visually appealing. `mdc-card` is a static component that supports\n * the following features:\n * - Image\n * - Header\n * - Icon\n * - Title\n * - Subtitle\n * - Body\n *\n * The card can either be vertically or horizontally oriented.\n *\n * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n *\n * To make this card interactive, use the following slots:\n * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n * - `footer-button-primary`: This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n *\n * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n *\n * @tagname mdc-card\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n *\n */",
|
|
4479
4580
|
"customElement": true,
|
|
4480
4581
|
"attributes": [
|
|
4481
4582
|
{
|
|
@@ -4593,161 +4694,60 @@
|
|
|
4593
4694
|
"name": "CardComponentMixin",
|
|
4594
4695
|
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
4595
4696
|
}
|
|
4697
|
+
}
|
|
4698
|
+
]
|
|
4699
|
+
}
|
|
4700
|
+
],
|
|
4701
|
+
"exports": [
|
|
4702
|
+
{
|
|
4703
|
+
"kind": "js",
|
|
4704
|
+
"name": "default",
|
|
4705
|
+
"declaration": {
|
|
4706
|
+
"name": "Card",
|
|
4707
|
+
"module": "components/card/card.component.js"
|
|
4708
|
+
}
|
|
4709
|
+
}
|
|
4710
|
+
]
|
|
4711
|
+
},
|
|
4712
|
+
{
|
|
4713
|
+
"kind": "javascript-module",
|
|
4714
|
+
"path": "components/cardcheckbox/cardcheckbox.component.js",
|
|
4715
|
+
"declarations": [
|
|
4716
|
+
{
|
|
4717
|
+
"kind": "class",
|
|
4718
|
+
"description": "cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n\nWhile using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\nThis card would have events for selected and unselected (similar to checkbox)\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\nMake sure to pass only non-interactable elements within the slots.\n\nMake sure to pass the `card-title` mandatorily for this card.",
|
|
4719
|
+
"name": "CardCheckbox",
|
|
4720
|
+
"slots": [
|
|
4721
|
+
{
|
|
4722
|
+
"description": "This slot is for passing the content before the body",
|
|
4723
|
+
"name": "before-body",
|
|
4724
|
+
"inheritedFrom": {
|
|
4725
|
+
"name": "Card",
|
|
4726
|
+
"module": "src/components/card/card.component.ts"
|
|
4727
|
+
}
|
|
4596
4728
|
},
|
|
4597
4729
|
{
|
|
4598
|
-
"
|
|
4599
|
-
"
|
|
4600
|
-
"text": "number"
|
|
4601
|
-
},
|
|
4602
|
-
"default": "0",
|
|
4603
|
-
"description": "This property specifies the tab order of the element.",
|
|
4604
|
-
"fieldName": "tabIndex",
|
|
4730
|
+
"description": "This slot is for passing the text content for the card",
|
|
4731
|
+
"name": "body",
|
|
4605
4732
|
"inheritedFrom": {
|
|
4606
|
-
"name": "
|
|
4607
|
-
"module": "src/components/
|
|
4733
|
+
"name": "Card",
|
|
4734
|
+
"module": "src/components/card/card.component.ts"
|
|
4608
4735
|
}
|
|
4609
4736
|
},
|
|
4610
4737
|
{
|
|
4611
|
-
"
|
|
4612
|
-
"
|
|
4613
|
-
"text": "boolean | undefined"
|
|
4614
|
-
},
|
|
4615
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
4616
|
-
"default": "undefined",
|
|
4617
|
-
"fieldName": "disabled",
|
|
4738
|
+
"description": "This slot is for passing the content after the body",
|
|
4739
|
+
"name": "after-body",
|
|
4618
4740
|
"inheritedFrom": {
|
|
4619
|
-
"name": "
|
|
4620
|
-
"module": "src/components/
|
|
4741
|
+
"name": "Card",
|
|
4742
|
+
"module": "src/components/card/card.component.ts"
|
|
4621
4743
|
}
|
|
4622
4744
|
},
|
|
4623
4745
|
{
|
|
4624
|
-
"
|
|
4625
|
-
"
|
|
4626
|
-
"text": "boolean | undefined"
|
|
4627
|
-
},
|
|
4628
|
-
"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.",
|
|
4629
|
-
"default": "undefined",
|
|
4630
|
-
"fieldName": "active",
|
|
4746
|
+
"description": "This slot is for passing `mdc-link` component within the footer section.",
|
|
4747
|
+
"name": "footer-link",
|
|
4631
4748
|
"inheritedFrom": {
|
|
4632
|
-
"name": "
|
|
4633
|
-
"module": "src/components/
|
|
4634
|
-
}
|
|
4635
|
-
},
|
|
4636
|
-
{
|
|
4637
|
-
"name": "soft-disabled",
|
|
4638
|
-
"type": {
|
|
4639
|
-
"text": "boolean | undefined"
|
|
4640
|
-
},
|
|
4641
|
-
"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.",
|
|
4642
|
-
"default": "undefined",
|
|
4643
|
-
"fieldName": "softDisabled",
|
|
4644
|
-
"inheritedFrom": {
|
|
4645
|
-
"name": "Buttonsimple",
|
|
4646
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
4647
|
-
}
|
|
4648
|
-
},
|
|
4649
|
-
{
|
|
4650
|
-
"name": "size",
|
|
4651
|
-
"type": {
|
|
4652
|
-
"text": "ButtonSize"
|
|
4653
|
-
},
|
|
4654
|
-
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
4655
|
-
"default": "32",
|
|
4656
|
-
"fieldName": "size",
|
|
4657
|
-
"inheritedFrom": {
|
|
4658
|
-
"name": "Buttonsimple",
|
|
4659
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
4660
|
-
}
|
|
4661
|
-
},
|
|
4662
|
-
{
|
|
4663
|
-
"name": "role",
|
|
4664
|
-
"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.",
|
|
4665
|
-
"default": "button",
|
|
4666
|
-
"fieldName": "role",
|
|
4667
|
-
"inheritedFrom": {
|
|
4668
|
-
"name": "Buttonsimple",
|
|
4669
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
4670
|
-
}
|
|
4671
|
-
},
|
|
4672
|
-
{
|
|
4673
|
-
"name": "ariaStateKey",
|
|
4674
|
-
"type": {
|
|
4675
|
-
"text": "string | undefined"
|
|
4676
|
-
},
|
|
4677
|
-
"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`",
|
|
4678
|
-
"default": "'aria-pressed' (when)",
|
|
4679
|
-
"fieldName": "ariaStateKey",
|
|
4680
|
-
"inheritedFrom": {
|
|
4681
|
-
"name": "Buttonsimple",
|
|
4682
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
4683
|
-
}
|
|
4684
|
-
},
|
|
4685
|
-
{
|
|
4686
|
-
"name": "type",
|
|
4687
|
-
"type": {
|
|
4688
|
-
"text": "ButtonType"
|
|
4689
|
-
},
|
|
4690
|
-
"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.",
|
|
4691
|
-
"default": "button",
|
|
4692
|
-
"fieldName": "type",
|
|
4693
|
-
"inheritedFrom": {
|
|
4694
|
-
"name": "Buttonsimple",
|
|
4695
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
4696
|
-
}
|
|
4697
|
-
}
|
|
4698
|
-
]
|
|
4699
|
-
}
|
|
4700
|
-
],
|
|
4701
|
-
"exports": [
|
|
4702
|
-
{
|
|
4703
|
-
"kind": "js",
|
|
4704
|
-
"name": "default",
|
|
4705
|
-
"declaration": {
|
|
4706
|
-
"name": "CardButton",
|
|
4707
|
-
"module": "components/cardbutton/cardbutton.component.js"
|
|
4708
|
-
}
|
|
4709
|
-
}
|
|
4710
|
-
]
|
|
4711
|
-
},
|
|
4712
|
-
{
|
|
4713
|
-
"kind": "javascript-module",
|
|
4714
|
-
"path": "components/cardcheckbox/cardcheckbox.component.js",
|
|
4715
|
-
"declarations": [
|
|
4716
|
-
{
|
|
4717
|
-
"kind": "class",
|
|
4718
|
-
"description": "cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n\nWhile using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\nThis card would have events for selected and unselected (similar to checkbox)\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\nMake sure to pass only non-interactable elements within the slots.\n\nMake sure to pass the `card-title` mandatorily for this card.",
|
|
4719
|
-
"name": "CardCheckbox",
|
|
4720
|
-
"slots": [
|
|
4721
|
-
{
|
|
4722
|
-
"description": "This slot is for passing the content before the body",
|
|
4723
|
-
"name": "before-body",
|
|
4724
|
-
"inheritedFrom": {
|
|
4725
|
-
"name": "Card",
|
|
4726
|
-
"module": "src/components/card/card.component.ts"
|
|
4727
|
-
}
|
|
4728
|
-
},
|
|
4729
|
-
{
|
|
4730
|
-
"description": "This slot is for passing the text content for the card",
|
|
4731
|
-
"name": "body",
|
|
4732
|
-
"inheritedFrom": {
|
|
4733
|
-
"name": "Card",
|
|
4734
|
-
"module": "src/components/card/card.component.ts"
|
|
4735
|
-
}
|
|
4736
|
-
},
|
|
4737
|
-
{
|
|
4738
|
-
"description": "This slot is for passing the content after the body",
|
|
4739
|
-
"name": "after-body",
|
|
4740
|
-
"inheritedFrom": {
|
|
4741
|
-
"name": "Card",
|
|
4742
|
-
"module": "src/components/card/card.component.ts"
|
|
4743
|
-
}
|
|
4744
|
-
},
|
|
4745
|
-
{
|
|
4746
|
-
"description": "This slot is for passing `mdc-link` component within the footer section.",
|
|
4747
|
-
"name": "footer-link",
|
|
4748
|
-
"inheritedFrom": {
|
|
4749
|
-
"name": "Card",
|
|
4750
|
-
"module": "src/components/card/card.component.ts"
|
|
4749
|
+
"name": "Card",
|
|
4750
|
+
"module": "src/components/card/card.component.ts"
|
|
4751
4751
|
}
|
|
4752
4752
|
},
|
|
4753
4753
|
{
|
|
@@ -24830,6 +24830,124 @@
|
|
|
24830
24830
|
}
|
|
24831
24831
|
]
|
|
24832
24832
|
},
|
|
24833
|
+
{
|
|
24834
|
+
"kind": "javascript-module",
|
|
24835
|
+
"path": "components/themeprovider/themeprovider.component.js",
|
|
24836
|
+
"declarations": [
|
|
24837
|
+
{
|
|
24838
|
+
"kind": "class",
|
|
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
|
+
"cssProperties": [
|
|
24842
|
+
{
|
|
24843
|
+
"description": "Option to override the default color, default: color-theme-text-primary-normal",
|
|
24844
|
+
"name": "--mdc-themeprovider-color-default"
|
|
24845
|
+
},
|
|
24846
|
+
{
|
|
24847
|
+
"description": "Option to override the font family, default: `Momentum` (from momentum-design/fonts)",
|
|
24848
|
+
"name": "--mdc-themeprovider-font-family"
|
|
24849
|
+
},
|
|
24850
|
+
{
|
|
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
|
+
},
|
|
24833
24951
|
{
|
|
24834
24952
|
"kind": "javascript-module",
|
|
24835
24953
|
"path": "components/toggle/toggle.component.js",
|
|
@@ -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",
|