@momentum-design/components 0.103.1 → 0.103.2
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 +152 -149
- package/dist/browser/index.js.map +3 -3
- package/dist/components/listitem/listitem.component.js +8 -1
- package/dist/components/listitem/listitem.styles.js +0 -4
- package/dist/components/popover/popover.component.d.ts +15 -1
- package/dist/components/popover/popover.component.js +32 -6
- package/dist/components/popover/popover.constants.d.ts +1 -0
- package/dist/components/popover/popover.constants.js +1 -0
- package/dist/components/popover/popover.styles.js +9 -0
- package/dist/components/popover/popover.utils.js +1 -0
- package/dist/components/select/select.component.d.ts +40 -0
- package/dist/components/select/select.component.js +64 -8
- package/dist/components/select/select.styles.js +28 -33
- package/dist/custom-elements.json +754 -480
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +2 -2
- package/dist/react/select/index.d.ts +14 -0
- package/dist/react/select/index.js +14 -0
- package/package.json +1 -1
|
@@ -4,149 +4,214 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "components/
|
|
7
|
+
"path": "components/accordiongroup/accordiongroup.component.js",
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "An accordion
|
|
12
|
-
"name": "
|
|
11
|
+
"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.",
|
|
12
|
+
"name": "AccordionGroup",
|
|
13
13
|
"cssProperties": [
|
|
14
14
|
{
|
|
15
|
-
"description": "The border color of the
|
|
16
|
-
"name": "--mdc-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
15
|
+
"description": "The border color of the entire accordiongroup",
|
|
16
|
+
"name": "--mdc-accordiongroup-border-color"
|
|
17
|
+
}
|
|
18
|
+
],
|
|
19
|
+
"slots": [
|
|
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
|
|
21
36
|
},
|
|
22
37
|
{
|
|
23
|
-
"
|
|
24
|
-
"name": "
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
|
|
28
|
-
|
|
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
|
|
29
47
|
},
|
|
30
48
|
{
|
|
31
|
-
"
|
|
32
|
-
"name": "
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
|
|
36
|
-
|
|
49
|
+
"kind": "field",
|
|
50
|
+
"name": "allowMultiple",
|
|
51
|
+
"type": {
|
|
52
|
+
"text": "boolean"
|
|
53
|
+
},
|
|
54
|
+
"default": "false",
|
|
55
|
+
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
56
|
+
"attribute": "allow-multiple",
|
|
57
|
+
"reflects": true
|
|
37
58
|
},
|
|
38
59
|
{
|
|
39
|
-
"
|
|
40
|
-
"name": "
|
|
41
|
-
"
|
|
42
|
-
|
|
43
|
-
"
|
|
44
|
-
|
|
60
|
+
"kind": "method",
|
|
61
|
+
"name": "handleAccordionExpanded",
|
|
62
|
+
"privacy": "private",
|
|
63
|
+
"return": {
|
|
64
|
+
"type": {
|
|
65
|
+
"text": "void"
|
|
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."
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"kind": "method",
|
|
81
|
+
"name": "setChildrenAccordionAttributes",
|
|
82
|
+
"privacy": "private",
|
|
83
|
+
"return": {
|
|
84
|
+
"type": {
|
|
85
|
+
"text": "void"
|
|
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."
|
|
45
105
|
}
|
|
46
106
|
],
|
|
47
|
-
"
|
|
107
|
+
"attributes": [
|
|
48
108
|
{
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
109
|
+
"name": "size",
|
|
110
|
+
"type": {
|
|
111
|
+
"text": "Size"
|
|
112
|
+
},
|
|
113
|
+
"description": "The size of the accordion item.",
|
|
114
|
+
"default": "'small'",
|
|
115
|
+
"fieldName": "size"
|
|
55
116
|
},
|
|
56
117
|
{
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
118
|
+
"name": "variant",
|
|
119
|
+
"type": {
|
|
120
|
+
"text": "Variant"
|
|
121
|
+
},
|
|
122
|
+
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
123
|
+
"default": "'stacked'",
|
|
124
|
+
"fieldName": "variant"
|
|
63
125
|
},
|
|
64
126
|
{
|
|
65
|
-
"
|
|
66
|
-
"
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
127
|
+
"name": "allow-multiple",
|
|
128
|
+
"type": {
|
|
129
|
+
"text": "boolean"
|
|
130
|
+
},
|
|
131
|
+
"default": "false",
|
|
132
|
+
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
133
|
+
"fieldName": "allowMultiple"
|
|
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": [
|
|
72
165
|
{
|
|
73
|
-
"description": "The
|
|
74
|
-
"name": "
|
|
166
|
+
"description": "The border color of the accordion button.",
|
|
167
|
+
"name": "--mdc-accordionbutton-border-color"
|
|
75
168
|
},
|
|
76
169
|
{
|
|
77
|
-
"description": "The
|
|
78
|
-
"name": "
|
|
79
|
-
"inheritedFrom": {
|
|
80
|
-
"name": "AccordionButton",
|
|
81
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
82
|
-
}
|
|
170
|
+
"description": "The hover color of the accordion button.",
|
|
171
|
+
"name": "--mdc-accordionbutton-hover-color"
|
|
83
172
|
},
|
|
84
173
|
{
|
|
85
|
-
"description": "The
|
|
86
|
-
"name": "
|
|
87
|
-
"inheritedFrom": {
|
|
88
|
-
"name": "AccordionButton",
|
|
89
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
90
|
-
}
|
|
174
|
+
"description": "The active color of the accordion button.",
|
|
175
|
+
"name": "--mdc-accordionbutton-active-color"
|
|
91
176
|
},
|
|
92
177
|
{
|
|
93
|
-
"description": "The
|
|
94
|
-
"name": "
|
|
95
|
-
"inheritedFrom": {
|
|
96
|
-
"name": "AccordionButton",
|
|
97
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
98
|
-
}
|
|
178
|
+
"description": "The disabled color of the accordion button.",
|
|
179
|
+
"name": "--mdc-accordionbutton-disabled-color"
|
|
99
180
|
}
|
|
100
181
|
],
|
|
101
|
-
"
|
|
182
|
+
"cssParts": [
|
|
102
183
|
{
|
|
103
|
-
"description": "The
|
|
104
|
-
"name": "
|
|
184
|
+
"description": "The header section of the accordion button.",
|
|
185
|
+
"name": "header-section"
|
|
105
186
|
},
|
|
106
187
|
{
|
|
107
|
-
"description": "The
|
|
108
|
-
"name": "
|
|
188
|
+
"description": "The header button section of the accordion button.",
|
|
189
|
+
"name": "header-button-section"
|
|
109
190
|
},
|
|
110
191
|
{
|
|
111
|
-
"description": "The
|
|
112
|
-
"name": "
|
|
113
|
-
|
|
114
|
-
"name": "AccordionButton",
|
|
115
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
],
|
|
119
|
-
"members": [
|
|
192
|
+
"description": "The leading header of the accordion button.",
|
|
193
|
+
"name": "leading-header"
|
|
194
|
+
},
|
|
120
195
|
{
|
|
121
|
-
"
|
|
122
|
-
"name": "
|
|
123
|
-
"privacy": "protected",
|
|
124
|
-
"return": {
|
|
125
|
-
"type": {
|
|
126
|
-
"text": ""
|
|
127
|
-
}
|
|
128
|
-
},
|
|
129
|
-
"description": "Renders the header section of the accordion.\nThis includes the leading icon, text and controls, and the trailing controls.\nThe trailing controls include the expand/collapse button.\nThe button is disabled if the accordion is disabled.\nThe button is also given the aria-controls attribute set to the id of the body section.\nThe button is also given the aria-expanded attribute set to the expanded state of the accordion.\nThe prefix icon of the button is set to the expanded state of the accordion.",
|
|
130
|
-
"inheritedFrom": {
|
|
131
|
-
"name": "AccordionButton",
|
|
132
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
133
|
-
}
|
|
196
|
+
"description": "The trailing header of the accordion button.",
|
|
197
|
+
"name": "trailing-header"
|
|
134
198
|
},
|
|
135
199
|
{
|
|
136
|
-
"
|
|
137
|
-
"name": "
|
|
138
|
-
"type": {
|
|
139
|
-
"text": "boolean | undefined"
|
|
140
|
-
},
|
|
141
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
142
|
-
"default": "undefined",
|
|
143
|
-
"attribute": "disabled",
|
|
144
|
-
"reflects": true,
|
|
145
|
-
"inheritedFrom": {
|
|
146
|
-
"name": "DisabledMixin",
|
|
147
|
-
"module": "utils/mixins/DisabledMixin.js"
|
|
148
|
-
}
|
|
200
|
+
"description": "The trailing header icon of the accordion button.",
|
|
201
|
+
"name": "trailing-header__icon"
|
|
149
202
|
},
|
|
203
|
+
{
|
|
204
|
+
"description": "The body section of the accordion button.",
|
|
205
|
+
"name": "body-section"
|
|
206
|
+
}
|
|
207
|
+
],
|
|
208
|
+
"slots": [
|
|
209
|
+
{
|
|
210
|
+
"description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
|
|
211
|
+
"name": "default"
|
|
212
|
+
}
|
|
213
|
+
],
|
|
214
|
+
"members": [
|
|
150
215
|
{
|
|
151
216
|
"kind": "field",
|
|
152
217
|
"name": "size",
|
|
@@ -156,11 +221,7 @@
|
|
|
156
221
|
"description": "The size of the accordion item.",
|
|
157
222
|
"default": "'small'",
|
|
158
223
|
"attribute": "size",
|
|
159
|
-
"reflects": true
|
|
160
|
-
"inheritedFrom": {
|
|
161
|
-
"name": "AccordionButton",
|
|
162
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
163
|
-
}
|
|
224
|
+
"reflects": true
|
|
164
225
|
},
|
|
165
226
|
{
|
|
166
227
|
"kind": "field",
|
|
@@ -171,11 +232,7 @@
|
|
|
171
232
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
172
233
|
"default": "'default'",
|
|
173
234
|
"attribute": "variant",
|
|
174
|
-
"reflects": true
|
|
175
|
-
"inheritedFrom": {
|
|
176
|
-
"name": "AccordionButton",
|
|
177
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
178
|
-
}
|
|
235
|
+
"reflects": true
|
|
179
236
|
},
|
|
180
237
|
{
|
|
181
238
|
"kind": "field",
|
|
@@ -186,11 +243,7 @@
|
|
|
186
243
|
"description": "The aria level of the accordion component.",
|
|
187
244
|
"default": "3",
|
|
188
245
|
"attribute": "data-aria-level",
|
|
189
|
-
"reflects": true
|
|
190
|
-
"inheritedFrom": {
|
|
191
|
-
"name": "AccordionButton",
|
|
192
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
193
|
-
}
|
|
246
|
+
"reflects": true
|
|
194
247
|
},
|
|
195
248
|
{
|
|
196
249
|
"kind": "field",
|
|
@@ -201,11 +254,7 @@
|
|
|
201
254
|
"description": "The visibility of the accordion button.",
|
|
202
255
|
"default": "false",
|
|
203
256
|
"attribute": "expanded",
|
|
204
|
-
"reflects": true
|
|
205
|
-
"inheritedFrom": {
|
|
206
|
-
"name": "AccordionButton",
|
|
207
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
208
|
-
}
|
|
257
|
+
"reflects": true
|
|
209
258
|
},
|
|
210
259
|
{
|
|
211
260
|
"kind": "field",
|
|
@@ -215,11 +264,7 @@
|
|
|
215
264
|
},
|
|
216
265
|
"description": "The header text of the accordion item.",
|
|
217
266
|
"attribute": "header-text",
|
|
218
|
-
"reflects": true
|
|
219
|
-
"inheritedFrom": {
|
|
220
|
-
"name": "AccordionButton",
|
|
221
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
222
|
-
}
|
|
267
|
+
"reflects": true
|
|
223
268
|
},
|
|
224
269
|
{
|
|
225
270
|
"kind": "field",
|
|
@@ -228,11 +273,7 @@
|
|
|
228
273
|
"text": "IconNames | undefined"
|
|
229
274
|
},
|
|
230
275
|
"description": "The leading icon that is displayed before the header text.",
|
|
231
|
-
"attribute": "prefix-icon"
|
|
232
|
-
"inheritedFrom": {
|
|
233
|
-
"name": "AccordionButton",
|
|
234
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
235
|
-
}
|
|
276
|
+
"attribute": "prefix-icon"
|
|
236
277
|
},
|
|
237
278
|
{
|
|
238
279
|
"kind": "method",
|
|
@@ -243,11 +284,7 @@
|
|
|
243
284
|
"text": "void"
|
|
244
285
|
}
|
|
245
286
|
},
|
|
246
|
-
"description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state."
|
|
247
|
-
"inheritedFrom": {
|
|
248
|
-
"name": "AccordionButton",
|
|
249
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
250
|
-
}
|
|
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."
|
|
251
288
|
},
|
|
252
289
|
{
|
|
253
290
|
"kind": "method",
|
|
@@ -258,11 +295,7 @@
|
|
|
258
295
|
"text": "void"
|
|
259
296
|
}
|
|
260
297
|
},
|
|
261
|
-
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
|
|
262
|
-
"inheritedFrom": {
|
|
263
|
-
"name": "AccordionButton",
|
|
264
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
265
|
-
}
|
|
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."
|
|
266
299
|
},
|
|
267
300
|
{
|
|
268
301
|
"kind": "method",
|
|
@@ -282,11 +315,7 @@
|
|
|
282
315
|
"description": "The KeyboardEvent fired."
|
|
283
316
|
}
|
|
284
317
|
],
|
|
285
|
-
"description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys."
|
|
286
|
-
"inheritedFrom": {
|
|
287
|
-
"name": "AccordionButton",
|
|
288
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
289
|
-
}
|
|
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."
|
|
290
319
|
},
|
|
291
320
|
{
|
|
292
321
|
"kind": "method",
|
|
@@ -305,11 +334,7 @@
|
|
|
305
334
|
"text": "IconNames"
|
|
306
335
|
}
|
|
307
336
|
}
|
|
308
|
-
]
|
|
309
|
-
"inheritedFrom": {
|
|
310
|
-
"name": "AccordionButton",
|
|
311
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
312
|
-
}
|
|
337
|
+
]
|
|
313
338
|
},
|
|
314
339
|
{
|
|
315
340
|
"kind": "method",
|
|
@@ -319,10 +344,16 @@
|
|
|
319
344
|
"type": {
|
|
320
345
|
"text": "TemplateResult | typeof nothing"
|
|
321
346
|
}
|
|
322
|
-
}
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
347
|
+
}
|
|
348
|
+
},
|
|
349
|
+
{
|
|
350
|
+
"kind": "method",
|
|
351
|
+
"name": "renderHeader",
|
|
352
|
+
"privacy": "protected",
|
|
353
|
+
"return": {
|
|
354
|
+
"type": {
|
|
355
|
+
"text": "TemplateResult"
|
|
356
|
+
}
|
|
326
357
|
}
|
|
327
358
|
},
|
|
328
359
|
{
|
|
@@ -334,11 +365,7 @@
|
|
|
334
365
|
"text": ""
|
|
335
366
|
}
|
|
336
367
|
},
|
|
337
|
-
"description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon."
|
|
338
|
-
"inheritedFrom": {
|
|
339
|
-
"name": "AccordionButton",
|
|
340
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
341
|
-
}
|
|
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."
|
|
342
369
|
},
|
|
343
370
|
{
|
|
344
371
|
"kind": "method",
|
|
@@ -348,45 +375,32 @@
|
|
|
348
375
|
"type": {
|
|
349
376
|
"text": "TemplateResult | typeof nothing"
|
|
350
377
|
}
|
|
351
|
-
},
|
|
352
|
-
"inheritedFrom": {
|
|
353
|
-
"name": "AccordionButton",
|
|
354
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
355
378
|
}
|
|
356
|
-
}
|
|
357
|
-
],
|
|
358
|
-
"events": [
|
|
359
|
-
{
|
|
360
|
-
"description": "(React: onShown) This event is triggered when the accordion is expanded.",
|
|
361
|
-
"name": "shown",
|
|
362
|
-
"reactName": "onShown",
|
|
363
|
-
"inheritedFrom": {
|
|
364
|
-
"name": "AccordionButton",
|
|
365
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
366
|
-
}
|
|
367
|
-
}
|
|
368
|
-
],
|
|
369
|
-
"superclass": {
|
|
370
|
-
"name": "AccordionButton",
|
|
371
|
-
"module": "/src/components/accordionbutton/accordionbutton.component"
|
|
372
|
-
},
|
|
373
|
-
"tagName": "mdc-accordion",
|
|
374
|
-
"jsDoc": "/**\n * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.\n *\n * @tagname mdc-accordion\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot leading-controls - The leading controls slot of the accordion on the header section.\n * @slot trailing-controls - The trailing controls slot of the accordion on the header section.\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.\n *\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n * @csspart body-section - The body section of the accordion.\n */",
|
|
375
|
-
"customElement": true,
|
|
376
|
-
"attributes": [
|
|
379
|
+
},
|
|
377
380
|
{
|
|
381
|
+
"kind": "field",
|
|
378
382
|
"name": "disabled",
|
|
379
383
|
"type": {
|
|
380
384
|
"text": "boolean | undefined"
|
|
381
385
|
},
|
|
382
386
|
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
383
387
|
"default": "undefined",
|
|
384
|
-
"
|
|
388
|
+
"attribute": "disabled",
|
|
389
|
+
"reflects": true,
|
|
385
390
|
"inheritedFrom": {
|
|
386
391
|
"name": "DisabledMixin",
|
|
387
|
-
"module": "
|
|
392
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
388
393
|
}
|
|
389
|
-
}
|
|
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": [
|
|
390
404
|
{
|
|
391
405
|
"name": "size",
|
|
392
406
|
"type": {
|
|
@@ -394,11 +408,7 @@
|
|
|
394
408
|
},
|
|
395
409
|
"description": "The size of the accordion item.",
|
|
396
410
|
"default": "'small'",
|
|
397
|
-
"fieldName": "size"
|
|
398
|
-
"inheritedFrom": {
|
|
399
|
-
"name": "AccordionButton",
|
|
400
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
401
|
-
}
|
|
411
|
+
"fieldName": "size"
|
|
402
412
|
},
|
|
403
413
|
{
|
|
404
414
|
"name": "variant",
|
|
@@ -407,11 +417,7 @@
|
|
|
407
417
|
},
|
|
408
418
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
409
419
|
"default": "'default'",
|
|
410
|
-
"fieldName": "variant"
|
|
411
|
-
"inheritedFrom": {
|
|
412
|
-
"name": "AccordionButton",
|
|
413
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
414
|
-
}
|
|
420
|
+
"fieldName": "variant"
|
|
415
421
|
},
|
|
416
422
|
{
|
|
417
423
|
"name": "data-aria-level",
|
|
@@ -420,11 +426,7 @@
|
|
|
420
426
|
},
|
|
421
427
|
"description": "The aria level of the accordion component.",
|
|
422
428
|
"default": "3",
|
|
423
|
-
"fieldName": "dataAriaLevel"
|
|
424
|
-
"inheritedFrom": {
|
|
425
|
-
"name": "AccordionButton",
|
|
426
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
427
|
-
}
|
|
429
|
+
"fieldName": "dataAriaLevel"
|
|
428
430
|
},
|
|
429
431
|
{
|
|
430
432
|
"name": "expanded",
|
|
@@ -433,11 +435,7 @@
|
|
|
433
435
|
},
|
|
434
436
|
"description": "The visibility of the accordion button.",
|
|
435
437
|
"default": "false",
|
|
436
|
-
"fieldName": "expanded"
|
|
437
|
-
"inheritedFrom": {
|
|
438
|
-
"name": "AccordionButton",
|
|
439
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
440
|
-
}
|
|
438
|
+
"fieldName": "expanded"
|
|
441
439
|
},
|
|
442
440
|
{
|
|
443
441
|
"name": "header-text",
|
|
@@ -445,11 +443,7 @@
|
|
|
445
443
|
"text": "string | undefined"
|
|
446
444
|
},
|
|
447
445
|
"description": "The header text of the accordion item.",
|
|
448
|
-
"fieldName": "headerText"
|
|
449
|
-
"inheritedFrom": {
|
|
450
|
-
"name": "AccordionButton",
|
|
451
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
452
|
-
}
|
|
446
|
+
"fieldName": "headerText"
|
|
453
447
|
},
|
|
454
448
|
{
|
|
455
449
|
"name": "prefix-icon",
|
|
@@ -457,13 +451,35 @@
|
|
|
457
451
|
"text": "IconNames | undefined"
|
|
458
452
|
},
|
|
459
453
|
"description": "The leading icon that is displayed before the header text.",
|
|
460
|
-
"fieldName": "prefixIcon"
|
|
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",
|
|
461
464
|
"inheritedFrom": {
|
|
462
|
-
"name": "
|
|
463
|
-
"module": "src/
|
|
465
|
+
"name": "DisabledMixin",
|
|
466
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
464
467
|
}
|
|
465
468
|
}
|
|
466
|
-
]
|
|
469
|
+
],
|
|
470
|
+
"mixins": [
|
|
471
|
+
{
|
|
472
|
+
"name": "DisabledMixin",
|
|
473
|
+
"module": "/src/utils/mixins/DisabledMixin"
|
|
474
|
+
}
|
|
475
|
+
],
|
|
476
|
+
"superclass": {
|
|
477
|
+
"name": "Component",
|
|
478
|
+
"module": "/src/models"
|
|
479
|
+
},
|
|
480
|
+
"tagName": "mdc-accordionbutton",
|
|
481
|
+
"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 header-section - The header section of the accordion button.\n * @csspart header-button-section - The header button 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 * @csspart body-section - The body section of the accordion button.\n */",
|
|
482
|
+
"customElement": true
|
|
467
483
|
}
|
|
468
484
|
],
|
|
469
485
|
"exports": [
|
|
@@ -471,71 +487,157 @@
|
|
|
471
487
|
"kind": "js",
|
|
472
488
|
"name": "default",
|
|
473
489
|
"declaration": {
|
|
474
|
-
"name": "
|
|
475
|
-
"module": "components/
|
|
490
|
+
"name": "AccordionButton",
|
|
491
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
476
492
|
}
|
|
477
493
|
}
|
|
478
494
|
]
|
|
479
495
|
},
|
|
480
496
|
{
|
|
481
497
|
"kind": "javascript-module",
|
|
482
|
-
"path": "components/
|
|
498
|
+
"path": "components/accordion/accordion.component.js",
|
|
483
499
|
"declarations": [
|
|
484
500
|
{
|
|
485
501
|
"kind": "class",
|
|
486
|
-
"description": "An accordion
|
|
487
|
-
"name": "
|
|
502
|
+
"description": "An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n- Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n- Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.",
|
|
503
|
+
"name": "Accordion",
|
|
488
504
|
"cssProperties": [
|
|
489
505
|
{
|
|
490
|
-
"description": "The border color of the accordion
|
|
491
|
-
"name": "--mdc-accordionbutton-border-color"
|
|
506
|
+
"description": "The border color of the accordion.",
|
|
507
|
+
"name": "--mdc-accordionbutton-border-color",
|
|
508
|
+
"inheritedFrom": {
|
|
509
|
+
"name": "AccordionButton",
|
|
510
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
511
|
+
}
|
|
492
512
|
},
|
|
493
513
|
{
|
|
494
|
-
"description": "The hover color of the accordion
|
|
495
|
-
"name": "--mdc-accordionbutton-hover-color"
|
|
514
|
+
"description": "The hover color of the accordion.",
|
|
515
|
+
"name": "--mdc-accordionbutton-hover-color",
|
|
516
|
+
"inheritedFrom": {
|
|
517
|
+
"name": "AccordionButton",
|
|
518
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
519
|
+
}
|
|
496
520
|
},
|
|
497
521
|
{
|
|
498
|
-
"description": "The active color of the accordion
|
|
499
|
-
"name": "--mdc-accordionbutton-active-color"
|
|
522
|
+
"description": "The active color of the accordion.",
|
|
523
|
+
"name": "--mdc-accordionbutton-active-color",
|
|
524
|
+
"inheritedFrom": {
|
|
525
|
+
"name": "AccordionButton",
|
|
526
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
527
|
+
}
|
|
500
528
|
},
|
|
501
529
|
{
|
|
502
|
-
"description": "The disabled color of the accordion
|
|
503
|
-
"name": "--mdc-accordionbutton-disabled-color"
|
|
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
|
+
}
|
|
504
536
|
}
|
|
505
537
|
],
|
|
506
538
|
"cssParts": [
|
|
507
539
|
{
|
|
508
|
-
"description": "The header section of the accordion
|
|
509
|
-
"name": "header-section"
|
|
540
|
+
"description": "The header section of the accordion.",
|
|
541
|
+
"name": "header-section",
|
|
542
|
+
"inheritedFrom": {
|
|
543
|
+
"name": "AccordionButton",
|
|
544
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
545
|
+
}
|
|
510
546
|
},
|
|
511
547
|
{
|
|
512
|
-
"description": "The header
|
|
513
|
-
"name": "header
|
|
548
|
+
"description": "The leading header of the accordion.",
|
|
549
|
+
"name": "leading-header",
|
|
550
|
+
"inheritedFrom": {
|
|
551
|
+
"name": "AccordionButton",
|
|
552
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
553
|
+
}
|
|
514
554
|
},
|
|
515
555
|
{
|
|
516
|
-
"description": "The
|
|
517
|
-
"name": "
|
|
556
|
+
"description": "The trailing header of the accordion.",
|
|
557
|
+
"name": "trailing-header",
|
|
558
|
+
"inheritedFrom": {
|
|
559
|
+
"name": "AccordionButton",
|
|
560
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
561
|
+
}
|
|
518
562
|
},
|
|
519
563
|
{
|
|
520
|
-
"description": "The trailing header of the accordion
|
|
521
|
-
"name": "trailing-
|
|
564
|
+
"description": "The trailing header button of the accordion.",
|
|
565
|
+
"name": "trailing-header__button"
|
|
522
566
|
},
|
|
523
567
|
{
|
|
524
|
-
"description": "The
|
|
525
|
-
"name": "
|
|
568
|
+
"description": "The body section of the accordion.",
|
|
569
|
+
"name": "body-section",
|
|
570
|
+
"inheritedFrom": {
|
|
571
|
+
"name": "AccordionButton",
|
|
572
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
573
|
+
}
|
|
526
574
|
},
|
|
527
575
|
{
|
|
528
|
-
"description": "The
|
|
529
|
-
"name": "
|
|
576
|
+
"description": "The header button section of the accordion button.",
|
|
577
|
+
"name": "header-button-section",
|
|
578
|
+
"inheritedFrom": {
|
|
579
|
+
"name": "AccordionButton",
|
|
580
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
581
|
+
}
|
|
582
|
+
},
|
|
583
|
+
{
|
|
584
|
+
"description": "The trailing header icon of the accordion button.",
|
|
585
|
+
"name": "trailing-header__icon",
|
|
586
|
+
"inheritedFrom": {
|
|
587
|
+
"name": "AccordionButton",
|
|
588
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
589
|
+
}
|
|
530
590
|
}
|
|
531
591
|
],
|
|
532
592
|
"slots": [
|
|
593
|
+
{
|
|
594
|
+
"description": "The leading controls slot of the accordion on the header section.",
|
|
595
|
+
"name": "leading-controls"
|
|
596
|
+
},
|
|
597
|
+
{
|
|
598
|
+
"description": "The trailing controls slot of the accordion on the header section.",
|
|
599
|
+
"name": "trailing-controls"
|
|
600
|
+
},
|
|
533
601
|
{
|
|
534
602
|
"description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
|
|
535
|
-
"name": "default"
|
|
603
|
+
"name": "default",
|
|
604
|
+
"inheritedFrom": {
|
|
605
|
+
"name": "AccordionButton",
|
|
606
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
607
|
+
}
|
|
536
608
|
}
|
|
537
609
|
],
|
|
538
610
|
"members": [
|
|
611
|
+
{
|
|
612
|
+
"kind": "method",
|
|
613
|
+
"name": "renderHeader",
|
|
614
|
+
"privacy": "protected",
|
|
615
|
+
"return": {
|
|
616
|
+
"type": {
|
|
617
|
+
"text": ""
|
|
618
|
+
}
|
|
619
|
+
},
|
|
620
|
+
"description": "Renders the header section of the accordion.\nThis includes the leading icon, text and controls, and the trailing controls.\nThe trailing controls include the expand/collapse button.\nThe button is disabled if the accordion is disabled.\nThe button is also given the aria-controls attribute set to the id of the body section.\nThe button is also given the aria-expanded attribute set to the expanded state of the accordion.\nThe prefix icon of the button is set to the expanded state of the accordion.",
|
|
621
|
+
"inheritedFrom": {
|
|
622
|
+
"name": "AccordionButton",
|
|
623
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
624
|
+
}
|
|
625
|
+
},
|
|
626
|
+
{
|
|
627
|
+
"kind": "field",
|
|
628
|
+
"name": "disabled",
|
|
629
|
+
"type": {
|
|
630
|
+
"text": "boolean | undefined"
|
|
631
|
+
},
|
|
632
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
633
|
+
"default": "undefined",
|
|
634
|
+
"attribute": "disabled",
|
|
635
|
+
"reflects": true,
|
|
636
|
+
"inheritedFrom": {
|
|
637
|
+
"name": "AccordionButton",
|
|
638
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
639
|
+
}
|
|
640
|
+
},
|
|
539
641
|
{
|
|
540
642
|
"kind": "field",
|
|
541
643
|
"name": "size",
|
|
@@ -545,7 +647,11 @@
|
|
|
545
647
|
"description": "The size of the accordion item.",
|
|
546
648
|
"default": "'small'",
|
|
547
649
|
"attribute": "size",
|
|
548
|
-
"reflects": true
|
|
650
|
+
"reflects": true,
|
|
651
|
+
"inheritedFrom": {
|
|
652
|
+
"name": "AccordionButton",
|
|
653
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
654
|
+
}
|
|
549
655
|
},
|
|
550
656
|
{
|
|
551
657
|
"kind": "field",
|
|
@@ -556,7 +662,11 @@
|
|
|
556
662
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
557
663
|
"default": "'default'",
|
|
558
664
|
"attribute": "variant",
|
|
559
|
-
"reflects": true
|
|
665
|
+
"reflects": true,
|
|
666
|
+
"inheritedFrom": {
|
|
667
|
+
"name": "AccordionButton",
|
|
668
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
669
|
+
}
|
|
560
670
|
},
|
|
561
671
|
{
|
|
562
672
|
"kind": "field",
|
|
@@ -567,7 +677,11 @@
|
|
|
567
677
|
"description": "The aria level of the accordion component.",
|
|
568
678
|
"default": "3",
|
|
569
679
|
"attribute": "data-aria-level",
|
|
570
|
-
"reflects": true
|
|
680
|
+
"reflects": true,
|
|
681
|
+
"inheritedFrom": {
|
|
682
|
+
"name": "AccordionButton",
|
|
683
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
684
|
+
}
|
|
571
685
|
},
|
|
572
686
|
{
|
|
573
687
|
"kind": "field",
|
|
@@ -578,7 +692,11 @@
|
|
|
578
692
|
"description": "The visibility of the accordion button.",
|
|
579
693
|
"default": "false",
|
|
580
694
|
"attribute": "expanded",
|
|
581
|
-
"reflects": true
|
|
695
|
+
"reflects": true,
|
|
696
|
+
"inheritedFrom": {
|
|
697
|
+
"name": "AccordionButton",
|
|
698
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
699
|
+
}
|
|
582
700
|
},
|
|
583
701
|
{
|
|
584
702
|
"kind": "field",
|
|
@@ -588,7 +706,11 @@
|
|
|
588
706
|
},
|
|
589
707
|
"description": "The header text of the accordion item.",
|
|
590
708
|
"attribute": "header-text",
|
|
591
|
-
"reflects": true
|
|
709
|
+
"reflects": true,
|
|
710
|
+
"inheritedFrom": {
|
|
711
|
+
"name": "AccordionButton",
|
|
712
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
713
|
+
}
|
|
592
714
|
},
|
|
593
715
|
{
|
|
594
716
|
"kind": "field",
|
|
@@ -597,7 +719,11 @@
|
|
|
597
719
|
"text": "IconNames | undefined"
|
|
598
720
|
},
|
|
599
721
|
"description": "The leading icon that is displayed before the header text.",
|
|
600
|
-
"attribute": "prefix-icon"
|
|
722
|
+
"attribute": "prefix-icon",
|
|
723
|
+
"inheritedFrom": {
|
|
724
|
+
"name": "AccordionButton",
|
|
725
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
726
|
+
}
|
|
601
727
|
},
|
|
602
728
|
{
|
|
603
729
|
"kind": "method",
|
|
@@ -608,7 +734,11 @@
|
|
|
608
734
|
"text": "void"
|
|
609
735
|
}
|
|
610
736
|
},
|
|
611
|
-
"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."
|
|
737
|
+
"description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state.",
|
|
738
|
+
"inheritedFrom": {
|
|
739
|
+
"name": "AccordionButton",
|
|
740
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
741
|
+
}
|
|
612
742
|
},
|
|
613
743
|
{
|
|
614
744
|
"kind": "method",
|
|
@@ -619,7 +749,11 @@
|
|
|
619
749
|
"text": "void"
|
|
620
750
|
}
|
|
621
751
|
},
|
|
622
|
-
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
|
|
752
|
+
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state.",
|
|
753
|
+
"inheritedFrom": {
|
|
754
|
+
"name": "AccordionButton",
|
|
755
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
756
|
+
}
|
|
623
757
|
},
|
|
624
758
|
{
|
|
625
759
|
"kind": "method",
|
|
@@ -639,7 +773,11 @@
|
|
|
639
773
|
"description": "The KeyboardEvent fired."
|
|
640
774
|
}
|
|
641
775
|
],
|
|
642
|
-
"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."
|
|
776
|
+
"description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys.",
|
|
777
|
+
"inheritedFrom": {
|
|
778
|
+
"name": "AccordionButton",
|
|
779
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
780
|
+
}
|
|
643
781
|
},
|
|
644
782
|
{
|
|
645
783
|
"kind": "method",
|
|
@@ -658,7 +796,11 @@
|
|
|
658
796
|
"text": "IconNames"
|
|
659
797
|
}
|
|
660
798
|
}
|
|
661
|
-
]
|
|
799
|
+
],
|
|
800
|
+
"inheritedFrom": {
|
|
801
|
+
"name": "AccordionButton",
|
|
802
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
803
|
+
}
|
|
662
804
|
},
|
|
663
805
|
{
|
|
664
806
|
"kind": "method",
|
|
@@ -668,16 +810,10 @@
|
|
|
668
810
|
"type": {
|
|
669
811
|
"text": "TemplateResult | typeof nothing"
|
|
670
812
|
}
|
|
671
|
-
}
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
"name": "renderHeader",
|
|
676
|
-
"privacy": "protected",
|
|
677
|
-
"return": {
|
|
678
|
-
"type": {
|
|
679
|
-
"text": "TemplateResult"
|
|
680
|
-
}
|
|
813
|
+
},
|
|
814
|
+
"inheritedFrom": {
|
|
815
|
+
"name": "AccordionButton",
|
|
816
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
681
817
|
}
|
|
682
818
|
},
|
|
683
819
|
{
|
|
@@ -689,7 +825,11 @@
|
|
|
689
825
|
"text": ""
|
|
690
826
|
}
|
|
691
827
|
},
|
|
692
|
-
"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."
|
|
828
|
+
"description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon.",
|
|
829
|
+
"inheritedFrom": {
|
|
830
|
+
"name": "AccordionButton",
|
|
831
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
832
|
+
}
|
|
693
833
|
},
|
|
694
834
|
{
|
|
695
835
|
"kind": "method",
|
|
@@ -699,32 +839,45 @@
|
|
|
699
839
|
"type": {
|
|
700
840
|
"text": "TemplateResult | typeof nothing"
|
|
701
841
|
}
|
|
702
|
-
}
|
|
703
|
-
},
|
|
704
|
-
{
|
|
705
|
-
"kind": "field",
|
|
706
|
-
"name": "disabled",
|
|
707
|
-
"type": {
|
|
708
|
-
"text": "boolean | undefined"
|
|
709
842
|
},
|
|
710
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
711
|
-
"default": "undefined",
|
|
712
|
-
"attribute": "disabled",
|
|
713
|
-
"reflects": true,
|
|
714
843
|
"inheritedFrom": {
|
|
715
|
-
"name": "
|
|
716
|
-
"module": "
|
|
844
|
+
"name": "AccordionButton",
|
|
845
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
717
846
|
}
|
|
718
847
|
}
|
|
719
848
|
],
|
|
720
849
|
"events": [
|
|
721
850
|
{
|
|
722
|
-
"description": "(React: onShown) This event is triggered when the accordion
|
|
851
|
+
"description": "(React: onShown) This event is triggered when the accordion is expanded.",
|
|
723
852
|
"name": "shown",
|
|
724
|
-
"reactName": "onShown"
|
|
853
|
+
"reactName": "onShown",
|
|
854
|
+
"inheritedFrom": {
|
|
855
|
+
"name": "AccordionButton",
|
|
856
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
857
|
+
}
|
|
725
858
|
}
|
|
726
859
|
],
|
|
860
|
+
"superclass": {
|
|
861
|
+
"name": "AccordionButton",
|
|
862
|
+
"module": "/src/components/accordionbutton/accordionbutton.component"
|
|
863
|
+
},
|
|
864
|
+
"tagName": "mdc-accordion",
|
|
865
|
+
"jsDoc": "/**\n * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.\n *\n * @tagname mdc-accordion\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot leading-controls - The leading controls slot of the accordion on the header section.\n * @slot trailing-controls - The trailing controls slot of the accordion on the header section.\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.\n *\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n * @csspart body-section - The body section of the accordion.\n */",
|
|
866
|
+
"customElement": true,
|
|
727
867
|
"attributes": [
|
|
868
|
+
{
|
|
869
|
+
"name": "disabled",
|
|
870
|
+
"type": {
|
|
871
|
+
"text": "boolean | undefined"
|
|
872
|
+
},
|
|
873
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
874
|
+
"default": "undefined",
|
|
875
|
+
"fieldName": "disabled",
|
|
876
|
+
"inheritedFrom": {
|
|
877
|
+
"name": "AccordionButton",
|
|
878
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
879
|
+
}
|
|
880
|
+
},
|
|
728
881
|
{
|
|
729
882
|
"name": "size",
|
|
730
883
|
"type": {
|
|
@@ -732,7 +885,11 @@
|
|
|
732
885
|
},
|
|
733
886
|
"description": "The size of the accordion item.",
|
|
734
887
|
"default": "'small'",
|
|
735
|
-
"fieldName": "size"
|
|
888
|
+
"fieldName": "size",
|
|
889
|
+
"inheritedFrom": {
|
|
890
|
+
"name": "AccordionButton",
|
|
891
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
892
|
+
}
|
|
736
893
|
},
|
|
737
894
|
{
|
|
738
895
|
"name": "variant",
|
|
@@ -741,7 +898,11 @@
|
|
|
741
898
|
},
|
|
742
899
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
743
900
|
"default": "'default'",
|
|
744
|
-
"fieldName": "variant"
|
|
901
|
+
"fieldName": "variant",
|
|
902
|
+
"inheritedFrom": {
|
|
903
|
+
"name": "AccordionButton",
|
|
904
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
905
|
+
}
|
|
745
906
|
},
|
|
746
907
|
{
|
|
747
908
|
"name": "data-aria-level",
|
|
@@ -750,7 +911,11 @@
|
|
|
750
911
|
},
|
|
751
912
|
"description": "The aria level of the accordion component.",
|
|
752
913
|
"default": "3",
|
|
753
|
-
"fieldName": "dataAriaLevel"
|
|
914
|
+
"fieldName": "dataAriaLevel",
|
|
915
|
+
"inheritedFrom": {
|
|
916
|
+
"name": "AccordionButton",
|
|
917
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
918
|
+
}
|
|
754
919
|
},
|
|
755
920
|
{
|
|
756
921
|
"name": "expanded",
|
|
@@ -759,7 +924,11 @@
|
|
|
759
924
|
},
|
|
760
925
|
"description": "The visibility of the accordion button.",
|
|
761
926
|
"default": "false",
|
|
762
|
-
"fieldName": "expanded"
|
|
927
|
+
"fieldName": "expanded",
|
|
928
|
+
"inheritedFrom": {
|
|
929
|
+
"name": "AccordionButton",
|
|
930
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
931
|
+
}
|
|
763
932
|
},
|
|
764
933
|
{
|
|
765
934
|
"name": "header-text",
|
|
@@ -767,7 +936,11 @@
|
|
|
767
936
|
"text": "string | undefined"
|
|
768
937
|
},
|
|
769
938
|
"description": "The header text of the accordion item.",
|
|
770
|
-
"fieldName": "headerText"
|
|
939
|
+
"fieldName": "headerText",
|
|
940
|
+
"inheritedFrom": {
|
|
941
|
+
"name": "AccordionButton",
|
|
942
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
943
|
+
}
|
|
771
944
|
},
|
|
772
945
|
{
|
|
773
946
|
"name": "prefix-icon",
|
|
@@ -775,186 +948,13 @@
|
|
|
775
948
|
"text": "IconNames | undefined"
|
|
776
949
|
},
|
|
777
950
|
"description": "The leading icon that is displayed before the header text.",
|
|
778
|
-
"fieldName": "prefixIcon"
|
|
779
|
-
},
|
|
780
|
-
{
|
|
781
|
-
"name": "disabled",
|
|
782
|
-
"type": {
|
|
783
|
-
"text": "boolean | undefined"
|
|
784
|
-
},
|
|
785
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
786
|
-
"default": "undefined",
|
|
787
|
-
"fieldName": "disabled",
|
|
951
|
+
"fieldName": "prefixIcon",
|
|
788
952
|
"inheritedFrom": {
|
|
789
|
-
"name": "
|
|
790
|
-
"module": "src/
|
|
953
|
+
"name": "AccordionButton",
|
|
954
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
791
955
|
}
|
|
792
956
|
}
|
|
793
|
-
]
|
|
794
|
-
"mixins": [
|
|
795
|
-
{
|
|
796
|
-
"name": "DisabledMixin",
|
|
797
|
-
"module": "/src/utils/mixins/DisabledMixin"
|
|
798
|
-
}
|
|
799
|
-
],
|
|
800
|
-
"superclass": {
|
|
801
|
-
"name": "Component",
|
|
802
|
-
"module": "/src/models"
|
|
803
|
-
},
|
|
804
|
-
"tagName": "mdc-accordionbutton",
|
|
805
|
-
"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 header-section - The header section of the accordion button.\n * @csspart header-button-section - The header button 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 * @csspart body-section - The body section of the accordion button.\n */",
|
|
806
|
-
"customElement": true
|
|
807
|
-
}
|
|
808
|
-
],
|
|
809
|
-
"exports": [
|
|
810
|
-
{
|
|
811
|
-
"kind": "js",
|
|
812
|
-
"name": "default",
|
|
813
|
-
"declaration": {
|
|
814
|
-
"name": "AccordionButton",
|
|
815
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
816
|
-
}
|
|
817
|
-
}
|
|
818
|
-
]
|
|
819
|
-
},
|
|
820
|
-
{
|
|
821
|
-
"kind": "javascript-module",
|
|
822
|
-
"path": "components/accordiongroup/accordiongroup.component.js",
|
|
823
|
-
"declarations": [
|
|
824
|
-
{
|
|
825
|
-
"kind": "class",
|
|
826
|
-
"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.",
|
|
827
|
-
"name": "AccordionGroup",
|
|
828
|
-
"cssProperties": [
|
|
829
|
-
{
|
|
830
|
-
"description": "The border color of the entire accordiongroup",
|
|
831
|
-
"name": "--mdc-accordiongroup-border-color"
|
|
832
|
-
}
|
|
833
|
-
],
|
|
834
|
-
"slots": [
|
|
835
|
-
{
|
|
836
|
-
"description": "The default slot can contain the `accordion` or `accordionbutton` components.",
|
|
837
|
-
"name": "default"
|
|
838
|
-
}
|
|
839
|
-
],
|
|
840
|
-
"members": [
|
|
841
|
-
{
|
|
842
|
-
"kind": "field",
|
|
843
|
-
"name": "size",
|
|
844
|
-
"type": {
|
|
845
|
-
"text": "Size"
|
|
846
|
-
},
|
|
847
|
-
"description": "The size of the accordion item.",
|
|
848
|
-
"default": "'small'",
|
|
849
|
-
"attribute": "size",
|
|
850
|
-
"reflects": true
|
|
851
|
-
},
|
|
852
|
-
{
|
|
853
|
-
"kind": "field",
|
|
854
|
-
"name": "variant",
|
|
855
|
-
"type": {
|
|
856
|
-
"text": "Variant"
|
|
857
|
-
},
|
|
858
|
-
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
859
|
-
"default": "'stacked'",
|
|
860
|
-
"attribute": "variant",
|
|
861
|
-
"reflects": true
|
|
862
|
-
},
|
|
863
|
-
{
|
|
864
|
-
"kind": "field",
|
|
865
|
-
"name": "allowMultiple",
|
|
866
|
-
"type": {
|
|
867
|
-
"text": "boolean"
|
|
868
|
-
},
|
|
869
|
-
"default": "false",
|
|
870
|
-
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
871
|
-
"attribute": "allow-multiple",
|
|
872
|
-
"reflects": true
|
|
873
|
-
},
|
|
874
|
-
{
|
|
875
|
-
"kind": "method",
|
|
876
|
-
"name": "handleAccordionExpanded",
|
|
877
|
-
"privacy": "private",
|
|
878
|
-
"return": {
|
|
879
|
-
"type": {
|
|
880
|
-
"text": "void"
|
|
881
|
-
}
|
|
882
|
-
},
|
|
883
|
-
"parameters": [
|
|
884
|
-
{
|
|
885
|
-
"name": "event",
|
|
886
|
-
"type": {
|
|
887
|
-
"text": "Event"
|
|
888
|
-
},
|
|
889
|
-
"description": "The event object from the 'shown' event."
|
|
890
|
-
}
|
|
891
|
-
],
|
|
892
|
-
"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."
|
|
893
|
-
},
|
|
894
|
-
{
|
|
895
|
-
"kind": "method",
|
|
896
|
-
"name": "setChildrenAccordionAttributes",
|
|
897
|
-
"privacy": "private",
|
|
898
|
-
"return": {
|
|
899
|
-
"type": {
|
|
900
|
-
"text": "void"
|
|
901
|
-
}
|
|
902
|
-
},
|
|
903
|
-
"parameters": [
|
|
904
|
-
{
|
|
905
|
-
"name": "attributeName",
|
|
906
|
-
"type": {
|
|
907
|
-
"text": "string"
|
|
908
|
-
},
|
|
909
|
-
"description": "The name of the attribute to set."
|
|
910
|
-
},
|
|
911
|
-
{
|
|
912
|
-
"name": "attributeValue",
|
|
913
|
-
"type": {
|
|
914
|
-
"text": "string"
|
|
915
|
-
},
|
|
916
|
-
"description": "The value to set the attribute to."
|
|
917
|
-
}
|
|
918
|
-
],
|
|
919
|
-
"description": "Sets the given attribute on all child accordion or accordionbutton components."
|
|
920
|
-
}
|
|
921
|
-
],
|
|
922
|
-
"attributes": [
|
|
923
|
-
{
|
|
924
|
-
"name": "size",
|
|
925
|
-
"type": {
|
|
926
|
-
"text": "Size"
|
|
927
|
-
},
|
|
928
|
-
"description": "The size of the accordion item.",
|
|
929
|
-
"default": "'small'",
|
|
930
|
-
"fieldName": "size"
|
|
931
|
-
},
|
|
932
|
-
{
|
|
933
|
-
"name": "variant",
|
|
934
|
-
"type": {
|
|
935
|
-
"text": "Variant"
|
|
936
|
-
},
|
|
937
|
-
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
938
|
-
"default": "'stacked'",
|
|
939
|
-
"fieldName": "variant"
|
|
940
|
-
},
|
|
941
|
-
{
|
|
942
|
-
"name": "allow-multiple",
|
|
943
|
-
"type": {
|
|
944
|
-
"text": "boolean"
|
|
945
|
-
},
|
|
946
|
-
"default": "false",
|
|
947
|
-
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
948
|
-
"fieldName": "allowMultiple"
|
|
949
|
-
}
|
|
950
|
-
],
|
|
951
|
-
"superclass": {
|
|
952
|
-
"name": "Component",
|
|
953
|
-
"module": "/src/models"
|
|
954
|
-
},
|
|
955
|
-
"tagName": "mdc-accordiongroup",
|
|
956
|
-
"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 */",
|
|
957
|
-
"customElement": true
|
|
957
|
+
]
|
|
958
958
|
}
|
|
959
959
|
],
|
|
960
960
|
"exports": [
|
|
@@ -962,8 +962,8 @@
|
|
|
962
962
|
"kind": "js",
|
|
963
963
|
"name": "default",
|
|
964
964
|
"declaration": {
|
|
965
|
-
"name": "
|
|
966
|
-
"module": "components/
|
|
965
|
+
"name": "Accordion",
|
|
966
|
+
"module": "components/accordion/accordion.component.js"
|
|
967
967
|
}
|
|
968
968
|
}
|
|
969
969
|
]
|
|
@@ -9903,7 +9903,7 @@
|
|
|
9903
9903
|
"kind": "field",
|
|
9904
9904
|
"name": "boundaryPadding",
|
|
9905
9905
|
"type": {
|
|
9906
|
-
"text": "
|
|
9906
|
+
"text": "number | undefined"
|
|
9907
9907
|
},
|
|
9908
9908
|
"description": "Virtual padding around the boundary to check for overflow.\nSo the popover will not be placed on top of the edge of the boundary.\n\nDefault works well for most cases, but you can set this to customise it when necessary.",
|
|
9909
9909
|
"default": "undefined",
|
|
@@ -10109,6 +10109,21 @@
|
|
|
10109
10109
|
"module": "components/popover/popover.component.js"
|
|
10110
10110
|
}
|
|
10111
10111
|
},
|
|
10112
|
+
{
|
|
10113
|
+
"kind": "field",
|
|
10114
|
+
"name": "strategy",
|
|
10115
|
+
"type": {
|
|
10116
|
+
"text": "'absolute' | 'fixed'"
|
|
10117
|
+
},
|
|
10118
|
+
"description": "The strategy of the popover.\nThis determines how the popover is positioned in the DOM.\n- **absolute**: The popover is positioned absolutely relative to the nearest positioned ancestor.\n- **fixed**: The popover is positioned fixed relative to the viewport.\n\nDefault as `absolute` is recommended for most cases.\nIn cases where the popover gets clipped by a scrollable container,\nyou can set this to `fixed` to avoid clipping.",
|
|
10119
|
+
"default": "absolute",
|
|
10120
|
+
"attribute": "strategy",
|
|
10121
|
+
"reflects": true,
|
|
10122
|
+
"inheritedFrom": {
|
|
10123
|
+
"name": "Popover",
|
|
10124
|
+
"module": "components/popover/popover.component.js"
|
|
10125
|
+
}
|
|
10126
|
+
},
|
|
10112
10127
|
{
|
|
10113
10128
|
"kind": "field",
|
|
10114
10129
|
"name": "role",
|
|
@@ -10677,7 +10692,7 @@
|
|
|
10677
10692
|
{
|
|
10678
10693
|
"name": "boundary-padding",
|
|
10679
10694
|
"type": {
|
|
10680
|
-
"text": "
|
|
10695
|
+
"text": "number | undefined"
|
|
10681
10696
|
},
|
|
10682
10697
|
"description": "Virtual padding around the boundary to check for overflow.\nSo the popover will not be placed on top of the edge of the boundary.\n\nDefault works well for most cases, but you can set this to customise it when necessary.",
|
|
10683
10698
|
"default": "undefined",
|
|
@@ -10882,6 +10897,19 @@
|
|
|
10882
10897
|
"module": "src/components/popover/popover.component.ts"
|
|
10883
10898
|
}
|
|
10884
10899
|
},
|
|
10900
|
+
{
|
|
10901
|
+
"name": "strategy",
|
|
10902
|
+
"type": {
|
|
10903
|
+
"text": "'absolute' | 'fixed'"
|
|
10904
|
+
},
|
|
10905
|
+
"description": "The strategy of the popover.\nThis determines how the popover is positioned in the DOM.\n- **absolute**: The popover is positioned absolutely relative to the nearest positioned ancestor.\n- **fixed**: The popover is positioned fixed relative to the viewport.\n\nDefault as `absolute` is recommended for most cases.\nIn cases where the popover gets clipped by a scrollable container,\nyou can set this to `fixed` to avoid clipping.",
|
|
10906
|
+
"default": "absolute",
|
|
10907
|
+
"fieldName": "strategy",
|
|
10908
|
+
"inheritedFrom": {
|
|
10909
|
+
"name": "Popover",
|
|
10910
|
+
"module": "src/components/popover/popover.component.ts"
|
|
10911
|
+
}
|
|
10912
|
+
},
|
|
10885
10913
|
{
|
|
10886
10914
|
"name": "role",
|
|
10887
10915
|
"type": {
|
|
@@ -17044,6 +17072,14 @@
|
|
|
17044
17072
|
"text": "void"
|
|
17045
17073
|
}
|
|
17046
17074
|
},
|
|
17075
|
+
"parameters": [
|
|
17076
|
+
{
|
|
17077
|
+
"name": "event",
|
|
17078
|
+
"type": {
|
|
17079
|
+
"text": "MouseEvent"
|
|
17080
|
+
}
|
|
17081
|
+
}
|
|
17082
|
+
],
|
|
17047
17083
|
"description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first."
|
|
17048
17084
|
},
|
|
17049
17085
|
{
|
|
@@ -18170,6 +18206,14 @@
|
|
|
18170
18206
|
"text": "void"
|
|
18171
18207
|
}
|
|
18172
18208
|
},
|
|
18209
|
+
"parameters": [
|
|
18210
|
+
{
|
|
18211
|
+
"name": "event",
|
|
18212
|
+
"type": {
|
|
18213
|
+
"text": "MouseEvent"
|
|
18214
|
+
}
|
|
18215
|
+
}
|
|
18216
|
+
],
|
|
18173
18217
|
"description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first.",
|
|
18174
18218
|
"inheritedFrom": {
|
|
18175
18219
|
"name": "ListItem",
|
|
@@ -19110,6 +19154,14 @@
|
|
|
19110
19154
|
"text": "void"
|
|
19111
19155
|
}
|
|
19112
19156
|
},
|
|
19157
|
+
"parameters": [
|
|
19158
|
+
{
|
|
19159
|
+
"name": "event",
|
|
19160
|
+
"type": {
|
|
19161
|
+
"text": "MouseEvent"
|
|
19162
|
+
}
|
|
19163
|
+
}
|
|
19164
|
+
],
|
|
19113
19165
|
"description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first.",
|
|
19114
19166
|
"inheritedFrom": {
|
|
19115
19167
|
"name": "ListItem",
|
|
@@ -20103,6 +20155,14 @@
|
|
|
20103
20155
|
"text": "void"
|
|
20104
20156
|
}
|
|
20105
20157
|
},
|
|
20158
|
+
"parameters": [
|
|
20159
|
+
{
|
|
20160
|
+
"name": "event",
|
|
20161
|
+
"type": {
|
|
20162
|
+
"text": "MouseEvent"
|
|
20163
|
+
}
|
|
20164
|
+
}
|
|
20165
|
+
],
|
|
20106
20166
|
"description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first.",
|
|
20107
20167
|
"inheritedFrom": {
|
|
20108
20168
|
"name": "ListItem",
|
|
@@ -21640,7 +21700,7 @@
|
|
|
21640
21700
|
"kind": "field",
|
|
21641
21701
|
"name": "boundaryPadding",
|
|
21642
21702
|
"type": {
|
|
21643
|
-
"text": "
|
|
21703
|
+
"text": "number | undefined"
|
|
21644
21704
|
},
|
|
21645
21705
|
"description": "Virtual padding around the boundary to check for overflow.\nSo the popover will not be placed on top of the edge of the boundary.\n\nDefault works well for most cases, but you can set this to customise it when necessary.",
|
|
21646
21706
|
"default": "undefined",
|
|
@@ -21876,6 +21936,21 @@
|
|
|
21876
21936
|
"module": "components/popover/popover.component.js"
|
|
21877
21937
|
}
|
|
21878
21938
|
},
|
|
21939
|
+
{
|
|
21940
|
+
"kind": "field",
|
|
21941
|
+
"name": "strategy",
|
|
21942
|
+
"type": {
|
|
21943
|
+
"text": "'absolute' | 'fixed'"
|
|
21944
|
+
},
|
|
21945
|
+
"description": "The strategy of the popover.\nThis determines how the popover is positioned in the DOM.\n- **absolute**: The popover is positioned absolutely relative to the nearest positioned ancestor.\n- **fixed**: The popover is positioned fixed relative to the viewport.\n\nDefault as `absolute` is recommended for most cases.\nIn cases where the popover gets clipped by a scrollable container,\nyou can set this to `fixed` to avoid clipping.",
|
|
21946
|
+
"default": "absolute",
|
|
21947
|
+
"attribute": "strategy",
|
|
21948
|
+
"reflects": true,
|
|
21949
|
+
"inheritedFrom": {
|
|
21950
|
+
"name": "Popover",
|
|
21951
|
+
"module": "components/popover/popover.component.js"
|
|
21952
|
+
}
|
|
21953
|
+
},
|
|
21879
21954
|
{
|
|
21880
21955
|
"kind": "field",
|
|
21881
21956
|
"name": "role",
|
|
@@ -22378,7 +22453,7 @@
|
|
|
22378
22453
|
{
|
|
22379
22454
|
"name": "boundary-padding",
|
|
22380
22455
|
"type": {
|
|
22381
|
-
"text": "
|
|
22456
|
+
"text": "number | undefined"
|
|
22382
22457
|
},
|
|
22383
22458
|
"description": "Virtual padding around the boundary to check for overflow.\nSo the popover will not be placed on top of the edge of the boundary.\n\nDefault works well for most cases, but you can set this to customise it when necessary.",
|
|
22384
22459
|
"default": "undefined",
|
|
@@ -22609,6 +22684,19 @@
|
|
|
22609
22684
|
"module": "src/components/popover/popover.component.ts"
|
|
22610
22685
|
}
|
|
22611
22686
|
},
|
|
22687
|
+
{
|
|
22688
|
+
"name": "strategy",
|
|
22689
|
+
"type": {
|
|
22690
|
+
"text": "'absolute' | 'fixed'"
|
|
22691
|
+
},
|
|
22692
|
+
"description": "The strategy of the popover.\nThis determines how the popover is positioned in the DOM.\n- **absolute**: The popover is positioned absolutely relative to the nearest positioned ancestor.\n- **fixed**: The popover is positioned fixed relative to the viewport.\n\nDefault as `absolute` is recommended for most cases.\nIn cases where the popover gets clipped by a scrollable container,\nyou can set this to `fixed` to avoid clipping.",
|
|
22693
|
+
"default": "absolute",
|
|
22694
|
+
"fieldName": "strategy",
|
|
22695
|
+
"inheritedFrom": {
|
|
22696
|
+
"name": "Popover",
|
|
22697
|
+
"module": "src/components/popover/popover.component.ts"
|
|
22698
|
+
}
|
|
22699
|
+
},
|
|
22612
22700
|
{
|
|
22613
22701
|
"name": "role",
|
|
22614
22702
|
"type": {
|
|
@@ -23541,6 +23629,14 @@
|
|
|
23541
23629
|
"text": "void"
|
|
23542
23630
|
}
|
|
23543
23631
|
},
|
|
23632
|
+
"parameters": [
|
|
23633
|
+
{
|
|
23634
|
+
"name": "event",
|
|
23635
|
+
"type": {
|
|
23636
|
+
"text": "MouseEvent"
|
|
23637
|
+
}
|
|
23638
|
+
}
|
|
23639
|
+
],
|
|
23544
23640
|
"description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first.",
|
|
23545
23641
|
"inheritedFrom": {
|
|
23546
23642
|
"name": "ListItem",
|
|
@@ -24579,6 +24675,14 @@
|
|
|
24579
24675
|
"text": "void"
|
|
24580
24676
|
}
|
|
24581
24677
|
},
|
|
24678
|
+
"parameters": [
|
|
24679
|
+
{
|
|
24680
|
+
"name": "event",
|
|
24681
|
+
"type": {
|
|
24682
|
+
"text": "MouseEvent"
|
|
24683
|
+
}
|
|
24684
|
+
}
|
|
24685
|
+
],
|
|
24582
24686
|
"description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first.",
|
|
24583
24687
|
"inheritedFrom": {
|
|
24584
24688
|
"name": "ListItem",
|
|
@@ -26648,7 +26752,7 @@
|
|
|
26648
26752
|
"kind": "field",
|
|
26649
26753
|
"name": "boundaryPadding",
|
|
26650
26754
|
"type": {
|
|
26651
|
-
"text": "
|
|
26755
|
+
"text": "number | undefined"
|
|
26652
26756
|
},
|
|
26653
26757
|
"description": "Virtual padding around the boundary to check for overflow.\nSo the popover will not be placed on top of the edge of the boundary.\n\nDefault works well for most cases, but you can set this to customise it when necessary.",
|
|
26654
26758
|
"default": "undefined",
|
|
@@ -26852,6 +26956,17 @@
|
|
|
26852
26956
|
"attribute": "close-button-aria-label",
|
|
26853
26957
|
"reflects": true
|
|
26854
26958
|
},
|
|
26959
|
+
{
|
|
26960
|
+
"kind": "field",
|
|
26961
|
+
"name": "strategy",
|
|
26962
|
+
"type": {
|
|
26963
|
+
"text": "'absolute' | 'fixed'"
|
|
26964
|
+
},
|
|
26965
|
+
"description": "The strategy of the popover.\nThis determines how the popover is positioned in the DOM.\n- **absolute**: The popover is positioned absolutely relative to the nearest positioned ancestor.\n- **fixed**: The popover is positioned fixed relative to the viewport.\n\nDefault as `absolute` is recommended for most cases.\nIn cases where the popover gets clipped by a scrollable container,\nyou can set this to `fixed` to avoid clipping.",
|
|
26966
|
+
"default": "absolute",
|
|
26967
|
+
"attribute": "strategy",
|
|
26968
|
+
"reflects": true
|
|
26969
|
+
},
|
|
26855
26970
|
{
|
|
26856
26971
|
"kind": "field",
|
|
26857
26972
|
"name": "role",
|
|
@@ -27725,7 +27840,7 @@
|
|
|
27725
27840
|
{
|
|
27726
27841
|
"name": "boundary-padding",
|
|
27727
27842
|
"type": {
|
|
27728
|
-
"text": "
|
|
27843
|
+
"text": "number | undefined"
|
|
27729
27844
|
},
|
|
27730
27845
|
"description": "Virtual padding around the boundary to check for overflow.\nSo the popover will not be placed on top of the edge of the boundary.\n\nDefault works well for most cases, but you can set this to customise it when necessary.",
|
|
27731
27846
|
"default": "undefined",
|
|
@@ -27884,6 +27999,15 @@
|
|
|
27884
27999
|
"description": "aria-label attribute to be set for close button accessibility.",
|
|
27885
28000
|
"fieldName": "closeButtonAriaLabel"
|
|
27886
28001
|
},
|
|
28002
|
+
{
|
|
28003
|
+
"name": "strategy",
|
|
28004
|
+
"type": {
|
|
28005
|
+
"text": "'absolute' | 'fixed'"
|
|
28006
|
+
},
|
|
28007
|
+
"description": "The strategy of the popover.\nThis determines how the popover is positioned in the DOM.\n- **absolute**: The popover is positioned absolutely relative to the nearest positioned ancestor.\n- **fixed**: The popover is positioned fixed relative to the viewport.\n\nDefault as `absolute` is recommended for most cases.\nIn cases where the popover gets clipped by a scrollable container,\nyou can set this to `fixed` to avoid clipping.",
|
|
28008
|
+
"default": "absolute",
|
|
28009
|
+
"fieldName": "strategy"
|
|
28010
|
+
},
|
|
27887
28011
|
{
|
|
27888
28012
|
"name": "role",
|
|
27889
28013
|
"type": {
|
|
@@ -31865,6 +31989,60 @@
|
|
|
31865
31989
|
"kind": "class",
|
|
31866
31990
|
"description": "The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\nIt is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\nThe component ensures accessibility and usability while handling various use cases,\nincluding long text truncation with tooltip support.\n\nEvery mdc-option should have a `value` attribute set to ensure proper form submission.\n\nTo set a default option, use the `selected` attribute on the `mdc-option` element.\n\n**Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.",
|
|
31867
31991
|
"name": "Select",
|
|
31992
|
+
"cssProperties": [
|
|
31993
|
+
{
|
|
31994
|
+
"description": "The background color of the combobox of select.",
|
|
31995
|
+
"name": "--mdc-select-background-color"
|
|
31996
|
+
},
|
|
31997
|
+
{
|
|
31998
|
+
"description": "The background color of the combobox of select when hovered.",
|
|
31999
|
+
"name": "--mdc-select-background-color-hover"
|
|
32000
|
+
},
|
|
32001
|
+
{
|
|
32002
|
+
"description": "The background color of the combobox of select when active.",
|
|
32003
|
+
"name": "--mdc-select-background-color-active"
|
|
32004
|
+
},
|
|
32005
|
+
{
|
|
32006
|
+
"description": "The background color of the combobox of select when disabled.",
|
|
32007
|
+
"name": "--mdc-select-background-color-disabled"
|
|
32008
|
+
},
|
|
32009
|
+
{
|
|
32010
|
+
"description": "The text color of the select.",
|
|
32011
|
+
"name": "--mdc-select-text-color"
|
|
32012
|
+
},
|
|
32013
|
+
{
|
|
32014
|
+
"description": "The text color of the selected option in the select.",
|
|
32015
|
+
"name": "--mdc-select-text-color-selected"
|
|
32016
|
+
},
|
|
32017
|
+
{
|
|
32018
|
+
"description": "The text color of the select when disabled.",
|
|
32019
|
+
"name": "--mdc-select-text-color-disabled"
|
|
32020
|
+
},
|
|
32021
|
+
{
|
|
32022
|
+
"description": "The border color of the select.",
|
|
32023
|
+
"name": "--mdc-select-border-color"
|
|
32024
|
+
},
|
|
32025
|
+
{
|
|
32026
|
+
"description": "The border color of the select when disabled.",
|
|
32027
|
+
"name": "--mdc-select-border-color-disabled"
|
|
32028
|
+
},
|
|
32029
|
+
{
|
|
32030
|
+
"description": "The border color of the select when in success state.",
|
|
32031
|
+
"name": "--mdc-select-border-color-success"
|
|
32032
|
+
},
|
|
32033
|
+
{
|
|
32034
|
+
"description": "The border color of the select when in warning state.",
|
|
32035
|
+
"name": "--mdc-select-border-color-warning"
|
|
32036
|
+
},
|
|
32037
|
+
{
|
|
32038
|
+
"description": "The border color of the select when in error state.",
|
|
32039
|
+
"name": "--mdc-select-border-color-error"
|
|
32040
|
+
},
|
|
32041
|
+
{
|
|
32042
|
+
"description": "The width of the select.",
|
|
32043
|
+
"name": "--mdc-select-width"
|
|
32044
|
+
}
|
|
32045
|
+
],
|
|
31868
32046
|
"slots": [
|
|
31869
32047
|
{
|
|
31870
32048
|
"description": "This is a default/unnamed slot for Selectlistbox including options and/or option group.",
|
|
@@ -31921,6 +32099,28 @@
|
|
|
31921
32099
|
"default": "undefined",
|
|
31922
32100
|
"attribute": "soft-disabled"
|
|
31923
32101
|
},
|
|
32102
|
+
{
|
|
32103
|
+
"kind": "field",
|
|
32104
|
+
"name": "boundary",
|
|
32105
|
+
"type": {
|
|
32106
|
+
"text": "'clippingAncestors' | string"
|
|
32107
|
+
},
|
|
32108
|
+
"description": "This describes the clipping element(s) or area that overflow of the used popover will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
|
|
32109
|
+
"default": "'clippingAncestors'",
|
|
32110
|
+
"attribute": "boundary",
|
|
32111
|
+
"reflects": true
|
|
32112
|
+
},
|
|
32113
|
+
{
|
|
32114
|
+
"kind": "field",
|
|
32115
|
+
"name": "strategy",
|
|
32116
|
+
"type": {
|
|
32117
|
+
"text": "'absolute' | 'fixed'"
|
|
32118
|
+
},
|
|
32119
|
+
"description": "The strategy of the popover within Select.\nThis determines how the popover is positioned in the DOM.\n\nIn case `boundary` is set to something other than 'clippingAncestors',\nit might be necessary to set the `strategy` to 'fixed' to ensure that the popover\nis not getting clipped by scrollable containers enclosing the select.",
|
|
32120
|
+
"default": "absolute",
|
|
32121
|
+
"attribute": "strategy",
|
|
32122
|
+
"reflects": true
|
|
32123
|
+
},
|
|
31924
32124
|
{
|
|
31925
32125
|
"kind": "method",
|
|
31926
32126
|
"name": "getAllValidOptions",
|
|
@@ -32563,6 +32763,24 @@
|
|
|
32563
32763
|
"default": "undefined",
|
|
32564
32764
|
"fieldName": "softDisabled"
|
|
32565
32765
|
},
|
|
32766
|
+
{
|
|
32767
|
+
"name": "boundary",
|
|
32768
|
+
"type": {
|
|
32769
|
+
"text": "'clippingAncestors' | string"
|
|
32770
|
+
},
|
|
32771
|
+
"description": "This describes the clipping element(s) or area that overflow of the used popover will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
|
|
32772
|
+
"default": "'clippingAncestors'",
|
|
32773
|
+
"fieldName": "boundary"
|
|
32774
|
+
},
|
|
32775
|
+
{
|
|
32776
|
+
"name": "strategy",
|
|
32777
|
+
"type": {
|
|
32778
|
+
"text": "'absolute' | 'fixed'"
|
|
32779
|
+
},
|
|
32780
|
+
"description": "The strategy of the popover within Select.\nThis determines how the popover is positioned in the DOM.\n\nIn case `boundary` is set to something other than 'clippingAncestors',\nit might be necessary to set the `strategy` to 'fixed' to ensure that the popover\nis not getting clipped by scrollable containers enclosing the select.",
|
|
32781
|
+
"default": "absolute",
|
|
32782
|
+
"fieldName": "strategy"
|
|
32783
|
+
},
|
|
32566
32784
|
{
|
|
32567
32785
|
"name": "name",
|
|
32568
32786
|
"type": {
|
|
@@ -32742,7 +32960,7 @@
|
|
|
32742
32960
|
"module": "/src/components/formfieldwrapper/formfieldwrapper.component"
|
|
32743
32961
|
},
|
|
32744
32962
|
"tagName": "mdc-select",
|
|
32745
|
-
"jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n * The component ensures accessibility and usability while handling various use cases,\n * including long text truncation with tooltip support.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event input - (React: onInput) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n */",
|
|
32963
|
+
"jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n * The component ensures accessibility and usability while handling various use cases,\n * including long text truncation with tooltip support.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event input - (React: onInput) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n *\n * @cssproperty --mdc-select-background-color - The background color of the combobox of select.\n * @cssproperty --mdc-select-background-color-hover - The background color of the combobox of select when hovered.\n * @cssproperty --mdc-select-background-color-active - The background color of the combobox of select when active.\n * @cssproperty --mdc-select-background-color-disabled - The background color of the combobox of select when disabled.\n * @cssproperty --mdc-select-text-color - The text color of the select.\n * @cssproperty --mdc-select-text-color-selected - The text color of the selected option in the select.\n * @cssproperty --mdc-select-text-color-disabled - The text color of the select when disabled.\n * @cssproperty --mdc-select-border-color - The border color of the select.\n * @cssproperty --mdc-select-border-color-disabled - The border color of the select when disabled.\n * @cssproperty --mdc-select-border-color-success - The border color of the select when in success state.\n * @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.\n * @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.\n * @cssproperty --mdc-select-width - The width of the select.\n */",
|
|
32746
32964
|
"customElement": true
|
|
32747
32965
|
}
|
|
32748
32966
|
],
|
|
@@ -38132,7 +38350,7 @@
|
|
|
38132
38350
|
"kind": "field",
|
|
38133
38351
|
"name": "boundaryPadding",
|
|
38134
38352
|
"type": {
|
|
38135
|
-
"text": "
|
|
38353
|
+
"text": "number | undefined"
|
|
38136
38354
|
},
|
|
38137
38355
|
"description": "Virtual padding around the boundary to check for overflow.\nSo the popover will not be placed on top of the edge of the boundary.\n\nDefault works well for most cases, but you can set this to customise it when necessary.",
|
|
38138
38356
|
"default": "undefined",
|
|
@@ -38368,6 +38586,21 @@
|
|
|
38368
38586
|
"module": "components/popover/popover.component.js"
|
|
38369
38587
|
}
|
|
38370
38588
|
},
|
|
38589
|
+
{
|
|
38590
|
+
"kind": "field",
|
|
38591
|
+
"name": "strategy",
|
|
38592
|
+
"type": {
|
|
38593
|
+
"text": "'absolute' | 'fixed'"
|
|
38594
|
+
},
|
|
38595
|
+
"description": "The strategy of the popover.\nThis determines how the popover is positioned in the DOM.\n- **absolute**: The popover is positioned absolutely relative to the nearest positioned ancestor.\n- **fixed**: The popover is positioned fixed relative to the viewport.\n\nDefault as `absolute` is recommended for most cases.\nIn cases where the popover gets clipped by a scrollable container,\nyou can set this to `fixed` to avoid clipping.",
|
|
38596
|
+
"default": "absolute",
|
|
38597
|
+
"attribute": "strategy",
|
|
38598
|
+
"reflects": true,
|
|
38599
|
+
"inheritedFrom": {
|
|
38600
|
+
"name": "Popover",
|
|
38601
|
+
"module": "components/popover/popover.component.js"
|
|
38602
|
+
}
|
|
38603
|
+
},
|
|
38371
38604
|
{
|
|
38372
38605
|
"kind": "field",
|
|
38373
38606
|
"name": "role",
|
|
@@ -38920,7 +39153,7 @@
|
|
|
38920
39153
|
{
|
|
38921
39154
|
"name": "boundary-padding",
|
|
38922
39155
|
"type": {
|
|
38923
|
-
"text": "
|
|
39156
|
+
"text": "number | undefined"
|
|
38924
39157
|
},
|
|
38925
39158
|
"description": "Virtual padding around the boundary to check for overflow.\nSo the popover will not be placed on top of the edge of the boundary.\n\nDefault works well for most cases, but you can set this to customise it when necessary.",
|
|
38926
39159
|
"default": "undefined",
|
|
@@ -39151,6 +39384,19 @@
|
|
|
39151
39384
|
"module": "src/components/popover/popover.component.ts"
|
|
39152
39385
|
}
|
|
39153
39386
|
},
|
|
39387
|
+
{
|
|
39388
|
+
"name": "strategy",
|
|
39389
|
+
"type": {
|
|
39390
|
+
"text": "'absolute' | 'fixed'"
|
|
39391
|
+
},
|
|
39392
|
+
"description": "The strategy of the popover.\nThis determines how the popover is positioned in the DOM.\n- **absolute**: The popover is positioned absolutely relative to the nearest positioned ancestor.\n- **fixed**: The popover is positioned fixed relative to the viewport.\n\nDefault as `absolute` is recommended for most cases.\nIn cases where the popover gets clipped by a scrollable container,\nyou can set this to `fixed` to avoid clipping.",
|
|
39393
|
+
"default": "absolute",
|
|
39394
|
+
"fieldName": "strategy",
|
|
39395
|
+
"inheritedFrom": {
|
|
39396
|
+
"name": "Popover",
|
|
39397
|
+
"module": "src/components/popover/popover.component.ts"
|
|
39398
|
+
}
|
|
39399
|
+
},
|
|
39154
39400
|
{
|
|
39155
39401
|
"name": "role",
|
|
39156
39402
|
"type": {
|
|
@@ -40132,7 +40378,7 @@
|
|
|
40132
40378
|
"kind": "field",
|
|
40133
40379
|
"name": "boundaryPadding",
|
|
40134
40380
|
"type": {
|
|
40135
|
-
"text": "
|
|
40381
|
+
"text": "number | undefined"
|
|
40136
40382
|
},
|
|
40137
40383
|
"description": "Virtual padding around the boundary to check for overflow.\nSo the popover will not be placed on top of the edge of the boundary.\n\nDefault works well for most cases, but you can set this to customise it when necessary.",
|
|
40138
40384
|
"default": "undefined",
|
|
@@ -40368,6 +40614,21 @@
|
|
|
40368
40614
|
"module": "components/popover/popover.component.js"
|
|
40369
40615
|
}
|
|
40370
40616
|
},
|
|
40617
|
+
{
|
|
40618
|
+
"kind": "field",
|
|
40619
|
+
"name": "strategy",
|
|
40620
|
+
"type": {
|
|
40621
|
+
"text": "'absolute' | 'fixed'"
|
|
40622
|
+
},
|
|
40623
|
+
"description": "The strategy of the popover.\nThis determines how the popover is positioned in the DOM.\n- **absolute**: The popover is positioned absolutely relative to the nearest positioned ancestor.\n- **fixed**: The popover is positioned fixed relative to the viewport.\n\nDefault as `absolute` is recommended for most cases.\nIn cases where the popover gets clipped by a scrollable container,\nyou can set this to `fixed` to avoid clipping.",
|
|
40624
|
+
"default": "absolute",
|
|
40625
|
+
"attribute": "strategy",
|
|
40626
|
+
"reflects": true,
|
|
40627
|
+
"inheritedFrom": {
|
|
40628
|
+
"name": "Popover",
|
|
40629
|
+
"module": "components/popover/popover.component.js"
|
|
40630
|
+
}
|
|
40631
|
+
},
|
|
40371
40632
|
{
|
|
40372
40633
|
"kind": "field",
|
|
40373
40634
|
"name": "role",
|
|
@@ -40921,7 +41182,7 @@
|
|
|
40921
41182
|
{
|
|
40922
41183
|
"name": "boundary-padding",
|
|
40923
41184
|
"type": {
|
|
40924
|
-
"text": "
|
|
41185
|
+
"text": "number | undefined"
|
|
40925
41186
|
},
|
|
40926
41187
|
"description": "Virtual padding around the boundary to check for overflow.\nSo the popover will not be placed on top of the edge of the boundary.\n\nDefault works well for most cases, but you can set this to customise it when necessary.",
|
|
40927
41188
|
"default": "undefined",
|
|
@@ -41152,6 +41413,19 @@
|
|
|
41152
41413
|
"module": "src/components/popover/popover.component.ts"
|
|
41153
41414
|
}
|
|
41154
41415
|
},
|
|
41416
|
+
{
|
|
41417
|
+
"name": "strategy",
|
|
41418
|
+
"type": {
|
|
41419
|
+
"text": "'absolute' | 'fixed'"
|
|
41420
|
+
},
|
|
41421
|
+
"description": "The strategy of the popover.\nThis determines how the popover is positioned in the DOM.\n- **absolute**: The popover is positioned absolutely relative to the nearest positioned ancestor.\n- **fixed**: The popover is positioned fixed relative to the viewport.\n\nDefault as `absolute` is recommended for most cases.\nIn cases where the popover gets clipped by a scrollable container,\nyou can set this to `fixed` to avoid clipping.",
|
|
41422
|
+
"default": "absolute",
|
|
41423
|
+
"fieldName": "strategy",
|
|
41424
|
+
"inheritedFrom": {
|
|
41425
|
+
"name": "Popover",
|
|
41426
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41427
|
+
}
|
|
41428
|
+
},
|
|
41155
41429
|
{
|
|
41156
41430
|
"name": "role",
|
|
41157
41431
|
"type": {
|