@momentum-design/components 0.82.3 → 0.83.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +1546 -1546
- package/dist/react/index.d.ts +4 -4
- package/dist/react/index.js +4 -4
- package/package.json +1 -1
|
@@ -4,203 +4,509 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "components/
|
|
7
|
+
"path": "components/alertchip/alertchip.component.js",
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "
|
|
12
|
-
"name": "
|
|
11
|
+
"description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - neutral, warning, error, success, and informational\n\nThis component is built by extending Buttonsimple.",
|
|
12
|
+
"name": "AlertChip",
|
|
13
|
+
"cssProperties": [
|
|
14
|
+
{
|
|
15
|
+
"description": "The color of the label text",
|
|
16
|
+
"name": "--mdc-chip-color"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"description": "The color of the icon",
|
|
20
|
+
"name": "--mdc-chip-icon-color"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"description": "The border color of the alertchip",
|
|
24
|
+
"name": "--mdc-chip-border-color"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"description": "The background color of the alertchip",
|
|
28
|
+
"name": "--mdc-chip-background-color"
|
|
29
|
+
}
|
|
30
|
+
],
|
|
13
31
|
"members": [
|
|
14
32
|
{
|
|
15
33
|
"kind": "field",
|
|
16
|
-
"name": "
|
|
34
|
+
"name": "variant",
|
|
17
35
|
"type": {
|
|
18
|
-
"text": "
|
|
36
|
+
"text": "VariantType"
|
|
19
37
|
},
|
|
20
|
-
"description": "
|
|
21
|
-
"
|
|
22
|
-
"
|
|
38
|
+
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
39
|
+
"default": "neutral",
|
|
40
|
+
"attribute": "variant"
|
|
23
41
|
},
|
|
24
42
|
{
|
|
25
43
|
"kind": "field",
|
|
26
|
-
"name": "
|
|
44
|
+
"name": "label",
|
|
27
45
|
"type": {
|
|
28
|
-
"text": "
|
|
46
|
+
"text": "string"
|
|
29
47
|
},
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
48
|
+
"default": "''",
|
|
49
|
+
"description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
|
50
|
+
"attribute": "label"
|
|
33
51
|
},
|
|
34
52
|
{
|
|
35
53
|
"kind": "field",
|
|
36
|
-
"name": "
|
|
54
|
+
"name": "autofocus",
|
|
55
|
+
"type": {
|
|
56
|
+
"text": "boolean"
|
|
57
|
+
},
|
|
58
|
+
"default": "false",
|
|
59
|
+
"description": "This property indicates whether the element should receive focus automatically when it is rendered.",
|
|
60
|
+
"attribute": "autofocus",
|
|
61
|
+
"reflects": true,
|
|
62
|
+
"inheritedFrom": {
|
|
63
|
+
"name": "AutoFocusMixin",
|
|
64
|
+
"module": "utils/mixins/AutoFocusMixin.js"
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"kind": "field",
|
|
69
|
+
"name": "tabIndex",
|
|
70
|
+
"type": {
|
|
71
|
+
"text": "number"
|
|
72
|
+
},
|
|
73
|
+
"default": "0",
|
|
74
|
+
"description": "This property specifies the tab order of the element.",
|
|
75
|
+
"attribute": "tabIndex",
|
|
76
|
+
"reflects": true,
|
|
77
|
+
"inheritedFrom": {
|
|
78
|
+
"name": "TabIndexMixin",
|
|
79
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"kind": "field",
|
|
84
|
+
"name": "disabled",
|
|
37
85
|
"type": {
|
|
38
86
|
"text": "boolean | undefined"
|
|
39
87
|
},
|
|
40
|
-
"description": "
|
|
41
|
-
"
|
|
42
|
-
"
|
|
88
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
89
|
+
"default": "undefined",
|
|
90
|
+
"attribute": "disabled",
|
|
91
|
+
"reflects": true,
|
|
92
|
+
"inheritedFrom": {
|
|
93
|
+
"name": "DisabledMixin",
|
|
94
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
95
|
+
}
|
|
43
96
|
},
|
|
44
97
|
{
|
|
45
98
|
"kind": "field",
|
|
46
|
-
"name": "
|
|
99
|
+
"name": "active",
|
|
47
100
|
"type": {
|
|
48
|
-
"text": "
|
|
101
|
+
"text": "boolean | undefined"
|
|
49
102
|
},
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"attribute": "
|
|
103
|
+
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
|
104
|
+
"default": "undefined",
|
|
105
|
+
"attribute": "active",
|
|
106
|
+
"reflects": true,
|
|
107
|
+
"inheritedFrom": {
|
|
108
|
+
"name": "Buttonsimple",
|
|
109
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
110
|
+
}
|
|
53
111
|
},
|
|
54
112
|
{
|
|
55
113
|
"kind": "field",
|
|
56
|
-
"name": "
|
|
114
|
+
"name": "softDisabled",
|
|
57
115
|
"type": {
|
|
58
|
-
"text": "
|
|
116
|
+
"text": "boolean | undefined"
|
|
59
117
|
},
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"attribute": "
|
|
118
|
+
"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.",
|
|
119
|
+
"default": "undefined",
|
|
120
|
+
"attribute": "soft-disabled",
|
|
121
|
+
"reflects": true,
|
|
122
|
+
"inheritedFrom": {
|
|
123
|
+
"name": "Buttonsimple",
|
|
124
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
125
|
+
}
|
|
63
126
|
},
|
|
64
127
|
{
|
|
65
128
|
"kind": "field",
|
|
66
|
-
"name": "
|
|
129
|
+
"name": "size",
|
|
67
130
|
"type": {
|
|
68
|
-
"text": "
|
|
131
|
+
"text": "ButtonSize"
|
|
69
132
|
},
|
|
70
|
-
"
|
|
71
|
-
"
|
|
133
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
134
|
+
"default": "32",
|
|
135
|
+
"attribute": "size",
|
|
136
|
+
"reflects": true,
|
|
137
|
+
"inheritedFrom": {
|
|
138
|
+
"name": "Buttonsimple",
|
|
139
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
140
|
+
}
|
|
72
141
|
},
|
|
73
142
|
{
|
|
74
143
|
"kind": "field",
|
|
75
|
-
"name": "
|
|
144
|
+
"name": "role",
|
|
145
|
+
"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.",
|
|
146
|
+
"default": "button",
|
|
147
|
+
"attribute": "role",
|
|
148
|
+
"reflects": true,
|
|
149
|
+
"inheritedFrom": {
|
|
150
|
+
"name": "Buttonsimple",
|
|
151
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
152
|
+
}
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
"kind": "field",
|
|
156
|
+
"name": "ariaStateKey",
|
|
76
157
|
"type": {
|
|
77
|
-
"text": "
|
|
158
|
+
"text": "string | undefined"
|
|
78
159
|
},
|
|
79
|
-
"
|
|
80
|
-
"
|
|
160
|
+
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
|
161
|
+
"default": "'aria-pressed' (when)",
|
|
162
|
+
"attribute": "ariaStateKey",
|
|
163
|
+
"reflects": true,
|
|
164
|
+
"inheritedFrom": {
|
|
165
|
+
"name": "Buttonsimple",
|
|
166
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
167
|
+
}
|
|
81
168
|
},
|
|
82
169
|
{
|
|
83
170
|
"kind": "field",
|
|
84
|
-
"name": "
|
|
85
|
-
"
|
|
86
|
-
|
|
171
|
+
"name": "type",
|
|
172
|
+
"type": {
|
|
173
|
+
"text": "ButtonType"
|
|
174
|
+
},
|
|
175
|
+
"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.",
|
|
176
|
+
"default": "button",
|
|
177
|
+
"attribute": "type",
|
|
178
|
+
"reflects": true,
|
|
179
|
+
"inheritedFrom": {
|
|
180
|
+
"name": "Buttonsimple",
|
|
181
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
182
|
+
}
|
|
87
183
|
},
|
|
88
184
|
{
|
|
89
185
|
"kind": "method",
|
|
90
|
-
"name": "
|
|
91
|
-
"privacy": "
|
|
186
|
+
"name": "executeAction",
|
|
187
|
+
"privacy": "protected",
|
|
188
|
+
"inheritedFrom": {
|
|
189
|
+
"name": "Buttonsimple",
|
|
190
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
191
|
+
}
|
|
92
192
|
},
|
|
93
193
|
{
|
|
94
194
|
"kind": "method",
|
|
95
|
-
"name": "
|
|
96
|
-
"privacy": "
|
|
195
|
+
"name": "setActive",
|
|
196
|
+
"privacy": "protected",
|
|
97
197
|
"parameters": [
|
|
98
198
|
{
|
|
99
|
-
"name": "
|
|
199
|
+
"name": "element",
|
|
100
200
|
"type": {
|
|
101
|
-
"text": "
|
|
102
|
-
}
|
|
201
|
+
"text": "HTMLElement"
|
|
202
|
+
},
|
|
203
|
+
"description": "The button element"
|
|
204
|
+
},
|
|
205
|
+
{
|
|
206
|
+
"name": "active",
|
|
207
|
+
"optional": true,
|
|
208
|
+
"type": {
|
|
209
|
+
"text": "boolean"
|
|
210
|
+
},
|
|
211
|
+
"description": "The active state of the element"
|
|
103
212
|
}
|
|
104
213
|
],
|
|
105
|
-
"description": "
|
|
214
|
+
"description": "Sets the ariaStateKey attributes based on the active state of the button.",
|
|
215
|
+
"inheritedFrom": {
|
|
216
|
+
"name": "Buttonsimple",
|
|
217
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
218
|
+
}
|
|
106
219
|
},
|
|
107
220
|
{
|
|
108
221
|
"kind": "method",
|
|
109
|
-
"name": "
|
|
222
|
+
"name": "setSoftDisabled",
|
|
110
223
|
"privacy": "private",
|
|
111
224
|
"parameters": [
|
|
112
225
|
{
|
|
113
|
-
"name": "
|
|
226
|
+
"name": "element",
|
|
114
227
|
"type": {
|
|
115
|
-
"text": "
|
|
116
|
-
}
|
|
228
|
+
"text": "HTMLElement"
|
|
229
|
+
},
|
|
230
|
+
"description": "The button element."
|
|
231
|
+
},
|
|
232
|
+
{
|
|
233
|
+
"name": "softDisabled",
|
|
234
|
+
"optional": true,
|
|
235
|
+
"type": {
|
|
236
|
+
"text": "boolean"
|
|
237
|
+
},
|
|
238
|
+
"description": "The soft-disabled state."
|
|
117
239
|
}
|
|
118
240
|
],
|
|
119
|
-
"description": "
|
|
241
|
+
"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.",
|
|
242
|
+
"inheritedFrom": {
|
|
243
|
+
"name": "Buttonsimple",
|
|
244
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
245
|
+
}
|
|
120
246
|
},
|
|
121
247
|
{
|
|
122
248
|
"kind": "method",
|
|
123
|
-
"name": "
|
|
249
|
+
"name": "setDisabled",
|
|
124
250
|
"privacy": "private",
|
|
125
|
-
"
|
|
251
|
+
"parameters": [
|
|
252
|
+
{
|
|
253
|
+
"name": "element",
|
|
254
|
+
"type": {
|
|
255
|
+
"text": "HTMLElement"
|
|
256
|
+
},
|
|
257
|
+
"description": "The button element."
|
|
258
|
+
},
|
|
259
|
+
{
|
|
260
|
+
"name": "disabled",
|
|
261
|
+
"type": {
|
|
262
|
+
"text": "boolean"
|
|
263
|
+
},
|
|
264
|
+
"description": "The disabled state."
|
|
265
|
+
}
|
|
266
|
+
],
|
|
267
|
+
"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.",
|
|
268
|
+
"inheritedFrom": {
|
|
269
|
+
"name": "Buttonsimple",
|
|
270
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
271
|
+
}
|
|
126
272
|
},
|
|
127
273
|
{
|
|
128
|
-
"kind": "
|
|
129
|
-
"name": "
|
|
130
|
-
"
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
274
|
+
"kind": "method",
|
|
275
|
+
"name": "triggerClickEvent",
|
|
276
|
+
"privacy": "private",
|
|
277
|
+
"inheritedFrom": {
|
|
278
|
+
"name": "Buttonsimple",
|
|
279
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
280
|
+
}
|
|
281
|
+
},
|
|
134
282
|
{
|
|
135
|
-
"
|
|
136
|
-
"
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
"
|
|
140
|
-
|
|
283
|
+
"kind": "method",
|
|
284
|
+
"name": "handleBlur",
|
|
285
|
+
"privacy": "private",
|
|
286
|
+
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
|
287
|
+
"inheritedFrom": {
|
|
288
|
+
"name": "Buttonsimple",
|
|
289
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
290
|
+
}
|
|
141
291
|
},
|
|
142
292
|
{
|
|
143
|
-
"
|
|
144
|
-
"name": "
|
|
145
|
-
"
|
|
293
|
+
"kind": "method",
|
|
294
|
+
"name": "handleKeyDown",
|
|
295
|
+
"privacy": "private",
|
|
296
|
+
"parameters": [
|
|
297
|
+
{
|
|
298
|
+
"name": "event",
|
|
299
|
+
"type": {
|
|
300
|
+
"text": "KeyboardEvent"
|
|
301
|
+
},
|
|
302
|
+
"description": "The keyboard event."
|
|
303
|
+
}
|
|
304
|
+
],
|
|
305
|
+
"description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
|
|
306
|
+
"inheritedFrom": {
|
|
307
|
+
"name": "Buttonsimple",
|
|
308
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
309
|
+
}
|
|
146
310
|
},
|
|
147
311
|
{
|
|
148
|
-
"
|
|
149
|
-
"name": "
|
|
150
|
-
"
|
|
312
|
+
"kind": "method",
|
|
313
|
+
"name": "handleKeyUp",
|
|
314
|
+
"privacy": "private",
|
|
315
|
+
"parameters": [
|
|
316
|
+
{
|
|
317
|
+
"name": "event",
|
|
318
|
+
"type": {
|
|
319
|
+
"text": "KeyboardEvent"
|
|
320
|
+
},
|
|
321
|
+
"description": "The keyboard event."
|
|
322
|
+
}
|
|
323
|
+
],
|
|
324
|
+
"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.",
|
|
325
|
+
"inheritedFrom": {
|
|
326
|
+
"name": "Buttonsimple",
|
|
327
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
328
|
+
}
|
|
151
329
|
}
|
|
152
330
|
],
|
|
153
331
|
"attributes": [
|
|
154
332
|
{
|
|
155
|
-
"name": "
|
|
333
|
+
"name": "variant",
|
|
156
334
|
"type": {
|
|
157
|
-
"text": "
|
|
335
|
+
"text": "VariantType"
|
|
158
336
|
},
|
|
159
|
-
"description": "
|
|
160
|
-
"
|
|
337
|
+
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
338
|
+
"default": "neutral",
|
|
339
|
+
"fieldName": "variant"
|
|
161
340
|
},
|
|
162
341
|
{
|
|
163
|
-
"name": "
|
|
342
|
+
"name": "label",
|
|
164
343
|
"type": {
|
|
165
|
-
"text": "
|
|
344
|
+
"text": "string"
|
|
166
345
|
},
|
|
167
|
-
"
|
|
168
|
-
"
|
|
346
|
+
"default": "''",
|
|
347
|
+
"description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
|
348
|
+
"fieldName": "label"
|
|
169
349
|
},
|
|
170
350
|
{
|
|
171
|
-
"name": "
|
|
351
|
+
"name": "autofocus",
|
|
352
|
+
"type": {
|
|
353
|
+
"text": "boolean"
|
|
354
|
+
},
|
|
355
|
+
"default": "false",
|
|
356
|
+
"description": "This property indicates whether the element should receive focus automatically when it is rendered.",
|
|
357
|
+
"fieldName": "autofocus",
|
|
358
|
+
"inheritedFrom": {
|
|
359
|
+
"name": "AutoFocusMixin",
|
|
360
|
+
"module": "src/utils/mixins/AutoFocusMixin.ts"
|
|
361
|
+
}
|
|
362
|
+
},
|
|
363
|
+
{
|
|
364
|
+
"name": "tabIndex",
|
|
365
|
+
"type": {
|
|
366
|
+
"text": "number"
|
|
367
|
+
},
|
|
368
|
+
"default": "0",
|
|
369
|
+
"description": "This property specifies the tab order of the element.",
|
|
370
|
+
"fieldName": "tabIndex",
|
|
371
|
+
"inheritedFrom": {
|
|
372
|
+
"name": "TabIndexMixin",
|
|
373
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
374
|
+
}
|
|
375
|
+
},
|
|
376
|
+
{
|
|
377
|
+
"name": "disabled",
|
|
172
378
|
"type": {
|
|
173
379
|
"text": "boolean | undefined"
|
|
174
380
|
},
|
|
175
|
-
"description": "
|
|
176
|
-
"
|
|
381
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
382
|
+
"default": "undefined",
|
|
383
|
+
"fieldName": "disabled",
|
|
384
|
+
"inheritedFrom": {
|
|
385
|
+
"name": "DisabledMixin",
|
|
386
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
387
|
+
}
|
|
177
388
|
},
|
|
178
389
|
{
|
|
179
|
-
"name": "
|
|
390
|
+
"name": "active",
|
|
180
391
|
"type": {
|
|
181
|
-
"text": "
|
|
392
|
+
"text": "boolean | undefined"
|
|
182
393
|
},
|
|
183
|
-
"
|
|
184
|
-
"
|
|
185
|
-
"fieldName": "
|
|
394
|
+
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
|
395
|
+
"default": "undefined",
|
|
396
|
+
"fieldName": "active",
|
|
397
|
+
"inheritedFrom": {
|
|
398
|
+
"name": "Buttonsimple",
|
|
399
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
400
|
+
}
|
|
186
401
|
},
|
|
187
402
|
{
|
|
188
|
-
"name": "
|
|
403
|
+
"name": "soft-disabled",
|
|
189
404
|
"type": {
|
|
190
|
-
"text": "
|
|
405
|
+
"text": "boolean | undefined"
|
|
191
406
|
},
|
|
192
|
-
"
|
|
193
|
-
"
|
|
194
|
-
"fieldName": "
|
|
407
|
+
"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.",
|
|
408
|
+
"default": "undefined",
|
|
409
|
+
"fieldName": "softDisabled",
|
|
410
|
+
"inheritedFrom": {
|
|
411
|
+
"name": "Buttonsimple",
|
|
412
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
413
|
+
}
|
|
414
|
+
},
|
|
415
|
+
{
|
|
416
|
+
"name": "size",
|
|
417
|
+
"type": {
|
|
418
|
+
"text": "ButtonSize"
|
|
419
|
+
},
|
|
420
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
421
|
+
"default": "32",
|
|
422
|
+
"fieldName": "size",
|
|
423
|
+
"inheritedFrom": {
|
|
424
|
+
"name": "Buttonsimple",
|
|
425
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
426
|
+
}
|
|
427
|
+
},
|
|
428
|
+
{
|
|
429
|
+
"name": "role",
|
|
430
|
+
"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.",
|
|
431
|
+
"default": "button",
|
|
432
|
+
"fieldName": "role",
|
|
433
|
+
"inheritedFrom": {
|
|
434
|
+
"name": "Buttonsimple",
|
|
435
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
436
|
+
}
|
|
437
|
+
},
|
|
438
|
+
{
|
|
439
|
+
"name": "ariaStateKey",
|
|
440
|
+
"type": {
|
|
441
|
+
"text": "string | undefined"
|
|
442
|
+
},
|
|
443
|
+
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
|
444
|
+
"default": "'aria-pressed' (when)",
|
|
445
|
+
"fieldName": "ariaStateKey",
|
|
446
|
+
"inheritedFrom": {
|
|
447
|
+
"name": "Buttonsimple",
|
|
448
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
449
|
+
}
|
|
450
|
+
},
|
|
451
|
+
{
|
|
452
|
+
"name": "type",
|
|
453
|
+
"type": {
|
|
454
|
+
"text": "ButtonType"
|
|
455
|
+
},
|
|
456
|
+
"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.",
|
|
457
|
+
"default": "button",
|
|
458
|
+
"fieldName": "type",
|
|
459
|
+
"inheritedFrom": {
|
|
460
|
+
"name": "Buttonsimple",
|
|
461
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
462
|
+
}
|
|
195
463
|
}
|
|
196
464
|
],
|
|
197
465
|
"superclass": {
|
|
198
|
-
"name": "
|
|
199
|
-
"module": "/src/
|
|
466
|
+
"name": "Buttonsimple",
|
|
467
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
200
468
|
},
|
|
201
|
-
"tagName": "mdc-
|
|
202
|
-
"jsDoc": "/**\n *
|
|
203
|
-
"customElement": true
|
|
469
|
+
"tagName": "mdc-alertchip",
|
|
470
|
+
"jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - neutral, warning, error, success, and informational\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n */",
|
|
471
|
+
"customElement": true,
|
|
472
|
+
"events": [
|
|
473
|
+
{
|
|
474
|
+
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
|
475
|
+
"name": "click",
|
|
476
|
+
"reactName": "onClick",
|
|
477
|
+
"inheritedFrom": {
|
|
478
|
+
"name": "Buttonsimple",
|
|
479
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
480
|
+
}
|
|
481
|
+
},
|
|
482
|
+
{
|
|
483
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
|
|
484
|
+
"name": "keydown",
|
|
485
|
+
"reactName": "onKeyDown",
|
|
486
|
+
"inheritedFrom": {
|
|
487
|
+
"name": "Buttonsimple",
|
|
488
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
489
|
+
}
|
|
490
|
+
},
|
|
491
|
+
{
|
|
492
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
|
|
493
|
+
"name": "keyup",
|
|
494
|
+
"reactName": "onKeyUp",
|
|
495
|
+
"inheritedFrom": {
|
|
496
|
+
"name": "Buttonsimple",
|
|
497
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
498
|
+
}
|
|
499
|
+
},
|
|
500
|
+
{
|
|
501
|
+
"description": "(React: onFocus) This event is dispatched when the button receives focus.",
|
|
502
|
+
"name": "focus",
|
|
503
|
+
"reactName": "onFocus",
|
|
504
|
+
"inheritedFrom": {
|
|
505
|
+
"name": "Buttonsimple",
|
|
506
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
507
|
+
}
|
|
508
|
+
}
|
|
509
|
+
]
|
|
204
510
|
}
|
|
205
511
|
],
|
|
206
512
|
"exports": [
|
|
@@ -208,21 +514,233 @@
|
|
|
208
514
|
"kind": "js",
|
|
209
515
|
"name": "default",
|
|
210
516
|
"declaration": {
|
|
211
|
-
"name": "
|
|
212
|
-
"module": "components/
|
|
517
|
+
"name": "AlertChip",
|
|
518
|
+
"module": "components/alertchip/alertchip.component.js"
|
|
213
519
|
}
|
|
214
520
|
}
|
|
215
521
|
]
|
|
216
522
|
},
|
|
217
523
|
{
|
|
218
524
|
"kind": "javascript-module",
|
|
219
|
-
"path": "components/
|
|
525
|
+
"path": "components/animation/animation.component.js",
|
|
220
526
|
"declarations": [
|
|
221
527
|
{
|
|
222
528
|
"kind": "class",
|
|
223
|
-
"description": "The `mdc-
|
|
224
|
-
"name": "
|
|
225
|
-
"
|
|
529
|
+
"description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
|
|
530
|
+
"name": "Animation",
|
|
531
|
+
"members": [
|
|
532
|
+
{
|
|
533
|
+
"kind": "field",
|
|
534
|
+
"name": "name",
|
|
535
|
+
"type": {
|
|
536
|
+
"text": "AnimationNames | undefined"
|
|
537
|
+
},
|
|
538
|
+
"description": "Name of the animation (= filename)",
|
|
539
|
+
"attribute": "name",
|
|
540
|
+
"reflects": true
|
|
541
|
+
},
|
|
542
|
+
{
|
|
543
|
+
"kind": "field",
|
|
544
|
+
"name": "loop",
|
|
545
|
+
"type": {
|
|
546
|
+
"text": "LoopType | undefined"
|
|
547
|
+
},
|
|
548
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
549
|
+
"attribute": "loop",
|
|
550
|
+
"reflects": true
|
|
551
|
+
},
|
|
552
|
+
{
|
|
553
|
+
"kind": "field",
|
|
554
|
+
"name": "autoplay",
|
|
555
|
+
"type": {
|
|
556
|
+
"text": "boolean | undefined"
|
|
557
|
+
},
|
|
558
|
+
"description": "Weather start the animation automatically",
|
|
559
|
+
"attribute": "autoplay",
|
|
560
|
+
"reflects": true
|
|
561
|
+
},
|
|
562
|
+
{
|
|
563
|
+
"kind": "field",
|
|
564
|
+
"name": "ariaLabel",
|
|
565
|
+
"type": {
|
|
566
|
+
"text": "string | null"
|
|
567
|
+
},
|
|
568
|
+
"default": "null",
|
|
569
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
570
|
+
"attribute": "aria-label"
|
|
571
|
+
},
|
|
572
|
+
{
|
|
573
|
+
"kind": "field",
|
|
574
|
+
"name": "ariaLabelledBy",
|
|
575
|
+
"type": {
|
|
576
|
+
"text": "string | null"
|
|
577
|
+
},
|
|
578
|
+
"default": "null",
|
|
579
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
580
|
+
"attribute": "aria-labelledby"
|
|
581
|
+
},
|
|
582
|
+
{
|
|
583
|
+
"kind": "field",
|
|
584
|
+
"name": "lottieInstance",
|
|
585
|
+
"type": {
|
|
586
|
+
"text": "AnimationItem | undefined"
|
|
587
|
+
},
|
|
588
|
+
"privacy": "private",
|
|
589
|
+
"description": "Lottie animation instance"
|
|
590
|
+
},
|
|
591
|
+
{
|
|
592
|
+
"kind": "field",
|
|
593
|
+
"name": "containerRef",
|
|
594
|
+
"type": {
|
|
595
|
+
"text": "Ref<HTMLDivElement>"
|
|
596
|
+
},
|
|
597
|
+
"privacy": "private",
|
|
598
|
+
"description": "Container for the animation"
|
|
599
|
+
},
|
|
600
|
+
{
|
|
601
|
+
"kind": "field",
|
|
602
|
+
"name": "animation",
|
|
603
|
+
"description": "Exposed API of the animation library (lottie)",
|
|
604
|
+
"readonly": true
|
|
605
|
+
},
|
|
606
|
+
{
|
|
607
|
+
"kind": "method",
|
|
608
|
+
"name": "getLoopValue",
|
|
609
|
+
"privacy": "private"
|
|
610
|
+
},
|
|
611
|
+
{
|
|
612
|
+
"kind": "method",
|
|
613
|
+
"name": "onLoadSuccessHandler",
|
|
614
|
+
"privacy": "private",
|
|
615
|
+
"parameters": [
|
|
616
|
+
{
|
|
617
|
+
"name": "animationData",
|
|
618
|
+
"type": {
|
|
619
|
+
"text": "any"
|
|
620
|
+
}
|
|
621
|
+
}
|
|
622
|
+
],
|
|
623
|
+
"description": "Create new lotty instance for the loaded data"
|
|
624
|
+
},
|
|
625
|
+
{
|
|
626
|
+
"kind": "method",
|
|
627
|
+
"name": "onLoadFailHandler",
|
|
628
|
+
"privacy": "private",
|
|
629
|
+
"parameters": [
|
|
630
|
+
{
|
|
631
|
+
"name": "error",
|
|
632
|
+
"type": {
|
|
633
|
+
"text": "Error"
|
|
634
|
+
}
|
|
635
|
+
}
|
|
636
|
+
],
|
|
637
|
+
"description": "Error handler for animation loading"
|
|
638
|
+
},
|
|
639
|
+
{
|
|
640
|
+
"kind": "method",
|
|
641
|
+
"name": "getAnimationData",
|
|
642
|
+
"privacy": "private",
|
|
643
|
+
"description": "Import animation data dynamically"
|
|
644
|
+
},
|
|
645
|
+
{
|
|
646
|
+
"kind": "field",
|
|
647
|
+
"name": "onCompleteHandler",
|
|
648
|
+
"description": "Re-dispatch the complete event from the animation library\n\nThis handler called with the animation instance instead of the component instance\nso we need to bind it to the component instance. The arrow function just does that."
|
|
649
|
+
}
|
|
650
|
+
],
|
|
651
|
+
"events": [
|
|
652
|
+
{
|
|
653
|
+
"name": "load",
|
|
654
|
+
"type": {
|
|
655
|
+
"text": "CustomEvent"
|
|
656
|
+
},
|
|
657
|
+
"description": "(React: onLoad) This event is dispatched when the animation is loaded",
|
|
658
|
+
"reactName": "onLoad"
|
|
659
|
+
},
|
|
660
|
+
{
|
|
661
|
+
"description": "(React: onComplete) This event is dispatched when all animation loops completed",
|
|
662
|
+
"name": "complete",
|
|
663
|
+
"reactName": "onComplete"
|
|
664
|
+
},
|
|
665
|
+
{
|
|
666
|
+
"description": "(React: onError) This event is dispatched when animation loading failed",
|
|
667
|
+
"name": "error",
|
|
668
|
+
"reactName": "onError"
|
|
669
|
+
}
|
|
670
|
+
],
|
|
671
|
+
"attributes": [
|
|
672
|
+
{
|
|
673
|
+
"name": "name",
|
|
674
|
+
"type": {
|
|
675
|
+
"text": "AnimationNames | undefined"
|
|
676
|
+
},
|
|
677
|
+
"description": "Name of the animation (= filename)",
|
|
678
|
+
"fieldName": "name"
|
|
679
|
+
},
|
|
680
|
+
{
|
|
681
|
+
"name": "loop",
|
|
682
|
+
"type": {
|
|
683
|
+
"text": "LoopType | undefined"
|
|
684
|
+
},
|
|
685
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
686
|
+
"fieldName": "loop"
|
|
687
|
+
},
|
|
688
|
+
{
|
|
689
|
+
"name": "autoplay",
|
|
690
|
+
"type": {
|
|
691
|
+
"text": "boolean | undefined"
|
|
692
|
+
},
|
|
693
|
+
"description": "Weather start the animation automatically",
|
|
694
|
+
"fieldName": "autoplay"
|
|
695
|
+
},
|
|
696
|
+
{
|
|
697
|
+
"name": "aria-label",
|
|
698
|
+
"type": {
|
|
699
|
+
"text": "string | null"
|
|
700
|
+
},
|
|
701
|
+
"default": "null",
|
|
702
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
703
|
+
"fieldName": "ariaLabel"
|
|
704
|
+
},
|
|
705
|
+
{
|
|
706
|
+
"name": "aria-labelledby",
|
|
707
|
+
"type": {
|
|
708
|
+
"text": "string | null"
|
|
709
|
+
},
|
|
710
|
+
"default": "null",
|
|
711
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
712
|
+
"fieldName": "ariaLabelledBy"
|
|
713
|
+
}
|
|
714
|
+
],
|
|
715
|
+
"superclass": {
|
|
716
|
+
"name": "Component",
|
|
717
|
+
"module": "/src/models"
|
|
718
|
+
},
|
|
719
|
+
"tagName": "mdc-animation",
|
|
720
|
+
"jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
|
|
721
|
+
"customElement": true
|
|
722
|
+
}
|
|
723
|
+
],
|
|
724
|
+
"exports": [
|
|
725
|
+
{
|
|
726
|
+
"kind": "js",
|
|
727
|
+
"name": "default",
|
|
728
|
+
"declaration": {
|
|
729
|
+
"name": "Animation",
|
|
730
|
+
"module": "components/animation/animation.component.js"
|
|
731
|
+
}
|
|
732
|
+
}
|
|
733
|
+
]
|
|
734
|
+
},
|
|
735
|
+
{
|
|
736
|
+
"kind": "javascript-module",
|
|
737
|
+
"path": "components/appheader/appheader.component.js",
|
|
738
|
+
"declarations": [
|
|
739
|
+
{
|
|
740
|
+
"kind": "class",
|
|
741
|
+
"description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
|
|
742
|
+
"name": "Appheader",
|
|
743
|
+
"cssParts": [
|
|
226
744
|
{
|
|
227
745
|
"description": "The main container for styling the header.",
|
|
228
746
|
"name": "container"
|
|
@@ -521,509 +1039,312 @@
|
|
|
521
1039
|
},
|
|
522
1040
|
{
|
|
523
1041
|
"kind": "javascript-module",
|
|
524
|
-
"path": "components/
|
|
1042
|
+
"path": "components/badge/badge.component.js",
|
|
525
1043
|
"declarations": [
|
|
526
1044
|
{
|
|
527
1045
|
"kind": "class",
|
|
528
|
-
"description": "mdc-
|
|
529
|
-
"name": "
|
|
1046
|
+
"description": "The `mdc-badge` component is a versatile UI element used to\ndisplay dot, icons, counters, success, warning and error type badge.\n\nSupported badge types:\n- `dot`: Displays a dot notification badge with a blue color.\n- `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n- `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\nit shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n- `success`: Displays a success badge with a check circle icon and green color.\n- `warning`: Displays a warning badge with a warning icon and yellow color.\n- `error`: Displays a error badge with a error legacy icon and red color.\n\nFor `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n\nFor the `counter` type, the `mdc-text` component is used to render the counter value.",
|
|
1047
|
+
"name": "Badge",
|
|
530
1048
|
"cssProperties": [
|
|
531
1049
|
{
|
|
532
|
-
"description": "The color of the
|
|
533
|
-
"name": "--mdc-
|
|
1050
|
+
"description": "The foreground color of the primary badge.",
|
|
1051
|
+
"name": "--mdc-badge-primary-foreground-color"
|
|
534
1052
|
},
|
|
535
1053
|
{
|
|
536
|
-
"description": "The color of the
|
|
537
|
-
"name": "--mdc-
|
|
1054
|
+
"description": "The background color of the primary badge.",
|
|
1055
|
+
"name": "--mdc-badge-primary-background-color"
|
|
538
1056
|
},
|
|
539
1057
|
{
|
|
540
|
-
"description": "The
|
|
541
|
-
"name": "--mdc-
|
|
1058
|
+
"description": "The foreground color of the secondary badge.",
|
|
1059
|
+
"name": "--mdc-badge-secondary-foreground-color"
|
|
542
1060
|
},
|
|
543
1061
|
{
|
|
544
|
-
"description": "The background color of the
|
|
545
|
-
"name": "--mdc-
|
|
546
|
-
}
|
|
547
|
-
],
|
|
548
|
-
"members": [
|
|
549
|
-
{
|
|
550
|
-
"kind": "field",
|
|
551
|
-
"name": "variant",
|
|
552
|
-
"type": {
|
|
553
|
-
"text": "VariantType"
|
|
554
|
-
},
|
|
555
|
-
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
556
|
-
"default": "neutral",
|
|
557
|
-
"attribute": "variant"
|
|
1062
|
+
"description": "The background color of the secondary badge.",
|
|
1063
|
+
"name": "--mdc-badge-secondary-background-color"
|
|
558
1064
|
},
|
|
559
1065
|
{
|
|
560
|
-
"
|
|
561
|
-
"name": "
|
|
562
|
-
"type": {
|
|
563
|
-
"text": "string"
|
|
564
|
-
},
|
|
565
|
-
"default": "''",
|
|
566
|
-
"description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
|
567
|
-
"attribute": "label"
|
|
1066
|
+
"description": "The foreground color of the success badge.",
|
|
1067
|
+
"name": "--mdc-badge-success-foreground-color"
|
|
568
1068
|
},
|
|
569
1069
|
{
|
|
570
|
-
"
|
|
571
|
-
"name": "
|
|
572
|
-
"type": {
|
|
573
|
-
"text": "boolean"
|
|
574
|
-
},
|
|
575
|
-
"default": "false",
|
|
576
|
-
"description": "This property indicates whether the element should receive focus automatically when it is rendered.",
|
|
577
|
-
"attribute": "autofocus",
|
|
578
|
-
"reflects": true,
|
|
579
|
-
"inheritedFrom": {
|
|
580
|
-
"name": "AutoFocusMixin",
|
|
581
|
-
"module": "utils/mixins/AutoFocusMixin.js"
|
|
582
|
-
}
|
|
1070
|
+
"description": "The background color of the success badge.",
|
|
1071
|
+
"name": "--mdc-badge-success-background-color"
|
|
583
1072
|
},
|
|
584
1073
|
{
|
|
585
|
-
"
|
|
586
|
-
"name": "
|
|
587
|
-
"type": {
|
|
588
|
-
"text": "number"
|
|
589
|
-
},
|
|
590
|
-
"default": "0",
|
|
591
|
-
"description": "This property specifies the tab order of the element.",
|
|
592
|
-
"attribute": "tabIndex",
|
|
593
|
-
"reflects": true,
|
|
594
|
-
"inheritedFrom": {
|
|
595
|
-
"name": "TabIndexMixin",
|
|
596
|
-
"module": "utils/mixins/TabIndexMixin.js"
|
|
597
|
-
}
|
|
1074
|
+
"description": "The foreground color of the warning badge.",
|
|
1075
|
+
"name": "--mdc-badge-warning-foreground-color"
|
|
598
1076
|
},
|
|
599
1077
|
{
|
|
600
|
-
"
|
|
601
|
-
"name": "
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
"
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
"
|
|
609
|
-
"
|
|
610
|
-
"name": "DisabledMixin",
|
|
611
|
-
"module": "utils/mixins/DisabledMixin.js"
|
|
612
|
-
}
|
|
1078
|
+
"description": "The background color of the warning badge.",
|
|
1079
|
+
"name": "--mdc-badge-warning-background-color"
|
|
1080
|
+
},
|
|
1081
|
+
{
|
|
1082
|
+
"description": "The foreground color of the error badge.",
|
|
1083
|
+
"name": "--mdc-badge-error-foreground-color"
|
|
1084
|
+
},
|
|
1085
|
+
{
|
|
1086
|
+
"description": "The background color of the error badge.",
|
|
1087
|
+
"name": "--mdc-badge-error-background-color"
|
|
613
1088
|
},
|
|
1089
|
+
{
|
|
1090
|
+
"description": "The background color of the badge overlay.",
|
|
1091
|
+
"name": "--mdc-badge-overlay-background-color"
|
|
1092
|
+
}
|
|
1093
|
+
],
|
|
1094
|
+
"members": [
|
|
614
1095
|
{
|
|
615
1096
|
"kind": "field",
|
|
616
|
-
"name": "
|
|
1097
|
+
"name": "type",
|
|
617
1098
|
"type": {
|
|
618
|
-
"text": "
|
|
1099
|
+
"text": "BadgeType | undefined"
|
|
619
1100
|
},
|
|
620
|
-
"description": "
|
|
621
|
-
"
|
|
622
|
-
"
|
|
623
|
-
"reflects": true,
|
|
624
|
-
"inheritedFrom": {
|
|
625
|
-
"name": "Buttonsimple",
|
|
626
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
627
|
-
}
|
|
1101
|
+
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
1102
|
+
"attribute": "type",
|
|
1103
|
+
"reflects": true
|
|
628
1104
|
},
|
|
629
1105
|
{
|
|
630
1106
|
"kind": "field",
|
|
631
|
-
"name": "
|
|
1107
|
+
"name": "variant",
|
|
632
1108
|
"type": {
|
|
633
|
-
"text": "
|
|
1109
|
+
"text": "IconVariant"
|
|
634
1110
|
},
|
|
635
|
-
"description": "
|
|
636
|
-
"default": "
|
|
637
|
-
"attribute": "
|
|
638
|
-
"reflects": true
|
|
639
|
-
"inheritedFrom": {
|
|
640
|
-
"name": "Buttonsimple",
|
|
641
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
642
|
-
}
|
|
1111
|
+
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
1112
|
+
"default": "primary",
|
|
1113
|
+
"attribute": "variant",
|
|
1114
|
+
"reflects": true
|
|
643
1115
|
},
|
|
644
1116
|
{
|
|
645
1117
|
"kind": "field",
|
|
646
|
-
"name": "
|
|
1118
|
+
"name": "counter",
|
|
647
1119
|
"type": {
|
|
648
|
-
"text": "
|
|
1120
|
+
"text": "number | undefined"
|
|
649
1121
|
},
|
|
650
|
-
"description": "
|
|
651
|
-
"
|
|
652
|
-
"attribute": "size",
|
|
653
|
-
"reflects": true,
|
|
654
|
-
"inheritedFrom": {
|
|
655
|
-
"name": "Buttonsimple",
|
|
656
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
657
|
-
}
|
|
1122
|
+
"description": "Counter is the number which can be provided in the badge.",
|
|
1123
|
+
"attribute": "counter"
|
|
658
1124
|
},
|
|
659
1125
|
{
|
|
660
1126
|
"kind": "field",
|
|
661
|
-
"name": "
|
|
662
|
-
"
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
"
|
|
666
|
-
"
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
}
|
|
1127
|
+
"name": "maxCounter",
|
|
1128
|
+
"type": {
|
|
1129
|
+
"text": "number"
|
|
1130
|
+
},
|
|
1131
|
+
"description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
|
|
1132
|
+
"default": "99",
|
|
1133
|
+
"attribute": "max-counter",
|
|
1134
|
+
"reflects": true
|
|
670
1135
|
},
|
|
671
1136
|
{
|
|
672
1137
|
"kind": "field",
|
|
673
|
-
"name": "
|
|
1138
|
+
"name": "overlay",
|
|
674
1139
|
"type": {
|
|
675
|
-
"text": "
|
|
1140
|
+
"text": "boolean"
|
|
676
1141
|
},
|
|
677
|
-
"
|
|
678
|
-
"
|
|
679
|
-
"attribute": "
|
|
680
|
-
"reflects": true,
|
|
681
|
-
"inheritedFrom": {
|
|
682
|
-
"name": "Buttonsimple",
|
|
683
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
684
|
-
}
|
|
1142
|
+
"default": "false",
|
|
1143
|
+
"description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
|
|
1144
|
+
"attribute": "overlay"
|
|
685
1145
|
},
|
|
686
1146
|
{
|
|
687
1147
|
"kind": "field",
|
|
688
|
-
"name": "
|
|
1148
|
+
"name": "ariaLabel",
|
|
689
1149
|
"type": {
|
|
690
|
-
"text": "
|
|
1150
|
+
"text": "string | null"
|
|
691
1151
|
},
|
|
692
|
-
"
|
|
693
|
-
"
|
|
694
|
-
"attribute": "
|
|
695
|
-
"reflects": true,
|
|
696
|
-
"inheritedFrom": {
|
|
697
|
-
"name": "Buttonsimple",
|
|
698
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
699
|
-
}
|
|
700
|
-
},
|
|
701
|
-
{
|
|
702
|
-
"kind": "method",
|
|
703
|
-
"name": "executeAction",
|
|
704
|
-
"privacy": "protected",
|
|
705
|
-
"inheritedFrom": {
|
|
706
|
-
"name": "Buttonsimple",
|
|
707
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
708
|
-
}
|
|
1152
|
+
"default": "null",
|
|
1153
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
1154
|
+
"attribute": "aria-label"
|
|
709
1155
|
},
|
|
710
1156
|
{
|
|
711
1157
|
"kind": "method",
|
|
712
|
-
"name": "
|
|
713
|
-
"privacy": "
|
|
1158
|
+
"name": "getCounterText",
|
|
1159
|
+
"privacy": "private",
|
|
1160
|
+
"return": {
|
|
1161
|
+
"type": {
|
|
1162
|
+
"text": ""
|
|
1163
|
+
}
|
|
1164
|
+
},
|
|
714
1165
|
"parameters": [
|
|
715
1166
|
{
|
|
716
|
-
"name": "
|
|
1167
|
+
"name": "maxCounter",
|
|
717
1168
|
"type": {
|
|
718
|
-
"text": "
|
|
1169
|
+
"text": "number"
|
|
719
1170
|
},
|
|
720
|
-
"description": "
|
|
1171
|
+
"description": "the maximum limit which can be displayed on the badge"
|
|
721
1172
|
},
|
|
722
1173
|
{
|
|
723
|
-
"name": "
|
|
1174
|
+
"name": "counter",
|
|
724
1175
|
"optional": true,
|
|
725
1176
|
"type": {
|
|
726
|
-
"text": "
|
|
1177
|
+
"text": "number"
|
|
727
1178
|
},
|
|
728
|
-
"description": "
|
|
1179
|
+
"description": "the number to be displayed on the badge"
|
|
729
1180
|
}
|
|
730
1181
|
],
|
|
731
|
-
"description": "
|
|
732
|
-
"inheritedFrom": {
|
|
733
|
-
"name": "Buttonsimple",
|
|
734
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
735
|
-
}
|
|
1182
|
+
"description": "If `type` is set to `counter` and if `counter` is greater than `maxCounter`,\nthen it will return a string the maxCounter value as string.\nOtherwise, it will return a string representation of `counter`.\nIf `counter` is not a number, it will return an empty string."
|
|
736
1183
|
},
|
|
737
1184
|
{
|
|
738
1185
|
"kind": "method",
|
|
739
|
-
"name": "
|
|
1186
|
+
"name": "getBadgeIcon",
|
|
740
1187
|
"privacy": "private",
|
|
1188
|
+
"return": {
|
|
1189
|
+
"type": {
|
|
1190
|
+
"text": ""
|
|
1191
|
+
}
|
|
1192
|
+
},
|
|
741
1193
|
"parameters": [
|
|
742
1194
|
{
|
|
743
|
-
"name": "
|
|
1195
|
+
"name": "iconName",
|
|
744
1196
|
"type": {
|
|
745
|
-
"text": "
|
|
1197
|
+
"text": "string"
|
|
746
1198
|
},
|
|
747
|
-
"description": "
|
|
1199
|
+
"description": "the name of the icon from the icon set"
|
|
748
1200
|
},
|
|
749
1201
|
{
|
|
750
|
-
"name": "
|
|
751
|
-
"optional": true,
|
|
1202
|
+
"name": "backgroundClassPostfix",
|
|
752
1203
|
"type": {
|
|
753
|
-
"text": "
|
|
1204
|
+
"text": "string"
|
|
754
1205
|
},
|
|
755
|
-
"description": "
|
|
1206
|
+
"description": "postfix for the class to style the badge icon."
|
|
756
1207
|
}
|
|
757
1208
|
],
|
|
758
|
-
"description": "
|
|
759
|
-
"inheritedFrom": {
|
|
760
|
-
"name": "Buttonsimple",
|
|
761
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
762
|
-
}
|
|
1209
|
+
"description": "Method to generate the badge icon."
|
|
763
1210
|
},
|
|
764
1211
|
{
|
|
765
1212
|
"kind": "method",
|
|
766
|
-
"name": "
|
|
1213
|
+
"name": "getBadgeDot",
|
|
767
1214
|
"privacy": "private",
|
|
768
|
-
"
|
|
769
|
-
{
|
|
770
|
-
"
|
|
771
|
-
"type": {
|
|
772
|
-
"text": "HTMLElement"
|
|
773
|
-
},
|
|
774
|
-
"description": "The button element."
|
|
775
|
-
},
|
|
776
|
-
{
|
|
777
|
-
"name": "disabled",
|
|
778
|
-
"type": {
|
|
779
|
-
"text": "boolean"
|
|
780
|
-
},
|
|
781
|
-
"description": "The disabled state."
|
|
1215
|
+
"return": {
|
|
1216
|
+
"type": {
|
|
1217
|
+
"text": ""
|
|
782
1218
|
}
|
|
783
|
-
|
|
784
|
-
"description": "
|
|
785
|
-
"inheritedFrom": {
|
|
786
|
-
"name": "Buttonsimple",
|
|
787
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
788
|
-
}
|
|
1219
|
+
},
|
|
1220
|
+
"description": "Method to generate the badge dot template."
|
|
789
1221
|
},
|
|
790
1222
|
{
|
|
791
1223
|
"kind": "method",
|
|
792
|
-
"name": "
|
|
1224
|
+
"name": "getBadgeCounterText",
|
|
793
1225
|
"privacy": "private",
|
|
794
|
-
"
|
|
795
|
-
"
|
|
796
|
-
|
|
797
|
-
|
|
1226
|
+
"return": {
|
|
1227
|
+
"type": {
|
|
1228
|
+
"text": ""
|
|
1229
|
+
}
|
|
1230
|
+
},
|
|
1231
|
+
"description": "Method to generate the badge text and counter template."
|
|
798
1232
|
},
|
|
799
1233
|
{
|
|
800
1234
|
"kind": "method",
|
|
801
|
-
"name": "
|
|
1235
|
+
"name": "setRoleByAriaLabel",
|
|
802
1236
|
"privacy": "private",
|
|
803
|
-
"
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
}
|
|
1237
|
+
"return": {
|
|
1238
|
+
"type": {
|
|
1239
|
+
"text": "void"
|
|
1240
|
+
}
|
|
1241
|
+
},
|
|
1242
|
+
"description": "Method to set the role based on the aria-label provided.\nIf the aria-label is provided, the role of the element will be 'img'.\nOtherwise, the role will be null."
|
|
808
1243
|
},
|
|
809
1244
|
{
|
|
810
1245
|
"kind": "method",
|
|
811
|
-
"name": "
|
|
1246
|
+
"name": "getBadgeContentBasedOnType",
|
|
812
1247
|
"privacy": "private",
|
|
813
|
-
"
|
|
814
|
-
{
|
|
815
|
-
"
|
|
816
|
-
"type": {
|
|
817
|
-
"text": "KeyboardEvent"
|
|
818
|
-
},
|
|
819
|
-
"description": "The keyboard event."
|
|
1248
|
+
"return": {
|
|
1249
|
+
"type": {
|
|
1250
|
+
"text": ""
|
|
820
1251
|
}
|
|
821
|
-
|
|
822
|
-
"description": "
|
|
823
|
-
"inheritedFrom": {
|
|
824
|
-
"name": "Buttonsimple",
|
|
825
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
826
|
-
}
|
|
1252
|
+
},
|
|
1253
|
+
"description": "Generates the badge content based on the badge type.\nUtilizes various helper methods to create the appropriate badge template based on the\ncurrent badge type. Supports 'dot', 'icon', 'counter', 'success', 'warning', and 'error'\ntypes, returning the corresponding template result for each type."
|
|
827
1254
|
},
|
|
828
1255
|
{
|
|
829
|
-
"kind": "
|
|
830
|
-
"name": "
|
|
831
|
-
"
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
"text": "KeyboardEvent"
|
|
837
|
-
},
|
|
838
|
-
"description": "The keyboard event."
|
|
839
|
-
}
|
|
840
|
-
],
|
|
841
|
-
"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.",
|
|
1256
|
+
"kind": "field",
|
|
1257
|
+
"name": "iconName",
|
|
1258
|
+
"type": {
|
|
1259
|
+
"text": "IconNames | undefined"
|
|
1260
|
+
},
|
|
1261
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
1262
|
+
"attribute": "icon-name",
|
|
842
1263
|
"inheritedFrom": {
|
|
843
|
-
"name": "
|
|
844
|
-
"module": "
|
|
1264
|
+
"name": "IconNameMixin",
|
|
1265
|
+
"module": "utils/mixins/IconNameMixin.js"
|
|
845
1266
|
}
|
|
846
1267
|
}
|
|
847
1268
|
],
|
|
848
1269
|
"attributes": [
|
|
849
1270
|
{
|
|
850
|
-
"name": "
|
|
1271
|
+
"name": "type",
|
|
851
1272
|
"type": {
|
|
852
|
-
"text": "
|
|
1273
|
+
"text": "BadgeType | undefined"
|
|
853
1274
|
},
|
|
854
|
-
"description": "
|
|
855
|
-
"
|
|
856
|
-
"fieldName": "variant"
|
|
1275
|
+
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
1276
|
+
"fieldName": "type"
|
|
857
1277
|
},
|
|
858
1278
|
{
|
|
859
|
-
"name": "
|
|
1279
|
+
"name": "variant",
|
|
860
1280
|
"type": {
|
|
861
|
-
"text": "
|
|
1281
|
+
"text": "IconVariant"
|
|
862
1282
|
},
|
|
863
|
-
"
|
|
864
|
-
"
|
|
865
|
-
"fieldName": "
|
|
1283
|
+
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
1284
|
+
"default": "primary",
|
|
1285
|
+
"fieldName": "variant"
|
|
866
1286
|
},
|
|
867
1287
|
{
|
|
868
|
-
"name": "
|
|
1288
|
+
"name": "counter",
|
|
869
1289
|
"type": {
|
|
870
|
-
"text": "
|
|
1290
|
+
"text": "number | undefined"
|
|
871
1291
|
},
|
|
872
|
-
"
|
|
873
|
-
"
|
|
874
|
-
"fieldName": "autofocus",
|
|
875
|
-
"inheritedFrom": {
|
|
876
|
-
"name": "AutoFocusMixin",
|
|
877
|
-
"module": "src/utils/mixins/AutoFocusMixin.ts"
|
|
878
|
-
}
|
|
1292
|
+
"description": "Counter is the number which can be provided in the badge.",
|
|
1293
|
+
"fieldName": "counter"
|
|
879
1294
|
},
|
|
880
1295
|
{
|
|
881
|
-
"name": "
|
|
1296
|
+
"name": "max-counter",
|
|
882
1297
|
"type": {
|
|
883
1298
|
"text": "number"
|
|
884
1299
|
},
|
|
885
|
-
"
|
|
886
|
-
"
|
|
887
|
-
"fieldName": "
|
|
888
|
-
"inheritedFrom": {
|
|
889
|
-
"name": "TabIndexMixin",
|
|
890
|
-
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
891
|
-
}
|
|
892
|
-
},
|
|
893
|
-
{
|
|
894
|
-
"name": "disabled",
|
|
895
|
-
"type": {
|
|
896
|
-
"text": "boolean | undefined"
|
|
897
|
-
},
|
|
898
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
899
|
-
"default": "undefined",
|
|
900
|
-
"fieldName": "disabled",
|
|
901
|
-
"inheritedFrom": {
|
|
902
|
-
"name": "DisabledMixin",
|
|
903
|
-
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
904
|
-
}
|
|
905
|
-
},
|
|
906
|
-
{
|
|
907
|
-
"name": "active",
|
|
908
|
-
"type": {
|
|
909
|
-
"text": "boolean | undefined"
|
|
910
|
-
},
|
|
911
|
-
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
|
912
|
-
"default": "undefined",
|
|
913
|
-
"fieldName": "active",
|
|
914
|
-
"inheritedFrom": {
|
|
915
|
-
"name": "Buttonsimple",
|
|
916
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
917
|
-
}
|
|
1300
|
+
"description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
|
|
1301
|
+
"default": "99",
|
|
1302
|
+
"fieldName": "maxCounter"
|
|
918
1303
|
},
|
|
919
1304
|
{
|
|
920
|
-
"name": "
|
|
1305
|
+
"name": "overlay",
|
|
921
1306
|
"type": {
|
|
922
|
-
"text": "boolean
|
|
1307
|
+
"text": "boolean"
|
|
923
1308
|
},
|
|
924
|
-
"
|
|
925
|
-
"
|
|
926
|
-
"fieldName": "
|
|
927
|
-
"inheritedFrom": {
|
|
928
|
-
"name": "Buttonsimple",
|
|
929
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
930
|
-
}
|
|
1309
|
+
"default": "false",
|
|
1310
|
+
"description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
|
|
1311
|
+
"fieldName": "overlay"
|
|
931
1312
|
},
|
|
932
1313
|
{
|
|
933
|
-
"name": "
|
|
1314
|
+
"name": "aria-label",
|
|
934
1315
|
"type": {
|
|
935
|
-
"text": "
|
|
1316
|
+
"text": "string | null"
|
|
936
1317
|
},
|
|
937
|
-
"
|
|
938
|
-
"
|
|
939
|
-
"fieldName": "
|
|
940
|
-
"inheritedFrom": {
|
|
941
|
-
"name": "Buttonsimple",
|
|
942
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
943
|
-
}
|
|
944
|
-
},
|
|
945
|
-
{
|
|
946
|
-
"name": "role",
|
|
947
|
-
"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.",
|
|
948
|
-
"default": "button",
|
|
949
|
-
"fieldName": "role",
|
|
950
|
-
"inheritedFrom": {
|
|
951
|
-
"name": "Buttonsimple",
|
|
952
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
953
|
-
}
|
|
1318
|
+
"default": "null",
|
|
1319
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
1320
|
+
"fieldName": "ariaLabel"
|
|
954
1321
|
},
|
|
955
1322
|
{
|
|
956
|
-
"name": "
|
|
1323
|
+
"name": "icon-name",
|
|
957
1324
|
"type": {
|
|
958
|
-
"text": "
|
|
1325
|
+
"text": "IconNames | undefined"
|
|
959
1326
|
},
|
|
960
|
-
"description": "
|
|
961
|
-
"
|
|
962
|
-
"fieldName": "ariaStateKey",
|
|
1327
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
1328
|
+
"fieldName": "iconName",
|
|
963
1329
|
"inheritedFrom": {
|
|
964
|
-
"name": "
|
|
965
|
-
"module": "src/
|
|
1330
|
+
"name": "IconNameMixin",
|
|
1331
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
966
1332
|
}
|
|
967
|
-
}
|
|
1333
|
+
}
|
|
1334
|
+
],
|
|
1335
|
+
"mixins": [
|
|
968
1336
|
{
|
|
969
|
-
"name": "
|
|
970
|
-
"
|
|
971
|
-
"text": "ButtonType"
|
|
972
|
-
},
|
|
973
|
-
"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.",
|
|
974
|
-
"default": "button",
|
|
975
|
-
"fieldName": "type",
|
|
976
|
-
"inheritedFrom": {
|
|
977
|
-
"name": "Buttonsimple",
|
|
978
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
979
|
-
}
|
|
1337
|
+
"name": "IconNameMixin",
|
|
1338
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
|
980
1339
|
}
|
|
981
1340
|
],
|
|
982
1341
|
"superclass": {
|
|
983
|
-
"name": "
|
|
984
|
-
"module": "/src/
|
|
1342
|
+
"name": "Component",
|
|
1343
|
+
"module": "/src/models"
|
|
985
1344
|
},
|
|
986
|
-
"tagName": "mdc-
|
|
987
|
-
"jsDoc": "/**\n * mdc-
|
|
988
|
-
"customElement": true
|
|
989
|
-
"events": [
|
|
990
|
-
{
|
|
991
|
-
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
|
992
|
-
"name": "click",
|
|
993
|
-
"reactName": "onClick",
|
|
994
|
-
"inheritedFrom": {
|
|
995
|
-
"name": "Buttonsimple",
|
|
996
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
997
|
-
}
|
|
998
|
-
},
|
|
999
|
-
{
|
|
1000
|
-
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
|
|
1001
|
-
"name": "keydown",
|
|
1002
|
-
"reactName": "onKeyDown",
|
|
1003
|
-
"inheritedFrom": {
|
|
1004
|
-
"name": "Buttonsimple",
|
|
1005
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1006
|
-
}
|
|
1007
|
-
},
|
|
1008
|
-
{
|
|
1009
|
-
"description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
|
|
1010
|
-
"name": "keyup",
|
|
1011
|
-
"reactName": "onKeyUp",
|
|
1012
|
-
"inheritedFrom": {
|
|
1013
|
-
"name": "Buttonsimple",
|
|
1014
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1015
|
-
}
|
|
1016
|
-
},
|
|
1017
|
-
{
|
|
1018
|
-
"description": "(React: onFocus) This event is dispatched when the button receives focus.",
|
|
1019
|
-
"name": "focus",
|
|
1020
|
-
"reactName": "onFocus",
|
|
1021
|
-
"inheritedFrom": {
|
|
1022
|
-
"name": "Buttonsimple",
|
|
1023
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1024
|
-
}
|
|
1025
|
-
}
|
|
1026
|
-
]
|
|
1345
|
+
"tagName": "mdc-badge",
|
|
1346
|
+
"jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n */",
|
|
1347
|
+
"customElement": true
|
|
1027
1348
|
}
|
|
1028
1349
|
],
|
|
1029
1350
|
"exports": [
|
|
@@ -1031,27 +1352,131 @@
|
|
|
1031
1352
|
"kind": "js",
|
|
1032
1353
|
"name": "default",
|
|
1033
1354
|
"declaration": {
|
|
1034
|
-
"name": "
|
|
1035
|
-
"module": "components/
|
|
1355
|
+
"name": "Badge",
|
|
1356
|
+
"module": "components/badge/badge.component.js"
|
|
1036
1357
|
}
|
|
1037
1358
|
}
|
|
1038
1359
|
]
|
|
1039
1360
|
},
|
|
1040
1361
|
{
|
|
1041
1362
|
"kind": "javascript-module",
|
|
1042
|
-
"path": "components/
|
|
1363
|
+
"path": "components/brandvisual/brandvisual.component.js",
|
|
1043
1364
|
"declarations": [
|
|
1044
1365
|
{
|
|
1045
1366
|
"kind": "class",
|
|
1046
|
-
"description": "The `mdc-
|
|
1047
|
-
"name": "
|
|
1048
|
-
"
|
|
1049
|
-
{
|
|
1050
|
-
"description": "Background color of the overlay in rest state",
|
|
1051
|
-
"name": "--mdc-avatarbutton-overlay-background-color-rest"
|
|
1052
|
-
},
|
|
1367
|
+
"description": "The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\ndisplayed correctly within applications.\n\nFeatures:\n- Dynamically loads brandvisuals based on the `name` attribute.\n- Emits a `load` event when the brandvisual is successfully fetched.\n- Emits an `error` event when the brandvisual import fails.\n- Supports accessibility best practices.\n- Used for brand representation within the design system.",
|
|
1368
|
+
"name": "Brandvisual",
|
|
1369
|
+
"members": [
|
|
1053
1370
|
{
|
|
1054
|
-
"
|
|
1371
|
+
"kind": "field",
|
|
1372
|
+
"name": "brandVisualData",
|
|
1373
|
+
"type": {
|
|
1374
|
+
"text": "HTMLElement | undefined"
|
|
1375
|
+
},
|
|
1376
|
+
"privacy": "private"
|
|
1377
|
+
},
|
|
1378
|
+
{
|
|
1379
|
+
"kind": "field",
|
|
1380
|
+
"name": "name",
|
|
1381
|
+
"type": {
|
|
1382
|
+
"text": "BrandVisualNames | undefined"
|
|
1383
|
+
},
|
|
1384
|
+
"description": "Name of the brandVisual (= filename)",
|
|
1385
|
+
"attribute": "name",
|
|
1386
|
+
"reflects": true
|
|
1387
|
+
},
|
|
1388
|
+
{
|
|
1389
|
+
"kind": "method",
|
|
1390
|
+
"name": "getBrandVisualData",
|
|
1391
|
+
"privacy": "private"
|
|
1392
|
+
},
|
|
1393
|
+
{
|
|
1394
|
+
"kind": "method",
|
|
1395
|
+
"name": "handleBrandVisualLoadedSuccess",
|
|
1396
|
+
"privacy": "private",
|
|
1397
|
+
"parameters": [
|
|
1398
|
+
{
|
|
1399
|
+
"name": "brandVisualHtml",
|
|
1400
|
+
"type": {
|
|
1401
|
+
"text": "HTMLElement"
|
|
1402
|
+
},
|
|
1403
|
+
"description": "The brandvisual html element which has been fetched from the brandvisual provider."
|
|
1404
|
+
}
|
|
1405
|
+
],
|
|
1406
|
+
"description": "Sets the brandVisualData state to the fetched brandvisual.\nDispatches a 'load' event on the component once the brandvisual has been successfully loaded."
|
|
1407
|
+
},
|
|
1408
|
+
{
|
|
1409
|
+
"kind": "method",
|
|
1410
|
+
"name": "handleBrandVisualLoadedFailure",
|
|
1411
|
+
"privacy": "private",
|
|
1412
|
+
"parameters": [
|
|
1413
|
+
{
|
|
1414
|
+
"name": "error",
|
|
1415
|
+
"type": {
|
|
1416
|
+
"text": "unknown"
|
|
1417
|
+
}
|
|
1418
|
+
}
|
|
1419
|
+
],
|
|
1420
|
+
"description": "Dispatches an 'error' event on the component when the brandvisual import has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
|
|
1421
|
+
}
|
|
1422
|
+
],
|
|
1423
|
+
"events": [
|
|
1424
|
+
{
|
|
1425
|
+
"description": "(React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.",
|
|
1426
|
+
"name": "load",
|
|
1427
|
+
"reactName": "onLoad"
|
|
1428
|
+
},
|
|
1429
|
+
{
|
|
1430
|
+
"description": "(React: onError) This event is dispatched when the brandvisual fetching has failed.",
|
|
1431
|
+
"name": "error",
|
|
1432
|
+
"reactName": "onError"
|
|
1433
|
+
}
|
|
1434
|
+
],
|
|
1435
|
+
"attributes": [
|
|
1436
|
+
{
|
|
1437
|
+
"name": "name",
|
|
1438
|
+
"type": {
|
|
1439
|
+
"text": "BrandVisualNames | undefined"
|
|
1440
|
+
},
|
|
1441
|
+
"description": "Name of the brandVisual (= filename)",
|
|
1442
|
+
"fieldName": "name"
|
|
1443
|
+
}
|
|
1444
|
+
],
|
|
1445
|
+
"superclass": {
|
|
1446
|
+
"name": "Component",
|
|
1447
|
+
"module": "/src/models"
|
|
1448
|
+
},
|
|
1449
|
+
"tagName": "mdc-brandvisual",
|
|
1450
|
+
"jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\n * - Dynamically loads brandvisuals based on the `name` attribute.\n * - Emits a `load` event when the brandvisual is successfully fetched.\n * - Emits an `error` event when the brandvisual import fails.\n * - Supports accessibility best practices.\n * - Used for brand representation within the design system.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n */",
|
|
1451
|
+
"customElement": true
|
|
1452
|
+
}
|
|
1453
|
+
],
|
|
1454
|
+
"exports": [
|
|
1455
|
+
{
|
|
1456
|
+
"kind": "js",
|
|
1457
|
+
"name": "default",
|
|
1458
|
+
"declaration": {
|
|
1459
|
+
"name": "Brandvisual",
|
|
1460
|
+
"module": "components/brandvisual/brandvisual.component.js"
|
|
1461
|
+
}
|
|
1462
|
+
}
|
|
1463
|
+
]
|
|
1464
|
+
},
|
|
1465
|
+
{
|
|
1466
|
+
"kind": "javascript-module",
|
|
1467
|
+
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
1468
|
+
"declarations": [
|
|
1469
|
+
{
|
|
1470
|
+
"kind": "class",
|
|
1471
|
+
"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.",
|
|
1472
|
+
"name": "AvatarButton",
|
|
1473
|
+
"cssProperties": [
|
|
1474
|
+
{
|
|
1475
|
+
"description": "Background color of the overlay in rest state",
|
|
1476
|
+
"name": "--mdc-avatarbutton-overlay-background-color-rest"
|
|
1477
|
+
},
|
|
1478
|
+
{
|
|
1479
|
+
"description": "Background color of the overlay in hover state",
|
|
1055
1480
|
"name": "--mdc-avatarbutton-overlay-background-color-hover"
|
|
1056
1481
|
},
|
|
1057
1482
|
{
|
|
@@ -1709,1314 +2134,757 @@
|
|
|
1709
2134
|
},
|
|
1710
2135
|
{
|
|
1711
2136
|
"kind": "javascript-module",
|
|
1712
|
-
"path": "components/
|
|
2137
|
+
"path": "components/bullet/bullet.component.js",
|
|
1713
2138
|
"declarations": [
|
|
1714
2139
|
{
|
|
1715
2140
|
"kind": "class",
|
|
1716
|
-
"description": "
|
|
1717
|
-
"name": "
|
|
2141
|
+
"description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
|
|
2142
|
+
"name": "Bullet",
|
|
1718
2143
|
"cssProperties": [
|
|
1719
2144
|
{
|
|
1720
|
-
"description": "
|
|
1721
|
-
"name": "--mdc-
|
|
1722
|
-
},
|
|
1723
|
-
{
|
|
1724
|
-
"description": "The background color of the primary badge.",
|
|
1725
|
-
"name": "--mdc-badge-primary-background-color"
|
|
1726
|
-
},
|
|
1727
|
-
{
|
|
1728
|
-
"description": "The foreground color of the secondary badge.",
|
|
1729
|
-
"name": "--mdc-badge-secondary-foreground-color"
|
|
1730
|
-
},
|
|
1731
|
-
{
|
|
1732
|
-
"description": "The background color of the secondary badge.",
|
|
1733
|
-
"name": "--mdc-badge-secondary-background-color"
|
|
1734
|
-
},
|
|
1735
|
-
{
|
|
1736
|
-
"description": "The foreground color of the success badge.",
|
|
1737
|
-
"name": "--mdc-badge-success-foreground-color"
|
|
1738
|
-
},
|
|
1739
|
-
{
|
|
1740
|
-
"description": "The background color of the success badge.",
|
|
1741
|
-
"name": "--mdc-badge-success-background-color"
|
|
1742
|
-
},
|
|
1743
|
-
{
|
|
1744
|
-
"description": "The foreground color of the warning badge.",
|
|
1745
|
-
"name": "--mdc-badge-warning-foreground-color"
|
|
1746
|
-
},
|
|
1747
|
-
{
|
|
1748
|
-
"description": "The background color of the warning badge.",
|
|
1749
|
-
"name": "--mdc-badge-warning-background-color"
|
|
2145
|
+
"description": "background color of the bullet",
|
|
2146
|
+
"name": "--mdc-bullet-background-color"
|
|
1750
2147
|
},
|
|
1751
2148
|
{
|
|
1752
|
-
"description": "
|
|
1753
|
-
"name": "--mdc-
|
|
2149
|
+
"description": "small size value of the bullet",
|
|
2150
|
+
"name": "--mdc-bullet-size-small"
|
|
1754
2151
|
},
|
|
1755
2152
|
{
|
|
1756
|
-
"description": "
|
|
1757
|
-
"name": "--mdc-
|
|
2153
|
+
"description": "medium size value of the bullet",
|
|
2154
|
+
"name": "--mdc-bullet-size-medium"
|
|
1758
2155
|
},
|
|
1759
2156
|
{
|
|
1760
|
-
"description": "
|
|
1761
|
-
"name": "--mdc-
|
|
2157
|
+
"description": "large size value of the bullet",
|
|
2158
|
+
"name": "--mdc-bullet-size-large"
|
|
1762
2159
|
}
|
|
1763
2160
|
],
|
|
1764
2161
|
"members": [
|
|
1765
2162
|
{
|
|
1766
2163
|
"kind": "field",
|
|
1767
|
-
"name": "
|
|
2164
|
+
"name": "size",
|
|
1768
2165
|
"type": {
|
|
1769
|
-
"text": "
|
|
2166
|
+
"text": "Size"
|
|
1770
2167
|
},
|
|
1771
|
-
"
|
|
1772
|
-
"
|
|
2168
|
+
"privacy": "public",
|
|
2169
|
+
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
2170
|
+
"default": "small",
|
|
2171
|
+
"attribute": "size",
|
|
1773
2172
|
"reflects": true
|
|
1774
|
-
}
|
|
2173
|
+
}
|
|
2174
|
+
],
|
|
2175
|
+
"attributes": [
|
|
1775
2176
|
{
|
|
1776
|
-
"
|
|
1777
|
-
"name": "variant",
|
|
2177
|
+
"name": "size",
|
|
1778
2178
|
"type": {
|
|
1779
|
-
"text": "
|
|
2179
|
+
"text": "Size"
|
|
1780
2180
|
},
|
|
1781
|
-
"description": "
|
|
1782
|
-
"default": "
|
|
1783
|
-
"
|
|
1784
|
-
|
|
1785
|
-
|
|
2181
|
+
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
2182
|
+
"default": "small",
|
|
2183
|
+
"fieldName": "size"
|
|
2184
|
+
}
|
|
2185
|
+
],
|
|
2186
|
+
"superclass": {
|
|
2187
|
+
"name": "Component",
|
|
2188
|
+
"module": "/src/models"
|
|
2189
|
+
},
|
|
2190
|
+
"tagName": "mdc-bullet",
|
|
2191
|
+
"jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
|
|
2192
|
+
"customElement": true
|
|
2193
|
+
}
|
|
2194
|
+
],
|
|
2195
|
+
"exports": [
|
|
2196
|
+
{
|
|
2197
|
+
"kind": "js",
|
|
2198
|
+
"name": "default",
|
|
2199
|
+
"declaration": {
|
|
2200
|
+
"name": "Bullet",
|
|
2201
|
+
"module": "components/bullet/bullet.component.js"
|
|
2202
|
+
}
|
|
2203
|
+
}
|
|
2204
|
+
]
|
|
2205
|
+
},
|
|
2206
|
+
{
|
|
2207
|
+
"kind": "javascript-module",
|
|
2208
|
+
"path": "components/button/button.component.js",
|
|
2209
|
+
"declarations": [
|
|
2210
|
+
{
|
|
2211
|
+
"kind": "class",
|
|
2212
|
+
"description": "`mdc-button` is a component that can be configured in various ways to suit different use cases.\n\nButton Variants:\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.\n\nButton Colors:\n- **Positive**: Green color.\n- **Negative**: Red color.\n- **Accent**: Blue color.\n- **Promotional**: Purple color.\n- **Default**: White color.\n\nButton Sizes (in REM units):\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- **Tertiary icon button**: 20.\n\nButton Types:\n- **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n- **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n- **Icon button**: A button represented by just an icon without any text.\nThe type of button is inferred based on the presence of slot and/or prefix and postfix icons.",
|
|
2213
|
+
"name": "Button",
|
|
2214
|
+
"slots": [
|
|
1786
2215
|
{
|
|
1787
|
-
"
|
|
1788
|
-
"name": "
|
|
1789
|
-
|
|
1790
|
-
|
|
1791
|
-
|
|
1792
|
-
"description": "Counter is the number which can be provided in the badge.",
|
|
1793
|
-
"attribute": "counter"
|
|
1794
|
-
},
|
|
2216
|
+
"description": "Text label of the button.",
|
|
2217
|
+
"name": ""
|
|
2218
|
+
}
|
|
2219
|
+
],
|
|
2220
|
+
"members": [
|
|
1795
2221
|
{
|
|
1796
2222
|
"kind": "field",
|
|
1797
|
-
"name": "
|
|
2223
|
+
"name": "size",
|
|
1798
2224
|
"type": {
|
|
1799
|
-
"text": "
|
|
2225
|
+
"text": "ButtonSize"
|
|
1800
2226
|
},
|
|
1801
|
-
"description": "
|
|
1802
|
-
"default": "
|
|
1803
|
-
"attribute": "
|
|
1804
|
-
"reflects": true
|
|
2227
|
+
"description": "Button sizing is based on the button type.\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon button can also be 20.",
|
|
2228
|
+
"default": "32",
|
|
2229
|
+
"attribute": "size",
|
|
2230
|
+
"reflects": true,
|
|
2231
|
+
"inheritedFrom": {
|
|
2232
|
+
"name": "Buttonsimple",
|
|
2233
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2234
|
+
}
|
|
1805
2235
|
},
|
|
1806
2236
|
{
|
|
1807
2237
|
"kind": "field",
|
|
1808
|
-
"name": "
|
|
2238
|
+
"name": "inverted",
|
|
1809
2239
|
"type": {
|
|
1810
2240
|
"text": "boolean"
|
|
1811
2241
|
},
|
|
2242
|
+
"description": "The button color can be inverted by setting the inverted attribute to true.\n\nOnly applies when variant is set to `primary`, color is set to `default`\nand button is not `active`.",
|
|
1812
2243
|
"default": "false",
|
|
1813
|
-
"
|
|
1814
|
-
"
|
|
2244
|
+
"attribute": "inverted",
|
|
2245
|
+
"reflects": true
|
|
1815
2246
|
},
|
|
1816
2247
|
{
|
|
1817
2248
|
"kind": "field",
|
|
1818
|
-
"name": "
|
|
1819
|
-
"
|
|
1820
|
-
|
|
2249
|
+
"name": "role",
|
|
2250
|
+
"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.",
|
|
2251
|
+
"default": "'button'",
|
|
2252
|
+
"attribute": "role",
|
|
2253
|
+
"reflects": true,
|
|
2254
|
+
"type": {
|
|
2255
|
+
"text": "string"
|
|
1821
2256
|
},
|
|
1822
|
-
"
|
|
1823
|
-
|
|
1824
|
-
|
|
2257
|
+
"inheritedFrom": {
|
|
2258
|
+
"name": "Buttonsimple",
|
|
2259
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2260
|
+
}
|
|
1825
2261
|
},
|
|
1826
2262
|
{
|
|
1827
2263
|
"kind": "method",
|
|
1828
|
-
"name": "
|
|
2264
|
+
"name": "inferFilledIconName",
|
|
1829
2265
|
"privacy": "private",
|
|
1830
|
-
"return": {
|
|
1831
|
-
"type": {
|
|
1832
|
-
"text": ""
|
|
1833
|
-
}
|
|
1834
|
-
},
|
|
1835
2266
|
"parameters": [
|
|
1836
2267
|
{
|
|
1837
|
-
"name": "
|
|
1838
|
-
"type": {
|
|
1839
|
-
"text": "number"
|
|
1840
|
-
},
|
|
1841
|
-
"description": "the maximum limit which can be displayed on the badge"
|
|
1842
|
-
},
|
|
1843
|
-
{
|
|
1844
|
-
"name": "counter",
|
|
2268
|
+
"name": "active",
|
|
1845
2269
|
"optional": true,
|
|
1846
2270
|
"type": {
|
|
1847
|
-
"text": "
|
|
2271
|
+
"text": "boolean"
|
|
1848
2272
|
},
|
|
1849
|
-
"description": "
|
|
2273
|
+
"description": "The active state."
|
|
1850
2274
|
}
|
|
1851
2275
|
],
|
|
1852
|
-
"description": "
|
|
2276
|
+
"description": "Modifies the icon name based on the active state.\nIf the button is active, the icon name is suffixed with '-filled'.\nIf the button is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
|
|
1853
2277
|
},
|
|
1854
2278
|
{
|
|
1855
|
-
"kind": "
|
|
1856
|
-
"name": "
|
|
1857
|
-
"
|
|
1858
|
-
|
|
1859
|
-
|
|
1860
|
-
|
|
1861
|
-
|
|
2279
|
+
"kind": "field",
|
|
2280
|
+
"name": "prefixIcon",
|
|
2281
|
+
"type": {
|
|
2282
|
+
"text": "IconNames | undefined"
|
|
2283
|
+
},
|
|
2284
|
+
"description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
|
|
2285
|
+
"attribute": "prefix-icon",
|
|
2286
|
+
"reflects": true,
|
|
2287
|
+
"inheritedFrom": {
|
|
2288
|
+
"name": "ButtonComponentMixin",
|
|
2289
|
+
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
2290
|
+
}
|
|
2291
|
+
},
|
|
2292
|
+
{
|
|
2293
|
+
"kind": "field",
|
|
2294
|
+
"name": "postfixIcon",
|
|
2295
|
+
"type": {
|
|
2296
|
+
"text": "IconNames | undefined"
|
|
2297
|
+
},
|
|
2298
|
+
"description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
|
|
2299
|
+
"attribute": "postfix-icon",
|
|
2300
|
+
"reflects": true,
|
|
2301
|
+
"inheritedFrom": {
|
|
2302
|
+
"name": "ButtonComponentMixin",
|
|
2303
|
+
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
2304
|
+
}
|
|
2305
|
+
},
|
|
2306
|
+
{
|
|
2307
|
+
"kind": "field",
|
|
2308
|
+
"name": "variant",
|
|
2309
|
+
"type": {
|
|
2310
|
+
"text": "ButtonVariant"
|
|
2311
|
+
},
|
|
2312
|
+
"description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
|
|
2313
|
+
"default": "primary",
|
|
2314
|
+
"attribute": "variant",
|
|
2315
|
+
"inheritedFrom": {
|
|
2316
|
+
"name": "ButtonComponentMixin",
|
|
2317
|
+
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
2318
|
+
}
|
|
2319
|
+
},
|
|
2320
|
+
{
|
|
2321
|
+
"kind": "field",
|
|
2322
|
+
"name": "color",
|
|
2323
|
+
"type": {
|
|
2324
|
+
"text": "ButtonColor"
|
|
1862
2325
|
},
|
|
2326
|
+
"description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
|
|
2327
|
+
"default": "default",
|
|
2328
|
+
"attribute": "color",
|
|
2329
|
+
"inheritedFrom": {
|
|
2330
|
+
"name": "ButtonComponentMixin",
|
|
2331
|
+
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
2332
|
+
}
|
|
2333
|
+
},
|
|
2334
|
+
{
|
|
2335
|
+
"kind": "method",
|
|
2336
|
+
"name": "setVariant",
|
|
2337
|
+
"privacy": "protected",
|
|
1863
2338
|
"parameters": [
|
|
1864
2339
|
{
|
|
1865
|
-
"name": "
|
|
1866
|
-
"type": {
|
|
1867
|
-
"text": "string"
|
|
1868
|
-
},
|
|
1869
|
-
"description": "the name of the icon from the icon set"
|
|
1870
|
-
},
|
|
1871
|
-
{
|
|
1872
|
-
"name": "backgroundClassPostfix",
|
|
2340
|
+
"name": "variant",
|
|
1873
2341
|
"type": {
|
|
1874
|
-
"text": "
|
|
2342
|
+
"text": "ButtonVariant"
|
|
1875
2343
|
},
|
|
1876
|
-
"description": "
|
|
2344
|
+
"description": "The variant to set."
|
|
1877
2345
|
}
|
|
1878
2346
|
],
|
|
1879
|
-
"description": "
|
|
2347
|
+
"description": "Sets the variant attribute for the button component.\nIf the provided variant is not included in the BUTTON_VARIANTS,\nit defaults to the value specified in DEFAULTS.VARIANT.",
|
|
2348
|
+
"inheritedFrom": {
|
|
2349
|
+
"name": "ButtonComponentMixin",
|
|
2350
|
+
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
2351
|
+
}
|
|
1880
2352
|
},
|
|
1881
2353
|
{
|
|
1882
2354
|
"kind": "method",
|
|
1883
|
-
"name": "
|
|
1884
|
-
"privacy": "
|
|
1885
|
-
"
|
|
1886
|
-
|
|
1887
|
-
"
|
|
2355
|
+
"name": "setColor",
|
|
2356
|
+
"privacy": "protected",
|
|
2357
|
+
"parameters": [
|
|
2358
|
+
{
|
|
2359
|
+
"name": "color",
|
|
2360
|
+
"type": {
|
|
2361
|
+
"text": "ButtonColor"
|
|
2362
|
+
},
|
|
2363
|
+
"description": "The color to set."
|
|
1888
2364
|
}
|
|
1889
|
-
|
|
1890
|
-
"description": "
|
|
2365
|
+
],
|
|
2366
|
+
"description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or for tertiary button.",
|
|
2367
|
+
"inheritedFrom": {
|
|
2368
|
+
"name": "ButtonComponentMixin",
|
|
2369
|
+
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
2370
|
+
}
|
|
1891
2371
|
},
|
|
1892
2372
|
{
|
|
1893
2373
|
"kind": "method",
|
|
1894
|
-
"name": "
|
|
1895
|
-
"privacy": "
|
|
1896
|
-
"
|
|
1897
|
-
|
|
1898
|
-
"
|
|
2374
|
+
"name": "setSize",
|
|
2375
|
+
"privacy": "protected",
|
|
2376
|
+
"parameters": [
|
|
2377
|
+
{
|
|
2378
|
+
"name": "size",
|
|
2379
|
+
"type": {
|
|
2380
|
+
"text": "PillButtonSize | IconButtonSize"
|
|
2381
|
+
},
|
|
2382
|
+
"description": "The size to set."
|
|
1899
2383
|
}
|
|
1900
|
-
|
|
1901
|
-
"description": "
|
|
2384
|
+
],
|
|
2385
|
+
"description": "Sets the size attribute for the button component.\nValidates the size based on the button type (icon, pill, or tertiary).\nDefaults to DEFAULTS.SIZE if invalid.",
|
|
2386
|
+
"inheritedFrom": {
|
|
2387
|
+
"name": "ButtonComponentMixin",
|
|
2388
|
+
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
2389
|
+
}
|
|
1902
2390
|
},
|
|
1903
2391
|
{
|
|
1904
2392
|
"kind": "method",
|
|
1905
|
-
"name": "
|
|
1906
|
-
"privacy": "
|
|
1907
|
-
"
|
|
1908
|
-
|
|
1909
|
-
|
|
2393
|
+
"name": "inferButtonType",
|
|
2394
|
+
"privacy": "protected",
|
|
2395
|
+
"description": "Infers the type of button based on the presence of slot and/or prefix and postfix icons.",
|
|
2396
|
+
"parameters": [
|
|
2397
|
+
{
|
|
2398
|
+
"description": "default slot of button",
|
|
2399
|
+
"name": "slot"
|
|
1910
2400
|
}
|
|
1911
|
-
|
|
1912
|
-
"
|
|
2401
|
+
],
|
|
2402
|
+
"inheritedFrom": {
|
|
2403
|
+
"name": "ButtonComponentMixin",
|
|
2404
|
+
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
2405
|
+
}
|
|
1913
2406
|
},
|
|
1914
2407
|
{
|
|
1915
|
-
"kind": "
|
|
1916
|
-
"name": "
|
|
1917
|
-
"
|
|
1918
|
-
|
|
1919
|
-
"type": {
|
|
1920
|
-
"text": ""
|
|
1921
|
-
}
|
|
2408
|
+
"kind": "field",
|
|
2409
|
+
"name": "autofocus",
|
|
2410
|
+
"type": {
|
|
2411
|
+
"text": "boolean"
|
|
1922
2412
|
},
|
|
1923
|
-
"
|
|
2413
|
+
"default": "false",
|
|
2414
|
+
"description": "This property indicates whether the element should receive focus automatically when it is rendered.",
|
|
2415
|
+
"attribute": "autofocus",
|
|
2416
|
+
"reflects": true,
|
|
2417
|
+
"inheritedFrom": {
|
|
2418
|
+
"name": "AutoFocusMixin",
|
|
2419
|
+
"module": "utils/mixins/AutoFocusMixin.js"
|
|
2420
|
+
}
|
|
1924
2421
|
},
|
|
1925
2422
|
{
|
|
1926
2423
|
"kind": "field",
|
|
1927
|
-
"name": "
|
|
2424
|
+
"name": "tabIndex",
|
|
1928
2425
|
"type": {
|
|
1929
|
-
"text": "
|
|
2426
|
+
"text": "number"
|
|
1930
2427
|
},
|
|
1931
|
-
"
|
|
1932
|
-
"
|
|
2428
|
+
"default": "0",
|
|
2429
|
+
"description": "This property specifies the tab order of the element.",
|
|
2430
|
+
"attribute": "tabIndex",
|
|
2431
|
+
"reflects": true,
|
|
1933
2432
|
"inheritedFrom": {
|
|
1934
|
-
"name": "
|
|
1935
|
-
"module": "utils/mixins/
|
|
2433
|
+
"name": "TabIndexMixin",
|
|
2434
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
1936
2435
|
}
|
|
1937
|
-
}
|
|
1938
|
-
],
|
|
1939
|
-
"attributes": [
|
|
2436
|
+
},
|
|
1940
2437
|
{
|
|
1941
|
-
"
|
|
2438
|
+
"kind": "field",
|
|
2439
|
+
"name": "disabled",
|
|
1942
2440
|
"type": {
|
|
1943
|
-
"text": "
|
|
2441
|
+
"text": "boolean | undefined"
|
|
1944
2442
|
},
|
|
1945
|
-
"description": "
|
|
1946
|
-
"
|
|
2443
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
2444
|
+
"default": "undefined",
|
|
2445
|
+
"attribute": "disabled",
|
|
2446
|
+
"reflects": true,
|
|
2447
|
+
"inheritedFrom": {
|
|
2448
|
+
"name": "DisabledMixin",
|
|
2449
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
2450
|
+
}
|
|
1947
2451
|
},
|
|
1948
2452
|
{
|
|
1949
|
-
"
|
|
2453
|
+
"kind": "field",
|
|
2454
|
+
"name": "active",
|
|
1950
2455
|
"type": {
|
|
1951
|
-
"text": "
|
|
2456
|
+
"text": "boolean | undefined"
|
|
1952
2457
|
},
|
|
1953
|
-
"description": "
|
|
1954
|
-
"default": "
|
|
1955
|
-
"
|
|
2458
|
+
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
|
2459
|
+
"default": "undefined",
|
|
2460
|
+
"attribute": "active",
|
|
2461
|
+
"reflects": true,
|
|
2462
|
+
"inheritedFrom": {
|
|
2463
|
+
"name": "Buttonsimple",
|
|
2464
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2465
|
+
}
|
|
1956
2466
|
},
|
|
1957
2467
|
{
|
|
1958
|
-
"
|
|
2468
|
+
"kind": "field",
|
|
2469
|
+
"name": "softDisabled",
|
|
1959
2470
|
"type": {
|
|
1960
|
-
"text": "
|
|
2471
|
+
"text": "boolean | undefined"
|
|
1961
2472
|
},
|
|
1962
|
-
"description": "
|
|
1963
|
-
"
|
|
2473
|
+
"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.",
|
|
2474
|
+
"default": "undefined",
|
|
2475
|
+
"attribute": "soft-disabled",
|
|
2476
|
+
"reflects": true,
|
|
2477
|
+
"inheritedFrom": {
|
|
2478
|
+
"name": "Buttonsimple",
|
|
2479
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2480
|
+
}
|
|
1964
2481
|
},
|
|
1965
2482
|
{
|
|
1966
|
-
"
|
|
2483
|
+
"kind": "field",
|
|
2484
|
+
"name": "ariaStateKey",
|
|
1967
2485
|
"type": {
|
|
1968
|
-
"text": "
|
|
2486
|
+
"text": "string | undefined"
|
|
1969
2487
|
},
|
|
1970
|
-
"description": "
|
|
1971
|
-
"default": "
|
|
1972
|
-
"
|
|
2488
|
+
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
|
2489
|
+
"default": "'aria-pressed' (when)",
|
|
2490
|
+
"attribute": "ariaStateKey",
|
|
2491
|
+
"reflects": true,
|
|
2492
|
+
"inheritedFrom": {
|
|
2493
|
+
"name": "Buttonsimple",
|
|
2494
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2495
|
+
}
|
|
1973
2496
|
},
|
|
1974
2497
|
{
|
|
1975
|
-
"
|
|
2498
|
+
"kind": "field",
|
|
2499
|
+
"name": "type",
|
|
1976
2500
|
"type": {
|
|
1977
|
-
"text": "
|
|
2501
|
+
"text": "ButtonType"
|
|
1978
2502
|
},
|
|
1979
|
-
"
|
|
1980
|
-
"
|
|
1981
|
-
"
|
|
2503
|
+
"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.",
|
|
2504
|
+
"default": "button",
|
|
2505
|
+
"attribute": "type",
|
|
2506
|
+
"reflects": true,
|
|
2507
|
+
"inheritedFrom": {
|
|
2508
|
+
"name": "Buttonsimple",
|
|
2509
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2510
|
+
}
|
|
1982
2511
|
},
|
|
1983
2512
|
{
|
|
1984
|
-
"
|
|
1985
|
-
"
|
|
1986
|
-
|
|
1987
|
-
|
|
1988
|
-
|
|
1989
|
-
|
|
1990
|
-
|
|
2513
|
+
"kind": "method",
|
|
2514
|
+
"name": "executeAction",
|
|
2515
|
+
"privacy": "protected",
|
|
2516
|
+
"inheritedFrom": {
|
|
2517
|
+
"name": "Buttonsimple",
|
|
2518
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2519
|
+
}
|
|
1991
2520
|
},
|
|
1992
2521
|
{
|
|
1993
|
-
"
|
|
1994
|
-
"
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
2522
|
+
"kind": "method",
|
|
2523
|
+
"name": "setActive",
|
|
2524
|
+
"privacy": "protected",
|
|
2525
|
+
"parameters": [
|
|
2526
|
+
{
|
|
2527
|
+
"name": "element",
|
|
2528
|
+
"type": {
|
|
2529
|
+
"text": "HTMLElement"
|
|
2530
|
+
},
|
|
2531
|
+
"description": "The button element"
|
|
2532
|
+
},
|
|
2533
|
+
{
|
|
2534
|
+
"name": "active",
|
|
2535
|
+
"optional": true,
|
|
2536
|
+
"type": {
|
|
2537
|
+
"text": "boolean"
|
|
2538
|
+
},
|
|
2539
|
+
"description": "The active state of the element"
|
|
2540
|
+
}
|
|
2541
|
+
],
|
|
2542
|
+
"description": "Sets the ariaStateKey attributes based on the active state of the button.",
|
|
1999
2543
|
"inheritedFrom": {
|
|
2000
|
-
"name": "
|
|
2001
|
-
"module": "
|
|
2544
|
+
"name": "Buttonsimple",
|
|
2545
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2002
2546
|
}
|
|
2003
|
-
}
|
|
2004
|
-
],
|
|
2005
|
-
"mixins": [
|
|
2547
|
+
},
|
|
2006
2548
|
{
|
|
2007
|
-
"
|
|
2008
|
-
"
|
|
2009
|
-
|
|
2010
|
-
|
|
2011
|
-
|
|
2012
|
-
|
|
2013
|
-
|
|
2014
|
-
|
|
2015
|
-
|
|
2016
|
-
|
|
2017
|
-
|
|
2018
|
-
|
|
2019
|
-
|
|
2020
|
-
|
|
2021
|
-
|
|
2022
|
-
|
|
2023
|
-
|
|
2024
|
-
|
|
2025
|
-
|
|
2026
|
-
|
|
2027
|
-
|
|
2028
|
-
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
|
|
2033
|
-
"path": "components/brandvisual/brandvisual.component.js",
|
|
2034
|
-
"declarations": [
|
|
2035
|
-
{
|
|
2036
|
-
"kind": "class",
|
|
2037
|
-
"description": "The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\ndisplayed correctly within applications.\n\nFeatures:\n- Dynamically loads brandvisuals based on the `name` attribute.\n- Emits a `load` event when the brandvisual is successfully fetched.\n- Emits an `error` event when the brandvisual import fails.\n- Supports accessibility best practices.\n- Used for brand representation within the design system.",
|
|
2038
|
-
"name": "Brandvisual",
|
|
2039
|
-
"members": [
|
|
2549
|
+
"kind": "method",
|
|
2550
|
+
"name": "setSoftDisabled",
|
|
2551
|
+
"privacy": "private",
|
|
2552
|
+
"parameters": [
|
|
2553
|
+
{
|
|
2554
|
+
"name": "element",
|
|
2555
|
+
"type": {
|
|
2556
|
+
"text": "HTMLElement"
|
|
2557
|
+
},
|
|
2558
|
+
"description": "The button element."
|
|
2559
|
+
},
|
|
2560
|
+
{
|
|
2561
|
+
"name": "softDisabled",
|
|
2562
|
+
"optional": true,
|
|
2563
|
+
"type": {
|
|
2564
|
+
"text": "boolean"
|
|
2565
|
+
},
|
|
2566
|
+
"description": "The soft-disabled state."
|
|
2567
|
+
}
|
|
2568
|
+
],
|
|
2569
|
+
"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.",
|
|
2570
|
+
"inheritedFrom": {
|
|
2571
|
+
"name": "Buttonsimple",
|
|
2572
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2573
|
+
}
|
|
2574
|
+
},
|
|
2040
2575
|
{
|
|
2041
|
-
"kind": "
|
|
2042
|
-
"name": "
|
|
2043
|
-
"
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
|
|
2576
|
+
"kind": "method",
|
|
2577
|
+
"name": "setDisabled",
|
|
2578
|
+
"privacy": "private",
|
|
2579
|
+
"parameters": [
|
|
2580
|
+
{
|
|
2581
|
+
"name": "element",
|
|
2582
|
+
"type": {
|
|
2583
|
+
"text": "HTMLElement"
|
|
2584
|
+
},
|
|
2585
|
+
"description": "The button element."
|
|
2586
|
+
},
|
|
2587
|
+
{
|
|
2588
|
+
"name": "disabled",
|
|
2589
|
+
"type": {
|
|
2590
|
+
"text": "boolean"
|
|
2591
|
+
},
|
|
2592
|
+
"description": "The disabled state."
|
|
2593
|
+
}
|
|
2594
|
+
],
|
|
2595
|
+
"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.",
|
|
2596
|
+
"inheritedFrom": {
|
|
2597
|
+
"name": "Buttonsimple",
|
|
2598
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2599
|
+
}
|
|
2047
2600
|
},
|
|
2048
2601
|
{
|
|
2049
|
-
"kind": "
|
|
2050
|
-
"name": "
|
|
2051
|
-
"
|
|
2052
|
-
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
|
|
2056
|
-
"reflects": true
|
|
2602
|
+
"kind": "method",
|
|
2603
|
+
"name": "triggerClickEvent",
|
|
2604
|
+
"privacy": "private",
|
|
2605
|
+
"inheritedFrom": {
|
|
2606
|
+
"name": "Buttonsimple",
|
|
2607
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2608
|
+
}
|
|
2057
2609
|
},
|
|
2058
2610
|
{
|
|
2059
2611
|
"kind": "method",
|
|
2060
|
-
"name": "
|
|
2061
|
-
"privacy": "private"
|
|
2612
|
+
"name": "handleBlur",
|
|
2613
|
+
"privacy": "private",
|
|
2614
|
+
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
|
2615
|
+
"inheritedFrom": {
|
|
2616
|
+
"name": "Buttonsimple",
|
|
2617
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2618
|
+
}
|
|
2062
2619
|
},
|
|
2063
2620
|
{
|
|
2064
2621
|
"kind": "method",
|
|
2065
|
-
"name": "
|
|
2622
|
+
"name": "handleKeyDown",
|
|
2066
2623
|
"privacy": "private",
|
|
2067
2624
|
"parameters": [
|
|
2068
2625
|
{
|
|
2069
|
-
"name": "
|
|
2626
|
+
"name": "event",
|
|
2070
2627
|
"type": {
|
|
2071
|
-
"text": "
|
|
2628
|
+
"text": "KeyboardEvent"
|
|
2072
2629
|
},
|
|
2073
|
-
"description": "The
|
|
2630
|
+
"description": "The keyboard event."
|
|
2074
2631
|
}
|
|
2075
2632
|
],
|
|
2076
|
-
"description": "
|
|
2633
|
+
"description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
|
|
2634
|
+
"inheritedFrom": {
|
|
2635
|
+
"name": "Buttonsimple",
|
|
2636
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2637
|
+
}
|
|
2077
2638
|
},
|
|
2078
2639
|
{
|
|
2079
2640
|
"kind": "method",
|
|
2080
|
-
"name": "
|
|
2641
|
+
"name": "handleKeyUp",
|
|
2081
2642
|
"privacy": "private",
|
|
2082
2643
|
"parameters": [
|
|
2083
2644
|
{
|
|
2084
|
-
"name": "
|
|
2645
|
+
"name": "event",
|
|
2085
2646
|
"type": {
|
|
2086
|
-
"text": "
|
|
2087
|
-
}
|
|
2647
|
+
"text": "KeyboardEvent"
|
|
2648
|
+
},
|
|
2649
|
+
"description": "The keyboard event."
|
|
2088
2650
|
}
|
|
2089
2651
|
],
|
|
2090
|
-
"description": "
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
|
|
2095
|
-
"description": "(React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.",
|
|
2096
|
-
"name": "load",
|
|
2097
|
-
"reactName": "onLoad"
|
|
2098
|
-
},
|
|
2099
|
-
{
|
|
2100
|
-
"description": "(React: onError) This event is dispatched when the brandvisual fetching has failed.",
|
|
2101
|
-
"name": "error",
|
|
2102
|
-
"reactName": "onError"
|
|
2652
|
+
"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.",
|
|
2653
|
+
"inheritedFrom": {
|
|
2654
|
+
"name": "Buttonsimple",
|
|
2655
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2656
|
+
}
|
|
2103
2657
|
}
|
|
2104
2658
|
],
|
|
2105
2659
|
"attributes": [
|
|
2106
2660
|
{
|
|
2107
|
-
"name": "
|
|
2661
|
+
"name": "size",
|
|
2108
2662
|
"type": {
|
|
2109
|
-
"text": "
|
|
2110
|
-
},
|
|
2111
|
-
"description": "Name of the brandVisual (= filename)",
|
|
2112
|
-
"fieldName": "name"
|
|
2113
|
-
}
|
|
2114
|
-
],
|
|
2115
|
-
"superclass": {
|
|
2116
|
-
"name": "Component",
|
|
2117
|
-
"module": "/src/models"
|
|
2118
|
-
},
|
|
2119
|
-
"tagName": "mdc-brandvisual",
|
|
2120
|
-
"jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\n * - Dynamically loads brandvisuals based on the `name` attribute.\n * - Emits a `load` event when the brandvisual is successfully fetched.\n * - Emits an `error` event when the brandvisual import fails.\n * - Supports accessibility best practices.\n * - Used for brand representation within the design system.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n */",
|
|
2121
|
-
"customElement": true
|
|
2122
|
-
}
|
|
2123
|
-
],
|
|
2124
|
-
"exports": [
|
|
2125
|
-
{
|
|
2126
|
-
"kind": "js",
|
|
2127
|
-
"name": "default",
|
|
2128
|
-
"declaration": {
|
|
2129
|
-
"name": "Brandvisual",
|
|
2130
|
-
"module": "components/brandvisual/brandvisual.component.js"
|
|
2131
|
-
}
|
|
2132
|
-
}
|
|
2133
|
-
]
|
|
2134
|
-
},
|
|
2135
|
-
{
|
|
2136
|
-
"kind": "javascript-module",
|
|
2137
|
-
"path": "components/button/button.component.js",
|
|
2138
|
-
"declarations": [
|
|
2139
|
-
{
|
|
2140
|
-
"kind": "class",
|
|
2141
|
-
"description": "`mdc-button` is a component that can be configured in various ways to suit different use cases.\n\nButton Variants:\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.\n\nButton Colors:\n- **Positive**: Green color.\n- **Negative**: Red color.\n- **Accent**: Blue color.\n- **Promotional**: Purple color.\n- **Default**: White color.\n\nButton Sizes (in REM units):\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- **Tertiary icon button**: 20.\n\nButton Types:\n- **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n- **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n- **Icon button**: A button represented by just an icon without any text.\nThe type of button is inferred based on the presence of slot and/or prefix and postfix icons.",
|
|
2142
|
-
"name": "Button",
|
|
2143
|
-
"slots": [
|
|
2144
|
-
{
|
|
2145
|
-
"description": "Text label of the button.",
|
|
2146
|
-
"name": ""
|
|
2147
|
-
}
|
|
2148
|
-
],
|
|
2149
|
-
"members": [
|
|
2150
|
-
{
|
|
2151
|
-
"kind": "field",
|
|
2152
|
-
"name": "size",
|
|
2153
|
-
"type": {
|
|
2154
|
-
"text": "ButtonSize"
|
|
2663
|
+
"text": "ButtonSize"
|
|
2155
2664
|
},
|
|
2156
2665
|
"description": "Button sizing is based on the button type.\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon button can also be 20.",
|
|
2157
2666
|
"default": "32",
|
|
2158
|
-
"
|
|
2159
|
-
"reflects": true,
|
|
2667
|
+
"fieldName": "size",
|
|
2160
2668
|
"inheritedFrom": {
|
|
2161
2669
|
"name": "Buttonsimple",
|
|
2162
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
2670
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2163
2671
|
}
|
|
2164
2672
|
},
|
|
2165
2673
|
{
|
|
2166
|
-
"kind": "field",
|
|
2167
2674
|
"name": "inverted",
|
|
2168
2675
|
"type": {
|
|
2169
2676
|
"text": "boolean"
|
|
2170
2677
|
},
|
|
2171
2678
|
"description": "The button color can be inverted by setting the inverted attribute to true.\n\nOnly applies when variant is set to `primary`, color is set to `default`\nand button is not `active`.",
|
|
2172
2679
|
"default": "false",
|
|
2173
|
-
"
|
|
2174
|
-
"reflects": true
|
|
2680
|
+
"fieldName": "inverted"
|
|
2175
2681
|
},
|
|
2176
2682
|
{
|
|
2177
|
-
"kind": "field",
|
|
2178
2683
|
"name": "role",
|
|
2179
2684
|
"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.",
|
|
2180
2685
|
"default": "'button'",
|
|
2181
|
-
"
|
|
2182
|
-
"reflects": true,
|
|
2686
|
+
"fieldName": "role",
|
|
2183
2687
|
"type": {
|
|
2184
2688
|
"text": "string"
|
|
2185
2689
|
},
|
|
2186
2690
|
"inheritedFrom": {
|
|
2187
2691
|
"name": "Buttonsimple",
|
|
2188
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
2692
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2189
2693
|
}
|
|
2190
2694
|
},
|
|
2191
2695
|
{
|
|
2192
|
-
"
|
|
2193
|
-
"name": "inferFilledIconName",
|
|
2194
|
-
"privacy": "private",
|
|
2195
|
-
"parameters": [
|
|
2196
|
-
{
|
|
2197
|
-
"name": "active",
|
|
2198
|
-
"optional": true,
|
|
2199
|
-
"type": {
|
|
2200
|
-
"text": "boolean"
|
|
2201
|
-
},
|
|
2202
|
-
"description": "The active state."
|
|
2203
|
-
}
|
|
2204
|
-
],
|
|
2205
|
-
"description": "Modifies the icon name based on the active state.\nIf the button is active, the icon name is suffixed with '-filled'.\nIf the button is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
|
|
2206
|
-
},
|
|
2207
|
-
{
|
|
2208
|
-
"kind": "field",
|
|
2209
|
-
"name": "prefixIcon",
|
|
2696
|
+
"name": "prefix-icon",
|
|
2210
2697
|
"type": {
|
|
2211
2698
|
"text": "IconNames | undefined"
|
|
2212
2699
|
},
|
|
2213
2700
|
"description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
|
|
2214
|
-
"
|
|
2215
|
-
"reflects": true,
|
|
2701
|
+
"fieldName": "prefixIcon",
|
|
2216
2702
|
"inheritedFrom": {
|
|
2217
2703
|
"name": "ButtonComponentMixin",
|
|
2218
|
-
"module": "utils/mixins/ButtonComponentMixin.
|
|
2704
|
+
"module": "src/utils/mixins/ButtonComponentMixin.ts"
|
|
2219
2705
|
}
|
|
2220
2706
|
},
|
|
2221
2707
|
{
|
|
2222
|
-
"
|
|
2223
|
-
"name": "postfixIcon",
|
|
2708
|
+
"name": "postfix-icon",
|
|
2224
2709
|
"type": {
|
|
2225
2710
|
"text": "IconNames | undefined"
|
|
2226
2711
|
},
|
|
2227
2712
|
"description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
|
|
2228
|
-
"
|
|
2229
|
-
"reflects": true,
|
|
2713
|
+
"fieldName": "postfixIcon",
|
|
2230
2714
|
"inheritedFrom": {
|
|
2231
2715
|
"name": "ButtonComponentMixin",
|
|
2232
|
-
"module": "utils/mixins/ButtonComponentMixin.
|
|
2716
|
+
"module": "src/utils/mixins/ButtonComponentMixin.ts"
|
|
2233
2717
|
}
|
|
2234
2718
|
},
|
|
2235
2719
|
{
|
|
2236
|
-
"kind": "field",
|
|
2237
2720
|
"name": "variant",
|
|
2238
2721
|
"type": {
|
|
2239
2722
|
"text": "ButtonVariant"
|
|
2240
2723
|
},
|
|
2241
2724
|
"description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
|
|
2242
2725
|
"default": "primary",
|
|
2243
|
-
"
|
|
2726
|
+
"fieldName": "variant",
|
|
2244
2727
|
"inheritedFrom": {
|
|
2245
2728
|
"name": "ButtonComponentMixin",
|
|
2246
|
-
"module": "utils/mixins/ButtonComponentMixin.
|
|
2729
|
+
"module": "src/utils/mixins/ButtonComponentMixin.ts"
|
|
2247
2730
|
}
|
|
2248
2731
|
},
|
|
2249
2732
|
{
|
|
2250
|
-
"kind": "field",
|
|
2251
2733
|
"name": "color",
|
|
2252
2734
|
"type": {
|
|
2253
2735
|
"text": "ButtonColor"
|
|
2254
2736
|
},
|
|
2255
2737
|
"description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
|
|
2256
2738
|
"default": "default",
|
|
2257
|
-
"
|
|
2258
|
-
"inheritedFrom": {
|
|
2259
|
-
"name": "ButtonComponentMixin",
|
|
2260
|
-
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
2261
|
-
}
|
|
2262
|
-
},
|
|
2263
|
-
{
|
|
2264
|
-
"kind": "method",
|
|
2265
|
-
"name": "setVariant",
|
|
2266
|
-
"privacy": "protected",
|
|
2267
|
-
"parameters": [
|
|
2268
|
-
{
|
|
2269
|
-
"name": "variant",
|
|
2270
|
-
"type": {
|
|
2271
|
-
"text": "ButtonVariant"
|
|
2272
|
-
},
|
|
2273
|
-
"description": "The variant to set."
|
|
2274
|
-
}
|
|
2275
|
-
],
|
|
2276
|
-
"description": "Sets the variant attribute for the button component.\nIf the provided variant is not included in the BUTTON_VARIANTS,\nit defaults to the value specified in DEFAULTS.VARIANT.",
|
|
2277
|
-
"inheritedFrom": {
|
|
2278
|
-
"name": "ButtonComponentMixin",
|
|
2279
|
-
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
2280
|
-
}
|
|
2281
|
-
},
|
|
2282
|
-
{
|
|
2283
|
-
"kind": "method",
|
|
2284
|
-
"name": "setColor",
|
|
2285
|
-
"privacy": "protected",
|
|
2286
|
-
"parameters": [
|
|
2287
|
-
{
|
|
2288
|
-
"name": "color",
|
|
2289
|
-
"type": {
|
|
2290
|
-
"text": "ButtonColor"
|
|
2291
|
-
},
|
|
2292
|
-
"description": "The color to set."
|
|
2293
|
-
}
|
|
2294
|
-
],
|
|
2295
|
-
"description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or for tertiary button.",
|
|
2296
|
-
"inheritedFrom": {
|
|
2297
|
-
"name": "ButtonComponentMixin",
|
|
2298
|
-
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
2299
|
-
}
|
|
2300
|
-
},
|
|
2301
|
-
{
|
|
2302
|
-
"kind": "method",
|
|
2303
|
-
"name": "setSize",
|
|
2304
|
-
"privacy": "protected",
|
|
2305
|
-
"parameters": [
|
|
2306
|
-
{
|
|
2307
|
-
"name": "size",
|
|
2308
|
-
"type": {
|
|
2309
|
-
"text": "PillButtonSize | IconButtonSize"
|
|
2310
|
-
},
|
|
2311
|
-
"description": "The size to set."
|
|
2312
|
-
}
|
|
2313
|
-
],
|
|
2314
|
-
"description": "Sets the size attribute for the button component.\nValidates the size based on the button type (icon, pill, or tertiary).\nDefaults to DEFAULTS.SIZE if invalid.",
|
|
2315
|
-
"inheritedFrom": {
|
|
2316
|
-
"name": "ButtonComponentMixin",
|
|
2317
|
-
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
2318
|
-
}
|
|
2319
|
-
},
|
|
2320
|
-
{
|
|
2321
|
-
"kind": "method",
|
|
2322
|
-
"name": "inferButtonType",
|
|
2323
|
-
"privacy": "protected",
|
|
2324
|
-
"description": "Infers the type of button based on the presence of slot and/or prefix and postfix icons.",
|
|
2325
|
-
"parameters": [
|
|
2326
|
-
{
|
|
2327
|
-
"description": "default slot of button",
|
|
2328
|
-
"name": "slot"
|
|
2329
|
-
}
|
|
2330
|
-
],
|
|
2739
|
+
"fieldName": "color",
|
|
2331
2740
|
"inheritedFrom": {
|
|
2332
2741
|
"name": "ButtonComponentMixin",
|
|
2333
|
-
"module": "utils/mixins/ButtonComponentMixin.
|
|
2742
|
+
"module": "src/utils/mixins/ButtonComponentMixin.ts"
|
|
2334
2743
|
}
|
|
2335
2744
|
},
|
|
2336
2745
|
{
|
|
2337
|
-
"kind": "field",
|
|
2338
2746
|
"name": "autofocus",
|
|
2339
2747
|
"type": {
|
|
2340
2748
|
"text": "boolean"
|
|
2341
2749
|
},
|
|
2342
2750
|
"default": "false",
|
|
2343
2751
|
"description": "This property indicates whether the element should receive focus automatically when it is rendered.",
|
|
2344
|
-
"
|
|
2345
|
-
"reflects": true,
|
|
2752
|
+
"fieldName": "autofocus",
|
|
2346
2753
|
"inheritedFrom": {
|
|
2347
2754
|
"name": "AutoFocusMixin",
|
|
2348
|
-
"module": "utils/mixins/AutoFocusMixin.
|
|
2755
|
+
"module": "src/utils/mixins/AutoFocusMixin.ts"
|
|
2349
2756
|
}
|
|
2350
2757
|
},
|
|
2351
2758
|
{
|
|
2352
|
-
"kind": "field",
|
|
2353
2759
|
"name": "tabIndex",
|
|
2354
2760
|
"type": {
|
|
2355
2761
|
"text": "number"
|
|
2356
2762
|
},
|
|
2357
2763
|
"default": "0",
|
|
2358
2764
|
"description": "This property specifies the tab order of the element.",
|
|
2359
|
-
"
|
|
2360
|
-
"reflects": true,
|
|
2765
|
+
"fieldName": "tabIndex",
|
|
2361
2766
|
"inheritedFrom": {
|
|
2362
2767
|
"name": "TabIndexMixin",
|
|
2363
|
-
"module": "utils/mixins/TabIndexMixin.
|
|
2768
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
2364
2769
|
}
|
|
2365
2770
|
},
|
|
2366
2771
|
{
|
|
2367
|
-
"kind": "field",
|
|
2368
2772
|
"name": "disabled",
|
|
2369
2773
|
"type": {
|
|
2370
|
-
"text": "boolean | undefined"
|
|
2371
|
-
},
|
|
2372
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
2373
|
-
"default": "undefined",
|
|
2374
|
-
"
|
|
2375
|
-
"
|
|
2376
|
-
|
|
2377
|
-
"
|
|
2378
|
-
|
|
2379
|
-
|
|
2380
|
-
},
|
|
2381
|
-
{
|
|
2382
|
-
"kind": "field",
|
|
2383
|
-
"name": "active",
|
|
2384
|
-
"type": {
|
|
2385
|
-
"text": "boolean | undefined"
|
|
2386
|
-
},
|
|
2387
|
-
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
|
2388
|
-
"default": "undefined",
|
|
2389
|
-
"attribute": "active",
|
|
2390
|
-
"reflects": true,
|
|
2391
|
-
"inheritedFrom": {
|
|
2392
|
-
"name": "Buttonsimple",
|
|
2393
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2394
|
-
}
|
|
2395
|
-
},
|
|
2396
|
-
{
|
|
2397
|
-
"kind": "field",
|
|
2398
|
-
"name": "softDisabled",
|
|
2399
|
-
"type": {
|
|
2400
|
-
"text": "boolean | undefined"
|
|
2401
|
-
},
|
|
2402
|
-
"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.",
|
|
2403
|
-
"default": "undefined",
|
|
2404
|
-
"attribute": "soft-disabled",
|
|
2405
|
-
"reflects": true,
|
|
2406
|
-
"inheritedFrom": {
|
|
2407
|
-
"name": "Buttonsimple",
|
|
2408
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2409
|
-
}
|
|
2410
|
-
},
|
|
2411
|
-
{
|
|
2412
|
-
"kind": "field",
|
|
2413
|
-
"name": "ariaStateKey",
|
|
2414
|
-
"type": {
|
|
2415
|
-
"text": "string | undefined"
|
|
2416
|
-
},
|
|
2417
|
-
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
|
2418
|
-
"default": "'aria-pressed' (when)",
|
|
2419
|
-
"attribute": "ariaStateKey",
|
|
2420
|
-
"reflects": true,
|
|
2421
|
-
"inheritedFrom": {
|
|
2422
|
-
"name": "Buttonsimple",
|
|
2423
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2424
|
-
}
|
|
2425
|
-
},
|
|
2426
|
-
{
|
|
2427
|
-
"kind": "field",
|
|
2428
|
-
"name": "type",
|
|
2429
|
-
"type": {
|
|
2430
|
-
"text": "ButtonType"
|
|
2431
|
-
},
|
|
2432
|
-
"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.",
|
|
2433
|
-
"default": "button",
|
|
2434
|
-
"attribute": "type",
|
|
2435
|
-
"reflects": true,
|
|
2436
|
-
"inheritedFrom": {
|
|
2437
|
-
"name": "Buttonsimple",
|
|
2438
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2439
|
-
}
|
|
2440
|
-
},
|
|
2441
|
-
{
|
|
2442
|
-
"kind": "method",
|
|
2443
|
-
"name": "executeAction",
|
|
2444
|
-
"privacy": "protected",
|
|
2445
|
-
"inheritedFrom": {
|
|
2446
|
-
"name": "Buttonsimple",
|
|
2447
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2448
|
-
}
|
|
2449
|
-
},
|
|
2450
|
-
{
|
|
2451
|
-
"kind": "method",
|
|
2452
|
-
"name": "setActive",
|
|
2453
|
-
"privacy": "protected",
|
|
2454
|
-
"parameters": [
|
|
2455
|
-
{
|
|
2456
|
-
"name": "element",
|
|
2457
|
-
"type": {
|
|
2458
|
-
"text": "HTMLElement"
|
|
2459
|
-
},
|
|
2460
|
-
"description": "The button element"
|
|
2461
|
-
},
|
|
2462
|
-
{
|
|
2463
|
-
"name": "active",
|
|
2464
|
-
"optional": true,
|
|
2465
|
-
"type": {
|
|
2466
|
-
"text": "boolean"
|
|
2467
|
-
},
|
|
2468
|
-
"description": "The active state of the element"
|
|
2469
|
-
}
|
|
2470
|
-
],
|
|
2471
|
-
"description": "Sets the ariaStateKey attributes based on the active state of the button.",
|
|
2472
|
-
"inheritedFrom": {
|
|
2473
|
-
"name": "Buttonsimple",
|
|
2474
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2475
|
-
}
|
|
2476
|
-
},
|
|
2477
|
-
{
|
|
2478
|
-
"kind": "method",
|
|
2479
|
-
"name": "setSoftDisabled",
|
|
2480
|
-
"privacy": "private",
|
|
2481
|
-
"parameters": [
|
|
2482
|
-
{
|
|
2483
|
-
"name": "element",
|
|
2484
|
-
"type": {
|
|
2485
|
-
"text": "HTMLElement"
|
|
2486
|
-
},
|
|
2487
|
-
"description": "The button element."
|
|
2488
|
-
},
|
|
2489
|
-
{
|
|
2490
|
-
"name": "softDisabled",
|
|
2491
|
-
"optional": true,
|
|
2492
|
-
"type": {
|
|
2493
|
-
"text": "boolean"
|
|
2494
|
-
},
|
|
2495
|
-
"description": "The soft-disabled state."
|
|
2496
|
-
}
|
|
2497
|
-
],
|
|
2498
|
-
"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.",
|
|
2499
|
-
"inheritedFrom": {
|
|
2500
|
-
"name": "Buttonsimple",
|
|
2501
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2502
|
-
}
|
|
2503
|
-
},
|
|
2504
|
-
{
|
|
2505
|
-
"kind": "method",
|
|
2506
|
-
"name": "setDisabled",
|
|
2507
|
-
"privacy": "private",
|
|
2508
|
-
"parameters": [
|
|
2509
|
-
{
|
|
2510
|
-
"name": "element",
|
|
2511
|
-
"type": {
|
|
2512
|
-
"text": "HTMLElement"
|
|
2513
|
-
},
|
|
2514
|
-
"description": "The button element."
|
|
2515
|
-
},
|
|
2516
|
-
{
|
|
2517
|
-
"name": "disabled",
|
|
2518
|
-
"type": {
|
|
2519
|
-
"text": "boolean"
|
|
2520
|
-
},
|
|
2521
|
-
"description": "The disabled state."
|
|
2522
|
-
}
|
|
2523
|
-
],
|
|
2524
|
-
"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.",
|
|
2525
|
-
"inheritedFrom": {
|
|
2526
|
-
"name": "Buttonsimple",
|
|
2527
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2528
|
-
}
|
|
2529
|
-
},
|
|
2530
|
-
{
|
|
2531
|
-
"kind": "method",
|
|
2532
|
-
"name": "triggerClickEvent",
|
|
2533
|
-
"privacy": "private",
|
|
2534
|
-
"inheritedFrom": {
|
|
2535
|
-
"name": "Buttonsimple",
|
|
2536
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2537
|
-
}
|
|
2538
|
-
},
|
|
2539
|
-
{
|
|
2540
|
-
"kind": "method",
|
|
2541
|
-
"name": "handleBlur",
|
|
2542
|
-
"privacy": "private",
|
|
2543
|
-
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
|
2544
|
-
"inheritedFrom": {
|
|
2545
|
-
"name": "Buttonsimple",
|
|
2546
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2547
|
-
}
|
|
2548
|
-
},
|
|
2549
|
-
{
|
|
2550
|
-
"kind": "method",
|
|
2551
|
-
"name": "handleKeyDown",
|
|
2552
|
-
"privacy": "private",
|
|
2553
|
-
"parameters": [
|
|
2554
|
-
{
|
|
2555
|
-
"name": "event",
|
|
2556
|
-
"type": {
|
|
2557
|
-
"text": "KeyboardEvent"
|
|
2558
|
-
},
|
|
2559
|
-
"description": "The keyboard event."
|
|
2560
|
-
}
|
|
2561
|
-
],
|
|
2562
|
-
"description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
|
|
2563
|
-
"inheritedFrom": {
|
|
2564
|
-
"name": "Buttonsimple",
|
|
2565
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2566
|
-
}
|
|
2567
|
-
},
|
|
2568
|
-
{
|
|
2569
|
-
"kind": "method",
|
|
2570
|
-
"name": "handleKeyUp",
|
|
2571
|
-
"privacy": "private",
|
|
2572
|
-
"parameters": [
|
|
2573
|
-
{
|
|
2574
|
-
"name": "event",
|
|
2575
|
-
"type": {
|
|
2576
|
-
"text": "KeyboardEvent"
|
|
2577
|
-
},
|
|
2578
|
-
"description": "The keyboard event."
|
|
2579
|
-
}
|
|
2580
|
-
],
|
|
2581
|
-
"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.",
|
|
2582
|
-
"inheritedFrom": {
|
|
2583
|
-
"name": "Buttonsimple",
|
|
2584
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2585
|
-
}
|
|
2586
|
-
}
|
|
2587
|
-
],
|
|
2588
|
-
"attributes": [
|
|
2589
|
-
{
|
|
2590
|
-
"name": "size",
|
|
2591
|
-
"type": {
|
|
2592
|
-
"text": "ButtonSize"
|
|
2593
|
-
},
|
|
2594
|
-
"description": "Button sizing is based on the button type.\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon button can also be 20.",
|
|
2595
|
-
"default": "32",
|
|
2596
|
-
"fieldName": "size",
|
|
2597
|
-
"inheritedFrom": {
|
|
2598
|
-
"name": "Buttonsimple",
|
|
2599
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2600
|
-
}
|
|
2601
|
-
},
|
|
2602
|
-
{
|
|
2603
|
-
"name": "inverted",
|
|
2604
|
-
"type": {
|
|
2605
|
-
"text": "boolean"
|
|
2606
|
-
},
|
|
2607
|
-
"description": "The button color can be inverted by setting the inverted attribute to true.\n\nOnly applies when variant is set to `primary`, color is set to `default`\nand button is not `active`.",
|
|
2608
|
-
"default": "false",
|
|
2609
|
-
"fieldName": "inverted"
|
|
2610
|
-
},
|
|
2611
|
-
{
|
|
2612
|
-
"name": "role",
|
|
2613
|
-
"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.",
|
|
2614
|
-
"default": "'button'",
|
|
2615
|
-
"fieldName": "role",
|
|
2616
|
-
"type": {
|
|
2617
|
-
"text": "string"
|
|
2618
|
-
},
|
|
2619
|
-
"inheritedFrom": {
|
|
2620
|
-
"name": "Buttonsimple",
|
|
2621
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2622
|
-
}
|
|
2623
|
-
},
|
|
2624
|
-
{
|
|
2625
|
-
"name": "prefix-icon",
|
|
2626
|
-
"type": {
|
|
2627
|
-
"text": "IconNames | undefined"
|
|
2628
|
-
},
|
|
2629
|
-
"description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
|
|
2630
|
-
"fieldName": "prefixIcon",
|
|
2631
|
-
"inheritedFrom": {
|
|
2632
|
-
"name": "ButtonComponentMixin",
|
|
2633
|
-
"module": "src/utils/mixins/ButtonComponentMixin.ts"
|
|
2634
|
-
}
|
|
2635
|
-
},
|
|
2636
|
-
{
|
|
2637
|
-
"name": "postfix-icon",
|
|
2638
|
-
"type": {
|
|
2639
|
-
"text": "IconNames | undefined"
|
|
2640
|
-
},
|
|
2641
|
-
"description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
|
|
2642
|
-
"fieldName": "postfixIcon",
|
|
2643
|
-
"inheritedFrom": {
|
|
2644
|
-
"name": "ButtonComponentMixin",
|
|
2645
|
-
"module": "src/utils/mixins/ButtonComponentMixin.ts"
|
|
2646
|
-
}
|
|
2647
|
-
},
|
|
2648
|
-
{
|
|
2649
|
-
"name": "variant",
|
|
2650
|
-
"type": {
|
|
2651
|
-
"text": "ButtonVariant"
|
|
2652
|
-
},
|
|
2653
|
-
"description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
|
|
2654
|
-
"default": "primary",
|
|
2655
|
-
"fieldName": "variant",
|
|
2656
|
-
"inheritedFrom": {
|
|
2657
|
-
"name": "ButtonComponentMixin",
|
|
2658
|
-
"module": "src/utils/mixins/ButtonComponentMixin.ts"
|
|
2659
|
-
}
|
|
2660
|
-
},
|
|
2661
|
-
{
|
|
2662
|
-
"name": "color",
|
|
2663
|
-
"type": {
|
|
2664
|
-
"text": "ButtonColor"
|
|
2665
|
-
},
|
|
2666
|
-
"description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
|
|
2667
|
-
"default": "default",
|
|
2668
|
-
"fieldName": "color",
|
|
2669
|
-
"inheritedFrom": {
|
|
2670
|
-
"name": "ButtonComponentMixin",
|
|
2671
|
-
"module": "src/utils/mixins/ButtonComponentMixin.ts"
|
|
2672
|
-
}
|
|
2673
|
-
},
|
|
2674
|
-
{
|
|
2675
|
-
"name": "autofocus",
|
|
2676
|
-
"type": {
|
|
2677
|
-
"text": "boolean"
|
|
2678
|
-
},
|
|
2679
|
-
"default": "false",
|
|
2680
|
-
"description": "This property indicates whether the element should receive focus automatically when it is rendered.",
|
|
2681
|
-
"fieldName": "autofocus",
|
|
2682
|
-
"inheritedFrom": {
|
|
2683
|
-
"name": "AutoFocusMixin",
|
|
2684
|
-
"module": "src/utils/mixins/AutoFocusMixin.ts"
|
|
2685
|
-
}
|
|
2686
|
-
},
|
|
2687
|
-
{
|
|
2688
|
-
"name": "tabIndex",
|
|
2689
|
-
"type": {
|
|
2690
|
-
"text": "number"
|
|
2691
|
-
},
|
|
2692
|
-
"default": "0",
|
|
2693
|
-
"description": "This property specifies the tab order of the element.",
|
|
2694
|
-
"fieldName": "tabIndex",
|
|
2695
|
-
"inheritedFrom": {
|
|
2696
|
-
"name": "TabIndexMixin",
|
|
2697
|
-
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
2698
|
-
}
|
|
2699
|
-
},
|
|
2700
|
-
{
|
|
2701
|
-
"name": "disabled",
|
|
2702
|
-
"type": {
|
|
2703
|
-
"text": "boolean | undefined"
|
|
2704
|
-
},
|
|
2705
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
2706
|
-
"default": "undefined",
|
|
2707
|
-
"fieldName": "disabled",
|
|
2708
|
-
"inheritedFrom": {
|
|
2709
|
-
"name": "DisabledMixin",
|
|
2710
|
-
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
2711
|
-
}
|
|
2712
|
-
},
|
|
2713
|
-
{
|
|
2714
|
-
"name": "active",
|
|
2715
|
-
"type": {
|
|
2716
|
-
"text": "boolean | undefined"
|
|
2717
|
-
},
|
|
2718
|
-
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
|
2719
|
-
"default": "undefined",
|
|
2720
|
-
"fieldName": "active",
|
|
2721
|
-
"inheritedFrom": {
|
|
2722
|
-
"name": "Buttonsimple",
|
|
2723
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2724
|
-
}
|
|
2725
|
-
},
|
|
2726
|
-
{
|
|
2727
|
-
"name": "soft-disabled",
|
|
2728
|
-
"type": {
|
|
2729
|
-
"text": "boolean | undefined"
|
|
2730
|
-
},
|
|
2731
|
-
"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.",
|
|
2732
|
-
"default": "undefined",
|
|
2733
|
-
"fieldName": "softDisabled",
|
|
2734
|
-
"inheritedFrom": {
|
|
2735
|
-
"name": "Buttonsimple",
|
|
2736
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2737
|
-
}
|
|
2738
|
-
},
|
|
2739
|
-
{
|
|
2740
|
-
"name": "ariaStateKey",
|
|
2741
|
-
"type": {
|
|
2742
|
-
"text": "string | undefined"
|
|
2743
|
-
},
|
|
2744
|
-
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
|
2745
|
-
"default": "'aria-pressed' (when)",
|
|
2746
|
-
"fieldName": "ariaStateKey",
|
|
2747
|
-
"inheritedFrom": {
|
|
2748
|
-
"name": "Buttonsimple",
|
|
2749
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2750
|
-
}
|
|
2751
|
-
},
|
|
2752
|
-
{
|
|
2753
|
-
"name": "type",
|
|
2754
|
-
"type": {
|
|
2755
|
-
"text": "ButtonType"
|
|
2756
|
-
},
|
|
2757
|
-
"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.",
|
|
2758
|
-
"default": "button",
|
|
2759
|
-
"fieldName": "type",
|
|
2760
|
-
"inheritedFrom": {
|
|
2761
|
-
"name": "Buttonsimple",
|
|
2762
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2763
|
-
}
|
|
2764
|
-
}
|
|
2765
|
-
],
|
|
2766
|
-
"mixins": [
|
|
2767
|
-
{
|
|
2768
|
-
"name": "ButtonComponentMixin",
|
|
2769
|
-
"module": "/src/utils/mixins/ButtonComponentMixin"
|
|
2770
|
-
}
|
|
2771
|
-
],
|
|
2772
|
-
"superclass": {
|
|
2773
|
-
"name": "Buttonsimple",
|
|
2774
|
-
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
2775
|
-
},
|
|
2776
|
-
"tagName": "mdc-button",
|
|
2777
|
-
"jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * Button Variants:\n * - **Primary**: Solid background color.\n * - **Secondary**: Transparent background with a solid border.\n * - **Tertiary**: No background or border, appears as plain text but retains all button functionalities.\n *\n * Button Colors:\n * - **Positive**: Green color.\n * - **Negative**: Red color.\n * - **Accent**: Blue color.\n * - **Promotional**: Purple color.\n * - **Default**: White color.\n *\n * Button Sizes (in REM units):\n * - **Pill button**: 40, 32, 28, 24.\n * - **Icon button**: 64, 52, 40, 32, 28, 24.\n * - **Tertiary icon button**: 20.\n *\n * Button Types:\n * - **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n * - **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n * - **Icon button**: A button represented by just an icon without any text.\n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n */",
|
|
2778
|
-
"customElement": true,
|
|
2779
|
-
"events": [
|
|
2780
|
-
{
|
|
2781
|
-
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
|
2782
|
-
"name": "click",
|
|
2783
|
-
"reactName": "onClick",
|
|
2784
|
-
"inheritedFrom": {
|
|
2785
|
-
"name": "Buttonsimple",
|
|
2786
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2787
|
-
}
|
|
2788
|
-
},
|
|
2789
|
-
{
|
|
2790
|
-
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
|
|
2791
|
-
"name": "keydown",
|
|
2792
|
-
"reactName": "onKeyDown",
|
|
2793
|
-
"inheritedFrom": {
|
|
2794
|
-
"name": "Buttonsimple",
|
|
2795
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2796
|
-
}
|
|
2797
|
-
},
|
|
2798
|
-
{
|
|
2799
|
-
"description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
|
|
2800
|
-
"name": "keyup",
|
|
2801
|
-
"reactName": "onKeyUp",
|
|
2802
|
-
"inheritedFrom": {
|
|
2803
|
-
"name": "Buttonsimple",
|
|
2804
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2805
|
-
}
|
|
2806
|
-
},
|
|
2807
|
-
{
|
|
2808
|
-
"description": "(React: onFocus) This event is dispatched when the button receives focus.",
|
|
2809
|
-
"name": "focus",
|
|
2810
|
-
"reactName": "onFocus",
|
|
2811
|
-
"inheritedFrom": {
|
|
2812
|
-
"name": "Buttonsimple",
|
|
2813
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2814
|
-
}
|
|
2815
|
-
}
|
|
2816
|
-
]
|
|
2817
|
-
}
|
|
2818
|
-
],
|
|
2819
|
-
"exports": [
|
|
2820
|
-
{
|
|
2821
|
-
"kind": "js",
|
|
2822
|
-
"name": "default",
|
|
2823
|
-
"declaration": {
|
|
2824
|
-
"name": "Button",
|
|
2825
|
-
"module": "components/button/button.component.js"
|
|
2826
|
-
}
|
|
2827
|
-
}
|
|
2828
|
-
]
|
|
2829
|
-
},
|
|
2830
|
-
{
|
|
2831
|
-
"kind": "javascript-module",
|
|
2832
|
-
"path": "components/bullet/bullet.component.js",
|
|
2833
|
-
"declarations": [
|
|
2834
|
-
{
|
|
2835
|
-
"kind": "class",
|
|
2836
|
-
"description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
|
|
2837
|
-
"name": "Bullet",
|
|
2838
|
-
"cssProperties": [
|
|
2839
|
-
{
|
|
2840
|
-
"description": "background color of the bullet",
|
|
2841
|
-
"name": "--mdc-bullet-background-color"
|
|
2842
|
-
},
|
|
2843
|
-
{
|
|
2844
|
-
"description": "small size value of the bullet",
|
|
2845
|
-
"name": "--mdc-bullet-size-small"
|
|
2846
|
-
},
|
|
2847
|
-
{
|
|
2848
|
-
"description": "medium size value of the bullet",
|
|
2849
|
-
"name": "--mdc-bullet-size-medium"
|
|
2850
|
-
},
|
|
2851
|
-
{
|
|
2852
|
-
"description": "large size value of the bullet",
|
|
2853
|
-
"name": "--mdc-bullet-size-large"
|
|
2854
|
-
}
|
|
2855
|
-
],
|
|
2856
|
-
"members": [
|
|
2857
|
-
{
|
|
2858
|
-
"kind": "field",
|
|
2859
|
-
"name": "size",
|
|
2860
|
-
"type": {
|
|
2861
|
-
"text": "Size"
|
|
2862
|
-
},
|
|
2863
|
-
"privacy": "public",
|
|
2864
|
-
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
2865
|
-
"default": "small",
|
|
2866
|
-
"attribute": "size",
|
|
2867
|
-
"reflects": true
|
|
2868
|
-
}
|
|
2869
|
-
],
|
|
2870
|
-
"attributes": [
|
|
2871
|
-
{
|
|
2872
|
-
"name": "size",
|
|
2873
|
-
"type": {
|
|
2874
|
-
"text": "Size"
|
|
2875
|
-
},
|
|
2876
|
-
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
2877
|
-
"default": "small",
|
|
2878
|
-
"fieldName": "size"
|
|
2879
|
-
}
|
|
2880
|
-
],
|
|
2881
|
-
"superclass": {
|
|
2882
|
-
"name": "Component",
|
|
2883
|
-
"module": "/src/models"
|
|
2884
|
-
},
|
|
2885
|
-
"tagName": "mdc-bullet",
|
|
2886
|
-
"jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
|
|
2887
|
-
"customElement": true
|
|
2888
|
-
}
|
|
2889
|
-
],
|
|
2890
|
-
"exports": [
|
|
2891
|
-
{
|
|
2892
|
-
"kind": "js",
|
|
2893
|
-
"name": "default",
|
|
2894
|
-
"declaration": {
|
|
2895
|
-
"name": "Bullet",
|
|
2896
|
-
"module": "components/bullet/bullet.component.js"
|
|
2897
|
-
}
|
|
2898
|
-
}
|
|
2899
|
-
]
|
|
2900
|
-
},
|
|
2901
|
-
{
|
|
2902
|
-
"kind": "javascript-module",
|
|
2903
|
-
"path": "components/buttongroup/buttongroup.component.js",
|
|
2904
|
-
"declarations": [
|
|
2905
|
-
{
|
|
2906
|
-
"kind": "class",
|
|
2907
|
-
"description": "buttongroup component, is a styled wrapper for multiple buttons.\nIt can support icon buttons, combination of icon and pill buttons, and text buttons.\nThey are available in horizontal and vertical orientation.",
|
|
2908
|
-
"name": "ButtonGroup",
|
|
2909
|
-
"cssProperties": [
|
|
2910
|
-
{
|
|
2911
|
-
"description": "The border radius of the buttongroup",
|
|
2912
|
-
"name": "--mdc-buttongroup-border-radius"
|
|
2913
|
-
},
|
|
2914
|
-
{
|
|
2915
|
-
"description": "The border color of the buttongroup",
|
|
2916
|
-
"name": "--mdc-buttongroup-border-color"
|
|
2917
|
-
},
|
|
2918
|
-
{
|
|
2919
|
-
"description": "The color of the divider between buttons within the buttongroup",
|
|
2920
|
-
"name": "--mdc-buttongroup-divider-color"
|
|
2921
|
-
}
|
|
2922
|
-
],
|
|
2923
|
-
"slots": [
|
|
2924
|
-
{
|
|
2925
|
-
"description": "This is a default/unnamed slot, which contains the buttons",
|
|
2926
|
-
"name": "default"
|
|
2927
|
-
}
|
|
2928
|
-
],
|
|
2929
|
-
"members": [
|
|
2930
|
-
{
|
|
2931
|
-
"kind": "field",
|
|
2932
|
-
"name": "orientation",
|
|
2933
|
-
"type": {
|
|
2934
|
-
"text": "ButtonGroupOrientation"
|
|
2935
|
-
},
|
|
2936
|
-
"description": "Orientation of the buttongroup.",
|
|
2937
|
-
"default": "'horizontal'",
|
|
2938
|
-
"attribute": "orientation",
|
|
2939
|
-
"reflects": true
|
|
2940
|
-
},
|
|
2941
|
-
{
|
|
2942
|
-
"kind": "field",
|
|
2943
|
-
"name": "variant",
|
|
2944
|
-
"type": {
|
|
2945
|
-
"text": "ButtonGroupVariant"
|
|
2946
|
-
},
|
|
2947
|
-
"description": "Variant of the buttons within the buttongroup.",
|
|
2948
|
-
"default": "'primary'",
|
|
2949
|
-
"attribute": "variant",
|
|
2950
|
-
"reflects": true
|
|
2951
|
-
},
|
|
2952
|
-
{
|
|
2953
|
-
"kind": "field",
|
|
2954
|
-
"name": "size",
|
|
2955
|
-
"type": {
|
|
2956
|
-
"text": "ButtonGroupSize"
|
|
2957
|
-
},
|
|
2958
|
-
"description": "Size of the buttons within the buttongroup.",
|
|
2959
|
-
"default": "'28'",
|
|
2960
|
-
"attribute": "size",
|
|
2961
|
-
"reflects": true
|
|
2962
|
-
},
|
|
2963
|
-
{
|
|
2964
|
-
"kind": "field",
|
|
2965
|
-
"name": "compact",
|
|
2966
|
-
"type": {
|
|
2967
|
-
"text": "boolean"
|
|
2968
|
-
},
|
|
2969
|
-
"default": "false",
|
|
2970
|
-
"description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
|
|
2971
|
-
"attribute": "compact",
|
|
2972
|
-
"reflects": true
|
|
2973
|
-
}
|
|
2974
|
-
],
|
|
2975
|
-
"attributes": [
|
|
2774
|
+
"text": "boolean | undefined"
|
|
2775
|
+
},
|
|
2776
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
2777
|
+
"default": "undefined",
|
|
2778
|
+
"fieldName": "disabled",
|
|
2779
|
+
"inheritedFrom": {
|
|
2780
|
+
"name": "DisabledMixin",
|
|
2781
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
2782
|
+
}
|
|
2783
|
+
},
|
|
2976
2784
|
{
|
|
2977
|
-
"name": "
|
|
2785
|
+
"name": "active",
|
|
2978
2786
|
"type": {
|
|
2979
|
-
"text": "
|
|
2787
|
+
"text": "boolean | undefined"
|
|
2980
2788
|
},
|
|
2981
|
-
"description": "
|
|
2982
|
-
"default": "
|
|
2983
|
-
"fieldName": "
|
|
2789
|
+
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
|
2790
|
+
"default": "undefined",
|
|
2791
|
+
"fieldName": "active",
|
|
2792
|
+
"inheritedFrom": {
|
|
2793
|
+
"name": "Buttonsimple",
|
|
2794
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2795
|
+
}
|
|
2984
2796
|
},
|
|
2985
2797
|
{
|
|
2986
|
-
"name": "
|
|
2798
|
+
"name": "soft-disabled",
|
|
2987
2799
|
"type": {
|
|
2988
|
-
"text": "
|
|
2800
|
+
"text": "boolean | undefined"
|
|
2989
2801
|
},
|
|
2990
|
-
"description": "
|
|
2991
|
-
"default": "
|
|
2992
|
-
"fieldName": "
|
|
2802
|
+
"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.",
|
|
2803
|
+
"default": "undefined",
|
|
2804
|
+
"fieldName": "softDisabled",
|
|
2805
|
+
"inheritedFrom": {
|
|
2806
|
+
"name": "Buttonsimple",
|
|
2807
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2808
|
+
}
|
|
2993
2809
|
},
|
|
2994
2810
|
{
|
|
2995
|
-
"name": "
|
|
2811
|
+
"name": "ariaStateKey",
|
|
2996
2812
|
"type": {
|
|
2997
|
-
"text": "
|
|
2813
|
+
"text": "string | undefined"
|
|
2998
2814
|
},
|
|
2999
|
-
"description": "
|
|
3000
|
-
"default": "'
|
|
3001
|
-
"fieldName": "
|
|
2815
|
+
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
|
2816
|
+
"default": "'aria-pressed' (when)",
|
|
2817
|
+
"fieldName": "ariaStateKey",
|
|
2818
|
+
"inheritedFrom": {
|
|
2819
|
+
"name": "Buttonsimple",
|
|
2820
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2821
|
+
}
|
|
3002
2822
|
},
|
|
3003
2823
|
{
|
|
3004
|
-
"name": "
|
|
2824
|
+
"name": "type",
|
|
3005
2825
|
"type": {
|
|
3006
|
-
"text": "
|
|
2826
|
+
"text": "ButtonType"
|
|
3007
2827
|
},
|
|
3008
|
-
"
|
|
3009
|
-
"
|
|
3010
|
-
"fieldName": "
|
|
2828
|
+
"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.",
|
|
2829
|
+
"default": "button",
|
|
2830
|
+
"fieldName": "type",
|
|
2831
|
+
"inheritedFrom": {
|
|
2832
|
+
"name": "Buttonsimple",
|
|
2833
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2834
|
+
}
|
|
2835
|
+
}
|
|
2836
|
+
],
|
|
2837
|
+
"mixins": [
|
|
2838
|
+
{
|
|
2839
|
+
"name": "ButtonComponentMixin",
|
|
2840
|
+
"module": "/src/utils/mixins/ButtonComponentMixin"
|
|
3011
2841
|
}
|
|
3012
2842
|
],
|
|
3013
2843
|
"superclass": {
|
|
3014
|
-
"name": "
|
|
3015
|
-
"module": "/src/
|
|
2844
|
+
"name": "Buttonsimple",
|
|
2845
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
3016
2846
|
},
|
|
3017
|
-
"tagName": "mdc-
|
|
3018
|
-
"jsDoc": "/**\n *
|
|
3019
|
-
"customElement": true
|
|
2847
|
+
"tagName": "mdc-button",
|
|
2848
|
+
"jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * Button Variants:\n * - **Primary**: Solid background color.\n * - **Secondary**: Transparent background with a solid border.\n * - **Tertiary**: No background or border, appears as plain text but retains all button functionalities.\n *\n * Button Colors:\n * - **Positive**: Green color.\n * - **Negative**: Red color.\n * - **Accent**: Blue color.\n * - **Promotional**: Purple color.\n * - **Default**: White color.\n *\n * Button Sizes (in REM units):\n * - **Pill button**: 40, 32, 28, 24.\n * - **Icon button**: 64, 52, 40, 32, 28, 24.\n * - **Tertiary icon button**: 20.\n *\n * Button Types:\n * - **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n * - **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n * - **Icon button**: A button represented by just an icon without any text.\n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n */",
|
|
2849
|
+
"customElement": true,
|
|
2850
|
+
"events": [
|
|
2851
|
+
{
|
|
2852
|
+
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
|
2853
|
+
"name": "click",
|
|
2854
|
+
"reactName": "onClick",
|
|
2855
|
+
"inheritedFrom": {
|
|
2856
|
+
"name": "Buttonsimple",
|
|
2857
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2858
|
+
}
|
|
2859
|
+
},
|
|
2860
|
+
{
|
|
2861
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
|
|
2862
|
+
"name": "keydown",
|
|
2863
|
+
"reactName": "onKeyDown",
|
|
2864
|
+
"inheritedFrom": {
|
|
2865
|
+
"name": "Buttonsimple",
|
|
2866
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2867
|
+
}
|
|
2868
|
+
},
|
|
2869
|
+
{
|
|
2870
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
|
|
2871
|
+
"name": "keyup",
|
|
2872
|
+
"reactName": "onKeyUp",
|
|
2873
|
+
"inheritedFrom": {
|
|
2874
|
+
"name": "Buttonsimple",
|
|
2875
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2876
|
+
}
|
|
2877
|
+
},
|
|
2878
|
+
{
|
|
2879
|
+
"description": "(React: onFocus) This event is dispatched when the button receives focus.",
|
|
2880
|
+
"name": "focus",
|
|
2881
|
+
"reactName": "onFocus",
|
|
2882
|
+
"inheritedFrom": {
|
|
2883
|
+
"name": "Buttonsimple",
|
|
2884
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2885
|
+
}
|
|
2886
|
+
}
|
|
2887
|
+
]
|
|
3020
2888
|
}
|
|
3021
2889
|
],
|
|
3022
2890
|
"exports": [
|
|
@@ -3024,8 +2892,8 @@
|
|
|
3024
2892
|
"kind": "js",
|
|
3025
2893
|
"name": "default",
|
|
3026
2894
|
"declaration": {
|
|
3027
|
-
"name": "
|
|
3028
|
-
"module": "components/
|
|
2895
|
+
"name": "Button",
|
|
2896
|
+
"module": "components/button/button.component.js"
|
|
3029
2897
|
}
|
|
3030
2898
|
}
|
|
3031
2899
|
]
|
|
@@ -4429,6 +4297,138 @@
|
|
|
4429
4297
|
}
|
|
4430
4298
|
]
|
|
4431
4299
|
},
|
|
4300
|
+
{
|
|
4301
|
+
"kind": "javascript-module",
|
|
4302
|
+
"path": "components/buttongroup/buttongroup.component.js",
|
|
4303
|
+
"declarations": [
|
|
4304
|
+
{
|
|
4305
|
+
"kind": "class",
|
|
4306
|
+
"description": "buttongroup component, is a styled wrapper for multiple buttons.\nIt can support icon buttons, combination of icon and pill buttons, and text buttons.\nThey are available in horizontal and vertical orientation.",
|
|
4307
|
+
"name": "ButtonGroup",
|
|
4308
|
+
"cssProperties": [
|
|
4309
|
+
{
|
|
4310
|
+
"description": "The border radius of the buttongroup",
|
|
4311
|
+
"name": "--mdc-buttongroup-border-radius"
|
|
4312
|
+
},
|
|
4313
|
+
{
|
|
4314
|
+
"description": "The border color of the buttongroup",
|
|
4315
|
+
"name": "--mdc-buttongroup-border-color"
|
|
4316
|
+
},
|
|
4317
|
+
{
|
|
4318
|
+
"description": "The color of the divider between buttons within the buttongroup",
|
|
4319
|
+
"name": "--mdc-buttongroup-divider-color"
|
|
4320
|
+
}
|
|
4321
|
+
],
|
|
4322
|
+
"slots": [
|
|
4323
|
+
{
|
|
4324
|
+
"description": "This is a default/unnamed slot, which contains the buttons",
|
|
4325
|
+
"name": "default"
|
|
4326
|
+
}
|
|
4327
|
+
],
|
|
4328
|
+
"members": [
|
|
4329
|
+
{
|
|
4330
|
+
"kind": "field",
|
|
4331
|
+
"name": "orientation",
|
|
4332
|
+
"type": {
|
|
4333
|
+
"text": "ButtonGroupOrientation"
|
|
4334
|
+
},
|
|
4335
|
+
"description": "Orientation of the buttongroup.",
|
|
4336
|
+
"default": "'horizontal'",
|
|
4337
|
+
"attribute": "orientation",
|
|
4338
|
+
"reflects": true
|
|
4339
|
+
},
|
|
4340
|
+
{
|
|
4341
|
+
"kind": "field",
|
|
4342
|
+
"name": "variant",
|
|
4343
|
+
"type": {
|
|
4344
|
+
"text": "ButtonGroupVariant"
|
|
4345
|
+
},
|
|
4346
|
+
"description": "Variant of the buttons within the buttongroup.",
|
|
4347
|
+
"default": "'primary'",
|
|
4348
|
+
"attribute": "variant",
|
|
4349
|
+
"reflects": true
|
|
4350
|
+
},
|
|
4351
|
+
{
|
|
4352
|
+
"kind": "field",
|
|
4353
|
+
"name": "size",
|
|
4354
|
+
"type": {
|
|
4355
|
+
"text": "ButtonGroupSize"
|
|
4356
|
+
},
|
|
4357
|
+
"description": "Size of the buttons within the buttongroup.",
|
|
4358
|
+
"default": "'28'",
|
|
4359
|
+
"attribute": "size",
|
|
4360
|
+
"reflects": true
|
|
4361
|
+
},
|
|
4362
|
+
{
|
|
4363
|
+
"kind": "field",
|
|
4364
|
+
"name": "compact",
|
|
4365
|
+
"type": {
|
|
4366
|
+
"text": "boolean"
|
|
4367
|
+
},
|
|
4368
|
+
"default": "false",
|
|
4369
|
+
"description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
|
|
4370
|
+
"attribute": "compact",
|
|
4371
|
+
"reflects": true
|
|
4372
|
+
}
|
|
4373
|
+
],
|
|
4374
|
+
"attributes": [
|
|
4375
|
+
{
|
|
4376
|
+
"name": "orientation",
|
|
4377
|
+
"type": {
|
|
4378
|
+
"text": "ButtonGroupOrientation"
|
|
4379
|
+
},
|
|
4380
|
+
"description": "Orientation of the buttongroup.",
|
|
4381
|
+
"default": "'horizontal'",
|
|
4382
|
+
"fieldName": "orientation"
|
|
4383
|
+
},
|
|
4384
|
+
{
|
|
4385
|
+
"name": "variant",
|
|
4386
|
+
"type": {
|
|
4387
|
+
"text": "ButtonGroupVariant"
|
|
4388
|
+
},
|
|
4389
|
+
"description": "Variant of the buttons within the buttongroup.",
|
|
4390
|
+
"default": "'primary'",
|
|
4391
|
+
"fieldName": "variant"
|
|
4392
|
+
},
|
|
4393
|
+
{
|
|
4394
|
+
"name": "size",
|
|
4395
|
+
"type": {
|
|
4396
|
+
"text": "ButtonGroupSize"
|
|
4397
|
+
},
|
|
4398
|
+
"description": "Size of the buttons within the buttongroup.",
|
|
4399
|
+
"default": "'28'",
|
|
4400
|
+
"fieldName": "size"
|
|
4401
|
+
},
|
|
4402
|
+
{
|
|
4403
|
+
"name": "compact",
|
|
4404
|
+
"type": {
|
|
4405
|
+
"text": "boolean"
|
|
4406
|
+
},
|
|
4407
|
+
"default": "false",
|
|
4408
|
+
"description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
|
|
4409
|
+
"fieldName": "compact"
|
|
4410
|
+
}
|
|
4411
|
+
],
|
|
4412
|
+
"superclass": {
|
|
4413
|
+
"name": "Component",
|
|
4414
|
+
"module": "/src/models"
|
|
4415
|
+
},
|
|
4416
|
+
"tagName": "mdc-buttongroup",
|
|
4417
|
+
"jsDoc": "/**\n * buttongroup component, is a styled wrapper for multiple buttons.\n * It can support icon buttons, combination of icon and pill buttons, and text buttons.\n * They are available in horizontal and vertical orientation.\n *\n * @tagname mdc-buttongroup\n *\n * @slot default - This is a default/unnamed slot, which contains the buttons\n *\n * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup\n * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup\n * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup\n */",
|
|
4418
|
+
"customElement": true
|
|
4419
|
+
}
|
|
4420
|
+
],
|
|
4421
|
+
"exports": [
|
|
4422
|
+
{
|
|
4423
|
+
"kind": "js",
|
|
4424
|
+
"name": "default",
|
|
4425
|
+
"declaration": {
|
|
4426
|
+
"name": "ButtonGroup",
|
|
4427
|
+
"module": "components/buttongroup/buttongroup.component.js"
|
|
4428
|
+
}
|
|
4429
|
+
}
|
|
4430
|
+
]
|
|
4431
|
+
},
|
|
4432
4432
|
{
|
|
4433
4433
|
"kind": "javascript-module",
|
|
4434
4434
|
"path": "components/cardbutton/cardbutton.component.js",
|