@momentum-design/components 0.87.1 → 0.87.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/index.js +9 -3
- package/dist/browser/index.js.map +3 -3
- package/dist/components/alertchip/alertchip.component.js +6 -2
- package/dist/components/chip/chip.component.js +5 -1
- package/dist/components/inputchip/inputchip.component.js +5 -1
- package/dist/custom-elements.json +1232 -1232
- package/dist/react/index.d.ts +4 -4
- package/dist/react/index.js +4 -4
- package/package.json +3 -3
|
@@ -4,519 +4,264 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "components/
|
|
7
|
+
"path": "components/animation/animation.component.js",
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "mdc-
|
|
12
|
-
"name": "
|
|
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
|
-
],
|
|
31
|
-
"cssParts": [
|
|
32
|
-
{
|
|
33
|
-
"description": "The alert icon",
|
|
34
|
-
"name": "icon"
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
"description": "The text label of the alertchip",
|
|
38
|
-
"name": "label"
|
|
39
|
-
}
|
|
40
|
-
],
|
|
11
|
+
"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.",
|
|
12
|
+
"name": "Animation",
|
|
41
13
|
"members": [
|
|
42
14
|
{
|
|
43
15
|
"kind": "field",
|
|
44
|
-
"name": "
|
|
45
|
-
"type": {
|
|
46
|
-
"text": "VariantType"
|
|
47
|
-
},
|
|
48
|
-
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
49
|
-
"default": "neutral",
|
|
50
|
-
"attribute": "variant"
|
|
51
|
-
},
|
|
52
|
-
{
|
|
53
|
-
"kind": "field",
|
|
54
|
-
"name": "label",
|
|
55
|
-
"type": {
|
|
56
|
-
"text": "string"
|
|
57
|
-
},
|
|
58
|
-
"default": "''",
|
|
59
|
-
"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.",
|
|
60
|
-
"attribute": "label"
|
|
61
|
-
},
|
|
62
|
-
{
|
|
63
|
-
"kind": "field",
|
|
64
|
-
"name": "autofocus",
|
|
16
|
+
"name": "name",
|
|
65
17
|
"type": {
|
|
66
|
-
"text": "
|
|
18
|
+
"text": "AnimationNames | undefined"
|
|
67
19
|
},
|
|
68
|
-
"
|
|
69
|
-
"
|
|
70
|
-
"
|
|
71
|
-
"reflects": true,
|
|
72
|
-
"inheritedFrom": {
|
|
73
|
-
"name": "AutoFocusMixin",
|
|
74
|
-
"module": "utils/mixins/AutoFocusMixin.js"
|
|
75
|
-
}
|
|
20
|
+
"description": "Name of the animation (= filename)",
|
|
21
|
+
"attribute": "name",
|
|
22
|
+
"reflects": true
|
|
76
23
|
},
|
|
77
24
|
{
|
|
78
25
|
"kind": "field",
|
|
79
|
-
"name": "
|
|
26
|
+
"name": "loop",
|
|
80
27
|
"type": {
|
|
81
|
-
"text": "
|
|
28
|
+
"text": "LoopType | undefined"
|
|
82
29
|
},
|
|
83
|
-
"
|
|
84
|
-
"
|
|
85
|
-
"
|
|
86
|
-
"reflects": true,
|
|
87
|
-
"inheritedFrom": {
|
|
88
|
-
"name": "TabIndexMixin",
|
|
89
|
-
"module": "utils/mixins/TabIndexMixin.js"
|
|
90
|
-
}
|
|
30
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
31
|
+
"attribute": "loop",
|
|
32
|
+
"reflects": true
|
|
91
33
|
},
|
|
92
34
|
{
|
|
93
35
|
"kind": "field",
|
|
94
|
-
"name": "
|
|
36
|
+
"name": "autoplay",
|
|
95
37
|
"type": {
|
|
96
38
|
"text": "boolean | undefined"
|
|
97
39
|
},
|
|
98
|
-
"description": "
|
|
99
|
-
"
|
|
100
|
-
"
|
|
101
|
-
"reflects": true,
|
|
102
|
-
"inheritedFrom": {
|
|
103
|
-
"name": "DisabledMixin",
|
|
104
|
-
"module": "utils/mixins/DisabledMixin.js"
|
|
105
|
-
}
|
|
40
|
+
"description": "Weather start the animation automatically",
|
|
41
|
+
"attribute": "autoplay",
|
|
42
|
+
"reflects": true
|
|
106
43
|
},
|
|
107
44
|
{
|
|
108
45
|
"kind": "field",
|
|
109
|
-
"name": "
|
|
46
|
+
"name": "ariaLabel",
|
|
110
47
|
"type": {
|
|
111
|
-
"text": "
|
|
48
|
+
"text": "string | null"
|
|
112
49
|
},
|
|
113
|
-
"
|
|
114
|
-
"
|
|
115
|
-
"attribute": "
|
|
116
|
-
"reflects": true,
|
|
117
|
-
"inheritedFrom": {
|
|
118
|
-
"name": "Buttonsimple",
|
|
119
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
120
|
-
}
|
|
50
|
+
"default": "null",
|
|
51
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
52
|
+
"attribute": "aria-label"
|
|
121
53
|
},
|
|
122
54
|
{
|
|
123
55
|
"kind": "field",
|
|
124
|
-
"name": "
|
|
56
|
+
"name": "ariaLabelledBy",
|
|
125
57
|
"type": {
|
|
126
|
-
"text": "
|
|
58
|
+
"text": "string | null"
|
|
127
59
|
},
|
|
128
|
-
"
|
|
129
|
-
"
|
|
130
|
-
"attribute": "
|
|
131
|
-
"reflects": true,
|
|
132
|
-
"inheritedFrom": {
|
|
133
|
-
"name": "Buttonsimple",
|
|
134
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
135
|
-
}
|
|
60
|
+
"default": "null",
|
|
61
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
62
|
+
"attribute": "aria-labelledby"
|
|
136
63
|
},
|
|
137
64
|
{
|
|
138
65
|
"kind": "field",
|
|
139
|
-
"name": "
|
|
66
|
+
"name": "lottieInstance",
|
|
140
67
|
"type": {
|
|
141
|
-
"text": "
|
|
68
|
+
"text": "AnimationItem | undefined"
|
|
142
69
|
},
|
|
143
|
-
"
|
|
144
|
-
"
|
|
145
|
-
"attribute": "size",
|
|
146
|
-
"reflects": true,
|
|
147
|
-
"inheritedFrom": {
|
|
148
|
-
"name": "Buttonsimple",
|
|
149
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
150
|
-
}
|
|
151
|
-
},
|
|
152
|
-
{
|
|
153
|
-
"kind": "field",
|
|
154
|
-
"name": "role",
|
|
155
|
-
"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.",
|
|
156
|
-
"default": "button",
|
|
157
|
-
"attribute": "role",
|
|
158
|
-
"reflects": true,
|
|
159
|
-
"inheritedFrom": {
|
|
160
|
-
"name": "Buttonsimple",
|
|
161
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
162
|
-
}
|
|
70
|
+
"privacy": "private",
|
|
71
|
+
"description": "Lottie animation instance"
|
|
163
72
|
},
|
|
164
73
|
{
|
|
165
74
|
"kind": "field",
|
|
166
|
-
"name": "
|
|
75
|
+
"name": "containerRef",
|
|
167
76
|
"type": {
|
|
168
|
-
"text": "
|
|
77
|
+
"text": "Ref<HTMLDivElement>"
|
|
169
78
|
},
|
|
170
|
-
"
|
|
171
|
-
"
|
|
172
|
-
"attribute": "ariaStateKey",
|
|
173
|
-
"reflects": true,
|
|
174
|
-
"inheritedFrom": {
|
|
175
|
-
"name": "Buttonsimple",
|
|
176
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
177
|
-
}
|
|
79
|
+
"privacy": "private",
|
|
80
|
+
"description": "Container for the animation"
|
|
178
81
|
},
|
|
179
82
|
{
|
|
180
83
|
"kind": "field",
|
|
181
|
-
"name": "
|
|
182
|
-
"
|
|
183
|
-
|
|
184
|
-
},
|
|
185
|
-
"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.",
|
|
186
|
-
"default": "button",
|
|
187
|
-
"attribute": "type",
|
|
188
|
-
"reflects": true,
|
|
189
|
-
"inheritedFrom": {
|
|
190
|
-
"name": "Buttonsimple",
|
|
191
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
192
|
-
}
|
|
84
|
+
"name": "animation",
|
|
85
|
+
"description": "Exposed API of the animation library (lottie)",
|
|
86
|
+
"readonly": true
|
|
193
87
|
},
|
|
194
88
|
{
|
|
195
89
|
"kind": "method",
|
|
196
|
-
"name": "
|
|
197
|
-
"privacy": "
|
|
198
|
-
"inheritedFrom": {
|
|
199
|
-
"name": "Buttonsimple",
|
|
200
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
201
|
-
}
|
|
90
|
+
"name": "getLoopValue",
|
|
91
|
+
"privacy": "private"
|
|
202
92
|
},
|
|
203
93
|
{
|
|
204
94
|
"kind": "method",
|
|
205
|
-
"name": "
|
|
206
|
-
"privacy": "
|
|
95
|
+
"name": "onLoadSuccessHandler",
|
|
96
|
+
"privacy": "private",
|
|
207
97
|
"parameters": [
|
|
208
98
|
{
|
|
209
|
-
"name": "
|
|
210
|
-
"type": {
|
|
211
|
-
"text": "HTMLElement"
|
|
212
|
-
},
|
|
213
|
-
"description": "The button element"
|
|
214
|
-
},
|
|
215
|
-
{
|
|
216
|
-
"name": "active",
|
|
217
|
-
"optional": true,
|
|
99
|
+
"name": "animationData",
|
|
218
100
|
"type": {
|
|
219
|
-
"text": "
|
|
220
|
-
}
|
|
221
|
-
"description": "The active state of the element"
|
|
101
|
+
"text": "any"
|
|
102
|
+
}
|
|
222
103
|
}
|
|
223
104
|
],
|
|
224
|
-
"description": "
|
|
225
|
-
"inheritedFrom": {
|
|
226
|
-
"name": "Buttonsimple",
|
|
227
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
228
|
-
}
|
|
105
|
+
"description": "Create new lotty instance for the loaded data"
|
|
229
106
|
},
|
|
230
107
|
{
|
|
231
108
|
"kind": "method",
|
|
232
|
-
"name": "
|
|
109
|
+
"name": "onLoadFailHandler",
|
|
233
110
|
"privacy": "private",
|
|
234
111
|
"parameters": [
|
|
235
112
|
{
|
|
236
|
-
"name": "
|
|
237
|
-
"type": {
|
|
238
|
-
"text": "HTMLElement"
|
|
239
|
-
},
|
|
240
|
-
"description": "The button element."
|
|
241
|
-
},
|
|
242
|
-
{
|
|
243
|
-
"name": "softDisabled",
|
|
244
|
-
"optional": true,
|
|
113
|
+
"name": "error",
|
|
245
114
|
"type": {
|
|
246
|
-
"text": "
|
|
247
|
-
}
|
|
248
|
-
"description": "The soft-disabled state."
|
|
115
|
+
"text": "Error"
|
|
116
|
+
}
|
|
249
117
|
}
|
|
250
118
|
],
|
|
251
|
-
"description": "
|
|
252
|
-
"inheritedFrom": {
|
|
253
|
-
"name": "Buttonsimple",
|
|
254
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
255
|
-
}
|
|
119
|
+
"description": "Error handler for animation loading"
|
|
256
120
|
},
|
|
257
121
|
{
|
|
258
122
|
"kind": "method",
|
|
259
|
-
"name": "
|
|
123
|
+
"name": "getAnimationData",
|
|
260
124
|
"privacy": "private",
|
|
261
|
-
"
|
|
262
|
-
{
|
|
263
|
-
"name": "element",
|
|
264
|
-
"type": {
|
|
265
|
-
"text": "HTMLElement"
|
|
266
|
-
},
|
|
267
|
-
"description": "The button element."
|
|
268
|
-
},
|
|
269
|
-
{
|
|
270
|
-
"name": "disabled",
|
|
271
|
-
"type": {
|
|
272
|
-
"text": "boolean"
|
|
273
|
-
},
|
|
274
|
-
"description": "The disabled state."
|
|
275
|
-
}
|
|
276
|
-
],
|
|
277
|
-
"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.",
|
|
278
|
-
"inheritedFrom": {
|
|
279
|
-
"name": "Buttonsimple",
|
|
280
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
281
|
-
}
|
|
282
|
-
},
|
|
283
|
-
{
|
|
284
|
-
"kind": "method",
|
|
285
|
-
"name": "triggerClickEvent",
|
|
286
|
-
"privacy": "private",
|
|
287
|
-
"inheritedFrom": {
|
|
288
|
-
"name": "Buttonsimple",
|
|
289
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
290
|
-
}
|
|
291
|
-
},
|
|
292
|
-
{
|
|
293
|
-
"kind": "method",
|
|
294
|
-
"name": "handleBlur",
|
|
295
|
-
"privacy": "private",
|
|
296
|
-
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
|
297
|
-
"inheritedFrom": {
|
|
298
|
-
"name": "Buttonsimple",
|
|
299
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
300
|
-
}
|
|
301
|
-
},
|
|
302
|
-
{
|
|
303
|
-
"kind": "method",
|
|
304
|
-
"name": "handleKeyDown",
|
|
305
|
-
"privacy": "private",
|
|
306
|
-
"parameters": [
|
|
307
|
-
{
|
|
308
|
-
"name": "event",
|
|
309
|
-
"type": {
|
|
310
|
-
"text": "KeyboardEvent"
|
|
311
|
-
},
|
|
312
|
-
"description": "The keyboard event."
|
|
313
|
-
}
|
|
314
|
-
],
|
|
315
|
-
"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.",
|
|
316
|
-
"inheritedFrom": {
|
|
317
|
-
"name": "Buttonsimple",
|
|
318
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
319
|
-
}
|
|
125
|
+
"description": "Import animation data dynamically"
|
|
320
126
|
},
|
|
321
127
|
{
|
|
322
|
-
"kind": "
|
|
323
|
-
"name": "
|
|
324
|
-
"
|
|
325
|
-
"parameters": [
|
|
326
|
-
{
|
|
327
|
-
"name": "event",
|
|
328
|
-
"type": {
|
|
329
|
-
"text": "KeyboardEvent"
|
|
330
|
-
},
|
|
331
|
-
"description": "The keyboard event."
|
|
332
|
-
}
|
|
333
|
-
],
|
|
334
|
-
"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.",
|
|
335
|
-
"inheritedFrom": {
|
|
336
|
-
"name": "Buttonsimple",
|
|
337
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
338
|
-
}
|
|
128
|
+
"kind": "field",
|
|
129
|
+
"name": "onCompleteHandler",
|
|
130
|
+
"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."
|
|
339
131
|
}
|
|
340
132
|
],
|
|
341
|
-
"
|
|
133
|
+
"events": [
|
|
342
134
|
{
|
|
343
|
-
"name": "
|
|
135
|
+
"name": "load",
|
|
344
136
|
"type": {
|
|
345
|
-
"text": "
|
|
137
|
+
"text": "CustomEvent"
|
|
346
138
|
},
|
|
347
|
-
"description": "
|
|
348
|
-
"
|
|
349
|
-
"fieldName": "variant"
|
|
139
|
+
"description": "(React: onLoad) This event is dispatched when the animation is loaded",
|
|
140
|
+
"reactName": "onLoad"
|
|
350
141
|
},
|
|
351
142
|
{
|
|
352
|
-
"
|
|
353
|
-
"
|
|
354
|
-
|
|
355
|
-
},
|
|
356
|
-
"default": "''",
|
|
357
|
-
"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.",
|
|
358
|
-
"fieldName": "label"
|
|
143
|
+
"description": "(React: onComplete) This event is dispatched when all animation loops completed",
|
|
144
|
+
"name": "complete",
|
|
145
|
+
"reactName": "onComplete"
|
|
359
146
|
},
|
|
360
147
|
{
|
|
361
|
-
"
|
|
362
|
-
"
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
"fieldName": "autofocus",
|
|
368
|
-
"inheritedFrom": {
|
|
369
|
-
"name": "AutoFocusMixin",
|
|
370
|
-
"module": "src/utils/mixins/AutoFocusMixin.ts"
|
|
371
|
-
}
|
|
372
|
-
},
|
|
148
|
+
"description": "(React: onError) This event is dispatched when animation loading failed",
|
|
149
|
+
"name": "error",
|
|
150
|
+
"reactName": "onError"
|
|
151
|
+
}
|
|
152
|
+
],
|
|
153
|
+
"attributes": [
|
|
373
154
|
{
|
|
374
|
-
"name": "
|
|
155
|
+
"name": "name",
|
|
375
156
|
"type": {
|
|
376
|
-
"text": "
|
|
157
|
+
"text": "AnimationNames | undefined"
|
|
377
158
|
},
|
|
378
|
-
"
|
|
379
|
-
"
|
|
380
|
-
"fieldName": "tabIndex",
|
|
381
|
-
"inheritedFrom": {
|
|
382
|
-
"name": "TabIndexMixin",
|
|
383
|
-
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
384
|
-
}
|
|
159
|
+
"description": "Name of the animation (= filename)",
|
|
160
|
+
"fieldName": "name"
|
|
385
161
|
},
|
|
386
162
|
{
|
|
387
|
-
"name": "
|
|
163
|
+
"name": "loop",
|
|
388
164
|
"type": {
|
|
389
|
-
"text": "
|
|
165
|
+
"text": "LoopType | undefined"
|
|
390
166
|
},
|
|
391
|
-
"description": "
|
|
392
|
-
"
|
|
393
|
-
"fieldName": "disabled",
|
|
394
|
-
"inheritedFrom": {
|
|
395
|
-
"name": "DisabledMixin",
|
|
396
|
-
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
397
|
-
}
|
|
167
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
168
|
+
"fieldName": "loop"
|
|
398
169
|
},
|
|
399
170
|
{
|
|
400
|
-
"name": "
|
|
171
|
+
"name": "autoplay",
|
|
401
172
|
"type": {
|
|
402
173
|
"text": "boolean | undefined"
|
|
403
174
|
},
|
|
404
|
-
"description": "
|
|
405
|
-
"
|
|
406
|
-
"fieldName": "active",
|
|
407
|
-
"inheritedFrom": {
|
|
408
|
-
"name": "Buttonsimple",
|
|
409
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
410
|
-
}
|
|
175
|
+
"description": "Weather start the animation automatically",
|
|
176
|
+
"fieldName": "autoplay"
|
|
411
177
|
},
|
|
412
178
|
{
|
|
413
|
-
"name": "
|
|
179
|
+
"name": "aria-label",
|
|
414
180
|
"type": {
|
|
415
|
-
"text": "
|
|
181
|
+
"text": "string | null"
|
|
416
182
|
},
|
|
417
|
-
"
|
|
418
|
-
"
|
|
419
|
-
"fieldName": "
|
|
420
|
-
"inheritedFrom": {
|
|
421
|
-
"name": "Buttonsimple",
|
|
422
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
423
|
-
}
|
|
183
|
+
"default": "null",
|
|
184
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
185
|
+
"fieldName": "ariaLabel"
|
|
424
186
|
},
|
|
425
187
|
{
|
|
426
|
-
"name": "
|
|
188
|
+
"name": "aria-labelledby",
|
|
427
189
|
"type": {
|
|
428
|
-
"text": "
|
|
190
|
+
"text": "string | null"
|
|
429
191
|
},
|
|
430
|
-
"
|
|
431
|
-
"
|
|
432
|
-
"fieldName": "
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
192
|
+
"default": "null",
|
|
193
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
194
|
+
"fieldName": "ariaLabelledBy"
|
|
195
|
+
}
|
|
196
|
+
],
|
|
197
|
+
"superclass": {
|
|
198
|
+
"name": "Component",
|
|
199
|
+
"module": "/src/models"
|
|
200
|
+
},
|
|
201
|
+
"tagName": "mdc-animation",
|
|
202
|
+
"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 */",
|
|
203
|
+
"customElement": true
|
|
204
|
+
}
|
|
205
|
+
],
|
|
206
|
+
"exports": [
|
|
207
|
+
{
|
|
208
|
+
"kind": "js",
|
|
209
|
+
"name": "default",
|
|
210
|
+
"declaration": {
|
|
211
|
+
"name": "Animation",
|
|
212
|
+
"module": "components/animation/animation.component.js"
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
]
|
|
216
|
+
},
|
|
217
|
+
{
|
|
218
|
+
"kind": "javascript-module",
|
|
219
|
+
"path": "components/appheader/appheader.component.js",
|
|
220
|
+
"declarations": [
|
|
221
|
+
{
|
|
222
|
+
"kind": "class",
|
|
223
|
+
"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**.",
|
|
224
|
+
"name": "Appheader",
|
|
225
|
+
"cssParts": [
|
|
226
|
+
{
|
|
227
|
+
"description": "The main container for styling the header.",
|
|
228
|
+
"name": "container"
|
|
437
229
|
},
|
|
438
230
|
{
|
|
439
|
-
"
|
|
440
|
-
"
|
|
441
|
-
"default": "button",
|
|
442
|
-
"fieldName": "role",
|
|
443
|
-
"inheritedFrom": {
|
|
444
|
-
"name": "Buttonsimple",
|
|
445
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
446
|
-
}
|
|
231
|
+
"description": "The leading section of the header.",
|
|
232
|
+
"name": "leading-section"
|
|
447
233
|
},
|
|
448
234
|
{
|
|
449
|
-
"
|
|
450
|
-
"
|
|
451
|
-
"text": "string | undefined"
|
|
452
|
-
},
|
|
453
|
-
"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`",
|
|
454
|
-
"default": "'aria-pressed' (when)",
|
|
455
|
-
"fieldName": "ariaStateKey",
|
|
456
|
-
"inheritedFrom": {
|
|
457
|
-
"name": "Buttonsimple",
|
|
458
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
459
|
-
}
|
|
235
|
+
"description": "The center section of the header.",
|
|
236
|
+
"name": "center-section"
|
|
460
237
|
},
|
|
461
238
|
{
|
|
462
|
-
"
|
|
463
|
-
"
|
|
464
|
-
"text": "ButtonType"
|
|
465
|
-
},
|
|
466
|
-
"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.",
|
|
467
|
-
"default": "button",
|
|
468
|
-
"fieldName": "type",
|
|
469
|
-
"inheritedFrom": {
|
|
470
|
-
"name": "Buttonsimple",
|
|
471
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
472
|
-
}
|
|
239
|
+
"description": "The trailing section of the header.",
|
|
240
|
+
"name": "trailing-section"
|
|
473
241
|
}
|
|
474
242
|
],
|
|
475
|
-
"
|
|
476
|
-
"name": "Buttonsimple",
|
|
477
|
-
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
478
|
-
},
|
|
479
|
-
"tagName": "mdc-alertchip",
|
|
480
|
-
"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 * @csspart icon - The alert icon\n * @csspart label - The text label of the alertchip\n */",
|
|
481
|
-
"customElement": true,
|
|
482
|
-
"events": [
|
|
483
|
-
{
|
|
484
|
-
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
|
485
|
-
"name": "click",
|
|
486
|
-
"reactName": "onClick",
|
|
487
|
-
"inheritedFrom": {
|
|
488
|
-
"name": "Buttonsimple",
|
|
489
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
490
|
-
}
|
|
491
|
-
},
|
|
243
|
+
"slots": [
|
|
492
244
|
{
|
|
493
|
-
"description": "
|
|
494
|
-
"name": "
|
|
495
|
-
"reactName": "onKeyDown",
|
|
496
|
-
"inheritedFrom": {
|
|
497
|
-
"name": "Buttonsimple",
|
|
498
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
499
|
-
}
|
|
245
|
+
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
246
|
+
"name": "leading"
|
|
500
247
|
},
|
|
501
248
|
{
|
|
502
|
-
"description": "
|
|
503
|
-
"name": "
|
|
504
|
-
"reactName": "onKeyUp",
|
|
505
|
-
"inheritedFrom": {
|
|
506
|
-
"name": "Buttonsimple",
|
|
507
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
508
|
-
}
|
|
249
|
+
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
250
|
+
"name": "center"
|
|
509
251
|
},
|
|
510
252
|
{
|
|
511
|
-
"description": "
|
|
512
|
-
"name": "
|
|
513
|
-
"reactName": "onFocus",
|
|
514
|
-
"inheritedFrom": {
|
|
515
|
-
"name": "Buttonsimple",
|
|
516
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
517
|
-
}
|
|
253
|
+
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
254
|
+
"name": "trailing"
|
|
518
255
|
}
|
|
519
|
-
]
|
|
256
|
+
],
|
|
257
|
+
"members": [],
|
|
258
|
+
"superclass": {
|
|
259
|
+
"name": "Component",
|
|
260
|
+
"module": "/src/models"
|
|
261
|
+
},
|
|
262
|
+
"tagName": "mdc-appheader",
|
|
263
|
+
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
|
264
|
+
"customElement": true
|
|
520
265
|
}
|
|
521
266
|
],
|
|
522
267
|
"exports": [
|
|
@@ -524,272 +269,527 @@
|
|
|
524
269
|
"kind": "js",
|
|
525
270
|
"name": "default",
|
|
526
271
|
"declaration": {
|
|
527
|
-
"name": "
|
|
528
|
-
"module": "components/
|
|
272
|
+
"name": "Appheader",
|
|
273
|
+
"module": "components/appheader/appheader.component.js"
|
|
529
274
|
}
|
|
530
275
|
}
|
|
531
276
|
]
|
|
532
277
|
},
|
|
533
278
|
{
|
|
534
279
|
"kind": "javascript-module",
|
|
535
|
-
"path": "components/
|
|
280
|
+
"path": "components/alertchip/alertchip.component.js",
|
|
536
281
|
"declarations": [
|
|
537
282
|
{
|
|
538
283
|
"kind": "class",
|
|
539
|
-
"description": "
|
|
540
|
-
"name": "
|
|
284
|
+
"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.",
|
|
285
|
+
"name": "AlertChip",
|
|
286
|
+
"cssProperties": [
|
|
287
|
+
{
|
|
288
|
+
"description": "The color of the label text",
|
|
289
|
+
"name": "--mdc-chip-color"
|
|
290
|
+
},
|
|
291
|
+
{
|
|
292
|
+
"description": "The color of the icon",
|
|
293
|
+
"name": "--mdc-chip-icon-color"
|
|
294
|
+
},
|
|
295
|
+
{
|
|
296
|
+
"description": "The border color of the alertchip",
|
|
297
|
+
"name": "--mdc-chip-border-color"
|
|
298
|
+
},
|
|
299
|
+
{
|
|
300
|
+
"description": "The background color of the alertchip",
|
|
301
|
+
"name": "--mdc-chip-background-color"
|
|
302
|
+
}
|
|
303
|
+
],
|
|
304
|
+
"cssParts": [
|
|
305
|
+
{
|
|
306
|
+
"description": "The alert icon",
|
|
307
|
+
"name": "icon"
|
|
308
|
+
},
|
|
309
|
+
{
|
|
310
|
+
"description": "The text label of the alertchip",
|
|
311
|
+
"name": "label"
|
|
312
|
+
}
|
|
313
|
+
],
|
|
541
314
|
"members": [
|
|
542
315
|
{
|
|
543
316
|
"kind": "field",
|
|
544
|
-
"name": "
|
|
317
|
+
"name": "variant",
|
|
545
318
|
"type": {
|
|
546
|
-
"text": "
|
|
319
|
+
"text": "VariantType"
|
|
547
320
|
},
|
|
548
|
-
"description": "
|
|
549
|
-
"
|
|
550
|
-
"
|
|
321
|
+
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
322
|
+
"default": "neutral",
|
|
323
|
+
"attribute": "variant"
|
|
551
324
|
},
|
|
552
325
|
{
|
|
553
326
|
"kind": "field",
|
|
554
|
-
"name": "
|
|
327
|
+
"name": "label",
|
|
555
328
|
"type": {
|
|
556
|
-
"text": "
|
|
329
|
+
"text": "string"
|
|
557
330
|
},
|
|
558
|
-
"
|
|
559
|
-
"
|
|
560
|
-
"
|
|
331
|
+
"default": "''",
|
|
332
|
+
"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.",
|
|
333
|
+
"attribute": "label"
|
|
561
334
|
},
|
|
562
335
|
{
|
|
563
336
|
"kind": "field",
|
|
564
|
-
"name": "
|
|
337
|
+
"name": "autofocus",
|
|
338
|
+
"type": {
|
|
339
|
+
"text": "boolean"
|
|
340
|
+
},
|
|
341
|
+
"default": "false",
|
|
342
|
+
"description": "This property indicates whether the element should receive focus automatically when it is rendered.",
|
|
343
|
+
"attribute": "autofocus",
|
|
344
|
+
"reflects": true,
|
|
345
|
+
"inheritedFrom": {
|
|
346
|
+
"name": "AutoFocusMixin",
|
|
347
|
+
"module": "utils/mixins/AutoFocusMixin.js"
|
|
348
|
+
}
|
|
349
|
+
},
|
|
350
|
+
{
|
|
351
|
+
"kind": "field",
|
|
352
|
+
"name": "tabIndex",
|
|
353
|
+
"type": {
|
|
354
|
+
"text": "number"
|
|
355
|
+
},
|
|
356
|
+
"default": "0",
|
|
357
|
+
"description": "This property specifies the tab order of the element.",
|
|
358
|
+
"attribute": "tabIndex",
|
|
359
|
+
"reflects": true,
|
|
360
|
+
"inheritedFrom": {
|
|
361
|
+
"name": "TabIndexMixin",
|
|
362
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
363
|
+
}
|
|
364
|
+
},
|
|
365
|
+
{
|
|
366
|
+
"kind": "field",
|
|
367
|
+
"name": "disabled",
|
|
565
368
|
"type": {
|
|
566
369
|
"text": "boolean | undefined"
|
|
567
370
|
},
|
|
568
|
-
"description": "
|
|
569
|
-
"
|
|
570
|
-
"
|
|
371
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
372
|
+
"default": "undefined",
|
|
373
|
+
"attribute": "disabled",
|
|
374
|
+
"reflects": true,
|
|
375
|
+
"inheritedFrom": {
|
|
376
|
+
"name": "DisabledMixin",
|
|
377
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
378
|
+
}
|
|
379
|
+
},
|
|
380
|
+
{
|
|
381
|
+
"kind": "field",
|
|
382
|
+
"name": "active",
|
|
383
|
+
"type": {
|
|
384
|
+
"text": "boolean | undefined"
|
|
385
|
+
},
|
|
386
|
+
"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.",
|
|
387
|
+
"default": "undefined",
|
|
388
|
+
"attribute": "active",
|
|
389
|
+
"reflects": true,
|
|
390
|
+
"inheritedFrom": {
|
|
391
|
+
"name": "Buttonsimple",
|
|
392
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
393
|
+
}
|
|
394
|
+
},
|
|
395
|
+
{
|
|
396
|
+
"kind": "field",
|
|
397
|
+
"name": "softDisabled",
|
|
398
|
+
"type": {
|
|
399
|
+
"text": "boolean | undefined"
|
|
400
|
+
},
|
|
401
|
+
"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.",
|
|
402
|
+
"default": "undefined",
|
|
403
|
+
"attribute": "soft-disabled",
|
|
404
|
+
"reflects": true,
|
|
405
|
+
"inheritedFrom": {
|
|
406
|
+
"name": "Buttonsimple",
|
|
407
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
408
|
+
}
|
|
571
409
|
},
|
|
572
410
|
{
|
|
573
411
|
"kind": "field",
|
|
574
|
-
"name": "
|
|
412
|
+
"name": "size",
|
|
575
413
|
"type": {
|
|
576
|
-
"text": "
|
|
414
|
+
"text": "ButtonSize"
|
|
577
415
|
},
|
|
578
|
-
"
|
|
579
|
-
"
|
|
580
|
-
"attribute": "
|
|
416
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
417
|
+
"default": "32",
|
|
418
|
+
"attribute": "size",
|
|
419
|
+
"reflects": true,
|
|
420
|
+
"inheritedFrom": {
|
|
421
|
+
"name": "Buttonsimple",
|
|
422
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
423
|
+
}
|
|
581
424
|
},
|
|
582
425
|
{
|
|
583
426
|
"kind": "field",
|
|
584
|
-
"name": "
|
|
585
|
-
"
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
"
|
|
589
|
-
"
|
|
590
|
-
|
|
427
|
+
"name": "role",
|
|
428
|
+
"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.",
|
|
429
|
+
"default": "button",
|
|
430
|
+
"attribute": "role",
|
|
431
|
+
"reflects": true,
|
|
432
|
+
"inheritedFrom": {
|
|
433
|
+
"name": "Buttonsimple",
|
|
434
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
435
|
+
}
|
|
591
436
|
},
|
|
592
437
|
{
|
|
593
438
|
"kind": "field",
|
|
594
|
-
"name": "
|
|
439
|
+
"name": "ariaStateKey",
|
|
595
440
|
"type": {
|
|
596
|
-
"text": "
|
|
441
|
+
"text": "string | undefined"
|
|
597
442
|
},
|
|
598
|
-
"
|
|
599
|
-
"
|
|
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
|
+
"attribute": "ariaStateKey",
|
|
446
|
+
"reflects": true,
|
|
447
|
+
"inheritedFrom": {
|
|
448
|
+
"name": "Buttonsimple",
|
|
449
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
450
|
+
}
|
|
600
451
|
},
|
|
601
452
|
{
|
|
602
453
|
"kind": "field",
|
|
603
|
-
"name": "
|
|
454
|
+
"name": "type",
|
|
604
455
|
"type": {
|
|
605
|
-
"text": "
|
|
456
|
+
"text": "ButtonType"
|
|
606
457
|
},
|
|
607
|
-
"
|
|
608
|
-
"
|
|
458
|
+
"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.",
|
|
459
|
+
"default": "button",
|
|
460
|
+
"attribute": "type",
|
|
461
|
+
"reflects": true,
|
|
462
|
+
"inheritedFrom": {
|
|
463
|
+
"name": "Buttonsimple",
|
|
464
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
465
|
+
}
|
|
609
466
|
},
|
|
610
467
|
{
|
|
611
|
-
"kind": "
|
|
612
|
-
"name": "
|
|
613
|
-
"
|
|
614
|
-
"
|
|
468
|
+
"kind": "method",
|
|
469
|
+
"name": "executeAction",
|
|
470
|
+
"privacy": "protected",
|
|
471
|
+
"inheritedFrom": {
|
|
472
|
+
"name": "Buttonsimple",
|
|
473
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
474
|
+
}
|
|
615
475
|
},
|
|
616
476
|
{
|
|
617
477
|
"kind": "method",
|
|
618
|
-
"name": "
|
|
619
|
-
"privacy": "
|
|
478
|
+
"name": "setActive",
|
|
479
|
+
"privacy": "protected",
|
|
480
|
+
"parameters": [
|
|
481
|
+
{
|
|
482
|
+
"name": "element",
|
|
483
|
+
"type": {
|
|
484
|
+
"text": "HTMLElement"
|
|
485
|
+
},
|
|
486
|
+
"description": "The button element"
|
|
487
|
+
},
|
|
488
|
+
{
|
|
489
|
+
"name": "active",
|
|
490
|
+
"optional": true,
|
|
491
|
+
"type": {
|
|
492
|
+
"text": "boolean"
|
|
493
|
+
},
|
|
494
|
+
"description": "The active state of the element"
|
|
495
|
+
}
|
|
496
|
+
],
|
|
497
|
+
"description": "Sets the ariaStateKey attributes based on the active state of the button.",
|
|
498
|
+
"inheritedFrom": {
|
|
499
|
+
"name": "Buttonsimple",
|
|
500
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
501
|
+
}
|
|
620
502
|
},
|
|
621
503
|
{
|
|
622
504
|
"kind": "method",
|
|
623
|
-
"name": "
|
|
505
|
+
"name": "setSoftDisabled",
|
|
624
506
|
"privacy": "private",
|
|
625
507
|
"parameters": [
|
|
626
508
|
{
|
|
627
|
-
"name": "
|
|
509
|
+
"name": "element",
|
|
628
510
|
"type": {
|
|
629
|
-
"text": "
|
|
630
|
-
}
|
|
511
|
+
"text": "HTMLElement"
|
|
512
|
+
},
|
|
513
|
+
"description": "The button element."
|
|
514
|
+
},
|
|
515
|
+
{
|
|
516
|
+
"name": "softDisabled",
|
|
517
|
+
"optional": true,
|
|
518
|
+
"type": {
|
|
519
|
+
"text": "boolean"
|
|
520
|
+
},
|
|
521
|
+
"description": "The soft-disabled state."
|
|
631
522
|
}
|
|
632
523
|
],
|
|
633
|
-
"description": "
|
|
524
|
+
"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.",
|
|
525
|
+
"inheritedFrom": {
|
|
526
|
+
"name": "Buttonsimple",
|
|
527
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
528
|
+
}
|
|
634
529
|
},
|
|
635
530
|
{
|
|
636
531
|
"kind": "method",
|
|
637
|
-
"name": "
|
|
532
|
+
"name": "setDisabled",
|
|
638
533
|
"privacy": "private",
|
|
639
534
|
"parameters": [
|
|
640
535
|
{
|
|
641
|
-
"name": "
|
|
536
|
+
"name": "element",
|
|
642
537
|
"type": {
|
|
643
|
-
"text": "
|
|
644
|
-
}
|
|
538
|
+
"text": "HTMLElement"
|
|
539
|
+
},
|
|
540
|
+
"description": "The button element."
|
|
541
|
+
},
|
|
542
|
+
{
|
|
543
|
+
"name": "disabled",
|
|
544
|
+
"type": {
|
|
545
|
+
"text": "boolean"
|
|
546
|
+
},
|
|
547
|
+
"description": "The disabled state."
|
|
645
548
|
}
|
|
646
549
|
],
|
|
647
|
-
"description": "
|
|
550
|
+
"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.",
|
|
551
|
+
"inheritedFrom": {
|
|
552
|
+
"name": "Buttonsimple",
|
|
553
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
554
|
+
}
|
|
648
555
|
},
|
|
649
556
|
{
|
|
650
557
|
"kind": "method",
|
|
651
|
-
"name": "
|
|
558
|
+
"name": "triggerClickEvent",
|
|
652
559
|
"privacy": "private",
|
|
653
|
-
"
|
|
560
|
+
"inheritedFrom": {
|
|
561
|
+
"name": "Buttonsimple",
|
|
562
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
563
|
+
}
|
|
654
564
|
},
|
|
655
565
|
{
|
|
656
|
-
"kind": "
|
|
657
|
-
"name": "
|
|
658
|
-
"
|
|
566
|
+
"kind": "method",
|
|
567
|
+
"name": "handleBlur",
|
|
568
|
+
"privacy": "private",
|
|
569
|
+
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
|
570
|
+
"inheritedFrom": {
|
|
571
|
+
"name": "Buttonsimple",
|
|
572
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
573
|
+
}
|
|
574
|
+
},
|
|
575
|
+
{
|
|
576
|
+
"kind": "method",
|
|
577
|
+
"name": "handleKeyDown",
|
|
578
|
+
"privacy": "private",
|
|
579
|
+
"parameters": [
|
|
580
|
+
{
|
|
581
|
+
"name": "event",
|
|
582
|
+
"type": {
|
|
583
|
+
"text": "KeyboardEvent"
|
|
584
|
+
},
|
|
585
|
+
"description": "The keyboard event."
|
|
586
|
+
}
|
|
587
|
+
],
|
|
588
|
+
"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.",
|
|
589
|
+
"inheritedFrom": {
|
|
590
|
+
"name": "Buttonsimple",
|
|
591
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
592
|
+
}
|
|
593
|
+
},
|
|
594
|
+
{
|
|
595
|
+
"kind": "method",
|
|
596
|
+
"name": "handleKeyUp",
|
|
597
|
+
"privacy": "private",
|
|
598
|
+
"parameters": [
|
|
599
|
+
{
|
|
600
|
+
"name": "event",
|
|
601
|
+
"type": {
|
|
602
|
+
"text": "KeyboardEvent"
|
|
603
|
+
},
|
|
604
|
+
"description": "The keyboard event."
|
|
605
|
+
}
|
|
606
|
+
],
|
|
607
|
+
"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.",
|
|
608
|
+
"inheritedFrom": {
|
|
609
|
+
"name": "Buttonsimple",
|
|
610
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
611
|
+
}
|
|
659
612
|
}
|
|
660
613
|
],
|
|
661
|
-
"
|
|
614
|
+
"attributes": [
|
|
662
615
|
{
|
|
663
|
-
"name": "
|
|
616
|
+
"name": "variant",
|
|
664
617
|
"type": {
|
|
665
|
-
"text": "
|
|
618
|
+
"text": "VariantType"
|
|
666
619
|
},
|
|
667
|
-
"description": "
|
|
668
|
-
"
|
|
620
|
+
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
621
|
+
"default": "neutral",
|
|
622
|
+
"fieldName": "variant"
|
|
669
623
|
},
|
|
670
624
|
{
|
|
671
|
-
"
|
|
672
|
-
"
|
|
673
|
-
|
|
625
|
+
"name": "label",
|
|
626
|
+
"type": {
|
|
627
|
+
"text": "string"
|
|
628
|
+
},
|
|
629
|
+
"default": "''",
|
|
630
|
+
"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.",
|
|
631
|
+
"fieldName": "label"
|
|
674
632
|
},
|
|
675
633
|
{
|
|
676
|
-
"
|
|
677
|
-
"
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
634
|
+
"name": "autofocus",
|
|
635
|
+
"type": {
|
|
636
|
+
"text": "boolean"
|
|
637
|
+
},
|
|
638
|
+
"default": "false",
|
|
639
|
+
"description": "This property indicates whether the element should receive focus automatically when it is rendered.",
|
|
640
|
+
"fieldName": "autofocus",
|
|
641
|
+
"inheritedFrom": {
|
|
642
|
+
"name": "AutoFocusMixin",
|
|
643
|
+
"module": "src/utils/mixins/AutoFocusMixin.ts"
|
|
644
|
+
}
|
|
645
|
+
},
|
|
646
|
+
{
|
|
647
|
+
"name": "tabIndex",
|
|
648
|
+
"type": {
|
|
649
|
+
"text": "number"
|
|
650
|
+
},
|
|
651
|
+
"default": "0",
|
|
652
|
+
"description": "This property specifies the tab order of the element.",
|
|
653
|
+
"fieldName": "tabIndex",
|
|
654
|
+
"inheritedFrom": {
|
|
655
|
+
"name": "TabIndexMixin",
|
|
656
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
657
|
+
}
|
|
658
|
+
},
|
|
682
659
|
{
|
|
683
|
-
"name": "
|
|
660
|
+
"name": "disabled",
|
|
684
661
|
"type": {
|
|
685
|
-
"text": "
|
|
662
|
+
"text": "boolean | undefined"
|
|
686
663
|
},
|
|
687
|
-
"description": "
|
|
688
|
-
"
|
|
664
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
665
|
+
"default": "undefined",
|
|
666
|
+
"fieldName": "disabled",
|
|
667
|
+
"inheritedFrom": {
|
|
668
|
+
"name": "DisabledMixin",
|
|
669
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
670
|
+
}
|
|
689
671
|
},
|
|
690
672
|
{
|
|
691
|
-
"name": "
|
|
673
|
+
"name": "active",
|
|
692
674
|
"type": {
|
|
693
|
-
"text": "
|
|
675
|
+
"text": "boolean | undefined"
|
|
694
676
|
},
|
|
695
|
-
"description": "
|
|
696
|
-
"
|
|
677
|
+
"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.",
|
|
678
|
+
"default": "undefined",
|
|
679
|
+
"fieldName": "active",
|
|
680
|
+
"inheritedFrom": {
|
|
681
|
+
"name": "Buttonsimple",
|
|
682
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
683
|
+
}
|
|
697
684
|
},
|
|
698
685
|
{
|
|
699
|
-
"name": "
|
|
686
|
+
"name": "soft-disabled",
|
|
700
687
|
"type": {
|
|
701
688
|
"text": "boolean | undefined"
|
|
702
689
|
},
|
|
703
|
-
"description": "
|
|
704
|
-
"
|
|
690
|
+
"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.",
|
|
691
|
+
"default": "undefined",
|
|
692
|
+
"fieldName": "softDisabled",
|
|
693
|
+
"inheritedFrom": {
|
|
694
|
+
"name": "Buttonsimple",
|
|
695
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
696
|
+
}
|
|
705
697
|
},
|
|
706
698
|
{
|
|
707
|
-
"name": "
|
|
699
|
+
"name": "size",
|
|
708
700
|
"type": {
|
|
709
|
-
"text": "
|
|
701
|
+
"text": "ButtonSize"
|
|
710
702
|
},
|
|
711
|
-
"
|
|
712
|
-
"
|
|
713
|
-
"fieldName": "
|
|
703
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
704
|
+
"default": "32",
|
|
705
|
+
"fieldName": "size",
|
|
706
|
+
"inheritedFrom": {
|
|
707
|
+
"name": "Buttonsimple",
|
|
708
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
709
|
+
}
|
|
714
710
|
},
|
|
715
711
|
{
|
|
716
|
-
"name": "
|
|
712
|
+
"name": "role",
|
|
713
|
+
"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.",
|
|
714
|
+
"default": "button",
|
|
715
|
+
"fieldName": "role",
|
|
716
|
+
"inheritedFrom": {
|
|
717
|
+
"name": "Buttonsimple",
|
|
718
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
719
|
+
}
|
|
720
|
+
},
|
|
721
|
+
{
|
|
722
|
+
"name": "ariaStateKey",
|
|
717
723
|
"type": {
|
|
718
|
-
"text": "string |
|
|
724
|
+
"text": "string | undefined"
|
|
719
725
|
},
|
|
720
|
-
"
|
|
721
|
-
"
|
|
722
|
-
"fieldName": "
|
|
726
|
+
"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`",
|
|
727
|
+
"default": "'aria-pressed' (when)",
|
|
728
|
+
"fieldName": "ariaStateKey",
|
|
729
|
+
"inheritedFrom": {
|
|
730
|
+
"name": "Buttonsimple",
|
|
731
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
732
|
+
}
|
|
733
|
+
},
|
|
734
|
+
{
|
|
735
|
+
"name": "type",
|
|
736
|
+
"type": {
|
|
737
|
+
"text": "ButtonType"
|
|
738
|
+
},
|
|
739
|
+
"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.",
|
|
740
|
+
"default": "button",
|
|
741
|
+
"fieldName": "type",
|
|
742
|
+
"inheritedFrom": {
|
|
743
|
+
"name": "Buttonsimple",
|
|
744
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
745
|
+
}
|
|
723
746
|
}
|
|
724
747
|
],
|
|
725
748
|
"superclass": {
|
|
726
|
-
"name": "
|
|
727
|
-
"module": "/src/
|
|
749
|
+
"name": "Buttonsimple",
|
|
750
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
728
751
|
},
|
|
729
|
-
"tagName": "mdc-
|
|
730
|
-
"jsDoc": "/**\n *
|
|
731
|
-
"customElement": true
|
|
732
|
-
|
|
733
|
-
],
|
|
734
|
-
"exports": [
|
|
735
|
-
{
|
|
736
|
-
"kind": "js",
|
|
737
|
-
"name": "default",
|
|
738
|
-
"declaration": {
|
|
739
|
-
"name": "Animation",
|
|
740
|
-
"module": "components/animation/animation.component.js"
|
|
741
|
-
}
|
|
742
|
-
}
|
|
743
|
-
]
|
|
744
|
-
},
|
|
745
|
-
{
|
|
746
|
-
"kind": "javascript-module",
|
|
747
|
-
"path": "components/appheader/appheader.component.js",
|
|
748
|
-
"declarations": [
|
|
749
|
-
{
|
|
750
|
-
"kind": "class",
|
|
751
|
-
"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**.",
|
|
752
|
-
"name": "Appheader",
|
|
753
|
-
"cssParts": [
|
|
754
|
-
{
|
|
755
|
-
"description": "The main container for styling the header.",
|
|
756
|
-
"name": "container"
|
|
757
|
-
},
|
|
758
|
-
{
|
|
759
|
-
"description": "The leading section of the header.",
|
|
760
|
-
"name": "leading-section"
|
|
761
|
-
},
|
|
752
|
+
"tagName": "mdc-alertchip",
|
|
753
|
+
"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 * @csspart icon - The alert icon\n * @csspart label - The text label of the alertchip\n */",
|
|
754
|
+
"customElement": true,
|
|
755
|
+
"events": [
|
|
762
756
|
{
|
|
763
|
-
"description": "
|
|
764
|
-
"name": "
|
|
757
|
+
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
|
758
|
+
"name": "click",
|
|
759
|
+
"reactName": "onClick",
|
|
760
|
+
"inheritedFrom": {
|
|
761
|
+
"name": "Buttonsimple",
|
|
762
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
763
|
+
}
|
|
765
764
|
},
|
|
766
765
|
{
|
|
767
|
-
"description": "
|
|
768
|
-
"name": "
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
"name": "leading"
|
|
766
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
|
|
767
|
+
"name": "keydown",
|
|
768
|
+
"reactName": "onKeyDown",
|
|
769
|
+
"inheritedFrom": {
|
|
770
|
+
"name": "Buttonsimple",
|
|
771
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
772
|
+
}
|
|
775
773
|
},
|
|
776
774
|
{
|
|
777
|
-
"description": "
|
|
778
|
-
"name": "
|
|
775
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
|
|
776
|
+
"name": "keyup",
|
|
777
|
+
"reactName": "onKeyUp",
|
|
778
|
+
"inheritedFrom": {
|
|
779
|
+
"name": "Buttonsimple",
|
|
780
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
781
|
+
}
|
|
779
782
|
},
|
|
780
783
|
{
|
|
781
|
-
"description": "
|
|
782
|
-
"name": "
|
|
784
|
+
"description": "(React: onFocus) This event is dispatched when the button receives focus.",
|
|
785
|
+
"name": "focus",
|
|
786
|
+
"reactName": "onFocus",
|
|
787
|
+
"inheritedFrom": {
|
|
788
|
+
"name": "Buttonsimple",
|
|
789
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
790
|
+
}
|
|
783
791
|
}
|
|
784
|
-
]
|
|
785
|
-
"members": [],
|
|
786
|
-
"superclass": {
|
|
787
|
-
"name": "Component",
|
|
788
|
-
"module": "/src/models"
|
|
789
|
-
},
|
|
790
|
-
"tagName": "mdc-appheader",
|
|
791
|
-
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
|
792
|
-
"customElement": true
|
|
792
|
+
]
|
|
793
793
|
}
|
|
794
794
|
],
|
|
795
795
|
"exports": [
|
|
@@ -797,8 +797,8 @@
|
|
|
797
797
|
"kind": "js",
|
|
798
798
|
"name": "default",
|
|
799
799
|
"declaration": {
|
|
800
|
-
"name": "
|
|
801
|
-
"module": "components/
|
|
800
|
+
"name": "AlertChip",
|
|
801
|
+
"module": "components/alertchip/alertchip.component.js"
|
|
802
802
|
}
|
|
803
803
|
}
|
|
804
804
|
]
|
|
@@ -2162,20 +2162,91 @@
|
|
|
2162
2162
|
],
|
|
2163
2163
|
"attributes": [
|
|
2164
2164
|
{
|
|
2165
|
-
"name": "name",
|
|
2165
|
+
"name": "name",
|
|
2166
|
+
"type": {
|
|
2167
|
+
"text": "BrandVisualNames | undefined"
|
|
2168
|
+
},
|
|
2169
|
+
"description": "Name of the brandVisual (= filename)",
|
|
2170
|
+
"fieldName": "name"
|
|
2171
|
+
}
|
|
2172
|
+
],
|
|
2173
|
+
"superclass": {
|
|
2174
|
+
"name": "Component",
|
|
2175
|
+
"module": "/src/models"
|
|
2176
|
+
},
|
|
2177
|
+
"tagName": "mdc-brandvisual",
|
|
2178
|
+
"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 */",
|
|
2179
|
+
"customElement": true
|
|
2180
|
+
}
|
|
2181
|
+
],
|
|
2182
|
+
"exports": [
|
|
2183
|
+
{
|
|
2184
|
+
"kind": "js",
|
|
2185
|
+
"name": "default",
|
|
2186
|
+
"declaration": {
|
|
2187
|
+
"name": "Brandvisual",
|
|
2188
|
+
"module": "components/brandvisual/brandvisual.component.js"
|
|
2189
|
+
}
|
|
2190
|
+
}
|
|
2191
|
+
]
|
|
2192
|
+
},
|
|
2193
|
+
{
|
|
2194
|
+
"kind": "javascript-module",
|
|
2195
|
+
"path": "components/bullet/bullet.component.js",
|
|
2196
|
+
"declarations": [
|
|
2197
|
+
{
|
|
2198
|
+
"kind": "class",
|
|
2199
|
+
"description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
|
|
2200
|
+
"name": "Bullet",
|
|
2201
|
+
"cssProperties": [
|
|
2202
|
+
{
|
|
2203
|
+
"description": "background color of the bullet",
|
|
2204
|
+
"name": "--mdc-bullet-background-color"
|
|
2205
|
+
},
|
|
2206
|
+
{
|
|
2207
|
+
"description": "small size value of the bullet",
|
|
2208
|
+
"name": "--mdc-bullet-size-small"
|
|
2209
|
+
},
|
|
2210
|
+
{
|
|
2211
|
+
"description": "medium size value of the bullet",
|
|
2212
|
+
"name": "--mdc-bullet-size-medium"
|
|
2213
|
+
},
|
|
2214
|
+
{
|
|
2215
|
+
"description": "large size value of the bullet",
|
|
2216
|
+
"name": "--mdc-bullet-size-large"
|
|
2217
|
+
}
|
|
2218
|
+
],
|
|
2219
|
+
"members": [
|
|
2220
|
+
{
|
|
2221
|
+
"kind": "field",
|
|
2222
|
+
"name": "size",
|
|
2223
|
+
"type": {
|
|
2224
|
+
"text": "Size"
|
|
2225
|
+
},
|
|
2226
|
+
"privacy": "public",
|
|
2227
|
+
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
2228
|
+
"default": "small",
|
|
2229
|
+
"attribute": "size",
|
|
2230
|
+
"reflects": true
|
|
2231
|
+
}
|
|
2232
|
+
],
|
|
2233
|
+
"attributes": [
|
|
2234
|
+
{
|
|
2235
|
+
"name": "size",
|
|
2166
2236
|
"type": {
|
|
2167
|
-
"text": "
|
|
2237
|
+
"text": "Size"
|
|
2168
2238
|
},
|
|
2169
|
-
"description": "
|
|
2170
|
-
"
|
|
2239
|
+
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
2240
|
+
"default": "small",
|
|
2241
|
+
"fieldName": "size"
|
|
2171
2242
|
}
|
|
2172
2243
|
],
|
|
2173
2244
|
"superclass": {
|
|
2174
2245
|
"name": "Component",
|
|
2175
2246
|
"module": "/src/models"
|
|
2176
2247
|
},
|
|
2177
|
-
"tagName": "mdc-
|
|
2178
|
-
"jsDoc": "/**\n *
|
|
2248
|
+
"tagName": "mdc-bullet",
|
|
2249
|
+
"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 */",
|
|
2179
2250
|
"customElement": true
|
|
2180
2251
|
}
|
|
2181
2252
|
],
|
|
@@ -2184,69 +2255,130 @@
|
|
|
2184
2255
|
"kind": "js",
|
|
2185
2256
|
"name": "default",
|
|
2186
2257
|
"declaration": {
|
|
2187
|
-
"name": "
|
|
2188
|
-
"module": "components/
|
|
2258
|
+
"name": "Bullet",
|
|
2259
|
+
"module": "components/bullet/bullet.component.js"
|
|
2189
2260
|
}
|
|
2190
2261
|
}
|
|
2191
2262
|
]
|
|
2192
2263
|
},
|
|
2193
2264
|
{
|
|
2194
2265
|
"kind": "javascript-module",
|
|
2195
|
-
"path": "components/
|
|
2266
|
+
"path": "components/buttongroup/buttongroup.component.js",
|
|
2196
2267
|
"declarations": [
|
|
2197
2268
|
{
|
|
2198
2269
|
"kind": "class",
|
|
2199
|
-
"description": "
|
|
2200
|
-
"name": "
|
|
2270
|
+
"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.",
|
|
2271
|
+
"name": "ButtonGroup",
|
|
2201
2272
|
"cssProperties": [
|
|
2202
2273
|
{
|
|
2203
|
-
"description": "
|
|
2204
|
-
"name": "--mdc-
|
|
2274
|
+
"description": "The border radius of the buttongroup",
|
|
2275
|
+
"name": "--mdc-buttongroup-border-radius"
|
|
2205
2276
|
},
|
|
2206
2277
|
{
|
|
2207
|
-
"description": "
|
|
2208
|
-
"name": "--mdc-
|
|
2278
|
+
"description": "The border color of the buttongroup",
|
|
2279
|
+
"name": "--mdc-buttongroup-border-color"
|
|
2209
2280
|
},
|
|
2210
2281
|
{
|
|
2211
|
-
"description": "
|
|
2212
|
-
"name": "--mdc-
|
|
2213
|
-
}
|
|
2282
|
+
"description": "The color of the divider between buttons within the buttongroup",
|
|
2283
|
+
"name": "--mdc-buttongroup-divider-color"
|
|
2284
|
+
}
|
|
2285
|
+
],
|
|
2286
|
+
"slots": [
|
|
2214
2287
|
{
|
|
2215
|
-
"description": "
|
|
2216
|
-
"name": "
|
|
2288
|
+
"description": "This is a default/unnamed slot, which contains the buttons",
|
|
2289
|
+
"name": "default"
|
|
2217
2290
|
}
|
|
2218
2291
|
],
|
|
2219
2292
|
"members": [
|
|
2293
|
+
{
|
|
2294
|
+
"kind": "field",
|
|
2295
|
+
"name": "orientation",
|
|
2296
|
+
"type": {
|
|
2297
|
+
"text": "ButtonGroupOrientation"
|
|
2298
|
+
},
|
|
2299
|
+
"description": "Orientation of the buttongroup.",
|
|
2300
|
+
"default": "'horizontal'",
|
|
2301
|
+
"attribute": "orientation",
|
|
2302
|
+
"reflects": true
|
|
2303
|
+
},
|
|
2304
|
+
{
|
|
2305
|
+
"kind": "field",
|
|
2306
|
+
"name": "variant",
|
|
2307
|
+
"type": {
|
|
2308
|
+
"text": "ButtonGroupVariant"
|
|
2309
|
+
},
|
|
2310
|
+
"description": "Variant of the buttons within the buttongroup.",
|
|
2311
|
+
"default": "'primary'",
|
|
2312
|
+
"attribute": "variant",
|
|
2313
|
+
"reflects": true
|
|
2314
|
+
},
|
|
2220
2315
|
{
|
|
2221
2316
|
"kind": "field",
|
|
2222
2317
|
"name": "size",
|
|
2223
2318
|
"type": {
|
|
2224
|
-
"text": "
|
|
2319
|
+
"text": "ButtonGroupSize"
|
|
2225
2320
|
},
|
|
2226
|
-
"
|
|
2227
|
-
"
|
|
2228
|
-
"default": "small",
|
|
2321
|
+
"description": "Size of the buttons within the buttongroup.",
|
|
2322
|
+
"default": "'28'",
|
|
2229
2323
|
"attribute": "size",
|
|
2230
2324
|
"reflects": true
|
|
2325
|
+
},
|
|
2326
|
+
{
|
|
2327
|
+
"kind": "field",
|
|
2328
|
+
"name": "compact",
|
|
2329
|
+
"type": {
|
|
2330
|
+
"text": "boolean"
|
|
2331
|
+
},
|
|
2332
|
+
"default": "false",
|
|
2333
|
+
"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.",
|
|
2334
|
+
"attribute": "compact",
|
|
2335
|
+
"reflects": true
|
|
2231
2336
|
}
|
|
2232
2337
|
],
|
|
2233
2338
|
"attributes": [
|
|
2339
|
+
{
|
|
2340
|
+
"name": "orientation",
|
|
2341
|
+
"type": {
|
|
2342
|
+
"text": "ButtonGroupOrientation"
|
|
2343
|
+
},
|
|
2344
|
+
"description": "Orientation of the buttongroup.",
|
|
2345
|
+
"default": "'horizontal'",
|
|
2346
|
+
"fieldName": "orientation"
|
|
2347
|
+
},
|
|
2348
|
+
{
|
|
2349
|
+
"name": "variant",
|
|
2350
|
+
"type": {
|
|
2351
|
+
"text": "ButtonGroupVariant"
|
|
2352
|
+
},
|
|
2353
|
+
"description": "Variant of the buttons within the buttongroup.",
|
|
2354
|
+
"default": "'primary'",
|
|
2355
|
+
"fieldName": "variant"
|
|
2356
|
+
},
|
|
2234
2357
|
{
|
|
2235
2358
|
"name": "size",
|
|
2236
2359
|
"type": {
|
|
2237
|
-
"text": "
|
|
2360
|
+
"text": "ButtonGroupSize"
|
|
2238
2361
|
},
|
|
2239
|
-
"description": "Size of the
|
|
2240
|
-
"default": "
|
|
2362
|
+
"description": "Size of the buttons within the buttongroup.",
|
|
2363
|
+
"default": "'28'",
|
|
2241
2364
|
"fieldName": "size"
|
|
2365
|
+
},
|
|
2366
|
+
{
|
|
2367
|
+
"name": "compact",
|
|
2368
|
+
"type": {
|
|
2369
|
+
"text": "boolean"
|
|
2370
|
+
},
|
|
2371
|
+
"default": "false",
|
|
2372
|
+
"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.",
|
|
2373
|
+
"fieldName": "compact"
|
|
2242
2374
|
}
|
|
2243
2375
|
],
|
|
2244
2376
|
"superclass": {
|
|
2245
2377
|
"name": "Component",
|
|
2246
2378
|
"module": "/src/models"
|
|
2247
2379
|
},
|
|
2248
|
-
"tagName": "mdc-
|
|
2249
|
-
"jsDoc": "/**\n *
|
|
2380
|
+
"tagName": "mdc-buttongroup",
|
|
2381
|
+
"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 */",
|
|
2250
2382
|
"customElement": true
|
|
2251
2383
|
}
|
|
2252
2384
|
],
|
|
@@ -2255,8 +2387,8 @@
|
|
|
2255
2387
|
"kind": "js",
|
|
2256
2388
|
"name": "default",
|
|
2257
2389
|
"declaration": {
|
|
2258
|
-
"name": "
|
|
2259
|
-
"module": "components/
|
|
2390
|
+
"name": "ButtonGroup",
|
|
2391
|
+
"module": "components/buttongroup/buttongroup.component.js"
|
|
2260
2392
|
}
|
|
2261
2393
|
}
|
|
2262
2394
|
]
|
|
@@ -2950,140 +3082,8 @@
|
|
|
2950
3082
|
"kind": "js",
|
|
2951
3083
|
"name": "default",
|
|
2952
3084
|
"declaration": {
|
|
2953
|
-
"name": "Button",
|
|
2954
|
-
"module": "components/button/button.component.js"
|
|
2955
|
-
}
|
|
2956
|
-
}
|
|
2957
|
-
]
|
|
2958
|
-
},
|
|
2959
|
-
{
|
|
2960
|
-
"kind": "javascript-module",
|
|
2961
|
-
"path": "components/buttongroup/buttongroup.component.js",
|
|
2962
|
-
"declarations": [
|
|
2963
|
-
{
|
|
2964
|
-
"kind": "class",
|
|
2965
|
-
"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.",
|
|
2966
|
-
"name": "ButtonGroup",
|
|
2967
|
-
"cssProperties": [
|
|
2968
|
-
{
|
|
2969
|
-
"description": "The border radius of the buttongroup",
|
|
2970
|
-
"name": "--mdc-buttongroup-border-radius"
|
|
2971
|
-
},
|
|
2972
|
-
{
|
|
2973
|
-
"description": "The border color of the buttongroup",
|
|
2974
|
-
"name": "--mdc-buttongroup-border-color"
|
|
2975
|
-
},
|
|
2976
|
-
{
|
|
2977
|
-
"description": "The color of the divider between buttons within the buttongroup",
|
|
2978
|
-
"name": "--mdc-buttongroup-divider-color"
|
|
2979
|
-
}
|
|
2980
|
-
],
|
|
2981
|
-
"slots": [
|
|
2982
|
-
{
|
|
2983
|
-
"description": "This is a default/unnamed slot, which contains the buttons",
|
|
2984
|
-
"name": "default"
|
|
2985
|
-
}
|
|
2986
|
-
],
|
|
2987
|
-
"members": [
|
|
2988
|
-
{
|
|
2989
|
-
"kind": "field",
|
|
2990
|
-
"name": "orientation",
|
|
2991
|
-
"type": {
|
|
2992
|
-
"text": "ButtonGroupOrientation"
|
|
2993
|
-
},
|
|
2994
|
-
"description": "Orientation of the buttongroup.",
|
|
2995
|
-
"default": "'horizontal'",
|
|
2996
|
-
"attribute": "orientation",
|
|
2997
|
-
"reflects": true
|
|
2998
|
-
},
|
|
2999
|
-
{
|
|
3000
|
-
"kind": "field",
|
|
3001
|
-
"name": "variant",
|
|
3002
|
-
"type": {
|
|
3003
|
-
"text": "ButtonGroupVariant"
|
|
3004
|
-
},
|
|
3005
|
-
"description": "Variant of the buttons within the buttongroup.",
|
|
3006
|
-
"default": "'primary'",
|
|
3007
|
-
"attribute": "variant",
|
|
3008
|
-
"reflects": true
|
|
3009
|
-
},
|
|
3010
|
-
{
|
|
3011
|
-
"kind": "field",
|
|
3012
|
-
"name": "size",
|
|
3013
|
-
"type": {
|
|
3014
|
-
"text": "ButtonGroupSize"
|
|
3015
|
-
},
|
|
3016
|
-
"description": "Size of the buttons within the buttongroup.",
|
|
3017
|
-
"default": "'28'",
|
|
3018
|
-
"attribute": "size",
|
|
3019
|
-
"reflects": true
|
|
3020
|
-
},
|
|
3021
|
-
{
|
|
3022
|
-
"kind": "field",
|
|
3023
|
-
"name": "compact",
|
|
3024
|
-
"type": {
|
|
3025
|
-
"text": "boolean"
|
|
3026
|
-
},
|
|
3027
|
-
"default": "false",
|
|
3028
|
-
"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.",
|
|
3029
|
-
"attribute": "compact",
|
|
3030
|
-
"reflects": true
|
|
3031
|
-
}
|
|
3032
|
-
],
|
|
3033
|
-
"attributes": [
|
|
3034
|
-
{
|
|
3035
|
-
"name": "orientation",
|
|
3036
|
-
"type": {
|
|
3037
|
-
"text": "ButtonGroupOrientation"
|
|
3038
|
-
},
|
|
3039
|
-
"description": "Orientation of the buttongroup.",
|
|
3040
|
-
"default": "'horizontal'",
|
|
3041
|
-
"fieldName": "orientation"
|
|
3042
|
-
},
|
|
3043
|
-
{
|
|
3044
|
-
"name": "variant",
|
|
3045
|
-
"type": {
|
|
3046
|
-
"text": "ButtonGroupVariant"
|
|
3047
|
-
},
|
|
3048
|
-
"description": "Variant of the buttons within the buttongroup.",
|
|
3049
|
-
"default": "'primary'",
|
|
3050
|
-
"fieldName": "variant"
|
|
3051
|
-
},
|
|
3052
|
-
{
|
|
3053
|
-
"name": "size",
|
|
3054
|
-
"type": {
|
|
3055
|
-
"text": "ButtonGroupSize"
|
|
3056
|
-
},
|
|
3057
|
-
"description": "Size of the buttons within the buttongroup.",
|
|
3058
|
-
"default": "'28'",
|
|
3059
|
-
"fieldName": "size"
|
|
3060
|
-
},
|
|
3061
|
-
{
|
|
3062
|
-
"name": "compact",
|
|
3063
|
-
"type": {
|
|
3064
|
-
"text": "boolean"
|
|
3065
|
-
},
|
|
3066
|
-
"default": "false",
|
|
3067
|
-
"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.",
|
|
3068
|
-
"fieldName": "compact"
|
|
3069
|
-
}
|
|
3070
|
-
],
|
|
3071
|
-
"superclass": {
|
|
3072
|
-
"name": "Component",
|
|
3073
|
-
"module": "/src/models"
|
|
3074
|
-
},
|
|
3075
|
-
"tagName": "mdc-buttongroup",
|
|
3076
|
-
"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 */",
|
|
3077
|
-
"customElement": true
|
|
3078
|
-
}
|
|
3079
|
-
],
|
|
3080
|
-
"exports": [
|
|
3081
|
-
{
|
|
3082
|
-
"kind": "js",
|
|
3083
|
-
"name": "default",
|
|
3084
|
-
"declaration": {
|
|
3085
|
-
"name": "ButtonGroup",
|
|
3086
|
-
"module": "components/buttongroup/buttongroup.component.js"
|
|
3085
|
+
"name": "Button",
|
|
3086
|
+
"module": "components/button/button.component.js"
|
|
3087
3087
|
}
|
|
3088
3088
|
}
|
|
3089
3089
|
]
|
|
@@ -9451,266 +9451,20 @@
|
|
|
9451
9451
|
"text": "boolean"
|
|
9452
9452
|
},
|
|
9453
9453
|
"description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
|
|
9454
|
-
"default": "false",
|
|
9455
|
-
"fieldName": "disableAriaHasPopup",
|
|
9456
|
-
"inheritedFrom": {
|
|
9457
|
-
"name": "Popover",
|
|
9458
|
-
"module": "src/components/popover/popover.component.ts"
|
|
9459
|
-
}
|
|
9460
|
-
}
|
|
9461
|
-
],
|
|
9462
|
-
"superclass": {
|
|
9463
|
-
"name": "Popover",
|
|
9464
|
-
"module": "/src/components/popover/popover.component"
|
|
9465
|
-
},
|
|
9466
|
-
"tagName": "mdc-coachmark",
|
|
9467
|
-
"jsDoc": "/**\n * Coachmark component based on top of the popover component,\n * with the default value of certain properties changed.\n *\n * @dependency mdc-popover\n *\n * @tagname mdc-coachmark\n *\n * @event shown - (React: onShown) This event is dispatched when the coachmark is shown\n * @event hidden - (React: onHidden) This event is dispatched when the coachmark is hidden\n * @event created - (React: onCreated) This event is dispatched when the coachmark is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the coachmark is\n * destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border\n * @cssproperty --mdc-popover-arrow-border - border of the arrow\n * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover\n * @cssproperty --mdc-popover-border-color - border color of the popover\n * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover\n * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover\n * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover\n * @cssproperty --mdc-popover-elevation-3 - elevation of the popover\n *\n * @slot - Default slot for modal container\n *\n */",
|
|
9468
|
-
"customElement": true
|
|
9469
|
-
}
|
|
9470
|
-
],
|
|
9471
|
-
"exports": [
|
|
9472
|
-
{
|
|
9473
|
-
"kind": "js",
|
|
9474
|
-
"name": "default",
|
|
9475
|
-
"declaration": {
|
|
9476
|
-
"name": "Coachmark",
|
|
9477
|
-
"module": "components/coachmark/coachmark.component.js"
|
|
9478
|
-
}
|
|
9479
|
-
}
|
|
9480
|
-
]
|
|
9481
|
-
},
|
|
9482
|
-
{
|
|
9483
|
-
"kind": "javascript-module",
|
|
9484
|
-
"path": "components/divider/divider.component.js",
|
|
9485
|
-
"declarations": [
|
|
9486
|
-
{
|
|
9487
|
-
"kind": "class",
|
|
9488
|
-
"description": "`mdc-divider` is a component that provides a line to separate and organize content.\nIt can also include a button or text positioned centrally, allowing users to interact with the layout.\n\n**Divider Orientation:**\n- **Horizontal**: A thin, horizontal line.\n- **Vertical**: A thin, vertical line.\n\n**Divider Variants:**\n- **solid**: Solid line.\n- **gradient**: Gradient Line.\n\n**Divider Types:**\n- The type of divider is inferred based on the kind of slot present.\n - **Primary**: A simple horizontal or vertical divider.\n - **Text**: A horizontal divider with a text label in the center.\n - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n\n**Accessibility:**\n- When the slot is replaced by an `mdc-button`:\n - `aria-label` should be passed to the `mdc-button`.\n - `aria-expanded` should be passed to the `mdc-button`.\n\n**Notes:**\n- If the slot is replaced by an invalid tag name or contains multiple elements,\n the divider defaults to the **Primary** type.\n- To override the styles of the divider, use the provided CSS custom properties.",
|
|
9489
|
-
"name": "Divider",
|
|
9490
|
-
"cssProperties": [
|
|
9491
|
-
{
|
|
9492
|
-
"description": "background color of the divider",
|
|
9493
|
-
"name": "--mdc-divider-background-color"
|
|
9494
|
-
},
|
|
9495
|
-
{
|
|
9496
|
-
"description": "width of the divider",
|
|
9497
|
-
"name": "--mdc-divider-width"
|
|
9498
|
-
},
|
|
9499
|
-
{
|
|
9500
|
-
"description": "gradient of the horizontal divider",
|
|
9501
|
-
"name": "--mdc-divider-horizontal-gradient"
|
|
9502
|
-
},
|
|
9503
|
-
{
|
|
9504
|
-
"description": "gradient of the vertical divider",
|
|
9505
|
-
"name": "--mdc-divider-vertical-gradient"
|
|
9506
|
-
},
|
|
9507
|
-
{
|
|
9508
|
-
"description": "font size of label in the text divider",
|
|
9509
|
-
"name": "--mdc-divider-text-size"
|
|
9510
|
-
},
|
|
9511
|
-
{
|
|
9512
|
-
"description": "font color of label in the text divider",
|
|
9513
|
-
"name": "--mdc-divider-text-color"
|
|
9514
|
-
},
|
|
9515
|
-
{
|
|
9516
|
-
"description": "left and right margin of label in the text divider",
|
|
9517
|
-
"name": "--mdc-divider-text-margin"
|
|
9518
|
-
},
|
|
9519
|
-
{
|
|
9520
|
-
"description": "line height of label in the text divider",
|
|
9521
|
-
"name": "--mdc-divider-text-line-height"
|
|
9522
|
-
},
|
|
9523
|
-
{
|
|
9524
|
-
"description": "background color of the grabber button in rest state",
|
|
9525
|
-
"name": "--mdc-divider-grabber-button-background-color-normal"
|
|
9526
|
-
},
|
|
9527
|
-
{
|
|
9528
|
-
"description": "background color of the grabber button in hover state",
|
|
9529
|
-
"name": "--mdc-divider-grabber-button-background-color-hover"
|
|
9530
|
-
},
|
|
9531
|
-
{
|
|
9532
|
-
"description": "background color of the grabber button in pressed state",
|
|
9533
|
-
"name": "--mdc-divider-grabber-button-background-color-pressed"
|
|
9534
|
-
},
|
|
9535
|
-
{
|
|
9536
|
-
"description": "border color of the grabber button",
|
|
9537
|
-
"name": "--mdc-divider-grabber-button-border-color"
|
|
9538
|
-
},
|
|
9539
|
-
{
|
|
9540
|
-
"description": "border radius of the grabber button",
|
|
9541
|
-
"name": "--mdc-divider-grabber-button-border-radius"
|
|
9542
|
-
}
|
|
9543
|
-
],
|
|
9544
|
-
"members": [
|
|
9545
|
-
{
|
|
9546
|
-
"kind": "field",
|
|
9547
|
-
"name": "orientation",
|
|
9548
|
-
"type": {
|
|
9549
|
-
"text": "DividerOrientation"
|
|
9550
|
-
},
|
|
9551
|
-
"description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
|
|
9552
|
-
"default": "horizontal",
|
|
9553
|
-
"attribute": "orientation",
|
|
9554
|
-
"reflects": true
|
|
9555
|
-
},
|
|
9556
|
-
{
|
|
9557
|
-
"kind": "field",
|
|
9558
|
-
"name": "variant",
|
|
9559
|
-
"type": {
|
|
9560
|
-
"text": "DividerVariant"
|
|
9561
|
-
},
|
|
9562
|
-
"description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
|
|
9563
|
-
"default": "solid",
|
|
9564
|
-
"attribute": "variant",
|
|
9565
|
-
"reflects": true
|
|
9566
|
-
},
|
|
9567
|
-
{
|
|
9568
|
-
"kind": "field",
|
|
9569
|
-
"name": "arrowDirection",
|
|
9570
|
-
"type": {
|
|
9571
|
-
"text": "Directions"
|
|
9572
|
-
},
|
|
9573
|
-
"description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
|
|
9574
|
-
"default": "'negative'",
|
|
9575
|
-
"attribute": "arrow-direction",
|
|
9576
|
-
"reflects": true
|
|
9577
|
-
},
|
|
9578
|
-
{
|
|
9579
|
-
"kind": "field",
|
|
9580
|
-
"name": "buttonPosition",
|
|
9581
|
-
"type": {
|
|
9582
|
-
"text": "Directions"
|
|
9583
|
-
},
|
|
9584
|
-
"description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
|
|
9585
|
-
"default": "'negative'",
|
|
9586
|
-
"attribute": "button-position",
|
|
9587
|
-
"reflects": true
|
|
9588
|
-
},
|
|
9589
|
-
{
|
|
9590
|
-
"kind": "method",
|
|
9591
|
-
"name": "setVariant",
|
|
9592
|
-
"privacy": "private",
|
|
9593
|
-
"parameters": [
|
|
9594
|
-
{
|
|
9595
|
-
"name": "variant",
|
|
9596
|
-
"type": {
|
|
9597
|
-
"text": "DividerVariant"
|
|
9598
|
-
},
|
|
9599
|
-
"description": "The variant to set."
|
|
9600
|
-
}
|
|
9601
|
-
],
|
|
9602
|
-
"description": "Sets the variant attribute for the divider component.\nIf the provided variant is not included in the DIVIDER_VARIANT,\nit defaults to the value specified in DEFAULTS.VARIANT."
|
|
9603
|
-
},
|
|
9604
|
-
{
|
|
9605
|
-
"kind": "method",
|
|
9606
|
-
"name": "setOrientation",
|
|
9607
|
-
"privacy": "private",
|
|
9608
|
-
"parameters": [
|
|
9609
|
-
{
|
|
9610
|
-
"name": "orientation",
|
|
9611
|
-
"type": {
|
|
9612
|
-
"text": "DividerOrientation"
|
|
9613
|
-
},
|
|
9614
|
-
"description": "The orientation to set."
|
|
9615
|
-
}
|
|
9616
|
-
],
|
|
9617
|
-
"description": "Sets the orientation attribute for the divider component.\nIf the provided orientation is not included in the DIVIDER_ORIENTATION,\nit defaults to the value specified in DEFAULTS.ORIENTATION."
|
|
9618
|
-
},
|
|
9619
|
-
{
|
|
9620
|
-
"kind": "method",
|
|
9621
|
-
"name": "ensureValidDirections",
|
|
9622
|
-
"privacy": "private",
|
|
9623
|
-
"description": "Sets the buttonPosition and arrowDirection attribute for the divider component.\nIf the provided buttonPosition and arrowDirection are not included in the DIRECTIONS,\nit defaults to the value specified in DIRECTIONS based on the ORIENTATION.",
|
|
9624
|
-
"parameters": [
|
|
9625
|
-
{
|
|
9626
|
-
"description": "The buttonPosition to set.",
|
|
9627
|
-
"name": "buttonPosition"
|
|
9628
|
-
},
|
|
9629
|
-
{
|
|
9630
|
-
"description": "The arrowDirection to set.",
|
|
9631
|
-
"name": "arrowDirection"
|
|
9632
|
-
}
|
|
9633
|
-
]
|
|
9634
|
-
},
|
|
9635
|
-
{
|
|
9636
|
-
"kind": "method",
|
|
9637
|
-
"name": "setGrabberButton",
|
|
9638
|
-
"privacy": "private",
|
|
9639
|
-
"return": {
|
|
9640
|
-
"type": {
|
|
9641
|
-
"text": "void"
|
|
9642
|
-
}
|
|
9643
|
-
},
|
|
9644
|
-
"description": "Configures the grabber button within the divider.\n\n- Sets the `prefix-icon` attribute for the grabber button based\non the `arrow-direction` and `orientation` properties.\n\nThis method updates the DOM element dynamically if a grabber button is present."
|
|
9645
|
-
},
|
|
9646
|
-
{
|
|
9647
|
-
"kind": "method",
|
|
9648
|
-
"name": "getArrowIcon",
|
|
9649
|
-
"privacy": "private",
|
|
9650
|
-
"return": {
|
|
9651
|
-
"type": {
|
|
9652
|
-
"text": ""
|
|
9653
|
-
}
|
|
9654
|
-
},
|
|
9655
|
-
"description": "Determines the arrow icon based on the consumer-defined `arrowDirection`."
|
|
9656
|
-
},
|
|
9657
|
-
{
|
|
9658
|
-
"kind": "method",
|
|
9659
|
-
"name": "inferDividerType",
|
|
9660
|
-
"privacy": "private",
|
|
9661
|
-
"description": "Infers the type of divider based on the kind of slot present.",
|
|
9662
|
-
"parameters": [
|
|
9663
|
-
{
|
|
9664
|
-
"description": "default slot of divider",
|
|
9665
|
-
"name": "slot"
|
|
9666
|
-
}
|
|
9667
|
-
]
|
|
9668
|
-
}
|
|
9669
|
-
],
|
|
9670
|
-
"attributes": [
|
|
9671
|
-
{
|
|
9672
|
-
"name": "orientation",
|
|
9673
|
-
"type": {
|
|
9674
|
-
"text": "DividerOrientation"
|
|
9675
|
-
},
|
|
9676
|
-
"description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
|
|
9677
|
-
"default": "horizontal",
|
|
9678
|
-
"fieldName": "orientation"
|
|
9679
|
-
},
|
|
9680
|
-
{
|
|
9681
|
-
"name": "variant",
|
|
9682
|
-
"type": {
|
|
9683
|
-
"text": "DividerVariant"
|
|
9684
|
-
},
|
|
9685
|
-
"description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
|
|
9686
|
-
"default": "solid",
|
|
9687
|
-
"fieldName": "variant"
|
|
9688
|
-
},
|
|
9689
|
-
{
|
|
9690
|
-
"name": "arrow-direction",
|
|
9691
|
-
"type": {
|
|
9692
|
-
"text": "Directions"
|
|
9693
|
-
},
|
|
9694
|
-
"description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
|
|
9695
|
-
"default": "'negative'",
|
|
9696
|
-
"fieldName": "arrowDirection"
|
|
9697
|
-
},
|
|
9698
|
-
{
|
|
9699
|
-
"name": "button-position",
|
|
9700
|
-
"type": {
|
|
9701
|
-
"text": "Directions"
|
|
9702
|
-
},
|
|
9703
|
-
"description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
|
|
9704
|
-
"default": "'negative'",
|
|
9705
|
-
"fieldName": "buttonPosition"
|
|
9454
|
+
"default": "false",
|
|
9455
|
+
"fieldName": "disableAriaHasPopup",
|
|
9456
|
+
"inheritedFrom": {
|
|
9457
|
+
"name": "Popover",
|
|
9458
|
+
"module": "src/components/popover/popover.component.ts"
|
|
9459
|
+
}
|
|
9706
9460
|
}
|
|
9707
9461
|
],
|
|
9708
9462
|
"superclass": {
|
|
9709
|
-
"name": "
|
|
9710
|
-
"module": "/src/
|
|
9463
|
+
"name": "Popover",
|
|
9464
|
+
"module": "/src/components/popover/popover.component"
|
|
9711
9465
|
},
|
|
9712
|
-
"tagName": "mdc-
|
|
9713
|
-
"jsDoc": "/**\n *
|
|
9466
|
+
"tagName": "mdc-coachmark",
|
|
9467
|
+
"jsDoc": "/**\n * Coachmark component based on top of the popover component,\n * with the default value of certain properties changed.\n *\n * @dependency mdc-popover\n *\n * @tagname mdc-coachmark\n *\n * @event shown - (React: onShown) This event is dispatched when the coachmark is shown\n * @event hidden - (React: onHidden) This event is dispatched when the coachmark is hidden\n * @event created - (React: onCreated) This event is dispatched when the coachmark is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the coachmark is\n * destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border\n * @cssproperty --mdc-popover-arrow-border - border of the arrow\n * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover\n * @cssproperty --mdc-popover-border-color - border color of the popover\n * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover\n * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover\n * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover\n * @cssproperty --mdc-popover-elevation-3 - elevation of the popover\n *\n * @slot - Default slot for modal container\n *\n */",
|
|
9714
9468
|
"customElement": true
|
|
9715
9469
|
}
|
|
9716
9470
|
],
|
|
@@ -9719,8 +9473,8 @@
|
|
|
9719
9473
|
"kind": "js",
|
|
9720
9474
|
"name": "default",
|
|
9721
9475
|
"declaration": {
|
|
9722
|
-
"name": "
|
|
9723
|
-
"module": "components/
|
|
9476
|
+
"name": "Coachmark",
|
|
9477
|
+
"module": "components/coachmark/coachmark.component.js"
|
|
9724
9478
|
}
|
|
9725
9479
|
}
|
|
9726
9480
|
]
|
|
@@ -10683,98 +10437,344 @@
|
|
|
10683
10437
|
"fieldName": "ariaDescription"
|
|
10684
10438
|
},
|
|
10685
10439
|
{
|
|
10686
|
-
"name": "header-text",
|
|
10687
|
-
"type": {
|
|
10688
|
-
"text": "string | undefined"
|
|
10689
|
-
},
|
|
10690
|
-
"description": "Defines a string value to display as the title of the dialog",
|
|
10691
|
-
"fieldName": "headerText"
|
|
10440
|
+
"name": "header-text",
|
|
10441
|
+
"type": {
|
|
10442
|
+
"text": "string | undefined"
|
|
10443
|
+
},
|
|
10444
|
+
"description": "Defines a string value to display as the title of the dialog",
|
|
10445
|
+
"fieldName": "headerText"
|
|
10446
|
+
},
|
|
10447
|
+
{
|
|
10448
|
+
"name": "description-text",
|
|
10449
|
+
"type": {
|
|
10450
|
+
"text": "string | undefined"
|
|
10451
|
+
},
|
|
10452
|
+
"description": "Defines a string value to display as the under-header description of the dialog",
|
|
10453
|
+
"fieldName": "descriptionText"
|
|
10454
|
+
},
|
|
10455
|
+
{
|
|
10456
|
+
"name": "header-tag-name",
|
|
10457
|
+
"type": {
|
|
10458
|
+
"text": "string"
|
|
10459
|
+
},
|
|
10460
|
+
"description": "The html tag to be used for the header text",
|
|
10461
|
+
"fieldName": "headerTagName"
|
|
10462
|
+
},
|
|
10463
|
+
{
|
|
10464
|
+
"name": "description-tag-name",
|
|
10465
|
+
"type": {
|
|
10466
|
+
"text": "string"
|
|
10467
|
+
},
|
|
10468
|
+
"description": "The html tag to be used for the below-header description text",
|
|
10469
|
+
"fieldName": "descriptionTagName"
|
|
10470
|
+
},
|
|
10471
|
+
{
|
|
10472
|
+
"name": "role",
|
|
10473
|
+
"type": {
|
|
10474
|
+
"text": "DialogRole"
|
|
10475
|
+
},
|
|
10476
|
+
"description": "Role of the dialog",
|
|
10477
|
+
"default": "dialog",
|
|
10478
|
+
"fieldName": "role"
|
|
10479
|
+
},
|
|
10480
|
+
{
|
|
10481
|
+
"name": "disable-aria-haspopup",
|
|
10482
|
+
"type": {
|
|
10483
|
+
"text": "boolean"
|
|
10484
|
+
},
|
|
10485
|
+
"description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
|
|
10486
|
+
"default": "false",
|
|
10487
|
+
"fieldName": "disableAriaHasPopup"
|
|
10488
|
+
},
|
|
10489
|
+
{
|
|
10490
|
+
"name": "focus-trap",
|
|
10491
|
+
"type": {
|
|
10492
|
+
"text": "boolean"
|
|
10493
|
+
},
|
|
10494
|
+
"description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.\n\nNOTE: this should only be disabled in rare cases! By default a Modal Dialog\nshould trap focus always.",
|
|
10495
|
+
"default": "true",
|
|
10496
|
+
"fieldName": "focusTrap"
|
|
10497
|
+
},
|
|
10498
|
+
{
|
|
10499
|
+
"name": "should-focus-trap-wrap",
|
|
10500
|
+
"type": {
|
|
10501
|
+
"text": "boolean"
|
|
10502
|
+
},
|
|
10503
|
+
"default": "true",
|
|
10504
|
+
"description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
|
|
10505
|
+
"fieldName": "shouldFocusTrapWrap",
|
|
10506
|
+
"inheritedFrom": {
|
|
10507
|
+
"name": "FocusTrapMixin",
|
|
10508
|
+
"module": "src/utils/mixins/FocusTrapMixin.ts"
|
|
10509
|
+
}
|
|
10510
|
+
}
|
|
10511
|
+
],
|
|
10512
|
+
"mixins": [
|
|
10513
|
+
{
|
|
10514
|
+
"name": "PreventScrollMixin",
|
|
10515
|
+
"module": "/src/utils/mixins/PreventScrollMixin"
|
|
10516
|
+
},
|
|
10517
|
+
{
|
|
10518
|
+
"name": "FocusTrapMixin",
|
|
10519
|
+
"module": "/src/utils/mixins/FocusTrapMixin"
|
|
10520
|
+
},
|
|
10521
|
+
{
|
|
10522
|
+
"name": "CardAndDialogFooterMixin",
|
|
10523
|
+
"module": "/src/utils/mixins/CardAndDialogFooterMixin"
|
|
10524
|
+
}
|
|
10525
|
+
],
|
|
10526
|
+
"superclass": {
|
|
10527
|
+
"name": "Component",
|
|
10528
|
+
"module": "/src/models"
|
|
10529
|
+
},
|
|
10530
|
+
"tagName": "mdc-dialog",
|
|
10531
|
+
"jsDoc": "/**\n * Dialog component is a modal dialog that can be used to display information or prompt the user for input.\n * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\n * The dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * The dialog can be controlled solely through the `visible` property, no trigger element is required.\n * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\n * remember the previously focused element before the dialog was opened.\n *\n * The dialog is a controlled component, meaning it does not have its own state management for visibility.\n * Use the `visible` property to control the visibility of the dialog.\n * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\n * or Escape is pressed).\n *\n * Dialog component have 2 variants: default and promotional.\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n * - Use `?visible=true/false` as an attribute instead of `visible=true/false`\n * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions\n *\n * @dependency mdc-button\n * @dependency mdc-text\n *\n * @tagname mdc-dialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed\n * (this does not hide the dialog)\n *\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer - This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred\n */",
|
|
10532
|
+
"customElement": true
|
|
10533
|
+
}
|
|
10534
|
+
],
|
|
10535
|
+
"exports": [
|
|
10536
|
+
{
|
|
10537
|
+
"kind": "js",
|
|
10538
|
+
"name": "default",
|
|
10539
|
+
"declaration": {
|
|
10540
|
+
"name": "Dialog",
|
|
10541
|
+
"module": "components/dialog/dialog.component.js"
|
|
10542
|
+
}
|
|
10543
|
+
}
|
|
10544
|
+
]
|
|
10545
|
+
},
|
|
10546
|
+
{
|
|
10547
|
+
"kind": "javascript-module",
|
|
10548
|
+
"path": "components/divider/divider.component.js",
|
|
10549
|
+
"declarations": [
|
|
10550
|
+
{
|
|
10551
|
+
"kind": "class",
|
|
10552
|
+
"description": "`mdc-divider` is a component that provides a line to separate and organize content.\nIt can also include a button or text positioned centrally, allowing users to interact with the layout.\n\n**Divider Orientation:**\n- **Horizontal**: A thin, horizontal line.\n- **Vertical**: A thin, vertical line.\n\n**Divider Variants:**\n- **solid**: Solid line.\n- **gradient**: Gradient Line.\n\n**Divider Types:**\n- The type of divider is inferred based on the kind of slot present.\n - **Primary**: A simple horizontal or vertical divider.\n - **Text**: A horizontal divider with a text label in the center.\n - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n\n**Accessibility:**\n- When the slot is replaced by an `mdc-button`:\n - `aria-label` should be passed to the `mdc-button`.\n - `aria-expanded` should be passed to the `mdc-button`.\n\n**Notes:**\n- If the slot is replaced by an invalid tag name or contains multiple elements,\n the divider defaults to the **Primary** type.\n- To override the styles of the divider, use the provided CSS custom properties.",
|
|
10553
|
+
"name": "Divider",
|
|
10554
|
+
"cssProperties": [
|
|
10555
|
+
{
|
|
10556
|
+
"description": "background color of the divider",
|
|
10557
|
+
"name": "--mdc-divider-background-color"
|
|
10558
|
+
},
|
|
10559
|
+
{
|
|
10560
|
+
"description": "width of the divider",
|
|
10561
|
+
"name": "--mdc-divider-width"
|
|
10562
|
+
},
|
|
10563
|
+
{
|
|
10564
|
+
"description": "gradient of the horizontal divider",
|
|
10565
|
+
"name": "--mdc-divider-horizontal-gradient"
|
|
10566
|
+
},
|
|
10567
|
+
{
|
|
10568
|
+
"description": "gradient of the vertical divider",
|
|
10569
|
+
"name": "--mdc-divider-vertical-gradient"
|
|
10570
|
+
},
|
|
10571
|
+
{
|
|
10572
|
+
"description": "font size of label in the text divider",
|
|
10573
|
+
"name": "--mdc-divider-text-size"
|
|
10574
|
+
},
|
|
10575
|
+
{
|
|
10576
|
+
"description": "font color of label in the text divider",
|
|
10577
|
+
"name": "--mdc-divider-text-color"
|
|
10578
|
+
},
|
|
10579
|
+
{
|
|
10580
|
+
"description": "left and right margin of label in the text divider",
|
|
10581
|
+
"name": "--mdc-divider-text-margin"
|
|
10582
|
+
},
|
|
10583
|
+
{
|
|
10584
|
+
"description": "line height of label in the text divider",
|
|
10585
|
+
"name": "--mdc-divider-text-line-height"
|
|
10586
|
+
},
|
|
10587
|
+
{
|
|
10588
|
+
"description": "background color of the grabber button in rest state",
|
|
10589
|
+
"name": "--mdc-divider-grabber-button-background-color-normal"
|
|
10590
|
+
},
|
|
10591
|
+
{
|
|
10592
|
+
"description": "background color of the grabber button in hover state",
|
|
10593
|
+
"name": "--mdc-divider-grabber-button-background-color-hover"
|
|
10594
|
+
},
|
|
10595
|
+
{
|
|
10596
|
+
"description": "background color of the grabber button in pressed state",
|
|
10597
|
+
"name": "--mdc-divider-grabber-button-background-color-pressed"
|
|
10598
|
+
},
|
|
10599
|
+
{
|
|
10600
|
+
"description": "border color of the grabber button",
|
|
10601
|
+
"name": "--mdc-divider-grabber-button-border-color"
|
|
10602
|
+
},
|
|
10603
|
+
{
|
|
10604
|
+
"description": "border radius of the grabber button",
|
|
10605
|
+
"name": "--mdc-divider-grabber-button-border-radius"
|
|
10606
|
+
}
|
|
10607
|
+
],
|
|
10608
|
+
"members": [
|
|
10609
|
+
{
|
|
10610
|
+
"kind": "field",
|
|
10611
|
+
"name": "orientation",
|
|
10612
|
+
"type": {
|
|
10613
|
+
"text": "DividerOrientation"
|
|
10614
|
+
},
|
|
10615
|
+
"description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
|
|
10616
|
+
"default": "horizontal",
|
|
10617
|
+
"attribute": "orientation",
|
|
10618
|
+
"reflects": true
|
|
10619
|
+
},
|
|
10620
|
+
{
|
|
10621
|
+
"kind": "field",
|
|
10622
|
+
"name": "variant",
|
|
10623
|
+
"type": {
|
|
10624
|
+
"text": "DividerVariant"
|
|
10625
|
+
},
|
|
10626
|
+
"description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
|
|
10627
|
+
"default": "solid",
|
|
10628
|
+
"attribute": "variant",
|
|
10629
|
+
"reflects": true
|
|
10630
|
+
},
|
|
10631
|
+
{
|
|
10632
|
+
"kind": "field",
|
|
10633
|
+
"name": "arrowDirection",
|
|
10634
|
+
"type": {
|
|
10635
|
+
"text": "Directions"
|
|
10636
|
+
},
|
|
10637
|
+
"description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
|
|
10638
|
+
"default": "'negative'",
|
|
10639
|
+
"attribute": "arrow-direction",
|
|
10640
|
+
"reflects": true
|
|
10641
|
+
},
|
|
10642
|
+
{
|
|
10643
|
+
"kind": "field",
|
|
10644
|
+
"name": "buttonPosition",
|
|
10645
|
+
"type": {
|
|
10646
|
+
"text": "Directions"
|
|
10647
|
+
},
|
|
10648
|
+
"description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
|
|
10649
|
+
"default": "'negative'",
|
|
10650
|
+
"attribute": "button-position",
|
|
10651
|
+
"reflects": true
|
|
10652
|
+
},
|
|
10653
|
+
{
|
|
10654
|
+
"kind": "method",
|
|
10655
|
+
"name": "setVariant",
|
|
10656
|
+
"privacy": "private",
|
|
10657
|
+
"parameters": [
|
|
10658
|
+
{
|
|
10659
|
+
"name": "variant",
|
|
10660
|
+
"type": {
|
|
10661
|
+
"text": "DividerVariant"
|
|
10662
|
+
},
|
|
10663
|
+
"description": "The variant to set."
|
|
10664
|
+
}
|
|
10665
|
+
],
|
|
10666
|
+
"description": "Sets the variant attribute for the divider component.\nIf the provided variant is not included in the DIVIDER_VARIANT,\nit defaults to the value specified in DEFAULTS.VARIANT."
|
|
10667
|
+
},
|
|
10668
|
+
{
|
|
10669
|
+
"kind": "method",
|
|
10670
|
+
"name": "setOrientation",
|
|
10671
|
+
"privacy": "private",
|
|
10672
|
+
"parameters": [
|
|
10673
|
+
{
|
|
10674
|
+
"name": "orientation",
|
|
10675
|
+
"type": {
|
|
10676
|
+
"text": "DividerOrientation"
|
|
10677
|
+
},
|
|
10678
|
+
"description": "The orientation to set."
|
|
10679
|
+
}
|
|
10680
|
+
],
|
|
10681
|
+
"description": "Sets the orientation attribute for the divider component.\nIf the provided orientation is not included in the DIVIDER_ORIENTATION,\nit defaults to the value specified in DEFAULTS.ORIENTATION."
|
|
10682
|
+
},
|
|
10683
|
+
{
|
|
10684
|
+
"kind": "method",
|
|
10685
|
+
"name": "ensureValidDirections",
|
|
10686
|
+
"privacy": "private",
|
|
10687
|
+
"description": "Sets the buttonPosition and arrowDirection attribute for the divider component.\nIf the provided buttonPosition and arrowDirection are not included in the DIRECTIONS,\nit defaults to the value specified in DIRECTIONS based on the ORIENTATION.",
|
|
10688
|
+
"parameters": [
|
|
10689
|
+
{
|
|
10690
|
+
"description": "The buttonPosition to set.",
|
|
10691
|
+
"name": "buttonPosition"
|
|
10692
|
+
},
|
|
10693
|
+
{
|
|
10694
|
+
"description": "The arrowDirection to set.",
|
|
10695
|
+
"name": "arrowDirection"
|
|
10696
|
+
}
|
|
10697
|
+
]
|
|
10692
10698
|
},
|
|
10693
10699
|
{
|
|
10694
|
-
"
|
|
10695
|
-
"
|
|
10696
|
-
|
|
10700
|
+
"kind": "method",
|
|
10701
|
+
"name": "setGrabberButton",
|
|
10702
|
+
"privacy": "private",
|
|
10703
|
+
"return": {
|
|
10704
|
+
"type": {
|
|
10705
|
+
"text": "void"
|
|
10706
|
+
}
|
|
10697
10707
|
},
|
|
10698
|
-
"description": "
|
|
10699
|
-
"fieldName": "descriptionText"
|
|
10708
|
+
"description": "Configures the grabber button within the divider.\n\n- Sets the `prefix-icon` attribute for the grabber button based\non the `arrow-direction` and `orientation` properties.\n\nThis method updates the DOM element dynamically if a grabber button is present."
|
|
10700
10709
|
},
|
|
10701
10710
|
{
|
|
10702
|
-
"
|
|
10703
|
-
"
|
|
10704
|
-
|
|
10711
|
+
"kind": "method",
|
|
10712
|
+
"name": "getArrowIcon",
|
|
10713
|
+
"privacy": "private",
|
|
10714
|
+
"return": {
|
|
10715
|
+
"type": {
|
|
10716
|
+
"text": ""
|
|
10717
|
+
}
|
|
10705
10718
|
},
|
|
10706
|
-
"description": "
|
|
10707
|
-
"fieldName": "headerTagName"
|
|
10719
|
+
"description": "Determines the arrow icon based on the consumer-defined `arrowDirection`."
|
|
10708
10720
|
},
|
|
10709
10721
|
{
|
|
10710
|
-
"
|
|
10711
|
-
"
|
|
10712
|
-
|
|
10713
|
-
|
|
10714
|
-
"
|
|
10715
|
-
|
|
10716
|
-
|
|
10722
|
+
"kind": "method",
|
|
10723
|
+
"name": "inferDividerType",
|
|
10724
|
+
"privacy": "private",
|
|
10725
|
+
"description": "Infers the type of divider based on the kind of slot present.",
|
|
10726
|
+
"parameters": [
|
|
10727
|
+
{
|
|
10728
|
+
"description": "default slot of divider",
|
|
10729
|
+
"name": "slot"
|
|
10730
|
+
}
|
|
10731
|
+
]
|
|
10732
|
+
}
|
|
10733
|
+
],
|
|
10734
|
+
"attributes": [
|
|
10717
10735
|
{
|
|
10718
|
-
"name": "
|
|
10736
|
+
"name": "orientation",
|
|
10719
10737
|
"type": {
|
|
10720
|
-
"text": "
|
|
10738
|
+
"text": "DividerOrientation"
|
|
10721
10739
|
},
|
|
10722
|
-
"description": "
|
|
10723
|
-
"default": "
|
|
10724
|
-
"fieldName": "
|
|
10740
|
+
"description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
|
|
10741
|
+
"default": "horizontal",
|
|
10742
|
+
"fieldName": "orientation"
|
|
10725
10743
|
},
|
|
10726
10744
|
{
|
|
10727
|
-
"name": "
|
|
10745
|
+
"name": "variant",
|
|
10728
10746
|
"type": {
|
|
10729
|
-
"text": "
|
|
10747
|
+
"text": "DividerVariant"
|
|
10730
10748
|
},
|
|
10731
|
-
"description": "
|
|
10732
|
-
"default": "
|
|
10733
|
-
"fieldName": "
|
|
10749
|
+
"description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
|
|
10750
|
+
"default": "solid",
|
|
10751
|
+
"fieldName": "variant"
|
|
10734
10752
|
},
|
|
10735
10753
|
{
|
|
10736
|
-
"name": "
|
|
10754
|
+
"name": "arrow-direction",
|
|
10737
10755
|
"type": {
|
|
10738
|
-
"text": "
|
|
10756
|
+
"text": "Directions"
|
|
10739
10757
|
},
|
|
10740
|
-
"description": "
|
|
10741
|
-
"default": "
|
|
10742
|
-
"fieldName": "
|
|
10758
|
+
"description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
|
|
10759
|
+
"default": "'negative'",
|
|
10760
|
+
"fieldName": "arrowDirection"
|
|
10743
10761
|
},
|
|
10744
10762
|
{
|
|
10745
|
-
"name": "
|
|
10763
|
+
"name": "button-position",
|
|
10746
10764
|
"type": {
|
|
10747
|
-
"text": "
|
|
10765
|
+
"text": "Directions"
|
|
10748
10766
|
},
|
|
10749
|
-
"
|
|
10750
|
-
"
|
|
10751
|
-
"fieldName": "
|
|
10752
|
-
"inheritedFrom": {
|
|
10753
|
-
"name": "FocusTrapMixin",
|
|
10754
|
-
"module": "src/utils/mixins/FocusTrapMixin.ts"
|
|
10755
|
-
}
|
|
10756
|
-
}
|
|
10757
|
-
],
|
|
10758
|
-
"mixins": [
|
|
10759
|
-
{
|
|
10760
|
-
"name": "PreventScrollMixin",
|
|
10761
|
-
"module": "/src/utils/mixins/PreventScrollMixin"
|
|
10762
|
-
},
|
|
10763
|
-
{
|
|
10764
|
-
"name": "FocusTrapMixin",
|
|
10765
|
-
"module": "/src/utils/mixins/FocusTrapMixin"
|
|
10766
|
-
},
|
|
10767
|
-
{
|
|
10768
|
-
"name": "CardAndDialogFooterMixin",
|
|
10769
|
-
"module": "/src/utils/mixins/CardAndDialogFooterMixin"
|
|
10767
|
+
"description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
|
|
10768
|
+
"default": "'negative'",
|
|
10769
|
+
"fieldName": "buttonPosition"
|
|
10770
10770
|
}
|
|
10771
10771
|
],
|
|
10772
10772
|
"superclass": {
|
|
10773
10773
|
"name": "Component",
|
|
10774
10774
|
"module": "/src/models"
|
|
10775
10775
|
},
|
|
10776
|
-
"tagName": "mdc-
|
|
10777
|
-
"jsDoc": "/**\n *
|
|
10776
|
+
"tagName": "mdc-divider",
|
|
10777
|
+
"jsDoc": "/**\n * `mdc-divider` is a component that provides a line to separate and organize content.\n * It can also include a button or text positioned centrally, allowing users to interact with the layout.\n *\n * **Divider Orientation:**\n * - **Horizontal**: A thin, horizontal line.\n * - **Vertical**: A thin, vertical line.\n *\n * **Divider Variants:**\n * - **solid**: Solid line.\n * - **gradient**: Gradient Line.\n *\n * **Divider Types:**\n * - The type of divider is inferred based on the kind of slot present.\n * - **Primary**: A simple horizontal or vertical divider.\n * - **Text**: A horizontal divider with a text label in the center.\n * - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n *\n * **Accessibility:**\n * - When the slot is replaced by an `mdc-button`:\n * - `aria-label` should be passed to the `mdc-button`.\n * - `aria-expanded` should be passed to the `mdc-button`.\n *\n * **Notes:**\n * - If the slot is replaced by an invalid tag name or contains multiple elements,\n * the divider defaults to the **Primary** type.\n * - To override the styles of the divider, use the provided CSS custom properties.\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - background color of the divider\n * @cssproperty --mdc-divider-width - width of the divider\n * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider\n * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider\n * @cssproperty --mdc-divider-text-size - font size of label in the text divider\n * @cssproperty --mdc-divider-text-color - font color of label in the text divider\n * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider\n * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider\n * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button\n * in rest state\n * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button\n * in hover state\n * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button\n * in pressed state\n * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
|
|
10778
10778
|
"customElement": true
|
|
10779
10779
|
}
|
|
10780
10780
|
],
|
|
@@ -10783,8 +10783,8 @@
|
|
|
10783
10783
|
"kind": "js",
|
|
10784
10784
|
"name": "default",
|
|
10785
10785
|
"declaration": {
|
|
10786
|
-
"name": "
|
|
10787
|
-
"module": "components/
|
|
10786
|
+
"name": "Divider",
|
|
10787
|
+
"module": "components/divider/divider.component.js"
|
|
10788
10788
|
}
|
|
10789
10789
|
}
|
|
10790
10790
|
]
|
|
@@ -21516,218 +21516,80 @@
|
|
|
21516
21516
|
}
|
|
21517
21517
|
},
|
|
21518
21518
|
"parameters": [
|
|
21519
|
-
{
|
|
21520
|
-
"name": "triggerId",
|
|
21521
|
-
"type": {
|
|
21522
|
-
"text": "string | null"
|
|
21523
|
-
}
|
|
21524
|
-
}
|
|
21525
|
-
],
|
|
21526
|
-
"inheritedFrom": {
|
|
21527
|
-
"name": "MenuBar",
|
|
21528
|
-
"module": "components/menubar/menubar.component.js"
|
|
21529
|
-
}
|
|
21530
|
-
},
|
|
21531
|
-
{
|
|
21532
|
-
"kind": "method",
|
|
21533
|
-
"name": "getParentMenuItemIndex",
|
|
21534
|
-
"privacy": "private",
|
|
21535
|
-
"return": {
|
|
21536
|
-
"type": {
|
|
21537
|
-
"text": "number"
|
|
21538
|
-
}
|
|
21539
|
-
},
|
|
21540
|
-
"parameters": [
|
|
21541
|
-
{
|
|
21542
|
-
"name": "element",
|
|
21543
|
-
"type": {
|
|
21544
|
-
"text": "HTMLElement"
|
|
21545
|
-
}
|
|
21546
|
-
}
|
|
21547
|
-
],
|
|
21548
|
-
"inheritedFrom": {
|
|
21549
|
-
"name": "MenuBar",
|
|
21550
|
-
"module": "components/menubar/menubar.component.js"
|
|
21551
|
-
}
|
|
21552
|
-
},
|
|
21553
|
-
{
|
|
21554
|
-
"kind": "method",
|
|
21555
|
-
"name": "handleKeyDown",
|
|
21556
|
-
"privacy": "private",
|
|
21557
|
-
"return": {
|
|
21558
|
-
"type": {
|
|
21559
|
-
"text": "Promise<void>"
|
|
21560
|
-
}
|
|
21561
|
-
},
|
|
21562
|
-
"parameters": [
|
|
21563
|
-
{
|
|
21564
|
-
"name": "event",
|
|
21565
|
-
"type": {
|
|
21566
|
-
"text": "KeyboardEvent"
|
|
21567
|
-
}
|
|
21568
|
-
}
|
|
21569
|
-
],
|
|
21570
|
-
"inheritedFrom": {
|
|
21571
|
-
"name": "MenuBar",
|
|
21572
|
-
"module": "components/menubar/menubar.component.js"
|
|
21573
|
-
}
|
|
21574
|
-
}
|
|
21575
|
-
],
|
|
21576
|
-
"attributes": [
|
|
21577
|
-
{
|
|
21578
|
-
"name": "aria-label",
|
|
21579
|
-
"type": {
|
|
21580
|
-
"text": "string | null"
|
|
21581
|
-
},
|
|
21582
|
-
"default": "null",
|
|
21583
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
21584
|
-
"fieldName": "ariaLabel"
|
|
21585
|
-
}
|
|
21586
|
-
],
|
|
21587
|
-
"superclass": {
|
|
21588
|
-
"name": "MenuBar",
|
|
21589
|
-
"module": "/src/components/menubar/menubar.component"
|
|
21590
|
-
},
|
|
21591
|
-
"tagName": "mdc-navitemlist",
|
|
21592
|
-
"jsDoc": "/**\n * `mdc-navitemlist` is a container component used to group multiple mdc-navitem elements into a navigation list.\n * It provides the structural foundation for organizing vertical nav items and\n * ensures consistent behavior and layout within side navigation patterns.\n *\n * Note: mdc-navitemlist is typically used within the sidenavigation component.\n * @tagname mdc-navitemlist\n *\n * @slot default - Slot for projecting one or more navigation items, optional section headers and dividers.\n */",
|
|
21593
|
-
"customElement": true
|
|
21594
|
-
}
|
|
21595
|
-
],
|
|
21596
|
-
"exports": [
|
|
21597
|
-
{
|
|
21598
|
-
"kind": "js",
|
|
21599
|
-
"name": "default",
|
|
21600
|
-
"declaration": {
|
|
21601
|
-
"name": "NavItemList",
|
|
21602
|
-
"module": "components/navitemlist/navitemlist.component.js"
|
|
21603
|
-
}
|
|
21604
|
-
}
|
|
21605
|
-
]
|
|
21606
|
-
},
|
|
21607
|
-
{
|
|
21608
|
-
"kind": "javascript-module",
|
|
21609
|
-
"path": "components/optgroup/optgroup.component.js",
|
|
21610
|
-
"declarations": [
|
|
21611
|
-
{
|
|
21612
|
-
"kind": "class",
|
|
21613
|
-
"description": "optgroup component, which creates a grouping of mdc-option within a listbox element.",
|
|
21614
|
-
"name": "OptGroup",
|
|
21615
|
-
"cssProperties": [
|
|
21616
|
-
{
|
|
21617
|
-
"description": "Allows customization of the disabled option color.",
|
|
21618
|
-
"name": "--mdc-optgroup-disabled-color"
|
|
21619
|
-
}
|
|
21620
|
-
],
|
|
21621
|
-
"slots": [
|
|
21622
|
-
{
|
|
21623
|
-
"description": "This is a default slot for mdc-option elements.",
|
|
21624
|
-
"name": "default"
|
|
21625
|
-
}
|
|
21626
|
-
],
|
|
21627
|
-
"members": [
|
|
21628
|
-
{
|
|
21629
|
-
"kind": "field",
|
|
21630
|
-
"name": "label",
|
|
21631
|
-
"type": {
|
|
21632
|
-
"text": "string | undefined"
|
|
21633
|
-
},
|
|
21634
|
-
"description": "The header text to be displayed on the top of the options list.",
|
|
21635
|
-
"attribute": "label",
|
|
21636
|
-
"reflects": true
|
|
21519
|
+
{
|
|
21520
|
+
"name": "triggerId",
|
|
21521
|
+
"type": {
|
|
21522
|
+
"text": "string | null"
|
|
21523
|
+
}
|
|
21524
|
+
}
|
|
21525
|
+
],
|
|
21526
|
+
"inheritedFrom": {
|
|
21527
|
+
"name": "MenuBar",
|
|
21528
|
+
"module": "components/menubar/menubar.component.js"
|
|
21529
|
+
}
|
|
21637
21530
|
},
|
|
21638
21531
|
{
|
|
21639
21532
|
"kind": "method",
|
|
21640
|
-
"name": "
|
|
21533
|
+
"name": "getParentMenuItemIndex",
|
|
21641
21534
|
"privacy": "private",
|
|
21642
21535
|
"return": {
|
|
21643
21536
|
"type": {
|
|
21644
|
-
"text": "
|
|
21537
|
+
"text": "number"
|
|
21645
21538
|
}
|
|
21646
|
-
}
|
|
21647
|
-
},
|
|
21648
|
-
{
|
|
21649
|
-
"kind": "field",
|
|
21650
|
-
"name": "dataAriaLabel",
|
|
21651
|
-
"type": {
|
|
21652
|
-
"text": "string | null"
|
|
21653
21539
|
},
|
|
21654
|
-
"
|
|
21655
|
-
|
|
21656
|
-
|
|
21657
|
-
|
|
21540
|
+
"parameters": [
|
|
21541
|
+
{
|
|
21542
|
+
"name": "element",
|
|
21543
|
+
"type": {
|
|
21544
|
+
"text": "HTMLElement"
|
|
21545
|
+
}
|
|
21546
|
+
}
|
|
21547
|
+
],
|
|
21658
21548
|
"inheritedFrom": {
|
|
21659
|
-
"name": "
|
|
21660
|
-
"module": "
|
|
21549
|
+
"name": "MenuBar",
|
|
21550
|
+
"module": "components/menubar/menubar.component.js"
|
|
21661
21551
|
}
|
|
21662
21552
|
},
|
|
21663
21553
|
{
|
|
21664
|
-
"kind": "
|
|
21665
|
-
"name": "
|
|
21666
|
-
"
|
|
21667
|
-
|
|
21554
|
+
"kind": "method",
|
|
21555
|
+
"name": "handleKeyDown",
|
|
21556
|
+
"privacy": "private",
|
|
21557
|
+
"return": {
|
|
21558
|
+
"type": {
|
|
21559
|
+
"text": "Promise<void>"
|
|
21560
|
+
}
|
|
21668
21561
|
},
|
|
21669
|
-
"
|
|
21670
|
-
|
|
21671
|
-
|
|
21672
|
-
|
|
21562
|
+
"parameters": [
|
|
21563
|
+
{
|
|
21564
|
+
"name": "event",
|
|
21565
|
+
"type": {
|
|
21566
|
+
"text": "KeyboardEvent"
|
|
21567
|
+
}
|
|
21568
|
+
}
|
|
21569
|
+
],
|
|
21673
21570
|
"inheritedFrom": {
|
|
21674
|
-
"name": "
|
|
21675
|
-
"module": "
|
|
21571
|
+
"name": "MenuBar",
|
|
21572
|
+
"module": "components/menubar/menubar.component.js"
|
|
21676
21573
|
}
|
|
21677
21574
|
}
|
|
21678
21575
|
],
|
|
21679
21576
|
"attributes": [
|
|
21680
21577
|
{
|
|
21681
|
-
"name": "label",
|
|
21682
|
-
"type": {
|
|
21683
|
-
"text": "string | undefined"
|
|
21684
|
-
},
|
|
21685
|
-
"description": "The header text to be displayed on the top of the options list.",
|
|
21686
|
-
"fieldName": "label"
|
|
21687
|
-
},
|
|
21688
|
-
{
|
|
21689
|
-
"name": "data-aria-label",
|
|
21578
|
+
"name": "aria-label",
|
|
21690
21579
|
"type": {
|
|
21691
21580
|
"text": "string | null"
|
|
21692
21581
|
},
|
|
21693
21582
|
"default": "null",
|
|
21694
|
-
"description": "
|
|
21695
|
-
"fieldName": "
|
|
21696
|
-
"inheritedFrom": {
|
|
21697
|
-
"name": "DataAriaLabelMixin",
|
|
21698
|
-
"module": "src/utils/mixins/DataAriaLabelMixin.ts"
|
|
21699
|
-
}
|
|
21700
|
-
},
|
|
21701
|
-
{
|
|
21702
|
-
"name": "disabled",
|
|
21703
|
-
"type": {
|
|
21704
|
-
"text": "boolean | undefined"
|
|
21705
|
-
},
|
|
21706
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
21707
|
-
"default": "undefined",
|
|
21708
|
-
"fieldName": "disabled",
|
|
21709
|
-
"inheritedFrom": {
|
|
21710
|
-
"name": "DisabledMixin",
|
|
21711
|
-
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
21712
|
-
}
|
|
21713
|
-
}
|
|
21714
|
-
],
|
|
21715
|
-
"mixins": [
|
|
21716
|
-
{
|
|
21717
|
-
"name": "DataAriaLabelMixin",
|
|
21718
|
-
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
|
21719
|
-
},
|
|
21720
|
-
{
|
|
21721
|
-
"name": "DisabledMixin",
|
|
21722
|
-
"module": "/src/utils/mixins/DisabledMixin"
|
|
21583
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
21584
|
+
"fieldName": "ariaLabel"
|
|
21723
21585
|
}
|
|
21724
21586
|
],
|
|
21725
21587
|
"superclass": {
|
|
21726
|
-
"name": "
|
|
21727
|
-
"module": "/src/
|
|
21588
|
+
"name": "MenuBar",
|
|
21589
|
+
"module": "/src/components/menubar/menubar.component"
|
|
21728
21590
|
},
|
|
21729
|
-
"tagName": "mdc-
|
|
21730
|
-
"jsDoc": "/**\n *
|
|
21591
|
+
"tagName": "mdc-navitemlist",
|
|
21592
|
+
"jsDoc": "/**\n * `mdc-navitemlist` is a container component used to group multiple mdc-navitem elements into a navigation list.\n * It provides the structural foundation for organizing vertical nav items and\n * ensures consistent behavior and layout within side navigation patterns.\n *\n * Note: mdc-navitemlist is typically used within the sidenavigation component.\n * @tagname mdc-navitemlist\n *\n * @slot default - Slot for projecting one or more navigation items, optional section headers and dividers.\n */",
|
|
21731
21593
|
"customElement": true
|
|
21732
21594
|
}
|
|
21733
21595
|
],
|
|
@@ -21736,8 +21598,8 @@
|
|
|
21736
21598
|
"kind": "js",
|
|
21737
21599
|
"name": "default",
|
|
21738
21600
|
"declaration": {
|
|
21739
|
-
"name": "
|
|
21740
|
-
"module": "components/
|
|
21601
|
+
"name": "NavItemList",
|
|
21602
|
+
"module": "components/navitemlist/navitemlist.component.js"
|
|
21741
21603
|
}
|
|
21742
21604
|
}
|
|
21743
21605
|
]
|
|
@@ -25292,6 +25154,144 @@
|
|
|
25292
25154
|
}
|
|
25293
25155
|
]
|
|
25294
25156
|
},
|
|
25157
|
+
{
|
|
25158
|
+
"kind": "javascript-module",
|
|
25159
|
+
"path": "components/optgroup/optgroup.component.js",
|
|
25160
|
+
"declarations": [
|
|
25161
|
+
{
|
|
25162
|
+
"kind": "class",
|
|
25163
|
+
"description": "optgroup component, which creates a grouping of mdc-option within a listbox element.",
|
|
25164
|
+
"name": "OptGroup",
|
|
25165
|
+
"cssProperties": [
|
|
25166
|
+
{
|
|
25167
|
+
"description": "Allows customization of the disabled option color.",
|
|
25168
|
+
"name": "--mdc-optgroup-disabled-color"
|
|
25169
|
+
}
|
|
25170
|
+
],
|
|
25171
|
+
"slots": [
|
|
25172
|
+
{
|
|
25173
|
+
"description": "This is a default slot for mdc-option elements.",
|
|
25174
|
+
"name": "default"
|
|
25175
|
+
}
|
|
25176
|
+
],
|
|
25177
|
+
"members": [
|
|
25178
|
+
{
|
|
25179
|
+
"kind": "field",
|
|
25180
|
+
"name": "label",
|
|
25181
|
+
"type": {
|
|
25182
|
+
"text": "string | undefined"
|
|
25183
|
+
},
|
|
25184
|
+
"description": "The header text to be displayed on the top of the options list.",
|
|
25185
|
+
"attribute": "label",
|
|
25186
|
+
"reflects": true
|
|
25187
|
+
},
|
|
25188
|
+
{
|
|
25189
|
+
"kind": "method",
|
|
25190
|
+
"name": "setDisabledForAllOptions",
|
|
25191
|
+
"privacy": "private",
|
|
25192
|
+
"return": {
|
|
25193
|
+
"type": {
|
|
25194
|
+
"text": "void"
|
|
25195
|
+
}
|
|
25196
|
+
}
|
|
25197
|
+
},
|
|
25198
|
+
{
|
|
25199
|
+
"kind": "field",
|
|
25200
|
+
"name": "dataAriaLabel",
|
|
25201
|
+
"type": {
|
|
25202
|
+
"text": "string | null"
|
|
25203
|
+
},
|
|
25204
|
+
"default": "null",
|
|
25205
|
+
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
25206
|
+
"attribute": "data-aria-label",
|
|
25207
|
+
"reflects": true,
|
|
25208
|
+
"inheritedFrom": {
|
|
25209
|
+
"name": "DataAriaLabelMixin",
|
|
25210
|
+
"module": "utils/mixins/DataAriaLabelMixin.js"
|
|
25211
|
+
}
|
|
25212
|
+
},
|
|
25213
|
+
{
|
|
25214
|
+
"kind": "field",
|
|
25215
|
+
"name": "disabled",
|
|
25216
|
+
"type": {
|
|
25217
|
+
"text": "boolean | undefined"
|
|
25218
|
+
},
|
|
25219
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
25220
|
+
"default": "undefined",
|
|
25221
|
+
"attribute": "disabled",
|
|
25222
|
+
"reflects": true,
|
|
25223
|
+
"inheritedFrom": {
|
|
25224
|
+
"name": "DisabledMixin",
|
|
25225
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
25226
|
+
}
|
|
25227
|
+
}
|
|
25228
|
+
],
|
|
25229
|
+
"attributes": [
|
|
25230
|
+
{
|
|
25231
|
+
"name": "label",
|
|
25232
|
+
"type": {
|
|
25233
|
+
"text": "string | undefined"
|
|
25234
|
+
},
|
|
25235
|
+
"description": "The header text to be displayed on the top of the options list.",
|
|
25236
|
+
"fieldName": "label"
|
|
25237
|
+
},
|
|
25238
|
+
{
|
|
25239
|
+
"name": "data-aria-label",
|
|
25240
|
+
"type": {
|
|
25241
|
+
"text": "string | null"
|
|
25242
|
+
},
|
|
25243
|
+
"default": "null",
|
|
25244
|
+
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
25245
|
+
"fieldName": "dataAriaLabel",
|
|
25246
|
+
"inheritedFrom": {
|
|
25247
|
+
"name": "DataAriaLabelMixin",
|
|
25248
|
+
"module": "src/utils/mixins/DataAriaLabelMixin.ts"
|
|
25249
|
+
}
|
|
25250
|
+
},
|
|
25251
|
+
{
|
|
25252
|
+
"name": "disabled",
|
|
25253
|
+
"type": {
|
|
25254
|
+
"text": "boolean | undefined"
|
|
25255
|
+
},
|
|
25256
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
25257
|
+
"default": "undefined",
|
|
25258
|
+
"fieldName": "disabled",
|
|
25259
|
+
"inheritedFrom": {
|
|
25260
|
+
"name": "DisabledMixin",
|
|
25261
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
25262
|
+
}
|
|
25263
|
+
}
|
|
25264
|
+
],
|
|
25265
|
+
"mixins": [
|
|
25266
|
+
{
|
|
25267
|
+
"name": "DataAriaLabelMixin",
|
|
25268
|
+
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
|
25269
|
+
},
|
|
25270
|
+
{
|
|
25271
|
+
"name": "DisabledMixin",
|
|
25272
|
+
"module": "/src/utils/mixins/DisabledMixin"
|
|
25273
|
+
}
|
|
25274
|
+
],
|
|
25275
|
+
"superclass": {
|
|
25276
|
+
"name": "Component",
|
|
25277
|
+
"module": "/src/models"
|
|
25278
|
+
},
|
|
25279
|
+
"tagName": "mdc-optgroup",
|
|
25280
|
+
"jsDoc": "/**\n * optgroup component, which creates a grouping of mdc-option within a listbox element.\n *\n * @dependency mdc-text\n *\n * @tagname mdc-optgroup\n *\n * @slot default - This is a default slot for mdc-option elements.\n *\n * @cssproperty --mdc-optgroup-disabled-color - Allows customization of the disabled option color.\n */",
|
|
25281
|
+
"customElement": true
|
|
25282
|
+
}
|
|
25283
|
+
],
|
|
25284
|
+
"exports": [
|
|
25285
|
+
{
|
|
25286
|
+
"kind": "js",
|
|
25287
|
+
"name": "default",
|
|
25288
|
+
"declaration": {
|
|
25289
|
+
"name": "OptGroup",
|
|
25290
|
+
"module": "components/optgroup/optgroup.component.js"
|
|
25291
|
+
}
|
|
25292
|
+
}
|
|
25293
|
+
]
|
|
25294
|
+
},
|
|
25295
25295
|
{
|
|
25296
25296
|
"kind": "javascript-module",
|
|
25297
25297
|
"path": "components/presence/presence.component.js",
|