@momentum-design/components 0.116.1 → 0.117.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/dist/browser/index.js +315 -307
  2. package/dist/browser/index.js.map +4 -4
  3. package/dist/components/icon/icon.utils.d.ts +1 -1
  4. package/dist/components/icon/icon.utils.js +2 -2
  5. package/dist/components/iconprovider/iconprovider.component.d.ts +3 -1
  6. package/dist/components/iconprovider/iconprovider.component.js +1 -1
  7. package/dist/components/iconprovider/iconprovider.constants.d.ts +0 -1
  8. package/dist/components/iconprovider/iconprovider.constants.js +0 -1
  9. package/dist/components/illustration/illustration.component.d.ts +91 -0
  10. package/dist/components/illustration/illustration.component.js +220 -0
  11. package/dist/components/illustration/illustration.constants.d.ts +5 -0
  12. package/dist/components/illustration/illustration.constants.js +6 -0
  13. package/dist/components/illustration/illustration.styles.d.ts +2 -0
  14. package/dist/components/illustration/illustration.styles.js +15 -0
  15. package/dist/components/illustration/illustration.types.d.ts +2 -0
  16. package/dist/components/illustration/illustration.types.js +1 -0
  17. package/dist/components/illustration/illustration.utils.d.ts +32 -0
  18. package/dist/components/illustration/illustration.utils.js +79 -0
  19. package/dist/components/illustration/index.d.ts +7 -0
  20. package/dist/components/illustration/index.js +4 -0
  21. package/dist/components/illustrationprovider/illustrationprovider.component.d.ts +97 -0
  22. package/dist/components/illustrationprovider/illustrationprovider.component.js +123 -0
  23. package/dist/components/illustrationprovider/illustrationprovider.constants.d.ts +7 -0
  24. package/dist/components/illustrationprovider/illustrationprovider.constants.js +8 -0
  25. package/dist/components/illustrationprovider/illustrationprovider.context.d.ts +12 -0
  26. package/dist/components/illustrationprovider/illustrationprovider.context.js +7 -0
  27. package/dist/components/illustrationprovider/illustrationprovider.types.d.ts +3 -0
  28. package/dist/components/illustrationprovider/illustrationprovider.types.js +1 -0
  29. package/dist/components/illustrationprovider/index.d.ts +7 -0
  30. package/dist/components/illustrationprovider/index.js +4 -0
  31. package/dist/custom-elements.json +2076 -1742
  32. package/dist/index.d.ts +5 -3
  33. package/dist/index.js +5 -3
  34. package/dist/react/iconprovider/index.d.ts +1 -1
  35. package/dist/react/iconprovider/index.js +1 -1
  36. package/dist/react/illustration/index.d.ts +40 -0
  37. package/dist/react/illustration/index.js +49 -0
  38. package/dist/react/illustrationprovider/index.d.ts +31 -0
  39. package/dist/react/illustrationprovider/index.js +40 -0
  40. package/dist/react/index.d.ts +4 -2
  41. package/dist/react/index.js +4 -2
  42. package/dist/utils/{icon-cache → assets-cache}/index.d.ts +2 -2
  43. package/dist/utils/{icon-cache → assets-cache}/index.js +3 -3
  44. package/package.json +1 -1
package/dist/custom-elements.json CHANGED
@@ -2,481 +2,6 @@
2
2
  "schemaVersion": "1.0.0",
3
3
  "readme": "",
4
4
  "modules": [
5
- {
6
- "kind": "javascript-module",
7
- "path": "components/accordion/accordion.component.js",
8
- "declarations": [
9
- {
10
- "kind": "class",
11
- "description": "An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n- Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n- Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.",
12
- "name": "Accordion",
13
- "cssProperties": [
14
- {
15
- "description": "The border color of the accordion.",
16
- "name": "--mdc-accordionbutton-border-color",
17
- "inheritedFrom": {
18
- "name": "AccordionButton",
19
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
20
- }
21
- },
22
- {
23
- "description": "The hover color of the accordion.",
24
- "name": "--mdc-accordionbutton-hover-color",
25
- "inheritedFrom": {
26
- "name": "AccordionButton",
27
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
28
- }
29
- },
30
- {
31
- "description": "The active color of the accordion.",
32
- "name": "--mdc-accordionbutton-active-color",
33
- "inheritedFrom": {
34
- "name": "AccordionButton",
35
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
36
- }
37
- },
38
- {
39
- "description": "The disabled color of the accordion.",
40
- "name": "--mdc-accordionbutton-disabled-color",
41
- "inheritedFrom": {
42
- "name": "AccordionButton",
43
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
44
- }
45
- }
46
- ],
47
- "cssParts": [
48
- {
49
- "description": "The header section of the accordion.",
50
- "name": "header-section",
51
- "inheritedFrom": {
52
- "name": "AccordionButton",
53
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
54
- }
55
- },
56
- {
57
- "description": "The leading header of the accordion.",
58
- "name": "leading-header",
59
- "inheritedFrom": {
60
- "name": "AccordionButton",
61
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
62
- }
63
- },
64
- {
65
- "description": "The trailing header of the accordion.",
66
- "name": "trailing-header",
67
- "inheritedFrom": {
68
- "name": "AccordionButton",
69
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
70
- }
71
- },
72
- {
73
- "description": "The trailing header button of the accordion.",
74
- "name": "trailing-header__button"
75
- },
76
- {
77
- "description": "The body section of the accordion.",
78
- "name": "body-section",
79
- "inheritedFrom": {
80
- "name": "AccordionButton",
81
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
82
- }
83
- },
84
- {
85
- "description": "The header button section of the accordion button.",
86
- "name": "header-button-section",
87
- "inheritedFrom": {
88
- "name": "AccordionButton",
89
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
90
- }
91
- },
92
- {
93
- "description": "The trailing header icon of the accordion button.",
94
- "name": "trailing-header__icon",
95
- "inheritedFrom": {
96
- "name": "AccordionButton",
97
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
98
- }
99
- }
100
- ],
101
- "slots": [
102
- {
103
- "description": "The leading controls slot of the accordion on the header section.",
104
- "name": "leading-controls"
105
- },
106
- {
107
- "description": "The trailing controls slot of the accordion on the header section.",
108
- "name": "trailing-controls"
109
- },
110
- {
111
- "description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
112
- "name": "default",
113
- "inheritedFrom": {
114
- "name": "AccordionButton",
115
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
116
- }
117
- }
118
- ],
119
- "members": [
120
- {
121
- "kind": "method",
122
- "name": "renderHeader",
123
- "privacy": "protected",
124
- "return": {
125
- "type": {
126
- "text": ""
127
- }
128
- },
129
- "description": "Renders the header section of the accordion.\nThis includes the leading icon, text and controls, and the trailing controls.\nThe trailing controls include the expand/collapse button.\nThe button is disabled if the accordion is disabled.\nThe button is also given the aria-controls attribute set to the id of the body section.\nThe button is also given the aria-expanded attribute set to the expanded state of the accordion.\nThe prefix icon of the button is set to the expanded state of the accordion.",
130
- "inheritedFrom": {
131
- "name": "AccordionButton",
132
- "module": "components/accordionbutton/accordionbutton.component.js"
133
- }
134
- },
135
- {
136
- "kind": "field",
137
- "name": "disabled",
138
- "type": {
139
- "text": "boolean | undefined"
140
- },
141
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
142
- "default": "undefined",
143
- "attribute": "disabled",
144
- "reflects": true,
145
- "inheritedFrom": {
146
- "name": "DisabledMixin",
147
- "module": "utils/mixins/DisabledMixin.js"
148
- }
149
- },
150
- {
151
- "kind": "field",
152
- "name": "size",
153
- "type": {
154
- "text": "Size"
155
- },
156
- "description": "The size of the accordion item.",
157
- "default": "'small'",
158
- "attribute": "size",
159
- "reflects": true,
160
- "inheritedFrom": {
161
- "name": "AccordionButton",
162
- "module": "components/accordionbutton/accordionbutton.component.js"
163
- }
164
- },
165
- {
166
- "kind": "field",
167
- "name": "variant",
168
- "type": {
169
- "text": "Variant"
170
- },
171
- "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
172
- "default": "'default'",
173
- "attribute": "variant",
174
- "reflects": true,
175
- "inheritedFrom": {
176
- "name": "AccordionButton",
177
- "module": "components/accordionbutton/accordionbutton.component.js"
178
- }
179
- },
180
- {
181
- "kind": "field",
182
- "name": "dataAriaLevel",
183
- "type": {
184
- "text": "number"
185
- },
186
- "description": "The aria level of the accordion component.",
187
- "default": "3",
188
- "attribute": "data-aria-level",
189
- "reflects": true,
190
- "inheritedFrom": {
191
- "name": "AccordionButton",
192
- "module": "components/accordionbutton/accordionbutton.component.js"
193
- }
194
- },
195
- {
196
- "kind": "field",
197
- "name": "expanded",
198
- "type": {
199
- "text": "boolean"
200
- },
201
- "description": "The visibility of the accordion button.",
202
- "default": "false",
203
- "attribute": "expanded",
204
- "reflects": true,
205
- "inheritedFrom": {
206
- "name": "AccordionButton",
207
- "module": "components/accordionbutton/accordionbutton.component.js"
208
- }
209
- },
210
- {
211
- "kind": "field",
212
- "name": "headerText",
213
- "type": {
214
- "text": "string | undefined"
215
- },
216
- "description": "The header text of the accordion item.",
217
- "attribute": "header-text",
218
- "reflects": true,
219
- "inheritedFrom": {
220
- "name": "AccordionButton",
221
- "module": "components/accordionbutton/accordionbutton.component.js"
222
- }
223
- },
224
- {
225
- "kind": "field",
226
- "name": "prefixIcon",
227
- "type": {
228
- "text": "IconNames | undefined"
229
- },
230
- "description": "The leading icon that is displayed before the header text.",
231
- "attribute": "prefix-icon",
232
- "inheritedFrom": {
233
- "name": "AccordionButton",
234
- "module": "components/accordionbutton/accordionbutton.component.js"
235
- }
236
- },
237
- {
238
- "kind": "method",
239
- "name": "handleHeaderClick",
240
- "privacy": "protected",
241
- "return": {
242
- "type": {
243
- "text": "void"
244
- }
245
- },
246
- "description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state.",
247
- "inheritedFrom": {
248
- "name": "AccordionButton",
249
- "module": "components/accordionbutton/accordionbutton.component.js"
250
- }
251
- },
252
- {
253
- "kind": "method",
254
- "name": "dispatchHeaderClickEvent",
255
- "privacy": "private",
256
- "return": {
257
- "type": {
258
- "text": "void"
259
- }
260
- },
261
- "description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state.",
262
- "inheritedFrom": {
263
- "name": "AccordionButton",
264
- "module": "components/accordionbutton/accordionbutton.component.js"
265
- }
266
- },
267
- {
268
- "kind": "method",
269
- "name": "handleKeyDown",
270
- "privacy": "private",
271
- "return": {
272
- "type": {
273
- "text": "void"
274
- }
275
- },
276
- "parameters": [
277
- {
278
- "name": "event",
279
- "type": {
280
- "text": "KeyboardEvent"
281
- },
282
- "description": "The KeyboardEvent fired."
283
- }
284
- ],
285
- "description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys.",
286
- "inheritedFrom": {
287
- "name": "AccordionButton",
288
- "module": "components/accordionbutton/accordionbutton.component.js"
289
- }
290
- },
291
- {
292
- "kind": "method",
293
- "name": "renderIcon",
294
- "privacy": "protected",
295
- "return": {
296
- "type": {
297
- "text": "TemplateResult | typeof nothing"
298
- }
299
- },
300
- "parameters": [
301
- {
302
- "name": "iconName",
303
- "optional": true,
304
- "type": {
305
- "text": "IconNames"
306
- }
307
- }
308
- ],
309
- "inheritedFrom": {
310
- "name": "AccordionButton",
311
- "module": "components/accordionbutton/accordionbutton.component.js"
312
- }
313
- },
314
- {
315
- "kind": "method",
316
- "name": "renderHeadingText",
317
- "privacy": "protected",
318
- "return": {
319
- "type": {
320
- "text": "TemplateResult | typeof nothing"
321
- }
322
- },
323
- "inheritedFrom": {
324
- "name": "AccordionButton",
325
- "module": "components/accordionbutton/accordionbutton.component.js"
326
- }
327
- },
328
- {
329
- "kind": "method",
330
- "name": "getArrowIconName",
331
- "privacy": "protected",
332
- "return": {
333
- "type": {
334
- "text": ""
335
- }
336
- },
337
- "description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon.",
338
- "inheritedFrom": {
339
- "name": "AccordionButton",
340
- "module": "components/accordionbutton/accordionbutton.component.js"
341
- }
342
- },
343
- {
344
- "kind": "method",
345
- "name": "renderBody",
346
- "privacy": "protected",
347
- "return": {
348
- "type": {
349
- "text": "TemplateResult | typeof nothing"
350
- }
351
- },
352
- "inheritedFrom": {
353
- "name": "AccordionButton",
354
- "module": "components/accordionbutton/accordionbutton.component.js"
355
- }
356
- }
357
- ],
358
- "events": [
359
- {
360
- "description": "(React: onShown) This event is triggered when the accordion is expanded.",
361
- "name": "shown",
362
- "reactName": "onShown",
363
- "inheritedFrom": {
364
- "name": "AccordionButton",
365
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
366
- }
367
- }
368
- ],
369
- "superclass": {
370
- "name": "AccordionButton",
371
- "module": "/src/components/accordionbutton/accordionbutton.component"
372
- },
373
- "tagName": "mdc-accordion",
374
- "jsDoc": "/**\n * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.\n *\n * @tagname mdc-accordion\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot leading-controls - The leading controls slot of the accordion on the header section.\n * @slot trailing-controls - The trailing controls slot of the accordion on the header section.\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.\n *\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n * @csspart body-section - The body section of the accordion.\n */",
375
- "customElement": true,
376
- "attributes": [
377
- {
378
- "name": "disabled",
379
- "type": {
380
- "text": "boolean | undefined"
381
- },
382
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
383
- "default": "undefined",
384
- "fieldName": "disabled",
385
- "inheritedFrom": {
386
- "name": "DisabledMixin",
387
- "module": "src/utils/mixins/DisabledMixin.ts"
388
- }
389
- },
390
- {
391
- "name": "size",
392
- "type": {
393
- "text": "Size"
394
- },
395
- "description": "The size of the accordion item.",
396
- "default": "'small'",
397
- "fieldName": "size",
398
- "inheritedFrom": {
399
- "name": "AccordionButton",
400
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
401
- }
402
- },
403
- {
404
- "name": "variant",
405
- "type": {
406
- "text": "Variant"
407
- },
408
- "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
409
- "default": "'default'",
410
- "fieldName": "variant",
411
- "inheritedFrom": {
412
- "name": "AccordionButton",
413
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
414
- }
415
- },
416
- {
417
- "name": "data-aria-level",
418
- "type": {
419
- "text": "number"
420
- },
421
- "description": "The aria level of the accordion component.",
422
- "default": "3",
423
- "fieldName": "dataAriaLevel",
424
- "inheritedFrom": {
425
- "name": "AccordionButton",
426
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
427
- }
428
- },
429
- {
430
- "name": "expanded",
431
- "type": {
432
- "text": "boolean"
433
- },
434
- "description": "The visibility of the accordion button.",
435
- "default": "false",
436
- "fieldName": "expanded",
437
- "inheritedFrom": {
438
- "name": "AccordionButton",
439
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
440
- }
441
- },
442
- {
443
- "name": "header-text",
444
- "type": {
445
- "text": "string | undefined"
446
- },
447
- "description": "The header text of the accordion item.",
448
- "fieldName": "headerText",
449
- "inheritedFrom": {
450
- "name": "AccordionButton",
451
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
452
- }
453
- },
454
- {
455
- "name": "prefix-icon",
456
- "type": {
457
- "text": "IconNames | undefined"
458
- },
459
- "description": "The leading icon that is displayed before the header text.",
460
- "fieldName": "prefixIcon",
461
- "inheritedFrom": {
462
- "name": "AccordionButton",
463
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
464
- }
465
- }
466
- ]
467
- }
468
- ],
469
- "exports": [
470
- {
471
- "kind": "js",
472
- "name": "default",
473
- "declaration": {
474
- "name": "Accordion",
475
- "module": "components/accordion/accordion.component.js"
476
- }
477
- }
478
- ]
479
- },
480
5
  {
481
6
  "kind": "javascript-module",
482
7
  "path": "components/accordionbutton/accordionbutton.component.js",
@@ -970,33 +495,508 @@
970
495
  },
971
496
  {
972
497
  "kind": "javascript-module",
973
- "path": "components/alertchip/alertchip.component.js",
498
+ "path": "components/accordion/accordion.component.js",
974
499
  "declarations": [
975
500
  {
976
501
  "kind": "class",
977
- "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.",
978
- "name": "AlertChip",
502
+ "description": "An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n- Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n- Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.",
503
+ "name": "Accordion",
979
504
  "cssProperties": [
980
505
  {
981
- "description": "The color of the label text",
982
- "name": "--mdc-chip-color"
506
+ "description": "The border color of the accordion.",
507
+ "name": "--mdc-accordionbutton-border-color",
508
+ "inheritedFrom": {
509
+ "name": "AccordionButton",
510
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
511
+ }
983
512
  },
984
513
  {
985
- "description": "The color of the icon",
986
- "name": "--mdc-chip-icon-color"
514
+ "description": "The hover color of the accordion.",
515
+ "name": "--mdc-accordionbutton-hover-color",
516
+ "inheritedFrom": {
517
+ "name": "AccordionButton",
518
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
519
+ }
987
520
  },
988
521
  {
989
- "description": "The border color of the alertchip",
990
- "name": "--mdc-chip-border-color"
522
+ "description": "The active color of the accordion.",
523
+ "name": "--mdc-accordionbutton-active-color",
524
+ "inheritedFrom": {
525
+ "name": "AccordionButton",
526
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
527
+ }
991
528
  },
992
529
  {
993
- "description": "The background color of the alertchip",
994
- "name": "--mdc-chip-background-color"
995
- }
996
- ],
997
- "cssParts": [
998
- {
999
- "description": "The alert icon",
530
+ "description": "The disabled color of the accordion.",
531
+ "name": "--mdc-accordionbutton-disabled-color",
532
+ "inheritedFrom": {
533
+ "name": "AccordionButton",
534
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
535
+ }
536
+ }
537
+ ],
538
+ "cssParts": [
539
+ {
540
+ "description": "The header section of the accordion.",
541
+ "name": "header-section",
542
+ "inheritedFrom": {
543
+ "name": "AccordionButton",
544
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
545
+ }
546
+ },
547
+ {
548
+ "description": "The leading header of the accordion.",
549
+ "name": "leading-header",
550
+ "inheritedFrom": {
551
+ "name": "AccordionButton",
552
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
553
+ }
554
+ },
555
+ {
556
+ "description": "The trailing header of the accordion.",
557
+ "name": "trailing-header",
558
+ "inheritedFrom": {
559
+ "name": "AccordionButton",
560
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
561
+ }
562
+ },
563
+ {
564
+ "description": "The trailing header button of the accordion.",
565
+ "name": "trailing-header__button"
566
+ },
567
+ {
568
+ "description": "The body section of the accordion.",
569
+ "name": "body-section",
570
+ "inheritedFrom": {
571
+ "name": "AccordionButton",
572
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
573
+ }
574
+ },
575
+ {
576
+ "description": "The header button section of the accordion button.",
577
+ "name": "header-button-section",
578
+ "inheritedFrom": {
579
+ "name": "AccordionButton",
580
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
581
+ }
582
+ },
583
+ {
584
+ "description": "The trailing header icon of the accordion button.",
585
+ "name": "trailing-header__icon",
586
+ "inheritedFrom": {
587
+ "name": "AccordionButton",
588
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
589
+ }
590
+ }
591
+ ],
592
+ "slots": [
593
+ {
594
+ "description": "The leading controls slot of the accordion on the header section.",
595
+ "name": "leading-controls"
596
+ },
597
+ {
598
+ "description": "The trailing controls slot of the accordion on the header section.",
599
+ "name": "trailing-controls"
600
+ },
601
+ {
602
+ "description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
603
+ "name": "default",
604
+ "inheritedFrom": {
605
+ "name": "AccordionButton",
606
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
607
+ }
608
+ }
609
+ ],
610
+ "members": [
611
+ {
612
+ "kind": "method",
613
+ "name": "renderHeader",
614
+ "privacy": "protected",
615
+ "return": {
616
+ "type": {
617
+ "text": ""
618
+ }
619
+ },
620
+ "description": "Renders the header section of the accordion.\nThis includes the leading icon, text and controls, and the trailing controls.\nThe trailing controls include the expand/collapse button.\nThe button is disabled if the accordion is disabled.\nThe button is also given the aria-controls attribute set to the id of the body section.\nThe button is also given the aria-expanded attribute set to the expanded state of the accordion.\nThe prefix icon of the button is set to the expanded state of the accordion.",
621
+ "inheritedFrom": {
622
+ "name": "AccordionButton",
623
+ "module": "components/accordionbutton/accordionbutton.component.js"
624
+ }
625
+ },
626
+ {
627
+ "kind": "field",
628
+ "name": "disabled",
629
+ "type": {
630
+ "text": "boolean | undefined"
631
+ },
632
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
633
+ "default": "undefined",
634
+ "attribute": "disabled",
635
+ "reflects": true,
636
+ "inheritedFrom": {
637
+ "name": "AccordionButton",
638
+ "module": "components/accordionbutton/accordionbutton.component.js"
639
+ }
640
+ },
641
+ {
642
+ "kind": "field",
643
+ "name": "size",
644
+ "type": {
645
+ "text": "Size"
646
+ },
647
+ "description": "The size of the accordion item.",
648
+ "default": "'small'",
649
+ "attribute": "size",
650
+ "reflects": true,
651
+ "inheritedFrom": {
652
+ "name": "AccordionButton",
653
+ "module": "components/accordionbutton/accordionbutton.component.js"
654
+ }
655
+ },
656
+ {
657
+ "kind": "field",
658
+ "name": "variant",
659
+ "type": {
660
+ "text": "Variant"
661
+ },
662
+ "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
663
+ "default": "'default'",
664
+ "attribute": "variant",
665
+ "reflects": true,
666
+ "inheritedFrom": {
667
+ "name": "AccordionButton",
668
+ "module": "components/accordionbutton/accordionbutton.component.js"
669
+ }
670
+ },
671
+ {
672
+ "kind": "field",
673
+ "name": "dataAriaLevel",
674
+ "type": {
675
+ "text": "number"
676
+ },
677
+ "description": "The aria level of the accordion component.",
678
+ "default": "3",
679
+ "attribute": "data-aria-level",
680
+ "reflects": true,
681
+ "inheritedFrom": {
682
+ "name": "AccordionButton",
683
+ "module": "components/accordionbutton/accordionbutton.component.js"
684
+ }
685
+ },
686
+ {
687
+ "kind": "field",
688
+ "name": "expanded",
689
+ "type": {
690
+ "text": "boolean"
691
+ },
692
+ "description": "The visibility of the accordion button.",
693
+ "default": "false",
694
+ "attribute": "expanded",
695
+ "reflects": true,
696
+ "inheritedFrom": {
697
+ "name": "AccordionButton",
698
+ "module": "components/accordionbutton/accordionbutton.component.js"
699
+ }
700
+ },
701
+ {
702
+ "kind": "field",
703
+ "name": "headerText",
704
+ "type": {
705
+ "text": "string | undefined"
706
+ },
707
+ "description": "The header text of the accordion item.",
708
+ "attribute": "header-text",
709
+ "reflects": true,
710
+ "inheritedFrom": {
711
+ "name": "AccordionButton",
712
+ "module": "components/accordionbutton/accordionbutton.component.js"
713
+ }
714
+ },
715
+ {
716
+ "kind": "field",
717
+ "name": "prefixIcon",
718
+ "type": {
719
+ "text": "IconNames | undefined"
720
+ },
721
+ "description": "The leading icon that is displayed before the header text.",
722
+ "attribute": "prefix-icon",
723
+ "inheritedFrom": {
724
+ "name": "AccordionButton",
725
+ "module": "components/accordionbutton/accordionbutton.component.js"
726
+ }
727
+ },
728
+ {
729
+ "kind": "method",
730
+ "name": "handleHeaderClick",
731
+ "privacy": "protected",
732
+ "return": {
733
+ "type": {
734
+ "text": "void"
735
+ }
736
+ },
737
+ "description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state.",
738
+ "inheritedFrom": {
739
+ "name": "AccordionButton",
740
+ "module": "components/accordionbutton/accordionbutton.component.js"
741
+ }
742
+ },
743
+ {
744
+ "kind": "method",
745
+ "name": "dispatchHeaderClickEvent",
746
+ "privacy": "private",
747
+ "return": {
748
+ "type": {
749
+ "text": "void"
750
+ }
751
+ },
752
+ "description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state.",
753
+ "inheritedFrom": {
754
+ "name": "AccordionButton",
755
+ "module": "components/accordionbutton/accordionbutton.component.js"
756
+ }
757
+ },
758
+ {
759
+ "kind": "method",
760
+ "name": "handleKeyDown",
761
+ "privacy": "private",
762
+ "return": {
763
+ "type": {
764
+ "text": "void"
765
+ }
766
+ },
767
+ "parameters": [
768
+ {
769
+ "name": "event",
770
+ "type": {
771
+ "text": "KeyboardEvent"
772
+ },
773
+ "description": "The KeyboardEvent fired."
774
+ }
775
+ ],
776
+ "description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys.",
777
+ "inheritedFrom": {
778
+ "name": "AccordionButton",
779
+ "module": "components/accordionbutton/accordionbutton.component.js"
780
+ }
781
+ },
782
+ {
783
+ "kind": "method",
784
+ "name": "renderIcon",
785
+ "privacy": "protected",
786
+ "return": {
787
+ "type": {
788
+ "text": "TemplateResult | typeof nothing"
789
+ }
790
+ },
791
+ "parameters": [
792
+ {
793
+ "name": "iconName",
794
+ "optional": true,
795
+ "type": {
796
+ "text": "IconNames"
797
+ }
798
+ }
799
+ ],
800
+ "inheritedFrom": {
801
+ "name": "AccordionButton",
802
+ "module": "components/accordionbutton/accordionbutton.component.js"
803
+ }
804
+ },
805
+ {
806
+ "kind": "method",
807
+ "name": "renderHeadingText",
808
+ "privacy": "protected",
809
+ "return": {
810
+ "type": {
811
+ "text": "TemplateResult | typeof nothing"
812
+ }
813
+ },
814
+ "inheritedFrom": {
815
+ "name": "AccordionButton",
816
+ "module": "components/accordionbutton/accordionbutton.component.js"
817
+ }
818
+ },
819
+ {
820
+ "kind": "method",
821
+ "name": "getArrowIconName",
822
+ "privacy": "protected",
823
+ "return": {
824
+ "type": {
825
+ "text": ""
826
+ }
827
+ },
828
+ "description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon.",
829
+ "inheritedFrom": {
830
+ "name": "AccordionButton",
831
+ "module": "components/accordionbutton/accordionbutton.component.js"
832
+ }
833
+ },
834
+ {
835
+ "kind": "method",
836
+ "name": "renderBody",
837
+ "privacy": "protected",
838
+ "return": {
839
+ "type": {
840
+ "text": "TemplateResult | typeof nothing"
841
+ }
842
+ },
843
+ "inheritedFrom": {
844
+ "name": "AccordionButton",
845
+ "module": "components/accordionbutton/accordionbutton.component.js"
846
+ }
847
+ }
848
+ ],
849
+ "events": [
850
+ {
851
+ "description": "(React: onShown) This event is triggered when the accordion is expanded.",
852
+ "name": "shown",
853
+ "reactName": "onShown",
854
+ "inheritedFrom": {
855
+ "name": "AccordionButton",
856
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
857
+ }
858
+ }
859
+ ],
860
+ "superclass": {
861
+ "name": "AccordionButton",
862
+ "module": "/src/components/accordionbutton/accordionbutton.component"
863
+ },
864
+ "tagName": "mdc-accordion",
865
+ "jsDoc": "/**\n * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.\n *\n * @tagname mdc-accordion\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot leading-controls - The leading controls slot of the accordion on the header section.\n * @slot trailing-controls - The trailing controls slot of the accordion on the header section.\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.\n *\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n * @csspart body-section - The body section of the accordion.\n */",
866
+ "customElement": true,
867
+ "attributes": [
868
+ {
869
+ "name": "disabled",
870
+ "type": {
871
+ "text": "boolean | undefined"
872
+ },
873
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
874
+ "default": "undefined",
875
+ "fieldName": "disabled",
876
+ "inheritedFrom": {
877
+ "name": "AccordionButton",
878
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
879
+ }
880
+ },
881
+ {
882
+ "name": "size",
883
+ "type": {
884
+ "text": "Size"
885
+ },
886
+ "description": "The size of the accordion item.",
887
+ "default": "'small'",
888
+ "fieldName": "size",
889
+ "inheritedFrom": {
890
+ "name": "AccordionButton",
891
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
892
+ }
893
+ },
894
+ {
895
+ "name": "variant",
896
+ "type": {
897
+ "text": "Variant"
898
+ },
899
+ "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
900
+ "default": "'default'",
901
+ "fieldName": "variant",
902
+ "inheritedFrom": {
903
+ "name": "AccordionButton",
904
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
905
+ }
906
+ },
907
+ {
908
+ "name": "data-aria-level",
909
+ "type": {
910
+ "text": "number"
911
+ },
912
+ "description": "The aria level of the accordion component.",
913
+ "default": "3",
914
+ "fieldName": "dataAriaLevel",
915
+ "inheritedFrom": {
916
+ "name": "AccordionButton",
917
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
918
+ }
919
+ },
920
+ {
921
+ "name": "expanded",
922
+ "type": {
923
+ "text": "boolean"
924
+ },
925
+ "description": "The visibility of the accordion button.",
926
+ "default": "false",
927
+ "fieldName": "expanded",
928
+ "inheritedFrom": {
929
+ "name": "AccordionButton",
930
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
931
+ }
932
+ },
933
+ {
934
+ "name": "header-text",
935
+ "type": {
936
+ "text": "string | undefined"
937
+ },
938
+ "description": "The header text of the accordion item.",
939
+ "fieldName": "headerText",
940
+ "inheritedFrom": {
941
+ "name": "AccordionButton",
942
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
943
+ }
944
+ },
945
+ {
946
+ "name": "prefix-icon",
947
+ "type": {
948
+ "text": "IconNames | undefined"
949
+ },
950
+ "description": "The leading icon that is displayed before the header text.",
951
+ "fieldName": "prefixIcon",
952
+ "inheritedFrom": {
953
+ "name": "AccordionButton",
954
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
955
+ }
956
+ }
957
+ ]
958
+ }
959
+ ],
960
+ "exports": [
961
+ {
962
+ "kind": "js",
963
+ "name": "default",
964
+ "declaration": {
965
+ "name": "Accordion",
966
+ "module": "components/accordion/accordion.component.js"
967
+ }
968
+ }
969
+ ]
970
+ },
971
+ {
972
+ "kind": "javascript-module",
973
+ "path": "components/alertchip/alertchip.component.js",
974
+ "declarations": [
975
+ {
976
+ "kind": "class",
977
+ "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.",
978
+ "name": "AlertChip",
979
+ "cssProperties": [
980
+ {
981
+ "description": "The color of the label text",
982
+ "name": "--mdc-chip-color"
983
+ },
984
+ {
985
+ "description": "The color of the icon",
986
+ "name": "--mdc-chip-icon-color"
987
+ },
988
+ {
989
+ "description": "The border color of the alertchip",
990
+ "name": "--mdc-chip-border-color"
991
+ },
992
+ {
993
+ "description": "The background color of the alertchip",
994
+ "name": "--mdc-chip-background-color"
995
+ }
996
+ ],
997
+ "cssParts": [
998
+ {
999
+ "description": "The alert icon",
1000
1000
  "name": "icon"
1001
1001
  },
1002
1002
  {
@@ -15796,7 +15796,7 @@
15796
15796
  "declarations": [
15797
15797
  {
15798
15798
  "kind": "class",
15799
- "description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nAttribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.\n\nIf `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\nIconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\nto avoid fetching the same icon multiple times over the network.\nThis is useful when the same icon is used multiple times in the application.\nTo consider:\n- The `in-memory-cache` is not persisted and will be lost when the\nIconProvider is removed from the DOM.\n- The `web-api-cache` is persisted, but only works in https environments\n(https://developer.mozilla.org/en-US/docs/Web/API/Cache).",
15799
+ "description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nAttribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-design/icons` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.\n\nIf `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\nIconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\nto avoid fetching the same icon multiple times over the network.\nThis is useful when the same icon is used multiple times in the application.\nTo consider:\n- The `in-memory-cache` is not persisted and will be lost when the\nIconProvider is removed from the DOM.\n- The `web-api-cache` is persisted, but only works in https environments\n(https://developer.mozilla.org/en-US/docs/Web/API/Cache).",
15800
15800
  "name": "IconProvider",
15801
15801
  "slots": [
15802
15802
  {
@@ -15882,7 +15882,7 @@
15882
15882
  "type": {
15883
15883
  "text": "string | undefined"
15884
15884
  },
15885
- "description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
15885
+ "description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nIcons cache name must be unique, independent from other asset caches.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
15886
15886
  "default": "undefined",
15887
15887
  "attribute": "cache-name"
15888
15888
  },
@@ -15961,7 +15961,7 @@
15961
15961
  "type": {
15962
15962
  "text": "string | undefined"
15963
15963
  },
15964
- "description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
15964
+ "description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nIcons cache name must be unique, independent from other asset caches.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
15965
15965
  "default": "undefined",
15966
15966
  "fieldName": "cacheName"
15967
15967
  }
@@ -15971,7 +15971,7 @@
15971
15971
  "module": "/src/models"
15972
15972
  },
15973
15973
  "tagName": "mdc-iconprovider",
15974
- "jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Attribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\n * If `momentum-icons` is selected, the icons will be fetched from the\n * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).\n * This requires the consumer to have the `@momentum-designs` package installed and the\n * build tooling needs to support dynamic imports.\n *\n * If `custom-icons` is selected, the icons will be fetched from the provided URL.\n * This requires the consumer to provide a URL from which the icons will be fetched and\n * the consumer needs to make sure to bundle the icons in the application.\n *\n * If `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\n * IconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\n * to avoid fetching the same icon multiple times over the network.\n * This is useful when the same icon is used multiple times in the application.\n * To consider:\n * - The `in-memory-cache` is not persisted and will be lost when the\n * IconProvider is removed from the DOM.\n * - The `web-api-cache` is persisted, but only works in https environments\n * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).\n *\n * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
15974
+ "jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Attribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\n * If `momentum-icons` is selected, the icons will be fetched from the\n * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).\n * This requires the consumer to have the `@momentum-design/icons` package installed and the\n * build tooling needs to support dynamic imports.\n *\n * If `custom-icons` is selected, the icons will be fetched from the provided URL.\n * This requires the consumer to provide a URL from which the icons will be fetched and\n * the consumer needs to make sure to bundle the icons in the application.\n *\n * If `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\n * IconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\n * to avoid fetching the same icon multiple times over the network.\n * This is useful when the same icon is used multiple times in the application.\n * To consider:\n * - The `in-memory-cache` is not persisted and will be lost when the\n * IconProvider is removed from the DOM.\n * - The `web-api-cache` is persisted, but only works in https environments\n * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).\n *\n * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
15975
15975
  "customElement": true
15976
15976
  }
15977
15977
  ],
@@ -15986,6 +15986,340 @@
15986
15986
  }
15987
15987
  ]
15988
15988
  },
15989
+ {
15990
+ "kind": "javascript-module",
15991
+ "path": "components/illustration/illustration.component.js",
15992
+ "declarations": [
15993
+ {
15994
+ "kind": "class",
15995
+ "description": "Illustration component that dynamically displays SVG illustrations based on a valid name.\n\nThis component must be mounted within an `IllustrationProvider` component.\n\nThe `IllustrationProvider` defines the source URL from which illustrations are consumed.\nThe `Illustration` component accepts a `name` attribute, which corresponds to\nthe file name of the illustration to be loaded from the specified URL.\n\nOnce fetched, the illustration will be rendered. If the fetching process is unsuccessful,\nno illustration will be displayed.\n\nDefault sizing of the illustration is controlled by choosing a different illustration name, can be overridden with the `--mdc-illustration-size` CSS property.\nColoring of the illustration is currently baked into the svg, meaning that the illustration name determines\nthe coloring.\n\nRegarding accessibility, there are two types of illustrations: decorative and informative.\n\n### Decorative Illustrations\n- Decorative illustrations do not convey any essential information to the content of a page.\n- They should be hidden from screen readers (SR) to prevent confusion for users.\n- For decorative illustrations, an `aria-label` is not required, and the `role` will be set to null.\n\n### Informative Illustrations\n- Informative illustrations convey important information that is not adequately represented\n by surrounding text or components.\n- They provide valuable context and must be announced by assistive technologies.\n- For informative illustrations, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n- If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n the role will be unset.",
15996
+ "name": "Illustration",
15997
+ "cssProperties": [
15998
+ {
15999
+ "description": "Allows customization of the illustration size.",
16000
+ "name": "--mdc-illustration-size"
16001
+ }
16002
+ ],
16003
+ "cssParts": [
16004
+ {
16005
+ "description": "The svg inside the illustration element.",
16006
+ "name": "illustration"
16007
+ }
16008
+ ],
16009
+ "members": [
16010
+ {
16011
+ "kind": "field",
16012
+ "name": "illustrationData",
16013
+ "type": {
16014
+ "text": "HTMLElement | undefined"
16015
+ },
16016
+ "privacy": "private"
16017
+ },
16018
+ {
16019
+ "kind": "field",
16020
+ "name": "name",
16021
+ "type": {
16022
+ "text": "IllustrationNames | undefined"
16023
+ },
16024
+ "description": "Name of the illustration (= filename)",
16025
+ "attribute": "name",
16026
+ "reflects": true
16027
+ },
16028
+ {
16029
+ "kind": "field",
16030
+ "name": "ariaLabel",
16031
+ "type": {
16032
+ "text": "string | null"
16033
+ },
16034
+ "default": "null",
16035
+ "description": "Aria-label attribute to be set for accessibility",
16036
+ "attribute": "aria-label"
16037
+ },
16038
+ {
16039
+ "kind": "field",
16040
+ "name": "ariaLabelledby",
16041
+ "type": {
16042
+ "text": "string | null"
16043
+ },
16044
+ "default": "null",
16045
+ "description": "Aria-labelledby attribute to be set for accessibility",
16046
+ "attribute": "aria-labelledby"
16047
+ },
16048
+ {
16049
+ "kind": "field",
16050
+ "name": "illustrationProviderContext",
16051
+ "privacy": "private",
16052
+ "readonly": true
16053
+ },
16054
+ {
16055
+ "kind": "field",
16056
+ "name": "abortController",
16057
+ "type": {
16058
+ "text": "AbortController | undefined"
16059
+ },
16060
+ "privacy": "private",
16061
+ "default": "new AbortController()"
16062
+ },
16063
+ {
16064
+ "kind": "method",
16065
+ "name": "prepareIllustrationElement",
16066
+ "privacy": "private",
16067
+ "parameters": [
16068
+ {
16069
+ "name": "illustrationData",
16070
+ "type": {
16071
+ "text": "string"
16072
+ },
16073
+ "description": "The illustration string to be parsed"
16074
+ }
16075
+ ],
16076
+ "description": "Parse the illustration string to an html element, set the attributes and\nreturn the illustration element",
16077
+ "return": {
16078
+ "type": {
16079
+ "text": ""
16080
+ }
16081
+ }
16082
+ },
16083
+ {
16084
+ "kind": "method",
16085
+ "name": "getIllustrationData",
16086
+ "privacy": "private",
16087
+ "description": "Fetches the illustration (currently only svg) and sets state and attributes once fetched successfully\n\nThis method uses abortController.signal to cancel the fetch request when the component is disconnected or updated.\nIf the request is aborted after the fetch() call has been fulfilled but before the response body has been read,\nthen attempting to read the response body will reject with an AbortError exception."
16088
+ },
16089
+ {
16090
+ "kind": "method",
16091
+ "name": "handleIllustrationLoadedSuccess",
16092
+ "privacy": "private",
16093
+ "parameters": [
16094
+ {
16095
+ "name": "illustrationHtml",
16096
+ "type": {
16097
+ "text": "HTMLElement"
16098
+ },
16099
+ "description": "The illustration html element which has been fetched from the illustration provider."
16100
+ }
16101
+ ],
16102
+ "description": "Sets the illustrationData state to the fetched illustration.\nDispatches a 'load' event on the component once the illustration has been successfully loaded."
16103
+ },
16104
+ {
16105
+ "kind": "method",
16106
+ "name": "handleIllustrationLoadedFailure",
16107
+ "privacy": "private",
16108
+ "parameters": [
16109
+ {
16110
+ "name": "error",
16111
+ "type": {
16112
+ "text": "unknown"
16113
+ }
16114
+ }
16115
+ ],
16116
+ "description": "Dispatches an 'error' event on the component when the illustration fetching has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
16117
+ }
16118
+ ],
16119
+ "attributes": [
16120
+ {
16121
+ "name": "name",
16122
+ "type": {
16123
+ "text": "IllustrationNames | undefined"
16124
+ },
16125
+ "description": "Name of the illustration (= filename)",
16126
+ "fieldName": "name"
16127
+ },
16128
+ {
16129
+ "name": "aria-label",
16130
+ "type": {
16131
+ "text": "string | null"
16132
+ },
16133
+ "default": "null",
16134
+ "description": "Aria-label attribute to be set for accessibility",
16135
+ "fieldName": "ariaLabel"
16136
+ },
16137
+ {
16138
+ "name": "aria-labelledby",
16139
+ "type": {
16140
+ "text": "string | null"
16141
+ },
16142
+ "default": "null",
16143
+ "description": "Aria-labelledby attribute to be set for accessibility",
16144
+ "fieldName": "ariaLabelledby"
16145
+ }
16146
+ ],
16147
+ "superclass": {
16148
+ "name": "Component",
16149
+ "module": "/src/models"
16150
+ },
16151
+ "tagName": "mdc-illustration",
16152
+ "jsDoc": "/**\n * Illustration component that dynamically displays SVG illustrations based on a valid name.\n *\n * This component must be mounted within an `IllustrationProvider` component.\n *\n * The `IllustrationProvider` defines the source URL from which illustrations are consumed.\n * The `Illustration` component accepts a `name` attribute, which corresponds to\n * the file name of the illustration to be loaded from the specified URL.\n *\n * Once fetched, the illustration will be rendered. If the fetching process is unsuccessful,\n * no illustration will be displayed.\n *\n * Default sizing of the illustration is controlled by choosing a different illustration name, can be overridden with the `--mdc-illustration-size` CSS property.\n * Coloring of the illustration is currently baked into the svg, meaning that the illustration name determines\n * the coloring.\n *\n * Regarding accessibility, there are two types of illustrations: decorative and informative.\n *\n * ### Decorative Illustrations\n * - Decorative illustrations do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative illustrations, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Illustrations\n * - Informative illustrations convey important information that is not adequately represented\n * by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative illustrations, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n * the role will be unset.\n *\n * @tagname mdc-illustration\n *\n * @cssproperty --mdc-illustration-size - Allows customization of the illustration size.\n *\n * @csspart illustration - The svg inside the illustration element.\n */",
16153
+ "customElement": true
16154
+ }
16155
+ ],
16156
+ "exports": [
16157
+ {
16158
+ "kind": "js",
16159
+ "name": "default",
16160
+ "declaration": {
16161
+ "name": "Illustration",
16162
+ "module": "components/illustration/illustration.component.js"
16163
+ }
16164
+ }
16165
+ ]
16166
+ },
16167
+ {
16168
+ "kind": "javascript-module",
16169
+ "path": "components/illustrationprovider/illustrationprovider.component.js",
16170
+ "declarations": [
16171
+ {
16172
+ "kind": "class",
16173
+ "description": "IllustrationProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nAttribute `illustrationSet` can be set to either `momentum-illustrations` or `custom-illustrations`.\nIf `momentum-illustrations` is selected, the illustrations will be fetched from the\nMomentum Design System illustration set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-design/illustrations` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-illustrations` is selected, the illustrations will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the illustrations will be fetched and\nthe consumer needs to make sure to bundle the illustrations in the application.\n\nIf `cacheStrategy` is provided (only works with illustrationSet = `custom-illustrations`), the\nIllustrationProvider will cache the illustrations in the selected cache (either web-api-cache or in-memory-cache),\nto avoid fetching the same illustration multiple times over the network.\nThis is useful when the same illustration is used multiple times in the application.\nTo consider:\n- The `in-memory-cache` is not persisted and will be lost when the\nIllustrationProvider is removed from the DOM.\n- The `web-api-cache` is persisted, but only works in https environments\n(https://developer.mozilla.org/en-US/docs/Web/API/Cache).",
16174
+ "name": "IllustrationProvider",
16175
+ "slots": [
16176
+ {
16177
+ "description": "children",
16178
+ "name": ""
16179
+ }
16180
+ ],
16181
+ "members": [
16182
+ {
16183
+ "kind": "field",
16184
+ "name": "Context",
16185
+ "privacy": "public",
16186
+ "static": true,
16187
+ "description": "Context object of the IllustrationProviderContext, to be consumed by child components",
16188
+ "readonly": true
16189
+ },
16190
+ {
16191
+ "kind": "field",
16192
+ "name": "illustrationSet",
16193
+ "type": {
16194
+ "text": "IllustrationSet | undefined"
16195
+ },
16196
+ "description": "Illustration set to be used\n\nIf `momentum-illustrations` is selected, the illustrations will be fetched from the\nMomentum Design System illustration set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-illustrations` is selected, the illustrations will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the illustrations will be fetched and\nthe consumer needs to make sure to bundle the illustrations in the application.",
16197
+ "default": "momentum-illustrations",
16198
+ "attribute": "illustration-set",
16199
+ "reflects": true
16200
+ },
16201
+ {
16202
+ "kind": "field",
16203
+ "name": "url",
16204
+ "type": {
16205
+ "text": "string | undefined"
16206
+ },
16207
+ "description": "Url of where illustrations will be fetched from\n(if Illustration set is `custom-illustrations`, this will be the base url)",
16208
+ "attribute": "url"
16209
+ },
16210
+ {
16211
+ "kind": "field",
16212
+ "name": "fileExtension",
16213
+ "type": {
16214
+ "text": "string | undefined"
16215
+ },
16216
+ "description": "File extension of illustrations\n(if Illustration set is `custom-illustrations`, this will be the file extension for illustrations)",
16217
+ "default": "svg",
16218
+ "attribute": "file-extension",
16219
+ "reflects": true
16220
+ },
16221
+ {
16222
+ "kind": "field",
16223
+ "name": "cacheStrategy",
16224
+ "type": {
16225
+ "text": "CacheStrategy | undefined"
16226
+ },
16227
+ "description": "Illustrations Cache Strategy to use\n\n**Can only be used if Illustration set is `custom-illustrations`**\n\nChoose `in-memory-cache` to cache illustrations in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache illustrations using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the illustrations will not be cached.",
16228
+ "default": "undefined",
16229
+ "attribute": "cache-strategy"
16230
+ },
16231
+ {
16232
+ "kind": "field",
16233
+ "name": "cacheName",
16234
+ "type": {
16235
+ "text": "string | undefined"
16236
+ },
16237
+ "description": "Illustrations Cache Name to use (cache strategy must be provided)\n\nIf provided, Illustrations inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nIllustrations cache name must be unique, independent from other asset caches.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the illustrations will not be cached.",
16238
+ "default": "undefined",
16239
+ "attribute": "cache-name"
16240
+ },
16241
+ {
16242
+ "kind": "method",
16243
+ "name": "updateValuesInContext",
16244
+ "privacy": "private"
16245
+ },
16246
+ {
16247
+ "kind": "method",
16248
+ "name": "updateContext",
16249
+ "privacy": "protected",
16250
+ "return": {
16251
+ "type": {
16252
+ "text": "void"
16253
+ }
16254
+ }
16255
+ }
16256
+ ],
16257
+ "attributes": [
16258
+ {
16259
+ "name": "illustration-set",
16260
+ "type": {
16261
+ "text": "IllustrationSet | undefined"
16262
+ },
16263
+ "description": "Illustration set to be used\n\nIf `momentum-illustrations` is selected, the illustrations will be fetched from the\nMomentum Design System illustration set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-illustrations` is selected, the illustrations will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the illustrations will be fetched and\nthe consumer needs to make sure to bundle the illustrations in the application.",
16264
+ "default": "momentum-illustrations",
16265
+ "fieldName": "illustrationSet"
16266
+ },
16267
+ {
16268
+ "name": "url",
16269
+ "type": {
16270
+ "text": "string | undefined"
16271
+ },
16272
+ "description": "Url of where illustrations will be fetched from\n(if Illustration set is `custom-illustrations`, this will be the base url)",
16273
+ "fieldName": "url"
16274
+ },
16275
+ {
16276
+ "name": "file-extension",
16277
+ "type": {
16278
+ "text": "string | undefined"
16279
+ },
16280
+ "description": "File extension of illustrations\n(if Illustration set is `custom-illustrations`, this will be the file extension for illustrations)",
16281
+ "default": "svg",
16282
+ "fieldName": "fileExtension"
16283
+ },
16284
+ {
16285
+ "name": "cache-strategy",
16286
+ "type": {
16287
+ "text": "CacheStrategy | undefined"
16288
+ },
16289
+ "description": "Illustrations Cache Strategy to use\n\n**Can only be used if Illustration set is `custom-illustrations`**\n\nChoose `in-memory-cache` to cache illustrations in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache illustrations using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the illustrations will not be cached.",
16290
+ "default": "undefined",
16291
+ "fieldName": "cacheStrategy"
16292
+ },
16293
+ {
16294
+ "name": "cache-name",
16295
+ "type": {
16296
+ "text": "string | undefined"
16297
+ },
16298
+ "description": "Illustrations Cache Name to use (cache strategy must be provided)\n\nIf provided, Illustrations inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nIllustrations cache name must be unique, independent from other asset caches.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the illustrations will not be cached.",
16299
+ "default": "undefined",
16300
+ "fieldName": "cacheName"
16301
+ }
16302
+ ],
16303
+ "superclass": {
16304
+ "name": "Provider",
16305
+ "module": "/src/models"
16306
+ },
16307
+ "tagName": "mdc-illustrationprovider",
16308
+ "jsDoc": "/**\n * IllustrationProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Attribute `illustrationSet` can be set to either `momentum-illustrations` or `custom-illustrations`.\n * If `momentum-illustrations` is selected, the illustrations will be fetched from the\n * Momentum Design System illustration set per a dynamic JS Import (no need to provide a URL).\n * This requires the consumer to have the `@momentum-design/illustrations` package installed and the\n * build tooling needs to support dynamic imports.\n *\n * If `custom-illustrations` is selected, the illustrations will be fetched from the provided URL.\n * This requires the consumer to provide a URL from which the illustrations will be fetched and\n * the consumer needs to make sure to bundle the illustrations in the application.\n *\n * If `cacheStrategy` is provided (only works with illustrationSet = `custom-illustrations`), the\n * IllustrationProvider will cache the illustrations in the selected cache (either web-api-cache or in-memory-cache),\n * to avoid fetching the same illustration multiple times over the network.\n * This is useful when the same illustration is used multiple times in the application.\n * To consider:\n * - The `in-memory-cache` is not persisted and will be lost when the\n * IllustrationProvider is removed from the DOM.\n * - The `web-api-cache` is persisted, but only works in https environments\n * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).\n *\n * @tagname mdc-illustrationprovider\n *\n * @slot - children\n */",
16309
+ "customElement": true
16310
+ }
16311
+ ],
16312
+ "exports": [
16313
+ {
16314
+ "kind": "js",
16315
+ "name": "default",
16316
+ "declaration": {
16317
+ "name": "IllustrationProvider",
16318
+ "module": "components/illustrationprovider/illustrationprovider.component.js"
16319
+ }
16320
+ }
16321
+ ]
16322
+ },
15989
16323
  {
15990
16324
  "kind": "javascript-module",
15991
16325
  "path": "components/input/input.component.js",
@@ -32837,408 +33171,60 @@
32837
33171
  },
32838
33172
  {
32839
33173
  "kind": "javascript-module",
32840
- "path": "components/select/select.component.js",
33174
+ "path": "components/searchfield/searchfield.component.js",
32841
33175
  "declarations": [
32842
33176
  {
32843
33177
  "kind": "class",
32844
- "description": "The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\nIt is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n\nEvery mdc-option should have a `value` attribute set to ensure proper form submission.\n\nTo set a default option, use the `selected` attribute on the `mdc-option` element.\n\n**Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n\nIf you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.",
32845
- "name": "Select",
32846
- "cssProperties": [
32847
- {
32848
- "description": "The background color of the combobox of select.",
32849
- "name": "--mdc-select-background-color"
32850
- },
32851
- {
32852
- "description": "The background color of the combobox of select when hovered.",
32853
- "name": "--mdc-select-background-color-hover"
32854
- },
32855
- {
32856
- "description": "The background color of the combobox of select when active.",
32857
- "name": "--mdc-select-background-color-active"
32858
- },
32859
- {
32860
- "description": "The background color of the combobox of select when disabled.",
32861
- "name": "--mdc-select-background-color-disabled"
32862
- },
32863
- {
32864
- "description": "The text color of the select.",
32865
- "name": "--mdc-select-text-color"
32866
- },
32867
- {
32868
- "description": "The text color of the selected option in the select.",
32869
- "name": "--mdc-select-text-color-selected"
32870
- },
32871
- {
32872
- "description": "The text color of the select when disabled.",
32873
- "name": "--mdc-select-text-color-disabled"
32874
- },
32875
- {
32876
- "description": "The border color of the select.",
32877
- "name": "--mdc-select-border-color"
32878
- },
32879
- {
32880
- "description": "The border color of the select when disabled.",
32881
- "name": "--mdc-select-border-color-disabled"
32882
- },
32883
- {
32884
- "description": "The border color of the select when in success state.",
32885
- "name": "--mdc-select-border-color-success"
32886
- },
32887
- {
32888
- "description": "The border color of the select when in warning state.",
32889
- "name": "--mdc-select-border-color-warning"
32890
- },
32891
- {
32892
- "description": "The border color of the select when in error state.",
32893
- "name": "--mdc-select-border-color-error"
32894
- },
32895
- {
32896
- "description": "The width of the select.",
32897
- "name": "--mdc-select-width"
32898
- },
32899
- {
32900
- "description": "The height of the listbox inside the select.",
32901
- "name": "--mdc-select-listbox-height"
32902
- },
32903
- {
32904
- "description": "The width of the listbox inside the select (default: `--mdc-select-width`).",
32905
- "name": "--mdc-select-listbox-width"
32906
- }
32907
- ],
33178
+ "description": "`mdc-searchfield` component is used as an input field for search functionality.\n\nIt supports `mdc-inputchip` as filters.\n\nThis component is built by extending the `mdc-input` component.",
33179
+ "name": "Searchfield",
32908
33180
  "slots": [
32909
33181
  {
32910
- "description": "This is a default/unnamed slot for Selectlistbox including options and/or option group.",
32911
- "name": "default"
33182
+ "description": "Slot for input chips",
33183
+ "name": "filters"
32912
33184
  }
32913
33185
  ],
32914
33186
  "members": [
32915
33187
  {
32916
33188
  "kind": "field",
32917
- "name": "placeholder",
32918
- "type": {
32919
- "text": "string | undefined"
32920
- },
32921
- "description": "The placeholder text which will be shown on the text if provided.",
32922
- "attribute": "placeholder"
32923
- },
32924
- {
32925
- "kind": "field",
32926
- "name": "readonly",
32927
- "type": {
32928
- "text": "boolean"
32929
- },
32930
- "default": "false",
32931
- "description": "readonly attribute of the select field. If true, the select is read-only.",
32932
- "attribute": "readonly"
32933
- },
32934
- {
32935
- "kind": "field",
32936
- "name": "placement",
32937
- "type": {
32938
- "text": "Placement"
32939
- },
32940
- "description": "The placeholder text which will be shown on the text if provided.",
32941
- "attribute": "placement",
32942
- "reflects": true
32943
- },
32944
- {
32945
- "kind": "field",
32946
- "name": "softDisabled",
32947
- "type": {
32948
- "text": "boolean | undefined"
32949
- },
32950
- "description": "Indicates whether the select is soft disabled.\nWhen set to `true`, the select appears visually disabled but still allows\nfocus.",
32951
- "default": "undefined",
32952
- "attribute": "soft-disabled",
32953
- "reflects": true
32954
- },
32955
- {
32956
- "kind": "field",
32957
- "name": "boundary",
32958
- "type": {
32959
- "text": "'clippingAncestors' | string"
32960
- },
32961
- "description": "This describes the clipping element(s) or area that overflow of the used popover will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
32962
- "default": "'clippingAncestors'",
32963
- "attribute": "boundary",
32964
- "reflects": true
32965
- },
32966
- {
32967
- "kind": "field",
32968
- "name": "strategy",
32969
- "type": {
32970
- "text": "'absolute' | 'fixed'"
32971
- },
32972
- "description": "The strategy of the popover within Select.\nThis determines how the popover is positioned in the DOM.\n\nIn case `boundary` is set to something other than 'clippingAncestors',\nit might be necessary to set the `strategy` to 'fixed' to ensure that the popover\nis not getting clipped by scrollable containers enclosing the select.",
32973
- "default": "absolute",
32974
- "attribute": "strategy",
32975
- "reflects": true
32976
- },
32977
- {
32978
- "kind": "field",
32979
- "name": "popoverZIndex",
32980
- "type": {
32981
- "text": "number"
32982
- },
32983
- "description": "The z-index of the popover within Select.\n\nOverride this to make sure this stays on top of other components.",
32984
- "default": "1000",
32985
- "attribute": "popover-z-index",
32986
- "reflects": true
32987
- },
32988
- {
32989
- "kind": "field",
32990
- "name": "backdropAppendTo",
33189
+ "name": "inputChips",
32991
33190
  "type": {
32992
- "text": "string | undefined"
32993
- },
32994
- "description": "ID of the element where the backdrop will be appended to.\nThis is useful to ensure that the backdrop is appended to the correct element in the DOM.\nIf not set, the backdrop will be appended to the parent element of the select.",
32995
- "attribute": "backdrop-append-to",
32996
- "reflects": true
32997
- },
32998
- {
32999
- "kind": "method",
33000
- "name": "getAllValidOptions",
33001
- "privacy": "private",
33002
- "return": {
33003
- "type": {
33004
- "text": "Array<Option>"
33005
- }
33006
- }
33007
- },
33008
- {
33009
- "kind": "method",
33010
- "name": "getFirstValidOption",
33011
- "privacy": "private",
33012
- "return": {
33013
- "type": {
33014
- "text": "Option | null"
33015
- }
33016
- }
33017
- },
33018
- {
33019
- "kind": "method",
33020
- "name": "getLastValidOption",
33021
- "privacy": "private",
33022
- "return": {
33023
- "type": {
33024
- "text": "Option | null"
33025
- }
33026
- }
33027
- },
33028
- {
33029
- "kind": "method",
33030
- "name": "getFirstSelectedOption",
33031
- "privacy": "private",
33032
- "return": {
33033
- "type": {
33034
- "text": "Option | null"
33035
- }
33191
+ "text": "Array<HTMLElement> | undefined"
33036
33192
  }
33037
33193
  },
33038
33194
  {
33039
33195
  "kind": "method",
33040
- "name": "modifyListBoxWrapper",
33041
- "privacy": "private",
33042
- "description": "Modifies the listbox wrapper to ensure it has the correct attributes\nand IDs for accessibility.\n\nOnce [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers,\nthis an be removed and mdc-option can be used directly in the select component with a listbox in a different\nshadow root and aria-owns attribute to connect them."
33043
- },
33044
- {
33045
- "kind": "method",
33046
- "name": "handleOptionsClick",
33047
- "privacy": "private",
33048
- "return": {
33049
- "type": {
33050
- "text": "void"
33051
- }
33052
- },
33053
- "parameters": [
33054
- {
33055
- "name": "event",
33056
- "type": {
33057
- "text": "MouseEvent"
33058
- },
33059
- "description": "The event which triggered this function."
33060
- }
33061
- ],
33062
- "description": "A private method which is called when an option is clicked.\nIt sets the selected option, removes selected from other options, updates the tabindex for all options,\ncloses the popover, and fires the change and input events."
33063
- },
33064
- {
33065
- "kind": "method",
33066
- "name": "setSelectedOption",
33067
- "privacy": "private",
33068
- "return": {
33069
- "type": {
33070
- "text": "void"
33071
- }
33072
- },
33073
- "parameters": [
33074
- {
33075
- "name": "option",
33076
- "type": {
33077
- "text": "Option | null"
33078
- },
33079
- "description": "The option element in DOM which gets selected."
33080
- }
33081
- ],
33082
- "description": "Sets the selected option in the component state and updates the input element's value.\nThis method ensures that only the selected option is marked as selected in the DOM,\nand updates the tabindex for all options accordingly.\nIt also updates the validity of the input element based on the selected option.\nThis method is called when an option is selected."
33083
- },
33084
- {
33085
- "kind": "method",
33086
- "name": "updateTabIndexForAllOptions",
33087
- "privacy": "private",
33088
- "return": {
33089
- "type": {
33090
- "text": "void"
33091
- }
33092
- },
33093
- "parameters": [
33094
- {
33095
- "name": "option",
33096
- "optional": true,
33097
- "type": {
33098
- "text": "Option | null"
33099
- },
33100
- "description": "The option which tabIndex should be set to 0."
33101
- }
33102
- ],
33103
- "description": "Updates the tabindex of all options.\nSets the tabindex of the selected option to '0' and others to '-1'."
33104
- },
33105
- {
33106
- "kind": "method",
33107
- "name": "updateSelectedInChildOptions",
33108
- "privacy": "private",
33109
- "return": {
33110
- "type": {
33111
- "text": "void"
33112
- }
33113
- },
33114
- "parameters": [
33115
- {
33116
- "name": "selectedOption",
33117
- "type": {
33118
- "text": "Option | null"
33119
- },
33120
- "description": "The option which gets selected"
33121
- }
33122
- ],
33123
- "description": "Sets selected attribute on the selected option and removes it from all options"
33124
- },
33125
- {
33126
- "kind": "method",
33127
- "name": "fireEvents",
33128
- "privacy": "private",
33129
- "return": {
33130
- "type": {
33131
- "text": "void"
33132
- }
33133
- },
33134
- "description": "A private method which is called to fire the change and input events.\nIt dispatches the input and change events with the selected option's value and label."
33135
- },
33136
- {
33137
- "kind": "method",
33138
- "name": "dispatchChange",
33139
- "privacy": "private",
33140
- "return": {
33141
- "type": {
33142
- "text": "void"
33143
- }
33144
- },
33145
- "parameters": [
33146
- {
33147
- "name": "option",
33148
- "type": {
33149
- "text": "Option"
33150
- }
33151
- }
33152
- ]
33153
- },
33154
- {
33155
- "kind": "method",
33156
- "name": "dispatchInput",
33157
- "privacy": "private",
33158
- "return": {
33159
- "type": {
33160
- "text": "void"
33161
- }
33162
- },
33163
- "parameters": [
33164
- {
33165
- "name": "option",
33166
- "type": {
33167
- "text": "Option"
33168
- }
33169
- }
33170
- ]
33171
- },
33172
- {
33173
- "kind": "method",
33174
- "name": "handleClickCombobox",
33175
- "privacy": "private",
33176
- "return": {
33177
- "type": {
33178
- "text": "void"
33179
- }
33180
- },
33181
- "parameters": [
33182
- {
33183
- "name": "event",
33184
- "type": {
33185
- "text": "MouseEvent"
33186
- },
33187
- "description": "The mouse event which triggered this function."
33188
- }
33189
- ],
33190
- "description": "Handles the click event on the visual combobox.\nIf the select is disabled, soft-disabled or readonly, it does nothing.\nIf the popover is already open, it closes it.\nIf it is closed, it opens it."
33191
- },
33192
- {
33193
- "kind": "method",
33194
- "name": "handleKeydownCombobox",
33195
- "privacy": "private",
33196
- "return": {
33197
- "type": {
33198
- "text": "void"
33199
- }
33200
- },
33196
+ "name": "handleKeyDown",
33197
+ "privacy": "protected",
33201
33198
  "parameters": [
33202
33199
  {
33203
33200
  "name": "event",
33204
33201
  "type": {
33205
33202
  "text": "KeyboardEvent"
33206
33203
  },
33207
- "description": "The keyboard event."
33204
+ "description": "Keyboard event"
33208
33205
  }
33209
33206
  ],
33210
- "description": "Handles the keydown event on the select element when the popover is closed.\nThe options are as follows:\n- ARROW_DOWN, ARROW_UP, SPACE: Opens the popover and prevents the default scrolling behavior.\n- ENTER: Opens the popover, prevents default scrolling, and submits the form if the popover is closed.\n- HOME: Opens the popover and sets focus and tabindex on the first option.\n- END: Opens the popover and sets focus and tabindex on the last option."
33207
+ "description": "Handles the keydown event of the search field.\nIf the key pressed is 'Enter', it submits the form.\nIf the key pressed is 'Escape', it clears the input text.",
33208
+ "inheritedFrom": {
33209
+ "name": "Input",
33210
+ "module": "components/input/input.component.js"
33211
+ }
33211
33212
  },
33212
33213
  {
33213
33214
  "kind": "method",
33214
- "name": "handlePopoverKeydown",
33215
+ "name": "renderInputChips",
33215
33216
  "privacy": "private",
33216
- "return": {
33217
- "type": {
33218
- "text": "void"
33219
- }
33220
- },
33221
- "parameters": [
33222
- {
33223
- "name": "event",
33224
- "type": {
33225
- "text": "KeyboardEvent"
33226
- },
33227
- "description": "The keyboard event."
33228
- }
33229
- ],
33230
- "description": "Handles the keydown event on the select element when the popover is open.\nThe options are as follows:\n- HOME: Sets focus and tabindex on the first option.\n- END: Sets focus and tabindex on the last option.\n- ARROW_DOWN, ARROW_UP, PAGE_DOWN, PAGE_UP: Handles navigation between options."
33217
+ "description": "This method is used to render the input chips inside filters slot.\nIt will remove any elements that are not input chips."
33231
33218
  },
33232
33219
  {
33233
33220
  "kind": "method",
33234
- "name": "updateState",
33235
- "privacy": "public",
33236
- "return": {
33237
- "type": {
33238
- "text": "void"
33239
- }
33240
- },
33241
- "description": "Updates the state of the select component.\nThis public method should be fired when the selected on the option components is updated from the outside.\nIt ensures that the selected attribute is set correctly on the options\nand that the aria-selected attribute is updated accordingly."
33221
+ "name": "clearInputText",
33222
+ "privacy": "protected",
33223
+ "description": "Clears the input field.",
33224
+ "inheritedFrom": {
33225
+ "name": "Input",
33226
+ "module": "components/input/input.component.js"
33227
+ }
33242
33228
  },
33243
33229
  {
33244
33230
  "kind": "field",
@@ -33372,298 +33358,576 @@
33372
33358
  },
33373
33359
  {
33374
33360
  "kind": "field",
33375
- "name": "disabled",
33361
+ "name": "placeholder",
33376
33362
  "type": {
33377
- "text": "boolean | undefined"
33363
+ "text": "string"
33378
33364
  },
33379
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
33380
- "default": "undefined",
33381
- "attribute": "disabled",
33382
- "reflects": true,
33365
+ "default": "''",
33366
+ "description": "The placeholder text that is displayed when the input field is empty.",
33367
+ "attribute": "placeholder",
33383
33368
  "inheritedFrom": {
33384
- "name": "FormfieldWrapper",
33385
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
33369
+ "name": "Input",
33370
+ "module": "components/input/input.component.js"
33386
33371
  }
33387
33372
  },
33388
33373
  {
33389
33374
  "kind": "field",
33390
- "name": "label",
33375
+ "name": "readonly",
33391
33376
  "type": {
33392
- "text": "string | undefined"
33377
+ "text": "boolean"
33393
33378
  },
33394
- "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
33395
- "attribute": "label",
33396
- "reflects": true,
33379
+ "default": "false",
33380
+ "description": "readonly attribute of the input field. If true, the input field is read-only.",
33381
+ "attribute": "readonly",
33397
33382
  "inheritedFrom": {
33398
- "name": "FormfieldWrapper",
33399
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
33383
+ "name": "Input",
33384
+ "module": "components/input/input.component.js"
33400
33385
  }
33401
33386
  },
33402
33387
  {
33403
33388
  "kind": "field",
33404
- "name": "required",
33389
+ "name": "prefixText",
33405
33390
  "type": {
33406
- "text": "boolean"
33391
+ "text": "string | undefined"
33407
33392
  },
33408
- "default": "false",
33409
- "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
33410
- "attribute": "required",
33411
- "reflects": true,
33393
+ "description": "The prefix text that is displayed before the input field. It has a max length of 10 characters.\nWhen the prefix text is set, make sure to set the 'data-aria-label'\nattribute with the appropriate value for accessibility.",
33394
+ "attribute": "prefix-text",
33412
33395
  "inheritedFrom": {
33413
- "name": "FormfieldWrapper",
33414
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
33396
+ "name": "Input",
33397
+ "module": "components/input/input.component.js"
33415
33398
  }
33416
33399
  },
33417
33400
  {
33418
33401
  "kind": "field",
33419
- "name": "helpTextType",
33402
+ "name": "leadingIcon",
33420
33403
  "type": {
33421
- "text": "ValidationType"
33404
+ "text": "IconNames | undefined"
33422
33405
  },
33423
- "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
33424
- "attribute": "help-text-type",
33425
- "reflects": true,
33406
+ "description": "The leading icon that is displayed before the input field.",
33407
+ "attribute": "leading-icon",
33426
33408
  "inheritedFrom": {
33427
- "name": "FormfieldWrapper",
33428
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
33409
+ "name": "Input",
33410
+ "module": "components/input/input.component.js"
33429
33411
  }
33430
33412
  },
33431
33413
  {
33432
33414
  "kind": "field",
33433
- "name": "helpText",
33415
+ "name": "trailingButton",
33434
33416
  "type": {
33435
- "text": "string | undefined"
33417
+ "text": "boolean"
33436
33418
  },
33437
- "description": "The help text that is displayed below the input field.",
33438
- "attribute": "help-text",
33439
- "reflects": true,
33419
+ "default": "false",
33420
+ "description": "The trailing button when set to true, shows a clear button that clears the input field.",
33421
+ "attribute": "trailing-button",
33440
33422
  "inheritedFrom": {
33441
- "name": "FormfieldWrapper",
33442
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
33423
+ "name": "Input",
33424
+ "module": "components/input/input.component.js"
33443
33425
  }
33444
33426
  },
33445
33427
  {
33446
33428
  "kind": "field",
33447
- "name": "toggletipText",
33429
+ "name": "maxlength",
33448
33430
  "type": {
33449
- "text": "string | undefined"
33431
+ "text": "number | undefined"
33450
33432
  },
33451
- "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
33452
- "attribute": "toggletip-text",
33453
- "reflects": true,
33433
+ "description": "The maximum number of characters that the input field can accept.",
33434
+ "attribute": "maxlength",
33454
33435
  "inheritedFrom": {
33455
- "name": "FormfieldWrapper",
33456
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
33436
+ "name": "Input",
33437
+ "module": "components/input/input.component.js"
33457
33438
  }
33458
33439
  },
33459
33440
  {
33460
33441
  "kind": "field",
33461
- "name": "toggletipPlacement",
33442
+ "name": "minlength",
33462
33443
  "type": {
33463
- "text": "PopoverPlacement"
33444
+ "text": "number | undefined"
33464
33445
  },
33465
- "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
33466
- "default": "'top'",
33467
- "attribute": "toggletip-placement",
33468
- "reflects": true,
33446
+ "description": "The minimum number of characters that the input field can accept.",
33447
+ "attribute": "minlength",
33469
33448
  "inheritedFrom": {
33470
- "name": "FormfieldWrapper",
33471
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
33449
+ "name": "Input",
33450
+ "module": "components/input/input.component.js"
33472
33451
  }
33473
33452
  },
33474
33453
  {
33475
33454
  "kind": "field",
33476
- "name": "infoIconAriaLabel",
33455
+ "name": "autocapitalize",
33477
33456
  "type": {
33478
- "text": "string | undefined"
33457
+ "text": "AutoCapitalizeType"
33479
33458
  },
33480
- "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.",
33481
- "attribute": "info-icon-aria-label",
33482
- "reflects": true,
33459
+ "description": "The autocapitalize attribute of the input field.",
33460
+ "default": "'off'",
33461
+ "attribute": "autocapitalize",
33483
33462
  "inheritedFrom": {
33484
- "name": "FormfieldWrapper",
33485
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
33463
+ "name": "Input",
33464
+ "module": "components/input/input.component.js"
33486
33465
  }
33487
33466
  },
33488
33467
  {
33489
- "kind": "method",
33490
- "name": "renderLabelElement",
33491
- "privacy": "protected",
33492
- "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
33493
- "return": {
33468
+ "kind": "field",
33469
+ "name": "autocomplete",
33470
+ "type": {
33471
+ "text": "AutoCompleteType"
33472
+ },
33473
+ "description": "The autocomplete attribute of the input field.",
33474
+ "default": "'off'",
33475
+ "attribute": "autocomplete",
33476
+ "inheritedFrom": {
33477
+ "name": "Input",
33478
+ "module": "components/input/input.component.js"
33479
+ }
33480
+ },
33481
+ {
33482
+ "kind": "field",
33483
+ "name": "dirname",
33484
+ "type": {
33485
+ "text": "string | undefined"
33486
+ },
33487
+ "description": "Specifies the name of the directionality of text for submission purposes (e.g., \"rtl\" for right-to-left).",
33488
+ "attribute": "dirname",
33489
+ "inheritedFrom": {
33490
+ "name": "Input",
33491
+ "module": "components/input/input.component.js"
33492
+ }
33493
+ },
33494
+ {
33495
+ "kind": "field",
33496
+ "name": "pattern",
33497
+ "type": {
33498
+ "text": "string | undefined"
33499
+ },
33500
+ "description": "The pattern attribute of the input field.\nSpecifies a regular expression that the input value must match for validation purposes.",
33501
+ "attribute": "pattern",
33502
+ "inheritedFrom": {
33503
+ "name": "Input",
33504
+ "module": "components/input/input.component.js"
33505
+ }
33506
+ },
33507
+ {
33508
+ "kind": "field",
33509
+ "name": "list",
33510
+ "type": {
33511
+ "text": "string | undefined"
33512
+ },
33513
+ "description": "The list attribute of the input field.\nIdentifies a list of pre-defined options to suggest to the user.",
33514
+ "attribute": "list",
33515
+ "inheritedFrom": {
33516
+ "name": "Input",
33517
+ "module": "components/input/input.component.js"
33518
+ }
33519
+ },
33520
+ {
33521
+ "kind": "field",
33522
+ "name": "size",
33523
+ "type": {
33524
+ "text": "number | undefined | undefined"
33525
+ },
33526
+ "description": "The size attribute of the input field.\nSpecifies the width of the input field.",
33527
+ "default": "undefined",
33528
+ "attribute": "size",
33529
+ "inheritedFrom": {
33530
+ "name": "Input",
33531
+ "module": "components/input/input.component.js"
33532
+ }
33533
+ },
33534
+ {
33535
+ "kind": "field",
33536
+ "name": "clearAriaLabel",
33537
+ "type": {
33538
+ "text": "string"
33539
+ },
33540
+ "default": "''",
33541
+ "description": "Aria label for the trailing button. If trailing button is set to true, this label is used for the clear button.",
33542
+ "attribute": "clear-aria-label",
33543
+ "inheritedFrom": {
33544
+ "name": "Input",
33545
+ "module": "components/input/input.component.js"
33546
+ }
33547
+ },
33548
+ {
33549
+ "kind": "method",
33550
+ "name": "setInputValidity",
33551
+ "privacy": "private",
33552
+ "inheritedFrom": {
33553
+ "name": "Input",
33554
+ "module": "components/input/input.component.js"
33555
+ }
33556
+ },
33557
+ {
33558
+ "kind": "method",
33559
+ "name": "updateValue",
33560
+ "privacy": "private",
33561
+ "description": "Updates the value of the input field.\nSets the form value.",
33562
+ "return": {
33494
33563
  "type": {
33495
33564
  "text": ""
33496
33565
  }
33497
33566
  },
33498
33567
  "inheritedFrom": {
33499
- "name": "FormfieldWrapper",
33500
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
33568
+ "name": "Input",
33569
+ "module": "components/input/input.component.js"
33501
33570
  }
33502
33571
  },
33503
33572
  {
33504
33573
  "kind": "method",
33505
- "name": "renderHelpTextIcon",
33574
+ "name": "onInput",
33575
+ "privacy": "private",
33576
+ "description": "Handles the input event of the input field.\nUpdates the value and sets the validity of the input field.",
33577
+ "inheritedFrom": {
33578
+ "name": "Input",
33579
+ "module": "components/input/input.component.js"
33580
+ }
33581
+ },
33582
+ {
33583
+ "kind": "method",
33584
+ "name": "onChange",
33585
+ "privacy": "private",
33586
+ "parameters": [
33587
+ {
33588
+ "name": "event",
33589
+ "type": {
33590
+ "text": "Event"
33591
+ },
33592
+ "description": "Event which contains information about the value change."
33593
+ }
33594
+ ],
33595
+ "description": "Handles the change event of the input field.\nUpdates the value and sets the validity of the input field.\n\nThe 'change' event does not bubble up through the shadow DOM as it was not composed.\nTherefore, we need to re-dispatch the same event to ensure it is propagated correctly.\nRead more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed",
33596
+ "inheritedFrom": {
33597
+ "name": "Input",
33598
+ "module": "components/input/input.component.js"
33599
+ }
33600
+ },
33601
+ {
33602
+ "kind": "method",
33603
+ "name": "renderLeadingIcon",
33506
33604
  "privacy": "protected",
33507
- "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.",
33605
+ "description": "Renders the leading icon before the input field.\nIf the leading icon is not set, it will not be displayed.",
33508
33606
  "return": {
33509
33607
  "type": {
33510
33608
  "text": ""
33511
33609
  }
33512
33610
  },
33513
33611
  "inheritedFrom": {
33514
- "name": "FormfieldWrapper",
33515
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
33612
+ "name": "Input",
33613
+ "module": "components/input/input.component.js"
33516
33614
  }
33517
33615
  },
33518
33616
  {
33519
33617
  "kind": "method",
33520
- "name": "renderHelpText",
33618
+ "name": "renderPrefixText",
33521
33619
  "privacy": "protected",
33522
- "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.",
33620
+ "description": "Renders the prefix text before the input field.\nIf the prefix text is more than 10 characters,\n- it will not be displayed.\n- the validation messsage will be displayed.\n\n Note: We are setting aria-hidden so that the screen reader does not read the prefix text.\n The consumers should set the appropriate aria-label for the input field using 'data-aria-label' attribute.",
33523
33621
  "return": {
33524
33622
  "type": {
33525
33623
  "text": ""
33526
33624
  }
33527
33625
  },
33528
33626
  "inheritedFrom": {
33529
- "name": "FormfieldWrapper",
33530
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
33627
+ "name": "Input",
33628
+ "module": "components/input/input.component.js"
33531
33629
  }
33532
33630
  },
33533
33631
  {
33534
33632
  "kind": "method",
33535
- "name": "renderLabel",
33633
+ "name": "renderTrailingButton",
33536
33634
  "privacy": "protected",
33537
- "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
33635
+ "parameters": [
33636
+ {
33637
+ "name": "show",
33638
+ "default": "false"
33639
+ }
33640
+ ],
33641
+ "description": "Renders the trailing button to clear the input field if the trailingButton is set to true.",
33538
33642
  "return": {
33539
33643
  "type": {
33540
33644
  "text": ""
33541
33645
  }
33542
33646
  },
33543
33647
  "inheritedFrom": {
33544
- "name": "FormfieldWrapper",
33545
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
33648
+ "name": "Input",
33649
+ "module": "components/input/input.component.js"
33546
33650
  }
33547
33651
  },
33548
33652
  {
33549
33653
  "kind": "method",
33550
- "name": "renderHelperText",
33654
+ "name": "renderInputElement",
33551
33655
  "privacy": "protected",
33552
- "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
33553
- "return": {
33554
- "type": {
33555
- "text": ""
33656
+ "parameters": [
33657
+ {
33658
+ "name": "type",
33659
+ "type": {
33660
+ "text": "InputType"
33661
+ }
33662
+ },
33663
+ {
33664
+ "name": "hidePlaceholder",
33665
+ "default": "false"
33556
33666
  }
33667
+ ],
33668
+ "inheritedFrom": {
33669
+ "name": "Input",
33670
+ "module": "components/input/input.component.js"
33671
+ }
33672
+ },
33673
+ {
33674
+ "kind": "field",
33675
+ "name": "disabled",
33676
+ "type": {
33677
+ "text": "boolean | undefined"
33557
33678
  },
33679
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
33680
+ "default": "undefined",
33681
+ "attribute": "disabled",
33682
+ "reflects": true,
33558
33683
  "inheritedFrom": {
33559
33684
  "name": "FormfieldWrapper",
33560
33685
  "module": "components/formfieldwrapper/formfieldwrapper.component.js"
33561
33686
  }
33562
- }
33563
- ],
33564
- "events": [
33687
+ },
33565
33688
  {
33566
- "name": "change",
33689
+ "kind": "field",
33690
+ "name": "label",
33567
33691
  "type": {
33568
- "text": "CustomEvent"
33692
+ "text": "string | undefined"
33569
33693
  },
33570
- "description": "(React: onChange) This event is dispatched when the select is changed.",
33571
- "reactName": "onChange"
33694
+ "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
33695
+ "attribute": "label",
33696
+ "reflects": true,
33697
+ "inheritedFrom": {
33698
+ "name": "FormfieldWrapper",
33699
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
33700
+ }
33572
33701
  },
33573
33702
  {
33574
- "name": "input",
33703
+ "kind": "field",
33704
+ "name": "required",
33575
33705
  "type": {
33576
- "text": "CustomEvent"
33706
+ "text": "boolean"
33577
33707
  },
33578
- "description": "(React: onInput) This event is dispatched when the select is changed.",
33579
- "reactName": "onInput"
33708
+ "default": "false",
33709
+ "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
33710
+ "attribute": "required",
33711
+ "reflects": true,
33712
+ "inheritedFrom": {
33713
+ "name": "FormfieldWrapper",
33714
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
33715
+ }
33580
33716
  },
33581
33717
  {
33582
- "description": "(React: onClick) This event is dispatched when the select is clicked.",
33583
- "name": "click",
33584
- "reactName": "onClick"
33718
+ "kind": "field",
33719
+ "name": "helpTextType",
33720
+ "type": {
33721
+ "text": "ValidationType"
33722
+ },
33723
+ "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
33724
+ "attribute": "help-text-type",
33725
+ "reflects": true,
33726
+ "inheritedFrom": {
33727
+ "name": "FormfieldWrapper",
33728
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
33729
+ }
33585
33730
  },
33586
33731
  {
33587
- "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the select.",
33588
- "name": "keydown",
33589
- "reactName": "onKeyDown"
33732
+ "kind": "field",
33733
+ "name": "helpText",
33734
+ "type": {
33735
+ "text": "string | undefined"
33736
+ },
33737
+ "description": "The help text that is displayed below the input field.",
33738
+ "attribute": "help-text",
33739
+ "reflects": true,
33740
+ "inheritedFrom": {
33741
+ "name": "FormfieldWrapper",
33742
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
33743
+ }
33590
33744
  },
33591
33745
  {
33592
- "description": "(React: onFocus) This event is dispatched when the select receives focus.",
33593
- "name": "focus",
33594
- "reactName": "onFocus"
33595
- }
33596
- ],
33597
- "attributes": [
33598
- {
33599
- "name": "placeholder",
33746
+ "kind": "field",
33747
+ "name": "toggletipText",
33600
33748
  "type": {
33601
33749
  "text": "string | undefined"
33602
33750
  },
33603
- "description": "The placeholder text which will be shown on the text if provided.",
33604
- "fieldName": "placeholder"
33751
+ "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
33752
+ "attribute": "toggletip-text",
33753
+ "reflects": true,
33754
+ "inheritedFrom": {
33755
+ "name": "FormfieldWrapper",
33756
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
33757
+ }
33605
33758
  },
33606
33759
  {
33607
- "name": "readonly",
33760
+ "kind": "field",
33761
+ "name": "toggletipPlacement",
33608
33762
  "type": {
33609
- "text": "boolean"
33763
+ "text": "PopoverPlacement"
33610
33764
  },
33611
- "default": "false",
33612
- "description": "readonly attribute of the select field. If true, the select is read-only.",
33613
- "fieldName": "readonly"
33765
+ "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
33766
+ "default": "'top'",
33767
+ "attribute": "toggletip-placement",
33768
+ "reflects": true,
33769
+ "inheritedFrom": {
33770
+ "name": "FormfieldWrapper",
33771
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
33772
+ }
33614
33773
  },
33615
33774
  {
33616
- "name": "placement",
33775
+ "kind": "field",
33776
+ "name": "infoIconAriaLabel",
33617
33777
  "type": {
33618
- "text": "Placement"
33778
+ "text": "string | undefined"
33619
33779
  },
33620
- "description": "The placeholder text which will be shown on the text if provided.",
33621
- "fieldName": "placement"
33780
+ "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.",
33781
+ "attribute": "info-icon-aria-label",
33782
+ "reflects": true,
33783
+ "inheritedFrom": {
33784
+ "name": "FormfieldWrapper",
33785
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
33786
+ }
33622
33787
  },
33623
33788
  {
33624
- "name": "soft-disabled",
33625
- "type": {
33626
- "text": "boolean | undefined"
33789
+ "kind": "method",
33790
+ "name": "renderLabelElement",
33791
+ "privacy": "protected",
33792
+ "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
33793
+ "return": {
33794
+ "type": {
33795
+ "text": ""
33796
+ }
33627
33797
  },
33628
- "description": "Indicates whether the select is soft disabled.\nWhen set to `true`, the select appears visually disabled but still allows\nfocus.",
33629
- "default": "undefined",
33630
- "fieldName": "softDisabled"
33798
+ "inheritedFrom": {
33799
+ "name": "FormfieldWrapper",
33800
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
33801
+ }
33631
33802
  },
33632
33803
  {
33633
- "name": "boundary",
33634
- "type": {
33635
- "text": "'clippingAncestors' | string"
33804
+ "kind": "method",
33805
+ "name": "renderHelpTextIcon",
33806
+ "privacy": "protected",
33807
+ "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.",
33808
+ "return": {
33809
+ "type": {
33810
+ "text": ""
33811
+ }
33636
33812
  },
33637
- "description": "This describes the clipping element(s) or area that overflow of the used popover will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
33638
- "default": "'clippingAncestors'",
33639
- "fieldName": "boundary"
33813
+ "inheritedFrom": {
33814
+ "name": "FormfieldWrapper",
33815
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
33816
+ }
33640
33817
  },
33641
33818
  {
33642
- "name": "strategy",
33643
- "type": {
33644
- "text": "'absolute' | 'fixed'"
33819
+ "kind": "method",
33820
+ "name": "renderHelpText",
33821
+ "privacy": "protected",
33822
+ "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.",
33823
+ "return": {
33824
+ "type": {
33825
+ "text": ""
33826
+ }
33645
33827
  },
33646
- "description": "The strategy of the popover within Select.\nThis determines how the popover is positioned in the DOM.\n\nIn case `boundary` is set to something other than 'clippingAncestors',\nit might be necessary to set the `strategy` to 'fixed' to ensure that the popover\nis not getting clipped by scrollable containers enclosing the select.",
33647
- "default": "absolute",
33648
- "fieldName": "strategy"
33828
+ "inheritedFrom": {
33829
+ "name": "FormfieldWrapper",
33830
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
33831
+ }
33649
33832
  },
33650
33833
  {
33651
- "name": "popover-z-index",
33652
- "type": {
33653
- "text": "number"
33834
+ "kind": "method",
33835
+ "name": "renderLabel",
33836
+ "privacy": "protected",
33837
+ "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
33838
+ "return": {
33839
+ "type": {
33840
+ "text": ""
33841
+ }
33654
33842
  },
33655
- "description": "The z-index of the popover within Select.\n\nOverride this to make sure this stays on top of other components.",
33656
- "default": "1000",
33657
- "fieldName": "popoverZIndex"
33843
+ "inheritedFrom": {
33844
+ "name": "FormfieldWrapper",
33845
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
33846
+ }
33658
33847
  },
33659
33848
  {
33660
- "name": "backdrop-append-to",
33849
+ "kind": "method",
33850
+ "name": "renderHelperText",
33851
+ "privacy": "protected",
33852
+ "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
33853
+ "return": {
33854
+ "type": {
33855
+ "text": ""
33856
+ }
33857
+ },
33858
+ "inheritedFrom": {
33859
+ "name": "FormfieldWrapper",
33860
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
33861
+ }
33862
+ }
33863
+ ],
33864
+ "events": [
33865
+ {
33866
+ "description": "(React: onInput) This event is dispatched when the value of the input field changes (every press).",
33867
+ "name": "input",
33868
+ "reactName": "onInput",
33869
+ "inheritedFrom": {
33870
+ "name": "Input",
33871
+ "module": "src/components/input/input.component.ts"
33872
+ }
33873
+ },
33874
+ {
33875
+ "description": "(React: onChange) This event is dispatched when the value of the input field changes (on blur).",
33876
+ "name": "change",
33877
+ "reactName": "onChange",
33878
+ "inheritedFrom": {
33879
+ "name": "Input",
33880
+ "module": "src/components/input/input.component.ts"
33881
+ }
33882
+ },
33883
+ {
33884
+ "description": "(React: onFocus) This event is dispatched when the input receives focus.",
33885
+ "name": "focus",
33886
+ "reactName": "onFocus",
33887
+ "inheritedFrom": {
33888
+ "name": "Input",
33889
+ "module": "src/components/input/input.component.ts"
33890
+ }
33891
+ },
33892
+ {
33893
+ "description": "(React: onBlur) This event is dispatched when the input loses focus.",
33894
+ "name": "blur",
33895
+ "reactName": "onBlur",
33896
+ "inheritedFrom": {
33897
+ "name": "Input",
33898
+ "module": "src/components/input/input.component.ts"
33899
+ }
33900
+ },
33901
+ {
33902
+ "name": "clear",
33661
33903
  "type": {
33662
- "text": "string | undefined"
33904
+ "text": "CustomEvent"
33663
33905
  },
33664
- "description": "ID of the element where the backdrop will be appended to.\nThis is useful to ensure that the backdrop is appended to the correct element in the DOM.\nIf not set, the backdrop will be appended to the parent element of the select.",
33665
- "fieldName": "backdropAppendTo"
33906
+ "description": "(React: onClear) This event is dispatched when the input text is cleared.",
33907
+ "reactName": "onClear",
33908
+ "inheritedFrom": {
33909
+ "name": "Input",
33910
+ "module": "src/components/input/input.component.ts"
33911
+ }
33666
33912
  },
33913
+ {
33914
+ "type": {
33915
+ "text": "EventConstructor"
33916
+ },
33917
+ "inheritedFrom": {
33918
+ "name": "Input",
33919
+ "module": "src/components/input/input.component.ts"
33920
+ }
33921
+ }
33922
+ ],
33923
+ "superclass": {
33924
+ "name": "Input",
33925
+ "module": "/src/components/input/input.component"
33926
+ },
33927
+ "tagName": "mdc-searchfield",
33928
+ "jsDoc": "/**\n * `mdc-searchfield` component is used as an input field for search functionality.\n *\n * It supports `mdc-inputchip` as filters.\n *\n * This component is built by extending the `mdc-input` component.\n *\n * @tagname mdc-searchfield\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n *\n * @slot filters - Slot for input chips\n */",
33929
+ "customElement": true,
33930
+ "attributes": [
33667
33931
  {
33668
33932
  "name": "auto-focus-on-mount",
33669
33933
  "type": {
@@ -33729,638 +33993,956 @@
33729
33993
  }
33730
33994
  },
33731
33995
  {
33732
- "name": "disabled",
33996
+ "name": "placeholder",
33733
33997
  "type": {
33734
- "text": "boolean | undefined"
33998
+ "text": "string"
33735
33999
  },
33736
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
33737
- "default": "undefined",
33738
- "fieldName": "disabled",
34000
+ "default": "''",
34001
+ "description": "The placeholder text that is displayed when the input field is empty.",
34002
+ "fieldName": "placeholder",
33739
34003
  "inheritedFrom": {
33740
- "name": "FormfieldWrapper",
33741
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34004
+ "name": "Input",
34005
+ "module": "src/components/input/input.component.ts"
33742
34006
  }
33743
34007
  },
33744
34008
  {
33745
- "name": "label",
34009
+ "name": "readonly",
33746
34010
  "type": {
33747
- "text": "string | undefined"
34011
+ "text": "boolean"
33748
34012
  },
33749
- "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
33750
- "fieldName": "label",
34013
+ "default": "false",
34014
+ "description": "readonly attribute of the input field. If true, the input field is read-only.",
34015
+ "fieldName": "readonly",
33751
34016
  "inheritedFrom": {
33752
- "name": "FormfieldWrapper",
33753
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34017
+ "name": "Input",
34018
+ "module": "src/components/input/input.component.ts"
33754
34019
  }
33755
34020
  },
33756
34021
  {
33757
- "name": "required",
34022
+ "name": "prefix-text",
33758
34023
  "type": {
33759
- "text": "boolean"
34024
+ "text": "string | undefined"
33760
34025
  },
33761
- "default": "false",
33762
- "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
33763
- "fieldName": "required",
34026
+ "description": "The prefix text that is displayed before the input field. It has a max length of 10 characters.\nWhen the prefix text is set, make sure to set the 'data-aria-label'\nattribute with the appropriate value for accessibility.",
34027
+ "fieldName": "prefixText",
33764
34028
  "inheritedFrom": {
33765
- "name": "FormfieldWrapper",
33766
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34029
+ "name": "Input",
34030
+ "module": "src/components/input/input.component.ts"
33767
34031
  }
33768
34032
  },
33769
34033
  {
33770
- "name": "help-text-type",
34034
+ "name": "leading-icon",
33771
34035
  "type": {
33772
- "text": "ValidationType"
34036
+ "text": "IconNames | undefined"
33773
34037
  },
33774
- "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
33775
- "fieldName": "helpTextType",
34038
+ "description": "The leading icon that is displayed before the input field.",
34039
+ "fieldName": "leadingIcon",
33776
34040
  "inheritedFrom": {
33777
- "name": "FormfieldWrapper",
33778
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34041
+ "name": "Input",
34042
+ "module": "src/components/input/input.component.ts"
33779
34043
  }
33780
34044
  },
33781
34045
  {
33782
- "name": "help-text",
34046
+ "name": "trailing-button",
33783
34047
  "type": {
33784
- "text": "string | undefined"
34048
+ "text": "boolean"
33785
34049
  },
33786
- "description": "The help text that is displayed below the input field.",
33787
- "fieldName": "helpText",
34050
+ "default": "false",
34051
+ "description": "The trailing button when set to true, shows a clear button that clears the input field.",
34052
+ "fieldName": "trailingButton",
33788
34053
  "inheritedFrom": {
33789
- "name": "FormfieldWrapper",
33790
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34054
+ "name": "Input",
34055
+ "module": "src/components/input/input.component.ts"
33791
34056
  }
33792
34057
  },
33793
34058
  {
33794
- "name": "toggletip-text",
34059
+ "name": "maxlength",
33795
34060
  "type": {
33796
- "text": "string | undefined"
34061
+ "text": "number | undefined"
33797
34062
  },
33798
- "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
33799
- "fieldName": "toggletipText",
34063
+ "description": "The maximum number of characters that the input field can accept.",
34064
+ "fieldName": "maxlength",
33800
34065
  "inheritedFrom": {
33801
- "name": "FormfieldWrapper",
33802
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34066
+ "name": "Input",
34067
+ "module": "src/components/input/input.component.ts"
33803
34068
  }
33804
34069
  },
33805
34070
  {
33806
- "name": "toggletip-placement",
34071
+ "name": "minlength",
33807
34072
  "type": {
33808
- "text": "PopoverPlacement"
34073
+ "text": "number | undefined"
33809
34074
  },
33810
- "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
33811
- "default": "'top'",
33812
- "fieldName": "toggletipPlacement",
34075
+ "description": "The minimum number of characters that the input field can accept.",
34076
+ "fieldName": "minlength",
33813
34077
  "inheritedFrom": {
33814
- "name": "FormfieldWrapper",
33815
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34078
+ "name": "Input",
34079
+ "module": "src/components/input/input.component.ts"
33816
34080
  }
33817
34081
  },
33818
34082
  {
33819
- "name": "info-icon-aria-label",
34083
+ "name": "autocapitalize",
33820
34084
  "type": {
33821
- "text": "string | undefined"
34085
+ "text": "AutoCapitalizeType"
33822
34086
  },
33823
- "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.",
33824
- "fieldName": "infoIconAriaLabel",
34087
+ "description": "The autocapitalize attribute of the input field.",
34088
+ "default": "'off'",
34089
+ "fieldName": "autocapitalize",
33825
34090
  "inheritedFrom": {
33826
- "name": "FormfieldWrapper",
33827
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34091
+ "name": "Input",
34092
+ "module": "src/components/input/input.component.ts"
33828
34093
  }
33829
- }
33830
- ],
33831
- "mixins": [
33832
- {
33833
- "name": "AutoFocusOnMountMixin",
33834
- "module": "/src/utils/mixins/AutoFocusOnMountMixin"
33835
34094
  },
33836
34095
  {
33837
- "name": "FormInternalsMixin",
33838
- "module": "/src/utils/mixins/FormInternalsMixin"
33839
- },
33840
- {
33841
- "name": "DataAriaLabelMixin",
33842
- "module": "/src/utils/mixins/DataAriaLabelMixin"
33843
- }
33844
- ],
33845
- "superclass": {
33846
- "name": "FormfieldWrapper",
33847
- "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
33848
- },
33849
- "tagName": "mdc-select",
33850
- "jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event input - (React: onInput) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n *\n * @cssproperty --mdc-select-background-color - The background color of the combobox of select.\n * @cssproperty --mdc-select-background-color-hover - The background color of the combobox of select when hovered.\n * @cssproperty --mdc-select-background-color-active - The background color of the combobox of select when active.\n * @cssproperty --mdc-select-background-color-disabled - The background color of the combobox of select when disabled.\n * @cssproperty --mdc-select-text-color - The text color of the select.\n * @cssproperty --mdc-select-text-color-selected - The text color of the selected option in the select.\n * @cssproperty --mdc-select-text-color-disabled - The text color of the select when disabled.\n * @cssproperty --mdc-select-border-color - The border color of the select.\n * @cssproperty --mdc-select-border-color-disabled - The border color of the select when disabled.\n * @cssproperty --mdc-select-border-color-success - The border color of the select when in success state.\n * @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.\n * @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.\n * @cssproperty --mdc-select-width - The width of the select.\n * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.\n * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).\n */",
33851
- "customElement": true
33852
- }
33853
- ],
33854
- "exports": [
33855
- {
33856
- "kind": "js",
33857
- "name": "default",
33858
- "declaration": {
33859
- "name": "Select",
33860
- "module": "components/select/select.component.js"
33861
- }
33862
- }
33863
- ]
33864
- },
33865
- {
33866
- "kind": "javascript-module",
33867
- "path": "components/searchfield/searchfield.component.js",
33868
- "declarations": [
33869
- {
33870
- "kind": "class",
33871
- "description": "`mdc-searchfield` component is used as an input field for search functionality.\n\nIt supports `mdc-inputchip` as filters.\n\nThis component is built by extending the `mdc-input` component.",
33872
- "name": "Searchfield",
33873
- "slots": [
33874
- {
33875
- "description": "Slot for input chips",
33876
- "name": "filters"
33877
- }
33878
- ],
33879
- "members": [
33880
- {
33881
- "kind": "field",
33882
- "name": "inputChips",
34096
+ "name": "autocomplete",
33883
34097
  "type": {
33884
- "text": "Array<HTMLElement> | undefined"
34098
+ "text": "AutoCompleteType"
34099
+ },
34100
+ "description": "The autocomplete attribute of the input field.",
34101
+ "default": "'off'",
34102
+ "fieldName": "autocomplete",
34103
+ "inheritedFrom": {
34104
+ "name": "Input",
34105
+ "module": "src/components/input/input.component.ts"
33885
34106
  }
33886
34107
  },
33887
34108
  {
33888
- "kind": "method",
33889
- "name": "handleKeyDown",
33890
- "privacy": "protected",
33891
- "parameters": [
33892
- {
33893
- "name": "event",
33894
- "type": {
33895
- "text": "KeyboardEvent"
33896
- },
33897
- "description": "Keyboard event"
33898
- }
33899
- ],
33900
- "description": "Handles the keydown event of the search field.\nIf the key pressed is 'Enter', it submits the form.\nIf the key pressed is 'Escape', it clears the input text.",
34109
+ "name": "dirname",
34110
+ "type": {
34111
+ "text": "string | undefined"
34112
+ },
34113
+ "description": "Specifies the name of the directionality of text for submission purposes (e.g., \"rtl\" for right-to-left).",
34114
+ "fieldName": "dirname",
33901
34115
  "inheritedFrom": {
33902
34116
  "name": "Input",
33903
- "module": "components/input/input.component.js"
34117
+ "module": "src/components/input/input.component.ts"
33904
34118
  }
33905
34119
  },
33906
34120
  {
33907
- "kind": "method",
33908
- "name": "renderInputChips",
33909
- "privacy": "private",
33910
- "description": "This method is used to render the input chips inside filters slot.\nIt will remove any elements that are not input chips."
34121
+ "name": "pattern",
34122
+ "type": {
34123
+ "text": "string | undefined"
34124
+ },
34125
+ "description": "The pattern attribute of the input field.\nSpecifies a regular expression that the input value must match for validation purposes.",
34126
+ "fieldName": "pattern",
34127
+ "inheritedFrom": {
34128
+ "name": "Input",
34129
+ "module": "src/components/input/input.component.ts"
34130
+ }
33911
34131
  },
33912
34132
  {
33913
- "kind": "method",
33914
- "name": "clearInputText",
33915
- "privacy": "protected",
33916
- "description": "Clears the input field.",
34133
+ "name": "list",
34134
+ "type": {
34135
+ "text": "string | undefined"
34136
+ },
34137
+ "description": "The list attribute of the input field.\nIdentifies a list of pre-defined options to suggest to the user.",
34138
+ "fieldName": "list",
33917
34139
  "inheritedFrom": {
33918
34140
  "name": "Input",
33919
- "module": "components/input/input.component.js"
34141
+ "module": "src/components/input/input.component.ts"
33920
34142
  }
33921
34143
  },
33922
34144
  {
33923
- "kind": "field",
33924
- "name": "autoFocusOnMount",
34145
+ "name": "size",
33925
34146
  "type": {
33926
- "text": "boolean"
34147
+ "text": "number | undefined | undefined"
33927
34148
  },
33928
- "default": "false",
33929
- "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
33930
- "attribute": "auto-focus-on-mount",
33931
- "reflects": true,
34149
+ "description": "The size attribute of the input field.\nSpecifies the width of the input field.",
34150
+ "default": "undefined",
34151
+ "fieldName": "size",
33932
34152
  "inheritedFrom": {
33933
- "name": "AutoFocusOnMountMixin",
33934
- "module": "utils/mixins/AutoFocusOnMountMixin.js"
34153
+ "name": "Input",
34154
+ "module": "src/components/input/input.component.ts"
33935
34155
  }
33936
34156
  },
33937
34157
  {
33938
- "kind": "field",
33939
- "name": "name",
34158
+ "name": "clear-aria-label",
33940
34159
  "type": {
33941
34160
  "text": "string"
33942
34161
  },
33943
34162
  "default": "''",
33944
- "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
33945
- "attribute": "name",
33946
- "reflects": true,
34163
+ "description": "Aria label for the trailing button. If trailing button is set to true, this label is used for the clear button.",
34164
+ "fieldName": "clearAriaLabel",
33947
34165
  "inheritedFrom": {
33948
- "name": "FormInternalsMixin",
33949
- "module": "utils/mixins/FormInternalsMixin.js"
34166
+ "name": "Input",
34167
+ "module": "src/components/input/input.component.ts"
33950
34168
  }
33951
34169
  },
33952
34170
  {
33953
- "kind": "field",
33954
- "name": "value",
34171
+ "name": "disabled",
33955
34172
  "type": {
33956
- "text": "string"
34173
+ "text": "boolean | undefined"
33957
34174
  },
33958
- "default": "''",
33959
- "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
33960
- "attribute": "value",
33961
- "reflects": true,
34175
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
34176
+ "default": "undefined",
34177
+ "fieldName": "disabled",
33962
34178
  "inheritedFrom": {
33963
- "name": "FormInternalsMixin",
33964
- "module": "utils/mixins/FormInternalsMixin.js"
34179
+ "name": "FormfieldWrapper",
34180
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
33965
34181
  }
33966
34182
  },
33967
34183
  {
33968
- "kind": "field",
33969
- "name": "validationMessage",
34184
+ "name": "label",
33970
34185
  "type": {
33971
34186
  "text": "string | undefined"
33972
34187
  },
33973
- "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
33974
- "attribute": "validation-message",
33975
- "reflects": true,
34188
+ "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
34189
+ "fieldName": "label",
33976
34190
  "inheritedFrom": {
33977
- "name": "FormInternalsMixin",
33978
- "module": "utils/mixins/FormInternalsMixin.js"
34191
+ "name": "FormfieldWrapper",
34192
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
33979
34193
  }
33980
34194
  },
33981
34195
  {
33982
- "kind": "field",
33983
- "name": "validity",
34196
+ "name": "required",
33984
34197
  "type": {
33985
- "text": "ValidityState"
34198
+ "text": "boolean"
33986
34199
  },
33987
- "readonly": true,
34200
+ "default": "false",
34201
+ "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
34202
+ "fieldName": "required",
33988
34203
  "inheritedFrom": {
33989
- "name": "FormInternalsMixin",
33990
- "module": "utils/mixins/FormInternalsMixin.js"
34204
+ "name": "FormfieldWrapper",
34205
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
33991
34206
  }
33992
34207
  },
33993
34208
  {
33994
- "kind": "field",
33995
- "name": "willValidate",
33996
- "readonly": true,
34209
+ "name": "help-text-type",
34210
+ "type": {
34211
+ "text": "ValidationType"
34212
+ },
34213
+ "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
34214
+ "fieldName": "helpTextType",
33997
34215
  "inheritedFrom": {
33998
- "name": "FormInternalsMixin",
33999
- "module": "utils/mixins/FormInternalsMixin.js"
34216
+ "name": "FormfieldWrapper",
34217
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34000
34218
  }
34001
34219
  },
34002
34220
  {
34003
- "kind": "method",
34004
- "name": "setValidity",
34005
- "description": "Sets the validity of the input field based on the input field's validity.",
34006
- "return": {
34007
- "type": {
34008
- "text": ""
34009
- }
34221
+ "name": "help-text",
34222
+ "type": {
34223
+ "text": "string | undefined"
34010
34224
  },
34225
+ "description": "The help text that is displayed below the input field.",
34226
+ "fieldName": "helpText",
34011
34227
  "inheritedFrom": {
34012
- "name": "FormInternalsMixin",
34013
- "module": "utils/mixins/FormInternalsMixin.js"
34228
+ "name": "FormfieldWrapper",
34229
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34014
34230
  }
34015
34231
  },
34016
34232
  {
34017
- "kind": "method",
34018
- "name": "checkValidity",
34019
- "return": {
34020
- "type": {
34021
- "text": "boolean"
34022
- }
34233
+ "name": "toggletip-text",
34234
+ "type": {
34235
+ "text": "string | undefined"
34023
34236
  },
34237
+ "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
34238
+ "fieldName": "toggletipText",
34024
34239
  "inheritedFrom": {
34025
- "name": "FormInternalsMixin",
34026
- "module": "utils/mixins/FormInternalsMixin.js"
34240
+ "name": "FormfieldWrapper",
34241
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34027
34242
  }
34028
34243
  },
34029
34244
  {
34030
- "kind": "method",
34031
- "name": "reportValidity",
34245
+ "name": "toggletip-placement",
34246
+ "type": {
34247
+ "text": "PopoverPlacement"
34248
+ },
34249
+ "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
34250
+ "default": "'top'",
34251
+ "fieldName": "toggletipPlacement",
34032
34252
  "inheritedFrom": {
34033
- "name": "FormInternalsMixin",
34034
- "module": "utils/mixins/FormInternalsMixin.js"
34253
+ "name": "FormfieldWrapper",
34254
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34035
34255
  }
34036
34256
  },
34037
34257
  {
34038
- "kind": "field",
34039
- "name": "dataAriaLabel",
34258
+ "name": "info-icon-aria-label",
34040
34259
  "type": {
34041
- "text": "string | null"
34260
+ "text": "string | undefined"
34042
34261
  },
34043
- "default": "null",
34044
- "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
34045
- "attribute": "data-aria-label",
34046
- "reflects": true,
34262
+ "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.",
34263
+ "fieldName": "infoIconAriaLabel",
34047
34264
  "inheritedFrom": {
34048
- "name": "DataAriaLabelMixin",
34049
- "module": "utils/mixins/DataAriaLabelMixin.js"
34265
+ "name": "FormfieldWrapper",
34266
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
34267
+ }
34268
+ }
34269
+ ],
34270
+ "cssProperties": [
34271
+ {
34272
+ "description": "Border color for the input container when disabled",
34273
+ "name": "--mdc-input-disabled-border-color",
34274
+ "inheritedFrom": {
34275
+ "name": "Input",
34276
+ "module": "src/components/input/input.component.ts"
34050
34277
  }
34051
34278
  },
34052
34279
  {
34053
- "kind": "field",
34054
- "name": "placeholder",
34055
- "type": {
34056
- "text": "string"
34057
- },
34058
- "default": "''",
34059
- "description": "The placeholder text that is displayed when the input field is empty.",
34060
- "attribute": "placeholder",
34280
+ "description": "Text color for the input field when disabled",
34281
+ "name": "--mdc-input-disabled-text-color",
34061
34282
  "inheritedFrom": {
34062
34283
  "name": "Input",
34063
- "module": "components/input/input.component.js"
34284
+ "module": "src/components/input/input.component.ts"
34064
34285
  }
34065
34286
  },
34066
34287
  {
34067
- "kind": "field",
34068
- "name": "readonly",
34069
- "type": {
34070
- "text": "boolean"
34071
- },
34072
- "default": "false",
34073
- "description": "readonly attribute of the input field. If true, the input field is read-only.",
34074
- "attribute": "readonly",
34288
+ "description": "Background color for the input field when disabled",
34289
+ "name": "--mdc-input-disabled-background-color",
34075
34290
  "inheritedFrom": {
34076
34291
  "name": "Input",
34077
- "module": "components/input/input.component.js"
34292
+ "module": "src/components/input/input.component.ts"
34078
34293
  }
34079
34294
  },
34080
34295
  {
34081
- "kind": "field",
34082
- "name": "prefixText",
34083
- "type": {
34084
- "text": "string | undefined"
34085
- },
34086
- "description": "The prefix text that is displayed before the input field. It has a max length of 10 characters.\nWhen the prefix text is set, make sure to set the 'data-aria-label'\nattribute with the appropriate value for accessibility.",
34087
- "attribute": "prefix-text",
34296
+ "description": "Border color for the input container",
34297
+ "name": "--mdc-input-border-color",
34088
34298
  "inheritedFrom": {
34089
34299
  "name": "Input",
34090
- "module": "components/input/input.component.js"
34300
+ "module": "src/components/input/input.component.ts"
34091
34301
  }
34092
34302
  },
34093
34303
  {
34094
- "kind": "field",
34095
- "name": "leadingIcon",
34096
- "type": {
34097
- "text": "IconNames | undefined"
34098
- },
34099
- "description": "The leading icon that is displayed before the input field.",
34100
- "attribute": "leading-icon",
34304
+ "description": "Text color for the input field",
34305
+ "name": "--mdc-input-text-color",
34101
34306
  "inheritedFrom": {
34102
34307
  "name": "Input",
34103
- "module": "components/input/input.component.js"
34308
+ "module": "src/components/input/input.component.ts"
34104
34309
  }
34105
34310
  },
34106
34311
  {
34107
- "kind": "field",
34108
- "name": "trailingButton",
34109
- "type": {
34110
- "text": "boolean"
34111
- },
34112
- "default": "false",
34113
- "description": "The trailing button when set to true, shows a clear button that clears the input field.",
34114
- "attribute": "trailing-button",
34312
+ "description": "Background color for the input field",
34313
+ "name": "--mdc-input-background-color",
34115
34314
  "inheritedFrom": {
34116
34315
  "name": "Input",
34117
- "module": "components/input/input.component.js"
34316
+ "module": "src/components/input/input.component.ts"
34118
34317
  }
34119
34318
  },
34120
34319
  {
34121
- "kind": "field",
34122
- "name": "maxlength",
34123
- "type": {
34124
- "text": "number | undefined"
34125
- },
34126
- "description": "The maximum number of characters that the input field can accept.",
34127
- "attribute": "maxlength",
34320
+ "description": "Background color for the selected text",
34321
+ "name": "--mdc-input-selection-background-color",
34128
34322
  "inheritedFrom": {
34129
34323
  "name": "Input",
34130
- "module": "components/input/input.component.js"
34324
+ "module": "src/components/input/input.component.ts"
34131
34325
  }
34132
34326
  },
34133
34327
  {
34134
- "kind": "field",
34135
- "name": "minlength",
34136
- "type": {
34137
- "text": "number | undefined"
34138
- },
34139
- "description": "The minimum number of characters that the input field can accept.",
34140
- "attribute": "minlength",
34328
+ "description": "Text color for the selected text",
34329
+ "name": "--mdc-input-selection-text-color",
34141
34330
  "inheritedFrom": {
34142
34331
  "name": "Input",
34143
- "module": "components/input/input.component.js"
34332
+ "module": "src/components/input/input.component.ts"
34144
34333
  }
34145
34334
  },
34146
34335
  {
34147
- "kind": "field",
34148
- "name": "autocapitalize",
34149
- "type": {
34150
- "text": "AutoCapitalizeType"
34151
- },
34152
- "description": "The autocapitalize attribute of the input field.",
34153
- "default": "'off'",
34154
- "attribute": "autocapitalize",
34336
+ "description": "Text color for the help text",
34337
+ "name": "--mdc-input-support-text-color",
34155
34338
  "inheritedFrom": {
34156
34339
  "name": "Input",
34157
- "module": "components/input/input.component.js"
34340
+ "module": "src/components/input/input.component.ts"
34158
34341
  }
34159
34342
  },
34160
34343
  {
34161
- "kind": "field",
34162
- "name": "autocomplete",
34163
- "type": {
34164
- "text": "AutoCompleteType"
34165
- },
34166
- "description": "The autocomplete attribute of the input field.",
34167
- "default": "'off'",
34168
- "attribute": "autocomplete",
34344
+ "description": "Background color for the input field when hovered",
34345
+ "name": "--mdc-input-hover-background-color",
34169
34346
  "inheritedFrom": {
34170
34347
  "name": "Input",
34171
- "module": "components/input/input.component.js"
34348
+ "module": "src/components/input/input.component.ts"
34172
34349
  }
34173
34350
  },
34174
34351
  {
34175
- "kind": "field",
34176
- "name": "dirname",
34177
- "type": {
34178
- "text": "string | undefined"
34179
- },
34180
- "description": "Specifies the name of the directionality of text for submission purposes (e.g., \"rtl\" for right-to-left).",
34181
- "attribute": "dirname",
34352
+ "description": "Background color for the input field when focused",
34353
+ "name": "--mdc-input-focused-background-color",
34182
34354
  "inheritedFrom": {
34183
34355
  "name": "Input",
34184
- "module": "components/input/input.component.js"
34356
+ "module": "src/components/input/input.component.ts"
34185
34357
  }
34186
34358
  },
34187
34359
  {
34188
- "kind": "field",
34189
- "name": "pattern",
34190
- "type": {
34191
- "text": "string | undefined"
34192
- },
34193
- "description": "The pattern attribute of the input field.\nSpecifies a regular expression that the input value must match for validation purposes.",
34194
- "attribute": "pattern",
34360
+ "description": "Border color for the input container when focused",
34361
+ "name": "--mdc-input-focused-border-color",
34195
34362
  "inheritedFrom": {
34196
34363
  "name": "Input",
34197
- "module": "components/input/input.component.js"
34364
+ "module": "src/components/input/input.component.ts"
34365
+ }
34366
+ },
34367
+ {
34368
+ "description": "Border color for the input container when error",
34369
+ "name": "--mdc-input-error-border-color",
34370
+ "inheritedFrom": {
34371
+ "name": "Input",
34372
+ "module": "src/components/input/input.component.ts"
34198
34373
  }
34199
34374
  },
34375
+ {
34376
+ "description": "Border color for the input container when warning",
34377
+ "name": "--mdc-input-warning-border-color",
34378
+ "inheritedFrom": {
34379
+ "name": "Input",
34380
+ "module": "src/components/input/input.component.ts"
34381
+ }
34382
+ },
34383
+ {
34384
+ "description": "Border color for the input container when success",
34385
+ "name": "--mdc-input-success-border-color",
34386
+ "inheritedFrom": {
34387
+ "name": "Input",
34388
+ "module": "src/components/input/input.component.ts"
34389
+ }
34390
+ },
34391
+ {
34392
+ "description": "Border color for the input container when primary",
34393
+ "name": "--mdc-input-primary-border-color",
34394
+ "inheritedFrom": {
34395
+ "name": "Input",
34396
+ "module": "src/components/input/input.component.ts"
34397
+ }
34398
+ }
34399
+ ]
34400
+ }
34401
+ ],
34402
+ "exports": [
34403
+ {
34404
+ "kind": "js",
34405
+ "name": "default",
34406
+ "declaration": {
34407
+ "name": "Searchfield",
34408
+ "module": "components/searchfield/searchfield.component.js"
34409
+ }
34410
+ }
34411
+ ]
34412
+ },
34413
+ {
34414
+ "kind": "javascript-module",
34415
+ "path": "components/select/select.component.js",
34416
+ "declarations": [
34417
+ {
34418
+ "kind": "class",
34419
+ "description": "The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\nIt is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n\nEvery mdc-option should have a `value` attribute set to ensure proper form submission.\n\nTo set a default option, use the `selected` attribute on the `mdc-option` element.\n\n**Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n\nIf you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.",
34420
+ "name": "Select",
34421
+ "cssProperties": [
34422
+ {
34423
+ "description": "The background color of the combobox of select.",
34424
+ "name": "--mdc-select-background-color"
34425
+ },
34426
+ {
34427
+ "description": "The background color of the combobox of select when hovered.",
34428
+ "name": "--mdc-select-background-color-hover"
34429
+ },
34430
+ {
34431
+ "description": "The background color of the combobox of select when active.",
34432
+ "name": "--mdc-select-background-color-active"
34433
+ },
34434
+ {
34435
+ "description": "The background color of the combobox of select when disabled.",
34436
+ "name": "--mdc-select-background-color-disabled"
34437
+ },
34438
+ {
34439
+ "description": "The text color of the select.",
34440
+ "name": "--mdc-select-text-color"
34441
+ },
34442
+ {
34443
+ "description": "The text color of the selected option in the select.",
34444
+ "name": "--mdc-select-text-color-selected"
34445
+ },
34446
+ {
34447
+ "description": "The text color of the select when disabled.",
34448
+ "name": "--mdc-select-text-color-disabled"
34449
+ },
34450
+ {
34451
+ "description": "The border color of the select.",
34452
+ "name": "--mdc-select-border-color"
34453
+ },
34454
+ {
34455
+ "description": "The border color of the select when disabled.",
34456
+ "name": "--mdc-select-border-color-disabled"
34457
+ },
34458
+ {
34459
+ "description": "The border color of the select when in success state.",
34460
+ "name": "--mdc-select-border-color-success"
34461
+ },
34462
+ {
34463
+ "description": "The border color of the select when in warning state.",
34464
+ "name": "--mdc-select-border-color-warning"
34465
+ },
34466
+ {
34467
+ "description": "The border color of the select when in error state.",
34468
+ "name": "--mdc-select-border-color-error"
34469
+ },
34470
+ {
34471
+ "description": "The width of the select.",
34472
+ "name": "--mdc-select-width"
34473
+ },
34474
+ {
34475
+ "description": "The height of the listbox inside the select.",
34476
+ "name": "--mdc-select-listbox-height"
34477
+ },
34478
+ {
34479
+ "description": "The width of the listbox inside the select (default: `--mdc-select-width`).",
34480
+ "name": "--mdc-select-listbox-width"
34481
+ }
34482
+ ],
34483
+ "slots": [
34484
+ {
34485
+ "description": "This is a default/unnamed slot for Selectlistbox including options and/or option group.",
34486
+ "name": "default"
34487
+ }
34488
+ ],
34489
+ "members": [
34200
34490
  {
34201
34491
  "kind": "field",
34202
- "name": "list",
34492
+ "name": "placeholder",
34203
34493
  "type": {
34204
34494
  "text": "string | undefined"
34205
34495
  },
34206
- "description": "The list attribute of the input field.\nIdentifies a list of pre-defined options to suggest to the user.",
34207
- "attribute": "list",
34208
- "inheritedFrom": {
34209
- "name": "Input",
34210
- "module": "components/input/input.component.js"
34211
- }
34496
+ "description": "The placeholder text which will be shown on the text if provided.",
34497
+ "attribute": "placeholder"
34212
34498
  },
34213
34499
  {
34214
34500
  "kind": "field",
34215
- "name": "size",
34501
+ "name": "readonly",
34216
34502
  "type": {
34217
- "text": "number | undefined | undefined"
34503
+ "text": "boolean"
34218
34504
  },
34219
- "description": "The size attribute of the input field.\nSpecifies the width of the input field.",
34505
+ "default": "false",
34506
+ "description": "readonly attribute of the select field. If true, the select is read-only.",
34507
+ "attribute": "readonly"
34508
+ },
34509
+ {
34510
+ "kind": "field",
34511
+ "name": "placement",
34512
+ "type": {
34513
+ "text": "Placement"
34514
+ },
34515
+ "description": "The placeholder text which will be shown on the text if provided.",
34516
+ "attribute": "placement",
34517
+ "reflects": true
34518
+ },
34519
+ {
34520
+ "kind": "field",
34521
+ "name": "softDisabled",
34522
+ "type": {
34523
+ "text": "boolean | undefined"
34524
+ },
34525
+ "description": "Indicates whether the select is soft disabled.\nWhen set to `true`, the select appears visually disabled but still allows\nfocus.",
34220
34526
  "default": "undefined",
34221
- "attribute": "size",
34222
- "inheritedFrom": {
34223
- "name": "Input",
34224
- "module": "components/input/input.component.js"
34225
- }
34527
+ "attribute": "soft-disabled",
34528
+ "reflects": true
34226
34529
  },
34227
34530
  {
34228
34531
  "kind": "field",
34229
- "name": "clearAriaLabel",
34532
+ "name": "boundary",
34230
34533
  "type": {
34231
- "text": "string"
34534
+ "text": "'clippingAncestors' | string"
34232
34535
  },
34233
- "default": "''",
34234
- "description": "Aria label for the trailing button. If trailing button is set to true, this label is used for the clear button.",
34235
- "attribute": "clear-aria-label",
34236
- "inheritedFrom": {
34237
- "name": "Input",
34238
- "module": "components/input/input.component.js"
34536
+ "description": "This describes the clipping element(s) or area that overflow of the used popover will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
34537
+ "default": "'clippingAncestors'",
34538
+ "attribute": "boundary",
34539
+ "reflects": true
34540
+ },
34541
+ {
34542
+ "kind": "field",
34543
+ "name": "strategy",
34544
+ "type": {
34545
+ "text": "'absolute' | 'fixed'"
34546
+ },
34547
+ "description": "The strategy of the popover within Select.\nThis determines how the popover is positioned in the DOM.\n\nIn case `boundary` is set to something other than 'clippingAncestors',\nit might be necessary to set the `strategy` to 'fixed' to ensure that the popover\nis not getting clipped by scrollable containers enclosing the select.",
34548
+ "default": "absolute",
34549
+ "attribute": "strategy",
34550
+ "reflects": true
34551
+ },
34552
+ {
34553
+ "kind": "field",
34554
+ "name": "popoverZIndex",
34555
+ "type": {
34556
+ "text": "number"
34557
+ },
34558
+ "description": "The z-index of the popover within Select.\n\nOverride this to make sure this stays on top of other components.",
34559
+ "default": "1000",
34560
+ "attribute": "popover-z-index",
34561
+ "reflects": true
34562
+ },
34563
+ {
34564
+ "kind": "field",
34565
+ "name": "backdropAppendTo",
34566
+ "type": {
34567
+ "text": "string | undefined"
34568
+ },
34569
+ "description": "ID of the element where the backdrop will be appended to.\nThis is useful to ensure that the backdrop is appended to the correct element in the DOM.\nIf not set, the backdrop will be appended to the parent element of the select.",
34570
+ "attribute": "backdrop-append-to",
34571
+ "reflects": true
34572
+ },
34573
+ {
34574
+ "kind": "method",
34575
+ "name": "getAllValidOptions",
34576
+ "privacy": "private",
34577
+ "return": {
34578
+ "type": {
34579
+ "text": "Array<Option>"
34580
+ }
34239
34581
  }
34240
34582
  },
34241
34583
  {
34242
34584
  "kind": "method",
34243
- "name": "setInputValidity",
34585
+ "name": "getFirstValidOption",
34244
34586
  "privacy": "private",
34245
- "inheritedFrom": {
34246
- "name": "Input",
34247
- "module": "components/input/input.component.js"
34587
+ "return": {
34588
+ "type": {
34589
+ "text": "Option | null"
34590
+ }
34248
34591
  }
34249
34592
  },
34250
34593
  {
34251
34594
  "kind": "method",
34252
- "name": "updateValue",
34595
+ "name": "getLastValidOption",
34253
34596
  "privacy": "private",
34254
- "description": "Updates the value of the input field.\nSets the form value.",
34255
34597
  "return": {
34256
34598
  "type": {
34257
- "text": ""
34599
+ "text": "Option | null"
34258
34600
  }
34259
- },
34260
- "inheritedFrom": {
34261
- "name": "Input",
34262
- "module": "components/input/input.component.js"
34263
34601
  }
34264
34602
  },
34265
34603
  {
34266
34604
  "kind": "method",
34267
- "name": "onInput",
34605
+ "name": "getFirstSelectedOption",
34268
34606
  "privacy": "private",
34269
- "description": "Handles the input event of the input field.\nUpdates the value and sets the validity of the input field.",
34270
- "inheritedFrom": {
34271
- "name": "Input",
34272
- "module": "components/input/input.component.js"
34607
+ "return": {
34608
+ "type": {
34609
+ "text": "Option | null"
34610
+ }
34273
34611
  }
34274
34612
  },
34275
34613
  {
34276
34614
  "kind": "method",
34277
- "name": "onChange",
34615
+ "name": "modifyListBoxWrapper",
34616
+ "privacy": "private",
34617
+ "description": "Modifies the listbox wrapper to ensure it has the correct attributes\nand IDs for accessibility.\n\nOnce [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers,\nthis an be removed and mdc-option can be used directly in the select component with a listbox in a different\nshadow root and aria-owns attribute to connect them."
34618
+ },
34619
+ {
34620
+ "kind": "method",
34621
+ "name": "handleOptionsClick",
34278
34622
  "privacy": "private",
34623
+ "return": {
34624
+ "type": {
34625
+ "text": "void"
34626
+ }
34627
+ },
34279
34628
  "parameters": [
34280
34629
  {
34281
34630
  "name": "event",
34282
34631
  "type": {
34283
- "text": "Event"
34632
+ "text": "MouseEvent"
34284
34633
  },
34285
- "description": "Event which contains information about the value change."
34634
+ "description": "The event which triggered this function."
34286
34635
  }
34287
34636
  ],
34288
- "description": "Handles the change event of the input field.\nUpdates the value and sets the validity of the input field.\n\nThe 'change' event does not bubble up through the shadow DOM as it was not composed.\nTherefore, we need to re-dispatch the same event to ensure it is propagated correctly.\nRead more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed",
34289
- "inheritedFrom": {
34290
- "name": "Input",
34291
- "module": "components/input/input.component.js"
34292
- }
34637
+ "description": "A private method which is called when an option is clicked.\nIt sets the selected option, removes selected from other options, updates the tabindex for all options,\ncloses the popover, and fires the change and input events."
34293
34638
  },
34294
34639
  {
34295
34640
  "kind": "method",
34296
- "name": "renderLeadingIcon",
34297
- "privacy": "protected",
34298
- "description": "Renders the leading icon before the input field.\nIf the leading icon is not set, it will not be displayed.",
34641
+ "name": "setSelectedOption",
34642
+ "privacy": "private",
34299
34643
  "return": {
34300
34644
  "type": {
34301
- "text": ""
34645
+ "text": "void"
34302
34646
  }
34303
34647
  },
34648
+ "parameters": [
34649
+ {
34650
+ "name": "option",
34651
+ "type": {
34652
+ "text": "Option | null"
34653
+ },
34654
+ "description": "The option element in DOM which gets selected."
34655
+ }
34656
+ ],
34657
+ "description": "Sets the selected option in the component state and updates the input element's value.\nThis method ensures that only the selected option is marked as selected in the DOM,\nand updates the tabindex for all options accordingly.\nIt also updates the validity of the input element based on the selected option.\nThis method is called when an option is selected."
34658
+ },
34659
+ {
34660
+ "kind": "method",
34661
+ "name": "updateTabIndexForAllOptions",
34662
+ "privacy": "private",
34663
+ "return": {
34664
+ "type": {
34665
+ "text": "void"
34666
+ }
34667
+ },
34668
+ "parameters": [
34669
+ {
34670
+ "name": "option",
34671
+ "optional": true,
34672
+ "type": {
34673
+ "text": "Option | null"
34674
+ },
34675
+ "description": "The option which tabIndex should be set to 0."
34676
+ }
34677
+ ],
34678
+ "description": "Updates the tabindex of all options.\nSets the tabindex of the selected option to '0' and others to '-1'."
34679
+ },
34680
+ {
34681
+ "kind": "method",
34682
+ "name": "updateSelectedInChildOptions",
34683
+ "privacy": "private",
34684
+ "return": {
34685
+ "type": {
34686
+ "text": "void"
34687
+ }
34688
+ },
34689
+ "parameters": [
34690
+ {
34691
+ "name": "selectedOption",
34692
+ "type": {
34693
+ "text": "Option | null"
34694
+ },
34695
+ "description": "The option which gets selected"
34696
+ }
34697
+ ],
34698
+ "description": "Sets selected attribute on the selected option and removes it from all options"
34699
+ },
34700
+ {
34701
+ "kind": "method",
34702
+ "name": "fireEvents",
34703
+ "privacy": "private",
34704
+ "return": {
34705
+ "type": {
34706
+ "text": "void"
34707
+ }
34708
+ },
34709
+ "description": "A private method which is called to fire the change and input events.\nIt dispatches the input and change events with the selected option's value and label."
34710
+ },
34711
+ {
34712
+ "kind": "method",
34713
+ "name": "dispatchChange",
34714
+ "privacy": "private",
34715
+ "return": {
34716
+ "type": {
34717
+ "text": "void"
34718
+ }
34719
+ },
34720
+ "parameters": [
34721
+ {
34722
+ "name": "option",
34723
+ "type": {
34724
+ "text": "Option"
34725
+ }
34726
+ }
34727
+ ]
34728
+ },
34729
+ {
34730
+ "kind": "method",
34731
+ "name": "dispatchInput",
34732
+ "privacy": "private",
34733
+ "return": {
34734
+ "type": {
34735
+ "text": "void"
34736
+ }
34737
+ },
34738
+ "parameters": [
34739
+ {
34740
+ "name": "option",
34741
+ "type": {
34742
+ "text": "Option"
34743
+ }
34744
+ }
34745
+ ]
34746
+ },
34747
+ {
34748
+ "kind": "method",
34749
+ "name": "handleClickCombobox",
34750
+ "privacy": "private",
34751
+ "return": {
34752
+ "type": {
34753
+ "text": "void"
34754
+ }
34755
+ },
34756
+ "parameters": [
34757
+ {
34758
+ "name": "event",
34759
+ "type": {
34760
+ "text": "MouseEvent"
34761
+ },
34762
+ "description": "The mouse event which triggered this function."
34763
+ }
34764
+ ],
34765
+ "description": "Handles the click event on the visual combobox.\nIf the select is disabled, soft-disabled or readonly, it does nothing.\nIf the popover is already open, it closes it.\nIf it is closed, it opens it."
34766
+ },
34767
+ {
34768
+ "kind": "method",
34769
+ "name": "handleKeydownCombobox",
34770
+ "privacy": "private",
34771
+ "return": {
34772
+ "type": {
34773
+ "text": "void"
34774
+ }
34775
+ },
34776
+ "parameters": [
34777
+ {
34778
+ "name": "event",
34779
+ "type": {
34780
+ "text": "KeyboardEvent"
34781
+ },
34782
+ "description": "The keyboard event."
34783
+ }
34784
+ ],
34785
+ "description": "Handles the keydown event on the select element when the popover is closed.\nThe options are as follows:\n- ARROW_DOWN, ARROW_UP, SPACE: Opens the popover and prevents the default scrolling behavior.\n- ENTER: Opens the popover, prevents default scrolling, and submits the form if the popover is closed.\n- HOME: Opens the popover and sets focus and tabindex on the first option.\n- END: Opens the popover and sets focus and tabindex on the last option."
34786
+ },
34787
+ {
34788
+ "kind": "method",
34789
+ "name": "handlePopoverKeydown",
34790
+ "privacy": "private",
34791
+ "return": {
34792
+ "type": {
34793
+ "text": "void"
34794
+ }
34795
+ },
34796
+ "parameters": [
34797
+ {
34798
+ "name": "event",
34799
+ "type": {
34800
+ "text": "KeyboardEvent"
34801
+ },
34802
+ "description": "The keyboard event."
34803
+ }
34804
+ ],
34805
+ "description": "Handles the keydown event on the select element when the popover is open.\nThe options are as follows:\n- HOME: Sets focus and tabindex on the first option.\n- END: Sets focus and tabindex on the last option.\n- ARROW_DOWN, ARROW_UP, PAGE_DOWN, PAGE_UP: Handles navigation between options."
34806
+ },
34807
+ {
34808
+ "kind": "method",
34809
+ "name": "updateState",
34810
+ "privacy": "public",
34811
+ "return": {
34812
+ "type": {
34813
+ "text": "void"
34814
+ }
34815
+ },
34816
+ "description": "Updates the state of the select component.\nThis public method should be fired when the selected on the option components is updated from the outside.\nIt ensures that the selected attribute is set correctly on the options\nand that the aria-selected attribute is updated accordingly."
34817
+ },
34818
+ {
34819
+ "kind": "field",
34820
+ "name": "autoFocusOnMount",
34821
+ "type": {
34822
+ "text": "boolean"
34823
+ },
34824
+ "default": "false",
34825
+ "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
34826
+ "attribute": "auto-focus-on-mount",
34827
+ "reflects": true,
34304
34828
  "inheritedFrom": {
34305
- "name": "Input",
34306
- "module": "components/input/input.component.js"
34829
+ "name": "AutoFocusOnMountMixin",
34830
+ "module": "utils/mixins/AutoFocusOnMountMixin.js"
34831
+ }
34832
+ },
34833
+ {
34834
+ "kind": "field",
34835
+ "name": "name",
34836
+ "type": {
34837
+ "text": "string"
34838
+ },
34839
+ "default": "''",
34840
+ "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
34841
+ "attribute": "name",
34842
+ "reflects": true,
34843
+ "inheritedFrom": {
34844
+ "name": "FormInternalsMixin",
34845
+ "module": "utils/mixins/FormInternalsMixin.js"
34846
+ }
34847
+ },
34848
+ {
34849
+ "kind": "field",
34850
+ "name": "value",
34851
+ "type": {
34852
+ "text": "string"
34853
+ },
34854
+ "default": "''",
34855
+ "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
34856
+ "attribute": "value",
34857
+ "reflects": true,
34858
+ "inheritedFrom": {
34859
+ "name": "FormInternalsMixin",
34860
+ "module": "utils/mixins/FormInternalsMixin.js"
34861
+ }
34862
+ },
34863
+ {
34864
+ "kind": "field",
34865
+ "name": "validationMessage",
34866
+ "type": {
34867
+ "text": "string | undefined"
34868
+ },
34869
+ "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
34870
+ "attribute": "validation-message",
34871
+ "reflects": true,
34872
+ "inheritedFrom": {
34873
+ "name": "FormInternalsMixin",
34874
+ "module": "utils/mixins/FormInternalsMixin.js"
34875
+ }
34876
+ },
34877
+ {
34878
+ "kind": "field",
34879
+ "name": "validity",
34880
+ "type": {
34881
+ "text": "ValidityState"
34882
+ },
34883
+ "readonly": true,
34884
+ "inheritedFrom": {
34885
+ "name": "FormInternalsMixin",
34886
+ "module": "utils/mixins/FormInternalsMixin.js"
34887
+ }
34888
+ },
34889
+ {
34890
+ "kind": "field",
34891
+ "name": "willValidate",
34892
+ "readonly": true,
34893
+ "inheritedFrom": {
34894
+ "name": "FormInternalsMixin",
34895
+ "module": "utils/mixins/FormInternalsMixin.js"
34307
34896
  }
34308
34897
  },
34309
34898
  {
34310
34899
  "kind": "method",
34311
- "name": "renderPrefixText",
34312
- "privacy": "protected",
34313
- "description": "Renders the prefix text before the input field.\nIf the prefix text is more than 10 characters,\n- it will not be displayed.\n- the validation messsage will be displayed.\n\n Note: We are setting aria-hidden so that the screen reader does not read the prefix text.\n The consumers should set the appropriate aria-label for the input field using 'data-aria-label' attribute.",
34900
+ "name": "setValidity",
34901
+ "description": "Sets the validity of the input field based on the input field's validity.",
34314
34902
  "return": {
34315
34903
  "type": {
34316
34904
  "text": ""
34317
34905
  }
34318
34906
  },
34319
34907
  "inheritedFrom": {
34320
- "name": "Input",
34321
- "module": "components/input/input.component.js"
34908
+ "name": "FormInternalsMixin",
34909
+ "module": "utils/mixins/FormInternalsMixin.js"
34322
34910
  }
34323
34911
  },
34324
34912
  {
34325
34913
  "kind": "method",
34326
- "name": "renderTrailingButton",
34327
- "privacy": "protected",
34328
- "parameters": [
34329
- {
34330
- "name": "show",
34331
- "default": "false"
34332
- }
34333
- ],
34334
- "description": "Renders the trailing button to clear the input field if the trailingButton is set to true.",
34914
+ "name": "checkValidity",
34335
34915
  "return": {
34336
34916
  "type": {
34337
- "text": ""
34917
+ "text": "boolean"
34338
34918
  }
34339
34919
  },
34340
34920
  "inheritedFrom": {
34341
- "name": "Input",
34342
- "module": "components/input/input.component.js"
34921
+ "name": "FormInternalsMixin",
34922
+ "module": "utils/mixins/FormInternalsMixin.js"
34343
34923
  }
34344
34924
  },
34345
34925
  {
34346
34926
  "kind": "method",
34347
- "name": "renderInputElement",
34348
- "privacy": "protected",
34349
- "parameters": [
34350
- {
34351
- "name": "type",
34352
- "type": {
34353
- "text": "InputType"
34354
- }
34355
- },
34356
- {
34357
- "name": "hidePlaceholder",
34358
- "default": "false"
34359
- }
34360
- ],
34927
+ "name": "reportValidity",
34361
34928
  "inheritedFrom": {
34362
- "name": "Input",
34363
- "module": "components/input/input.component.js"
34929
+ "name": "FormInternalsMixin",
34930
+ "module": "utils/mixins/FormInternalsMixin.js"
34931
+ }
34932
+ },
34933
+ {
34934
+ "kind": "field",
34935
+ "name": "dataAriaLabel",
34936
+ "type": {
34937
+ "text": "string | null"
34938
+ },
34939
+ "default": "null",
34940
+ "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
34941
+ "attribute": "data-aria-label",
34942
+ "reflects": true,
34943
+ "inheritedFrom": {
34944
+ "name": "DataAriaLabelMixin",
34945
+ "module": "utils/mixins/DataAriaLabelMixin.js"
34364
34946
  }
34365
34947
  },
34366
34948
  {
@@ -34556,147 +35138,45 @@
34556
35138
  ],
34557
35139
  "events": [
34558
35140
  {
34559
- "description": "(React: onInput) This event is dispatched when the value of the input field changes (every press).",
34560
- "name": "input",
34561
- "reactName": "onInput",
34562
- "inheritedFrom": {
34563
- "name": "Input",
34564
- "module": "src/components/input/input.component.ts"
34565
- }
34566
- },
34567
- {
34568
- "description": "(React: onChange) This event is dispatched when the value of the input field changes (on blur).",
34569
35141
  "name": "change",
34570
- "reactName": "onChange",
34571
- "inheritedFrom": {
34572
- "name": "Input",
34573
- "module": "src/components/input/input.component.ts"
34574
- }
34575
- },
34576
- {
34577
- "description": "(React: onFocus) This event is dispatched when the input receives focus.",
34578
- "name": "focus",
34579
- "reactName": "onFocus",
34580
- "inheritedFrom": {
34581
- "name": "Input",
34582
- "module": "src/components/input/input.component.ts"
34583
- }
34584
- },
34585
- {
34586
- "description": "(React: onBlur) This event is dispatched when the input loses focus.",
34587
- "name": "blur",
34588
- "reactName": "onBlur",
34589
- "inheritedFrom": {
34590
- "name": "Input",
34591
- "module": "src/components/input/input.component.ts"
34592
- }
34593
- },
34594
- {
34595
- "name": "clear",
34596
35142
  "type": {
34597
35143
  "text": "CustomEvent"
34598
35144
  },
34599
- "description": "(React: onClear) This event is dispatched when the input text is cleared.",
34600
- "reactName": "onClear",
34601
- "inheritedFrom": {
34602
- "name": "Input",
34603
- "module": "src/components/input/input.component.ts"
34604
- }
34605
- },
34606
- {
34607
- "type": {
34608
- "text": "EventConstructor"
34609
- },
34610
- "inheritedFrom": {
34611
- "name": "Input",
34612
- "module": "src/components/input/input.component.ts"
34613
- }
34614
- }
34615
- ],
34616
- "superclass": {
34617
- "name": "Input",
34618
- "module": "/src/components/input/input.component"
34619
- },
34620
- "tagName": "mdc-searchfield",
34621
- "jsDoc": "/**\n * `mdc-searchfield` component is used as an input field for search functionality.\n *\n * It supports `mdc-inputchip` as filters.\n *\n * This component is built by extending the `mdc-input` component.\n *\n * @tagname mdc-searchfield\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n *\n * @slot filters - Slot for input chips\n */",
34622
- "customElement": true,
34623
- "attributes": [
34624
- {
34625
- "name": "auto-focus-on-mount",
34626
- "type": {
34627
- "text": "boolean"
34628
- },
34629
- "default": "false",
34630
- "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
34631
- "fieldName": "autoFocusOnMount",
34632
- "inheritedFrom": {
34633
- "name": "AutoFocusOnMountMixin",
34634
- "module": "src/utils/mixins/AutoFocusOnMountMixin.ts"
34635
- }
35145
+ "description": "(React: onChange) This event is dispatched when the select is changed.",
35146
+ "reactName": "onChange"
34636
35147
  },
34637
35148
  {
34638
- "name": "name",
35149
+ "name": "input",
34639
35150
  "type": {
34640
- "text": "string"
35151
+ "text": "CustomEvent"
34641
35152
  },
34642
- "default": "''",
34643
- "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
34644
- "fieldName": "name",
34645
- "inheritedFrom": {
34646
- "name": "FormInternalsMixin",
34647
- "module": "src/utils/mixins/FormInternalsMixin.ts"
34648
- }
35153
+ "description": "(React: onInput) This event is dispatched when the select is changed.",
35154
+ "reactName": "onInput"
34649
35155
  },
34650
35156
  {
34651
- "name": "value",
34652
- "type": {
34653
- "text": "string"
34654
- },
34655
- "default": "''",
34656
- "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
34657
- "fieldName": "value",
34658
- "inheritedFrom": {
34659
- "name": "FormInternalsMixin",
34660
- "module": "src/utils/mixins/FormInternalsMixin.ts"
34661
- }
35157
+ "description": "(React: onClick) This event is dispatched when the select is clicked.",
35158
+ "name": "click",
35159
+ "reactName": "onClick"
34662
35160
  },
34663
35161
  {
34664
- "name": "validation-message",
34665
- "type": {
34666
- "text": "string | undefined"
34667
- },
34668
- "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
34669
- "fieldName": "validationMessage",
34670
- "inheritedFrom": {
34671
- "name": "FormInternalsMixin",
34672
- "module": "src/utils/mixins/FormInternalsMixin.ts"
34673
- }
35162
+ "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the select.",
35163
+ "name": "keydown",
35164
+ "reactName": "onKeyDown"
34674
35165
  },
34675
35166
  {
34676
- "name": "data-aria-label",
34677
- "type": {
34678
- "text": "string | null"
34679
- },
34680
- "default": "null",
34681
- "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
34682
- "fieldName": "dataAriaLabel",
34683
- "inheritedFrom": {
34684
- "name": "DataAriaLabelMixin",
34685
- "module": "src/utils/mixins/DataAriaLabelMixin.ts"
34686
- }
34687
- },
35167
+ "description": "(React: onFocus) This event is dispatched when the select receives focus.",
35168
+ "name": "focus",
35169
+ "reactName": "onFocus"
35170
+ }
35171
+ ],
35172
+ "attributes": [
34688
35173
  {
34689
35174
  "name": "placeholder",
34690
35175
  "type": {
34691
- "text": "string"
35176
+ "text": "string | undefined"
34692
35177
  },
34693
- "default": "''",
34694
- "description": "The placeholder text that is displayed when the input field is empty.",
34695
- "fieldName": "placeholder",
34696
- "inheritedFrom": {
34697
- "name": "Input",
34698
- "module": "src/components/input/input.component.ts"
34699
- }
35178
+ "description": "The placeholder text which will be shown on the text if provided.",
35179
+ "fieldName": "placeholder"
34700
35180
  },
34701
35181
  {
34702
35182
  "name": "readonly",
@@ -34704,160 +35184,123 @@
34704
35184
  "text": "boolean"
34705
35185
  },
34706
35186
  "default": "false",
34707
- "description": "readonly attribute of the input field. If true, the input field is read-only.",
34708
- "fieldName": "readonly",
34709
- "inheritedFrom": {
34710
- "name": "Input",
34711
- "module": "src/components/input/input.component.ts"
34712
- }
35187
+ "description": "readonly attribute of the select field. If true, the select is read-only.",
35188
+ "fieldName": "readonly"
34713
35189
  },
34714
35190
  {
34715
- "name": "prefix-text",
35191
+ "name": "placement",
34716
35192
  "type": {
34717
- "text": "string | undefined"
35193
+ "text": "Placement"
34718
35194
  },
34719
- "description": "The prefix text that is displayed before the input field. It has a max length of 10 characters.\nWhen the prefix text is set, make sure to set the 'data-aria-label'\nattribute with the appropriate value for accessibility.",
34720
- "fieldName": "prefixText",
34721
- "inheritedFrom": {
34722
- "name": "Input",
34723
- "module": "src/components/input/input.component.ts"
34724
- }
35195
+ "description": "The placeholder text which will be shown on the text if provided.",
35196
+ "fieldName": "placement"
34725
35197
  },
34726
35198
  {
34727
- "name": "leading-icon",
35199
+ "name": "soft-disabled",
34728
35200
  "type": {
34729
- "text": "IconNames | undefined"
35201
+ "text": "boolean | undefined"
34730
35202
  },
34731
- "description": "The leading icon that is displayed before the input field.",
34732
- "fieldName": "leadingIcon",
34733
- "inheritedFrom": {
34734
- "name": "Input",
34735
- "module": "src/components/input/input.component.ts"
34736
- }
35203
+ "description": "Indicates whether the select is soft disabled.\nWhen set to `true`, the select appears visually disabled but still allows\nfocus.",
35204
+ "default": "undefined",
35205
+ "fieldName": "softDisabled"
34737
35206
  },
34738
35207
  {
34739
- "name": "trailing-button",
35208
+ "name": "boundary",
34740
35209
  "type": {
34741
- "text": "boolean"
35210
+ "text": "'clippingAncestors' | string"
34742
35211
  },
34743
- "default": "false",
34744
- "description": "The trailing button when set to true, shows a clear button that clears the input field.",
34745
- "fieldName": "trailingButton",
34746
- "inheritedFrom": {
34747
- "name": "Input",
34748
- "module": "src/components/input/input.component.ts"
34749
- }
35212
+ "description": "This describes the clipping element(s) or area that overflow of the used popover will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
35213
+ "default": "'clippingAncestors'",
35214
+ "fieldName": "boundary"
34750
35215
  },
34751
35216
  {
34752
- "name": "maxlength",
35217
+ "name": "strategy",
34753
35218
  "type": {
34754
- "text": "number | undefined"
35219
+ "text": "'absolute' | 'fixed'"
34755
35220
  },
34756
- "description": "The maximum number of characters that the input field can accept.",
34757
- "fieldName": "maxlength",
34758
- "inheritedFrom": {
34759
- "name": "Input",
34760
- "module": "src/components/input/input.component.ts"
34761
- }
35221
+ "description": "The strategy of the popover within Select.\nThis determines how the popover is positioned in the DOM.\n\nIn case `boundary` is set to something other than 'clippingAncestors',\nit might be necessary to set the `strategy` to 'fixed' to ensure that the popover\nis not getting clipped by scrollable containers enclosing the select.",
35222
+ "default": "absolute",
35223
+ "fieldName": "strategy"
34762
35224
  },
34763
35225
  {
34764
- "name": "minlength",
35226
+ "name": "popover-z-index",
34765
35227
  "type": {
34766
- "text": "number | undefined"
35228
+ "text": "number"
34767
35229
  },
34768
- "description": "The minimum number of characters that the input field can accept.",
34769
- "fieldName": "minlength",
34770
- "inheritedFrom": {
34771
- "name": "Input",
34772
- "module": "src/components/input/input.component.ts"
34773
- }
35230
+ "description": "The z-index of the popover within Select.\n\nOverride this to make sure this stays on top of other components.",
35231
+ "default": "1000",
35232
+ "fieldName": "popoverZIndex"
34774
35233
  },
34775
35234
  {
34776
- "name": "autocapitalize",
35235
+ "name": "backdrop-append-to",
34777
35236
  "type": {
34778
- "text": "AutoCapitalizeType"
35237
+ "text": "string | undefined"
34779
35238
  },
34780
- "description": "The autocapitalize attribute of the input field.",
34781
- "default": "'off'",
34782
- "fieldName": "autocapitalize",
34783
- "inheritedFrom": {
34784
- "name": "Input",
34785
- "module": "src/components/input/input.component.ts"
34786
- }
35239
+ "description": "ID of the element where the backdrop will be appended to.\nThis is useful to ensure that the backdrop is appended to the correct element in the DOM.\nIf not set, the backdrop will be appended to the parent element of the select.",
35240
+ "fieldName": "backdropAppendTo"
34787
35241
  },
34788
35242
  {
34789
- "name": "autocomplete",
35243
+ "name": "auto-focus-on-mount",
34790
35244
  "type": {
34791
- "text": "AutoCompleteType"
35245
+ "text": "boolean"
34792
35246
  },
34793
- "description": "The autocomplete attribute of the input field.",
34794
- "default": "'off'",
34795
- "fieldName": "autocomplete",
35247
+ "default": "false",
35248
+ "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
35249
+ "fieldName": "autoFocusOnMount",
34796
35250
  "inheritedFrom": {
34797
- "name": "Input",
34798
- "module": "src/components/input/input.component.ts"
35251
+ "name": "AutoFocusOnMountMixin",
35252
+ "module": "src/utils/mixins/AutoFocusOnMountMixin.ts"
34799
35253
  }
34800
35254
  },
34801
35255
  {
34802
- "name": "dirname",
35256
+ "name": "name",
34803
35257
  "type": {
34804
- "text": "string | undefined"
35258
+ "text": "string"
34805
35259
  },
34806
- "description": "Specifies the name of the directionality of text for submission purposes (e.g., \"rtl\" for right-to-left).",
34807
- "fieldName": "dirname",
35260
+ "default": "''",
35261
+ "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
35262
+ "fieldName": "name",
34808
35263
  "inheritedFrom": {
34809
- "name": "Input",
34810
- "module": "src/components/input/input.component.ts"
35264
+ "name": "FormInternalsMixin",
35265
+ "module": "src/utils/mixins/FormInternalsMixin.ts"
34811
35266
  }
34812
35267
  },
34813
35268
  {
34814
- "name": "pattern",
35269
+ "name": "value",
34815
35270
  "type": {
34816
- "text": "string | undefined"
35271
+ "text": "string"
34817
35272
  },
34818
- "description": "The pattern attribute of the input field.\nSpecifies a regular expression that the input value must match for validation purposes.",
34819
- "fieldName": "pattern",
35273
+ "default": "''",
35274
+ "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
35275
+ "fieldName": "value",
34820
35276
  "inheritedFrom": {
34821
- "name": "Input",
34822
- "module": "src/components/input/input.component.ts"
35277
+ "name": "FormInternalsMixin",
35278
+ "module": "src/utils/mixins/FormInternalsMixin.ts"
34823
35279
  }
34824
35280
  },
34825
35281
  {
34826
- "name": "list",
35282
+ "name": "validation-message",
34827
35283
  "type": {
34828
35284
  "text": "string | undefined"
34829
35285
  },
34830
- "description": "The list attribute of the input field.\nIdentifies a list of pre-defined options to suggest to the user.",
34831
- "fieldName": "list",
34832
- "inheritedFrom": {
34833
- "name": "Input",
34834
- "module": "src/components/input/input.component.ts"
34835
- }
34836
- },
34837
- {
34838
- "name": "size",
34839
- "type": {
34840
- "text": "number | undefined | undefined"
34841
- },
34842
- "description": "The size attribute of the input field.\nSpecifies the width of the input field.",
34843
- "default": "undefined",
34844
- "fieldName": "size",
35286
+ "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
35287
+ "fieldName": "validationMessage",
34845
35288
  "inheritedFrom": {
34846
- "name": "Input",
34847
- "module": "src/components/input/input.component.ts"
35289
+ "name": "FormInternalsMixin",
35290
+ "module": "src/utils/mixins/FormInternalsMixin.ts"
34848
35291
  }
34849
35292
  },
34850
35293
  {
34851
- "name": "clear-aria-label",
35294
+ "name": "data-aria-label",
34852
35295
  "type": {
34853
- "text": "string"
35296
+ "text": "string | null"
34854
35297
  },
34855
- "default": "''",
34856
- "description": "Aria label for the trailing button. If trailing button is set to true, this label is used for the clear button.",
34857
- "fieldName": "clearAriaLabel",
35298
+ "default": "null",
35299
+ "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
35300
+ "fieldName": "dataAriaLabel",
34858
35301
  "inheritedFrom": {
34859
- "name": "Input",
34860
- "module": "src/components/input/input.component.ts"
35302
+ "name": "DataAriaLabelMixin",
35303
+ "module": "src/utils/mixins/DataAriaLabelMixin.ts"
34861
35304
  }
34862
35305
  },
34863
35306
  {
@@ -34960,136 +35403,27 @@
34960
35403
  }
34961
35404
  }
34962
35405
  ],
34963
- "cssProperties": [
34964
- {
34965
- "description": "Border color for the input container when disabled",
34966
- "name": "--mdc-input-disabled-border-color",
34967
- "inheritedFrom": {
34968
- "name": "Input",
34969
- "module": "src/components/input/input.component.ts"
34970
- }
34971
- },
34972
- {
34973
- "description": "Text color for the input field when disabled",
34974
- "name": "--mdc-input-disabled-text-color",
34975
- "inheritedFrom": {
34976
- "name": "Input",
34977
- "module": "src/components/input/input.component.ts"
34978
- }
34979
- },
34980
- {
34981
- "description": "Background color for the input field when disabled",
34982
- "name": "--mdc-input-disabled-background-color",
34983
- "inheritedFrom": {
34984
- "name": "Input",
34985
- "module": "src/components/input/input.component.ts"
34986
- }
34987
- },
34988
- {
34989
- "description": "Border color for the input container",
34990
- "name": "--mdc-input-border-color",
34991
- "inheritedFrom": {
34992
- "name": "Input",
34993
- "module": "src/components/input/input.component.ts"
34994
- }
34995
- },
34996
- {
34997
- "description": "Text color for the input field",
34998
- "name": "--mdc-input-text-color",
34999
- "inheritedFrom": {
35000
- "name": "Input",
35001
- "module": "src/components/input/input.component.ts"
35002
- }
35003
- },
35004
- {
35005
- "description": "Background color for the input field",
35006
- "name": "--mdc-input-background-color",
35007
- "inheritedFrom": {
35008
- "name": "Input",
35009
- "module": "src/components/input/input.component.ts"
35010
- }
35011
- },
35012
- {
35013
- "description": "Background color for the selected text",
35014
- "name": "--mdc-input-selection-background-color",
35015
- "inheritedFrom": {
35016
- "name": "Input",
35017
- "module": "src/components/input/input.component.ts"
35018
- }
35019
- },
35020
- {
35021
- "description": "Text color for the selected text",
35022
- "name": "--mdc-input-selection-text-color",
35023
- "inheritedFrom": {
35024
- "name": "Input",
35025
- "module": "src/components/input/input.component.ts"
35026
- }
35027
- },
35028
- {
35029
- "description": "Text color for the help text",
35030
- "name": "--mdc-input-support-text-color",
35031
- "inheritedFrom": {
35032
- "name": "Input",
35033
- "module": "src/components/input/input.component.ts"
35034
- }
35035
- },
35036
- {
35037
- "description": "Background color for the input field when hovered",
35038
- "name": "--mdc-input-hover-background-color",
35039
- "inheritedFrom": {
35040
- "name": "Input",
35041
- "module": "src/components/input/input.component.ts"
35042
- }
35043
- },
35044
- {
35045
- "description": "Background color for the input field when focused",
35046
- "name": "--mdc-input-focused-background-color",
35047
- "inheritedFrom": {
35048
- "name": "Input",
35049
- "module": "src/components/input/input.component.ts"
35050
- }
35051
- },
35052
- {
35053
- "description": "Border color for the input container when focused",
35054
- "name": "--mdc-input-focused-border-color",
35055
- "inheritedFrom": {
35056
- "name": "Input",
35057
- "module": "src/components/input/input.component.ts"
35058
- }
35059
- },
35060
- {
35061
- "description": "Border color for the input container when error",
35062
- "name": "--mdc-input-error-border-color",
35063
- "inheritedFrom": {
35064
- "name": "Input",
35065
- "module": "src/components/input/input.component.ts"
35066
- }
35067
- },
35406
+ "mixins": [
35068
35407
  {
35069
- "description": "Border color for the input container when warning",
35070
- "name": "--mdc-input-warning-border-color",
35071
- "inheritedFrom": {
35072
- "name": "Input",
35073
- "module": "src/components/input/input.component.ts"
35074
- }
35408
+ "name": "AutoFocusOnMountMixin",
35409
+ "module": "/src/utils/mixins/AutoFocusOnMountMixin"
35075
35410
  },
35076
35411
  {
35077
- "description": "Border color for the input container when success",
35078
- "name": "--mdc-input-success-border-color",
35079
- "inheritedFrom": {
35080
- "name": "Input",
35081
- "module": "src/components/input/input.component.ts"
35082
- }
35412
+ "name": "FormInternalsMixin",
35413
+ "module": "/src/utils/mixins/FormInternalsMixin"
35083
35414
  },
35084
35415
  {
35085
- "description": "Border color for the input container when primary",
35086
- "name": "--mdc-input-primary-border-color",
35087
- "inheritedFrom": {
35088
- "name": "Input",
35089
- "module": "src/components/input/input.component.ts"
35090
- }
35416
+ "name": "DataAriaLabelMixin",
35417
+ "module": "/src/utils/mixins/DataAriaLabelMixin"
35091
35418
  }
35092
- ]
35419
+ ],
35420
+ "superclass": {
35421
+ "name": "FormfieldWrapper",
35422
+ "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
35423
+ },
35424
+ "tagName": "mdc-select",
35425
+ "jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event input - (React: onInput) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n *\n * @cssproperty --mdc-select-background-color - The background color of the combobox of select.\n * @cssproperty --mdc-select-background-color-hover - The background color of the combobox of select when hovered.\n * @cssproperty --mdc-select-background-color-active - The background color of the combobox of select when active.\n * @cssproperty --mdc-select-background-color-disabled - The background color of the combobox of select when disabled.\n * @cssproperty --mdc-select-text-color - The text color of the select.\n * @cssproperty --mdc-select-text-color-selected - The text color of the selected option in the select.\n * @cssproperty --mdc-select-text-color-disabled - The text color of the select when disabled.\n * @cssproperty --mdc-select-border-color - The border color of the select.\n * @cssproperty --mdc-select-border-color-disabled - The border color of the select when disabled.\n * @cssproperty --mdc-select-border-color-success - The border color of the select when in success state.\n * @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.\n * @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.\n * @cssproperty --mdc-select-width - The width of the select.\n * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.\n * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).\n */",
35426
+ "customElement": true
35093
35427
  }
35094
35428
  ],
35095
35429
  "exports": [
@@ -35097,8 +35431,8 @@
35097
35431
  "kind": "js",
35098
35432
  "name": "default",
35099
35433
  "declaration": {
35100
- "name": "Searchfield",
35101
- "module": "components/searchfield/searchfield.component.js"
35434
+ "name": "Select",
35435
+ "module": "components/select/select.component.js"
35102
35436
  }
35103
35437
  }
35104
35438
  ]