@momentum-design/components 0.103.0 → 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 +156 -152
- package/dist/browser/index.js.map +3 -3
- package/dist/components/button/button.component.d.ts +2 -0
- package/dist/components/button/button.component.js +3 -1
- package/dist/components/button/button.styles.js +3 -2
- 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 +761 -481
- package/dist/react/button/index.d.ts +2 -0
- package/dist/react/button/index.js +2 -0
- 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
|
]
|
|
@@ -3247,6 +3247,12 @@
|
|
|
3247
3247
|
"kind": "class",
|
|
3248
3248
|
"description": "`mdc-button` is a component that can be configured in various ways to suit different use cases.\n\nButton Variants:\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.\n\nButton Colors:\n- **Positive**: Green color.\n- **Negative**: Red color.\n- **Accent**: Blue color.\n- **Promotional**: Purple color.\n- **Default**: White color.\n\nButton Sizes (in REM units):\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- **Tertiary icon button**: 20.\n\nButton Types:\n- **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n- **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n- **Icon button**: A button represented by just an icon without any text.\nThe type of button is inferred based on the presence of slot and/or prefix and postfix icons.",
|
|
3249
3249
|
"name": "Button",
|
|
3250
|
+
"cssParts": [
|
|
3251
|
+
{
|
|
3252
|
+
"description": "Text label of the button, passed in default slot",
|
|
3253
|
+
"name": "button-text"
|
|
3254
|
+
}
|
|
3255
|
+
],
|
|
3250
3256
|
"slots": [
|
|
3251
3257
|
{
|
|
3252
3258
|
"description": "Text label of the button.",
|
|
@@ -3881,7 +3887,7 @@
|
|
|
3881
3887
|
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
3882
3888
|
},
|
|
3883
3889
|
"tagName": "mdc-button",
|
|
3884
|
-
"jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * Button Variants:\n * - **Primary**: Solid background color.\n * - **Secondary**: Transparent background with a solid border.\n * - **Tertiary**: No background or border, appears as plain text but retains all button functionalities.\n *\n * Button Colors:\n * - **Positive**: Green color.\n * - **Negative**: Red color.\n * - **Accent**: Blue color.\n * - **Promotional**: Purple color.\n * - **Default**: White color.\n *\n * Button Sizes (in REM units):\n * - **Pill button**: 40, 32, 28, 24.\n * - **Icon button**: 64, 52, 40, 32, 28, 24.\n * - **Tertiary icon button**: 20.\n *\n * Button Types:\n * - **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n * - **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n * - **Icon button**: A button represented by just an icon without any text.\n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n */",
|
|
3890
|
+
"jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * Button Variants:\n * - **Primary**: Solid background color.\n * - **Secondary**: Transparent background with a solid border.\n * - **Tertiary**: No background or border, appears as plain text but retains all button functionalities.\n *\n * Button Colors:\n * - **Positive**: Green color.\n * - **Negative**: Red color.\n * - **Accent**: Blue color.\n * - **Promotional**: Purple color.\n * - **Default**: White color.\n *\n * Button Sizes (in REM units):\n * - **Pill button**: 40, 32, 28, 24.\n * - **Icon button**: 64, 52, 40, 32, 28, 24.\n * - **Tertiary icon button**: 20.\n *\n * Button Types:\n * - **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n * - **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n * - **Icon button**: A button represented by just an icon without any text.\n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n *\n * @csspart button-text - Text label of the button, passed in default slot\n */",
|
|
3885
3891
|
"customElement": true,
|
|
3886
3892
|
"events": [
|
|
3887
3893
|
{
|
|
@@ -9897,7 +9903,7 @@
|
|
|
9897
9903
|
"kind": "field",
|
|
9898
9904
|
"name": "boundaryPadding",
|
|
9899
9905
|
"type": {
|
|
9900
|
-
"text": "
|
|
9906
|
+
"text": "number | undefined"
|
|
9901
9907
|
},
|
|
9902
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.",
|
|
9903
9909
|
"default": "undefined",
|
|
@@ -10103,6 +10109,21 @@
|
|
|
10103
10109
|
"module": "components/popover/popover.component.js"
|
|
10104
10110
|
}
|
|
10105
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
|
+
},
|
|
10106
10127
|
{
|
|
10107
10128
|
"kind": "field",
|
|
10108
10129
|
"name": "role",
|
|
@@ -10671,7 +10692,7 @@
|
|
|
10671
10692
|
{
|
|
10672
10693
|
"name": "boundary-padding",
|
|
10673
10694
|
"type": {
|
|
10674
|
-
"text": "
|
|
10695
|
+
"text": "number | undefined"
|
|
10675
10696
|
},
|
|
10676
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.",
|
|
10677
10698
|
"default": "undefined",
|
|
@@ -10876,6 +10897,19 @@
|
|
|
10876
10897
|
"module": "src/components/popover/popover.component.ts"
|
|
10877
10898
|
}
|
|
10878
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
|
+
},
|
|
10879
10913
|
{
|
|
10880
10914
|
"name": "role",
|
|
10881
10915
|
"type": {
|
|
@@ -17038,6 +17072,14 @@
|
|
|
17038
17072
|
"text": "void"
|
|
17039
17073
|
}
|
|
17040
17074
|
},
|
|
17075
|
+
"parameters": [
|
|
17076
|
+
{
|
|
17077
|
+
"name": "event",
|
|
17078
|
+
"type": {
|
|
17079
|
+
"text": "MouseEvent"
|
|
17080
|
+
}
|
|
17081
|
+
}
|
|
17082
|
+
],
|
|
17041
17083
|
"description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first."
|
|
17042
17084
|
},
|
|
17043
17085
|
{
|
|
@@ -18164,6 +18206,14 @@
|
|
|
18164
18206
|
"text": "void"
|
|
18165
18207
|
}
|
|
18166
18208
|
},
|
|
18209
|
+
"parameters": [
|
|
18210
|
+
{
|
|
18211
|
+
"name": "event",
|
|
18212
|
+
"type": {
|
|
18213
|
+
"text": "MouseEvent"
|
|
18214
|
+
}
|
|
18215
|
+
}
|
|
18216
|
+
],
|
|
18167
18217
|
"description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first.",
|
|
18168
18218
|
"inheritedFrom": {
|
|
18169
18219
|
"name": "ListItem",
|
|
@@ -19104,6 +19154,14 @@
|
|
|
19104
19154
|
"text": "void"
|
|
19105
19155
|
}
|
|
19106
19156
|
},
|
|
19157
|
+
"parameters": [
|
|
19158
|
+
{
|
|
19159
|
+
"name": "event",
|
|
19160
|
+
"type": {
|
|
19161
|
+
"text": "MouseEvent"
|
|
19162
|
+
}
|
|
19163
|
+
}
|
|
19164
|
+
],
|
|
19107
19165
|
"description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first.",
|
|
19108
19166
|
"inheritedFrom": {
|
|
19109
19167
|
"name": "ListItem",
|
|
@@ -20097,6 +20155,14 @@
|
|
|
20097
20155
|
"text": "void"
|
|
20098
20156
|
}
|
|
20099
20157
|
},
|
|
20158
|
+
"parameters": [
|
|
20159
|
+
{
|
|
20160
|
+
"name": "event",
|
|
20161
|
+
"type": {
|
|
20162
|
+
"text": "MouseEvent"
|
|
20163
|
+
}
|
|
20164
|
+
}
|
|
20165
|
+
],
|
|
20100
20166
|
"description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first.",
|
|
20101
20167
|
"inheritedFrom": {
|
|
20102
20168
|
"name": "ListItem",
|
|
@@ -21634,7 +21700,7 @@
|
|
|
21634
21700
|
"kind": "field",
|
|
21635
21701
|
"name": "boundaryPadding",
|
|
21636
21702
|
"type": {
|
|
21637
|
-
"text": "
|
|
21703
|
+
"text": "number | undefined"
|
|
21638
21704
|
},
|
|
21639
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.",
|
|
21640
21706
|
"default": "undefined",
|
|
@@ -21870,6 +21936,21 @@
|
|
|
21870
21936
|
"module": "components/popover/popover.component.js"
|
|
21871
21937
|
}
|
|
21872
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
|
+
},
|
|
21873
21954
|
{
|
|
21874
21955
|
"kind": "field",
|
|
21875
21956
|
"name": "role",
|
|
@@ -22372,7 +22453,7 @@
|
|
|
22372
22453
|
{
|
|
22373
22454
|
"name": "boundary-padding",
|
|
22374
22455
|
"type": {
|
|
22375
|
-
"text": "
|
|
22456
|
+
"text": "number | undefined"
|
|
22376
22457
|
},
|
|
22377
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.",
|
|
22378
22459
|
"default": "undefined",
|
|
@@ -22603,6 +22684,19 @@
|
|
|
22603
22684
|
"module": "src/components/popover/popover.component.ts"
|
|
22604
22685
|
}
|
|
22605
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
|
+
},
|
|
22606
22700
|
{
|
|
22607
22701
|
"name": "role",
|
|
22608
22702
|
"type": {
|
|
@@ -23535,6 +23629,14 @@
|
|
|
23535
23629
|
"text": "void"
|
|
23536
23630
|
}
|
|
23537
23631
|
},
|
|
23632
|
+
"parameters": [
|
|
23633
|
+
{
|
|
23634
|
+
"name": "event",
|
|
23635
|
+
"type": {
|
|
23636
|
+
"text": "MouseEvent"
|
|
23637
|
+
}
|
|
23638
|
+
}
|
|
23639
|
+
],
|
|
23538
23640
|
"description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first.",
|
|
23539
23641
|
"inheritedFrom": {
|
|
23540
23642
|
"name": "ListItem",
|
|
@@ -24573,6 +24675,14 @@
|
|
|
24573
24675
|
"text": "void"
|
|
24574
24676
|
}
|
|
24575
24677
|
},
|
|
24678
|
+
"parameters": [
|
|
24679
|
+
{
|
|
24680
|
+
"name": "event",
|
|
24681
|
+
"type": {
|
|
24682
|
+
"text": "MouseEvent"
|
|
24683
|
+
}
|
|
24684
|
+
}
|
|
24685
|
+
],
|
|
24576
24686
|
"description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first.",
|
|
24577
24687
|
"inheritedFrom": {
|
|
24578
24688
|
"name": "ListItem",
|
|
@@ -26642,7 +26752,7 @@
|
|
|
26642
26752
|
"kind": "field",
|
|
26643
26753
|
"name": "boundaryPadding",
|
|
26644
26754
|
"type": {
|
|
26645
|
-
"text": "
|
|
26755
|
+
"text": "number | undefined"
|
|
26646
26756
|
},
|
|
26647
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.",
|
|
26648
26758
|
"default": "undefined",
|
|
@@ -26846,6 +26956,17 @@
|
|
|
26846
26956
|
"attribute": "close-button-aria-label",
|
|
26847
26957
|
"reflects": true
|
|
26848
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
|
+
},
|
|
26849
26970
|
{
|
|
26850
26971
|
"kind": "field",
|
|
26851
26972
|
"name": "role",
|
|
@@ -27719,7 +27840,7 @@
|
|
|
27719
27840
|
{
|
|
27720
27841
|
"name": "boundary-padding",
|
|
27721
27842
|
"type": {
|
|
27722
|
-
"text": "
|
|
27843
|
+
"text": "number | undefined"
|
|
27723
27844
|
},
|
|
27724
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.",
|
|
27725
27846
|
"default": "undefined",
|
|
@@ -27878,6 +27999,15 @@
|
|
|
27878
27999
|
"description": "aria-label attribute to be set for close button accessibility.",
|
|
27879
28000
|
"fieldName": "closeButtonAriaLabel"
|
|
27880
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
|
+
},
|
|
27881
28011
|
{
|
|
27882
28012
|
"name": "role",
|
|
27883
28013
|
"type": {
|
|
@@ -31859,6 +31989,60 @@
|
|
|
31859
31989
|
"kind": "class",
|
|
31860
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.",
|
|
31861
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
|
+
],
|
|
31862
32046
|
"slots": [
|
|
31863
32047
|
{
|
|
31864
32048
|
"description": "This is a default/unnamed slot for Selectlistbox including options and/or option group.",
|
|
@@ -31915,6 +32099,28 @@
|
|
|
31915
32099
|
"default": "undefined",
|
|
31916
32100
|
"attribute": "soft-disabled"
|
|
31917
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
|
+
},
|
|
31918
32124
|
{
|
|
31919
32125
|
"kind": "method",
|
|
31920
32126
|
"name": "getAllValidOptions",
|
|
@@ -32557,6 +32763,24 @@
|
|
|
32557
32763
|
"default": "undefined",
|
|
32558
32764
|
"fieldName": "softDisabled"
|
|
32559
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
|
+
},
|
|
32560
32784
|
{
|
|
32561
32785
|
"name": "name",
|
|
32562
32786
|
"type": {
|
|
@@ -32736,7 +32960,7 @@
|
|
|
32736
32960
|
"module": "/src/components/formfieldwrapper/formfieldwrapper.component"
|
|
32737
32961
|
},
|
|
32738
32962
|
"tagName": "mdc-select",
|
|
32739
|
-
"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 */",
|
|
32740
32964
|
"customElement": true
|
|
32741
32965
|
}
|
|
32742
32966
|
],
|
|
@@ -38126,7 +38350,7 @@
|
|
|
38126
38350
|
"kind": "field",
|
|
38127
38351
|
"name": "boundaryPadding",
|
|
38128
38352
|
"type": {
|
|
38129
|
-
"text": "
|
|
38353
|
+
"text": "number | undefined"
|
|
38130
38354
|
},
|
|
38131
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.",
|
|
38132
38356
|
"default": "undefined",
|
|
@@ -38362,6 +38586,21 @@
|
|
|
38362
38586
|
"module": "components/popover/popover.component.js"
|
|
38363
38587
|
}
|
|
38364
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
|
+
},
|
|
38365
38604
|
{
|
|
38366
38605
|
"kind": "field",
|
|
38367
38606
|
"name": "role",
|
|
@@ -38914,7 +39153,7 @@
|
|
|
38914
39153
|
{
|
|
38915
39154
|
"name": "boundary-padding",
|
|
38916
39155
|
"type": {
|
|
38917
|
-
"text": "
|
|
39156
|
+
"text": "number | undefined"
|
|
38918
39157
|
},
|
|
38919
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.",
|
|
38920
39159
|
"default": "undefined",
|
|
@@ -39145,6 +39384,19 @@
|
|
|
39145
39384
|
"module": "src/components/popover/popover.component.ts"
|
|
39146
39385
|
}
|
|
39147
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
|
+
},
|
|
39148
39400
|
{
|
|
39149
39401
|
"name": "role",
|
|
39150
39402
|
"type": {
|
|
@@ -40126,7 +40378,7 @@
|
|
|
40126
40378
|
"kind": "field",
|
|
40127
40379
|
"name": "boundaryPadding",
|
|
40128
40380
|
"type": {
|
|
40129
|
-
"text": "
|
|
40381
|
+
"text": "number | undefined"
|
|
40130
40382
|
},
|
|
40131
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.",
|
|
40132
40384
|
"default": "undefined",
|
|
@@ -40362,6 +40614,21 @@
|
|
|
40362
40614
|
"module": "components/popover/popover.component.js"
|
|
40363
40615
|
}
|
|
40364
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
|
+
},
|
|
40365
40632
|
{
|
|
40366
40633
|
"kind": "field",
|
|
40367
40634
|
"name": "role",
|
|
@@ -40915,7 +41182,7 @@
|
|
|
40915
41182
|
{
|
|
40916
41183
|
"name": "boundary-padding",
|
|
40917
41184
|
"type": {
|
|
40918
|
-
"text": "
|
|
41185
|
+
"text": "number | undefined"
|
|
40919
41186
|
},
|
|
40920
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.",
|
|
40921
41188
|
"default": "undefined",
|
|
@@ -41146,6 +41413,19 @@
|
|
|
41146
41413
|
"module": "src/components/popover/popover.component.ts"
|
|
41147
41414
|
}
|
|
41148
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
|
+
},
|
|
41149
41429
|
{
|
|
41150
41430
|
"name": "role",
|
|
41151
41431
|
"type": {
|