@momentum-design/components 0.85.7 → 0.85.8

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.
Files changed (4) hide show
  1. package/dist/custom-elements.json +528 -528
  2. package/dist/react/index.d.ts +1 -1
  3. package/dist/react/index.js +1 -1
  4. package/package.json +1 -1
package/dist/custom-elements.json CHANGED
@@ -4,792 +4,792 @@
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
- ],
31
- "cssParts": [
32
- {
33
- "description": "The alert icon",
34
- "name": "icon"
35
- },
36
- {
37
- "description": "The text label of the alertchip",
38
- "name": "label"
39
- }
40
- ],
11
+ "description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
12
+ "name": "Animation",
41
13
  "members": [
42
14
  {
43
15
  "kind": "field",
44
- "name": "variant",
45
- "type": {
46
- "text": "VariantType"
47
- },
48
- "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
49
- "default": "neutral",
50
- "attribute": "variant"
51
- },
52
- {
53
- "kind": "field",
54
- "name": "label",
55
- "type": {
56
- "text": "string"
57
- },
58
- "default": "''",
59
- "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
60
- "attribute": "label"
61
- },
62
- {
63
- "kind": "field",
64
- "name": "autofocus",
16
+ "name": "name",
65
17
  "type": {
66
- "text": "boolean"
18
+ "text": "AnimationNames | undefined"
67
19
  },
68
- "default": "false",
69
- "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
70
- "attribute": "autofocus",
71
- "reflects": true,
72
- "inheritedFrom": {
73
- "name": "AutoFocusMixin",
74
- "module": "utils/mixins/AutoFocusMixin.js"
75
- }
20
+ "description": "Name of the animation (= filename)",
21
+ "attribute": "name",
22
+ "reflects": true
76
23
  },
77
24
  {
78
25
  "kind": "field",
79
- "name": "tabIndex",
26
+ "name": "loop",
80
27
  "type": {
81
- "text": "number"
28
+ "text": "LoopType | undefined"
82
29
  },
83
- "default": "0",
84
- "description": "This property specifies the tab order of the element.",
85
- "attribute": "tabIndex",
86
- "reflects": true,
87
- "inheritedFrom": {
88
- "name": "TabIndexMixin",
89
- "module": "utils/mixins/TabIndexMixin.js"
90
- }
30
+ "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
31
+ "attribute": "loop",
32
+ "reflects": true
91
33
  },
92
34
  {
93
35
  "kind": "field",
94
- "name": "disabled",
36
+ "name": "autoplay",
95
37
  "type": {
96
38
  "text": "boolean | undefined"
97
39
  },
98
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
99
- "default": "undefined",
100
- "attribute": "disabled",
101
- "reflects": true,
102
- "inheritedFrom": {
103
- "name": "DisabledMixin",
104
- "module": "utils/mixins/DisabledMixin.js"
105
- }
40
+ "description": "Weather start the animation automatically",
41
+ "attribute": "autoplay",
42
+ "reflects": true
106
43
  },
107
44
  {
108
45
  "kind": "field",
109
- "name": "active",
46
+ "name": "ariaLabel",
110
47
  "type": {
111
- "text": "boolean | undefined"
48
+ "text": "string | null"
112
49
  },
113
- "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.",
114
- "default": "undefined",
115
- "attribute": "active",
116
- "reflects": true,
117
- "inheritedFrom": {
118
- "name": "Buttonsimple",
119
- "module": "components/buttonsimple/buttonsimple.component.js"
120
- }
50
+ "default": "null",
51
+ "description": "Aria-label attribute to be set for accessibility",
52
+ "attribute": "aria-label"
121
53
  },
122
54
  {
123
55
  "kind": "field",
124
- "name": "softDisabled",
56
+ "name": "ariaLabelledBy",
125
57
  "type": {
126
- "text": "boolean | undefined"
58
+ "text": "string | null"
127
59
  },
128
- "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.",
129
- "default": "undefined",
130
- "attribute": "soft-disabled",
131
- "reflects": true,
132
- "inheritedFrom": {
133
- "name": "Buttonsimple",
134
- "module": "components/buttonsimple/buttonsimple.component.js"
135
- }
60
+ "default": "null",
61
+ "description": "Aria-labelledby attribute to be set for accessibility",
62
+ "attribute": "aria-labelledby"
136
63
  },
137
64
  {
138
65
  "kind": "field",
139
- "name": "size",
66
+ "name": "lottieInstance",
140
67
  "type": {
141
- "text": "ButtonSize"
68
+ "text": "AnimationItem | undefined"
142
69
  },
143
- "description": "Simplebutton size is a super set of all the sizes supported by children components.",
144
- "default": "32",
145
- "attribute": "size",
146
- "reflects": true,
147
- "inheritedFrom": {
148
- "name": "Buttonsimple",
149
- "module": "components/buttonsimple/buttonsimple.component.js"
150
- }
151
- },
152
- {
153
- "kind": "field",
154
- "name": "role",
155
- "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
156
- "default": "button",
157
- "attribute": "role",
158
- "reflects": true,
159
- "inheritedFrom": {
160
- "name": "Buttonsimple",
161
- "module": "components/buttonsimple/buttonsimple.component.js"
162
- }
70
+ "privacy": "private",
71
+ "description": "Lottie animation instance"
163
72
  },
164
73
  {
165
74
  "kind": "field",
166
- "name": "ariaStateKey",
75
+ "name": "containerRef",
167
76
  "type": {
168
- "text": "string | undefined"
77
+ "text": "Ref<HTMLDivElement>"
169
78
  },
170
- "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`",
171
- "default": "'aria-pressed' (when)",
172
- "attribute": "ariaStateKey",
173
- "reflects": true,
174
- "inheritedFrom": {
175
- "name": "Buttonsimple",
176
- "module": "components/buttonsimple/buttonsimple.component.js"
177
- }
79
+ "privacy": "private",
80
+ "description": "Container for the animation"
178
81
  },
179
82
  {
180
83
  "kind": "field",
181
- "name": "type",
182
- "type": {
183
- "text": "ButtonType"
184
- },
185
- "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
186
- "default": "button",
187
- "attribute": "type",
188
- "reflects": true,
189
- "inheritedFrom": {
190
- "name": "Buttonsimple",
191
- "module": "components/buttonsimple/buttonsimple.component.js"
192
- }
84
+ "name": "animation",
85
+ "description": "Exposed API of the animation library (lottie)",
86
+ "readonly": true
193
87
  },
194
88
  {
195
89
  "kind": "method",
196
- "name": "executeAction",
197
- "privacy": "protected",
198
- "inheritedFrom": {
199
- "name": "Buttonsimple",
200
- "module": "components/buttonsimple/buttonsimple.component.js"
201
- }
90
+ "name": "getLoopValue",
91
+ "privacy": "private"
202
92
  },
203
93
  {
204
94
  "kind": "method",
205
- "name": "setActive",
206
- "privacy": "protected",
95
+ "name": "onLoadSuccessHandler",
96
+ "privacy": "private",
207
97
  "parameters": [
208
98
  {
209
- "name": "element",
210
- "type": {
211
- "text": "HTMLElement"
212
- },
213
- "description": "The button element"
214
- },
215
- {
216
- "name": "active",
217
- "optional": true,
99
+ "name": "animationData",
218
100
  "type": {
219
- "text": "boolean"
220
- },
221
- "description": "The active state of the element"
101
+ "text": "any"
102
+ }
222
103
  }
223
104
  ],
224
- "description": "Sets the ariaStateKey attributes based on the active state of the button.",
225
- "inheritedFrom": {
226
- "name": "Buttonsimple",
227
- "module": "components/buttonsimple/buttonsimple.component.js"
228
- }
105
+ "description": "Create new lotty instance for the loaded data"
229
106
  },
230
107
  {
231
108
  "kind": "method",
232
- "name": "setSoftDisabled",
109
+ "name": "onLoadFailHandler",
233
110
  "privacy": "private",
234
111
  "parameters": [
235
112
  {
236
- "name": "element",
237
- "type": {
238
- "text": "HTMLElement"
239
- },
240
- "description": "The button element."
241
- },
242
- {
243
- "name": "softDisabled",
244
- "optional": true,
113
+ "name": "error",
245
114
  "type": {
246
- "text": "boolean"
247
- },
248
- "description": "The soft-disabled state."
115
+ "text": "Error"
116
+ }
249
117
  }
250
118
  ],
251
- "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.",
252
- "inheritedFrom": {
253
- "name": "Buttonsimple",
254
- "module": "components/buttonsimple/buttonsimple.component.js"
255
- }
119
+ "description": "Error handler for animation loading"
256
120
  },
257
121
  {
258
122
  "kind": "method",
259
- "name": "setDisabled",
123
+ "name": "getAnimationData",
260
124
  "privacy": "private",
261
- "parameters": [
262
- {
263
- "name": "element",
264
- "type": {
265
- "text": "HTMLElement"
266
- },
267
- "description": "The button element."
268
- },
269
- {
270
- "name": "disabled",
271
- "type": {
272
- "text": "boolean"
273
- },
274
- "description": "The disabled state."
275
- }
276
- ],
277
- "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
278
- "inheritedFrom": {
279
- "name": "Buttonsimple",
280
- "module": "components/buttonsimple/buttonsimple.component.js"
281
- }
125
+ "description": "Import animation data dynamically"
282
126
  },
283
127
  {
284
- "kind": "method",
285
- "name": "triggerClickEvent",
286
- "privacy": "private",
287
- "inheritedFrom": {
288
- "name": "Buttonsimple",
289
- "module": "components/buttonsimple/buttonsimple.component.js"
290
- }
291
- },
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."
131
+ }
132
+ ],
133
+ "events": [
292
134
  {
293
- "kind": "method",
294
- "name": "handleBlur",
295
- "privacy": "private",
296
- "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
297
- "inheritedFrom": {
298
- "name": "Buttonsimple",
299
- "module": "components/buttonsimple/buttonsimple.component.js"
300
- }
135
+ "name": "load",
136
+ "type": {
137
+ "text": "CustomEvent"
138
+ },
139
+ "description": "(React: onLoad) This event is dispatched when the animation is loaded",
140
+ "reactName": "onLoad"
301
141
  },
302
142
  {
303
- "kind": "method",
304
- "name": "handleKeyDown",
305
- "privacy": "private",
306
- "parameters": [
307
- {
308
- "name": "event",
309
- "type": {
310
- "text": "KeyboardEvent"
311
- },
312
- "description": "The keyboard event."
313
- }
314
- ],
315
- "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
316
- "inheritedFrom": {
317
- "name": "Buttonsimple",
318
- "module": "components/buttonsimple/buttonsimple.component.js"
319
- }
143
+ "description": "(React: onComplete) This event is dispatched when all animation loops completed",
144
+ "name": "complete",
145
+ "reactName": "onComplete"
320
146
  },
321
147
  {
322
- "kind": "method",
323
- "name": "handleKeyUp",
324
- "privacy": "private",
325
- "parameters": [
326
- {
327
- "name": "event",
328
- "type": {
329
- "text": "KeyboardEvent"
330
- },
331
- "description": "The keyboard event."
332
- }
333
- ],
334
- "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
335
- "inheritedFrom": {
336
- "name": "Buttonsimple",
337
- "module": "components/buttonsimple/buttonsimple.component.js"
338
- }
148
+ "description": "(React: onError) This event is dispatched when animation loading failed",
149
+ "name": "error",
150
+ "reactName": "onError"
339
151
  }
340
152
  ],
341
153
  "attributes": [
342
154
  {
155
+ "name": "name",
156
+ "type": {
157
+ "text": "AnimationNames | undefined"
158
+ },
159
+ "description": "Name of the animation (= filename)",
160
+ "fieldName": "name"
161
+ },
162
+ {
163
+ "name": "loop",
164
+ "type": {
165
+ "text": "LoopType | undefined"
166
+ },
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"
169
+ },
170
+ {
171
+ "name": "autoplay",
172
+ "type": {
173
+ "text": "boolean | undefined"
174
+ },
175
+ "description": "Weather start the animation automatically",
176
+ "fieldName": "autoplay"
177
+ },
178
+ {
179
+ "name": "aria-label",
180
+ "type": {
181
+ "text": "string | null"
182
+ },
183
+ "default": "null",
184
+ "description": "Aria-label attribute to be set for accessibility",
185
+ "fieldName": "ariaLabel"
186
+ },
187
+ {
188
+ "name": "aria-labelledby",
189
+ "type": {
190
+ "text": "string | null"
191
+ },
192
+ "default": "null",
193
+ "description": "Aria-labelledby attribute to be set for accessibility",
194
+ "fieldName": "ariaLabelledBy"
195
+ }
196
+ ],
197
+ "superclass": {
198
+ "name": "Component",
199
+ "module": "/src/models"
200
+ },
201
+ "tagName": "mdc-animation",
202
+ "jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
203
+ "customElement": true
204
+ }
205
+ ],
206
+ "exports": [
207
+ {
208
+ "kind": "js",
209
+ "name": "default",
210
+ "declaration": {
211
+ "name": "Animation",
212
+ "module": "components/animation/animation.component.js"
213
+ }
214
+ }
215
+ ]
216
+ },
217
+ {
218
+ "kind": "javascript-module",
219
+ "path": "components/appheader/appheader.component.js",
220
+ "declarations": [
221
+ {
222
+ "kind": "class",
223
+ "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
224
+ "name": "Appheader",
225
+ "cssParts": [
226
+ {
227
+ "description": "The main container for styling the header.",
228
+ "name": "container"
229
+ },
230
+ {
231
+ "description": "The leading section of the header.",
232
+ "name": "leading-section"
233
+ },
234
+ {
235
+ "description": "The center section of the header.",
236
+ "name": "center-section"
237
+ },
238
+ {
239
+ "description": "The trailing section of the header.",
240
+ "name": "trailing-section"
241
+ }
242
+ ],
243
+ "slots": [
244
+ {
245
+ "description": "Slot for the leading section (e.g., brand logo, brand name).",
246
+ "name": "leading"
247
+ },
248
+ {
249
+ "description": "Slot for the center section (e.g., search bar, icons).",
250
+ "name": "center"
251
+ },
252
+ {
253
+ "description": "Slot for the trailing section (e.g., profile avatar, icons).",
254
+ "name": "trailing"
255
+ }
256
+ ],
257
+ "members": [],
258
+ "superclass": {
259
+ "name": "Component",
260
+ "module": "/src/models"
261
+ },
262
+ "tagName": "mdc-appheader",
263
+ "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
264
+ "customElement": true
265
+ }
266
+ ],
267
+ "exports": [
268
+ {
269
+ "kind": "js",
270
+ "name": "default",
271
+ "declaration": {
272
+ "name": "Appheader",
273
+ "module": "components/appheader/appheader.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
+ "cssParts": [
305
+ {
306
+ "description": "The alert icon",
307
+ "name": "icon"
308
+ },
309
+ {
310
+ "description": "The text label of the alertchip",
311
+ "name": "label"
312
+ }
313
+ ],
314
+ "members": [
315
+ {
316
+ "kind": "field",
343
317
  "name": "variant",
344
318
  "type": {
345
319
  "text": "VariantType"
346
320
  },
347
321
  "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
348
322
  "default": "neutral",
349
- "fieldName": "variant"
323
+ "attribute": "variant"
350
324
  },
351
325
  {
326
+ "kind": "field",
352
327
  "name": "label",
353
328
  "type": {
354
329
  "text": "string"
355
330
  },
356
331
  "default": "''",
357
332
  "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
358
- "fieldName": "label"
333
+ "attribute": "label"
359
334
  },
360
335
  {
336
+ "kind": "field",
361
337
  "name": "autofocus",
362
338
  "type": {
363
339
  "text": "boolean"
364
340
  },
365
341
  "default": "false",
366
342
  "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
367
- "fieldName": "autofocus",
343
+ "attribute": "autofocus",
344
+ "reflects": true,
368
345
  "inheritedFrom": {
369
346
  "name": "AutoFocusMixin",
370
- "module": "src/utils/mixins/AutoFocusMixin.ts"
347
+ "module": "utils/mixins/AutoFocusMixin.js"
371
348
  }
372
349
  },
373
350
  {
351
+ "kind": "field",
374
352
  "name": "tabIndex",
375
353
  "type": {
376
354
  "text": "number"
377
355
  },
378
356
  "default": "0",
379
357
  "description": "This property specifies the tab order of the element.",
380
- "fieldName": "tabIndex",
358
+ "attribute": "tabIndex",
359
+ "reflects": true,
381
360
  "inheritedFrom": {
382
361
  "name": "TabIndexMixin",
383
- "module": "src/utils/mixins/TabIndexMixin.ts"
362
+ "module": "utils/mixins/TabIndexMixin.js"
384
363
  }
385
364
  },
386
365
  {
366
+ "kind": "field",
387
367
  "name": "disabled",
388
368
  "type": {
389
369
  "text": "boolean | undefined"
390
370
  },
391
371
  "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
392
372
  "default": "undefined",
393
- "fieldName": "disabled",
394
- "inheritedFrom": {
373
+ "attribute": "disabled",
374
+ "reflects": true,
375
+ "inheritedFrom": {
395
376
  "name": "DisabledMixin",
396
- "module": "src/utils/mixins/DisabledMixin.ts"
377
+ "module": "utils/mixins/DisabledMixin.js"
397
378
  }
398
379
  },
399
380
  {
381
+ "kind": "field",
400
382
  "name": "active",
401
383
  "type": {
402
384
  "text": "boolean | undefined"
403
385
  },
404
386
  "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
405
387
  "default": "undefined",
406
- "fieldName": "active",
388
+ "attribute": "active",
389
+ "reflects": true,
407
390
  "inheritedFrom": {
408
391
  "name": "Buttonsimple",
409
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
392
+ "module": "components/buttonsimple/buttonsimple.component.js"
410
393
  }
411
394
  },
412
395
  {
413
- "name": "soft-disabled",
396
+ "kind": "field",
397
+ "name": "softDisabled",
414
398
  "type": {
415
399
  "text": "boolean | undefined"
416
400
  },
417
401
  "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
418
402
  "default": "undefined",
419
- "fieldName": "softDisabled",
403
+ "attribute": "soft-disabled",
404
+ "reflects": true,
420
405
  "inheritedFrom": {
421
406
  "name": "Buttonsimple",
422
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
407
+ "module": "components/buttonsimple/buttonsimple.component.js"
423
408
  }
424
409
  },
425
410
  {
411
+ "kind": "field",
426
412
  "name": "size",
427
413
  "type": {
428
414
  "text": "ButtonSize"
429
415
  },
430
416
  "description": "Simplebutton size is a super set of all the sizes supported by children components.",
431
417
  "default": "32",
432
- "fieldName": "size",
418
+ "attribute": "size",
419
+ "reflects": true,
433
420
  "inheritedFrom": {
434
421
  "name": "Buttonsimple",
435
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
422
+ "module": "components/buttonsimple/buttonsimple.component.js"
436
423
  }
437
424
  },
438
425
  {
426
+ "kind": "field",
439
427
  "name": "role",
440
428
  "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
441
429
  "default": "button",
442
- "fieldName": "role",
430
+ "attribute": "role",
431
+ "reflects": true,
443
432
  "inheritedFrom": {
444
433
  "name": "Buttonsimple",
445
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
434
+ "module": "components/buttonsimple/buttonsimple.component.js"
446
435
  }
447
436
  },
448
437
  {
438
+ "kind": "field",
449
439
  "name": "ariaStateKey",
450
440
  "type": {
451
441
  "text": "string | undefined"
452
442
  },
453
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`",
454
444
  "default": "'aria-pressed' (when)",
455
- "fieldName": "ariaStateKey",
445
+ "attribute": "ariaStateKey",
446
+ "reflects": true,
456
447
  "inheritedFrom": {
457
448
  "name": "Buttonsimple",
458
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
449
+ "module": "components/buttonsimple/buttonsimple.component.js"
459
450
  }
460
451
  },
461
452
  {
453
+ "kind": "field",
462
454
  "name": "type",
463
455
  "type": {
464
456
  "text": "ButtonType"
465
457
  },
466
458
  "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
467
459
  "default": "button",
468
- "fieldName": "type",
469
- "inheritedFrom": {
470
- "name": "Buttonsimple",
471
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
472
- }
473
- }
474
- ],
475
- "superclass": {
476
- "name": "Buttonsimple",
477
- "module": "/src/components/buttonsimple/buttonsimple.component"
478
- },
479
- "tagName": "mdc-alertchip",
480
- "jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - neutral, warning, error, success, and informational\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n * @csspart icon - The alert icon\n * @csspart label - The text label of the alertchip\n */",
481
- "customElement": true,
482
- "events": [
483
- {
484
- "description": "(React: onClick) This event is dispatched when the button is clicked.",
485
- "name": "click",
486
- "reactName": "onClick",
487
- "inheritedFrom": {
488
- "name": "Buttonsimple",
489
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
490
- }
491
- },
492
- {
493
- "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
494
- "name": "keydown",
495
- "reactName": "onKeyDown",
460
+ "attribute": "type",
461
+ "reflects": true,
496
462
  "inheritedFrom": {
497
463
  "name": "Buttonsimple",
498
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
464
+ "module": "components/buttonsimple/buttonsimple.component.js"
499
465
  }
500
466
  },
501
467
  {
502
- "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
503
- "name": "keyup",
504
- "reactName": "onKeyUp",
468
+ "kind": "method",
469
+ "name": "executeAction",
470
+ "privacy": "protected",
505
471
  "inheritedFrom": {
506
472
  "name": "Buttonsimple",
507
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
473
+ "module": "components/buttonsimple/buttonsimple.component.js"
508
474
  }
509
475
  },
510
476
  {
511
- "description": "(React: onFocus) This event is dispatched when the button receives focus.",
512
- "name": "focus",
513
- "reactName": "onFocus",
477
+ "kind": "method",
478
+ "name": "setActive",
479
+ "privacy": "protected",
480
+ "parameters": [
481
+ {
482
+ "name": "element",
483
+ "type": {
484
+ "text": "HTMLElement"
485
+ },
486
+ "description": "The button element"
487
+ },
488
+ {
489
+ "name": "active",
490
+ "optional": true,
491
+ "type": {
492
+ "text": "boolean"
493
+ },
494
+ "description": "The active state of the element"
495
+ }
496
+ ],
497
+ "description": "Sets the ariaStateKey attributes based on the active state of the button.",
514
498
  "inheritedFrom": {
515
499
  "name": "Buttonsimple",
516
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
500
+ "module": "components/buttonsimple/buttonsimple.component.js"
517
501
  }
518
- }
519
- ]
520
- }
521
- ],
522
- "exports": [
523
- {
524
- "kind": "js",
525
- "name": "default",
526
- "declaration": {
527
- "name": "AlertChip",
528
- "module": "components/alertchip/alertchip.component.js"
529
- }
530
- }
531
- ]
532
- },
533
- {
534
- "kind": "javascript-module",
535
- "path": "components/animation/animation.component.js",
536
- "declarations": [
537
- {
538
- "kind": "class",
539
- "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.",
540
- "name": "Animation",
541
- "members": [
542
- {
543
- "kind": "field",
544
- "name": "name",
545
- "type": {
546
- "text": "AnimationNames | undefined"
547
- },
548
- "description": "Name of the animation (= filename)",
549
- "attribute": "name",
550
- "reflects": true
551
- },
552
- {
553
- "kind": "field",
554
- "name": "loop",
555
- "type": {
556
- "text": "LoopType | undefined"
557
- },
558
- "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
559
- "attribute": "loop",
560
- "reflects": true
561
- },
562
- {
563
- "kind": "field",
564
- "name": "autoplay",
565
- "type": {
566
- "text": "boolean | undefined"
567
- },
568
- "description": "Weather start the animation automatically",
569
- "attribute": "autoplay",
570
- "reflects": true
571
- },
572
- {
573
- "kind": "field",
574
- "name": "ariaLabel",
575
- "type": {
576
- "text": "string | null"
577
- },
578
- "default": "null",
579
- "description": "Aria-label attribute to be set for accessibility",
580
- "attribute": "aria-label"
581
- },
582
- {
583
- "kind": "field",
584
- "name": "ariaLabelledBy",
585
- "type": {
586
- "text": "string | null"
587
- },
588
- "default": "null",
589
- "description": "Aria-labelledby attribute to be set for accessibility",
590
- "attribute": "aria-labelledby"
591
- },
592
- {
593
- "kind": "field",
594
- "name": "lottieInstance",
595
- "type": {
596
- "text": "AnimationItem | undefined"
597
- },
598
- "privacy": "private",
599
- "description": "Lottie animation instance"
600
- },
601
- {
602
- "kind": "field",
603
- "name": "containerRef",
604
- "type": {
605
- "text": "Ref<HTMLDivElement>"
606
- },
607
- "privacy": "private",
608
- "description": "Container for the animation"
609
- },
610
- {
611
- "kind": "field",
612
- "name": "animation",
613
- "description": "Exposed API of the animation library (lottie)",
614
- "readonly": true
615
- },
616
- {
617
- "kind": "method",
618
- "name": "getLoopValue",
619
- "privacy": "private"
620
502
  },
621
503
  {
622
504
  "kind": "method",
623
- "name": "onLoadSuccessHandler",
505
+ "name": "setSoftDisabled",
624
506
  "privacy": "private",
625
507
  "parameters": [
626
508
  {
627
- "name": "animationData",
509
+ "name": "element",
628
510
  "type": {
629
- "text": "any"
630
- }
511
+ "text": "HTMLElement"
512
+ },
513
+ "description": "The button element."
514
+ },
515
+ {
516
+ "name": "softDisabled",
517
+ "optional": true,
518
+ "type": {
519
+ "text": "boolean"
520
+ },
521
+ "description": "The soft-disabled state."
631
522
  }
632
523
  ],
633
- "description": "Create new lotty instance for the loaded data"
524
+ "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
525
+ "inheritedFrom": {
526
+ "name": "Buttonsimple",
527
+ "module": "components/buttonsimple/buttonsimple.component.js"
528
+ }
634
529
  },
635
530
  {
636
531
  "kind": "method",
637
- "name": "onLoadFailHandler",
532
+ "name": "setDisabled",
638
533
  "privacy": "private",
639
534
  "parameters": [
640
535
  {
641
- "name": "error",
536
+ "name": "element",
642
537
  "type": {
643
- "text": "Error"
644
- }
538
+ "text": "HTMLElement"
539
+ },
540
+ "description": "The button element."
541
+ },
542
+ {
543
+ "name": "disabled",
544
+ "type": {
545
+ "text": "boolean"
546
+ },
547
+ "description": "The disabled state."
645
548
  }
646
549
  ],
647
- "description": "Error handler for animation loading"
550
+ "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
551
+ "inheritedFrom": {
552
+ "name": "Buttonsimple",
553
+ "module": "components/buttonsimple/buttonsimple.component.js"
554
+ }
648
555
  },
649
556
  {
650
557
  "kind": "method",
651
- "name": "getAnimationData",
558
+ "name": "triggerClickEvent",
652
559
  "privacy": "private",
653
- "description": "Import animation data dynamically"
654
- },
655
- {
656
- "kind": "field",
657
- "name": "onCompleteHandler",
658
- "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."
659
- }
660
- ],
661
- "events": [
560
+ "inheritedFrom": {
561
+ "name": "Buttonsimple",
562
+ "module": "components/buttonsimple/buttonsimple.component.js"
563
+ }
564
+ },
662
565
  {
663
- "name": "load",
664
- "type": {
665
- "text": "CustomEvent"
666
- },
667
- "description": "(React: onLoad) This event is dispatched when the animation is loaded",
668
- "reactName": "onLoad"
566
+ "kind": "method",
567
+ "name": "handleBlur",
568
+ "privacy": "private",
569
+ "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
570
+ "inheritedFrom": {
571
+ "name": "Buttonsimple",
572
+ "module": "components/buttonsimple/buttonsimple.component.js"
573
+ }
669
574
  },
670
575
  {
671
- "description": "(React: onComplete) This event is dispatched when all animation loops completed",
672
- "name": "complete",
673
- "reactName": "onComplete"
576
+ "kind": "method",
577
+ "name": "handleKeyDown",
578
+ "privacy": "private",
579
+ "parameters": [
580
+ {
581
+ "name": "event",
582
+ "type": {
583
+ "text": "KeyboardEvent"
584
+ },
585
+ "description": "The keyboard event."
586
+ }
587
+ ],
588
+ "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
589
+ "inheritedFrom": {
590
+ "name": "Buttonsimple",
591
+ "module": "components/buttonsimple/buttonsimple.component.js"
592
+ }
674
593
  },
675
594
  {
676
- "description": "(React: onError) This event is dispatched when animation loading failed",
677
- "name": "error",
678
- "reactName": "onError"
595
+ "kind": "method",
596
+ "name": "handleKeyUp",
597
+ "privacy": "private",
598
+ "parameters": [
599
+ {
600
+ "name": "event",
601
+ "type": {
602
+ "text": "KeyboardEvent"
603
+ },
604
+ "description": "The keyboard event."
605
+ }
606
+ ],
607
+ "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
608
+ "inheritedFrom": {
609
+ "name": "Buttonsimple",
610
+ "module": "components/buttonsimple/buttonsimple.component.js"
611
+ }
679
612
  }
680
613
  ],
681
614
  "attributes": [
682
615
  {
683
- "name": "name",
616
+ "name": "variant",
684
617
  "type": {
685
- "text": "AnimationNames | undefined"
618
+ "text": "VariantType"
686
619
  },
687
- "description": "Name of the animation (= filename)",
688
- "fieldName": "name"
620
+ "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
621
+ "default": "neutral",
622
+ "fieldName": "variant"
689
623
  },
690
624
  {
691
- "name": "loop",
625
+ "name": "label",
692
626
  "type": {
693
- "text": "LoopType | undefined"
627
+ "text": "string"
694
628
  },
695
- "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
696
- "fieldName": "loop"
629
+ "default": "''",
630
+ "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
631
+ "fieldName": "label"
697
632
  },
698
633
  {
699
- "name": "autoplay",
634
+ "name": "autofocus",
635
+ "type": {
636
+ "text": "boolean"
637
+ },
638
+ "default": "false",
639
+ "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
640
+ "fieldName": "autofocus",
641
+ "inheritedFrom": {
642
+ "name": "AutoFocusMixin",
643
+ "module": "src/utils/mixins/AutoFocusMixin.ts"
644
+ }
645
+ },
646
+ {
647
+ "name": "tabIndex",
648
+ "type": {
649
+ "text": "number"
650
+ },
651
+ "default": "0",
652
+ "description": "This property specifies the tab order of the element.",
653
+ "fieldName": "tabIndex",
654
+ "inheritedFrom": {
655
+ "name": "TabIndexMixin",
656
+ "module": "src/utils/mixins/TabIndexMixin.ts"
657
+ }
658
+ },
659
+ {
660
+ "name": "disabled",
700
661
  "type": {
701
662
  "text": "boolean | undefined"
702
663
  },
703
- "description": "Weather start the animation automatically",
704
- "fieldName": "autoplay"
664
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
665
+ "default": "undefined",
666
+ "fieldName": "disabled",
667
+ "inheritedFrom": {
668
+ "name": "DisabledMixin",
669
+ "module": "src/utils/mixins/DisabledMixin.ts"
670
+ }
705
671
  },
706
672
  {
707
- "name": "aria-label",
673
+ "name": "active",
708
674
  "type": {
709
- "text": "string | null"
675
+ "text": "boolean | undefined"
710
676
  },
711
- "default": "null",
712
- "description": "Aria-label attribute to be set for accessibility",
713
- "fieldName": "ariaLabel"
677
+ "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
678
+ "default": "undefined",
679
+ "fieldName": "active",
680
+ "inheritedFrom": {
681
+ "name": "Buttonsimple",
682
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
683
+ }
714
684
  },
715
685
  {
716
- "name": "aria-labelledby",
686
+ "name": "soft-disabled",
717
687
  "type": {
718
- "text": "string | null"
688
+ "text": "boolean | undefined"
719
689
  },
720
- "default": "null",
721
- "description": "Aria-labelledby attribute to be set for accessibility",
722
- "fieldName": "ariaLabelledBy"
723
- }
724
- ],
725
- "superclass": {
726
- "name": "Component",
727
- "module": "/src/models"
728
- },
729
- "tagName": "mdc-animation",
730
- "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 */",
731
- "customElement": true
732
- }
733
- ],
734
- "exports": [
735
- {
736
- "kind": "js",
737
- "name": "default",
738
- "declaration": {
739
- "name": "Animation",
740
- "module": "components/animation/animation.component.js"
741
- }
742
- }
743
- ]
744
- },
745
- {
746
- "kind": "javascript-module",
747
- "path": "components/appheader/appheader.component.js",
748
- "declarations": [
749
- {
750
- "kind": "class",
751
- "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
752
- "name": "Appheader",
753
- "cssParts": [
690
+ "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
691
+ "default": "undefined",
692
+ "fieldName": "softDisabled",
693
+ "inheritedFrom": {
694
+ "name": "Buttonsimple",
695
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
696
+ }
697
+ },
754
698
  {
755
- "description": "The main container for styling the header.",
756
- "name": "container"
699
+ "name": "size",
700
+ "type": {
701
+ "text": "ButtonSize"
702
+ },
703
+ "description": "Simplebutton size is a super set of all the sizes supported by children components.",
704
+ "default": "32",
705
+ "fieldName": "size",
706
+ "inheritedFrom": {
707
+ "name": "Buttonsimple",
708
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
709
+ }
757
710
  },
758
711
  {
759
- "description": "The leading section of the header.",
760
- "name": "leading-section"
712
+ "name": "role",
713
+ "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
714
+ "default": "button",
715
+ "fieldName": "role",
716
+ "inheritedFrom": {
717
+ "name": "Buttonsimple",
718
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
719
+ }
761
720
  },
762
721
  {
763
- "description": "The center section of the header.",
764
- "name": "center-section"
722
+ "name": "ariaStateKey",
723
+ "type": {
724
+ "text": "string | undefined"
725
+ },
726
+ "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
727
+ "default": "'aria-pressed' (when)",
728
+ "fieldName": "ariaStateKey",
729
+ "inheritedFrom": {
730
+ "name": "Buttonsimple",
731
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
732
+ }
765
733
  },
766
734
  {
767
- "description": "The trailing section of the header.",
768
- "name": "trailing-section"
735
+ "name": "type",
736
+ "type": {
737
+ "text": "ButtonType"
738
+ },
739
+ "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
740
+ "default": "button",
741
+ "fieldName": "type",
742
+ "inheritedFrom": {
743
+ "name": "Buttonsimple",
744
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
745
+ }
769
746
  }
770
747
  ],
771
- "slots": [
748
+ "superclass": {
749
+ "name": "Buttonsimple",
750
+ "module": "/src/components/buttonsimple/buttonsimple.component"
751
+ },
752
+ "tagName": "mdc-alertchip",
753
+ "jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - neutral, warning, error, success, and informational\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n * @csspart icon - The alert icon\n * @csspart label - The text label of the alertchip\n */",
754
+ "customElement": true,
755
+ "events": [
772
756
  {
773
- "description": "Slot for the leading section (e.g., brand logo, brand name).",
774
- "name": "leading"
757
+ "description": "(React: onClick) This event is dispatched when the button is clicked.",
758
+ "name": "click",
759
+ "reactName": "onClick",
760
+ "inheritedFrom": {
761
+ "name": "Buttonsimple",
762
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
763
+ }
775
764
  },
776
765
  {
777
- "description": "Slot for the center section (e.g., search bar, icons).",
778
- "name": "center"
766
+ "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
767
+ "name": "keydown",
768
+ "reactName": "onKeyDown",
769
+ "inheritedFrom": {
770
+ "name": "Buttonsimple",
771
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
772
+ }
779
773
  },
780
774
  {
781
- "description": "Slot for the trailing section (e.g., profile avatar, icons).",
782
- "name": "trailing"
775
+ "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
776
+ "name": "keyup",
777
+ "reactName": "onKeyUp",
778
+ "inheritedFrom": {
779
+ "name": "Buttonsimple",
780
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
781
+ }
782
+ },
783
+ {
784
+ "description": "(React: onFocus) This event is dispatched when the button receives focus.",
785
+ "name": "focus",
786
+ "reactName": "onFocus",
787
+ "inheritedFrom": {
788
+ "name": "Buttonsimple",
789
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
790
+ }
783
791
  }
784
- ],
785
- "members": [],
786
- "superclass": {
787
- "name": "Component",
788
- "module": "/src/models"
789
- },
790
- "tagName": "mdc-appheader",
791
- "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
792
- "customElement": true
792
+ ]
793
793
  }
794
794
  ],
795
795
  "exports": [
@@ -797,8 +797,8 @@
797
797
  "kind": "js",
798
798
  "name": "default",
799
799
  "declaration": {
800
- "name": "Appheader",
801
- "module": "components/appheader/appheader.component.js"
800
+ "name": "AlertChip",
801
+ "module": "components/alertchip/alertchip.component.js"
802
802
  }
803
803
  }
804
804
  ]