@momentum-design/components 0.122.16 → 0.122.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/index.js +205 -204
- package/dist/browser/index.js.map +3 -3
- package/dist/components/select/select.component.d.ts +33 -3
- package/dist/components/select/select.component.js +145 -45
- package/dist/custom-elements.json +1979 -1845
- package/dist/react/index.d.ts +4 -4
- package/dist/react/index.js +4 -4
- package/package.json +1 -1
|
@@ -2,6 +2,497 @@
|
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
3
|
"readme": "",
|
|
4
4
|
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "components/accordionbutton/accordionbutton.component.js",
|
|
8
|
+
"declarations": [
|
|
9
|
+
{
|
|
10
|
+
"kind": "class",
|
|
11
|
+
"description": "An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion button 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 do need any controls on your accordion heading, then it's advised to use `accordion` component.\n\nIf an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.",
|
|
12
|
+
"name": "AccordionButton",
|
|
13
|
+
"cssProperties": [
|
|
14
|
+
{
|
|
15
|
+
"description": "The border color of the accordion button.",
|
|
16
|
+
"name": "--mdc-accordionbutton-border-color"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"description": "The hover color of the accordion button.",
|
|
20
|
+
"name": "--mdc-accordionbutton-hover-color"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"description": "The active color of the accordion button.",
|
|
24
|
+
"name": "--mdc-accordionbutton-active-color"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"description": "The disabled color of the accordion button.",
|
|
28
|
+
"name": "--mdc-accordionbutton-disabled-color"
|
|
29
|
+
}
|
|
30
|
+
],
|
|
31
|
+
"cssParts": [
|
|
32
|
+
{
|
|
33
|
+
"description": "The body section of the accordion button.",
|
|
34
|
+
"name": "body-section"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"description": "The header button section of the accordion button.",
|
|
38
|
+
"name": "header-button-section"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"description": "The header section of the accordion button.",
|
|
42
|
+
"name": "header-section"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"description": "The leading header of the accordion button.",
|
|
46
|
+
"name": "leading-header"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"description": "The trailing header of the accordion button.",
|
|
50
|
+
"name": "trailing-header"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"description": "The trailing header icon of the accordion button.",
|
|
54
|
+
"name": "trailing-header__icon"
|
|
55
|
+
}
|
|
56
|
+
],
|
|
57
|
+
"slots": [
|
|
58
|
+
{
|
|
59
|
+
"description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
|
|
60
|
+
"name": "default"
|
|
61
|
+
}
|
|
62
|
+
],
|
|
63
|
+
"members": [
|
|
64
|
+
{
|
|
65
|
+
"kind": "field",
|
|
66
|
+
"name": "size",
|
|
67
|
+
"type": {
|
|
68
|
+
"text": "Size"
|
|
69
|
+
},
|
|
70
|
+
"description": "The size of the accordion item.",
|
|
71
|
+
"default": "'small'",
|
|
72
|
+
"attribute": "size",
|
|
73
|
+
"reflects": true
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"kind": "field",
|
|
77
|
+
"name": "variant",
|
|
78
|
+
"type": {
|
|
79
|
+
"text": "Variant"
|
|
80
|
+
},
|
|
81
|
+
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
82
|
+
"default": "'default'",
|
|
83
|
+
"attribute": "variant",
|
|
84
|
+
"reflects": true
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"kind": "field",
|
|
88
|
+
"name": "dataAriaLevel",
|
|
89
|
+
"type": {
|
|
90
|
+
"text": "number"
|
|
91
|
+
},
|
|
92
|
+
"description": "The aria level of the accordion component.",
|
|
93
|
+
"default": "3",
|
|
94
|
+
"attribute": "data-aria-level",
|
|
95
|
+
"reflects": true
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"kind": "field",
|
|
99
|
+
"name": "expanded",
|
|
100
|
+
"type": {
|
|
101
|
+
"text": "boolean"
|
|
102
|
+
},
|
|
103
|
+
"description": "The visibility of the accordion button.",
|
|
104
|
+
"default": "false",
|
|
105
|
+
"attribute": "expanded",
|
|
106
|
+
"reflects": true
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
"kind": "field",
|
|
110
|
+
"name": "headerText",
|
|
111
|
+
"type": {
|
|
112
|
+
"text": "string | undefined"
|
|
113
|
+
},
|
|
114
|
+
"description": "The header text of the accordion item.",
|
|
115
|
+
"attribute": "header-text",
|
|
116
|
+
"reflects": true
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"kind": "field",
|
|
120
|
+
"name": "prefixIcon",
|
|
121
|
+
"type": {
|
|
122
|
+
"text": "IconNames | undefined"
|
|
123
|
+
},
|
|
124
|
+
"description": "The leading icon that is displayed before the header text.",
|
|
125
|
+
"attribute": "prefix-icon"
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"kind": "method",
|
|
129
|
+
"name": "handleHeaderClick",
|
|
130
|
+
"privacy": "protected",
|
|
131
|
+
"return": {
|
|
132
|
+
"type": {
|
|
133
|
+
"text": "void"
|
|
134
|
+
}
|
|
135
|
+
},
|
|
136
|
+
"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."
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
"kind": "method",
|
|
140
|
+
"name": "dispatchHeaderClickEvent",
|
|
141
|
+
"privacy": "private",
|
|
142
|
+
"return": {
|
|
143
|
+
"type": {
|
|
144
|
+
"text": "void"
|
|
145
|
+
}
|
|
146
|
+
},
|
|
147
|
+
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
"kind": "method",
|
|
151
|
+
"name": "handleKeyDown",
|
|
152
|
+
"privacy": "private",
|
|
153
|
+
"return": {
|
|
154
|
+
"type": {
|
|
155
|
+
"text": "void"
|
|
156
|
+
}
|
|
157
|
+
},
|
|
158
|
+
"parameters": [
|
|
159
|
+
{
|
|
160
|
+
"name": "event",
|
|
161
|
+
"type": {
|
|
162
|
+
"text": "KeyboardEvent"
|
|
163
|
+
},
|
|
164
|
+
"description": "The KeyboardEvent fired."
|
|
165
|
+
}
|
|
166
|
+
],
|
|
167
|
+
"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."
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
"kind": "method",
|
|
171
|
+
"name": "renderIcon",
|
|
172
|
+
"privacy": "protected",
|
|
173
|
+
"return": {
|
|
174
|
+
"type": {
|
|
175
|
+
"text": "TemplateResult | typeof nothing"
|
|
176
|
+
}
|
|
177
|
+
},
|
|
178
|
+
"parameters": [
|
|
179
|
+
{
|
|
180
|
+
"name": "iconName",
|
|
181
|
+
"optional": true,
|
|
182
|
+
"type": {
|
|
183
|
+
"text": "IconNames"
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
]
|
|
187
|
+
},
|
|
188
|
+
{
|
|
189
|
+
"kind": "method",
|
|
190
|
+
"name": "renderHeadingText",
|
|
191
|
+
"privacy": "protected",
|
|
192
|
+
"return": {
|
|
193
|
+
"type": {
|
|
194
|
+
"text": "TemplateResult | typeof nothing"
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
"kind": "method",
|
|
200
|
+
"name": "renderHeader",
|
|
201
|
+
"privacy": "protected",
|
|
202
|
+
"return": {
|
|
203
|
+
"type": {
|
|
204
|
+
"text": "TemplateResult"
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
},
|
|
208
|
+
{
|
|
209
|
+
"kind": "method",
|
|
210
|
+
"name": "getArrowIconName",
|
|
211
|
+
"privacy": "protected",
|
|
212
|
+
"return": {
|
|
213
|
+
"type": {
|
|
214
|
+
"text": ""
|
|
215
|
+
}
|
|
216
|
+
},
|
|
217
|
+
"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."
|
|
218
|
+
},
|
|
219
|
+
{
|
|
220
|
+
"kind": "method",
|
|
221
|
+
"name": "renderBody",
|
|
222
|
+
"privacy": "protected",
|
|
223
|
+
"return": {
|
|
224
|
+
"type": {
|
|
225
|
+
"text": "TemplateResult | typeof nothing"
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
},
|
|
229
|
+
{
|
|
230
|
+
"kind": "field",
|
|
231
|
+
"name": "disabled",
|
|
232
|
+
"type": {
|
|
233
|
+
"text": "boolean | undefined"
|
|
234
|
+
},
|
|
235
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
236
|
+
"default": "undefined",
|
|
237
|
+
"attribute": "disabled",
|
|
238
|
+
"reflects": true,
|
|
239
|
+
"inheritedFrom": {
|
|
240
|
+
"name": "DisabledMixin",
|
|
241
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
],
|
|
245
|
+
"events": [
|
|
246
|
+
{
|
|
247
|
+
"description": "(React: onShown) This event is triggered when the accordion button is expanded.",
|
|
248
|
+
"name": "shown",
|
|
249
|
+
"reactName": "onShown"
|
|
250
|
+
}
|
|
251
|
+
],
|
|
252
|
+
"attributes": [
|
|
253
|
+
{
|
|
254
|
+
"name": "size",
|
|
255
|
+
"type": {
|
|
256
|
+
"text": "Size"
|
|
257
|
+
},
|
|
258
|
+
"description": "The size of the accordion item.",
|
|
259
|
+
"default": "'small'",
|
|
260
|
+
"fieldName": "size"
|
|
261
|
+
},
|
|
262
|
+
{
|
|
263
|
+
"name": "variant",
|
|
264
|
+
"type": {
|
|
265
|
+
"text": "Variant"
|
|
266
|
+
},
|
|
267
|
+
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
268
|
+
"default": "'default'",
|
|
269
|
+
"fieldName": "variant"
|
|
270
|
+
},
|
|
271
|
+
{
|
|
272
|
+
"name": "data-aria-level",
|
|
273
|
+
"type": {
|
|
274
|
+
"text": "number"
|
|
275
|
+
},
|
|
276
|
+
"description": "The aria level of the accordion component.",
|
|
277
|
+
"default": "3",
|
|
278
|
+
"fieldName": "dataAriaLevel"
|
|
279
|
+
},
|
|
280
|
+
{
|
|
281
|
+
"name": "expanded",
|
|
282
|
+
"type": {
|
|
283
|
+
"text": "boolean"
|
|
284
|
+
},
|
|
285
|
+
"description": "The visibility of the accordion button.",
|
|
286
|
+
"default": "false",
|
|
287
|
+
"fieldName": "expanded"
|
|
288
|
+
},
|
|
289
|
+
{
|
|
290
|
+
"name": "header-text",
|
|
291
|
+
"type": {
|
|
292
|
+
"text": "string | undefined"
|
|
293
|
+
},
|
|
294
|
+
"description": "The header text of the accordion item.",
|
|
295
|
+
"fieldName": "headerText"
|
|
296
|
+
},
|
|
297
|
+
{
|
|
298
|
+
"name": "prefix-icon",
|
|
299
|
+
"type": {
|
|
300
|
+
"text": "IconNames | undefined"
|
|
301
|
+
},
|
|
302
|
+
"description": "The leading icon that is displayed before the header text.",
|
|
303
|
+
"fieldName": "prefixIcon"
|
|
304
|
+
},
|
|
305
|
+
{
|
|
306
|
+
"name": "disabled",
|
|
307
|
+
"type": {
|
|
308
|
+
"text": "boolean | undefined"
|
|
309
|
+
},
|
|
310
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
311
|
+
"default": "undefined",
|
|
312
|
+
"fieldName": "disabled",
|
|
313
|
+
"inheritedFrom": {
|
|
314
|
+
"name": "DisabledMixin",
|
|
315
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
316
|
+
}
|
|
317
|
+
}
|
|
318
|
+
],
|
|
319
|
+
"mixins": [
|
|
320
|
+
{
|
|
321
|
+
"name": "DisabledMixin",
|
|
322
|
+
"module": "/src/utils/mixins/DisabledMixin"
|
|
323
|
+
}
|
|
324
|
+
],
|
|
325
|
+
"superclass": {
|
|
326
|
+
"name": "Component",
|
|
327
|
+
"module": "/src/models"
|
|
328
|
+
},
|
|
329
|
+
"tagName": "mdc-accordionbutton",
|
|
330
|
+
"jsDoc": "/**\n * An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion button 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 do need any controls on your accordion heading, then it's advised to use `accordion` component.\n *\n * If an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.\n *\n * @tagname mdc-accordionbutton\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\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 button is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion button.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.\n *\n * @csspart body-section - The body section of the accordion button.\n * @csspart header-button-section - The header button section of the accordion button.\n * @csspart header-section - The header section of the accordion button.\n * @csspart leading-header - The leading header of the accordion button.\n * @csspart trailing-header - The trailing header of the accordion button.\n * @csspart trailing-header__icon - The trailing header icon of the accordion button.\n */",
|
|
331
|
+
"customElement": true
|
|
332
|
+
}
|
|
333
|
+
],
|
|
334
|
+
"exports": [
|
|
335
|
+
{
|
|
336
|
+
"kind": "js",
|
|
337
|
+
"name": "default",
|
|
338
|
+
"declaration": {
|
|
339
|
+
"name": "AccordionButton",
|
|
340
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
341
|
+
}
|
|
342
|
+
}
|
|
343
|
+
]
|
|
344
|
+
},
|
|
345
|
+
{
|
|
346
|
+
"kind": "javascript-module",
|
|
347
|
+
"path": "components/accordiongroup/accordiongroup.component.js",
|
|
348
|
+
"declarations": [
|
|
349
|
+
{
|
|
350
|
+
"kind": "class",
|
|
351
|
+
"description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
|
|
352
|
+
"name": "AccordionGroup",
|
|
353
|
+
"cssProperties": [
|
|
354
|
+
{
|
|
355
|
+
"description": "The border color of the entire accordiongroup",
|
|
356
|
+
"name": "--mdc-accordiongroup-border-color"
|
|
357
|
+
}
|
|
358
|
+
],
|
|
359
|
+
"slots": [
|
|
360
|
+
{
|
|
361
|
+
"description": "The default slot can contain the `accordion` or `accordionbutton` components.",
|
|
362
|
+
"name": "default"
|
|
363
|
+
}
|
|
364
|
+
],
|
|
365
|
+
"members": [
|
|
366
|
+
{
|
|
367
|
+
"kind": "field",
|
|
368
|
+
"name": "size",
|
|
369
|
+
"type": {
|
|
370
|
+
"text": "Size"
|
|
371
|
+
},
|
|
372
|
+
"description": "The size of the accordion item.",
|
|
373
|
+
"default": "'small'",
|
|
374
|
+
"attribute": "size",
|
|
375
|
+
"reflects": true
|
|
376
|
+
},
|
|
377
|
+
{
|
|
378
|
+
"kind": "field",
|
|
379
|
+
"name": "variant",
|
|
380
|
+
"type": {
|
|
381
|
+
"text": "Variant"
|
|
382
|
+
},
|
|
383
|
+
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
384
|
+
"default": "'stacked'",
|
|
385
|
+
"attribute": "variant",
|
|
386
|
+
"reflects": true
|
|
387
|
+
},
|
|
388
|
+
{
|
|
389
|
+
"kind": "field",
|
|
390
|
+
"name": "allowMultiple",
|
|
391
|
+
"type": {
|
|
392
|
+
"text": "boolean"
|
|
393
|
+
},
|
|
394
|
+
"default": "false",
|
|
395
|
+
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
396
|
+
"attribute": "allow-multiple",
|
|
397
|
+
"reflects": true
|
|
398
|
+
},
|
|
399
|
+
{
|
|
400
|
+
"kind": "method",
|
|
401
|
+
"name": "handleAccordionExpanded",
|
|
402
|
+
"privacy": "private",
|
|
403
|
+
"return": {
|
|
404
|
+
"type": {
|
|
405
|
+
"text": "void"
|
|
406
|
+
}
|
|
407
|
+
},
|
|
408
|
+
"parameters": [
|
|
409
|
+
{
|
|
410
|
+
"name": "event",
|
|
411
|
+
"type": {
|
|
412
|
+
"text": "Event"
|
|
413
|
+
},
|
|
414
|
+
"description": "The event object from the 'shown' event."
|
|
415
|
+
}
|
|
416
|
+
],
|
|
417
|
+
"description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
|
|
418
|
+
},
|
|
419
|
+
{
|
|
420
|
+
"kind": "method",
|
|
421
|
+
"name": "setChildrenAccordionAttributes",
|
|
422
|
+
"privacy": "private",
|
|
423
|
+
"return": {
|
|
424
|
+
"type": {
|
|
425
|
+
"text": "void"
|
|
426
|
+
}
|
|
427
|
+
},
|
|
428
|
+
"parameters": [
|
|
429
|
+
{
|
|
430
|
+
"name": "attributeName",
|
|
431
|
+
"type": {
|
|
432
|
+
"text": "string"
|
|
433
|
+
},
|
|
434
|
+
"description": "The name of the attribute to set."
|
|
435
|
+
},
|
|
436
|
+
{
|
|
437
|
+
"name": "attributeValue",
|
|
438
|
+
"type": {
|
|
439
|
+
"text": "string"
|
|
440
|
+
},
|
|
441
|
+
"description": "The value to set the attribute to."
|
|
442
|
+
}
|
|
443
|
+
],
|
|
444
|
+
"description": "Sets the given attribute on all child accordion or accordionbutton components."
|
|
445
|
+
}
|
|
446
|
+
],
|
|
447
|
+
"attributes": [
|
|
448
|
+
{
|
|
449
|
+
"name": "size",
|
|
450
|
+
"type": {
|
|
451
|
+
"text": "Size"
|
|
452
|
+
},
|
|
453
|
+
"description": "The size of the accordion item.",
|
|
454
|
+
"default": "'small'",
|
|
455
|
+
"fieldName": "size"
|
|
456
|
+
},
|
|
457
|
+
{
|
|
458
|
+
"name": "variant",
|
|
459
|
+
"type": {
|
|
460
|
+
"text": "Variant"
|
|
461
|
+
},
|
|
462
|
+
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
463
|
+
"default": "'stacked'",
|
|
464
|
+
"fieldName": "variant"
|
|
465
|
+
},
|
|
466
|
+
{
|
|
467
|
+
"name": "allow-multiple",
|
|
468
|
+
"type": {
|
|
469
|
+
"text": "boolean"
|
|
470
|
+
},
|
|
471
|
+
"default": "false",
|
|
472
|
+
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
473
|
+
"fieldName": "allowMultiple"
|
|
474
|
+
}
|
|
475
|
+
],
|
|
476
|
+
"superclass": {
|
|
477
|
+
"name": "Component",
|
|
478
|
+
"module": "/src/models"
|
|
479
|
+
},
|
|
480
|
+
"tagName": "mdc-accordiongroup",
|
|
481
|
+
"jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
|
|
482
|
+
"customElement": true
|
|
483
|
+
}
|
|
484
|
+
],
|
|
485
|
+
"exports": [
|
|
486
|
+
{
|
|
487
|
+
"kind": "js",
|
|
488
|
+
"name": "default",
|
|
489
|
+
"declaration": {
|
|
490
|
+
"name": "AccordionGroup",
|
|
491
|
+
"module": "components/accordiongroup/accordiongroup.component.js"
|
|
492
|
+
}
|
|
493
|
+
}
|
|
494
|
+
]
|
|
495
|
+
},
|
|
5
496
|
{
|
|
6
497
|
"kind": "javascript-module",
|
|
7
498
|
"path": "components/accordion/accordion.component.js",
|
|
@@ -163,8 +654,8 @@
|
|
|
163
654
|
"attribute": "disabled",
|
|
164
655
|
"reflects": true,
|
|
165
656
|
"inheritedFrom": {
|
|
166
|
-
"name": "
|
|
167
|
-
"module": "
|
|
657
|
+
"name": "AccordionButton",
|
|
658
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
168
659
|
}
|
|
169
660
|
},
|
|
170
661
|
{
|
|
@@ -412,8 +903,8 @@
|
|
|
412
903
|
"default": "undefined",
|
|
413
904
|
"fieldName": "disabled",
|
|
414
905
|
"inheritedFrom": {
|
|
415
|
-
"name": "
|
|
416
|
-
"module": "src/
|
|
906
|
+
"name": "AccordionButton",
|
|
907
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
417
908
|
}
|
|
418
909
|
},
|
|
419
910
|
{
|
|
@@ -515,507 +1006,16 @@
|
|
|
515
1006
|
},
|
|
516
1007
|
{
|
|
517
1008
|
"kind": "javascript-module",
|
|
518
|
-
"path": "components/
|
|
1009
|
+
"path": "components/alertchip/alertchip.component.js",
|
|
519
1010
|
"declarations": [
|
|
520
1011
|
{
|
|
521
1012
|
"kind": "class",
|
|
522
|
-
"description": "
|
|
523
|
-
"name": "
|
|
1013
|
+
"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.",
|
|
1014
|
+
"name": "AlertChip",
|
|
524
1015
|
"cssProperties": [
|
|
525
1016
|
{
|
|
526
|
-
"description": "The
|
|
527
|
-
"name": "--mdc-
|
|
528
|
-
},
|
|
529
|
-
{
|
|
530
|
-
"description": "The hover color of the accordion button.",
|
|
531
|
-
"name": "--mdc-accordionbutton-hover-color"
|
|
532
|
-
},
|
|
533
|
-
{
|
|
534
|
-
"description": "The active color of the accordion button.",
|
|
535
|
-
"name": "--mdc-accordionbutton-active-color"
|
|
536
|
-
},
|
|
537
|
-
{
|
|
538
|
-
"description": "The disabled color of the accordion button.",
|
|
539
|
-
"name": "--mdc-accordionbutton-disabled-color"
|
|
540
|
-
}
|
|
541
|
-
],
|
|
542
|
-
"cssParts": [
|
|
543
|
-
{
|
|
544
|
-
"description": "The body section of the accordion button.",
|
|
545
|
-
"name": "body-section"
|
|
546
|
-
},
|
|
547
|
-
{
|
|
548
|
-
"description": "The header button section of the accordion button.",
|
|
549
|
-
"name": "header-button-section"
|
|
550
|
-
},
|
|
551
|
-
{
|
|
552
|
-
"description": "The header section of the accordion button.",
|
|
553
|
-
"name": "header-section"
|
|
554
|
-
},
|
|
555
|
-
{
|
|
556
|
-
"description": "The leading header of the accordion button.",
|
|
557
|
-
"name": "leading-header"
|
|
558
|
-
},
|
|
559
|
-
{
|
|
560
|
-
"description": "The trailing header of the accordion button.",
|
|
561
|
-
"name": "trailing-header"
|
|
562
|
-
},
|
|
563
|
-
{
|
|
564
|
-
"description": "The trailing header icon of the accordion button.",
|
|
565
|
-
"name": "trailing-header__icon"
|
|
566
|
-
}
|
|
567
|
-
],
|
|
568
|
-
"slots": [
|
|
569
|
-
{
|
|
570
|
-
"description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
|
|
571
|
-
"name": "default"
|
|
572
|
-
}
|
|
573
|
-
],
|
|
574
|
-
"members": [
|
|
575
|
-
{
|
|
576
|
-
"kind": "field",
|
|
577
|
-
"name": "size",
|
|
578
|
-
"type": {
|
|
579
|
-
"text": "Size"
|
|
580
|
-
},
|
|
581
|
-
"description": "The size of the accordion item.",
|
|
582
|
-
"default": "'small'",
|
|
583
|
-
"attribute": "size",
|
|
584
|
-
"reflects": true
|
|
585
|
-
},
|
|
586
|
-
{
|
|
587
|
-
"kind": "field",
|
|
588
|
-
"name": "variant",
|
|
589
|
-
"type": {
|
|
590
|
-
"text": "Variant"
|
|
591
|
-
},
|
|
592
|
-
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
593
|
-
"default": "'default'",
|
|
594
|
-
"attribute": "variant",
|
|
595
|
-
"reflects": true
|
|
596
|
-
},
|
|
597
|
-
{
|
|
598
|
-
"kind": "field",
|
|
599
|
-
"name": "dataAriaLevel",
|
|
600
|
-
"type": {
|
|
601
|
-
"text": "number"
|
|
602
|
-
},
|
|
603
|
-
"description": "The aria level of the accordion component.",
|
|
604
|
-
"default": "3",
|
|
605
|
-
"attribute": "data-aria-level",
|
|
606
|
-
"reflects": true
|
|
607
|
-
},
|
|
608
|
-
{
|
|
609
|
-
"kind": "field",
|
|
610
|
-
"name": "expanded",
|
|
611
|
-
"type": {
|
|
612
|
-
"text": "boolean"
|
|
613
|
-
},
|
|
614
|
-
"description": "The visibility of the accordion button.",
|
|
615
|
-
"default": "false",
|
|
616
|
-
"attribute": "expanded",
|
|
617
|
-
"reflects": true
|
|
618
|
-
},
|
|
619
|
-
{
|
|
620
|
-
"kind": "field",
|
|
621
|
-
"name": "headerText",
|
|
622
|
-
"type": {
|
|
623
|
-
"text": "string | undefined"
|
|
624
|
-
},
|
|
625
|
-
"description": "The header text of the accordion item.",
|
|
626
|
-
"attribute": "header-text",
|
|
627
|
-
"reflects": true
|
|
628
|
-
},
|
|
629
|
-
{
|
|
630
|
-
"kind": "field",
|
|
631
|
-
"name": "prefixIcon",
|
|
632
|
-
"type": {
|
|
633
|
-
"text": "IconNames | undefined"
|
|
634
|
-
},
|
|
635
|
-
"description": "The leading icon that is displayed before the header text.",
|
|
636
|
-
"attribute": "prefix-icon"
|
|
637
|
-
},
|
|
638
|
-
{
|
|
639
|
-
"kind": "method",
|
|
640
|
-
"name": "handleHeaderClick",
|
|
641
|
-
"privacy": "protected",
|
|
642
|
-
"return": {
|
|
643
|
-
"type": {
|
|
644
|
-
"text": "void"
|
|
645
|
-
}
|
|
646
|
-
},
|
|
647
|
-
"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."
|
|
648
|
-
},
|
|
649
|
-
{
|
|
650
|
-
"kind": "method",
|
|
651
|
-
"name": "dispatchHeaderClickEvent",
|
|
652
|
-
"privacy": "private",
|
|
653
|
-
"return": {
|
|
654
|
-
"type": {
|
|
655
|
-
"text": "void"
|
|
656
|
-
}
|
|
657
|
-
},
|
|
658
|
-
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
|
|
659
|
-
},
|
|
660
|
-
{
|
|
661
|
-
"kind": "method",
|
|
662
|
-
"name": "handleKeyDown",
|
|
663
|
-
"privacy": "private",
|
|
664
|
-
"return": {
|
|
665
|
-
"type": {
|
|
666
|
-
"text": "void"
|
|
667
|
-
}
|
|
668
|
-
},
|
|
669
|
-
"parameters": [
|
|
670
|
-
{
|
|
671
|
-
"name": "event",
|
|
672
|
-
"type": {
|
|
673
|
-
"text": "KeyboardEvent"
|
|
674
|
-
},
|
|
675
|
-
"description": "The KeyboardEvent fired."
|
|
676
|
-
}
|
|
677
|
-
],
|
|
678
|
-
"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."
|
|
679
|
-
},
|
|
680
|
-
{
|
|
681
|
-
"kind": "method",
|
|
682
|
-
"name": "renderIcon",
|
|
683
|
-
"privacy": "protected",
|
|
684
|
-
"return": {
|
|
685
|
-
"type": {
|
|
686
|
-
"text": "TemplateResult | typeof nothing"
|
|
687
|
-
}
|
|
688
|
-
},
|
|
689
|
-
"parameters": [
|
|
690
|
-
{
|
|
691
|
-
"name": "iconName",
|
|
692
|
-
"optional": true,
|
|
693
|
-
"type": {
|
|
694
|
-
"text": "IconNames"
|
|
695
|
-
}
|
|
696
|
-
}
|
|
697
|
-
]
|
|
698
|
-
},
|
|
699
|
-
{
|
|
700
|
-
"kind": "method",
|
|
701
|
-
"name": "renderHeadingText",
|
|
702
|
-
"privacy": "protected",
|
|
703
|
-
"return": {
|
|
704
|
-
"type": {
|
|
705
|
-
"text": "TemplateResult | typeof nothing"
|
|
706
|
-
}
|
|
707
|
-
}
|
|
708
|
-
},
|
|
709
|
-
{
|
|
710
|
-
"kind": "method",
|
|
711
|
-
"name": "renderHeader",
|
|
712
|
-
"privacy": "protected",
|
|
713
|
-
"return": {
|
|
714
|
-
"type": {
|
|
715
|
-
"text": "TemplateResult"
|
|
716
|
-
}
|
|
717
|
-
}
|
|
718
|
-
},
|
|
719
|
-
{
|
|
720
|
-
"kind": "method",
|
|
721
|
-
"name": "getArrowIconName",
|
|
722
|
-
"privacy": "protected",
|
|
723
|
-
"return": {
|
|
724
|
-
"type": {
|
|
725
|
-
"text": ""
|
|
726
|
-
}
|
|
727
|
-
},
|
|
728
|
-
"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."
|
|
729
|
-
},
|
|
730
|
-
{
|
|
731
|
-
"kind": "method",
|
|
732
|
-
"name": "renderBody",
|
|
733
|
-
"privacy": "protected",
|
|
734
|
-
"return": {
|
|
735
|
-
"type": {
|
|
736
|
-
"text": "TemplateResult | typeof nothing"
|
|
737
|
-
}
|
|
738
|
-
}
|
|
739
|
-
},
|
|
740
|
-
{
|
|
741
|
-
"kind": "field",
|
|
742
|
-
"name": "disabled",
|
|
743
|
-
"type": {
|
|
744
|
-
"text": "boolean | undefined"
|
|
745
|
-
},
|
|
746
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
747
|
-
"default": "undefined",
|
|
748
|
-
"attribute": "disabled",
|
|
749
|
-
"reflects": true,
|
|
750
|
-
"inheritedFrom": {
|
|
751
|
-
"name": "DisabledMixin",
|
|
752
|
-
"module": "utils/mixins/DisabledMixin.js"
|
|
753
|
-
}
|
|
754
|
-
}
|
|
755
|
-
],
|
|
756
|
-
"events": [
|
|
757
|
-
{
|
|
758
|
-
"description": "(React: onShown) This event is triggered when the accordion button is expanded.",
|
|
759
|
-
"name": "shown",
|
|
760
|
-
"reactName": "onShown"
|
|
761
|
-
}
|
|
762
|
-
],
|
|
763
|
-
"attributes": [
|
|
764
|
-
{
|
|
765
|
-
"name": "size",
|
|
766
|
-
"type": {
|
|
767
|
-
"text": "Size"
|
|
768
|
-
},
|
|
769
|
-
"description": "The size of the accordion item.",
|
|
770
|
-
"default": "'small'",
|
|
771
|
-
"fieldName": "size"
|
|
772
|
-
},
|
|
773
|
-
{
|
|
774
|
-
"name": "variant",
|
|
775
|
-
"type": {
|
|
776
|
-
"text": "Variant"
|
|
777
|
-
},
|
|
778
|
-
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
779
|
-
"default": "'default'",
|
|
780
|
-
"fieldName": "variant"
|
|
781
|
-
},
|
|
782
|
-
{
|
|
783
|
-
"name": "data-aria-level",
|
|
784
|
-
"type": {
|
|
785
|
-
"text": "number"
|
|
786
|
-
},
|
|
787
|
-
"description": "The aria level of the accordion component.",
|
|
788
|
-
"default": "3",
|
|
789
|
-
"fieldName": "dataAriaLevel"
|
|
790
|
-
},
|
|
791
|
-
{
|
|
792
|
-
"name": "expanded",
|
|
793
|
-
"type": {
|
|
794
|
-
"text": "boolean"
|
|
795
|
-
},
|
|
796
|
-
"description": "The visibility of the accordion button.",
|
|
797
|
-
"default": "false",
|
|
798
|
-
"fieldName": "expanded"
|
|
799
|
-
},
|
|
800
|
-
{
|
|
801
|
-
"name": "header-text",
|
|
802
|
-
"type": {
|
|
803
|
-
"text": "string | undefined"
|
|
804
|
-
},
|
|
805
|
-
"description": "The header text of the accordion item.",
|
|
806
|
-
"fieldName": "headerText"
|
|
807
|
-
},
|
|
808
|
-
{
|
|
809
|
-
"name": "prefix-icon",
|
|
810
|
-
"type": {
|
|
811
|
-
"text": "IconNames | undefined"
|
|
812
|
-
},
|
|
813
|
-
"description": "The leading icon that is displayed before the header text.",
|
|
814
|
-
"fieldName": "prefixIcon"
|
|
815
|
-
},
|
|
816
|
-
{
|
|
817
|
-
"name": "disabled",
|
|
818
|
-
"type": {
|
|
819
|
-
"text": "boolean | undefined"
|
|
820
|
-
},
|
|
821
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
822
|
-
"default": "undefined",
|
|
823
|
-
"fieldName": "disabled",
|
|
824
|
-
"inheritedFrom": {
|
|
825
|
-
"name": "DisabledMixin",
|
|
826
|
-
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
827
|
-
}
|
|
828
|
-
}
|
|
829
|
-
],
|
|
830
|
-
"mixins": [
|
|
831
|
-
{
|
|
832
|
-
"name": "DisabledMixin",
|
|
833
|
-
"module": "/src/utils/mixins/DisabledMixin"
|
|
834
|
-
}
|
|
835
|
-
],
|
|
836
|
-
"superclass": {
|
|
837
|
-
"name": "Component",
|
|
838
|
-
"module": "/src/models"
|
|
839
|
-
},
|
|
840
|
-
"tagName": "mdc-accordionbutton",
|
|
841
|
-
"jsDoc": "/**\n * An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion button 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 do need any controls on your accordion heading, then it's advised to use `accordion` component.\n *\n * If an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.\n *\n * @tagname mdc-accordionbutton\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\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 button is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion button.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.\n *\n * @csspart body-section - The body section of the accordion button.\n * @csspart header-button-section - The header button section of the accordion button.\n * @csspart header-section - The header section of the accordion button.\n * @csspart leading-header - The leading header of the accordion button.\n * @csspart trailing-header - The trailing header of the accordion button.\n * @csspart trailing-header__icon - The trailing header icon of the accordion button.\n */",
|
|
842
|
-
"customElement": true
|
|
843
|
-
}
|
|
844
|
-
],
|
|
845
|
-
"exports": [
|
|
846
|
-
{
|
|
847
|
-
"kind": "js",
|
|
848
|
-
"name": "default",
|
|
849
|
-
"declaration": {
|
|
850
|
-
"name": "AccordionButton",
|
|
851
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
852
|
-
}
|
|
853
|
-
}
|
|
854
|
-
]
|
|
855
|
-
},
|
|
856
|
-
{
|
|
857
|
-
"kind": "javascript-module",
|
|
858
|
-
"path": "components/accordiongroup/accordiongroup.component.js",
|
|
859
|
-
"declarations": [
|
|
860
|
-
{
|
|
861
|
-
"kind": "class",
|
|
862
|
-
"description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
|
|
863
|
-
"name": "AccordionGroup",
|
|
864
|
-
"cssProperties": [
|
|
865
|
-
{
|
|
866
|
-
"description": "The border color of the entire accordiongroup",
|
|
867
|
-
"name": "--mdc-accordiongroup-border-color"
|
|
868
|
-
}
|
|
869
|
-
],
|
|
870
|
-
"slots": [
|
|
871
|
-
{
|
|
872
|
-
"description": "The default slot can contain the `accordion` or `accordionbutton` components.",
|
|
873
|
-
"name": "default"
|
|
874
|
-
}
|
|
875
|
-
],
|
|
876
|
-
"members": [
|
|
877
|
-
{
|
|
878
|
-
"kind": "field",
|
|
879
|
-
"name": "size",
|
|
880
|
-
"type": {
|
|
881
|
-
"text": "Size"
|
|
882
|
-
},
|
|
883
|
-
"description": "The size of the accordion item.",
|
|
884
|
-
"default": "'small'",
|
|
885
|
-
"attribute": "size",
|
|
886
|
-
"reflects": true
|
|
887
|
-
},
|
|
888
|
-
{
|
|
889
|
-
"kind": "field",
|
|
890
|
-
"name": "variant",
|
|
891
|
-
"type": {
|
|
892
|
-
"text": "Variant"
|
|
893
|
-
},
|
|
894
|
-
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
895
|
-
"default": "'stacked'",
|
|
896
|
-
"attribute": "variant",
|
|
897
|
-
"reflects": true
|
|
898
|
-
},
|
|
899
|
-
{
|
|
900
|
-
"kind": "field",
|
|
901
|
-
"name": "allowMultiple",
|
|
902
|
-
"type": {
|
|
903
|
-
"text": "boolean"
|
|
904
|
-
},
|
|
905
|
-
"default": "false",
|
|
906
|
-
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
907
|
-
"attribute": "allow-multiple",
|
|
908
|
-
"reflects": true
|
|
909
|
-
},
|
|
910
|
-
{
|
|
911
|
-
"kind": "method",
|
|
912
|
-
"name": "handleAccordionExpanded",
|
|
913
|
-
"privacy": "private",
|
|
914
|
-
"return": {
|
|
915
|
-
"type": {
|
|
916
|
-
"text": "void"
|
|
917
|
-
}
|
|
918
|
-
},
|
|
919
|
-
"parameters": [
|
|
920
|
-
{
|
|
921
|
-
"name": "event",
|
|
922
|
-
"type": {
|
|
923
|
-
"text": "Event"
|
|
924
|
-
},
|
|
925
|
-
"description": "The event object from the 'shown' event."
|
|
926
|
-
}
|
|
927
|
-
],
|
|
928
|
-
"description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
|
|
929
|
-
},
|
|
930
|
-
{
|
|
931
|
-
"kind": "method",
|
|
932
|
-
"name": "setChildrenAccordionAttributes",
|
|
933
|
-
"privacy": "private",
|
|
934
|
-
"return": {
|
|
935
|
-
"type": {
|
|
936
|
-
"text": "void"
|
|
937
|
-
}
|
|
938
|
-
},
|
|
939
|
-
"parameters": [
|
|
940
|
-
{
|
|
941
|
-
"name": "attributeName",
|
|
942
|
-
"type": {
|
|
943
|
-
"text": "string"
|
|
944
|
-
},
|
|
945
|
-
"description": "The name of the attribute to set."
|
|
946
|
-
},
|
|
947
|
-
{
|
|
948
|
-
"name": "attributeValue",
|
|
949
|
-
"type": {
|
|
950
|
-
"text": "string"
|
|
951
|
-
},
|
|
952
|
-
"description": "The value to set the attribute to."
|
|
953
|
-
}
|
|
954
|
-
],
|
|
955
|
-
"description": "Sets the given attribute on all child accordion or accordionbutton components."
|
|
956
|
-
}
|
|
957
|
-
],
|
|
958
|
-
"attributes": [
|
|
959
|
-
{
|
|
960
|
-
"name": "size",
|
|
961
|
-
"type": {
|
|
962
|
-
"text": "Size"
|
|
963
|
-
},
|
|
964
|
-
"description": "The size of the accordion item.",
|
|
965
|
-
"default": "'small'",
|
|
966
|
-
"fieldName": "size"
|
|
967
|
-
},
|
|
968
|
-
{
|
|
969
|
-
"name": "variant",
|
|
970
|
-
"type": {
|
|
971
|
-
"text": "Variant"
|
|
972
|
-
},
|
|
973
|
-
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
974
|
-
"default": "'stacked'",
|
|
975
|
-
"fieldName": "variant"
|
|
976
|
-
},
|
|
977
|
-
{
|
|
978
|
-
"name": "allow-multiple",
|
|
979
|
-
"type": {
|
|
980
|
-
"text": "boolean"
|
|
981
|
-
},
|
|
982
|
-
"default": "false",
|
|
983
|
-
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
984
|
-
"fieldName": "allowMultiple"
|
|
985
|
-
}
|
|
986
|
-
],
|
|
987
|
-
"superclass": {
|
|
988
|
-
"name": "Component",
|
|
989
|
-
"module": "/src/models"
|
|
990
|
-
},
|
|
991
|
-
"tagName": "mdc-accordiongroup",
|
|
992
|
-
"jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
|
|
993
|
-
"customElement": true
|
|
994
|
-
}
|
|
995
|
-
],
|
|
996
|
-
"exports": [
|
|
997
|
-
{
|
|
998
|
-
"kind": "js",
|
|
999
|
-
"name": "default",
|
|
1000
|
-
"declaration": {
|
|
1001
|
-
"name": "AccordionGroup",
|
|
1002
|
-
"module": "components/accordiongroup/accordiongroup.component.js"
|
|
1003
|
-
}
|
|
1004
|
-
}
|
|
1005
|
-
]
|
|
1006
|
-
},
|
|
1007
|
-
{
|
|
1008
|
-
"kind": "javascript-module",
|
|
1009
|
-
"path": "components/alertchip/alertchip.component.js",
|
|
1010
|
-
"declarations": [
|
|
1011
|
-
{
|
|
1012
|
-
"kind": "class",
|
|
1013
|
-
"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.",
|
|
1014
|
-
"name": "AlertChip",
|
|
1015
|
-
"cssProperties": [
|
|
1016
|
-
{
|
|
1017
|
-
"description": "The color of the label text",
|
|
1018
|
-
"name": "--mdc-chip-color"
|
|
1017
|
+
"description": "The color of the label text",
|
|
1018
|
+
"name": "--mdc-chip-color"
|
|
1019
1019
|
},
|
|
1020
1020
|
{
|
|
1021
1021
|
"description": "The color of the icon",
|
|
@@ -23489,119 +23489,371 @@
|
|
|
23489
23489
|
},
|
|
23490
23490
|
{
|
|
23491
23491
|
"kind": "javascript-module",
|
|
23492
|
-
"path": "components/
|
|
23492
|
+
"path": "components/menubar/menubar.component.js",
|
|
23493
23493
|
"declarations": [
|
|
23494
23494
|
{
|
|
23495
23495
|
"kind": "class",
|
|
23496
|
-
"description": "
|
|
23497
|
-
"name": "
|
|
23498
|
-
"
|
|
23496
|
+
"description": "Menubar is a navigational menu component that provides a vertical fixed list of menu items,\nwith support for nested submenus and keyboard navigation. It serves as a container\nfor menu items and manages their interaction patterns, including:\n- Keyboard navigation (Arrow keys, Home, End)\n- Menu item activation (Enter/Space)\n- Submenu toggling (Right/Left arrow keys)\n- Focus management\n- Integration with MenuPopover for nested menus\n\nA menubar will contain a set of menu items and their associated popovers.\nEach menu item can have a popover for nested menus.\n\nThe component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.\nIt works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.\n\n**Note:** A menubar contains three types of menu items, including menuitem, menuitemradio and menuitemcheckbox. These menu items may optionally be nested in one or more group containers. Groups or items may optionally by separated with separator elements.\n\n`mdc-menubar` contains a group that wraps all its chilren passed within the default slot. This has been added to ensure the right accessibility behavior while using screen readers.",
|
|
23497
|
+
"name": "MenuBar",
|
|
23498
|
+
"slots": [
|
|
23499
23499
|
{
|
|
23500
|
-
"description": "
|
|
23501
|
-
"name": "
|
|
23502
|
-
}
|
|
23500
|
+
"description": "Contains the menu items and their associated popovers",
|
|
23501
|
+
"name": "default"
|
|
23502
|
+
}
|
|
23503
|
+
],
|
|
23504
|
+
"members": [
|
|
23503
23505
|
{
|
|
23504
|
-
"
|
|
23505
|
-
"name": "
|
|
23506
|
-
"
|
|
23507
|
-
"
|
|
23508
|
-
"module": "src/components/listitem/listitem.component.ts"
|
|
23506
|
+
"kind": "field",
|
|
23507
|
+
"name": "menusections",
|
|
23508
|
+
"type": {
|
|
23509
|
+
"text": "Array<HTMLElement>"
|
|
23509
23510
|
}
|
|
23510
23511
|
},
|
|
23511
23512
|
{
|
|
23512
|
-
"
|
|
23513
|
-
"name": "
|
|
23514
|
-
"
|
|
23515
|
-
"
|
|
23516
|
-
|
|
23517
|
-
|
|
23513
|
+
"kind": "field",
|
|
23514
|
+
"name": "menuItems",
|
|
23515
|
+
"type": {
|
|
23516
|
+
"text": "Array<HTMLElement>"
|
|
23517
|
+
},
|
|
23518
|
+
"description": "Returns all menuitem elements, including those nested inside menusection.",
|
|
23519
|
+
"readonly": true
|
|
23518
23520
|
},
|
|
23519
23521
|
{
|
|
23520
|
-
"
|
|
23521
|
-
"name": "
|
|
23522
|
-
"
|
|
23523
|
-
|
|
23524
|
-
"
|
|
23525
|
-
|
|
23522
|
+
"kind": "method",
|
|
23523
|
+
"name": "getAllPopovers",
|
|
23524
|
+
"privacy": "private",
|
|
23525
|
+
"return": {
|
|
23526
|
+
"type": {
|
|
23527
|
+
"text": "Element[]"
|
|
23528
|
+
}
|
|
23529
|
+
},
|
|
23530
|
+
"description": "Returns all menupopovers, including direct and slotted ones ."
|
|
23526
23531
|
},
|
|
23527
23532
|
{
|
|
23528
|
-
"
|
|
23529
|
-
"name": "
|
|
23530
|
-
"
|
|
23531
|
-
|
|
23532
|
-
"
|
|
23533
|
-
|
|
23533
|
+
"kind": "method",
|
|
23534
|
+
"name": "handleClick",
|
|
23535
|
+
"privacy": "private",
|
|
23536
|
+
"return": {
|
|
23537
|
+
"type": {
|
|
23538
|
+
"text": "void"
|
|
23539
|
+
}
|
|
23540
|
+
},
|
|
23541
|
+
"parameters": [
|
|
23542
|
+
{
|
|
23543
|
+
"name": "event",
|
|
23544
|
+
"type": {
|
|
23545
|
+
"text": "MouseEvent"
|
|
23546
|
+
}
|
|
23547
|
+
},
|
|
23548
|
+
{
|
|
23549
|
+
"description": "The target menu item that was clicked.",
|
|
23550
|
+
"name": "target"
|
|
23551
|
+
}
|
|
23552
|
+
],
|
|
23553
|
+
"description": "Closes all other submenus on the top level.\nThis method is used to ensure that only one topolevel submenu is open at a time.\nIt finds all other menu items with submenus and closes their submenus."
|
|
23534
23554
|
},
|
|
23535
23555
|
{
|
|
23536
|
-
"
|
|
23537
|
-
"name": "
|
|
23538
|
-
"
|
|
23539
|
-
|
|
23540
|
-
|
|
23541
|
-
|
|
23556
|
+
"kind": "method",
|
|
23557
|
+
"name": "resetTabIndexAndSetActiveTabIndex",
|
|
23558
|
+
"privacy": "private",
|
|
23559
|
+
"parameters": [
|
|
23560
|
+
{
|
|
23561
|
+
"name": "menuItems",
|
|
23562
|
+
"type": {
|
|
23563
|
+
"text": "Array<HTMLElement>"
|
|
23564
|
+
}
|
|
23565
|
+
},
|
|
23566
|
+
{
|
|
23567
|
+
"description": "The index of the new active element in the list.",
|
|
23568
|
+
"name": "newIndex"
|
|
23569
|
+
}
|
|
23570
|
+
],
|
|
23571
|
+
"description": "Resets all list items tabindex to -1 and sets the tabindex of the\nelement at the given index to 0, effectively setting the active\nelement. This is used when navigating the list via keyboard."
|
|
23542
23572
|
},
|
|
23543
23573
|
{
|
|
23544
|
-
"
|
|
23545
|
-
"name": "
|
|
23546
|
-
"
|
|
23547
|
-
|
|
23548
|
-
"
|
|
23549
|
-
|
|
23574
|
+
"kind": "method",
|
|
23575
|
+
"name": "getCurrentIndex",
|
|
23576
|
+
"privacy": "private",
|
|
23577
|
+
"return": {
|
|
23578
|
+
"type": {
|
|
23579
|
+
"text": "number"
|
|
23580
|
+
}
|
|
23581
|
+
},
|
|
23582
|
+
"parameters": [
|
|
23583
|
+
{
|
|
23584
|
+
"name": "target",
|
|
23585
|
+
"type": {
|
|
23586
|
+
"text": "EventTarget | null"
|
|
23587
|
+
}
|
|
23588
|
+
}
|
|
23589
|
+
]
|
|
23550
23590
|
},
|
|
23551
23591
|
{
|
|
23552
|
-
"
|
|
23553
|
-
"name": "
|
|
23554
|
-
"
|
|
23555
|
-
|
|
23556
|
-
"
|
|
23557
|
-
|
|
23592
|
+
"kind": "method",
|
|
23593
|
+
"name": "getSubmenu",
|
|
23594
|
+
"privacy": "private",
|
|
23595
|
+
"return": {
|
|
23596
|
+
"type": {
|
|
23597
|
+
"text": "MenuPopover | undefined"
|
|
23598
|
+
}
|
|
23599
|
+
},
|
|
23600
|
+
"parameters": [
|
|
23601
|
+
{
|
|
23602
|
+
"name": "triggerId",
|
|
23603
|
+
"type": {
|
|
23604
|
+
"text": "string | null"
|
|
23605
|
+
}
|
|
23606
|
+
}
|
|
23607
|
+
]
|
|
23558
23608
|
},
|
|
23559
23609
|
{
|
|
23560
|
-
"
|
|
23561
|
-
"name": "
|
|
23562
|
-
"
|
|
23563
|
-
|
|
23564
|
-
"
|
|
23565
|
-
|
|
23610
|
+
"kind": "method",
|
|
23611
|
+
"name": "showSubmenu",
|
|
23612
|
+
"privacy": "private",
|
|
23613
|
+
"return": {
|
|
23614
|
+
"type": {
|
|
23615
|
+
"text": "void"
|
|
23616
|
+
}
|
|
23617
|
+
},
|
|
23618
|
+
"parameters": [
|
|
23619
|
+
{
|
|
23620
|
+
"name": "triggerId",
|
|
23621
|
+
"type": {
|
|
23622
|
+
"text": "string | null"
|
|
23623
|
+
}
|
|
23624
|
+
}
|
|
23625
|
+
]
|
|
23566
23626
|
},
|
|
23567
23627
|
{
|
|
23568
|
-
"
|
|
23569
|
-
"name": "
|
|
23570
|
-
"
|
|
23571
|
-
|
|
23572
|
-
"
|
|
23628
|
+
"kind": "method",
|
|
23629
|
+
"name": "updatePopoverPlacement",
|
|
23630
|
+
"privacy": "private",
|
|
23631
|
+
"return": {
|
|
23632
|
+
"type": {
|
|
23633
|
+
"text": "void"
|
|
23634
|
+
}
|
|
23573
23635
|
}
|
|
23574
23636
|
},
|
|
23575
23637
|
{
|
|
23576
|
-
"
|
|
23577
|
-
"name": "
|
|
23578
|
-
"
|
|
23579
|
-
|
|
23580
|
-
"
|
|
23581
|
-
|
|
23638
|
+
"kind": "method",
|
|
23639
|
+
"name": "updateTabIndexAndFocus",
|
|
23640
|
+
"privacy": "private",
|
|
23641
|
+
"return": {
|
|
23642
|
+
"type": {
|
|
23643
|
+
"text": "void"
|
|
23644
|
+
}
|
|
23645
|
+
},
|
|
23646
|
+
"parameters": [
|
|
23647
|
+
{
|
|
23648
|
+
"name": "menuItems",
|
|
23649
|
+
"type": {
|
|
23650
|
+
"text": "HTMLElement[]"
|
|
23651
|
+
}
|
|
23652
|
+
},
|
|
23653
|
+
{
|
|
23654
|
+
"name": "currentIndex",
|
|
23655
|
+
"type": {
|
|
23656
|
+
"text": "number"
|
|
23657
|
+
}
|
|
23658
|
+
},
|
|
23659
|
+
{
|
|
23660
|
+
"name": "newIndex",
|
|
23661
|
+
"type": {
|
|
23662
|
+
"text": "number"
|
|
23663
|
+
}
|
|
23664
|
+
}
|
|
23665
|
+
]
|
|
23582
23666
|
},
|
|
23583
23667
|
{
|
|
23584
|
-
"
|
|
23585
|
-
"name": "
|
|
23586
|
-
"
|
|
23587
|
-
|
|
23588
|
-
"
|
|
23589
|
-
|
|
23668
|
+
"kind": "method",
|
|
23669
|
+
"name": "navigateToMenuItem",
|
|
23670
|
+
"privacy": "private",
|
|
23671
|
+
"return": {
|
|
23672
|
+
"type": {
|
|
23673
|
+
"text": "void"
|
|
23674
|
+
}
|
|
23675
|
+
},
|
|
23676
|
+
"parameters": [
|
|
23677
|
+
{
|
|
23678
|
+
"name": "currentIndex",
|
|
23679
|
+
"type": {
|
|
23680
|
+
"text": "number"
|
|
23681
|
+
}
|
|
23682
|
+
},
|
|
23683
|
+
{
|
|
23684
|
+
"name": "direction",
|
|
23685
|
+
"type": {
|
|
23686
|
+
"text": "'prev' | 'next'"
|
|
23687
|
+
}
|
|
23688
|
+
},
|
|
23689
|
+
{
|
|
23690
|
+
"name": "shouldOpenSubmenu",
|
|
23691
|
+
"default": "false"
|
|
23692
|
+
}
|
|
23693
|
+
]
|
|
23590
23694
|
},
|
|
23591
23695
|
{
|
|
23592
|
-
"
|
|
23593
|
-
"name": "
|
|
23594
|
-
"
|
|
23595
|
-
|
|
23596
|
-
"
|
|
23597
|
-
|
|
23696
|
+
"kind": "method",
|
|
23697
|
+
"name": "getKeyWithDirectionFix",
|
|
23698
|
+
"privacy": "private",
|
|
23699
|
+
"return": {
|
|
23700
|
+
"type": {
|
|
23701
|
+
"text": "string"
|
|
23702
|
+
}
|
|
23703
|
+
},
|
|
23704
|
+
"parameters": [
|
|
23705
|
+
{
|
|
23706
|
+
"name": "originalKey",
|
|
23707
|
+
"type": {
|
|
23708
|
+
"text": "string"
|
|
23709
|
+
}
|
|
23710
|
+
}
|
|
23711
|
+
]
|
|
23712
|
+
},
|
|
23713
|
+
{
|
|
23714
|
+
"kind": "method",
|
|
23715
|
+
"name": "isTopLevelMenuItem",
|
|
23716
|
+
"privacy": "private",
|
|
23717
|
+
"return": {
|
|
23718
|
+
"type": {
|
|
23719
|
+
"text": "boolean"
|
|
23720
|
+
}
|
|
23721
|
+
},
|
|
23722
|
+
"parameters": [
|
|
23723
|
+
{
|
|
23724
|
+
"name": "element",
|
|
23725
|
+
"type": {
|
|
23726
|
+
"text": "HTMLElement"
|
|
23727
|
+
}
|
|
23728
|
+
}
|
|
23729
|
+
],
|
|
23730
|
+
"description": "Determines if a menuitem is a top-level menuitem (direct child of menubar or child of menusection whose parent is menubar)"
|
|
23731
|
+
},
|
|
23732
|
+
{
|
|
23733
|
+
"kind": "method",
|
|
23734
|
+
"name": "isNestedMenuItem",
|
|
23735
|
+
"privacy": "private",
|
|
23736
|
+
"return": {
|
|
23737
|
+
"type": {
|
|
23738
|
+
"text": "boolean"
|
|
23739
|
+
}
|
|
23740
|
+
},
|
|
23741
|
+
"parameters": [
|
|
23742
|
+
{
|
|
23743
|
+
"name": "element",
|
|
23744
|
+
"type": {
|
|
23745
|
+
"text": "HTMLElement"
|
|
23746
|
+
}
|
|
23747
|
+
}
|
|
23748
|
+
]
|
|
23749
|
+
},
|
|
23750
|
+
{
|
|
23751
|
+
"kind": "method",
|
|
23752
|
+
"name": "closeAllMenuPopovers",
|
|
23753
|
+
"privacy": "private"
|
|
23754
|
+
},
|
|
23755
|
+
{
|
|
23756
|
+
"kind": "method",
|
|
23757
|
+
"name": "crossMenubarNavigationOnLeft",
|
|
23758
|
+
"privacy": "private",
|
|
23759
|
+
"return": {
|
|
23760
|
+
"type": {
|
|
23761
|
+
"text": "Promise<void>"
|
|
23762
|
+
}
|
|
23763
|
+
},
|
|
23764
|
+
"parameters": [
|
|
23765
|
+
{
|
|
23766
|
+
"name": "element",
|
|
23767
|
+
"type": {
|
|
23768
|
+
"text": "HTMLElement"
|
|
23769
|
+
}
|
|
23770
|
+
}
|
|
23771
|
+
]
|
|
23772
|
+
},
|
|
23773
|
+
{
|
|
23774
|
+
"kind": "method",
|
|
23775
|
+
"name": "crossMenubarNavigationOnRight",
|
|
23776
|
+
"privacy": "private",
|
|
23777
|
+
"return": {
|
|
23778
|
+
"type": {
|
|
23779
|
+
"text": "Promise<void>"
|
|
23780
|
+
}
|
|
23781
|
+
},
|
|
23782
|
+
"parameters": [
|
|
23783
|
+
{
|
|
23784
|
+
"name": "element",
|
|
23785
|
+
"type": {
|
|
23786
|
+
"text": "HTMLElement"
|
|
23787
|
+
}
|
|
23788
|
+
}
|
|
23789
|
+
]
|
|
23790
|
+
},
|
|
23791
|
+
{
|
|
23792
|
+
"kind": "method",
|
|
23793
|
+
"name": "getParentMenuItemIndex",
|
|
23794
|
+
"privacy": "private",
|
|
23795
|
+
"return": {
|
|
23796
|
+
"type": {
|
|
23797
|
+
"text": "number"
|
|
23798
|
+
}
|
|
23799
|
+
},
|
|
23800
|
+
"parameters": [
|
|
23801
|
+
{
|
|
23802
|
+
"name": "element",
|
|
23803
|
+
"type": {
|
|
23804
|
+
"text": "HTMLElement"
|
|
23805
|
+
}
|
|
23806
|
+
}
|
|
23807
|
+
]
|
|
23808
|
+
},
|
|
23809
|
+
{
|
|
23810
|
+
"kind": "method",
|
|
23811
|
+
"name": "handleKeyDown",
|
|
23812
|
+
"privacy": "private",
|
|
23813
|
+
"return": {
|
|
23814
|
+
"type": {
|
|
23815
|
+
"text": "Promise<void>"
|
|
23816
|
+
}
|
|
23817
|
+
},
|
|
23818
|
+
"parameters": [
|
|
23819
|
+
{
|
|
23820
|
+
"name": "event",
|
|
23821
|
+
"type": {
|
|
23822
|
+
"text": "KeyboardEvent"
|
|
23823
|
+
}
|
|
23824
|
+
}
|
|
23825
|
+
]
|
|
23598
23826
|
}
|
|
23599
23827
|
],
|
|
23828
|
+
"superclass": {
|
|
23829
|
+
"name": "Component",
|
|
23830
|
+
"module": "/src/models"
|
|
23831
|
+
},
|
|
23832
|
+
"tagName": "mdc-menubar",
|
|
23833
|
+
"jsDoc": "/**\n * Menubar is a navigational menu component that provides a vertical fixed list of menu items,\n * with support for nested submenus and keyboard navigation. It serves as a container\n * for menu items and manages their interaction patterns, including:\n * - Keyboard navigation (Arrow keys, Home, End)\n * - Menu item activation (Enter/Space)\n * - Submenu toggling (Right/Left arrow keys)\n * - Focus management\n * - Integration with MenuPopover for nested menus\n *\n * A menubar will contain a set of menu items and their associated popovers.\n * Each menu item can have a popover for nested menus.\n *\n * The component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.\n * It works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.\n *\n * **Note:** A menubar contains three types of menu items, including menuitem, menuitemradio and menuitemcheckbox. These menu items may optionally be nested in one or more group containers. Groups or items may optionally by separated with separator elements.\n *\n * `mdc-menubar` contains a group that wraps all its chilren passed within the default slot. This has been added to ensure the right accessibility behavior while using screen readers.\n *\n * @tagname mdc-menubar\n * @slot default - Contains the menu items and their associated popovers\n */",
|
|
23834
|
+
"customElement": true
|
|
23835
|
+
}
|
|
23836
|
+
],
|
|
23837
|
+
"exports": [
|
|
23838
|
+
{
|
|
23839
|
+
"kind": "js",
|
|
23840
|
+
"name": "default",
|
|
23841
|
+
"declaration": {
|
|
23842
|
+
"name": "MenuBar",
|
|
23843
|
+
"module": "components/menubar/menubar.component.js"
|
|
23844
|
+
}
|
|
23845
|
+
}
|
|
23846
|
+
]
|
|
23847
|
+
},
|
|
23848
|
+
{
|
|
23849
|
+
"kind": "javascript-module",
|
|
23850
|
+
"path": "components/menuitem/menuitem.component.js",
|
|
23851
|
+
"declarations": [
|
|
23852
|
+
{
|
|
23853
|
+
"kind": "class",
|
|
23854
|
+
"description": "menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\nA menu item can contain an icon on the leading or trailing side.\n\nThe leading and trailing slots can be used to display controls and text.<br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted.\n\nPlease use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\nFor example mdc-menupopover or mdc-menubar.\n\nMenu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n\n**Note**: If a menuitem contains a long text, it is recommended to create a tooltip for the menuitem that displays the full text on hover.\nConsumers need to add a unique ID to this menuitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the menuitem using the `triggerID` attribute.",
|
|
23855
|
+
"name": "MenuItem",
|
|
23600
23856
|
"cssParts": [
|
|
23601
|
-
{
|
|
23602
|
-
"description": "Allows customization of the checkmark icon.",
|
|
23603
|
-
"name": "checkmark-icon"
|
|
23604
|
-
},
|
|
23605
23857
|
{
|
|
23606
23858
|
"description": "Allows customization of the leading part.",
|
|
23607
23859
|
"name": "leading",
|
|
@@ -23612,11 +23864,7 @@
|
|
|
23612
23864
|
},
|
|
23613
23865
|
{
|
|
23614
23866
|
"description": "Allows customization of leading arrow icon.",
|
|
23615
|
-
"name": "leading-arrow"
|
|
23616
|
-
"inheritedFrom": {
|
|
23617
|
-
"name": "MenuItem",
|
|
23618
|
-
"module": "src/components/menuitem/menuitem.component.ts"
|
|
23619
|
-
}
|
|
23867
|
+
"name": "leading-arrow"
|
|
23620
23868
|
},
|
|
23621
23869
|
{
|
|
23622
23870
|
"description": "Allows customization of the leading text part.",
|
|
@@ -23636,11 +23884,7 @@
|
|
|
23636
23884
|
},
|
|
23637
23885
|
{
|
|
23638
23886
|
"description": "Allows customization of trailing arrow icon.",
|
|
23639
|
-
"name": "trailing-arrow"
|
|
23640
|
-
"inheritedFrom": {
|
|
23641
|
-
"name": "MenuItem",
|
|
23642
|
-
"module": "src/components/menuitem/menuitem.component.ts"
|
|
23643
|
-
}
|
|
23887
|
+
"name": "trailing-arrow"
|
|
23644
23888
|
},
|
|
23645
23889
|
{
|
|
23646
23890
|
"description": "Allows customization of the trailing text part.",
|
|
@@ -23653,7 +23897,7 @@
|
|
|
23653
23897
|
],
|
|
23654
23898
|
"slots": [
|
|
23655
23899
|
{
|
|
23656
|
-
"description": "slot for menu item
|
|
23900
|
+
"description": "slot for menu item controls to appear of leading end.",
|
|
23657
23901
|
"name": "leading-controls",
|
|
23658
23902
|
"inheritedFrom": {
|
|
23659
23903
|
"name": "ListItem",
|
|
@@ -23661,7 +23905,7 @@
|
|
|
23661
23905
|
}
|
|
23662
23906
|
},
|
|
23663
23907
|
{
|
|
23664
|
-
"description": "slot for menu item
|
|
23908
|
+
"description": "slot for menu item primary label.",
|
|
23665
23909
|
"name": "leading-text-primary-label",
|
|
23666
23910
|
"inheritedFrom": {
|
|
23667
23911
|
"name": "ListItem",
|
|
@@ -23669,7 +23913,7 @@
|
|
|
23669
23913
|
}
|
|
23670
23914
|
},
|
|
23671
23915
|
{
|
|
23672
|
-
"description": "slot for menu item
|
|
23916
|
+
"description": "slot for menu item secondary label.",
|
|
23673
23917
|
"name": "leading-text-secondary-label",
|
|
23674
23918
|
"inheritedFrom": {
|
|
23675
23919
|
"name": "ListItem",
|
|
@@ -23677,7 +23921,7 @@
|
|
|
23677
23921
|
}
|
|
23678
23922
|
},
|
|
23679
23923
|
{
|
|
23680
|
-
"description": "slot for menu item
|
|
23924
|
+
"description": "slot for menu item tertiary label.",
|
|
23681
23925
|
"name": "leading-text-tertiary-label",
|
|
23682
23926
|
"inheritedFrom": {
|
|
23683
23927
|
"name": "ListItem",
|
|
@@ -23685,7 +23929,7 @@
|
|
|
23685
23929
|
}
|
|
23686
23930
|
},
|
|
23687
23931
|
{
|
|
23688
|
-
"description": "slot for menu item
|
|
23932
|
+
"description": "slot for menu item side header text.",
|
|
23689
23933
|
"name": "trailing-text-side-header",
|
|
23690
23934
|
"inheritedFrom": {
|
|
23691
23935
|
"name": "ListItem",
|
|
@@ -23693,7 +23937,7 @@
|
|
|
23693
23937
|
}
|
|
23694
23938
|
},
|
|
23695
23939
|
{
|
|
23696
|
-
"description": "slot for menu item
|
|
23940
|
+
"description": "slot for menu item subline text.",
|
|
23697
23941
|
"name": "trailing-text-subline",
|
|
23698
23942
|
"inheritedFrom": {
|
|
23699
23943
|
"name": "ListItem",
|
|
@@ -23701,7 +23945,7 @@
|
|
|
23701
23945
|
}
|
|
23702
23946
|
},
|
|
23703
23947
|
{
|
|
23704
|
-
"description": "slot for menu item
|
|
23948
|
+
"description": "slot for menu item controls to appear of trailing end.",
|
|
23705
23949
|
"name": "trailing-controls",
|
|
23706
23950
|
"inheritedFrom": {
|
|
23707
23951
|
"name": "ListItem",
|
|
@@ -23718,93 +23962,6 @@
|
|
|
23718
23962
|
}
|
|
23719
23963
|
],
|
|
23720
23964
|
"members": [
|
|
23721
|
-
{
|
|
23722
|
-
"kind": "field",
|
|
23723
|
-
"name": "checked",
|
|
23724
|
-
"type": {
|
|
23725
|
-
"text": "boolean"
|
|
23726
|
-
},
|
|
23727
|
-
"default": "false",
|
|
23728
|
-
"description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
|
|
23729
|
-
"attribute": "checked",
|
|
23730
|
-
"reflects": true
|
|
23731
|
-
},
|
|
23732
|
-
{
|
|
23733
|
-
"kind": "field",
|
|
23734
|
-
"name": "indicator",
|
|
23735
|
-
"type": {
|
|
23736
|
-
"text": "Indicator"
|
|
23737
|
-
},
|
|
23738
|
-
"description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
|
|
23739
|
-
"default": "'checkbox'",
|
|
23740
|
-
"attribute": "indicator",
|
|
23741
|
-
"reflects": true
|
|
23742
|
-
},
|
|
23743
|
-
{
|
|
23744
|
-
"kind": "method",
|
|
23745
|
-
"name": "handleMouseClick",
|
|
23746
|
-
"privacy": "private",
|
|
23747
|
-
"description": "Handles click events to toggle checked state\nIf the menuitemcheckbox is disabled or soft-disabled, it does nothing.\nIf the menuitemcheckbox is not disabled, it toggles checked if uncontrolled, and dispatches the 'change' event."
|
|
23748
|
-
},
|
|
23749
|
-
{
|
|
23750
|
-
"kind": "method",
|
|
23751
|
-
"name": "staticCheckbox",
|
|
23752
|
-
"privacy": "private",
|
|
23753
|
-
"return": {
|
|
23754
|
-
"type": {
|
|
23755
|
-
"text": ""
|
|
23756
|
-
}
|
|
23757
|
-
},
|
|
23758
|
-
"description": "Returns a static checkbox element if the indicator is set to checkbox.\nIf the indicator is not set to checkbox, it returns nothing."
|
|
23759
|
-
},
|
|
23760
|
-
{
|
|
23761
|
-
"kind": "method",
|
|
23762
|
-
"name": "staticToggle",
|
|
23763
|
-
"privacy": "private",
|
|
23764
|
-
"return": {
|
|
23765
|
-
"type": {
|
|
23766
|
-
"text": ""
|
|
23767
|
-
}
|
|
23768
|
-
},
|
|
23769
|
-
"description": "Returns a static toggle element if the indicator is set to toggle.\nIf the indicator is not set to toggle, it returns nothing.\n\nThe toggle will always be positioned on the trailing side of the menuitem label."
|
|
23770
|
-
},
|
|
23771
|
-
{
|
|
23772
|
-
"kind": "method",
|
|
23773
|
-
"name": "getCheckmarkIcon",
|
|
23774
|
-
"privacy": "private",
|
|
23775
|
-
"return": {
|
|
23776
|
-
"type": {
|
|
23777
|
-
"text": ""
|
|
23778
|
-
}
|
|
23779
|
-
},
|
|
23780
|
-
"description": "Returns a checkmark icon if the indicator is set to checkmark and the checked state is true.\nIf the indicator is not set to checkmark or the checked state is false, it returns nothing.\n\nThe checkmark icon will always be positioned on the trailing side of the menuitem label."
|
|
23781
|
-
},
|
|
23782
|
-
{
|
|
23783
|
-
"kind": "field",
|
|
23784
|
-
"name": "controlTypeProviderContext",
|
|
23785
|
-
"privacy": "private",
|
|
23786
|
-
"readonly": true,
|
|
23787
|
-
"inheritedFrom": {
|
|
23788
|
-
"name": "ControlTypeMixin",
|
|
23789
|
-
"module": "utils/mixins/ControlTypeMixin.js"
|
|
23790
|
-
}
|
|
23791
|
-
},
|
|
23792
|
-
{
|
|
23793
|
-
"kind": "field",
|
|
23794
|
-
"name": "controlType",
|
|
23795
|
-
"type": {
|
|
23796
|
-
"text": "ControlType | undefined"
|
|
23797
|
-
},
|
|
23798
|
-
"privacy": "public",
|
|
23799
|
-
"description": "Indicates whether the component is controlled or uncontrolled.\n- 'controlled' it will not handle any interaction itself, e.g. toggling a checkbox.\n- 'uncontrolled' it will handle interactions\n- undefined it will get the value from controltypeprovider, or default to 'uncontrolled'",
|
|
23800
|
-
"default": "undefined",
|
|
23801
|
-
"attribute": "control-type",
|
|
23802
|
-
"reflects": true,
|
|
23803
|
-
"inheritedFrom": {
|
|
23804
|
-
"name": "ControlTypeMixin",
|
|
23805
|
-
"module": "utils/mixins/ControlTypeMixin.js"
|
|
23806
|
-
}
|
|
23807
|
-
},
|
|
23808
23965
|
{
|
|
23809
23966
|
"kind": "field",
|
|
23810
23967
|
"name": "arrowPosition",
|
|
@@ -23813,11 +23970,7 @@
|
|
|
23813
23970
|
},
|
|
23814
23971
|
"description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
|
|
23815
23972
|
"attribute": "arrow-position",
|
|
23816
|
-
"reflects": true
|
|
23817
|
-
"inheritedFrom": {
|
|
23818
|
-
"name": "MenuItem",
|
|
23819
|
-
"module": "components/menuitem/menuitem.component.js"
|
|
23820
|
-
}
|
|
23973
|
+
"reflects": true
|
|
23821
23974
|
},
|
|
23822
23975
|
{
|
|
23823
23976
|
"kind": "field",
|
|
@@ -23827,11 +23980,7 @@
|
|
|
23827
23980
|
},
|
|
23828
23981
|
"description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
|
|
23829
23982
|
"attribute": "arrow-direction",
|
|
23830
|
-
"reflects": true
|
|
23831
|
-
"inheritedFrom": {
|
|
23832
|
-
"name": "MenuItem",
|
|
23833
|
-
"module": "components/menuitem/menuitem.component.js"
|
|
23834
|
-
}
|
|
23983
|
+
"reflects": true
|
|
23835
23984
|
},
|
|
23836
23985
|
{
|
|
23837
23986
|
"kind": "field",
|
|
@@ -23841,11 +23990,7 @@
|
|
|
23841
23990
|
},
|
|
23842
23991
|
"description": "The name attribute is used to identify the menu item when it is selected.",
|
|
23843
23992
|
"attribute": "name",
|
|
23844
|
-
"reflects": true
|
|
23845
|
-
"inheritedFrom": {
|
|
23846
|
-
"name": "MenuItem",
|
|
23847
|
-
"module": "components/menuitem/menuitem.component.js"
|
|
23848
|
-
}
|
|
23993
|
+
"reflects": true
|
|
23849
23994
|
},
|
|
23850
23995
|
{
|
|
23851
23996
|
"kind": "field",
|
|
@@ -23855,11 +24000,7 @@
|
|
|
23855
24000
|
},
|
|
23856
24001
|
"description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
|
|
23857
24002
|
"attribute": "value",
|
|
23858
|
-
"reflects": true
|
|
23859
|
-
"inheritedFrom": {
|
|
23860
|
-
"name": "MenuItem",
|
|
23861
|
-
"module": "components/menuitem/menuitem.component.js"
|
|
23862
|
-
}
|
|
24003
|
+
"reflects": true
|
|
23863
24004
|
},
|
|
23864
24005
|
{
|
|
23865
24006
|
"kind": "method",
|
|
@@ -23903,11 +24044,7 @@
|
|
|
23903
24044
|
"description": "The keyboard event that triggered the action."
|
|
23904
24045
|
}
|
|
23905
24046
|
],
|
|
23906
|
-
"description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event."
|
|
23907
|
-
"inheritedFrom": {
|
|
23908
|
-
"name": "MenuItem",
|
|
23909
|
-
"module": "components/menuitem/menuitem.component.js"
|
|
23910
|
-
}
|
|
24047
|
+
"description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event."
|
|
23911
24048
|
},
|
|
23912
24049
|
{
|
|
23913
24050
|
"kind": "method",
|
|
@@ -24238,15 +24375,7 @@
|
|
|
24238
24375
|
],
|
|
24239
24376
|
"events": [
|
|
24240
24377
|
{
|
|
24241
|
-
"
|
|
24242
|
-
"type": {
|
|
24243
|
-
"text": "Event"
|
|
24244
|
-
},
|
|
24245
|
-
"description": "(React: onChange) This event is dispatched when the menuitemcheckbox changes.",
|
|
24246
|
-
"reactName": "onChange"
|
|
24247
|
-
},
|
|
24248
|
-
{
|
|
24249
|
-
"description": "(React: onClick) This event is dispatched when the menuitemcheckbox is clicked.",
|
|
24378
|
+
"description": "(React: onClick) This event is dispatched when the menuitem is clicked.",
|
|
24250
24379
|
"name": "click",
|
|
24251
24380
|
"reactName": "onClick",
|
|
24252
24381
|
"inheritedFrom": {
|
|
@@ -24254,15 +24383,6 @@
|
|
|
24254
24383
|
"module": "src/components/listitem/listitem.component.ts"
|
|
24255
24384
|
}
|
|
24256
24385
|
},
|
|
24257
|
-
{
|
|
24258
|
-
"description": "(React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.",
|
|
24259
|
-
"name": "focus",
|
|
24260
|
-
"reactName": "onFocus",
|
|
24261
|
-
"inheritedFrom": {
|
|
24262
|
-
"name": "ListItem",
|
|
24263
|
-
"module": "src/components/listitem/listitem.component.ts"
|
|
24264
|
-
}
|
|
24265
|
-
},
|
|
24266
24386
|
{
|
|
24267
24387
|
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.",
|
|
24268
24388
|
"name": "keydown",
|
|
@@ -24281,6 +24401,15 @@
|
|
|
24281
24401
|
"module": "src/components/listitem/listitem.component.ts"
|
|
24282
24402
|
}
|
|
24283
24403
|
},
|
|
24404
|
+
{
|
|
24405
|
+
"description": "(React: onFocus) This event is dispatched when the menuitem receives focus.",
|
|
24406
|
+
"name": "focus",
|
|
24407
|
+
"reactName": "onFocus",
|
|
24408
|
+
"inheritedFrom": {
|
|
24409
|
+
"name": "ListItem",
|
|
24410
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
24411
|
+
}
|
|
24412
|
+
},
|
|
24284
24413
|
{
|
|
24285
24414
|
"description": "(React: onEnabled) This event is dispatched after the menuitem is enabled",
|
|
24286
24415
|
"name": "enabled",
|
|
@@ -24319,48 +24448,13 @@
|
|
|
24319
24448
|
}
|
|
24320
24449
|
],
|
|
24321
24450
|
"attributes": [
|
|
24322
|
-
{
|
|
24323
|
-
"name": "checked",
|
|
24324
|
-
"type": {
|
|
24325
|
-
"text": "boolean"
|
|
24326
|
-
},
|
|
24327
|
-
"default": "false",
|
|
24328
|
-
"description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
|
|
24329
|
-
"fieldName": "checked"
|
|
24330
|
-
},
|
|
24331
|
-
{
|
|
24332
|
-
"name": "indicator",
|
|
24333
|
-
"type": {
|
|
24334
|
-
"text": "Indicator"
|
|
24335
|
-
},
|
|
24336
|
-
"description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
|
|
24337
|
-
"default": "'checkbox'",
|
|
24338
|
-
"fieldName": "indicator"
|
|
24339
|
-
},
|
|
24340
|
-
{
|
|
24341
|
-
"name": "control-type",
|
|
24342
|
-
"type": {
|
|
24343
|
-
"text": "ControlType | undefined"
|
|
24344
|
-
},
|
|
24345
|
-
"description": "Indicates whether the component is controlled or uncontrolled.\n- 'controlled' it will not handle any interaction itself, e.g. toggling a checkbox.\n- 'uncontrolled' it will handle interactions\n- undefined it will get the value from controltypeprovider, or default to 'uncontrolled'",
|
|
24346
|
-
"default": "undefined",
|
|
24347
|
-
"fieldName": "controlType",
|
|
24348
|
-
"inheritedFrom": {
|
|
24349
|
-
"name": "ControlTypeMixin",
|
|
24350
|
-
"module": "src/utils/mixins/ControlTypeMixin.ts"
|
|
24351
|
-
}
|
|
24352
|
-
},
|
|
24353
24451
|
{
|
|
24354
24452
|
"name": "arrow-position",
|
|
24355
24453
|
"type": {
|
|
24356
24454
|
"text": "ArrowPositions | undefined"
|
|
24357
24455
|
},
|
|
24358
24456
|
"description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
|
|
24359
|
-
"fieldName": "arrowPosition"
|
|
24360
|
-
"inheritedFrom": {
|
|
24361
|
-
"name": "MenuItem",
|
|
24362
|
-
"module": "src/components/menuitem/menuitem.component.ts"
|
|
24363
|
-
}
|
|
24457
|
+
"fieldName": "arrowPosition"
|
|
24364
24458
|
},
|
|
24365
24459
|
{
|
|
24366
24460
|
"name": "arrow-direction",
|
|
@@ -24368,11 +24462,7 @@
|
|
|
24368
24462
|
"text": "ArrowDirections | undefined"
|
|
24369
24463
|
},
|
|
24370
24464
|
"description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
|
|
24371
|
-
"fieldName": "arrowDirection"
|
|
24372
|
-
"inheritedFrom": {
|
|
24373
|
-
"name": "MenuItem",
|
|
24374
|
-
"module": "src/components/menuitem/menuitem.component.ts"
|
|
24375
|
-
}
|
|
24465
|
+
"fieldName": "arrowDirection"
|
|
24376
24466
|
},
|
|
24377
24467
|
{
|
|
24378
24468
|
"name": "name",
|
|
@@ -24380,11 +24470,7 @@
|
|
|
24380
24470
|
"text": "string | undefined"
|
|
24381
24471
|
},
|
|
24382
24472
|
"description": "The name attribute is used to identify the menu item when it is selected.",
|
|
24383
|
-
"fieldName": "name"
|
|
24384
|
-
"inheritedFrom": {
|
|
24385
|
-
"name": "MenuItem",
|
|
24386
|
-
"module": "src/components/menuitem/menuitem.component.ts"
|
|
24387
|
-
}
|
|
24473
|
+
"fieldName": "name"
|
|
24388
24474
|
},
|
|
24389
24475
|
{
|
|
24390
24476
|
"name": "value",
|
|
@@ -24392,11 +24478,7 @@
|
|
|
24392
24478
|
"text": "string | undefined"
|
|
24393
24479
|
},
|
|
24394
24480
|
"description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
|
|
24395
|
-
"fieldName": "value"
|
|
24396
|
-
"inheritedFrom": {
|
|
24397
|
-
"name": "MenuItem",
|
|
24398
|
-
"module": "src/components/menuitem/menuitem.component.ts"
|
|
24399
|
-
}
|
|
24481
|
+
"fieldName": "value"
|
|
24400
24482
|
},
|
|
24401
24483
|
{
|
|
24402
24484
|
"name": "disabled",
|
|
@@ -24537,19 +24619,111 @@
|
|
|
24537
24619
|
}
|
|
24538
24620
|
}
|
|
24539
24621
|
],
|
|
24540
|
-
"mixins": [
|
|
24541
|
-
{
|
|
24542
|
-
"name": "ControlTypeMixin",
|
|
24543
|
-
"module": "/src/utils/mixins/ControlTypeMixin"
|
|
24544
|
-
}
|
|
24545
|
-
],
|
|
24546
24622
|
"superclass": {
|
|
24547
|
-
"name": "
|
|
24548
|
-
"module": "/src/components/
|
|
24623
|
+
"name": "ListItem",
|
|
24624
|
+
"module": "/src/components/listitem/listitem.component"
|
|
24549
24625
|
},
|
|
24550
|
-
"tagName": "mdc-
|
|
24551
|
-
"jsDoc": "/**\n *
|
|
24552
|
-
"customElement": true
|
|
24626
|
+
"tagName": "mdc-menuitem",
|
|
24627
|
+
"jsDoc": "/**\n * menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\n * A menu item can contain an icon on the leading or trailing side.\n *\n * The leading and trailing slots can be used to display controls and text.<br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted.\n *\n * Please use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\n * For example mdc-menupopover or mdc-menubar.\n *\n * Menu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * **Note**: If a menuitem contains a long text, it is recommended to create a tooltip for the menuitem that displays the full text on hover.\n * Consumers need to add a unique ID to this menuitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the menuitem using the `triggerID` attribute.\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n *\n * @tagname mdc-menuitem\n *\n * @slot leading-controls - slot for menu item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item primary label.\n * @slot leading-text-secondary-label - slot for menu item secondary label.\n * @slot leading-text-tertiary-label - slot for menu item tertiary label.\n * @slot trailing-text-side-header - slot for menu item side header text.\n * @slot trailing-text-subline - slot for menu item subline text.\n * @slot trailing-controls - slot for menu item controls to appear of trailing end.\n *\n * @event click - (React: onClick) This event is dispatched when the menuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the menuitem.\n * @event focus - (React: onFocus) This event is dispatched when the menuitem receives focus.\n * @event enabled - (React: onEnabled) This event is dispatched after the menuitem is enabled\n * @event disabled - (React: onDisabled) This event is dispatched after the menuitem is disabled\n * @event created - (React: onCreated) This event is dispatched after the menuitem is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched after the menuitem is destroyed (removed from the DOM)\n *\n * @csspart leading - Allows customization of the leading part.\n * @csspart leading-arrow - Allows customization of leading arrow icon.\n * @csspart leading-text - Allows customization of the leading text part.\n * @csspart trailing - Allows customization of the trailing part.\n * @csspart trailing-arrow - Allows customization of trailing arrow icon.\n * @csspart trailing-text - Allows customization of the trailing text part.\n */",
|
|
24628
|
+
"customElement": true,
|
|
24629
|
+
"cssProperties": [
|
|
24630
|
+
{
|
|
24631
|
+
"description": "Allows customization of the default background color.",
|
|
24632
|
+
"name": "--mdc-listitem-default-background-color",
|
|
24633
|
+
"inheritedFrom": {
|
|
24634
|
+
"name": "ListItem",
|
|
24635
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
24636
|
+
}
|
|
24637
|
+
},
|
|
24638
|
+
{
|
|
24639
|
+
"description": "Allows customization of the background color on hover.",
|
|
24640
|
+
"name": "--mdc-listitem-background-color-hover",
|
|
24641
|
+
"inheritedFrom": {
|
|
24642
|
+
"name": "ListItem",
|
|
24643
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
24644
|
+
}
|
|
24645
|
+
},
|
|
24646
|
+
{
|
|
24647
|
+
"description": "Allows customization of the background color when pressed.",
|
|
24648
|
+
"name": "--mdc-listitem-background-color-active",
|
|
24649
|
+
"inheritedFrom": {
|
|
24650
|
+
"name": "ListItem",
|
|
24651
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
24652
|
+
}
|
|
24653
|
+
},
|
|
24654
|
+
{
|
|
24655
|
+
"description": "Allows customization of the primary label, side header and subline text slot color.",
|
|
24656
|
+
"name": "--mdc-listitem-primary-label-color",
|
|
24657
|
+
"inheritedFrom": {
|
|
24658
|
+
"name": "ListItem",
|
|
24659
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
24660
|
+
}
|
|
24661
|
+
},
|
|
24662
|
+
{
|
|
24663
|
+
"description": "Allows customization of the secondary and tertiary label text slot color.",
|
|
24664
|
+
"name": "--mdc-listitem-secondary-label-color",
|
|
24665
|
+
"inheritedFrom": {
|
|
24666
|
+
"name": "ListItem",
|
|
24667
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
24668
|
+
}
|
|
24669
|
+
},
|
|
24670
|
+
{
|
|
24671
|
+
"description": "Allows customization of the disabled color.",
|
|
24672
|
+
"name": "--mdc-listitem-disabled-color",
|
|
24673
|
+
"inheritedFrom": {
|
|
24674
|
+
"name": "ListItem",
|
|
24675
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
24676
|
+
}
|
|
24677
|
+
},
|
|
24678
|
+
{
|
|
24679
|
+
"description": "Allows customization of column gap.",
|
|
24680
|
+
"name": "--mdc-listitem-column-gap",
|
|
24681
|
+
"inheritedFrom": {
|
|
24682
|
+
"name": "ListItem",
|
|
24683
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
24684
|
+
}
|
|
24685
|
+
},
|
|
24686
|
+
{
|
|
24687
|
+
"description": "Allows customization of padding left and right.",
|
|
24688
|
+
"name": "--mdc-listitem-padding-left-right",
|
|
24689
|
+
"inheritedFrom": {
|
|
24690
|
+
"name": "ListItem",
|
|
24691
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
24692
|
+
}
|
|
24693
|
+
},
|
|
24694
|
+
{
|
|
24695
|
+
"description": "Allows customization of padding top and bottom.",
|
|
24696
|
+
"name": "--mdc-listitem-padding-top-bottom",
|
|
24697
|
+
"inheritedFrom": {
|
|
24698
|
+
"name": "ListItem",
|
|
24699
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
24700
|
+
}
|
|
24701
|
+
},
|
|
24702
|
+
{
|
|
24703
|
+
"description": "Allows customization of the cursor.",
|
|
24704
|
+
"name": "--mdc-listitem-cursor",
|
|
24705
|
+
"inheritedFrom": {
|
|
24706
|
+
"name": "ListItem",
|
|
24707
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
24708
|
+
}
|
|
24709
|
+
},
|
|
24710
|
+
{
|
|
24711
|
+
"description": "Allows customization of the width of the list item.",
|
|
24712
|
+
"name": "--mdc-listitem-width",
|
|
24713
|
+
"inheritedFrom": {
|
|
24714
|
+
"name": "ListItem",
|
|
24715
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
24716
|
+
}
|
|
24717
|
+
},
|
|
24718
|
+
{
|
|
24719
|
+
"description": "Allows customization of the height of the list item.",
|
|
24720
|
+
"name": "--mdc-listitem-height",
|
|
24721
|
+
"inheritedFrom": {
|
|
24722
|
+
"name": "ListItem",
|
|
24723
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
24724
|
+
}
|
|
24725
|
+
}
|
|
24726
|
+
]
|
|
24553
24727
|
}
|
|
24554
24728
|
],
|
|
24555
24729
|
"exports": [
|
|
@@ -24557,21 +24731,127 @@
|
|
|
24557
24731
|
"kind": "js",
|
|
24558
24732
|
"name": "default",
|
|
24559
24733
|
"declaration": {
|
|
24560
|
-
"name": "
|
|
24561
|
-
"module": "components/
|
|
24734
|
+
"name": "MenuItem",
|
|
24735
|
+
"module": "components/menuitem/menuitem.component.js"
|
|
24562
24736
|
}
|
|
24563
24737
|
}
|
|
24564
24738
|
]
|
|
24565
24739
|
},
|
|
24566
24740
|
{
|
|
24567
24741
|
"kind": "javascript-module",
|
|
24568
|
-
"path": "components/
|
|
24742
|
+
"path": "components/menuitemcheckbox/menuitemcheckbox.component.js",
|
|
24569
24743
|
"declarations": [
|
|
24570
24744
|
{
|
|
24571
24745
|
"kind": "class",
|
|
24572
|
-
"description": "
|
|
24573
|
-
"name": "
|
|
24746
|
+
"description": "A menuitemcheckbox component is a checkable menuitem.\nThere should be no focusable descendants inside this menuitemcheckbox component.\n\nThe `checked` attribute indicates whether the menuitemcheckbox is checked or not.\n\nMenu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n\nThe `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.\nBy default, the `indicator` is set to <b>checkbox</b>.<br/>\n\nThe checkbox will always be positioned on the leading side of the menuitem label and\nthe toggle and checkmark will always be positioned on the trailing side.\n\nThe checkbox will have the possible states of `true` or `false`.\nIf the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\nthen the checkmark will be displayed. if not, then no indicator will be displayed.\n\nThe forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.\nIt is intended to be used for customised menu items where the indicator is implemented differently.\nFor example, you can use a custom icon or a different visual element to indicate the state of the menu item.\nMake sure the new indicator is accessible.\n\nIf you want only one item in a group to be checked, consider using menuitemradio component.",
|
|
24747
|
+
"name": "MenuItemCheckbox",
|
|
24748
|
+
"cssProperties": [
|
|
24749
|
+
{
|
|
24750
|
+
"description": "Controls the padding on the left and right of the menuitemcheckbox.",
|
|
24751
|
+
"name": "--mdc-listitem-padding-left-and-right"
|
|
24752
|
+
},
|
|
24753
|
+
{
|
|
24754
|
+
"description": "Allows customization of the default background color.",
|
|
24755
|
+
"name": "--mdc-listitem-default-background-color",
|
|
24756
|
+
"inheritedFrom": {
|
|
24757
|
+
"name": "ListItem",
|
|
24758
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
24759
|
+
}
|
|
24760
|
+
},
|
|
24761
|
+
{
|
|
24762
|
+
"description": "Allows customization of the background color on hover.",
|
|
24763
|
+
"name": "--mdc-listitem-background-color-hover",
|
|
24764
|
+
"inheritedFrom": {
|
|
24765
|
+
"name": "ListItem",
|
|
24766
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
24767
|
+
}
|
|
24768
|
+
},
|
|
24769
|
+
{
|
|
24770
|
+
"description": "Allows customization of the background color when pressed.",
|
|
24771
|
+
"name": "--mdc-listitem-background-color-active",
|
|
24772
|
+
"inheritedFrom": {
|
|
24773
|
+
"name": "ListItem",
|
|
24774
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
24775
|
+
}
|
|
24776
|
+
},
|
|
24777
|
+
{
|
|
24778
|
+
"description": "Allows customization of the primary label, side header and subline text slot color.",
|
|
24779
|
+
"name": "--mdc-listitem-primary-label-color",
|
|
24780
|
+
"inheritedFrom": {
|
|
24781
|
+
"name": "ListItem",
|
|
24782
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
24783
|
+
}
|
|
24784
|
+
},
|
|
24785
|
+
{
|
|
24786
|
+
"description": "Allows customization of the secondary and tertiary label text slot color.",
|
|
24787
|
+
"name": "--mdc-listitem-secondary-label-color",
|
|
24788
|
+
"inheritedFrom": {
|
|
24789
|
+
"name": "ListItem",
|
|
24790
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
24791
|
+
}
|
|
24792
|
+
},
|
|
24793
|
+
{
|
|
24794
|
+
"description": "Allows customization of the disabled color.",
|
|
24795
|
+
"name": "--mdc-listitem-disabled-color",
|
|
24796
|
+
"inheritedFrom": {
|
|
24797
|
+
"name": "ListItem",
|
|
24798
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
24799
|
+
}
|
|
24800
|
+
},
|
|
24801
|
+
{
|
|
24802
|
+
"description": "Allows customization of column gap.",
|
|
24803
|
+
"name": "--mdc-listitem-column-gap",
|
|
24804
|
+
"inheritedFrom": {
|
|
24805
|
+
"name": "ListItem",
|
|
24806
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
24807
|
+
}
|
|
24808
|
+
},
|
|
24809
|
+
{
|
|
24810
|
+
"description": "Allows customization of padding left and right.",
|
|
24811
|
+
"name": "--mdc-listitem-padding-left-right",
|
|
24812
|
+
"inheritedFrom": {
|
|
24813
|
+
"name": "ListItem",
|
|
24814
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
24815
|
+
}
|
|
24816
|
+
},
|
|
24817
|
+
{
|
|
24818
|
+
"description": "Allows customization of padding top and bottom.",
|
|
24819
|
+
"name": "--mdc-listitem-padding-top-bottom",
|
|
24820
|
+
"inheritedFrom": {
|
|
24821
|
+
"name": "ListItem",
|
|
24822
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
24823
|
+
}
|
|
24824
|
+
},
|
|
24825
|
+
{
|
|
24826
|
+
"description": "Allows customization of the cursor.",
|
|
24827
|
+
"name": "--mdc-listitem-cursor",
|
|
24828
|
+
"inheritedFrom": {
|
|
24829
|
+
"name": "ListItem",
|
|
24830
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
24831
|
+
}
|
|
24832
|
+
},
|
|
24833
|
+
{
|
|
24834
|
+
"description": "Allows customization of the width of the list item.",
|
|
24835
|
+
"name": "--mdc-listitem-width",
|
|
24836
|
+
"inheritedFrom": {
|
|
24837
|
+
"name": "ListItem",
|
|
24838
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
24839
|
+
}
|
|
24840
|
+
},
|
|
24841
|
+
{
|
|
24842
|
+
"description": "Allows customization of the height of the list item.",
|
|
24843
|
+
"name": "--mdc-listitem-height",
|
|
24844
|
+
"inheritedFrom": {
|
|
24845
|
+
"name": "ListItem",
|
|
24846
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
24847
|
+
}
|
|
24848
|
+
}
|
|
24849
|
+
],
|
|
24574
24850
|
"cssParts": [
|
|
24851
|
+
{
|
|
24852
|
+
"description": "Allows customization of the checkmark icon.",
|
|
24853
|
+
"name": "checkmark-icon"
|
|
24854
|
+
},
|
|
24575
24855
|
{
|
|
24576
24856
|
"description": "Allows customization of the leading part.",
|
|
24577
24857
|
"name": "leading",
|
|
@@ -24582,7 +24862,11 @@
|
|
|
24582
24862
|
},
|
|
24583
24863
|
{
|
|
24584
24864
|
"description": "Allows customization of leading arrow icon.",
|
|
24585
|
-
"name": "leading-arrow"
|
|
24865
|
+
"name": "leading-arrow",
|
|
24866
|
+
"inheritedFrom": {
|
|
24867
|
+
"name": "MenuItem",
|
|
24868
|
+
"module": "src/components/menuitem/menuitem.component.ts"
|
|
24869
|
+
}
|
|
24586
24870
|
},
|
|
24587
24871
|
{
|
|
24588
24872
|
"description": "Allows customization of the leading text part.",
|
|
@@ -24602,7 +24886,11 @@
|
|
|
24602
24886
|
},
|
|
24603
24887
|
{
|
|
24604
24888
|
"description": "Allows customization of trailing arrow icon.",
|
|
24605
|
-
"name": "trailing-arrow"
|
|
24889
|
+
"name": "trailing-arrow",
|
|
24890
|
+
"inheritedFrom": {
|
|
24891
|
+
"name": "MenuItem",
|
|
24892
|
+
"module": "src/components/menuitem/menuitem.component.ts"
|
|
24893
|
+
}
|
|
24606
24894
|
},
|
|
24607
24895
|
{
|
|
24608
24896
|
"description": "Allows customization of the trailing text part.",
|
|
@@ -24615,7 +24903,7 @@
|
|
|
24615
24903
|
],
|
|
24616
24904
|
"slots": [
|
|
24617
24905
|
{
|
|
24618
|
-
"description": "slot for menu item controls to appear of leading end.",
|
|
24906
|
+
"description": "slot for menu item checkbox controls to appear of leading end.",
|
|
24619
24907
|
"name": "leading-controls",
|
|
24620
24908
|
"inheritedFrom": {
|
|
24621
24909
|
"name": "ListItem",
|
|
@@ -24623,7 +24911,7 @@
|
|
|
24623
24911
|
}
|
|
24624
24912
|
},
|
|
24625
24913
|
{
|
|
24626
|
-
"description": "slot for menu item primary label.",
|
|
24914
|
+
"description": "slot for menu item checkbox primary label.",
|
|
24627
24915
|
"name": "leading-text-primary-label",
|
|
24628
24916
|
"inheritedFrom": {
|
|
24629
24917
|
"name": "ListItem",
|
|
@@ -24631,7 +24919,7 @@
|
|
|
24631
24919
|
}
|
|
24632
24920
|
},
|
|
24633
24921
|
{
|
|
24634
|
-
"description": "slot for menu item secondary label.",
|
|
24922
|
+
"description": "slot for menu item checkbox secondary label.",
|
|
24635
24923
|
"name": "leading-text-secondary-label",
|
|
24636
24924
|
"inheritedFrom": {
|
|
24637
24925
|
"name": "ListItem",
|
|
@@ -24639,7 +24927,7 @@
|
|
|
24639
24927
|
}
|
|
24640
24928
|
},
|
|
24641
24929
|
{
|
|
24642
|
-
"description": "slot for menu item tertiary label.",
|
|
24930
|
+
"description": "slot for menu item checkbox tertiary label.",
|
|
24643
24931
|
"name": "leading-text-tertiary-label",
|
|
24644
24932
|
"inheritedFrom": {
|
|
24645
24933
|
"name": "ListItem",
|
|
@@ -24647,7 +24935,7 @@
|
|
|
24647
24935
|
}
|
|
24648
24936
|
},
|
|
24649
24937
|
{
|
|
24650
|
-
"description": "slot for menu item side header text.",
|
|
24938
|
+
"description": "slot for menu item checkbox side header text.",
|
|
24651
24939
|
"name": "trailing-text-side-header",
|
|
24652
24940
|
"inheritedFrom": {
|
|
24653
24941
|
"name": "ListItem",
|
|
@@ -24655,7 +24943,7 @@
|
|
|
24655
24943
|
}
|
|
24656
24944
|
},
|
|
24657
24945
|
{
|
|
24658
|
-
"description": "slot for menu item subline text.",
|
|
24946
|
+
"description": "slot for menu item checkbox subline text.",
|
|
24659
24947
|
"name": "trailing-text-subline",
|
|
24660
24948
|
"inheritedFrom": {
|
|
24661
24949
|
"name": "ListItem",
|
|
@@ -24663,7 +24951,7 @@
|
|
|
24663
24951
|
}
|
|
24664
24952
|
},
|
|
24665
24953
|
{
|
|
24666
|
-
"description": "slot for menu item controls to appear of trailing end.",
|
|
24954
|
+
"description": "slot for menu item checkbox controls to appear of trailing end.",
|
|
24667
24955
|
"name": "trailing-controls",
|
|
24668
24956
|
"inheritedFrom": {
|
|
24669
24957
|
"name": "ListItem",
|
|
@@ -24680,6 +24968,93 @@
|
|
|
24680
24968
|
}
|
|
24681
24969
|
],
|
|
24682
24970
|
"members": [
|
|
24971
|
+
{
|
|
24972
|
+
"kind": "field",
|
|
24973
|
+
"name": "checked",
|
|
24974
|
+
"type": {
|
|
24975
|
+
"text": "boolean"
|
|
24976
|
+
},
|
|
24977
|
+
"default": "false",
|
|
24978
|
+
"description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
|
|
24979
|
+
"attribute": "checked",
|
|
24980
|
+
"reflects": true
|
|
24981
|
+
},
|
|
24982
|
+
{
|
|
24983
|
+
"kind": "field",
|
|
24984
|
+
"name": "indicator",
|
|
24985
|
+
"type": {
|
|
24986
|
+
"text": "Indicator"
|
|
24987
|
+
},
|
|
24988
|
+
"description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
|
|
24989
|
+
"default": "'checkbox'",
|
|
24990
|
+
"attribute": "indicator",
|
|
24991
|
+
"reflects": true
|
|
24992
|
+
},
|
|
24993
|
+
{
|
|
24994
|
+
"kind": "method",
|
|
24995
|
+
"name": "handleMouseClick",
|
|
24996
|
+
"privacy": "private",
|
|
24997
|
+
"description": "Handles click events to toggle checked state\nIf the menuitemcheckbox is disabled or soft-disabled, it does nothing.\nIf the menuitemcheckbox is not disabled, it toggles checked if uncontrolled, and dispatches the 'change' event."
|
|
24998
|
+
},
|
|
24999
|
+
{
|
|
25000
|
+
"kind": "method",
|
|
25001
|
+
"name": "staticCheckbox",
|
|
25002
|
+
"privacy": "private",
|
|
25003
|
+
"return": {
|
|
25004
|
+
"type": {
|
|
25005
|
+
"text": ""
|
|
25006
|
+
}
|
|
25007
|
+
},
|
|
25008
|
+
"description": "Returns a static checkbox element if the indicator is set to checkbox.\nIf the indicator is not set to checkbox, it returns nothing."
|
|
25009
|
+
},
|
|
25010
|
+
{
|
|
25011
|
+
"kind": "method",
|
|
25012
|
+
"name": "staticToggle",
|
|
25013
|
+
"privacy": "private",
|
|
25014
|
+
"return": {
|
|
25015
|
+
"type": {
|
|
25016
|
+
"text": ""
|
|
25017
|
+
}
|
|
25018
|
+
},
|
|
25019
|
+
"description": "Returns a static toggle element if the indicator is set to toggle.\nIf the indicator is not set to toggle, it returns nothing.\n\nThe toggle will always be positioned on the trailing side of the menuitem label."
|
|
25020
|
+
},
|
|
25021
|
+
{
|
|
25022
|
+
"kind": "method",
|
|
25023
|
+
"name": "getCheckmarkIcon",
|
|
25024
|
+
"privacy": "private",
|
|
25025
|
+
"return": {
|
|
25026
|
+
"type": {
|
|
25027
|
+
"text": ""
|
|
25028
|
+
}
|
|
25029
|
+
},
|
|
25030
|
+
"description": "Returns a checkmark icon if the indicator is set to checkmark and the checked state is true.\nIf the indicator is not set to checkmark or the checked state is false, it returns nothing.\n\nThe checkmark icon will always be positioned on the trailing side of the menuitem label."
|
|
25031
|
+
},
|
|
25032
|
+
{
|
|
25033
|
+
"kind": "field",
|
|
25034
|
+
"name": "controlTypeProviderContext",
|
|
25035
|
+
"privacy": "private",
|
|
25036
|
+
"readonly": true,
|
|
25037
|
+
"inheritedFrom": {
|
|
25038
|
+
"name": "ControlTypeMixin",
|
|
25039
|
+
"module": "utils/mixins/ControlTypeMixin.js"
|
|
25040
|
+
}
|
|
25041
|
+
},
|
|
25042
|
+
{
|
|
25043
|
+
"kind": "field",
|
|
25044
|
+
"name": "controlType",
|
|
25045
|
+
"type": {
|
|
25046
|
+
"text": "ControlType | undefined"
|
|
25047
|
+
},
|
|
25048
|
+
"privacy": "public",
|
|
25049
|
+
"description": "Indicates whether the component is controlled or uncontrolled.\n- 'controlled' it will not handle any interaction itself, e.g. toggling a checkbox.\n- 'uncontrolled' it will handle interactions\n- undefined it will get the value from controltypeprovider, or default to 'uncontrolled'",
|
|
25050
|
+
"default": "undefined",
|
|
25051
|
+
"attribute": "control-type",
|
|
25052
|
+
"reflects": true,
|
|
25053
|
+
"inheritedFrom": {
|
|
25054
|
+
"name": "ControlTypeMixin",
|
|
25055
|
+
"module": "utils/mixins/ControlTypeMixin.js"
|
|
25056
|
+
}
|
|
25057
|
+
},
|
|
24683
25058
|
{
|
|
24684
25059
|
"kind": "field",
|
|
24685
25060
|
"name": "arrowPosition",
|
|
@@ -24688,7 +25063,11 @@
|
|
|
24688
25063
|
},
|
|
24689
25064
|
"description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
|
|
24690
25065
|
"attribute": "arrow-position",
|
|
24691
|
-
"reflects": true
|
|
25066
|
+
"reflects": true,
|
|
25067
|
+
"inheritedFrom": {
|
|
25068
|
+
"name": "MenuItem",
|
|
25069
|
+
"module": "components/menuitem/menuitem.component.js"
|
|
25070
|
+
}
|
|
24692
25071
|
},
|
|
24693
25072
|
{
|
|
24694
25073
|
"kind": "field",
|
|
@@ -24698,7 +25077,11 @@
|
|
|
24698
25077
|
},
|
|
24699
25078
|
"description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
|
|
24700
25079
|
"attribute": "arrow-direction",
|
|
24701
|
-
"reflects": true
|
|
25080
|
+
"reflects": true,
|
|
25081
|
+
"inheritedFrom": {
|
|
25082
|
+
"name": "MenuItem",
|
|
25083
|
+
"module": "components/menuitem/menuitem.component.js"
|
|
25084
|
+
}
|
|
24702
25085
|
},
|
|
24703
25086
|
{
|
|
24704
25087
|
"kind": "field",
|
|
@@ -24708,7 +25091,11 @@
|
|
|
24708
25091
|
},
|
|
24709
25092
|
"description": "The name attribute is used to identify the menu item when it is selected.",
|
|
24710
25093
|
"attribute": "name",
|
|
24711
|
-
"reflects": true
|
|
25094
|
+
"reflects": true,
|
|
25095
|
+
"inheritedFrom": {
|
|
25096
|
+
"name": "MenuItem",
|
|
25097
|
+
"module": "components/menuitem/menuitem.component.js"
|
|
25098
|
+
}
|
|
24712
25099
|
},
|
|
24713
25100
|
{
|
|
24714
25101
|
"kind": "field",
|
|
@@ -24718,7 +25105,11 @@
|
|
|
24718
25105
|
},
|
|
24719
25106
|
"description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
|
|
24720
25107
|
"attribute": "value",
|
|
24721
|
-
"reflects": true
|
|
25108
|
+
"reflects": true,
|
|
25109
|
+
"inheritedFrom": {
|
|
25110
|
+
"name": "MenuItem",
|
|
25111
|
+
"module": "components/menuitem/menuitem.component.js"
|
|
25112
|
+
}
|
|
24722
25113
|
},
|
|
24723
25114
|
{
|
|
24724
25115
|
"kind": "method",
|
|
@@ -24762,7 +25153,11 @@
|
|
|
24762
25153
|
"description": "The keyboard event that triggered the action."
|
|
24763
25154
|
}
|
|
24764
25155
|
],
|
|
24765
|
-
"description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event."
|
|
25156
|
+
"description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event.",
|
|
25157
|
+
"inheritedFrom": {
|
|
25158
|
+
"name": "MenuItem",
|
|
25159
|
+
"module": "components/menuitem/menuitem.component.js"
|
|
25160
|
+
}
|
|
24766
25161
|
},
|
|
24767
25162
|
{
|
|
24768
25163
|
"kind": "method",
|
|
@@ -25093,7 +25488,15 @@
|
|
|
25093
25488
|
],
|
|
25094
25489
|
"events": [
|
|
25095
25490
|
{
|
|
25096
|
-
"
|
|
25491
|
+
"name": "change",
|
|
25492
|
+
"type": {
|
|
25493
|
+
"text": "Event"
|
|
25494
|
+
},
|
|
25495
|
+
"description": "(React: onChange) This event is dispatched when the menuitemcheckbox changes.",
|
|
25496
|
+
"reactName": "onChange"
|
|
25497
|
+
},
|
|
25498
|
+
{
|
|
25499
|
+
"description": "(React: onClick) This event is dispatched when the menuitemcheckbox is clicked.",
|
|
25097
25500
|
"name": "click",
|
|
25098
25501
|
"reactName": "onClick",
|
|
25099
25502
|
"inheritedFrom": {
|
|
@@ -25102,27 +25505,27 @@
|
|
|
25102
25505
|
}
|
|
25103
25506
|
},
|
|
25104
25507
|
{
|
|
25105
|
-
"description": "(React:
|
|
25106
|
-
"name": "
|
|
25107
|
-
"reactName": "
|
|
25508
|
+
"description": "(React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.",
|
|
25509
|
+
"name": "focus",
|
|
25510
|
+
"reactName": "onFocus",
|
|
25108
25511
|
"inheritedFrom": {
|
|
25109
25512
|
"name": "ListItem",
|
|
25110
25513
|
"module": "src/components/listitem/listitem.component.ts"
|
|
25111
25514
|
}
|
|
25112
25515
|
},
|
|
25113
25516
|
{
|
|
25114
|
-
"description": "(React:
|
|
25115
|
-
"name": "
|
|
25116
|
-
"reactName": "
|
|
25517
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.",
|
|
25518
|
+
"name": "keydown",
|
|
25519
|
+
"reactName": "onKeyDown",
|
|
25117
25520
|
"inheritedFrom": {
|
|
25118
25521
|
"name": "ListItem",
|
|
25119
25522
|
"module": "src/components/listitem/listitem.component.ts"
|
|
25120
25523
|
}
|
|
25121
25524
|
},
|
|
25122
25525
|
{
|
|
25123
|
-
"description": "(React:
|
|
25124
|
-
"name": "
|
|
25125
|
-
"reactName": "
|
|
25526
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the menuitem.",
|
|
25527
|
+
"name": "keyup",
|
|
25528
|
+
"reactName": "onKeyUp",
|
|
25126
25529
|
"inheritedFrom": {
|
|
25127
25530
|
"name": "ListItem",
|
|
25128
25531
|
"module": "src/components/listitem/listitem.component.ts"
|
|
@@ -25156,23 +25559,58 @@
|
|
|
25156
25559
|
}
|
|
25157
25560
|
},
|
|
25158
25561
|
{
|
|
25159
|
-
"description": "(React: onDestroyed) This event is dispatched after the menuitem is destroyed (removed from the DOM)",
|
|
25160
|
-
"name": "destroyed",
|
|
25161
|
-
"reactName": "onDestroyed",
|
|
25562
|
+
"description": "(React: onDestroyed) This event is dispatched after the menuitem is destroyed (removed from the DOM)",
|
|
25563
|
+
"name": "destroyed",
|
|
25564
|
+
"reactName": "onDestroyed",
|
|
25565
|
+
"inheritedFrom": {
|
|
25566
|
+
"name": "ListItem",
|
|
25567
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
25568
|
+
}
|
|
25569
|
+
}
|
|
25570
|
+
],
|
|
25571
|
+
"attributes": [
|
|
25572
|
+
{
|
|
25573
|
+
"name": "checked",
|
|
25574
|
+
"type": {
|
|
25575
|
+
"text": "boolean"
|
|
25576
|
+
},
|
|
25577
|
+
"default": "false",
|
|
25578
|
+
"description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
|
|
25579
|
+
"fieldName": "checked"
|
|
25580
|
+
},
|
|
25581
|
+
{
|
|
25582
|
+
"name": "indicator",
|
|
25583
|
+
"type": {
|
|
25584
|
+
"text": "Indicator"
|
|
25585
|
+
},
|
|
25586
|
+
"description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
|
|
25587
|
+
"default": "'checkbox'",
|
|
25588
|
+
"fieldName": "indicator"
|
|
25589
|
+
},
|
|
25590
|
+
{
|
|
25591
|
+
"name": "control-type",
|
|
25592
|
+
"type": {
|
|
25593
|
+
"text": "ControlType | undefined"
|
|
25594
|
+
},
|
|
25595
|
+
"description": "Indicates whether the component is controlled or uncontrolled.\n- 'controlled' it will not handle any interaction itself, e.g. toggling a checkbox.\n- 'uncontrolled' it will handle interactions\n- undefined it will get the value from controltypeprovider, or default to 'uncontrolled'",
|
|
25596
|
+
"default": "undefined",
|
|
25597
|
+
"fieldName": "controlType",
|
|
25162
25598
|
"inheritedFrom": {
|
|
25163
|
-
"name": "
|
|
25164
|
-
"module": "src/
|
|
25599
|
+
"name": "ControlTypeMixin",
|
|
25600
|
+
"module": "src/utils/mixins/ControlTypeMixin.ts"
|
|
25165
25601
|
}
|
|
25166
|
-
}
|
|
25167
|
-
],
|
|
25168
|
-
"attributes": [
|
|
25602
|
+
},
|
|
25169
25603
|
{
|
|
25170
25604
|
"name": "arrow-position",
|
|
25171
25605
|
"type": {
|
|
25172
25606
|
"text": "ArrowPositions | undefined"
|
|
25173
25607
|
},
|
|
25174
25608
|
"description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
|
|
25175
|
-
"fieldName": "arrowPosition"
|
|
25609
|
+
"fieldName": "arrowPosition",
|
|
25610
|
+
"inheritedFrom": {
|
|
25611
|
+
"name": "MenuItem",
|
|
25612
|
+
"module": "src/components/menuitem/menuitem.component.ts"
|
|
25613
|
+
}
|
|
25176
25614
|
},
|
|
25177
25615
|
{
|
|
25178
25616
|
"name": "arrow-direction",
|
|
@@ -25180,7 +25618,11 @@
|
|
|
25180
25618
|
"text": "ArrowDirections | undefined"
|
|
25181
25619
|
},
|
|
25182
25620
|
"description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
|
|
25183
|
-
"fieldName": "arrowDirection"
|
|
25621
|
+
"fieldName": "arrowDirection",
|
|
25622
|
+
"inheritedFrom": {
|
|
25623
|
+
"name": "MenuItem",
|
|
25624
|
+
"module": "src/components/menuitem/menuitem.component.ts"
|
|
25625
|
+
}
|
|
25184
25626
|
},
|
|
25185
25627
|
{
|
|
25186
25628
|
"name": "name",
|
|
@@ -25188,7 +25630,11 @@
|
|
|
25188
25630
|
"text": "string | undefined"
|
|
25189
25631
|
},
|
|
25190
25632
|
"description": "The name attribute is used to identify the menu item when it is selected.",
|
|
25191
|
-
"fieldName": "name"
|
|
25633
|
+
"fieldName": "name",
|
|
25634
|
+
"inheritedFrom": {
|
|
25635
|
+
"name": "MenuItem",
|
|
25636
|
+
"module": "src/components/menuitem/menuitem.component.ts"
|
|
25637
|
+
}
|
|
25192
25638
|
},
|
|
25193
25639
|
{
|
|
25194
25640
|
"name": "value",
|
|
@@ -25196,7 +25642,11 @@
|
|
|
25196
25642
|
"text": "string | undefined"
|
|
25197
25643
|
},
|
|
25198
25644
|
"description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
|
|
25199
|
-
"fieldName": "value"
|
|
25645
|
+
"fieldName": "value",
|
|
25646
|
+
"inheritedFrom": {
|
|
25647
|
+
"name": "MenuItem",
|
|
25648
|
+
"module": "src/components/menuitem/menuitem.component.ts"
|
|
25649
|
+
}
|
|
25200
25650
|
},
|
|
25201
25651
|
{
|
|
25202
25652
|
"name": "disabled",
|
|
@@ -25337,468 +25787,18 @@
|
|
|
25337
25787
|
}
|
|
25338
25788
|
}
|
|
25339
25789
|
],
|
|
25340
|
-
"
|
|
25341
|
-
"name": "ListItem",
|
|
25342
|
-
"module": "/src/components/listitem/listitem.component"
|
|
25343
|
-
},
|
|
25344
|
-
"tagName": "mdc-menuitem",
|
|
25345
|
-
"jsDoc": "/**\n * menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\n * A menu item can contain an icon on the leading or trailing side.\n *\n * The leading and trailing slots can be used to display controls and text.<br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted.\n *\n * Please use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\n * For example mdc-menupopover or mdc-menubar.\n *\n * Menu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * **Note**: If a menuitem contains a long text, it is recommended to create a tooltip for the menuitem that displays the full text on hover.\n * Consumers need to add a unique ID to this menuitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the menuitem using the `triggerID` attribute.\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n *\n * @tagname mdc-menuitem\n *\n * @slot leading-controls - slot for menu item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item primary label.\n * @slot leading-text-secondary-label - slot for menu item secondary label.\n * @slot leading-text-tertiary-label - slot for menu item tertiary label.\n * @slot trailing-text-side-header - slot for menu item side header text.\n * @slot trailing-text-subline - slot for menu item subline text.\n * @slot trailing-controls - slot for menu item controls to appear of trailing end.\n *\n * @event click - (React: onClick) This event is dispatched when the menuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the menuitem.\n * @event focus - (React: onFocus) This event is dispatched when the menuitem receives focus.\n * @event enabled - (React: onEnabled) This event is dispatched after the menuitem is enabled\n * @event disabled - (React: onDisabled) This event is dispatched after the menuitem is disabled\n * @event created - (React: onCreated) This event is dispatched after the menuitem is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched after the menuitem is destroyed (removed from the DOM)\n *\n * @csspart leading - Allows customization of the leading part.\n * @csspart leading-arrow - Allows customization of leading arrow icon.\n * @csspart leading-text - Allows customization of the leading text part.\n * @csspart trailing - Allows customization of the trailing part.\n * @csspart trailing-arrow - Allows customization of trailing arrow icon.\n * @csspart trailing-text - Allows customization of the trailing text part.\n */",
|
|
25346
|
-
"customElement": true,
|
|
25347
|
-
"cssProperties": [
|
|
25348
|
-
{
|
|
25349
|
-
"description": "Allows customization of the default background color.",
|
|
25350
|
-
"name": "--mdc-listitem-default-background-color",
|
|
25351
|
-
"inheritedFrom": {
|
|
25352
|
-
"name": "ListItem",
|
|
25353
|
-
"module": "src/components/listitem/listitem.component.ts"
|
|
25354
|
-
}
|
|
25355
|
-
},
|
|
25356
|
-
{
|
|
25357
|
-
"description": "Allows customization of the background color on hover.",
|
|
25358
|
-
"name": "--mdc-listitem-background-color-hover",
|
|
25359
|
-
"inheritedFrom": {
|
|
25360
|
-
"name": "ListItem",
|
|
25361
|
-
"module": "src/components/listitem/listitem.component.ts"
|
|
25362
|
-
}
|
|
25363
|
-
},
|
|
25364
|
-
{
|
|
25365
|
-
"description": "Allows customization of the background color when pressed.",
|
|
25366
|
-
"name": "--mdc-listitem-background-color-active",
|
|
25367
|
-
"inheritedFrom": {
|
|
25368
|
-
"name": "ListItem",
|
|
25369
|
-
"module": "src/components/listitem/listitem.component.ts"
|
|
25370
|
-
}
|
|
25371
|
-
},
|
|
25372
|
-
{
|
|
25373
|
-
"description": "Allows customization of the primary label, side header and subline text slot color.",
|
|
25374
|
-
"name": "--mdc-listitem-primary-label-color",
|
|
25375
|
-
"inheritedFrom": {
|
|
25376
|
-
"name": "ListItem",
|
|
25377
|
-
"module": "src/components/listitem/listitem.component.ts"
|
|
25378
|
-
}
|
|
25379
|
-
},
|
|
25380
|
-
{
|
|
25381
|
-
"description": "Allows customization of the secondary and tertiary label text slot color.",
|
|
25382
|
-
"name": "--mdc-listitem-secondary-label-color",
|
|
25383
|
-
"inheritedFrom": {
|
|
25384
|
-
"name": "ListItem",
|
|
25385
|
-
"module": "src/components/listitem/listitem.component.ts"
|
|
25386
|
-
}
|
|
25387
|
-
},
|
|
25388
|
-
{
|
|
25389
|
-
"description": "Allows customization of the disabled color.",
|
|
25390
|
-
"name": "--mdc-listitem-disabled-color",
|
|
25391
|
-
"inheritedFrom": {
|
|
25392
|
-
"name": "ListItem",
|
|
25393
|
-
"module": "src/components/listitem/listitem.component.ts"
|
|
25394
|
-
}
|
|
25395
|
-
},
|
|
25396
|
-
{
|
|
25397
|
-
"description": "Allows customization of column gap.",
|
|
25398
|
-
"name": "--mdc-listitem-column-gap",
|
|
25399
|
-
"inheritedFrom": {
|
|
25400
|
-
"name": "ListItem",
|
|
25401
|
-
"module": "src/components/listitem/listitem.component.ts"
|
|
25402
|
-
}
|
|
25403
|
-
},
|
|
25404
|
-
{
|
|
25405
|
-
"description": "Allows customization of padding left and right.",
|
|
25406
|
-
"name": "--mdc-listitem-padding-left-right",
|
|
25407
|
-
"inheritedFrom": {
|
|
25408
|
-
"name": "ListItem",
|
|
25409
|
-
"module": "src/components/listitem/listitem.component.ts"
|
|
25410
|
-
}
|
|
25411
|
-
},
|
|
25412
|
-
{
|
|
25413
|
-
"description": "Allows customization of padding top and bottom.",
|
|
25414
|
-
"name": "--mdc-listitem-padding-top-bottom",
|
|
25415
|
-
"inheritedFrom": {
|
|
25416
|
-
"name": "ListItem",
|
|
25417
|
-
"module": "src/components/listitem/listitem.component.ts"
|
|
25418
|
-
}
|
|
25419
|
-
},
|
|
25420
|
-
{
|
|
25421
|
-
"description": "Allows customization of the cursor.",
|
|
25422
|
-
"name": "--mdc-listitem-cursor",
|
|
25423
|
-
"inheritedFrom": {
|
|
25424
|
-
"name": "ListItem",
|
|
25425
|
-
"module": "src/components/listitem/listitem.component.ts"
|
|
25426
|
-
}
|
|
25427
|
-
},
|
|
25428
|
-
{
|
|
25429
|
-
"description": "Allows customization of the width of the list item.",
|
|
25430
|
-
"name": "--mdc-listitem-width",
|
|
25431
|
-
"inheritedFrom": {
|
|
25432
|
-
"name": "ListItem",
|
|
25433
|
-
"module": "src/components/listitem/listitem.component.ts"
|
|
25434
|
-
}
|
|
25435
|
-
},
|
|
25436
|
-
{
|
|
25437
|
-
"description": "Allows customization of the height of the list item.",
|
|
25438
|
-
"name": "--mdc-listitem-height",
|
|
25439
|
-
"inheritedFrom": {
|
|
25440
|
-
"name": "ListItem",
|
|
25441
|
-
"module": "src/components/listitem/listitem.component.ts"
|
|
25442
|
-
}
|
|
25443
|
-
}
|
|
25444
|
-
]
|
|
25445
|
-
}
|
|
25446
|
-
],
|
|
25447
|
-
"exports": [
|
|
25448
|
-
{
|
|
25449
|
-
"kind": "js",
|
|
25450
|
-
"name": "default",
|
|
25451
|
-
"declaration": {
|
|
25452
|
-
"name": "MenuItem",
|
|
25453
|
-
"module": "components/menuitem/menuitem.component.js"
|
|
25454
|
-
}
|
|
25455
|
-
}
|
|
25456
|
-
]
|
|
25457
|
-
},
|
|
25458
|
-
{
|
|
25459
|
-
"kind": "javascript-module",
|
|
25460
|
-
"path": "components/menubar/menubar.component.js",
|
|
25461
|
-
"declarations": [
|
|
25462
|
-
{
|
|
25463
|
-
"kind": "class",
|
|
25464
|
-
"description": "Menubar is a navigational menu component that provides a vertical fixed list of menu items,\nwith support for nested submenus and keyboard navigation. It serves as a container\nfor menu items and manages their interaction patterns, including:\n- Keyboard navigation (Arrow keys, Home, End)\n- Menu item activation (Enter/Space)\n- Submenu toggling (Right/Left arrow keys)\n- Focus management\n- Integration with MenuPopover for nested menus\n\nA menubar will contain a set of menu items and their associated popovers.\nEach menu item can have a popover for nested menus.\n\nThe component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.\nIt works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.\n\n**Note:** A menubar contains three types of menu items, including menuitem, menuitemradio and menuitemcheckbox. These menu items may optionally be nested in one or more group containers. Groups or items may optionally by separated with separator elements.\n\n`mdc-menubar` contains a group that wraps all its chilren passed within the default slot. This has been added to ensure the right accessibility behavior while using screen readers.",
|
|
25465
|
-
"name": "MenuBar",
|
|
25466
|
-
"slots": [
|
|
25467
|
-
{
|
|
25468
|
-
"description": "Contains the menu items and their associated popovers",
|
|
25469
|
-
"name": "default"
|
|
25470
|
-
}
|
|
25471
|
-
],
|
|
25472
|
-
"members": [
|
|
25473
|
-
{
|
|
25474
|
-
"kind": "field",
|
|
25475
|
-
"name": "menusections",
|
|
25476
|
-
"type": {
|
|
25477
|
-
"text": "Array<HTMLElement>"
|
|
25478
|
-
}
|
|
25479
|
-
},
|
|
25480
|
-
{
|
|
25481
|
-
"kind": "field",
|
|
25482
|
-
"name": "menuItems",
|
|
25483
|
-
"type": {
|
|
25484
|
-
"text": "Array<HTMLElement>"
|
|
25485
|
-
},
|
|
25486
|
-
"description": "Returns all menuitem elements, including those nested inside menusection.",
|
|
25487
|
-
"readonly": true
|
|
25488
|
-
},
|
|
25489
|
-
{
|
|
25490
|
-
"kind": "method",
|
|
25491
|
-
"name": "getAllPopovers",
|
|
25492
|
-
"privacy": "private",
|
|
25493
|
-
"return": {
|
|
25494
|
-
"type": {
|
|
25495
|
-
"text": "Element[]"
|
|
25496
|
-
}
|
|
25497
|
-
},
|
|
25498
|
-
"description": "Returns all menupopovers, including direct and slotted ones ."
|
|
25499
|
-
},
|
|
25500
|
-
{
|
|
25501
|
-
"kind": "method",
|
|
25502
|
-
"name": "handleClick",
|
|
25503
|
-
"privacy": "private",
|
|
25504
|
-
"return": {
|
|
25505
|
-
"type": {
|
|
25506
|
-
"text": "void"
|
|
25507
|
-
}
|
|
25508
|
-
},
|
|
25509
|
-
"parameters": [
|
|
25510
|
-
{
|
|
25511
|
-
"name": "event",
|
|
25512
|
-
"type": {
|
|
25513
|
-
"text": "MouseEvent"
|
|
25514
|
-
}
|
|
25515
|
-
},
|
|
25516
|
-
{
|
|
25517
|
-
"description": "The target menu item that was clicked.",
|
|
25518
|
-
"name": "target"
|
|
25519
|
-
}
|
|
25520
|
-
],
|
|
25521
|
-
"description": "Closes all other submenus on the top level.\nThis method is used to ensure that only one topolevel submenu is open at a time.\nIt finds all other menu items with submenus and closes their submenus."
|
|
25522
|
-
},
|
|
25523
|
-
{
|
|
25524
|
-
"kind": "method",
|
|
25525
|
-
"name": "resetTabIndexAndSetActiveTabIndex",
|
|
25526
|
-
"privacy": "private",
|
|
25527
|
-
"parameters": [
|
|
25528
|
-
{
|
|
25529
|
-
"name": "menuItems",
|
|
25530
|
-
"type": {
|
|
25531
|
-
"text": "Array<HTMLElement>"
|
|
25532
|
-
}
|
|
25533
|
-
},
|
|
25534
|
-
{
|
|
25535
|
-
"description": "The index of the new active element in the list.",
|
|
25536
|
-
"name": "newIndex"
|
|
25537
|
-
}
|
|
25538
|
-
],
|
|
25539
|
-
"description": "Resets all list items tabindex to -1 and sets the tabindex of the\nelement at the given index to 0, effectively setting the active\nelement. This is used when navigating the list via keyboard."
|
|
25540
|
-
},
|
|
25541
|
-
{
|
|
25542
|
-
"kind": "method",
|
|
25543
|
-
"name": "getCurrentIndex",
|
|
25544
|
-
"privacy": "private",
|
|
25545
|
-
"return": {
|
|
25546
|
-
"type": {
|
|
25547
|
-
"text": "number"
|
|
25548
|
-
}
|
|
25549
|
-
},
|
|
25550
|
-
"parameters": [
|
|
25551
|
-
{
|
|
25552
|
-
"name": "target",
|
|
25553
|
-
"type": {
|
|
25554
|
-
"text": "EventTarget | null"
|
|
25555
|
-
}
|
|
25556
|
-
}
|
|
25557
|
-
]
|
|
25558
|
-
},
|
|
25559
|
-
{
|
|
25560
|
-
"kind": "method",
|
|
25561
|
-
"name": "getSubmenu",
|
|
25562
|
-
"privacy": "private",
|
|
25563
|
-
"return": {
|
|
25564
|
-
"type": {
|
|
25565
|
-
"text": "MenuPopover | undefined"
|
|
25566
|
-
}
|
|
25567
|
-
},
|
|
25568
|
-
"parameters": [
|
|
25569
|
-
{
|
|
25570
|
-
"name": "triggerId",
|
|
25571
|
-
"type": {
|
|
25572
|
-
"text": "string | null"
|
|
25573
|
-
}
|
|
25574
|
-
}
|
|
25575
|
-
]
|
|
25576
|
-
},
|
|
25577
|
-
{
|
|
25578
|
-
"kind": "method",
|
|
25579
|
-
"name": "showSubmenu",
|
|
25580
|
-
"privacy": "private",
|
|
25581
|
-
"return": {
|
|
25582
|
-
"type": {
|
|
25583
|
-
"text": "void"
|
|
25584
|
-
}
|
|
25585
|
-
},
|
|
25586
|
-
"parameters": [
|
|
25587
|
-
{
|
|
25588
|
-
"name": "triggerId",
|
|
25589
|
-
"type": {
|
|
25590
|
-
"text": "string | null"
|
|
25591
|
-
}
|
|
25592
|
-
}
|
|
25593
|
-
]
|
|
25594
|
-
},
|
|
25595
|
-
{
|
|
25596
|
-
"kind": "method",
|
|
25597
|
-
"name": "updatePopoverPlacement",
|
|
25598
|
-
"privacy": "private",
|
|
25599
|
-
"return": {
|
|
25600
|
-
"type": {
|
|
25601
|
-
"text": "void"
|
|
25602
|
-
}
|
|
25603
|
-
}
|
|
25604
|
-
},
|
|
25605
|
-
{
|
|
25606
|
-
"kind": "method",
|
|
25607
|
-
"name": "updateTabIndexAndFocus",
|
|
25608
|
-
"privacy": "private",
|
|
25609
|
-
"return": {
|
|
25610
|
-
"type": {
|
|
25611
|
-
"text": "void"
|
|
25612
|
-
}
|
|
25613
|
-
},
|
|
25614
|
-
"parameters": [
|
|
25615
|
-
{
|
|
25616
|
-
"name": "menuItems",
|
|
25617
|
-
"type": {
|
|
25618
|
-
"text": "HTMLElement[]"
|
|
25619
|
-
}
|
|
25620
|
-
},
|
|
25621
|
-
{
|
|
25622
|
-
"name": "currentIndex",
|
|
25623
|
-
"type": {
|
|
25624
|
-
"text": "number"
|
|
25625
|
-
}
|
|
25626
|
-
},
|
|
25627
|
-
{
|
|
25628
|
-
"name": "newIndex",
|
|
25629
|
-
"type": {
|
|
25630
|
-
"text": "number"
|
|
25631
|
-
}
|
|
25632
|
-
}
|
|
25633
|
-
]
|
|
25634
|
-
},
|
|
25635
|
-
{
|
|
25636
|
-
"kind": "method",
|
|
25637
|
-
"name": "navigateToMenuItem",
|
|
25638
|
-
"privacy": "private",
|
|
25639
|
-
"return": {
|
|
25640
|
-
"type": {
|
|
25641
|
-
"text": "void"
|
|
25642
|
-
}
|
|
25643
|
-
},
|
|
25644
|
-
"parameters": [
|
|
25645
|
-
{
|
|
25646
|
-
"name": "currentIndex",
|
|
25647
|
-
"type": {
|
|
25648
|
-
"text": "number"
|
|
25649
|
-
}
|
|
25650
|
-
},
|
|
25651
|
-
{
|
|
25652
|
-
"name": "direction",
|
|
25653
|
-
"type": {
|
|
25654
|
-
"text": "'prev' | 'next'"
|
|
25655
|
-
}
|
|
25656
|
-
},
|
|
25657
|
-
{
|
|
25658
|
-
"name": "shouldOpenSubmenu",
|
|
25659
|
-
"default": "false"
|
|
25660
|
-
}
|
|
25661
|
-
]
|
|
25662
|
-
},
|
|
25663
|
-
{
|
|
25664
|
-
"kind": "method",
|
|
25665
|
-
"name": "getKeyWithDirectionFix",
|
|
25666
|
-
"privacy": "private",
|
|
25667
|
-
"return": {
|
|
25668
|
-
"type": {
|
|
25669
|
-
"text": "string"
|
|
25670
|
-
}
|
|
25671
|
-
},
|
|
25672
|
-
"parameters": [
|
|
25673
|
-
{
|
|
25674
|
-
"name": "originalKey",
|
|
25675
|
-
"type": {
|
|
25676
|
-
"text": "string"
|
|
25677
|
-
}
|
|
25678
|
-
}
|
|
25679
|
-
]
|
|
25680
|
-
},
|
|
25681
|
-
{
|
|
25682
|
-
"kind": "method",
|
|
25683
|
-
"name": "isTopLevelMenuItem",
|
|
25684
|
-
"privacy": "private",
|
|
25685
|
-
"return": {
|
|
25686
|
-
"type": {
|
|
25687
|
-
"text": "boolean"
|
|
25688
|
-
}
|
|
25689
|
-
},
|
|
25690
|
-
"parameters": [
|
|
25691
|
-
{
|
|
25692
|
-
"name": "element",
|
|
25693
|
-
"type": {
|
|
25694
|
-
"text": "HTMLElement"
|
|
25695
|
-
}
|
|
25696
|
-
}
|
|
25697
|
-
],
|
|
25698
|
-
"description": "Determines if a menuitem is a top-level menuitem (direct child of menubar or child of menusection whose parent is menubar)"
|
|
25699
|
-
},
|
|
25700
|
-
{
|
|
25701
|
-
"kind": "method",
|
|
25702
|
-
"name": "isNestedMenuItem",
|
|
25703
|
-
"privacy": "private",
|
|
25704
|
-
"return": {
|
|
25705
|
-
"type": {
|
|
25706
|
-
"text": "boolean"
|
|
25707
|
-
}
|
|
25708
|
-
},
|
|
25709
|
-
"parameters": [
|
|
25710
|
-
{
|
|
25711
|
-
"name": "element",
|
|
25712
|
-
"type": {
|
|
25713
|
-
"text": "HTMLElement"
|
|
25714
|
-
}
|
|
25715
|
-
}
|
|
25716
|
-
]
|
|
25717
|
-
},
|
|
25718
|
-
{
|
|
25719
|
-
"kind": "method",
|
|
25720
|
-
"name": "closeAllMenuPopovers",
|
|
25721
|
-
"privacy": "private"
|
|
25722
|
-
},
|
|
25723
|
-
{
|
|
25724
|
-
"kind": "method",
|
|
25725
|
-
"name": "crossMenubarNavigationOnLeft",
|
|
25726
|
-
"privacy": "private",
|
|
25727
|
-
"return": {
|
|
25728
|
-
"type": {
|
|
25729
|
-
"text": "Promise<void>"
|
|
25730
|
-
}
|
|
25731
|
-
},
|
|
25732
|
-
"parameters": [
|
|
25733
|
-
{
|
|
25734
|
-
"name": "element",
|
|
25735
|
-
"type": {
|
|
25736
|
-
"text": "HTMLElement"
|
|
25737
|
-
}
|
|
25738
|
-
}
|
|
25739
|
-
]
|
|
25740
|
-
},
|
|
25741
|
-
{
|
|
25742
|
-
"kind": "method",
|
|
25743
|
-
"name": "crossMenubarNavigationOnRight",
|
|
25744
|
-
"privacy": "private",
|
|
25745
|
-
"return": {
|
|
25746
|
-
"type": {
|
|
25747
|
-
"text": "Promise<void>"
|
|
25748
|
-
}
|
|
25749
|
-
},
|
|
25750
|
-
"parameters": [
|
|
25751
|
-
{
|
|
25752
|
-
"name": "element",
|
|
25753
|
-
"type": {
|
|
25754
|
-
"text": "HTMLElement"
|
|
25755
|
-
}
|
|
25756
|
-
}
|
|
25757
|
-
]
|
|
25758
|
-
},
|
|
25759
|
-
{
|
|
25760
|
-
"kind": "method",
|
|
25761
|
-
"name": "getParentMenuItemIndex",
|
|
25762
|
-
"privacy": "private",
|
|
25763
|
-
"return": {
|
|
25764
|
-
"type": {
|
|
25765
|
-
"text": "number"
|
|
25766
|
-
}
|
|
25767
|
-
},
|
|
25768
|
-
"parameters": [
|
|
25769
|
-
{
|
|
25770
|
-
"name": "element",
|
|
25771
|
-
"type": {
|
|
25772
|
-
"text": "HTMLElement"
|
|
25773
|
-
}
|
|
25774
|
-
}
|
|
25775
|
-
]
|
|
25776
|
-
},
|
|
25790
|
+
"mixins": [
|
|
25777
25791
|
{
|
|
25778
|
-
"
|
|
25779
|
-
"
|
|
25780
|
-
"privacy": "private",
|
|
25781
|
-
"return": {
|
|
25782
|
-
"type": {
|
|
25783
|
-
"text": "Promise<void>"
|
|
25784
|
-
}
|
|
25785
|
-
},
|
|
25786
|
-
"parameters": [
|
|
25787
|
-
{
|
|
25788
|
-
"name": "event",
|
|
25789
|
-
"type": {
|
|
25790
|
-
"text": "KeyboardEvent"
|
|
25791
|
-
}
|
|
25792
|
-
}
|
|
25793
|
-
]
|
|
25792
|
+
"name": "ControlTypeMixin",
|
|
25793
|
+
"module": "/src/utils/mixins/ControlTypeMixin"
|
|
25794
25794
|
}
|
|
25795
25795
|
],
|
|
25796
25796
|
"superclass": {
|
|
25797
|
-
"name": "
|
|
25798
|
-
"module": "/src/
|
|
25797
|
+
"name": "MenuItem",
|
|
25798
|
+
"module": "/src/components/menuitem/menuitem.component"
|
|
25799
25799
|
},
|
|
25800
|
-
"tagName": "mdc-
|
|
25801
|
-
"jsDoc": "/**\n *
|
|
25800
|
+
"tagName": "mdc-menuitemcheckbox",
|
|
25801
|
+
"jsDoc": "/**\n * A menuitemcheckbox component is a checkable menuitem.\n * There should be no focusable descendants inside this menuitemcheckbox component.\n *\n * The `checked` attribute indicates whether the menuitemcheckbox is checked or not.\n *\n * Menu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * The `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.\n * By default, the `indicator` is set to <b>checkbox</b>.<br/>\n *\n * The checkbox will always be positioned on the leading side of the menuitem label and\n * the toggle and checkmark will always be positioned on the trailing side.\n *\n * The checkbox will have the possible states of `true` or `false`.\n * If the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\n * then the checkmark will be displayed. if not, then no indicator will be displayed.\n *\n * The forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.\n * It is intended to be used for customised menu items where the indicator is implemented differently.\n * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.\n * Make sure the new indicator is accessible.\n *\n * If you want only one item in a group to be checked, consider using menuitemradio component.\n *\n * @dependency mdc-staticcheckbox\n * @dependency mdc-statictoggle\n * @dependency mdc-icon\n *\n * @tagname mdc-menuitemcheckbox\n *\n * @slot leading-controls - slot for menu item checkbox controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item checkbox primary label.\n * @slot leading-text-secondary-label - slot for menu item checkbox secondary label.\n * @slot leading-text-tertiary-label - slot for menu item checkbox tertiary label.\n * @slot trailing-text-side-header - slot for menu item checkbox side header text.\n * @slot trailing-text-subline - slot for menu item checkbox subline text.\n * @slot trailing-controls - slot for menu item checkbox controls to appear of trailing end.\n *\n * @event change - (React: onChange) This event is dispatched when the menuitemcheckbox changes.\n * @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.\n * @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.\n *\n * @cssproperty --mdc-listitem-padding-left-and-right - Controls the padding on the left and right of the menuitemcheckbox.\n *\n * @csspart checkmark-icon - Allows customization of the checkmark icon.\n * @csspart leading - Allows customization of the leading part.\n * @csspart leading-arrow - Allows customization of leading arrow icon.\n * @csspart leading-text - Allows customization of the leading text part.\n * @csspart trailing - Allows customization of the trailing part.\n * @csspart trailing-arrow - Allows customization of trailing arrow icon.\n * @csspart trailing-text - Allows customization of the trailing text part.\n */",
|
|
25802
25802
|
"customElement": true
|
|
25803
25803
|
}
|
|
25804
25804
|
],
|
|
@@ -25807,8 +25807,8 @@
|
|
|
25807
25807
|
"kind": "js",
|
|
25808
25808
|
"name": "default",
|
|
25809
25809
|
"declaration": {
|
|
25810
|
-
"name": "
|
|
25811
|
-
"module": "components/
|
|
25810
|
+
"name": "MenuItemCheckbox",
|
|
25811
|
+
"module": "components/menuitemcheckbox/menuitemcheckbox.component.js"
|
|
25812
25812
|
}
|
|
25813
25813
|
}
|
|
25814
25814
|
]
|
|
@@ -36571,16 +36571,32 @@
|
|
|
36571
36571
|
},
|
|
36572
36572
|
{
|
|
36573
36573
|
"kind": "javascript-module",
|
|
36574
|
-
"path": "components/
|
|
36574
|
+
"path": "components/radio/radio.component.js",
|
|
36575
36575
|
"declarations": [
|
|
36576
36576
|
{
|
|
36577
36577
|
"kind": "class",
|
|
36578
|
-
"description": "
|
|
36579
|
-
"name": "
|
|
36578
|
+
"description": "Radio allow users to select single options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selection in lists.\n\nA radio component contains an optional label, optional info icon and an optional helper text.",
|
|
36579
|
+
"name": "Radio",
|
|
36580
36580
|
"cssProperties": [
|
|
36581
36581
|
{
|
|
36582
|
-
"description": "
|
|
36583
|
-
"name": "--mdc-
|
|
36582
|
+
"description": "size of the inner circle",
|
|
36583
|
+
"name": "--mdc-radio-inner-circle-size"
|
|
36584
|
+
},
|
|
36585
|
+
{
|
|
36586
|
+
"description": "size of the outer circle",
|
|
36587
|
+
"name": "--mdc-radio-outer-circle-size"
|
|
36588
|
+
},
|
|
36589
|
+
{
|
|
36590
|
+
"description": "background color of the inner circle",
|
|
36591
|
+
"name": "--mdc-radio-inner-circle-background-color"
|
|
36592
|
+
},
|
|
36593
|
+
{
|
|
36594
|
+
"description": "border color of the outer circle",
|
|
36595
|
+
"name": "--mdc-radio-outer-circle-border-color"
|
|
36596
|
+
},
|
|
36597
|
+
{
|
|
36598
|
+
"description": "background color of the outer circle",
|
|
36599
|
+
"name": "--mdc-radio-outer-circle-background-color"
|
|
36584
36600
|
},
|
|
36585
36601
|
{
|
|
36586
36602
|
"description": "Font size for the label text.",
|
|
@@ -36655,7 +36671,214 @@
|
|
|
36655
36671
|
}
|
|
36656
36672
|
}
|
|
36657
36673
|
],
|
|
36674
|
+
"cssParts": [
|
|
36675
|
+
{
|
|
36676
|
+
"description": "The label element.",
|
|
36677
|
+
"name": "label",
|
|
36678
|
+
"inheritedFrom": {
|
|
36679
|
+
"name": "FormfieldWrapper",
|
|
36680
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
36681
|
+
}
|
|
36682
|
+
},
|
|
36683
|
+
{
|
|
36684
|
+
"description": "The container for the label and required indicator elements.",
|
|
36685
|
+
"name": "label-text",
|
|
36686
|
+
"inheritedFrom": {
|
|
36687
|
+
"name": "FormfieldWrapper",
|
|
36688
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
36689
|
+
}
|
|
36690
|
+
},
|
|
36691
|
+
{
|
|
36692
|
+
"description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
|
|
36693
|
+
"name": "required-indicator",
|
|
36694
|
+
"inheritedFrom": {
|
|
36695
|
+
"name": "FormfieldWrapper",
|
|
36696
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
36697
|
+
}
|
|
36698
|
+
},
|
|
36699
|
+
{
|
|
36700
|
+
"description": "The info icon button element that is displayed next to the label when the `toggletip-text` property is set.",
|
|
36701
|
+
"name": "info-icon-btn",
|
|
36702
|
+
"inheritedFrom": {
|
|
36703
|
+
"name": "FormfieldWrapper",
|
|
36704
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
36705
|
+
}
|
|
36706
|
+
},
|
|
36707
|
+
{
|
|
36708
|
+
"description": "The toggletip element that is displayed when the info icon button is clicked.",
|
|
36709
|
+
"name": "label-toggletip",
|
|
36710
|
+
"inheritedFrom": {
|
|
36711
|
+
"name": "FormfieldWrapper",
|
|
36712
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
36713
|
+
}
|
|
36714
|
+
},
|
|
36715
|
+
{
|
|
36716
|
+
"description": "The helper/validation text element.",
|
|
36717
|
+
"name": "help-text",
|
|
36718
|
+
"inheritedFrom": {
|
|
36719
|
+
"name": "FormfieldWrapper",
|
|
36720
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
36721
|
+
}
|
|
36722
|
+
},
|
|
36723
|
+
{
|
|
36724
|
+
"description": "The helper/validation icon element that is displayed next to the helper/validation text.",
|
|
36725
|
+
"name": "helper-icon",
|
|
36726
|
+
"inheritedFrom": {
|
|
36727
|
+
"name": "FormfieldWrapper",
|
|
36728
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
36729
|
+
}
|
|
36730
|
+
},
|
|
36731
|
+
{
|
|
36732
|
+
"description": "The container for the helper/validation icon and text elements.",
|
|
36733
|
+
"name": "help-text-container",
|
|
36734
|
+
"inheritedFrom": {
|
|
36735
|
+
"name": "FormfieldWrapper",
|
|
36736
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
36737
|
+
}
|
|
36738
|
+
},
|
|
36739
|
+
{
|
|
36740
|
+
"description": "The native radio input element.",
|
|
36741
|
+
"name": "radio-input"
|
|
36742
|
+
},
|
|
36743
|
+
{
|
|
36744
|
+
"description": "The container for the label and helper text elements.",
|
|
36745
|
+
"name": "text-container"
|
|
36746
|
+
}
|
|
36747
|
+
],
|
|
36658
36748
|
"members": [
|
|
36749
|
+
{
|
|
36750
|
+
"kind": "field",
|
|
36751
|
+
"name": "checked",
|
|
36752
|
+
"type": {
|
|
36753
|
+
"text": "boolean"
|
|
36754
|
+
},
|
|
36755
|
+
"default": "false",
|
|
36756
|
+
"description": "Determines whether the radio is selected or unselected.",
|
|
36757
|
+
"attribute": "checked",
|
|
36758
|
+
"reflects": true
|
|
36759
|
+
},
|
|
36760
|
+
{
|
|
36761
|
+
"kind": "method",
|
|
36762
|
+
"name": "getAllRadiosWithinSameGroup",
|
|
36763
|
+
"privacy": "private",
|
|
36764
|
+
"return": {
|
|
36765
|
+
"type": {
|
|
36766
|
+
"text": "Radio[]"
|
|
36767
|
+
}
|
|
36768
|
+
},
|
|
36769
|
+
"description": "Returns all radios within the same group (name)."
|
|
36770
|
+
},
|
|
36771
|
+
{
|
|
36772
|
+
"kind": "method",
|
|
36773
|
+
"name": "setGroupValidity",
|
|
36774
|
+
"privacy": "private",
|
|
36775
|
+
"parameters": [
|
|
36776
|
+
{
|
|
36777
|
+
"name": "radios",
|
|
36778
|
+
"type": {
|
|
36779
|
+
"text": "Radio[]"
|
|
36780
|
+
},
|
|
36781
|
+
"description": "Array of radios of the same group"
|
|
36782
|
+
},
|
|
36783
|
+
{
|
|
36784
|
+
"name": "isValid",
|
|
36785
|
+
"type": {
|
|
36786
|
+
"text": "boolean"
|
|
36787
|
+
},
|
|
36788
|
+
"description": "Boolean value to set the validity of the group"
|
|
36789
|
+
}
|
|
36790
|
+
],
|
|
36791
|
+
"description": "Sets the validity of the group of radios."
|
|
36792
|
+
},
|
|
36793
|
+
{
|
|
36794
|
+
"kind": "method",
|
|
36795
|
+
"name": "setActualFormValue",
|
|
36796
|
+
"privacy": "private",
|
|
36797
|
+
"description": "Updates the form value to reflect the current state of the radio.\nIf checked, the value is set to the user-provided value.\nIf unchecked, the value is set to null."
|
|
36798
|
+
},
|
|
36799
|
+
{
|
|
36800
|
+
"kind": "method",
|
|
36801
|
+
"name": "handleChange",
|
|
36802
|
+
"privacy": "private",
|
|
36803
|
+
"return": {
|
|
36804
|
+
"type": {
|
|
36805
|
+
"text": "void"
|
|
36806
|
+
}
|
|
36807
|
+
},
|
|
36808
|
+
"description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
|
|
36809
|
+
},
|
|
36810
|
+
{
|
|
36811
|
+
"kind": "method",
|
|
36812
|
+
"name": "updateRadio",
|
|
36813
|
+
"privacy": "private",
|
|
36814
|
+
"parameters": [
|
|
36815
|
+
{
|
|
36816
|
+
"name": "enabledRadios",
|
|
36817
|
+
"type": {
|
|
36818
|
+
"text": "Radio[]"
|
|
36819
|
+
},
|
|
36820
|
+
"description": "An array of enabled radio buttons within the same group."
|
|
36821
|
+
},
|
|
36822
|
+
{
|
|
36823
|
+
"name": "index",
|
|
36824
|
+
"type": {
|
|
36825
|
+
"text": "number"
|
|
36826
|
+
},
|
|
36827
|
+
"description": "The index of the radio button to be updated within the enabled radios array."
|
|
36828
|
+
}
|
|
36829
|
+
],
|
|
36830
|
+
"description": "Updates the state of the radio button at the specified index within the enabled radios.\nFocuses the radio button and triggers the change event if the radio button is not read-only."
|
|
36831
|
+
},
|
|
36832
|
+
{
|
|
36833
|
+
"kind": "method",
|
|
36834
|
+
"name": "handleKeyDown",
|
|
36835
|
+
"privacy": "private",
|
|
36836
|
+
"return": {
|
|
36837
|
+
"type": {
|
|
36838
|
+
"text": "void"
|
|
36839
|
+
}
|
|
36840
|
+
},
|
|
36841
|
+
"parameters": [
|
|
36842
|
+
{
|
|
36843
|
+
"name": "event",
|
|
36844
|
+
"type": {
|
|
36845
|
+
"text": "KeyboardEvent"
|
|
36846
|
+
}
|
|
36847
|
+
}
|
|
36848
|
+
],
|
|
36849
|
+
"description": "Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element."
|
|
36850
|
+
},
|
|
36851
|
+
{
|
|
36852
|
+
"kind": "method",
|
|
36853
|
+
"name": "updateTabIndex",
|
|
36854
|
+
"privacy": "private",
|
|
36855
|
+
"return": {
|
|
36856
|
+
"type": {
|
|
36857
|
+
"text": "void"
|
|
36858
|
+
}
|
|
36859
|
+
},
|
|
36860
|
+
"description": "Update tab index for all radios in the same group (name)\nIf any radio group is checked, it will have a tab index of 0\nIf no radio group is checked, the first enabled radio will have a tab index of 0"
|
|
36861
|
+
},
|
|
36862
|
+
{
|
|
36863
|
+
"kind": "field",
|
|
36864
|
+
"name": "renderLabelAndHelperText",
|
|
36865
|
+
"privacy": "private"
|
|
36866
|
+
},
|
|
36867
|
+
{
|
|
36868
|
+
"kind": "field",
|
|
36869
|
+
"name": "autoFocusOnMount",
|
|
36870
|
+
"type": {
|
|
36871
|
+
"text": "boolean"
|
|
36872
|
+
},
|
|
36873
|
+
"default": "false",
|
|
36874
|
+
"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.",
|
|
36875
|
+
"attribute": "auto-focus-on-mount",
|
|
36876
|
+
"reflects": true,
|
|
36877
|
+
"inheritedFrom": {
|
|
36878
|
+
"name": "AutoFocusOnMountMixin",
|
|
36879
|
+
"module": "utils/mixins/AutoFocusOnMountMixin.js"
|
|
36880
|
+
}
|
|
36881
|
+
},
|
|
36659
36882
|
{
|
|
36660
36883
|
"kind": "field",
|
|
36661
36884
|
"name": "name",
|
|
@@ -36663,8 +36886,98 @@
|
|
|
36663
36886
|
"text": "string"
|
|
36664
36887
|
},
|
|
36665
36888
|
"default": "''",
|
|
36666
|
-
"description": "
|
|
36667
|
-
"attribute": "name"
|
|
36889
|
+
"description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
|
|
36890
|
+
"attribute": "name",
|
|
36891
|
+
"reflects": true,
|
|
36892
|
+
"inheritedFrom": {
|
|
36893
|
+
"name": "FormInternalsMixin",
|
|
36894
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
36895
|
+
}
|
|
36896
|
+
},
|
|
36897
|
+
{
|
|
36898
|
+
"kind": "field",
|
|
36899
|
+
"name": "value",
|
|
36900
|
+
"type": {
|
|
36901
|
+
"text": "string"
|
|
36902
|
+
},
|
|
36903
|
+
"default": "''",
|
|
36904
|
+
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
|
36905
|
+
"attribute": "value",
|
|
36906
|
+
"reflects": true,
|
|
36907
|
+
"inheritedFrom": {
|
|
36908
|
+
"name": "FormInternalsMixin",
|
|
36909
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
36910
|
+
}
|
|
36911
|
+
},
|
|
36912
|
+
{
|
|
36913
|
+
"kind": "field",
|
|
36914
|
+
"name": "validationMessage",
|
|
36915
|
+
"type": {
|
|
36916
|
+
"text": "string | undefined"
|
|
36917
|
+
},
|
|
36918
|
+
"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.",
|
|
36919
|
+
"attribute": "validation-message",
|
|
36920
|
+
"reflects": true,
|
|
36921
|
+
"inheritedFrom": {
|
|
36922
|
+
"name": "FormInternalsMixin",
|
|
36923
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
36924
|
+
}
|
|
36925
|
+
},
|
|
36926
|
+
{
|
|
36927
|
+
"kind": "field",
|
|
36928
|
+
"name": "validity",
|
|
36929
|
+
"type": {
|
|
36930
|
+
"text": "ValidityState"
|
|
36931
|
+
},
|
|
36932
|
+
"readonly": true,
|
|
36933
|
+
"inheritedFrom": {
|
|
36934
|
+
"name": "FormInternalsMixin",
|
|
36935
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
36936
|
+
}
|
|
36937
|
+
},
|
|
36938
|
+
{
|
|
36939
|
+
"kind": "field",
|
|
36940
|
+
"name": "willValidate",
|
|
36941
|
+
"readonly": true,
|
|
36942
|
+
"inheritedFrom": {
|
|
36943
|
+
"name": "FormInternalsMixin",
|
|
36944
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
36945
|
+
}
|
|
36946
|
+
},
|
|
36947
|
+
{
|
|
36948
|
+
"kind": "method",
|
|
36949
|
+
"name": "setValidity",
|
|
36950
|
+
"description": "Sets the validity of the input field based on the input field's validity.",
|
|
36951
|
+
"return": {
|
|
36952
|
+
"type": {
|
|
36953
|
+
"text": ""
|
|
36954
|
+
}
|
|
36955
|
+
},
|
|
36956
|
+
"inheritedFrom": {
|
|
36957
|
+
"name": "FormInternalsMixin",
|
|
36958
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
36959
|
+
}
|
|
36960
|
+
},
|
|
36961
|
+
{
|
|
36962
|
+
"kind": "method",
|
|
36963
|
+
"name": "checkValidity",
|
|
36964
|
+
"return": {
|
|
36965
|
+
"type": {
|
|
36966
|
+
"text": "boolean"
|
|
36967
|
+
}
|
|
36968
|
+
},
|
|
36969
|
+
"inheritedFrom": {
|
|
36970
|
+
"name": "FormInternalsMixin",
|
|
36971
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
36972
|
+
}
|
|
36973
|
+
},
|
|
36974
|
+
{
|
|
36975
|
+
"kind": "method",
|
|
36976
|
+
"name": "reportValidity",
|
|
36977
|
+
"inheritedFrom": {
|
|
36978
|
+
"name": "FormInternalsMixin",
|
|
36979
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
36980
|
+
}
|
|
36668
36981
|
},
|
|
36669
36982
|
{
|
|
36670
36983
|
"kind": "field",
|
|
@@ -36865,65 +37178,131 @@
|
|
|
36865
37178
|
}
|
|
36866
37179
|
},
|
|
36867
37180
|
"inheritedFrom": {
|
|
36868
|
-
"name": "FormfieldWrapper",
|
|
36869
|
-
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
37181
|
+
"name": "FormfieldWrapper",
|
|
37182
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
37183
|
+
}
|
|
37184
|
+
},
|
|
37185
|
+
{
|
|
37186
|
+
"kind": "method",
|
|
37187
|
+
"name": "renderHelpText",
|
|
37188
|
+
"privacy": "protected",
|
|
37189
|
+
"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.",
|
|
37190
|
+
"return": {
|
|
37191
|
+
"type": {
|
|
37192
|
+
"text": ""
|
|
37193
|
+
}
|
|
37194
|
+
},
|
|
37195
|
+
"inheritedFrom": {
|
|
37196
|
+
"name": "FormfieldWrapper",
|
|
37197
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
37198
|
+
}
|
|
37199
|
+
},
|
|
37200
|
+
{
|
|
37201
|
+
"kind": "method",
|
|
37202
|
+
"name": "renderLabel",
|
|
37203
|
+
"privacy": "protected",
|
|
37204
|
+
"description": "renders the label container that contains the label and labelInfoToggleTip.",
|
|
37205
|
+
"return": {
|
|
37206
|
+
"type": {
|
|
37207
|
+
"text": ""
|
|
37208
|
+
}
|
|
37209
|
+
},
|
|
37210
|
+
"inheritedFrom": {
|
|
37211
|
+
"name": "FormfieldWrapper",
|
|
37212
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
37213
|
+
}
|
|
37214
|
+
},
|
|
37215
|
+
{
|
|
37216
|
+
"kind": "method",
|
|
37217
|
+
"name": "renderHelperText",
|
|
37218
|
+
"privacy": "protected",
|
|
37219
|
+
"description": "renders the help-text container that contains the helpertext icon and helpertext.",
|
|
37220
|
+
"return": {
|
|
37221
|
+
"type": {
|
|
37222
|
+
"text": ""
|
|
37223
|
+
}
|
|
37224
|
+
},
|
|
37225
|
+
"inheritedFrom": {
|
|
37226
|
+
"name": "FormfieldWrapper",
|
|
37227
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
37228
|
+
}
|
|
37229
|
+
}
|
|
37230
|
+
],
|
|
37231
|
+
"events": [
|
|
37232
|
+
{
|
|
37233
|
+
"name": "change",
|
|
37234
|
+
"type": {
|
|
37235
|
+
"text": "Event"
|
|
37236
|
+
},
|
|
37237
|
+
"description": "(React: onChange) Event that gets dispatched when the radio state changes.",
|
|
37238
|
+
"reactName": "onChange"
|
|
37239
|
+
},
|
|
37240
|
+
{
|
|
37241
|
+
"description": "(React: onFocus) Event that gets dispatched when the radio receives focus.",
|
|
37242
|
+
"name": "focus",
|
|
37243
|
+
"reactName": "onFocus"
|
|
37244
|
+
}
|
|
37245
|
+
],
|
|
37246
|
+
"attributes": [
|
|
37247
|
+
{
|
|
37248
|
+
"name": "checked",
|
|
37249
|
+
"type": {
|
|
37250
|
+
"text": "boolean"
|
|
37251
|
+
},
|
|
37252
|
+
"default": "false",
|
|
37253
|
+
"description": "Determines whether the radio is selected or unselected.",
|
|
37254
|
+
"fieldName": "checked"
|
|
37255
|
+
},
|
|
37256
|
+
{
|
|
37257
|
+
"name": "auto-focus-on-mount",
|
|
37258
|
+
"type": {
|
|
37259
|
+
"text": "boolean"
|
|
37260
|
+
},
|
|
37261
|
+
"default": "false",
|
|
37262
|
+
"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.",
|
|
37263
|
+
"fieldName": "autoFocusOnMount",
|
|
37264
|
+
"inheritedFrom": {
|
|
37265
|
+
"name": "AutoFocusOnMountMixin",
|
|
37266
|
+
"module": "src/utils/mixins/AutoFocusOnMountMixin.ts"
|
|
36870
37267
|
}
|
|
36871
37268
|
},
|
|
36872
37269
|
{
|
|
36873
|
-
"
|
|
36874
|
-
"
|
|
36875
|
-
|
|
36876
|
-
"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.",
|
|
36877
|
-
"return": {
|
|
36878
|
-
"type": {
|
|
36879
|
-
"text": ""
|
|
36880
|
-
}
|
|
37270
|
+
"name": "name",
|
|
37271
|
+
"type": {
|
|
37272
|
+
"text": "string"
|
|
36881
37273
|
},
|
|
37274
|
+
"default": "''",
|
|
37275
|
+
"description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
|
|
37276
|
+
"fieldName": "name",
|
|
36882
37277
|
"inheritedFrom": {
|
|
36883
|
-
"name": "
|
|
36884
|
-
"module": "
|
|
37278
|
+
"name": "FormInternalsMixin",
|
|
37279
|
+
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
|
36885
37280
|
}
|
|
36886
37281
|
},
|
|
36887
37282
|
{
|
|
36888
|
-
"
|
|
36889
|
-
"
|
|
36890
|
-
|
|
36891
|
-
"description": "renders the label container that contains the label and labelInfoToggleTip.",
|
|
36892
|
-
"return": {
|
|
36893
|
-
"type": {
|
|
36894
|
-
"text": ""
|
|
36895
|
-
}
|
|
37283
|
+
"name": "value",
|
|
37284
|
+
"type": {
|
|
37285
|
+
"text": "string"
|
|
36896
37286
|
},
|
|
37287
|
+
"default": "''",
|
|
37288
|
+
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
|
37289
|
+
"fieldName": "value",
|
|
36897
37290
|
"inheritedFrom": {
|
|
36898
|
-
"name": "
|
|
36899
|
-
"module": "
|
|
37291
|
+
"name": "FormInternalsMixin",
|
|
37292
|
+
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
|
36900
37293
|
}
|
|
36901
37294
|
},
|
|
36902
37295
|
{
|
|
36903
|
-
"
|
|
36904
|
-
"
|
|
36905
|
-
|
|
36906
|
-
"description": "renders the help-text container that contains the helpertext icon and helpertext.",
|
|
36907
|
-
"return": {
|
|
36908
|
-
"type": {
|
|
36909
|
-
"text": ""
|
|
36910
|
-
}
|
|
37296
|
+
"name": "validation-message",
|
|
37297
|
+
"type": {
|
|
37298
|
+
"text": "string | undefined"
|
|
36911
37299
|
},
|
|
37300
|
+
"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.",
|
|
37301
|
+
"fieldName": "validationMessage",
|
|
36912
37302
|
"inheritedFrom": {
|
|
36913
|
-
"name": "
|
|
36914
|
-
"module": "
|
|
37303
|
+
"name": "FormInternalsMixin",
|
|
37304
|
+
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
|
36915
37305
|
}
|
|
36916
|
-
}
|
|
36917
|
-
],
|
|
36918
|
-
"attributes": [
|
|
36919
|
-
{
|
|
36920
|
-
"name": "name",
|
|
36921
|
-
"type": {
|
|
36922
|
-
"text": "string"
|
|
36923
|
-
},
|
|
36924
|
-
"default": "''",
|
|
36925
|
-
"description": "Name of the radio group.\nThey are used to group elements in a form together.",
|
|
36926
|
-
"fieldName": "name"
|
|
36927
37306
|
},
|
|
36928
37307
|
{
|
|
36929
37308
|
"name": "data-aria-label",
|
|
@@ -37075,22 +37454,28 @@
|
|
|
37075
37454
|
}
|
|
37076
37455
|
}
|
|
37077
37456
|
],
|
|
37457
|
+
"mixins": [
|
|
37458
|
+
{
|
|
37459
|
+
"name": "AutoFocusOnMountMixin",
|
|
37460
|
+
"module": "/src/utils/mixins/AutoFocusOnMountMixin"
|
|
37461
|
+
},
|
|
37462
|
+
{
|
|
37463
|
+
"name": "FormInternalsMixin",
|
|
37464
|
+
"module": "/src/utils/mixins/FormInternalsMixin"
|
|
37465
|
+
},
|
|
37466
|
+
{
|
|
37467
|
+
"name": "DataAriaLabelMixin",
|
|
37468
|
+
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
|
37469
|
+
}
|
|
37470
|
+
],
|
|
37078
37471
|
"superclass": {
|
|
37079
|
-
"name": "
|
|
37080
|
-
"module": "/src/components/
|
|
37472
|
+
"name": "FormfieldWrapper",
|
|
37473
|
+
"module": "/src/components/formfieldwrapper/formfieldwrapper.component"
|
|
37081
37474
|
},
|
|
37082
|
-
"tagName": "mdc-
|
|
37083
|
-
"jsDoc": "/**\n *
|
|
37475
|
+
"tagName": "mdc-radio",
|
|
37476
|
+
"jsDoc": "/**\n * Radio allow users to select single options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selection in lists.\n *\n * A radio component contains an optional label, optional info icon and an optional helper text.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-staticradio\n * @dependency mdc-toggletip\n *\n * @tagname mdc-radio\n *\n * @event change - (React: onChange) Event that gets dispatched when the radio state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.\n *\n * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle\n * @cssproperty --mdc-radio-outer-circle-size - size of the outer circle\n * @cssproperty --mdc-radio-inner-circle-background-color - background color of the inner circle\n * @cssproperty --mdc-radio-outer-circle-border-color - border color of the outer circle\n * @cssproperty --mdc-radio-outer-circle-background-color - background color of the outer circle\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart radio-input - The native radio input element.\n * @csspart text-container - The container for the label and helper text elements.\n */",
|
|
37084
37477
|
"customElement": true,
|
|
37085
37478
|
"slots": [
|
|
37086
|
-
{
|
|
37087
|
-
"description": "This is a default slot for checkbox or toggle components.",
|
|
37088
|
-
"name": "default",
|
|
37089
|
-
"inheritedFrom": {
|
|
37090
|
-
"name": "FormfieldGroup",
|
|
37091
|
-
"module": "src/components/formfieldgroup/formfieldgroup.component.ts"
|
|
37092
|
-
}
|
|
37093
|
-
},
|
|
37094
37479
|
{
|
|
37095
37480
|
"description": "Slot for the label element. If not provided, the `label` property will be used to render the label.",
|
|
37096
37481
|
"name": "label",
|
|
@@ -37123,88 +37508,6 @@
|
|
|
37123
37508
|
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
37124
37509
|
}
|
|
37125
37510
|
}
|
|
37126
|
-
],
|
|
37127
|
-
"cssParts": [
|
|
37128
|
-
{
|
|
37129
|
-
"description": "The label element.",
|
|
37130
|
-
"name": "label",
|
|
37131
|
-
"inheritedFrom": {
|
|
37132
|
-
"name": "FormfieldWrapper",
|
|
37133
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
37134
|
-
}
|
|
37135
|
-
},
|
|
37136
|
-
{
|
|
37137
|
-
"description": "The container for the label and required indicator elements.",
|
|
37138
|
-
"name": "label-text",
|
|
37139
|
-
"inheritedFrom": {
|
|
37140
|
-
"name": "FormfieldWrapper",
|
|
37141
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
37142
|
-
}
|
|
37143
|
-
},
|
|
37144
|
-
{
|
|
37145
|
-
"description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
|
|
37146
|
-
"name": "required-indicator",
|
|
37147
|
-
"inheritedFrom": {
|
|
37148
|
-
"name": "FormfieldWrapper",
|
|
37149
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
37150
|
-
}
|
|
37151
|
-
},
|
|
37152
|
-
{
|
|
37153
|
-
"description": "The info icon button element that is displayed next to the label when the `toggletip-text` property is set.",
|
|
37154
|
-
"name": "info-icon-btn",
|
|
37155
|
-
"inheritedFrom": {
|
|
37156
|
-
"name": "FormfieldWrapper",
|
|
37157
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
37158
|
-
}
|
|
37159
|
-
},
|
|
37160
|
-
{
|
|
37161
|
-
"description": "The toggletip element that is displayed when the info icon button is clicked.",
|
|
37162
|
-
"name": "label-toggletip",
|
|
37163
|
-
"inheritedFrom": {
|
|
37164
|
-
"name": "FormfieldWrapper",
|
|
37165
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
37166
|
-
}
|
|
37167
|
-
},
|
|
37168
|
-
{
|
|
37169
|
-
"description": "The helper/validation text element.",
|
|
37170
|
-
"name": "help-text",
|
|
37171
|
-
"inheritedFrom": {
|
|
37172
|
-
"name": "FormfieldWrapper",
|
|
37173
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
37174
|
-
}
|
|
37175
|
-
},
|
|
37176
|
-
{
|
|
37177
|
-
"description": "The helper/validation icon element that is displayed next to the helper/validation text.",
|
|
37178
|
-
"name": "helper-icon",
|
|
37179
|
-
"inheritedFrom": {
|
|
37180
|
-
"name": "FormfieldWrapper",
|
|
37181
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
37182
|
-
}
|
|
37183
|
-
},
|
|
37184
|
-
{
|
|
37185
|
-
"description": "The container for the helper/validation icon and text elements.",
|
|
37186
|
-
"name": "help-text-container",
|
|
37187
|
-
"inheritedFrom": {
|
|
37188
|
-
"name": "FormfieldWrapper",
|
|
37189
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
37190
|
-
}
|
|
37191
|
-
},
|
|
37192
|
-
{
|
|
37193
|
-
"description": "Formfieldgroup host container",
|
|
37194
|
-
"name": "container",
|
|
37195
|
-
"inheritedFrom": {
|
|
37196
|
-
"name": "FormfieldGroup",
|
|
37197
|
-
"module": "src/components/formfieldgroup/formfieldgroup.component.ts"
|
|
37198
|
-
}
|
|
37199
|
-
},
|
|
37200
|
-
{
|
|
37201
|
-
"description": "This contains the label and help text for the group",
|
|
37202
|
-
"name": "group-header",
|
|
37203
|
-
"inheritedFrom": {
|
|
37204
|
-
"name": "FormfieldGroup",
|
|
37205
|
-
"module": "src/components/formfieldgroup/formfieldgroup.component.ts"
|
|
37206
|
-
}
|
|
37207
|
-
}
|
|
37208
37511
|
]
|
|
37209
37512
|
}
|
|
37210
37513
|
],
|
|
@@ -37213,40 +37516,24 @@
|
|
|
37213
37516
|
"kind": "js",
|
|
37214
37517
|
"name": "default",
|
|
37215
37518
|
"declaration": {
|
|
37216
|
-
"name": "
|
|
37217
|
-
"module": "components/
|
|
37519
|
+
"name": "Radio",
|
|
37520
|
+
"module": "components/radio/radio.component.js"
|
|
37218
37521
|
}
|
|
37219
37522
|
}
|
|
37220
37523
|
]
|
|
37221
37524
|
},
|
|
37222
37525
|
{
|
|
37223
37526
|
"kind": "javascript-module",
|
|
37224
|
-
"path": "components/
|
|
37527
|
+
"path": "components/radiogroup/radiogroup.component.js",
|
|
37225
37528
|
"declarations": [
|
|
37226
37529
|
{
|
|
37227
37530
|
"kind": "class",
|
|
37228
|
-
"description": "
|
|
37229
|
-
"name": "
|
|
37531
|
+
"description": "`mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.\nIt can have a header text and a description. It enables users to select a single option from a set of options.\nIt is often used in forms, settings, and selection in lists. It automatically group the radio buttons inside it.",
|
|
37532
|
+
"name": "RadioGroup",
|
|
37230
37533
|
"cssProperties": [
|
|
37231
37534
|
{
|
|
37232
|
-
"description": "
|
|
37233
|
-
"name": "--mdc-
|
|
37234
|
-
},
|
|
37235
|
-
{
|
|
37236
|
-
"description": "size of the outer circle",
|
|
37237
|
-
"name": "--mdc-radio-outer-circle-size"
|
|
37238
|
-
},
|
|
37239
|
-
{
|
|
37240
|
-
"description": "background color of the inner circle",
|
|
37241
|
-
"name": "--mdc-radio-inner-circle-background-color"
|
|
37242
|
-
},
|
|
37243
|
-
{
|
|
37244
|
-
"description": "border color of the outer circle",
|
|
37245
|
-
"name": "--mdc-radio-outer-circle-border-color"
|
|
37246
|
-
},
|
|
37247
|
-
{
|
|
37248
|
-
"description": "background color of the outer circle",
|
|
37249
|
-
"name": "--mdc-radio-outer-circle-background-color"
|
|
37535
|
+
"description": "color of the description text",
|
|
37536
|
+
"name": "--mdc-radiogroup-description-text-normal"
|
|
37250
37537
|
},
|
|
37251
37538
|
{
|
|
37252
37539
|
"description": "Font size for the label text.",
|
|
@@ -37321,214 +37608,7 @@
|
|
|
37321
37608
|
}
|
|
37322
37609
|
}
|
|
37323
37610
|
],
|
|
37324
|
-
"cssParts": [
|
|
37325
|
-
{
|
|
37326
|
-
"description": "The label element.",
|
|
37327
|
-
"name": "label",
|
|
37328
|
-
"inheritedFrom": {
|
|
37329
|
-
"name": "FormfieldWrapper",
|
|
37330
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
37331
|
-
}
|
|
37332
|
-
},
|
|
37333
|
-
{
|
|
37334
|
-
"description": "The container for the label and required indicator elements.",
|
|
37335
|
-
"name": "label-text",
|
|
37336
|
-
"inheritedFrom": {
|
|
37337
|
-
"name": "FormfieldWrapper",
|
|
37338
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
37339
|
-
}
|
|
37340
|
-
},
|
|
37341
|
-
{
|
|
37342
|
-
"description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
|
|
37343
|
-
"name": "required-indicator",
|
|
37344
|
-
"inheritedFrom": {
|
|
37345
|
-
"name": "FormfieldWrapper",
|
|
37346
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
37347
|
-
}
|
|
37348
|
-
},
|
|
37349
|
-
{
|
|
37350
|
-
"description": "The info icon button element that is displayed next to the label when the `toggletip-text` property is set.",
|
|
37351
|
-
"name": "info-icon-btn",
|
|
37352
|
-
"inheritedFrom": {
|
|
37353
|
-
"name": "FormfieldWrapper",
|
|
37354
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
37355
|
-
}
|
|
37356
|
-
},
|
|
37357
|
-
{
|
|
37358
|
-
"description": "The toggletip element that is displayed when the info icon button is clicked.",
|
|
37359
|
-
"name": "label-toggletip",
|
|
37360
|
-
"inheritedFrom": {
|
|
37361
|
-
"name": "FormfieldWrapper",
|
|
37362
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
37363
|
-
}
|
|
37364
|
-
},
|
|
37365
|
-
{
|
|
37366
|
-
"description": "The helper/validation text element.",
|
|
37367
|
-
"name": "help-text",
|
|
37368
|
-
"inheritedFrom": {
|
|
37369
|
-
"name": "FormfieldWrapper",
|
|
37370
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
37371
|
-
}
|
|
37372
|
-
},
|
|
37373
|
-
{
|
|
37374
|
-
"description": "The helper/validation icon element that is displayed next to the helper/validation text.",
|
|
37375
|
-
"name": "helper-icon",
|
|
37376
|
-
"inheritedFrom": {
|
|
37377
|
-
"name": "FormfieldWrapper",
|
|
37378
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
37379
|
-
}
|
|
37380
|
-
},
|
|
37381
|
-
{
|
|
37382
|
-
"description": "The container for the helper/validation icon and text elements.",
|
|
37383
|
-
"name": "help-text-container",
|
|
37384
|
-
"inheritedFrom": {
|
|
37385
|
-
"name": "FormfieldWrapper",
|
|
37386
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
37387
|
-
}
|
|
37388
|
-
},
|
|
37389
|
-
{
|
|
37390
|
-
"description": "The native radio input element.",
|
|
37391
|
-
"name": "radio-input"
|
|
37392
|
-
},
|
|
37393
|
-
{
|
|
37394
|
-
"description": "The container for the label and helper text elements.",
|
|
37395
|
-
"name": "text-container"
|
|
37396
|
-
}
|
|
37397
|
-
],
|
|
37398
37611
|
"members": [
|
|
37399
|
-
{
|
|
37400
|
-
"kind": "field",
|
|
37401
|
-
"name": "checked",
|
|
37402
|
-
"type": {
|
|
37403
|
-
"text": "boolean"
|
|
37404
|
-
},
|
|
37405
|
-
"default": "false",
|
|
37406
|
-
"description": "Determines whether the radio is selected or unselected.",
|
|
37407
|
-
"attribute": "checked",
|
|
37408
|
-
"reflects": true
|
|
37409
|
-
},
|
|
37410
|
-
{
|
|
37411
|
-
"kind": "method",
|
|
37412
|
-
"name": "getAllRadiosWithinSameGroup",
|
|
37413
|
-
"privacy": "private",
|
|
37414
|
-
"return": {
|
|
37415
|
-
"type": {
|
|
37416
|
-
"text": "Radio[]"
|
|
37417
|
-
}
|
|
37418
|
-
},
|
|
37419
|
-
"description": "Returns all radios within the same group (name)."
|
|
37420
|
-
},
|
|
37421
|
-
{
|
|
37422
|
-
"kind": "method",
|
|
37423
|
-
"name": "setGroupValidity",
|
|
37424
|
-
"privacy": "private",
|
|
37425
|
-
"parameters": [
|
|
37426
|
-
{
|
|
37427
|
-
"name": "radios",
|
|
37428
|
-
"type": {
|
|
37429
|
-
"text": "Radio[]"
|
|
37430
|
-
},
|
|
37431
|
-
"description": "Array of radios of the same group"
|
|
37432
|
-
},
|
|
37433
|
-
{
|
|
37434
|
-
"name": "isValid",
|
|
37435
|
-
"type": {
|
|
37436
|
-
"text": "boolean"
|
|
37437
|
-
},
|
|
37438
|
-
"description": "Boolean value to set the validity of the group"
|
|
37439
|
-
}
|
|
37440
|
-
],
|
|
37441
|
-
"description": "Sets the validity of the group of radios."
|
|
37442
|
-
},
|
|
37443
|
-
{
|
|
37444
|
-
"kind": "method",
|
|
37445
|
-
"name": "setActualFormValue",
|
|
37446
|
-
"privacy": "private",
|
|
37447
|
-
"description": "Updates the form value to reflect the current state of the radio.\nIf checked, the value is set to the user-provided value.\nIf unchecked, the value is set to null."
|
|
37448
|
-
},
|
|
37449
|
-
{
|
|
37450
|
-
"kind": "method",
|
|
37451
|
-
"name": "handleChange",
|
|
37452
|
-
"privacy": "private",
|
|
37453
|
-
"return": {
|
|
37454
|
-
"type": {
|
|
37455
|
-
"text": "void"
|
|
37456
|
-
}
|
|
37457
|
-
},
|
|
37458
|
-
"description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
|
|
37459
|
-
},
|
|
37460
|
-
{
|
|
37461
|
-
"kind": "method",
|
|
37462
|
-
"name": "updateRadio",
|
|
37463
|
-
"privacy": "private",
|
|
37464
|
-
"parameters": [
|
|
37465
|
-
{
|
|
37466
|
-
"name": "enabledRadios",
|
|
37467
|
-
"type": {
|
|
37468
|
-
"text": "Radio[]"
|
|
37469
|
-
},
|
|
37470
|
-
"description": "An array of enabled radio buttons within the same group."
|
|
37471
|
-
},
|
|
37472
|
-
{
|
|
37473
|
-
"name": "index",
|
|
37474
|
-
"type": {
|
|
37475
|
-
"text": "number"
|
|
37476
|
-
},
|
|
37477
|
-
"description": "The index of the radio button to be updated within the enabled radios array."
|
|
37478
|
-
}
|
|
37479
|
-
],
|
|
37480
|
-
"description": "Updates the state of the radio button at the specified index within the enabled radios.\nFocuses the radio button and triggers the change event if the radio button is not read-only."
|
|
37481
|
-
},
|
|
37482
|
-
{
|
|
37483
|
-
"kind": "method",
|
|
37484
|
-
"name": "handleKeyDown",
|
|
37485
|
-
"privacy": "private",
|
|
37486
|
-
"return": {
|
|
37487
|
-
"type": {
|
|
37488
|
-
"text": "void"
|
|
37489
|
-
}
|
|
37490
|
-
},
|
|
37491
|
-
"parameters": [
|
|
37492
|
-
{
|
|
37493
|
-
"name": "event",
|
|
37494
|
-
"type": {
|
|
37495
|
-
"text": "KeyboardEvent"
|
|
37496
|
-
}
|
|
37497
|
-
}
|
|
37498
|
-
],
|
|
37499
|
-
"description": "Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element."
|
|
37500
|
-
},
|
|
37501
|
-
{
|
|
37502
|
-
"kind": "method",
|
|
37503
|
-
"name": "updateTabIndex",
|
|
37504
|
-
"privacy": "private",
|
|
37505
|
-
"return": {
|
|
37506
|
-
"type": {
|
|
37507
|
-
"text": "void"
|
|
37508
|
-
}
|
|
37509
|
-
},
|
|
37510
|
-
"description": "Update tab index for all radios in the same group (name)\nIf any radio group is checked, it will have a tab index of 0\nIf no radio group is checked, the first enabled radio will have a tab index of 0"
|
|
37511
|
-
},
|
|
37512
|
-
{
|
|
37513
|
-
"kind": "field",
|
|
37514
|
-
"name": "renderLabelAndHelperText",
|
|
37515
|
-
"privacy": "private"
|
|
37516
|
-
},
|
|
37517
|
-
{
|
|
37518
|
-
"kind": "field",
|
|
37519
|
-
"name": "autoFocusOnMount",
|
|
37520
|
-
"type": {
|
|
37521
|
-
"text": "boolean"
|
|
37522
|
-
},
|
|
37523
|
-
"default": "false",
|
|
37524
|
-
"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.",
|
|
37525
|
-
"attribute": "auto-focus-on-mount",
|
|
37526
|
-
"reflects": true,
|
|
37527
|
-
"inheritedFrom": {
|
|
37528
|
-
"name": "AutoFocusOnMountMixin",
|
|
37529
|
-
"module": "utils/mixins/AutoFocusOnMountMixin.js"
|
|
37530
|
-
}
|
|
37531
|
-
},
|
|
37532
37612
|
{
|
|
37533
37613
|
"kind": "field",
|
|
37534
37614
|
"name": "name",
|
|
@@ -37536,98 +37616,8 @@
|
|
|
37536
37616
|
"text": "string"
|
|
37537
37617
|
},
|
|
37538
37618
|
"default": "''",
|
|
37539
|
-
"description": "
|
|
37540
|
-
"attribute": "name"
|
|
37541
|
-
"reflects": true,
|
|
37542
|
-
"inheritedFrom": {
|
|
37543
|
-
"name": "FormInternalsMixin",
|
|
37544
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
37545
|
-
}
|
|
37546
|
-
},
|
|
37547
|
-
{
|
|
37548
|
-
"kind": "field",
|
|
37549
|
-
"name": "value",
|
|
37550
|
-
"type": {
|
|
37551
|
-
"text": "string"
|
|
37552
|
-
},
|
|
37553
|
-
"default": "''",
|
|
37554
|
-
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
|
37555
|
-
"attribute": "value",
|
|
37556
|
-
"reflects": true,
|
|
37557
|
-
"inheritedFrom": {
|
|
37558
|
-
"name": "FormInternalsMixin",
|
|
37559
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
37560
|
-
}
|
|
37561
|
-
},
|
|
37562
|
-
{
|
|
37563
|
-
"kind": "field",
|
|
37564
|
-
"name": "validationMessage",
|
|
37565
|
-
"type": {
|
|
37566
|
-
"text": "string | undefined"
|
|
37567
|
-
},
|
|
37568
|
-
"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.",
|
|
37569
|
-
"attribute": "validation-message",
|
|
37570
|
-
"reflects": true,
|
|
37571
|
-
"inheritedFrom": {
|
|
37572
|
-
"name": "FormInternalsMixin",
|
|
37573
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
37574
|
-
}
|
|
37575
|
-
},
|
|
37576
|
-
{
|
|
37577
|
-
"kind": "field",
|
|
37578
|
-
"name": "validity",
|
|
37579
|
-
"type": {
|
|
37580
|
-
"text": "ValidityState"
|
|
37581
|
-
},
|
|
37582
|
-
"readonly": true,
|
|
37583
|
-
"inheritedFrom": {
|
|
37584
|
-
"name": "FormInternalsMixin",
|
|
37585
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
37586
|
-
}
|
|
37587
|
-
},
|
|
37588
|
-
{
|
|
37589
|
-
"kind": "field",
|
|
37590
|
-
"name": "willValidate",
|
|
37591
|
-
"readonly": true,
|
|
37592
|
-
"inheritedFrom": {
|
|
37593
|
-
"name": "FormInternalsMixin",
|
|
37594
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
37595
|
-
}
|
|
37596
|
-
},
|
|
37597
|
-
{
|
|
37598
|
-
"kind": "method",
|
|
37599
|
-
"name": "setValidity",
|
|
37600
|
-
"description": "Sets the validity of the input field based on the input field's validity.",
|
|
37601
|
-
"return": {
|
|
37602
|
-
"type": {
|
|
37603
|
-
"text": ""
|
|
37604
|
-
}
|
|
37605
|
-
},
|
|
37606
|
-
"inheritedFrom": {
|
|
37607
|
-
"name": "FormInternalsMixin",
|
|
37608
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
37609
|
-
}
|
|
37610
|
-
},
|
|
37611
|
-
{
|
|
37612
|
-
"kind": "method",
|
|
37613
|
-
"name": "checkValidity",
|
|
37614
|
-
"return": {
|
|
37615
|
-
"type": {
|
|
37616
|
-
"text": "boolean"
|
|
37617
|
-
}
|
|
37618
|
-
},
|
|
37619
|
-
"inheritedFrom": {
|
|
37620
|
-
"name": "FormInternalsMixin",
|
|
37621
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
37622
|
-
}
|
|
37623
|
-
},
|
|
37624
|
-
{
|
|
37625
|
-
"kind": "method",
|
|
37626
|
-
"name": "reportValidity",
|
|
37627
|
-
"inheritedFrom": {
|
|
37628
|
-
"name": "FormInternalsMixin",
|
|
37629
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
37630
|
-
}
|
|
37619
|
+
"description": "Name of the radio group.\nThey are used to group elements in a form together.",
|
|
37620
|
+
"attribute": "name"
|
|
37631
37621
|
},
|
|
37632
37622
|
{
|
|
37633
37623
|
"kind": "field",
|
|
@@ -37878,81 +37868,15 @@
|
|
|
37878
37868
|
}
|
|
37879
37869
|
}
|
|
37880
37870
|
],
|
|
37881
|
-
"events": [
|
|
37882
|
-
{
|
|
37883
|
-
"name": "change",
|
|
37884
|
-
"type": {
|
|
37885
|
-
"text": "Event"
|
|
37886
|
-
},
|
|
37887
|
-
"description": "(React: onChange) Event that gets dispatched when the radio state changes.",
|
|
37888
|
-
"reactName": "onChange"
|
|
37889
|
-
},
|
|
37890
|
-
{
|
|
37891
|
-
"description": "(React: onFocus) Event that gets dispatched when the radio receives focus.",
|
|
37892
|
-
"name": "focus",
|
|
37893
|
-
"reactName": "onFocus"
|
|
37894
|
-
}
|
|
37895
|
-
],
|
|
37896
37871
|
"attributes": [
|
|
37897
|
-
{
|
|
37898
|
-
"name": "checked",
|
|
37899
|
-
"type": {
|
|
37900
|
-
"text": "boolean"
|
|
37901
|
-
},
|
|
37902
|
-
"default": "false",
|
|
37903
|
-
"description": "Determines whether the radio is selected or unselected.",
|
|
37904
|
-
"fieldName": "checked"
|
|
37905
|
-
},
|
|
37906
|
-
{
|
|
37907
|
-
"name": "auto-focus-on-mount",
|
|
37908
|
-
"type": {
|
|
37909
|
-
"text": "boolean"
|
|
37910
|
-
},
|
|
37911
|
-
"default": "false",
|
|
37912
|
-
"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.",
|
|
37913
|
-
"fieldName": "autoFocusOnMount",
|
|
37914
|
-
"inheritedFrom": {
|
|
37915
|
-
"name": "AutoFocusOnMountMixin",
|
|
37916
|
-
"module": "src/utils/mixins/AutoFocusOnMountMixin.ts"
|
|
37917
|
-
}
|
|
37918
|
-
},
|
|
37919
37872
|
{
|
|
37920
37873
|
"name": "name",
|
|
37921
37874
|
"type": {
|
|
37922
37875
|
"text": "string"
|
|
37923
37876
|
},
|
|
37924
37877
|
"default": "''",
|
|
37925
|
-
"description": "
|
|
37926
|
-
"fieldName": "name"
|
|
37927
|
-
"inheritedFrom": {
|
|
37928
|
-
"name": "FormInternalsMixin",
|
|
37929
|
-
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
|
37930
|
-
}
|
|
37931
|
-
},
|
|
37932
|
-
{
|
|
37933
|
-
"name": "value",
|
|
37934
|
-
"type": {
|
|
37935
|
-
"text": "string"
|
|
37936
|
-
},
|
|
37937
|
-
"default": "''",
|
|
37938
|
-
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
|
37939
|
-
"fieldName": "value",
|
|
37940
|
-
"inheritedFrom": {
|
|
37941
|
-
"name": "FormInternalsMixin",
|
|
37942
|
-
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
|
37943
|
-
}
|
|
37944
|
-
},
|
|
37945
|
-
{
|
|
37946
|
-
"name": "validation-message",
|
|
37947
|
-
"type": {
|
|
37948
|
-
"text": "string | undefined"
|
|
37949
|
-
},
|
|
37950
|
-
"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.",
|
|
37951
|
-
"fieldName": "validationMessage",
|
|
37952
|
-
"inheritedFrom": {
|
|
37953
|
-
"name": "FormInternalsMixin",
|
|
37954
|
-
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
|
37955
|
-
}
|
|
37878
|
+
"description": "Name of the radio group.\nThey are used to group elements in a form together.",
|
|
37879
|
+
"fieldName": "name"
|
|
37956
37880
|
},
|
|
37957
37881
|
{
|
|
37958
37882
|
"name": "data-aria-label",
|
|
@@ -38104,28 +38028,22 @@
|
|
|
38104
38028
|
}
|
|
38105
38029
|
}
|
|
38106
38030
|
],
|
|
38107
|
-
"mixins": [
|
|
38108
|
-
{
|
|
38109
|
-
"name": "AutoFocusOnMountMixin",
|
|
38110
|
-
"module": "/src/utils/mixins/AutoFocusOnMountMixin"
|
|
38111
|
-
},
|
|
38112
|
-
{
|
|
38113
|
-
"name": "FormInternalsMixin",
|
|
38114
|
-
"module": "/src/utils/mixins/FormInternalsMixin"
|
|
38115
|
-
},
|
|
38116
|
-
{
|
|
38117
|
-
"name": "DataAriaLabelMixin",
|
|
38118
|
-
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
|
38119
|
-
}
|
|
38120
|
-
],
|
|
38121
38031
|
"superclass": {
|
|
38122
|
-
"name": "
|
|
38123
|
-
"module": "/src/components/
|
|
38032
|
+
"name": "FormfieldGroup",
|
|
38033
|
+
"module": "/src/components/formfieldgroup"
|
|
38124
38034
|
},
|
|
38125
|
-
"tagName": "mdc-
|
|
38126
|
-
"jsDoc": "/**\n *
|
|
38035
|
+
"tagName": "mdc-radiogroup",
|
|
38036
|
+
"jsDoc": "/**\n * `mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.\n * It can have a header text and a description. It enables users to select a single option from a set of options.\n * It is often used in forms, settings, and selection in lists. It automatically group the radio buttons inside it.\n *\n * @tagname mdc-radiogroup\n *\n * @cssproperty --mdc-radiogroup-description-text-normal - color of the description text\n *\n */",
|
|
38127
38037
|
"customElement": true,
|
|
38128
38038
|
"slots": [
|
|
38039
|
+
{
|
|
38040
|
+
"description": "This is a default slot for checkbox or toggle components.",
|
|
38041
|
+
"name": "default",
|
|
38042
|
+
"inheritedFrom": {
|
|
38043
|
+
"name": "FormfieldGroup",
|
|
38044
|
+
"module": "src/components/formfieldgroup/formfieldgroup.component.ts"
|
|
38045
|
+
}
|
|
38046
|
+
},
|
|
38129
38047
|
{
|
|
38130
38048
|
"description": "Slot for the label element. If not provided, the `label` property will be used to render the label.",
|
|
38131
38049
|
"name": "label",
|
|
@@ -38158,6 +38076,88 @@
|
|
|
38158
38076
|
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
38159
38077
|
}
|
|
38160
38078
|
}
|
|
38079
|
+
],
|
|
38080
|
+
"cssParts": [
|
|
38081
|
+
{
|
|
38082
|
+
"description": "The label element.",
|
|
38083
|
+
"name": "label",
|
|
38084
|
+
"inheritedFrom": {
|
|
38085
|
+
"name": "FormfieldWrapper",
|
|
38086
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
38087
|
+
}
|
|
38088
|
+
},
|
|
38089
|
+
{
|
|
38090
|
+
"description": "The container for the label and required indicator elements.",
|
|
38091
|
+
"name": "label-text",
|
|
38092
|
+
"inheritedFrom": {
|
|
38093
|
+
"name": "FormfieldWrapper",
|
|
38094
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
38095
|
+
}
|
|
38096
|
+
},
|
|
38097
|
+
{
|
|
38098
|
+
"description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
|
|
38099
|
+
"name": "required-indicator",
|
|
38100
|
+
"inheritedFrom": {
|
|
38101
|
+
"name": "FormfieldWrapper",
|
|
38102
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
38103
|
+
}
|
|
38104
|
+
},
|
|
38105
|
+
{
|
|
38106
|
+
"description": "The info icon button element that is displayed next to the label when the `toggletip-text` property is set.",
|
|
38107
|
+
"name": "info-icon-btn",
|
|
38108
|
+
"inheritedFrom": {
|
|
38109
|
+
"name": "FormfieldWrapper",
|
|
38110
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
38111
|
+
}
|
|
38112
|
+
},
|
|
38113
|
+
{
|
|
38114
|
+
"description": "The toggletip element that is displayed when the info icon button is clicked.",
|
|
38115
|
+
"name": "label-toggletip",
|
|
38116
|
+
"inheritedFrom": {
|
|
38117
|
+
"name": "FormfieldWrapper",
|
|
38118
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
38119
|
+
}
|
|
38120
|
+
},
|
|
38121
|
+
{
|
|
38122
|
+
"description": "The helper/validation text element.",
|
|
38123
|
+
"name": "help-text",
|
|
38124
|
+
"inheritedFrom": {
|
|
38125
|
+
"name": "FormfieldWrapper",
|
|
38126
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
38127
|
+
}
|
|
38128
|
+
},
|
|
38129
|
+
{
|
|
38130
|
+
"description": "The helper/validation icon element that is displayed next to the helper/validation text.",
|
|
38131
|
+
"name": "helper-icon",
|
|
38132
|
+
"inheritedFrom": {
|
|
38133
|
+
"name": "FormfieldWrapper",
|
|
38134
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
38135
|
+
}
|
|
38136
|
+
},
|
|
38137
|
+
{
|
|
38138
|
+
"description": "The container for the helper/validation icon and text elements.",
|
|
38139
|
+
"name": "help-text-container",
|
|
38140
|
+
"inheritedFrom": {
|
|
38141
|
+
"name": "FormfieldWrapper",
|
|
38142
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
38143
|
+
}
|
|
38144
|
+
},
|
|
38145
|
+
{
|
|
38146
|
+
"description": "Formfieldgroup host container",
|
|
38147
|
+
"name": "container",
|
|
38148
|
+
"inheritedFrom": {
|
|
38149
|
+
"name": "FormfieldGroup",
|
|
38150
|
+
"module": "src/components/formfieldgroup/formfieldgroup.component.ts"
|
|
38151
|
+
}
|
|
38152
|
+
},
|
|
38153
|
+
{
|
|
38154
|
+
"description": "This contains the label and help text for the group",
|
|
38155
|
+
"name": "group-header",
|
|
38156
|
+
"inheritedFrom": {
|
|
38157
|
+
"name": "FormfieldGroup",
|
|
38158
|
+
"module": "src/components/formfieldgroup/formfieldgroup.component.ts"
|
|
38159
|
+
}
|
|
38160
|
+
}
|
|
38161
38161
|
]
|
|
38162
38162
|
}
|
|
38163
38163
|
],
|
|
@@ -38166,8 +38166,8 @@
|
|
|
38166
38166
|
"kind": "js",
|
|
38167
38167
|
"name": "default",
|
|
38168
38168
|
"declaration": {
|
|
38169
|
-
"name": "
|
|
38170
|
-
"module": "components/
|
|
38169
|
+
"name": "RadioGroup",
|
|
38170
|
+
"module": "components/radiogroup/radiogroup.component.js"
|
|
38171
38171
|
}
|
|
38172
38172
|
}
|
|
38173
38173
|
]
|
|
@@ -41808,6 +41808,81 @@
|
|
|
41808
41808
|
],
|
|
41809
41809
|
"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."
|
|
41810
41810
|
},
|
|
41811
|
+
{
|
|
41812
|
+
"kind": "method",
|
|
41813
|
+
"name": "setupDebounceSearch",
|
|
41814
|
+
"privacy": "private",
|
|
41815
|
+
"return": {
|
|
41816
|
+
"type": {
|
|
41817
|
+
"text": "void"
|
|
41818
|
+
}
|
|
41819
|
+
}
|
|
41820
|
+
},
|
|
41821
|
+
{
|
|
41822
|
+
"kind": "method",
|
|
41823
|
+
"name": "debounceSearchKey",
|
|
41824
|
+
"privacy": "private",
|
|
41825
|
+
"return": {
|
|
41826
|
+
"type": {
|
|
41827
|
+
"text": "string"
|
|
41828
|
+
}
|
|
41829
|
+
},
|
|
41830
|
+
"parameters": [
|
|
41831
|
+
{
|
|
41832
|
+
"name": "letter",
|
|
41833
|
+
"type": {
|
|
41834
|
+
"text": "string"
|
|
41835
|
+
}
|
|
41836
|
+
}
|
|
41837
|
+
]
|
|
41838
|
+
},
|
|
41839
|
+
{
|
|
41840
|
+
"kind": "method",
|
|
41841
|
+
"name": "filterOptionsBySearchKey",
|
|
41842
|
+
"privacy": "private",
|
|
41843
|
+
"return": {
|
|
41844
|
+
"type": {
|
|
41845
|
+
"text": ""
|
|
41846
|
+
}
|
|
41847
|
+
},
|
|
41848
|
+
"parameters": [
|
|
41849
|
+
{
|
|
41850
|
+
"name": "options",
|
|
41851
|
+
"type": {
|
|
41852
|
+
"text": "Option[]"
|
|
41853
|
+
},
|
|
41854
|
+
"description": "The options to filter."
|
|
41855
|
+
},
|
|
41856
|
+
{
|
|
41857
|
+
"name": "searchKey",
|
|
41858
|
+
"type": {
|
|
41859
|
+
"text": "string"
|
|
41860
|
+
},
|
|
41861
|
+
"description": "The search key to filter by."
|
|
41862
|
+
}
|
|
41863
|
+
],
|
|
41864
|
+
"description": "Filters the given option labels based on the given search key.\nIt returns a new array of options that have labels starting with the given search key case-insensitive."
|
|
41865
|
+
},
|
|
41866
|
+
{
|
|
41867
|
+
"kind": "method",
|
|
41868
|
+
"name": "handleSelectedOptionBasedOnFilter",
|
|
41869
|
+
"privacy": "private",
|
|
41870
|
+
"return": {
|
|
41871
|
+
"type": {
|
|
41872
|
+
"text": "void"
|
|
41873
|
+
}
|
|
41874
|
+
},
|
|
41875
|
+
"parameters": [
|
|
41876
|
+
{
|
|
41877
|
+
"name": "searchKey",
|
|
41878
|
+
"type": {
|
|
41879
|
+
"text": "string"
|
|
41880
|
+
},
|
|
41881
|
+
"description": "The filter string to search for options."
|
|
41882
|
+
}
|
|
41883
|
+
],
|
|
41884
|
+
"description": "Handles the selection of an option based on the filter string.\nIt will select the first option from the filtered list if it is not empty.\nIf the filtered list is empty, it will do nothing."
|
|
41885
|
+
},
|
|
41811
41886
|
{
|
|
41812
41887
|
"kind": "method",
|
|
41813
41888
|
"name": "handleKeydownCombobox",
|
|
@@ -41826,7 +41901,66 @@
|
|
|
41826
41901
|
"description": "The keyboard event."
|
|
41827
41902
|
}
|
|
41828
41903
|
],
|
|
41829
|
-
"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-
|
|
41904
|
+
"description": "Handles the keydown event on the select element when the popover is closed.\nThe options are as follows:\n- ARROW_DOWN, ARROW_UP, ENTER, SPACE: Opens the popover and prevents the default scrolling behavior.\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.\n- Any key: Opens the popover and sets focus on the first option which starts with the key."
|
|
41905
|
+
},
|
|
41906
|
+
{
|
|
41907
|
+
"kind": "method",
|
|
41908
|
+
"name": "resetTabIndexAndSetFocusAfterUpdate",
|
|
41909
|
+
"privacy": "private",
|
|
41910
|
+
"return": {
|
|
41911
|
+
"type": {
|
|
41912
|
+
"text": "void"
|
|
41913
|
+
}
|
|
41914
|
+
},
|
|
41915
|
+
"parameters": [
|
|
41916
|
+
{
|
|
41917
|
+
"name": "newOptionIndex",
|
|
41918
|
+
"type": {
|
|
41919
|
+
"text": "number"
|
|
41920
|
+
}
|
|
41921
|
+
}
|
|
41922
|
+
]
|
|
41923
|
+
},
|
|
41924
|
+
{
|
|
41925
|
+
"kind": "method",
|
|
41926
|
+
"name": "handleSelectedOptionByKeyInput",
|
|
41927
|
+
"privacy": "private",
|
|
41928
|
+
"return": {
|
|
41929
|
+
"type": {
|
|
41930
|
+
"text": "void"
|
|
41931
|
+
}
|
|
41932
|
+
},
|
|
41933
|
+
"parameters": [
|
|
41934
|
+
{
|
|
41935
|
+
"name": "searchKey",
|
|
41936
|
+
"type": {
|
|
41937
|
+
"text": "string"
|
|
41938
|
+
}
|
|
41939
|
+
}
|
|
41940
|
+
]
|
|
41941
|
+
},
|
|
41942
|
+
{
|
|
41943
|
+
"kind": "method",
|
|
41944
|
+
"name": "handleKeydownPopover",
|
|
41945
|
+
"privacy": "private",
|
|
41946
|
+
"return": {
|
|
41947
|
+
"type": {
|
|
41948
|
+
"text": "void"
|
|
41949
|
+
}
|
|
41950
|
+
},
|
|
41951
|
+
"parameters": [
|
|
41952
|
+
{
|
|
41953
|
+
"name": "event",
|
|
41954
|
+
"type": {
|
|
41955
|
+
"text": "KeyboardEvent"
|
|
41956
|
+
}
|
|
41957
|
+
}
|
|
41958
|
+
]
|
|
41959
|
+
},
|
|
41960
|
+
{
|
|
41961
|
+
"kind": "field",
|
|
41962
|
+
"name": "itemsStore",
|
|
41963
|
+
"default": "new ElementStore<Option>(this, { isValidItem: this.isValidItem, onStoreUpdate: this.onStoreUpdate, })"
|
|
41830
41964
|
},
|
|
41831
41965
|
{
|
|
41832
41966
|
"kind": "method",
|