@momentum-design/components 0.82.1 → 0.82.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,509 +4,203 @@
4
4
  "modules": [
5
5
  {
6
6
  "kind": "javascript-module",
7
- "path": "components/alertchip/alertchip.component.js",
7
+ "path": "components/animation/animation.component.js",
8
8
  "declarations": [
9
9
  {
10
10
  "kind": "class",
11
- "description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - neutral, warning, error, success, and informational\n\nThis component is built by extending Buttonsimple.",
12
- "name": "AlertChip",
13
- "cssProperties": [
14
- {
15
- "description": "The color of the label text",
16
- "name": "--mdc-chip-color"
17
- },
18
- {
19
- "description": "The color of the icon",
20
- "name": "--mdc-chip-icon-color"
21
- },
22
- {
23
- "description": "The border color of the alertchip",
24
- "name": "--mdc-chip-border-color"
25
- },
26
- {
27
- "description": "The background color of the alertchip",
28
- "name": "--mdc-chip-background-color"
29
- }
30
- ],
11
+ "description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
12
+ "name": "Animation",
31
13
  "members": [
32
14
  {
33
15
  "kind": "field",
34
- "name": "variant",
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"
41
- },
42
- {
43
- "kind": "field",
44
- "name": "label",
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"
51
- },
52
- {
53
- "kind": "field",
54
- "name": "autofocus",
16
+ "name": "name",
55
17
  "type": {
56
- "text": "boolean"
18
+ "text": "AnimationNames | undefined"
57
19
  },
58
- "default": "false",
59
- "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
60
- "attribute": "autofocus",
61
- "reflects": true,
62
- "inheritedFrom": {
63
- "name": "AutoFocusMixin",
64
- "module": "utils/mixins/AutoFocusMixin.js"
65
- }
20
+ "description": "Name of the animation (= filename)",
21
+ "attribute": "name",
22
+ "reflects": true
66
23
  },
67
24
  {
68
25
  "kind": "field",
69
- "name": "tabIndex",
26
+ "name": "loop",
70
27
  "type": {
71
- "text": "number"
28
+ "text": "LoopType | undefined"
72
29
  },
73
- "default": "0",
74
- "description": "This property specifies the tab order of the element.",
75
- "attribute": "tabIndex",
76
- "reflects": true,
77
- "inheritedFrom": {
78
- "name": "TabIndexMixin",
79
- "module": "utils/mixins/TabIndexMixin.js"
80
- }
30
+ "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
31
+ "attribute": "loop",
32
+ "reflects": true
81
33
  },
82
34
  {
83
35
  "kind": "field",
84
- "name": "disabled",
36
+ "name": "autoplay",
85
37
  "type": {
86
38
  "text": "boolean | undefined"
87
39
  },
88
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
89
- "default": "undefined",
90
- "attribute": "disabled",
91
- "reflects": true,
92
- "inheritedFrom": {
93
- "name": "DisabledMixin",
94
- "module": "utils/mixins/DisabledMixin.js"
95
- }
40
+ "description": "Weather start the animation automatically",
41
+ "attribute": "autoplay",
42
+ "reflects": true
96
43
  },
97
44
  {
98
45
  "kind": "field",
99
- "name": "active",
46
+ "name": "ariaLabel",
100
47
  "type": {
101
- "text": "boolean | undefined"
48
+ "text": "string | null"
102
49
  },
103
- "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
104
- "default": "undefined",
105
- "attribute": "active",
106
- "reflects": true,
107
- "inheritedFrom": {
108
- "name": "Buttonsimple",
109
- "module": "components/buttonsimple/buttonsimple.component.js"
110
- }
50
+ "default": "null",
51
+ "description": "Aria-label attribute to be set for accessibility",
52
+ "attribute": "aria-label"
111
53
  },
112
54
  {
113
55
  "kind": "field",
114
- "name": "softDisabled",
56
+ "name": "ariaLabelledBy",
115
57
  "type": {
116
- "text": "boolean | undefined"
58
+ "text": "string | null"
117
59
  },
118
- "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
119
- "default": "undefined",
120
- "attribute": "soft-disabled",
121
- "reflects": true,
122
- "inheritedFrom": {
123
- "name": "Buttonsimple",
124
- "module": "components/buttonsimple/buttonsimple.component.js"
125
- }
60
+ "default": "null",
61
+ "description": "Aria-labelledby attribute to be set for accessibility",
62
+ "attribute": "aria-labelledby"
126
63
  },
127
64
  {
128
65
  "kind": "field",
129
- "name": "size",
66
+ "name": "lottieInstance",
130
67
  "type": {
131
- "text": "ButtonSize"
68
+ "text": "AnimationItem | undefined"
132
69
  },
133
- "description": "Simplebutton size is a super set of all the sizes supported by children components.",
134
- "default": "32",
135
- "attribute": "size",
136
- "reflects": true,
137
- "inheritedFrom": {
138
- "name": "Buttonsimple",
139
- "module": "components/buttonsimple/buttonsimple.component.js"
140
- }
141
- },
142
- {
143
- "kind": "field",
144
- "name": "role",
145
- "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
146
- "default": "button",
147
- "attribute": "role",
148
- "reflects": true,
149
- "inheritedFrom": {
150
- "name": "Buttonsimple",
151
- "module": "components/buttonsimple/buttonsimple.component.js"
152
- }
70
+ "privacy": "private",
71
+ "description": "Lottie animation instance"
153
72
  },
154
73
  {
155
74
  "kind": "field",
156
- "name": "ariaStateKey",
75
+ "name": "containerRef",
157
76
  "type": {
158
- "text": "string | undefined"
77
+ "text": "Ref<HTMLDivElement>"
159
78
  },
160
- "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
161
- "default": "'aria-pressed' (when)",
162
- "attribute": "ariaStateKey",
163
- "reflects": true,
164
- "inheritedFrom": {
165
- "name": "Buttonsimple",
166
- "module": "components/buttonsimple/buttonsimple.component.js"
167
- }
79
+ "privacy": "private",
80
+ "description": "Container for the animation"
168
81
  },
169
82
  {
170
83
  "kind": "field",
171
- "name": "type",
172
- "type": {
173
- "text": "ButtonType"
174
- },
175
- "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
176
- "default": "button",
177
- "attribute": "type",
178
- "reflects": true,
179
- "inheritedFrom": {
180
- "name": "Buttonsimple",
181
- "module": "components/buttonsimple/buttonsimple.component.js"
182
- }
84
+ "name": "animation",
85
+ "description": "Exposed API of the animation library (lottie)",
86
+ "readonly": true
183
87
  },
184
88
  {
185
89
  "kind": "method",
186
- "name": "executeAction",
187
- "privacy": "protected",
188
- "inheritedFrom": {
189
- "name": "Buttonsimple",
190
- "module": "components/buttonsimple/buttonsimple.component.js"
191
- }
90
+ "name": "getLoopValue",
91
+ "privacy": "private"
192
92
  },
193
93
  {
194
94
  "kind": "method",
195
- "name": "setActive",
196
- "privacy": "protected",
95
+ "name": "onLoadSuccessHandler",
96
+ "privacy": "private",
197
97
  "parameters": [
198
98
  {
199
- "name": "element",
200
- "type": {
201
- "text": "HTMLElement"
202
- },
203
- "description": "The button element"
204
- },
205
- {
206
- "name": "active",
207
- "optional": true,
99
+ "name": "animationData",
208
100
  "type": {
209
- "text": "boolean"
210
- },
211
- "description": "The active state of the element"
101
+ "text": "any"
102
+ }
212
103
  }
213
104
  ],
214
- "description": "Sets the ariaStateKey attributes based on the active state of the button.",
215
- "inheritedFrom": {
216
- "name": "Buttonsimple",
217
- "module": "components/buttonsimple/buttonsimple.component.js"
218
- }
105
+ "description": "Create new lotty instance for the loaded data"
219
106
  },
220
107
  {
221
108
  "kind": "method",
222
- "name": "setSoftDisabled",
109
+ "name": "onLoadFailHandler",
223
110
  "privacy": "private",
224
111
  "parameters": [
225
112
  {
226
- "name": "element",
227
- "type": {
228
- "text": "HTMLElement"
229
- },
230
- "description": "The button element."
231
- },
232
- {
233
- "name": "softDisabled",
234
- "optional": true,
113
+ "name": "error",
235
114
  "type": {
236
- "text": "boolean"
237
- },
238
- "description": "The soft-disabled state."
115
+ "text": "Error"
116
+ }
239
117
  }
240
118
  ],
241
- "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
242
- "inheritedFrom": {
243
- "name": "Buttonsimple",
244
- "module": "components/buttonsimple/buttonsimple.component.js"
245
- }
119
+ "description": "Error handler for animation loading"
246
120
  },
247
121
  {
248
122
  "kind": "method",
249
- "name": "setDisabled",
123
+ "name": "getAnimationData",
250
124
  "privacy": "private",
251
- "parameters": [
252
- {
253
- "name": "element",
254
- "type": {
255
- "text": "HTMLElement"
256
- },
257
- "description": "The button element."
258
- },
259
- {
260
- "name": "disabled",
261
- "type": {
262
- "text": "boolean"
263
- },
264
- "description": "The disabled state."
265
- }
266
- ],
267
- "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
268
- "inheritedFrom": {
269
- "name": "Buttonsimple",
270
- "module": "components/buttonsimple/buttonsimple.component.js"
271
- }
125
+ "description": "Import animation data dynamically"
272
126
  },
273
127
  {
274
- "kind": "method",
275
- "name": "triggerClickEvent",
276
- "privacy": "private",
277
- "inheritedFrom": {
278
- "name": "Buttonsimple",
279
- "module": "components/buttonsimple/buttonsimple.component.js"
280
- }
281
- },
282
- {
283
- "kind": "method",
284
- "name": "handleBlur",
285
- "privacy": "private",
286
- "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
287
- "inheritedFrom": {
288
- "name": "Buttonsimple",
289
- "module": "components/buttonsimple/buttonsimple.component.js"
290
- }
291
- },
292
- {
293
- "kind": "method",
294
- "name": "handleKeyDown",
295
- "privacy": "private",
296
- "parameters": [
297
- {
298
- "name": "event",
299
- "type": {
300
- "text": "KeyboardEvent"
301
- },
302
- "description": "The keyboard event."
303
- }
304
- ],
305
- "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
306
- "inheritedFrom": {
307
- "name": "Buttonsimple",
308
- "module": "components/buttonsimple/buttonsimple.component.js"
309
- }
310
- },
311
- {
312
- "kind": "method",
313
- "name": "handleKeyUp",
314
- "privacy": "private",
315
- "parameters": [
316
- {
317
- "name": "event",
318
- "type": {
319
- "text": "KeyboardEvent"
320
- },
321
- "description": "The keyboard event."
322
- }
323
- ],
324
- "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
325
- "inheritedFrom": {
326
- "name": "Buttonsimple",
327
- "module": "components/buttonsimple/buttonsimple.component.js"
328
- }
128
+ "kind": "field",
129
+ "name": "onCompleteHandler",
130
+ "description": "Re-dispatch the complete event from the animation library\n\nThis handler called with the animation instance instead of the component instance\nso we need to bind it to the component instance. The arrow function just does that."
329
131
  }
330
132
  ],
331
- "attributes": [
332
- {
333
- "name": "variant",
334
- "type": {
335
- "text": "VariantType"
336
- },
337
- "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
338
- "default": "neutral",
339
- "fieldName": "variant"
340
- },
133
+ "events": [
341
134
  {
342
- "name": "label",
135
+ "name": "load",
343
136
  "type": {
344
- "text": "string"
137
+ "text": "CustomEvent"
345
138
  },
346
- "default": "''",
347
- "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
348
- "fieldName": "label"
139
+ "description": "(React: onLoad) This event is dispatched when the animation is loaded",
140
+ "reactName": "onLoad"
349
141
  },
350
142
  {
351
- "name": "autofocus",
352
- "type": {
353
- "text": "boolean"
354
- },
355
- "default": "false",
356
- "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
357
- "fieldName": "autofocus",
358
- "inheritedFrom": {
359
- "name": "AutoFocusMixin",
360
- "module": "src/utils/mixins/AutoFocusMixin.ts"
361
- }
143
+ "description": "(React: onComplete) This event is dispatched when all animation loops completed",
144
+ "name": "complete",
145
+ "reactName": "onComplete"
362
146
  },
363
147
  {
364
- "name": "tabIndex",
365
- "type": {
366
- "text": "number"
367
- },
368
- "default": "0",
369
- "description": "This property specifies the tab order of the element.",
370
- "fieldName": "tabIndex",
371
- "inheritedFrom": {
372
- "name": "TabIndexMixin",
373
- "module": "src/utils/mixins/TabIndexMixin.ts"
374
- }
375
- },
148
+ "description": "(React: onError) This event is dispatched when animation loading failed",
149
+ "name": "error",
150
+ "reactName": "onError"
151
+ }
152
+ ],
153
+ "attributes": [
376
154
  {
377
- "name": "disabled",
155
+ "name": "name",
378
156
  "type": {
379
- "text": "boolean | undefined"
157
+ "text": "AnimationNames | undefined"
380
158
  },
381
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
382
- "default": "undefined",
383
- "fieldName": "disabled",
384
- "inheritedFrom": {
385
- "name": "DisabledMixin",
386
- "module": "src/utils/mixins/DisabledMixin.ts"
387
- }
159
+ "description": "Name of the animation (= filename)",
160
+ "fieldName": "name"
388
161
  },
389
162
  {
390
- "name": "active",
163
+ "name": "loop",
391
164
  "type": {
392
- "text": "boolean | undefined"
165
+ "text": "LoopType | undefined"
393
166
  },
394
- "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
395
- "default": "undefined",
396
- "fieldName": "active",
397
- "inheritedFrom": {
398
- "name": "Buttonsimple",
399
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
400
- }
167
+ "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
168
+ "fieldName": "loop"
401
169
  },
402
170
  {
403
- "name": "soft-disabled",
171
+ "name": "autoplay",
404
172
  "type": {
405
173
  "text": "boolean | undefined"
406
174
  },
407
- "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
408
- "default": "undefined",
409
- "fieldName": "softDisabled",
410
- "inheritedFrom": {
411
- "name": "Buttonsimple",
412
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
413
- }
414
- },
415
- {
416
- "name": "size",
417
- "type": {
418
- "text": "ButtonSize"
419
- },
420
- "description": "Simplebutton size is a super set of all the sizes supported by children components.",
421
- "default": "32",
422
- "fieldName": "size",
423
- "inheritedFrom": {
424
- "name": "Buttonsimple",
425
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
426
- }
427
- },
428
- {
429
- "name": "role",
430
- "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
431
- "default": "button",
432
- "fieldName": "role",
433
- "inheritedFrom": {
434
- "name": "Buttonsimple",
435
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
436
- }
175
+ "description": "Weather start the animation automatically",
176
+ "fieldName": "autoplay"
437
177
  },
438
178
  {
439
- "name": "ariaStateKey",
179
+ "name": "aria-label",
440
180
  "type": {
441
- "text": "string | undefined"
181
+ "text": "string | null"
442
182
  },
443
- "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
444
- "default": "'aria-pressed' (when)",
445
- "fieldName": "ariaStateKey",
446
- "inheritedFrom": {
447
- "name": "Buttonsimple",
448
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
449
- }
183
+ "default": "null",
184
+ "description": "Aria-label attribute to be set for accessibility",
185
+ "fieldName": "ariaLabel"
450
186
  },
451
187
  {
452
- "name": "type",
188
+ "name": "aria-labelledby",
453
189
  "type": {
454
- "text": "ButtonType"
190
+ "text": "string | null"
455
191
  },
456
- "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
457
- "default": "button",
458
- "fieldName": "type",
459
- "inheritedFrom": {
460
- "name": "Buttonsimple",
461
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
462
- }
192
+ "default": "null",
193
+ "description": "Aria-labelledby attribute to be set for accessibility",
194
+ "fieldName": "ariaLabelledBy"
463
195
  }
464
196
  ],
465
197
  "superclass": {
466
- "name": "Buttonsimple",
467
- "module": "/src/components/buttonsimple/buttonsimple.component"
198
+ "name": "Component",
199
+ "module": "/src/models"
468
200
  },
469
- "tagName": "mdc-alertchip",
470
- "jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - neutral, warning, error, success, and informational\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n */",
471
- "customElement": true,
472
- "events": [
473
- {
474
- "description": "(React: onClick) This event is dispatched when the button is clicked.",
475
- "name": "click",
476
- "reactName": "onClick",
477
- "inheritedFrom": {
478
- "name": "Buttonsimple",
479
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
480
- }
481
- },
482
- {
483
- "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
484
- "name": "keydown",
485
- "reactName": "onKeyDown",
486
- "inheritedFrom": {
487
- "name": "Buttonsimple",
488
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
489
- }
490
- },
491
- {
492
- "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
493
- "name": "keyup",
494
- "reactName": "onKeyUp",
495
- "inheritedFrom": {
496
- "name": "Buttonsimple",
497
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
498
- }
499
- },
500
- {
501
- "description": "(React: onFocus) This event is dispatched when the button receives focus.",
502
- "name": "focus",
503
- "reactName": "onFocus",
504
- "inheritedFrom": {
505
- "name": "Buttonsimple",
506
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
507
- }
508
- }
509
- ]
201
+ "tagName": "mdc-animation",
202
+ "jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
203
+ "customElement": true
510
204
  }
511
205
  ],
512
206
  "exports": [
@@ -514,233 +208,21 @@
514
208
  "kind": "js",
515
209
  "name": "default",
516
210
  "declaration": {
517
- "name": "AlertChip",
518
- "module": "components/alertchip/alertchip.component.js"
211
+ "name": "Animation",
212
+ "module": "components/animation/animation.component.js"
519
213
  }
520
214
  }
521
215
  ]
522
216
  },
523
217
  {
524
218
  "kind": "javascript-module",
525
- "path": "components/animation/animation.component.js",
219
+ "path": "components/appheader/appheader.component.js",
526
220
  "declarations": [
527
221
  {
528
222
  "kind": "class",
529
- "description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
530
- "name": "Animation",
531
- "members": [
532
- {
533
- "kind": "field",
534
- "name": "name",
535
- "type": {
536
- "text": "AnimationNames | undefined"
537
- },
538
- "description": "Name of the animation (= filename)",
539
- "attribute": "name",
540
- "reflects": true
541
- },
542
- {
543
- "kind": "field",
544
- "name": "loop",
545
- "type": {
546
- "text": "LoopType | undefined"
547
- },
548
- "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
549
- "attribute": "loop",
550
- "reflects": true
551
- },
552
- {
553
- "kind": "field",
554
- "name": "autoplay",
555
- "type": {
556
- "text": "boolean | undefined"
557
- },
558
- "description": "Weather start the animation automatically",
559
- "attribute": "autoplay",
560
- "reflects": true
561
- },
562
- {
563
- "kind": "field",
564
- "name": "ariaLabel",
565
- "type": {
566
- "text": "string | null"
567
- },
568
- "default": "null",
569
- "description": "Aria-label attribute to be set for accessibility",
570
- "attribute": "aria-label"
571
- },
572
- {
573
- "kind": "field",
574
- "name": "ariaLabelledBy",
575
- "type": {
576
- "text": "string | null"
577
- },
578
- "default": "null",
579
- "description": "Aria-labelledby attribute to be set for accessibility",
580
- "attribute": "aria-labelledby"
581
- },
582
- {
583
- "kind": "field",
584
- "name": "lottieInstance",
585
- "type": {
586
- "text": "AnimationItem | undefined"
587
- },
588
- "privacy": "private",
589
- "description": "Lottie animation instance"
590
- },
591
- {
592
- "kind": "field",
593
- "name": "containerRef",
594
- "type": {
595
- "text": "Ref<HTMLDivElement>"
596
- },
597
- "privacy": "private",
598
- "description": "Container for the animation"
599
- },
600
- {
601
- "kind": "field",
602
- "name": "animation",
603
- "description": "Exposed API of the animation library (lottie)",
604
- "readonly": true
605
- },
606
- {
607
- "kind": "method",
608
- "name": "getLoopValue",
609
- "privacy": "private"
610
- },
611
- {
612
- "kind": "method",
613
- "name": "onLoadSuccessHandler",
614
- "privacy": "private",
615
- "parameters": [
616
- {
617
- "name": "animationData",
618
- "type": {
619
- "text": "any"
620
- }
621
- }
622
- ],
623
- "description": "Create new lotty instance for the loaded data"
624
- },
625
- {
626
- "kind": "method",
627
- "name": "onLoadFailHandler",
628
- "privacy": "private",
629
- "parameters": [
630
- {
631
- "name": "error",
632
- "type": {
633
- "text": "Error"
634
- }
635
- }
636
- ],
637
- "description": "Error handler for animation loading"
638
- },
639
- {
640
- "kind": "method",
641
- "name": "getAnimationData",
642
- "privacy": "private",
643
- "description": "Import animation data dynamically"
644
- },
645
- {
646
- "kind": "field",
647
- "name": "onCompleteHandler",
648
- "description": "Re-dispatch the complete event from the animation library\n\nThis handler called with the animation instance instead of the component instance\nso we need to bind it to the component instance. The arrow function just does that."
649
- }
650
- ],
651
- "events": [
652
- {
653
- "name": "load",
654
- "type": {
655
- "text": "CustomEvent"
656
- },
657
- "description": "(React: onLoad) This event is dispatched when the animation is loaded",
658
- "reactName": "onLoad"
659
- },
660
- {
661
- "description": "(React: onComplete) This event is dispatched when all animation loops completed",
662
- "name": "complete",
663
- "reactName": "onComplete"
664
- },
665
- {
666
- "description": "(React: onError) This event is dispatched when animation loading failed",
667
- "name": "error",
668
- "reactName": "onError"
669
- }
670
- ],
671
- "attributes": [
672
- {
673
- "name": "name",
674
- "type": {
675
- "text": "AnimationNames | undefined"
676
- },
677
- "description": "Name of the animation (= filename)",
678
- "fieldName": "name"
679
- },
680
- {
681
- "name": "loop",
682
- "type": {
683
- "text": "LoopType | undefined"
684
- },
685
- "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
686
- "fieldName": "loop"
687
- },
688
- {
689
- "name": "autoplay",
690
- "type": {
691
- "text": "boolean | undefined"
692
- },
693
- "description": "Weather start the animation automatically",
694
- "fieldName": "autoplay"
695
- },
696
- {
697
- "name": "aria-label",
698
- "type": {
699
- "text": "string | null"
700
- },
701
- "default": "null",
702
- "description": "Aria-label attribute to be set for accessibility",
703
- "fieldName": "ariaLabel"
704
- },
705
- {
706
- "name": "aria-labelledby",
707
- "type": {
708
- "text": "string | null"
709
- },
710
- "default": "null",
711
- "description": "Aria-labelledby attribute to be set for accessibility",
712
- "fieldName": "ariaLabelledBy"
713
- }
714
- ],
715
- "superclass": {
716
- "name": "Component",
717
- "module": "/src/models"
718
- },
719
- "tagName": "mdc-animation",
720
- "jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
721
- "customElement": true
722
- }
723
- ],
724
- "exports": [
725
- {
726
- "kind": "js",
727
- "name": "default",
728
- "declaration": {
729
- "name": "Animation",
730
- "module": "components/animation/animation.component.js"
731
- }
732
- }
733
- ]
734
- },
735
- {
736
- "kind": "javascript-module",
737
- "path": "components/appheader/appheader.component.js",
738
- "declarations": [
739
- {
740
- "kind": "class",
741
- "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
742
- "name": "Appheader",
743
- "cssParts": [
223
+ "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
224
+ "name": "Appheader",
225
+ "cssParts": [
744
226
  {
745
227
  "description": "The main container for styling the header.",
746
228
  "name": "container"
@@ -962,65 +444,583 @@
962
444
  }
963
445
  },
964
446
  {
965
- "name": "presence",
447
+ "name": "presence",
448
+ "type": {
449
+ "text": "PresenceType | undefined"
450
+ },
451
+ "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
452
+ "fieldName": "presence",
453
+ "inheritedFrom": {
454
+ "name": "AvatarComponentMixin",
455
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
456
+ }
457
+ },
458
+ {
459
+ "name": "size",
460
+ "type": {
461
+ "text": "AvatarSize"
462
+ },
463
+ "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
464
+ "default": "32",
465
+ "fieldName": "size",
466
+ "inheritedFrom": {
467
+ "name": "AvatarComponentMixin",
468
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
469
+ }
470
+ },
471
+ {
472
+ "name": "counter",
473
+ "type": {
474
+ "text": "number | undefined"
475
+ },
476
+ "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
477
+ "fieldName": "counter",
478
+ "inheritedFrom": {
479
+ "name": "AvatarComponentMixin",
480
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
481
+ }
482
+ },
483
+ {
484
+ "name": "is-typing",
485
+ "type": {
486
+ "text": "boolean"
487
+ },
488
+ "default": "false",
489
+ "description": "Represents the typing indicator when the user is typing.",
490
+ "fieldName": "isTyping",
491
+ "inheritedFrom": {
492
+ "name": "AvatarComponentMixin",
493
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
494
+ }
495
+ },
496
+ {
497
+ "name": "icon-name",
498
+ "type": {
499
+ "text": "IconNames | undefined"
500
+ },
501
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
502
+ "fieldName": "iconName",
503
+ "inheritedFrom": {
504
+ "name": "IconNameMixin",
505
+ "module": "src/utils/mixins/IconNameMixin.ts"
506
+ }
507
+ }
508
+ ]
509
+ }
510
+ ],
511
+ "exports": [
512
+ {
513
+ "kind": "js",
514
+ "name": "default",
515
+ "declaration": {
516
+ "name": "Avatar",
517
+ "module": "components/avatar/avatar.component.js"
518
+ }
519
+ }
520
+ ]
521
+ },
522
+ {
523
+ "kind": "javascript-module",
524
+ "path": "components/alertchip/alertchip.component.js",
525
+ "declarations": [
526
+ {
527
+ "kind": "class",
528
+ "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.",
529
+ "name": "AlertChip",
530
+ "cssProperties": [
531
+ {
532
+ "description": "The color of the label text",
533
+ "name": "--mdc-chip-color"
534
+ },
535
+ {
536
+ "description": "The color of the icon",
537
+ "name": "--mdc-chip-icon-color"
538
+ },
539
+ {
540
+ "description": "The border color of the alertchip",
541
+ "name": "--mdc-chip-border-color"
542
+ },
543
+ {
544
+ "description": "The background color of the alertchip",
545
+ "name": "--mdc-chip-background-color"
546
+ }
547
+ ],
548
+ "members": [
549
+ {
550
+ "kind": "field",
551
+ "name": "variant",
552
+ "type": {
553
+ "text": "VariantType"
554
+ },
555
+ "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
556
+ "default": "neutral",
557
+ "attribute": "variant"
558
+ },
559
+ {
560
+ "kind": "field",
561
+ "name": "label",
562
+ "type": {
563
+ "text": "string"
564
+ },
565
+ "default": "''",
566
+ "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
567
+ "attribute": "label"
568
+ },
569
+ {
570
+ "kind": "field",
571
+ "name": "autofocus",
572
+ "type": {
573
+ "text": "boolean"
574
+ },
575
+ "default": "false",
576
+ "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
577
+ "attribute": "autofocus",
578
+ "reflects": true,
579
+ "inheritedFrom": {
580
+ "name": "AutoFocusMixin",
581
+ "module": "utils/mixins/AutoFocusMixin.js"
582
+ }
583
+ },
584
+ {
585
+ "kind": "field",
586
+ "name": "tabIndex",
587
+ "type": {
588
+ "text": "number"
589
+ },
590
+ "default": "0",
591
+ "description": "This property specifies the tab order of the element.",
592
+ "attribute": "tabIndex",
593
+ "reflects": true,
594
+ "inheritedFrom": {
595
+ "name": "TabIndexMixin",
596
+ "module": "utils/mixins/TabIndexMixin.js"
597
+ }
598
+ },
599
+ {
600
+ "kind": "field",
601
+ "name": "disabled",
602
+ "type": {
603
+ "text": "boolean | undefined"
604
+ },
605
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
606
+ "default": "undefined",
607
+ "attribute": "disabled",
608
+ "reflects": true,
609
+ "inheritedFrom": {
610
+ "name": "DisabledMixin",
611
+ "module": "utils/mixins/DisabledMixin.js"
612
+ }
613
+ },
614
+ {
615
+ "kind": "field",
616
+ "name": "active",
617
+ "type": {
618
+ "text": "boolean | undefined"
619
+ },
620
+ "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.",
621
+ "default": "undefined",
622
+ "attribute": "active",
623
+ "reflects": true,
624
+ "inheritedFrom": {
625
+ "name": "Buttonsimple",
626
+ "module": "components/buttonsimple/buttonsimple.component.js"
627
+ }
628
+ },
629
+ {
630
+ "kind": "field",
631
+ "name": "softDisabled",
632
+ "type": {
633
+ "text": "boolean | undefined"
634
+ },
635
+ "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.",
636
+ "default": "undefined",
637
+ "attribute": "soft-disabled",
638
+ "reflects": true,
639
+ "inheritedFrom": {
640
+ "name": "Buttonsimple",
641
+ "module": "components/buttonsimple/buttonsimple.component.js"
642
+ }
643
+ },
644
+ {
645
+ "kind": "field",
646
+ "name": "size",
647
+ "type": {
648
+ "text": "ButtonSize"
649
+ },
650
+ "description": "Simplebutton size is a super set of all the sizes supported by children components.",
651
+ "default": "32",
652
+ "attribute": "size",
653
+ "reflects": true,
654
+ "inheritedFrom": {
655
+ "name": "Buttonsimple",
656
+ "module": "components/buttonsimple/buttonsimple.component.js"
657
+ }
658
+ },
659
+ {
660
+ "kind": "field",
661
+ "name": "role",
662
+ "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.",
663
+ "default": "button",
664
+ "attribute": "role",
665
+ "reflects": true,
666
+ "inheritedFrom": {
667
+ "name": "Buttonsimple",
668
+ "module": "components/buttonsimple/buttonsimple.component.js"
669
+ }
670
+ },
671
+ {
672
+ "kind": "field",
673
+ "name": "ariaStateKey",
674
+ "type": {
675
+ "text": "string | undefined"
676
+ },
677
+ "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`",
678
+ "default": "'aria-pressed' (when)",
679
+ "attribute": "ariaStateKey",
680
+ "reflects": true,
681
+ "inheritedFrom": {
682
+ "name": "Buttonsimple",
683
+ "module": "components/buttonsimple/buttonsimple.component.js"
684
+ }
685
+ },
686
+ {
687
+ "kind": "field",
688
+ "name": "type",
689
+ "type": {
690
+ "text": "ButtonType"
691
+ },
692
+ "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.",
693
+ "default": "button",
694
+ "attribute": "type",
695
+ "reflects": true,
696
+ "inheritedFrom": {
697
+ "name": "Buttonsimple",
698
+ "module": "components/buttonsimple/buttonsimple.component.js"
699
+ }
700
+ },
701
+ {
702
+ "kind": "method",
703
+ "name": "executeAction",
704
+ "privacy": "protected",
705
+ "inheritedFrom": {
706
+ "name": "Buttonsimple",
707
+ "module": "components/buttonsimple/buttonsimple.component.js"
708
+ }
709
+ },
710
+ {
711
+ "kind": "method",
712
+ "name": "setActive",
713
+ "privacy": "protected",
714
+ "parameters": [
715
+ {
716
+ "name": "element",
717
+ "type": {
718
+ "text": "HTMLElement"
719
+ },
720
+ "description": "The button element"
721
+ },
722
+ {
723
+ "name": "active",
724
+ "optional": true,
725
+ "type": {
726
+ "text": "boolean"
727
+ },
728
+ "description": "The active state of the element"
729
+ }
730
+ ],
731
+ "description": "Sets the ariaStateKey attributes based on the active state of the button.",
732
+ "inheritedFrom": {
733
+ "name": "Buttonsimple",
734
+ "module": "components/buttonsimple/buttonsimple.component.js"
735
+ }
736
+ },
737
+ {
738
+ "kind": "method",
739
+ "name": "setSoftDisabled",
740
+ "privacy": "private",
741
+ "parameters": [
742
+ {
743
+ "name": "element",
744
+ "type": {
745
+ "text": "HTMLElement"
746
+ },
747
+ "description": "The button element."
748
+ },
749
+ {
750
+ "name": "softDisabled",
751
+ "optional": true,
752
+ "type": {
753
+ "text": "boolean"
754
+ },
755
+ "description": "The soft-disabled state."
756
+ }
757
+ ],
758
+ "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.",
759
+ "inheritedFrom": {
760
+ "name": "Buttonsimple",
761
+ "module": "components/buttonsimple/buttonsimple.component.js"
762
+ }
763
+ },
764
+ {
765
+ "kind": "method",
766
+ "name": "setDisabled",
767
+ "privacy": "private",
768
+ "parameters": [
769
+ {
770
+ "name": "element",
771
+ "type": {
772
+ "text": "HTMLElement"
773
+ },
774
+ "description": "The button element."
775
+ },
776
+ {
777
+ "name": "disabled",
778
+ "type": {
779
+ "text": "boolean"
780
+ },
781
+ "description": "The disabled state."
782
+ }
783
+ ],
784
+ "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.",
785
+ "inheritedFrom": {
786
+ "name": "Buttonsimple",
787
+ "module": "components/buttonsimple/buttonsimple.component.js"
788
+ }
789
+ },
790
+ {
791
+ "kind": "method",
792
+ "name": "triggerClickEvent",
793
+ "privacy": "private",
794
+ "inheritedFrom": {
795
+ "name": "Buttonsimple",
796
+ "module": "components/buttonsimple/buttonsimple.component.js"
797
+ }
798
+ },
799
+ {
800
+ "kind": "method",
801
+ "name": "handleBlur",
802
+ "privacy": "private",
803
+ "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
804
+ "inheritedFrom": {
805
+ "name": "Buttonsimple",
806
+ "module": "components/buttonsimple/buttonsimple.component.js"
807
+ }
808
+ },
809
+ {
810
+ "kind": "method",
811
+ "name": "handleKeyDown",
812
+ "privacy": "private",
813
+ "parameters": [
814
+ {
815
+ "name": "event",
816
+ "type": {
817
+ "text": "KeyboardEvent"
818
+ },
819
+ "description": "The keyboard event."
820
+ }
821
+ ],
822
+ "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.",
823
+ "inheritedFrom": {
824
+ "name": "Buttonsimple",
825
+ "module": "components/buttonsimple/buttonsimple.component.js"
826
+ }
827
+ },
828
+ {
829
+ "kind": "method",
830
+ "name": "handleKeyUp",
831
+ "privacy": "private",
832
+ "parameters": [
833
+ {
834
+ "name": "event",
835
+ "type": {
836
+ "text": "KeyboardEvent"
837
+ },
838
+ "description": "The keyboard event."
839
+ }
840
+ ],
841
+ "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
842
+ "inheritedFrom": {
843
+ "name": "Buttonsimple",
844
+ "module": "components/buttonsimple/buttonsimple.component.js"
845
+ }
846
+ }
847
+ ],
848
+ "attributes": [
849
+ {
850
+ "name": "variant",
851
+ "type": {
852
+ "text": "VariantType"
853
+ },
854
+ "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
855
+ "default": "neutral",
856
+ "fieldName": "variant"
857
+ },
858
+ {
859
+ "name": "label",
860
+ "type": {
861
+ "text": "string"
862
+ },
863
+ "default": "''",
864
+ "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.",
865
+ "fieldName": "label"
866
+ },
867
+ {
868
+ "name": "autofocus",
869
+ "type": {
870
+ "text": "boolean"
871
+ },
872
+ "default": "false",
873
+ "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
874
+ "fieldName": "autofocus",
875
+ "inheritedFrom": {
876
+ "name": "AutoFocusMixin",
877
+ "module": "src/utils/mixins/AutoFocusMixin.ts"
878
+ }
879
+ },
880
+ {
881
+ "name": "tabIndex",
882
+ "type": {
883
+ "text": "number"
884
+ },
885
+ "default": "0",
886
+ "description": "This property specifies the tab order of the element.",
887
+ "fieldName": "tabIndex",
888
+ "inheritedFrom": {
889
+ "name": "TabIndexMixin",
890
+ "module": "src/utils/mixins/TabIndexMixin.ts"
891
+ }
892
+ },
893
+ {
894
+ "name": "disabled",
895
+ "type": {
896
+ "text": "boolean | undefined"
897
+ },
898
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
899
+ "default": "undefined",
900
+ "fieldName": "disabled",
901
+ "inheritedFrom": {
902
+ "name": "DisabledMixin",
903
+ "module": "src/utils/mixins/DisabledMixin.ts"
904
+ }
905
+ },
906
+ {
907
+ "name": "active",
908
+ "type": {
909
+ "text": "boolean | undefined"
910
+ },
911
+ "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
912
+ "default": "undefined",
913
+ "fieldName": "active",
914
+ "inheritedFrom": {
915
+ "name": "Buttonsimple",
916
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
917
+ }
918
+ },
919
+ {
920
+ "name": "soft-disabled",
966
921
  "type": {
967
- "text": "PresenceType | undefined"
922
+ "text": "boolean | undefined"
968
923
  },
969
- "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
970
- "fieldName": "presence",
924
+ "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.",
925
+ "default": "undefined",
926
+ "fieldName": "softDisabled",
971
927
  "inheritedFrom": {
972
- "name": "AvatarComponentMixin",
973
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
928
+ "name": "Buttonsimple",
929
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
974
930
  }
975
931
  },
976
932
  {
977
933
  "name": "size",
978
934
  "type": {
979
- "text": "AvatarSize"
935
+ "text": "ButtonSize"
980
936
  },
981
- "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
937
+ "description": "Simplebutton size is a super set of all the sizes supported by children components.",
982
938
  "default": "32",
983
939
  "fieldName": "size",
984
940
  "inheritedFrom": {
985
- "name": "AvatarComponentMixin",
986
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
941
+ "name": "Buttonsimple",
942
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
987
943
  }
988
944
  },
989
945
  {
990
- "name": "counter",
991
- "type": {
992
- "text": "number | undefined"
993
- },
994
- "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
995
- "fieldName": "counter",
946
+ "name": "role",
947
+ "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
948
+ "default": "button",
949
+ "fieldName": "role",
996
950
  "inheritedFrom": {
997
- "name": "AvatarComponentMixin",
998
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
951
+ "name": "Buttonsimple",
952
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
999
953
  }
1000
954
  },
1001
955
  {
1002
- "name": "is-typing",
956
+ "name": "ariaStateKey",
1003
957
  "type": {
1004
- "text": "boolean"
958
+ "text": "string | undefined"
1005
959
  },
1006
- "default": "false",
1007
- "description": "Represents the typing indicator when the user is typing.",
1008
- "fieldName": "isTyping",
960
+ "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`",
961
+ "default": "'aria-pressed' (when)",
962
+ "fieldName": "ariaStateKey",
1009
963
  "inheritedFrom": {
1010
- "name": "AvatarComponentMixin",
1011
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
964
+ "name": "Buttonsimple",
965
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
1012
966
  }
1013
967
  },
1014
968
  {
1015
- "name": "icon-name",
969
+ "name": "type",
1016
970
  "type": {
1017
- "text": "IconNames | undefined"
971
+ "text": "ButtonType"
1018
972
  },
1019
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
1020
- "fieldName": "iconName",
973
+ "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
974
+ "default": "button",
975
+ "fieldName": "type",
1021
976
  "inheritedFrom": {
1022
- "name": "IconNameMixin",
1023
- "module": "src/utils/mixins/IconNameMixin.ts"
977
+ "name": "Buttonsimple",
978
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
979
+ }
980
+ }
981
+ ],
982
+ "superclass": {
983
+ "name": "Buttonsimple",
984
+ "module": "/src/components/buttonsimple/buttonsimple.component"
985
+ },
986
+ "tagName": "mdc-alertchip",
987
+ "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 */",
988
+ "customElement": true,
989
+ "events": [
990
+ {
991
+ "description": "(React: onClick) This event is dispatched when the button is clicked.",
992
+ "name": "click",
993
+ "reactName": "onClick",
994
+ "inheritedFrom": {
995
+ "name": "Buttonsimple",
996
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
997
+ }
998
+ },
999
+ {
1000
+ "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
1001
+ "name": "keydown",
1002
+ "reactName": "onKeyDown",
1003
+ "inheritedFrom": {
1004
+ "name": "Buttonsimple",
1005
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
1006
+ }
1007
+ },
1008
+ {
1009
+ "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
1010
+ "name": "keyup",
1011
+ "reactName": "onKeyUp",
1012
+ "inheritedFrom": {
1013
+ "name": "Buttonsimple",
1014
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
1015
+ }
1016
+ },
1017
+ {
1018
+ "description": "(React: onFocus) This event is dispatched when the button receives focus.",
1019
+ "name": "focus",
1020
+ "reactName": "onFocus",
1021
+ "inheritedFrom": {
1022
+ "name": "Buttonsimple",
1023
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
1024
1024
  }
1025
1025
  }
1026
1026
  ]
@@ -1031,8 +1031,8 @@
1031
1031
  "kind": "js",
1032
1032
  "name": "default",
1033
1033
  "declaration": {
1034
- "name": "Avatar",
1035
- "module": "components/avatar/avatar.component.js"
1034
+ "name": "AlertChip",
1035
+ "module": "components/alertchip/alertchip.component.js"
1036
1036
  }
1037
1037
  }
1038
1038
  ]
@@ -2132,77 +2132,6 @@
2132
2132
  }
2133
2133
  ]
2134
2134
  },
2135
- {
2136
- "kind": "javascript-module",
2137
- "path": "components/bullet/bullet.component.js",
2138
- "declarations": [
2139
- {
2140
- "kind": "class",
2141
- "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
2142
- "name": "Bullet",
2143
- "cssProperties": [
2144
- {
2145
- "description": "background color of the bullet",
2146
- "name": "--mdc-bullet-background-color"
2147
- },
2148
- {
2149
- "description": "small size value of the bullet",
2150
- "name": "--mdc-bullet-size-small"
2151
- },
2152
- {
2153
- "description": "medium size value of the bullet",
2154
- "name": "--mdc-bullet-size-medium"
2155
- },
2156
- {
2157
- "description": "large size value of the bullet",
2158
- "name": "--mdc-bullet-size-large"
2159
- }
2160
- ],
2161
- "members": [
2162
- {
2163
- "kind": "field",
2164
- "name": "size",
2165
- "type": {
2166
- "text": "Size"
2167
- },
2168
- "privacy": "public",
2169
- "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
2170
- "default": "small",
2171
- "attribute": "size",
2172
- "reflects": true
2173
- }
2174
- ],
2175
- "attributes": [
2176
- {
2177
- "name": "size",
2178
- "type": {
2179
- "text": "Size"
2180
- },
2181
- "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
2182
- "default": "small",
2183
- "fieldName": "size"
2184
- }
2185
- ],
2186
- "superclass": {
2187
- "name": "Component",
2188
- "module": "/src/models"
2189
- },
2190
- "tagName": "mdc-bullet",
2191
- "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
2192
- "customElement": true
2193
- }
2194
- ],
2195
- "exports": [
2196
- {
2197
- "kind": "js",
2198
- "name": "default",
2199
- "declaration": {
2200
- "name": "Bullet",
2201
- "module": "components/bullet/bullet.component.js"
2202
- }
2203
- }
2204
- ]
2205
- },
2206
2135
  {
2207
2136
  "kind": "javascript-module",
2208
2137
  "path": "components/button/button.component.js",
@@ -2898,6 +2827,77 @@
2898
2827
  }
2899
2828
  ]
2900
2829
  },
2830
+ {
2831
+ "kind": "javascript-module",
2832
+ "path": "components/bullet/bullet.component.js",
2833
+ "declarations": [
2834
+ {
2835
+ "kind": "class",
2836
+ "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
2837
+ "name": "Bullet",
2838
+ "cssProperties": [
2839
+ {
2840
+ "description": "background color of the bullet",
2841
+ "name": "--mdc-bullet-background-color"
2842
+ },
2843
+ {
2844
+ "description": "small size value of the bullet",
2845
+ "name": "--mdc-bullet-size-small"
2846
+ },
2847
+ {
2848
+ "description": "medium size value of the bullet",
2849
+ "name": "--mdc-bullet-size-medium"
2850
+ },
2851
+ {
2852
+ "description": "large size value of the bullet",
2853
+ "name": "--mdc-bullet-size-large"
2854
+ }
2855
+ ],
2856
+ "members": [
2857
+ {
2858
+ "kind": "field",
2859
+ "name": "size",
2860
+ "type": {
2861
+ "text": "Size"
2862
+ },
2863
+ "privacy": "public",
2864
+ "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
2865
+ "default": "small",
2866
+ "attribute": "size",
2867
+ "reflects": true
2868
+ }
2869
+ ],
2870
+ "attributes": [
2871
+ {
2872
+ "name": "size",
2873
+ "type": {
2874
+ "text": "Size"
2875
+ },
2876
+ "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
2877
+ "default": "small",
2878
+ "fieldName": "size"
2879
+ }
2880
+ ],
2881
+ "superclass": {
2882
+ "name": "Component",
2883
+ "module": "/src/models"
2884
+ },
2885
+ "tagName": "mdc-bullet",
2886
+ "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
2887
+ "customElement": true
2888
+ }
2889
+ ],
2890
+ "exports": [
2891
+ {
2892
+ "kind": "js",
2893
+ "name": "default",
2894
+ "declaration": {
2895
+ "name": "Bullet",
2896
+ "module": "components/bullet/bullet.component.js"
2897
+ }
2898
+ }
2899
+ ]
2900
+ },
2901
2901
  {
2902
2902
  "kind": "javascript-module",
2903
2903
  "path": "components/buttongroup/buttongroup.component.js",