@momentum-design/components 0.75.3 → 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/browser/index.js +46 -37
- package/dist/browser/index.js.map +3 -3
- package/dist/components/dialog/dialog.component.d.ts +12 -0
- package/dist/components/dialog/dialog.component.js +49 -20
- package/dist/components/dialog/dialog.styles.js +8 -2
- package/dist/custom-elements.json +485 -481
- package/dist/react/dialog/index.d.ts +5 -0
- package/dist/react/dialog/index.js +5 -0
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +2 -2
- 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
|
-
}
|
|
126
|
-
},
|
|
127
|
-
{
|
|
128
|
-
"kind": "field",
|
|
129
|
-
"name": "role",
|
|
130
|
-
"description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
|
|
131
|
-
"default": "button",
|
|
132
|
-
"attribute": "role",
|
|
133
|
-
"reflects": true,
|
|
134
|
-
"inheritedFrom": {
|
|
135
|
-
"name": "Buttonsimple",
|
|
136
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
137
|
-
}
|
|
121
|
+
"default": "null",
|
|
122
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
123
|
+
"attribute": "aria-labelledby"
|
|
138
124
|
},
|
|
139
125
|
{
|
|
140
126
|
"kind": "field",
|
|
141
|
-
"name": "
|
|
127
|
+
"name": "lottieInstance",
|
|
142
128
|
"type": {
|
|
143
|
-
"text": "
|
|
129
|
+
"text": "AnimationItem | undefined"
|
|
144
130
|
},
|
|
145
|
-
"
|
|
146
|
-
"
|
|
147
|
-
"attribute": "ariaStateKey",
|
|
148
|
-
"reflects": true,
|
|
149
|
-
"inheritedFrom": {
|
|
150
|
-
"name": "Buttonsimple",
|
|
151
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
152
|
-
}
|
|
131
|
+
"privacy": "private",
|
|
132
|
+
"description": "Lottie animation instance"
|
|
153
133
|
},
|
|
154
134
|
{
|
|
155
135
|
"kind": "field",
|
|
156
|
-
"name": "
|
|
136
|
+
"name": "containerRef",
|
|
157
137
|
"type": {
|
|
158
|
-
"text": "
|
|
138
|
+
"text": "Ref<HTMLDivElement>"
|
|
159
139
|
},
|
|
160
|
-
"
|
|
161
|
-
"
|
|
162
|
-
"attribute": "type",
|
|
163
|
-
"reflects": true,
|
|
164
|
-
"inheritedFrom": {
|
|
165
|
-
"name": "Buttonsimple",
|
|
166
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
167
|
-
}
|
|
140
|
+
"privacy": "private",
|
|
141
|
+
"description": "Container for the animation"
|
|
168
142
|
},
|
|
169
143
|
{
|
|
170
|
-
"kind": "
|
|
171
|
-
"name": "
|
|
172
|
-
"
|
|
173
|
-
"
|
|
174
|
-
"name": "Buttonsimple",
|
|
175
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
176
|
-
}
|
|
144
|
+
"kind": "field",
|
|
145
|
+
"name": "animation",
|
|
146
|
+
"description": "Exposed API of the animation library (lottie)",
|
|
147
|
+
"readonly": true
|
|
177
148
|
},
|
|
178
149
|
{
|
|
179
150
|
"kind": "method",
|
|
180
|
-
"name": "
|
|
181
|
-
"privacy": "
|
|
182
|
-
"parameters": [
|
|
183
|
-
{
|
|
184
|
-
"name": "element",
|
|
185
|
-
"type": {
|
|
186
|
-
"text": "HTMLElement"
|
|
187
|
-
},
|
|
188
|
-
"description": "The button element"
|
|
189
|
-
},
|
|
190
|
-
{
|
|
191
|
-
"name": "active",
|
|
192
|
-
"optional": true,
|
|
193
|
-
"type": {
|
|
194
|
-
"text": "boolean"
|
|
195
|
-
},
|
|
196
|
-
"description": "The active state of the element"
|
|
197
|
-
}
|
|
198
|
-
],
|
|
199
|
-
"description": "Sets the ariaStateKey attributes based on the active state of the button.",
|
|
200
|
-
"inheritedFrom": {
|
|
201
|
-
"name": "Buttonsimple",
|
|
202
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
203
|
-
}
|
|
151
|
+
"name": "getLoopValue",
|
|
152
|
+
"privacy": "private"
|
|
204
153
|
},
|
|
205
154
|
{
|
|
206
155
|
"kind": "method",
|
|
207
|
-
"name": "
|
|
156
|
+
"name": "onLoadSuccessHandler",
|
|
208
157
|
"privacy": "private",
|
|
209
158
|
"parameters": [
|
|
210
159
|
{
|
|
211
|
-
"name": "
|
|
212
|
-
"type": {
|
|
213
|
-
"text": "HTMLElement"
|
|
214
|
-
},
|
|
215
|
-
"description": "The button element."
|
|
216
|
-
},
|
|
217
|
-
{
|
|
218
|
-
"name": "softDisabled",
|
|
219
|
-
"optional": true,
|
|
160
|
+
"name": "animationData",
|
|
220
161
|
"type": {
|
|
221
|
-
"text": "
|
|
222
|
-
}
|
|
223
|
-
"description": "The soft-disabled state."
|
|
162
|
+
"text": "any"
|
|
163
|
+
}
|
|
224
164
|
}
|
|
225
165
|
],
|
|
226
|
-
"description": "
|
|
227
|
-
"inheritedFrom": {
|
|
228
|
-
"name": "Buttonsimple",
|
|
229
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
230
|
-
}
|
|
166
|
+
"description": "Create new lotty instance for the loaded data"
|
|
231
167
|
},
|
|
232
168
|
{
|
|
233
169
|
"kind": "method",
|
|
234
|
-
"name": "
|
|
170
|
+
"name": "onLoadFailHandler",
|
|
235
171
|
"privacy": "private",
|
|
236
172
|
"parameters": [
|
|
237
173
|
{
|
|
238
|
-
"name": "
|
|
239
|
-
"type": {
|
|
240
|
-
"text": "HTMLElement"
|
|
241
|
-
},
|
|
242
|
-
"description": "The button element."
|
|
243
|
-
},
|
|
244
|
-
{
|
|
245
|
-
"name": "disabled",
|
|
174
|
+
"name": "error",
|
|
246
175
|
"type": {
|
|
247
|
-
"text": "
|
|
248
|
-
}
|
|
249
|
-
"description": "The disabled state."
|
|
176
|
+
"text": "Error"
|
|
177
|
+
}
|
|
250
178
|
}
|
|
251
179
|
],
|
|
252
|
-
"description": "
|
|
253
|
-
"inheritedFrom": {
|
|
254
|
-
"name": "Buttonsimple",
|
|
255
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
256
|
-
}
|
|
180
|
+
"description": "Error handler for animation loading"
|
|
257
181
|
},
|
|
258
182
|
{
|
|
259
183
|
"kind": "method",
|
|
260
|
-
"name": "
|
|
184
|
+
"name": "getAnimationData",
|
|
261
185
|
"privacy": "private",
|
|
262
|
-
"
|
|
263
|
-
"name": "Buttonsimple",
|
|
264
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
265
|
-
}
|
|
186
|
+
"description": "Import animation data dynamically"
|
|
266
187
|
},
|
|
267
188
|
{
|
|
268
|
-
"kind": "
|
|
269
|
-
"name": "
|
|
270
|
-
"
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
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": [
|
|
195
|
+
{
|
|
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
|
]
|
|
@@ -9059,7 +9059,7 @@
|
|
|
9059
9059
|
"declarations": [
|
|
9060
9060
|
{
|
|
9061
9061
|
"kind": "class",
|
|
9062
|
-
"description": "Dialog component is a modal dialog that can be used to display information or prompt the user for input.\nIt can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\nThe dialog is available in three sizes: small, medium, and large. It may also receive custom styling/sizing.\nThe dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n\nDialog component have 2 variants: default and promotional.\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n- Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n\n**Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n- Use `?visible=true/false` as an attribute instead of `visible=true/false`\n- Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions",
|
|
9062
|
+
"description": "Dialog component is a modal dialog that can be used to display information or prompt the user for input.\nIt can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\nThe dialog is available in three sizes: small, medium, and large. It may also receive custom styling/sizing.\nThe dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n\nThe dialog can be controlled solely through the `visible` property, no trigger element is required.\nIf a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\nremember the previously focused element before the dialog was opened.\n\nDialog component have 2 variants: default and promotional.\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n- Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n\n**Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n- Use `?visible=true/false` as an attribute instead of `visible=true/false`\n- Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions",
|
|
9063
9063
|
"name": "Dialog",
|
|
9064
9064
|
"cssProperties": [
|
|
9065
9065
|
{
|
|
@@ -9088,6 +9088,10 @@
|
|
|
9088
9088
|
}
|
|
9089
9089
|
],
|
|
9090
9090
|
"slots": [
|
|
9091
|
+
{
|
|
9092
|
+
"description": "Slot for the dialog header content. This can be used to pass custom header content.",
|
|
9093
|
+
"name": "header-prefix"
|
|
9094
|
+
},
|
|
9091
9095
|
{
|
|
9092
9096
|
"description": "Slot for the dialog body content",
|
|
9093
9097
|
"name": "dialog-body"
|
|
@@ -9964,7 +9968,7 @@
|
|
|
9964
9968
|
"module": "/src/models"
|
|
9965
9969
|
},
|
|
9966
9970
|
"tagName": "mdc-dialog",
|
|
9967
|
-
"jsDoc": "/**\n * Dialog component is a modal dialog that can be used to display information or prompt the user for input.\n * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\n * The dialog is available in three sizes: small, medium, and large. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * Dialog component have 2 variants: default and promotional.\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n * - Use `?visible=true/false` as an attribute instead of `visible=true/false`\n * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions\n *\n * @dependency mdc-button\n * @dependency mdc-text\n *\n * @tagname mdc-dialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n *\n * @slot dialog-body - Slot for the dialog body content\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n *\n */",
|
|
9971
|
+
"jsDoc": "/**\n * Dialog component is a modal dialog that can be used to display information or prompt the user for input.\n * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\n * The dialog is available in three sizes: small, medium, and large. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * The dialog can be controlled solely through the `visible` property, no trigger element is required.\n * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\n * remember the previously focused element before the dialog was opened.\n *\n * Dialog component have 2 variants: default and promotional.\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n * - Use `?visible=true/false` as an attribute instead of `visible=true/false`\n * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions\n *\n * @dependency mdc-button\n * @dependency mdc-text\n *\n * @tagname mdc-dialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n *\n */",
|
|
9968
9972
|
"customElement": true
|
|
9969
9973
|
}
|
|
9970
9974
|
],
|