@momentum-design/components 0.123.3 → 0.123.5
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 +1 -3
- package/dist/browser/index.js.map +2 -2
- package/dist/components/dialog/dialog.styles.js +0 -2
- package/dist/components/select/select.component.js +7 -2
- package/dist/custom-elements.json +1502 -1502
- package/dist/react/index.d.ts +4 -4
- package/dist/react/index.js +4 -4
- package/package.json +1 -1
|
@@ -4,214 +4,169 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "components/
|
|
7
|
+
"path": "components/accordion/accordion.component.js",
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "An accordion
|
|
12
|
-
"name": "
|
|
11
|
+
"description": "An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n- Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n- Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.",
|
|
12
|
+
"name": "Accordion",
|
|
13
13
|
"cssProperties": [
|
|
14
14
|
{
|
|
15
|
-
"description": "The border color of the
|
|
16
|
-
"name": "--mdc-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
"description": "The default slot can contain the `accordion` or `accordionbutton` components.",
|
|
22
|
-
"name": "default"
|
|
23
|
-
}
|
|
24
|
-
],
|
|
25
|
-
"members": [
|
|
26
|
-
{
|
|
27
|
-
"kind": "field",
|
|
28
|
-
"name": "size",
|
|
29
|
-
"type": {
|
|
30
|
-
"text": "Size"
|
|
31
|
-
},
|
|
32
|
-
"description": "The size of the accordion item.",
|
|
33
|
-
"default": "'small'",
|
|
34
|
-
"attribute": "size",
|
|
35
|
-
"reflects": true
|
|
36
|
-
},
|
|
37
|
-
{
|
|
38
|
-
"kind": "field",
|
|
39
|
-
"name": "variant",
|
|
40
|
-
"type": {
|
|
41
|
-
"text": "Variant"
|
|
42
|
-
},
|
|
43
|
-
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
44
|
-
"default": "'stacked'",
|
|
45
|
-
"attribute": "variant",
|
|
46
|
-
"reflects": true
|
|
15
|
+
"description": "The border color of the accordion.",
|
|
16
|
+
"name": "--mdc-accordionbutton-border-color",
|
|
17
|
+
"inheritedFrom": {
|
|
18
|
+
"name": "AccordionButton",
|
|
19
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
20
|
+
}
|
|
47
21
|
},
|
|
48
22
|
{
|
|
49
|
-
"
|
|
50
|
-
"name": "
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
56
|
-
"attribute": "allow-multiple",
|
|
57
|
-
"reflects": true
|
|
23
|
+
"description": "The hover color of the accordion.",
|
|
24
|
+
"name": "--mdc-accordionbutton-hover-color",
|
|
25
|
+
"inheritedFrom": {
|
|
26
|
+
"name": "AccordionButton",
|
|
27
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
28
|
+
}
|
|
58
29
|
},
|
|
59
30
|
{
|
|
60
|
-
"
|
|
61
|
-
"name": "
|
|
62
|
-
"
|
|
63
|
-
|
|
64
|
-
"
|
|
65
|
-
|
|
66
|
-
}
|
|
67
|
-
},
|
|
68
|
-
"parameters": [
|
|
69
|
-
{
|
|
70
|
-
"name": "event",
|
|
71
|
-
"type": {
|
|
72
|
-
"text": "Event"
|
|
73
|
-
},
|
|
74
|
-
"description": "The event object from the 'shown' event."
|
|
75
|
-
}
|
|
76
|
-
],
|
|
77
|
-
"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."
|
|
31
|
+
"description": "The active color of the accordion.",
|
|
32
|
+
"name": "--mdc-accordionbutton-active-color",
|
|
33
|
+
"inheritedFrom": {
|
|
34
|
+
"name": "AccordionButton",
|
|
35
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
36
|
+
}
|
|
78
37
|
},
|
|
79
38
|
{
|
|
80
|
-
"
|
|
81
|
-
"name": "
|
|
82
|
-
"
|
|
83
|
-
|
|
84
|
-
"
|
|
85
|
-
|
|
86
|
-
}
|
|
87
|
-
},
|
|
88
|
-
"parameters": [
|
|
89
|
-
{
|
|
90
|
-
"name": "attributeName",
|
|
91
|
-
"type": {
|
|
92
|
-
"text": "string"
|
|
93
|
-
},
|
|
94
|
-
"description": "The name of the attribute to set."
|
|
95
|
-
},
|
|
96
|
-
{
|
|
97
|
-
"name": "attributeValue",
|
|
98
|
-
"type": {
|
|
99
|
-
"text": "string"
|
|
100
|
-
},
|
|
101
|
-
"description": "The value to set the attribute to."
|
|
102
|
-
}
|
|
103
|
-
],
|
|
104
|
-
"description": "Sets the given attribute on all child accordion or accordionbutton components."
|
|
39
|
+
"description": "The disabled color of the accordion.",
|
|
40
|
+
"name": "--mdc-accordionbutton-disabled-color",
|
|
41
|
+
"inheritedFrom": {
|
|
42
|
+
"name": "AccordionButton",
|
|
43
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
44
|
+
}
|
|
105
45
|
}
|
|
106
46
|
],
|
|
107
|
-
"
|
|
47
|
+
"cssParts": [
|
|
108
48
|
{
|
|
109
|
-
"
|
|
110
|
-
"
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
"fieldName": "size"
|
|
49
|
+
"description": "The body section of the accordion.",
|
|
50
|
+
"name": "body-section",
|
|
51
|
+
"inheritedFrom": {
|
|
52
|
+
"name": "AccordionButton",
|
|
53
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
54
|
+
}
|
|
116
55
|
},
|
|
117
56
|
{
|
|
118
|
-
"
|
|
119
|
-
"
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
"fieldName": "variant"
|
|
57
|
+
"description": "The header section of the accordion.",
|
|
58
|
+
"name": "header-section",
|
|
59
|
+
"inheritedFrom": {
|
|
60
|
+
"name": "AccordionButton",
|
|
61
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
62
|
+
}
|
|
125
63
|
},
|
|
126
64
|
{
|
|
127
|
-
"
|
|
128
|
-
"
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
}
|
|
135
|
-
],
|
|
136
|
-
"superclass": {
|
|
137
|
-
"name": "Component",
|
|
138
|
-
"module": "/src/models"
|
|
139
|
-
},
|
|
140
|
-
"tagName": "mdc-accordiongroup",
|
|
141
|
-
"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 */",
|
|
142
|
-
"customElement": true
|
|
143
|
-
}
|
|
144
|
-
],
|
|
145
|
-
"exports": [
|
|
146
|
-
{
|
|
147
|
-
"kind": "js",
|
|
148
|
-
"name": "default",
|
|
149
|
-
"declaration": {
|
|
150
|
-
"name": "AccordionGroup",
|
|
151
|
-
"module": "components/accordiongroup/accordiongroup.component.js"
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
]
|
|
155
|
-
},
|
|
156
|
-
{
|
|
157
|
-
"kind": "javascript-module",
|
|
158
|
-
"path": "components/accordionbutton/accordionbutton.component.js",
|
|
159
|
-
"declarations": [
|
|
160
|
-
{
|
|
161
|
-
"kind": "class",
|
|
162
|
-
"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.",
|
|
163
|
-
"name": "AccordionButton",
|
|
164
|
-
"cssProperties": [
|
|
65
|
+
"description": "The leading header of the accordion.",
|
|
66
|
+
"name": "leading-header",
|
|
67
|
+
"inheritedFrom": {
|
|
68
|
+
"name": "AccordionButton",
|
|
69
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
70
|
+
}
|
|
71
|
+
},
|
|
165
72
|
{
|
|
166
|
-
"description": "The
|
|
167
|
-
"name": "
|
|
73
|
+
"description": "The trailing header of the accordion.",
|
|
74
|
+
"name": "trailing-header",
|
|
75
|
+
"inheritedFrom": {
|
|
76
|
+
"name": "AccordionButton",
|
|
77
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
78
|
+
}
|
|
168
79
|
},
|
|
169
80
|
{
|
|
170
|
-
"description": "The
|
|
171
|
-
"name": "
|
|
81
|
+
"description": "The trailing header button of the accordion.",
|
|
82
|
+
"name": "trailing-header__button"
|
|
172
83
|
},
|
|
173
84
|
{
|
|
174
|
-
"description": "The
|
|
175
|
-
"name": "
|
|
85
|
+
"description": "The header button section of the accordion button.",
|
|
86
|
+
"name": "header-button-section",
|
|
87
|
+
"inheritedFrom": {
|
|
88
|
+
"name": "AccordionButton",
|
|
89
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
90
|
+
}
|
|
176
91
|
},
|
|
177
92
|
{
|
|
178
|
-
"description": "The
|
|
179
|
-
"name": "
|
|
93
|
+
"description": "The trailing header icon of the accordion button.",
|
|
94
|
+
"name": "trailing-header__icon",
|
|
95
|
+
"inheritedFrom": {
|
|
96
|
+
"name": "AccordionButton",
|
|
97
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
98
|
+
}
|
|
180
99
|
}
|
|
181
100
|
],
|
|
182
|
-
"
|
|
101
|
+
"slots": [
|
|
183
102
|
{
|
|
184
|
-
"description": "The
|
|
185
|
-
"name": "
|
|
103
|
+
"description": "The leading controls slot of the accordion on the header section.",
|
|
104
|
+
"name": "leading-controls"
|
|
186
105
|
},
|
|
187
106
|
{
|
|
188
|
-
"description": "The
|
|
189
|
-
"name": "
|
|
107
|
+
"description": "The trailing controls slot of the accordion on the header section.",
|
|
108
|
+
"name": "trailing-controls"
|
|
190
109
|
},
|
|
191
110
|
{
|
|
192
|
-
"description": "The
|
|
193
|
-
"name": "
|
|
194
|
-
|
|
111
|
+
"description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
|
|
112
|
+
"name": "default",
|
|
113
|
+
"inheritedFrom": {
|
|
114
|
+
"name": "AccordionButton",
|
|
115
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
],
|
|
119
|
+
"members": [
|
|
195
120
|
{
|
|
196
|
-
"
|
|
197
|
-
"name": "
|
|
121
|
+
"kind": "field",
|
|
122
|
+
"name": "openButtonAriaLabel",
|
|
123
|
+
"type": {
|
|
124
|
+
"text": "string | undefined"
|
|
125
|
+
},
|
|
126
|
+
"description": "Aria-label attribute for the trigger button when accordion is collapsed.",
|
|
127
|
+
"attribute": "open-button-aria-label",
|
|
128
|
+
"reflects": true
|
|
198
129
|
},
|
|
199
130
|
{
|
|
200
|
-
"
|
|
201
|
-
"name": "
|
|
131
|
+
"kind": "field",
|
|
132
|
+
"name": "closeButtonAriaLabel",
|
|
133
|
+
"type": {
|
|
134
|
+
"text": "string | undefined"
|
|
135
|
+
},
|
|
136
|
+
"description": "Aria-label attribute for the trigger button when accordion is expanded.",
|
|
137
|
+
"attribute": "close-button-aria-label",
|
|
138
|
+
"reflects": true
|
|
202
139
|
},
|
|
203
140
|
{
|
|
204
|
-
"
|
|
205
|
-
"name": "
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
141
|
+
"kind": "method",
|
|
142
|
+
"name": "renderHeader",
|
|
143
|
+
"privacy": "protected",
|
|
144
|
+
"return": {
|
|
145
|
+
"type": {
|
|
146
|
+
"text": ""
|
|
147
|
+
}
|
|
148
|
+
},
|
|
149
|
+
"description": "Renders the header section of the accordion.\nThis includes the leading icon, text and controls, and the trailing controls.\nThe trailing controls include the expand/collapse button.\nThe button is disabled if the accordion is disabled.\nThe button is also given the aria-controls attribute set to the id of the body section.\nThe button is also given the aria-expanded attribute set to the expanded state of the accordion.\nThe prefix icon of the button is set to the expanded state of the accordion.",
|
|
150
|
+
"inheritedFrom": {
|
|
151
|
+
"name": "AccordionButton",
|
|
152
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
153
|
+
}
|
|
154
|
+
},
|
|
209
155
|
{
|
|
210
|
-
"
|
|
211
|
-
"name": "
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
156
|
+
"kind": "field",
|
|
157
|
+
"name": "disabled",
|
|
158
|
+
"type": {
|
|
159
|
+
"text": "boolean | undefined"
|
|
160
|
+
},
|
|
161
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
162
|
+
"default": "undefined",
|
|
163
|
+
"attribute": "disabled",
|
|
164
|
+
"reflects": true,
|
|
165
|
+
"inheritedFrom": {
|
|
166
|
+
"name": "DisabledMixin",
|
|
167
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
168
|
+
}
|
|
169
|
+
},
|
|
215
170
|
{
|
|
216
171
|
"kind": "field",
|
|
217
172
|
"name": "size",
|
|
@@ -221,7 +176,11 @@
|
|
|
221
176
|
"description": "The size of the accordion item.",
|
|
222
177
|
"default": "'small'",
|
|
223
178
|
"attribute": "size",
|
|
224
|
-
"reflects": true
|
|
179
|
+
"reflects": true,
|
|
180
|
+
"inheritedFrom": {
|
|
181
|
+
"name": "AccordionButton",
|
|
182
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
183
|
+
}
|
|
225
184
|
},
|
|
226
185
|
{
|
|
227
186
|
"kind": "field",
|
|
@@ -232,7 +191,11 @@
|
|
|
232
191
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
233
192
|
"default": "'default'",
|
|
234
193
|
"attribute": "variant",
|
|
235
|
-
"reflects": true
|
|
194
|
+
"reflects": true,
|
|
195
|
+
"inheritedFrom": {
|
|
196
|
+
"name": "AccordionButton",
|
|
197
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
198
|
+
}
|
|
236
199
|
},
|
|
237
200
|
{
|
|
238
201
|
"kind": "field",
|
|
@@ -243,7 +206,11 @@
|
|
|
243
206
|
"description": "The aria level of the accordion component.",
|
|
244
207
|
"default": "3",
|
|
245
208
|
"attribute": "data-aria-level",
|
|
246
|
-
"reflects": true
|
|
209
|
+
"reflects": true,
|
|
210
|
+
"inheritedFrom": {
|
|
211
|
+
"name": "AccordionButton",
|
|
212
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
213
|
+
}
|
|
247
214
|
},
|
|
248
215
|
{
|
|
249
216
|
"kind": "field",
|
|
@@ -254,7 +221,11 @@
|
|
|
254
221
|
"description": "The visibility of the accordion button.",
|
|
255
222
|
"default": "false",
|
|
256
223
|
"attribute": "expanded",
|
|
257
|
-
"reflects": true
|
|
224
|
+
"reflects": true,
|
|
225
|
+
"inheritedFrom": {
|
|
226
|
+
"name": "AccordionButton",
|
|
227
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
228
|
+
}
|
|
258
229
|
},
|
|
259
230
|
{
|
|
260
231
|
"kind": "field",
|
|
@@ -264,7 +235,11 @@
|
|
|
264
235
|
},
|
|
265
236
|
"description": "The header text of the accordion item.",
|
|
266
237
|
"attribute": "header-text",
|
|
267
|
-
"reflects": true
|
|
238
|
+
"reflects": true,
|
|
239
|
+
"inheritedFrom": {
|
|
240
|
+
"name": "AccordionButton",
|
|
241
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
242
|
+
}
|
|
268
243
|
},
|
|
269
244
|
{
|
|
270
245
|
"kind": "field",
|
|
@@ -273,7 +248,11 @@
|
|
|
273
248
|
"text": "IconNames | undefined"
|
|
274
249
|
},
|
|
275
250
|
"description": "The leading icon that is displayed before the header text.",
|
|
276
|
-
"attribute": "prefix-icon"
|
|
251
|
+
"attribute": "prefix-icon",
|
|
252
|
+
"inheritedFrom": {
|
|
253
|
+
"name": "AccordionButton",
|
|
254
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
255
|
+
}
|
|
277
256
|
},
|
|
278
257
|
{
|
|
279
258
|
"kind": "method",
|
|
@@ -284,7 +263,11 @@
|
|
|
284
263
|
"text": "void"
|
|
285
264
|
}
|
|
286
265
|
},
|
|
287
|
-
"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."
|
|
266
|
+
"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.",
|
|
267
|
+
"inheritedFrom": {
|
|
268
|
+
"name": "AccordionButton",
|
|
269
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
270
|
+
}
|
|
288
271
|
},
|
|
289
272
|
{
|
|
290
273
|
"kind": "method",
|
|
@@ -295,7 +278,11 @@
|
|
|
295
278
|
"text": "void"
|
|
296
279
|
}
|
|
297
280
|
},
|
|
298
|
-
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
|
|
281
|
+
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state.",
|
|
282
|
+
"inheritedFrom": {
|
|
283
|
+
"name": "AccordionButton",
|
|
284
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
285
|
+
}
|
|
299
286
|
},
|
|
300
287
|
{
|
|
301
288
|
"kind": "method",
|
|
@@ -315,7 +302,11 @@
|
|
|
315
302
|
"description": "The KeyboardEvent fired."
|
|
316
303
|
}
|
|
317
304
|
],
|
|
318
|
-
"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."
|
|
305
|
+
"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.",
|
|
306
|
+
"inheritedFrom": {
|
|
307
|
+
"name": "AccordionButton",
|
|
308
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
309
|
+
}
|
|
319
310
|
},
|
|
320
311
|
{
|
|
321
312
|
"kind": "method",
|
|
@@ -334,7 +325,11 @@
|
|
|
334
325
|
"text": "IconNames"
|
|
335
326
|
}
|
|
336
327
|
}
|
|
337
|
-
]
|
|
328
|
+
],
|
|
329
|
+
"inheritedFrom": {
|
|
330
|
+
"name": "AccordionButton",
|
|
331
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
332
|
+
}
|
|
338
333
|
},
|
|
339
334
|
{
|
|
340
335
|
"kind": "method",
|
|
@@ -344,16 +339,10 @@
|
|
|
344
339
|
"type": {
|
|
345
340
|
"text": "TemplateResult | typeof nothing"
|
|
346
341
|
}
|
|
347
|
-
}
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
"name": "renderHeader",
|
|
352
|
-
"privacy": "protected",
|
|
353
|
-
"return": {
|
|
354
|
-
"type": {
|
|
355
|
-
"text": "TemplateResult"
|
|
356
|
-
}
|
|
342
|
+
},
|
|
343
|
+
"inheritedFrom": {
|
|
344
|
+
"name": "AccordionButton",
|
|
345
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
357
346
|
}
|
|
358
347
|
},
|
|
359
348
|
{
|
|
@@ -365,7 +354,11 @@
|
|
|
365
354
|
"text": ""
|
|
366
355
|
}
|
|
367
356
|
},
|
|
368
|
-
"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."
|
|
357
|
+
"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.",
|
|
358
|
+
"inheritedFrom": {
|
|
359
|
+
"name": "AccordionButton",
|
|
360
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
361
|
+
}
|
|
369
362
|
},
|
|
370
363
|
{
|
|
371
364
|
"kind": "method",
|
|
@@ -375,32 +368,54 @@
|
|
|
375
368
|
"type": {
|
|
376
369
|
"text": "TemplateResult | typeof nothing"
|
|
377
370
|
}
|
|
371
|
+
},
|
|
372
|
+
"inheritedFrom": {
|
|
373
|
+
"name": "AccordionButton",
|
|
374
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
378
375
|
}
|
|
376
|
+
}
|
|
377
|
+
],
|
|
378
|
+
"events": [
|
|
379
|
+
{
|
|
380
|
+
"description": "(React: onShown) This event is triggered when the accordion is expanded.",
|
|
381
|
+
"name": "shown",
|
|
382
|
+
"reactName": "onShown",
|
|
383
|
+
"inheritedFrom": {
|
|
384
|
+
"name": "AccordionButton",
|
|
385
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
386
|
+
}
|
|
387
|
+
}
|
|
388
|
+
],
|
|
389
|
+
"attributes": [
|
|
390
|
+
{
|
|
391
|
+
"name": "open-button-aria-label",
|
|
392
|
+
"type": {
|
|
393
|
+
"text": "string | undefined"
|
|
394
|
+
},
|
|
395
|
+
"description": "Aria-label attribute for the trigger button when accordion is collapsed.",
|
|
396
|
+
"fieldName": "openButtonAriaLabel"
|
|
397
|
+
},
|
|
398
|
+
{
|
|
399
|
+
"name": "close-button-aria-label",
|
|
400
|
+
"type": {
|
|
401
|
+
"text": "string | undefined"
|
|
402
|
+
},
|
|
403
|
+
"description": "Aria-label attribute for the trigger button when accordion is expanded.",
|
|
404
|
+
"fieldName": "closeButtonAriaLabel"
|
|
379
405
|
},
|
|
380
406
|
{
|
|
381
|
-
"kind": "field",
|
|
382
407
|
"name": "disabled",
|
|
383
408
|
"type": {
|
|
384
409
|
"text": "boolean | undefined"
|
|
385
410
|
},
|
|
386
411
|
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
387
412
|
"default": "undefined",
|
|
388
|
-
"
|
|
389
|
-
"reflects": true,
|
|
413
|
+
"fieldName": "disabled",
|
|
390
414
|
"inheritedFrom": {
|
|
391
415
|
"name": "DisabledMixin",
|
|
392
|
-
"module": "utils/mixins/DisabledMixin.
|
|
416
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
393
417
|
}
|
|
394
|
-
}
|
|
395
|
-
],
|
|
396
|
-
"events": [
|
|
397
|
-
{
|
|
398
|
-
"description": "(React: onShown) This event is triggered when the accordion button is expanded.",
|
|
399
|
-
"name": "shown",
|
|
400
|
-
"reactName": "onShown"
|
|
401
|
-
}
|
|
402
|
-
],
|
|
403
|
-
"attributes": [
|
|
418
|
+
},
|
|
404
419
|
{
|
|
405
420
|
"name": "size",
|
|
406
421
|
"type": {
|
|
@@ -408,7 +423,11 @@
|
|
|
408
423
|
},
|
|
409
424
|
"description": "The size of the accordion item.",
|
|
410
425
|
"default": "'small'",
|
|
411
|
-
"fieldName": "size"
|
|
426
|
+
"fieldName": "size",
|
|
427
|
+
"inheritedFrom": {
|
|
428
|
+
"name": "AccordionButton",
|
|
429
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
430
|
+
}
|
|
412
431
|
},
|
|
413
432
|
{
|
|
414
433
|
"name": "variant",
|
|
@@ -417,7 +436,11 @@
|
|
|
417
436
|
},
|
|
418
437
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
419
438
|
"default": "'default'",
|
|
420
|
-
"fieldName": "variant"
|
|
439
|
+
"fieldName": "variant",
|
|
440
|
+
"inheritedFrom": {
|
|
441
|
+
"name": "AccordionButton",
|
|
442
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
443
|
+
}
|
|
421
444
|
},
|
|
422
445
|
{
|
|
423
446
|
"name": "data-aria-level",
|
|
@@ -426,7 +449,11 @@
|
|
|
426
449
|
},
|
|
427
450
|
"description": "The aria level of the accordion component.",
|
|
428
451
|
"default": "3",
|
|
429
|
-
"fieldName": "dataAriaLevel"
|
|
452
|
+
"fieldName": "dataAriaLevel",
|
|
453
|
+
"inheritedFrom": {
|
|
454
|
+
"name": "AccordionButton",
|
|
455
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
456
|
+
}
|
|
430
457
|
},
|
|
431
458
|
{
|
|
432
459
|
"name": "expanded",
|
|
@@ -435,7 +462,11 @@
|
|
|
435
462
|
},
|
|
436
463
|
"description": "The visibility of the accordion button.",
|
|
437
464
|
"default": "false",
|
|
438
|
-
"fieldName": "expanded"
|
|
465
|
+
"fieldName": "expanded",
|
|
466
|
+
"inheritedFrom": {
|
|
467
|
+
"name": "AccordionButton",
|
|
468
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
469
|
+
}
|
|
439
470
|
},
|
|
440
471
|
{
|
|
441
472
|
"name": "header-text",
|
|
@@ -443,7 +474,11 @@
|
|
|
443
474
|
"text": "string | undefined"
|
|
444
475
|
},
|
|
445
476
|
"description": "The header text of the accordion item.",
|
|
446
|
-
"fieldName": "headerText"
|
|
477
|
+
"fieldName": "headerText",
|
|
478
|
+
"inheritedFrom": {
|
|
479
|
+
"name": "AccordionButton",
|
|
480
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
481
|
+
}
|
|
447
482
|
},
|
|
448
483
|
{
|
|
449
484
|
"name": "prefix-icon",
|
|
@@ -451,34 +486,19 @@
|
|
|
451
486
|
"text": "IconNames | undefined"
|
|
452
487
|
},
|
|
453
488
|
"description": "The leading icon that is displayed before the header text.",
|
|
454
|
-
"fieldName": "prefixIcon"
|
|
455
|
-
},
|
|
456
|
-
{
|
|
457
|
-
"name": "disabled",
|
|
458
|
-
"type": {
|
|
459
|
-
"text": "boolean | undefined"
|
|
460
|
-
},
|
|
461
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
462
|
-
"default": "undefined",
|
|
463
|
-
"fieldName": "disabled",
|
|
489
|
+
"fieldName": "prefixIcon",
|
|
464
490
|
"inheritedFrom": {
|
|
465
|
-
"name": "
|
|
466
|
-
"module": "src/
|
|
491
|
+
"name": "AccordionButton",
|
|
492
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
467
493
|
}
|
|
468
494
|
}
|
|
469
495
|
],
|
|
470
|
-
"mixins": [
|
|
471
|
-
{
|
|
472
|
-
"name": "DisabledMixin",
|
|
473
|
-
"module": "/src/utils/mixins/DisabledMixin"
|
|
474
|
-
}
|
|
475
|
-
],
|
|
476
496
|
"superclass": {
|
|
477
|
-
"name": "
|
|
478
|
-
"module": "/src/
|
|
497
|
+
"name": "AccordionButton",
|
|
498
|
+
"module": "/src/components/accordionbutton/accordionbutton.component"
|
|
479
499
|
},
|
|
480
|
-
"tagName": "mdc-
|
|
481
|
-
"jsDoc": "/**\n * An accordion
|
|
500
|
+
"tagName": "mdc-accordion",
|
|
501
|
+
"jsDoc": "/**\n * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.\n *\n * @tagname mdc-accordion\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot leading-controls - The leading controls slot of the accordion on the header section.\n * @slot trailing-controls - The trailing controls slot of the accordion on the header section.\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.\n *\n * @csspart body-section - The body section of the accordion.\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n */",
|
|
482
502
|
"customElement": true
|
|
483
503
|
}
|
|
484
504
|
],
|
|
@@ -487,177 +507,71 @@
|
|
|
487
507
|
"kind": "js",
|
|
488
508
|
"name": "default",
|
|
489
509
|
"declaration": {
|
|
490
|
-
"name": "
|
|
491
|
-
"module": "components/
|
|
510
|
+
"name": "Accordion",
|
|
511
|
+
"module": "components/accordion/accordion.component.js"
|
|
492
512
|
}
|
|
493
513
|
}
|
|
494
514
|
]
|
|
495
515
|
},
|
|
496
516
|
{
|
|
497
517
|
"kind": "javascript-module",
|
|
498
|
-
"path": "components/
|
|
518
|
+
"path": "components/accordionbutton/accordionbutton.component.js",
|
|
499
519
|
"declarations": [
|
|
500
520
|
{
|
|
501
521
|
"kind": "class",
|
|
502
|
-
"description": "An accordion contains a header and body section with
|
|
503
|
-
"name": "
|
|
522
|
+
"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.",
|
|
523
|
+
"name": "AccordionButton",
|
|
504
524
|
"cssProperties": [
|
|
505
525
|
{
|
|
506
|
-
"description": "The border color of the accordion.",
|
|
507
|
-
"name": "--mdc-accordionbutton-border-color"
|
|
508
|
-
"inheritedFrom": {
|
|
509
|
-
"name": "AccordionButton",
|
|
510
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
511
|
-
}
|
|
526
|
+
"description": "The border color of the accordion button.",
|
|
527
|
+
"name": "--mdc-accordionbutton-border-color"
|
|
512
528
|
},
|
|
513
529
|
{
|
|
514
|
-
"description": "The hover color of the accordion.",
|
|
515
|
-
"name": "--mdc-accordionbutton-hover-color"
|
|
516
|
-
"inheritedFrom": {
|
|
517
|
-
"name": "AccordionButton",
|
|
518
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
519
|
-
}
|
|
530
|
+
"description": "The hover color of the accordion button.",
|
|
531
|
+
"name": "--mdc-accordionbutton-hover-color"
|
|
520
532
|
},
|
|
521
533
|
{
|
|
522
|
-
"description": "The active color of the accordion.",
|
|
523
|
-
"name": "--mdc-accordionbutton-active-color"
|
|
524
|
-
"inheritedFrom": {
|
|
525
|
-
"name": "AccordionButton",
|
|
526
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
527
|
-
}
|
|
534
|
+
"description": "The active color of the accordion button.",
|
|
535
|
+
"name": "--mdc-accordionbutton-active-color"
|
|
528
536
|
},
|
|
529
537
|
{
|
|
530
|
-
"description": "The disabled color of the accordion.",
|
|
531
|
-
"name": "--mdc-accordionbutton-disabled-color"
|
|
532
|
-
"inheritedFrom": {
|
|
533
|
-
"name": "AccordionButton",
|
|
534
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
535
|
-
}
|
|
538
|
+
"description": "The disabled color of the accordion button.",
|
|
539
|
+
"name": "--mdc-accordionbutton-disabled-color"
|
|
536
540
|
}
|
|
537
541
|
],
|
|
538
542
|
"cssParts": [
|
|
539
543
|
{
|
|
540
|
-
"description": "The body section of the accordion.",
|
|
541
|
-
"name": "body-section"
|
|
542
|
-
"inheritedFrom": {
|
|
543
|
-
"name": "AccordionButton",
|
|
544
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
545
|
-
}
|
|
546
|
-
},
|
|
547
|
-
{
|
|
548
|
-
"description": "The header section of the accordion.",
|
|
549
|
-
"name": "header-section",
|
|
550
|
-
"inheritedFrom": {
|
|
551
|
-
"name": "AccordionButton",
|
|
552
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
553
|
-
}
|
|
544
|
+
"description": "The body section of the accordion button.",
|
|
545
|
+
"name": "body-section"
|
|
554
546
|
},
|
|
555
547
|
{
|
|
556
|
-
"description": "The
|
|
557
|
-
"name": "
|
|
558
|
-
"inheritedFrom": {
|
|
559
|
-
"name": "AccordionButton",
|
|
560
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
561
|
-
}
|
|
548
|
+
"description": "The header button section of the accordion button.",
|
|
549
|
+
"name": "header-button-section"
|
|
562
550
|
},
|
|
563
551
|
{
|
|
564
|
-
"description": "The
|
|
565
|
-
"name": "
|
|
566
|
-
"inheritedFrom": {
|
|
567
|
-
"name": "AccordionButton",
|
|
568
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
569
|
-
}
|
|
552
|
+
"description": "The header section of the accordion button.",
|
|
553
|
+
"name": "header-section"
|
|
570
554
|
},
|
|
571
555
|
{
|
|
572
|
-
"description": "The
|
|
573
|
-
"name": "
|
|
556
|
+
"description": "The leading header of the accordion button.",
|
|
557
|
+
"name": "leading-header"
|
|
574
558
|
},
|
|
575
559
|
{
|
|
576
|
-
"description": "The header
|
|
577
|
-
"name": "header
|
|
578
|
-
"inheritedFrom": {
|
|
579
|
-
"name": "AccordionButton",
|
|
580
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
581
|
-
}
|
|
560
|
+
"description": "The trailing header of the accordion button.",
|
|
561
|
+
"name": "trailing-header"
|
|
582
562
|
},
|
|
583
563
|
{
|
|
584
564
|
"description": "The trailing header icon of the accordion button.",
|
|
585
|
-
"name": "trailing-header__icon"
|
|
586
|
-
"inheritedFrom": {
|
|
587
|
-
"name": "AccordionButton",
|
|
588
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
589
|
-
}
|
|
565
|
+
"name": "trailing-header__icon"
|
|
590
566
|
}
|
|
591
567
|
],
|
|
592
568
|
"slots": [
|
|
593
|
-
{
|
|
594
|
-
"description": "The leading controls slot of the accordion on the header section.",
|
|
595
|
-
"name": "leading-controls"
|
|
596
|
-
},
|
|
597
|
-
{
|
|
598
|
-
"description": "The trailing controls slot of the accordion on the header section.",
|
|
599
|
-
"name": "trailing-controls"
|
|
600
|
-
},
|
|
601
569
|
{
|
|
602
570
|
"description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
|
|
603
|
-
"name": "default"
|
|
604
|
-
"inheritedFrom": {
|
|
605
|
-
"name": "AccordionButton",
|
|
606
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
607
|
-
}
|
|
571
|
+
"name": "default"
|
|
608
572
|
}
|
|
609
573
|
],
|
|
610
574
|
"members": [
|
|
611
|
-
{
|
|
612
|
-
"kind": "field",
|
|
613
|
-
"name": "openButtonAriaLabel",
|
|
614
|
-
"type": {
|
|
615
|
-
"text": "string | undefined"
|
|
616
|
-
},
|
|
617
|
-
"description": "Aria-label attribute for the trigger button when accordion is collapsed.",
|
|
618
|
-
"attribute": "open-button-aria-label",
|
|
619
|
-
"reflects": true
|
|
620
|
-
},
|
|
621
|
-
{
|
|
622
|
-
"kind": "field",
|
|
623
|
-
"name": "closeButtonAriaLabel",
|
|
624
|
-
"type": {
|
|
625
|
-
"text": "string | undefined"
|
|
626
|
-
},
|
|
627
|
-
"description": "Aria-label attribute for the trigger button when accordion is expanded.",
|
|
628
|
-
"attribute": "close-button-aria-label",
|
|
629
|
-
"reflects": true
|
|
630
|
-
},
|
|
631
|
-
{
|
|
632
|
-
"kind": "method",
|
|
633
|
-
"name": "renderHeader",
|
|
634
|
-
"privacy": "protected",
|
|
635
|
-
"return": {
|
|
636
|
-
"type": {
|
|
637
|
-
"text": ""
|
|
638
|
-
}
|
|
639
|
-
},
|
|
640
|
-
"description": "Renders the header section of the accordion.\nThis includes the leading icon, text and controls, and the trailing controls.\nThe trailing controls include the expand/collapse button.\nThe button is disabled if the accordion is disabled.\nThe button is also given the aria-controls attribute set to the id of the body section.\nThe button is also given the aria-expanded attribute set to the expanded state of the accordion.\nThe prefix icon of the button is set to the expanded state of the accordion.",
|
|
641
|
-
"inheritedFrom": {
|
|
642
|
-
"name": "AccordionButton",
|
|
643
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
644
|
-
}
|
|
645
|
-
},
|
|
646
|
-
{
|
|
647
|
-
"kind": "field",
|
|
648
|
-
"name": "disabled",
|
|
649
|
-
"type": {
|
|
650
|
-
"text": "boolean | undefined"
|
|
651
|
-
},
|
|
652
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
653
|
-
"default": "undefined",
|
|
654
|
-
"attribute": "disabled",
|
|
655
|
-
"reflects": true,
|
|
656
|
-
"inheritedFrom": {
|
|
657
|
-
"name": "AccordionButton",
|
|
658
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
659
|
-
}
|
|
660
|
-
},
|
|
661
575
|
{
|
|
662
576
|
"kind": "field",
|
|
663
577
|
"name": "size",
|
|
@@ -667,11 +581,7 @@
|
|
|
667
581
|
"description": "The size of the accordion item.",
|
|
668
582
|
"default": "'small'",
|
|
669
583
|
"attribute": "size",
|
|
670
|
-
"reflects": true
|
|
671
|
-
"inheritedFrom": {
|
|
672
|
-
"name": "AccordionButton",
|
|
673
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
674
|
-
}
|
|
584
|
+
"reflects": true
|
|
675
585
|
},
|
|
676
586
|
{
|
|
677
587
|
"kind": "field",
|
|
@@ -682,11 +592,7 @@
|
|
|
682
592
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
683
593
|
"default": "'default'",
|
|
684
594
|
"attribute": "variant",
|
|
685
|
-
"reflects": true
|
|
686
|
-
"inheritedFrom": {
|
|
687
|
-
"name": "AccordionButton",
|
|
688
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
689
|
-
}
|
|
595
|
+
"reflects": true
|
|
690
596
|
},
|
|
691
597
|
{
|
|
692
598
|
"kind": "field",
|
|
@@ -697,11 +603,7 @@
|
|
|
697
603
|
"description": "The aria level of the accordion component.",
|
|
698
604
|
"default": "3",
|
|
699
605
|
"attribute": "data-aria-level",
|
|
700
|
-
"reflects": true
|
|
701
|
-
"inheritedFrom": {
|
|
702
|
-
"name": "AccordionButton",
|
|
703
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
704
|
-
}
|
|
606
|
+
"reflects": true
|
|
705
607
|
},
|
|
706
608
|
{
|
|
707
609
|
"kind": "field",
|
|
@@ -712,11 +614,7 @@
|
|
|
712
614
|
"description": "The visibility of the accordion button.",
|
|
713
615
|
"default": "false",
|
|
714
616
|
"attribute": "expanded",
|
|
715
|
-
"reflects": true
|
|
716
|
-
"inheritedFrom": {
|
|
717
|
-
"name": "AccordionButton",
|
|
718
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
719
|
-
}
|
|
617
|
+
"reflects": true
|
|
720
618
|
},
|
|
721
619
|
{
|
|
722
620
|
"kind": "field",
|
|
@@ -726,11 +624,7 @@
|
|
|
726
624
|
},
|
|
727
625
|
"description": "The header text of the accordion item.",
|
|
728
626
|
"attribute": "header-text",
|
|
729
|
-
"reflects": true
|
|
730
|
-
"inheritedFrom": {
|
|
731
|
-
"name": "AccordionButton",
|
|
732
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
733
|
-
}
|
|
627
|
+
"reflects": true
|
|
734
628
|
},
|
|
735
629
|
{
|
|
736
630
|
"kind": "field",
|
|
@@ -739,11 +633,7 @@
|
|
|
739
633
|
"text": "IconNames | undefined"
|
|
740
634
|
},
|
|
741
635
|
"description": "The leading icon that is displayed before the header text.",
|
|
742
|
-
"attribute": "prefix-icon"
|
|
743
|
-
"inheritedFrom": {
|
|
744
|
-
"name": "AccordionButton",
|
|
745
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
746
|
-
}
|
|
636
|
+
"attribute": "prefix-icon"
|
|
747
637
|
},
|
|
748
638
|
{
|
|
749
639
|
"kind": "method",
|
|
@@ -754,11 +644,7 @@
|
|
|
754
644
|
"text": "void"
|
|
755
645
|
}
|
|
756
646
|
},
|
|
757
|
-
"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."
|
|
758
|
-
"inheritedFrom": {
|
|
759
|
-
"name": "AccordionButton",
|
|
760
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
761
|
-
}
|
|
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."
|
|
762
648
|
},
|
|
763
649
|
{
|
|
764
650
|
"kind": "method",
|
|
@@ -769,11 +655,7 @@
|
|
|
769
655
|
"text": "void"
|
|
770
656
|
}
|
|
771
657
|
},
|
|
772
|
-
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
|
|
773
|
-
"inheritedFrom": {
|
|
774
|
-
"name": "AccordionButton",
|
|
775
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
776
|
-
}
|
|
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."
|
|
777
659
|
},
|
|
778
660
|
{
|
|
779
661
|
"kind": "method",
|
|
@@ -793,11 +675,7 @@
|
|
|
793
675
|
"description": "The KeyboardEvent fired."
|
|
794
676
|
}
|
|
795
677
|
],
|
|
796
|
-
"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."
|
|
797
|
-
"inheritedFrom": {
|
|
798
|
-
"name": "AccordionButton",
|
|
799
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
800
|
-
}
|
|
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."
|
|
801
679
|
},
|
|
802
680
|
{
|
|
803
681
|
"kind": "method",
|
|
@@ -816,11 +694,7 @@
|
|
|
816
694
|
"text": "IconNames"
|
|
817
695
|
}
|
|
818
696
|
}
|
|
819
|
-
]
|
|
820
|
-
"inheritedFrom": {
|
|
821
|
-
"name": "AccordionButton",
|
|
822
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
823
|
-
}
|
|
697
|
+
]
|
|
824
698
|
},
|
|
825
699
|
{
|
|
826
700
|
"kind": "method",
|
|
@@ -830,10 +704,16 @@
|
|
|
830
704
|
"type": {
|
|
831
705
|
"text": "TemplateResult | typeof nothing"
|
|
832
706
|
}
|
|
833
|
-
}
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
707
|
+
}
|
|
708
|
+
},
|
|
709
|
+
{
|
|
710
|
+
"kind": "method",
|
|
711
|
+
"name": "renderHeader",
|
|
712
|
+
"privacy": "protected",
|
|
713
|
+
"return": {
|
|
714
|
+
"type": {
|
|
715
|
+
"text": "TemplateResult"
|
|
716
|
+
}
|
|
837
717
|
}
|
|
838
718
|
},
|
|
839
719
|
{
|
|
@@ -845,11 +725,7 @@
|
|
|
845
725
|
"text": ""
|
|
846
726
|
}
|
|
847
727
|
},
|
|
848
|
-
"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."
|
|
849
|
-
"inheritedFrom": {
|
|
850
|
-
"name": "AccordionButton",
|
|
851
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
852
|
-
}
|
|
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."
|
|
853
729
|
},
|
|
854
730
|
{
|
|
855
731
|
"kind": "method",
|
|
@@ -859,40 +735,83 @@
|
|
|
859
735
|
"type": {
|
|
860
736
|
"text": "TemplateResult | typeof nothing"
|
|
861
737
|
}
|
|
738
|
+
}
|
|
739
|
+
},
|
|
740
|
+
{
|
|
741
|
+
"kind": "field",
|
|
742
|
+
"name": "disabled",
|
|
743
|
+
"type": {
|
|
744
|
+
"text": "boolean | undefined"
|
|
862
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,
|
|
863
750
|
"inheritedFrom": {
|
|
864
|
-
"name": "
|
|
865
|
-
"module": "
|
|
751
|
+
"name": "DisabledMixin",
|
|
752
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
866
753
|
}
|
|
867
754
|
}
|
|
868
755
|
],
|
|
869
756
|
"events": [
|
|
870
757
|
{
|
|
871
|
-
"description": "(React: onShown) This event is triggered when the accordion is expanded.",
|
|
758
|
+
"description": "(React: onShown) This event is triggered when the accordion button is expanded.",
|
|
872
759
|
"name": "shown",
|
|
873
|
-
"reactName": "onShown"
|
|
874
|
-
"inheritedFrom": {
|
|
875
|
-
"name": "AccordionButton",
|
|
876
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
877
|
-
}
|
|
760
|
+
"reactName": "onShown"
|
|
878
761
|
}
|
|
879
762
|
],
|
|
880
763
|
"attributes": [
|
|
881
764
|
{
|
|
882
|
-
"name": "
|
|
765
|
+
"name": "size",
|
|
883
766
|
"type": {
|
|
884
|
-
"text": "
|
|
767
|
+
"text": "Size"
|
|
885
768
|
},
|
|
886
|
-
"description": "
|
|
887
|
-
"
|
|
769
|
+
"description": "The size of the accordion item.",
|
|
770
|
+
"default": "'small'",
|
|
771
|
+
"fieldName": "size"
|
|
888
772
|
},
|
|
889
773
|
{
|
|
890
|
-
"name": "
|
|
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",
|
|
891
802
|
"type": {
|
|
892
803
|
"text": "string | undefined"
|
|
893
804
|
},
|
|
894
|
-
"description": "
|
|
895
|
-
"fieldName": "
|
|
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"
|
|
896
815
|
},
|
|
897
816
|
{
|
|
898
817
|
"name": "disabled",
|
|
@@ -903,93 +822,174 @@
|
|
|
903
822
|
"default": "undefined",
|
|
904
823
|
"fieldName": "disabled",
|
|
905
824
|
"inheritedFrom": {
|
|
906
|
-
"name": "
|
|
907
|
-
"module": "src/
|
|
825
|
+
"name": "DisabledMixin",
|
|
826
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
908
827
|
}
|
|
909
|
-
}
|
|
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": [
|
|
910
877
|
{
|
|
878
|
+
"kind": "field",
|
|
911
879
|
"name": "size",
|
|
912
880
|
"type": {
|
|
913
881
|
"text": "Size"
|
|
914
882
|
},
|
|
915
883
|
"description": "The size of the accordion item.",
|
|
916
884
|
"default": "'small'",
|
|
917
|
-
"
|
|
918
|
-
"
|
|
919
|
-
"name": "AccordionButton",
|
|
920
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
921
|
-
}
|
|
885
|
+
"attribute": "size",
|
|
886
|
+
"reflects": true
|
|
922
887
|
},
|
|
923
888
|
{
|
|
889
|
+
"kind": "field",
|
|
924
890
|
"name": "variant",
|
|
925
891
|
"type": {
|
|
926
892
|
"text": "Variant"
|
|
927
893
|
},
|
|
928
894
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
929
|
-
"default": "'
|
|
930
|
-
"
|
|
931
|
-
"
|
|
932
|
-
"name": "AccordionButton",
|
|
933
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
934
|
-
}
|
|
895
|
+
"default": "'stacked'",
|
|
896
|
+
"attribute": "variant",
|
|
897
|
+
"reflects": true
|
|
935
898
|
},
|
|
936
899
|
{
|
|
937
|
-
"
|
|
900
|
+
"kind": "field",
|
|
901
|
+
"name": "allowMultiple",
|
|
938
902
|
"type": {
|
|
939
|
-
"text": "
|
|
903
|
+
"text": "boolean"
|
|
940
904
|
},
|
|
941
|
-
"
|
|
942
|
-
"
|
|
943
|
-
"
|
|
944
|
-
"
|
|
945
|
-
"name": "AccordionButton",
|
|
946
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
947
|
-
}
|
|
905
|
+
"default": "false",
|
|
906
|
+
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
907
|
+
"attribute": "allow-multiple",
|
|
908
|
+
"reflects": true
|
|
948
909
|
},
|
|
949
910
|
{
|
|
950
|
-
"
|
|
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",
|
|
951
961
|
"type": {
|
|
952
|
-
"text": "
|
|
962
|
+
"text": "Size"
|
|
953
963
|
},
|
|
954
|
-
"description": "The
|
|
955
|
-
"default": "
|
|
956
|
-
"fieldName": "
|
|
957
|
-
"inheritedFrom": {
|
|
958
|
-
"name": "AccordionButton",
|
|
959
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
960
|
-
}
|
|
964
|
+
"description": "The size of the accordion item.",
|
|
965
|
+
"default": "'small'",
|
|
966
|
+
"fieldName": "size"
|
|
961
967
|
},
|
|
962
968
|
{
|
|
963
|
-
"name": "
|
|
969
|
+
"name": "variant",
|
|
964
970
|
"type": {
|
|
965
|
-
"text": "
|
|
971
|
+
"text": "Variant"
|
|
966
972
|
},
|
|
967
|
-
"description": "The
|
|
968
|
-
"
|
|
969
|
-
"
|
|
970
|
-
"name": "AccordionButton",
|
|
971
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
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"
|
|
973
976
|
},
|
|
974
977
|
{
|
|
975
|
-
"name": "
|
|
978
|
+
"name": "allow-multiple",
|
|
976
979
|
"type": {
|
|
977
|
-
"text": "
|
|
980
|
+
"text": "boolean"
|
|
978
981
|
},
|
|
979
|
-
"
|
|
980
|
-
"
|
|
981
|
-
"
|
|
982
|
-
"name": "AccordionButton",
|
|
983
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
984
|
-
}
|
|
982
|
+
"default": "false",
|
|
983
|
+
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
984
|
+
"fieldName": "allowMultiple"
|
|
985
985
|
}
|
|
986
986
|
],
|
|
987
987
|
"superclass": {
|
|
988
|
-
"name": "
|
|
989
|
-
"module": "/src/
|
|
988
|
+
"name": "Component",
|
|
989
|
+
"module": "/src/models"
|
|
990
990
|
},
|
|
991
|
-
"tagName": "mdc-
|
|
992
|
-
"jsDoc": "/**\n * An accordion
|
|
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
993
|
"customElement": true
|
|
994
994
|
}
|
|
995
995
|
],
|
|
@@ -998,8 +998,8 @@
|
|
|
998
998
|
"kind": "js",
|
|
999
999
|
"name": "default",
|
|
1000
1000
|
"declaration": {
|
|
1001
|
-
"name": "
|
|
1002
|
-
"module": "components/
|
|
1001
|
+
"name": "AccordionGroup",
|
|
1002
|
+
"module": "components/accordiongroup/accordiongroup.component.js"
|
|
1003
1003
|
}
|
|
1004
1004
|
}
|
|
1005
1005
|
]
|
|
@@ -19003,251 +19003,32 @@
|
|
|
19003
19003
|
"description": "File extension of illustrations\n(if Illustration set is `custom-illustrations`, this will be the file extension for illustrations)",
|
|
19004
19004
|
"default": "svg",
|
|
19005
19005
|
"fieldName": "fileExtension"
|
|
19006
|
-
},
|
|
19007
|
-
{
|
|
19008
|
-
"name": "cache-strategy",
|
|
19009
|
-
"type": {
|
|
19010
|
-
"text": "CacheStrategy | undefined"
|
|
19011
|
-
},
|
|
19012
|
-
"description": "Illustrations Cache Strategy to use\n\n**Can only be used if Illustration set is `custom-illustrations`**\n\nChoose `in-memory-cache` to cache illustrations in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache illustrations using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the illustrations will not be cached.",
|
|
19013
|
-
"default": "undefined",
|
|
19014
|
-
"fieldName": "cacheStrategy"
|
|
19015
|
-
},
|
|
19016
|
-
{
|
|
19017
|
-
"name": "cache-name",
|
|
19018
|
-
"type": {
|
|
19019
|
-
"text": "string | undefined"
|
|
19020
|
-
},
|
|
19021
|
-
"description": "Illustrations Cache Name to use (cache strategy must be provided)\n\nIf provided, Illustrations inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nIllustrations cache name must be unique, independent from other asset caches.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the illustrations will not be cached.",
|
|
19022
|
-
"default": "undefined",
|
|
19023
|
-
"fieldName": "cacheName"
|
|
19024
|
-
}
|
|
19025
|
-
],
|
|
19026
|
-
"superclass": {
|
|
19027
|
-
"name": "Provider",
|
|
19028
|
-
"module": "/src/models"
|
|
19029
|
-
},
|
|
19030
|
-
"tagName": "mdc-illustrationprovider",
|
|
19031
|
-
"jsDoc": "/**\n * IllustrationProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Attribute `illustrationSet` can be set to either `momentum-illustrations` or `custom-illustrations`.\n * If `momentum-illustrations` is selected, the illustrations will be fetched from the\n * Momentum Design System illustration set per a dynamic JS Import (no need to provide a URL).\n * This requires the consumer to have the `@momentum-design/illustrations` package installed and the\n * build tooling needs to support dynamic imports.\n *\n * If `custom-illustrations` is selected, the illustrations will be fetched from the provided URL.\n * This requires the consumer to provide a URL from which the illustrations will be fetched and\n * the consumer needs to make sure to bundle the illustrations in the application.\n *\n * If `cacheStrategy` is provided (only works with illustrationSet = `custom-illustrations`), the\n * IllustrationProvider will cache the illustrations in the selected cache (either web-api-cache or in-memory-cache),\n * to avoid fetching the same illustration multiple times over the network.\n * This is useful when the same illustration is used multiple times in the application.\n * To consider:\n * - The `in-memory-cache` is not persisted and will be lost when the\n * IllustrationProvider is removed from the DOM.\n * - The `web-api-cache` is persisted, but only works in https environments\n * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).\n *\n * @tagname mdc-illustrationprovider\n *\n * @slot - children\n */",
|
|
19032
|
-
"customElement": true
|
|
19033
|
-
}
|
|
19034
|
-
],
|
|
19035
|
-
"exports": [
|
|
19036
|
-
{
|
|
19037
|
-
"kind": "js",
|
|
19038
|
-
"name": "default",
|
|
19039
|
-
"declaration": {
|
|
19040
|
-
"name": "IllustrationProvider",
|
|
19041
|
-
"module": "components/illustrationprovider/illustrationprovider.component.js"
|
|
19042
|
-
}
|
|
19043
|
-
}
|
|
19044
|
-
]
|
|
19045
|
-
},
|
|
19046
|
-
{
|
|
19047
|
-
"kind": "javascript-module",
|
|
19048
|
-
"path": "components/inputchip/inputchip.component.js",
|
|
19049
|
-
"declarations": [
|
|
19050
|
-
{
|
|
19051
|
-
"kind": "class",
|
|
19052
|
-
"description": "mdc-inputchip component is an interactive chip that consumers can use to represent an input.\n\n- It supports a leading icon along with label.\n- It supports a prefix slot for avatars (takes precedence over icon-name).\n- It supports an error state for validation.\n- It supports a close button to remove the chip.",
|
|
19053
|
-
"name": "InputChip",
|
|
19054
|
-
"cssProperties": [
|
|
19055
|
-
{
|
|
19056
|
-
"description": "The color of the chip.",
|
|
19057
|
-
"name": "--mdc-chip-color"
|
|
19058
|
-
},
|
|
19059
|
-
{
|
|
19060
|
-
"description": "The border color of the chip.",
|
|
19061
|
-
"name": "--mdc-chip-border-color"
|
|
19062
|
-
},
|
|
19063
|
-
{
|
|
19064
|
-
"description": "The background color of the chip.",
|
|
19065
|
-
"name": "--mdc-chip-background-color"
|
|
19066
|
-
}
|
|
19067
|
-
],
|
|
19068
|
-
"cssParts": [
|
|
19069
|
-
{
|
|
19070
|
-
"description": "The label part of the chip.",
|
|
19071
|
-
"name": "label"
|
|
19072
|
-
},
|
|
19073
|
-
{
|
|
19074
|
-
"description": "The icon part of the chip.",
|
|
19075
|
-
"name": "icon"
|
|
19076
|
-
},
|
|
19077
|
-
{
|
|
19078
|
-
"description": "The close icon part of the chip.",
|
|
19079
|
-
"name": "close-icon"
|
|
19080
|
-
}
|
|
19081
|
-
],
|
|
19082
|
-
"slots": [
|
|
19083
|
-
{
|
|
19084
|
-
"description": "A slot for prefix content such as avatars.",
|
|
19085
|
-
"name": "prefix"
|
|
19086
|
-
}
|
|
19087
|
-
],
|
|
19088
|
-
"members": [
|
|
19089
|
-
{
|
|
19090
|
-
"kind": "field",
|
|
19091
|
-
"name": "label",
|
|
19092
|
-
"type": {
|
|
19093
|
-
"text": "string"
|
|
19094
|
-
},
|
|
19095
|
-
"default": "''",
|
|
19096
|
-
"description": "The label of the inputchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
|
19097
|
-
"attribute": "label"
|
|
19098
|
-
},
|
|
19099
|
-
{
|
|
19100
|
-
"kind": "field",
|
|
19101
|
-
"name": "error",
|
|
19102
|
-
"type": {
|
|
19103
|
-
"text": "boolean"
|
|
19104
|
-
},
|
|
19105
|
-
"default": "false",
|
|
19106
|
-
"description": "The error state of the inputchip.",
|
|
19107
|
-
"attribute": "error"
|
|
19108
|
-
},
|
|
19109
|
-
{
|
|
19110
|
-
"kind": "field",
|
|
19111
|
-
"name": "clearAriaLabel",
|
|
19112
|
-
"type": {
|
|
19113
|
-
"text": "string"
|
|
19114
|
-
},
|
|
19115
|
-
"default": "''",
|
|
19116
|
-
"description": "The aria-label of the close button.",
|
|
19117
|
-
"attribute": "clear-aria-label"
|
|
19118
|
-
},
|
|
19119
|
-
{
|
|
19120
|
-
"kind": "method",
|
|
19121
|
-
"name": "renderPrefix",
|
|
19122
|
-
"privacy": "private",
|
|
19123
|
-
"description": "Renders the prefix content, supporting both icons and slot content.",
|
|
19124
|
-
"return": {
|
|
19125
|
-
"type": {
|
|
19126
|
-
"text": ""
|
|
19127
|
-
}
|
|
19128
|
-
}
|
|
19129
|
-
},
|
|
19130
|
-
{
|
|
19131
|
-
"kind": "method",
|
|
19132
|
-
"name": "handleClose",
|
|
19133
|
-
"privacy": "private",
|
|
19134
|
-
"description": "Handles the behavior of the close button on click event.",
|
|
19135
|
-
"parameters": [
|
|
19136
|
-
{
|
|
19137
|
-
"description": "The event object.",
|
|
19138
|
-
"name": "event"
|
|
19139
|
-
}
|
|
19140
|
-
]
|
|
19141
|
-
},
|
|
19142
|
-
{
|
|
19143
|
-
"kind": "field",
|
|
19144
|
-
"name": "iconName",
|
|
19145
|
-
"type": {
|
|
19146
|
-
"text": "IconNames | undefined"
|
|
19147
|
-
},
|
|
19148
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
19149
|
-
"attribute": "icon-name",
|
|
19150
|
-
"inheritedFrom": {
|
|
19151
|
-
"name": "IconNameMixin",
|
|
19152
|
-
"module": "utils/mixins/IconNameMixin.js"
|
|
19153
|
-
}
|
|
19154
|
-
},
|
|
19155
|
-
{
|
|
19156
|
-
"kind": "field",
|
|
19157
|
-
"name": "disabled",
|
|
19158
|
-
"type": {
|
|
19159
|
-
"text": "boolean | undefined"
|
|
19160
|
-
},
|
|
19161
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
19162
|
-
"default": "undefined",
|
|
19163
|
-
"attribute": "disabled",
|
|
19164
|
-
"reflects": true,
|
|
19165
|
-
"inheritedFrom": {
|
|
19166
|
-
"name": "DisabledMixin",
|
|
19167
|
-
"module": "utils/mixins/DisabledMixin.js"
|
|
19168
|
-
}
|
|
19169
|
-
}
|
|
19170
|
-
],
|
|
19171
|
-
"events": [
|
|
19172
|
-
{
|
|
19173
|
-
"name": "remove",
|
|
19174
|
-
"type": {
|
|
19175
|
-
"text": "CustomEvent"
|
|
19176
|
-
},
|
|
19177
|
-
"description": "This event is dispatched when the close button is activated. It bubbles and is composed.",
|
|
19178
|
-
"reactName": "onRemove"
|
|
19179
|
-
}
|
|
19180
|
-
],
|
|
19181
|
-
"attributes": [
|
|
19182
|
-
{
|
|
19183
|
-
"name": "label",
|
|
19184
|
-
"type": {
|
|
19185
|
-
"text": "string"
|
|
19186
|
-
},
|
|
19187
|
-
"default": "''",
|
|
19188
|
-
"description": "The label of the inputchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
|
19189
|
-
"fieldName": "label"
|
|
19190
|
-
},
|
|
19191
|
-
{
|
|
19192
|
-
"name": "error",
|
|
19193
|
-
"type": {
|
|
19194
|
-
"text": "boolean"
|
|
19195
|
-
},
|
|
19196
|
-
"default": "false",
|
|
19197
|
-
"description": "The error state of the inputchip.",
|
|
19198
|
-
"fieldName": "error"
|
|
19199
|
-
},
|
|
19200
|
-
{
|
|
19201
|
-
"name": "clear-aria-label",
|
|
19202
|
-
"type": {
|
|
19203
|
-
"text": "string"
|
|
19204
|
-
},
|
|
19205
|
-
"default": "''",
|
|
19206
|
-
"description": "The aria-label of the close button.",
|
|
19207
|
-
"fieldName": "clearAriaLabel"
|
|
19208
|
-
},
|
|
19209
|
-
{
|
|
19210
|
-
"name": "icon-name",
|
|
19211
|
-
"type": {
|
|
19212
|
-
"text": "IconNames | undefined"
|
|
19213
|
-
},
|
|
19214
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
19215
|
-
"fieldName": "iconName",
|
|
19216
|
-
"inheritedFrom": {
|
|
19217
|
-
"name": "IconNameMixin",
|
|
19218
|
-
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
19219
|
-
}
|
|
19220
|
-
},
|
|
19221
|
-
{
|
|
19222
|
-
"name": "disabled",
|
|
19223
|
-
"type": {
|
|
19224
|
-
"text": "boolean | undefined"
|
|
19225
|
-
},
|
|
19226
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
19227
|
-
"default": "undefined",
|
|
19228
|
-
"fieldName": "disabled",
|
|
19229
|
-
"inheritedFrom": {
|
|
19230
|
-
"name": "DisabledMixin",
|
|
19231
|
-
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
19232
|
-
}
|
|
19233
|
-
}
|
|
19234
|
-
],
|
|
19235
|
-
"mixins": [
|
|
19006
|
+
},
|
|
19236
19007
|
{
|
|
19237
|
-
"name": "
|
|
19238
|
-
"
|
|
19008
|
+
"name": "cache-strategy",
|
|
19009
|
+
"type": {
|
|
19010
|
+
"text": "CacheStrategy | undefined"
|
|
19011
|
+
},
|
|
19012
|
+
"description": "Illustrations Cache Strategy to use\n\n**Can only be used if Illustration set is `custom-illustrations`**\n\nChoose `in-memory-cache` to cache illustrations in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache illustrations using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the illustrations will not be cached.",
|
|
19013
|
+
"default": "undefined",
|
|
19014
|
+
"fieldName": "cacheStrategy"
|
|
19239
19015
|
},
|
|
19240
19016
|
{
|
|
19241
|
-
"name": "
|
|
19242
|
-
"
|
|
19017
|
+
"name": "cache-name",
|
|
19018
|
+
"type": {
|
|
19019
|
+
"text": "string | undefined"
|
|
19020
|
+
},
|
|
19021
|
+
"description": "Illustrations Cache Name to use (cache strategy must be provided)\n\nIf provided, Illustrations inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nIllustrations cache name must be unique, independent from other asset caches.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the illustrations will not be cached.",
|
|
19022
|
+
"default": "undefined",
|
|
19023
|
+
"fieldName": "cacheName"
|
|
19243
19024
|
}
|
|
19244
19025
|
],
|
|
19245
19026
|
"superclass": {
|
|
19246
|
-
"name": "
|
|
19027
|
+
"name": "Provider",
|
|
19247
19028
|
"module": "/src/models"
|
|
19248
19029
|
},
|
|
19249
|
-
"tagName": "mdc-
|
|
19250
|
-
"jsDoc": "/**\n *
|
|
19030
|
+
"tagName": "mdc-illustrationprovider",
|
|
19031
|
+
"jsDoc": "/**\n * IllustrationProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Attribute `illustrationSet` can be set to either `momentum-illustrations` or `custom-illustrations`.\n * If `momentum-illustrations` is selected, the illustrations will be fetched from the\n * Momentum Design System illustration set per a dynamic JS Import (no need to provide a URL).\n * This requires the consumer to have the `@momentum-design/illustrations` package installed and the\n * build tooling needs to support dynamic imports.\n *\n * If `custom-illustrations` is selected, the illustrations will be fetched from the provided URL.\n * This requires the consumer to provide a URL from which the illustrations will be fetched and\n * the consumer needs to make sure to bundle the illustrations in the application.\n *\n * If `cacheStrategy` is provided (only works with illustrationSet = `custom-illustrations`), the\n * IllustrationProvider will cache the illustrations in the selected cache (either web-api-cache or in-memory-cache),\n * to avoid fetching the same illustration multiple times over the network.\n * This is useful when the same illustration is used multiple times in the application.\n * To consider:\n * - The `in-memory-cache` is not persisted and will be lost when the\n * IllustrationProvider is removed from the DOM.\n * - The `web-api-cache` is persisted, but only works in https environments\n * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).\n *\n * @tagname mdc-illustrationprovider\n *\n * @slot - children\n */",
|
|
19251
19032
|
"customElement": true
|
|
19252
19033
|
}
|
|
19253
19034
|
],
|
|
@@ -19256,8 +19037,8 @@
|
|
|
19256
19037
|
"kind": "js",
|
|
19257
19038
|
"name": "default",
|
|
19258
19039
|
"declaration": {
|
|
19259
|
-
"name": "
|
|
19260
|
-
"module": "components/
|
|
19040
|
+
"name": "IllustrationProvider",
|
|
19041
|
+
"module": "components/illustrationprovider/illustrationprovider.component.js"
|
|
19261
19042
|
}
|
|
19262
19043
|
}
|
|
19263
19044
|
]
|
|
@@ -20422,60 +20203,279 @@
|
|
|
20422
20203
|
"type": {
|
|
20423
20204
|
"text": "string | undefined"
|
|
20424
20205
|
},
|
|
20425
|
-
"description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
|
|
20426
|
-
"fieldName": "infoIconAriaLabel",
|
|
20427
|
-
"inheritedFrom": {
|
|
20428
|
-
"name": "FormfieldWrapper",
|
|
20429
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
20430
|
-
}
|
|
20206
|
+
"description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
|
|
20207
|
+
"fieldName": "infoIconAriaLabel",
|
|
20208
|
+
"inheritedFrom": {
|
|
20209
|
+
"name": "FormfieldWrapper",
|
|
20210
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
20211
|
+
}
|
|
20212
|
+
},
|
|
20213
|
+
{
|
|
20214
|
+
"name": "readonly",
|
|
20215
|
+
"type": {
|
|
20216
|
+
"text": "boolean"
|
|
20217
|
+
},
|
|
20218
|
+
"default": "false",
|
|
20219
|
+
"description": "Determines whether the form field is read-only.",
|
|
20220
|
+
"fieldName": "readonly",
|
|
20221
|
+
"inheritedFrom": {
|
|
20222
|
+
"name": "FormfieldWrapper",
|
|
20223
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
20224
|
+
}
|
|
20225
|
+
},
|
|
20226
|
+
{
|
|
20227
|
+
"name": "soft-disabled",
|
|
20228
|
+
"type": {
|
|
20229
|
+
"text": "boolean"
|
|
20230
|
+
},
|
|
20231
|
+
"default": "false",
|
|
20232
|
+
"description": "Determines whether the form field is soft-disabled.",
|
|
20233
|
+
"fieldName": "softDisabled",
|
|
20234
|
+
"inheritedFrom": {
|
|
20235
|
+
"name": "FormfieldWrapper",
|
|
20236
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
20237
|
+
}
|
|
20238
|
+
}
|
|
20239
|
+
],
|
|
20240
|
+
"mixins": [
|
|
20241
|
+
{
|
|
20242
|
+
"name": "AutoFocusOnMountMixin",
|
|
20243
|
+
"module": "/src/utils/mixins/AutoFocusOnMountMixin"
|
|
20244
|
+
},
|
|
20245
|
+
{
|
|
20246
|
+
"name": "FormInternalsMixin",
|
|
20247
|
+
"module": "/src/utils/mixins/FormInternalsMixin"
|
|
20248
|
+
},
|
|
20249
|
+
{
|
|
20250
|
+
"name": "DataAriaLabelMixin",
|
|
20251
|
+
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
|
20252
|
+
}
|
|
20253
|
+
],
|
|
20254
|
+
"superclass": {
|
|
20255
|
+
"name": "FormfieldWrapper",
|
|
20256
|
+
"module": "/src/components/formfieldwrapper"
|
|
20257
|
+
},
|
|
20258
|
+
"tagName": "mdc-input",
|
|
20259
|
+
"jsDoc": "/**\n * mdc-input is a component that allows users to input text.\n * It contains:\n * - label field - describe the input field.\n * - input field - contains the value\n * - help text or validation message - displayed below the input field.\n * - trailing button - it displays a clear the input field.\n * - prefix text - displayed before the input field.\n * - leading icon - displayed before the input field.\n * - clear-aria-label - aria label for the trailing button.\n * - all the attributes of the input field.\n *\n * @tagname mdc-input\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n * @slot input - Slot for the input element. If not provided, the input field will be rendered.\n * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.\n * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.\n * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\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 leading-icon - The leading icon element that is displayed before the input field.\n * @csspart prefix-text - The prefix text element that is displayed before the input field.\n * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.\n * @csspart input-section - The container for the input field, leading icon, and prefix text elements.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.\n */",
|
|
20260
|
+
"customElement": true
|
|
20261
|
+
}
|
|
20262
|
+
],
|
|
20263
|
+
"exports": [
|
|
20264
|
+
{
|
|
20265
|
+
"kind": "js",
|
|
20266
|
+
"name": "default",
|
|
20267
|
+
"declaration": {
|
|
20268
|
+
"name": "Input",
|
|
20269
|
+
"module": "components/input/input.component.js"
|
|
20270
|
+
}
|
|
20271
|
+
}
|
|
20272
|
+
]
|
|
20273
|
+
},
|
|
20274
|
+
{
|
|
20275
|
+
"kind": "javascript-module",
|
|
20276
|
+
"path": "components/inputchip/inputchip.component.js",
|
|
20277
|
+
"declarations": [
|
|
20278
|
+
{
|
|
20279
|
+
"kind": "class",
|
|
20280
|
+
"description": "mdc-inputchip component is an interactive chip that consumers can use to represent an input.\n\n- It supports a leading icon along with label.\n- It supports a prefix slot for avatars (takes precedence over icon-name).\n- It supports an error state for validation.\n- It supports a close button to remove the chip.",
|
|
20281
|
+
"name": "InputChip",
|
|
20282
|
+
"cssProperties": [
|
|
20283
|
+
{
|
|
20284
|
+
"description": "The color of the chip.",
|
|
20285
|
+
"name": "--mdc-chip-color"
|
|
20286
|
+
},
|
|
20287
|
+
{
|
|
20288
|
+
"description": "The border color of the chip.",
|
|
20289
|
+
"name": "--mdc-chip-border-color"
|
|
20290
|
+
},
|
|
20291
|
+
{
|
|
20292
|
+
"description": "The background color of the chip.",
|
|
20293
|
+
"name": "--mdc-chip-background-color"
|
|
20294
|
+
}
|
|
20295
|
+
],
|
|
20296
|
+
"cssParts": [
|
|
20297
|
+
{
|
|
20298
|
+
"description": "The label part of the chip.",
|
|
20299
|
+
"name": "label"
|
|
20300
|
+
},
|
|
20301
|
+
{
|
|
20302
|
+
"description": "The icon part of the chip.",
|
|
20303
|
+
"name": "icon"
|
|
20304
|
+
},
|
|
20305
|
+
{
|
|
20306
|
+
"description": "The close icon part of the chip.",
|
|
20307
|
+
"name": "close-icon"
|
|
20308
|
+
}
|
|
20309
|
+
],
|
|
20310
|
+
"slots": [
|
|
20311
|
+
{
|
|
20312
|
+
"description": "A slot for prefix content such as avatars.",
|
|
20313
|
+
"name": "prefix"
|
|
20314
|
+
}
|
|
20315
|
+
],
|
|
20316
|
+
"members": [
|
|
20317
|
+
{
|
|
20318
|
+
"kind": "field",
|
|
20319
|
+
"name": "label",
|
|
20320
|
+
"type": {
|
|
20321
|
+
"text": "string"
|
|
20322
|
+
},
|
|
20323
|
+
"default": "''",
|
|
20324
|
+
"description": "The label of the inputchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
|
20325
|
+
"attribute": "label"
|
|
20326
|
+
},
|
|
20327
|
+
{
|
|
20328
|
+
"kind": "field",
|
|
20329
|
+
"name": "error",
|
|
20330
|
+
"type": {
|
|
20331
|
+
"text": "boolean"
|
|
20332
|
+
},
|
|
20333
|
+
"default": "false",
|
|
20334
|
+
"description": "The error state of the inputchip.",
|
|
20335
|
+
"attribute": "error"
|
|
20336
|
+
},
|
|
20337
|
+
{
|
|
20338
|
+
"kind": "field",
|
|
20339
|
+
"name": "clearAriaLabel",
|
|
20340
|
+
"type": {
|
|
20341
|
+
"text": "string"
|
|
20342
|
+
},
|
|
20343
|
+
"default": "''",
|
|
20344
|
+
"description": "The aria-label of the close button.",
|
|
20345
|
+
"attribute": "clear-aria-label"
|
|
20346
|
+
},
|
|
20347
|
+
{
|
|
20348
|
+
"kind": "method",
|
|
20349
|
+
"name": "renderPrefix",
|
|
20350
|
+
"privacy": "private",
|
|
20351
|
+
"description": "Renders the prefix content, supporting both icons and slot content.",
|
|
20352
|
+
"return": {
|
|
20353
|
+
"type": {
|
|
20354
|
+
"text": ""
|
|
20355
|
+
}
|
|
20356
|
+
}
|
|
20357
|
+
},
|
|
20358
|
+
{
|
|
20359
|
+
"kind": "method",
|
|
20360
|
+
"name": "handleClose",
|
|
20361
|
+
"privacy": "private",
|
|
20362
|
+
"description": "Handles the behavior of the close button on click event.",
|
|
20363
|
+
"parameters": [
|
|
20364
|
+
{
|
|
20365
|
+
"description": "The event object.",
|
|
20366
|
+
"name": "event"
|
|
20367
|
+
}
|
|
20368
|
+
]
|
|
20369
|
+
},
|
|
20370
|
+
{
|
|
20371
|
+
"kind": "field",
|
|
20372
|
+
"name": "iconName",
|
|
20373
|
+
"type": {
|
|
20374
|
+
"text": "IconNames | undefined"
|
|
20375
|
+
},
|
|
20376
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
20377
|
+
"attribute": "icon-name",
|
|
20378
|
+
"inheritedFrom": {
|
|
20379
|
+
"name": "IconNameMixin",
|
|
20380
|
+
"module": "utils/mixins/IconNameMixin.js"
|
|
20381
|
+
}
|
|
20382
|
+
},
|
|
20383
|
+
{
|
|
20384
|
+
"kind": "field",
|
|
20385
|
+
"name": "disabled",
|
|
20386
|
+
"type": {
|
|
20387
|
+
"text": "boolean | undefined"
|
|
20388
|
+
},
|
|
20389
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
20390
|
+
"default": "undefined",
|
|
20391
|
+
"attribute": "disabled",
|
|
20392
|
+
"reflects": true,
|
|
20393
|
+
"inheritedFrom": {
|
|
20394
|
+
"name": "DisabledMixin",
|
|
20395
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
20396
|
+
}
|
|
20397
|
+
}
|
|
20398
|
+
],
|
|
20399
|
+
"events": [
|
|
20400
|
+
{
|
|
20401
|
+
"name": "remove",
|
|
20402
|
+
"type": {
|
|
20403
|
+
"text": "CustomEvent"
|
|
20404
|
+
},
|
|
20405
|
+
"description": "This event is dispatched when the close button is activated. It bubbles and is composed.",
|
|
20406
|
+
"reactName": "onRemove"
|
|
20407
|
+
}
|
|
20408
|
+
],
|
|
20409
|
+
"attributes": [
|
|
20410
|
+
{
|
|
20411
|
+
"name": "label",
|
|
20412
|
+
"type": {
|
|
20413
|
+
"text": "string"
|
|
20414
|
+
},
|
|
20415
|
+
"default": "''",
|
|
20416
|
+
"description": "The label of the inputchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
|
20417
|
+
"fieldName": "label"
|
|
20418
|
+
},
|
|
20419
|
+
{
|
|
20420
|
+
"name": "error",
|
|
20421
|
+
"type": {
|
|
20422
|
+
"text": "boolean"
|
|
20423
|
+
},
|
|
20424
|
+
"default": "false",
|
|
20425
|
+
"description": "The error state of the inputchip.",
|
|
20426
|
+
"fieldName": "error"
|
|
20427
|
+
},
|
|
20428
|
+
{
|
|
20429
|
+
"name": "clear-aria-label",
|
|
20430
|
+
"type": {
|
|
20431
|
+
"text": "string"
|
|
20432
|
+
},
|
|
20433
|
+
"default": "''",
|
|
20434
|
+
"description": "The aria-label of the close button.",
|
|
20435
|
+
"fieldName": "clearAriaLabel"
|
|
20431
20436
|
},
|
|
20432
20437
|
{
|
|
20433
|
-
"name": "
|
|
20438
|
+
"name": "icon-name",
|
|
20434
20439
|
"type": {
|
|
20435
|
-
"text": "
|
|
20440
|
+
"text": "IconNames | undefined"
|
|
20436
20441
|
},
|
|
20437
|
-
"
|
|
20438
|
-
"
|
|
20439
|
-
"fieldName": "readonly",
|
|
20442
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
20443
|
+
"fieldName": "iconName",
|
|
20440
20444
|
"inheritedFrom": {
|
|
20441
|
-
"name": "
|
|
20442
|
-
"module": "src/
|
|
20445
|
+
"name": "IconNameMixin",
|
|
20446
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
20443
20447
|
}
|
|
20444
20448
|
},
|
|
20445
20449
|
{
|
|
20446
|
-
"name": "
|
|
20450
|
+
"name": "disabled",
|
|
20447
20451
|
"type": {
|
|
20448
|
-
"text": "boolean"
|
|
20452
|
+
"text": "boolean | undefined"
|
|
20449
20453
|
},
|
|
20450
|
-
"
|
|
20451
|
-
"
|
|
20452
|
-
"fieldName": "
|
|
20454
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
20455
|
+
"default": "undefined",
|
|
20456
|
+
"fieldName": "disabled",
|
|
20453
20457
|
"inheritedFrom": {
|
|
20454
|
-
"name": "
|
|
20455
|
-
"module": "src/
|
|
20458
|
+
"name": "DisabledMixin",
|
|
20459
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
20456
20460
|
}
|
|
20457
20461
|
}
|
|
20458
20462
|
],
|
|
20459
20463
|
"mixins": [
|
|
20460
20464
|
{
|
|
20461
|
-
"name": "
|
|
20462
|
-
"module": "/src/utils/mixins/
|
|
20463
|
-
},
|
|
20464
|
-
{
|
|
20465
|
-
"name": "FormInternalsMixin",
|
|
20466
|
-
"module": "/src/utils/mixins/FormInternalsMixin"
|
|
20465
|
+
"name": "IconNameMixin",
|
|
20466
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
|
20467
20467
|
},
|
|
20468
20468
|
{
|
|
20469
|
-
"name": "
|
|
20470
|
-
"module": "/src/utils/mixins/
|
|
20469
|
+
"name": "DisabledMixin",
|
|
20470
|
+
"module": "/src/utils/mixins/DisabledMixin"
|
|
20471
20471
|
}
|
|
20472
20472
|
],
|
|
20473
20473
|
"superclass": {
|
|
20474
|
-
"name": "
|
|
20475
|
-
"module": "/src/
|
|
20474
|
+
"name": "Component",
|
|
20475
|
+
"module": "/src/models"
|
|
20476
20476
|
},
|
|
20477
|
-
"tagName": "mdc-
|
|
20478
|
-
"jsDoc": "/**\n * mdc-
|
|
20477
|
+
"tagName": "mdc-inputchip",
|
|
20478
|
+
"jsDoc": "/**\n * mdc-inputchip component is an interactive chip that consumers can use to represent an input.\n *\n * - It supports a leading icon along with label.\n * - It supports a prefix slot for avatars (takes precedence over icon-name).\n * - It supports an error state for validation.\n * - It supports a close button to remove the chip.\n *\n * @tagname mdc-inputchip\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event remove - This event is dispatched when the close button is activated. It bubbles and is composed.\n *\n * @slot prefix - A slot for prefix content such as avatars.\n *\n * @csspart label - The label part of the chip.\n * @csspart icon - The icon part of the chip.\n * @csspart close-icon - The close icon part of the chip.\n *\n * @cssproperty --mdc-chip-color - The color of the chip.\n * @cssproperty --mdc-chip-border-color - The border color of the chip.\n * @cssproperty --mdc-chip-background-color - The background color of the chip.\n *\n */",
|
|
20479
20479
|
"customElement": true
|
|
20480
20480
|
}
|
|
20481
20481
|
],
|
|
@@ -20484,8 +20484,8 @@
|
|
|
20484
20484
|
"kind": "js",
|
|
20485
20485
|
"name": "default",
|
|
20486
20486
|
"declaration": {
|
|
20487
|
-
"name": "
|
|
20488
|
-
"module": "components/
|
|
20487
|
+
"name": "InputChip",
|
|
20488
|
+
"module": "components/inputchip/inputchip.component.js"
|
|
20489
20489
|
}
|
|
20490
20490
|
}
|
|
20491
20491
|
]
|
|
@@ -22063,72 +22063,336 @@
|
|
|
22063
22063
|
"fieldName": "ping"
|
|
22064
22064
|
},
|
|
22065
22065
|
{
|
|
22066
|
-
"name": "hreflang",
|
|
22067
|
-
"type": {
|
|
22068
|
-
"text": "string | undefined"
|
|
22066
|
+
"name": "hreflang",
|
|
22067
|
+
"type": {
|
|
22068
|
+
"text": "string | undefined"
|
|
22069
|
+
},
|
|
22070
|
+
"description": "Optional hreflang attribute specifying the language of the linked resource.",
|
|
22071
|
+
"fieldName": "hreflang"
|
|
22072
|
+
},
|
|
22073
|
+
{
|
|
22074
|
+
"name": "type",
|
|
22075
|
+
"type": {
|
|
22076
|
+
"text": "string | undefined"
|
|
22077
|
+
},
|
|
22078
|
+
"description": "Optional type attribute indicating the MIME type of the linked resource.",
|
|
22079
|
+
"fieldName": "type"
|
|
22080
|
+
},
|
|
22081
|
+
{
|
|
22082
|
+
"name": "referrerpolicy",
|
|
22083
|
+
"type": {
|
|
22084
|
+
"text": "string | undefined"
|
|
22085
|
+
},
|
|
22086
|
+
"description": "Optional referrerpolicy attribute specifying how much referrer information to send.",
|
|
22087
|
+
"fieldName": "referrerpolicy"
|
|
22088
|
+
},
|
|
22089
|
+
{
|
|
22090
|
+
"name": "data-aria-label",
|
|
22091
|
+
"type": {
|
|
22092
|
+
"text": "string | null"
|
|
22093
|
+
},
|
|
22094
|
+
"default": "null",
|
|
22095
|
+
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
22096
|
+
"fieldName": "dataAriaLabel",
|
|
22097
|
+
"inheritedFrom": {
|
|
22098
|
+
"name": "DataAriaLabelMixin",
|
|
22099
|
+
"module": "src/utils/mixins/DataAriaLabelMixin.ts"
|
|
22100
|
+
}
|
|
22101
|
+
},
|
|
22102
|
+
{
|
|
22103
|
+
"name": "disabled",
|
|
22104
|
+
"type": {
|
|
22105
|
+
"text": "boolean | undefined"
|
|
22106
|
+
},
|
|
22107
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
22108
|
+
"default": "undefined",
|
|
22109
|
+
"fieldName": "disabled",
|
|
22110
|
+
"inheritedFrom": {
|
|
22111
|
+
"name": "DisabledMixin",
|
|
22112
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
22113
|
+
}
|
|
22114
|
+
}
|
|
22115
|
+
],
|
|
22116
|
+
"mixins": [
|
|
22117
|
+
{
|
|
22118
|
+
"name": "DataAriaLabelMixin",
|
|
22119
|
+
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
|
22120
|
+
},
|
|
22121
|
+
{
|
|
22122
|
+
"name": "DisabledMixin",
|
|
22123
|
+
"module": "/src/utils/mixins/DisabledMixin"
|
|
22124
|
+
}
|
|
22125
|
+
],
|
|
22126
|
+
"superclass": {
|
|
22127
|
+
"name": "Component",
|
|
22128
|
+
"module": "/src/models"
|
|
22129
|
+
},
|
|
22130
|
+
"tagName": "mdc-linksimple",
|
|
22131
|
+
"jsDoc": "/**\n * `mdc-linksimple` is a lightweight link component that can be used to navigate\n * within the application or to an external URL. It does not have any predefined default size.\n *\n * The `children` of the `mdc-linksimple` component can be customized to suit\n * different use cases, including text, icons, or other inline content. For the child to be an icon,\n * the `mdc-icon` component should be used to render.\n *\n * @tagname mdc-linksimple\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n * @cssproperty --mdc-link-border-radius - Border radius of the link.\n * @cssproperty --mdc-link-color-active - Color of the link’s child content in the active state.\n * @cssproperty --mdc-link-color-disabled - Color of the link’s child content in the disabled state.\n * @cssproperty --mdc-link-color-hover - Color of the link’s child content in the hover state.\n * @cssproperty --mdc-link-color-normal - Color of the link’s child content in the normal state.\n * @cssproperty --mdc-link-inverted-color-active - Color of the inverted link’s child content in the active state.\n * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted link’s child content in the disabled state.\n * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted link’s child content in the hover state.\n * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted link’s child content in the normal state.\n *\n * @csspart anchor - The anchor element that wraps the linksimple content.\n */",
|
|
22132
|
+
"customElement": true
|
|
22133
|
+
}
|
|
22134
|
+
],
|
|
22135
|
+
"exports": [
|
|
22136
|
+
{
|
|
22137
|
+
"kind": "js",
|
|
22138
|
+
"name": "default",
|
|
22139
|
+
"declaration": {
|
|
22140
|
+
"name": "Linksimple",
|
|
22141
|
+
"module": "components/linksimple/linksimple.component.js"
|
|
22142
|
+
}
|
|
22143
|
+
}
|
|
22144
|
+
]
|
|
22145
|
+
},
|
|
22146
|
+
{
|
|
22147
|
+
"kind": "javascript-module",
|
|
22148
|
+
"path": "components/list/list.component.js",
|
|
22149
|
+
"declarations": [
|
|
22150
|
+
{
|
|
22151
|
+
"kind": "class",
|
|
22152
|
+
"description": "mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n\nTo add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n`mdc-listitem` components can be placed in the default slot.",
|
|
22153
|
+
"name": "List",
|
|
22154
|
+
"cssParts": [
|
|
22155
|
+
{
|
|
22156
|
+
"description": "The container slot around the list items",
|
|
22157
|
+
"name": "container"
|
|
22158
|
+
}
|
|
22159
|
+
],
|
|
22160
|
+
"slots": [
|
|
22161
|
+
{
|
|
22162
|
+
"description": "This is a default/unnamed slot, where listitems can be placed.",
|
|
22163
|
+
"name": "default"
|
|
22164
|
+
},
|
|
22165
|
+
{
|
|
22166
|
+
"description": "This slot is used to pass a header for the list, which can be a `mdc-listheader` component.",
|
|
22167
|
+
"name": "list-header"
|
|
22168
|
+
}
|
|
22169
|
+
],
|
|
22170
|
+
"members": [
|
|
22171
|
+
{
|
|
22172
|
+
"kind": "field",
|
|
22173
|
+
"name": "loop",
|
|
22174
|
+
"type": {
|
|
22175
|
+
"text": "'true' | 'false'"
|
|
22176
|
+
},
|
|
22177
|
+
"privacy": "public",
|
|
22178
|
+
"description": "Whether to loop navigation when reaching the end of the list.\nIf 'true', pressing the down arrow on the last item will focus the first item,\nand pressing the up arrow on the first item will focus the last item.\nIf 'false', navigation will stop at the first or last item.",
|
|
22179
|
+
"default": "'true'",
|
|
22180
|
+
"attribute": "loop",
|
|
22181
|
+
"reflects": true
|
|
22182
|
+
},
|
|
22183
|
+
{
|
|
22184
|
+
"kind": "field",
|
|
22185
|
+
"name": "initialFocus",
|
|
22186
|
+
"type": {
|
|
22187
|
+
"text": "number"
|
|
22188
|
+
},
|
|
22189
|
+
"privacy": "public",
|
|
22190
|
+
"description": "The index of the item that should receive focus when the list is first rendered.\nIf the index is out of bounds, the focused element will be clamped to the nearest valid index.",
|
|
22191
|
+
"default": "0",
|
|
22192
|
+
"attribute": "initial-focus",
|
|
22193
|
+
"reflects": true
|
|
22194
|
+
},
|
|
22195
|
+
{
|
|
22196
|
+
"kind": "method",
|
|
22197
|
+
"name": "onElementStoreUpdate",
|
|
22198
|
+
"privacy": "protected",
|
|
22199
|
+
"parameters": [
|
|
22200
|
+
{
|
|
22201
|
+
"name": "item",
|
|
22202
|
+
"type": {
|
|
22203
|
+
"text": "ListItem"
|
|
22204
|
+
}
|
|
22205
|
+
},
|
|
22206
|
+
{
|
|
22207
|
+
"name": "changeType",
|
|
22208
|
+
"type": {
|
|
22209
|
+
"text": "ElementStoreChangeTypes"
|
|
22210
|
+
}
|
|
22211
|
+
},
|
|
22212
|
+
{
|
|
22213
|
+
"name": "index",
|
|
22214
|
+
"type": {
|
|
22215
|
+
"text": "number"
|
|
22216
|
+
}
|
|
22217
|
+
}
|
|
22218
|
+
]
|
|
22219
|
+
},
|
|
22220
|
+
{
|
|
22221
|
+
"kind": "field",
|
|
22222
|
+
"name": "itemsStore",
|
|
22223
|
+
"default": "new ElementStore<ListItem>(this, { isValidItem: this.isValidItem, onStoreUpdate: this.onElementStoreUpdate.bind(this), })"
|
|
22224
|
+
},
|
|
22225
|
+
{
|
|
22226
|
+
"kind": "method",
|
|
22227
|
+
"name": "setInitialFocus",
|
|
22228
|
+
"privacy": "protected",
|
|
22229
|
+
"inheritedFrom": {
|
|
22230
|
+
"name": "ListNavigationMixin",
|
|
22231
|
+
"module": "utils/mixins/ListNavigationMixin.js"
|
|
22232
|
+
}
|
|
22233
|
+
},
|
|
22234
|
+
{
|
|
22235
|
+
"kind": "method",
|
|
22236
|
+
"name": "getCurrentIndex",
|
|
22237
|
+
"privacy": "private",
|
|
22238
|
+
"return": {
|
|
22239
|
+
"type": {
|
|
22240
|
+
"text": ""
|
|
22241
|
+
}
|
|
22242
|
+
},
|
|
22243
|
+
"parameters": [
|
|
22244
|
+
{
|
|
22245
|
+
"name": "target",
|
|
22246
|
+
"type": {
|
|
22247
|
+
"text": "HTMLElement | null"
|
|
22248
|
+
},
|
|
22249
|
+
"description": "The target element that triggered the event."
|
|
22250
|
+
}
|
|
22251
|
+
],
|
|
22252
|
+
"description": "Retrieves the current index of the item that triggered the event.",
|
|
22253
|
+
"inheritedFrom": {
|
|
22254
|
+
"name": "ListNavigationMixin",
|
|
22255
|
+
"module": "utils/mixins/ListNavigationMixin.js"
|
|
22256
|
+
}
|
|
22257
|
+
},
|
|
22258
|
+
{
|
|
22259
|
+
"kind": "method",
|
|
22260
|
+
"name": "resetTabIndexes",
|
|
22261
|
+
"privacy": "protected",
|
|
22262
|
+
"parameters": [
|
|
22263
|
+
{
|
|
22264
|
+
"name": "index",
|
|
22265
|
+
"type": {
|
|
22266
|
+
"text": "number"
|
|
22267
|
+
},
|
|
22268
|
+
"description": "The index of the currently focused item."
|
|
22269
|
+
},
|
|
22270
|
+
{
|
|
22271
|
+
"name": "focusElement",
|
|
22272
|
+
"default": "true",
|
|
22273
|
+
"description": "Call focus() on the current item or not."
|
|
22274
|
+
}
|
|
22275
|
+
],
|
|
22276
|
+
"description": "Reset all tabindex to -1 and set the tabindex of the current item to 0",
|
|
22277
|
+
"inheritedFrom": {
|
|
22278
|
+
"name": "ListNavigationMixin",
|
|
22279
|
+
"module": "utils/mixins/ListNavigationMixin.js"
|
|
22280
|
+
}
|
|
22281
|
+
},
|
|
22282
|
+
{
|
|
22283
|
+
"kind": "method",
|
|
22284
|
+
"name": "resetTabIndexAndSetFocus",
|
|
22285
|
+
"privacy": "protected",
|
|
22286
|
+
"parameters": [
|
|
22287
|
+
{
|
|
22288
|
+
"name": "newIndex",
|
|
22289
|
+
"type": {
|
|
22290
|
+
"text": "number"
|
|
22291
|
+
},
|
|
22292
|
+
"description": "The index of the new item to focus."
|
|
22293
|
+
},
|
|
22294
|
+
{
|
|
22295
|
+
"name": "oldIndex",
|
|
22296
|
+
"optional": true,
|
|
22297
|
+
"type": {
|
|
22298
|
+
"text": "number"
|
|
22299
|
+
},
|
|
22300
|
+
"description": "The index of the currently focused item."
|
|
22301
|
+
},
|
|
22302
|
+
{
|
|
22303
|
+
"name": "focusNewItem",
|
|
22304
|
+
"default": "true",
|
|
22305
|
+
"description": "Call focus() on the new item or not. It should be false during firstUpdate"
|
|
22306
|
+
}
|
|
22307
|
+
],
|
|
22308
|
+
"description": "Resets the tabindex of the currently focused item and sets focus to a new item.",
|
|
22309
|
+
"return": {
|
|
22310
|
+
"type": {
|
|
22311
|
+
"text": ""
|
|
22312
|
+
}
|
|
22069
22313
|
},
|
|
22070
|
-
"
|
|
22071
|
-
|
|
22314
|
+
"inheritedFrom": {
|
|
22315
|
+
"name": "ListNavigationMixin",
|
|
22316
|
+
"module": "utils/mixins/ListNavigationMixin.js"
|
|
22317
|
+
}
|
|
22072
22318
|
},
|
|
22073
22319
|
{
|
|
22074
|
-
"
|
|
22075
|
-
"
|
|
22076
|
-
|
|
22320
|
+
"kind": "method",
|
|
22321
|
+
"name": "resolveDirectionKey",
|
|
22322
|
+
"privacy": "private",
|
|
22323
|
+
"parameters": [
|
|
22324
|
+
{
|
|
22325
|
+
"name": "key",
|
|
22326
|
+
"type": {
|
|
22327
|
+
"text": "string"
|
|
22328
|
+
},
|
|
22329
|
+
"description": "The key pressed by the user."
|
|
22330
|
+
},
|
|
22331
|
+
{
|
|
22332
|
+
"name": "isRtl",
|
|
22333
|
+
"type": {
|
|
22334
|
+
"text": "boolean"
|
|
22335
|
+
},
|
|
22336
|
+
"description": "A boolean indicating if the layout is right-to-left (RTL)."
|
|
22337
|
+
}
|
|
22338
|
+
],
|
|
22339
|
+
"description": "Resolves the key pressed by the user based on the direction of the layout.\nThis method is used to handle keyboard navigation in a right-to-left (RTL) layout.\nIt checks if the layout is RTL and adjusts the arrow keys accordingly.\nFor example, in RTL, the left arrow key behaves like the right arrow key and vice versa.",
|
|
22340
|
+
"return": {
|
|
22341
|
+
"type": {
|
|
22342
|
+
"text": ""
|
|
22343
|
+
}
|
|
22077
22344
|
},
|
|
22078
|
-
"
|
|
22079
|
-
|
|
22345
|
+
"inheritedFrom": {
|
|
22346
|
+
"name": "ListNavigationMixin",
|
|
22347
|
+
"module": "utils/mixins/ListNavigationMixin.js"
|
|
22348
|
+
}
|
|
22080
22349
|
},
|
|
22081
22350
|
{
|
|
22082
|
-
"
|
|
22083
|
-
"
|
|
22084
|
-
|
|
22085
|
-
|
|
22086
|
-
|
|
22087
|
-
|
|
22088
|
-
|
|
22351
|
+
"kind": "method",
|
|
22352
|
+
"name": "shouldLoop",
|
|
22353
|
+
"privacy": "private",
|
|
22354
|
+
"inheritedFrom": {
|
|
22355
|
+
"name": "ListNavigationMixin",
|
|
22356
|
+
"module": "utils/mixins/ListNavigationMixin.js"
|
|
22357
|
+
}
|
|
22358
|
+
}
|
|
22359
|
+
],
|
|
22360
|
+
"attributes": [
|
|
22089
22361
|
{
|
|
22090
|
-
"name": "
|
|
22362
|
+
"name": "loop",
|
|
22091
22363
|
"type": {
|
|
22092
|
-
"text": "
|
|
22364
|
+
"text": "'true' | 'false'"
|
|
22093
22365
|
},
|
|
22094
|
-
"
|
|
22095
|
-
"
|
|
22096
|
-
"fieldName": "
|
|
22097
|
-
"inheritedFrom": {
|
|
22098
|
-
"name": "DataAriaLabelMixin",
|
|
22099
|
-
"module": "src/utils/mixins/DataAriaLabelMixin.ts"
|
|
22100
|
-
}
|
|
22366
|
+
"description": "Whether to loop navigation when reaching the end of the list.\nIf 'true', pressing the down arrow on the last item will focus the first item,\nand pressing the up arrow on the first item will focus the last item.\nIf 'false', navigation will stop at the first or last item.",
|
|
22367
|
+
"default": "'true'",
|
|
22368
|
+
"fieldName": "loop"
|
|
22101
22369
|
},
|
|
22102
22370
|
{
|
|
22103
|
-
"name": "
|
|
22371
|
+
"name": "initial-focus",
|
|
22104
22372
|
"type": {
|
|
22105
|
-
"text": "
|
|
22373
|
+
"text": "number"
|
|
22106
22374
|
},
|
|
22107
|
-
"description": "
|
|
22108
|
-
"default": "
|
|
22109
|
-
"fieldName": "
|
|
22110
|
-
"inheritedFrom": {
|
|
22111
|
-
"name": "DisabledMixin",
|
|
22112
|
-
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
22113
|
-
}
|
|
22375
|
+
"description": "The index of the item that should receive focus when the list is first rendered.\nIf the index is out of bounds, the focused element will be clamped to the nearest valid index.",
|
|
22376
|
+
"default": "0",
|
|
22377
|
+
"fieldName": "initialFocus"
|
|
22114
22378
|
}
|
|
22115
22379
|
],
|
|
22116
22380
|
"mixins": [
|
|
22117
22381
|
{
|
|
22118
|
-
"name": "
|
|
22119
|
-
"module": "/src/utils/mixins/
|
|
22382
|
+
"name": "ListNavigationMixin",
|
|
22383
|
+
"module": "/src/utils/mixins/ListNavigationMixin"
|
|
22120
22384
|
},
|
|
22121
22385
|
{
|
|
22122
|
-
"name": "
|
|
22123
|
-
"module": "/src/utils/mixins/
|
|
22386
|
+
"name": "CaptureDestroyEventForChildElement",
|
|
22387
|
+
"module": "/src/utils/mixins/lifecycle/CaptureDestroyEventForChildElement"
|
|
22124
22388
|
}
|
|
22125
22389
|
],
|
|
22126
22390
|
"superclass": {
|
|
22127
22391
|
"name": "Component",
|
|
22128
22392
|
"module": "/src/models"
|
|
22129
22393
|
},
|
|
22130
|
-
"tagName": "mdc-
|
|
22131
|
-
"jsDoc": "/**\n *
|
|
22394
|
+
"tagName": "mdc-list",
|
|
22395
|
+
"jsDoc": "/**\n * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n *\n * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n * `mdc-listitem` components can be placed in the default slot.\n *\n * @tagname mdc-list\n *\n * @slot default - This is a default/unnamed slot, where listitems can be placed.\n * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.\n *\n * @csspart container - The container slot around the list items\n */",
|
|
22132
22396
|
"customElement": true
|
|
22133
22397
|
}
|
|
22134
22398
|
],
|
|
@@ -22137,90 +22401,123 @@
|
|
|
22137
22401
|
"kind": "js",
|
|
22138
22402
|
"name": "default",
|
|
22139
22403
|
"declaration": {
|
|
22140
|
-
"name": "
|
|
22141
|
-
"module": "components/
|
|
22404
|
+
"name": "List",
|
|
22405
|
+
"module": "components/list/list.component.js"
|
|
22142
22406
|
}
|
|
22143
22407
|
}
|
|
22144
22408
|
]
|
|
22145
22409
|
},
|
|
22146
22410
|
{
|
|
22147
22411
|
"kind": "javascript-module",
|
|
22148
|
-
"path": "components/
|
|
22412
|
+
"path": "components/listbox/listbox.component.js",
|
|
22149
22413
|
"declarations": [
|
|
22150
22414
|
{
|
|
22151
22415
|
"kind": "class",
|
|
22152
|
-
"description": "
|
|
22153
|
-
"name": "
|
|
22416
|
+
"description": "listbox component presents a list of options and allows a user to select one of them.\n\nNotes:\n- This is a standalone listbox component. Select has its own mdc-selectlistbox component.\n- this component has name and value attributes and also emits change event,\n but it is not a form control (yet).",
|
|
22417
|
+
"name": "ListBox",
|
|
22418
|
+
"cssProperties": [
|
|
22419
|
+
{
|
|
22420
|
+
"description": "max height of the listbox",
|
|
22421
|
+
"name": "--mdc-listbox-max-height"
|
|
22422
|
+
}
|
|
22423
|
+
],
|
|
22154
22424
|
"cssParts": [
|
|
22155
22425
|
{
|
|
22156
|
-
"description": "The container
|
|
22426
|
+
"description": "The container of the listbox",
|
|
22157
22427
|
"name": "container"
|
|
22158
22428
|
}
|
|
22159
22429
|
],
|
|
22160
22430
|
"slots": [
|
|
22161
22431
|
{
|
|
22162
|
-
"description": "This is a default/unnamed slot, where
|
|
22432
|
+
"description": "This is a default/unnamed slot, where options and optgroups are placed",
|
|
22163
22433
|
"name": "default"
|
|
22164
|
-
},
|
|
22165
|
-
{
|
|
22166
|
-
"description": "This slot is used to pass a header for the list, which can be a `mdc-listheader` component.",
|
|
22167
|
-
"name": "list-header"
|
|
22168
22434
|
}
|
|
22169
22435
|
],
|
|
22170
22436
|
"members": [
|
|
22171
22437
|
{
|
|
22172
22438
|
"kind": "field",
|
|
22173
|
-
"name": "
|
|
22439
|
+
"name": "name",
|
|
22174
22440
|
"type": {
|
|
22175
|
-
"text": "
|
|
22441
|
+
"text": "undefined | string | undefined"
|
|
22176
22442
|
},
|
|
22177
|
-
"
|
|
22178
|
-
"description": "
|
|
22179
|
-
"
|
|
22180
|
-
"attribute": "loop",
|
|
22443
|
+
"default": "undefined",
|
|
22444
|
+
"description": "The name attribute is used to identify the listbox",
|
|
22445
|
+
"attribute": "name",
|
|
22181
22446
|
"reflects": true
|
|
22182
22447
|
},
|
|
22183
22448
|
{
|
|
22184
22449
|
"kind": "field",
|
|
22185
|
-
"name": "
|
|
22450
|
+
"name": "value",
|
|
22186
22451
|
"type": {
|
|
22187
|
-
"text": "
|
|
22452
|
+
"text": "undefined | string | undefined"
|
|
22188
22453
|
},
|
|
22189
|
-
"
|
|
22190
|
-
"description": "The
|
|
22191
|
-
"
|
|
22192
|
-
"attribute": "initial-focus",
|
|
22454
|
+
"default": "undefined",
|
|
22455
|
+
"description": "The value attribute is used to represent the last selected option's value in the listbox.",
|
|
22456
|
+
"attribute": "value",
|
|
22193
22457
|
"reflects": true
|
|
22194
22458
|
},
|
|
22195
22459
|
{
|
|
22196
22460
|
"kind": "method",
|
|
22197
|
-
"name": "
|
|
22198
|
-
"privacy": "
|
|
22461
|
+
"name": "setSelectedOption",
|
|
22462
|
+
"privacy": "private",
|
|
22463
|
+
"return": {
|
|
22464
|
+
"type": {
|
|
22465
|
+
"text": "void"
|
|
22466
|
+
}
|
|
22467
|
+
},
|
|
22199
22468
|
"parameters": [
|
|
22200
22469
|
{
|
|
22201
|
-
"name": "
|
|
22470
|
+
"name": "option",
|
|
22471
|
+
"optional": true,
|
|
22202
22472
|
"type": {
|
|
22203
|
-
"text": "
|
|
22204
|
-
}
|
|
22473
|
+
"text": "Option | null"
|
|
22474
|
+
},
|
|
22475
|
+
"description": "The option element in DOM which gets selected."
|
|
22205
22476
|
},
|
|
22206
22477
|
{
|
|
22207
|
-
"name": "
|
|
22208
|
-
"
|
|
22209
|
-
|
|
22210
|
-
}
|
|
22478
|
+
"name": "fireEvent",
|
|
22479
|
+
"default": "true",
|
|
22480
|
+
"description": "A boolean flag to indicate whether to fire the change event or not."
|
|
22211
22481
|
},
|
|
22212
22482
|
{
|
|
22213
|
-
"name": "
|
|
22483
|
+
"name": "updateOptions",
|
|
22484
|
+
"default": "true",
|
|
22485
|
+
"description": "Whether update the other options or not"
|
|
22486
|
+
}
|
|
22487
|
+
],
|
|
22488
|
+
"description": "When an option is selected, this method updates local and options' DOM state and fires the change event."
|
|
22489
|
+
},
|
|
22490
|
+
{
|
|
22491
|
+
"kind": "method",
|
|
22492
|
+
"name": "updateSelectedInChildOptions",
|
|
22493
|
+
"privacy": "private",
|
|
22494
|
+
"return": {
|
|
22495
|
+
"type": {
|
|
22496
|
+
"text": "void"
|
|
22497
|
+
}
|
|
22498
|
+
},
|
|
22499
|
+
"parameters": [
|
|
22500
|
+
{
|
|
22501
|
+
"name": "selectedOption",
|
|
22502
|
+
"optional": true,
|
|
22214
22503
|
"type": {
|
|
22215
|
-
"text": "
|
|
22216
|
-
}
|
|
22504
|
+
"text": "Option | null"
|
|
22505
|
+
},
|
|
22506
|
+
"description": "The option which gets selected"
|
|
22507
|
+
}
|
|
22508
|
+
],
|
|
22509
|
+
"description": "Update all options selection state in the DDM."
|
|
22510
|
+
},
|
|
22511
|
+
{
|
|
22512
|
+
"kind": "method",
|
|
22513
|
+
"name": "fireEvents",
|
|
22514
|
+
"privacy": "private",
|
|
22515
|
+
"return": {
|
|
22516
|
+
"type": {
|
|
22517
|
+
"text": "void"
|
|
22217
22518
|
}
|
|
22218
|
-
|
|
22219
|
-
|
|
22220
|
-
{
|
|
22221
|
-
"kind": "field",
|
|
22222
|
-
"name": "itemsStore",
|
|
22223
|
-
"default": "new ElementStore<ListItem>(this, { isValidItem: this.isValidItem, onStoreUpdate: this.onElementStoreUpdate.bind(this), })"
|
|
22519
|
+
},
|
|
22520
|
+
"description": "Dispatch change event when an option is selected."
|
|
22224
22521
|
},
|
|
22225
22522
|
{
|
|
22226
22523
|
"kind": "method",
|
|
@@ -22357,24 +22654,34 @@
|
|
|
22357
22654
|
}
|
|
22358
22655
|
}
|
|
22359
22656
|
],
|
|
22657
|
+
"events": [
|
|
22658
|
+
{
|
|
22659
|
+
"name": "change",
|
|
22660
|
+
"type": {
|
|
22661
|
+
"text": "Event"
|
|
22662
|
+
},
|
|
22663
|
+
"description": "(React: onChange) This event is emitted when the selected item changed",
|
|
22664
|
+
"reactName": "onChange"
|
|
22665
|
+
}
|
|
22666
|
+
],
|
|
22360
22667
|
"attributes": [
|
|
22361
22668
|
{
|
|
22362
|
-
"name": "
|
|
22669
|
+
"name": "name",
|
|
22363
22670
|
"type": {
|
|
22364
|
-
"text": "
|
|
22671
|
+
"text": "undefined | string | undefined"
|
|
22365
22672
|
},
|
|
22366
|
-
"
|
|
22367
|
-
"
|
|
22368
|
-
"fieldName": "
|
|
22673
|
+
"default": "undefined",
|
|
22674
|
+
"description": "The name attribute is used to identify the listbox",
|
|
22675
|
+
"fieldName": "name"
|
|
22369
22676
|
},
|
|
22370
22677
|
{
|
|
22371
|
-
"name": "
|
|
22678
|
+
"name": "value",
|
|
22372
22679
|
"type": {
|
|
22373
|
-
"text": "
|
|
22680
|
+
"text": "undefined | string | undefined"
|
|
22374
22681
|
},
|
|
22375
|
-
"
|
|
22376
|
-
"
|
|
22377
|
-
"fieldName": "
|
|
22682
|
+
"default": "undefined",
|
|
22683
|
+
"description": "The value attribute is used to represent the last selected option's value in the listbox.",
|
|
22684
|
+
"fieldName": "value"
|
|
22378
22685
|
}
|
|
22379
22686
|
],
|
|
22380
22687
|
"mixins": [
|
|
@@ -22391,8 +22698,8 @@
|
|
|
22391
22698
|
"name": "Component",
|
|
22392
22699
|
"module": "/src/models"
|
|
22393
22700
|
},
|
|
22394
|
-
"tagName": "mdc-
|
|
22395
|
-
"jsDoc": "/**\n *
|
|
22701
|
+
"tagName": "mdc-listbox",
|
|
22702
|
+
"jsDoc": "/**\n * listbox component presents a list of options and allows a user to select one of them.\n *\n * Notes:\n * - This is a standalone listbox component. Select has its own mdc-selectlistbox component.\n * - this component has name and value attributes and also emits change event,\n * but it is not a form control (yet).\n *\n * @dependency mdc-list\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-option\n * @dependency mdc-optgroup\n *\n * @tagname mdc-listbox\n *\n * @cssproperty --mdc-listbox-max-height - max height of the listbox\n *\n * @slot default - This is a default/unnamed slot, where options and optgroups are placed\n *\n * @csspart container - The container of the listbox\n *\n * @event change - (React: onChange) This event is emitted when the selected item changed\n */",
|
|
22396
22703
|
"customElement": true
|
|
22397
22704
|
}
|
|
22398
22705
|
],
|
|
@@ -22401,8 +22708,8 @@
|
|
|
22401
22708
|
"kind": "js",
|
|
22402
22709
|
"name": "default",
|
|
22403
22710
|
"declaration": {
|
|
22404
|
-
"name": "
|
|
22405
|
-
"module": "components/
|
|
22711
|
+
"name": "ListBox",
|
|
22712
|
+
"module": "components/listbox/listbox.component.js"
|
|
22406
22713
|
}
|
|
22407
22714
|
}
|
|
22408
22715
|
]
|
|
@@ -22559,617 +22866,199 @@
|
|
|
22559
22866
|
},
|
|
22560
22867
|
{
|
|
22561
22868
|
"description": "Allows customization of the background color on hover.",
|
|
22562
|
-
"name": "--mdc-listitem-background-color-hover"
|
|
22563
|
-
},
|
|
22564
|
-
{
|
|
22565
|
-
"description": "Allows customization of the background color when pressed.",
|
|
22566
|
-
"name": "--mdc-listitem-background-color-active"
|
|
22567
|
-
},
|
|
22568
|
-
{
|
|
22569
|
-
"description": "Allows customization of the primary label, side header and subline text slot color.",
|
|
22570
|
-
"name": "--mdc-listitem-primary-label-color"
|
|
22571
|
-
},
|
|
22572
|
-
{
|
|
22573
|
-
"description": "Allows customization of the secondary and tertiary label text slot color.",
|
|
22574
|
-
"name": "--mdc-listitem-secondary-label-color"
|
|
22575
|
-
},
|
|
22576
|
-
{
|
|
22577
|
-
"description": "Allows customization of the disabled color.",
|
|
22578
|
-
"name": "--mdc-listitem-disabled-color"
|
|
22579
|
-
},
|
|
22580
|
-
{
|
|
22581
|
-
"description": "Allows customization of column gap.",
|
|
22582
|
-
"name": "--mdc-listitem-column-gap"
|
|
22583
|
-
},
|
|
22584
|
-
{
|
|
22585
|
-
"description": "Allows customization of padding left and right.",
|
|
22586
|
-
"name": "--mdc-listitem-padding-left-right"
|
|
22587
|
-
},
|
|
22588
|
-
{
|
|
22589
|
-
"description": "Allows customization of padding top and bottom.",
|
|
22590
|
-
"name": "--mdc-listitem-padding-top-bottom"
|
|
22591
|
-
},
|
|
22592
|
-
{
|
|
22593
|
-
"description": "Allows customization of the cursor.",
|
|
22594
|
-
"name": "--mdc-listitem-cursor"
|
|
22595
|
-
},
|
|
22596
|
-
{
|
|
22597
|
-
"description": "Allows customization of the width of the list item.",
|
|
22598
|
-
"name": "--mdc-listitem-width"
|
|
22599
|
-
},
|
|
22600
|
-
{
|
|
22601
|
-
"description": "Allows customization of the height of the list item.",
|
|
22602
|
-
"name": "--mdc-listitem-height"
|
|
22603
|
-
}
|
|
22604
|
-
],
|
|
22605
|
-
"cssParts": [
|
|
22606
|
-
{
|
|
22607
|
-
"description": "Allows customization of the leading part.",
|
|
22608
|
-
"name": "leading"
|
|
22609
|
-
},
|
|
22610
|
-
{
|
|
22611
|
-
"description": "Allows customization of the leading text part.",
|
|
22612
|
-
"name": "leading-text"
|
|
22613
|
-
},
|
|
22614
|
-
{
|
|
22615
|
-
"description": "Allows customization of the trailing part.",
|
|
22616
|
-
"name": "trailing"
|
|
22617
|
-
},
|
|
22618
|
-
{
|
|
22619
|
-
"description": "Allows customization of the trailing text part.",
|
|
22620
|
-
"name": "trailing-text"
|
|
22621
|
-
}
|
|
22622
|
-
],
|
|
22623
|
-
"slots": [
|
|
22624
|
-
{
|
|
22625
|
-
"description": "slot for list item controls to appear of leading end.",
|
|
22626
|
-
"name": "leading-controls"
|
|
22627
|
-
},
|
|
22628
|
-
{
|
|
22629
|
-
"description": "slot for list item primary label.",
|
|
22630
|
-
"name": "leading-text-primary-label"
|
|
22631
|
-
},
|
|
22632
|
-
{
|
|
22633
|
-
"description": "slot for list item secondary label.",
|
|
22634
|
-
"name": "leading-text-secondary-label"
|
|
22635
|
-
},
|
|
22636
|
-
{
|
|
22637
|
-
"description": "slot for list item tertiary label.",
|
|
22638
|
-
"name": "leading-text-tertiary-label"
|
|
22639
|
-
},
|
|
22640
|
-
{
|
|
22641
|
-
"description": "slot for list item side header text.",
|
|
22642
|
-
"name": "trailing-text-side-header"
|
|
22643
|
-
},
|
|
22644
|
-
{
|
|
22645
|
-
"description": "slot for list item subline text.",
|
|
22646
|
-
"name": "trailing-text-subline"
|
|
22647
|
-
},
|
|
22648
|
-
{
|
|
22649
|
-
"description": "slot for list item controls to appear of trailing end.",
|
|
22650
|
-
"name": "trailing-controls"
|
|
22651
|
-
},
|
|
22652
|
-
{
|
|
22653
|
-
"description": "content slot can be used to override the content completely. Be aware that this will override the default content of the list item.",
|
|
22654
|
-
"name": "content"
|
|
22655
|
-
}
|
|
22656
|
-
],
|
|
22657
|
-
"members": [
|
|
22658
|
-
{
|
|
22659
|
-
"kind": "field",
|
|
22660
|
-
"name": "variant",
|
|
22661
|
-
"type": {
|
|
22662
|
-
"text": "ListItemVariants"
|
|
22663
|
-
},
|
|
22664
|
-
"description": "The variant of the list item. It can be a pill, rectangle or a full-width.",
|
|
22665
|
-
"default": "'full-width'",
|
|
22666
|
-
"attribute": "variant",
|
|
22667
|
-
"reflects": true
|
|
22668
|
-
},
|
|
22669
|
-
{
|
|
22670
|
-
"kind": "field",
|
|
22671
|
-
"name": "label",
|
|
22672
|
-
"type": {
|
|
22673
|
-
"text": "string | undefined"
|
|
22674
|
-
},
|
|
22675
|
-
"description": "The primary label of the list item.\nThis appears on the leading side of the list item.",
|
|
22676
|
-
"attribute": "label",
|
|
22677
|
-
"reflects": true
|
|
22678
|
-
},
|
|
22679
|
-
{
|
|
22680
|
-
"kind": "field",
|
|
22681
|
-
"name": "secondaryLabel",
|
|
22682
|
-
"type": {
|
|
22683
|
-
"text": "string | undefined"
|
|
22684
|
-
},
|
|
22685
|
-
"description": "The secondary label of the list item.\nThis appears on the leading side of the list item.",
|
|
22686
|
-
"attribute": "secondary-label",
|
|
22687
|
-
"reflects": true
|
|
22688
|
-
},
|
|
22689
|
-
{
|
|
22690
|
-
"kind": "field",
|
|
22691
|
-
"name": "tertiaryLabel",
|
|
22692
|
-
"type": {
|
|
22693
|
-
"text": "string | undefined"
|
|
22694
|
-
},
|
|
22695
|
-
"description": "The tertiary label of the list item.\nThis appears on the leading side of the list item.",
|
|
22696
|
-
"attribute": "tertiary-label",
|
|
22697
|
-
"reflects": true
|
|
22698
|
-
},
|
|
22699
|
-
{
|
|
22700
|
-
"kind": "field",
|
|
22701
|
-
"name": "sideHeaderText",
|
|
22702
|
-
"type": {
|
|
22703
|
-
"text": "string | undefined"
|
|
22704
|
-
},
|
|
22705
|
-
"description": "The header text of the list item.\nThis appears on the trailing side of the list item.",
|
|
22706
|
-
"attribute": "side-header-text",
|
|
22707
|
-
"reflects": true
|
|
22708
|
-
},
|
|
22709
|
-
{
|
|
22710
|
-
"kind": "field",
|
|
22711
|
-
"name": "sublineText",
|
|
22712
|
-
"type": {
|
|
22713
|
-
"text": "string | undefined"
|
|
22714
|
-
},
|
|
22715
|
-
"description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
|
|
22716
|
-
"attribute": "subline-text",
|
|
22717
|
-
"reflects": true
|
|
22718
|
-
},
|
|
22719
|
-
{
|
|
22720
|
-
"kind": "field",
|
|
22721
|
-
"name": "softDisabled",
|
|
22722
|
-
"type": {
|
|
22723
|
-
"text": "boolean | undefined"
|
|
22724
|
-
},
|
|
22725
|
-
"description": "Indicates whether the element is soft disabled.\nWhen set to `true`, the element appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe element behaves like a disabled element, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
|
|
22726
|
-
"default": "undefined",
|
|
22727
|
-
"attribute": "soft-disabled",
|
|
22728
|
-
"reflects": true
|
|
22729
|
-
},
|
|
22730
|
-
{
|
|
22731
|
-
"kind": "field",
|
|
22732
|
-
"name": "dataIndex",
|
|
22733
|
-
"type": {
|
|
22734
|
-
"text": "number | undefined"
|
|
22735
|
-
},
|
|
22736
|
-
"description": "Data attribute to define the index of the list item in a list.\nThis also set the `aria-posinset` attribute for accessibility purposes.\n\nIt is required when the list item is used inside a virtualized list where the items are not sequentially rendered.\nIt should be a zero-based index.",
|
|
22737
|
-
"default": "undefined",
|
|
22738
|
-
"attribute": "data-index",
|
|
22739
|
-
"reflects": true
|
|
22740
|
-
},
|
|
22741
|
-
{
|
|
22742
|
-
"kind": "field",
|
|
22743
|
-
"name": "active",
|
|
22744
|
-
"type": {
|
|
22745
|
-
"text": "boolean | undefined"
|
|
22746
|
-
},
|
|
22747
|
-
"description": "Indicates whether the list item is active.\nWhen set to true, the list item appears in a active state.\n\nNOTE: this is a visual state only, it does not affect the behavior or a11y of the list item.",
|
|
22748
|
-
"default": "undefined",
|
|
22749
|
-
"attribute": "active",
|
|
22750
|
-
"reflects": true
|
|
22751
|
-
},
|
|
22752
|
-
{
|
|
22753
|
-
"kind": "method",
|
|
22754
|
-
"name": "handleClick",
|
|
22755
|
-
"privacy": "private",
|
|
22756
|
-
"return": {
|
|
22757
|
-
"type": {
|
|
22758
|
-
"text": "void"
|
|
22759
|
-
}
|
|
22760
|
-
},
|
|
22761
|
-
"parameters": [
|
|
22762
|
-
{
|
|
22763
|
-
"name": "event",
|
|
22764
|
-
"type": {
|
|
22765
|
-
"text": "MouseEvent"
|
|
22766
|
-
},
|
|
22767
|
-
"description": "The mouse event triggered when the list item is clicked."
|
|
22768
|
-
}
|
|
22769
|
-
],
|
|
22770
|
-
"description": "Handles the click event on the list item.\nPrevents click when listitem is disabled"
|
|
22869
|
+
"name": "--mdc-listitem-background-color-hover"
|
|
22771
22870
|
},
|
|
22772
22871
|
{
|
|
22773
|
-
"
|
|
22774
|
-
"name": "
|
|
22775
|
-
"privacy": "protected",
|
|
22776
|
-
"return": {
|
|
22777
|
-
"type": {
|
|
22778
|
-
"text": "void"
|
|
22779
|
-
}
|
|
22780
|
-
},
|
|
22781
|
-
"parameters": [
|
|
22782
|
-
{
|
|
22783
|
-
"name": "event",
|
|
22784
|
-
"type": {
|
|
22785
|
-
"text": "KeyboardEvent"
|
|
22786
|
-
},
|
|
22787
|
-
"description": "The keyboard event triggered when a key is pressed down."
|
|
22788
|
-
}
|
|
22789
|
-
],
|
|
22790
|
-
"description": "Fires the click event when the enter or space key is pressed down.\nThis behavior is similar to a button click and key interaction."
|
|
22872
|
+
"description": "Allows customization of the background color when pressed.",
|
|
22873
|
+
"name": "--mdc-listitem-background-color-active"
|
|
22791
22874
|
},
|
|
22792
22875
|
{
|
|
22793
|
-
"
|
|
22794
|
-
"name": "
|
|
22795
|
-
"privacy": "protected",
|
|
22796
|
-
"return": {
|
|
22797
|
-
"type": {
|
|
22798
|
-
"text": ""
|
|
22799
|
-
}
|
|
22800
|
-
},
|
|
22801
|
-
"parameters": [
|
|
22802
|
-
{
|
|
22803
|
-
"name": "event",
|
|
22804
|
-
"type": {
|
|
22805
|
-
"text": "Event"
|
|
22806
|
-
},
|
|
22807
|
-
"description": "The event that triggered the click."
|
|
22808
|
-
}
|
|
22809
|
-
],
|
|
22810
|
-
"description": "Triggers a click event on the list item."
|
|
22876
|
+
"description": "Allows customization of the primary label, side header and subline text slot color.",
|
|
22877
|
+
"name": "--mdc-listitem-primary-label-color"
|
|
22811
22878
|
},
|
|
22812
22879
|
{
|
|
22813
|
-
"
|
|
22814
|
-
"name": "
|
|
22815
|
-
"privacy": "protected",
|
|
22816
|
-
"return": {
|
|
22817
|
-
"type": {
|
|
22818
|
-
"text": ""
|
|
22819
|
-
}
|
|
22820
|
-
},
|
|
22821
|
-
"parameters": [
|
|
22822
|
-
{
|
|
22823
|
-
"name": "slotName",
|
|
22824
|
-
"type": {
|
|
22825
|
-
"text": "string"
|
|
22826
|
-
},
|
|
22827
|
-
"description": "The name of the slot to be used."
|
|
22828
|
-
},
|
|
22829
|
-
{
|
|
22830
|
-
"name": "type",
|
|
22831
|
-
"type": {
|
|
22832
|
-
"text": "TextType"
|
|
22833
|
-
},
|
|
22834
|
-
"description": "The type of the text element."
|
|
22835
|
-
},
|
|
22836
|
-
{
|
|
22837
|
-
"name": "content",
|
|
22838
|
-
"optional": true,
|
|
22839
|
-
"type": {
|
|
22840
|
-
"text": "string"
|
|
22841
|
-
},
|
|
22842
|
-
"description": "The text content to be displayed within the slot."
|
|
22843
|
-
}
|
|
22844
|
-
],
|
|
22845
|
-
"description": "Generates a template for a text slot with the specified content."
|
|
22880
|
+
"description": "Allows customization of the secondary and tertiary label text slot color.",
|
|
22881
|
+
"name": "--mdc-listitem-secondary-label-color"
|
|
22846
22882
|
},
|
|
22847
22883
|
{
|
|
22848
|
-
"
|
|
22849
|
-
"name": "
|
|
22850
|
-
"privacy": "private",
|
|
22851
|
-
"return": {
|
|
22852
|
-
"type": {
|
|
22853
|
-
"text": "void"
|
|
22854
|
-
}
|
|
22855
|
-
},
|
|
22856
|
-
"parameters": [
|
|
22857
|
-
{
|
|
22858
|
-
"name": "disabled",
|
|
22859
|
-
"default": "false",
|
|
22860
|
-
"type": {
|
|
22861
|
-
"text": "boolean"
|
|
22862
|
-
},
|
|
22863
|
-
"description": "Whether to disable or enable the controls."
|
|
22864
|
-
}
|
|
22865
|
-
],
|
|
22866
|
-
"description": "Disable or enable all slotted elements in the leading and trailing slots.\nThis is useful when the list item is disabled, to prevent the user from interacting with the controls."
|
|
22884
|
+
"description": "Allows customization of the disabled color.",
|
|
22885
|
+
"name": "--mdc-listitem-disabled-color"
|
|
22867
22886
|
},
|
|
22868
22887
|
{
|
|
22869
|
-
"
|
|
22870
|
-
"name": "
|
|
22871
|
-
"privacy": "protected",
|
|
22872
|
-
"description": "Renders the trailing controls slot.",
|
|
22873
|
-
"return": {
|
|
22874
|
-
"type": {
|
|
22875
|
-
"text": ""
|
|
22876
|
-
}
|
|
22877
|
-
}
|
|
22888
|
+
"description": "Allows customization of column gap.",
|
|
22889
|
+
"name": "--mdc-listitem-column-gap"
|
|
22878
22890
|
},
|
|
22879
22891
|
{
|
|
22880
|
-
"
|
|
22881
|
-
"name": "
|
|
22882
|
-
"privacy": "protected",
|
|
22883
|
-
"description": "Renders the leading controls slot.",
|
|
22884
|
-
"return": {
|
|
22885
|
-
"type": {
|
|
22886
|
-
"text": ""
|
|
22887
|
-
}
|
|
22888
|
-
}
|
|
22892
|
+
"description": "Allows customization of padding left and right.",
|
|
22893
|
+
"name": "--mdc-listitem-padding-left-right"
|
|
22889
22894
|
},
|
|
22890
22895
|
{
|
|
22891
|
-
"
|
|
22892
|
-
"name": "
|
|
22893
|
-
"privacy": "protected",
|
|
22894
|
-
"return": {
|
|
22895
|
-
"type": {
|
|
22896
|
-
"text": "void"
|
|
22897
|
-
}
|
|
22898
|
-
},
|
|
22899
|
-
"parameters": [
|
|
22900
|
-
{
|
|
22901
|
-
"name": "event",
|
|
22902
|
-
"type": {
|
|
22903
|
-
"text": "Event"
|
|
22904
|
-
},
|
|
22905
|
-
"description": "The mouse event triggered when a click occurs."
|
|
22906
|
-
}
|
|
22907
|
-
],
|
|
22908
|
-
"description": "Stops the click event from propagating to parent elements. In case of keyboard events,\nit stops the propagation for Enter and Space keys.\nThis is useful when the list item contains controls that\nshould not trigger the click event on the list item itself."
|
|
22896
|
+
"description": "Allows customization of padding top and bottom.",
|
|
22897
|
+
"name": "--mdc-listitem-padding-top-bottom"
|
|
22909
22898
|
},
|
|
22910
22899
|
{
|
|
22911
|
-
"
|
|
22912
|
-
"name": "
|
|
22913
|
-
"type": {
|
|
22914
|
-
"text": "boolean | undefined"
|
|
22915
|
-
},
|
|
22916
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
22917
|
-
"default": "undefined",
|
|
22918
|
-
"attribute": "disabled",
|
|
22919
|
-
"reflects": true,
|
|
22920
|
-
"inheritedFrom": {
|
|
22921
|
-
"name": "DisabledMixin",
|
|
22922
|
-
"module": "utils/mixins/DisabledMixin.js"
|
|
22923
|
-
}
|
|
22900
|
+
"description": "Allows customization of the cursor.",
|
|
22901
|
+
"name": "--mdc-listitem-cursor"
|
|
22924
22902
|
},
|
|
22925
22903
|
{
|
|
22926
|
-
"
|
|
22927
|
-
"name": "
|
|
22928
|
-
|
|
22929
|
-
|
|
22930
|
-
|
|
22931
|
-
"
|
|
22932
|
-
"description": "This property specifies the tab order of the element.",
|
|
22933
|
-
"attribute": "tabIndex",
|
|
22934
|
-
"reflects": true,
|
|
22935
|
-
"inheritedFrom": {
|
|
22936
|
-
"name": "TabIndexMixin",
|
|
22937
|
-
"module": "utils/mixins/TabIndexMixin.js"
|
|
22938
|
-
}
|
|
22904
|
+
"description": "Allows customization of the width of the list item.",
|
|
22905
|
+
"name": "--mdc-listitem-width"
|
|
22906
|
+
},
|
|
22907
|
+
{
|
|
22908
|
+
"description": "Allows customization of the height of the list item.",
|
|
22909
|
+
"name": "--mdc-listitem-height"
|
|
22939
22910
|
}
|
|
22940
22911
|
],
|
|
22941
|
-
"
|
|
22912
|
+
"cssParts": [
|
|
22942
22913
|
{
|
|
22943
|
-
"description": "
|
|
22944
|
-
"name": "
|
|
22945
|
-
"reactName": "onClick"
|
|
22914
|
+
"description": "Allows customization of the leading part.",
|
|
22915
|
+
"name": "leading"
|
|
22946
22916
|
},
|
|
22947
22917
|
{
|
|
22948
|
-
"description": "
|
|
22949
|
-
"name": "
|
|
22950
|
-
"reactName": "onKeyDown"
|
|
22918
|
+
"description": "Allows customization of the leading text part.",
|
|
22919
|
+
"name": "leading-text"
|
|
22951
22920
|
},
|
|
22952
22921
|
{
|
|
22953
|
-
"description": "
|
|
22954
|
-
"name": "
|
|
22955
|
-
"reactName": "onKeyUp"
|
|
22922
|
+
"description": "Allows customization of the trailing part.",
|
|
22923
|
+
"name": "trailing"
|
|
22956
22924
|
},
|
|
22957
22925
|
{
|
|
22958
|
-
"description": "
|
|
22959
|
-
"name": "
|
|
22960
|
-
|
|
22926
|
+
"description": "Allows customization of the trailing text part.",
|
|
22927
|
+
"name": "trailing-text"
|
|
22928
|
+
}
|
|
22929
|
+
],
|
|
22930
|
+
"slots": [
|
|
22931
|
+
{
|
|
22932
|
+
"description": "slot for list item controls to appear of leading end.",
|
|
22933
|
+
"name": "leading-controls"
|
|
22961
22934
|
},
|
|
22962
22935
|
{
|
|
22963
|
-
"description": "
|
|
22964
|
-
"name": "
|
|
22965
|
-
"reactName": "onEnabled"
|
|
22936
|
+
"description": "slot for list item primary label.",
|
|
22937
|
+
"name": "leading-text-primary-label"
|
|
22966
22938
|
},
|
|
22967
22939
|
{
|
|
22968
|
-
"description": "
|
|
22969
|
-
"name": "
|
|
22970
|
-
"reactName": "onDisabled"
|
|
22940
|
+
"description": "slot for list item secondary label.",
|
|
22941
|
+
"name": "leading-text-secondary-label"
|
|
22971
22942
|
},
|
|
22972
22943
|
{
|
|
22973
|
-
"description": "
|
|
22974
|
-
"name": "
|
|
22975
|
-
"reactName": "onCreated"
|
|
22944
|
+
"description": "slot for list item tertiary label.",
|
|
22945
|
+
"name": "leading-text-tertiary-label"
|
|
22976
22946
|
},
|
|
22977
22947
|
{
|
|
22978
|
-
"description": "
|
|
22979
|
-
"name": "
|
|
22980
|
-
|
|
22948
|
+
"description": "slot for list item side header text.",
|
|
22949
|
+
"name": "trailing-text-side-header"
|
|
22950
|
+
},
|
|
22951
|
+
{
|
|
22952
|
+
"description": "slot for list item subline text.",
|
|
22953
|
+
"name": "trailing-text-subline"
|
|
22954
|
+
},
|
|
22955
|
+
{
|
|
22956
|
+
"description": "slot for list item controls to appear of trailing end.",
|
|
22957
|
+
"name": "trailing-controls"
|
|
22958
|
+
},
|
|
22959
|
+
{
|
|
22960
|
+
"description": "content slot can be used to override the content completely. Be aware that this will override the default content of the list item.",
|
|
22961
|
+
"name": "content"
|
|
22981
22962
|
}
|
|
22982
22963
|
],
|
|
22983
|
-
"
|
|
22964
|
+
"members": [
|
|
22984
22965
|
{
|
|
22966
|
+
"kind": "field",
|
|
22985
22967
|
"name": "variant",
|
|
22986
22968
|
"type": {
|
|
22987
22969
|
"text": "ListItemVariants"
|
|
22988
22970
|
},
|
|
22989
22971
|
"description": "The variant of the list item. It can be a pill, rectangle or a full-width.",
|
|
22990
22972
|
"default": "'full-width'",
|
|
22991
|
-
"
|
|
22973
|
+
"attribute": "variant",
|
|
22974
|
+
"reflects": true
|
|
22992
22975
|
},
|
|
22993
22976
|
{
|
|
22977
|
+
"kind": "field",
|
|
22994
22978
|
"name": "label",
|
|
22995
22979
|
"type": {
|
|
22996
22980
|
"text": "string | undefined"
|
|
22997
22981
|
},
|
|
22998
22982
|
"description": "The primary label of the list item.\nThis appears on the leading side of the list item.",
|
|
22999
|
-
"
|
|
22983
|
+
"attribute": "label",
|
|
22984
|
+
"reflects": true
|
|
23000
22985
|
},
|
|
23001
22986
|
{
|
|
23002
|
-
"
|
|
22987
|
+
"kind": "field",
|
|
22988
|
+
"name": "secondaryLabel",
|
|
23003
22989
|
"type": {
|
|
23004
22990
|
"text": "string | undefined"
|
|
23005
22991
|
},
|
|
23006
22992
|
"description": "The secondary label of the list item.\nThis appears on the leading side of the list item.",
|
|
23007
|
-
"
|
|
22993
|
+
"attribute": "secondary-label",
|
|
22994
|
+
"reflects": true
|
|
23008
22995
|
},
|
|
23009
22996
|
{
|
|
23010
|
-
"
|
|
22997
|
+
"kind": "field",
|
|
22998
|
+
"name": "tertiaryLabel",
|
|
23011
22999
|
"type": {
|
|
23012
23000
|
"text": "string | undefined"
|
|
23013
23001
|
},
|
|
23014
23002
|
"description": "The tertiary label of the list item.\nThis appears on the leading side of the list item.",
|
|
23015
|
-
"
|
|
23003
|
+
"attribute": "tertiary-label",
|
|
23004
|
+
"reflects": true
|
|
23016
23005
|
},
|
|
23017
23006
|
{
|
|
23018
|
-
"
|
|
23007
|
+
"kind": "field",
|
|
23008
|
+
"name": "sideHeaderText",
|
|
23019
23009
|
"type": {
|
|
23020
23010
|
"text": "string | undefined"
|
|
23021
23011
|
},
|
|
23022
23012
|
"description": "The header text of the list item.\nThis appears on the trailing side of the list item.",
|
|
23023
|
-
"
|
|
23013
|
+
"attribute": "side-header-text",
|
|
23014
|
+
"reflects": true
|
|
23024
23015
|
},
|
|
23025
23016
|
{
|
|
23026
|
-
"
|
|
23017
|
+
"kind": "field",
|
|
23018
|
+
"name": "sublineText",
|
|
23027
23019
|
"type": {
|
|
23028
23020
|
"text": "string | undefined"
|
|
23029
23021
|
},
|
|
23030
23022
|
"description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
|
|
23031
|
-
"
|
|
23023
|
+
"attribute": "subline-text",
|
|
23024
|
+
"reflects": true
|
|
23032
23025
|
},
|
|
23033
23026
|
{
|
|
23034
|
-
"
|
|
23027
|
+
"kind": "field",
|
|
23028
|
+
"name": "softDisabled",
|
|
23035
23029
|
"type": {
|
|
23036
23030
|
"text": "boolean | undefined"
|
|
23037
23031
|
},
|
|
23038
23032
|
"description": "Indicates whether the element is soft disabled.\nWhen set to `true`, the element appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe element behaves like a disabled element, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
|
|
23039
23033
|
"default": "undefined",
|
|
23040
|
-
"
|
|
23034
|
+
"attribute": "soft-disabled",
|
|
23035
|
+
"reflects": true
|
|
23041
23036
|
},
|
|
23042
23037
|
{
|
|
23043
|
-
"
|
|
23038
|
+
"kind": "field",
|
|
23039
|
+
"name": "dataIndex",
|
|
23044
23040
|
"type": {
|
|
23045
23041
|
"text": "number | undefined"
|
|
23046
23042
|
},
|
|
23047
23043
|
"description": "Data attribute to define the index of the list item in a list.\nThis also set the `aria-posinset` attribute for accessibility purposes.\n\nIt is required when the list item is used inside a virtualized list where the items are not sequentially rendered.\nIt should be a zero-based index.",
|
|
23048
23044
|
"default": "undefined",
|
|
23049
|
-
"
|
|
23045
|
+
"attribute": "data-index",
|
|
23046
|
+
"reflects": true
|
|
23050
23047
|
},
|
|
23051
23048
|
{
|
|
23049
|
+
"kind": "field",
|
|
23052
23050
|
"name": "active",
|
|
23053
23051
|
"type": {
|
|
23054
23052
|
"text": "boolean | undefined"
|
|
23055
23053
|
},
|
|
23056
23054
|
"description": "Indicates whether the list item is active.\nWhen set to true, the list item appears in a active state.\n\nNOTE: this is a visual state only, it does not affect the behavior or a11y of the list item.",
|
|
23057
23055
|
"default": "undefined",
|
|
23058
|
-
"
|
|
23059
|
-
},
|
|
23060
|
-
{
|
|
23061
|
-
"name": "disabled",
|
|
23062
|
-
"type": {
|
|
23063
|
-
"text": "boolean | undefined"
|
|
23064
|
-
},
|
|
23065
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
23066
|
-
"default": "undefined",
|
|
23067
|
-
"fieldName": "disabled",
|
|
23068
|
-
"inheritedFrom": {
|
|
23069
|
-
"name": "DisabledMixin",
|
|
23070
|
-
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
23071
|
-
}
|
|
23072
|
-
},
|
|
23073
|
-
{
|
|
23074
|
-
"name": "tabIndex",
|
|
23075
|
-
"type": {
|
|
23076
|
-
"text": "number"
|
|
23077
|
-
},
|
|
23078
|
-
"default": "0",
|
|
23079
|
-
"description": "This property specifies the tab order of the element.",
|
|
23080
|
-
"fieldName": "tabIndex",
|
|
23081
|
-
"inheritedFrom": {
|
|
23082
|
-
"name": "TabIndexMixin",
|
|
23083
|
-
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
23084
|
-
}
|
|
23085
|
-
}
|
|
23086
|
-
],
|
|
23087
|
-
"mixins": [
|
|
23088
|
-
{
|
|
23089
|
-
"name": "DisabledMixin",
|
|
23090
|
-
"module": "/src/utils/mixins/DisabledMixin"
|
|
23091
|
-
},
|
|
23092
|
-
{
|
|
23093
|
-
"name": "TabIndexMixin",
|
|
23094
|
-
"module": "/src/utils/mixins/TabIndexMixin"
|
|
23095
|
-
},
|
|
23096
|
-
{
|
|
23097
|
-
"name": "LifeCycleMixin",
|
|
23098
|
-
"module": "/src/utils/mixins/lifecycle/LifeCycleMixin"
|
|
23099
|
-
}
|
|
23100
|
-
],
|
|
23101
|
-
"superclass": {
|
|
23102
|
-
"name": "Component",
|
|
23103
|
-
"module": "/src/models"
|
|
23104
|
-
},
|
|
23105
|
-
"tagName": "mdc-listitem",
|
|
23106
|
-
"jsDoc": "/**\n * mdc-listitem component is used to display a label with different types of controls.\n * There can be three types of controls, a radio button, a checkbox on the\n * leading side and a toggle on the trailing side.\n * The list item can contain an avatar on the leading side and a badge on the trailing side.\n * Additionally, the list item can contain a side header and a subline text.\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. <br/>\n * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.\n *\n * **Note**: If a listitem contains a long text, it is recommended to create a tooltip for the listitem that displays the full text on hover.\n * Consumers need to add a unique ID to this listitem 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 listitem using the `triggerID` attribute.\n *\n * @tagname mdc-listitem\n *\n * @dependency mdc-text\n *\n * @slot leading-controls - slot for list item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for list item primary label.\n * @slot leading-text-secondary-label - slot for list item secondary label.\n * @slot leading-text-tertiary-label - slot for list item tertiary label.\n * @slot trailing-text-side-header - slot for list item side header text.\n * @slot trailing-text-subline - slot for list item subline text.\n * @slot trailing-controls - slot for list item controls to appear of trailing end.\n * @slot content - content slot can be used to override the content completely. Be aware that\n * this will override the default content of the list item.\n *\n * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-listitem-background-color-active - Allows customization of the background color when pressed.\n * @cssproperty --mdc-listitem-primary-label-color\n * - Allows customization of the primary label, side header and subline text slot color.\n * @cssproperty --mdc-listitem-secondary-label-color\n * - Allows customization of the secondary and tertiary label text slot color.\n * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.\n * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.\n * @cssproperty --mdc-listitem-padding-left-right - Allows customization of padding left and right.\n * @cssproperty --mdc-listitem-padding-top-bottom - Allows customization of padding top and bottom.\n * @cssproperty --mdc-listitem-cursor - Allows customization of the cursor.\n * @cssproperty --mdc-listitem-width - Allows customization of the width of the list item.\n * @cssproperty --mdc-listitem-height - Allows customization of the height of the list item.\n *\n * @csspart leading - Allows customization of the leading part.\n * @csspart leading-text - Allows customization of the leading text part.\n * @csspart trailing - Allows customization of the trailing part.\n * @csspart trailing-text - Allows customization of the trailing text part.\n *\n * @event click - (React: onClick) This event is dispatched when the listitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.\n * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.\n * @event enabled - (React: onEnabled) This event is dispatched after the listitem is enabled\n * @event disabled - (React: onDisabled) This event is dispatched after the listitem is disabled\n * @event created - (React: onCreated) This event is dispatched after the listitem is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched after the listitem is destroyed (removed from the DOM)\n */",
|
|
23107
|
-
"customElement": true
|
|
23108
|
-
}
|
|
23109
|
-
],
|
|
23110
|
-
"exports": [
|
|
23111
|
-
{
|
|
23112
|
-
"kind": "js",
|
|
23113
|
-
"name": "default",
|
|
23114
|
-
"declaration": {
|
|
23115
|
-
"name": "ListItem",
|
|
23116
|
-
"module": "components/listitem/listitem.component.js"
|
|
23117
|
-
}
|
|
23118
|
-
}
|
|
23119
|
-
]
|
|
23120
|
-
},
|
|
23121
|
-
{
|
|
23122
|
-
"kind": "javascript-module",
|
|
23123
|
-
"path": "components/listbox/listbox.component.js",
|
|
23124
|
-
"declarations": [
|
|
23125
|
-
{
|
|
23126
|
-
"kind": "class",
|
|
23127
|
-
"description": "listbox component presents a list of options and allows a user to select one of them.\n\nNotes:\n- This is a standalone listbox component. Select has its own mdc-selectlistbox component.\n- this component has name and value attributes and also emits change event,\n but it is not a form control (yet).",
|
|
23128
|
-
"name": "ListBox",
|
|
23129
|
-
"cssProperties": [
|
|
23130
|
-
{
|
|
23131
|
-
"description": "max height of the listbox",
|
|
23132
|
-
"name": "--mdc-listbox-max-height"
|
|
23133
|
-
}
|
|
23134
|
-
],
|
|
23135
|
-
"cssParts": [
|
|
23136
|
-
{
|
|
23137
|
-
"description": "The container of the listbox",
|
|
23138
|
-
"name": "container"
|
|
23139
|
-
}
|
|
23140
|
-
],
|
|
23141
|
-
"slots": [
|
|
23142
|
-
{
|
|
23143
|
-
"description": "This is a default/unnamed slot, where options and optgroups are placed",
|
|
23144
|
-
"name": "default"
|
|
23145
|
-
}
|
|
23146
|
-
],
|
|
23147
|
-
"members": [
|
|
23148
|
-
{
|
|
23149
|
-
"kind": "field",
|
|
23150
|
-
"name": "name",
|
|
23151
|
-
"type": {
|
|
23152
|
-
"text": "undefined | string | undefined"
|
|
23153
|
-
},
|
|
23154
|
-
"default": "undefined",
|
|
23155
|
-
"description": "The name attribute is used to identify the listbox",
|
|
23156
|
-
"attribute": "name",
|
|
23157
|
-
"reflects": true
|
|
23158
|
-
},
|
|
23159
|
-
{
|
|
23160
|
-
"kind": "field",
|
|
23161
|
-
"name": "value",
|
|
23162
|
-
"type": {
|
|
23163
|
-
"text": "undefined | string | undefined"
|
|
23164
|
-
},
|
|
23165
|
-
"default": "undefined",
|
|
23166
|
-
"description": "The value attribute is used to represent the last selected option's value in the listbox.",
|
|
23167
|
-
"attribute": "value",
|
|
23056
|
+
"attribute": "active",
|
|
23168
23057
|
"reflects": true
|
|
23169
23058
|
},
|
|
23170
23059
|
{
|
|
23171
23060
|
"kind": "method",
|
|
23172
|
-
"name": "
|
|
23061
|
+
"name": "handleClick",
|
|
23173
23062
|
"privacy": "private",
|
|
23174
23063
|
"return": {
|
|
23175
23064
|
"type": {
|
|
@@ -23178,30 +23067,19 @@
|
|
|
23178
23067
|
},
|
|
23179
23068
|
"parameters": [
|
|
23180
23069
|
{
|
|
23181
|
-
"name": "
|
|
23182
|
-
"optional": true,
|
|
23070
|
+
"name": "event",
|
|
23183
23071
|
"type": {
|
|
23184
|
-
"text": "
|
|
23072
|
+
"text": "MouseEvent"
|
|
23185
23073
|
},
|
|
23186
|
-
"description": "The
|
|
23187
|
-
},
|
|
23188
|
-
{
|
|
23189
|
-
"name": "fireEvent",
|
|
23190
|
-
"default": "true",
|
|
23191
|
-
"description": "A boolean flag to indicate whether to fire the change event or not."
|
|
23192
|
-
},
|
|
23193
|
-
{
|
|
23194
|
-
"name": "updateOptions",
|
|
23195
|
-
"default": "true",
|
|
23196
|
-
"description": "Whether update the other options or not"
|
|
23074
|
+
"description": "The mouse event triggered when the list item is clicked."
|
|
23197
23075
|
}
|
|
23198
23076
|
],
|
|
23199
|
-
"description": "
|
|
23077
|
+
"description": "Handles the click event on the list item.\nPrevents click when listitem is disabled"
|
|
23200
23078
|
},
|
|
23201
23079
|
{
|
|
23202
23080
|
"kind": "method",
|
|
23203
|
-
"name": "
|
|
23204
|
-
"privacy": "
|
|
23081
|
+
"name": "handleKeyDown",
|
|
23082
|
+
"privacy": "protected",
|
|
23205
23083
|
"return": {
|
|
23206
23084
|
"type": {
|
|
23207
23085
|
"text": "void"
|
|
@@ -23209,40 +23087,39 @@
|
|
|
23209
23087
|
},
|
|
23210
23088
|
"parameters": [
|
|
23211
23089
|
{
|
|
23212
|
-
"name": "
|
|
23213
|
-
"optional": true,
|
|
23090
|
+
"name": "event",
|
|
23214
23091
|
"type": {
|
|
23215
|
-
"text": "
|
|
23092
|
+
"text": "KeyboardEvent"
|
|
23216
23093
|
},
|
|
23217
|
-
"description": "The
|
|
23094
|
+
"description": "The keyboard event triggered when a key is pressed down."
|
|
23218
23095
|
}
|
|
23219
23096
|
],
|
|
23220
|
-
"description": "
|
|
23097
|
+
"description": "Fires the click event when the enter or space key is pressed down.\nThis behavior is similar to a button click and key interaction."
|
|
23221
23098
|
},
|
|
23222
23099
|
{
|
|
23223
23100
|
"kind": "method",
|
|
23224
|
-
"name": "
|
|
23225
|
-
"privacy": "
|
|
23101
|
+
"name": "triggerClickEvent",
|
|
23102
|
+
"privacy": "protected",
|
|
23226
23103
|
"return": {
|
|
23227
23104
|
"type": {
|
|
23228
|
-
"text": "
|
|
23105
|
+
"text": ""
|
|
23229
23106
|
}
|
|
23230
23107
|
},
|
|
23231
|
-
"
|
|
23108
|
+
"parameters": [
|
|
23109
|
+
{
|
|
23110
|
+
"name": "event",
|
|
23111
|
+
"type": {
|
|
23112
|
+
"text": "Event"
|
|
23113
|
+
},
|
|
23114
|
+
"description": "The event that triggered the click."
|
|
23115
|
+
}
|
|
23116
|
+
],
|
|
23117
|
+
"description": "Triggers a click event on the list item."
|
|
23232
23118
|
},
|
|
23233
23119
|
{
|
|
23234
23120
|
"kind": "method",
|
|
23235
|
-
"name": "
|
|
23121
|
+
"name": "getText",
|
|
23236
23122
|
"privacy": "protected",
|
|
23237
|
-
"inheritedFrom": {
|
|
23238
|
-
"name": "ListNavigationMixin",
|
|
23239
|
-
"module": "utils/mixins/ListNavigationMixin.js"
|
|
23240
|
-
}
|
|
23241
|
-
},
|
|
23242
|
-
{
|
|
23243
|
-
"kind": "method",
|
|
23244
|
-
"name": "getCurrentIndex",
|
|
23245
|
-
"privacy": "private",
|
|
23246
23123
|
"return": {
|
|
23247
23124
|
"type": {
|
|
23248
23125
|
"text": ""
|
|
@@ -23250,167 +23127,290 @@
|
|
|
23250
23127
|
},
|
|
23251
23128
|
"parameters": [
|
|
23252
23129
|
{
|
|
23253
|
-
"name": "
|
|
23130
|
+
"name": "slotName",
|
|
23254
23131
|
"type": {
|
|
23255
|
-
"text": "
|
|
23132
|
+
"text": "string"
|
|
23256
23133
|
},
|
|
23257
|
-
"description": "The
|
|
23134
|
+
"description": "The name of the slot to be used."
|
|
23135
|
+
},
|
|
23136
|
+
{
|
|
23137
|
+
"name": "type",
|
|
23138
|
+
"type": {
|
|
23139
|
+
"text": "TextType"
|
|
23140
|
+
},
|
|
23141
|
+
"description": "The type of the text element."
|
|
23142
|
+
},
|
|
23143
|
+
{
|
|
23144
|
+
"name": "content",
|
|
23145
|
+
"optional": true,
|
|
23146
|
+
"type": {
|
|
23147
|
+
"text": "string"
|
|
23148
|
+
},
|
|
23149
|
+
"description": "The text content to be displayed within the slot."
|
|
23258
23150
|
}
|
|
23259
23151
|
],
|
|
23260
|
-
"description": "
|
|
23261
|
-
"inheritedFrom": {
|
|
23262
|
-
"name": "ListNavigationMixin",
|
|
23263
|
-
"module": "utils/mixins/ListNavigationMixin.js"
|
|
23264
|
-
}
|
|
23152
|
+
"description": "Generates a template for a text slot with the specified content."
|
|
23265
23153
|
},
|
|
23266
23154
|
{
|
|
23267
23155
|
"kind": "method",
|
|
23268
|
-
"name": "
|
|
23269
|
-
"privacy": "
|
|
23156
|
+
"name": "disableSlottedChildren",
|
|
23157
|
+
"privacy": "private",
|
|
23158
|
+
"return": {
|
|
23159
|
+
"type": {
|
|
23160
|
+
"text": "void"
|
|
23161
|
+
}
|
|
23162
|
+
},
|
|
23270
23163
|
"parameters": [
|
|
23271
23164
|
{
|
|
23272
|
-
"name": "
|
|
23165
|
+
"name": "disabled",
|
|
23166
|
+
"default": "false",
|
|
23273
23167
|
"type": {
|
|
23274
|
-
"text": "
|
|
23168
|
+
"text": "boolean"
|
|
23275
23169
|
},
|
|
23276
|
-
"description": "
|
|
23277
|
-
},
|
|
23278
|
-
{
|
|
23279
|
-
"name": "focusElement",
|
|
23280
|
-
"default": "true",
|
|
23281
|
-
"description": "Call focus() on the current item or not."
|
|
23170
|
+
"description": "Whether to disable or enable the controls."
|
|
23282
23171
|
}
|
|
23283
23172
|
],
|
|
23284
|
-
"description": "
|
|
23285
|
-
|
|
23286
|
-
|
|
23287
|
-
|
|
23173
|
+
"description": "Disable or enable all slotted elements in the leading and trailing slots.\nThis is useful when the list item is disabled, to prevent the user from interacting with the controls."
|
|
23174
|
+
},
|
|
23175
|
+
{
|
|
23176
|
+
"kind": "method",
|
|
23177
|
+
"name": "renderTrailingControls",
|
|
23178
|
+
"privacy": "protected",
|
|
23179
|
+
"description": "Renders the trailing controls slot.",
|
|
23180
|
+
"return": {
|
|
23181
|
+
"type": {
|
|
23182
|
+
"text": ""
|
|
23183
|
+
}
|
|
23288
23184
|
}
|
|
23289
23185
|
},
|
|
23290
23186
|
{
|
|
23291
23187
|
"kind": "method",
|
|
23292
|
-
"name": "
|
|
23188
|
+
"name": "renderLeadingControls",
|
|
23293
23189
|
"privacy": "protected",
|
|
23294
|
-
"
|
|
23295
|
-
{
|
|
23296
|
-
"name": "newIndex",
|
|
23297
|
-
"type": {
|
|
23298
|
-
"text": "number"
|
|
23299
|
-
},
|
|
23300
|
-
"description": "The index of the new item to focus."
|
|
23301
|
-
},
|
|
23302
|
-
{
|
|
23303
|
-
"name": "oldIndex",
|
|
23304
|
-
"optional": true,
|
|
23305
|
-
"type": {
|
|
23306
|
-
"text": "number"
|
|
23307
|
-
},
|
|
23308
|
-
"description": "The index of the currently focused item."
|
|
23309
|
-
},
|
|
23310
|
-
{
|
|
23311
|
-
"name": "focusNewItem",
|
|
23312
|
-
"default": "true",
|
|
23313
|
-
"description": "Call focus() on the new item or not. It should be false during firstUpdate"
|
|
23314
|
-
}
|
|
23315
|
-
],
|
|
23316
|
-
"description": "Resets the tabindex of the currently focused item and sets focus to a new item.",
|
|
23190
|
+
"description": "Renders the leading controls slot.",
|
|
23317
23191
|
"return": {
|
|
23318
23192
|
"type": {
|
|
23319
23193
|
"text": ""
|
|
23320
23194
|
}
|
|
23321
|
-
},
|
|
23322
|
-
"inheritedFrom": {
|
|
23323
|
-
"name": "ListNavigationMixin",
|
|
23324
|
-
"module": "utils/mixins/ListNavigationMixin.js"
|
|
23325
23195
|
}
|
|
23326
23196
|
},
|
|
23327
23197
|
{
|
|
23328
23198
|
"kind": "method",
|
|
23329
|
-
"name": "
|
|
23330
|
-
"privacy": "
|
|
23199
|
+
"name": "stopEventPropagation",
|
|
23200
|
+
"privacy": "protected",
|
|
23201
|
+
"return": {
|
|
23202
|
+
"type": {
|
|
23203
|
+
"text": "void"
|
|
23204
|
+
}
|
|
23205
|
+
},
|
|
23331
23206
|
"parameters": [
|
|
23332
23207
|
{
|
|
23333
|
-
"name": "
|
|
23334
|
-
"type": {
|
|
23335
|
-
"text": "string"
|
|
23336
|
-
},
|
|
23337
|
-
"description": "The key pressed by the user."
|
|
23338
|
-
},
|
|
23339
|
-
{
|
|
23340
|
-
"name": "isRtl",
|
|
23208
|
+
"name": "event",
|
|
23341
23209
|
"type": {
|
|
23342
|
-
"text": "
|
|
23210
|
+
"text": "Event"
|
|
23343
23211
|
},
|
|
23344
|
-
"description": "
|
|
23212
|
+
"description": "The mouse event triggered when a click occurs."
|
|
23345
23213
|
}
|
|
23346
23214
|
],
|
|
23347
|
-
"description": "
|
|
23348
|
-
|
|
23349
|
-
|
|
23350
|
-
|
|
23351
|
-
|
|
23215
|
+
"description": "Stops the click event from propagating to parent elements. In case of keyboard events,\nit stops the propagation for Enter and Space keys.\nThis is useful when the list item contains controls that\nshould not trigger the click event on the list item itself."
|
|
23216
|
+
},
|
|
23217
|
+
{
|
|
23218
|
+
"kind": "field",
|
|
23219
|
+
"name": "disabled",
|
|
23220
|
+
"type": {
|
|
23221
|
+
"text": "boolean | undefined"
|
|
23352
23222
|
},
|
|
23223
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
23224
|
+
"default": "undefined",
|
|
23225
|
+
"attribute": "disabled",
|
|
23226
|
+
"reflects": true,
|
|
23353
23227
|
"inheritedFrom": {
|
|
23354
|
-
"name": "
|
|
23355
|
-
"module": "utils/mixins/
|
|
23228
|
+
"name": "DisabledMixin",
|
|
23229
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
23356
23230
|
}
|
|
23357
23231
|
},
|
|
23358
23232
|
{
|
|
23359
|
-
"kind": "
|
|
23360
|
-
"name": "
|
|
23361
|
-
"
|
|
23233
|
+
"kind": "field",
|
|
23234
|
+
"name": "tabIndex",
|
|
23235
|
+
"type": {
|
|
23236
|
+
"text": "number"
|
|
23237
|
+
},
|
|
23238
|
+
"default": "0",
|
|
23239
|
+
"description": "This property specifies the tab order of the element.",
|
|
23240
|
+
"attribute": "tabIndex",
|
|
23241
|
+
"reflects": true,
|
|
23362
23242
|
"inheritedFrom": {
|
|
23363
|
-
"name": "
|
|
23364
|
-
"module": "utils/mixins/
|
|
23243
|
+
"name": "TabIndexMixin",
|
|
23244
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
23365
23245
|
}
|
|
23366
23246
|
}
|
|
23367
23247
|
],
|
|
23368
23248
|
"events": [
|
|
23369
23249
|
{
|
|
23370
|
-
"
|
|
23371
|
-
"
|
|
23372
|
-
|
|
23373
|
-
|
|
23374
|
-
|
|
23375
|
-
"
|
|
23250
|
+
"description": "(React: onClick) This event is dispatched when the listitem is clicked.",
|
|
23251
|
+
"name": "click",
|
|
23252
|
+
"reactName": "onClick"
|
|
23253
|
+
},
|
|
23254
|
+
{
|
|
23255
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.",
|
|
23256
|
+
"name": "keydown",
|
|
23257
|
+
"reactName": "onKeyDown"
|
|
23258
|
+
},
|
|
23259
|
+
{
|
|
23260
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the listitem.",
|
|
23261
|
+
"name": "keyup",
|
|
23262
|
+
"reactName": "onKeyUp"
|
|
23263
|
+
},
|
|
23264
|
+
{
|
|
23265
|
+
"description": "(React: onFocus) This event is dispatched when the listitem receives focus.",
|
|
23266
|
+
"name": "focus",
|
|
23267
|
+
"reactName": "onFocus"
|
|
23268
|
+
},
|
|
23269
|
+
{
|
|
23270
|
+
"description": "(React: onEnabled) This event is dispatched after the listitem is enabled",
|
|
23271
|
+
"name": "enabled",
|
|
23272
|
+
"reactName": "onEnabled"
|
|
23273
|
+
},
|
|
23274
|
+
{
|
|
23275
|
+
"description": "(React: onDisabled) This event is dispatched after the listitem is disabled",
|
|
23276
|
+
"name": "disabled",
|
|
23277
|
+
"reactName": "onDisabled"
|
|
23278
|
+
},
|
|
23279
|
+
{
|
|
23280
|
+
"description": "(React: onCreated) This event is dispatched after the listitem is created (added to the DOM)",
|
|
23281
|
+
"name": "created",
|
|
23282
|
+
"reactName": "onCreated"
|
|
23283
|
+
},
|
|
23284
|
+
{
|
|
23285
|
+
"description": "(React: onDestroyed) This event is dispatched after the listitem is destroyed (removed from the DOM)",
|
|
23286
|
+
"name": "destroyed",
|
|
23287
|
+
"reactName": "onDestroyed"
|
|
23376
23288
|
}
|
|
23377
23289
|
],
|
|
23378
23290
|
"attributes": [
|
|
23379
23291
|
{
|
|
23380
|
-
"name": "
|
|
23292
|
+
"name": "variant",
|
|
23381
23293
|
"type": {
|
|
23382
|
-
"text": "
|
|
23294
|
+
"text": "ListItemVariants"
|
|
23295
|
+
},
|
|
23296
|
+
"description": "The variant of the list item. It can be a pill, rectangle or a full-width.",
|
|
23297
|
+
"default": "'full-width'",
|
|
23298
|
+
"fieldName": "variant"
|
|
23299
|
+
},
|
|
23300
|
+
{
|
|
23301
|
+
"name": "label",
|
|
23302
|
+
"type": {
|
|
23303
|
+
"text": "string | undefined"
|
|
23304
|
+
},
|
|
23305
|
+
"description": "The primary label of the list item.\nThis appears on the leading side of the list item.",
|
|
23306
|
+
"fieldName": "label"
|
|
23307
|
+
},
|
|
23308
|
+
{
|
|
23309
|
+
"name": "secondary-label",
|
|
23310
|
+
"type": {
|
|
23311
|
+
"text": "string | undefined"
|
|
23312
|
+
},
|
|
23313
|
+
"description": "The secondary label of the list item.\nThis appears on the leading side of the list item.",
|
|
23314
|
+
"fieldName": "secondaryLabel"
|
|
23315
|
+
},
|
|
23316
|
+
{
|
|
23317
|
+
"name": "tertiary-label",
|
|
23318
|
+
"type": {
|
|
23319
|
+
"text": "string | undefined"
|
|
23320
|
+
},
|
|
23321
|
+
"description": "The tertiary label of the list item.\nThis appears on the leading side of the list item.",
|
|
23322
|
+
"fieldName": "tertiaryLabel"
|
|
23323
|
+
},
|
|
23324
|
+
{
|
|
23325
|
+
"name": "side-header-text",
|
|
23326
|
+
"type": {
|
|
23327
|
+
"text": "string | undefined"
|
|
23328
|
+
},
|
|
23329
|
+
"description": "The header text of the list item.\nThis appears on the trailing side of the list item.",
|
|
23330
|
+
"fieldName": "sideHeaderText"
|
|
23331
|
+
},
|
|
23332
|
+
{
|
|
23333
|
+
"name": "subline-text",
|
|
23334
|
+
"type": {
|
|
23335
|
+
"text": "string | undefined"
|
|
23336
|
+
},
|
|
23337
|
+
"description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
|
|
23338
|
+
"fieldName": "sublineText"
|
|
23339
|
+
},
|
|
23340
|
+
{
|
|
23341
|
+
"name": "soft-disabled",
|
|
23342
|
+
"type": {
|
|
23343
|
+
"text": "boolean | undefined"
|
|
23383
23344
|
},
|
|
23345
|
+
"description": "Indicates whether the element is soft disabled.\nWhen set to `true`, the element appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe element behaves like a disabled element, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
|
|
23384
23346
|
"default": "undefined",
|
|
23385
|
-
"
|
|
23386
|
-
"fieldName": "name"
|
|
23347
|
+
"fieldName": "softDisabled"
|
|
23387
23348
|
},
|
|
23388
23349
|
{
|
|
23389
|
-
"name": "
|
|
23350
|
+
"name": "data-index",
|
|
23390
23351
|
"type": {
|
|
23391
|
-
"text": "
|
|
23352
|
+
"text": "number | undefined"
|
|
23392
23353
|
},
|
|
23354
|
+
"description": "Data attribute to define the index of the list item in a list.\nThis also set the `aria-posinset` attribute for accessibility purposes.\n\nIt is required when the list item is used inside a virtualized list where the items are not sequentially rendered.\nIt should be a zero-based index.",
|
|
23393
23355
|
"default": "undefined",
|
|
23394
|
-
"
|
|
23395
|
-
|
|
23356
|
+
"fieldName": "dataIndex"
|
|
23357
|
+
},
|
|
23358
|
+
{
|
|
23359
|
+
"name": "active",
|
|
23360
|
+
"type": {
|
|
23361
|
+
"text": "boolean | undefined"
|
|
23362
|
+
},
|
|
23363
|
+
"description": "Indicates whether the list item is active.\nWhen set to true, the list item appears in a active state.\n\nNOTE: this is a visual state only, it does not affect the behavior or a11y of the list item.",
|
|
23364
|
+
"default": "undefined",
|
|
23365
|
+
"fieldName": "active"
|
|
23366
|
+
},
|
|
23367
|
+
{
|
|
23368
|
+
"name": "disabled",
|
|
23369
|
+
"type": {
|
|
23370
|
+
"text": "boolean | undefined"
|
|
23371
|
+
},
|
|
23372
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
23373
|
+
"default": "undefined",
|
|
23374
|
+
"fieldName": "disabled",
|
|
23375
|
+
"inheritedFrom": {
|
|
23376
|
+
"name": "DisabledMixin",
|
|
23377
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
23378
|
+
}
|
|
23379
|
+
},
|
|
23380
|
+
{
|
|
23381
|
+
"name": "tabIndex",
|
|
23382
|
+
"type": {
|
|
23383
|
+
"text": "number"
|
|
23384
|
+
},
|
|
23385
|
+
"default": "0",
|
|
23386
|
+
"description": "This property specifies the tab order of the element.",
|
|
23387
|
+
"fieldName": "tabIndex",
|
|
23388
|
+
"inheritedFrom": {
|
|
23389
|
+
"name": "TabIndexMixin",
|
|
23390
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
23391
|
+
}
|
|
23396
23392
|
}
|
|
23397
23393
|
],
|
|
23398
23394
|
"mixins": [
|
|
23399
23395
|
{
|
|
23400
|
-
"name": "
|
|
23401
|
-
"module": "/src/utils/mixins/
|
|
23396
|
+
"name": "DisabledMixin",
|
|
23397
|
+
"module": "/src/utils/mixins/DisabledMixin"
|
|
23402
23398
|
},
|
|
23403
23399
|
{
|
|
23404
|
-
"name": "
|
|
23405
|
-
"module": "/src/utils/mixins/
|
|
23400
|
+
"name": "TabIndexMixin",
|
|
23401
|
+
"module": "/src/utils/mixins/TabIndexMixin"
|
|
23402
|
+
},
|
|
23403
|
+
{
|
|
23404
|
+
"name": "LifeCycleMixin",
|
|
23405
|
+
"module": "/src/utils/mixins/lifecycle/LifeCycleMixin"
|
|
23406
23406
|
}
|
|
23407
23407
|
],
|
|
23408
23408
|
"superclass": {
|
|
23409
23409
|
"name": "Component",
|
|
23410
23410
|
"module": "/src/models"
|
|
23411
23411
|
},
|
|
23412
|
-
"tagName": "mdc-
|
|
23413
|
-
"jsDoc": "/**\n *
|
|
23412
|
+
"tagName": "mdc-listitem",
|
|
23413
|
+
"jsDoc": "/**\n * mdc-listitem component is used to display a label with different types of controls.\n * There can be three types of controls, a radio button, a checkbox on the\n * leading side and a toggle on the trailing side.\n * The list item can contain an avatar on the leading side and a badge on the trailing side.\n * Additionally, the list item can contain a side header and a subline text.\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. <br/>\n * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.\n *\n * **Note**: If a listitem contains a long text, it is recommended to create a tooltip for the listitem that displays the full text on hover.\n * Consumers need to add a unique ID to this listitem 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 listitem using the `triggerID` attribute.\n *\n * @tagname mdc-listitem\n *\n * @dependency mdc-text\n *\n * @slot leading-controls - slot for list item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for list item primary label.\n * @slot leading-text-secondary-label - slot for list item secondary label.\n * @slot leading-text-tertiary-label - slot for list item tertiary label.\n * @slot trailing-text-side-header - slot for list item side header text.\n * @slot trailing-text-subline - slot for list item subline text.\n * @slot trailing-controls - slot for list item controls to appear of trailing end.\n * @slot content - content slot can be used to override the content completely. Be aware that\n * this will override the default content of the list item.\n *\n * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-listitem-background-color-active - Allows customization of the background color when pressed.\n * @cssproperty --mdc-listitem-primary-label-color\n * - Allows customization of the primary label, side header and subline text slot color.\n * @cssproperty --mdc-listitem-secondary-label-color\n * - Allows customization of the secondary and tertiary label text slot color.\n * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.\n * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.\n * @cssproperty --mdc-listitem-padding-left-right - Allows customization of padding left and right.\n * @cssproperty --mdc-listitem-padding-top-bottom - Allows customization of padding top and bottom.\n * @cssproperty --mdc-listitem-cursor - Allows customization of the cursor.\n * @cssproperty --mdc-listitem-width - Allows customization of the width of the list item.\n * @cssproperty --mdc-listitem-height - Allows customization of the height of the list item.\n *\n * @csspart leading - Allows customization of the leading part.\n * @csspart leading-text - Allows customization of the leading text part.\n * @csspart trailing - Allows customization of the trailing part.\n * @csspart trailing-text - Allows customization of the trailing text part.\n *\n * @event click - (React: onClick) This event is dispatched when the listitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.\n * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.\n * @event enabled - (React: onEnabled) This event is dispatched after the listitem is enabled\n * @event disabled - (React: onDisabled) This event is dispatched after the listitem is disabled\n * @event created - (React: onCreated) This event is dispatched after the listitem is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched after the listitem is destroyed (removed from the DOM)\n */",
|
|
23414
23414
|
"customElement": true
|
|
23415
23415
|
}
|
|
23416
23416
|
],
|
|
@@ -23419,8 +23419,8 @@
|
|
|
23419
23419
|
"kind": "js",
|
|
23420
23420
|
"name": "default",
|
|
23421
23421
|
"declaration": {
|
|
23422
|
-
"name": "
|
|
23423
|
-
"module": "components/
|
|
23422
|
+
"name": "ListItem",
|
|
23423
|
+
"module": "components/listitem/listitem.component.js"
|
|
23424
23424
|
}
|
|
23425
23425
|
}
|
|
23426
23426
|
]
|