@momentum-design/components 0.24.0 → 0.24.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +1282 -1282
- package/dist/react/index.d.ts +3 -3
- package/dist/react/index.js +3 -3
- package/package.json +1 -1
|
@@ -4,35 +4,110 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "components/
|
|
7
|
+
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "The `mdc-
|
|
12
|
-
"name": "
|
|
13
|
-
"
|
|
11
|
+
"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.",
|
|
12
|
+
"name": "AvatarButton",
|
|
13
|
+
"members": [
|
|
14
14
|
{
|
|
15
|
-
"
|
|
16
|
-
"name": "
|
|
15
|
+
"kind": "field",
|
|
16
|
+
"name": "ariaLabel",
|
|
17
|
+
"type": {
|
|
18
|
+
"text": "string | null"
|
|
19
|
+
},
|
|
20
|
+
"default": "null",
|
|
21
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
22
|
+
"attribute": "aria-label"
|
|
17
23
|
},
|
|
18
24
|
{
|
|
19
|
-
"
|
|
20
|
-
"name": "
|
|
25
|
+
"kind": "method",
|
|
26
|
+
"name": "setSize",
|
|
27
|
+
"privacy": "private",
|
|
28
|
+
"parameters": [
|
|
29
|
+
{
|
|
30
|
+
"name": "size",
|
|
31
|
+
"type": {
|
|
32
|
+
"text": "AvatarSize"
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
]
|
|
21
36
|
},
|
|
22
37
|
{
|
|
23
|
-
"
|
|
24
|
-
"name": "
|
|
38
|
+
"kind": "field",
|
|
39
|
+
"name": "active",
|
|
40
|
+
"type": {
|
|
41
|
+
"text": "boolean"
|
|
42
|
+
},
|
|
43
|
+
"default": "undefined as unknown",
|
|
44
|
+
"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.",
|
|
45
|
+
"attribute": "active",
|
|
46
|
+
"reflects": true,
|
|
47
|
+
"inheritedFrom": {
|
|
48
|
+
"name": "Buttonsimple",
|
|
49
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
50
|
+
}
|
|
25
51
|
},
|
|
26
52
|
{
|
|
27
|
-
"
|
|
28
|
-
"name": "
|
|
53
|
+
"kind": "field",
|
|
54
|
+
"name": "disabled",
|
|
55
|
+
"type": {
|
|
56
|
+
"text": "boolean"
|
|
57
|
+
},
|
|
58
|
+
"default": "undefined as unknown",
|
|
59
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
60
|
+
"attribute": "disabled",
|
|
61
|
+
"reflects": true,
|
|
62
|
+
"inheritedFrom": {
|
|
63
|
+
"name": "DisabledMixin",
|
|
64
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
65
|
+
}
|
|
29
66
|
},
|
|
30
67
|
{
|
|
31
|
-
"
|
|
32
|
-
"name": "
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
68
|
+
"kind": "field",
|
|
69
|
+
"name": "softDisabled",
|
|
70
|
+
"type": {
|
|
71
|
+
"text": "boolean"
|
|
72
|
+
},
|
|
73
|
+
"default": "undefined as unknown",
|
|
74
|
+
"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.",
|
|
75
|
+
"attribute": "soft-disabled",
|
|
76
|
+
"inheritedFrom": {
|
|
77
|
+
"name": "Buttonsimple",
|
|
78
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"kind": "field",
|
|
83
|
+
"name": "role",
|
|
84
|
+
"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.",
|
|
85
|
+
"default": "'button'",
|
|
86
|
+
"attribute": "role",
|
|
87
|
+
"reflects": true,
|
|
88
|
+
"type": {
|
|
89
|
+
"text": "string"
|
|
90
|
+
},
|
|
91
|
+
"inheritedFrom": {
|
|
92
|
+
"name": "Buttonsimple",
|
|
93
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"kind": "field",
|
|
98
|
+
"name": "type",
|
|
99
|
+
"type": {
|
|
100
|
+
"text": "ButtonType"
|
|
101
|
+
},
|
|
102
|
+
"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.",
|
|
103
|
+
"default": "button",
|
|
104
|
+
"attribute": "type",
|
|
105
|
+
"reflects": true,
|
|
106
|
+
"inheritedFrom": {
|
|
107
|
+
"name": "Buttonsimple",
|
|
108
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
109
|
+
}
|
|
110
|
+
},
|
|
36
111
|
{
|
|
37
112
|
"kind": "field",
|
|
38
113
|
"name": "src",
|
|
@@ -76,15 +151,15 @@
|
|
|
76
151
|
"kind": "field",
|
|
77
152
|
"name": "size",
|
|
78
153
|
"type": {
|
|
79
|
-
"text": "
|
|
154
|
+
"text": "ButtonSize"
|
|
80
155
|
},
|
|
81
156
|
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
82
157
|
"default": "32",
|
|
83
158
|
"attribute": "size",
|
|
84
159
|
"reflects": true,
|
|
85
160
|
"inheritedFrom": {
|
|
86
|
-
"name": "
|
|
87
|
-
"module": "
|
|
161
|
+
"name": "Buttonsimple",
|
|
162
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
88
163
|
}
|
|
89
164
|
},
|
|
90
165
|
{
|
|
@@ -126,91 +201,232 @@
|
|
|
126
201
|
"name": "IconNameMixin",
|
|
127
202
|
"module": "utils/mixins/IconNameMixin.js"
|
|
128
203
|
}
|
|
129
|
-
}
|
|
130
|
-
],
|
|
131
|
-
"mixins": [
|
|
132
|
-
{
|
|
133
|
-
"name": "AvatarComponentMixin",
|
|
134
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
135
204
|
},
|
|
136
205
|
{
|
|
137
|
-
"
|
|
138
|
-
"
|
|
139
|
-
}
|
|
140
|
-
],
|
|
141
|
-
"superclass": {
|
|
142
|
-
"name": "Component",
|
|
143
|
-
"module": "/src/models"
|
|
144
|
-
},
|
|
145
|
-
"tagName": "mdc-avatar",
|
|
146
|
-
"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 */",
|
|
147
|
-
"customElement": true,
|
|
148
|
-
"attributes": [
|
|
149
|
-
{
|
|
150
|
-
"name": "src",
|
|
206
|
+
"kind": "field",
|
|
207
|
+
"name": "tabIndex",
|
|
151
208
|
"type": {
|
|
152
|
-
"text": "
|
|
209
|
+
"text": "number"
|
|
153
210
|
},
|
|
154
|
-
"
|
|
155
|
-
"
|
|
211
|
+
"default": "0",
|
|
212
|
+
"description": "This property specifies the tab order of the element.",
|
|
213
|
+
"attribute": "tabIndex",
|
|
214
|
+
"reflects": true,
|
|
156
215
|
"inheritedFrom": {
|
|
157
|
-
"name": "
|
|
158
|
-
"module": "
|
|
216
|
+
"name": "TabIndexMixin",
|
|
217
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
159
218
|
}
|
|
160
219
|
},
|
|
161
220
|
{
|
|
162
|
-
"
|
|
163
|
-
"
|
|
164
|
-
|
|
165
|
-
},
|
|
166
|
-
"description": "The initials to be displayed for the avatar.",
|
|
167
|
-
"fieldName": "initials",
|
|
221
|
+
"kind": "method",
|
|
222
|
+
"name": "executeAction",
|
|
223
|
+
"privacy": "protected",
|
|
168
224
|
"inheritedFrom": {
|
|
169
|
-
"name": "
|
|
170
|
-
"module": "
|
|
225
|
+
"name": "Buttonsimple",
|
|
226
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
171
227
|
}
|
|
172
228
|
},
|
|
173
229
|
{
|
|
174
|
-
"
|
|
175
|
-
"
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
230
|
+
"kind": "method",
|
|
231
|
+
"name": "setActive",
|
|
232
|
+
"privacy": "protected",
|
|
233
|
+
"parameters": [
|
|
234
|
+
{
|
|
235
|
+
"name": "element",
|
|
236
|
+
"type": {
|
|
237
|
+
"text": "HTMLElement"
|
|
238
|
+
},
|
|
239
|
+
"description": "The button element"
|
|
240
|
+
},
|
|
241
|
+
{
|
|
242
|
+
"name": "active",
|
|
243
|
+
"type": {
|
|
244
|
+
"text": "boolean"
|
|
245
|
+
},
|
|
246
|
+
"description": "The active state of the element"
|
|
247
|
+
}
|
|
248
|
+
],
|
|
249
|
+
"description": "Sets the aria-pressed attribute based on the active state of the button.",
|
|
180
250
|
"inheritedFrom": {
|
|
181
|
-
"name": "
|
|
182
|
-
"module": "
|
|
251
|
+
"name": "Buttonsimple",
|
|
252
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
183
253
|
}
|
|
184
254
|
},
|
|
185
255
|
{
|
|
186
|
-
"
|
|
187
|
-
"
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
256
|
+
"kind": "method",
|
|
257
|
+
"name": "setSoftDisabled",
|
|
258
|
+
"privacy": "private",
|
|
259
|
+
"parameters": [
|
|
260
|
+
{
|
|
261
|
+
"name": "element",
|
|
262
|
+
"type": {
|
|
263
|
+
"text": "HTMLElement"
|
|
264
|
+
},
|
|
265
|
+
"description": "The button element."
|
|
266
|
+
},
|
|
267
|
+
{
|
|
268
|
+
"name": "softDisabled",
|
|
269
|
+
"type": {
|
|
270
|
+
"text": "boolean"
|
|
271
|
+
},
|
|
272
|
+
"description": "The soft-disabled state."
|
|
273
|
+
}
|
|
274
|
+
],
|
|
275
|
+
"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.",
|
|
193
276
|
"inheritedFrom": {
|
|
194
|
-
"name": "
|
|
195
|
-
"module": "
|
|
277
|
+
"name": "Buttonsimple",
|
|
278
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
196
279
|
}
|
|
197
280
|
},
|
|
198
281
|
{
|
|
199
|
-
"
|
|
200
|
-
"
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
282
|
+
"kind": "method",
|
|
283
|
+
"name": "setDisabled",
|
|
284
|
+
"privacy": "private",
|
|
285
|
+
"parameters": [
|
|
286
|
+
{
|
|
287
|
+
"name": "element",
|
|
288
|
+
"type": {
|
|
289
|
+
"text": "HTMLElement"
|
|
290
|
+
},
|
|
291
|
+
"description": "The button element."
|
|
292
|
+
},
|
|
293
|
+
{
|
|
294
|
+
"name": "disabled",
|
|
295
|
+
"type": {
|
|
296
|
+
"text": "boolean"
|
|
297
|
+
},
|
|
298
|
+
"description": "The disabled state."
|
|
299
|
+
}
|
|
300
|
+
],
|
|
301
|
+
"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.",
|
|
205
302
|
"inheritedFrom": {
|
|
206
|
-
"name": "
|
|
207
|
-
"module": "
|
|
303
|
+
"name": "Buttonsimple",
|
|
304
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
208
305
|
}
|
|
209
306
|
},
|
|
210
307
|
{
|
|
211
|
-
"
|
|
212
|
-
"
|
|
213
|
-
|
|
308
|
+
"kind": "method",
|
|
309
|
+
"name": "triggerClickEvent",
|
|
310
|
+
"privacy": "private",
|
|
311
|
+
"inheritedFrom": {
|
|
312
|
+
"name": "Buttonsimple",
|
|
313
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
314
|
+
}
|
|
315
|
+
},
|
|
316
|
+
{
|
|
317
|
+
"kind": "method",
|
|
318
|
+
"name": "handleKeyDown",
|
|
319
|
+
"privacy": "private",
|
|
320
|
+
"parameters": [
|
|
321
|
+
{
|
|
322
|
+
"name": "event",
|
|
323
|
+
"type": {
|
|
324
|
+
"text": "KeyboardEvent"
|
|
325
|
+
},
|
|
326
|
+
"description": "The keyboard event."
|
|
327
|
+
}
|
|
328
|
+
],
|
|
329
|
+
"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.",
|
|
330
|
+
"inheritedFrom": {
|
|
331
|
+
"name": "Buttonsimple",
|
|
332
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
333
|
+
}
|
|
334
|
+
},
|
|
335
|
+
{
|
|
336
|
+
"kind": "method",
|
|
337
|
+
"name": "handleKeyUp",
|
|
338
|
+
"privacy": "private",
|
|
339
|
+
"parameters": [
|
|
340
|
+
{
|
|
341
|
+
"name": "event",
|
|
342
|
+
"type": {
|
|
343
|
+
"text": "KeyboardEvent"
|
|
344
|
+
},
|
|
345
|
+
"description": "The keyboard event."
|
|
346
|
+
}
|
|
347
|
+
],
|
|
348
|
+
"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.",
|
|
349
|
+
"inheritedFrom": {
|
|
350
|
+
"name": "Buttonsimple",
|
|
351
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
],
|
|
355
|
+
"attributes": [
|
|
356
|
+
{
|
|
357
|
+
"name": "aria-label",
|
|
358
|
+
"type": {
|
|
359
|
+
"text": "string | null"
|
|
360
|
+
},
|
|
361
|
+
"default": "null",
|
|
362
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
363
|
+
"fieldName": "ariaLabel"
|
|
364
|
+
},
|
|
365
|
+
{
|
|
366
|
+
"name": "src",
|
|
367
|
+
"type": {
|
|
368
|
+
"text": "string | undefined"
|
|
369
|
+
},
|
|
370
|
+
"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.",
|
|
371
|
+
"fieldName": "src",
|
|
372
|
+
"inheritedFrom": {
|
|
373
|
+
"name": "AvatarComponentMixin",
|
|
374
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
375
|
+
}
|
|
376
|
+
},
|
|
377
|
+
{
|
|
378
|
+
"name": "initials",
|
|
379
|
+
"type": {
|
|
380
|
+
"text": "string | undefined"
|
|
381
|
+
},
|
|
382
|
+
"description": "The initials to be displayed for the avatar.",
|
|
383
|
+
"fieldName": "initials",
|
|
384
|
+
"inheritedFrom": {
|
|
385
|
+
"name": "AvatarComponentMixin",
|
|
386
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
387
|
+
}
|
|
388
|
+
},
|
|
389
|
+
{
|
|
390
|
+
"name": "presence",
|
|
391
|
+
"type": {
|
|
392
|
+
"text": "PresenceType | undefined"
|
|
393
|
+
},
|
|
394
|
+
"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`",
|
|
395
|
+
"fieldName": "presence",
|
|
396
|
+
"inheritedFrom": {
|
|
397
|
+
"name": "AvatarComponentMixin",
|
|
398
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
399
|
+
}
|
|
400
|
+
},
|
|
401
|
+
{
|
|
402
|
+
"name": "size",
|
|
403
|
+
"type": {
|
|
404
|
+
"text": "ButtonSize"
|
|
405
|
+
},
|
|
406
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
407
|
+
"default": "32",
|
|
408
|
+
"fieldName": "size",
|
|
409
|
+
"inheritedFrom": {
|
|
410
|
+
"name": "Buttonsimple",
|
|
411
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
412
|
+
}
|
|
413
|
+
},
|
|
414
|
+
{
|
|
415
|
+
"name": "counter",
|
|
416
|
+
"type": {
|
|
417
|
+
"text": "number | undefined"
|
|
418
|
+
},
|
|
419
|
+
"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`.",
|
|
420
|
+
"fieldName": "counter",
|
|
421
|
+
"inheritedFrom": {
|
|
422
|
+
"name": "AvatarComponentMixin",
|
|
423
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
424
|
+
}
|
|
425
|
+
},
|
|
426
|
+
{
|
|
427
|
+
"name": "is-typing",
|
|
428
|
+
"type": {
|
|
429
|
+
"text": "boolean"
|
|
214
430
|
},
|
|
215
431
|
"default": "false",
|
|
216
432
|
"description": "Represents the typing indicator when the user is typing.",
|
|
@@ -231,8 +447,100 @@
|
|
|
231
447
|
"name": "IconNameMixin",
|
|
232
448
|
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
233
449
|
}
|
|
450
|
+
},
|
|
451
|
+
{
|
|
452
|
+
"name": "tabIndex",
|
|
453
|
+
"type": {
|
|
454
|
+
"text": "number"
|
|
455
|
+
},
|
|
456
|
+
"default": "0",
|
|
457
|
+
"description": "This property specifies the tab order of the element.",
|
|
458
|
+
"fieldName": "tabIndex",
|
|
459
|
+
"inheritedFrom": {
|
|
460
|
+
"name": "TabIndexMixin",
|
|
461
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
462
|
+
}
|
|
463
|
+
},
|
|
464
|
+
{
|
|
465
|
+
"name": "disabled",
|
|
466
|
+
"type": {
|
|
467
|
+
"text": "boolean"
|
|
468
|
+
},
|
|
469
|
+
"default": "false",
|
|
470
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
471
|
+
"fieldName": "disabled",
|
|
472
|
+
"inheritedFrom": {
|
|
473
|
+
"name": "DisabledMixin",
|
|
474
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
475
|
+
}
|
|
476
|
+
},
|
|
477
|
+
{
|
|
478
|
+
"name": "active",
|
|
479
|
+
"type": {
|
|
480
|
+
"text": "boolean"
|
|
481
|
+
},
|
|
482
|
+
"default": "false",
|
|
483
|
+
"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.",
|
|
484
|
+
"fieldName": "active",
|
|
485
|
+
"inheritedFrom": {
|
|
486
|
+
"name": "Buttonsimple",
|
|
487
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
488
|
+
}
|
|
489
|
+
},
|
|
490
|
+
{
|
|
491
|
+
"name": "soft-disabled",
|
|
492
|
+
"type": {
|
|
493
|
+
"text": "boolean"
|
|
494
|
+
},
|
|
495
|
+
"default": "false",
|
|
496
|
+
"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.",
|
|
497
|
+
"fieldName": "softDisabled",
|
|
498
|
+
"inheritedFrom": {
|
|
499
|
+
"name": "Buttonsimple",
|
|
500
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
501
|
+
}
|
|
502
|
+
},
|
|
503
|
+
{
|
|
504
|
+
"name": "role",
|
|
505
|
+
"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.",
|
|
506
|
+
"default": "button",
|
|
507
|
+
"fieldName": "role",
|
|
508
|
+
"inheritedFrom": {
|
|
509
|
+
"name": "Buttonsimple",
|
|
510
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
511
|
+
}
|
|
512
|
+
},
|
|
513
|
+
{
|
|
514
|
+
"name": "type",
|
|
515
|
+
"type": {
|
|
516
|
+
"text": "ButtonType"
|
|
517
|
+
},
|
|
518
|
+
"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.",
|
|
519
|
+
"default": "button",
|
|
520
|
+
"fieldName": "type",
|
|
521
|
+
"inheritedFrom": {
|
|
522
|
+
"name": "Buttonsimple",
|
|
523
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
524
|
+
}
|
|
234
525
|
}
|
|
235
|
-
]
|
|
526
|
+
],
|
|
527
|
+
"mixins": [
|
|
528
|
+
{
|
|
529
|
+
"name": "AvatarComponentMixin",
|
|
530
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
531
|
+
},
|
|
532
|
+
{
|
|
533
|
+
"name": "IconNameMixin",
|
|
534
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
|
535
|
+
}
|
|
536
|
+
],
|
|
537
|
+
"superclass": {
|
|
538
|
+
"name": "Buttonsimple",
|
|
539
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
540
|
+
},
|
|
541
|
+
"tagName": "mdc-avatarbutton",
|
|
542
|
+
"jsDoc": "/**\n * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n *\n * This component is made by extending `buttonsimple` class.\n * The button component acts as a wrapper for the avatar component.\n *\n * @dependency mdc-avatar\n *\n * @tagname mdc-avatarbutton\n */",
|
|
543
|
+
"customElement": true
|
|
236
544
|
}
|
|
237
545
|
],
|
|
238
546
|
"exports": [
|
|
@@ -240,8 +548,8 @@
|
|
|
240
548
|
"kind": "js",
|
|
241
549
|
"name": "default",
|
|
242
550
|
"declaration": {
|
|
243
|
-
"name": "
|
|
244
|
-
"module": "components/
|
|
551
|
+
"name": "AvatarButton",
|
|
552
|
+
"module": "components/avatarbutton/avatarbutton.component.js"
|
|
245
553
|
}
|
|
246
554
|
}
|
|
247
555
|
]
|
|
@@ -569,110 +877,35 @@
|
|
|
569
877
|
},
|
|
570
878
|
{
|
|
571
879
|
"kind": "javascript-module",
|
|
572
|
-
"path": "components/
|
|
880
|
+
"path": "components/avatar/avatar.component.js",
|
|
573
881
|
"declarations": [
|
|
574
882
|
{
|
|
575
883
|
"kind": "class",
|
|
576
|
-
"description": "The `mdc-
|
|
577
|
-
"name": "
|
|
578
|
-
"
|
|
884
|
+
"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.",
|
|
885
|
+
"name": "Avatar",
|
|
886
|
+
"cssProperties": [
|
|
579
887
|
{
|
|
580
|
-
"
|
|
581
|
-
"name": "
|
|
582
|
-
"type": {
|
|
583
|
-
"text": "string | null"
|
|
584
|
-
},
|
|
585
|
-
"default": "null",
|
|
586
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
587
|
-
"attribute": "aria-label"
|
|
888
|
+
"description": "Allows customization of the default background color.",
|
|
889
|
+
"name": "--mdc-avatar-default-background-color"
|
|
588
890
|
},
|
|
589
891
|
{
|
|
590
|
-
"
|
|
591
|
-
"name": "
|
|
592
|
-
"privacy": "private",
|
|
593
|
-
"parameters": [
|
|
594
|
-
{
|
|
595
|
-
"name": "size",
|
|
596
|
-
"type": {
|
|
597
|
-
"text": "AvatarSize"
|
|
598
|
-
}
|
|
599
|
-
}
|
|
600
|
-
]
|
|
892
|
+
"description": "Allows customization of the default foreground color.",
|
|
893
|
+
"name": "--mdc-avatar-default-foreground-color"
|
|
601
894
|
},
|
|
602
895
|
{
|
|
603
|
-
"
|
|
604
|
-
"name": "
|
|
605
|
-
"type": {
|
|
606
|
-
"text": "boolean"
|
|
607
|
-
},
|
|
608
|
-
"default": "undefined as unknown",
|
|
609
|
-
"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.",
|
|
610
|
-
"attribute": "active",
|
|
611
|
-
"reflects": true,
|
|
612
|
-
"inheritedFrom": {
|
|
613
|
-
"name": "Buttonsimple",
|
|
614
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
615
|
-
}
|
|
616
|
-
},
|
|
617
|
-
{
|
|
618
|
-
"kind": "field",
|
|
619
|
-
"name": "disabled",
|
|
620
|
-
"type": {
|
|
621
|
-
"text": "boolean"
|
|
622
|
-
},
|
|
623
|
-
"default": "undefined as unknown",
|
|
624
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
625
|
-
"attribute": "disabled",
|
|
626
|
-
"reflects": true,
|
|
627
|
-
"inheritedFrom": {
|
|
628
|
-
"name": "DisabledMixin",
|
|
629
|
-
"module": "utils/mixins/DisabledMixin.js"
|
|
630
|
-
}
|
|
631
|
-
},
|
|
632
|
-
{
|
|
633
|
-
"kind": "field",
|
|
634
|
-
"name": "softDisabled",
|
|
635
|
-
"type": {
|
|
636
|
-
"text": "boolean"
|
|
637
|
-
},
|
|
638
|
-
"default": "undefined as unknown",
|
|
639
|
-
"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.",
|
|
640
|
-
"attribute": "soft-disabled",
|
|
641
|
-
"inheritedFrom": {
|
|
642
|
-
"name": "Buttonsimple",
|
|
643
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
644
|
-
}
|
|
896
|
+
"description": "Allows customization of the loading indicator background color.",
|
|
897
|
+
"name": "--mdc-avatar-loading-indicator-background-color"
|
|
645
898
|
},
|
|
646
899
|
{
|
|
647
|
-
"
|
|
648
|
-
"name": "
|
|
649
|
-
"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.",
|
|
650
|
-
"default": "'button'",
|
|
651
|
-
"attribute": "role",
|
|
652
|
-
"reflects": true,
|
|
653
|
-
"type": {
|
|
654
|
-
"text": "string"
|
|
655
|
-
},
|
|
656
|
-
"inheritedFrom": {
|
|
657
|
-
"name": "Buttonsimple",
|
|
658
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
659
|
-
}
|
|
900
|
+
"description": "Allows customization of the loading indicator foreground color.",
|
|
901
|
+
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
|
660
902
|
},
|
|
661
903
|
{
|
|
662
|
-
"
|
|
663
|
-
"name": "
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
"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.",
|
|
668
|
-
"default": "button",
|
|
669
|
-
"attribute": "type",
|
|
670
|
-
"reflects": true,
|
|
671
|
-
"inheritedFrom": {
|
|
672
|
-
"name": "Buttonsimple",
|
|
673
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
674
|
-
}
|
|
675
|
-
},
|
|
904
|
+
"description": "Allows customization of the loading overlay background color.",
|
|
905
|
+
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
906
|
+
}
|
|
907
|
+
],
|
|
908
|
+
"members": [
|
|
676
909
|
{
|
|
677
910
|
"kind": "field",
|
|
678
911
|
"name": "src",
|
|
@@ -716,15 +949,15 @@
|
|
|
716
949
|
"kind": "field",
|
|
717
950
|
"name": "size",
|
|
718
951
|
"type": {
|
|
719
|
-
"text": "
|
|
952
|
+
"text": "AvatarSize"
|
|
720
953
|
},
|
|
721
954
|
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
722
955
|
"default": "32",
|
|
723
956
|
"attribute": "size",
|
|
724
957
|
"reflects": true,
|
|
725
958
|
"inheritedFrom": {
|
|
726
|
-
"name": "
|
|
727
|
-
"module": "
|
|
959
|
+
"name": "AvatarComponentMixin",
|
|
960
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
728
961
|
}
|
|
729
962
|
},
|
|
730
963
|
{
|
|
@@ -766,167 +999,26 @@
|
|
|
766
999
|
"name": "IconNameMixin",
|
|
767
1000
|
"module": "utils/mixins/IconNameMixin.js"
|
|
768
1001
|
}
|
|
769
|
-
}
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
"name": "tabIndex",
|
|
773
|
-
"type": {
|
|
774
|
-
"text": "number"
|
|
775
|
-
},
|
|
776
|
-
"default": "0",
|
|
777
|
-
"description": "This property specifies the tab order of the element.",
|
|
778
|
-
"attribute": "tabIndex",
|
|
779
|
-
"reflects": true,
|
|
780
|
-
"inheritedFrom": {
|
|
781
|
-
"name": "TabIndexMixin",
|
|
782
|
-
"module": "utils/mixins/TabIndexMixin.js"
|
|
783
|
-
}
|
|
784
|
-
},
|
|
785
|
-
{
|
|
786
|
-
"kind": "method",
|
|
787
|
-
"name": "executeAction",
|
|
788
|
-
"privacy": "protected",
|
|
789
|
-
"inheritedFrom": {
|
|
790
|
-
"name": "Buttonsimple",
|
|
791
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
792
|
-
}
|
|
793
|
-
},
|
|
794
|
-
{
|
|
795
|
-
"kind": "method",
|
|
796
|
-
"name": "setActive",
|
|
797
|
-
"privacy": "protected",
|
|
798
|
-
"parameters": [
|
|
799
|
-
{
|
|
800
|
-
"name": "element",
|
|
801
|
-
"type": {
|
|
802
|
-
"text": "HTMLElement"
|
|
803
|
-
},
|
|
804
|
-
"description": "The button element"
|
|
805
|
-
},
|
|
806
|
-
{
|
|
807
|
-
"name": "active",
|
|
808
|
-
"type": {
|
|
809
|
-
"text": "boolean"
|
|
810
|
-
},
|
|
811
|
-
"description": "The active state of the element"
|
|
812
|
-
}
|
|
813
|
-
],
|
|
814
|
-
"description": "Sets the aria-pressed attribute based on the active state of the button.",
|
|
815
|
-
"inheritedFrom": {
|
|
816
|
-
"name": "Buttonsimple",
|
|
817
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
818
|
-
}
|
|
819
|
-
},
|
|
820
|
-
{
|
|
821
|
-
"kind": "method",
|
|
822
|
-
"name": "setSoftDisabled",
|
|
823
|
-
"privacy": "private",
|
|
824
|
-
"parameters": [
|
|
825
|
-
{
|
|
826
|
-
"name": "element",
|
|
827
|
-
"type": {
|
|
828
|
-
"text": "HTMLElement"
|
|
829
|
-
},
|
|
830
|
-
"description": "The button element."
|
|
831
|
-
},
|
|
832
|
-
{
|
|
833
|
-
"name": "softDisabled",
|
|
834
|
-
"type": {
|
|
835
|
-
"text": "boolean"
|
|
836
|
-
},
|
|
837
|
-
"description": "The soft-disabled state."
|
|
838
|
-
}
|
|
839
|
-
],
|
|
840
|
-
"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.",
|
|
841
|
-
"inheritedFrom": {
|
|
842
|
-
"name": "Buttonsimple",
|
|
843
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
844
|
-
}
|
|
845
|
-
},
|
|
846
|
-
{
|
|
847
|
-
"kind": "method",
|
|
848
|
-
"name": "setDisabled",
|
|
849
|
-
"privacy": "private",
|
|
850
|
-
"parameters": [
|
|
851
|
-
{
|
|
852
|
-
"name": "element",
|
|
853
|
-
"type": {
|
|
854
|
-
"text": "HTMLElement"
|
|
855
|
-
},
|
|
856
|
-
"description": "The button element."
|
|
857
|
-
},
|
|
858
|
-
{
|
|
859
|
-
"name": "disabled",
|
|
860
|
-
"type": {
|
|
861
|
-
"text": "boolean"
|
|
862
|
-
},
|
|
863
|
-
"description": "The disabled state."
|
|
864
|
-
}
|
|
865
|
-
],
|
|
866
|
-
"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.",
|
|
867
|
-
"inheritedFrom": {
|
|
868
|
-
"name": "Buttonsimple",
|
|
869
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
870
|
-
}
|
|
871
|
-
},
|
|
872
|
-
{
|
|
873
|
-
"kind": "method",
|
|
874
|
-
"name": "triggerClickEvent",
|
|
875
|
-
"privacy": "private",
|
|
876
|
-
"inheritedFrom": {
|
|
877
|
-
"name": "Buttonsimple",
|
|
878
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
879
|
-
}
|
|
880
|
-
},
|
|
1002
|
+
}
|
|
1003
|
+
],
|
|
1004
|
+
"mixins": [
|
|
881
1005
|
{
|
|
882
|
-
"
|
|
883
|
-
"
|
|
884
|
-
"privacy": "private",
|
|
885
|
-
"parameters": [
|
|
886
|
-
{
|
|
887
|
-
"name": "event",
|
|
888
|
-
"type": {
|
|
889
|
-
"text": "KeyboardEvent"
|
|
890
|
-
},
|
|
891
|
-
"description": "The keyboard event."
|
|
892
|
-
}
|
|
893
|
-
],
|
|
894
|
-
"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.",
|
|
895
|
-
"inheritedFrom": {
|
|
896
|
-
"name": "Buttonsimple",
|
|
897
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
898
|
-
}
|
|
1006
|
+
"name": "AvatarComponentMixin",
|
|
1007
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
899
1008
|
},
|
|
900
1009
|
{
|
|
901
|
-
"
|
|
902
|
-
"
|
|
903
|
-
"privacy": "private",
|
|
904
|
-
"parameters": [
|
|
905
|
-
{
|
|
906
|
-
"name": "event",
|
|
907
|
-
"type": {
|
|
908
|
-
"text": "KeyboardEvent"
|
|
909
|
-
},
|
|
910
|
-
"description": "The keyboard event."
|
|
911
|
-
}
|
|
912
|
-
],
|
|
913
|
-
"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.",
|
|
914
|
-
"inheritedFrom": {
|
|
915
|
-
"name": "Buttonsimple",
|
|
916
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
917
|
-
}
|
|
1010
|
+
"name": "IconNameMixin",
|
|
1011
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
|
918
1012
|
}
|
|
919
1013
|
],
|
|
1014
|
+
"superclass": {
|
|
1015
|
+
"name": "Component",
|
|
1016
|
+
"module": "/src/models"
|
|
1017
|
+
},
|
|
1018
|
+
"tagName": "mdc-avatar",
|
|
1019
|
+
"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 */",
|
|
1020
|
+
"customElement": true,
|
|
920
1021
|
"attributes": [
|
|
921
|
-
{
|
|
922
|
-
"name": "aria-label",
|
|
923
|
-
"type": {
|
|
924
|
-
"text": "string | null"
|
|
925
|
-
},
|
|
926
|
-
"default": "null",
|
|
927
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
928
|
-
"fieldName": "ariaLabel"
|
|
929
|
-
},
|
|
930
1022
|
{
|
|
931
1023
|
"name": "src",
|
|
932
1024
|
"type": {
|
|
@@ -966,14 +1058,14 @@
|
|
|
966
1058
|
{
|
|
967
1059
|
"name": "size",
|
|
968
1060
|
"type": {
|
|
969
|
-
"text": "
|
|
1061
|
+
"text": "AvatarSize"
|
|
970
1062
|
},
|
|
971
1063
|
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
972
1064
|
"default": "32",
|
|
973
1065
|
"fieldName": "size",
|
|
974
1066
|
"inheritedFrom": {
|
|
975
|
-
"name": "
|
|
976
|
-
"module": "src/
|
|
1067
|
+
"name": "AvatarComponentMixin",
|
|
1068
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
977
1069
|
}
|
|
978
1070
|
},
|
|
979
1071
|
{
|
|
@@ -1012,100 +1104,8 @@
|
|
|
1012
1104
|
"name": "IconNameMixin",
|
|
1013
1105
|
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
1014
1106
|
}
|
|
1015
|
-
},
|
|
1016
|
-
{
|
|
1017
|
-
"name": "tabIndex",
|
|
1018
|
-
"type": {
|
|
1019
|
-
"text": "number"
|
|
1020
|
-
},
|
|
1021
|
-
"default": "0",
|
|
1022
|
-
"description": "This property specifies the tab order of the element.",
|
|
1023
|
-
"fieldName": "tabIndex",
|
|
1024
|
-
"inheritedFrom": {
|
|
1025
|
-
"name": "TabIndexMixin",
|
|
1026
|
-
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
1027
|
-
}
|
|
1028
|
-
},
|
|
1029
|
-
{
|
|
1030
|
-
"name": "disabled",
|
|
1031
|
-
"type": {
|
|
1032
|
-
"text": "boolean"
|
|
1033
|
-
},
|
|
1034
|
-
"default": "false",
|
|
1035
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
1036
|
-
"fieldName": "disabled",
|
|
1037
|
-
"inheritedFrom": {
|
|
1038
|
-
"name": "DisabledMixin",
|
|
1039
|
-
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
1040
|
-
}
|
|
1041
|
-
},
|
|
1042
|
-
{
|
|
1043
|
-
"name": "active",
|
|
1044
|
-
"type": {
|
|
1045
|
-
"text": "boolean"
|
|
1046
|
-
},
|
|
1047
|
-
"default": "false",
|
|
1048
|
-
"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.",
|
|
1049
|
-
"fieldName": "active",
|
|
1050
|
-
"inheritedFrom": {
|
|
1051
|
-
"name": "Buttonsimple",
|
|
1052
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1053
|
-
}
|
|
1054
|
-
},
|
|
1055
|
-
{
|
|
1056
|
-
"name": "soft-disabled",
|
|
1057
|
-
"type": {
|
|
1058
|
-
"text": "boolean"
|
|
1059
|
-
},
|
|
1060
|
-
"default": "false",
|
|
1061
|
-
"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.",
|
|
1062
|
-
"fieldName": "softDisabled",
|
|
1063
|
-
"inheritedFrom": {
|
|
1064
|
-
"name": "Buttonsimple",
|
|
1065
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1066
|
-
}
|
|
1067
|
-
},
|
|
1068
|
-
{
|
|
1069
|
-
"name": "role",
|
|
1070
|
-
"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.",
|
|
1071
|
-
"default": "button",
|
|
1072
|
-
"fieldName": "role",
|
|
1073
|
-
"inheritedFrom": {
|
|
1074
|
-
"name": "Buttonsimple",
|
|
1075
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1076
|
-
}
|
|
1077
|
-
},
|
|
1078
|
-
{
|
|
1079
|
-
"name": "type",
|
|
1080
|
-
"type": {
|
|
1081
|
-
"text": "ButtonType"
|
|
1082
|
-
},
|
|
1083
|
-
"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.",
|
|
1084
|
-
"default": "button",
|
|
1085
|
-
"fieldName": "type",
|
|
1086
|
-
"inheritedFrom": {
|
|
1087
|
-
"name": "Buttonsimple",
|
|
1088
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1089
|
-
}
|
|
1090
|
-
}
|
|
1091
|
-
],
|
|
1092
|
-
"mixins": [
|
|
1093
|
-
{
|
|
1094
|
-
"name": "AvatarComponentMixin",
|
|
1095
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
1096
|
-
},
|
|
1097
|
-
{
|
|
1098
|
-
"name": "IconNameMixin",
|
|
1099
|
-
"module": "/src/utils/mixins/IconNameMixin"
|
|
1100
1107
|
}
|
|
1101
|
-
]
|
|
1102
|
-
"superclass": {
|
|
1103
|
-
"name": "Buttonsimple",
|
|
1104
|
-
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
1105
|
-
},
|
|
1106
|
-
"tagName": "mdc-avatarbutton",
|
|
1107
|
-
"jsDoc": "/**\n * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n *\n * This component is made by extending `buttonsimple` class.\n * The button component acts as a wrapper for the avatar component.\n *\n * @dependency mdc-avatar\n *\n * @tagname mdc-avatarbutton\n */",
|
|
1108
|
-
"customElement": true
|
|
1108
|
+
]
|
|
1109
1109
|
}
|
|
1110
1110
|
],
|
|
1111
1111
|
"exports": [
|
|
@@ -1113,8 +1113,8 @@
|
|
|
1113
1113
|
"kind": "js",
|
|
1114
1114
|
"name": "default",
|
|
1115
1115
|
"declaration": {
|
|
1116
|
-
"name": "
|
|
1117
|
-
"module": "components/
|
|
1116
|
+
"name": "Avatar",
|
|
1117
|
+
"module": "components/avatar/avatar.component.js"
|
|
1118
1118
|
}
|
|
1119
1119
|
}
|
|
1120
1120
|
]
|
|
@@ -5505,569 +5505,609 @@
|
|
|
5505
5505
|
},
|
|
5506
5506
|
{
|
|
5507
5507
|
"kind": "javascript-module",
|
|
5508
|
-
"path": "components/
|
|
5508
|
+
"path": "components/text/text.component.js",
|
|
5509
5509
|
"declarations": [
|
|
5510
5510
|
{
|
|
5511
5511
|
"kind": "class",
|
|
5512
|
-
"description": "
|
|
5513
|
-
"name": "
|
|
5514
|
-
"
|
|
5515
|
-
{
|
|
5516
|
-
"description": "Gap between the badge(if provided), icon and text.",
|
|
5517
|
-
"name": "--mdc-tab-content-gap"
|
|
5518
|
-
},
|
|
5512
|
+
"description": "Text component for creating styled text elements.\nIt has to be mounted within the ThemeProvider to access color and font tokens.\n\nThe `type` attribute allows changing the text style.\nThe `tagname` attribute allows changing the tag name of the text element.\nThe default tag name is `p`.\n\nThe `tagname` attribute should be a valid HTML tag name.\nIf the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n\nThe styling is applied based on the `type` attribute.",
|
|
5513
|
+
"name": "Text",
|
|
5514
|
+
"cssParts": [
|
|
5519
5515
|
{
|
|
5520
|
-
"description": "
|
|
5521
|
-
"name": "
|
|
5522
|
-
}
|
|
5516
|
+
"description": "The text element",
|
|
5517
|
+
"name": "text"
|
|
5518
|
+
}
|
|
5519
|
+
],
|
|
5520
|
+
"slots": [
|
|
5523
5521
|
{
|
|
5524
|
-
"description": "
|
|
5525
|
-
"name": "
|
|
5526
|
-
}
|
|
5522
|
+
"description": "Default slot for text content",
|
|
5523
|
+
"name": ""
|
|
5524
|
+
}
|
|
5525
|
+
],
|
|
5526
|
+
"members": [
|
|
5527
5527
|
{
|
|
5528
|
-
"
|
|
5529
|
-
"name": "
|
|
5528
|
+
"kind": "field",
|
|
5529
|
+
"name": "type",
|
|
5530
|
+
"type": {
|
|
5531
|
+
"text": "TextType"
|
|
5532
|
+
},
|
|
5533
|
+
"privacy": "public",
|
|
5534
|
+
"description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
|
|
5535
|
+
"default": "body-large-regular",
|
|
5536
|
+
"attribute": "type",
|
|
5537
|
+
"reflects": true
|
|
5530
5538
|
},
|
|
5531
5539
|
{
|
|
5532
|
-
"
|
|
5533
|
-
"name": "
|
|
5534
|
-
|
|
5540
|
+
"kind": "field",
|
|
5541
|
+
"name": "tagname",
|
|
5542
|
+
"type": {
|
|
5543
|
+
"text": "TagName | undefined"
|
|
5544
|
+
},
|
|
5545
|
+
"privacy": "public",
|
|
5546
|
+
"description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
|
|
5547
|
+
"attribute": "tagname",
|
|
5548
|
+
"reflects": true
|
|
5549
|
+
}
|
|
5550
|
+
],
|
|
5551
|
+
"attributes": [
|
|
5535
5552
|
{
|
|
5536
|
-
"
|
|
5537
|
-
"
|
|
5553
|
+
"name": "type",
|
|
5554
|
+
"type": {
|
|
5555
|
+
"text": "TextType"
|
|
5556
|
+
},
|
|
5557
|
+
"description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
|
|
5558
|
+
"default": "body-large-regular",
|
|
5559
|
+
"fieldName": "type"
|
|
5538
5560
|
},
|
|
5539
5561
|
{
|
|
5540
|
-
"
|
|
5541
|
-
"
|
|
5542
|
-
|
|
5562
|
+
"name": "tagname",
|
|
5563
|
+
"type": {
|
|
5564
|
+
"text": "TagName | undefined"
|
|
5565
|
+
},
|
|
5566
|
+
"description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
|
|
5567
|
+
"fieldName": "tagname"
|
|
5568
|
+
}
|
|
5569
|
+
],
|
|
5570
|
+
"superclass": {
|
|
5571
|
+
"name": "Component",
|
|
5572
|
+
"module": "/src/models"
|
|
5573
|
+
},
|
|
5574
|
+
"tagName": "mdc-text",
|
|
5575
|
+
"jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
|
|
5576
|
+
"customElement": true
|
|
5577
|
+
}
|
|
5578
|
+
],
|
|
5579
|
+
"exports": [
|
|
5580
|
+
{
|
|
5581
|
+
"kind": "js",
|
|
5582
|
+
"name": "default",
|
|
5583
|
+
"declaration": {
|
|
5584
|
+
"name": "Text",
|
|
5585
|
+
"module": "components/text/text.component.js"
|
|
5586
|
+
}
|
|
5587
|
+
}
|
|
5588
|
+
]
|
|
5589
|
+
},
|
|
5590
|
+
{
|
|
5591
|
+
"kind": "javascript-module",
|
|
5592
|
+
"path": "components/themeprovider/themeprovider.component.js",
|
|
5593
|
+
"declarations": [
|
|
5594
|
+
{
|
|
5595
|
+
"kind": "class",
|
|
5596
|
+
"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\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.",
|
|
5597
|
+
"name": "ThemeProvider",
|
|
5598
|
+
"cssProperties": [
|
|
5543
5599
|
{
|
|
5544
|
-
"description": "
|
|
5545
|
-
"name": "--mdc-
|
|
5600
|
+
"description": "Option to override the default color, default: color-theme-text-primary-normal",
|
|
5601
|
+
"name": "--mdc-themeprovider-color-default"
|
|
5546
5602
|
},
|
|
5547
5603
|
{
|
|
5548
|
-
"description": "
|
|
5549
|
-
"name": "--mdc-
|
|
5604
|
+
"description": "Option to override the font family, default: `Momentum` (from momentum-design/fonts)",
|
|
5605
|
+
"name": "--mdc-themeprovider-font-family"
|
|
5550
5606
|
},
|
|
5551
5607
|
{
|
|
5552
|
-
"description": "
|
|
5553
|
-
"name": "--mdc-
|
|
5608
|
+
"description": "Option to override the font weight, default: `400`",
|
|
5609
|
+
"name": "--mdc-themeprovider-font-weight"
|
|
5554
5610
|
},
|
|
5555
5611
|
{
|
|
5556
|
-
"description": "
|
|
5557
|
-
"name": "--mdc-
|
|
5558
|
-
}
|
|
5612
|
+
"description": "Option to override the default letter-spacing, default: `-0.25px` (this is to match the old CiscoSans)",
|
|
5613
|
+
"name": "--mdc-themeprovider-letter-spacing-adjustment"
|
|
5614
|
+
}
|
|
5615
|
+
],
|
|
5616
|
+
"slots": [
|
|
5559
5617
|
{
|
|
5560
|
-
"description": "
|
|
5561
|
-
"name": "
|
|
5562
|
-
}
|
|
5618
|
+
"description": "children",
|
|
5619
|
+
"name": ""
|
|
5620
|
+
}
|
|
5621
|
+
],
|
|
5622
|
+
"members": [
|
|
5563
5623
|
{
|
|
5564
|
-
"
|
|
5565
|
-
"name": "
|
|
5624
|
+
"kind": "field",
|
|
5625
|
+
"name": "Context",
|
|
5626
|
+
"privacy": "public",
|
|
5627
|
+
"static": true,
|
|
5628
|
+
"description": "Context object of the ThemeProvider, to be consumed by child components",
|
|
5629
|
+
"readonly": true
|
|
5566
5630
|
},
|
|
5567
5631
|
{
|
|
5568
|
-
"
|
|
5569
|
-
"name": "
|
|
5632
|
+
"kind": "field",
|
|
5633
|
+
"name": "themeclass",
|
|
5634
|
+
"type": {
|
|
5635
|
+
"text": "string"
|
|
5636
|
+
},
|
|
5637
|
+
"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'",
|
|
5638
|
+
"attribute": "themeclass"
|
|
5570
5639
|
},
|
|
5571
5640
|
{
|
|
5572
|
-
"
|
|
5573
|
-
"name": "
|
|
5641
|
+
"kind": "method",
|
|
5642
|
+
"name": "updateContext",
|
|
5643
|
+
"privacy": "protected",
|
|
5644
|
+
"return": {
|
|
5645
|
+
"type": {
|
|
5646
|
+
"text": "void"
|
|
5647
|
+
}
|
|
5648
|
+
},
|
|
5649
|
+
"description": "Update all observing components of this\nprovider to update the themeclass\n\nIs called on every re-render, see Provider class"
|
|
5574
5650
|
},
|
|
5575
5651
|
{
|
|
5576
|
-
"
|
|
5577
|
-
"name": "
|
|
5578
|
-
|
|
5579
|
-
|
|
5580
|
-
|
|
5581
|
-
|
|
5582
|
-
|
|
5583
|
-
{
|
|
5584
|
-
"description": "Background color for active line tab in hover state.",
|
|
5585
|
-
"name": "--mdc-tab-line-active-background-color-hover"
|
|
5586
|
-
},
|
|
5587
|
-
{
|
|
5588
|
-
"description": "Background color for active line tab in rest state.",
|
|
5589
|
-
"name": "--mdc-tab-line-active-background-color-normal"
|
|
5590
|
-
},
|
|
5591
|
-
{
|
|
5592
|
-
"description": "Text and icon color for active line tab.",
|
|
5593
|
-
"name": "--mdc-tab-line-active-color"
|
|
5594
|
-
},
|
|
5595
|
-
{
|
|
5596
|
-
"description": "Text and icon color for active line tab in disabled state.",
|
|
5597
|
-
"name": "--mdc-tab-line-active-color-disabled"
|
|
5598
|
-
},
|
|
5599
|
-
{
|
|
5600
|
-
"description": "color for indicator in active line tab.",
|
|
5601
|
-
"name": "--mdc-tab-line-active-indicator-color"
|
|
5602
|
-
},
|
|
5603
|
-
{
|
|
5604
|
-
"description": "Color for indicator in active line tab in disabled state.",
|
|
5605
|
-
"name": "--mdc-tab-line-active-indicator-color-disabled"
|
|
5606
|
-
},
|
|
5607
|
-
{
|
|
5608
|
-
"description": "Height for indicator in active line tab.",
|
|
5609
|
-
"name": "--mdc-tab-line-active-indicator-height"
|
|
5610
|
-
},
|
|
5611
|
-
{
|
|
5612
|
-
"description": "Width for indicator in active line tab.",
|
|
5613
|
-
"name": "--mdc-tab-line-active-indicator-width"
|
|
5614
|
-
},
|
|
5615
|
-
{
|
|
5616
|
-
"description": "Bottom left border radius for line tab.",
|
|
5617
|
-
"name": "--mdc-tab-line-border-bottom-left-radius"
|
|
5618
|
-
},
|
|
5619
|
-
{
|
|
5620
|
-
"description": "Bottom right border radius for line tab.",
|
|
5621
|
-
"name": "--mdc-tab-line-border-bottom-right-radius"
|
|
5622
|
-
},
|
|
5623
|
-
{
|
|
5624
|
-
"description": "Top left border radius for line tab.",
|
|
5625
|
-
"name": "--mdc-tab-line-border-top-left-radius"
|
|
5626
|
-
},
|
|
5627
|
-
{
|
|
5628
|
-
"description": "Top right border radius for line tab.",
|
|
5629
|
-
"name": "--mdc-tab-line-border-top-right-radius"
|
|
5630
|
-
},
|
|
5631
|
-
{
|
|
5632
|
-
"description": "Background color for inactive line tab in pressed state.",
|
|
5633
|
-
"name": "--mdc-tab-line-inactive-background-color-pressed"
|
|
5634
|
-
},
|
|
5635
|
-
{
|
|
5636
|
-
"description": "Background color for inactive line tab in disabled state",
|
|
5637
|
-
"name": "--mdc-tab-line-inactive-background-color-disabled"
|
|
5638
|
-
},
|
|
5639
|
-
{
|
|
5640
|
-
"description": "Background color for inactive line tab in hover state.",
|
|
5641
|
-
"name": "--mdc-tab-line-inactive-background-color-hover"
|
|
5642
|
-
},
|
|
5652
|
+
"kind": "method",
|
|
5653
|
+
"name": "setThemeInClassList",
|
|
5654
|
+
"privacy": "private",
|
|
5655
|
+
"description": "Function to update the active theme classnames to update the theme tokens\nas CSS variables on the web component."
|
|
5656
|
+
}
|
|
5657
|
+
],
|
|
5658
|
+
"attributes": [
|
|
5643
5659
|
{
|
|
5644
|
-
"
|
|
5645
|
-
"
|
|
5646
|
-
|
|
5660
|
+
"name": "themeclass",
|
|
5661
|
+
"type": {
|
|
5662
|
+
"text": "string"
|
|
5663
|
+
},
|
|
5664
|
+
"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'",
|
|
5665
|
+
"fieldName": "themeclass"
|
|
5666
|
+
}
|
|
5667
|
+
],
|
|
5668
|
+
"superclass": {
|
|
5669
|
+
"name": "Provider",
|
|
5670
|
+
"module": "/src/models"
|
|
5671
|
+
},
|
|
5672
|
+
"tagName": "mdc-themeprovider",
|
|
5673
|
+
"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 * 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 */",
|
|
5674
|
+
"customElement": true
|
|
5675
|
+
}
|
|
5676
|
+
],
|
|
5677
|
+
"exports": [
|
|
5678
|
+
{
|
|
5679
|
+
"kind": "js",
|
|
5680
|
+
"name": "default",
|
|
5681
|
+
"declaration": {
|
|
5682
|
+
"name": "ThemeProvider",
|
|
5683
|
+
"module": "components/themeprovider/themeprovider.component.js"
|
|
5684
|
+
}
|
|
5685
|
+
}
|
|
5686
|
+
]
|
|
5687
|
+
},
|
|
5688
|
+
{
|
|
5689
|
+
"kind": "javascript-module",
|
|
5690
|
+
"path": "components/toggle/toggle.component.js",
|
|
5691
|
+
"declarations": [
|
|
5692
|
+
{
|
|
5693
|
+
"kind": "class",
|
|
5694
|
+
"description": "Toggle Component is an interactive control used to switch between two mutually exclusive options,\nsuch as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\nwhere users need to enable or disable a feature.\nIt contains an optional label and an optional helper text.\n\nNote: It internally renders a checkbox styled as a toggle switch.",
|
|
5695
|
+
"name": "Toggle",
|
|
5696
|
+
"cssProperties": [
|
|
5647
5697
|
{
|
|
5648
|
-
"description": "
|
|
5649
|
-
"name": "--mdc-
|
|
5698
|
+
"description": "width of the toggle",
|
|
5699
|
+
"name": "--mdc-toggle-width"
|
|
5650
5700
|
},
|
|
5651
5701
|
{
|
|
5652
|
-
"description": "
|
|
5653
|
-
"name": "--mdc-
|
|
5702
|
+
"description": "height of the toggle",
|
|
5703
|
+
"name": "--mdc-toggle-height"
|
|
5654
5704
|
},
|
|
5655
5705
|
{
|
|
5656
|
-
"description": "
|
|
5657
|
-
"name": "--mdc-
|
|
5706
|
+
"description": "width of the toggle when it's size is compact",
|
|
5707
|
+
"name": "--mdc-toggle-width-compact"
|
|
5658
5708
|
},
|
|
5659
5709
|
{
|
|
5660
|
-
"description": "
|
|
5661
|
-
"name": "--mdc-
|
|
5710
|
+
"description": "height of the toggle when it's size is compact",
|
|
5711
|
+
"name": "--mdc-toggle-height-compact"
|
|
5662
5712
|
},
|
|
5663
5713
|
{
|
|
5664
|
-
"description": "
|
|
5665
|
-
"name": "--mdc-
|
|
5714
|
+
"description": "border radius of the toggle",
|
|
5715
|
+
"name": "--mdc-toggle-border-radius"
|
|
5666
5716
|
},
|
|
5667
5717
|
{
|
|
5668
|
-
"description": "
|
|
5669
|
-
"name": "--mdc-
|
|
5718
|
+
"description": "border radius of the toggle when it's size is compact",
|
|
5719
|
+
"name": "--mdc-toggle-border-radius-compact"
|
|
5670
5720
|
},
|
|
5671
5721
|
{
|
|
5672
|
-
"description": "
|
|
5673
|
-
"name": "--mdc-
|
|
5722
|
+
"description": "border of the toggle",
|
|
5723
|
+
"name": "--mdc-toggle-border"
|
|
5674
5724
|
},
|
|
5675
5725
|
{
|
|
5676
|
-
"description": "
|
|
5677
|
-
"name": "--mdc-
|
|
5726
|
+
"description": "background color of the inactive toggle in rest state",
|
|
5727
|
+
"name": "--mdc-toggle-inactive-rest-color"
|
|
5678
5728
|
},
|
|
5679
5729
|
{
|
|
5680
|
-
"description": "
|
|
5681
|
-
"name": "--mdc-
|
|
5730
|
+
"description": "background color of the inactive toggle in hover state",
|
|
5731
|
+
"name": "--mdc-toggle-inactive-hover-color"
|
|
5682
5732
|
},
|
|
5683
5733
|
{
|
|
5684
|
-
"description": "
|
|
5685
|
-
"name": "--mdc-
|
|
5734
|
+
"description": "background color of the inactive toggle in pressed state",
|
|
5735
|
+
"name": "--mdc-toggle-inactive-pressed-color"
|
|
5686
5736
|
},
|
|
5687
5737
|
{
|
|
5688
|
-
"description": "
|
|
5689
|
-
"name": "--mdc-
|
|
5738
|
+
"description": "background color of the inactive toggle in disabled state",
|
|
5739
|
+
"name": "--mdc-toggle-inactive-disabled-color"
|
|
5690
5740
|
},
|
|
5691
5741
|
{
|
|
5692
|
-
"description": "
|
|
5693
|
-
"name": "--mdc-
|
|
5742
|
+
"description": "background color of the active toggle in rest state",
|
|
5743
|
+
"name": "--mdc-toggle-active-rest-color"
|
|
5694
5744
|
},
|
|
5695
5745
|
{
|
|
5696
|
-
"description": "
|
|
5697
|
-
"name": "--mdc-
|
|
5746
|
+
"description": "background color of the active toggle in hover state",
|
|
5747
|
+
"name": "--mdc-toggle-active-hover-color"
|
|
5698
5748
|
},
|
|
5699
5749
|
{
|
|
5700
|
-
"description": "
|
|
5701
|
-
"name": "--mdc-
|
|
5750
|
+
"description": "background color of the active toggle in pressed state",
|
|
5751
|
+
"name": "--mdc-toggle-active-pressed-color"
|
|
5702
5752
|
},
|
|
5703
5753
|
{
|
|
5704
|
-
"description": "
|
|
5705
|
-
"name": "--mdc-
|
|
5754
|
+
"description": "background color of the active toggle in disabled state",
|
|
5755
|
+
"name": "--mdc-toggle-active-disabled-color"
|
|
5706
5756
|
},
|
|
5707
5757
|
{
|
|
5708
|
-
"description": "
|
|
5709
|
-
"name": "--mdc-
|
|
5758
|
+
"description": " color of the help text label",
|
|
5759
|
+
"name": "--mdc-toggle-help-text-color"
|
|
5710
5760
|
},
|
|
5711
5761
|
{
|
|
5712
|
-
"description": "
|
|
5713
|
-
"name": "--mdc-
|
|
5762
|
+
"description": "color of the toggle label and help text in disabled state",
|
|
5763
|
+
"name": "--mdc-toggle-label-color-disabled"
|
|
5714
5764
|
}
|
|
5715
5765
|
],
|
|
5716
5766
|
"members": [
|
|
5717
5767
|
{
|
|
5718
5768
|
"kind": "field",
|
|
5719
|
-
"name": "
|
|
5769
|
+
"name": "checked",
|
|
5720
5770
|
"type": {
|
|
5721
|
-
"text": "
|
|
5771
|
+
"text": "boolean"
|
|
5722
5772
|
},
|
|
5723
|
-
"
|
|
5724
|
-
"
|
|
5773
|
+
"default": "false",
|
|
5774
|
+
"description": "Determines whether the toggle is active or inactive.",
|
|
5775
|
+
"attribute": "checked",
|
|
5725
5776
|
"reflects": true
|
|
5726
5777
|
},
|
|
5727
5778
|
{
|
|
5728
5779
|
"kind": "field",
|
|
5729
|
-
"name": "
|
|
5780
|
+
"name": "size",
|
|
5730
5781
|
"type": {
|
|
5731
|
-
"text": "
|
|
5782
|
+
"text": "ToggleSize"
|
|
5732
5783
|
},
|
|
5733
|
-
"description": "
|
|
5734
|
-
"default": "
|
|
5735
|
-
"attribute": "
|
|
5784
|
+
"description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
|
|
5785
|
+
"default": "default",
|
|
5786
|
+
"attribute": "size",
|
|
5736
5787
|
"reflects": true
|
|
5737
5788
|
},
|
|
5738
5789
|
{
|
|
5739
5790
|
"kind": "method",
|
|
5740
|
-
"name": "
|
|
5791
|
+
"name": "setFormValue",
|
|
5741
5792
|
"privacy": "private",
|
|
5742
|
-
"
|
|
5743
|
-
"type": {
|
|
5744
|
-
"text": "void"
|
|
5745
|
-
}
|
|
5746
|
-
},
|
|
5747
|
-
"parameters": [
|
|
5748
|
-
{
|
|
5749
|
-
"name": "active",
|
|
5750
|
-
"type": {
|
|
5751
|
-
"text": "boolean"
|
|
5752
|
-
},
|
|
5753
|
-
"description": "The active state."
|
|
5754
|
-
}
|
|
5755
|
-
],
|
|
5756
|
-
"description": "Modifies the icon name based on the active state.\nIf the tab is active, the icon name is suffixed with '-filled'.\nIf the tab is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
|
|
5793
|
+
"description": "Updates the form value to reflect the current state of the toggle.\nIf toggle is switched on, the value is set to either the user-provided value or 'isActive' if no value is provided.\nIf toggle is switched off, the value is set to null."
|
|
5757
5794
|
},
|
|
5758
5795
|
{
|
|
5759
5796
|
"kind": "method",
|
|
5760
|
-
"name": "
|
|
5797
|
+
"name": "toggleState",
|
|
5761
5798
|
"privacy": "private",
|
|
5762
5799
|
"return": {
|
|
5763
5800
|
"type": {
|
|
5764
5801
|
"text": "void"
|
|
5765
5802
|
}
|
|
5766
5803
|
},
|
|
5804
|
+
"description": "Toggles the state of the toggle element.\nIf the element is not disabled, then the checked property is toggled."
|
|
5805
|
+
},
|
|
5806
|
+
{
|
|
5807
|
+
"kind": "method",
|
|
5808
|
+
"name": "handleChange",
|
|
5809
|
+
"privacy": "private",
|
|
5767
5810
|
"parameters": [
|
|
5768
5811
|
{
|
|
5769
|
-
"name": "
|
|
5812
|
+
"name": "event",
|
|
5770
5813
|
"type": {
|
|
5771
|
-
"text": "
|
|
5772
|
-
}
|
|
5773
|
-
"description": "The variant to set."
|
|
5814
|
+
"text": "Event"
|
|
5815
|
+
}
|
|
5774
5816
|
}
|
|
5775
5817
|
],
|
|
5776
|
-
"description": "
|
|
5818
|
+
"description": "Toggles the state of the toggle element.\nand dispatch the new change event."
|
|
5777
5819
|
},
|
|
5778
5820
|
{
|
|
5779
5821
|
"kind": "method",
|
|
5780
|
-
"name": "
|
|
5781
|
-
"privacy": "
|
|
5822
|
+
"name": "setToggleSize",
|
|
5823
|
+
"privacy": "private",
|
|
5782
5824
|
"parameters": [
|
|
5783
5825
|
{
|
|
5784
|
-
"name": "
|
|
5785
|
-
"type": {
|
|
5786
|
-
"text": "HTMLElement"
|
|
5787
|
-
},
|
|
5788
|
-
"description": "The tab element."
|
|
5789
|
-
},
|
|
5790
|
-
{
|
|
5791
|
-
"name": "active",
|
|
5826
|
+
"name": "size",
|
|
5792
5827
|
"type": {
|
|
5793
|
-
"text": "
|
|
5828
|
+
"text": "ToggleSize"
|
|
5794
5829
|
},
|
|
5795
|
-
"description": "The
|
|
5830
|
+
"description": "The size to set."
|
|
5796
5831
|
}
|
|
5797
5832
|
],
|
|
5798
|
-
"description": "Sets the
|
|
5799
|
-
"inheritedFrom": {
|
|
5800
|
-
"name": "Buttonsimple",
|
|
5801
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
5802
|
-
}
|
|
5833
|
+
"description": "Sets the size attribute for the toggle component.\nIf the provided size is not included in the TOGGLE_SIZE,\nit defaults to the value specified in DEFAULTS.SIZE."
|
|
5803
5834
|
},
|
|
5804
5835
|
{
|
|
5805
|
-
"kind": "
|
|
5806
|
-
"name": "
|
|
5807
|
-
"
|
|
5836
|
+
"kind": "field",
|
|
5837
|
+
"name": "helpTextType",
|
|
5838
|
+
"type": {
|
|
5839
|
+
"text": "ValidationType"
|
|
5840
|
+
},
|
|
5841
|
+
"description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
|
|
5842
|
+
"attribute": "help-text-type",
|
|
5843
|
+
"reflects": true,
|
|
5844
|
+
"default": "undefined as unknown",
|
|
5808
5845
|
"inheritedFrom": {
|
|
5809
|
-
"name": "
|
|
5810
|
-
"module": "components/
|
|
5846
|
+
"name": "FormfieldWrapper",
|
|
5847
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
5811
5848
|
}
|
|
5812
5849
|
},
|
|
5813
5850
|
{
|
|
5814
5851
|
"kind": "field",
|
|
5815
|
-
"name": "
|
|
5816
|
-
"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.",
|
|
5817
|
-
"default": "'tab'",
|
|
5818
|
-
"attribute": "role",
|
|
5819
|
-
"reflects": true,
|
|
5852
|
+
"name": "name",
|
|
5820
5853
|
"type": {
|
|
5821
5854
|
"text": "string"
|
|
5822
5855
|
},
|
|
5856
|
+
"default": "''",
|
|
5857
|
+
"description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
|
|
5858
|
+
"attribute": "name",
|
|
5859
|
+
"reflects": true,
|
|
5823
5860
|
"inheritedFrom": {
|
|
5824
|
-
"name": "
|
|
5825
|
-
"module": "
|
|
5861
|
+
"name": "NameMixin",
|
|
5862
|
+
"module": "utils/mixins/NameMixin.js"
|
|
5826
5863
|
}
|
|
5827
5864
|
},
|
|
5828
5865
|
{
|
|
5829
5866
|
"kind": "field",
|
|
5830
|
-
"name": "
|
|
5867
|
+
"name": "value",
|
|
5831
5868
|
"type": {
|
|
5832
|
-
"text": "
|
|
5869
|
+
"text": "string"
|
|
5833
5870
|
},
|
|
5834
|
-
"default": "
|
|
5835
|
-
"description": "Indicates
|
|
5836
|
-
"attribute": "
|
|
5871
|
+
"default": "''",
|
|
5872
|
+
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
|
5873
|
+
"attribute": "value",
|
|
5874
|
+
"reflects": true,
|
|
5837
5875
|
"inheritedFrom": {
|
|
5838
|
-
"name": "
|
|
5839
|
-
"module": "
|
|
5876
|
+
"name": "ValueMixin",
|
|
5877
|
+
"module": "utils/mixins/ValueMixin.js"
|
|
5840
5878
|
}
|
|
5841
5879
|
},
|
|
5842
5880
|
{
|
|
5843
5881
|
"kind": "field",
|
|
5844
|
-
"name": "
|
|
5882
|
+
"name": "dataAriaLabel",
|
|
5845
5883
|
"type": {
|
|
5846
|
-
"text": "
|
|
5884
|
+
"text": "string | null"
|
|
5847
5885
|
},
|
|
5848
|
-
"
|
|
5849
|
-
"
|
|
5850
|
-
"attribute": "
|
|
5886
|
+
"default": "null",
|
|
5887
|
+
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
5888
|
+
"attribute": "data-aria-label",
|
|
5851
5889
|
"reflects": true,
|
|
5852
5890
|
"inheritedFrom": {
|
|
5853
|
-
"name": "
|
|
5854
|
-
"module": "
|
|
5891
|
+
"name": "DataAriaLabelMixin",
|
|
5892
|
+
"module": "utils/mixins/DataAriaLabelMixin.js"
|
|
5855
5893
|
}
|
|
5856
5894
|
},
|
|
5857
5895
|
{
|
|
5858
5896
|
"kind": "field",
|
|
5859
|
-
"name": "
|
|
5897
|
+
"name": "disabled",
|
|
5860
5898
|
"type": {
|
|
5861
|
-
"text": "
|
|
5899
|
+
"text": "boolean"
|
|
5862
5900
|
},
|
|
5863
|
-
"
|
|
5864
|
-
"
|
|
5865
|
-
"attribute": "
|
|
5901
|
+
"default": "false",
|
|
5902
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
5903
|
+
"attribute": "disabled",
|
|
5866
5904
|
"reflects": true,
|
|
5867
5905
|
"inheritedFrom": {
|
|
5868
|
-
"name": "
|
|
5869
|
-
"module": "components/
|
|
5906
|
+
"name": "FormfieldWrapper",
|
|
5907
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
5870
5908
|
}
|
|
5871
5909
|
},
|
|
5872
5910
|
{
|
|
5873
5911
|
"kind": "field",
|
|
5874
|
-
"name": "
|
|
5912
|
+
"name": "label",
|
|
5875
5913
|
"type": {
|
|
5876
|
-
"text": "
|
|
5914
|
+
"text": "string | undefined"
|
|
5877
5915
|
},
|
|
5878
|
-
"description": "
|
|
5879
|
-
"attribute": "
|
|
5916
|
+
"description": "The label of the input field. It is linked to the input field using the `for` attribute.",
|
|
5917
|
+
"attribute": "label",
|
|
5918
|
+
"reflects": true,
|
|
5880
5919
|
"inheritedFrom": {
|
|
5881
|
-
"name": "
|
|
5882
|
-
"module": "
|
|
5920
|
+
"name": "FormfieldWrapper",
|
|
5921
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
5883
5922
|
}
|
|
5884
5923
|
},
|
|
5885
5924
|
{
|
|
5886
5925
|
"kind": "field",
|
|
5887
|
-
"name": "
|
|
5926
|
+
"name": "requiredLabel",
|
|
5888
5927
|
"type": {
|
|
5889
|
-
"text": "
|
|
5928
|
+
"text": "string | undefined"
|
|
5890
5929
|
},
|
|
5891
|
-
"
|
|
5892
|
-
"
|
|
5893
|
-
"attribute": "tabIndex",
|
|
5930
|
+
"description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
|
|
5931
|
+
"attribute": "required-label",
|
|
5894
5932
|
"reflects": true,
|
|
5895
5933
|
"inheritedFrom": {
|
|
5896
|
-
"name": "
|
|
5897
|
-
"module": "components/
|
|
5934
|
+
"name": "FormfieldWrapper",
|
|
5935
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
5898
5936
|
}
|
|
5899
5937
|
},
|
|
5900
5938
|
{
|
|
5901
5939
|
"kind": "field",
|
|
5902
|
-
"name": "
|
|
5903
|
-
"
|
|
5904
|
-
|
|
5905
|
-
|
|
5906
|
-
"default": "false",
|
|
5907
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
5908
|
-
"attribute": "disabled",
|
|
5909
|
-
"reflects": true,
|
|
5940
|
+
"name": "id",
|
|
5941
|
+
"default": "`mdc-input-${uuidv4()}`",
|
|
5942
|
+
"description": "The unique id of the input field. It is used to link the input field with the label.",
|
|
5943
|
+
"attribute": "id",
|
|
5910
5944
|
"inheritedFrom": {
|
|
5911
|
-
"name": "
|
|
5912
|
-
"module": "components/
|
|
5945
|
+
"name": "FormfieldWrapper",
|
|
5946
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
5913
5947
|
}
|
|
5914
5948
|
},
|
|
5915
5949
|
{
|
|
5916
5950
|
"kind": "field",
|
|
5917
|
-
"name": "
|
|
5951
|
+
"name": "helpText",
|
|
5918
5952
|
"type": {
|
|
5919
|
-
"text": "
|
|
5953
|
+
"text": "string | undefined"
|
|
5920
5954
|
},
|
|
5921
|
-
"
|
|
5922
|
-
"
|
|
5923
|
-
"attribute": "active",
|
|
5955
|
+
"description": "The help text that is displayed below the input field.",
|
|
5956
|
+
"attribute": "help-text",
|
|
5924
5957
|
"reflects": true,
|
|
5925
5958
|
"inheritedFrom": {
|
|
5926
|
-
"name": "
|
|
5927
|
-
"module": "components/
|
|
5959
|
+
"name": "FormfieldWrapper",
|
|
5960
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
5928
5961
|
}
|
|
5929
5962
|
},
|
|
5930
5963
|
{
|
|
5931
5964
|
"kind": "method",
|
|
5932
|
-
"name": "
|
|
5933
|
-
"privacy": "
|
|
5934
|
-
"
|
|
5935
|
-
|
|
5936
|
-
|
|
5937
|
-
"
|
|
5938
|
-
"text": "HTMLElement"
|
|
5939
|
-
},
|
|
5940
|
-
"description": "The button element."
|
|
5941
|
-
},
|
|
5942
|
-
{
|
|
5943
|
-
"name": "softDisabled",
|
|
5944
|
-
"type": {
|
|
5945
|
-
"text": "boolean"
|
|
5946
|
-
},
|
|
5947
|
-
"description": "The soft-disabled state."
|
|
5965
|
+
"name": "renderLabelElement",
|
|
5966
|
+
"privacy": "protected",
|
|
5967
|
+
"description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
|
|
5968
|
+
"return": {
|
|
5969
|
+
"type": {
|
|
5970
|
+
"text": ""
|
|
5948
5971
|
}
|
|
5949
|
-
|
|
5950
|
-
"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.",
|
|
5972
|
+
},
|
|
5951
5973
|
"inheritedFrom": {
|
|
5952
|
-
"name": "
|
|
5953
|
-
"module": "components/
|
|
5974
|
+
"name": "FormfieldWrapper",
|
|
5975
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
5954
5976
|
}
|
|
5955
5977
|
},
|
|
5956
5978
|
{
|
|
5957
5979
|
"kind": "method",
|
|
5958
|
-
"name": "
|
|
5959
|
-
"privacy": "
|
|
5960
|
-
"
|
|
5961
|
-
|
|
5962
|
-
|
|
5963
|
-
|
|
5964
|
-
|
|
5965
|
-
|
|
5966
|
-
|
|
5967
|
-
|
|
5968
|
-
|
|
5969
|
-
|
|
5970
|
-
|
|
5971
|
-
|
|
5972
|
-
|
|
5973
|
-
"description": "The disabled state."
|
|
5980
|
+
"name": "renderRequiredLabel",
|
|
5981
|
+
"privacy": "protected",
|
|
5982
|
+
"inheritedFrom": {
|
|
5983
|
+
"name": "FormfieldWrapper",
|
|
5984
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
5985
|
+
}
|
|
5986
|
+
},
|
|
5987
|
+
{
|
|
5988
|
+
"kind": "method",
|
|
5989
|
+
"name": "renderHelpTextIcon",
|
|
5990
|
+
"privacy": "protected",
|
|
5991
|
+
"description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
|
|
5992
|
+
"return": {
|
|
5993
|
+
"type": {
|
|
5994
|
+
"text": ""
|
|
5974
5995
|
}
|
|
5975
|
-
|
|
5976
|
-
"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.",
|
|
5996
|
+
},
|
|
5977
5997
|
"inheritedFrom": {
|
|
5978
|
-
"name": "
|
|
5979
|
-
"module": "components/
|
|
5998
|
+
"name": "FormfieldWrapper",
|
|
5999
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
5980
6000
|
}
|
|
5981
6001
|
},
|
|
5982
6002
|
{
|
|
5983
6003
|
"kind": "method",
|
|
5984
|
-
"name": "
|
|
5985
|
-
"privacy": "
|
|
6004
|
+
"name": "renderHelpText",
|
|
6005
|
+
"privacy": "protected",
|
|
6006
|
+
"description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
|
|
6007
|
+
"return": {
|
|
6008
|
+
"type": {
|
|
6009
|
+
"text": ""
|
|
6010
|
+
}
|
|
6011
|
+
},
|
|
5986
6012
|
"inheritedFrom": {
|
|
5987
|
-
"name": "
|
|
5988
|
-
"module": "components/
|
|
6013
|
+
"name": "FormfieldWrapper",
|
|
6014
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
5989
6015
|
}
|
|
5990
6016
|
},
|
|
5991
6017
|
{
|
|
5992
6018
|
"kind": "method",
|
|
5993
|
-
"name": "
|
|
5994
|
-
"privacy": "
|
|
5995
|
-
"
|
|
5996
|
-
|
|
5997
|
-
|
|
5998
|
-
"
|
|
5999
|
-
"text": "KeyboardEvent"
|
|
6000
|
-
},
|
|
6001
|
-
"description": "The keyboard event."
|
|
6019
|
+
"name": "renderLabel",
|
|
6020
|
+
"privacy": "protected",
|
|
6021
|
+
"description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
|
|
6022
|
+
"return": {
|
|
6023
|
+
"type": {
|
|
6024
|
+
"text": ""
|
|
6002
6025
|
}
|
|
6003
|
-
|
|
6004
|
-
"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.",
|
|
6026
|
+
},
|
|
6005
6027
|
"inheritedFrom": {
|
|
6006
|
-
"name": "
|
|
6007
|
-
"module": "components/
|
|
6028
|
+
"name": "FormfieldWrapper",
|
|
6029
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
6008
6030
|
}
|
|
6009
6031
|
},
|
|
6010
6032
|
{
|
|
6011
6033
|
"kind": "method",
|
|
6012
|
-
"name": "
|
|
6013
|
-
"privacy": "
|
|
6014
|
-
"
|
|
6015
|
-
|
|
6016
|
-
|
|
6017
|
-
"
|
|
6018
|
-
"text": "KeyboardEvent"
|
|
6019
|
-
},
|
|
6020
|
-
"description": "The keyboard event."
|
|
6034
|
+
"name": "renderHelperText",
|
|
6035
|
+
"privacy": "protected",
|
|
6036
|
+
"description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
|
|
6037
|
+
"return": {
|
|
6038
|
+
"type": {
|
|
6039
|
+
"text": ""
|
|
6021
6040
|
}
|
|
6022
|
-
|
|
6023
|
-
"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.",
|
|
6041
|
+
},
|
|
6024
6042
|
"inheritedFrom": {
|
|
6025
|
-
"name": "
|
|
6026
|
-
"module": "components/
|
|
6043
|
+
"name": "FormfieldWrapper",
|
|
6044
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
6045
|
+
}
|
|
6046
|
+
}
|
|
6047
|
+
],
|
|
6048
|
+
"events": [
|
|
6049
|
+
{
|
|
6050
|
+
"type": {
|
|
6051
|
+
"text": "EventConstructor"
|
|
6027
6052
|
}
|
|
6028
6053
|
}
|
|
6029
6054
|
],
|
|
6030
6055
|
"attributes": [
|
|
6031
6056
|
{
|
|
6032
|
-
"name": "
|
|
6057
|
+
"name": "checked",
|
|
6033
6058
|
"type": {
|
|
6034
|
-
"text": "
|
|
6059
|
+
"text": "boolean"
|
|
6035
6060
|
},
|
|
6036
|
-
"
|
|
6037
|
-
"
|
|
6061
|
+
"default": "false",
|
|
6062
|
+
"description": "Determines whether the toggle is active or inactive.",
|
|
6063
|
+
"fieldName": "checked"
|
|
6038
6064
|
},
|
|
6039
6065
|
{
|
|
6040
|
-
"name": "
|
|
6066
|
+
"name": "size",
|
|
6041
6067
|
"type": {
|
|
6042
|
-
"text": "
|
|
6068
|
+
"text": "ToggleSize"
|
|
6043
6069
|
},
|
|
6044
|
-
"description": "
|
|
6045
|
-
"default": "
|
|
6046
|
-
"fieldName": "
|
|
6070
|
+
"description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
|
|
6071
|
+
"default": "default",
|
|
6072
|
+
"fieldName": "size"
|
|
6047
6073
|
},
|
|
6048
6074
|
{
|
|
6049
|
-
"name": "
|
|
6075
|
+
"name": "name",
|
|
6050
6076
|
"type": {
|
|
6051
|
-
"text": "
|
|
6077
|
+
"text": "string"
|
|
6052
6078
|
},
|
|
6053
|
-
"
|
|
6054
|
-
"
|
|
6079
|
+
"default": "''",
|
|
6080
|
+
"description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
|
|
6081
|
+
"fieldName": "name",
|
|
6055
6082
|
"inheritedFrom": {
|
|
6056
|
-
"name": "
|
|
6057
|
-
"module": "src/utils/mixins/
|
|
6083
|
+
"name": "NameMixin",
|
|
6084
|
+
"module": "src/utils/mixins/NameMixin.ts"
|
|
6058
6085
|
}
|
|
6059
6086
|
},
|
|
6060
6087
|
{
|
|
6061
|
-
"name": "
|
|
6088
|
+
"name": "value",
|
|
6062
6089
|
"type": {
|
|
6063
|
-
"text": "
|
|
6090
|
+
"text": "string"
|
|
6064
6091
|
},
|
|
6065
|
-
"default": "
|
|
6066
|
-
"description": "
|
|
6067
|
-
"fieldName": "
|
|
6092
|
+
"default": "''",
|
|
6093
|
+
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
|
6094
|
+
"fieldName": "value",
|
|
6068
6095
|
"inheritedFrom": {
|
|
6069
|
-
"name": "
|
|
6070
|
-
"module": "src/
|
|
6096
|
+
"name": "ValueMixin",
|
|
6097
|
+
"module": "src/utils/mixins/ValueMixin.ts"
|
|
6098
|
+
}
|
|
6099
|
+
},
|
|
6100
|
+
{
|
|
6101
|
+
"name": "data-aria-label",
|
|
6102
|
+
"type": {
|
|
6103
|
+
"text": "string | null"
|
|
6104
|
+
},
|
|
6105
|
+
"default": "null",
|
|
6106
|
+
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
6107
|
+
"fieldName": "dataAriaLabel",
|
|
6108
|
+
"inheritedFrom": {
|
|
6109
|
+
"name": "DataAriaLabelMixin",
|
|
6110
|
+
"module": "src/utils/mixins/DataAriaLabelMixin.ts"
|
|
6071
6111
|
}
|
|
6072
6112
|
},
|
|
6073
6113
|
{
|
|
@@ -6079,86 +6119,100 @@
|
|
|
6079
6119
|
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
6080
6120
|
"fieldName": "disabled",
|
|
6081
6121
|
"inheritedFrom": {
|
|
6082
|
-
"name": "
|
|
6083
|
-
"module": "src/components/
|
|
6122
|
+
"name": "FormfieldWrapper",
|
|
6123
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
6084
6124
|
}
|
|
6085
6125
|
},
|
|
6086
6126
|
{
|
|
6087
|
-
"name": "
|
|
6127
|
+
"name": "label",
|
|
6088
6128
|
"type": {
|
|
6089
|
-
"text": "
|
|
6129
|
+
"text": "string | undefined"
|
|
6090
6130
|
},
|
|
6091
|
-
"
|
|
6092
|
-
"
|
|
6093
|
-
"fieldName": "active",
|
|
6131
|
+
"description": "The label of the input field. It is linked to the input field using the `for` attribute.",
|
|
6132
|
+
"fieldName": "label",
|
|
6094
6133
|
"inheritedFrom": {
|
|
6095
|
-
"name": "
|
|
6096
|
-
"module": "src/components/
|
|
6134
|
+
"name": "FormfieldWrapper",
|
|
6135
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
6097
6136
|
}
|
|
6098
6137
|
},
|
|
6099
6138
|
{
|
|
6100
|
-
"name": "
|
|
6139
|
+
"name": "required-label",
|
|
6101
6140
|
"type": {
|
|
6102
|
-
"text": "
|
|
6141
|
+
"text": "string | undefined"
|
|
6103
6142
|
},
|
|
6104
|
-
"
|
|
6105
|
-
"
|
|
6106
|
-
"fieldName": "softDisabled",
|
|
6143
|
+
"description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
|
|
6144
|
+
"fieldName": "requiredLabel",
|
|
6107
6145
|
"inheritedFrom": {
|
|
6108
|
-
"name": "
|
|
6109
|
-
"module": "src/components/
|
|
6146
|
+
"name": "FormfieldWrapper",
|
|
6147
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
6110
6148
|
}
|
|
6111
6149
|
},
|
|
6112
6150
|
{
|
|
6113
|
-
"name": "
|
|
6114
|
-
"
|
|
6115
|
-
|
|
6116
|
-
|
|
6117
|
-
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
6118
|
-
"default": "32",
|
|
6119
|
-
"fieldName": "size",
|
|
6151
|
+
"name": "id",
|
|
6152
|
+
"default": "`mdc-input-${uuidv4()}`",
|
|
6153
|
+
"description": "The unique id of the input field. It is used to link the input field with the label.",
|
|
6154
|
+
"fieldName": "id",
|
|
6120
6155
|
"inheritedFrom": {
|
|
6121
|
-
"name": "
|
|
6122
|
-
"module": "src/components/
|
|
6156
|
+
"name": "FormfieldWrapper",
|
|
6157
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
6123
6158
|
}
|
|
6124
6159
|
},
|
|
6125
6160
|
{
|
|
6126
|
-
"name": "
|
|
6127
|
-
"
|
|
6128
|
-
|
|
6129
|
-
|
|
6161
|
+
"name": "help-text-type",
|
|
6162
|
+
"type": {
|
|
6163
|
+
"text": "ValidationType"
|
|
6164
|
+
},
|
|
6165
|
+
"description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
|
|
6166
|
+
"fieldName": "helpTextType",
|
|
6130
6167
|
"inheritedFrom": {
|
|
6131
|
-
"name": "
|
|
6132
|
-
"module": "src/components/
|
|
6168
|
+
"name": "FormfieldWrapper",
|
|
6169
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
6133
6170
|
}
|
|
6134
6171
|
},
|
|
6135
6172
|
{
|
|
6136
|
-
"name": "
|
|
6173
|
+
"name": "help-text",
|
|
6137
6174
|
"type": {
|
|
6138
|
-
"text": "
|
|
6175
|
+
"text": "string | undefined"
|
|
6139
6176
|
},
|
|
6140
|
-
"description": "
|
|
6141
|
-
"
|
|
6142
|
-
"fieldName": "type",
|
|
6177
|
+
"description": "The help text that is displayed below the input field.",
|
|
6178
|
+
"fieldName": "helpText",
|
|
6143
6179
|
"inheritedFrom": {
|
|
6144
|
-
"name": "
|
|
6145
|
-
"module": "src/components/
|
|
6180
|
+
"name": "FormfieldWrapper",
|
|
6181
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
6146
6182
|
}
|
|
6147
6183
|
}
|
|
6148
6184
|
],
|
|
6149
6185
|
"mixins": [
|
|
6150
6186
|
{
|
|
6151
|
-
"name": "
|
|
6152
|
-
"module": "/src/utils/mixins/
|
|
6187
|
+
"name": "NameMixin",
|
|
6188
|
+
"module": "/src/utils/mixins/NameMixin"
|
|
6189
|
+
},
|
|
6190
|
+
{
|
|
6191
|
+
"name": "ValueMixin",
|
|
6192
|
+
"module": "/src/utils/mixins/ValueMixin"
|
|
6193
|
+
},
|
|
6194
|
+
{
|
|
6195
|
+
"name": "DataAriaLabelMixin",
|
|
6196
|
+
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
|
6153
6197
|
}
|
|
6154
6198
|
],
|
|
6155
6199
|
"superclass": {
|
|
6156
|
-
"name": "
|
|
6157
|
-
"module": "/src/components/
|
|
6200
|
+
"name": "FormfieldWrapper",
|
|
6201
|
+
"module": "/src/components/formfieldwrapper"
|
|
6158
6202
|
},
|
|
6159
|
-
"tagName": "mdc-
|
|
6160
|
-
"jsDoc": "/**\n *
|
|
6161
|
-
"customElement": true
|
|
6203
|
+
"tagName": "mdc-toggle",
|
|
6204
|
+
"jsDoc": "/**\n * Toggle Component is an interactive control used to switch between two mutually exclusive options,\n * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\n * where users need to enable or disable a feature.\n * It contains an optional label and an optional helper text.\n *\n * Note: It internally renders a checkbox styled as a toggle switch.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-toggle\n *\n * @cssproperty --mdc-toggle-width - width of the toggle\n * @cssproperty --mdc-toggle-height - height of the toggle\n * @cssproperty --mdc-toggle-width-compact - width of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-height-compact - height of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-border-radius - border radius of the toggle\n * @cssproperty --mdc-toggle-border-radius-compact - border radius of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-border - border of the toggle\n * @cssproperty --mdc-toggle-inactive-rest-color - background color of the inactive toggle in rest state\n * @cssproperty --mdc-toggle-inactive-hover-color - background color of the inactive toggle in hover state\n * @cssproperty --mdc-toggle-inactive-pressed-color - background color of the inactive toggle in pressed state\n * @cssproperty --mdc-toggle-inactive-disabled-color - background color of the inactive toggle in disabled state\n * @cssproperty --mdc-toggle-active-rest-color - background color of the active toggle in rest state\n * @cssproperty --mdc-toggle-active-hover-color - background color of the active toggle in hover state\n * @cssproperty --mdc-toggle-active-pressed-color - background color of the active toggle in pressed state\n * @cssproperty --mdc-toggle-active-disabled-color - background color of the active toggle in disabled state\n * @cssproperty --mdc-toggle-help-text-color - color of the help text label\n * @cssproperty --mdc-toggle-label-color-disabled - color of the toggle label and help text in disabled state\n *\n */",
|
|
6205
|
+
"customElement": true,
|
|
6206
|
+
"slots": [
|
|
6207
|
+
{
|
|
6208
|
+
"description": "slot to add the label info icon",
|
|
6209
|
+
"name": "label-info",
|
|
6210
|
+
"inheritedFrom": {
|
|
6211
|
+
"name": "FormfieldWrapper",
|
|
6212
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
6213
|
+
}
|
|
6214
|
+
}
|
|
6215
|
+
]
|
|
6162
6216
|
}
|
|
6163
6217
|
],
|
|
6164
6218
|
"exports": [
|
|
@@ -6166,617 +6220,577 @@
|
|
|
6166
6220
|
"kind": "js",
|
|
6167
6221
|
"name": "default",
|
|
6168
6222
|
"declaration": {
|
|
6169
|
-
"name": "
|
|
6170
|
-
"module": "components/
|
|
6223
|
+
"name": "Toggle",
|
|
6224
|
+
"module": "components/toggle/toggle.component.js"
|
|
6171
6225
|
}
|
|
6172
6226
|
}
|
|
6173
6227
|
]
|
|
6174
6228
|
},
|
|
6175
6229
|
{
|
|
6176
6230
|
"kind": "javascript-module",
|
|
6177
|
-
"path": "components/
|
|
6231
|
+
"path": "components/tab/tab.component.js",
|
|
6178
6232
|
"declarations": [
|
|
6179
6233
|
{
|
|
6180
6234
|
"kind": "class",
|
|
6181
|
-
"description": "
|
|
6182
|
-
"name": "
|
|
6183
|
-
"
|
|
6235
|
+
"description": "`mdc-tab` is Tab component to be used within the Tabgroup.\n\nPassing in the attribute `text` to the tab component is changing the text displayed in the tab.\n\nThe `slot=\"badge\"` can be used to add a badge to the tab.\n\nFor `icon`, the `mdc-icon` component is used to render the icon.",
|
|
6236
|
+
"name": "Tab",
|
|
6237
|
+
"cssProperties": [
|
|
6184
6238
|
{
|
|
6185
|
-
"description": "
|
|
6186
|
-
"name": "
|
|
6187
|
-
}
|
|
6188
|
-
],
|
|
6189
|
-
"slots": [
|
|
6239
|
+
"description": "Gap between the badge(if provided), icon and text.",
|
|
6240
|
+
"name": "--mdc-tab-content-gap"
|
|
6241
|
+
},
|
|
6190
6242
|
{
|
|
6191
|
-
"description": "
|
|
6192
|
-
"name": ""
|
|
6193
|
-
}
|
|
6194
|
-
],
|
|
6195
|
-
"members": [
|
|
6243
|
+
"description": "Height of the tab.",
|
|
6244
|
+
"name": "--mdc-tab-height"
|
|
6245
|
+
},
|
|
6196
6246
|
{
|
|
6197
|
-
"
|
|
6198
|
-
"name": "
|
|
6199
|
-
"type": {
|
|
6200
|
-
"text": "TextType"
|
|
6201
|
-
},
|
|
6202
|
-
"privacy": "public",
|
|
6203
|
-
"description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
|
|
6204
|
-
"default": "body-large-regular",
|
|
6205
|
-
"attribute": "type",
|
|
6206
|
-
"reflects": true
|
|
6247
|
+
"description": "Background color for active glass tab in disabled state.",
|
|
6248
|
+
"name": "--mdc-tab-glass-active-background-color-disabled"
|
|
6207
6249
|
},
|
|
6208
6250
|
{
|
|
6209
|
-
"
|
|
6210
|
-
"name": "
|
|
6211
|
-
|
|
6212
|
-
"text": "TagName | undefined"
|
|
6213
|
-
},
|
|
6214
|
-
"privacy": "public",
|
|
6215
|
-
"description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
|
|
6216
|
-
"attribute": "tagname",
|
|
6217
|
-
"reflects": true
|
|
6218
|
-
}
|
|
6219
|
-
],
|
|
6220
|
-
"attributes": [
|
|
6251
|
+
"description": "Background color for active glass tab in hover state.",
|
|
6252
|
+
"name": "--mdc-tab-glass-active-background-color-hover"
|
|
6253
|
+
},
|
|
6221
6254
|
{
|
|
6222
|
-
"
|
|
6223
|
-
"
|
|
6224
|
-
"text": "TextType"
|
|
6225
|
-
},
|
|
6226
|
-
"description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
|
|
6227
|
-
"default": "body-large-regular",
|
|
6228
|
-
"fieldName": "type"
|
|
6255
|
+
"description": "Background color for active glass tab in rest state.",
|
|
6256
|
+
"name": "--mdc-tab-glass-active-background-color-normal"
|
|
6229
6257
|
},
|
|
6230
6258
|
{
|
|
6231
|
-
"
|
|
6232
|
-
"
|
|
6233
|
-
|
|
6234
|
-
},
|
|
6235
|
-
"description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
|
|
6236
|
-
"fieldName": "tagname"
|
|
6237
|
-
}
|
|
6238
|
-
],
|
|
6239
|
-
"superclass": {
|
|
6240
|
-
"name": "Component",
|
|
6241
|
-
"module": "/src/models"
|
|
6242
|
-
},
|
|
6243
|
-
"tagName": "mdc-text",
|
|
6244
|
-
"jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
|
|
6245
|
-
"customElement": true
|
|
6246
|
-
}
|
|
6247
|
-
],
|
|
6248
|
-
"exports": [
|
|
6249
|
-
{
|
|
6250
|
-
"kind": "js",
|
|
6251
|
-
"name": "default",
|
|
6252
|
-
"declaration": {
|
|
6253
|
-
"name": "Text",
|
|
6254
|
-
"module": "components/text/text.component.js"
|
|
6255
|
-
}
|
|
6256
|
-
}
|
|
6257
|
-
]
|
|
6258
|
-
},
|
|
6259
|
-
{
|
|
6260
|
-
"kind": "javascript-module",
|
|
6261
|
-
"path": "components/themeprovider/themeprovider.component.js",
|
|
6262
|
-
"declarations": [
|
|
6263
|
-
{
|
|
6264
|
-
"kind": "class",
|
|
6265
|
-
"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\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.",
|
|
6266
|
-
"name": "ThemeProvider",
|
|
6267
|
-
"cssProperties": [
|
|
6259
|
+
"description": "Background color for active glass tab in pressed state.",
|
|
6260
|
+
"name": "--mdc-tab-glass-active-background-color-pressed"
|
|
6261
|
+
},
|
|
6268
6262
|
{
|
|
6269
|
-
"description": "
|
|
6270
|
-
"name": "--mdc-
|
|
6263
|
+
"description": "Text and icon color for active glass tab.",
|
|
6264
|
+
"name": "--mdc-tab-glass-active-color"
|
|
6271
6265
|
},
|
|
6272
6266
|
{
|
|
6273
|
-
"description": "
|
|
6274
|
-
"name": "--mdc-
|
|
6267
|
+
"description": "Text and icon color for active glass tab in disabled state.",
|
|
6268
|
+
"name": "--mdc-tab-glass-active-color-disabled"
|
|
6275
6269
|
},
|
|
6276
6270
|
{
|
|
6277
|
-
"description": "
|
|
6278
|
-
"name": "--mdc-
|
|
6271
|
+
"description": "Border radius for glass tab.",
|
|
6272
|
+
"name": "--mdc-tab-glass-border-radius"
|
|
6279
6273
|
},
|
|
6280
6274
|
{
|
|
6281
|
-
"description": "
|
|
6282
|
-
"name": "--mdc-
|
|
6283
|
-
}
|
|
6284
|
-
],
|
|
6285
|
-
"slots": [
|
|
6275
|
+
"description": "Background color for inactive glass tab in disabled state.",
|
|
6276
|
+
"name": "--mdc-tab-glass-inactive-background-color-disabled"
|
|
6277
|
+
},
|
|
6286
6278
|
{
|
|
6287
|
-
"description": "
|
|
6288
|
-
"name": ""
|
|
6289
|
-
}
|
|
6290
|
-
],
|
|
6291
|
-
"members": [
|
|
6279
|
+
"description": "Background color for inactive glass tab in hover state.",
|
|
6280
|
+
"name": "--mdc-tab-glass-inactive-background-color-hover"
|
|
6281
|
+
},
|
|
6292
6282
|
{
|
|
6293
|
-
"
|
|
6294
|
-
"name": "
|
|
6295
|
-
"privacy": "public",
|
|
6296
|
-
"static": true,
|
|
6297
|
-
"description": "Context object of the ThemeProvider, to be consumed by child components",
|
|
6298
|
-
"readonly": true
|
|
6283
|
+
"description": "Background color for inactive glass tab in rest state.",
|
|
6284
|
+
"name": "--mdc-tab-glass-inactive-background-color-normal"
|
|
6299
6285
|
},
|
|
6300
6286
|
{
|
|
6301
|
-
"
|
|
6302
|
-
"name": "
|
|
6303
|
-
"type": {
|
|
6304
|
-
"text": "string"
|
|
6305
|
-
},
|
|
6306
|
-
"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'",
|
|
6307
|
-
"attribute": "themeclass"
|
|
6287
|
+
"description": "Background color for inactive glass tab in pressed state.",
|
|
6288
|
+
"name": "--mdc-tab-glass-inactive-background-color-pressed"
|
|
6308
6289
|
},
|
|
6309
6290
|
{
|
|
6310
|
-
"
|
|
6311
|
-
"name": "
|
|
6312
|
-
"privacy": "protected",
|
|
6313
|
-
"return": {
|
|
6314
|
-
"type": {
|
|
6315
|
-
"text": "void"
|
|
6316
|
-
}
|
|
6317
|
-
},
|
|
6318
|
-
"description": "Update all observing components of this\nprovider to update the themeclass\n\nIs called on every re-render, see Provider class"
|
|
6291
|
+
"description": "Text and icon color for inactive glass tab.",
|
|
6292
|
+
"name": "--mdc-tab-glass-inactive-color"
|
|
6319
6293
|
},
|
|
6320
6294
|
{
|
|
6321
|
-
"
|
|
6322
|
-
"name": "
|
|
6323
|
-
|
|
6324
|
-
"description": "Function to update the active theme classnames to update the theme tokens\nas CSS variables on the web component."
|
|
6325
|
-
}
|
|
6326
|
-
],
|
|
6327
|
-
"attributes": [
|
|
6295
|
+
"description": "Text and icon color for inactive glass tab in disabled state.",
|
|
6296
|
+
"name": "--mdc-tab-glass-inactive-color-disabled"
|
|
6297
|
+
},
|
|
6328
6298
|
{
|
|
6329
|
-
"
|
|
6330
|
-
"
|
|
6331
|
-
|
|
6332
|
-
},
|
|
6333
|
-
"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'",
|
|
6334
|
-
"fieldName": "themeclass"
|
|
6335
|
-
}
|
|
6336
|
-
],
|
|
6337
|
-
"superclass": {
|
|
6338
|
-
"name": "Provider",
|
|
6339
|
-
"module": "/src/models"
|
|
6340
|
-
},
|
|
6341
|
-
"tagName": "mdc-themeprovider",
|
|
6342
|
-
"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 * 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 */",
|
|
6343
|
-
"customElement": true
|
|
6344
|
-
}
|
|
6345
|
-
],
|
|
6346
|
-
"exports": [
|
|
6347
|
-
{
|
|
6348
|
-
"kind": "js",
|
|
6349
|
-
"name": "default",
|
|
6350
|
-
"declaration": {
|
|
6351
|
-
"name": "ThemeProvider",
|
|
6352
|
-
"module": "components/themeprovider/themeprovider.component.js"
|
|
6353
|
-
}
|
|
6354
|
-
}
|
|
6355
|
-
]
|
|
6356
|
-
},
|
|
6357
|
-
{
|
|
6358
|
-
"kind": "javascript-module",
|
|
6359
|
-
"path": "components/toggle/toggle.component.js",
|
|
6360
|
-
"declarations": [
|
|
6361
|
-
{
|
|
6362
|
-
"kind": "class",
|
|
6363
|
-
"description": "Toggle Component is an interactive control used to switch between two mutually exclusive options,\nsuch as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\nwhere users need to enable or disable a feature.\nIt contains an optional label and an optional helper text.\n\nNote: It internally renders a checkbox styled as a toggle switch.",
|
|
6364
|
-
"name": "Toggle",
|
|
6365
|
-
"cssProperties": [
|
|
6299
|
+
"description": "Background color for active line tab in pressed state.",
|
|
6300
|
+
"name": "--mdc-tab-line-active-background-color-pressed"
|
|
6301
|
+
},
|
|
6366
6302
|
{
|
|
6367
|
-
"description": "
|
|
6368
|
-
"name": "--mdc-
|
|
6303
|
+
"description": "Background color for active line tab in disabled state.",
|
|
6304
|
+
"name": "--mdc-tab-line-active-background-color-disabled"
|
|
6369
6305
|
},
|
|
6370
6306
|
{
|
|
6371
|
-
"description": "
|
|
6372
|
-
"name": "--mdc-
|
|
6307
|
+
"description": "Background color for active line tab in hover state.",
|
|
6308
|
+
"name": "--mdc-tab-line-active-background-color-hover"
|
|
6373
6309
|
},
|
|
6374
6310
|
{
|
|
6375
|
-
"description": "
|
|
6376
|
-
"name": "--mdc-
|
|
6311
|
+
"description": "Background color for active line tab in rest state.",
|
|
6312
|
+
"name": "--mdc-tab-line-active-background-color-normal"
|
|
6377
6313
|
},
|
|
6378
6314
|
{
|
|
6379
|
-
"description": "
|
|
6380
|
-
"name": "--mdc-
|
|
6315
|
+
"description": "Text and icon color for active line tab.",
|
|
6316
|
+
"name": "--mdc-tab-line-active-color"
|
|
6381
6317
|
},
|
|
6382
6318
|
{
|
|
6383
|
-
"description": "
|
|
6384
|
-
"name": "--mdc-
|
|
6319
|
+
"description": "Text and icon color for active line tab in disabled state.",
|
|
6320
|
+
"name": "--mdc-tab-line-active-color-disabled"
|
|
6385
6321
|
},
|
|
6386
6322
|
{
|
|
6387
|
-
"description": "
|
|
6388
|
-
"name": "--mdc-
|
|
6323
|
+
"description": "color for indicator in active line tab.",
|
|
6324
|
+
"name": "--mdc-tab-line-active-indicator-color"
|
|
6389
6325
|
},
|
|
6390
6326
|
{
|
|
6391
|
-
"description": "
|
|
6392
|
-
"name": "--mdc-
|
|
6327
|
+
"description": "Color for indicator in active line tab in disabled state.",
|
|
6328
|
+
"name": "--mdc-tab-line-active-indicator-color-disabled"
|
|
6393
6329
|
},
|
|
6394
6330
|
{
|
|
6395
|
-
"description": "
|
|
6396
|
-
"name": "--mdc-
|
|
6331
|
+
"description": "Height for indicator in active line tab.",
|
|
6332
|
+
"name": "--mdc-tab-line-active-indicator-height"
|
|
6397
6333
|
},
|
|
6398
6334
|
{
|
|
6399
|
-
"description": "
|
|
6400
|
-
"name": "--mdc-
|
|
6335
|
+
"description": "Width for indicator in active line tab.",
|
|
6336
|
+
"name": "--mdc-tab-line-active-indicator-width"
|
|
6401
6337
|
},
|
|
6402
6338
|
{
|
|
6403
|
-
"description": "
|
|
6404
|
-
"name": "--mdc-
|
|
6339
|
+
"description": "Bottom left border radius for line tab.",
|
|
6340
|
+
"name": "--mdc-tab-line-border-bottom-left-radius"
|
|
6405
6341
|
},
|
|
6406
6342
|
{
|
|
6407
|
-
"description": "
|
|
6408
|
-
"name": "--mdc-
|
|
6343
|
+
"description": "Bottom right border radius for line tab.",
|
|
6344
|
+
"name": "--mdc-tab-line-border-bottom-right-radius"
|
|
6409
6345
|
},
|
|
6410
6346
|
{
|
|
6411
|
-
"description": "
|
|
6412
|
-
"name": "--mdc-
|
|
6347
|
+
"description": "Top left border radius for line tab.",
|
|
6348
|
+
"name": "--mdc-tab-line-border-top-left-radius"
|
|
6413
6349
|
},
|
|
6414
6350
|
{
|
|
6415
|
-
"description": "
|
|
6416
|
-
"name": "--mdc-
|
|
6351
|
+
"description": "Top right border radius for line tab.",
|
|
6352
|
+
"name": "--mdc-tab-line-border-top-right-radius"
|
|
6417
6353
|
},
|
|
6418
6354
|
{
|
|
6419
|
-
"description": "
|
|
6420
|
-
"name": "--mdc-
|
|
6355
|
+
"description": "Background color for inactive line tab in pressed state.",
|
|
6356
|
+
"name": "--mdc-tab-line-inactive-background-color-pressed"
|
|
6421
6357
|
},
|
|
6422
6358
|
{
|
|
6423
|
-
"description": "
|
|
6424
|
-
"name": "--mdc-
|
|
6359
|
+
"description": "Background color for inactive line tab in disabled state",
|
|
6360
|
+
"name": "--mdc-tab-line-inactive-background-color-disabled"
|
|
6425
6361
|
},
|
|
6426
6362
|
{
|
|
6427
|
-
"description": " color
|
|
6428
|
-
"name": "--mdc-
|
|
6363
|
+
"description": "Background color for inactive line tab in hover state.",
|
|
6364
|
+
"name": "--mdc-tab-line-inactive-background-color-hover"
|
|
6429
6365
|
},
|
|
6430
6366
|
{
|
|
6431
|
-
"description": "color
|
|
6432
|
-
"name": "--mdc-
|
|
6367
|
+
"description": "Background color for inactive line tab in rest state.",
|
|
6368
|
+
"name": "--mdc-tab-line-inactive-background-color-normal"
|
|
6369
|
+
},
|
|
6370
|
+
{
|
|
6371
|
+
"description": "Text and icon color for inactive line tab.",
|
|
6372
|
+
"name": "--mdc-tab-line-inactive-color"
|
|
6373
|
+
},
|
|
6374
|
+
{
|
|
6375
|
+
"description": "Text and icon color for inactive line tab in disabled state.",
|
|
6376
|
+
"name": "--mdc-tab-line-inactive-color-disabled"
|
|
6377
|
+
},
|
|
6378
|
+
{
|
|
6379
|
+
"description": "Padding left for the tab.",
|
|
6380
|
+
"name": "--mdc-tab-padding-left"
|
|
6381
|
+
},
|
|
6382
|
+
{
|
|
6383
|
+
"description": "Padding right for the tab.",
|
|
6384
|
+
"name": "--mdc-tab-padding-right"
|
|
6385
|
+
},
|
|
6386
|
+
{
|
|
6387
|
+
"description": "Background color for active pill tab in pressed state.",
|
|
6388
|
+
"name": "--mdc-tab-pill-active-background-color-pressed"
|
|
6389
|
+
},
|
|
6390
|
+
{
|
|
6391
|
+
"description": "Background color for active pill tab in disabled state.",
|
|
6392
|
+
"name": "--mdc-tab-pill-active-background-color-disabled"
|
|
6393
|
+
},
|
|
6394
|
+
{
|
|
6395
|
+
"description": "Background color for active pill tab in hover state.",
|
|
6396
|
+
"name": "--mdc-tab-pill-active-background-color-hover"
|
|
6397
|
+
},
|
|
6398
|
+
{
|
|
6399
|
+
"description": "Background color for active pill tab in rest state.",
|
|
6400
|
+
"name": "--mdc-tab-pill-active-background-color-normal"
|
|
6401
|
+
},
|
|
6402
|
+
{
|
|
6403
|
+
"description": "Text and icon color for active pill tab.",
|
|
6404
|
+
"name": "--mdc-tab-pill-active-color"
|
|
6405
|
+
},
|
|
6406
|
+
{
|
|
6407
|
+
"description": "Text and icon color for active pill tab in disabled state.",
|
|
6408
|
+
"name": "--mdc-tab-pill-active-color-disabled"
|
|
6409
|
+
},
|
|
6410
|
+
{
|
|
6411
|
+
"description": "Border radius for pill tab.",
|
|
6412
|
+
"name": "--mdc-tab-pill-border-radius"
|
|
6413
|
+
},
|
|
6414
|
+
{
|
|
6415
|
+
"description": "Background color for inactive pill tab in pressed state.",
|
|
6416
|
+
"name": "--mdc-tab-pill-inactive-background-color-pressed"
|
|
6417
|
+
},
|
|
6418
|
+
{
|
|
6419
|
+
"description": "Background color for inactive pill tab in disabled state.",
|
|
6420
|
+
"name": "--mdc-tab-pill-inactive-background-color-disabled"
|
|
6421
|
+
},
|
|
6422
|
+
{
|
|
6423
|
+
"description": "Background color for inactive pill tab in hover state.",
|
|
6424
|
+
"name": "--mdc-tab-pill-inactive-background-color-hover"
|
|
6425
|
+
},
|
|
6426
|
+
{
|
|
6427
|
+
"description": "Background color for inactive pill tab in rest state.",
|
|
6428
|
+
"name": "--mdc-tab-pill-inactive-background-color-normal"
|
|
6429
|
+
},
|
|
6430
|
+
{
|
|
6431
|
+
"description": "Text and icon color for inactive pill tab.",
|
|
6432
|
+
"name": "--mdc-tab-pill-inactive-color"
|
|
6433
|
+
},
|
|
6434
|
+
{
|
|
6435
|
+
"description": "Text and icon color for inactive pill tab in disabled state.",
|
|
6436
|
+
"name": "--mdc-tab-pill-inactive-color-disabled"
|
|
6433
6437
|
}
|
|
6434
6438
|
],
|
|
6435
6439
|
"members": [
|
|
6436
6440
|
{
|
|
6437
6441
|
"kind": "field",
|
|
6438
|
-
"name": "
|
|
6442
|
+
"name": "text",
|
|
6439
6443
|
"type": {
|
|
6440
|
-
"text": "
|
|
6444
|
+
"text": "string | undefined"
|
|
6441
6445
|
},
|
|
6442
|
-
"
|
|
6443
|
-
"
|
|
6444
|
-
"attribute": "checked",
|
|
6446
|
+
"description": "Text to be displayed in the tab.\nIf no `text` is provided, no text will be rendered,\n`aria-label` should be set on the tab.",
|
|
6447
|
+
"attribute": "text",
|
|
6445
6448
|
"reflects": true
|
|
6446
6449
|
},
|
|
6447
6450
|
{
|
|
6448
6451
|
"kind": "field",
|
|
6449
|
-
"name": "
|
|
6452
|
+
"name": "variant",
|
|
6450
6453
|
"type": {
|
|
6451
|
-
"text": "
|
|
6454
|
+
"text": "Variant"
|
|
6452
6455
|
},
|
|
6453
|
-
"description": "
|
|
6454
|
-
"default": "
|
|
6455
|
-
"attribute": "
|
|
6456
|
+
"description": "Tab can have three variants:\n- `glass`\n- `line`\n- `pill`\n\nIt defines the background and foreground color of the tab.",
|
|
6457
|
+
"default": "pill",
|
|
6458
|
+
"attribute": "variant",
|
|
6456
6459
|
"reflects": true
|
|
6457
6460
|
},
|
|
6458
6461
|
{
|
|
6459
6462
|
"kind": "method",
|
|
6460
|
-
"name": "
|
|
6461
|
-
"privacy": "private",
|
|
6462
|
-
"description": "Updates the form value to reflect the current state of the toggle.\nIf toggle is switched on, the value is set to either the user-provided value or 'isActive' if no value is provided.\nIf toggle is switched off, the value is set to null."
|
|
6463
|
-
},
|
|
6464
|
-
{
|
|
6465
|
-
"kind": "method",
|
|
6466
|
-
"name": "toggleState",
|
|
6463
|
+
"name": "modifyIconName",
|
|
6467
6464
|
"privacy": "private",
|
|
6468
6465
|
"return": {
|
|
6469
6466
|
"type": {
|
|
6470
6467
|
"text": "void"
|
|
6471
6468
|
}
|
|
6472
6469
|
},
|
|
6473
|
-
"
|
|
6470
|
+
"parameters": [
|
|
6471
|
+
{
|
|
6472
|
+
"name": "active",
|
|
6473
|
+
"type": {
|
|
6474
|
+
"text": "boolean"
|
|
6475
|
+
},
|
|
6476
|
+
"description": "The active state."
|
|
6477
|
+
}
|
|
6478
|
+
],
|
|
6479
|
+
"description": "Modifies the icon name based on the active state.\nIf the tab is active, the icon name is suffixed with '-filled'.\nIf the tab is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
|
|
6474
6480
|
},
|
|
6475
6481
|
{
|
|
6476
6482
|
"kind": "method",
|
|
6477
|
-
"name": "
|
|
6483
|
+
"name": "setVariant",
|
|
6478
6484
|
"privacy": "private",
|
|
6485
|
+
"return": {
|
|
6486
|
+
"type": {
|
|
6487
|
+
"text": "void"
|
|
6488
|
+
}
|
|
6489
|
+
},
|
|
6479
6490
|
"parameters": [
|
|
6480
6491
|
{
|
|
6481
|
-
"name": "
|
|
6492
|
+
"name": "variant",
|
|
6482
6493
|
"type": {
|
|
6483
|
-
"text": "
|
|
6484
|
-
}
|
|
6494
|
+
"text": "Variant"
|
|
6495
|
+
},
|
|
6496
|
+
"description": "The variant to set."
|
|
6485
6497
|
}
|
|
6486
6498
|
],
|
|
6487
|
-
"description": "
|
|
6499
|
+
"description": "Sets the variant attribute for the tab component.\nIf the provided variant is not included in the TAB_VARIANTS,\nit defaults to the value specified in DEFAULTS.VARIANT."
|
|
6488
6500
|
},
|
|
6489
6501
|
{
|
|
6490
6502
|
"kind": "method",
|
|
6491
|
-
"name": "
|
|
6492
|
-
"privacy": "
|
|
6503
|
+
"name": "setActive",
|
|
6504
|
+
"privacy": "protected",
|
|
6493
6505
|
"parameters": [
|
|
6494
6506
|
{
|
|
6495
|
-
"name": "
|
|
6507
|
+
"name": "element",
|
|
6496
6508
|
"type": {
|
|
6497
|
-
"text": "
|
|
6509
|
+
"text": "HTMLElement"
|
|
6498
6510
|
},
|
|
6499
|
-
"description": "The
|
|
6511
|
+
"description": "The tab element."
|
|
6512
|
+
},
|
|
6513
|
+
{
|
|
6514
|
+
"name": "active",
|
|
6515
|
+
"type": {
|
|
6516
|
+
"text": "boolean"
|
|
6517
|
+
},
|
|
6518
|
+
"description": "The active state of the tab."
|
|
6500
6519
|
}
|
|
6501
6520
|
],
|
|
6502
|
-
"description": "Sets the
|
|
6521
|
+
"description": "Sets the aria-selected attribute based on the active state of the Tab.\nIf the tab is active, the filled version of the icon is displayed,\nelse the icon is restored to its original value.",
|
|
6522
|
+
"inheritedFrom": {
|
|
6523
|
+
"name": "Buttonsimple",
|
|
6524
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
6525
|
+
}
|
|
6503
6526
|
},
|
|
6504
6527
|
{
|
|
6505
|
-
"kind": "
|
|
6506
|
-
"name": "
|
|
6507
|
-
"
|
|
6508
|
-
"text": "ValidationType"
|
|
6509
|
-
},
|
|
6510
|
-
"description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
|
|
6511
|
-
"attribute": "help-text-type",
|
|
6512
|
-
"reflects": true,
|
|
6513
|
-
"default": "undefined as unknown",
|
|
6528
|
+
"kind": "method",
|
|
6529
|
+
"name": "executeAction",
|
|
6530
|
+
"privacy": "protected",
|
|
6514
6531
|
"inheritedFrom": {
|
|
6515
|
-
"name": "
|
|
6516
|
-
"module": "components/
|
|
6532
|
+
"name": "Buttonsimple",
|
|
6533
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
6517
6534
|
}
|
|
6518
6535
|
},
|
|
6519
6536
|
{
|
|
6520
6537
|
"kind": "field",
|
|
6521
|
-
"name": "
|
|
6538
|
+
"name": "role",
|
|
6539
|
+
"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.",
|
|
6540
|
+
"default": "'tab'",
|
|
6541
|
+
"attribute": "role",
|
|
6542
|
+
"reflects": true,
|
|
6522
6543
|
"type": {
|
|
6523
6544
|
"text": "string"
|
|
6524
6545
|
},
|
|
6525
|
-
"default": "''",
|
|
6526
|
-
"description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
|
|
6527
|
-
"attribute": "name",
|
|
6528
|
-
"reflects": true,
|
|
6529
6546
|
"inheritedFrom": {
|
|
6530
|
-
"name": "
|
|
6531
|
-
"module": "
|
|
6547
|
+
"name": "Buttonsimple",
|
|
6548
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
6532
6549
|
}
|
|
6533
6550
|
},
|
|
6534
6551
|
{
|
|
6535
6552
|
"kind": "field",
|
|
6536
|
-
"name": "
|
|
6553
|
+
"name": "softDisabled",
|
|
6537
6554
|
"type": {
|
|
6538
|
-
"text": "
|
|
6555
|
+
"text": "boolean"
|
|
6539
6556
|
},
|
|
6540
|
-
"default": "
|
|
6541
|
-
"description": "Indicates the
|
|
6542
|
-
"attribute": "
|
|
6543
|
-
"reflects": true,
|
|
6557
|
+
"default": "undefined as unknown",
|
|
6558
|
+
"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.",
|
|
6559
|
+
"attribute": "soft-disabled",
|
|
6544
6560
|
"inheritedFrom": {
|
|
6545
|
-
"name": "
|
|
6546
|
-
"module": "
|
|
6561
|
+
"name": "Buttonsimple",
|
|
6562
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
6547
6563
|
}
|
|
6548
6564
|
},
|
|
6549
6565
|
{
|
|
6550
6566
|
"kind": "field",
|
|
6551
|
-
"name": "
|
|
6567
|
+
"name": "size",
|
|
6552
6568
|
"type": {
|
|
6553
|
-
"text": "
|
|
6569
|
+
"text": "ButtonSize"
|
|
6554
6570
|
},
|
|
6555
|
-
"
|
|
6556
|
-
"
|
|
6557
|
-
"attribute": "
|
|
6571
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
6572
|
+
"default": "undefined as unknown",
|
|
6573
|
+
"attribute": "size",
|
|
6558
6574
|
"reflects": true,
|
|
6559
6575
|
"inheritedFrom": {
|
|
6560
|
-
"name": "
|
|
6561
|
-
"module": "
|
|
6576
|
+
"name": "Buttonsimple",
|
|
6577
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
6562
6578
|
}
|
|
6563
6579
|
},
|
|
6564
6580
|
{
|
|
6565
6581
|
"kind": "field",
|
|
6566
|
-
"name": "
|
|
6582
|
+
"name": "type",
|
|
6567
6583
|
"type": {
|
|
6568
|
-
"text": "
|
|
6584
|
+
"text": "ButtonType"
|
|
6569
6585
|
},
|
|
6570
|
-
"
|
|
6571
|
-
"
|
|
6572
|
-
"attribute": "
|
|
6586
|
+
"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.",
|
|
6587
|
+
"default": "undefined as unknown",
|
|
6588
|
+
"attribute": "type",
|
|
6573
6589
|
"reflects": true,
|
|
6574
6590
|
"inheritedFrom": {
|
|
6575
|
-
"name": "
|
|
6576
|
-
"module": "components/
|
|
6591
|
+
"name": "Buttonsimple",
|
|
6592
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
6577
6593
|
}
|
|
6578
6594
|
},
|
|
6579
6595
|
{
|
|
6580
6596
|
"kind": "field",
|
|
6581
|
-
"name": "
|
|
6597
|
+
"name": "iconName",
|
|
6582
6598
|
"type": {
|
|
6583
|
-
"text": "
|
|
6599
|
+
"text": "IconNames | undefined"
|
|
6584
6600
|
},
|
|
6585
|
-
"description": "
|
|
6586
|
-
"attribute": "
|
|
6587
|
-
"reflects": true,
|
|
6601
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
6602
|
+
"attribute": "icon-name",
|
|
6588
6603
|
"inheritedFrom": {
|
|
6589
|
-
"name": "
|
|
6590
|
-
"module": "
|
|
6604
|
+
"name": "IconNameMixin",
|
|
6605
|
+
"module": "utils/mixins/IconNameMixin.js"
|
|
6591
6606
|
}
|
|
6592
6607
|
},
|
|
6593
6608
|
{
|
|
6594
6609
|
"kind": "field",
|
|
6595
|
-
"name": "
|
|
6610
|
+
"name": "tabIndex",
|
|
6596
6611
|
"type": {
|
|
6597
|
-
"text": "
|
|
6612
|
+
"text": "number"
|
|
6598
6613
|
},
|
|
6599
|
-
"
|
|
6600
|
-
"
|
|
6614
|
+
"default": "0",
|
|
6615
|
+
"description": "This property specifies the tab order of the element.",
|
|
6616
|
+
"attribute": "tabIndex",
|
|
6601
6617
|
"reflects": true,
|
|
6602
6618
|
"inheritedFrom": {
|
|
6603
|
-
"name": "
|
|
6604
|
-
"module": "components/
|
|
6605
|
-
}
|
|
6606
|
-
},
|
|
6607
|
-
{
|
|
6608
|
-
"kind": "field",
|
|
6609
|
-
"name": "id",
|
|
6610
|
-
"default": "`mdc-input-${uuidv4()}`",
|
|
6611
|
-
"description": "The unique id of the input field. It is used to link the input field with the label.",
|
|
6612
|
-
"attribute": "id",
|
|
6613
|
-
"inheritedFrom": {
|
|
6614
|
-
"name": "FormfieldWrapper",
|
|
6615
|
-
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
6619
|
+
"name": "Buttonsimple",
|
|
6620
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
6616
6621
|
}
|
|
6617
6622
|
},
|
|
6618
6623
|
{
|
|
6619
6624
|
"kind": "field",
|
|
6620
|
-
"name": "
|
|
6625
|
+
"name": "disabled",
|
|
6621
6626
|
"type": {
|
|
6622
|
-
"text": "
|
|
6627
|
+
"text": "boolean"
|
|
6623
6628
|
},
|
|
6624
|
-
"
|
|
6625
|
-
"
|
|
6629
|
+
"default": "false",
|
|
6630
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
6631
|
+
"attribute": "disabled",
|
|
6626
6632
|
"reflects": true,
|
|
6627
6633
|
"inheritedFrom": {
|
|
6628
|
-
"name": "
|
|
6629
|
-
"module": "components/
|
|
6634
|
+
"name": "Buttonsimple",
|
|
6635
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
6630
6636
|
}
|
|
6631
6637
|
},
|
|
6632
6638
|
{
|
|
6633
|
-
"kind": "
|
|
6634
|
-
"name": "
|
|
6635
|
-
"
|
|
6636
|
-
|
|
6637
|
-
"return": {
|
|
6638
|
-
"type": {
|
|
6639
|
-
"text": ""
|
|
6640
|
-
}
|
|
6639
|
+
"kind": "field",
|
|
6640
|
+
"name": "active",
|
|
6641
|
+
"type": {
|
|
6642
|
+
"text": "boolean"
|
|
6641
6643
|
},
|
|
6644
|
+
"default": "false",
|
|
6645
|
+
"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.",
|
|
6646
|
+
"attribute": "active",
|
|
6647
|
+
"reflects": true,
|
|
6642
6648
|
"inheritedFrom": {
|
|
6643
|
-
"name": "
|
|
6644
|
-
"module": "components/
|
|
6645
|
-
}
|
|
6646
|
-
},
|
|
6647
|
-
{
|
|
6648
|
-
"kind": "method",
|
|
6649
|
-
"name": "renderRequiredLabel",
|
|
6650
|
-
"privacy": "protected",
|
|
6651
|
-
"inheritedFrom": {
|
|
6652
|
-
"name": "FormfieldWrapper",
|
|
6653
|
-
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
6649
|
+
"name": "Buttonsimple",
|
|
6650
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
6654
6651
|
}
|
|
6655
6652
|
},
|
|
6656
6653
|
{
|
|
6657
6654
|
"kind": "method",
|
|
6658
|
-
"name": "
|
|
6659
|
-
"privacy": "
|
|
6660
|
-
"
|
|
6661
|
-
|
|
6662
|
-
|
|
6663
|
-
"
|
|
6655
|
+
"name": "setSoftDisabled",
|
|
6656
|
+
"privacy": "private",
|
|
6657
|
+
"parameters": [
|
|
6658
|
+
{
|
|
6659
|
+
"name": "element",
|
|
6660
|
+
"type": {
|
|
6661
|
+
"text": "HTMLElement"
|
|
6662
|
+
},
|
|
6663
|
+
"description": "The button element."
|
|
6664
|
+
},
|
|
6665
|
+
{
|
|
6666
|
+
"name": "softDisabled",
|
|
6667
|
+
"type": {
|
|
6668
|
+
"text": "boolean"
|
|
6669
|
+
},
|
|
6670
|
+
"description": "The soft-disabled state."
|
|
6664
6671
|
}
|
|
6665
|
-
|
|
6672
|
+
],
|
|
6673
|
+
"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.",
|
|
6666
6674
|
"inheritedFrom": {
|
|
6667
|
-
"name": "
|
|
6668
|
-
"module": "components/
|
|
6675
|
+
"name": "Buttonsimple",
|
|
6676
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
6669
6677
|
}
|
|
6670
6678
|
},
|
|
6671
6679
|
{
|
|
6672
6680
|
"kind": "method",
|
|
6673
|
-
"name": "
|
|
6674
|
-
"privacy": "
|
|
6675
|
-
"
|
|
6676
|
-
|
|
6677
|
-
|
|
6678
|
-
"
|
|
6681
|
+
"name": "setDisabled",
|
|
6682
|
+
"privacy": "private",
|
|
6683
|
+
"parameters": [
|
|
6684
|
+
{
|
|
6685
|
+
"name": "element",
|
|
6686
|
+
"type": {
|
|
6687
|
+
"text": "HTMLElement"
|
|
6688
|
+
},
|
|
6689
|
+
"description": "The button element."
|
|
6690
|
+
},
|
|
6691
|
+
{
|
|
6692
|
+
"name": "disabled",
|
|
6693
|
+
"type": {
|
|
6694
|
+
"text": "boolean"
|
|
6695
|
+
},
|
|
6696
|
+
"description": "The disabled state."
|
|
6679
6697
|
}
|
|
6680
|
-
|
|
6698
|
+
],
|
|
6699
|
+
"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.",
|
|
6681
6700
|
"inheritedFrom": {
|
|
6682
|
-
"name": "
|
|
6683
|
-
"module": "components/
|
|
6701
|
+
"name": "Buttonsimple",
|
|
6702
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
6684
6703
|
}
|
|
6685
6704
|
},
|
|
6686
6705
|
{
|
|
6687
6706
|
"kind": "method",
|
|
6688
|
-
"name": "
|
|
6689
|
-
"privacy": "
|
|
6690
|
-
"description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
|
|
6691
|
-
"return": {
|
|
6692
|
-
"type": {
|
|
6693
|
-
"text": ""
|
|
6694
|
-
}
|
|
6695
|
-
},
|
|
6707
|
+
"name": "triggerClickEvent",
|
|
6708
|
+
"privacy": "private",
|
|
6696
6709
|
"inheritedFrom": {
|
|
6697
|
-
"name": "
|
|
6698
|
-
"module": "components/
|
|
6710
|
+
"name": "Buttonsimple",
|
|
6711
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
6699
6712
|
}
|
|
6700
6713
|
},
|
|
6701
6714
|
{
|
|
6702
6715
|
"kind": "method",
|
|
6703
|
-
"name": "
|
|
6704
|
-
"privacy": "
|
|
6705
|
-
"
|
|
6706
|
-
|
|
6707
|
-
|
|
6708
|
-
"
|
|
6716
|
+
"name": "handleKeyDown",
|
|
6717
|
+
"privacy": "private",
|
|
6718
|
+
"parameters": [
|
|
6719
|
+
{
|
|
6720
|
+
"name": "event",
|
|
6721
|
+
"type": {
|
|
6722
|
+
"text": "KeyboardEvent"
|
|
6723
|
+
},
|
|
6724
|
+
"description": "The keyboard event."
|
|
6709
6725
|
}
|
|
6710
|
-
|
|
6726
|
+
],
|
|
6727
|
+
"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.",
|
|
6711
6728
|
"inheritedFrom": {
|
|
6712
|
-
"name": "
|
|
6713
|
-
"module": "components/
|
|
6729
|
+
"name": "Buttonsimple",
|
|
6730
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
6714
6731
|
}
|
|
6715
|
-
}
|
|
6716
|
-
],
|
|
6717
|
-
"events": [
|
|
6732
|
+
},
|
|
6718
6733
|
{
|
|
6719
|
-
"
|
|
6720
|
-
|
|
6734
|
+
"kind": "method",
|
|
6735
|
+
"name": "handleKeyUp",
|
|
6736
|
+
"privacy": "private",
|
|
6737
|
+
"parameters": [
|
|
6738
|
+
{
|
|
6739
|
+
"name": "event",
|
|
6740
|
+
"type": {
|
|
6741
|
+
"text": "KeyboardEvent"
|
|
6742
|
+
},
|
|
6743
|
+
"description": "The keyboard event."
|
|
6744
|
+
}
|
|
6745
|
+
],
|
|
6746
|
+
"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.",
|
|
6747
|
+
"inheritedFrom": {
|
|
6748
|
+
"name": "Buttonsimple",
|
|
6749
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
6721
6750
|
}
|
|
6722
6751
|
}
|
|
6723
6752
|
],
|
|
6724
6753
|
"attributes": [
|
|
6725
6754
|
{
|
|
6726
|
-
"name": "
|
|
6727
|
-
"type": {
|
|
6728
|
-
"text": "boolean"
|
|
6729
|
-
},
|
|
6730
|
-
"default": "false",
|
|
6731
|
-
"description": "Determines whether the toggle is active or inactive.",
|
|
6732
|
-
"fieldName": "checked"
|
|
6733
|
-
},
|
|
6734
|
-
{
|
|
6735
|
-
"name": "size",
|
|
6755
|
+
"name": "text",
|
|
6736
6756
|
"type": {
|
|
6737
|
-
"text": "
|
|
6757
|
+
"text": "string | undefined"
|
|
6738
6758
|
},
|
|
6739
|
-
"description": "
|
|
6740
|
-
"
|
|
6741
|
-
"fieldName": "size"
|
|
6759
|
+
"description": "Text to be displayed in the tab.\nIf no `text` is provided, no text will be rendered,\n`aria-label` should be set on the tab.",
|
|
6760
|
+
"fieldName": "text"
|
|
6742
6761
|
},
|
|
6743
6762
|
{
|
|
6744
|
-
"name": "
|
|
6763
|
+
"name": "variant",
|
|
6745
6764
|
"type": {
|
|
6746
|
-
"text": "
|
|
6765
|
+
"text": "Variant"
|
|
6747
6766
|
},
|
|
6748
|
-
"
|
|
6749
|
-
"
|
|
6750
|
-
"fieldName": "
|
|
6751
|
-
"inheritedFrom": {
|
|
6752
|
-
"name": "NameMixin",
|
|
6753
|
-
"module": "src/utils/mixins/NameMixin.ts"
|
|
6754
|
-
}
|
|
6767
|
+
"description": "Tab can have three variants:\n- `glass`\n- `line`\n- `pill`\n\nIt defines the background and foreground color of the tab.",
|
|
6768
|
+
"default": "pill",
|
|
6769
|
+
"fieldName": "variant"
|
|
6755
6770
|
},
|
|
6756
6771
|
{
|
|
6757
|
-
"name": "
|
|
6772
|
+
"name": "icon-name",
|
|
6758
6773
|
"type": {
|
|
6759
|
-
"text": "
|
|
6774
|
+
"text": "IconNames | undefined"
|
|
6760
6775
|
},
|
|
6761
|
-
"
|
|
6762
|
-
"
|
|
6763
|
-
"fieldName": "value",
|
|
6776
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
6777
|
+
"fieldName": "iconName",
|
|
6764
6778
|
"inheritedFrom": {
|
|
6765
|
-
"name": "
|
|
6766
|
-
"module": "src/utils/mixins/
|
|
6779
|
+
"name": "IconNameMixin",
|
|
6780
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
6767
6781
|
}
|
|
6768
6782
|
},
|
|
6769
6783
|
{
|
|
6770
|
-
"name": "
|
|
6784
|
+
"name": "tabIndex",
|
|
6771
6785
|
"type": {
|
|
6772
|
-
"text": "
|
|
6786
|
+
"text": "number"
|
|
6773
6787
|
},
|
|
6774
|
-
"default": "
|
|
6775
|
-
"description": "
|
|
6776
|
-
"fieldName": "
|
|
6788
|
+
"default": "0",
|
|
6789
|
+
"description": "This property specifies the tab order of the element.",
|
|
6790
|
+
"fieldName": "tabIndex",
|
|
6777
6791
|
"inheritedFrom": {
|
|
6778
|
-
"name": "
|
|
6779
|
-
"module": "src/
|
|
6792
|
+
"name": "Buttonsimple",
|
|
6793
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
6780
6794
|
}
|
|
6781
6795
|
},
|
|
6782
6796
|
{
|
|
@@ -6788,100 +6802,86 @@
|
|
|
6788
6802
|
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
6789
6803
|
"fieldName": "disabled",
|
|
6790
6804
|
"inheritedFrom": {
|
|
6791
|
-
"name": "
|
|
6792
|
-
"module": "src/components/
|
|
6805
|
+
"name": "Buttonsimple",
|
|
6806
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
6793
6807
|
}
|
|
6794
6808
|
},
|
|
6795
6809
|
{
|
|
6796
|
-
"name": "
|
|
6810
|
+
"name": "active",
|
|
6797
6811
|
"type": {
|
|
6798
|
-
"text": "
|
|
6812
|
+
"text": "boolean"
|
|
6799
6813
|
},
|
|
6800
|
-
"
|
|
6801
|
-
"
|
|
6814
|
+
"default": "false",
|
|
6815
|
+
"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.",
|
|
6816
|
+
"fieldName": "active",
|
|
6802
6817
|
"inheritedFrom": {
|
|
6803
|
-
"name": "
|
|
6804
|
-
"module": "src/components/
|
|
6818
|
+
"name": "Buttonsimple",
|
|
6819
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
6805
6820
|
}
|
|
6806
6821
|
},
|
|
6807
6822
|
{
|
|
6808
|
-
"name": "
|
|
6823
|
+
"name": "soft-disabled",
|
|
6809
6824
|
"type": {
|
|
6810
|
-
"text": "
|
|
6825
|
+
"text": "boolean"
|
|
6811
6826
|
},
|
|
6812
|
-
"
|
|
6813
|
-
"
|
|
6827
|
+
"default": "false",
|
|
6828
|
+
"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.",
|
|
6829
|
+
"fieldName": "softDisabled",
|
|
6814
6830
|
"inheritedFrom": {
|
|
6815
|
-
"name": "
|
|
6816
|
-
"module": "src/components/
|
|
6831
|
+
"name": "Buttonsimple",
|
|
6832
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
6817
6833
|
}
|
|
6818
6834
|
},
|
|
6819
6835
|
{
|
|
6820
|
-
"name": "
|
|
6821
|
-
"
|
|
6822
|
-
|
|
6823
|
-
|
|
6836
|
+
"name": "size",
|
|
6837
|
+
"type": {
|
|
6838
|
+
"text": "ButtonSize"
|
|
6839
|
+
},
|
|
6840
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
6841
|
+
"default": "32",
|
|
6842
|
+
"fieldName": "size",
|
|
6824
6843
|
"inheritedFrom": {
|
|
6825
|
-
"name": "
|
|
6826
|
-
"module": "src/components/
|
|
6844
|
+
"name": "Buttonsimple",
|
|
6845
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
6827
6846
|
}
|
|
6828
6847
|
},
|
|
6829
6848
|
{
|
|
6830
|
-
"name": "
|
|
6831
|
-
"
|
|
6832
|
-
|
|
6833
|
-
|
|
6834
|
-
"description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
|
|
6835
|
-
"fieldName": "helpTextType",
|
|
6849
|
+
"name": "role",
|
|
6850
|
+
"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.",
|
|
6851
|
+
"default": "button",
|
|
6852
|
+
"fieldName": "role",
|
|
6836
6853
|
"inheritedFrom": {
|
|
6837
|
-
"name": "
|
|
6838
|
-
"module": "src/components/
|
|
6854
|
+
"name": "Buttonsimple",
|
|
6855
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
6839
6856
|
}
|
|
6840
6857
|
},
|
|
6841
6858
|
{
|
|
6842
|
-
"name": "
|
|
6859
|
+
"name": "type",
|
|
6843
6860
|
"type": {
|
|
6844
|
-
"text": "
|
|
6861
|
+
"text": "ButtonType"
|
|
6845
6862
|
},
|
|
6846
|
-
"description": "
|
|
6847
|
-
"
|
|
6863
|
+
"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.",
|
|
6864
|
+
"default": "button",
|
|
6865
|
+
"fieldName": "type",
|
|
6848
6866
|
"inheritedFrom": {
|
|
6849
|
-
"name": "
|
|
6850
|
-
"module": "src/components/
|
|
6867
|
+
"name": "Buttonsimple",
|
|
6868
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
6851
6869
|
}
|
|
6852
6870
|
}
|
|
6853
6871
|
],
|
|
6854
6872
|
"mixins": [
|
|
6855
6873
|
{
|
|
6856
|
-
"name": "
|
|
6857
|
-
"module": "/src/utils/mixins/
|
|
6858
|
-
},
|
|
6859
|
-
{
|
|
6860
|
-
"name": "ValueMixin",
|
|
6861
|
-
"module": "/src/utils/mixins/ValueMixin"
|
|
6862
|
-
},
|
|
6863
|
-
{
|
|
6864
|
-
"name": "DataAriaLabelMixin",
|
|
6865
|
-
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
|
6874
|
+
"name": "IconNameMixin",
|
|
6875
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
|
6866
6876
|
}
|
|
6867
6877
|
],
|
|
6868
6878
|
"superclass": {
|
|
6869
|
-
"name": "
|
|
6870
|
-
"module": "/src/components/
|
|
6879
|
+
"name": "Buttonsimple",
|
|
6880
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
6871
6881
|
},
|
|
6872
|
-
"tagName": "mdc-
|
|
6873
|
-
"jsDoc": "/**\n *
|
|
6874
|
-
"customElement": true
|
|
6875
|
-
"slots": [
|
|
6876
|
-
{
|
|
6877
|
-
"description": "slot to add the label info icon",
|
|
6878
|
-
"name": "label-info",
|
|
6879
|
-
"inheritedFrom": {
|
|
6880
|
-
"name": "FormfieldWrapper",
|
|
6881
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
6882
|
-
}
|
|
6883
|
-
}
|
|
6884
|
-
]
|
|
6882
|
+
"tagName": "mdc-tab",
|
|
6883
|
+
"jsDoc": "/**\n * `mdc-tab` is Tab component to be used within the Tabgroup.\n *\n * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.\n *\n * The `slot=\"badge\"` can be used to add a badge to the tab.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-tab\n *\n * @cssproperty --mdc-tab-content-gap - Gap between the badge(if provided), icon and text.\n * @cssproperty --mdc-tab-height - Height of the tab.\n * @cssproperty --mdc-tab-glass-active-background-color-disabled - Background color for active glass tab\n * in disabled state.\n * @cssproperty --mdc-tab-glass-active-background-color-hover - Background color for active glass tab in hover state.\n * @cssproperty --mdc-tab-glass-active-background-color-normal - Background color for active glass tab in rest state.\n * @cssproperty --mdc-tab-glass-active-background-color-pressed - Background color for active glass tab\n * in pressed state.\n * @cssproperty --mdc-tab-glass-active-color - Text and icon color for active glass tab.\n * @cssproperty --mdc-tab-glass-active-color-disabled - Text and icon color for active glass tab in disabled state.\n * @cssproperty --mdc-tab-glass-border-radius - Border radius for glass tab.\n * @cssproperty --mdc-tab-glass-inactive-background-color-disabled - Background color for inactive glass tab\n * in disabled state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-hover - Background color for inactive glass tab\n * in hover state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-normal - Background color for inactive glass tab\n * in rest state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-pressed - Background color for inactive glass tab\n * in pressed state.\n * @cssproperty --mdc-tab-glass-inactive-color - Text and icon color for inactive glass tab.\n * @cssproperty --mdc-tab-glass-inactive-color-disabled - Text and icon color for inactive glass tab in disabled state.\n * @cssproperty --mdc-tab-line-active-background-color-pressed - Background color for active line tab in pressed state.\n * @cssproperty --mdc-tab-line-active-background-color-disabled - Background color for active line tab\n * in disabled state.\n * @cssproperty --mdc-tab-line-active-background-color-hover - Background color for active line tab in hover state.\n * @cssproperty --mdc-tab-line-active-background-color-normal - Background color for active line tab in rest state.\n * @cssproperty --mdc-tab-line-active-color - Text and icon color for active line tab.\n * @cssproperty --mdc-tab-line-active-color-disabled - Text and icon color for active line tab in disabled state.\n * @cssproperty --mdc-tab-line-active-indicator-color - color for indicator in active line tab.\n * @cssproperty --mdc-tab-line-active-indicator-color-disabled - Color for indicator in active line tab\n * in disabled state.\n * @cssproperty --mdc-tab-line-active-indicator-height - Height for indicator in active line tab.\n * @cssproperty --mdc-tab-line-active-indicator-width - Width for indicator in active line tab.\n * @cssproperty --mdc-tab-line-border-bottom-left-radius - Bottom left border radius for line tab.\n * @cssproperty --mdc-tab-line-border-bottom-right-radius - Bottom right border radius for line tab.\n * @cssproperty --mdc-tab-line-border-top-left-radius - Top left border radius for line tab.\n * @cssproperty --mdc-tab-line-border-top-right-radius - Top right border radius for line tab.\n * @cssproperty --mdc-tab-line-inactive-background-color-pressed - Background color for inactive line tab\n * in pressed state.\n * @cssproperty --mdc-tab-line-inactive-background-color-disabled - Background color for inactive line tab\n * in disabled state\n * @cssproperty --mdc-tab-line-inactive-background-color-hover - Background color for inactive line tab in hover state.\n * @cssproperty --mdc-tab-line-inactive-background-color-normal - Background color for inactive line tab\n * in rest state.\n * @cssproperty --mdc-tab-line-inactive-color - Text and icon color for inactive line tab.\n * @cssproperty --mdc-tab-line-inactive-color-disabled - Text and icon color for inactive line tab in disabled state.\n * @cssproperty --mdc-tab-padding-left - Padding left for the tab.\n * @cssproperty --mdc-tab-padding-right - Padding right for the tab.\n * @cssproperty --mdc-tab-pill-active-background-color-pressed - Background color for active pill tab in pressed state.\n * @cssproperty --mdc-tab-pill-active-background-color-disabled - Background color for active pill tab\n * in disabled state.\n * @cssproperty --mdc-tab-pill-active-background-color-hover - Background color for active pill tab in hover state.\n * @cssproperty --mdc-tab-pill-active-background-color-normal - Background color for active pill tab in rest state.\n * @cssproperty --mdc-tab-pill-active-color - Text and icon color for active pill tab.\n * @cssproperty --mdc-tab-pill-active-color-disabled - Text and icon color for active pill tab in disabled state.\n * @cssproperty --mdc-tab-pill-border-radius - Border radius for pill tab.\n * @cssproperty --mdc-tab-pill-inactive-background-color-pressed - Background color for inactive pill tab\n * in pressed state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-disabled - Background color for inactive pill tab\n * in disabled state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-hover - Background color for inactive pill tab in hover state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-normal - Background color for inactive pill tab in rest state.\n * @cssproperty --mdc-tab-pill-inactive-color - Text and icon color for inactive pill tab.\n * @cssproperty --mdc-tab-pill-inactive-color-disabled - Text and icon color for inactive pill tab in disabled state.\n */",
|
|
6884
|
+
"customElement": true
|
|
6885
6885
|
}
|
|
6886
6886
|
],
|
|
6887
6887
|
"exports": [
|
|
@@ -6889,8 +6889,8 @@
|
|
|
6889
6889
|
"kind": "js",
|
|
6890
6890
|
"name": "default",
|
|
6891
6891
|
"declaration": {
|
|
6892
|
-
"name": "
|
|
6893
|
-
"module": "components/
|
|
6892
|
+
"name": "Tab",
|
|
6893
|
+
"module": "components/tab/tab.component.js"
|
|
6894
6894
|
}
|
|
6895
6895
|
}
|
|
6896
6896
|
]
|