@momentum-design/components 0.75.4 → 0.76.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +1344 -1344
- package/dist/react/index.d.ts +5 -5
- package/dist/react/index.js +5 -5
- package/package.json +1 -1
|
@@ -4,754 +4,754 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "components/
|
|
7
|
+
"path": "components/appheader/appheader.component.js",
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "mdc-
|
|
12
|
-
"name": "
|
|
13
|
-
"
|
|
11
|
+
"description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
|
|
12
|
+
"name": "Appheader",
|
|
13
|
+
"cssParts": [
|
|
14
14
|
{
|
|
15
|
-
"description": "The
|
|
16
|
-
"name": "
|
|
15
|
+
"description": "The main container for styling the header.",
|
|
16
|
+
"name": "container"
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
|
-
"description": "The
|
|
20
|
-
"name": "
|
|
19
|
+
"description": "The leading section of the header.",
|
|
20
|
+
"name": "leading-section"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
|
-
"description": "The
|
|
24
|
-
"name": "
|
|
23
|
+
"description": "The center section of the header.",
|
|
24
|
+
"name": "center-section"
|
|
25
25
|
},
|
|
26
26
|
{
|
|
27
|
-
"description": "The
|
|
28
|
-
"name": "
|
|
27
|
+
"description": "The trailing section of the header.",
|
|
28
|
+
"name": "trailing-section"
|
|
29
29
|
}
|
|
30
30
|
],
|
|
31
|
-
"
|
|
31
|
+
"slots": [
|
|
32
32
|
{
|
|
33
|
-
"
|
|
34
|
-
"name": "
|
|
35
|
-
"type": {
|
|
36
|
-
"text": "VariantType"
|
|
37
|
-
},
|
|
38
|
-
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
39
|
-
"default": "neutral",
|
|
40
|
-
"attribute": "variant"
|
|
33
|
+
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
34
|
+
"name": "leading"
|
|
41
35
|
},
|
|
42
36
|
{
|
|
43
|
-
"
|
|
44
|
-
"name": "
|
|
45
|
-
"type": {
|
|
46
|
-
"text": "string"
|
|
47
|
-
},
|
|
48
|
-
"default": "''",
|
|
49
|
-
"description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
|
50
|
-
"attribute": "label"
|
|
37
|
+
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
38
|
+
"name": "center"
|
|
51
39
|
},
|
|
40
|
+
{
|
|
41
|
+
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
42
|
+
"name": "trailing"
|
|
43
|
+
}
|
|
44
|
+
],
|
|
45
|
+
"members": [],
|
|
46
|
+
"superclass": {
|
|
47
|
+
"name": "Component",
|
|
48
|
+
"module": "/src/models"
|
|
49
|
+
},
|
|
50
|
+
"tagName": "mdc-appheader",
|
|
51
|
+
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
|
52
|
+
"customElement": true
|
|
53
|
+
}
|
|
54
|
+
],
|
|
55
|
+
"exports": [
|
|
56
|
+
{
|
|
57
|
+
"kind": "js",
|
|
58
|
+
"name": "default",
|
|
59
|
+
"declaration": {
|
|
60
|
+
"name": "Appheader",
|
|
61
|
+
"module": "components/appheader/appheader.component.js"
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
]
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"kind": "javascript-module",
|
|
68
|
+
"path": "components/animation/animation.component.js",
|
|
69
|
+
"declarations": [
|
|
70
|
+
{
|
|
71
|
+
"kind": "class",
|
|
72
|
+
"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.",
|
|
73
|
+
"name": "Animation",
|
|
74
|
+
"members": [
|
|
52
75
|
{
|
|
53
76
|
"kind": "field",
|
|
54
|
-
"name": "
|
|
77
|
+
"name": "name",
|
|
55
78
|
"type": {
|
|
56
|
-
"text": "
|
|
79
|
+
"text": "AnimationNames | undefined"
|
|
57
80
|
},
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"reflects": true,
|
|
62
|
-
"inheritedFrom": {
|
|
63
|
-
"name": "TabIndexMixin",
|
|
64
|
-
"module": "utils/mixins/TabIndexMixin.js"
|
|
65
|
-
}
|
|
81
|
+
"description": "Name of the animation (= filename)",
|
|
82
|
+
"attribute": "name",
|
|
83
|
+
"reflects": true
|
|
66
84
|
},
|
|
67
85
|
{
|
|
68
86
|
"kind": "field",
|
|
69
|
-
"name": "
|
|
87
|
+
"name": "loop",
|
|
70
88
|
"type": {
|
|
71
|
-
"text": "
|
|
89
|
+
"text": "LoopType | undefined"
|
|
72
90
|
},
|
|
73
|
-
"description": "
|
|
74
|
-
"
|
|
75
|
-
"
|
|
76
|
-
"reflects": true,
|
|
77
|
-
"inheritedFrom": {
|
|
78
|
-
"name": "DisabledMixin",
|
|
79
|
-
"module": "utils/mixins/DisabledMixin.js"
|
|
80
|
-
}
|
|
91
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
92
|
+
"attribute": "loop",
|
|
93
|
+
"reflects": true
|
|
81
94
|
},
|
|
82
95
|
{
|
|
83
96
|
"kind": "field",
|
|
84
|
-
"name": "
|
|
97
|
+
"name": "autoplay",
|
|
85
98
|
"type": {
|
|
86
99
|
"text": "boolean | undefined"
|
|
87
100
|
},
|
|
88
|
-
"description": "
|
|
89
|
-
"
|
|
90
|
-
"
|
|
91
|
-
"reflects": true,
|
|
92
|
-
"inheritedFrom": {
|
|
93
|
-
"name": "Buttonsimple",
|
|
94
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
95
|
-
}
|
|
101
|
+
"description": "Weather start the animation automatically",
|
|
102
|
+
"attribute": "autoplay",
|
|
103
|
+
"reflects": true
|
|
96
104
|
},
|
|
97
105
|
{
|
|
98
106
|
"kind": "field",
|
|
99
|
-
"name": "
|
|
107
|
+
"name": "ariaLabel",
|
|
100
108
|
"type": {
|
|
101
|
-
"text": "
|
|
109
|
+
"text": "string | null"
|
|
102
110
|
},
|
|
103
|
-
"
|
|
104
|
-
"
|
|
105
|
-
"attribute": "
|
|
106
|
-
"reflects": true,
|
|
107
|
-
"inheritedFrom": {
|
|
108
|
-
"name": "Buttonsimple",
|
|
109
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
110
|
-
}
|
|
111
|
+
"default": "null",
|
|
112
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
113
|
+
"attribute": "aria-label"
|
|
111
114
|
},
|
|
112
115
|
{
|
|
113
116
|
"kind": "field",
|
|
114
|
-
"name": "
|
|
117
|
+
"name": "ariaLabelledBy",
|
|
115
118
|
"type": {
|
|
116
|
-
"text": "
|
|
119
|
+
"text": "string | null"
|
|
117
120
|
},
|
|
118
|
-
"
|
|
119
|
-
"
|
|
120
|
-
"attribute": "
|
|
121
|
-
"reflects": true,
|
|
122
|
-
"inheritedFrom": {
|
|
123
|
-
"name": "Buttonsimple",
|
|
124
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
125
|
-
}
|
|
121
|
+
"default": "null",
|
|
122
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
123
|
+
"attribute": "aria-labelledby"
|
|
126
124
|
},
|
|
127
125
|
{
|
|
128
126
|
"kind": "field",
|
|
129
|
-
"name": "
|
|
130
|
-
"
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
"
|
|
134
|
-
"
|
|
135
|
-
"name": "Buttonsimple",
|
|
136
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
137
|
-
}
|
|
127
|
+
"name": "lottieInstance",
|
|
128
|
+
"type": {
|
|
129
|
+
"text": "AnimationItem | undefined"
|
|
130
|
+
},
|
|
131
|
+
"privacy": "private",
|
|
132
|
+
"description": "Lottie animation instance"
|
|
138
133
|
},
|
|
139
134
|
{
|
|
140
135
|
"kind": "field",
|
|
141
|
-
"name": "
|
|
136
|
+
"name": "containerRef",
|
|
142
137
|
"type": {
|
|
143
|
-
"text": "
|
|
138
|
+
"text": "Ref<HTMLDivElement>"
|
|
144
139
|
},
|
|
145
|
-
"
|
|
146
|
-
"
|
|
147
|
-
"attribute": "ariaStateKey",
|
|
148
|
-
"reflects": true,
|
|
149
|
-
"inheritedFrom": {
|
|
150
|
-
"name": "Buttonsimple",
|
|
151
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
152
|
-
}
|
|
140
|
+
"privacy": "private",
|
|
141
|
+
"description": "Container for the animation"
|
|
153
142
|
},
|
|
154
143
|
{
|
|
155
144
|
"kind": "field",
|
|
156
|
-
"name": "
|
|
157
|
-
"
|
|
158
|
-
|
|
159
|
-
},
|
|
160
|
-
"description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
|
|
161
|
-
"default": "button",
|
|
162
|
-
"attribute": "type",
|
|
163
|
-
"reflects": true,
|
|
164
|
-
"inheritedFrom": {
|
|
165
|
-
"name": "Buttonsimple",
|
|
166
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
167
|
-
}
|
|
145
|
+
"name": "animation",
|
|
146
|
+
"description": "Exposed API of the animation library (lottie)",
|
|
147
|
+
"readonly": true
|
|
168
148
|
},
|
|
169
149
|
{
|
|
170
150
|
"kind": "method",
|
|
171
|
-
"name": "
|
|
172
|
-
"privacy": "
|
|
173
|
-
"inheritedFrom": {
|
|
174
|
-
"name": "Buttonsimple",
|
|
175
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
176
|
-
}
|
|
151
|
+
"name": "getLoopValue",
|
|
152
|
+
"privacy": "private"
|
|
177
153
|
},
|
|
178
154
|
{
|
|
179
155
|
"kind": "method",
|
|
180
|
-
"name": "
|
|
181
|
-
"privacy": "
|
|
156
|
+
"name": "onLoadSuccessHandler",
|
|
157
|
+
"privacy": "private",
|
|
182
158
|
"parameters": [
|
|
183
159
|
{
|
|
184
|
-
"name": "
|
|
185
|
-
"type": {
|
|
186
|
-
"text": "HTMLElement"
|
|
187
|
-
},
|
|
188
|
-
"description": "The button element"
|
|
189
|
-
},
|
|
190
|
-
{
|
|
191
|
-
"name": "active",
|
|
192
|
-
"optional": true,
|
|
160
|
+
"name": "animationData",
|
|
193
161
|
"type": {
|
|
194
|
-
"text": "
|
|
195
|
-
}
|
|
196
|
-
"description": "The active state of the element"
|
|
162
|
+
"text": "any"
|
|
163
|
+
}
|
|
197
164
|
}
|
|
198
165
|
],
|
|
199
|
-
"description": "
|
|
200
|
-
"inheritedFrom": {
|
|
201
|
-
"name": "Buttonsimple",
|
|
202
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
203
|
-
}
|
|
166
|
+
"description": "Create new lotty instance for the loaded data"
|
|
204
167
|
},
|
|
205
168
|
{
|
|
206
169
|
"kind": "method",
|
|
207
|
-
"name": "
|
|
170
|
+
"name": "onLoadFailHandler",
|
|
208
171
|
"privacy": "private",
|
|
209
172
|
"parameters": [
|
|
210
173
|
{
|
|
211
|
-
"name": "
|
|
212
|
-
"type": {
|
|
213
|
-
"text": "HTMLElement"
|
|
214
|
-
},
|
|
215
|
-
"description": "The button element."
|
|
216
|
-
},
|
|
217
|
-
{
|
|
218
|
-
"name": "softDisabled",
|
|
219
|
-
"optional": true,
|
|
174
|
+
"name": "error",
|
|
220
175
|
"type": {
|
|
221
|
-
"text": "
|
|
222
|
-
}
|
|
223
|
-
"description": "The soft-disabled state."
|
|
176
|
+
"text": "Error"
|
|
177
|
+
}
|
|
224
178
|
}
|
|
225
179
|
],
|
|
226
|
-
"description": "
|
|
227
|
-
"inheritedFrom": {
|
|
228
|
-
"name": "Buttonsimple",
|
|
229
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
230
|
-
}
|
|
180
|
+
"description": "Error handler for animation loading"
|
|
231
181
|
},
|
|
232
182
|
{
|
|
233
183
|
"kind": "method",
|
|
234
|
-
"name": "
|
|
184
|
+
"name": "getAnimationData",
|
|
235
185
|
"privacy": "private",
|
|
236
|
-
"
|
|
237
|
-
{
|
|
238
|
-
"name": "element",
|
|
239
|
-
"type": {
|
|
240
|
-
"text": "HTMLElement"
|
|
241
|
-
},
|
|
242
|
-
"description": "The button element."
|
|
243
|
-
},
|
|
244
|
-
{
|
|
245
|
-
"name": "disabled",
|
|
246
|
-
"type": {
|
|
247
|
-
"text": "boolean"
|
|
248
|
-
},
|
|
249
|
-
"description": "The disabled state."
|
|
250
|
-
}
|
|
251
|
-
],
|
|
252
|
-
"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.",
|
|
253
|
-
"inheritedFrom": {
|
|
254
|
-
"name": "Buttonsimple",
|
|
255
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
256
|
-
}
|
|
186
|
+
"description": "Import animation data dynamically"
|
|
257
187
|
},
|
|
258
188
|
{
|
|
259
|
-
"kind": "
|
|
260
|
-
"name": "
|
|
261
|
-
"
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
}
|
|
266
|
-
},
|
|
189
|
+
"kind": "field",
|
|
190
|
+
"name": "onCompleteHandler",
|
|
191
|
+
"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."
|
|
192
|
+
}
|
|
193
|
+
],
|
|
194
|
+
"events": [
|
|
267
195
|
{
|
|
268
|
-
"
|
|
269
|
-
"
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
"
|
|
273
|
-
|
|
274
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
275
|
-
}
|
|
196
|
+
"name": "load",
|
|
197
|
+
"type": {
|
|
198
|
+
"text": "CustomEvent"
|
|
199
|
+
},
|
|
200
|
+
"description": "(React: onLoad) This event is dispatched when the animation is loaded",
|
|
201
|
+
"reactName": "onLoad"
|
|
276
202
|
},
|
|
277
203
|
{
|
|
278
|
-
"
|
|
279
|
-
"name": "
|
|
280
|
-
"
|
|
281
|
-
"parameters": [
|
|
282
|
-
{
|
|
283
|
-
"name": "event",
|
|
284
|
-
"type": {
|
|
285
|
-
"text": "KeyboardEvent"
|
|
286
|
-
},
|
|
287
|
-
"description": "The keyboard event."
|
|
288
|
-
}
|
|
289
|
-
],
|
|
290
|
-
"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.",
|
|
291
|
-
"inheritedFrom": {
|
|
292
|
-
"name": "Buttonsimple",
|
|
293
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
294
|
-
}
|
|
204
|
+
"description": "(React: onComplete) This event is dispatched when all animation loops completed",
|
|
205
|
+
"name": "complete",
|
|
206
|
+
"reactName": "onComplete"
|
|
295
207
|
},
|
|
296
208
|
{
|
|
297
|
-
"
|
|
298
|
-
"name": "
|
|
299
|
-
"
|
|
300
|
-
"parameters": [
|
|
301
|
-
{
|
|
302
|
-
"name": "event",
|
|
303
|
-
"type": {
|
|
304
|
-
"text": "KeyboardEvent"
|
|
305
|
-
},
|
|
306
|
-
"description": "The keyboard event."
|
|
307
|
-
}
|
|
308
|
-
],
|
|
309
|
-
"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.",
|
|
310
|
-
"inheritedFrom": {
|
|
311
|
-
"name": "Buttonsimple",
|
|
312
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
313
|
-
}
|
|
209
|
+
"description": "(React: onError) This event is dispatched when animation loading failed",
|
|
210
|
+
"name": "error",
|
|
211
|
+
"reactName": "onError"
|
|
314
212
|
}
|
|
315
213
|
],
|
|
316
214
|
"attributes": [
|
|
317
215
|
{
|
|
216
|
+
"name": "name",
|
|
217
|
+
"type": {
|
|
218
|
+
"text": "AnimationNames | undefined"
|
|
219
|
+
},
|
|
220
|
+
"description": "Name of the animation (= filename)",
|
|
221
|
+
"fieldName": "name"
|
|
222
|
+
},
|
|
223
|
+
{
|
|
224
|
+
"name": "loop",
|
|
225
|
+
"type": {
|
|
226
|
+
"text": "LoopType | undefined"
|
|
227
|
+
},
|
|
228
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
229
|
+
"fieldName": "loop"
|
|
230
|
+
},
|
|
231
|
+
{
|
|
232
|
+
"name": "autoplay",
|
|
233
|
+
"type": {
|
|
234
|
+
"text": "boolean | undefined"
|
|
235
|
+
},
|
|
236
|
+
"description": "Weather start the animation automatically",
|
|
237
|
+
"fieldName": "autoplay"
|
|
238
|
+
},
|
|
239
|
+
{
|
|
240
|
+
"name": "aria-label",
|
|
241
|
+
"type": {
|
|
242
|
+
"text": "string | null"
|
|
243
|
+
},
|
|
244
|
+
"default": "null",
|
|
245
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
246
|
+
"fieldName": "ariaLabel"
|
|
247
|
+
},
|
|
248
|
+
{
|
|
249
|
+
"name": "aria-labelledby",
|
|
250
|
+
"type": {
|
|
251
|
+
"text": "string | null"
|
|
252
|
+
},
|
|
253
|
+
"default": "null",
|
|
254
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
255
|
+
"fieldName": "ariaLabelledBy"
|
|
256
|
+
}
|
|
257
|
+
],
|
|
258
|
+
"superclass": {
|
|
259
|
+
"name": "Component",
|
|
260
|
+
"module": "/src/models"
|
|
261
|
+
},
|
|
262
|
+
"tagName": "mdc-animation",
|
|
263
|
+
"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 */",
|
|
264
|
+
"customElement": true
|
|
265
|
+
}
|
|
266
|
+
],
|
|
267
|
+
"exports": [
|
|
268
|
+
{
|
|
269
|
+
"kind": "js",
|
|
270
|
+
"name": "default",
|
|
271
|
+
"declaration": {
|
|
272
|
+
"name": "Animation",
|
|
273
|
+
"module": "components/animation/animation.component.js"
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
]
|
|
277
|
+
},
|
|
278
|
+
{
|
|
279
|
+
"kind": "javascript-module",
|
|
280
|
+
"path": "components/alertchip/alertchip.component.js",
|
|
281
|
+
"declarations": [
|
|
282
|
+
{
|
|
283
|
+
"kind": "class",
|
|
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
|
+
"members": [
|
|
305
|
+
{
|
|
306
|
+
"kind": "field",
|
|
318
307
|
"name": "variant",
|
|
319
308
|
"type": {
|
|
320
309
|
"text": "VariantType"
|
|
321
310
|
},
|
|
322
311
|
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
323
312
|
"default": "neutral",
|
|
324
|
-
"
|
|
313
|
+
"attribute": "variant"
|
|
325
314
|
},
|
|
326
315
|
{
|
|
316
|
+
"kind": "field",
|
|
327
317
|
"name": "label",
|
|
328
318
|
"type": {
|
|
329
319
|
"text": "string"
|
|
330
320
|
},
|
|
331
321
|
"default": "''",
|
|
332
322
|
"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
|
-
"
|
|
323
|
+
"attribute": "label"
|
|
334
324
|
},
|
|
335
325
|
{
|
|
326
|
+
"kind": "field",
|
|
336
327
|
"name": "tabIndex",
|
|
337
328
|
"type": {
|
|
338
329
|
"text": "number"
|
|
339
330
|
},
|
|
340
331
|
"default": "0",
|
|
341
332
|
"description": "This property specifies the tab order of the element.",
|
|
342
|
-
"
|
|
333
|
+
"attribute": "tabIndex",
|
|
334
|
+
"reflects": true,
|
|
343
335
|
"inheritedFrom": {
|
|
344
336
|
"name": "TabIndexMixin",
|
|
345
|
-
"module": "
|
|
337
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
346
338
|
}
|
|
347
339
|
},
|
|
348
340
|
{
|
|
341
|
+
"kind": "field",
|
|
349
342
|
"name": "disabled",
|
|
350
343
|
"type": {
|
|
351
344
|
"text": "boolean | undefined"
|
|
352
345
|
},
|
|
353
346
|
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
354
347
|
"default": "undefined",
|
|
355
|
-
"
|
|
348
|
+
"attribute": "disabled",
|
|
349
|
+
"reflects": true,
|
|
356
350
|
"inheritedFrom": {
|
|
357
351
|
"name": "DisabledMixin",
|
|
358
|
-
"module": "
|
|
352
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
359
353
|
}
|
|
360
354
|
},
|
|
361
355
|
{
|
|
356
|
+
"kind": "field",
|
|
362
357
|
"name": "active",
|
|
363
358
|
"type": {
|
|
364
359
|
"text": "boolean | undefined"
|
|
365
360
|
},
|
|
366
361
|
"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.",
|
|
367
362
|
"default": "undefined",
|
|
368
|
-
"
|
|
363
|
+
"attribute": "active",
|
|
364
|
+
"reflects": true,
|
|
369
365
|
"inheritedFrom": {
|
|
370
366
|
"name": "Buttonsimple",
|
|
371
|
-
"module": "
|
|
367
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
372
368
|
}
|
|
373
369
|
},
|
|
374
370
|
{
|
|
375
|
-
"
|
|
371
|
+
"kind": "field",
|
|
372
|
+
"name": "softDisabled",
|
|
376
373
|
"type": {
|
|
377
374
|
"text": "boolean | undefined"
|
|
378
375
|
},
|
|
379
376
|
"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.",
|
|
380
377
|
"default": "undefined",
|
|
381
|
-
"
|
|
378
|
+
"attribute": "soft-disabled",
|
|
379
|
+
"reflects": true,
|
|
382
380
|
"inheritedFrom": {
|
|
383
381
|
"name": "Buttonsimple",
|
|
384
|
-
"module": "
|
|
382
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
385
383
|
}
|
|
386
384
|
},
|
|
387
385
|
{
|
|
386
|
+
"kind": "field",
|
|
388
387
|
"name": "size",
|
|
389
388
|
"type": {
|
|
390
389
|
"text": "ButtonSize"
|
|
391
390
|
},
|
|
392
391
|
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
393
392
|
"default": "32",
|
|
394
|
-
"
|
|
393
|
+
"attribute": "size",
|
|
394
|
+
"reflects": true,
|
|
395
395
|
"inheritedFrom": {
|
|
396
396
|
"name": "Buttonsimple",
|
|
397
|
-
"module": "
|
|
397
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
398
398
|
}
|
|
399
399
|
},
|
|
400
400
|
{
|
|
401
|
+
"kind": "field",
|
|
401
402
|
"name": "role",
|
|
402
403
|
"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.",
|
|
403
404
|
"default": "button",
|
|
404
|
-
"
|
|
405
|
+
"attribute": "role",
|
|
406
|
+
"reflects": true,
|
|
405
407
|
"inheritedFrom": {
|
|
406
408
|
"name": "Buttonsimple",
|
|
407
|
-
"module": "
|
|
409
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
408
410
|
}
|
|
409
411
|
},
|
|
410
412
|
{
|
|
413
|
+
"kind": "field",
|
|
411
414
|
"name": "ariaStateKey",
|
|
412
415
|
"type": {
|
|
413
416
|
"text": "string | undefined"
|
|
414
417
|
},
|
|
415
418
|
"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`",
|
|
416
419
|
"default": "'aria-pressed' (when)",
|
|
417
|
-
"
|
|
420
|
+
"attribute": "ariaStateKey",
|
|
421
|
+
"reflects": true,
|
|
418
422
|
"inheritedFrom": {
|
|
419
423
|
"name": "Buttonsimple",
|
|
420
|
-
"module": "
|
|
424
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
421
425
|
}
|
|
422
426
|
},
|
|
423
427
|
{
|
|
428
|
+
"kind": "field",
|
|
424
429
|
"name": "type",
|
|
425
430
|
"type": {
|
|
426
431
|
"text": "ButtonType"
|
|
427
432
|
},
|
|
428
433
|
"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.",
|
|
429
434
|
"default": "button",
|
|
430
|
-
"
|
|
435
|
+
"attribute": "type",
|
|
436
|
+
"reflects": true,
|
|
431
437
|
"inheritedFrom": {
|
|
432
438
|
"name": "Buttonsimple",
|
|
433
|
-
"module": "
|
|
439
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
434
440
|
}
|
|
435
|
-
}
|
|
436
|
-
],
|
|
437
|
-
"superclass": {
|
|
438
|
-
"name": "Buttonsimple",
|
|
439
|
-
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
440
|
-
},
|
|
441
|
-
"tagName": "mdc-alertchip",
|
|
442
|
-
"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 */",
|
|
443
|
-
"customElement": true,
|
|
444
|
-
"events": [
|
|
441
|
+
},
|
|
445
442
|
{
|
|
446
|
-
"
|
|
447
|
-
"name": "
|
|
448
|
-
"
|
|
443
|
+
"kind": "method",
|
|
444
|
+
"name": "executeAction",
|
|
445
|
+
"privacy": "protected",
|
|
449
446
|
"inheritedFrom": {
|
|
450
447
|
"name": "Buttonsimple",
|
|
451
|
-
"module": "
|
|
448
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
452
449
|
}
|
|
453
450
|
},
|
|
454
451
|
{
|
|
455
|
-
"
|
|
456
|
-
"name": "
|
|
457
|
-
"
|
|
452
|
+
"kind": "method",
|
|
453
|
+
"name": "setActive",
|
|
454
|
+
"privacy": "protected",
|
|
455
|
+
"parameters": [
|
|
456
|
+
{
|
|
457
|
+
"name": "element",
|
|
458
|
+
"type": {
|
|
459
|
+
"text": "HTMLElement"
|
|
460
|
+
},
|
|
461
|
+
"description": "The button element"
|
|
462
|
+
},
|
|
463
|
+
{
|
|
464
|
+
"name": "active",
|
|
465
|
+
"optional": true,
|
|
466
|
+
"type": {
|
|
467
|
+
"text": "boolean"
|
|
468
|
+
},
|
|
469
|
+
"description": "The active state of the element"
|
|
470
|
+
}
|
|
471
|
+
],
|
|
472
|
+
"description": "Sets the ariaStateKey attributes based on the active state of the button.",
|
|
458
473
|
"inheritedFrom": {
|
|
459
474
|
"name": "Buttonsimple",
|
|
460
|
-
"module": "
|
|
475
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
461
476
|
}
|
|
462
477
|
},
|
|
463
478
|
{
|
|
464
|
-
"
|
|
465
|
-
"name": "
|
|
466
|
-
"
|
|
479
|
+
"kind": "method",
|
|
480
|
+
"name": "setSoftDisabled",
|
|
481
|
+
"privacy": "private",
|
|
482
|
+
"parameters": [
|
|
483
|
+
{
|
|
484
|
+
"name": "element",
|
|
485
|
+
"type": {
|
|
486
|
+
"text": "HTMLElement"
|
|
487
|
+
},
|
|
488
|
+
"description": "The button element."
|
|
489
|
+
},
|
|
490
|
+
{
|
|
491
|
+
"name": "softDisabled",
|
|
492
|
+
"optional": true,
|
|
493
|
+
"type": {
|
|
494
|
+
"text": "boolean"
|
|
495
|
+
},
|
|
496
|
+
"description": "The soft-disabled state."
|
|
497
|
+
}
|
|
498
|
+
],
|
|
499
|
+
"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.",
|
|
467
500
|
"inheritedFrom": {
|
|
468
501
|
"name": "Buttonsimple",
|
|
469
|
-
"module": "
|
|
502
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
470
503
|
}
|
|
471
504
|
},
|
|
472
505
|
{
|
|
473
|
-
"
|
|
474
|
-
"name": "
|
|
475
|
-
"
|
|
506
|
+
"kind": "method",
|
|
507
|
+
"name": "setDisabled",
|
|
508
|
+
"privacy": "private",
|
|
509
|
+
"parameters": [
|
|
510
|
+
{
|
|
511
|
+
"name": "element",
|
|
512
|
+
"type": {
|
|
513
|
+
"text": "HTMLElement"
|
|
514
|
+
},
|
|
515
|
+
"description": "The button element."
|
|
516
|
+
},
|
|
517
|
+
{
|
|
518
|
+
"name": "disabled",
|
|
519
|
+
"type": {
|
|
520
|
+
"text": "boolean"
|
|
521
|
+
},
|
|
522
|
+
"description": "The disabled state."
|
|
523
|
+
}
|
|
524
|
+
],
|
|
525
|
+
"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.",
|
|
476
526
|
"inheritedFrom": {
|
|
477
527
|
"name": "Buttonsimple",
|
|
478
|
-
"module": "
|
|
528
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
479
529
|
}
|
|
480
|
-
}
|
|
481
|
-
]
|
|
482
|
-
}
|
|
483
|
-
],
|
|
484
|
-
"exports": [
|
|
485
|
-
{
|
|
486
|
-
"kind": "js",
|
|
487
|
-
"name": "default",
|
|
488
|
-
"declaration": {
|
|
489
|
-
"name": "AlertChip",
|
|
490
|
-
"module": "components/alertchip/alertchip.component.js"
|
|
491
|
-
}
|
|
492
|
-
}
|
|
493
|
-
]
|
|
494
|
-
},
|
|
495
|
-
{
|
|
496
|
-
"kind": "javascript-module",
|
|
497
|
-
"path": "components/animation/animation.component.js",
|
|
498
|
-
"declarations": [
|
|
499
|
-
{
|
|
500
|
-
"kind": "class",
|
|
501
|
-
"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.",
|
|
502
|
-
"name": "Animation",
|
|
503
|
-
"members": [
|
|
504
|
-
{
|
|
505
|
-
"kind": "field",
|
|
506
|
-
"name": "name",
|
|
507
|
-
"type": {
|
|
508
|
-
"text": "AnimationNames | undefined"
|
|
509
|
-
},
|
|
510
|
-
"description": "Name of the animation (= filename)",
|
|
511
|
-
"attribute": "name",
|
|
512
|
-
"reflects": true
|
|
513
|
-
},
|
|
514
|
-
{
|
|
515
|
-
"kind": "field",
|
|
516
|
-
"name": "loop",
|
|
517
|
-
"type": {
|
|
518
|
-
"text": "LoopType | undefined"
|
|
519
|
-
},
|
|
520
|
-
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
521
|
-
"attribute": "loop",
|
|
522
|
-
"reflects": true
|
|
523
|
-
},
|
|
524
|
-
{
|
|
525
|
-
"kind": "field",
|
|
526
|
-
"name": "autoplay",
|
|
527
|
-
"type": {
|
|
528
|
-
"text": "boolean | undefined"
|
|
529
|
-
},
|
|
530
|
-
"description": "Weather start the animation automatically",
|
|
531
|
-
"attribute": "autoplay",
|
|
532
|
-
"reflects": true
|
|
533
|
-
},
|
|
534
|
-
{
|
|
535
|
-
"kind": "field",
|
|
536
|
-
"name": "ariaLabel",
|
|
537
|
-
"type": {
|
|
538
|
-
"text": "string | null"
|
|
539
|
-
},
|
|
540
|
-
"default": "null",
|
|
541
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
542
|
-
"attribute": "aria-label"
|
|
543
|
-
},
|
|
544
|
-
{
|
|
545
|
-
"kind": "field",
|
|
546
|
-
"name": "ariaLabelledBy",
|
|
547
|
-
"type": {
|
|
548
|
-
"text": "string | null"
|
|
549
|
-
},
|
|
550
|
-
"default": "null",
|
|
551
|
-
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
552
|
-
"attribute": "aria-labelledby"
|
|
553
|
-
},
|
|
554
|
-
{
|
|
555
|
-
"kind": "field",
|
|
556
|
-
"name": "lottieInstance",
|
|
557
|
-
"type": {
|
|
558
|
-
"text": "AnimationItem | undefined"
|
|
559
|
-
},
|
|
560
|
-
"privacy": "private",
|
|
561
|
-
"description": "Lottie animation instance"
|
|
562
530
|
},
|
|
563
531
|
{
|
|
564
|
-
"kind": "
|
|
565
|
-
"name": "
|
|
566
|
-
"type": {
|
|
567
|
-
"text": "Ref<HTMLDivElement>"
|
|
568
|
-
},
|
|
532
|
+
"kind": "method",
|
|
533
|
+
"name": "triggerClickEvent",
|
|
569
534
|
"privacy": "private",
|
|
570
|
-
"
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
"name": "animation",
|
|
575
|
-
"description": "Exposed API of the animation library (lottie)",
|
|
576
|
-
"readonly": true
|
|
535
|
+
"inheritedFrom": {
|
|
536
|
+
"name": "Buttonsimple",
|
|
537
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
538
|
+
}
|
|
577
539
|
},
|
|
578
540
|
{
|
|
579
541
|
"kind": "method",
|
|
580
|
-
"name": "
|
|
581
|
-
"privacy": "private"
|
|
542
|
+
"name": "handleBlur",
|
|
543
|
+
"privacy": "private",
|
|
544
|
+
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
|
545
|
+
"inheritedFrom": {
|
|
546
|
+
"name": "Buttonsimple",
|
|
547
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
548
|
+
}
|
|
582
549
|
},
|
|
583
550
|
{
|
|
584
551
|
"kind": "method",
|
|
585
|
-
"name": "
|
|
552
|
+
"name": "handleKeyDown",
|
|
586
553
|
"privacy": "private",
|
|
587
554
|
"parameters": [
|
|
588
555
|
{
|
|
589
|
-
"name": "
|
|
556
|
+
"name": "event",
|
|
590
557
|
"type": {
|
|
591
|
-
"text": "
|
|
592
|
-
}
|
|
558
|
+
"text": "KeyboardEvent"
|
|
559
|
+
},
|
|
560
|
+
"description": "The keyboard event."
|
|
593
561
|
}
|
|
594
562
|
],
|
|
595
|
-
"description": "
|
|
563
|
+
"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.",
|
|
564
|
+
"inheritedFrom": {
|
|
565
|
+
"name": "Buttonsimple",
|
|
566
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
567
|
+
}
|
|
596
568
|
},
|
|
597
569
|
{
|
|
598
570
|
"kind": "method",
|
|
599
|
-
"name": "
|
|
571
|
+
"name": "handleKeyUp",
|
|
600
572
|
"privacy": "private",
|
|
601
573
|
"parameters": [
|
|
602
574
|
{
|
|
603
|
-
"name": "
|
|
575
|
+
"name": "event",
|
|
604
576
|
"type": {
|
|
605
|
-
"text": "
|
|
606
|
-
}
|
|
577
|
+
"text": "KeyboardEvent"
|
|
578
|
+
},
|
|
579
|
+
"description": "The keyboard event."
|
|
607
580
|
}
|
|
608
581
|
],
|
|
609
|
-
"description": "
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
"privacy": "private",
|
|
615
|
-
"description": "Import animation data dynamically"
|
|
616
|
-
},
|
|
617
|
-
{
|
|
618
|
-
"kind": "field",
|
|
619
|
-
"name": "onCompleteHandler",
|
|
620
|
-
"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."
|
|
582
|
+
"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.",
|
|
583
|
+
"inheritedFrom": {
|
|
584
|
+
"name": "Buttonsimple",
|
|
585
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
586
|
+
}
|
|
621
587
|
}
|
|
622
588
|
],
|
|
623
|
-
"
|
|
589
|
+
"attributes": [
|
|
624
590
|
{
|
|
625
|
-
"name": "
|
|
591
|
+
"name": "variant",
|
|
626
592
|
"type": {
|
|
627
|
-
"text": "
|
|
593
|
+
"text": "VariantType"
|
|
628
594
|
},
|
|
629
|
-
"description": "
|
|
630
|
-
"
|
|
595
|
+
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
596
|
+
"default": "neutral",
|
|
597
|
+
"fieldName": "variant"
|
|
631
598
|
},
|
|
632
599
|
{
|
|
633
|
-
"
|
|
634
|
-
"
|
|
635
|
-
|
|
600
|
+
"name": "label",
|
|
601
|
+
"type": {
|
|
602
|
+
"text": "string"
|
|
603
|
+
},
|
|
604
|
+
"default": "''",
|
|
605
|
+
"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.",
|
|
606
|
+
"fieldName": "label"
|
|
636
607
|
},
|
|
637
608
|
{
|
|
638
|
-
"
|
|
639
|
-
"name": "error",
|
|
640
|
-
"reactName": "onError"
|
|
641
|
-
}
|
|
642
|
-
],
|
|
643
|
-
"attributes": [
|
|
644
|
-
{
|
|
645
|
-
"name": "name",
|
|
609
|
+
"name": "tabIndex",
|
|
646
610
|
"type": {
|
|
647
|
-
"text": "
|
|
611
|
+
"text": "number"
|
|
648
612
|
},
|
|
649
|
-
"
|
|
650
|
-
"
|
|
613
|
+
"default": "0",
|
|
614
|
+
"description": "This property specifies the tab order of the element.",
|
|
615
|
+
"fieldName": "tabIndex",
|
|
616
|
+
"inheritedFrom": {
|
|
617
|
+
"name": "TabIndexMixin",
|
|
618
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
619
|
+
}
|
|
651
620
|
},
|
|
652
621
|
{
|
|
653
|
-
"name": "
|
|
622
|
+
"name": "disabled",
|
|
654
623
|
"type": {
|
|
655
|
-
"text": "
|
|
624
|
+
"text": "boolean | undefined"
|
|
656
625
|
},
|
|
657
|
-
"description": "
|
|
658
|
-
"
|
|
626
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
627
|
+
"default": "undefined",
|
|
628
|
+
"fieldName": "disabled",
|
|
629
|
+
"inheritedFrom": {
|
|
630
|
+
"name": "DisabledMixin",
|
|
631
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
632
|
+
}
|
|
659
633
|
},
|
|
660
634
|
{
|
|
661
|
-
"name": "
|
|
635
|
+
"name": "active",
|
|
662
636
|
"type": {
|
|
663
637
|
"text": "boolean | undefined"
|
|
664
638
|
},
|
|
665
|
-
"description": "
|
|
666
|
-
"
|
|
639
|
+
"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.",
|
|
640
|
+
"default": "undefined",
|
|
641
|
+
"fieldName": "active",
|
|
642
|
+
"inheritedFrom": {
|
|
643
|
+
"name": "Buttonsimple",
|
|
644
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
645
|
+
}
|
|
667
646
|
},
|
|
668
647
|
{
|
|
669
|
-
"name": "
|
|
648
|
+
"name": "soft-disabled",
|
|
670
649
|
"type": {
|
|
671
|
-
"text": "
|
|
650
|
+
"text": "boolean | undefined"
|
|
672
651
|
},
|
|
673
|
-
"
|
|
674
|
-
"
|
|
675
|
-
"fieldName": "
|
|
652
|
+
"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.",
|
|
653
|
+
"default": "undefined",
|
|
654
|
+
"fieldName": "softDisabled",
|
|
655
|
+
"inheritedFrom": {
|
|
656
|
+
"name": "Buttonsimple",
|
|
657
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
658
|
+
}
|
|
676
659
|
},
|
|
677
660
|
{
|
|
678
|
-
"name": "
|
|
661
|
+
"name": "size",
|
|
679
662
|
"type": {
|
|
680
|
-
"text": "
|
|
663
|
+
"text": "ButtonSize"
|
|
681
664
|
},
|
|
682
|
-
"
|
|
683
|
-
"
|
|
684
|
-
"fieldName": "
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
"module": "/src/models"
|
|
690
|
-
},
|
|
691
|
-
"tagName": "mdc-animation",
|
|
692
|
-
"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 */",
|
|
693
|
-
"customElement": true
|
|
694
|
-
}
|
|
695
|
-
],
|
|
696
|
-
"exports": [
|
|
697
|
-
{
|
|
698
|
-
"kind": "js",
|
|
699
|
-
"name": "default",
|
|
700
|
-
"declaration": {
|
|
701
|
-
"name": "Animation",
|
|
702
|
-
"module": "components/animation/animation.component.js"
|
|
703
|
-
}
|
|
704
|
-
}
|
|
705
|
-
]
|
|
706
|
-
},
|
|
707
|
-
{
|
|
708
|
-
"kind": "javascript-module",
|
|
709
|
-
"path": "components/appheader/appheader.component.js",
|
|
710
|
-
"declarations": [
|
|
711
|
-
{
|
|
712
|
-
"kind": "class",
|
|
713
|
-
"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**.",
|
|
714
|
-
"name": "Appheader",
|
|
715
|
-
"cssParts": [
|
|
716
|
-
{
|
|
717
|
-
"description": "The main container for styling the header.",
|
|
718
|
-
"name": "container"
|
|
665
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
666
|
+
"default": "32",
|
|
667
|
+
"fieldName": "size",
|
|
668
|
+
"inheritedFrom": {
|
|
669
|
+
"name": "Buttonsimple",
|
|
670
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
671
|
+
}
|
|
719
672
|
},
|
|
720
673
|
{
|
|
721
|
-
"
|
|
722
|
-
"
|
|
674
|
+
"name": "role",
|
|
675
|
+
"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.",
|
|
676
|
+
"default": "button",
|
|
677
|
+
"fieldName": "role",
|
|
678
|
+
"inheritedFrom": {
|
|
679
|
+
"name": "Buttonsimple",
|
|
680
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
681
|
+
}
|
|
723
682
|
},
|
|
724
683
|
{
|
|
725
|
-
"
|
|
726
|
-
"
|
|
684
|
+
"name": "ariaStateKey",
|
|
685
|
+
"type": {
|
|
686
|
+
"text": "string | undefined"
|
|
687
|
+
},
|
|
688
|
+
"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`",
|
|
689
|
+
"default": "'aria-pressed' (when)",
|
|
690
|
+
"fieldName": "ariaStateKey",
|
|
691
|
+
"inheritedFrom": {
|
|
692
|
+
"name": "Buttonsimple",
|
|
693
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
694
|
+
}
|
|
727
695
|
},
|
|
728
696
|
{
|
|
729
|
-
"
|
|
730
|
-
"
|
|
697
|
+
"name": "type",
|
|
698
|
+
"type": {
|
|
699
|
+
"text": "ButtonType"
|
|
700
|
+
},
|
|
701
|
+
"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.",
|
|
702
|
+
"default": "button",
|
|
703
|
+
"fieldName": "type",
|
|
704
|
+
"inheritedFrom": {
|
|
705
|
+
"name": "Buttonsimple",
|
|
706
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
707
|
+
}
|
|
731
708
|
}
|
|
732
709
|
],
|
|
733
|
-
"
|
|
710
|
+
"superclass": {
|
|
711
|
+
"name": "Buttonsimple",
|
|
712
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
713
|
+
},
|
|
714
|
+
"tagName": "mdc-alertchip",
|
|
715
|
+
"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 */",
|
|
716
|
+
"customElement": true,
|
|
717
|
+
"events": [
|
|
734
718
|
{
|
|
735
|
-
"description": "
|
|
736
|
-
"name": "
|
|
719
|
+
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
|
720
|
+
"name": "click",
|
|
721
|
+
"reactName": "onClick",
|
|
722
|
+
"inheritedFrom": {
|
|
723
|
+
"name": "Buttonsimple",
|
|
724
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
725
|
+
}
|
|
737
726
|
},
|
|
738
727
|
{
|
|
739
|
-
"description": "
|
|
740
|
-
"name": "
|
|
728
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
|
|
729
|
+
"name": "keydown",
|
|
730
|
+
"reactName": "onKeyDown",
|
|
731
|
+
"inheritedFrom": {
|
|
732
|
+
"name": "Buttonsimple",
|
|
733
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
734
|
+
}
|
|
741
735
|
},
|
|
742
736
|
{
|
|
743
|
-
"description": "
|
|
744
|
-
"name": "
|
|
737
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
|
|
738
|
+
"name": "keyup",
|
|
739
|
+
"reactName": "onKeyUp",
|
|
740
|
+
"inheritedFrom": {
|
|
741
|
+
"name": "Buttonsimple",
|
|
742
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
743
|
+
}
|
|
744
|
+
},
|
|
745
|
+
{
|
|
746
|
+
"description": "(React: onFocus) This event is dispatched when the button receives focus.",
|
|
747
|
+
"name": "focus",
|
|
748
|
+
"reactName": "onFocus",
|
|
749
|
+
"inheritedFrom": {
|
|
750
|
+
"name": "Buttonsimple",
|
|
751
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
752
|
+
}
|
|
745
753
|
}
|
|
746
|
-
]
|
|
747
|
-
"members": [],
|
|
748
|
-
"superclass": {
|
|
749
|
-
"name": "Component",
|
|
750
|
-
"module": "/src/models"
|
|
751
|
-
},
|
|
752
|
-
"tagName": "mdc-appheader",
|
|
753
|
-
"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 */",
|
|
754
|
-
"customElement": true
|
|
754
|
+
]
|
|
755
755
|
}
|
|
756
756
|
],
|
|
757
757
|
"exports": [
|
|
@@ -759,8 +759,8 @@
|
|
|
759
759
|
"kind": "js",
|
|
760
760
|
"name": "default",
|
|
761
761
|
"declaration": {
|
|
762
|
-
"name": "
|
|
763
|
-
"module": "components/
|
|
762
|
+
"name": "AlertChip",
|
|
763
|
+
"module": "components/alertchip/alertchip.component.js"
|
|
764
764
|
}
|
|
765
765
|
}
|
|
766
766
|
]
|
|
@@ -11583,21 +11583,217 @@
|
|
|
11583
11583
|
"fieldName": "ariaLabel"
|
|
11584
11584
|
},
|
|
11585
11585
|
{
|
|
11586
|
-
"name": "aria-labelledby",
|
|
11586
|
+
"name": "aria-labelledby",
|
|
11587
|
+
"type": {
|
|
11588
|
+
"text": "string | null"
|
|
11589
|
+
},
|
|
11590
|
+
"default": "null",
|
|
11591
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
11592
|
+
"fieldName": "ariaLabelledBy"
|
|
11593
|
+
}
|
|
11594
|
+
],
|
|
11595
|
+
"superclass": {
|
|
11596
|
+
"name": "Component",
|
|
11597
|
+
"module": "/src/models"
|
|
11598
|
+
},
|
|
11599
|
+
"tagName": "mdc-icon",
|
|
11600
|
+
"jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n * by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n * the role will be unset.\n *\n * ### Informative Standalone Icons\n * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\n * have a Tooltip that describes what it means.\n * - For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\n * and the `role` will be set to \"img\" automatically.\n * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n * @cssproperty --mdc-icon-size - Allows customization of the icon size.\n * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.\n */",
|
|
11601
|
+
"customElement": true
|
|
11602
|
+
}
|
|
11603
|
+
],
|
|
11604
|
+
"exports": [
|
|
11605
|
+
{
|
|
11606
|
+
"kind": "js",
|
|
11607
|
+
"name": "default",
|
|
11608
|
+
"declaration": {
|
|
11609
|
+
"name": "Icon",
|
|
11610
|
+
"module": "components/icon/icon.component.js"
|
|
11611
|
+
}
|
|
11612
|
+
}
|
|
11613
|
+
]
|
|
11614
|
+
},
|
|
11615
|
+
{
|
|
11616
|
+
"kind": "javascript-module",
|
|
11617
|
+
"path": "components/iconprovider/iconprovider.component.js",
|
|
11618
|
+
"declarations": [
|
|
11619
|
+
{
|
|
11620
|
+
"kind": "class",
|
|
11621
|
+
"description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nAttribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.\n\nIf `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\nIconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\nto avoid fetching the same icon multiple times over the network.\nThis is useful when the same icon is used multiple times in the application.\nTo consider:\n- The `in-memory-cache` is not persisted and will be lost when the\nIconProvider is removed from the DOM.\n- The `web-api-cache` is persisted, but only works in https environments\n(https://developer.mozilla.org/en-US/docs/Web/API/Cache).",
|
|
11622
|
+
"name": "IconProvider",
|
|
11623
|
+
"slots": [
|
|
11624
|
+
{
|
|
11625
|
+
"description": "children",
|
|
11626
|
+
"name": ""
|
|
11627
|
+
}
|
|
11628
|
+
],
|
|
11629
|
+
"members": [
|
|
11630
|
+
{
|
|
11631
|
+
"kind": "field",
|
|
11632
|
+
"name": "Context",
|
|
11633
|
+
"privacy": "public",
|
|
11634
|
+
"static": true,
|
|
11635
|
+
"description": "Context object of the IconProvider, to be consumed by child components",
|
|
11636
|
+
"readonly": true
|
|
11637
|
+
},
|
|
11638
|
+
{
|
|
11639
|
+
"kind": "field",
|
|
11640
|
+
"name": "iconSet",
|
|
11641
|
+
"type": {
|
|
11642
|
+
"text": "IconSet | undefined"
|
|
11643
|
+
},
|
|
11644
|
+
"description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
|
|
11645
|
+
"default": "momentum-icons",
|
|
11646
|
+
"attribute": "icon-set",
|
|
11647
|
+
"reflects": true
|
|
11648
|
+
},
|
|
11649
|
+
{
|
|
11650
|
+
"kind": "field",
|
|
11651
|
+
"name": "url",
|
|
11652
|
+
"type": {
|
|
11653
|
+
"text": "string | undefined"
|
|
11654
|
+
},
|
|
11655
|
+
"description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
|
|
11656
|
+
"attribute": "url"
|
|
11657
|
+
},
|
|
11658
|
+
{
|
|
11659
|
+
"kind": "field",
|
|
11660
|
+
"name": "fileExtension",
|
|
11661
|
+
"type": {
|
|
11662
|
+
"text": "string | undefined"
|
|
11663
|
+
},
|
|
11664
|
+
"description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
|
|
11665
|
+
"default": "svg",
|
|
11666
|
+
"attribute": "file-extension",
|
|
11667
|
+
"reflects": true
|
|
11668
|
+
},
|
|
11669
|
+
{
|
|
11670
|
+
"kind": "field",
|
|
11671
|
+
"name": "lengthUnit",
|
|
11672
|
+
"type": {
|
|
11673
|
+
"text": "string"
|
|
11674
|
+
},
|
|
11675
|
+
"description": "Length unit used for sizing of icons",
|
|
11676
|
+
"default": "em",
|
|
11677
|
+
"attribute": "length-unit",
|
|
11678
|
+
"reflects": true
|
|
11679
|
+
},
|
|
11680
|
+
{
|
|
11681
|
+
"kind": "field",
|
|
11682
|
+
"name": "size",
|
|
11683
|
+
"type": {
|
|
11684
|
+
"text": "number | undefined"
|
|
11685
|
+
},
|
|
11686
|
+
"description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
|
|
11687
|
+
"default": "1",
|
|
11688
|
+
"attribute": "size",
|
|
11689
|
+
"reflects": true
|
|
11690
|
+
},
|
|
11691
|
+
{
|
|
11692
|
+
"kind": "field",
|
|
11693
|
+
"name": "cacheStrategy",
|
|
11694
|
+
"type": {
|
|
11695
|
+
"text": "CacheStrategy | undefined"
|
|
11696
|
+
},
|
|
11697
|
+
"description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
|
|
11698
|
+
"default": "undefined",
|
|
11699
|
+
"attribute": "cache-strategy"
|
|
11700
|
+
},
|
|
11701
|
+
{
|
|
11702
|
+
"kind": "field",
|
|
11703
|
+
"name": "cacheName",
|
|
11704
|
+
"type": {
|
|
11705
|
+
"text": "string | undefined"
|
|
11706
|
+
},
|
|
11707
|
+
"description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
|
|
11708
|
+
"default": "undefined",
|
|
11709
|
+
"attribute": "cache-name"
|
|
11710
|
+
},
|
|
11711
|
+
{
|
|
11712
|
+
"kind": "method",
|
|
11713
|
+
"name": "updateValuesInContext",
|
|
11714
|
+
"privacy": "private"
|
|
11715
|
+
},
|
|
11716
|
+
{
|
|
11717
|
+
"kind": "method",
|
|
11718
|
+
"name": "updateContext",
|
|
11719
|
+
"privacy": "protected",
|
|
11720
|
+
"return": {
|
|
11721
|
+
"type": {
|
|
11722
|
+
"text": "void"
|
|
11723
|
+
}
|
|
11724
|
+
}
|
|
11725
|
+
}
|
|
11726
|
+
],
|
|
11727
|
+
"attributes": [
|
|
11728
|
+
{
|
|
11729
|
+
"name": "icon-set",
|
|
11730
|
+
"type": {
|
|
11731
|
+
"text": "IconSet | undefined"
|
|
11732
|
+
},
|
|
11733
|
+
"description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
|
|
11734
|
+
"default": "momentum-icons",
|
|
11735
|
+
"fieldName": "iconSet"
|
|
11736
|
+
},
|
|
11737
|
+
{
|
|
11738
|
+
"name": "url",
|
|
11739
|
+
"type": {
|
|
11740
|
+
"text": "string | undefined"
|
|
11741
|
+
},
|
|
11742
|
+
"description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
|
|
11743
|
+
"fieldName": "url"
|
|
11744
|
+
},
|
|
11745
|
+
{
|
|
11746
|
+
"name": "file-extension",
|
|
11747
|
+
"type": {
|
|
11748
|
+
"text": "string | undefined"
|
|
11749
|
+
},
|
|
11750
|
+
"description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
|
|
11751
|
+
"default": "svg",
|
|
11752
|
+
"fieldName": "fileExtension"
|
|
11753
|
+
},
|
|
11754
|
+
{
|
|
11755
|
+
"name": "length-unit",
|
|
11756
|
+
"type": {
|
|
11757
|
+
"text": "string"
|
|
11758
|
+
},
|
|
11759
|
+
"description": "Length unit used for sizing of icons",
|
|
11760
|
+
"default": "em",
|
|
11761
|
+
"fieldName": "lengthUnit"
|
|
11762
|
+
},
|
|
11763
|
+
{
|
|
11764
|
+
"name": "size",
|
|
11765
|
+
"type": {
|
|
11766
|
+
"text": "number | undefined"
|
|
11767
|
+
},
|
|
11768
|
+
"description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
|
|
11769
|
+
"default": "1",
|
|
11770
|
+
"fieldName": "size"
|
|
11771
|
+
},
|
|
11772
|
+
{
|
|
11773
|
+
"name": "cache-strategy",
|
|
11774
|
+
"type": {
|
|
11775
|
+
"text": "CacheStrategy | undefined"
|
|
11776
|
+
},
|
|
11777
|
+
"description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
|
|
11778
|
+
"default": "undefined",
|
|
11779
|
+
"fieldName": "cacheStrategy"
|
|
11780
|
+
},
|
|
11781
|
+
{
|
|
11782
|
+
"name": "cache-name",
|
|
11587
11783
|
"type": {
|
|
11588
|
-
"text": "string |
|
|
11784
|
+
"text": "string | undefined"
|
|
11589
11785
|
},
|
|
11590
|
-
"
|
|
11591
|
-
"
|
|
11592
|
-
"fieldName": "
|
|
11786
|
+
"description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
|
|
11787
|
+
"default": "undefined",
|
|
11788
|
+
"fieldName": "cacheName"
|
|
11593
11789
|
}
|
|
11594
11790
|
],
|
|
11595
11791
|
"superclass": {
|
|
11596
|
-
"name": "
|
|
11792
|
+
"name": "Provider",
|
|
11597
11793
|
"module": "/src/models"
|
|
11598
11794
|
},
|
|
11599
|
-
"tagName": "mdc-
|
|
11600
|
-
"jsDoc": "/**\n *
|
|
11795
|
+
"tagName": "mdc-iconprovider",
|
|
11796
|
+
"jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Attribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\n * If `momentum-icons` is selected, the icons will be fetched from the\n * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).\n * This requires the consumer to have the `@momentum-designs` package installed and the\n * build tooling needs to support dynamic imports.\n *\n * If `custom-icons` is selected, the icons will be fetched from the provided URL.\n * This requires the consumer to provide a URL from which the icons will be fetched and\n * the consumer needs to make sure to bundle the icons in the application.\n *\n * If `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\n * IconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\n * to avoid fetching the same icon multiple times over the network.\n * This is useful when the same icon is used multiple times in the application.\n * To consider:\n * - The `in-memory-cache` is not persisted and will be lost when the\n * IconProvider is removed from the DOM.\n * - The `web-api-cache` is persisted, but only works in https environments\n * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).\n *\n * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
|
|
11601
11797
|
"customElement": true
|
|
11602
11798
|
}
|
|
11603
11799
|
],
|
|
@@ -11606,8 +11802,8 @@
|
|
|
11606
11802
|
"kind": "js",
|
|
11607
11803
|
"name": "default",
|
|
11608
11804
|
"declaration": {
|
|
11609
|
-
"name": "
|
|
11610
|
-
"module": "components/
|
|
11805
|
+
"name": "IconProvider",
|
|
11806
|
+
"module": "components/iconprovider/iconprovider.component.js"
|
|
11611
11807
|
}
|
|
11612
11808
|
}
|
|
11613
11809
|
]
|
|
@@ -12438,312 +12634,116 @@
|
|
|
12438
12634
|
"type": {
|
|
12439
12635
|
"text": "string | null"
|
|
12440
12636
|
},
|
|
12441
|
-
"default": "null",
|
|
12442
|
-
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
12443
|
-
"fieldName": "dataAriaLabel",
|
|
12444
|
-
"inheritedFrom": {
|
|
12445
|
-
"name": "DataAriaLabelMixin",
|
|
12446
|
-
"module": "src/utils/mixins/DataAriaLabelMixin.ts"
|
|
12447
|
-
}
|
|
12448
|
-
},
|
|
12449
|
-
{
|
|
12450
|
-
"name": "disabled",
|
|
12451
|
-
"type": {
|
|
12452
|
-
"text": "boolean | undefined"
|
|
12453
|
-
},
|
|
12454
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
12455
|
-
"default": "undefined",
|
|
12456
|
-
"fieldName": "disabled",
|
|
12457
|
-
"inheritedFrom": {
|
|
12458
|
-
"name": "FormfieldWrapper",
|
|
12459
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
12460
|
-
}
|
|
12461
|
-
},
|
|
12462
|
-
{
|
|
12463
|
-
"name": "label",
|
|
12464
|
-
"type": {
|
|
12465
|
-
"text": "string | undefined"
|
|
12466
|
-
},
|
|
12467
|
-
"description": "The label of the input field. It is linked to the input field using the `for` attribute.",
|
|
12468
|
-
"fieldName": "label",
|
|
12469
|
-
"inheritedFrom": {
|
|
12470
|
-
"name": "FormfieldWrapper",
|
|
12471
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
12472
|
-
}
|
|
12473
|
-
},
|
|
12474
|
-
{
|
|
12475
|
-
"name": "required-label",
|
|
12476
|
-
"type": {
|
|
12477
|
-
"text": "string | undefined"
|
|
12478
|
-
},
|
|
12479
|
-
"description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
|
|
12480
|
-
"fieldName": "requiredLabel",
|
|
12481
|
-
"inheritedFrom": {
|
|
12482
|
-
"name": "FormfieldWrapper",
|
|
12483
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
12484
|
-
}
|
|
12485
|
-
},
|
|
12486
|
-
{
|
|
12487
|
-
"name": "id",
|
|
12488
|
-
"type": {
|
|
12489
|
-
"text": "string"
|
|
12490
|
-
},
|
|
12491
|
-
"default": "''",
|
|
12492
|
-
"description": "The unique id of the input field. It is used to link the input field with the label.",
|
|
12493
|
-
"fieldName": "id",
|
|
12494
|
-
"inheritedFrom": {
|
|
12495
|
-
"name": "FormfieldWrapper",
|
|
12496
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
12497
|
-
}
|
|
12498
|
-
},
|
|
12499
|
-
{
|
|
12500
|
-
"name": "help-text-type",
|
|
12501
|
-
"type": {
|
|
12502
|
-
"text": "ValidationType"
|
|
12503
|
-
},
|
|
12504
|
-
"description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
|
|
12505
|
-
"fieldName": "helpTextType",
|
|
12506
|
-
"inheritedFrom": {
|
|
12507
|
-
"name": "FormfieldWrapper",
|
|
12508
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
12509
|
-
}
|
|
12510
|
-
},
|
|
12511
|
-
{
|
|
12512
|
-
"name": "help-text",
|
|
12513
|
-
"type": {
|
|
12514
|
-
"text": "string | undefined"
|
|
12515
|
-
},
|
|
12516
|
-
"description": "The help text that is displayed below the input field.",
|
|
12517
|
-
"fieldName": "helpText",
|
|
12518
|
-
"inheritedFrom": {
|
|
12519
|
-
"name": "FormfieldWrapper",
|
|
12520
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
12521
|
-
}
|
|
12522
|
-
}
|
|
12523
|
-
],
|
|
12524
|
-
"mixins": [
|
|
12525
|
-
{
|
|
12526
|
-
"name": "FormInternalsMixin",
|
|
12527
|
-
"module": "/src/utils/mixins/FormInternalsMixin"
|
|
12528
|
-
},
|
|
12529
|
-
{
|
|
12530
|
-
"name": "DataAriaLabelMixin",
|
|
12531
|
-
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
|
12532
|
-
}
|
|
12533
|
-
],
|
|
12534
|
-
"superclass": {
|
|
12535
|
-
"name": "FormfieldWrapper",
|
|
12536
|
-
"module": "/src/components/formfieldwrapper"
|
|
12537
|
-
},
|
|
12538
|
-
"tagName": "mdc-input",
|
|
12539
|
-
"jsDoc": "/**\n * mdc-input is a component that allows users to input text.\n * It contains:\n * - label field - describe the input field.\n * - input field - contains the value\n * - help text or validation message - displayed below the input field.\n * - trailing button - it displays a clear the input field.\n * - prefix text - displayed before the input field.\n * - leading icon - displayed before the input field.\n * - clear-aria-label - aria label for the trailing button.\n * - all the attributes of the input field.\n *\n * @tagname mdc-input\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n *\n * @cssproperty --mdc-input-disabled-border-color - Border color for the input container when disabled\n * @cssproperty --mdc-input-disabled-text-color - Text color for the input field when disabled\n * @cssproperty --mdc-input-disabled-background-color - Background color for the input field when disabled\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-hover-background-color - Background color for the input field when hovered\n * @cssproperty --mdc-input-focused-background-color - Background color for the input field when focused\n * @cssproperty --mdc-input-focused-border-color - Border color for the input container when focused\n * @cssproperty --mdc-input-error-border-color - Border color for the input container when error\n * @cssproperty --mdc-input-warning-border-color - Border color for the input container when warning\n * @cssproperty --mdc-input-success-border-color - Border color for the input container when success\n * @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary\n *\n */",
|
|
12540
|
-
"customElement": true,
|
|
12541
|
-
"slots": [
|
|
12542
|
-
{
|
|
12543
|
-
"description": "slot to add the label info icon",
|
|
12544
|
-
"name": "label-info",
|
|
12545
|
-
"inheritedFrom": {
|
|
12546
|
-
"name": "FormfieldWrapper",
|
|
12547
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
12548
|
-
}
|
|
12549
|
-
}
|
|
12550
|
-
]
|
|
12551
|
-
}
|
|
12552
|
-
],
|
|
12553
|
-
"exports": [
|
|
12554
|
-
{
|
|
12555
|
-
"kind": "js",
|
|
12556
|
-
"name": "default",
|
|
12557
|
-
"declaration": {
|
|
12558
|
-
"name": "Input",
|
|
12559
|
-
"module": "components/input/input.component.js"
|
|
12560
|
-
}
|
|
12561
|
-
}
|
|
12562
|
-
]
|
|
12563
|
-
},
|
|
12564
|
-
{
|
|
12565
|
-
"kind": "javascript-module",
|
|
12566
|
-
"path": "components/iconprovider/iconprovider.component.js",
|
|
12567
|
-
"declarations": [
|
|
12568
|
-
{
|
|
12569
|
-
"kind": "class",
|
|
12570
|
-
"description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nAttribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.\n\nIf `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\nIconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\nto avoid fetching the same icon multiple times over the network.\nThis is useful when the same icon is used multiple times in the application.\nTo consider:\n- The `in-memory-cache` is not persisted and will be lost when the\nIconProvider is removed from the DOM.\n- The `web-api-cache` is persisted, but only works in https environments\n(https://developer.mozilla.org/en-US/docs/Web/API/Cache).",
|
|
12571
|
-
"name": "IconProvider",
|
|
12572
|
-
"slots": [
|
|
12573
|
-
{
|
|
12574
|
-
"description": "children",
|
|
12575
|
-
"name": ""
|
|
12576
|
-
}
|
|
12577
|
-
],
|
|
12578
|
-
"members": [
|
|
12579
|
-
{
|
|
12580
|
-
"kind": "field",
|
|
12581
|
-
"name": "Context",
|
|
12582
|
-
"privacy": "public",
|
|
12583
|
-
"static": true,
|
|
12584
|
-
"description": "Context object of the IconProvider, to be consumed by child components",
|
|
12585
|
-
"readonly": true
|
|
12586
|
-
},
|
|
12587
|
-
{
|
|
12588
|
-
"kind": "field",
|
|
12589
|
-
"name": "iconSet",
|
|
12590
|
-
"type": {
|
|
12591
|
-
"text": "IconSet | undefined"
|
|
12592
|
-
},
|
|
12593
|
-
"description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
|
|
12594
|
-
"default": "momentum-icons",
|
|
12595
|
-
"attribute": "icon-set",
|
|
12596
|
-
"reflects": true
|
|
12597
|
-
},
|
|
12598
|
-
{
|
|
12599
|
-
"kind": "field",
|
|
12600
|
-
"name": "url",
|
|
12601
|
-
"type": {
|
|
12602
|
-
"text": "string | undefined"
|
|
12603
|
-
},
|
|
12604
|
-
"description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
|
|
12605
|
-
"attribute": "url"
|
|
12606
|
-
},
|
|
12607
|
-
{
|
|
12608
|
-
"kind": "field",
|
|
12609
|
-
"name": "fileExtension",
|
|
12610
|
-
"type": {
|
|
12611
|
-
"text": "string | undefined"
|
|
12612
|
-
},
|
|
12613
|
-
"description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
|
|
12614
|
-
"default": "svg",
|
|
12615
|
-
"attribute": "file-extension",
|
|
12616
|
-
"reflects": true
|
|
12617
|
-
},
|
|
12618
|
-
{
|
|
12619
|
-
"kind": "field",
|
|
12620
|
-
"name": "lengthUnit",
|
|
12621
|
-
"type": {
|
|
12622
|
-
"text": "string"
|
|
12623
|
-
},
|
|
12624
|
-
"description": "Length unit used for sizing of icons",
|
|
12625
|
-
"default": "em",
|
|
12626
|
-
"attribute": "length-unit",
|
|
12627
|
-
"reflects": true
|
|
12628
|
-
},
|
|
12629
|
-
{
|
|
12630
|
-
"kind": "field",
|
|
12631
|
-
"name": "size",
|
|
12632
|
-
"type": {
|
|
12633
|
-
"text": "number | undefined"
|
|
12634
|
-
},
|
|
12635
|
-
"description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
|
|
12636
|
-
"default": "1",
|
|
12637
|
-
"attribute": "size",
|
|
12638
|
-
"reflects": true
|
|
12639
|
-
},
|
|
12640
|
-
{
|
|
12641
|
-
"kind": "field",
|
|
12642
|
-
"name": "cacheStrategy",
|
|
12643
|
-
"type": {
|
|
12644
|
-
"text": "CacheStrategy | undefined"
|
|
12645
|
-
},
|
|
12646
|
-
"description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
|
|
12647
|
-
"default": "undefined",
|
|
12648
|
-
"attribute": "cache-strategy"
|
|
12649
|
-
},
|
|
12650
|
-
{
|
|
12651
|
-
"kind": "field",
|
|
12652
|
-
"name": "cacheName",
|
|
12653
|
-
"type": {
|
|
12654
|
-
"text": "string | undefined"
|
|
12655
|
-
},
|
|
12656
|
-
"description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
|
|
12657
|
-
"default": "undefined",
|
|
12658
|
-
"attribute": "cache-name"
|
|
12659
|
-
},
|
|
12660
|
-
{
|
|
12661
|
-
"kind": "method",
|
|
12662
|
-
"name": "updateValuesInContext",
|
|
12663
|
-
"privacy": "private"
|
|
12664
|
-
},
|
|
12665
|
-
{
|
|
12666
|
-
"kind": "method",
|
|
12667
|
-
"name": "updateContext",
|
|
12668
|
-
"privacy": "protected",
|
|
12669
|
-
"return": {
|
|
12670
|
-
"type": {
|
|
12671
|
-
"text": "void"
|
|
12672
|
-
}
|
|
12637
|
+
"default": "null",
|
|
12638
|
+
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
12639
|
+
"fieldName": "dataAriaLabel",
|
|
12640
|
+
"inheritedFrom": {
|
|
12641
|
+
"name": "DataAriaLabelMixin",
|
|
12642
|
+
"module": "src/utils/mixins/DataAriaLabelMixin.ts"
|
|
12673
12643
|
}
|
|
12674
|
-
}
|
|
12675
|
-
],
|
|
12676
|
-
"attributes": [
|
|
12644
|
+
},
|
|
12677
12645
|
{
|
|
12678
|
-
"name": "
|
|
12646
|
+
"name": "disabled",
|
|
12679
12647
|
"type": {
|
|
12680
|
-
"text": "
|
|
12648
|
+
"text": "boolean | undefined"
|
|
12681
12649
|
},
|
|
12682
|
-
"description": "
|
|
12683
|
-
"default": "
|
|
12684
|
-
"fieldName": "
|
|
12650
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
12651
|
+
"default": "undefined",
|
|
12652
|
+
"fieldName": "disabled",
|
|
12653
|
+
"inheritedFrom": {
|
|
12654
|
+
"name": "FormfieldWrapper",
|
|
12655
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
12656
|
+
}
|
|
12685
12657
|
},
|
|
12686
12658
|
{
|
|
12687
|
-
"name": "
|
|
12659
|
+
"name": "label",
|
|
12688
12660
|
"type": {
|
|
12689
12661
|
"text": "string | undefined"
|
|
12690
12662
|
},
|
|
12691
|
-
"description": "
|
|
12692
|
-
"fieldName": "
|
|
12663
|
+
"description": "The label of the input field. It is linked to the input field using the `for` attribute.",
|
|
12664
|
+
"fieldName": "label",
|
|
12665
|
+
"inheritedFrom": {
|
|
12666
|
+
"name": "FormfieldWrapper",
|
|
12667
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
12668
|
+
}
|
|
12693
12669
|
},
|
|
12694
12670
|
{
|
|
12695
|
-
"name": "
|
|
12671
|
+
"name": "required-label",
|
|
12696
12672
|
"type": {
|
|
12697
12673
|
"text": "string | undefined"
|
|
12698
12674
|
},
|
|
12699
|
-
"description": "
|
|
12700
|
-
"
|
|
12701
|
-
"
|
|
12675
|
+
"description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
|
|
12676
|
+
"fieldName": "requiredLabel",
|
|
12677
|
+
"inheritedFrom": {
|
|
12678
|
+
"name": "FormfieldWrapper",
|
|
12679
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
12680
|
+
}
|
|
12702
12681
|
},
|
|
12703
12682
|
{
|
|
12704
|
-
"name": "
|
|
12683
|
+
"name": "id",
|
|
12705
12684
|
"type": {
|
|
12706
12685
|
"text": "string"
|
|
12707
12686
|
},
|
|
12708
|
-
"
|
|
12709
|
-
"
|
|
12710
|
-
"fieldName": "
|
|
12687
|
+
"default": "''",
|
|
12688
|
+
"description": "The unique id of the input field. It is used to link the input field with the label.",
|
|
12689
|
+
"fieldName": "id",
|
|
12690
|
+
"inheritedFrom": {
|
|
12691
|
+
"name": "FormfieldWrapper",
|
|
12692
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
12693
|
+
}
|
|
12711
12694
|
},
|
|
12712
12695
|
{
|
|
12713
|
-
"name": "
|
|
12696
|
+
"name": "help-text-type",
|
|
12714
12697
|
"type": {
|
|
12715
|
-
"text": "
|
|
12698
|
+
"text": "ValidationType"
|
|
12716
12699
|
},
|
|
12717
|
-
"description": "The
|
|
12718
|
-
"
|
|
12719
|
-
"
|
|
12700
|
+
"description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
|
|
12701
|
+
"fieldName": "helpTextType",
|
|
12702
|
+
"inheritedFrom": {
|
|
12703
|
+
"name": "FormfieldWrapper",
|
|
12704
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
12705
|
+
}
|
|
12720
12706
|
},
|
|
12721
12707
|
{
|
|
12722
|
-
"name": "
|
|
12708
|
+
"name": "help-text",
|
|
12723
12709
|
"type": {
|
|
12724
|
-
"text": "
|
|
12710
|
+
"text": "string | undefined"
|
|
12725
12711
|
},
|
|
12726
|
-
"description": "
|
|
12727
|
-
"
|
|
12728
|
-
"
|
|
12712
|
+
"description": "The help text that is displayed below the input field.",
|
|
12713
|
+
"fieldName": "helpText",
|
|
12714
|
+
"inheritedFrom": {
|
|
12715
|
+
"name": "FormfieldWrapper",
|
|
12716
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
12717
|
+
}
|
|
12718
|
+
}
|
|
12719
|
+
],
|
|
12720
|
+
"mixins": [
|
|
12721
|
+
{
|
|
12722
|
+
"name": "FormInternalsMixin",
|
|
12723
|
+
"module": "/src/utils/mixins/FormInternalsMixin"
|
|
12729
12724
|
},
|
|
12730
12725
|
{
|
|
12731
|
-
"name": "
|
|
12732
|
-
"
|
|
12733
|
-
"text": "string | undefined"
|
|
12734
|
-
},
|
|
12735
|
-
"description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
|
|
12736
|
-
"default": "undefined",
|
|
12737
|
-
"fieldName": "cacheName"
|
|
12726
|
+
"name": "DataAriaLabelMixin",
|
|
12727
|
+
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
|
12738
12728
|
}
|
|
12739
12729
|
],
|
|
12740
12730
|
"superclass": {
|
|
12741
|
-
"name": "
|
|
12742
|
-
"module": "/src/
|
|
12731
|
+
"name": "FormfieldWrapper",
|
|
12732
|
+
"module": "/src/components/formfieldwrapper"
|
|
12743
12733
|
},
|
|
12744
|
-
"tagName": "mdc-
|
|
12745
|
-
"jsDoc": "/**\n *
|
|
12746
|
-
"customElement": true
|
|
12734
|
+
"tagName": "mdc-input",
|
|
12735
|
+
"jsDoc": "/**\n * mdc-input is a component that allows users to input text.\n * It contains:\n * - label field - describe the input field.\n * - input field - contains the value\n * - help text or validation message - displayed below the input field.\n * - trailing button - it displays a clear the input field.\n * - prefix text - displayed before the input field.\n * - leading icon - displayed before the input field.\n * - clear-aria-label - aria label for the trailing button.\n * - all the attributes of the input field.\n *\n * @tagname mdc-input\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n *\n * @cssproperty --mdc-input-disabled-border-color - Border color for the input container when disabled\n * @cssproperty --mdc-input-disabled-text-color - Text color for the input field when disabled\n * @cssproperty --mdc-input-disabled-background-color - Background color for the input field when disabled\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-hover-background-color - Background color for the input field when hovered\n * @cssproperty --mdc-input-focused-background-color - Background color for the input field when focused\n * @cssproperty --mdc-input-focused-border-color - Border color for the input container when focused\n * @cssproperty --mdc-input-error-border-color - Border color for the input container when error\n * @cssproperty --mdc-input-warning-border-color - Border color for the input container when warning\n * @cssproperty --mdc-input-success-border-color - Border color for the input container when success\n * @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary\n *\n */",
|
|
12736
|
+
"customElement": true,
|
|
12737
|
+
"slots": [
|
|
12738
|
+
{
|
|
12739
|
+
"description": "slot to add the label info icon",
|
|
12740
|
+
"name": "label-info",
|
|
12741
|
+
"inheritedFrom": {
|
|
12742
|
+
"name": "FormfieldWrapper",
|
|
12743
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
12744
|
+
}
|
|
12745
|
+
}
|
|
12746
|
+
]
|
|
12747
12747
|
}
|
|
12748
12748
|
],
|
|
12749
12749
|
"exports": [
|
|
@@ -12751,8 +12751,8 @@
|
|
|
12751
12751
|
"kind": "js",
|
|
12752
12752
|
"name": "default",
|
|
12753
12753
|
"declaration": {
|
|
12754
|
-
"name": "
|
|
12755
|
-
"module": "components/
|
|
12754
|
+
"name": "Input",
|
|
12755
|
+
"module": "components/input/input.component.js"
|
|
12756
12756
|
}
|
|
12757
12757
|
}
|
|
12758
12758
|
]
|
|
@@ -13859,77 +13859,6 @@
|
|
|
13859
13859
|
}
|
|
13860
13860
|
]
|
|
13861
13861
|
},
|
|
13862
|
-
{
|
|
13863
|
-
"kind": "javascript-module",
|
|
13864
|
-
"path": "components/marker/marker.component.js",
|
|
13865
|
-
"declarations": [
|
|
13866
|
-
{
|
|
13867
|
-
"kind": "class",
|
|
13868
|
-
"description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
|
|
13869
|
-
"name": "Marker",
|
|
13870
|
-
"cssProperties": [
|
|
13871
|
-
{
|
|
13872
|
-
"description": "Allows customization of the default background color in solid variant.",
|
|
13873
|
-
"name": "--mdc-marker-solid-background-color"
|
|
13874
|
-
},
|
|
13875
|
-
{
|
|
13876
|
-
"description": "Allows customization of the default stripes in striped variant.",
|
|
13877
|
-
"name": "--mdc-marker-striped-color"
|
|
13878
|
-
},
|
|
13879
|
-
{
|
|
13880
|
-
"description": "Allows customization of the default background color in striped variant.",
|
|
13881
|
-
"name": "--mdc-marker-striped-background-color"
|
|
13882
|
-
},
|
|
13883
|
-
{
|
|
13884
|
-
"description": "Allows customization of the default width.",
|
|
13885
|
-
"name": "--mdc-marker-width"
|
|
13886
|
-
}
|
|
13887
|
-
],
|
|
13888
|
-
"members": [
|
|
13889
|
-
{
|
|
13890
|
-
"kind": "field",
|
|
13891
|
-
"name": "variant",
|
|
13892
|
-
"type": {
|
|
13893
|
-
"text": "MarkerVariants"
|
|
13894
|
-
},
|
|
13895
|
-
"privacy": "public",
|
|
13896
|
-
"description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
|
|
13897
|
-
"default": "solid",
|
|
13898
|
-
"attribute": "variant",
|
|
13899
|
-
"reflects": true
|
|
13900
|
-
}
|
|
13901
|
-
],
|
|
13902
|
-
"attributes": [
|
|
13903
|
-
{
|
|
13904
|
-
"name": "variant",
|
|
13905
|
-
"type": {
|
|
13906
|
-
"text": "MarkerVariants"
|
|
13907
|
-
},
|
|
13908
|
-
"description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
|
|
13909
|
-
"default": "solid",
|
|
13910
|
-
"fieldName": "variant"
|
|
13911
|
-
}
|
|
13912
|
-
],
|
|
13913
|
-
"superclass": {
|
|
13914
|
-
"name": "Component",
|
|
13915
|
-
"module": "/src/models"
|
|
13916
|
-
},
|
|
13917
|
-
"tagName": "mdc-marker",
|
|
13918
|
-
"jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
|
|
13919
|
-
"customElement": true
|
|
13920
|
-
}
|
|
13921
|
-
],
|
|
13922
|
-
"exports": [
|
|
13923
|
-
{
|
|
13924
|
-
"kind": "js",
|
|
13925
|
-
"name": "default",
|
|
13926
|
-
"declaration": {
|
|
13927
|
-
"name": "Marker",
|
|
13928
|
-
"module": "components/marker/marker.component.js"
|
|
13929
|
-
}
|
|
13930
|
-
}
|
|
13931
|
-
]
|
|
13932
|
-
},
|
|
13933
13862
|
{
|
|
13934
13863
|
"kind": "javascript-module",
|
|
13935
13864
|
"path": "components/listitem/listitem.component.js",
|
|
@@ -14352,22 +14281,93 @@
|
|
|
14352
14281
|
}
|
|
14353
14282
|
}
|
|
14354
14283
|
],
|
|
14355
|
-
"mixins": [
|
|
14356
|
-
{
|
|
14357
|
-
"name": "DisabledMixin",
|
|
14358
|
-
"module": "/src/utils/mixins/DisabledMixin"
|
|
14359
|
-
},
|
|
14284
|
+
"mixins": [
|
|
14285
|
+
{
|
|
14286
|
+
"name": "DisabledMixin",
|
|
14287
|
+
"module": "/src/utils/mixins/DisabledMixin"
|
|
14288
|
+
},
|
|
14289
|
+
{
|
|
14290
|
+
"name": "TabIndexMixin",
|
|
14291
|
+
"module": "/src/utils/mixins/TabIndexMixin"
|
|
14292
|
+
}
|
|
14293
|
+
],
|
|
14294
|
+
"superclass": {
|
|
14295
|
+
"name": "Component",
|
|
14296
|
+
"module": "/src/models"
|
|
14297
|
+
},
|
|
14298
|
+
"tagName": "mdc-listitem",
|
|
14299
|
+
"jsDoc": "/**\n * mdc-listitem component is used to display a label with different types of controls.\n * There can be three types of controls, a radio button, a checkbox on the\n * leading side and a toggle on the trailing side.\n * The list item can contain an avatar on the leading side and a badge on the trailing side.\n * Additionally, the list item can contain a side header and a subline text.\n *\n * The leading and trailing slots can be used to display controls and text. <br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\n * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.\n *\n * By providing the tooltip-text attribute, a tooltip will be displayed on hover of the listitem.\n * The placement of the tooltip can be adjusted using the tooltip-placement attribute.\n * This will be helpful when the listitem text is truncated or\n * when you want to display additional information about the listitem.\n *\n * @tagname mdc-listitem\n *\n * @dependency mdc-text\n * @dependency mdc-tooltip\n *\n * @slot leading-controls - slot for list item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for list item primary label.\n * @slot leading-text-secondary-label - slot for list item secondary label.\n * @slot leading-text-tertiary-label - slot for list item tertiary label.\n * @slot trailing-text-side-header - slot for list item side header text.\n * @slot trailing-text-subline - slot for list item subline text.\n * @slot trailing-controls - slot for list item controls to appear of trailing end.\n *\n * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-listitem-background-color-active - Allows customization of the background color when pressed.\n * @cssproperty --mdc-listitem-primary-label-color\n * - Allows customization of the primary label, side header and subline text slot color.\n * @cssproperty --mdc-listitem-secondary-label-color\n * - Allows customization of the secondary and tertiary label text slot color.\n * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.\n * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.\n * @cssproperty --mdc-listitem-padding-left-and-right - Allows customization of padding left and right.\n *\n * @event click - (React: onClick) This event is dispatched when the listitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.\n * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.\n */",
|
|
14300
|
+
"customElement": true
|
|
14301
|
+
}
|
|
14302
|
+
],
|
|
14303
|
+
"exports": [
|
|
14304
|
+
{
|
|
14305
|
+
"kind": "js",
|
|
14306
|
+
"name": "default",
|
|
14307
|
+
"declaration": {
|
|
14308
|
+
"name": "ListItem",
|
|
14309
|
+
"module": "components/listitem/listitem.component.js"
|
|
14310
|
+
}
|
|
14311
|
+
}
|
|
14312
|
+
]
|
|
14313
|
+
},
|
|
14314
|
+
{
|
|
14315
|
+
"kind": "javascript-module",
|
|
14316
|
+
"path": "components/marker/marker.component.js",
|
|
14317
|
+
"declarations": [
|
|
14318
|
+
{
|
|
14319
|
+
"kind": "class",
|
|
14320
|
+
"description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
|
|
14321
|
+
"name": "Marker",
|
|
14322
|
+
"cssProperties": [
|
|
14323
|
+
{
|
|
14324
|
+
"description": "Allows customization of the default background color in solid variant.",
|
|
14325
|
+
"name": "--mdc-marker-solid-background-color"
|
|
14326
|
+
},
|
|
14327
|
+
{
|
|
14328
|
+
"description": "Allows customization of the default stripes in striped variant.",
|
|
14329
|
+
"name": "--mdc-marker-striped-color"
|
|
14330
|
+
},
|
|
14331
|
+
{
|
|
14332
|
+
"description": "Allows customization of the default background color in striped variant.",
|
|
14333
|
+
"name": "--mdc-marker-striped-background-color"
|
|
14334
|
+
},
|
|
14335
|
+
{
|
|
14336
|
+
"description": "Allows customization of the default width.",
|
|
14337
|
+
"name": "--mdc-marker-width"
|
|
14338
|
+
}
|
|
14339
|
+
],
|
|
14340
|
+
"members": [
|
|
14341
|
+
{
|
|
14342
|
+
"kind": "field",
|
|
14343
|
+
"name": "variant",
|
|
14344
|
+
"type": {
|
|
14345
|
+
"text": "MarkerVariants"
|
|
14346
|
+
},
|
|
14347
|
+
"privacy": "public",
|
|
14348
|
+
"description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
|
|
14349
|
+
"default": "solid",
|
|
14350
|
+
"attribute": "variant",
|
|
14351
|
+
"reflects": true
|
|
14352
|
+
}
|
|
14353
|
+
],
|
|
14354
|
+
"attributes": [
|
|
14360
14355
|
{
|
|
14361
|
-
"name": "
|
|
14362
|
-
"
|
|
14356
|
+
"name": "variant",
|
|
14357
|
+
"type": {
|
|
14358
|
+
"text": "MarkerVariants"
|
|
14359
|
+
},
|
|
14360
|
+
"description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
|
|
14361
|
+
"default": "solid",
|
|
14362
|
+
"fieldName": "variant"
|
|
14363
14363
|
}
|
|
14364
14364
|
],
|
|
14365
14365
|
"superclass": {
|
|
14366
14366
|
"name": "Component",
|
|
14367
14367
|
"module": "/src/models"
|
|
14368
14368
|
},
|
|
14369
|
-
"tagName": "mdc-
|
|
14370
|
-
"jsDoc": "/**\n * mdc-
|
|
14369
|
+
"tagName": "mdc-marker",
|
|
14370
|
+
"jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
|
|
14371
14371
|
"customElement": true
|
|
14372
14372
|
}
|
|
14373
14373
|
],
|
|
@@ -14376,8 +14376,8 @@
|
|
|
14376
14376
|
"kind": "js",
|
|
14377
14377
|
"name": "default",
|
|
14378
14378
|
"declaration": {
|
|
14379
|
-
"name": "
|
|
14380
|
-
"module": "components/
|
|
14379
|
+
"name": "Marker",
|
|
14380
|
+
"module": "components/marker/marker.component.js"
|
|
14381
14381
|
}
|
|
14382
14382
|
}
|
|
14383
14383
|
]
|
|
@@ -22536,334 +22536,222 @@
|
|
|
22536
22536
|
},
|
|
22537
22537
|
{
|
|
22538
22538
|
"kind": "javascript-module",
|
|
22539
|
-
"path": "components/
|
|
22539
|
+
"path": "components/progressspinner/progressspinner.component.js",
|
|
22540
22540
|
"declarations": [
|
|
22541
22541
|
{
|
|
22542
22542
|
"kind": "class",
|
|
22543
|
-
"description": "
|
|
22544
|
-
"name": "
|
|
22543
|
+
"description": "`mdc-progressspinner` is a customizable, circular progress indicator component.\nIt visually represents the current completion state of a process, such as loading,\nsyncing, uploading, or any ongoing task that has a measurable percentage.\n\nThe spinner is built using SVG with two concentric `<circle>` elements:\n- The `progress` arc represents the portion of work completed.\n- The `track` arc represents the remaining part.\n\nA visual gap is maintained between the progress and track arcs to clearly\ndistinguish the two segments. The component smoothly animates arc length\nand respects accessibility best practices with ARIA attributes.\n\nThe component supports different states:\n- **Default**: Circular spinner shows the progress.\n- **Success**: Displays a checkmark icon when progress reaches 100%.\n- **Error**: Displays an error icon when in an error state.",
|
|
22544
|
+
"name": "Progressspinner",
|
|
22545
22545
|
"cssProperties": [
|
|
22546
22546
|
{
|
|
22547
|
-
"description": "
|
|
22548
|
-
"name": "--mdc-
|
|
22547
|
+
"description": "The size of the spinner.",
|
|
22548
|
+
"name": "--mdc-spinner-size"
|
|
22549
22549
|
},
|
|
22550
22550
|
{
|
|
22551
|
-
"description": "color of the
|
|
22552
|
-
"name": "--mdc-
|
|
22551
|
+
"description": "The color of the spinner track.",
|
|
22552
|
+
"name": "--mdc-track-color"
|
|
22553
22553
|
},
|
|
22554
22554
|
{
|
|
22555
|
-
"description": "color of the
|
|
22556
|
-
"name": "--mdc-
|
|
22555
|
+
"description": "The color of the spinner progress.",
|
|
22556
|
+
"name": "--mdc-progress-color"
|
|
22557
22557
|
},
|
|
22558
22558
|
{
|
|
22559
|
-
"description": "color of the
|
|
22560
|
-
"name": "--mdc-
|
|
22559
|
+
"description": "The color of the spinner when in success state.",
|
|
22560
|
+
"name": "--mdc-progress-success-color"
|
|
22561
22561
|
},
|
|
22562
22562
|
{
|
|
22563
|
-
"description": "color of the
|
|
22564
|
-
"name": "--mdc-
|
|
22563
|
+
"description": "The color of the spinner when in error state.",
|
|
22564
|
+
"name": "--mdc-progress-error-color"
|
|
22565
22565
|
},
|
|
22566
22566
|
{
|
|
22567
|
-
"description": "color of the
|
|
22568
|
-
"name": "--mdc-
|
|
22567
|
+
"description": "Background color of the progressbar when inactive.",
|
|
22568
|
+
"name": "--mdc-progressbar-default-background-color",
|
|
22569
|
+
"inheritedFrom": {
|
|
22570
|
+
"name": "Progressbar",
|
|
22571
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
22572
|
+
}
|
|
22569
22573
|
},
|
|
22570
22574
|
{
|
|
22571
|
-
"description": "color of the
|
|
22572
|
-
"name": "--mdc-
|
|
22575
|
+
"description": "Background color of the progressbar when active.",
|
|
22576
|
+
"name": "--mdc-progressbar-default-active-background-color",
|
|
22577
|
+
"inheritedFrom": {
|
|
22578
|
+
"name": "Progressbar",
|
|
22579
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
22580
|
+
}
|
|
22573
22581
|
},
|
|
22574
22582
|
{
|
|
22575
|
-
"description": "color of the
|
|
22576
|
-
"name": "--mdc-
|
|
22577
|
-
|
|
22578
|
-
|
|
22579
|
-
|
|
22580
|
-
|
|
22581
|
-
"kind": "field",
|
|
22582
|
-
"name": "checked",
|
|
22583
|
-
"type": {
|
|
22584
|
-
"text": "boolean"
|
|
22585
|
-
},
|
|
22586
|
-
"default": "false",
|
|
22587
|
-
"description": "Determines whether the radio is selected or unselected.",
|
|
22588
|
-
"attribute": "checked",
|
|
22589
|
-
"reflects": true
|
|
22583
|
+
"description": "Background color of the progressbar when in success state.",
|
|
22584
|
+
"name": "--mdc-progressbar-success-background-color",
|
|
22585
|
+
"inheritedFrom": {
|
|
22586
|
+
"name": "Progressbar",
|
|
22587
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
22588
|
+
}
|
|
22590
22589
|
},
|
|
22591
22590
|
{
|
|
22592
|
-
"
|
|
22593
|
-
"name": "
|
|
22594
|
-
"
|
|
22595
|
-
"
|
|
22596
|
-
|
|
22597
|
-
|
|
22598
|
-
"description": "Determines whether the radio is read-only.",
|
|
22599
|
-
"attribute": "readonly",
|
|
22600
|
-
"reflects": true
|
|
22591
|
+
"description": "Background color of the progressbar when in error state.",
|
|
22592
|
+
"name": "--mdc-progressbar-error-background-color",
|
|
22593
|
+
"inheritedFrom": {
|
|
22594
|
+
"name": "Progressbar",
|
|
22595
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
22596
|
+
}
|
|
22601
22597
|
},
|
|
22602
22598
|
{
|
|
22603
|
-
"
|
|
22604
|
-
"name": "
|
|
22605
|
-
"
|
|
22606
|
-
"
|
|
22607
|
-
|
|
22608
|
-
|
|
22609
|
-
"description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
|
|
22610
|
-
"attribute": "autofocus",
|
|
22611
|
-
"reflects": true
|
|
22599
|
+
"description": "The height of the progressbar.",
|
|
22600
|
+
"name": "--mdc-progressbar-height",
|
|
22601
|
+
"inheritedFrom": {
|
|
22602
|
+
"name": "Progressbar",
|
|
22603
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
22604
|
+
}
|
|
22612
22605
|
},
|
|
22613
22606
|
{
|
|
22614
|
-
"
|
|
22615
|
-
"name": "
|
|
22616
|
-
"
|
|
22617
|
-
|
|
22618
|
-
"
|
|
22619
|
-
|
|
22620
|
-
}
|
|
22621
|
-
},
|
|
22622
|
-
"description": "Returns all radios within the same group (name)."
|
|
22607
|
+
"description": "The border radius of the progressbar.",
|
|
22608
|
+
"name": "--mdc-progressbar-border-radius",
|
|
22609
|
+
"inheritedFrom": {
|
|
22610
|
+
"name": "Progressbar",
|
|
22611
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
22612
|
+
}
|
|
22623
22613
|
},
|
|
22624
22614
|
{
|
|
22625
|
-
"
|
|
22626
|
-
"name": "
|
|
22627
|
-
"
|
|
22628
|
-
|
|
22629
|
-
"
|
|
22630
|
-
|
|
22631
|
-
}
|
|
22632
|
-
},
|
|
22633
|
-
"parameters": [
|
|
22634
|
-
{
|
|
22635
|
-
"name": "event",
|
|
22636
|
-
"type": {
|
|
22637
|
-
"text": "Event"
|
|
22638
|
-
}
|
|
22639
|
-
}
|
|
22640
|
-
],
|
|
22641
|
-
"description": "The 'change' event does not bubble up through the shadow DOM as it was not composed.\nTherefore, we need to re-dispatch the same event to ensure it is propagated correctly.\nRead more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed"
|
|
22615
|
+
"description": "Color of the progressbar label text.",
|
|
22616
|
+
"name": "--mdc-progressbar-label-color",
|
|
22617
|
+
"inheritedFrom": {
|
|
22618
|
+
"name": "Progressbar",
|
|
22619
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
22620
|
+
}
|
|
22642
22621
|
},
|
|
22643
22622
|
{
|
|
22644
|
-
"
|
|
22645
|
-
"name": "
|
|
22646
|
-
"
|
|
22647
|
-
|
|
22648
|
-
|
|
22649
|
-
|
|
22650
|
-
"type": {
|
|
22651
|
-
"text": "Radio[]"
|
|
22652
|
-
},
|
|
22653
|
-
"description": "Array of radios of the same group"
|
|
22654
|
-
},
|
|
22655
|
-
{
|
|
22656
|
-
"name": "isValid",
|
|
22657
|
-
"type": {
|
|
22658
|
-
"text": "boolean"
|
|
22659
|
-
},
|
|
22660
|
-
"description": "Boolean value to set the validity of the group"
|
|
22661
|
-
}
|
|
22662
|
-
],
|
|
22663
|
-
"description": "Sets the validity of the group of radios."
|
|
22623
|
+
"description": "Line height of the label text.",
|
|
22624
|
+
"name": "--mdc-progressbar-label-lineheight",
|
|
22625
|
+
"inheritedFrom": {
|
|
22626
|
+
"name": "Progressbar",
|
|
22627
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
22628
|
+
}
|
|
22664
22629
|
},
|
|
22665
22630
|
{
|
|
22666
|
-
"
|
|
22667
|
-
"name": "
|
|
22668
|
-
"
|
|
22669
|
-
|
|
22631
|
+
"description": "Font size of the label text.",
|
|
22632
|
+
"name": "--mdc-progressbar-label-fontsize",
|
|
22633
|
+
"inheritedFrom": {
|
|
22634
|
+
"name": "Progressbar",
|
|
22635
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
22636
|
+
}
|
|
22670
22637
|
},
|
|
22671
22638
|
{
|
|
22672
|
-
"
|
|
22673
|
-
"name": "
|
|
22674
|
-
"
|
|
22675
|
-
|
|
22676
|
-
"
|
|
22677
|
-
|
|
22678
|
-
}
|
|
22679
|
-
},
|
|
22680
|
-
"parameters": [
|
|
22681
|
-
{
|
|
22682
|
-
"name": "event",
|
|
22683
|
-
"type": {
|
|
22684
|
-
"text": "Event"
|
|
22685
|
-
}
|
|
22686
|
-
}
|
|
22687
|
-
],
|
|
22688
|
-
"description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
|
|
22639
|
+
"description": "Font weight of the label text.",
|
|
22640
|
+
"name": "--mdc-progressbar-label-fontweight",
|
|
22641
|
+
"inheritedFrom": {
|
|
22642
|
+
"name": "Progressbar",
|
|
22643
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
22644
|
+
}
|
|
22689
22645
|
},
|
|
22646
|
+
{
|
|
22647
|
+
"description": "Color of the help text.",
|
|
22648
|
+
"name": "--mdc-progressbar-help-text-color",
|
|
22649
|
+
"inheritedFrom": {
|
|
22650
|
+
"name": "Progressbar",
|
|
22651
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
22652
|
+
}
|
|
22653
|
+
}
|
|
22654
|
+
],
|
|
22655
|
+
"members": [
|
|
22690
22656
|
{
|
|
22691
22657
|
"kind": "method",
|
|
22692
|
-
"name": "
|
|
22693
|
-
"privacy": "private"
|
|
22694
|
-
"parameters": [
|
|
22695
|
-
{
|
|
22696
|
-
"name": "enabledRadios",
|
|
22697
|
-
"type": {
|
|
22698
|
-
"text": "Radio[]"
|
|
22699
|
-
},
|
|
22700
|
-
"description": "An array of enabled radio buttons within the same group."
|
|
22701
|
-
},
|
|
22702
|
-
{
|
|
22703
|
-
"name": "index",
|
|
22704
|
-
"type": {
|
|
22705
|
-
"text": "number"
|
|
22706
|
-
},
|
|
22707
|
-
"description": "The index of the radio button to be updated within the enabled radios array."
|
|
22708
|
-
},
|
|
22709
|
-
{
|
|
22710
|
-
"name": "event",
|
|
22711
|
-
"type": {
|
|
22712
|
-
"text": "Event"
|
|
22713
|
-
},
|
|
22714
|
-
"description": "The event that triggered the update."
|
|
22715
|
-
}
|
|
22716
|
-
],
|
|
22717
|
-
"description": "Updates the state of the radio button at the specified index within the enabled radios.\nFocuses the radio button and triggers the change event if the radio button is not read-only."
|
|
22658
|
+
"name": "renderProgressSpinner",
|
|
22659
|
+
"privacy": "private"
|
|
22718
22660
|
},
|
|
22719
22661
|
{
|
|
22720
22662
|
"kind": "method",
|
|
22721
|
-
"name": "
|
|
22663
|
+
"name": "renderErrorState",
|
|
22722
22664
|
"privacy": "private",
|
|
22665
|
+
"description": "Renders the error state of the progress spinner.",
|
|
22723
22666
|
"return": {
|
|
22724
22667
|
"type": {
|
|
22725
|
-
"text": "
|
|
22726
|
-
}
|
|
22727
|
-
},
|
|
22728
|
-
"parameters": [
|
|
22729
|
-
{
|
|
22730
|
-
"name": "event",
|
|
22731
|
-
"type": {
|
|
22732
|
-
"text": "KeyboardEvent"
|
|
22733
|
-
}
|
|
22668
|
+
"text": ""
|
|
22734
22669
|
}
|
|
22735
|
-
|
|
22736
|
-
"description": "Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element."
|
|
22670
|
+
}
|
|
22737
22671
|
},
|
|
22738
22672
|
{
|
|
22739
22673
|
"kind": "method",
|
|
22740
|
-
"name": "
|
|
22674
|
+
"name": "renderSuccessState",
|
|
22741
22675
|
"privacy": "private",
|
|
22676
|
+
"description": "Renders the success state of the progress spinner.",
|
|
22742
22677
|
"return": {
|
|
22743
22678
|
"type": {
|
|
22744
|
-
"text": "
|
|
22679
|
+
"text": ""
|
|
22745
22680
|
}
|
|
22746
|
-
}
|
|
22747
|
-
"description": "Update tab index for all radios in the same group (name)\nIf any radio group is checked, it will have a tab index of 0\nIf no radio group is checked, the first enabled radio will have a tab index of 0"
|
|
22748
|
-
},
|
|
22749
|
-
{
|
|
22750
|
-
"kind": "field",
|
|
22751
|
-
"name": "renderLabelAndHelperText",
|
|
22752
|
-
"privacy": "private"
|
|
22681
|
+
}
|
|
22753
22682
|
},
|
|
22754
22683
|
{
|
|
22755
22684
|
"kind": "field",
|
|
22756
|
-
"name": "
|
|
22685
|
+
"name": "dataAriaLabel",
|
|
22757
22686
|
"type": {
|
|
22758
|
-
"text": "string"
|
|
22687
|
+
"text": "string | null"
|
|
22759
22688
|
},
|
|
22760
|
-
"default": "
|
|
22761
|
-
"description": "
|
|
22762
|
-
"attribute": "
|
|
22689
|
+
"default": "null",
|
|
22690
|
+
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
22691
|
+
"attribute": "data-aria-label",
|
|
22763
22692
|
"reflects": true,
|
|
22764
22693
|
"inheritedFrom": {
|
|
22765
|
-
"name": "
|
|
22766
|
-
"module": "utils/mixins/
|
|
22694
|
+
"name": "DataAriaLabelMixin",
|
|
22695
|
+
"module": "utils/mixins/DataAriaLabelMixin.js"
|
|
22767
22696
|
}
|
|
22768
22697
|
},
|
|
22769
22698
|
{
|
|
22770
22699
|
"kind": "field",
|
|
22771
|
-
"name": "
|
|
22700
|
+
"name": "variant",
|
|
22772
22701
|
"type": {
|
|
22773
|
-
"text": "
|
|
22702
|
+
"text": "Variant"
|
|
22774
22703
|
},
|
|
22775
|
-
"
|
|
22776
|
-
"
|
|
22777
|
-
"attribute": "
|
|
22704
|
+
"description": "Types of the progressbar\n- **Default**\n- **Inline**",
|
|
22705
|
+
"default": "default",
|
|
22706
|
+
"attribute": "variant",
|
|
22778
22707
|
"reflects": true,
|
|
22779
22708
|
"inheritedFrom": {
|
|
22780
|
-
"name": "
|
|
22781
|
-
"module": "
|
|
22709
|
+
"name": "Progressbar",
|
|
22710
|
+
"module": "components/progressbar/progressbar.component.js"
|
|
22782
22711
|
}
|
|
22783
22712
|
},
|
|
22784
22713
|
{
|
|
22785
22714
|
"kind": "field",
|
|
22786
|
-
"name": "
|
|
22715
|
+
"name": "value",
|
|
22787
22716
|
"type": {
|
|
22788
|
-
"text": "string
|
|
22717
|
+
"text": "string"
|
|
22789
22718
|
},
|
|
22790
|
-
"
|
|
22791
|
-
"
|
|
22719
|
+
"default": "'0'",
|
|
22720
|
+
"description": "The current progress as a percentage, 0 to 100.\nThe value will be clamped between 0 and 100.",
|
|
22721
|
+
"attribute": "value",
|
|
22792
22722
|
"reflects": true,
|
|
22793
22723
|
"inheritedFrom": {
|
|
22794
|
-
"name": "
|
|
22795
|
-
"module": "
|
|
22724
|
+
"name": "Progressbar",
|
|
22725
|
+
"module": "components/progressbar/progressbar.component.js"
|
|
22796
22726
|
}
|
|
22797
22727
|
},
|
|
22798
22728
|
{
|
|
22799
22729
|
"kind": "field",
|
|
22800
|
-
"name": "
|
|
22730
|
+
"name": "error",
|
|
22801
22731
|
"type": {
|
|
22802
|
-
"text": "
|
|
22732
|
+
"text": "boolean"
|
|
22803
22733
|
},
|
|
22804
|
-
"
|
|
22805
|
-
"
|
|
22806
|
-
|
|
22807
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
22808
|
-
}
|
|
22809
|
-
},
|
|
22810
|
-
{
|
|
22811
|
-
"kind": "field",
|
|
22812
|
-
"name": "willValidate",
|
|
22813
|
-
"readonly": true,
|
|
22734
|
+
"default": "false",
|
|
22735
|
+
"description": "Define error state of the progressbar\n- **true**\n- **false**",
|
|
22736
|
+
"attribute": "error",
|
|
22814
22737
|
"inheritedFrom": {
|
|
22815
|
-
"name": "
|
|
22816
|
-
"module": "
|
|
22738
|
+
"name": "Progressbar",
|
|
22739
|
+
"module": "components/progressbar/progressbar.component.js"
|
|
22817
22740
|
}
|
|
22818
22741
|
},
|
|
22819
22742
|
{
|
|
22820
22743
|
"kind": "method",
|
|
22821
|
-
"name": "
|
|
22822
|
-
"
|
|
22744
|
+
"name": "getValidationVariant",
|
|
22745
|
+
"privacy": "private",
|
|
22746
|
+
"description": "Determines the validation state (success, error, or default) based on progress value and error state.",
|
|
22823
22747
|
"return": {
|
|
22824
22748
|
"type": {
|
|
22825
22749
|
"text": ""
|
|
22826
22750
|
}
|
|
22827
22751
|
},
|
|
22828
22752
|
"inheritedFrom": {
|
|
22829
|
-
"name": "
|
|
22830
|
-
"module": "
|
|
22831
|
-
}
|
|
22832
|
-
},
|
|
22833
|
-
{
|
|
22834
|
-
"kind": "method",
|
|
22835
|
-
"name": "checkValidity",
|
|
22836
|
-
"return": {
|
|
22837
|
-
"type": {
|
|
22838
|
-
"text": "boolean"
|
|
22839
|
-
}
|
|
22840
|
-
},
|
|
22841
|
-
"inheritedFrom": {
|
|
22842
|
-
"name": "FormInternalsMixin",
|
|
22843
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
22844
|
-
}
|
|
22845
|
-
},
|
|
22846
|
-
{
|
|
22847
|
-
"kind": "method",
|
|
22848
|
-
"name": "reportValidity",
|
|
22849
|
-
"inheritedFrom": {
|
|
22850
|
-
"name": "FormInternalsMixin",
|
|
22851
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
22852
|
-
}
|
|
22853
|
-
},
|
|
22854
|
-
{
|
|
22855
|
-
"kind": "field",
|
|
22856
|
-
"name": "dataAriaLabel",
|
|
22857
|
-
"type": {
|
|
22858
|
-
"text": "string | null"
|
|
22859
|
-
},
|
|
22860
|
-
"default": "null",
|
|
22861
|
-
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
22862
|
-
"attribute": "data-aria-label",
|
|
22863
|
-
"reflects": true,
|
|
22864
|
-
"inheritedFrom": {
|
|
22865
|
-
"name": "DataAriaLabelMixin",
|
|
22866
|
-
"module": "utils/mixins/DataAriaLabelMixin.js"
|
|
22753
|
+
"name": "Progressbar",
|
|
22754
|
+
"module": "components/progressbar/progressbar.component.js"
|
|
22867
22755
|
}
|
|
22868
22756
|
},
|
|
22869
22757
|
{
|
|
@@ -23036,62 +22924,38 @@
|
|
|
23036
22924
|
}
|
|
23037
22925
|
}
|
|
23038
22926
|
],
|
|
23039
|
-
"
|
|
23040
|
-
|
|
23041
|
-
|
|
23042
|
-
|
|
23043
|
-
|
|
23044
|
-
|
|
23045
|
-
|
|
23046
|
-
"description": "(React: onChange) Event that gets dispatched when the radio state changes.",
|
|
23047
|
-
"name": "change",
|
|
23048
|
-
"reactName": "onChange"
|
|
23049
|
-
},
|
|
23050
|
-
{
|
|
23051
|
-
"description": "(React: onFocus) Event that gets dispatched when the radio receives focus.",
|
|
23052
|
-
"name": "focus",
|
|
23053
|
-
"reactName": "onFocus"
|
|
23054
|
-
}
|
|
23055
|
-
],
|
|
22927
|
+
"superclass": {
|
|
22928
|
+
"name": "Progressbar",
|
|
22929
|
+
"module": "/src/components/progressbar/progressbar.component"
|
|
22930
|
+
},
|
|
22931
|
+
"tagName": "mdc-progressspinner",
|
|
22932
|
+
"jsDoc": "/**\n * `mdc-progressspinner` is a customizable, circular progress indicator component.\n * It visually represents the current completion state of a process, such as loading,\n * syncing, uploading, or any ongoing task that has a measurable percentage.\n *\n * The spinner is built using SVG with two concentric `<circle>` elements:\n * - The `progress` arc represents the portion of work completed.\n * - The `track` arc represents the remaining part.\n *\n * A visual gap is maintained between the progress and track arcs to clearly\n * distinguish the two segments. The component smoothly animates arc length\n * and respects accessibility best practices with ARIA attributes.\n *\n * The component supports different states:\n * - **Default**: Circular spinner shows the progress.\n * - **Success**: Displays a checkmark icon when progress reaches 100%.\n * - **Error**: Displays an error icon when in an error state.\n *\n * @tagname mdc-progressspinner\n *\n * @cssproperty --mdc-spinner-size - The size of the spinner.\n * @cssproperty --mdc-track-color - The color of the spinner track.\n * @cssproperty --mdc-progress-color - The color of the spinner progress.\n * @cssproperty --mdc-progress-success-color - The color of the spinner when in success state.\n * @cssproperty --mdc-progress-error-color - The color of the spinner when in error state.\n *\n */",
|
|
22933
|
+
"customElement": true,
|
|
23056
22934
|
"attributes": [
|
|
23057
22935
|
{
|
|
23058
|
-
"name": "
|
|
23059
|
-
"type": {
|
|
23060
|
-
"text": "boolean"
|
|
23061
|
-
},
|
|
23062
|
-
"default": "false",
|
|
23063
|
-
"description": "Determines whether the radio is selected or unselected.",
|
|
23064
|
-
"fieldName": "checked"
|
|
23065
|
-
},
|
|
23066
|
-
{
|
|
23067
|
-
"name": "readonly",
|
|
23068
|
-
"type": {
|
|
23069
|
-
"text": "boolean"
|
|
23070
|
-
},
|
|
23071
|
-
"default": "false",
|
|
23072
|
-
"description": "Determines whether the radio is read-only.",
|
|
23073
|
-
"fieldName": "readonly"
|
|
23074
|
-
},
|
|
23075
|
-
{
|
|
23076
|
-
"name": "autofocus",
|
|
22936
|
+
"name": "data-aria-label",
|
|
23077
22937
|
"type": {
|
|
23078
|
-
"text": "
|
|
22938
|
+
"text": "string | null"
|
|
23079
22939
|
},
|
|
23080
|
-
"default": "
|
|
23081
|
-
"description": "
|
|
23082
|
-
"fieldName": "
|
|
22940
|
+
"default": "null",
|
|
22941
|
+
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
22942
|
+
"fieldName": "dataAriaLabel",
|
|
22943
|
+
"inheritedFrom": {
|
|
22944
|
+
"name": "DataAriaLabelMixin",
|
|
22945
|
+
"module": "src/utils/mixins/DataAriaLabelMixin.ts"
|
|
22946
|
+
}
|
|
23083
22947
|
},
|
|
23084
22948
|
{
|
|
23085
|
-
"name": "
|
|
22949
|
+
"name": "variant",
|
|
23086
22950
|
"type": {
|
|
23087
|
-
"text": "
|
|
22951
|
+
"text": "Variant"
|
|
23088
22952
|
},
|
|
23089
|
-
"
|
|
23090
|
-
"
|
|
23091
|
-
"fieldName": "
|
|
22953
|
+
"description": "Types of the progressbar\n- **Default**\n- **Inline**",
|
|
22954
|
+
"default": "default",
|
|
22955
|
+
"fieldName": "variant",
|
|
23092
22956
|
"inheritedFrom": {
|
|
23093
|
-
"name": "
|
|
23094
|
-
"module": "src/
|
|
22957
|
+
"name": "Progressbar",
|
|
22958
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
23095
22959
|
}
|
|
23096
22960
|
},
|
|
23097
22961
|
{
|
|
@@ -23099,37 +22963,25 @@
|
|
|
23099
22963
|
"type": {
|
|
23100
22964
|
"text": "string"
|
|
23101
22965
|
},
|
|
23102
|
-
"default": "''",
|
|
23103
|
-
"description": "
|
|
22966
|
+
"default": "'0'",
|
|
22967
|
+
"description": "The current progress as a percentage, 0 to 100.\nThe value will be clamped between 0 and 100.",
|
|
23104
22968
|
"fieldName": "value",
|
|
23105
22969
|
"inheritedFrom": {
|
|
23106
|
-
"name": "
|
|
23107
|
-
"module": "src/
|
|
23108
|
-
}
|
|
23109
|
-
},
|
|
23110
|
-
{
|
|
23111
|
-
"name": "validation-message",
|
|
23112
|
-
"type": {
|
|
23113
|
-
"text": "string | undefined"
|
|
23114
|
-
},
|
|
23115
|
-
"description": "Custom validation message that will override the default message and displayed when the input is invalid.",
|
|
23116
|
-
"fieldName": "validationMessage",
|
|
23117
|
-
"inheritedFrom": {
|
|
23118
|
-
"name": "FormInternalsMixin",
|
|
23119
|
-
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
|
22970
|
+
"name": "Progressbar",
|
|
22971
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
23120
22972
|
}
|
|
23121
22973
|
},
|
|
23122
22974
|
{
|
|
23123
|
-
"name": "
|
|
22975
|
+
"name": "error",
|
|
23124
22976
|
"type": {
|
|
23125
|
-
"text": "
|
|
22977
|
+
"text": "boolean"
|
|
23126
22978
|
},
|
|
23127
|
-
"default": "
|
|
23128
|
-
"description": "
|
|
23129
|
-
"fieldName": "
|
|
22979
|
+
"default": "false",
|
|
22980
|
+
"description": "Define error state of the progressbar\n- **true**\n- **false**",
|
|
22981
|
+
"fieldName": "error",
|
|
23130
22982
|
"inheritedFrom": {
|
|
23131
|
-
"name": "
|
|
23132
|
-
"module": "src/
|
|
22983
|
+
"name": "Progressbar",
|
|
22984
|
+
"module": "src/components/progressbar/progressbar.component.ts"
|
|
23133
22985
|
}
|
|
23134
22986
|
},
|
|
23135
22987
|
{
|
|
@@ -23201,29 +23053,12 @@
|
|
|
23201
23053
|
},
|
|
23202
23054
|
"description": "The help text that is displayed below the input field.",
|
|
23203
23055
|
"fieldName": "helpText",
|
|
23204
|
-
"inheritedFrom": {
|
|
23205
|
-
"name": "FormfieldWrapper",
|
|
23206
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
23207
|
-
}
|
|
23208
|
-
}
|
|
23209
|
-
],
|
|
23210
|
-
"mixins": [
|
|
23211
|
-
{
|
|
23212
|
-
"name": "FormInternalsMixin",
|
|
23213
|
-
"module": "/src/utils/mixins/FormInternalsMixin"
|
|
23214
|
-
},
|
|
23215
|
-
{
|
|
23216
|
-
"name": "DataAriaLabelMixin",
|
|
23217
|
-
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
|
23056
|
+
"inheritedFrom": {
|
|
23057
|
+
"name": "FormfieldWrapper",
|
|
23058
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
23059
|
+
}
|
|
23218
23060
|
}
|
|
23219
23061
|
],
|
|
23220
|
-
"superclass": {
|
|
23221
|
-
"name": "FormfieldWrapper",
|
|
23222
|
-
"module": "/src/components/formfieldwrapper/formfieldwrapper.component"
|
|
23223
|
-
},
|
|
23224
|
-
"tagName": "mdc-radio",
|
|
23225
|
-
"jsDoc": "/**\n * Radio allow users to select single options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selection in lists.\n *\n * A radio component contains an optional label, optional info icon and an optional helper text.\n * @dependency mdc-formfieldwrapper\n *\n * @tagname mdc-radio\n *\n * @event change - (React: onChange) Event that gets dispatched when the radio state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.\n *\n * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered\n * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed\n * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered\n * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed\n * @cssproperty --mdc-radio-disabled-border-color - color of the radio button when disabled\n * @cssproperty --mdc-radio-control-active-disabled-background - color of the radio button when active and disabled\n * @cssproperty --mdc-radio-control-inactive-disabled-background - color of the radio button when inactive and disabled\n *\n */",
|
|
23226
|
-
"customElement": true,
|
|
23227
23062
|
"slots": [
|
|
23228
23063
|
{
|
|
23229
23064
|
"description": "slot to add the label info icon",
|
|
@@ -23241,230 +23076,342 @@
|
|
|
23241
23076
|
"kind": "js",
|
|
23242
23077
|
"name": "default",
|
|
23243
23078
|
"declaration": {
|
|
23244
|
-
"name": "
|
|
23245
|
-
"module": "components/
|
|
23079
|
+
"name": "Progressspinner",
|
|
23080
|
+
"module": "components/progressspinner/progressspinner.component.js"
|
|
23246
23081
|
}
|
|
23247
23082
|
}
|
|
23248
23083
|
]
|
|
23249
23084
|
},
|
|
23250
23085
|
{
|
|
23251
23086
|
"kind": "javascript-module",
|
|
23252
|
-
"path": "components/
|
|
23087
|
+
"path": "components/radio/radio.component.js",
|
|
23253
23088
|
"declarations": [
|
|
23254
23089
|
{
|
|
23255
23090
|
"kind": "class",
|
|
23256
|
-
"description": "
|
|
23257
|
-
"name": "
|
|
23091
|
+
"description": "Radio allow users to select single options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selection in lists.\n\nA radio component contains an optional label, optional info icon and an optional helper text.",
|
|
23092
|
+
"name": "Radio",
|
|
23258
23093
|
"cssProperties": [
|
|
23259
23094
|
{
|
|
23260
|
-
"description": "
|
|
23261
|
-
"name": "--mdc-
|
|
23095
|
+
"description": "color of the label when disabled",
|
|
23096
|
+
"name": "--mdc-radio-text-disabled-color"
|
|
23262
23097
|
},
|
|
23263
23098
|
{
|
|
23264
|
-
"description": "
|
|
23265
|
-
"name": "--mdc-
|
|
23099
|
+
"description": "color of the radio button when inactive and hovered",
|
|
23100
|
+
"name": "--mdc-radio-control-inactive-hover"
|
|
23266
23101
|
},
|
|
23267
23102
|
{
|
|
23268
|
-
"description": "
|
|
23269
|
-
"name": "--mdc-
|
|
23103
|
+
"description": "color of the radio button when inactive and pressed",
|
|
23104
|
+
"name": "--mdc-radio-control-inactive-pressed-color"
|
|
23270
23105
|
},
|
|
23271
23106
|
{
|
|
23272
|
-
"description": "
|
|
23273
|
-
"name": "--mdc-
|
|
23107
|
+
"description": "color of the radio button when active and hovered",
|
|
23108
|
+
"name": "--mdc-radio-control-active-hover-color"
|
|
23274
23109
|
},
|
|
23275
23110
|
{
|
|
23276
|
-
"description": "
|
|
23277
|
-
"name": "--mdc-
|
|
23111
|
+
"description": "color of the radio button when active and pressed",
|
|
23112
|
+
"name": "--mdc-radio-control-active-pressed-color"
|
|
23278
23113
|
},
|
|
23279
23114
|
{
|
|
23280
|
-
"description": "
|
|
23281
|
-
"name": "--mdc-
|
|
23282
|
-
"inheritedFrom": {
|
|
23283
|
-
"name": "Progressbar",
|
|
23284
|
-
"module": "src/components/progressbar/progressbar.component.ts"
|
|
23285
|
-
}
|
|
23115
|
+
"description": "color of the radio button when disabled",
|
|
23116
|
+
"name": "--mdc-radio-disabled-border-color"
|
|
23286
23117
|
},
|
|
23287
23118
|
{
|
|
23288
|
-
"description": "
|
|
23289
|
-
"name": "--mdc-
|
|
23290
|
-
"inheritedFrom": {
|
|
23291
|
-
"name": "Progressbar",
|
|
23292
|
-
"module": "src/components/progressbar/progressbar.component.ts"
|
|
23293
|
-
}
|
|
23119
|
+
"description": "color of the radio button when active and disabled",
|
|
23120
|
+
"name": "--mdc-radio-control-active-disabled-background"
|
|
23294
23121
|
},
|
|
23295
23122
|
{
|
|
23296
|
-
"description": "
|
|
23297
|
-
"name": "--mdc-
|
|
23298
|
-
|
|
23299
|
-
|
|
23300
|
-
|
|
23301
|
-
|
|
23123
|
+
"description": "color of the radio button when inactive and disabled",
|
|
23124
|
+
"name": "--mdc-radio-control-inactive-disabled-background"
|
|
23125
|
+
}
|
|
23126
|
+
],
|
|
23127
|
+
"members": [
|
|
23128
|
+
{
|
|
23129
|
+
"kind": "field",
|
|
23130
|
+
"name": "checked",
|
|
23131
|
+
"type": {
|
|
23132
|
+
"text": "boolean"
|
|
23133
|
+
},
|
|
23134
|
+
"default": "false",
|
|
23135
|
+
"description": "Determines whether the radio is selected or unselected.",
|
|
23136
|
+
"attribute": "checked",
|
|
23137
|
+
"reflects": true
|
|
23302
23138
|
},
|
|
23303
23139
|
{
|
|
23304
|
-
"
|
|
23305
|
-
"name": "
|
|
23306
|
-
"
|
|
23307
|
-
"
|
|
23308
|
-
|
|
23309
|
-
|
|
23140
|
+
"kind": "field",
|
|
23141
|
+
"name": "readonly",
|
|
23142
|
+
"type": {
|
|
23143
|
+
"text": "boolean"
|
|
23144
|
+
},
|
|
23145
|
+
"default": "false",
|
|
23146
|
+
"description": "Determines whether the radio is read-only.",
|
|
23147
|
+
"attribute": "readonly",
|
|
23148
|
+
"reflects": true
|
|
23310
23149
|
},
|
|
23311
23150
|
{
|
|
23312
|
-
"
|
|
23313
|
-
"name": "
|
|
23314
|
-
"
|
|
23315
|
-
"
|
|
23316
|
-
|
|
23317
|
-
|
|
23151
|
+
"kind": "field",
|
|
23152
|
+
"name": "autofocus",
|
|
23153
|
+
"type": {
|
|
23154
|
+
"text": "boolean"
|
|
23155
|
+
},
|
|
23156
|
+
"default": "false",
|
|
23157
|
+
"description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
|
|
23158
|
+
"attribute": "autofocus",
|
|
23159
|
+
"reflects": true
|
|
23318
23160
|
},
|
|
23319
23161
|
{
|
|
23320
|
-
"
|
|
23321
|
-
"name": "
|
|
23322
|
-
"
|
|
23323
|
-
|
|
23324
|
-
"
|
|
23325
|
-
|
|
23162
|
+
"kind": "method",
|
|
23163
|
+
"name": "getAllRadiosWithinSameGroup",
|
|
23164
|
+
"privacy": "private",
|
|
23165
|
+
"return": {
|
|
23166
|
+
"type": {
|
|
23167
|
+
"text": "Radio[]"
|
|
23168
|
+
}
|
|
23169
|
+
},
|
|
23170
|
+
"description": "Returns all radios within the same group (name)."
|
|
23326
23171
|
},
|
|
23327
23172
|
{
|
|
23328
|
-
"
|
|
23329
|
-
"name": "
|
|
23330
|
-
"
|
|
23331
|
-
|
|
23332
|
-
"
|
|
23333
|
-
|
|
23173
|
+
"kind": "method",
|
|
23174
|
+
"name": "dispatchChangeEvent",
|
|
23175
|
+
"privacy": "private",
|
|
23176
|
+
"return": {
|
|
23177
|
+
"type": {
|
|
23178
|
+
"text": "void"
|
|
23179
|
+
}
|
|
23180
|
+
},
|
|
23181
|
+
"parameters": [
|
|
23182
|
+
{
|
|
23183
|
+
"name": "event",
|
|
23184
|
+
"type": {
|
|
23185
|
+
"text": "Event"
|
|
23186
|
+
}
|
|
23187
|
+
}
|
|
23188
|
+
],
|
|
23189
|
+
"description": "The 'change' event does not bubble up through the shadow DOM as it was not composed.\nTherefore, we need to re-dispatch the same event to ensure it is propagated correctly.\nRead more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed"
|
|
23334
23190
|
},
|
|
23335
23191
|
{
|
|
23336
|
-
"
|
|
23337
|
-
"name": "
|
|
23338
|
-
"
|
|
23339
|
-
|
|
23340
|
-
|
|
23341
|
-
|
|
23192
|
+
"kind": "method",
|
|
23193
|
+
"name": "setGroupValidity",
|
|
23194
|
+
"privacy": "private",
|
|
23195
|
+
"parameters": [
|
|
23196
|
+
{
|
|
23197
|
+
"name": "radios",
|
|
23198
|
+
"type": {
|
|
23199
|
+
"text": "Radio[]"
|
|
23200
|
+
},
|
|
23201
|
+
"description": "Array of radios of the same group"
|
|
23202
|
+
},
|
|
23203
|
+
{
|
|
23204
|
+
"name": "isValid",
|
|
23205
|
+
"type": {
|
|
23206
|
+
"text": "boolean"
|
|
23207
|
+
},
|
|
23208
|
+
"description": "Boolean value to set the validity of the group"
|
|
23209
|
+
}
|
|
23210
|
+
],
|
|
23211
|
+
"description": "Sets the validity of the group of radios."
|
|
23342
23212
|
},
|
|
23343
23213
|
{
|
|
23344
|
-
"
|
|
23345
|
-
"name": "
|
|
23346
|
-
"
|
|
23347
|
-
|
|
23348
|
-
"module": "src/components/progressbar/progressbar.component.ts"
|
|
23349
|
-
}
|
|
23214
|
+
"kind": "method",
|
|
23215
|
+
"name": "setActualFormValue",
|
|
23216
|
+
"privacy": "private",
|
|
23217
|
+
"description": "Updates the form value to reflect the current state of the radio.\nIf checked, the value is set to the user-provided value.\nIf unchecked, the value is set to null."
|
|
23350
23218
|
},
|
|
23351
23219
|
{
|
|
23352
|
-
"
|
|
23353
|
-
"name": "
|
|
23354
|
-
"
|
|
23355
|
-
|
|
23356
|
-
"
|
|
23357
|
-
|
|
23220
|
+
"kind": "method",
|
|
23221
|
+
"name": "handleChange",
|
|
23222
|
+
"privacy": "private",
|
|
23223
|
+
"return": {
|
|
23224
|
+
"type": {
|
|
23225
|
+
"text": "void"
|
|
23226
|
+
}
|
|
23227
|
+
},
|
|
23228
|
+
"parameters": [
|
|
23229
|
+
{
|
|
23230
|
+
"name": "event",
|
|
23231
|
+
"type": {
|
|
23232
|
+
"text": "Event"
|
|
23233
|
+
}
|
|
23234
|
+
}
|
|
23235
|
+
],
|
|
23236
|
+
"description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
|
|
23358
23237
|
},
|
|
23359
23238
|
{
|
|
23360
|
-
"
|
|
23361
|
-
"name": "
|
|
23362
|
-
"
|
|
23363
|
-
|
|
23364
|
-
|
|
23365
|
-
|
|
23366
|
-
|
|
23367
|
-
|
|
23368
|
-
|
|
23239
|
+
"kind": "method",
|
|
23240
|
+
"name": "updateRadio",
|
|
23241
|
+
"privacy": "private",
|
|
23242
|
+
"parameters": [
|
|
23243
|
+
{
|
|
23244
|
+
"name": "enabledRadios",
|
|
23245
|
+
"type": {
|
|
23246
|
+
"text": "Radio[]"
|
|
23247
|
+
},
|
|
23248
|
+
"description": "An array of enabled radio buttons within the same group."
|
|
23249
|
+
},
|
|
23250
|
+
{
|
|
23251
|
+
"name": "index",
|
|
23252
|
+
"type": {
|
|
23253
|
+
"text": "number"
|
|
23254
|
+
},
|
|
23255
|
+
"description": "The index of the radio button to be updated within the enabled radios array."
|
|
23256
|
+
},
|
|
23257
|
+
{
|
|
23258
|
+
"name": "event",
|
|
23259
|
+
"type": {
|
|
23260
|
+
"text": "Event"
|
|
23261
|
+
},
|
|
23262
|
+
"description": "The event that triggered the update."
|
|
23263
|
+
}
|
|
23264
|
+
],
|
|
23265
|
+
"description": "Updates the state of the radio button at the specified index within the enabled radios.\nFocuses the radio button and triggers the change event if the radio button is not read-only."
|
|
23266
|
+
},
|
|
23369
23267
|
{
|
|
23370
23268
|
"kind": "method",
|
|
23371
|
-
"name": "
|
|
23372
|
-
"privacy": "private"
|
|
23269
|
+
"name": "handleKeyDown",
|
|
23270
|
+
"privacy": "private",
|
|
23271
|
+
"return": {
|
|
23272
|
+
"type": {
|
|
23273
|
+
"text": "void"
|
|
23274
|
+
}
|
|
23275
|
+
},
|
|
23276
|
+
"parameters": [
|
|
23277
|
+
{
|
|
23278
|
+
"name": "event",
|
|
23279
|
+
"type": {
|
|
23280
|
+
"text": "KeyboardEvent"
|
|
23281
|
+
}
|
|
23282
|
+
}
|
|
23283
|
+
],
|
|
23284
|
+
"description": "Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element."
|
|
23373
23285
|
},
|
|
23374
23286
|
{
|
|
23375
23287
|
"kind": "method",
|
|
23376
|
-
"name": "
|
|
23288
|
+
"name": "updateTabIndex",
|
|
23377
23289
|
"privacy": "private",
|
|
23378
|
-
"description": "Renders the error state of the progress spinner.",
|
|
23379
23290
|
"return": {
|
|
23380
23291
|
"type": {
|
|
23381
|
-
"text": ""
|
|
23292
|
+
"text": "void"
|
|
23382
23293
|
}
|
|
23383
|
-
}
|
|
23294
|
+
},
|
|
23295
|
+
"description": "Update tab index for all radios in the same group (name)\nIf any radio group is checked, it will have a tab index of 0\nIf no radio group is checked, the first enabled radio will have a tab index of 0"
|
|
23384
23296
|
},
|
|
23385
23297
|
{
|
|
23386
|
-
"kind": "
|
|
23387
|
-
"name": "
|
|
23388
|
-
"privacy": "private"
|
|
23389
|
-
"description": "Renders the success state of the progress spinner.",
|
|
23390
|
-
"return": {
|
|
23391
|
-
"type": {
|
|
23392
|
-
"text": ""
|
|
23393
|
-
}
|
|
23394
|
-
}
|
|
23298
|
+
"kind": "field",
|
|
23299
|
+
"name": "renderLabelAndHelperText",
|
|
23300
|
+
"privacy": "private"
|
|
23395
23301
|
},
|
|
23396
23302
|
{
|
|
23397
23303
|
"kind": "field",
|
|
23398
|
-
"name": "
|
|
23304
|
+
"name": "name",
|
|
23399
23305
|
"type": {
|
|
23400
|
-
"text": "string
|
|
23306
|
+
"text": "string"
|
|
23401
23307
|
},
|
|
23402
|
-
"default": "
|
|
23403
|
-
"description": "
|
|
23404
|
-
"attribute": "
|
|
23308
|
+
"default": "''",
|
|
23309
|
+
"description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
|
|
23310
|
+
"attribute": "name",
|
|
23405
23311
|
"reflects": true,
|
|
23406
23312
|
"inheritedFrom": {
|
|
23407
|
-
"name": "
|
|
23408
|
-
"module": "utils/mixins/
|
|
23313
|
+
"name": "FormInternalsMixin",
|
|
23314
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
23409
23315
|
}
|
|
23410
23316
|
},
|
|
23411
23317
|
{
|
|
23412
23318
|
"kind": "field",
|
|
23413
|
-
"name": "
|
|
23319
|
+
"name": "value",
|
|
23414
23320
|
"type": {
|
|
23415
|
-
"text": "
|
|
23321
|
+
"text": "string"
|
|
23416
23322
|
},
|
|
23417
|
-
"
|
|
23418
|
-
"
|
|
23419
|
-
"attribute": "
|
|
23323
|
+
"default": "''",
|
|
23324
|
+
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
|
23325
|
+
"attribute": "value",
|
|
23420
23326
|
"reflects": true,
|
|
23421
23327
|
"inheritedFrom": {
|
|
23422
|
-
"name": "
|
|
23423
|
-
"module": "
|
|
23328
|
+
"name": "FormInternalsMixin",
|
|
23329
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
23424
23330
|
}
|
|
23425
23331
|
},
|
|
23426
23332
|
{
|
|
23427
23333
|
"kind": "field",
|
|
23428
|
-
"name": "
|
|
23334
|
+
"name": "validationMessage",
|
|
23429
23335
|
"type": {
|
|
23430
|
-
"text": "string"
|
|
23336
|
+
"text": "string | undefined"
|
|
23431
23337
|
},
|
|
23432
|
-
"
|
|
23433
|
-
"
|
|
23434
|
-
"attribute": "value",
|
|
23338
|
+
"description": "Custom validation message that will override the default message and displayed when the input is invalid.",
|
|
23339
|
+
"attribute": "validation-message",
|
|
23435
23340
|
"reflects": true,
|
|
23436
23341
|
"inheritedFrom": {
|
|
23437
|
-
"name": "
|
|
23438
|
-
"module": "
|
|
23342
|
+
"name": "FormInternalsMixin",
|
|
23343
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
23439
23344
|
}
|
|
23440
23345
|
},
|
|
23441
23346
|
{
|
|
23442
23347
|
"kind": "field",
|
|
23443
|
-
"name": "
|
|
23348
|
+
"name": "validity",
|
|
23444
23349
|
"type": {
|
|
23445
|
-
"text": "
|
|
23350
|
+
"text": "ValidityState"
|
|
23446
23351
|
},
|
|
23447
|
-
"
|
|
23448
|
-
"description": "Define error state of the progressbar\n- **true**\n- **false**",
|
|
23449
|
-
"attribute": "error",
|
|
23352
|
+
"readonly": true,
|
|
23450
23353
|
"inheritedFrom": {
|
|
23451
|
-
"name": "
|
|
23452
|
-
"module": "
|
|
23354
|
+
"name": "FormInternalsMixin",
|
|
23355
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
23356
|
+
}
|
|
23357
|
+
},
|
|
23358
|
+
{
|
|
23359
|
+
"kind": "field",
|
|
23360
|
+
"name": "willValidate",
|
|
23361
|
+
"readonly": true,
|
|
23362
|
+
"inheritedFrom": {
|
|
23363
|
+
"name": "FormInternalsMixin",
|
|
23364
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
23453
23365
|
}
|
|
23454
23366
|
},
|
|
23455
23367
|
{
|
|
23456
23368
|
"kind": "method",
|
|
23457
|
-
"name": "
|
|
23458
|
-
"
|
|
23459
|
-
"description": "Determines the validation state (success, error, or default) based on progress value and error state.",
|
|
23369
|
+
"name": "setValidity",
|
|
23370
|
+
"description": "Sets the validity of the input field based on the input field's validity.",
|
|
23460
23371
|
"return": {
|
|
23461
23372
|
"type": {
|
|
23462
23373
|
"text": ""
|
|
23463
23374
|
}
|
|
23464
23375
|
},
|
|
23465
23376
|
"inheritedFrom": {
|
|
23466
|
-
"name": "
|
|
23467
|
-
"module": "
|
|
23377
|
+
"name": "FormInternalsMixin",
|
|
23378
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
23379
|
+
}
|
|
23380
|
+
},
|
|
23381
|
+
{
|
|
23382
|
+
"kind": "method",
|
|
23383
|
+
"name": "checkValidity",
|
|
23384
|
+
"return": {
|
|
23385
|
+
"type": {
|
|
23386
|
+
"text": "boolean"
|
|
23387
|
+
}
|
|
23388
|
+
},
|
|
23389
|
+
"inheritedFrom": {
|
|
23390
|
+
"name": "FormInternalsMixin",
|
|
23391
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
23392
|
+
}
|
|
23393
|
+
},
|
|
23394
|
+
{
|
|
23395
|
+
"kind": "method",
|
|
23396
|
+
"name": "reportValidity",
|
|
23397
|
+
"inheritedFrom": {
|
|
23398
|
+
"name": "FormInternalsMixin",
|
|
23399
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
23400
|
+
}
|
|
23401
|
+
},
|
|
23402
|
+
{
|
|
23403
|
+
"kind": "field",
|
|
23404
|
+
"name": "dataAriaLabel",
|
|
23405
|
+
"type": {
|
|
23406
|
+
"text": "string | null"
|
|
23407
|
+
},
|
|
23408
|
+
"default": "null",
|
|
23409
|
+
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
23410
|
+
"attribute": "data-aria-label",
|
|
23411
|
+
"reflects": true,
|
|
23412
|
+
"inheritedFrom": {
|
|
23413
|
+
"name": "DataAriaLabelMixin",
|
|
23414
|
+
"module": "utils/mixins/DataAriaLabelMixin.js"
|
|
23468
23415
|
}
|
|
23469
23416
|
},
|
|
23470
23417
|
{
|
|
@@ -23637,38 +23584,62 @@
|
|
|
23637
23584
|
}
|
|
23638
23585
|
}
|
|
23639
23586
|
],
|
|
23640
|
-
"
|
|
23641
|
-
|
|
23642
|
-
|
|
23643
|
-
|
|
23644
|
-
|
|
23645
|
-
|
|
23646
|
-
|
|
23587
|
+
"events": [
|
|
23588
|
+
{
|
|
23589
|
+
"type": {
|
|
23590
|
+
"text": "EventConstructor"
|
|
23591
|
+
}
|
|
23592
|
+
},
|
|
23593
|
+
{
|
|
23594
|
+
"description": "(React: onChange) Event that gets dispatched when the radio state changes.",
|
|
23595
|
+
"name": "change",
|
|
23596
|
+
"reactName": "onChange"
|
|
23597
|
+
},
|
|
23598
|
+
{
|
|
23599
|
+
"description": "(React: onFocus) Event that gets dispatched when the radio receives focus.",
|
|
23600
|
+
"name": "focus",
|
|
23601
|
+
"reactName": "onFocus"
|
|
23602
|
+
}
|
|
23603
|
+
],
|
|
23647
23604
|
"attributes": [
|
|
23648
23605
|
{
|
|
23649
|
-
"name": "
|
|
23606
|
+
"name": "checked",
|
|
23650
23607
|
"type": {
|
|
23651
|
-
"text": "
|
|
23608
|
+
"text": "boolean"
|
|
23652
23609
|
},
|
|
23653
|
-
"default": "
|
|
23654
|
-
"description": "
|
|
23655
|
-
"fieldName": "
|
|
23656
|
-
"inheritedFrom": {
|
|
23657
|
-
"name": "DataAriaLabelMixin",
|
|
23658
|
-
"module": "src/utils/mixins/DataAriaLabelMixin.ts"
|
|
23659
|
-
}
|
|
23610
|
+
"default": "false",
|
|
23611
|
+
"description": "Determines whether the radio is selected or unselected.",
|
|
23612
|
+
"fieldName": "checked"
|
|
23660
23613
|
},
|
|
23661
23614
|
{
|
|
23662
|
-
"name": "
|
|
23615
|
+
"name": "readonly",
|
|
23663
23616
|
"type": {
|
|
23664
|
-
"text": "
|
|
23617
|
+
"text": "boolean"
|
|
23665
23618
|
},
|
|
23666
|
-
"
|
|
23667
|
-
"
|
|
23668
|
-
"fieldName": "
|
|
23619
|
+
"default": "false",
|
|
23620
|
+
"description": "Determines whether the radio is read-only.",
|
|
23621
|
+
"fieldName": "readonly"
|
|
23622
|
+
},
|
|
23623
|
+
{
|
|
23624
|
+
"name": "autofocus",
|
|
23625
|
+
"type": {
|
|
23626
|
+
"text": "boolean"
|
|
23627
|
+
},
|
|
23628
|
+
"default": "false",
|
|
23629
|
+
"description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
|
|
23630
|
+
"fieldName": "autofocus"
|
|
23631
|
+
},
|
|
23632
|
+
{
|
|
23633
|
+
"name": "name",
|
|
23634
|
+
"type": {
|
|
23635
|
+
"text": "string"
|
|
23636
|
+
},
|
|
23637
|
+
"default": "''",
|
|
23638
|
+
"description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
|
|
23639
|
+
"fieldName": "name",
|
|
23669
23640
|
"inheritedFrom": {
|
|
23670
|
-
"name": "
|
|
23671
|
-
"module": "src/
|
|
23641
|
+
"name": "FormInternalsMixin",
|
|
23642
|
+
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
|
23672
23643
|
}
|
|
23673
23644
|
},
|
|
23674
23645
|
{
|
|
@@ -23676,25 +23647,37 @@
|
|
|
23676
23647
|
"type": {
|
|
23677
23648
|
"text": "string"
|
|
23678
23649
|
},
|
|
23679
|
-
"default": "'
|
|
23680
|
-
"description": "
|
|
23650
|
+
"default": "''",
|
|
23651
|
+
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
|
23681
23652
|
"fieldName": "value",
|
|
23682
23653
|
"inheritedFrom": {
|
|
23683
|
-
"name": "
|
|
23684
|
-
"module": "src/
|
|
23654
|
+
"name": "FormInternalsMixin",
|
|
23655
|
+
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
|
23685
23656
|
}
|
|
23686
23657
|
},
|
|
23687
23658
|
{
|
|
23688
|
-
"name": "
|
|
23659
|
+
"name": "validation-message",
|
|
23689
23660
|
"type": {
|
|
23690
|
-
"text": "
|
|
23661
|
+
"text": "string | undefined"
|
|
23691
23662
|
},
|
|
23692
|
-
"
|
|
23693
|
-
"
|
|
23694
|
-
"fieldName": "error",
|
|
23663
|
+
"description": "Custom validation message that will override the default message and displayed when the input is invalid.",
|
|
23664
|
+
"fieldName": "validationMessage",
|
|
23695
23665
|
"inheritedFrom": {
|
|
23696
|
-
"name": "
|
|
23697
|
-
"module": "src/
|
|
23666
|
+
"name": "FormInternalsMixin",
|
|
23667
|
+
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
|
23668
|
+
}
|
|
23669
|
+
},
|
|
23670
|
+
{
|
|
23671
|
+
"name": "data-aria-label",
|
|
23672
|
+
"type": {
|
|
23673
|
+
"text": "string | null"
|
|
23674
|
+
},
|
|
23675
|
+
"default": "null",
|
|
23676
|
+
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
23677
|
+
"fieldName": "dataAriaLabel",
|
|
23678
|
+
"inheritedFrom": {
|
|
23679
|
+
"name": "DataAriaLabelMixin",
|
|
23680
|
+
"module": "src/utils/mixins/DataAriaLabelMixin.ts"
|
|
23698
23681
|
}
|
|
23699
23682
|
},
|
|
23700
23683
|
{
|
|
@@ -23772,6 +23755,23 @@
|
|
|
23772
23755
|
}
|
|
23773
23756
|
}
|
|
23774
23757
|
],
|
|
23758
|
+
"mixins": [
|
|
23759
|
+
{
|
|
23760
|
+
"name": "FormInternalsMixin",
|
|
23761
|
+
"module": "/src/utils/mixins/FormInternalsMixin"
|
|
23762
|
+
},
|
|
23763
|
+
{
|
|
23764
|
+
"name": "DataAriaLabelMixin",
|
|
23765
|
+
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
|
23766
|
+
}
|
|
23767
|
+
],
|
|
23768
|
+
"superclass": {
|
|
23769
|
+
"name": "FormfieldWrapper",
|
|
23770
|
+
"module": "/src/components/formfieldwrapper/formfieldwrapper.component"
|
|
23771
|
+
},
|
|
23772
|
+
"tagName": "mdc-radio",
|
|
23773
|
+
"jsDoc": "/**\n * Radio allow users to select single options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selection in lists.\n *\n * A radio component contains an optional label, optional info icon and an optional helper text.\n * @dependency mdc-formfieldwrapper\n *\n * @tagname mdc-radio\n *\n * @event change - (React: onChange) Event that gets dispatched when the radio state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.\n *\n * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered\n * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed\n * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered\n * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed\n * @cssproperty --mdc-radio-disabled-border-color - color of the radio button when disabled\n * @cssproperty --mdc-radio-control-active-disabled-background - color of the radio button when active and disabled\n * @cssproperty --mdc-radio-control-inactive-disabled-background - color of the radio button when inactive and disabled\n *\n */",
|
|
23774
|
+
"customElement": true,
|
|
23775
23775
|
"slots": [
|
|
23776
23776
|
{
|
|
23777
23777
|
"description": "slot to add the label info icon",
|
|
@@ -23789,8 +23789,8 @@
|
|
|
23789
23789
|
"kind": "js",
|
|
23790
23790
|
"name": "default",
|
|
23791
23791
|
"declaration": {
|
|
23792
|
-
"name": "
|
|
23793
|
-
"module": "components/
|
|
23792
|
+
"name": "Radio",
|
|
23793
|
+
"module": "components/radio/radio.component.js"
|
|
23794
23794
|
}
|
|
23795
23795
|
}
|
|
23796
23796
|
]
|