@momentum-design/components 0.83.3 → 0.83.4

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 (13) hide show
  1. package/dist/browser/index.js +35 -35
  2. package/dist/browser/index.js.map +3 -3
  3. package/dist/components/dialog/dialog.component.d.ts +15 -10
  4. package/dist/components/dialog/dialog.component.js +19 -16
  5. package/dist/components/dialog/dialog.events.d.ts +9 -1
  6. package/dist/components/dialog/dialog.events.js +12 -2
  7. package/dist/components/dialog/dialog.types.d.ts +1 -0
  8. package/dist/custom-elements.json +1273 -1262
  9. package/dist/react/dialog/index.d.ts +8 -0
  10. package/dist/react/dialog/index.js +8 -0
  11. package/dist/react/index.d.ts +2 -2
  12. package/dist/react/index.js +2 -2
  13. package/package.json +1 -1
package/dist/custom-elements.json CHANGED
@@ -4,782 +4,782 @@
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
- },
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": [
282
134
  {
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
- }
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"
291
141
  },
292
142
  {
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
- }
143
+ "description": "(React: onComplete) This event is dispatched when all animation loops completed",
144
+ "name": "complete",
145
+ "reactName": "onComplete"
310
146
  },
311
147
  {
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
- }
148
+ "description": "(React: onError) This event is dispatched when animation loading failed",
149
+ "name": "error",
150
+ "reactName": "onError"
329
151
  }
330
152
  ],
331
153
  "attributes": [
332
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
+ "members": [
305
+ {
306
+ "kind": "field",
333
307
  "name": "variant",
334
308
  "type": {
335
309
  "text": "VariantType"
336
310
  },
337
311
  "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
338
312
  "default": "neutral",
339
- "fieldName": "variant"
313
+ "attribute": "variant"
340
314
  },
341
315
  {
316
+ "kind": "field",
342
317
  "name": "label",
343
318
  "type": {
344
319
  "text": "string"
345
320
  },
346
321
  "default": "''",
347
322
  "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
348
- "fieldName": "label"
323
+ "attribute": "label"
349
324
  },
350
325
  {
326
+ "kind": "field",
351
327
  "name": "autofocus",
352
328
  "type": {
353
329
  "text": "boolean"
354
330
  },
355
331
  "default": "false",
356
332
  "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
357
- "fieldName": "autofocus",
333
+ "attribute": "autofocus",
334
+ "reflects": true,
358
335
  "inheritedFrom": {
359
336
  "name": "AutoFocusMixin",
360
- "module": "src/utils/mixins/AutoFocusMixin.ts"
337
+ "module": "utils/mixins/AutoFocusMixin.js"
361
338
  }
362
339
  },
363
340
  {
341
+ "kind": "field",
364
342
  "name": "tabIndex",
365
343
  "type": {
366
344
  "text": "number"
367
345
  },
368
346
  "default": "0",
369
347
  "description": "This property specifies the tab order of the element.",
370
- "fieldName": "tabIndex",
348
+ "attribute": "tabIndex",
349
+ "reflects": true,
371
350
  "inheritedFrom": {
372
351
  "name": "TabIndexMixin",
373
- "module": "src/utils/mixins/TabIndexMixin.ts"
352
+ "module": "utils/mixins/TabIndexMixin.js"
374
353
  }
375
354
  },
376
355
  {
356
+ "kind": "field",
377
357
  "name": "disabled",
378
358
  "type": {
379
359
  "text": "boolean | undefined"
380
360
  },
381
361
  "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
382
362
  "default": "undefined",
383
- "fieldName": "disabled",
363
+ "attribute": "disabled",
364
+ "reflects": true,
384
365
  "inheritedFrom": {
385
366
  "name": "DisabledMixin",
386
- "module": "src/utils/mixins/DisabledMixin.ts"
367
+ "module": "utils/mixins/DisabledMixin.js"
387
368
  }
388
369
  },
389
370
  {
371
+ "kind": "field",
390
372
  "name": "active",
391
373
  "type": {
392
374
  "text": "boolean | undefined"
393
375
  },
394
376
  "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
377
  "default": "undefined",
396
- "fieldName": "active",
378
+ "attribute": "active",
379
+ "reflects": true,
397
380
  "inheritedFrom": {
398
381
  "name": "Buttonsimple",
399
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
382
+ "module": "components/buttonsimple/buttonsimple.component.js"
400
383
  }
401
384
  },
402
385
  {
403
- "name": "soft-disabled",
386
+ "kind": "field",
387
+ "name": "softDisabled",
404
388
  "type": {
405
389
  "text": "boolean | undefined"
406
390
  },
407
391
  "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
392
  "default": "undefined",
409
- "fieldName": "softDisabled",
393
+ "attribute": "soft-disabled",
394
+ "reflects": true,
410
395
  "inheritedFrom": {
411
396
  "name": "Buttonsimple",
412
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
397
+ "module": "components/buttonsimple/buttonsimple.component.js"
413
398
  }
414
399
  },
415
400
  {
401
+ "kind": "field",
416
402
  "name": "size",
417
403
  "type": {
418
404
  "text": "ButtonSize"
419
405
  },
420
406
  "description": "Simplebutton size is a super set of all the sizes supported by children components.",
421
407
  "default": "32",
422
- "fieldName": "size",
423
- "inheritedFrom": {
408
+ "attribute": "size",
409
+ "reflects": true,
410
+ "inheritedFrom": {
424
411
  "name": "Buttonsimple",
425
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
412
+ "module": "components/buttonsimple/buttonsimple.component.js"
426
413
  }
427
414
  },
428
415
  {
416
+ "kind": "field",
429
417
  "name": "role",
430
418
  "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
419
  "default": "button",
432
- "fieldName": "role",
420
+ "attribute": "role",
421
+ "reflects": true,
433
422
  "inheritedFrom": {
434
423
  "name": "Buttonsimple",
435
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
424
+ "module": "components/buttonsimple/buttonsimple.component.js"
436
425
  }
437
426
  },
438
427
  {
428
+ "kind": "field",
439
429
  "name": "ariaStateKey",
440
430
  "type": {
441
431
  "text": "string | undefined"
442
432
  },
443
433
  "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
434
  "default": "'aria-pressed' (when)",
445
- "fieldName": "ariaStateKey",
435
+ "attribute": "ariaStateKey",
436
+ "reflects": true,
446
437
  "inheritedFrom": {
447
438
  "name": "Buttonsimple",
448
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
439
+ "module": "components/buttonsimple/buttonsimple.component.js"
449
440
  }
450
441
  },
451
442
  {
443
+ "kind": "field",
452
444
  "name": "type",
453
445
  "type": {
454
446
  "text": "ButtonType"
455
447
  },
456
448
  "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
449
  "default": "button",
458
- "fieldName": "type",
450
+ "attribute": "type",
451
+ "reflects": true,
459
452
  "inheritedFrom": {
460
453
  "name": "Buttonsimple",
461
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
454
+ "module": "components/buttonsimple/buttonsimple.component.js"
462
455
  }
463
- }
464
- ],
465
- "superclass": {
466
- "name": "Buttonsimple",
467
- "module": "/src/components/buttonsimple/buttonsimple.component"
468
- },
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": [
456
+ },
473
457
  {
474
- "description": "(React: onClick) This event is dispatched when the button is clicked.",
475
- "name": "click",
476
- "reactName": "onClick",
458
+ "kind": "method",
459
+ "name": "executeAction",
460
+ "privacy": "protected",
477
461
  "inheritedFrom": {
478
462
  "name": "Buttonsimple",
479
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
463
+ "module": "components/buttonsimple/buttonsimple.component.js"
480
464
  }
481
465
  },
482
466
  {
483
- "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
484
- "name": "keydown",
485
- "reactName": "onKeyDown",
467
+ "kind": "method",
468
+ "name": "setActive",
469
+ "privacy": "protected",
470
+ "parameters": [
471
+ {
472
+ "name": "element",
473
+ "type": {
474
+ "text": "HTMLElement"
475
+ },
476
+ "description": "The button element"
477
+ },
478
+ {
479
+ "name": "active",
480
+ "optional": true,
481
+ "type": {
482
+ "text": "boolean"
483
+ },
484
+ "description": "The active state of the element"
485
+ }
486
+ ],
487
+ "description": "Sets the ariaStateKey attributes based on the active state of the button.",
486
488
  "inheritedFrom": {
487
489
  "name": "Buttonsimple",
488
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
490
+ "module": "components/buttonsimple/buttonsimple.component.js"
489
491
  }
490
492
  },
491
493
  {
492
- "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
493
- "name": "keyup",
494
- "reactName": "onKeyUp",
494
+ "kind": "method",
495
+ "name": "setSoftDisabled",
496
+ "privacy": "private",
497
+ "parameters": [
498
+ {
499
+ "name": "element",
500
+ "type": {
501
+ "text": "HTMLElement"
502
+ },
503
+ "description": "The button element."
504
+ },
505
+ {
506
+ "name": "softDisabled",
507
+ "optional": true,
508
+ "type": {
509
+ "text": "boolean"
510
+ },
511
+ "description": "The soft-disabled state."
512
+ }
513
+ ],
514
+ "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.",
495
515
  "inheritedFrom": {
496
516
  "name": "Buttonsimple",
497
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
517
+ "module": "components/buttonsimple/buttonsimple.component.js"
498
518
  }
499
519
  },
500
520
  {
501
- "description": "(React: onFocus) This event is dispatched when the button receives focus.",
502
- "name": "focus",
503
- "reactName": "onFocus",
521
+ "kind": "method",
522
+ "name": "setDisabled",
523
+ "privacy": "private",
524
+ "parameters": [
525
+ {
526
+ "name": "element",
527
+ "type": {
528
+ "text": "HTMLElement"
529
+ },
530
+ "description": "The button element."
531
+ },
532
+ {
533
+ "name": "disabled",
534
+ "type": {
535
+ "text": "boolean"
536
+ },
537
+ "description": "The disabled state."
538
+ }
539
+ ],
540
+ "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.",
504
541
  "inheritedFrom": {
505
542
  "name": "Buttonsimple",
506
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
543
+ "module": "components/buttonsimple/buttonsimple.component.js"
507
544
  }
508
- }
509
- ]
510
- }
511
- ],
512
- "exports": [
513
- {
514
- "kind": "js",
515
- "name": "default",
516
- "declaration": {
517
- "name": "AlertChip",
518
- "module": "components/alertchip/alertchip.component.js"
519
- }
520
- }
521
- ]
522
- },
523
- {
524
- "kind": "javascript-module",
525
- "path": "components/animation/animation.component.js",
526
- "declarations": [
527
- {
528
- "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
545
  },
591
546
  {
592
- "kind": "field",
593
- "name": "containerRef",
594
- "type": {
595
- "text": "Ref<HTMLDivElement>"
596
- },
547
+ "kind": "method",
548
+ "name": "triggerClickEvent",
597
549
  "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
550
+ "inheritedFrom": {
551
+ "name": "Buttonsimple",
552
+ "module": "components/buttonsimple/buttonsimple.component.js"
553
+ }
605
554
  },
606
555
  {
607
556
  "kind": "method",
608
- "name": "getLoopValue",
609
- "privacy": "private"
557
+ "name": "handleBlur",
558
+ "privacy": "private",
559
+ "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
560
+ "inheritedFrom": {
561
+ "name": "Buttonsimple",
562
+ "module": "components/buttonsimple/buttonsimple.component.js"
563
+ }
610
564
  },
611
565
  {
612
566
  "kind": "method",
613
- "name": "onLoadSuccessHandler",
567
+ "name": "handleKeyDown",
614
568
  "privacy": "private",
615
569
  "parameters": [
616
570
  {
617
- "name": "animationData",
571
+ "name": "event",
618
572
  "type": {
619
- "text": "any"
620
- }
573
+ "text": "KeyboardEvent"
574
+ },
575
+ "description": "The keyboard event."
621
576
  }
622
577
  ],
623
- "description": "Create new lotty instance for the loaded data"
578
+ "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.",
579
+ "inheritedFrom": {
580
+ "name": "Buttonsimple",
581
+ "module": "components/buttonsimple/buttonsimple.component.js"
582
+ }
624
583
  },
625
584
  {
626
585
  "kind": "method",
627
- "name": "onLoadFailHandler",
586
+ "name": "handleKeyUp",
628
587
  "privacy": "private",
629
588
  "parameters": [
630
589
  {
631
- "name": "error",
590
+ "name": "event",
632
591
  "type": {
633
- "text": "Error"
634
- }
592
+ "text": "KeyboardEvent"
593
+ },
594
+ "description": "The keyboard event."
635
595
  }
636
596
  ],
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."
597
+ "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.",
598
+ "inheritedFrom": {
599
+ "name": "Buttonsimple",
600
+ "module": "components/buttonsimple/buttonsimple.component.js"
601
+ }
649
602
  }
650
603
  ],
651
- "events": [
604
+ "attributes": [
652
605
  {
653
- "name": "load",
606
+ "name": "variant",
654
607
  "type": {
655
- "text": "CustomEvent"
608
+ "text": "VariantType"
656
609
  },
657
- "description": "(React: onLoad) This event is dispatched when the animation is loaded",
658
- "reactName": "onLoad"
610
+ "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
611
+ "default": "neutral",
612
+ "fieldName": "variant"
659
613
  },
660
614
  {
661
- "description": "(React: onComplete) This event is dispatched when all animation loops completed",
662
- "name": "complete",
663
- "reactName": "onComplete"
615
+ "name": "label",
616
+ "type": {
617
+ "text": "string"
618
+ },
619
+ "default": "''",
620
+ "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.",
621
+ "fieldName": "label"
664
622
  },
665
623
  {
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",
624
+ "name": "autofocus",
674
625
  "type": {
675
- "text": "AnimationNames | undefined"
626
+ "text": "boolean"
676
627
  },
677
- "description": "Name of the animation (= filename)",
678
- "fieldName": "name"
628
+ "default": "false",
629
+ "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
630
+ "fieldName": "autofocus",
631
+ "inheritedFrom": {
632
+ "name": "AutoFocusMixin",
633
+ "module": "src/utils/mixins/AutoFocusMixin.ts"
634
+ }
679
635
  },
680
636
  {
681
- "name": "loop",
637
+ "name": "tabIndex",
682
638
  "type": {
683
- "text": "LoopType | undefined"
639
+ "text": "number"
684
640
  },
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"
641
+ "default": "0",
642
+ "description": "This property specifies the tab order of the element.",
643
+ "fieldName": "tabIndex",
644
+ "inheritedFrom": {
645
+ "name": "TabIndexMixin",
646
+ "module": "src/utils/mixins/TabIndexMixin.ts"
647
+ }
687
648
  },
688
649
  {
689
- "name": "autoplay",
650
+ "name": "disabled",
690
651
  "type": {
691
652
  "text": "boolean | undefined"
692
653
  },
693
- "description": "Weather start the animation automatically",
694
- "fieldName": "autoplay"
654
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
655
+ "default": "undefined",
656
+ "fieldName": "disabled",
657
+ "inheritedFrom": {
658
+ "name": "DisabledMixin",
659
+ "module": "src/utils/mixins/DisabledMixin.ts"
660
+ }
695
661
  },
696
662
  {
697
- "name": "aria-label",
663
+ "name": "active",
698
664
  "type": {
699
- "text": "string | null"
665
+ "text": "boolean | undefined"
700
666
  },
701
- "default": "null",
702
- "description": "Aria-label attribute to be set for accessibility",
703
- "fieldName": "ariaLabel"
667
+ "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.",
668
+ "default": "undefined",
669
+ "fieldName": "active",
670
+ "inheritedFrom": {
671
+ "name": "Buttonsimple",
672
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
673
+ }
704
674
  },
705
675
  {
706
- "name": "aria-labelledby",
676
+ "name": "soft-disabled",
707
677
  "type": {
708
- "text": "string | null"
678
+ "text": "boolean | undefined"
709
679
  },
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": [
680
+ "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.",
681
+ "default": "undefined",
682
+ "fieldName": "softDisabled",
683
+ "inheritedFrom": {
684
+ "name": "Buttonsimple",
685
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
686
+ }
687
+ },
744
688
  {
745
- "description": "The main container for styling the header.",
746
- "name": "container"
689
+ "name": "size",
690
+ "type": {
691
+ "text": "ButtonSize"
692
+ },
693
+ "description": "Simplebutton size is a super set of all the sizes supported by children components.",
694
+ "default": "32",
695
+ "fieldName": "size",
696
+ "inheritedFrom": {
697
+ "name": "Buttonsimple",
698
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
699
+ }
747
700
  },
748
701
  {
749
- "description": "The leading section of the header.",
750
- "name": "leading-section"
702
+ "name": "role",
703
+ "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.",
704
+ "default": "button",
705
+ "fieldName": "role",
706
+ "inheritedFrom": {
707
+ "name": "Buttonsimple",
708
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
709
+ }
751
710
  },
752
711
  {
753
- "description": "The center section of the header.",
754
- "name": "center-section"
712
+ "name": "ariaStateKey",
713
+ "type": {
714
+ "text": "string | undefined"
715
+ },
716
+ "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`",
717
+ "default": "'aria-pressed' (when)",
718
+ "fieldName": "ariaStateKey",
719
+ "inheritedFrom": {
720
+ "name": "Buttonsimple",
721
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
722
+ }
755
723
  },
756
724
  {
757
- "description": "The trailing section of the header.",
758
- "name": "trailing-section"
725
+ "name": "type",
726
+ "type": {
727
+ "text": "ButtonType"
728
+ },
729
+ "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.",
730
+ "default": "button",
731
+ "fieldName": "type",
732
+ "inheritedFrom": {
733
+ "name": "Buttonsimple",
734
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
735
+ }
759
736
  }
760
737
  ],
761
- "slots": [
738
+ "superclass": {
739
+ "name": "Buttonsimple",
740
+ "module": "/src/components/buttonsimple/buttonsimple.component"
741
+ },
742
+ "tagName": "mdc-alertchip",
743
+ "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 */",
744
+ "customElement": true,
745
+ "events": [
762
746
  {
763
- "description": "Slot for the leading section (e.g., brand logo, brand name).",
764
- "name": "leading"
747
+ "description": "(React: onClick) This event is dispatched when the button is clicked.",
748
+ "name": "click",
749
+ "reactName": "onClick",
750
+ "inheritedFrom": {
751
+ "name": "Buttonsimple",
752
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
753
+ }
765
754
  },
766
755
  {
767
- "description": "Slot for the center section (e.g., search bar, icons).",
768
- "name": "center"
756
+ "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
757
+ "name": "keydown",
758
+ "reactName": "onKeyDown",
759
+ "inheritedFrom": {
760
+ "name": "Buttonsimple",
761
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
762
+ }
763
+ },
764
+ {
765
+ "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
766
+ "name": "keyup",
767
+ "reactName": "onKeyUp",
768
+ "inheritedFrom": {
769
+ "name": "Buttonsimple",
770
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
771
+ }
769
772
  },
770
773
  {
771
- "description": "Slot for the trailing section (e.g., profile avatar, icons).",
772
- "name": "trailing"
774
+ "description": "(React: onFocus) This event is dispatched when the button receives focus.",
775
+ "name": "focus",
776
+ "reactName": "onFocus",
777
+ "inheritedFrom": {
778
+ "name": "Buttonsimple",
779
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
780
+ }
773
781
  }
774
- ],
775
- "members": [],
776
- "superclass": {
777
- "name": "Component",
778
- "module": "/src/models"
779
- },
780
- "tagName": "mdc-appheader",
781
- "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 */",
782
- "customElement": true
782
+ ]
783
783
  }
784
784
  ],
785
785
  "exports": [
@@ -787,8 +787,8 @@
787
787
  "kind": "js",
788
788
  "name": "default",
789
789
  "declaration": {
790
- "name": "Appheader",
791
- "module": "components/appheader/appheader.component.js"
790
+ "name": "AlertChip",
791
+ "module": "components/alertchip/alertchip.component.js"
792
792
  }
793
793
  }
794
794
  ]
@@ -6454,100 +6454,248 @@
6454
6454
  },
6455
6455
  {
6456
6456
  "kind": "javascript-module",
6457
- "path": "components/chip/chip.component.js",
6457
+ "path": "components/checkbox/checkbox.component.js",
6458
6458
  "declarations": [
6459
6459
  {
6460
6460
  "kind": "class",
6461
- "description": "mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.\nConsumers can wrap this component around a tooltip to provide additional context.\n\nIt is recommended to keep the label text for the chip component concise and compact.\nFor best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.\n\nThis component is built by extending Buttonsimple.",
6462
- "name": "Chip",
6461
+ "description": "Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selections in lists.\n\nA checkbox component contains an optional label and an optional helper text.\n\nTo create a group of checkboxes, use the FormFieldGroup component.",
6462
+ "name": "Checkbox",
6463
6463
  "cssProperties": [
6464
6464
  {
6465
- "description": "The color of the chip.",
6466
- "name": "--mdc-chip-color"
6465
+ "description": "Allows customization of the background color on hover.",
6466
+ "name": "--mdc-checkbox-background-color-hover"
6467
6467
  },
6468
6468
  {
6469
- "description": "The border color of the chip.",
6470
- "name": "--mdc-chip-border-color"
6469
+ "description": "Background color for a selected checkbox when hovered.",
6470
+ "name": "--mdc-checkbox-checked-background-color-hover"
6471
6471
  },
6472
6472
  {
6473
- "description": "The background color of the chip.",
6474
- "name": "--mdc-chip-background-color"
6473
+ "description": "Background color for a selected checkbox when pressed.",
6474
+ "name": "--mdc-checkbox-checked-pressed-icon-color"
6475
+ },
6476
+ {
6477
+ "description": "Background color for a selected checkbox when pressed.",
6478
+ "name": "--mdc-checkbox-pressed-icon-color"
6479
+ },
6480
+ {
6481
+ "description": "Background color for a selected checkbox when disabled.",
6482
+ "name": "--mdc-checkbox-disabled-checked-icon-color"
6475
6483
  }
6476
6484
  ],
6477
6485
  "members": [
6478
6486
  {
6479
6487
  "kind": "field",
6480
- "name": "color",
6488
+ "name": "checked",
6481
6489
  "type": {
6482
- "text": "ColorType"
6490
+ "text": "boolean"
6483
6491
  },
6484
- "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
6485
- "default": "default",
6486
- "attribute": "color",
6492
+ "default": "false",
6493
+ "description": "Determines whether the checkbox is selected or unselected.",
6494
+ "attribute": "checked",
6487
6495
  "reflects": true
6488
6496
  },
6489
6497
  {
6490
6498
  "kind": "field",
6491
- "name": "label",
6499
+ "name": "indeterminate",
6492
6500
  "type": {
6493
- "text": "string"
6501
+ "text": "boolean"
6494
6502
  },
6495
- "default": "''",
6496
- "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
6497
- "attribute": "label"
6503
+ "default": "false",
6504
+ "description": "This property is used to determine the parent checkbox in a nested checkbox group.\nIf any one of the children is unselected, then the parent checkbox will be indeterminate.\nIf all children are either selected or unselected, then the parent checkbox will not be indeterminate.",
6505
+ "attribute": "indeterminate",
6506
+ "reflects": true
6507
+ },
6508
+ {
6509
+ "kind": "field",
6510
+ "name": "autofocus",
6511
+ "type": {
6512
+ "text": "boolean"
6513
+ },
6514
+ "default": "false",
6515
+ "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
6516
+ "attribute": "autofocus",
6517
+ "reflects": true
6498
6518
  },
6499
6519
  {
6500
6520
  "kind": "method",
6501
- "name": "renderIcon",
6521
+ "name": "setFormValue",
6522
+ "privacy": "private",
6523
+ "description": "Updates the form value to reflect the current state of the checkbox.\nIf checked, the value is set to either the user-provided value or 'on' if no value is provided.\nIf unchecked, the value is set to null."
6524
+ },
6525
+ {
6526
+ "kind": "method",
6527
+ "name": "manageRequired",
6528
+ "privacy": "private",
6529
+ "description": "Manages the required state of the checkbox.\nIf the checkbox is not checked and the required property is set, then the checkbox is invalid."
6530
+ },
6531
+ {
6532
+ "kind": "method",
6533
+ "name": "toggleState",
6502
6534
  "privacy": "private",
6503
- "description": "Renders the icon element if available.",
6504
6535
  "return": {
6505
6536
  "type": {
6506
- "text": ""
6537
+ "text": "void"
6538
+ }
6539
+ },
6540
+ "description": "Toggles the state of the checkbox element.\nIf the element is not disabled, then\nthe checked property is toggled and the indeterminate property is set to false."
6541
+ },
6542
+ {
6543
+ "kind": "method",
6544
+ "name": "handleKeyDown",
6545
+ "privacy": "private",
6546
+ "return": {
6547
+ "type": {
6548
+ "text": "void"
6549
+ }
6550
+ },
6551
+ "parameters": [
6552
+ {
6553
+ "name": "event",
6554
+ "type": {
6555
+ "text": "KeyboardEvent"
6556
+ },
6557
+ "description": "The keyboard event."
6558
+ }
6559
+ ],
6560
+ "description": "Handles the keydown event on the checkbox.\nWhen the user presses Enter, the form is submitted."
6561
+ },
6562
+ {
6563
+ "kind": "method",
6564
+ "name": "handleChange",
6565
+ "privacy": "public",
6566
+ "return": {
6567
+ "type": {
6568
+ "text": "void"
6569
+ }
6570
+ },
6571
+ "parameters": [
6572
+ {
6573
+ "name": "event",
6574
+ "type": {
6575
+ "text": "Event"
6576
+ }
6507
6577
  }
6578
+ ],
6579
+ "description": "Toggles the state of the checkbox element.\nand dispatch the new change event."
6580
+ },
6581
+ {
6582
+ "kind": "field",
6583
+ "name": "renderLabelAndHelperText",
6584
+ "privacy": "private"
6585
+ },
6586
+ {
6587
+ "kind": "field",
6588
+ "name": "name",
6589
+ "type": {
6590
+ "text": "string"
6591
+ },
6592
+ "default": "''",
6593
+ "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
6594
+ "attribute": "name",
6595
+ "reflects": true,
6596
+ "inheritedFrom": {
6597
+ "name": "FormInternalsMixin",
6598
+ "module": "utils/mixins/FormInternalsMixin.js"
6508
6599
  }
6509
6600
  },
6510
6601
  {
6511
6602
  "kind": "field",
6512
- "name": "iconName",
6603
+ "name": "value",
6513
6604
  "type": {
6514
- "text": "IconNames | undefined"
6605
+ "text": "string"
6515
6606
  },
6516
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
6517
- "attribute": "icon-name",
6607
+ "default": "''",
6608
+ "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
6609
+ "attribute": "value",
6610
+ "reflects": true,
6518
6611
  "inheritedFrom": {
6519
- "name": "IconNameMixin",
6520
- "module": "utils/mixins/IconNameMixin.js"
6612
+ "name": "FormInternalsMixin",
6613
+ "module": "utils/mixins/FormInternalsMixin.js"
6521
6614
  }
6522
6615
  },
6523
6616
  {
6524
6617
  "kind": "field",
6525
- "name": "autofocus",
6618
+ "name": "validationMessage",
6526
6619
  "type": {
6527
- "text": "boolean"
6620
+ "text": "string | undefined"
6528
6621
  },
6529
- "default": "false",
6530
- "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
6531
- "attribute": "autofocus",
6622
+ "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
6623
+ "attribute": "validation-message",
6532
6624
  "reflects": true,
6533
6625
  "inheritedFrom": {
6534
- "name": "Buttonsimple",
6535
- "module": "components/buttonsimple/buttonsimple.component.js"
6626
+ "name": "FormInternalsMixin",
6627
+ "module": "utils/mixins/FormInternalsMixin.js"
6536
6628
  }
6537
6629
  },
6538
6630
  {
6539
6631
  "kind": "field",
6540
- "name": "tabIndex",
6632
+ "name": "validity",
6541
6633
  "type": {
6542
- "text": "number"
6634
+ "text": "ValidityState"
6543
6635
  },
6544
- "default": "0",
6545
- "description": "This property specifies the tab order of the element.",
6546
- "attribute": "tabIndex",
6636
+ "readonly": true,
6637
+ "inheritedFrom": {
6638
+ "name": "FormInternalsMixin",
6639
+ "module": "utils/mixins/FormInternalsMixin.js"
6640
+ }
6641
+ },
6642
+ {
6643
+ "kind": "field",
6644
+ "name": "willValidate",
6645
+ "readonly": true,
6646
+ "inheritedFrom": {
6647
+ "name": "FormInternalsMixin",
6648
+ "module": "utils/mixins/FormInternalsMixin.js"
6649
+ }
6650
+ },
6651
+ {
6652
+ "kind": "method",
6653
+ "name": "setValidity",
6654
+ "description": "Sets the validity of the input field based on the input field's validity.",
6655
+ "return": {
6656
+ "type": {
6657
+ "text": ""
6658
+ }
6659
+ },
6660
+ "inheritedFrom": {
6661
+ "name": "FormInternalsMixin",
6662
+ "module": "utils/mixins/FormInternalsMixin.js"
6663
+ }
6664
+ },
6665
+ {
6666
+ "kind": "method",
6667
+ "name": "checkValidity",
6668
+ "return": {
6669
+ "type": {
6670
+ "text": "boolean"
6671
+ }
6672
+ },
6673
+ "inheritedFrom": {
6674
+ "name": "FormInternalsMixin",
6675
+ "module": "utils/mixins/FormInternalsMixin.js"
6676
+ }
6677
+ },
6678
+ {
6679
+ "kind": "method",
6680
+ "name": "reportValidity",
6681
+ "inheritedFrom": {
6682
+ "name": "FormInternalsMixin",
6683
+ "module": "utils/mixins/FormInternalsMixin.js"
6684
+ }
6685
+ },
6686
+ {
6687
+ "kind": "field",
6688
+ "name": "dataAriaLabel",
6689
+ "type": {
6690
+ "text": "string | null"
6691
+ },
6692
+ "default": "null",
6693
+ "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
6694
+ "attribute": "data-aria-label",
6547
6695
  "reflects": true,
6548
6696
  "inheritedFrom": {
6549
- "name": "Buttonsimple",
6550
- "module": "components/buttonsimple/buttonsimple.component.js"
6697
+ "name": "DataAriaLabelMixin",
6698
+ "module": "utils/mixins/DataAriaLabelMixin.js"
6551
6699
  }
6552
6700
  },
6553
6701
  {
@@ -6561,299 +6709,294 @@
6561
6709
  "attribute": "disabled",
6562
6710
  "reflects": true,
6563
6711
  "inheritedFrom": {
6564
- "name": "Buttonsimple",
6565
- "module": "components/buttonsimple/buttonsimple.component.js"
6712
+ "name": "DisabledMixin",
6713
+ "module": "utils/mixins/DisabledMixin.js"
6566
6714
  }
6567
6715
  },
6568
6716
  {
6569
6717
  "kind": "field",
6570
- "name": "active",
6718
+ "name": "label",
6571
6719
  "type": {
6572
- "text": "boolean | undefined"
6720
+ "text": "string | undefined"
6573
6721
  },
6574
- "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.",
6575
- "default": "undefined",
6576
- "attribute": "active",
6722
+ "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
6723
+ "attribute": "label",
6577
6724
  "reflects": true,
6578
6725
  "inheritedFrom": {
6579
- "name": "Buttonsimple",
6580
- "module": "components/buttonsimple/buttonsimple.component.js"
6726
+ "name": "FormfieldWrapper",
6727
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6581
6728
  }
6582
6729
  },
6583
6730
  {
6584
6731
  "kind": "field",
6585
- "name": "softDisabled",
6732
+ "name": "required",
6586
6733
  "type": {
6587
- "text": "boolean | undefined"
6734
+ "text": "boolean"
6588
6735
  },
6589
- "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.",
6590
- "default": "undefined",
6591
- "attribute": "soft-disabled",
6736
+ "default": "false",
6737
+ "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
6738
+ "attribute": "required",
6592
6739
  "reflects": true,
6593
6740
  "inheritedFrom": {
6594
- "name": "Buttonsimple",
6595
- "module": "components/buttonsimple/buttonsimple.component.js"
6741
+ "name": "FormfieldWrapper",
6742
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6596
6743
  }
6597
6744
  },
6598
6745
  {
6599
6746
  "kind": "field",
6600
- "name": "size",
6747
+ "name": "id",
6601
6748
  "type": {
6602
- "text": "ButtonSize"
6749
+ "text": "string"
6603
6750
  },
6604
- "description": "Simplebutton size is a super set of all the sizes supported by children components.",
6605
- "default": "32",
6606
- "attribute": "size",
6607
- "reflects": true,
6751
+ "default": "''",
6752
+ "description": "The unique id of the input field. It is used to link the input field with the label.",
6753
+ "attribute": "id",
6608
6754
  "inheritedFrom": {
6609
- "name": "Buttonsimple",
6610
- "module": "components/buttonsimple/buttonsimple.component.js"
6755
+ "name": "FormfieldWrapper",
6756
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6611
6757
  }
6612
6758
  },
6613
6759
  {
6614
6760
  "kind": "field",
6615
- "name": "role",
6616
- "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.",
6617
- "default": "button",
6618
- "attribute": "role",
6761
+ "name": "helpTextType",
6762
+ "type": {
6763
+ "text": "ValidationType"
6764
+ },
6765
+ "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
6766
+ "attribute": "help-text-type",
6619
6767
  "reflects": true,
6620
6768
  "inheritedFrom": {
6621
- "name": "Buttonsimple",
6622
- "module": "components/buttonsimple/buttonsimple.component.js"
6769
+ "name": "FormfieldWrapper",
6770
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6623
6771
  }
6624
6772
  },
6625
6773
  {
6626
6774
  "kind": "field",
6627
- "name": "ariaStateKey",
6775
+ "name": "helpText",
6628
6776
  "type": {
6629
6777
  "text": "string | undefined"
6630
6778
  },
6631
- "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`",
6632
- "default": "'aria-pressed' (when)",
6633
- "attribute": "ariaStateKey",
6779
+ "description": "The help text that is displayed below the input field.",
6780
+ "attribute": "help-text",
6634
6781
  "reflects": true,
6635
6782
  "inheritedFrom": {
6636
- "name": "Buttonsimple",
6637
- "module": "components/buttonsimple/buttonsimple.component.js"
6783
+ "name": "FormfieldWrapper",
6784
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6638
6785
  }
6639
6786
  },
6640
6787
  {
6641
6788
  "kind": "field",
6642
- "name": "type",
6789
+ "name": "toggletipText",
6643
6790
  "type": {
6644
- "text": "ButtonType"
6791
+ "text": "string | undefined"
6645
6792
  },
6646
- "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.",
6647
- "default": "button",
6648
- "attribute": "type",
6793
+ "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
6794
+ "attribute": "toggletip-text",
6649
6795
  "reflects": true,
6650
6796
  "inheritedFrom": {
6651
- "name": "Buttonsimple",
6652
- "module": "components/buttonsimple/buttonsimple.component.js"
6797
+ "name": "FormfieldWrapper",
6798
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6653
6799
  }
6654
6800
  },
6655
6801
  {
6656
- "kind": "method",
6657
- "name": "executeAction",
6658
- "privacy": "protected",
6802
+ "kind": "field",
6803
+ "name": "toggletipPlacement",
6804
+ "type": {
6805
+ "text": "PopoverPlacement"
6806
+ },
6807
+ "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
6808
+ "default": "'top'",
6809
+ "attribute": "toggletip-placement",
6810
+ "reflects": true,
6659
6811
  "inheritedFrom": {
6660
- "name": "Buttonsimple",
6661
- "module": "components/buttonsimple/buttonsimple.component.js"
6812
+ "name": "FormfieldWrapper",
6813
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6662
6814
  }
6663
6815
  },
6664
6816
  {
6665
- "kind": "method",
6666
- "name": "setActive",
6667
- "privacy": "protected",
6668
- "parameters": [
6669
- {
6670
- "name": "element",
6671
- "type": {
6672
- "text": "HTMLElement"
6673
- },
6674
- "description": "The button element"
6675
- },
6676
- {
6677
- "name": "active",
6678
- "optional": true,
6679
- "type": {
6680
- "text": "boolean"
6681
- },
6682
- "description": "The active state of the element"
6683
- }
6684
- ],
6685
- "description": "Sets the ariaStateKey attributes based on the active state of the button.",
6817
+ "kind": "field",
6818
+ "name": "infoIconAriaLabel",
6819
+ "type": {
6820
+ "text": "string | undefined"
6821
+ },
6822
+ "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
6823
+ "attribute": "info-icon-aria-label",
6824
+ "reflects": true,
6686
6825
  "inheritedFrom": {
6687
- "name": "Buttonsimple",
6688
- "module": "components/buttonsimple/buttonsimple.component.js"
6826
+ "name": "FormfieldWrapper",
6827
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6689
6828
  }
6690
6829
  },
6691
6830
  {
6692
6831
  "kind": "method",
6693
- "name": "setSoftDisabled",
6694
- "privacy": "private",
6695
- "parameters": [
6696
- {
6697
- "name": "element",
6698
- "type": {
6699
- "text": "HTMLElement"
6700
- },
6701
- "description": "The button element."
6702
- },
6703
- {
6704
- "name": "softDisabled",
6705
- "optional": true,
6706
- "type": {
6707
- "text": "boolean"
6708
- },
6709
- "description": "The soft-disabled state."
6832
+ "name": "renderLabelElement",
6833
+ "privacy": "protected",
6834
+ "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
6835
+ "return": {
6836
+ "type": {
6837
+ "text": ""
6710
6838
  }
6711
- ],
6712
- "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.",
6839
+ },
6713
6840
  "inheritedFrom": {
6714
- "name": "Buttonsimple",
6715
- "module": "components/buttonsimple/buttonsimple.component.js"
6841
+ "name": "FormfieldWrapper",
6842
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6716
6843
  }
6717
6844
  },
6718
6845
  {
6719
6846
  "kind": "method",
6720
- "name": "setDisabled",
6721
- "privacy": "private",
6722
- "parameters": [
6723
- {
6724
- "name": "element",
6725
- "type": {
6726
- "text": "HTMLElement"
6727
- },
6728
- "description": "The button element."
6729
- },
6730
- {
6731
- "name": "disabled",
6732
- "type": {
6733
- "text": "boolean"
6734
- },
6735
- "description": "The disabled state."
6847
+ "name": "renderHelpTextIcon",
6848
+ "privacy": "protected",
6849
+ "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
6850
+ "return": {
6851
+ "type": {
6852
+ "text": ""
6736
6853
  }
6737
- ],
6738
- "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.",
6739
- "inheritedFrom": {
6740
- "name": "Buttonsimple",
6741
- "module": "components/buttonsimple/buttonsimple.component.js"
6742
- }
6743
- },
6744
- {
6745
- "kind": "method",
6746
- "name": "triggerClickEvent",
6747
- "privacy": "private",
6854
+ },
6748
6855
  "inheritedFrom": {
6749
- "name": "Buttonsimple",
6750
- "module": "components/buttonsimple/buttonsimple.component.js"
6856
+ "name": "FormfieldWrapper",
6857
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6751
6858
  }
6752
6859
  },
6753
6860
  {
6754
6861
  "kind": "method",
6755
- "name": "handleBlur",
6756
- "privacy": "private",
6757
- "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
6862
+ "name": "renderHelpText",
6863
+ "privacy": "protected",
6864
+ "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
6865
+ "return": {
6866
+ "type": {
6867
+ "text": ""
6868
+ }
6869
+ },
6758
6870
  "inheritedFrom": {
6759
- "name": "Buttonsimple",
6760
- "module": "components/buttonsimple/buttonsimple.component.js"
6871
+ "name": "FormfieldWrapper",
6872
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6761
6873
  }
6762
6874
  },
6763
6875
  {
6764
6876
  "kind": "method",
6765
- "name": "handleKeyDown",
6766
- "privacy": "private",
6767
- "parameters": [
6768
- {
6769
- "name": "event",
6770
- "type": {
6771
- "text": "KeyboardEvent"
6772
- },
6773
- "description": "The keyboard event."
6877
+ "name": "renderLabel",
6878
+ "privacy": "protected",
6879
+ "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
6880
+ "return": {
6881
+ "type": {
6882
+ "text": ""
6774
6883
  }
6775
- ],
6776
- "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.",
6884
+ },
6777
6885
  "inheritedFrom": {
6778
- "name": "Buttonsimple",
6779
- "module": "components/buttonsimple/buttonsimple.component.js"
6886
+ "name": "FormfieldWrapper",
6887
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6780
6888
  }
6781
6889
  },
6782
6890
  {
6783
6891
  "kind": "method",
6784
- "name": "handleKeyUp",
6785
- "privacy": "private",
6786
- "parameters": [
6787
- {
6788
- "name": "event",
6789
- "type": {
6790
- "text": "KeyboardEvent"
6791
- },
6792
- "description": "The keyboard event."
6892
+ "name": "renderHelperText",
6893
+ "privacy": "protected",
6894
+ "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
6895
+ "return": {
6896
+ "type": {
6897
+ "text": ""
6793
6898
  }
6794
- ],
6795
- "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.",
6899
+ },
6796
6900
  "inheritedFrom": {
6797
- "name": "Buttonsimple",
6798
- "module": "components/buttonsimple/buttonsimple.component.js"
6901
+ "name": "FormfieldWrapper",
6902
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6799
6903
  }
6800
6904
  }
6801
6905
  ],
6906
+ "events": [
6907
+ {
6908
+ "type": {
6909
+ "text": "EventConstructor"
6910
+ }
6911
+ },
6912
+ {
6913
+ "description": "(React: onChange) Event that gets dispatched when the checkbox state changes.",
6914
+ "name": "change",
6915
+ "reactName": "onChange"
6916
+ },
6917
+ {
6918
+ "description": "(React: onFocus) Event that gets dispatched when the checkbox receives focus.",
6919
+ "name": "focus",
6920
+ "reactName": "onFocus"
6921
+ }
6922
+ ],
6802
6923
  "attributes": [
6803
6924
  {
6804
- "name": "color",
6925
+ "name": "checked",
6805
6926
  "type": {
6806
- "text": "ColorType"
6927
+ "text": "boolean"
6807
6928
  },
6808
- "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
6809
- "default": "default",
6810
- "fieldName": "color"
6929
+ "default": "false",
6930
+ "description": "Determines whether the checkbox is selected or unselected.",
6931
+ "fieldName": "checked"
6811
6932
  },
6812
6933
  {
6813
- "name": "label",
6934
+ "name": "indeterminate",
6935
+ "type": {
6936
+ "text": "boolean"
6937
+ },
6938
+ "default": "false",
6939
+ "description": "This property is used to determine the parent checkbox in a nested checkbox group.\nIf any one of the children is unselected, then the parent checkbox will be indeterminate.\nIf all children are either selected or unselected, then the parent checkbox will not be indeterminate.",
6940
+ "fieldName": "indeterminate"
6941
+ },
6942
+ {
6943
+ "name": "autofocus",
6944
+ "type": {
6945
+ "text": "boolean"
6946
+ },
6947
+ "default": "false",
6948
+ "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
6949
+ "fieldName": "autofocus"
6950
+ },
6951
+ {
6952
+ "name": "name",
6814
6953
  "type": {
6815
6954
  "text": "string"
6816
6955
  },
6817
6956
  "default": "''",
6818
- "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
6819
- "fieldName": "label"
6957
+ "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
6958
+ "fieldName": "name",
6959
+ "inheritedFrom": {
6960
+ "name": "FormInternalsMixin",
6961
+ "module": "src/utils/mixins/FormInternalsMixin.ts"
6962
+ }
6820
6963
  },
6821
6964
  {
6822
- "name": "icon-name",
6965
+ "name": "value",
6823
6966
  "type": {
6824
- "text": "IconNames | undefined"
6967
+ "text": "string"
6825
6968
  },
6826
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
6827
- "fieldName": "iconName",
6969
+ "default": "''",
6970
+ "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
6971
+ "fieldName": "value",
6828
6972
  "inheritedFrom": {
6829
- "name": "IconNameMixin",
6830
- "module": "src/utils/mixins/IconNameMixin.ts"
6973
+ "name": "FormInternalsMixin",
6974
+ "module": "src/utils/mixins/FormInternalsMixin.ts"
6831
6975
  }
6832
6976
  },
6833
6977
  {
6834
- "name": "autofocus",
6978
+ "name": "validation-message",
6835
6979
  "type": {
6836
- "text": "boolean"
6980
+ "text": "string | undefined"
6837
6981
  },
6838
- "default": "false",
6839
- "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
6840
- "fieldName": "autofocus",
6982
+ "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
6983
+ "fieldName": "validationMessage",
6841
6984
  "inheritedFrom": {
6842
- "name": "Buttonsimple",
6843
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6985
+ "name": "FormInternalsMixin",
6986
+ "module": "src/utils/mixins/FormInternalsMixin.ts"
6844
6987
  }
6845
6988
  },
6846
6989
  {
6847
- "name": "tabIndex",
6990
+ "name": "data-aria-label",
6848
6991
  "type": {
6849
- "text": "number"
6992
+ "text": "string | null"
6850
6993
  },
6851
- "default": "0",
6852
- "description": "This property specifies the tab order of the element.",
6853
- "fieldName": "tabIndex",
6994
+ "default": "null",
6995
+ "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
6996
+ "fieldName": "dataAriaLabel",
6854
6997
  "inheritedFrom": {
6855
- "name": "Buttonsimple",
6856
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6998
+ "name": "DataAriaLabelMixin",
6999
+ "module": "src/utils/mixins/DataAriaLabelMixin.ts"
6857
7000
  }
6858
7001
  },
6859
7002
  {
@@ -6865,137 +7008,127 @@
6865
7008
  "default": "undefined",
6866
7009
  "fieldName": "disabled",
6867
7010
  "inheritedFrom": {
6868
- "name": "Buttonsimple",
6869
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
7011
+ "name": "DisabledMixin",
7012
+ "module": "src/utils/mixins/DisabledMixin.ts"
6870
7013
  }
6871
7014
  },
6872
7015
  {
6873
- "name": "active",
7016
+ "name": "label",
6874
7017
  "type": {
6875
- "text": "boolean | undefined"
7018
+ "text": "string | undefined"
6876
7019
  },
6877
- "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.",
6878
- "default": "undefined",
6879
- "fieldName": "active",
7020
+ "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
7021
+ "fieldName": "label",
6880
7022
  "inheritedFrom": {
6881
- "name": "Buttonsimple",
6882
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
7023
+ "name": "FormfieldWrapper",
7024
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6883
7025
  }
6884
7026
  },
6885
7027
  {
6886
- "name": "soft-disabled",
7028
+ "name": "required",
6887
7029
  "type": {
6888
- "text": "boolean | undefined"
7030
+ "text": "boolean"
6889
7031
  },
6890
- "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.",
6891
- "default": "undefined",
6892
- "fieldName": "softDisabled",
7032
+ "default": "false",
7033
+ "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
7034
+ "fieldName": "required",
6893
7035
  "inheritedFrom": {
6894
- "name": "Buttonsimple",
6895
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
7036
+ "name": "FormfieldWrapper",
7037
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6896
7038
  }
6897
7039
  },
6898
7040
  {
6899
- "name": "size",
7041
+ "name": "id",
6900
7042
  "type": {
6901
- "text": "ButtonSize"
7043
+ "text": "string"
6902
7044
  },
6903
- "description": "Simplebutton size is a super set of all the sizes supported by children components.",
6904
- "default": "32",
6905
- "fieldName": "size",
7045
+ "default": "''",
7046
+ "description": "The unique id of the input field. It is used to link the input field with the label.",
7047
+ "fieldName": "id",
6906
7048
  "inheritedFrom": {
6907
- "name": "Buttonsimple",
6908
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
7049
+ "name": "FormfieldWrapper",
7050
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6909
7051
  }
6910
7052
  },
6911
7053
  {
6912
- "name": "role",
6913
- "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.",
6914
- "default": "button",
6915
- "fieldName": "role",
7054
+ "name": "help-text-type",
7055
+ "type": {
7056
+ "text": "ValidationType"
7057
+ },
7058
+ "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
7059
+ "fieldName": "helpTextType",
6916
7060
  "inheritedFrom": {
6917
- "name": "Buttonsimple",
6918
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
7061
+ "name": "FormfieldWrapper",
7062
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6919
7063
  }
6920
7064
  },
6921
7065
  {
6922
- "name": "ariaStateKey",
7066
+ "name": "help-text",
6923
7067
  "type": {
6924
7068
  "text": "string | undefined"
6925
7069
  },
6926
- "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`",
6927
- "default": "'aria-pressed' (when)",
6928
- "fieldName": "ariaStateKey",
7070
+ "description": "The help text that is displayed below the input field.",
7071
+ "fieldName": "helpText",
6929
7072
  "inheritedFrom": {
6930
- "name": "Buttonsimple",
6931
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
7073
+ "name": "FormfieldWrapper",
7074
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6932
7075
  }
6933
7076
  },
6934
7077
  {
6935
- "name": "type",
7078
+ "name": "toggletip-text",
6936
7079
  "type": {
6937
- "text": "ButtonType"
7080
+ "text": "string | undefined"
6938
7081
  },
6939
- "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.",
6940
- "default": "button",
6941
- "fieldName": "type",
6942
- "inheritedFrom": {
6943
- "name": "Buttonsimple",
6944
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6945
- }
6946
- }
6947
- ],
6948
- "mixins": [
6949
- {
6950
- "name": "IconNameMixin",
6951
- "module": "/src/utils/mixins/IconNameMixin"
6952
- }
6953
- ],
6954
- "superclass": {
6955
- "name": "Buttonsimple",
6956
- "module": "/src/components/buttonsimple/buttonsimple.component"
6957
- },
6958
- "tagName": "mdc-chip",
6959
- "jsDoc": "/**\n * mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.\n * Consumers can wrap this component around a tooltip to provide additional context.\n *\n * It is recommended to keep the label text for the chip component concise and compact.\n * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>,\n * including empty spaces to split words.\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-chip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the chip.\n * @cssproperty --mdc-chip-border-color - The border color of the chip.\n * @cssproperty --mdc-chip-background-color - The background color of the chip.\n *\n */",
6960
- "customElement": true,
6961
- "events": [
6962
- {
6963
- "description": "(React: onClick) This event is dispatched when the button is clicked.",
6964
- "name": "click",
6965
- "reactName": "onClick",
7082
+ "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
7083
+ "fieldName": "toggletipText",
6966
7084
  "inheritedFrom": {
6967
- "name": "Buttonsimple",
6968
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
7085
+ "name": "FormfieldWrapper",
7086
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6969
7087
  }
6970
7088
  },
6971
7089
  {
6972
- "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
6973
- "name": "keydown",
6974
- "reactName": "onKeyDown",
7090
+ "name": "toggletip-placement",
7091
+ "type": {
7092
+ "text": "PopoverPlacement"
7093
+ },
7094
+ "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
7095
+ "default": "'top'",
7096
+ "fieldName": "toggletipPlacement",
6975
7097
  "inheritedFrom": {
6976
- "name": "Buttonsimple",
6977
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
7098
+ "name": "FormfieldWrapper",
7099
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6978
7100
  }
6979
7101
  },
6980
7102
  {
6981
- "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
6982
- "name": "keyup",
6983
- "reactName": "onKeyUp",
7103
+ "name": "info-icon-aria-label",
7104
+ "type": {
7105
+ "text": "string | undefined"
7106
+ },
7107
+ "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
7108
+ "fieldName": "infoIconAriaLabel",
6984
7109
  "inheritedFrom": {
6985
- "name": "Buttonsimple",
6986
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
7110
+ "name": "FormfieldWrapper",
7111
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6987
7112
  }
7113
+ }
7114
+ ],
7115
+ "mixins": [
7116
+ {
7117
+ "name": "FormInternalsMixin",
7118
+ "module": "/src/utils/mixins/FormInternalsMixin"
6988
7119
  },
6989
7120
  {
6990
- "description": "(React: onFocus) This event is dispatched when the button receives focus.",
6991
- "name": "focus",
6992
- "reactName": "onFocus",
6993
- "inheritedFrom": {
6994
- "name": "Buttonsimple",
6995
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6996
- }
7121
+ "name": "DataAriaLabelMixin",
7122
+ "module": "/src/utils/mixins/DataAriaLabelMixin"
6997
7123
  }
6998
- ]
7124
+ ],
7125
+ "superclass": {
7126
+ "name": "FormfieldWrapper",
7127
+ "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
7128
+ },
7129
+ "tagName": "mdc-checkbox",
7130
+ "jsDoc": "/**\n * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selections in lists.\n *\n * A checkbox component contains an optional label and an optional helper text.\n *\n * To create a group of checkboxes, use the FormFieldGroup component.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-checkbox\n *\n * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.\n *\n * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.\n * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.\n */",
7131
+ "customElement": true
6999
7132
  }
7000
7133
  ],
7001
7134
  "exports": [
@@ -7003,256 +7136,108 @@
7003
7136
  "kind": "js",
7004
7137
  "name": "default",
7005
7138
  "declaration": {
7006
- "name": "Chip",
7007
- "module": "components/chip/chip.component.js"
7139
+ "name": "Checkbox",
7140
+ "module": "components/checkbox/checkbox.component.js"
7008
7141
  }
7009
7142
  }
7010
7143
  ]
7011
7144
  },
7012
7145
  {
7013
7146
  "kind": "javascript-module",
7014
- "path": "components/checkbox/checkbox.component.js",
7147
+ "path": "components/chip/chip.component.js",
7015
7148
  "declarations": [
7016
7149
  {
7017
7150
  "kind": "class",
7018
- "description": "Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selections in lists.\n\nA checkbox component contains an optional label and an optional helper text.\n\nTo create a group of checkboxes, use the FormFieldGroup component.",
7019
- "name": "Checkbox",
7151
+ "description": "mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.\nConsumers can wrap this component around a tooltip to provide additional context.\n\nIt is recommended to keep the label text for the chip component concise and compact.\nFor best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.\n\nThis component is built by extending Buttonsimple.",
7152
+ "name": "Chip",
7020
7153
  "cssProperties": [
7021
7154
  {
7022
- "description": "Allows customization of the background color on hover.",
7023
- "name": "--mdc-checkbox-background-color-hover"
7024
- },
7025
- {
7026
- "description": "Background color for a selected checkbox when hovered.",
7027
- "name": "--mdc-checkbox-checked-background-color-hover"
7028
- },
7029
- {
7030
- "description": "Background color for a selected checkbox when pressed.",
7031
- "name": "--mdc-checkbox-checked-pressed-icon-color"
7155
+ "description": "The color of the chip.",
7156
+ "name": "--mdc-chip-color"
7032
7157
  },
7033
7158
  {
7034
- "description": "Background color for a selected checkbox when pressed.",
7035
- "name": "--mdc-checkbox-pressed-icon-color"
7159
+ "description": "The border color of the chip.",
7160
+ "name": "--mdc-chip-border-color"
7036
7161
  },
7037
7162
  {
7038
- "description": "Background color for a selected checkbox when disabled.",
7039
- "name": "--mdc-checkbox-disabled-checked-icon-color"
7163
+ "description": "The background color of the chip.",
7164
+ "name": "--mdc-chip-background-color"
7040
7165
  }
7041
7166
  ],
7042
7167
  "members": [
7043
7168
  {
7044
7169
  "kind": "field",
7045
- "name": "checked",
7046
- "type": {
7047
- "text": "boolean"
7048
- },
7049
- "default": "false",
7050
- "description": "Determines whether the checkbox is selected or unselected.",
7051
- "attribute": "checked",
7052
- "reflects": true
7053
- },
7054
- {
7055
- "kind": "field",
7056
- "name": "indeterminate",
7170
+ "name": "color",
7057
7171
  "type": {
7058
- "text": "boolean"
7172
+ "text": "ColorType"
7059
7173
  },
7060
- "default": "false",
7061
- "description": "This property is used to determine the parent checkbox in a nested checkbox group.\nIf any one of the children is unselected, then the parent checkbox will be indeterminate.\nIf all children are either selected or unselected, then the parent checkbox will not be indeterminate.",
7062
- "attribute": "indeterminate",
7174
+ "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
7175
+ "default": "default",
7176
+ "attribute": "color",
7063
7177
  "reflects": true
7064
7178
  },
7065
7179
  {
7066
7180
  "kind": "field",
7067
- "name": "autofocus",
7181
+ "name": "label",
7068
7182
  "type": {
7069
- "text": "boolean"
7070
- },
7071
- "default": "false",
7072
- "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
7073
- "attribute": "autofocus",
7074
- "reflects": true
7075
- },
7076
- {
7077
- "kind": "method",
7078
- "name": "setFormValue",
7079
- "privacy": "private",
7080
- "description": "Updates the form value to reflect the current state of the checkbox.\nIf checked, the value is set to either the user-provided value or 'on' if no value is provided.\nIf unchecked, the value is set to null."
7081
- },
7082
- {
7083
- "kind": "method",
7084
- "name": "manageRequired",
7085
- "privacy": "private",
7086
- "description": "Manages the required state of the checkbox.\nIf the checkbox is not checked and the required property is set, then the checkbox is invalid."
7087
- },
7088
- {
7089
- "kind": "method",
7090
- "name": "toggleState",
7091
- "privacy": "private",
7092
- "return": {
7093
- "type": {
7094
- "text": "void"
7095
- }
7183
+ "text": "string"
7096
7184
  },
7097
- "description": "Toggles the state of the checkbox element.\nIf the element is not disabled, then\nthe checked property is toggled and the indeterminate property is set to false."
7185
+ "default": "''",
7186
+ "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
7187
+ "attribute": "label"
7098
7188
  },
7099
7189
  {
7100
7190
  "kind": "method",
7101
- "name": "handleKeyDown",
7191
+ "name": "renderIcon",
7102
7192
  "privacy": "private",
7193
+ "description": "Renders the icon element if available.",
7103
7194
  "return": {
7104
7195
  "type": {
7105
- "text": "void"
7106
- }
7107
- },
7108
- "parameters": [
7109
- {
7110
- "name": "event",
7111
- "type": {
7112
- "text": "KeyboardEvent"
7113
- },
7114
- "description": "The keyboard event."
7115
- }
7116
- ],
7117
- "description": "Handles the keydown event on the checkbox.\nWhen the user presses Enter, the form is submitted."
7118
- },
7119
- {
7120
- "kind": "method",
7121
- "name": "handleChange",
7122
- "privacy": "public",
7123
- "return": {
7124
- "type": {
7125
- "text": "void"
7126
- }
7127
- },
7128
- "parameters": [
7129
- {
7130
- "name": "event",
7131
- "type": {
7132
- "text": "Event"
7133
- }
7196
+ "text": ""
7134
7197
  }
7135
- ],
7136
- "description": "Toggles the state of the checkbox element.\nand dispatch the new change event."
7137
- },
7138
- {
7139
- "kind": "field",
7140
- "name": "renderLabelAndHelperText",
7141
- "privacy": "private"
7142
- },
7143
- {
7144
- "kind": "field",
7145
- "name": "name",
7146
- "type": {
7147
- "text": "string"
7148
- },
7149
- "default": "''",
7150
- "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
7151
- "attribute": "name",
7152
- "reflects": true,
7153
- "inheritedFrom": {
7154
- "name": "FormInternalsMixin",
7155
- "module": "utils/mixins/FormInternalsMixin.js"
7156
7198
  }
7157
7199
  },
7158
7200
  {
7159
7201
  "kind": "field",
7160
- "name": "value",
7202
+ "name": "iconName",
7161
7203
  "type": {
7162
- "text": "string"
7204
+ "text": "IconNames | undefined"
7163
7205
  },
7164
- "default": "''",
7165
- "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
7166
- "attribute": "value",
7167
- "reflects": true,
7206
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
7207
+ "attribute": "icon-name",
7168
7208
  "inheritedFrom": {
7169
- "name": "FormInternalsMixin",
7170
- "module": "utils/mixins/FormInternalsMixin.js"
7209
+ "name": "IconNameMixin",
7210
+ "module": "utils/mixins/IconNameMixin.js"
7171
7211
  }
7172
7212
  },
7173
7213
  {
7174
7214
  "kind": "field",
7175
- "name": "validationMessage",
7215
+ "name": "autofocus",
7176
7216
  "type": {
7177
- "text": "string | undefined"
7217
+ "text": "boolean"
7178
7218
  },
7179
- "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
7180
- "attribute": "validation-message",
7219
+ "default": "false",
7220
+ "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
7221
+ "attribute": "autofocus",
7181
7222
  "reflects": true,
7182
7223
  "inheritedFrom": {
7183
- "name": "FormInternalsMixin",
7184
- "module": "utils/mixins/FormInternalsMixin.js"
7185
- }
7186
- },
7187
- {
7188
- "kind": "field",
7189
- "name": "validity",
7190
- "type": {
7191
- "text": "ValidityState"
7192
- },
7193
- "readonly": true,
7194
- "inheritedFrom": {
7195
- "name": "FormInternalsMixin",
7196
- "module": "utils/mixins/FormInternalsMixin.js"
7197
- }
7198
- },
7199
- {
7200
- "kind": "field",
7201
- "name": "willValidate",
7202
- "readonly": true,
7203
- "inheritedFrom": {
7204
- "name": "FormInternalsMixin",
7205
- "module": "utils/mixins/FormInternalsMixin.js"
7206
- }
7207
- },
7208
- {
7209
- "kind": "method",
7210
- "name": "setValidity",
7211
- "description": "Sets the validity of the input field based on the input field's validity.",
7212
- "return": {
7213
- "type": {
7214
- "text": ""
7215
- }
7216
- },
7217
- "inheritedFrom": {
7218
- "name": "FormInternalsMixin",
7219
- "module": "utils/mixins/FormInternalsMixin.js"
7220
- }
7221
- },
7222
- {
7223
- "kind": "method",
7224
- "name": "checkValidity",
7225
- "return": {
7226
- "type": {
7227
- "text": "boolean"
7228
- }
7229
- },
7230
- "inheritedFrom": {
7231
- "name": "FormInternalsMixin",
7232
- "module": "utils/mixins/FormInternalsMixin.js"
7233
- }
7234
- },
7235
- {
7236
- "kind": "method",
7237
- "name": "reportValidity",
7238
- "inheritedFrom": {
7239
- "name": "FormInternalsMixin",
7240
- "module": "utils/mixins/FormInternalsMixin.js"
7224
+ "name": "Buttonsimple",
7225
+ "module": "components/buttonsimple/buttonsimple.component.js"
7241
7226
  }
7242
7227
  },
7243
7228
  {
7244
7229
  "kind": "field",
7245
- "name": "dataAriaLabel",
7230
+ "name": "tabIndex",
7246
7231
  "type": {
7247
- "text": "string | null"
7232
+ "text": "number"
7248
7233
  },
7249
- "default": "null",
7250
- "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
7251
- "attribute": "data-aria-label",
7234
+ "default": "0",
7235
+ "description": "This property specifies the tab order of the element.",
7236
+ "attribute": "tabIndex",
7252
7237
  "reflects": true,
7253
7238
  "inheritedFrom": {
7254
- "name": "DataAriaLabelMixin",
7255
- "module": "utils/mixins/DataAriaLabelMixin.js"
7239
+ "name": "Buttonsimple",
7240
+ "module": "components/buttonsimple/buttonsimple.component.js"
7256
7241
  }
7257
7242
  },
7258
7243
  {
@@ -7263,297 +7248,302 @@
7263
7248
  },
7264
7249
  "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
7265
7250
  "default": "undefined",
7266
- "attribute": "disabled",
7267
- "reflects": true,
7268
- "inheritedFrom": {
7269
- "name": "DisabledMixin",
7270
- "module": "utils/mixins/DisabledMixin.js"
7271
- }
7272
- },
7273
- {
7274
- "kind": "field",
7275
- "name": "label",
7276
- "type": {
7277
- "text": "string | undefined"
7278
- },
7279
- "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
7280
- "attribute": "label",
7251
+ "attribute": "disabled",
7281
7252
  "reflects": true,
7282
7253
  "inheritedFrom": {
7283
- "name": "FormfieldWrapper",
7284
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
7254
+ "name": "Buttonsimple",
7255
+ "module": "components/buttonsimple/buttonsimple.component.js"
7285
7256
  }
7286
7257
  },
7287
7258
  {
7288
7259
  "kind": "field",
7289
- "name": "required",
7260
+ "name": "active",
7290
7261
  "type": {
7291
- "text": "boolean"
7262
+ "text": "boolean | undefined"
7292
7263
  },
7293
- "default": "false",
7294
- "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
7295
- "attribute": "required",
7264
+ "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.",
7265
+ "default": "undefined",
7266
+ "attribute": "active",
7296
7267
  "reflects": true,
7297
7268
  "inheritedFrom": {
7298
- "name": "FormfieldWrapper",
7299
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
7269
+ "name": "Buttonsimple",
7270
+ "module": "components/buttonsimple/buttonsimple.component.js"
7300
7271
  }
7301
7272
  },
7302
7273
  {
7303
7274
  "kind": "field",
7304
- "name": "id",
7275
+ "name": "softDisabled",
7305
7276
  "type": {
7306
- "text": "string"
7277
+ "text": "boolean | undefined"
7307
7278
  },
7308
- "default": "''",
7309
- "description": "The unique id of the input field. It is used to link the input field with the label.",
7310
- "attribute": "id",
7279
+ "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.",
7280
+ "default": "undefined",
7281
+ "attribute": "soft-disabled",
7282
+ "reflects": true,
7311
7283
  "inheritedFrom": {
7312
- "name": "FormfieldWrapper",
7313
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
7284
+ "name": "Buttonsimple",
7285
+ "module": "components/buttonsimple/buttonsimple.component.js"
7314
7286
  }
7315
7287
  },
7316
7288
  {
7317
7289
  "kind": "field",
7318
- "name": "helpTextType",
7290
+ "name": "size",
7319
7291
  "type": {
7320
- "text": "ValidationType"
7292
+ "text": "ButtonSize"
7321
7293
  },
7322
- "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
7323
- "attribute": "help-text-type",
7294
+ "description": "Simplebutton size is a super set of all the sizes supported by children components.",
7295
+ "default": "32",
7296
+ "attribute": "size",
7324
7297
  "reflects": true,
7325
7298
  "inheritedFrom": {
7326
- "name": "FormfieldWrapper",
7327
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
7299
+ "name": "Buttonsimple",
7300
+ "module": "components/buttonsimple/buttonsimple.component.js"
7328
7301
  }
7329
7302
  },
7330
7303
  {
7331
7304
  "kind": "field",
7332
- "name": "helpText",
7333
- "type": {
7334
- "text": "string | undefined"
7335
- },
7336
- "description": "The help text that is displayed below the input field.",
7337
- "attribute": "help-text",
7305
+ "name": "role",
7306
+ "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.",
7307
+ "default": "button",
7308
+ "attribute": "role",
7338
7309
  "reflects": true,
7339
7310
  "inheritedFrom": {
7340
- "name": "FormfieldWrapper",
7341
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
7311
+ "name": "Buttonsimple",
7312
+ "module": "components/buttonsimple/buttonsimple.component.js"
7342
7313
  }
7343
7314
  },
7344
7315
  {
7345
7316
  "kind": "field",
7346
- "name": "toggletipText",
7317
+ "name": "ariaStateKey",
7347
7318
  "type": {
7348
7319
  "text": "string | undefined"
7349
7320
  },
7350
- "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
7351
- "attribute": "toggletip-text",
7321
+ "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`",
7322
+ "default": "'aria-pressed' (when)",
7323
+ "attribute": "ariaStateKey",
7352
7324
  "reflects": true,
7353
7325
  "inheritedFrom": {
7354
- "name": "FormfieldWrapper",
7355
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
7326
+ "name": "Buttonsimple",
7327
+ "module": "components/buttonsimple/buttonsimple.component.js"
7356
7328
  }
7357
7329
  },
7358
7330
  {
7359
7331
  "kind": "field",
7360
- "name": "toggletipPlacement",
7332
+ "name": "type",
7361
7333
  "type": {
7362
- "text": "PopoverPlacement"
7334
+ "text": "ButtonType"
7363
7335
  },
7364
- "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
7365
- "default": "'top'",
7366
- "attribute": "toggletip-placement",
7336
+ "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.",
7337
+ "default": "button",
7338
+ "attribute": "type",
7367
7339
  "reflects": true,
7368
7340
  "inheritedFrom": {
7369
- "name": "FormfieldWrapper",
7370
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
7341
+ "name": "Buttonsimple",
7342
+ "module": "components/buttonsimple/buttonsimple.component.js"
7371
7343
  }
7372
7344
  },
7373
7345
  {
7374
- "kind": "field",
7375
- "name": "infoIconAriaLabel",
7376
- "type": {
7377
- "text": "string | undefined"
7378
- },
7379
- "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
7380
- "attribute": "info-icon-aria-label",
7381
- "reflects": true,
7346
+ "kind": "method",
7347
+ "name": "executeAction",
7348
+ "privacy": "protected",
7382
7349
  "inheritedFrom": {
7383
- "name": "FormfieldWrapper",
7384
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
7350
+ "name": "Buttonsimple",
7351
+ "module": "components/buttonsimple/buttonsimple.component.js"
7385
7352
  }
7386
7353
  },
7387
7354
  {
7388
7355
  "kind": "method",
7389
- "name": "renderLabelElement",
7356
+ "name": "setActive",
7390
7357
  "privacy": "protected",
7391
- "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
7392
- "return": {
7393
- "type": {
7394
- "text": ""
7358
+ "parameters": [
7359
+ {
7360
+ "name": "element",
7361
+ "type": {
7362
+ "text": "HTMLElement"
7363
+ },
7364
+ "description": "The button element"
7365
+ },
7366
+ {
7367
+ "name": "active",
7368
+ "optional": true,
7369
+ "type": {
7370
+ "text": "boolean"
7371
+ },
7372
+ "description": "The active state of the element"
7395
7373
  }
7396
- },
7374
+ ],
7375
+ "description": "Sets the ariaStateKey attributes based on the active state of the button.",
7397
7376
  "inheritedFrom": {
7398
- "name": "FormfieldWrapper",
7399
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
7377
+ "name": "Buttonsimple",
7378
+ "module": "components/buttonsimple/buttonsimple.component.js"
7400
7379
  }
7401
7380
  },
7402
7381
  {
7403
7382
  "kind": "method",
7404
- "name": "renderHelpTextIcon",
7405
- "privacy": "protected",
7406
- "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
7407
- "return": {
7408
- "type": {
7409
- "text": ""
7383
+ "name": "setSoftDisabled",
7384
+ "privacy": "private",
7385
+ "parameters": [
7386
+ {
7387
+ "name": "element",
7388
+ "type": {
7389
+ "text": "HTMLElement"
7390
+ },
7391
+ "description": "The button element."
7392
+ },
7393
+ {
7394
+ "name": "softDisabled",
7395
+ "optional": true,
7396
+ "type": {
7397
+ "text": "boolean"
7398
+ },
7399
+ "description": "The soft-disabled state."
7410
7400
  }
7411
- },
7401
+ ],
7402
+ "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.",
7412
7403
  "inheritedFrom": {
7413
- "name": "FormfieldWrapper",
7414
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
7404
+ "name": "Buttonsimple",
7405
+ "module": "components/buttonsimple/buttonsimple.component.js"
7415
7406
  }
7416
7407
  },
7417
7408
  {
7418
7409
  "kind": "method",
7419
- "name": "renderHelpText",
7420
- "privacy": "protected",
7421
- "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
7422
- "return": {
7423
- "type": {
7424
- "text": ""
7410
+ "name": "setDisabled",
7411
+ "privacy": "private",
7412
+ "parameters": [
7413
+ {
7414
+ "name": "element",
7415
+ "type": {
7416
+ "text": "HTMLElement"
7417
+ },
7418
+ "description": "The button element."
7419
+ },
7420
+ {
7421
+ "name": "disabled",
7422
+ "type": {
7423
+ "text": "boolean"
7424
+ },
7425
+ "description": "The disabled state."
7425
7426
  }
7426
- },
7427
+ ],
7428
+ "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.",
7427
7429
  "inheritedFrom": {
7428
- "name": "FormfieldWrapper",
7429
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
7430
+ "name": "Buttonsimple",
7431
+ "module": "components/buttonsimple/buttonsimple.component.js"
7430
7432
  }
7431
7433
  },
7432
7434
  {
7433
7435
  "kind": "method",
7434
- "name": "renderLabel",
7435
- "privacy": "protected",
7436
- "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
7437
- "return": {
7438
- "type": {
7439
- "text": ""
7440
- }
7441
- },
7436
+ "name": "triggerClickEvent",
7437
+ "privacy": "private",
7442
7438
  "inheritedFrom": {
7443
- "name": "FormfieldWrapper",
7444
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
7439
+ "name": "Buttonsimple",
7440
+ "module": "components/buttonsimple/buttonsimple.component.js"
7445
7441
  }
7446
7442
  },
7447
7443
  {
7448
7444
  "kind": "method",
7449
- "name": "renderHelperText",
7450
- "privacy": "protected",
7451
- "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
7452
- "return": {
7453
- "type": {
7454
- "text": ""
7445
+ "name": "handleBlur",
7446
+ "privacy": "private",
7447
+ "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
7448
+ "inheritedFrom": {
7449
+ "name": "Buttonsimple",
7450
+ "module": "components/buttonsimple/buttonsimple.component.js"
7451
+ }
7452
+ },
7453
+ {
7454
+ "kind": "method",
7455
+ "name": "handleKeyDown",
7456
+ "privacy": "private",
7457
+ "parameters": [
7458
+ {
7459
+ "name": "event",
7460
+ "type": {
7461
+ "text": "KeyboardEvent"
7462
+ },
7463
+ "description": "The keyboard event."
7455
7464
  }
7456
- },
7465
+ ],
7466
+ "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.",
7457
7467
  "inheritedFrom": {
7458
- "name": "FormfieldWrapper",
7459
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
7468
+ "name": "Buttonsimple",
7469
+ "module": "components/buttonsimple/buttonsimple.component.js"
7460
7470
  }
7461
- }
7462
- ],
7463
- "events": [
7471
+ },
7464
7472
  {
7465
- "type": {
7466
- "text": "EventConstructor"
7473
+ "kind": "method",
7474
+ "name": "handleKeyUp",
7475
+ "privacy": "private",
7476
+ "parameters": [
7477
+ {
7478
+ "name": "event",
7479
+ "type": {
7480
+ "text": "KeyboardEvent"
7481
+ },
7482
+ "description": "The keyboard event."
7483
+ }
7484
+ ],
7485
+ "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.",
7486
+ "inheritedFrom": {
7487
+ "name": "Buttonsimple",
7488
+ "module": "components/buttonsimple/buttonsimple.component.js"
7467
7489
  }
7468
- },
7469
- {
7470
- "description": "(React: onChange) Event that gets dispatched when the checkbox state changes.",
7471
- "name": "change",
7472
- "reactName": "onChange"
7473
- },
7474
- {
7475
- "description": "(React: onFocus) Event that gets dispatched when the checkbox receives focus.",
7476
- "name": "focus",
7477
- "reactName": "onFocus"
7478
7490
  }
7479
7491
  ],
7480
7492
  "attributes": [
7481
7493
  {
7482
- "name": "checked",
7483
- "type": {
7484
- "text": "boolean"
7485
- },
7486
- "default": "false",
7487
- "description": "Determines whether the checkbox is selected or unselected.",
7488
- "fieldName": "checked"
7489
- },
7490
- {
7491
- "name": "indeterminate",
7492
- "type": {
7493
- "text": "boolean"
7494
- },
7495
- "default": "false",
7496
- "description": "This property is used to determine the parent checkbox in a nested checkbox group.\nIf any one of the children is unselected, then the parent checkbox will be indeterminate.\nIf all children are either selected or unselected, then the parent checkbox will not be indeterminate.",
7497
- "fieldName": "indeterminate"
7498
- },
7499
- {
7500
- "name": "autofocus",
7494
+ "name": "color",
7501
7495
  "type": {
7502
- "text": "boolean"
7496
+ "text": "ColorType"
7503
7497
  },
7504
- "default": "false",
7505
- "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
7506
- "fieldName": "autofocus"
7498
+ "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
7499
+ "default": "default",
7500
+ "fieldName": "color"
7507
7501
  },
7508
7502
  {
7509
- "name": "name",
7503
+ "name": "label",
7510
7504
  "type": {
7511
7505
  "text": "string"
7512
7506
  },
7513
7507
  "default": "''",
7514
- "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
7515
- "fieldName": "name",
7516
- "inheritedFrom": {
7517
- "name": "FormInternalsMixin",
7518
- "module": "src/utils/mixins/FormInternalsMixin.ts"
7519
- }
7508
+ "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
7509
+ "fieldName": "label"
7520
7510
  },
7521
7511
  {
7522
- "name": "value",
7512
+ "name": "icon-name",
7523
7513
  "type": {
7524
- "text": "string"
7514
+ "text": "IconNames | undefined"
7525
7515
  },
7526
- "default": "''",
7527
- "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
7528
- "fieldName": "value",
7516
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
7517
+ "fieldName": "iconName",
7529
7518
  "inheritedFrom": {
7530
- "name": "FormInternalsMixin",
7531
- "module": "src/utils/mixins/FormInternalsMixin.ts"
7519
+ "name": "IconNameMixin",
7520
+ "module": "src/utils/mixins/IconNameMixin.ts"
7532
7521
  }
7533
7522
  },
7534
7523
  {
7535
- "name": "validation-message",
7524
+ "name": "autofocus",
7536
7525
  "type": {
7537
- "text": "string | undefined"
7526
+ "text": "boolean"
7538
7527
  },
7539
- "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
7540
- "fieldName": "validationMessage",
7528
+ "default": "false",
7529
+ "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
7530
+ "fieldName": "autofocus",
7541
7531
  "inheritedFrom": {
7542
- "name": "FormInternalsMixin",
7543
- "module": "src/utils/mixins/FormInternalsMixin.ts"
7532
+ "name": "Buttonsimple",
7533
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
7544
7534
  }
7545
7535
  },
7546
7536
  {
7547
- "name": "data-aria-label",
7537
+ "name": "tabIndex",
7548
7538
  "type": {
7549
- "text": "string | null"
7539
+ "text": "number"
7550
7540
  },
7551
- "default": "null",
7552
- "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
7553
- "fieldName": "dataAriaLabel",
7541
+ "default": "0",
7542
+ "description": "This property specifies the tab order of the element.",
7543
+ "fieldName": "tabIndex",
7554
7544
  "inheritedFrom": {
7555
- "name": "DataAriaLabelMixin",
7556
- "module": "src/utils/mixins/DataAriaLabelMixin.ts"
7545
+ "name": "Buttonsimple",
7546
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
7557
7547
  }
7558
7548
  },
7559
7549
  {
@@ -7565,127 +7555,137 @@
7565
7555
  "default": "undefined",
7566
7556
  "fieldName": "disabled",
7567
7557
  "inheritedFrom": {
7568
- "name": "DisabledMixin",
7569
- "module": "src/utils/mixins/DisabledMixin.ts"
7558
+ "name": "Buttonsimple",
7559
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
7570
7560
  }
7571
7561
  },
7572
7562
  {
7573
- "name": "label",
7563
+ "name": "active",
7574
7564
  "type": {
7575
- "text": "string | undefined"
7565
+ "text": "boolean | undefined"
7576
7566
  },
7577
- "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
7578
- "fieldName": "label",
7567
+ "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.",
7568
+ "default": "undefined",
7569
+ "fieldName": "active",
7579
7570
  "inheritedFrom": {
7580
- "name": "FormfieldWrapper",
7581
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
7571
+ "name": "Buttonsimple",
7572
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
7582
7573
  }
7583
7574
  },
7584
7575
  {
7585
- "name": "required",
7576
+ "name": "soft-disabled",
7586
7577
  "type": {
7587
- "text": "boolean"
7578
+ "text": "boolean | undefined"
7588
7579
  },
7589
- "default": "false",
7590
- "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
7591
- "fieldName": "required",
7580
+ "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.",
7581
+ "default": "undefined",
7582
+ "fieldName": "softDisabled",
7592
7583
  "inheritedFrom": {
7593
- "name": "FormfieldWrapper",
7594
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
7584
+ "name": "Buttonsimple",
7585
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
7595
7586
  }
7596
7587
  },
7597
7588
  {
7598
- "name": "id",
7589
+ "name": "size",
7599
7590
  "type": {
7600
- "text": "string"
7591
+ "text": "ButtonSize"
7601
7592
  },
7602
- "default": "''",
7603
- "description": "The unique id of the input field. It is used to link the input field with the label.",
7604
- "fieldName": "id",
7593
+ "description": "Simplebutton size is a super set of all the sizes supported by children components.",
7594
+ "default": "32",
7595
+ "fieldName": "size",
7605
7596
  "inheritedFrom": {
7606
- "name": "FormfieldWrapper",
7607
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
7597
+ "name": "Buttonsimple",
7598
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
7608
7599
  }
7609
7600
  },
7610
7601
  {
7611
- "name": "help-text-type",
7612
- "type": {
7613
- "text": "ValidationType"
7614
- },
7615
- "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
7616
- "fieldName": "helpTextType",
7602
+ "name": "role",
7603
+ "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.",
7604
+ "default": "button",
7605
+ "fieldName": "role",
7617
7606
  "inheritedFrom": {
7618
- "name": "FormfieldWrapper",
7619
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
7607
+ "name": "Buttonsimple",
7608
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
7620
7609
  }
7621
7610
  },
7622
7611
  {
7623
- "name": "help-text",
7612
+ "name": "ariaStateKey",
7624
7613
  "type": {
7625
7614
  "text": "string | undefined"
7626
7615
  },
7627
- "description": "The help text that is displayed below the input field.",
7628
- "fieldName": "helpText",
7616
+ "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`",
7617
+ "default": "'aria-pressed' (when)",
7618
+ "fieldName": "ariaStateKey",
7629
7619
  "inheritedFrom": {
7630
- "name": "FormfieldWrapper",
7631
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
7620
+ "name": "Buttonsimple",
7621
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
7632
7622
  }
7633
7623
  },
7634
7624
  {
7635
- "name": "toggletip-text",
7625
+ "name": "type",
7636
7626
  "type": {
7637
- "text": "string | undefined"
7627
+ "text": "ButtonType"
7638
7628
  },
7639
- "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
7640
- "fieldName": "toggletipText",
7629
+ "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.",
7630
+ "default": "button",
7631
+ "fieldName": "type",
7641
7632
  "inheritedFrom": {
7642
- "name": "FormfieldWrapper",
7643
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
7633
+ "name": "Buttonsimple",
7634
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
7644
7635
  }
7645
- },
7636
+ }
7637
+ ],
7638
+ "mixins": [
7646
7639
  {
7647
- "name": "toggletip-placement",
7648
- "type": {
7649
- "text": "PopoverPlacement"
7650
- },
7651
- "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
7652
- "default": "'top'",
7653
- "fieldName": "toggletipPlacement",
7640
+ "name": "IconNameMixin",
7641
+ "module": "/src/utils/mixins/IconNameMixin"
7642
+ }
7643
+ ],
7644
+ "superclass": {
7645
+ "name": "Buttonsimple",
7646
+ "module": "/src/components/buttonsimple/buttonsimple.component"
7647
+ },
7648
+ "tagName": "mdc-chip",
7649
+ "jsDoc": "/**\n * mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.\n * Consumers can wrap this component around a tooltip to provide additional context.\n *\n * It is recommended to keep the label text for the chip component concise and compact.\n * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>,\n * including empty spaces to split words.\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-chip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the chip.\n * @cssproperty --mdc-chip-border-color - The border color of the chip.\n * @cssproperty --mdc-chip-background-color - The background color of the chip.\n *\n */",
7650
+ "customElement": true,
7651
+ "events": [
7652
+ {
7653
+ "description": "(React: onClick) This event is dispatched when the button is clicked.",
7654
+ "name": "click",
7655
+ "reactName": "onClick",
7654
7656
  "inheritedFrom": {
7655
- "name": "FormfieldWrapper",
7656
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
7657
+ "name": "Buttonsimple",
7658
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
7657
7659
  }
7658
7660
  },
7659
7661
  {
7660
- "name": "info-icon-aria-label",
7661
- "type": {
7662
- "text": "string | undefined"
7663
- },
7664
- "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
7665
- "fieldName": "infoIconAriaLabel",
7662
+ "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
7663
+ "name": "keydown",
7664
+ "reactName": "onKeyDown",
7666
7665
  "inheritedFrom": {
7667
- "name": "FormfieldWrapper",
7668
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
7666
+ "name": "Buttonsimple",
7667
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
7669
7668
  }
7670
- }
7671
- ],
7672
- "mixins": [
7669
+ },
7673
7670
  {
7674
- "name": "FormInternalsMixin",
7675
- "module": "/src/utils/mixins/FormInternalsMixin"
7671
+ "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
7672
+ "name": "keyup",
7673
+ "reactName": "onKeyUp",
7674
+ "inheritedFrom": {
7675
+ "name": "Buttonsimple",
7676
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
7677
+ }
7676
7678
  },
7677
7679
  {
7678
- "name": "DataAriaLabelMixin",
7679
- "module": "/src/utils/mixins/DataAriaLabelMixin"
7680
+ "description": "(React: onFocus) This event is dispatched when the button receives focus.",
7681
+ "name": "focus",
7682
+ "reactName": "onFocus",
7683
+ "inheritedFrom": {
7684
+ "name": "Buttonsimple",
7685
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
7686
+ }
7680
7687
  }
7681
- ],
7682
- "superclass": {
7683
- "name": "FormfieldWrapper",
7684
- "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
7685
- },
7686
- "tagName": "mdc-checkbox",
7687
- "jsDoc": "/**\n * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selections in lists.\n *\n * A checkbox component contains an optional label and an optional helper text.\n *\n * To create a group of checkboxes, use the FormFieldGroup component.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-checkbox\n *\n * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.\n *\n * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.\n * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.\n */",
7688
- "customElement": true
7688
+ ]
7689
7689
  }
7690
7690
  ],
7691
7691
  "exports": [
@@ -7693,8 +7693,8 @@
7693
7693
  "kind": "js",
7694
7694
  "name": "default",
7695
7695
  "declaration": {
7696
- "name": "Checkbox",
7697
- "module": "components/checkbox/checkbox.component.js"
7696
+ "name": "Chip",
7697
+ "module": "components/chip/chip.component.js"
7698
7698
  }
7699
7699
  }
7700
7700
  ]
@@ -9370,7 +9370,7 @@
9370
9370
  "declarations": [
9371
9371
  {
9372
9372
  "kind": "class",
9373
- "description": "Dialog component is a modal dialog that can be used to display information or prompt the user for input.\nIt can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\nThe dialog is available in three sizes: small, medium, and large. It may also receive custom styling/sizing.\nThe dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n\nThe dialog can be controlled solely through the `visible` property, no trigger element is required.\nIf a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\nremember the previously focused element before the dialog was opened.\n\nDialog component have 2 variants: default and promotional.\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n- Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n\n**Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n- Use `?visible=true/false` as an attribute instead of `visible=true/false`\n- Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions",
9373
+ "description": "Dialog component is a modal dialog that can be used to display information or prompt the user for input.\nIt can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\nThe dialog is available in three sizes: small, medium, and large. It may also receive custom styling/sizing.\nThe dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n\nThe dialog can be controlled solely through the `visible` property, no trigger element is required.\nIf a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\nremember the previously focused element before the dialog was opened.\n\nThe dialog is a controlled component, meaning it does not have its own state management for visibility.\nUse the `visible` property to control the visibility of the dialog.\nUse the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\nor Escape is pressed).\n\nDialog component have 2 variants: default and promotional.\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n- Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n\n**Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n- Use `?visible=true/false` as an attribute instead of `visible=true/false`\n- Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions",
9374
9374
  "name": "Dialog",
9375
9375
  "cssProperties": [
9376
9376
  {
@@ -9453,7 +9453,7 @@
9453
9453
  "type": {
9454
9454
  "text": "boolean"
9455
9455
  },
9456
- "description": "The visibility of the dialog",
9456
+ "description": "The visibility of the dialog\n\nDialog is a controlled component, visible is the only property that controls the visibility of the dialog.",
9457
9457
  "default": "false",
9458
9458
  "attribute": "visible",
9459
9459
  "reflects": true
@@ -9621,6 +9621,12 @@
9621
9621
  "module": "utils/mixins/FocusTrapMixin.js"
9622
9622
  }
9623
9623
  },
9624
+ {
9625
+ "kind": "method",
9626
+ "name": "closeDialog",
9627
+ "privacy": "private",
9628
+ "description": "Fired when Close Button is clicked or Escape key is pressed.\nThis method dispatches the close event. Setting visible to false\nhas to be done by the consumer of the component."
9629
+ },
9624
9630
  {
9625
9631
  "kind": "method",
9626
9632
  "name": "isOpenUpdated",
@@ -10179,6 +10185,11 @@
10179
10185
  "description": "(React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)",
10180
10186
  "name": "destroyed",
10181
10187
  "reactName": "onDestroyed"
10188
+ },
10189
+ {
10190
+ "description": "(React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed (this does not hide the dialog)",
10191
+ "name": "close",
10192
+ "reactName": "onClose"
10182
10193
  }
10183
10194
  ],
10184
10195
  "attributes": [
@@ -10205,7 +10216,7 @@
10205
10216
  "type": {
10206
10217
  "text": "boolean"
10207
10218
  },
10208
- "description": "The visibility of the dialog",
10219
+ "description": "The visibility of the dialog\n\nDialog is a controlled component, visible is the only property that controls the visibility of the dialog.",
10209
10220
  "default": "false",
10210
10221
  "fieldName": "visible"
10211
10222
  },
@@ -10364,7 +10375,7 @@
10364
10375
  "module": "/src/models"
10365
10376
  },
10366
10377
  "tagName": "mdc-dialog",
10367
- "jsDoc": "/**\n * Dialog component is a modal dialog that can be used to display information or prompt the user for input.\n * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\n * The dialog is available in three sizes: small, medium, and large. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * The dialog can be controlled solely through the `visible` property, no trigger element is required.\n * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\n * remember the previously focused element before the dialog was opened.\n *\n * Dialog component have 2 variants: default and promotional.\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n * - Use `?visible=true/false` as an attribute instead of `visible=true/false`\n * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions\n *\n * @dependency mdc-button\n * @dependency mdc-text\n *\n * @tagname mdc-dialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer - This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred\n */",
10378
+ "jsDoc": "/**\n * Dialog component is a modal dialog that can be used to display information or prompt the user for input.\n * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\n * The dialog is available in three sizes: small, medium, and large. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * The dialog can be controlled solely through the `visible` property, no trigger element is required.\n * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\n * remember the previously focused element before the dialog was opened.\n *\n * The dialog is a controlled component, meaning it does not have its own state management for visibility.\n * Use the `visible` property to control the visibility of the dialog.\n * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\n * or Escape is pressed).\n *\n * Dialog component have 2 variants: default and promotional.\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n * - Use `?visible=true/false` as an attribute instead of `visible=true/false`\n * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions\n *\n * @dependency mdc-button\n * @dependency mdc-text\n *\n * @tagname mdc-dialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed\n * (this does not hide the dialog)\n *\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer - This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred\n */",
10368
10379
  "customElement": true
10369
10380
  }
10370
10381
  ],