@momentum-design/components 0.109.1 → 0.110.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/index.js +3 -2
- package/dist/browser/index.js.map +2 -2
- package/dist/components/popover/popover.component.d.ts +1 -0
- package/dist/components/popover/popover.component.js +1 -0
- package/dist/components/popover/popover.styles.js +3 -2
- package/dist/custom-elements.json +1206 -1170
- package/dist/react/brandvisual/index.d.ts +1 -1
- package/dist/react/index.d.ts +4 -4
- package/dist/react/index.js +4 -4
- package/dist/react/popover/index.d.ts +1 -0
- package/dist/react/popover/index.js +1 -0
- package/package.json +1 -1
|
@@ -4,149 +4,63 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "components/
|
|
7
|
+
"path": "components/accordionbutton/accordionbutton.component.js",
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "An accordion contains a header and body section with
|
|
12
|
-
"name": "
|
|
11
|
+
"description": "An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you do need any controls on your accordion heading, then it's advised to use `accordion` component.\n\nIf an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.",
|
|
12
|
+
"name": "AccordionButton",
|
|
13
13
|
"cssProperties": [
|
|
14
14
|
{
|
|
15
|
-
"description": "The border color of the accordion.",
|
|
16
|
-
"name": "--mdc-accordionbutton-border-color"
|
|
17
|
-
"inheritedFrom": {
|
|
18
|
-
"name": "AccordionButton",
|
|
19
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
20
|
-
}
|
|
15
|
+
"description": "The border color of the accordion button.",
|
|
16
|
+
"name": "--mdc-accordionbutton-border-color"
|
|
21
17
|
},
|
|
22
18
|
{
|
|
23
|
-
"description": "The hover color of the accordion.",
|
|
24
|
-
"name": "--mdc-accordionbutton-hover-color"
|
|
25
|
-
"inheritedFrom": {
|
|
26
|
-
"name": "AccordionButton",
|
|
27
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
28
|
-
}
|
|
19
|
+
"description": "The hover color of the accordion button.",
|
|
20
|
+
"name": "--mdc-accordionbutton-hover-color"
|
|
29
21
|
},
|
|
30
22
|
{
|
|
31
|
-
"description": "The active color of the accordion.",
|
|
32
|
-
"name": "--mdc-accordionbutton-active-color"
|
|
33
|
-
"inheritedFrom": {
|
|
34
|
-
"name": "AccordionButton",
|
|
35
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
36
|
-
}
|
|
23
|
+
"description": "The active color of the accordion button.",
|
|
24
|
+
"name": "--mdc-accordionbutton-active-color"
|
|
37
25
|
},
|
|
38
26
|
{
|
|
39
|
-
"description": "The disabled color of the accordion.",
|
|
40
|
-
"name": "--mdc-accordionbutton-disabled-color"
|
|
41
|
-
"inheritedFrom": {
|
|
42
|
-
"name": "AccordionButton",
|
|
43
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
44
|
-
}
|
|
27
|
+
"description": "The disabled color of the accordion button.",
|
|
28
|
+
"name": "--mdc-accordionbutton-disabled-color"
|
|
45
29
|
}
|
|
46
30
|
],
|
|
47
31
|
"cssParts": [
|
|
48
32
|
{
|
|
49
|
-
"description": "The header section of the accordion.",
|
|
50
|
-
"name": "header-section"
|
|
51
|
-
"inheritedFrom": {
|
|
52
|
-
"name": "AccordionButton",
|
|
53
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
54
|
-
}
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
"description": "The leading header of the accordion.",
|
|
58
|
-
"name": "leading-header",
|
|
59
|
-
"inheritedFrom": {
|
|
60
|
-
"name": "AccordionButton",
|
|
61
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
62
|
-
}
|
|
33
|
+
"description": "The header section of the accordion button.",
|
|
34
|
+
"name": "header-section"
|
|
63
35
|
},
|
|
64
36
|
{
|
|
65
|
-
"description": "The
|
|
66
|
-
"name": "
|
|
67
|
-
"inheritedFrom": {
|
|
68
|
-
"name": "AccordionButton",
|
|
69
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
70
|
-
}
|
|
37
|
+
"description": "The header button section of the accordion button.",
|
|
38
|
+
"name": "header-button-section"
|
|
71
39
|
},
|
|
72
40
|
{
|
|
73
|
-
"description": "The
|
|
74
|
-
"name": "
|
|
41
|
+
"description": "The leading header of the accordion button.",
|
|
42
|
+
"name": "leading-header"
|
|
75
43
|
},
|
|
76
44
|
{
|
|
77
|
-
"description": "The
|
|
78
|
-
"name": "
|
|
79
|
-
"inheritedFrom": {
|
|
80
|
-
"name": "AccordionButton",
|
|
81
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
82
|
-
}
|
|
45
|
+
"description": "The trailing header of the accordion button.",
|
|
46
|
+
"name": "trailing-header"
|
|
83
47
|
},
|
|
84
48
|
{
|
|
85
|
-
"description": "The header
|
|
86
|
-
"name": "
|
|
87
|
-
"inheritedFrom": {
|
|
88
|
-
"name": "AccordionButton",
|
|
89
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
90
|
-
}
|
|
49
|
+
"description": "The trailing header icon of the accordion button.",
|
|
50
|
+
"name": "trailing-header__icon"
|
|
91
51
|
},
|
|
92
52
|
{
|
|
93
|
-
"description": "The
|
|
94
|
-
"name": "
|
|
95
|
-
"inheritedFrom": {
|
|
96
|
-
"name": "AccordionButton",
|
|
97
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
98
|
-
}
|
|
53
|
+
"description": "The body section of the accordion button.",
|
|
54
|
+
"name": "body-section"
|
|
99
55
|
}
|
|
100
56
|
],
|
|
101
57
|
"slots": [
|
|
102
|
-
{
|
|
103
|
-
"description": "The leading controls slot of the accordion on the header section.",
|
|
104
|
-
"name": "leading-controls"
|
|
105
|
-
},
|
|
106
|
-
{
|
|
107
|
-
"description": "The trailing controls slot of the accordion on the header section.",
|
|
108
|
-
"name": "trailing-controls"
|
|
109
|
-
},
|
|
110
58
|
{
|
|
111
59
|
"description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
|
|
112
|
-
"name": "default"
|
|
113
|
-
"inheritedFrom": {
|
|
114
|
-
"name": "AccordionButton",
|
|
115
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
116
|
-
}
|
|
60
|
+
"name": "default"
|
|
117
61
|
}
|
|
118
62
|
],
|
|
119
63
|
"members": [
|
|
120
|
-
{
|
|
121
|
-
"kind": "method",
|
|
122
|
-
"name": "renderHeader",
|
|
123
|
-
"privacy": "protected",
|
|
124
|
-
"return": {
|
|
125
|
-
"type": {
|
|
126
|
-
"text": ""
|
|
127
|
-
}
|
|
128
|
-
},
|
|
129
|
-
"description": "Renders the header section of the accordion.\nThis includes the leading icon, text and controls, and the trailing controls.\nThe trailing controls include the expand/collapse button.\nThe button is disabled if the accordion is disabled.\nThe button is also given the aria-controls attribute set to the id of the body section.\nThe button is also given the aria-expanded attribute set to the expanded state of the accordion.\nThe prefix icon of the button is set to the expanded state of the accordion.",
|
|
130
|
-
"inheritedFrom": {
|
|
131
|
-
"name": "AccordionButton",
|
|
132
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
133
|
-
}
|
|
134
|
-
},
|
|
135
|
-
{
|
|
136
|
-
"kind": "field",
|
|
137
|
-
"name": "disabled",
|
|
138
|
-
"type": {
|
|
139
|
-
"text": "boolean | undefined"
|
|
140
|
-
},
|
|
141
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
142
|
-
"default": "undefined",
|
|
143
|
-
"attribute": "disabled",
|
|
144
|
-
"reflects": true,
|
|
145
|
-
"inheritedFrom": {
|
|
146
|
-
"name": "DisabledMixin",
|
|
147
|
-
"module": "utils/mixins/DisabledMixin.js"
|
|
148
|
-
}
|
|
149
|
-
},
|
|
150
64
|
{
|
|
151
65
|
"kind": "field",
|
|
152
66
|
"name": "size",
|
|
@@ -156,11 +70,7 @@
|
|
|
156
70
|
"description": "The size of the accordion item.",
|
|
157
71
|
"default": "'small'",
|
|
158
72
|
"attribute": "size",
|
|
159
|
-
"reflects": true
|
|
160
|
-
"inheritedFrom": {
|
|
161
|
-
"name": "AccordionButton",
|
|
162
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
163
|
-
}
|
|
73
|
+
"reflects": true
|
|
164
74
|
},
|
|
165
75
|
{
|
|
166
76
|
"kind": "field",
|
|
@@ -171,11 +81,7 @@
|
|
|
171
81
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
172
82
|
"default": "'default'",
|
|
173
83
|
"attribute": "variant",
|
|
174
|
-
"reflects": true
|
|
175
|
-
"inheritedFrom": {
|
|
176
|
-
"name": "AccordionButton",
|
|
177
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
178
|
-
}
|
|
84
|
+
"reflects": true
|
|
179
85
|
},
|
|
180
86
|
{
|
|
181
87
|
"kind": "field",
|
|
@@ -186,11 +92,7 @@
|
|
|
186
92
|
"description": "The aria level of the accordion component.",
|
|
187
93
|
"default": "3",
|
|
188
94
|
"attribute": "data-aria-level",
|
|
189
|
-
"reflects": true
|
|
190
|
-
"inheritedFrom": {
|
|
191
|
-
"name": "AccordionButton",
|
|
192
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
193
|
-
}
|
|
95
|
+
"reflects": true
|
|
194
96
|
},
|
|
195
97
|
{
|
|
196
98
|
"kind": "field",
|
|
@@ -201,11 +103,7 @@
|
|
|
201
103
|
"description": "The visibility of the accordion button.",
|
|
202
104
|
"default": "false",
|
|
203
105
|
"attribute": "expanded",
|
|
204
|
-
"reflects": true
|
|
205
|
-
"inheritedFrom": {
|
|
206
|
-
"name": "AccordionButton",
|
|
207
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
208
|
-
}
|
|
106
|
+
"reflects": true
|
|
209
107
|
},
|
|
210
108
|
{
|
|
211
109
|
"kind": "field",
|
|
@@ -215,11 +113,7 @@
|
|
|
215
113
|
},
|
|
216
114
|
"description": "The header text of the accordion item.",
|
|
217
115
|
"attribute": "header-text",
|
|
218
|
-
"reflects": true
|
|
219
|
-
"inheritedFrom": {
|
|
220
|
-
"name": "AccordionButton",
|
|
221
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
222
|
-
}
|
|
116
|
+
"reflects": true
|
|
223
117
|
},
|
|
224
118
|
{
|
|
225
119
|
"kind": "field",
|
|
@@ -228,11 +122,7 @@
|
|
|
228
122
|
"text": "IconNames | undefined"
|
|
229
123
|
},
|
|
230
124
|
"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
|
-
}
|
|
125
|
+
"attribute": "prefix-icon"
|
|
236
126
|
},
|
|
237
127
|
{
|
|
238
128
|
"kind": "method",
|
|
@@ -243,11 +133,7 @@
|
|
|
243
133
|
"text": "void"
|
|
244
134
|
}
|
|
245
135
|
},
|
|
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
|
-
}
|
|
136
|
+
"description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state."
|
|
251
137
|
},
|
|
252
138
|
{
|
|
253
139
|
"kind": "method",
|
|
@@ -258,11 +144,7 @@
|
|
|
258
144
|
"text": "void"
|
|
259
145
|
}
|
|
260
146
|
},
|
|
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
|
-
}
|
|
147
|
+
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
|
|
266
148
|
},
|
|
267
149
|
{
|
|
268
150
|
"kind": "method",
|
|
@@ -282,11 +164,7 @@
|
|
|
282
164
|
"description": "The KeyboardEvent fired."
|
|
283
165
|
}
|
|
284
166
|
],
|
|
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
|
-
}
|
|
167
|
+
"description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys."
|
|
290
168
|
},
|
|
291
169
|
{
|
|
292
170
|
"kind": "method",
|
|
@@ -305,11 +183,7 @@
|
|
|
305
183
|
"text": "IconNames"
|
|
306
184
|
}
|
|
307
185
|
}
|
|
308
|
-
]
|
|
309
|
-
"inheritedFrom": {
|
|
310
|
-
"name": "AccordionButton",
|
|
311
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
312
|
-
}
|
|
186
|
+
]
|
|
313
187
|
},
|
|
314
188
|
{
|
|
315
189
|
"kind": "method",
|
|
@@ -319,10 +193,16 @@
|
|
|
319
193
|
"type": {
|
|
320
194
|
"text": "TemplateResult | typeof nothing"
|
|
321
195
|
}
|
|
322
|
-
}
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
196
|
+
}
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
"kind": "method",
|
|
200
|
+
"name": "renderHeader",
|
|
201
|
+
"privacy": "protected",
|
|
202
|
+
"return": {
|
|
203
|
+
"type": {
|
|
204
|
+
"text": "TemplateResult"
|
|
205
|
+
}
|
|
326
206
|
}
|
|
327
207
|
},
|
|
328
208
|
{
|
|
@@ -334,11 +214,7 @@
|
|
|
334
214
|
"text": ""
|
|
335
215
|
}
|
|
336
216
|
},
|
|
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
|
-
}
|
|
217
|
+
"description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon."
|
|
342
218
|
},
|
|
343
219
|
{
|
|
344
220
|
"kind": "method",
|
|
@@ -348,45 +224,32 @@
|
|
|
348
224
|
"type": {
|
|
349
225
|
"text": "TemplateResult | typeof nothing"
|
|
350
226
|
}
|
|
351
|
-
},
|
|
352
|
-
"inheritedFrom": {
|
|
353
|
-
"name": "AccordionButton",
|
|
354
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
355
|
-
}
|
|
356
|
-
}
|
|
357
|
-
],
|
|
358
|
-
"events": [
|
|
359
|
-
{
|
|
360
|
-
"description": "(React: onShown) This event is triggered when the accordion is expanded.",
|
|
361
|
-
"name": "shown",
|
|
362
|
-
"reactName": "onShown",
|
|
363
|
-
"inheritedFrom": {
|
|
364
|
-
"name": "AccordionButton",
|
|
365
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
366
227
|
}
|
|
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": [
|
|
228
|
+
},
|
|
377
229
|
{
|
|
230
|
+
"kind": "field",
|
|
378
231
|
"name": "disabled",
|
|
379
232
|
"type": {
|
|
380
233
|
"text": "boolean | undefined"
|
|
381
234
|
},
|
|
382
235
|
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
383
236
|
"default": "undefined",
|
|
384
|
-
"
|
|
237
|
+
"attribute": "disabled",
|
|
238
|
+
"reflects": true,
|
|
385
239
|
"inheritedFrom": {
|
|
386
240
|
"name": "DisabledMixin",
|
|
387
|
-
"module": "
|
|
241
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
388
242
|
}
|
|
389
|
-
}
|
|
243
|
+
}
|
|
244
|
+
],
|
|
245
|
+
"events": [
|
|
246
|
+
{
|
|
247
|
+
"description": "(React: onShown) This event is triggered when the accordion button is expanded.",
|
|
248
|
+
"name": "shown",
|
|
249
|
+
"reactName": "onShown"
|
|
250
|
+
}
|
|
251
|
+
],
|
|
252
|
+
"attributes": [
|
|
390
253
|
{
|
|
391
254
|
"name": "size",
|
|
392
255
|
"type": {
|
|
@@ -394,11 +257,7 @@
|
|
|
394
257
|
},
|
|
395
258
|
"description": "The size of the accordion item.",
|
|
396
259
|
"default": "'small'",
|
|
397
|
-
"fieldName": "size"
|
|
398
|
-
"inheritedFrom": {
|
|
399
|
-
"name": "AccordionButton",
|
|
400
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
401
|
-
}
|
|
260
|
+
"fieldName": "size"
|
|
402
261
|
},
|
|
403
262
|
{
|
|
404
263
|
"name": "variant",
|
|
@@ -407,11 +266,7 @@
|
|
|
407
266
|
},
|
|
408
267
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
409
268
|
"default": "'default'",
|
|
410
|
-
"fieldName": "variant"
|
|
411
|
-
"inheritedFrom": {
|
|
412
|
-
"name": "AccordionButton",
|
|
413
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
414
|
-
}
|
|
269
|
+
"fieldName": "variant"
|
|
415
270
|
},
|
|
416
271
|
{
|
|
417
272
|
"name": "data-aria-level",
|
|
@@ -420,11 +275,7 @@
|
|
|
420
275
|
},
|
|
421
276
|
"description": "The aria level of the accordion component.",
|
|
422
277
|
"default": "3",
|
|
423
|
-
"fieldName": "dataAriaLevel"
|
|
424
|
-
"inheritedFrom": {
|
|
425
|
-
"name": "AccordionButton",
|
|
426
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
427
|
-
}
|
|
278
|
+
"fieldName": "dataAriaLevel"
|
|
428
279
|
},
|
|
429
280
|
{
|
|
430
281
|
"name": "expanded",
|
|
@@ -433,11 +284,7 @@
|
|
|
433
284
|
},
|
|
434
285
|
"description": "The visibility of the accordion button.",
|
|
435
286
|
"default": "false",
|
|
436
|
-
"fieldName": "expanded"
|
|
437
|
-
"inheritedFrom": {
|
|
438
|
-
"name": "AccordionButton",
|
|
439
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
440
|
-
}
|
|
287
|
+
"fieldName": "expanded"
|
|
441
288
|
},
|
|
442
289
|
{
|
|
443
290
|
"name": "header-text",
|
|
@@ -445,11 +292,7 @@
|
|
|
445
292
|
"text": "string | undefined"
|
|
446
293
|
},
|
|
447
294
|
"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
|
-
}
|
|
295
|
+
"fieldName": "headerText"
|
|
453
296
|
},
|
|
454
297
|
{
|
|
455
298
|
"name": "prefix-icon",
|
|
@@ -457,13 +300,35 @@
|
|
|
457
300
|
"text": "IconNames | undefined"
|
|
458
301
|
},
|
|
459
302
|
"description": "The leading icon that is displayed before the header text.",
|
|
460
|
-
"fieldName": "prefixIcon"
|
|
303
|
+
"fieldName": "prefixIcon"
|
|
304
|
+
},
|
|
305
|
+
{
|
|
306
|
+
"name": "disabled",
|
|
307
|
+
"type": {
|
|
308
|
+
"text": "boolean | undefined"
|
|
309
|
+
},
|
|
310
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
311
|
+
"default": "undefined",
|
|
312
|
+
"fieldName": "disabled",
|
|
461
313
|
"inheritedFrom": {
|
|
462
|
-
"name": "
|
|
463
|
-
"module": "src/
|
|
314
|
+
"name": "DisabledMixin",
|
|
315
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
464
316
|
}
|
|
465
317
|
}
|
|
466
|
-
]
|
|
318
|
+
],
|
|
319
|
+
"mixins": [
|
|
320
|
+
{
|
|
321
|
+
"name": "DisabledMixin",
|
|
322
|
+
"module": "/src/utils/mixins/DisabledMixin"
|
|
323
|
+
}
|
|
324
|
+
],
|
|
325
|
+
"superclass": {
|
|
326
|
+
"name": "Component",
|
|
327
|
+
"module": "/src/models"
|
|
328
|
+
},
|
|
329
|
+
"tagName": "mdc-accordionbutton",
|
|
330
|
+
"jsDoc": "/**\n * An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you do need any controls on your accordion heading, then it's advised to use `accordion` component.\n *\n * If an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.\n *\n * @tagname mdc-accordionbutton\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion button is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion button.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.\n *\n * @csspart 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 */",
|
|
331
|
+
"customElement": true
|
|
467
332
|
}
|
|
468
333
|
],
|
|
469
334
|
"exports": [
|
|
@@ -471,71 +336,157 @@
|
|
|
471
336
|
"kind": "js",
|
|
472
337
|
"name": "default",
|
|
473
338
|
"declaration": {
|
|
474
|
-
"name": "
|
|
475
|
-
"module": "components/
|
|
339
|
+
"name": "AccordionButton",
|
|
340
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
476
341
|
}
|
|
477
342
|
}
|
|
478
343
|
]
|
|
479
344
|
},
|
|
480
345
|
{
|
|
481
346
|
"kind": "javascript-module",
|
|
482
|
-
"path": "components/
|
|
347
|
+
"path": "components/accordion/accordion.component.js",
|
|
483
348
|
"declarations": [
|
|
484
349
|
{
|
|
485
350
|
"kind": "class",
|
|
486
|
-
"description": "An accordion
|
|
487
|
-
"name": "
|
|
351
|
+
"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.",
|
|
352
|
+
"name": "Accordion",
|
|
488
353
|
"cssProperties": [
|
|
489
354
|
{
|
|
490
|
-
"description": "The border color of the accordion
|
|
491
|
-
"name": "--mdc-accordionbutton-border-color"
|
|
355
|
+
"description": "The border color of the accordion.",
|
|
356
|
+
"name": "--mdc-accordionbutton-border-color",
|
|
357
|
+
"inheritedFrom": {
|
|
358
|
+
"name": "AccordionButton",
|
|
359
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
360
|
+
}
|
|
492
361
|
},
|
|
493
362
|
{
|
|
494
|
-
"description": "The hover color of the accordion
|
|
495
|
-
"name": "--mdc-accordionbutton-hover-color"
|
|
363
|
+
"description": "The hover color of the accordion.",
|
|
364
|
+
"name": "--mdc-accordionbutton-hover-color",
|
|
365
|
+
"inheritedFrom": {
|
|
366
|
+
"name": "AccordionButton",
|
|
367
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
368
|
+
}
|
|
496
369
|
},
|
|
497
370
|
{
|
|
498
|
-
"description": "The active color of the accordion
|
|
499
|
-
"name": "--mdc-accordionbutton-active-color"
|
|
371
|
+
"description": "The active color of the accordion.",
|
|
372
|
+
"name": "--mdc-accordionbutton-active-color",
|
|
373
|
+
"inheritedFrom": {
|
|
374
|
+
"name": "AccordionButton",
|
|
375
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
376
|
+
}
|
|
500
377
|
},
|
|
501
378
|
{
|
|
502
|
-
"description": "The disabled color of the accordion
|
|
503
|
-
"name": "--mdc-accordionbutton-disabled-color"
|
|
379
|
+
"description": "The disabled color of the accordion.",
|
|
380
|
+
"name": "--mdc-accordionbutton-disabled-color",
|
|
381
|
+
"inheritedFrom": {
|
|
382
|
+
"name": "AccordionButton",
|
|
383
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
384
|
+
}
|
|
504
385
|
}
|
|
505
386
|
],
|
|
506
387
|
"cssParts": [
|
|
507
388
|
{
|
|
508
|
-
"description": "The header section of the accordion
|
|
509
|
-
"name": "header-section"
|
|
389
|
+
"description": "The header section of the accordion.",
|
|
390
|
+
"name": "header-section",
|
|
391
|
+
"inheritedFrom": {
|
|
392
|
+
"name": "AccordionButton",
|
|
393
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
394
|
+
}
|
|
510
395
|
},
|
|
511
396
|
{
|
|
512
|
-
"description": "The header
|
|
513
|
-
"name": "header
|
|
397
|
+
"description": "The leading header of the accordion.",
|
|
398
|
+
"name": "leading-header",
|
|
399
|
+
"inheritedFrom": {
|
|
400
|
+
"name": "AccordionButton",
|
|
401
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
402
|
+
}
|
|
514
403
|
},
|
|
515
404
|
{
|
|
516
|
-
"description": "The
|
|
517
|
-
"name": "
|
|
405
|
+
"description": "The trailing header of the accordion.",
|
|
406
|
+
"name": "trailing-header",
|
|
407
|
+
"inheritedFrom": {
|
|
408
|
+
"name": "AccordionButton",
|
|
409
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
410
|
+
}
|
|
518
411
|
},
|
|
519
412
|
{
|
|
520
|
-
"description": "The trailing header of the accordion
|
|
521
|
-
"name": "trailing-
|
|
413
|
+
"description": "The trailing header button of the accordion.",
|
|
414
|
+
"name": "trailing-header__button"
|
|
522
415
|
},
|
|
523
416
|
{
|
|
524
|
-
"description": "The
|
|
525
|
-
"name": "
|
|
417
|
+
"description": "The body section of the accordion.",
|
|
418
|
+
"name": "body-section",
|
|
419
|
+
"inheritedFrom": {
|
|
420
|
+
"name": "AccordionButton",
|
|
421
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
422
|
+
}
|
|
526
423
|
},
|
|
527
424
|
{
|
|
528
|
-
"description": "The
|
|
529
|
-
"name": "
|
|
425
|
+
"description": "The header button section of the accordion button.",
|
|
426
|
+
"name": "header-button-section",
|
|
427
|
+
"inheritedFrom": {
|
|
428
|
+
"name": "AccordionButton",
|
|
429
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
430
|
+
}
|
|
431
|
+
},
|
|
432
|
+
{
|
|
433
|
+
"description": "The trailing header icon of the accordion button.",
|
|
434
|
+
"name": "trailing-header__icon",
|
|
435
|
+
"inheritedFrom": {
|
|
436
|
+
"name": "AccordionButton",
|
|
437
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
438
|
+
}
|
|
530
439
|
}
|
|
531
440
|
],
|
|
532
441
|
"slots": [
|
|
442
|
+
{
|
|
443
|
+
"description": "The leading controls slot of the accordion on the header section.",
|
|
444
|
+
"name": "leading-controls"
|
|
445
|
+
},
|
|
446
|
+
{
|
|
447
|
+
"description": "The trailing controls slot of the accordion on the header section.",
|
|
448
|
+
"name": "trailing-controls"
|
|
449
|
+
},
|
|
533
450
|
{
|
|
534
451
|
"description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
|
|
535
|
-
"name": "default"
|
|
452
|
+
"name": "default",
|
|
453
|
+
"inheritedFrom": {
|
|
454
|
+
"name": "AccordionButton",
|
|
455
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
456
|
+
}
|
|
536
457
|
}
|
|
537
458
|
],
|
|
538
459
|
"members": [
|
|
460
|
+
{
|
|
461
|
+
"kind": "method",
|
|
462
|
+
"name": "renderHeader",
|
|
463
|
+
"privacy": "protected",
|
|
464
|
+
"return": {
|
|
465
|
+
"type": {
|
|
466
|
+
"text": ""
|
|
467
|
+
}
|
|
468
|
+
},
|
|
469
|
+
"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.",
|
|
470
|
+
"inheritedFrom": {
|
|
471
|
+
"name": "AccordionButton",
|
|
472
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
473
|
+
}
|
|
474
|
+
},
|
|
475
|
+
{
|
|
476
|
+
"kind": "field",
|
|
477
|
+
"name": "disabled",
|
|
478
|
+
"type": {
|
|
479
|
+
"text": "boolean | undefined"
|
|
480
|
+
},
|
|
481
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
482
|
+
"default": "undefined",
|
|
483
|
+
"attribute": "disabled",
|
|
484
|
+
"reflects": true,
|
|
485
|
+
"inheritedFrom": {
|
|
486
|
+
"name": "AccordionButton",
|
|
487
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
488
|
+
}
|
|
489
|
+
},
|
|
539
490
|
{
|
|
540
491
|
"kind": "field",
|
|
541
492
|
"name": "size",
|
|
@@ -545,7 +496,11 @@
|
|
|
545
496
|
"description": "The size of the accordion item.",
|
|
546
497
|
"default": "'small'",
|
|
547
498
|
"attribute": "size",
|
|
548
|
-
"reflects": true
|
|
499
|
+
"reflects": true,
|
|
500
|
+
"inheritedFrom": {
|
|
501
|
+
"name": "AccordionButton",
|
|
502
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
503
|
+
}
|
|
549
504
|
},
|
|
550
505
|
{
|
|
551
506
|
"kind": "field",
|
|
@@ -556,7 +511,11 @@
|
|
|
556
511
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
557
512
|
"default": "'default'",
|
|
558
513
|
"attribute": "variant",
|
|
559
|
-
"reflects": true
|
|
514
|
+
"reflects": true,
|
|
515
|
+
"inheritedFrom": {
|
|
516
|
+
"name": "AccordionButton",
|
|
517
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
518
|
+
}
|
|
560
519
|
},
|
|
561
520
|
{
|
|
562
521
|
"kind": "field",
|
|
@@ -567,7 +526,11 @@
|
|
|
567
526
|
"description": "The aria level of the accordion component.",
|
|
568
527
|
"default": "3",
|
|
569
528
|
"attribute": "data-aria-level",
|
|
570
|
-
"reflects": true
|
|
529
|
+
"reflects": true,
|
|
530
|
+
"inheritedFrom": {
|
|
531
|
+
"name": "AccordionButton",
|
|
532
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
533
|
+
}
|
|
571
534
|
},
|
|
572
535
|
{
|
|
573
536
|
"kind": "field",
|
|
@@ -578,7 +541,11 @@
|
|
|
578
541
|
"description": "The visibility of the accordion button.",
|
|
579
542
|
"default": "false",
|
|
580
543
|
"attribute": "expanded",
|
|
581
|
-
"reflects": true
|
|
544
|
+
"reflects": true,
|
|
545
|
+
"inheritedFrom": {
|
|
546
|
+
"name": "AccordionButton",
|
|
547
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
548
|
+
}
|
|
582
549
|
},
|
|
583
550
|
{
|
|
584
551
|
"kind": "field",
|
|
@@ -588,7 +555,11 @@
|
|
|
588
555
|
},
|
|
589
556
|
"description": "The header text of the accordion item.",
|
|
590
557
|
"attribute": "header-text",
|
|
591
|
-
"reflects": true
|
|
558
|
+
"reflects": true,
|
|
559
|
+
"inheritedFrom": {
|
|
560
|
+
"name": "AccordionButton",
|
|
561
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
562
|
+
}
|
|
592
563
|
},
|
|
593
564
|
{
|
|
594
565
|
"kind": "field",
|
|
@@ -597,7 +568,11 @@
|
|
|
597
568
|
"text": "IconNames | undefined"
|
|
598
569
|
},
|
|
599
570
|
"description": "The leading icon that is displayed before the header text.",
|
|
600
|
-
"attribute": "prefix-icon"
|
|
571
|
+
"attribute": "prefix-icon",
|
|
572
|
+
"inheritedFrom": {
|
|
573
|
+
"name": "AccordionButton",
|
|
574
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
575
|
+
}
|
|
601
576
|
},
|
|
602
577
|
{
|
|
603
578
|
"kind": "method",
|
|
@@ -608,7 +583,11 @@
|
|
|
608
583
|
"text": "void"
|
|
609
584
|
}
|
|
610
585
|
},
|
|
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."
|
|
586
|
+
"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.",
|
|
587
|
+
"inheritedFrom": {
|
|
588
|
+
"name": "AccordionButton",
|
|
589
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
590
|
+
}
|
|
612
591
|
},
|
|
613
592
|
{
|
|
614
593
|
"kind": "method",
|
|
@@ -619,7 +598,11 @@
|
|
|
619
598
|
"text": "void"
|
|
620
599
|
}
|
|
621
600
|
},
|
|
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."
|
|
601
|
+
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state.",
|
|
602
|
+
"inheritedFrom": {
|
|
603
|
+
"name": "AccordionButton",
|
|
604
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
605
|
+
}
|
|
623
606
|
},
|
|
624
607
|
{
|
|
625
608
|
"kind": "method",
|
|
@@ -639,7 +622,11 @@
|
|
|
639
622
|
"description": "The KeyboardEvent fired."
|
|
640
623
|
}
|
|
641
624
|
],
|
|
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."
|
|
625
|
+
"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.",
|
|
626
|
+
"inheritedFrom": {
|
|
627
|
+
"name": "AccordionButton",
|
|
628
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
629
|
+
}
|
|
643
630
|
},
|
|
644
631
|
{
|
|
645
632
|
"kind": "method",
|
|
@@ -658,7 +645,11 @@
|
|
|
658
645
|
"text": "IconNames"
|
|
659
646
|
}
|
|
660
647
|
}
|
|
661
|
-
]
|
|
648
|
+
],
|
|
649
|
+
"inheritedFrom": {
|
|
650
|
+
"name": "AccordionButton",
|
|
651
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
652
|
+
}
|
|
662
653
|
},
|
|
663
654
|
{
|
|
664
655
|
"kind": "method",
|
|
@@ -668,16 +659,10 @@
|
|
|
668
659
|
"type": {
|
|
669
660
|
"text": "TemplateResult | typeof nothing"
|
|
670
661
|
}
|
|
671
|
-
}
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
"name": "renderHeader",
|
|
676
|
-
"privacy": "protected",
|
|
677
|
-
"return": {
|
|
678
|
-
"type": {
|
|
679
|
-
"text": "TemplateResult"
|
|
680
|
-
}
|
|
662
|
+
},
|
|
663
|
+
"inheritedFrom": {
|
|
664
|
+
"name": "AccordionButton",
|
|
665
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
681
666
|
}
|
|
682
667
|
},
|
|
683
668
|
{
|
|
@@ -689,7 +674,11 @@
|
|
|
689
674
|
"text": ""
|
|
690
675
|
}
|
|
691
676
|
},
|
|
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."
|
|
677
|
+
"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.",
|
|
678
|
+
"inheritedFrom": {
|
|
679
|
+
"name": "AccordionButton",
|
|
680
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
681
|
+
}
|
|
693
682
|
},
|
|
694
683
|
{
|
|
695
684
|
"kind": "method",
|
|
@@ -699,32 +688,45 @@
|
|
|
699
688
|
"type": {
|
|
700
689
|
"text": "TemplateResult | typeof nothing"
|
|
701
690
|
}
|
|
702
|
-
}
|
|
703
|
-
},
|
|
704
|
-
{
|
|
705
|
-
"kind": "field",
|
|
706
|
-
"name": "disabled",
|
|
707
|
-
"type": {
|
|
708
|
-
"text": "boolean | undefined"
|
|
709
691
|
},
|
|
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
692
|
"inheritedFrom": {
|
|
715
|
-
"name": "
|
|
716
|
-
"module": "
|
|
693
|
+
"name": "AccordionButton",
|
|
694
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
717
695
|
}
|
|
718
696
|
}
|
|
719
697
|
],
|
|
720
698
|
"events": [
|
|
721
699
|
{
|
|
722
|
-
"description": "(React: onShown) This event is triggered when the accordion
|
|
700
|
+
"description": "(React: onShown) This event is triggered when the accordion is expanded.",
|
|
723
701
|
"name": "shown",
|
|
724
|
-
"reactName": "onShown"
|
|
702
|
+
"reactName": "onShown",
|
|
703
|
+
"inheritedFrom": {
|
|
704
|
+
"name": "AccordionButton",
|
|
705
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
706
|
+
}
|
|
725
707
|
}
|
|
726
708
|
],
|
|
709
|
+
"superclass": {
|
|
710
|
+
"name": "AccordionButton",
|
|
711
|
+
"module": "/src/components/accordionbutton/accordionbutton.component"
|
|
712
|
+
},
|
|
713
|
+
"tagName": "mdc-accordion",
|
|
714
|
+
"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 */",
|
|
715
|
+
"customElement": true,
|
|
727
716
|
"attributes": [
|
|
717
|
+
{
|
|
718
|
+
"name": "disabled",
|
|
719
|
+
"type": {
|
|
720
|
+
"text": "boolean | undefined"
|
|
721
|
+
},
|
|
722
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
723
|
+
"default": "undefined",
|
|
724
|
+
"fieldName": "disabled",
|
|
725
|
+
"inheritedFrom": {
|
|
726
|
+
"name": "AccordionButton",
|
|
727
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
728
|
+
}
|
|
729
|
+
},
|
|
728
730
|
{
|
|
729
731
|
"name": "size",
|
|
730
732
|
"type": {
|
|
@@ -732,7 +734,11 @@
|
|
|
732
734
|
},
|
|
733
735
|
"description": "The size of the accordion item.",
|
|
734
736
|
"default": "'small'",
|
|
735
|
-
"fieldName": "size"
|
|
737
|
+
"fieldName": "size",
|
|
738
|
+
"inheritedFrom": {
|
|
739
|
+
"name": "AccordionButton",
|
|
740
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
741
|
+
}
|
|
736
742
|
},
|
|
737
743
|
{
|
|
738
744
|
"name": "variant",
|
|
@@ -741,7 +747,11 @@
|
|
|
741
747
|
},
|
|
742
748
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
743
749
|
"default": "'default'",
|
|
744
|
-
"fieldName": "variant"
|
|
750
|
+
"fieldName": "variant",
|
|
751
|
+
"inheritedFrom": {
|
|
752
|
+
"name": "AccordionButton",
|
|
753
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
754
|
+
}
|
|
745
755
|
},
|
|
746
756
|
{
|
|
747
757
|
"name": "data-aria-level",
|
|
@@ -750,7 +760,11 @@
|
|
|
750
760
|
},
|
|
751
761
|
"description": "The aria level of the accordion component.",
|
|
752
762
|
"default": "3",
|
|
753
|
-
"fieldName": "dataAriaLevel"
|
|
763
|
+
"fieldName": "dataAriaLevel",
|
|
764
|
+
"inheritedFrom": {
|
|
765
|
+
"name": "AccordionButton",
|
|
766
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
767
|
+
}
|
|
754
768
|
},
|
|
755
769
|
{
|
|
756
770
|
"name": "expanded",
|
|
@@ -759,7 +773,11 @@
|
|
|
759
773
|
},
|
|
760
774
|
"description": "The visibility of the accordion button.",
|
|
761
775
|
"default": "false",
|
|
762
|
-
"fieldName": "expanded"
|
|
776
|
+
"fieldName": "expanded",
|
|
777
|
+
"inheritedFrom": {
|
|
778
|
+
"name": "AccordionButton",
|
|
779
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
780
|
+
}
|
|
763
781
|
},
|
|
764
782
|
{
|
|
765
783
|
"name": "header-text",
|
|
@@ -767,7 +785,11 @@
|
|
|
767
785
|
"text": "string | undefined"
|
|
768
786
|
},
|
|
769
787
|
"description": "The header text of the accordion item.",
|
|
770
|
-
"fieldName": "headerText"
|
|
788
|
+
"fieldName": "headerText",
|
|
789
|
+
"inheritedFrom": {
|
|
790
|
+
"name": "AccordionButton",
|
|
791
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
792
|
+
}
|
|
771
793
|
},
|
|
772
794
|
{
|
|
773
795
|
"name": "prefix-icon",
|
|
@@ -775,186 +797,13 @@
|
|
|
775
797
|
"text": "IconNames | undefined"
|
|
776
798
|
},
|
|
777
799
|
"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",
|
|
800
|
+
"fieldName": "prefixIcon",
|
|
788
801
|
"inheritedFrom": {
|
|
789
|
-
"name": "
|
|
790
|
-
"module": "src/
|
|
802
|
+
"name": "AccordionButton",
|
|
803
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
791
804
|
}
|
|
792
805
|
}
|
|
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
|
|
806
|
+
]
|
|
958
807
|
}
|
|
959
808
|
],
|
|
960
809
|
"exports": [
|
|
@@ -962,8 +811,8 @@
|
|
|
962
811
|
"kind": "js",
|
|
963
812
|
"name": "default",
|
|
964
813
|
"declaration": {
|
|
965
|
-
"name": "
|
|
966
|
-
"module": "components/
|
|
814
|
+
"name": "Accordion",
|
|
815
|
+
"module": "components/accordion/accordion.component.js"
|
|
967
816
|
}
|
|
968
817
|
}
|
|
969
818
|
]
|
|
@@ -1766,6 +1615,157 @@
|
|
|
1766
1615
|
}
|
|
1767
1616
|
]
|
|
1768
1617
|
},
|
|
1618
|
+
{
|
|
1619
|
+
"kind": "javascript-module",
|
|
1620
|
+
"path": "components/accordiongroup/accordiongroup.component.js",
|
|
1621
|
+
"declarations": [
|
|
1622
|
+
{
|
|
1623
|
+
"kind": "class",
|
|
1624
|
+
"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.",
|
|
1625
|
+
"name": "AccordionGroup",
|
|
1626
|
+
"cssProperties": [
|
|
1627
|
+
{
|
|
1628
|
+
"description": "The border color of the entire accordiongroup",
|
|
1629
|
+
"name": "--mdc-accordiongroup-border-color"
|
|
1630
|
+
}
|
|
1631
|
+
],
|
|
1632
|
+
"slots": [
|
|
1633
|
+
{
|
|
1634
|
+
"description": "The default slot can contain the `accordion` or `accordionbutton` components.",
|
|
1635
|
+
"name": "default"
|
|
1636
|
+
}
|
|
1637
|
+
],
|
|
1638
|
+
"members": [
|
|
1639
|
+
{
|
|
1640
|
+
"kind": "field",
|
|
1641
|
+
"name": "size",
|
|
1642
|
+
"type": {
|
|
1643
|
+
"text": "Size"
|
|
1644
|
+
},
|
|
1645
|
+
"description": "The size of the accordion item.",
|
|
1646
|
+
"default": "'small'",
|
|
1647
|
+
"attribute": "size",
|
|
1648
|
+
"reflects": true
|
|
1649
|
+
},
|
|
1650
|
+
{
|
|
1651
|
+
"kind": "field",
|
|
1652
|
+
"name": "variant",
|
|
1653
|
+
"type": {
|
|
1654
|
+
"text": "Variant"
|
|
1655
|
+
},
|
|
1656
|
+
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
1657
|
+
"default": "'stacked'",
|
|
1658
|
+
"attribute": "variant",
|
|
1659
|
+
"reflects": true
|
|
1660
|
+
},
|
|
1661
|
+
{
|
|
1662
|
+
"kind": "field",
|
|
1663
|
+
"name": "allowMultiple",
|
|
1664
|
+
"type": {
|
|
1665
|
+
"text": "boolean"
|
|
1666
|
+
},
|
|
1667
|
+
"default": "false",
|
|
1668
|
+
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
1669
|
+
"attribute": "allow-multiple",
|
|
1670
|
+
"reflects": true
|
|
1671
|
+
},
|
|
1672
|
+
{
|
|
1673
|
+
"kind": "method",
|
|
1674
|
+
"name": "handleAccordionExpanded",
|
|
1675
|
+
"privacy": "private",
|
|
1676
|
+
"return": {
|
|
1677
|
+
"type": {
|
|
1678
|
+
"text": "void"
|
|
1679
|
+
}
|
|
1680
|
+
},
|
|
1681
|
+
"parameters": [
|
|
1682
|
+
{
|
|
1683
|
+
"name": "event",
|
|
1684
|
+
"type": {
|
|
1685
|
+
"text": "Event"
|
|
1686
|
+
},
|
|
1687
|
+
"description": "The event object from the 'shown' event."
|
|
1688
|
+
}
|
|
1689
|
+
],
|
|
1690
|
+
"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."
|
|
1691
|
+
},
|
|
1692
|
+
{
|
|
1693
|
+
"kind": "method",
|
|
1694
|
+
"name": "setChildrenAccordionAttributes",
|
|
1695
|
+
"privacy": "private",
|
|
1696
|
+
"return": {
|
|
1697
|
+
"type": {
|
|
1698
|
+
"text": "void"
|
|
1699
|
+
}
|
|
1700
|
+
},
|
|
1701
|
+
"parameters": [
|
|
1702
|
+
{
|
|
1703
|
+
"name": "attributeName",
|
|
1704
|
+
"type": {
|
|
1705
|
+
"text": "string"
|
|
1706
|
+
},
|
|
1707
|
+
"description": "The name of the attribute to set."
|
|
1708
|
+
},
|
|
1709
|
+
{
|
|
1710
|
+
"name": "attributeValue",
|
|
1711
|
+
"type": {
|
|
1712
|
+
"text": "string"
|
|
1713
|
+
},
|
|
1714
|
+
"description": "The value to set the attribute to."
|
|
1715
|
+
}
|
|
1716
|
+
],
|
|
1717
|
+
"description": "Sets the given attribute on all child accordion or accordionbutton components."
|
|
1718
|
+
}
|
|
1719
|
+
],
|
|
1720
|
+
"attributes": [
|
|
1721
|
+
{
|
|
1722
|
+
"name": "size",
|
|
1723
|
+
"type": {
|
|
1724
|
+
"text": "Size"
|
|
1725
|
+
},
|
|
1726
|
+
"description": "The size of the accordion item.",
|
|
1727
|
+
"default": "'small'",
|
|
1728
|
+
"fieldName": "size"
|
|
1729
|
+
},
|
|
1730
|
+
{
|
|
1731
|
+
"name": "variant",
|
|
1732
|
+
"type": {
|
|
1733
|
+
"text": "Variant"
|
|
1734
|
+
},
|
|
1735
|
+
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
1736
|
+
"default": "'stacked'",
|
|
1737
|
+
"fieldName": "variant"
|
|
1738
|
+
},
|
|
1739
|
+
{
|
|
1740
|
+
"name": "allow-multiple",
|
|
1741
|
+
"type": {
|
|
1742
|
+
"text": "boolean"
|
|
1743
|
+
},
|
|
1744
|
+
"default": "false",
|
|
1745
|
+
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
1746
|
+
"fieldName": "allowMultiple"
|
|
1747
|
+
}
|
|
1748
|
+
],
|
|
1749
|
+
"superclass": {
|
|
1750
|
+
"name": "Component",
|
|
1751
|
+
"module": "/src/models"
|
|
1752
|
+
},
|
|
1753
|
+
"tagName": "mdc-accordiongroup",
|
|
1754
|
+
"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 */",
|
|
1755
|
+
"customElement": true
|
|
1756
|
+
}
|
|
1757
|
+
],
|
|
1758
|
+
"exports": [
|
|
1759
|
+
{
|
|
1760
|
+
"kind": "js",
|
|
1761
|
+
"name": "default",
|
|
1762
|
+
"declaration": {
|
|
1763
|
+
"name": "AccordionGroup",
|
|
1764
|
+
"module": "components/accordiongroup/accordiongroup.component.js"
|
|
1765
|
+
}
|
|
1766
|
+
}
|
|
1767
|
+
]
|
|
1768
|
+
},
|
|
1769
1769
|
{
|
|
1770
1770
|
"kind": "javascript-module",
|
|
1771
1771
|
"path": "components/avatar/avatar.component.js",
|
|
@@ -2032,6 +2032,67 @@
|
|
|
2032
2032
|
}
|
|
2033
2033
|
]
|
|
2034
2034
|
},
|
|
2035
|
+
{
|
|
2036
|
+
"kind": "javascript-module",
|
|
2037
|
+
"path": "components/appheader/appheader.component.js",
|
|
2038
|
+
"declarations": [
|
|
2039
|
+
{
|
|
2040
|
+
"kind": "class",
|
|
2041
|
+
"description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
|
|
2042
|
+
"name": "Appheader",
|
|
2043
|
+
"cssParts": [
|
|
2044
|
+
{
|
|
2045
|
+
"description": "The main container for styling the header.",
|
|
2046
|
+
"name": "container"
|
|
2047
|
+
},
|
|
2048
|
+
{
|
|
2049
|
+
"description": "The leading section of the header.",
|
|
2050
|
+
"name": "leading-section"
|
|
2051
|
+
},
|
|
2052
|
+
{
|
|
2053
|
+
"description": "The center section of the header.",
|
|
2054
|
+
"name": "center-section"
|
|
2055
|
+
},
|
|
2056
|
+
{
|
|
2057
|
+
"description": "The trailing section of the header.",
|
|
2058
|
+
"name": "trailing-section"
|
|
2059
|
+
}
|
|
2060
|
+
],
|
|
2061
|
+
"slots": [
|
|
2062
|
+
{
|
|
2063
|
+
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
2064
|
+
"name": "leading"
|
|
2065
|
+
},
|
|
2066
|
+
{
|
|
2067
|
+
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
2068
|
+
"name": "center"
|
|
2069
|
+
},
|
|
2070
|
+
{
|
|
2071
|
+
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
2072
|
+
"name": "trailing"
|
|
2073
|
+
}
|
|
2074
|
+
],
|
|
2075
|
+
"members": [],
|
|
2076
|
+
"superclass": {
|
|
2077
|
+
"name": "Component",
|
|
2078
|
+
"module": "/src/models"
|
|
2079
|
+
},
|
|
2080
|
+
"tagName": "mdc-appheader",
|
|
2081
|
+
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
|
2082
|
+
"customElement": true
|
|
2083
|
+
}
|
|
2084
|
+
],
|
|
2085
|
+
"exports": [
|
|
2086
|
+
{
|
|
2087
|
+
"kind": "js",
|
|
2088
|
+
"name": "default",
|
|
2089
|
+
"declaration": {
|
|
2090
|
+
"name": "Appheader",
|
|
2091
|
+
"module": "components/appheader/appheader.component.js"
|
|
2092
|
+
}
|
|
2093
|
+
}
|
|
2094
|
+
]
|
|
2095
|
+
},
|
|
2035
2096
|
{
|
|
2036
2097
|
"kind": "javascript-module",
|
|
2037
2098
|
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
@@ -2786,67 +2847,6 @@
|
|
|
2786
2847
|
}
|
|
2787
2848
|
]
|
|
2788
2849
|
},
|
|
2789
|
-
{
|
|
2790
|
-
"kind": "javascript-module",
|
|
2791
|
-
"path": "components/appheader/appheader.component.js",
|
|
2792
|
-
"declarations": [
|
|
2793
|
-
{
|
|
2794
|
-
"kind": "class",
|
|
2795
|
-
"description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
|
|
2796
|
-
"name": "Appheader",
|
|
2797
|
-
"cssParts": [
|
|
2798
|
-
{
|
|
2799
|
-
"description": "The main container for styling the header.",
|
|
2800
|
-
"name": "container"
|
|
2801
|
-
},
|
|
2802
|
-
{
|
|
2803
|
-
"description": "The leading section of the header.",
|
|
2804
|
-
"name": "leading-section"
|
|
2805
|
-
},
|
|
2806
|
-
{
|
|
2807
|
-
"description": "The center section of the header.",
|
|
2808
|
-
"name": "center-section"
|
|
2809
|
-
},
|
|
2810
|
-
{
|
|
2811
|
-
"description": "The trailing section of the header.",
|
|
2812
|
-
"name": "trailing-section"
|
|
2813
|
-
}
|
|
2814
|
-
],
|
|
2815
|
-
"slots": [
|
|
2816
|
-
{
|
|
2817
|
-
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
2818
|
-
"name": "leading"
|
|
2819
|
-
},
|
|
2820
|
-
{
|
|
2821
|
-
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
2822
|
-
"name": "center"
|
|
2823
|
-
},
|
|
2824
|
-
{
|
|
2825
|
-
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
2826
|
-
"name": "trailing"
|
|
2827
|
-
}
|
|
2828
|
-
],
|
|
2829
|
-
"members": [],
|
|
2830
|
-
"superclass": {
|
|
2831
|
-
"name": "Component",
|
|
2832
|
-
"module": "/src/models"
|
|
2833
|
-
},
|
|
2834
|
-
"tagName": "mdc-appheader",
|
|
2835
|
-
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
|
2836
|
-
"customElement": true
|
|
2837
|
-
}
|
|
2838
|
-
],
|
|
2839
|
-
"exports": [
|
|
2840
|
-
{
|
|
2841
|
-
"kind": "js",
|
|
2842
|
-
"name": "default",
|
|
2843
|
-
"declaration": {
|
|
2844
|
-
"name": "Appheader",
|
|
2845
|
-
"module": "components/appheader/appheader.component.js"
|
|
2846
|
-
}
|
|
2847
|
-
}
|
|
2848
|
-
]
|
|
2849
|
-
},
|
|
2850
2850
|
{
|
|
2851
2851
|
"kind": "javascript-module",
|
|
2852
2852
|
"path": "components/badge/badge.component.js",
|
|
@@ -5112,246 +5112,687 @@
|
|
|
5112
5112
|
"description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute."
|
|
5113
5113
|
},
|
|
5114
5114
|
{
|
|
5115
|
-
"kind": "method",
|
|
5116
|
-
"name": "triggerClickEvent",
|
|
5117
|
-
"privacy": "private"
|
|
5115
|
+
"kind": "method",
|
|
5116
|
+
"name": "triggerClickEvent",
|
|
5117
|
+
"privacy": "private"
|
|
5118
|
+
},
|
|
5119
|
+
{
|
|
5120
|
+
"kind": "method",
|
|
5121
|
+
"name": "handleBlur",
|
|
5122
|
+
"privacy": "private",
|
|
5123
|
+
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed."
|
|
5124
|
+
},
|
|
5125
|
+
{
|
|
5126
|
+
"kind": "method",
|
|
5127
|
+
"name": "handleKeyDown",
|
|
5128
|
+
"privacy": "private",
|
|
5129
|
+
"parameters": [
|
|
5130
|
+
{
|
|
5131
|
+
"name": "event",
|
|
5132
|
+
"type": {
|
|
5133
|
+
"text": "KeyboardEvent"
|
|
5134
|
+
},
|
|
5135
|
+
"description": "The keyboard event."
|
|
5136
|
+
}
|
|
5137
|
+
],
|
|
5138
|
+
"description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application."
|
|
5139
|
+
},
|
|
5140
|
+
{
|
|
5141
|
+
"kind": "method",
|
|
5142
|
+
"name": "handleKeyUp",
|
|
5143
|
+
"privacy": "private",
|
|
5144
|
+
"parameters": [
|
|
5145
|
+
{
|
|
5146
|
+
"name": "event",
|
|
5147
|
+
"type": {
|
|
5148
|
+
"text": "KeyboardEvent"
|
|
5149
|
+
},
|
|
5150
|
+
"description": "The keyboard event."
|
|
5151
|
+
}
|
|
5152
|
+
],
|
|
5153
|
+
"description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way."
|
|
5154
|
+
},
|
|
5155
|
+
{
|
|
5156
|
+
"kind": "field",
|
|
5157
|
+
"name": "autoFocusOnMount",
|
|
5158
|
+
"type": {
|
|
5159
|
+
"text": "boolean"
|
|
5160
|
+
},
|
|
5161
|
+
"default": "false",
|
|
5162
|
+
"description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
|
|
5163
|
+
"attribute": "auto-focus-on-mount",
|
|
5164
|
+
"reflects": true,
|
|
5165
|
+
"inheritedFrom": {
|
|
5166
|
+
"name": "AutoFocusOnMountMixin",
|
|
5167
|
+
"module": "utils/mixins/AutoFocusOnMountMixin.js"
|
|
5168
|
+
}
|
|
5169
|
+
},
|
|
5170
|
+
{
|
|
5171
|
+
"kind": "field",
|
|
5172
|
+
"name": "tabIndex",
|
|
5173
|
+
"type": {
|
|
5174
|
+
"text": "number"
|
|
5175
|
+
},
|
|
5176
|
+
"default": "0",
|
|
5177
|
+
"description": "This property specifies the tab order of the element.",
|
|
5178
|
+
"attribute": "tabIndex",
|
|
5179
|
+
"reflects": true,
|
|
5180
|
+
"inheritedFrom": {
|
|
5181
|
+
"name": "TabIndexMixin",
|
|
5182
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
5183
|
+
}
|
|
5184
|
+
},
|
|
5185
|
+
{
|
|
5186
|
+
"kind": "field",
|
|
5187
|
+
"name": "disabled",
|
|
5188
|
+
"type": {
|
|
5189
|
+
"text": "boolean | undefined"
|
|
5190
|
+
},
|
|
5191
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
5192
|
+
"default": "undefined",
|
|
5193
|
+
"attribute": "disabled",
|
|
5194
|
+
"reflects": true,
|
|
5195
|
+
"inheritedFrom": {
|
|
5196
|
+
"name": "DisabledMixin",
|
|
5197
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
5198
|
+
}
|
|
5199
|
+
}
|
|
5200
|
+
],
|
|
5201
|
+
"events": [
|
|
5202
|
+
{
|
|
5203
|
+
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
|
5204
|
+
"name": "click",
|
|
5205
|
+
"reactName": "onClick"
|
|
5206
|
+
},
|
|
5207
|
+
{
|
|
5208
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
|
|
5209
|
+
"name": "keydown",
|
|
5210
|
+
"reactName": "onKeyDown"
|
|
5211
|
+
},
|
|
5212
|
+
{
|
|
5213
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
|
|
5214
|
+
"name": "keyup",
|
|
5215
|
+
"reactName": "onKeyUp"
|
|
5216
|
+
},
|
|
5217
|
+
{
|
|
5218
|
+
"description": "(React: onFocus) This event is dispatched when the button receives focus.",
|
|
5219
|
+
"name": "focus",
|
|
5220
|
+
"reactName": "onFocus"
|
|
5221
|
+
}
|
|
5222
|
+
],
|
|
5223
|
+
"attributes": [
|
|
5224
|
+
{
|
|
5225
|
+
"name": "active",
|
|
5226
|
+
"type": {
|
|
5227
|
+
"text": "boolean | undefined"
|
|
5228
|
+
},
|
|
5229
|
+
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
|
5230
|
+
"default": "undefined",
|
|
5231
|
+
"fieldName": "active"
|
|
5232
|
+
},
|
|
5233
|
+
{
|
|
5234
|
+
"name": "soft-disabled",
|
|
5235
|
+
"type": {
|
|
5236
|
+
"text": "boolean | undefined"
|
|
5237
|
+
},
|
|
5238
|
+
"description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
|
|
5239
|
+
"default": "undefined",
|
|
5240
|
+
"fieldName": "softDisabled"
|
|
5241
|
+
},
|
|
5242
|
+
{
|
|
5243
|
+
"name": "size",
|
|
5244
|
+
"type": {
|
|
5245
|
+
"text": "ButtonSize"
|
|
5246
|
+
},
|
|
5247
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
5248
|
+
"default": "32",
|
|
5249
|
+
"fieldName": "size"
|
|
5250
|
+
},
|
|
5251
|
+
{
|
|
5252
|
+
"name": "role",
|
|
5253
|
+
"type": {
|
|
5254
|
+
"text": "RoleType"
|
|
5255
|
+
},
|
|
5256
|
+
"description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
|
|
5257
|
+
"default": "button",
|
|
5258
|
+
"fieldName": "role"
|
|
5259
|
+
},
|
|
5260
|
+
{
|
|
5261
|
+
"name": "ariaStateKey",
|
|
5262
|
+
"type": {
|
|
5263
|
+
"text": "string | undefined"
|
|
5264
|
+
},
|
|
5265
|
+
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
|
5266
|
+
"default": "'aria-pressed' (when)",
|
|
5267
|
+
"fieldName": "ariaStateKey"
|
|
5268
|
+
},
|
|
5269
|
+
{
|
|
5270
|
+
"name": "type",
|
|
5271
|
+
"type": {
|
|
5272
|
+
"text": "ButtonType"
|
|
5273
|
+
},
|
|
5274
|
+
"description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
|
|
5275
|
+
"default": "button",
|
|
5276
|
+
"fieldName": "type"
|
|
5277
|
+
},
|
|
5278
|
+
{
|
|
5279
|
+
"name": "name",
|
|
5280
|
+
"type": {
|
|
5281
|
+
"text": "string | undefined"
|
|
5282
|
+
},
|
|
5283
|
+
"description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
|
|
5284
|
+
"fieldName": "name"
|
|
5285
|
+
},
|
|
5286
|
+
{
|
|
5287
|
+
"name": "value",
|
|
5288
|
+
"type": {
|
|
5289
|
+
"text": "string | undefined"
|
|
5290
|
+
},
|
|
5291
|
+
"description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
|
|
5292
|
+
"fieldName": "value"
|
|
5293
|
+
},
|
|
5294
|
+
{
|
|
5295
|
+
"name": "auto-focus-on-mount",
|
|
5296
|
+
"type": {
|
|
5297
|
+
"text": "boolean"
|
|
5298
|
+
},
|
|
5299
|
+
"default": "false",
|
|
5300
|
+
"description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
|
|
5301
|
+
"fieldName": "autoFocusOnMount",
|
|
5302
|
+
"inheritedFrom": {
|
|
5303
|
+
"name": "AutoFocusOnMountMixin",
|
|
5304
|
+
"module": "src/utils/mixins/AutoFocusOnMountMixin.ts"
|
|
5305
|
+
}
|
|
5306
|
+
},
|
|
5307
|
+
{
|
|
5308
|
+
"name": "tabIndex",
|
|
5309
|
+
"type": {
|
|
5310
|
+
"text": "number"
|
|
5311
|
+
},
|
|
5312
|
+
"default": "0",
|
|
5313
|
+
"description": "This property specifies the tab order of the element.",
|
|
5314
|
+
"fieldName": "tabIndex",
|
|
5315
|
+
"inheritedFrom": {
|
|
5316
|
+
"name": "TabIndexMixin",
|
|
5317
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
5318
|
+
}
|
|
5319
|
+
},
|
|
5320
|
+
{
|
|
5321
|
+
"name": "disabled",
|
|
5322
|
+
"type": {
|
|
5323
|
+
"text": "boolean | undefined"
|
|
5324
|
+
},
|
|
5325
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
5326
|
+
"default": "undefined",
|
|
5327
|
+
"fieldName": "disabled",
|
|
5328
|
+
"inheritedFrom": {
|
|
5329
|
+
"name": "DisabledMixin",
|
|
5330
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
5331
|
+
}
|
|
5332
|
+
}
|
|
5333
|
+
],
|
|
5334
|
+
"mixins": [
|
|
5335
|
+
{
|
|
5336
|
+
"name": "AutoFocusOnMountMixin",
|
|
5337
|
+
"module": "/src/utils/mixins/AutoFocusOnMountMixin"
|
|
5338
|
+
},
|
|
5339
|
+
{
|
|
5340
|
+
"name": "TabIndexMixin",
|
|
5341
|
+
"module": "/src/utils/mixins/TabIndexMixin"
|
|
5342
|
+
},
|
|
5343
|
+
{
|
|
5344
|
+
"name": "DisabledMixin",
|
|
5345
|
+
"module": "/src/utils/mixins/DisabledMixin"
|
|
5346
|
+
}
|
|
5347
|
+
],
|
|
5348
|
+
"superclass": {
|
|
5349
|
+
"name": "Component",
|
|
5350
|
+
"module": "/src/models"
|
|
5351
|
+
},
|
|
5352
|
+
"tagName": "mdc-buttonsimple",
|
|
5353
|
+
"jsDoc": "/**\n * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.\n * It is used as an internal component and is not intended to be used directly by consumers.\n * Consumers should use the `mdc-button` component instead.\n *\n * @event click - (React: onClick) This event is dispatched when the button is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.\n * @event focus - (React: onFocus) This event is dispatched when the button receives focus.\n *\n * @tagname mdc-buttonsimple\n */",
|
|
5354
|
+
"customElement": true
|
|
5355
|
+
}
|
|
5356
|
+
],
|
|
5357
|
+
"exports": [
|
|
5358
|
+
{
|
|
5359
|
+
"kind": "js",
|
|
5360
|
+
"name": "default",
|
|
5361
|
+
"declaration": {
|
|
5362
|
+
"name": "Buttonsimple",
|
|
5363
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
5364
|
+
}
|
|
5365
|
+
}
|
|
5366
|
+
]
|
|
5367
|
+
},
|
|
5368
|
+
{
|
|
5369
|
+
"kind": "javascript-module",
|
|
5370
|
+
"path": "components/card/card.component.js",
|
|
5371
|
+
"declarations": [
|
|
5372
|
+
{
|
|
5373
|
+
"kind": "class",
|
|
5374
|
+
"description": "The card component allows users to organize information in a structured and tangible\nformat that is visually appealing. `mdc-card` is a static component that supports\nthe following features:\n- Image\n- Header\n - Icon\n - Title\n - Subtitle\n- Body\n\nThe card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\n\nThere are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n\nTo make this card interactive, use the following slots:\n- `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n- `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n- `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.\n- `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\nwithin the footer section.\n\nInteractive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.",
|
|
5375
|
+
"name": "Card",
|
|
5376
|
+
"cssProperties": [
|
|
5377
|
+
{
|
|
5378
|
+
"description": "The width of the card",
|
|
5379
|
+
"name": "--mdc-card-width"
|
|
5380
|
+
}
|
|
5381
|
+
],
|
|
5382
|
+
"cssParts": [
|
|
5383
|
+
{
|
|
5384
|
+
"description": "The header part of the card",
|
|
5385
|
+
"name": "header"
|
|
5386
|
+
},
|
|
5387
|
+
{
|
|
5388
|
+
"description": "The icon part of the card header",
|
|
5389
|
+
"name": "icon"
|
|
5390
|
+
},
|
|
5391
|
+
{
|
|
5392
|
+
"description": "The body part of the card",
|
|
5393
|
+
"name": "body"
|
|
5394
|
+
},
|
|
5395
|
+
{
|
|
5396
|
+
"description": "The image part of the card",
|
|
5397
|
+
"name": "image"
|
|
5398
|
+
},
|
|
5399
|
+
{
|
|
5400
|
+
"description": "The footer part of the card",
|
|
5401
|
+
"name": "footer"
|
|
5402
|
+
},
|
|
5403
|
+
{
|
|
5404
|
+
"description": "The link part of the card footer",
|
|
5405
|
+
"name": "footer-link"
|
|
5406
|
+
},
|
|
5407
|
+
{
|
|
5408
|
+
"description": "The primary button part of the card footer",
|
|
5409
|
+
"name": "footer-button-primary"
|
|
5410
|
+
},
|
|
5411
|
+
{
|
|
5412
|
+
"description": "The secondary button part of the card footer",
|
|
5413
|
+
"name": "footer-button-secondary"
|
|
5414
|
+
},
|
|
5415
|
+
{
|
|
5416
|
+
"description": "The icon button part of the card header",
|
|
5417
|
+
"name": "icon-button"
|
|
5418
|
+
},
|
|
5419
|
+
{
|
|
5420
|
+
"description": "The text part of the card",
|
|
5421
|
+
"name": "text"
|
|
5422
|
+
}
|
|
5423
|
+
],
|
|
5424
|
+
"slots": [
|
|
5425
|
+
{
|
|
5426
|
+
"description": "This slot is for passing the content before the body",
|
|
5427
|
+
"name": "before-body"
|
|
5428
|
+
},
|
|
5429
|
+
{
|
|
5430
|
+
"description": "This slot is for passing the text content for the card",
|
|
5431
|
+
"name": "body"
|
|
5432
|
+
},
|
|
5433
|
+
{
|
|
5434
|
+
"description": "This slot is for passing the content after the body",
|
|
5435
|
+
"name": "after-body"
|
|
5118
5436
|
},
|
|
5119
5437
|
{
|
|
5120
|
-
"
|
|
5121
|
-
"name": "
|
|
5122
|
-
"privacy": "private",
|
|
5123
|
-
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed."
|
|
5438
|
+
"description": "This slot is for passing `mdc-link` component within the footer section.",
|
|
5439
|
+
"name": "footer-link"
|
|
5124
5440
|
},
|
|
5125
5441
|
{
|
|
5126
|
-
"
|
|
5127
|
-
"name": "
|
|
5128
|
-
|
|
5129
|
-
|
|
5130
|
-
|
|
5131
|
-
|
|
5132
|
-
"type": {
|
|
5133
|
-
"text": "KeyboardEvent"
|
|
5134
|
-
},
|
|
5135
|
-
"description": "The keyboard event."
|
|
5136
|
-
}
|
|
5137
|
-
],
|
|
5138
|
-
"description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application."
|
|
5442
|
+
"description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
|
|
5443
|
+
"name": "footer-button-primary"
|
|
5444
|
+
},
|
|
5445
|
+
{
|
|
5446
|
+
"description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
|
|
5447
|
+
"name": "footer-button-secondary"
|
|
5139
5448
|
},
|
|
5449
|
+
{
|
|
5450
|
+
"description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred.",
|
|
5451
|
+
"name": "footer"
|
|
5452
|
+
}
|
|
5453
|
+
],
|
|
5454
|
+
"members": [
|
|
5140
5455
|
{
|
|
5141
5456
|
"kind": "method",
|
|
5142
|
-
"name": "
|
|
5143
|
-
"privacy": "
|
|
5144
|
-
"
|
|
5145
|
-
|
|
5146
|
-
|
|
5147
|
-
"
|
|
5148
|
-
"text": "KeyboardEvent"
|
|
5149
|
-
},
|
|
5150
|
-
"description": "The keyboard event."
|
|
5457
|
+
"name": "renderHeader",
|
|
5458
|
+
"privacy": "protected",
|
|
5459
|
+
"description": "Renders the header of the card if title is provided",
|
|
5460
|
+
"return": {
|
|
5461
|
+
"type": {
|
|
5462
|
+
"text": ""
|
|
5151
5463
|
}
|
|
5152
|
-
|
|
5153
|
-
"description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way."
|
|
5464
|
+
}
|
|
5154
5465
|
},
|
|
5155
5466
|
{
|
|
5156
5467
|
"kind": "field",
|
|
5157
|
-
"name": "
|
|
5468
|
+
"name": "cardTitle",
|
|
5158
5469
|
"type": {
|
|
5159
|
-
"text": "
|
|
5470
|
+
"text": "string"
|
|
5160
5471
|
},
|
|
5161
|
-
"default": "
|
|
5162
|
-
"description": "
|
|
5163
|
-
"attribute": "
|
|
5472
|
+
"default": "''",
|
|
5473
|
+
"description": "The title of the card - part of header section",
|
|
5474
|
+
"attribute": "card-title",
|
|
5164
5475
|
"reflects": true,
|
|
5165
5476
|
"inheritedFrom": {
|
|
5166
|
-
"name": "
|
|
5167
|
-
"module": "utils/mixins/
|
|
5477
|
+
"name": "CardComponentMixin",
|
|
5478
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
5168
5479
|
}
|
|
5169
5480
|
},
|
|
5170
5481
|
{
|
|
5171
5482
|
"kind": "field",
|
|
5172
|
-
"name": "
|
|
5483
|
+
"name": "subtitle",
|
|
5173
5484
|
"type": {
|
|
5174
|
-
"text": "
|
|
5485
|
+
"text": "string"
|
|
5175
5486
|
},
|
|
5176
|
-
"default": "
|
|
5177
|
-
"description": "
|
|
5178
|
-
"attribute": "
|
|
5487
|
+
"default": "''",
|
|
5488
|
+
"description": "The subtitle of the card - part of header section",
|
|
5489
|
+
"attribute": "subtitle",
|
|
5179
5490
|
"reflects": true,
|
|
5180
5491
|
"inheritedFrom": {
|
|
5181
|
-
"name": "
|
|
5182
|
-
"module": "utils/mixins/
|
|
5492
|
+
"name": "CardComponentMixin",
|
|
5493
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
5183
5494
|
}
|
|
5184
5495
|
},
|
|
5185
5496
|
{
|
|
5186
5497
|
"kind": "field",
|
|
5187
|
-
"name": "
|
|
5498
|
+
"name": "imageSrc",
|
|
5188
5499
|
"type": {
|
|
5189
|
-
"text": "
|
|
5500
|
+
"text": "string"
|
|
5190
5501
|
},
|
|
5191
|
-
"
|
|
5192
|
-
"
|
|
5193
|
-
"attribute": "
|
|
5502
|
+
"default": "''",
|
|
5503
|
+
"description": "The image source URL to render on the card",
|
|
5504
|
+
"attribute": "image-src",
|
|
5194
5505
|
"reflects": true,
|
|
5195
5506
|
"inheritedFrom": {
|
|
5196
|
-
"name": "
|
|
5197
|
-
"module": "utils/mixins/
|
|
5507
|
+
"name": "CardComponentMixin",
|
|
5508
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
5198
5509
|
}
|
|
5199
|
-
}
|
|
5200
|
-
],
|
|
5201
|
-
"events": [
|
|
5202
|
-
{
|
|
5203
|
-
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
|
5204
|
-
"name": "click",
|
|
5205
|
-
"reactName": "onClick"
|
|
5206
5510
|
},
|
|
5207
5511
|
{
|
|
5208
|
-
"
|
|
5209
|
-
"name": "
|
|
5210
|
-
"
|
|
5512
|
+
"kind": "field",
|
|
5513
|
+
"name": "imageAlt",
|
|
5514
|
+
"type": {
|
|
5515
|
+
"text": "string"
|
|
5516
|
+
},
|
|
5517
|
+
"default": "''",
|
|
5518
|
+
"description": "The image alt for accessibility support",
|
|
5519
|
+
"attribute": "image-alt",
|
|
5520
|
+
"reflects": true,
|
|
5521
|
+
"inheritedFrom": {
|
|
5522
|
+
"name": "CardComponentMixin",
|
|
5523
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
5524
|
+
}
|
|
5211
5525
|
},
|
|
5212
5526
|
{
|
|
5213
|
-
"
|
|
5214
|
-
"name": "
|
|
5215
|
-
"
|
|
5527
|
+
"kind": "field",
|
|
5528
|
+
"name": "variant",
|
|
5529
|
+
"type": {
|
|
5530
|
+
"text": "CardVariant"
|
|
5531
|
+
},
|
|
5532
|
+
"description": "The variant of the card. It can either be set to 'border' or 'ghost'",
|
|
5533
|
+
"default": "'border'",
|
|
5534
|
+
"attribute": "variant",
|
|
5535
|
+
"reflects": true,
|
|
5536
|
+
"inheritedFrom": {
|
|
5537
|
+
"name": "CardComponentMixin",
|
|
5538
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
5539
|
+
}
|
|
5216
5540
|
},
|
|
5217
5541
|
{
|
|
5218
|
-
"
|
|
5219
|
-
"name": "
|
|
5220
|
-
"reactName": "onFocus"
|
|
5221
|
-
}
|
|
5222
|
-
],
|
|
5223
|
-
"attributes": [
|
|
5224
|
-
{
|
|
5225
|
-
"name": "active",
|
|
5542
|
+
"kind": "field",
|
|
5543
|
+
"name": "orientation",
|
|
5226
5544
|
"type": {
|
|
5227
|
-
"text": "
|
|
5545
|
+
"text": "CardOrientation"
|
|
5228
5546
|
},
|
|
5229
|
-
"description": "The
|
|
5230
|
-
"default": "
|
|
5231
|
-
"
|
|
5547
|
+
"description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
|
|
5548
|
+
"default": "'vertical'",
|
|
5549
|
+
"attribute": "orientation",
|
|
5550
|
+
"reflects": true,
|
|
5551
|
+
"inheritedFrom": {
|
|
5552
|
+
"name": "CardComponentMixin",
|
|
5553
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
5554
|
+
}
|
|
5232
5555
|
},
|
|
5233
5556
|
{
|
|
5234
|
-
"
|
|
5557
|
+
"kind": "field",
|
|
5558
|
+
"name": "titleTagName",
|
|
5235
5559
|
"type": {
|
|
5236
|
-
"text": "
|
|
5560
|
+
"text": "TagNameType"
|
|
5237
5561
|
},
|
|
5238
|
-
"description": "
|
|
5239
|
-
"default": "
|
|
5240
|
-
"
|
|
5562
|
+
"description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
|
|
5563
|
+
"default": "'span'",
|
|
5564
|
+
"attribute": "title-tag-name",
|
|
5565
|
+
"reflects": true,
|
|
5566
|
+
"inheritedFrom": {
|
|
5567
|
+
"name": "CardComponentMixin",
|
|
5568
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
5569
|
+
}
|
|
5241
5570
|
},
|
|
5242
5571
|
{
|
|
5243
|
-
"
|
|
5572
|
+
"kind": "field",
|
|
5573
|
+
"name": "subtitleTagName",
|
|
5244
5574
|
"type": {
|
|
5245
|
-
"text": "
|
|
5575
|
+
"text": "TagNameType"
|
|
5246
5576
|
},
|
|
5247
|
-
"description": "
|
|
5248
|
-
"default": "
|
|
5249
|
-
"
|
|
5577
|
+
"description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
|
|
5578
|
+
"default": "'span'",
|
|
5579
|
+
"attribute": "subtitle-tag-name",
|
|
5580
|
+
"reflects": true,
|
|
5581
|
+
"inheritedFrom": {
|
|
5582
|
+
"name": "CardComponentMixin",
|
|
5583
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
5584
|
+
}
|
|
5250
5585
|
},
|
|
5251
5586
|
{
|
|
5252
|
-
"
|
|
5587
|
+
"kind": "field",
|
|
5588
|
+
"name": "iconName",
|
|
5253
5589
|
"type": {
|
|
5254
|
-
"text": "
|
|
5590
|
+
"text": "IconNames | undefined"
|
|
5255
5591
|
},
|
|
5256
|
-
"description": "
|
|
5257
|
-
"
|
|
5258
|
-
"
|
|
5592
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
5593
|
+
"attribute": "icon-name",
|
|
5594
|
+
"reflects": true,
|
|
5595
|
+
"inheritedFrom": {
|
|
5596
|
+
"name": "CardComponentMixin",
|
|
5597
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
5598
|
+
}
|
|
5259
5599
|
},
|
|
5260
5600
|
{
|
|
5261
|
-
"
|
|
5262
|
-
"
|
|
5263
|
-
|
|
5601
|
+
"kind": "method",
|
|
5602
|
+
"name": "renderImage",
|
|
5603
|
+
"privacy": "protected",
|
|
5604
|
+
"description": "Renders the image on the card if image source is provided",
|
|
5605
|
+
"return": {
|
|
5606
|
+
"type": {
|
|
5607
|
+
"text": ""
|
|
5608
|
+
}
|
|
5264
5609
|
},
|
|
5265
|
-
"
|
|
5266
|
-
|
|
5267
|
-
|
|
5610
|
+
"inheritedFrom": {
|
|
5611
|
+
"name": "CardComponentMixin",
|
|
5612
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
5613
|
+
}
|
|
5268
5614
|
},
|
|
5269
5615
|
{
|
|
5270
|
-
"
|
|
5616
|
+
"kind": "method",
|
|
5617
|
+
"name": "renderIcon",
|
|
5618
|
+
"privacy": "protected",
|
|
5619
|
+
"description": "Renders the icon on the card if icon name is provided",
|
|
5620
|
+
"return": {
|
|
5621
|
+
"type": {
|
|
5622
|
+
"text": ""
|
|
5623
|
+
}
|
|
5624
|
+
},
|
|
5625
|
+
"inheritedFrom": {
|
|
5626
|
+
"name": "CardComponentMixin",
|
|
5627
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
5628
|
+
}
|
|
5629
|
+
},
|
|
5630
|
+
{
|
|
5631
|
+
"kind": "method",
|
|
5632
|
+
"name": "renderTitle",
|
|
5633
|
+
"privacy": "protected",
|
|
5634
|
+
"description": "Renders the title and subtitle on the card",
|
|
5635
|
+
"return": {
|
|
5636
|
+
"type": {
|
|
5637
|
+
"text": ""
|
|
5638
|
+
}
|
|
5639
|
+
},
|
|
5640
|
+
"inheritedFrom": {
|
|
5641
|
+
"name": "CardComponentMixin",
|
|
5642
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
5643
|
+
}
|
|
5644
|
+
},
|
|
5645
|
+
{
|
|
5646
|
+
"kind": "method",
|
|
5647
|
+
"name": "renderFooter",
|
|
5648
|
+
"privacy": "protected",
|
|
5649
|
+
"description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
|
|
5650
|
+
"return": {
|
|
5651
|
+
"type": {
|
|
5652
|
+
"text": ""
|
|
5653
|
+
}
|
|
5654
|
+
},
|
|
5655
|
+
"inheritedFrom": {
|
|
5656
|
+
"name": "FooterMixin",
|
|
5657
|
+
"module": "utils/mixins/FooterMixin.js"
|
|
5658
|
+
}
|
|
5659
|
+
}
|
|
5660
|
+
],
|
|
5661
|
+
"mixins": [
|
|
5662
|
+
{
|
|
5663
|
+
"name": "CardComponentMixin",
|
|
5664
|
+
"module": "/src/utils/mixins/CardComponentMixin"
|
|
5665
|
+
},
|
|
5666
|
+
{
|
|
5667
|
+
"name": "FooterMixin",
|
|
5668
|
+
"module": "/src/utils/mixins/FooterMixin"
|
|
5669
|
+
}
|
|
5670
|
+
],
|
|
5671
|
+
"superclass": {
|
|
5672
|
+
"name": "Component",
|
|
5673
|
+
"module": "/src/models"
|
|
5674
|
+
},
|
|
5675
|
+
"tagName": "mdc-card",
|
|
5676
|
+
"jsDoc": "/**\n * The card component allows users to organize information in a structured and tangible\n * format that is visually appealing. `mdc-card` is a static component that supports\n * the following features:\n * - Image\n * - Header\n * - Icon\n * - Title\n * - Subtitle\n * - Body\n *\n * The card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\n *\n * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n *\n * To make this card interactive, use the following slots:\n * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n * - `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.\n * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n *\n * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer - This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @tagname mdc-card\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n */",
|
|
5677
|
+
"customElement": true,
|
|
5678
|
+
"attributes": [
|
|
5679
|
+
{
|
|
5680
|
+
"name": "card-title",
|
|
5271
5681
|
"type": {
|
|
5272
|
-
"text": "
|
|
5682
|
+
"text": "string"
|
|
5273
5683
|
},
|
|
5274
|
-
"
|
|
5275
|
-
"
|
|
5276
|
-
"fieldName": "
|
|
5684
|
+
"default": "''",
|
|
5685
|
+
"description": "The title of the card - part of header section",
|
|
5686
|
+
"fieldName": "cardTitle",
|
|
5687
|
+
"inheritedFrom": {
|
|
5688
|
+
"name": "CardComponentMixin",
|
|
5689
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
5690
|
+
}
|
|
5277
5691
|
},
|
|
5278
5692
|
{
|
|
5279
|
-
"name": "
|
|
5693
|
+
"name": "subtitle",
|
|
5280
5694
|
"type": {
|
|
5281
|
-
"text": "string
|
|
5695
|
+
"text": "string"
|
|
5282
5696
|
},
|
|
5283
|
-
"
|
|
5284
|
-
"
|
|
5697
|
+
"default": "''",
|
|
5698
|
+
"description": "The subtitle of the card - part of header section",
|
|
5699
|
+
"fieldName": "subtitle",
|
|
5700
|
+
"inheritedFrom": {
|
|
5701
|
+
"name": "CardComponentMixin",
|
|
5702
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
5703
|
+
}
|
|
5285
5704
|
},
|
|
5286
5705
|
{
|
|
5287
|
-
"name": "
|
|
5706
|
+
"name": "image-src",
|
|
5288
5707
|
"type": {
|
|
5289
|
-
"text": "string
|
|
5708
|
+
"text": "string"
|
|
5290
5709
|
},
|
|
5291
|
-
"
|
|
5292
|
-
"
|
|
5710
|
+
"default": "''",
|
|
5711
|
+
"description": "The image source URL to render on the card",
|
|
5712
|
+
"fieldName": "imageSrc",
|
|
5713
|
+
"inheritedFrom": {
|
|
5714
|
+
"name": "CardComponentMixin",
|
|
5715
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
5716
|
+
}
|
|
5293
5717
|
},
|
|
5294
5718
|
{
|
|
5295
|
-
"name": "
|
|
5719
|
+
"name": "image-alt",
|
|
5296
5720
|
"type": {
|
|
5297
|
-
"text": "
|
|
5721
|
+
"text": "string"
|
|
5298
5722
|
},
|
|
5299
|
-
"default": "
|
|
5300
|
-
"description": "
|
|
5301
|
-
"fieldName": "
|
|
5723
|
+
"default": "''",
|
|
5724
|
+
"description": "The image alt for accessibility support",
|
|
5725
|
+
"fieldName": "imageAlt",
|
|
5302
5726
|
"inheritedFrom": {
|
|
5303
|
-
"name": "
|
|
5304
|
-
"module": "src/utils/mixins/
|
|
5727
|
+
"name": "CardComponentMixin",
|
|
5728
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
5305
5729
|
}
|
|
5306
5730
|
},
|
|
5307
5731
|
{
|
|
5308
|
-
"name": "
|
|
5732
|
+
"name": "variant",
|
|
5309
5733
|
"type": {
|
|
5310
|
-
"text": "
|
|
5734
|
+
"text": "CardVariant"
|
|
5311
5735
|
},
|
|
5312
|
-
"
|
|
5313
|
-
"
|
|
5314
|
-
"fieldName": "
|
|
5736
|
+
"description": "The variant of the card. It can either be set to 'border' or 'ghost'",
|
|
5737
|
+
"default": "'border'",
|
|
5738
|
+
"fieldName": "variant",
|
|
5315
5739
|
"inheritedFrom": {
|
|
5316
|
-
"name": "
|
|
5317
|
-
"module": "src/utils/mixins/
|
|
5740
|
+
"name": "CardComponentMixin",
|
|
5741
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
5318
5742
|
}
|
|
5319
5743
|
},
|
|
5320
5744
|
{
|
|
5321
|
-
"name": "
|
|
5745
|
+
"name": "orientation",
|
|
5322
5746
|
"type": {
|
|
5323
|
-
"text": "
|
|
5747
|
+
"text": "CardOrientation"
|
|
5324
5748
|
},
|
|
5325
|
-
"description": "
|
|
5326
|
-
"default": "
|
|
5327
|
-
"fieldName": "
|
|
5749
|
+
"description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
|
|
5750
|
+
"default": "'vertical'",
|
|
5751
|
+
"fieldName": "orientation",
|
|
5328
5752
|
"inheritedFrom": {
|
|
5329
|
-
"name": "
|
|
5330
|
-
"module": "src/utils/mixins/
|
|
5753
|
+
"name": "CardComponentMixin",
|
|
5754
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
5331
5755
|
}
|
|
5332
|
-
}
|
|
5333
|
-
],
|
|
5334
|
-
"mixins": [
|
|
5756
|
+
},
|
|
5335
5757
|
{
|
|
5336
|
-
"name": "
|
|
5337
|
-
"
|
|
5758
|
+
"name": "title-tag-name",
|
|
5759
|
+
"type": {
|
|
5760
|
+
"text": "TagNameType"
|
|
5761
|
+
},
|
|
5762
|
+
"description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
|
|
5763
|
+
"default": "'span'",
|
|
5764
|
+
"fieldName": "titleTagName",
|
|
5765
|
+
"inheritedFrom": {
|
|
5766
|
+
"name": "CardComponentMixin",
|
|
5767
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
5768
|
+
}
|
|
5338
5769
|
},
|
|
5339
5770
|
{
|
|
5340
|
-
"name": "
|
|
5341
|
-
"
|
|
5771
|
+
"name": "subtitle-tag-name",
|
|
5772
|
+
"type": {
|
|
5773
|
+
"text": "TagNameType"
|
|
5774
|
+
},
|
|
5775
|
+
"description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
|
|
5776
|
+
"default": "'span'",
|
|
5777
|
+
"fieldName": "subtitleTagName",
|
|
5778
|
+
"inheritedFrom": {
|
|
5779
|
+
"name": "CardComponentMixin",
|
|
5780
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
5781
|
+
}
|
|
5342
5782
|
},
|
|
5343
5783
|
{
|
|
5344
|
-
"name": "
|
|
5345
|
-
"
|
|
5784
|
+
"name": "icon-name",
|
|
5785
|
+
"type": {
|
|
5786
|
+
"text": "IconNames | undefined"
|
|
5787
|
+
},
|
|
5788
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
5789
|
+
"fieldName": "iconName",
|
|
5790
|
+
"inheritedFrom": {
|
|
5791
|
+
"name": "CardComponentMixin",
|
|
5792
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
5793
|
+
}
|
|
5346
5794
|
}
|
|
5347
|
-
]
|
|
5348
|
-
"superclass": {
|
|
5349
|
-
"name": "Component",
|
|
5350
|
-
"module": "/src/models"
|
|
5351
|
-
},
|
|
5352
|
-
"tagName": "mdc-buttonsimple",
|
|
5353
|
-
"jsDoc": "/**\n * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.\n * It is used as an internal component and is not intended to be used directly by consumers.\n * Consumers should use the `mdc-button` component instead.\n *\n * @event click - (React: onClick) This event is dispatched when the button is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.\n * @event focus - (React: onFocus) This event is dispatched when the button receives focus.\n *\n * @tagname mdc-buttonsimple\n */",
|
|
5354
|
-
"customElement": true
|
|
5795
|
+
]
|
|
5355
5796
|
}
|
|
5356
5797
|
],
|
|
5357
5798
|
"exports": [
|
|
@@ -5359,8 +5800,8 @@
|
|
|
5359
5800
|
"kind": "js",
|
|
5360
5801
|
"name": "default",
|
|
5361
5802
|
"declaration": {
|
|
5362
|
-
"name": "
|
|
5363
|
-
"module": "components/
|
|
5803
|
+
"name": "Card",
|
|
5804
|
+
"module": "components/card/card.component.js"
|
|
5364
5805
|
}
|
|
5365
5806
|
}
|
|
5366
5807
|
]
|
|
@@ -6563,8 +7004,8 @@
|
|
|
6563
7004
|
"attribute": "card-title",
|
|
6564
7005
|
"reflects": true,
|
|
6565
7006
|
"inheritedFrom": {
|
|
6566
|
-
"name": "
|
|
6567
|
-
"module": "
|
|
7007
|
+
"name": "Card",
|
|
7008
|
+
"module": "components/card/card.component.js"
|
|
6568
7009
|
}
|
|
6569
7010
|
},
|
|
6570
7011
|
{
|
|
@@ -6578,8 +7019,8 @@
|
|
|
6578
7019
|
"attribute": "subtitle",
|
|
6579
7020
|
"reflects": true,
|
|
6580
7021
|
"inheritedFrom": {
|
|
6581
|
-
"name": "
|
|
6582
|
-
"module": "
|
|
7022
|
+
"name": "Card",
|
|
7023
|
+
"module": "components/card/card.component.js"
|
|
6583
7024
|
}
|
|
6584
7025
|
},
|
|
6585
7026
|
{
|
|
@@ -6593,8 +7034,8 @@
|
|
|
6593
7034
|
"attribute": "image-src",
|
|
6594
7035
|
"reflects": true,
|
|
6595
7036
|
"inheritedFrom": {
|
|
6596
|
-
"name": "
|
|
6597
|
-
"module": "
|
|
7037
|
+
"name": "Card",
|
|
7038
|
+
"module": "components/card/card.component.js"
|
|
6598
7039
|
}
|
|
6599
7040
|
},
|
|
6600
7041
|
{
|
|
@@ -6608,8 +7049,8 @@
|
|
|
6608
7049
|
"attribute": "image-alt",
|
|
6609
7050
|
"reflects": true,
|
|
6610
7051
|
"inheritedFrom": {
|
|
6611
|
-
"name": "
|
|
6612
|
-
"module": "
|
|
7052
|
+
"name": "Card",
|
|
7053
|
+
"module": "components/card/card.component.js"
|
|
6613
7054
|
}
|
|
6614
7055
|
},
|
|
6615
7056
|
{
|
|
@@ -6623,8 +7064,8 @@
|
|
|
6623
7064
|
"attribute": "variant",
|
|
6624
7065
|
"reflects": true,
|
|
6625
7066
|
"inheritedFrom": {
|
|
6626
|
-
"name": "
|
|
6627
|
-
"module": "
|
|
7067
|
+
"name": "Card",
|
|
7068
|
+
"module": "components/card/card.component.js"
|
|
6628
7069
|
}
|
|
6629
7070
|
},
|
|
6630
7071
|
{
|
|
@@ -6638,8 +7079,8 @@
|
|
|
6638
7079
|
"attribute": "orientation",
|
|
6639
7080
|
"reflects": true,
|
|
6640
7081
|
"inheritedFrom": {
|
|
6641
|
-
"name": "
|
|
6642
|
-
"module": "
|
|
7082
|
+
"name": "Card",
|
|
7083
|
+
"module": "components/card/card.component.js"
|
|
6643
7084
|
}
|
|
6644
7085
|
},
|
|
6645
7086
|
{
|
|
@@ -6653,8 +7094,8 @@
|
|
|
6653
7094
|
"attribute": "title-tag-name",
|
|
6654
7095
|
"reflects": true,
|
|
6655
7096
|
"inheritedFrom": {
|
|
6656
|
-
"name": "
|
|
6657
|
-
"module": "
|
|
7097
|
+
"name": "Card",
|
|
7098
|
+
"module": "components/card/card.component.js"
|
|
6658
7099
|
}
|
|
6659
7100
|
},
|
|
6660
7101
|
{
|
|
@@ -6668,8 +7109,8 @@
|
|
|
6668
7109
|
"attribute": "subtitle-tag-name",
|
|
6669
7110
|
"reflects": true,
|
|
6670
7111
|
"inheritedFrom": {
|
|
6671
|
-
"name": "
|
|
6672
|
-
"module": "
|
|
7112
|
+
"name": "Card",
|
|
7113
|
+
"module": "components/card/card.component.js"
|
|
6673
7114
|
}
|
|
6674
7115
|
},
|
|
6675
7116
|
{
|
|
@@ -6682,8 +7123,8 @@
|
|
|
6682
7123
|
"attribute": "icon-name",
|
|
6683
7124
|
"reflects": true,
|
|
6684
7125
|
"inheritedFrom": {
|
|
6685
|
-
"name": "
|
|
6686
|
-
"module": "
|
|
7126
|
+
"name": "Card",
|
|
7127
|
+
"module": "components/card/card.component.js"
|
|
6687
7128
|
}
|
|
6688
7129
|
},
|
|
6689
7130
|
{
|
|
@@ -6697,8 +7138,8 @@
|
|
|
6697
7138
|
}
|
|
6698
7139
|
},
|
|
6699
7140
|
"inheritedFrom": {
|
|
6700
|
-
"name": "
|
|
6701
|
-
"module": "
|
|
7141
|
+
"name": "Card",
|
|
7142
|
+
"module": "components/card/card.component.js"
|
|
6702
7143
|
}
|
|
6703
7144
|
},
|
|
6704
7145
|
{
|
|
@@ -6712,8 +7153,8 @@
|
|
|
6712
7153
|
}
|
|
6713
7154
|
},
|
|
6714
7155
|
"inheritedFrom": {
|
|
6715
|
-
"name": "
|
|
6716
|
-
"module": "
|
|
7156
|
+
"name": "Card",
|
|
7157
|
+
"module": "components/card/card.component.js"
|
|
6717
7158
|
}
|
|
6718
7159
|
},
|
|
6719
7160
|
{
|
|
@@ -6727,8 +7168,8 @@
|
|
|
6727
7168
|
}
|
|
6728
7169
|
},
|
|
6729
7170
|
"inheritedFrom": {
|
|
6730
|
-
"name": "
|
|
6731
|
-
"module": "
|
|
7171
|
+
"name": "Card",
|
|
7172
|
+
"module": "components/card/card.component.js"
|
|
6732
7173
|
}
|
|
6733
7174
|
},
|
|
6734
7175
|
{
|
|
@@ -6742,8 +7183,8 @@
|
|
|
6742
7183
|
}
|
|
6743
7184
|
},
|
|
6744
7185
|
"inheritedFrom": {
|
|
6745
|
-
"name": "
|
|
6746
|
-
"module": "
|
|
7186
|
+
"name": "Card",
|
|
7187
|
+
"module": "components/card/card.component.js"
|
|
6747
7188
|
}
|
|
6748
7189
|
}
|
|
6749
7190
|
],
|
|
@@ -6831,8 +7272,8 @@
|
|
|
6831
7272
|
"description": "The title of the card - part of header section",
|
|
6832
7273
|
"fieldName": "cardTitle",
|
|
6833
7274
|
"inheritedFrom": {
|
|
6834
|
-
"name": "
|
|
6835
|
-
"module": "src/
|
|
7275
|
+
"name": "Card",
|
|
7276
|
+
"module": "src/components/card/card.component.ts"
|
|
6836
7277
|
}
|
|
6837
7278
|
},
|
|
6838
7279
|
{
|
|
@@ -6844,8 +7285,8 @@
|
|
|
6844
7285
|
"description": "The subtitle of the card - part of header section",
|
|
6845
7286
|
"fieldName": "subtitle",
|
|
6846
7287
|
"inheritedFrom": {
|
|
6847
|
-
"name": "
|
|
6848
|
-
"module": "src/
|
|
7288
|
+
"name": "Card",
|
|
7289
|
+
"module": "src/components/card/card.component.ts"
|
|
6849
7290
|
}
|
|
6850
7291
|
},
|
|
6851
7292
|
{
|
|
@@ -6857,8 +7298,8 @@
|
|
|
6857
7298
|
"description": "The image source URL to render on the card",
|
|
6858
7299
|
"fieldName": "imageSrc",
|
|
6859
7300
|
"inheritedFrom": {
|
|
6860
|
-
"name": "
|
|
6861
|
-
"module": "src/
|
|
7301
|
+
"name": "Card",
|
|
7302
|
+
"module": "src/components/card/card.component.ts"
|
|
6862
7303
|
}
|
|
6863
7304
|
},
|
|
6864
7305
|
{
|
|
@@ -6870,8 +7311,8 @@
|
|
|
6870
7311
|
"description": "The image alt for accessibility support",
|
|
6871
7312
|
"fieldName": "imageAlt",
|
|
6872
7313
|
"inheritedFrom": {
|
|
6873
|
-
"name": "
|
|
6874
|
-
"module": "src/
|
|
7314
|
+
"name": "Card",
|
|
7315
|
+
"module": "src/components/card/card.component.ts"
|
|
6875
7316
|
}
|
|
6876
7317
|
},
|
|
6877
7318
|
{
|
|
@@ -6883,8 +7324,8 @@
|
|
|
6883
7324
|
"default": "'border'",
|
|
6884
7325
|
"fieldName": "variant",
|
|
6885
7326
|
"inheritedFrom": {
|
|
6886
|
-
"name": "
|
|
6887
|
-
"module": "src/
|
|
7327
|
+
"name": "Card",
|
|
7328
|
+
"module": "src/components/card/card.component.ts"
|
|
6888
7329
|
}
|
|
6889
7330
|
},
|
|
6890
7331
|
{
|
|
@@ -6896,8 +7337,8 @@
|
|
|
6896
7337
|
"default": "'vertical'",
|
|
6897
7338
|
"fieldName": "orientation",
|
|
6898
7339
|
"inheritedFrom": {
|
|
6899
|
-
"name": "
|
|
6900
|
-
"module": "src/
|
|
7340
|
+
"name": "Card",
|
|
7341
|
+
"module": "src/components/card/card.component.ts"
|
|
6901
7342
|
}
|
|
6902
7343
|
},
|
|
6903
7344
|
{
|
|
@@ -6909,8 +7350,8 @@
|
|
|
6909
7350
|
"default": "'span'",
|
|
6910
7351
|
"fieldName": "titleTagName",
|
|
6911
7352
|
"inheritedFrom": {
|
|
6912
|
-
"name": "
|
|
6913
|
-
"module": "src/
|
|
7353
|
+
"name": "Card",
|
|
7354
|
+
"module": "src/components/card/card.component.ts"
|
|
6914
7355
|
}
|
|
6915
7356
|
},
|
|
6916
7357
|
{
|
|
@@ -6922,8 +7363,8 @@
|
|
|
6922
7363
|
"default": "'span'",
|
|
6923
7364
|
"fieldName": "subtitleTagName",
|
|
6924
7365
|
"inheritedFrom": {
|
|
6925
|
-
"name": "
|
|
6926
|
-
"module": "src/
|
|
7366
|
+
"name": "Card",
|
|
7367
|
+
"module": "src/components/card/card.component.ts"
|
|
6927
7368
|
}
|
|
6928
7369
|
},
|
|
6929
7370
|
{
|
|
@@ -6934,8 +7375,8 @@
|
|
|
6934
7375
|
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
6935
7376
|
"fieldName": "iconName",
|
|
6936
7377
|
"inheritedFrom": {
|
|
6937
|
-
"name": "
|
|
6938
|
-
"module": "src/
|
|
7378
|
+
"name": "Card",
|
|
7379
|
+
"module": "src/components/card/card.component.ts"
|
|
6939
7380
|
}
|
|
6940
7381
|
}
|
|
6941
7382
|
],
|
|
@@ -6969,447 +7410,6 @@
|
|
|
6969
7410
|
}
|
|
6970
7411
|
]
|
|
6971
7412
|
},
|
|
6972
|
-
{
|
|
6973
|
-
"kind": "javascript-module",
|
|
6974
|
-
"path": "components/card/card.component.js",
|
|
6975
|
-
"declarations": [
|
|
6976
|
-
{
|
|
6977
|
-
"kind": "class",
|
|
6978
|
-
"description": "The card component allows users to organize information in a structured and tangible\nformat that is visually appealing. `mdc-card` is a static component that supports\nthe following features:\n- Image\n- Header\n - Icon\n - Title\n - Subtitle\n- Body\n\nThe card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\n\nThere are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n\nTo make this card interactive, use the following slots:\n- `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n- `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n- `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.\n- `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\nwithin the footer section.\n\nInteractive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.",
|
|
6979
|
-
"name": "Card",
|
|
6980
|
-
"cssProperties": [
|
|
6981
|
-
{
|
|
6982
|
-
"description": "The width of the card",
|
|
6983
|
-
"name": "--mdc-card-width"
|
|
6984
|
-
}
|
|
6985
|
-
],
|
|
6986
|
-
"cssParts": [
|
|
6987
|
-
{
|
|
6988
|
-
"description": "The header part of the card",
|
|
6989
|
-
"name": "header"
|
|
6990
|
-
},
|
|
6991
|
-
{
|
|
6992
|
-
"description": "The icon part of the card header",
|
|
6993
|
-
"name": "icon"
|
|
6994
|
-
},
|
|
6995
|
-
{
|
|
6996
|
-
"description": "The body part of the card",
|
|
6997
|
-
"name": "body"
|
|
6998
|
-
},
|
|
6999
|
-
{
|
|
7000
|
-
"description": "The image part of the card",
|
|
7001
|
-
"name": "image"
|
|
7002
|
-
},
|
|
7003
|
-
{
|
|
7004
|
-
"description": "The footer part of the card",
|
|
7005
|
-
"name": "footer"
|
|
7006
|
-
},
|
|
7007
|
-
{
|
|
7008
|
-
"description": "The link part of the card footer",
|
|
7009
|
-
"name": "footer-link"
|
|
7010
|
-
},
|
|
7011
|
-
{
|
|
7012
|
-
"description": "The primary button part of the card footer",
|
|
7013
|
-
"name": "footer-button-primary"
|
|
7014
|
-
},
|
|
7015
|
-
{
|
|
7016
|
-
"description": "The secondary button part of the card footer",
|
|
7017
|
-
"name": "footer-button-secondary"
|
|
7018
|
-
},
|
|
7019
|
-
{
|
|
7020
|
-
"description": "The icon button part of the card header",
|
|
7021
|
-
"name": "icon-button"
|
|
7022
|
-
},
|
|
7023
|
-
{
|
|
7024
|
-
"description": "The text part of the card",
|
|
7025
|
-
"name": "text"
|
|
7026
|
-
}
|
|
7027
|
-
],
|
|
7028
|
-
"slots": [
|
|
7029
|
-
{
|
|
7030
|
-
"description": "This slot is for passing the content before the body",
|
|
7031
|
-
"name": "before-body"
|
|
7032
|
-
},
|
|
7033
|
-
{
|
|
7034
|
-
"description": "This slot is for passing the text content for the card",
|
|
7035
|
-
"name": "body"
|
|
7036
|
-
},
|
|
7037
|
-
{
|
|
7038
|
-
"description": "This slot is for passing the content after the body",
|
|
7039
|
-
"name": "after-body"
|
|
7040
|
-
},
|
|
7041
|
-
{
|
|
7042
|
-
"description": "This slot is for passing `mdc-link` component within the footer section.",
|
|
7043
|
-
"name": "footer-link"
|
|
7044
|
-
},
|
|
7045
|
-
{
|
|
7046
|
-
"description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
|
|
7047
|
-
"name": "footer-button-primary"
|
|
7048
|
-
},
|
|
7049
|
-
{
|
|
7050
|
-
"description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
|
|
7051
|
-
"name": "footer-button-secondary"
|
|
7052
|
-
},
|
|
7053
|
-
{
|
|
7054
|
-
"description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred.",
|
|
7055
|
-
"name": "footer"
|
|
7056
|
-
}
|
|
7057
|
-
],
|
|
7058
|
-
"members": [
|
|
7059
|
-
{
|
|
7060
|
-
"kind": "method",
|
|
7061
|
-
"name": "renderHeader",
|
|
7062
|
-
"privacy": "protected",
|
|
7063
|
-
"description": "Renders the header of the card if title is provided",
|
|
7064
|
-
"return": {
|
|
7065
|
-
"type": {
|
|
7066
|
-
"text": ""
|
|
7067
|
-
}
|
|
7068
|
-
}
|
|
7069
|
-
},
|
|
7070
|
-
{
|
|
7071
|
-
"kind": "field",
|
|
7072
|
-
"name": "cardTitle",
|
|
7073
|
-
"type": {
|
|
7074
|
-
"text": "string"
|
|
7075
|
-
},
|
|
7076
|
-
"default": "''",
|
|
7077
|
-
"description": "The title of the card - part of header section",
|
|
7078
|
-
"attribute": "card-title",
|
|
7079
|
-
"reflects": true,
|
|
7080
|
-
"inheritedFrom": {
|
|
7081
|
-
"name": "CardComponentMixin",
|
|
7082
|
-
"module": "utils/mixins/CardComponentMixin.js"
|
|
7083
|
-
}
|
|
7084
|
-
},
|
|
7085
|
-
{
|
|
7086
|
-
"kind": "field",
|
|
7087
|
-
"name": "subtitle",
|
|
7088
|
-
"type": {
|
|
7089
|
-
"text": "string"
|
|
7090
|
-
},
|
|
7091
|
-
"default": "''",
|
|
7092
|
-
"description": "The subtitle of the card - part of header section",
|
|
7093
|
-
"attribute": "subtitle",
|
|
7094
|
-
"reflects": true,
|
|
7095
|
-
"inheritedFrom": {
|
|
7096
|
-
"name": "CardComponentMixin",
|
|
7097
|
-
"module": "utils/mixins/CardComponentMixin.js"
|
|
7098
|
-
}
|
|
7099
|
-
},
|
|
7100
|
-
{
|
|
7101
|
-
"kind": "field",
|
|
7102
|
-
"name": "imageSrc",
|
|
7103
|
-
"type": {
|
|
7104
|
-
"text": "string"
|
|
7105
|
-
},
|
|
7106
|
-
"default": "''",
|
|
7107
|
-
"description": "The image source URL to render on the card",
|
|
7108
|
-
"attribute": "image-src",
|
|
7109
|
-
"reflects": true,
|
|
7110
|
-
"inheritedFrom": {
|
|
7111
|
-
"name": "CardComponentMixin",
|
|
7112
|
-
"module": "utils/mixins/CardComponentMixin.js"
|
|
7113
|
-
}
|
|
7114
|
-
},
|
|
7115
|
-
{
|
|
7116
|
-
"kind": "field",
|
|
7117
|
-
"name": "imageAlt",
|
|
7118
|
-
"type": {
|
|
7119
|
-
"text": "string"
|
|
7120
|
-
},
|
|
7121
|
-
"default": "''",
|
|
7122
|
-
"description": "The image alt for accessibility support",
|
|
7123
|
-
"attribute": "image-alt",
|
|
7124
|
-
"reflects": true,
|
|
7125
|
-
"inheritedFrom": {
|
|
7126
|
-
"name": "CardComponentMixin",
|
|
7127
|
-
"module": "utils/mixins/CardComponentMixin.js"
|
|
7128
|
-
}
|
|
7129
|
-
},
|
|
7130
|
-
{
|
|
7131
|
-
"kind": "field",
|
|
7132
|
-
"name": "variant",
|
|
7133
|
-
"type": {
|
|
7134
|
-
"text": "CardVariant"
|
|
7135
|
-
},
|
|
7136
|
-
"description": "The variant of the card. It can either be set to 'border' or 'ghost'",
|
|
7137
|
-
"default": "'border'",
|
|
7138
|
-
"attribute": "variant",
|
|
7139
|
-
"reflects": true,
|
|
7140
|
-
"inheritedFrom": {
|
|
7141
|
-
"name": "CardComponentMixin",
|
|
7142
|
-
"module": "utils/mixins/CardComponentMixin.js"
|
|
7143
|
-
}
|
|
7144
|
-
},
|
|
7145
|
-
{
|
|
7146
|
-
"kind": "field",
|
|
7147
|
-
"name": "orientation",
|
|
7148
|
-
"type": {
|
|
7149
|
-
"text": "CardOrientation"
|
|
7150
|
-
},
|
|
7151
|
-
"description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
|
|
7152
|
-
"default": "'vertical'",
|
|
7153
|
-
"attribute": "orientation",
|
|
7154
|
-
"reflects": true,
|
|
7155
|
-
"inheritedFrom": {
|
|
7156
|
-
"name": "CardComponentMixin",
|
|
7157
|
-
"module": "utils/mixins/CardComponentMixin.js"
|
|
7158
|
-
}
|
|
7159
|
-
},
|
|
7160
|
-
{
|
|
7161
|
-
"kind": "field",
|
|
7162
|
-
"name": "titleTagName",
|
|
7163
|
-
"type": {
|
|
7164
|
-
"text": "TagNameType"
|
|
7165
|
-
},
|
|
7166
|
-
"description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
|
|
7167
|
-
"default": "'span'",
|
|
7168
|
-
"attribute": "title-tag-name",
|
|
7169
|
-
"reflects": true,
|
|
7170
|
-
"inheritedFrom": {
|
|
7171
|
-
"name": "CardComponentMixin",
|
|
7172
|
-
"module": "utils/mixins/CardComponentMixin.js"
|
|
7173
|
-
}
|
|
7174
|
-
},
|
|
7175
|
-
{
|
|
7176
|
-
"kind": "field",
|
|
7177
|
-
"name": "subtitleTagName",
|
|
7178
|
-
"type": {
|
|
7179
|
-
"text": "TagNameType"
|
|
7180
|
-
},
|
|
7181
|
-
"description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
|
|
7182
|
-
"default": "'span'",
|
|
7183
|
-
"attribute": "subtitle-tag-name",
|
|
7184
|
-
"reflects": true,
|
|
7185
|
-
"inheritedFrom": {
|
|
7186
|
-
"name": "CardComponentMixin",
|
|
7187
|
-
"module": "utils/mixins/CardComponentMixin.js"
|
|
7188
|
-
}
|
|
7189
|
-
},
|
|
7190
|
-
{
|
|
7191
|
-
"kind": "field",
|
|
7192
|
-
"name": "iconName",
|
|
7193
|
-
"type": {
|
|
7194
|
-
"text": "IconNames | undefined"
|
|
7195
|
-
},
|
|
7196
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
7197
|
-
"attribute": "icon-name",
|
|
7198
|
-
"reflects": true,
|
|
7199
|
-
"inheritedFrom": {
|
|
7200
|
-
"name": "CardComponentMixin",
|
|
7201
|
-
"module": "utils/mixins/CardComponentMixin.js"
|
|
7202
|
-
}
|
|
7203
|
-
},
|
|
7204
|
-
{
|
|
7205
|
-
"kind": "method",
|
|
7206
|
-
"name": "renderImage",
|
|
7207
|
-
"privacy": "protected",
|
|
7208
|
-
"description": "Renders the image on the card if image source is provided",
|
|
7209
|
-
"return": {
|
|
7210
|
-
"type": {
|
|
7211
|
-
"text": ""
|
|
7212
|
-
}
|
|
7213
|
-
},
|
|
7214
|
-
"inheritedFrom": {
|
|
7215
|
-
"name": "CardComponentMixin",
|
|
7216
|
-
"module": "utils/mixins/CardComponentMixin.js"
|
|
7217
|
-
}
|
|
7218
|
-
},
|
|
7219
|
-
{
|
|
7220
|
-
"kind": "method",
|
|
7221
|
-
"name": "renderIcon",
|
|
7222
|
-
"privacy": "protected",
|
|
7223
|
-
"description": "Renders the icon on the card if icon name is provided",
|
|
7224
|
-
"return": {
|
|
7225
|
-
"type": {
|
|
7226
|
-
"text": ""
|
|
7227
|
-
}
|
|
7228
|
-
},
|
|
7229
|
-
"inheritedFrom": {
|
|
7230
|
-
"name": "CardComponentMixin",
|
|
7231
|
-
"module": "utils/mixins/CardComponentMixin.js"
|
|
7232
|
-
}
|
|
7233
|
-
},
|
|
7234
|
-
{
|
|
7235
|
-
"kind": "method",
|
|
7236
|
-
"name": "renderTitle",
|
|
7237
|
-
"privacy": "protected",
|
|
7238
|
-
"description": "Renders the title and subtitle on the card",
|
|
7239
|
-
"return": {
|
|
7240
|
-
"type": {
|
|
7241
|
-
"text": ""
|
|
7242
|
-
}
|
|
7243
|
-
},
|
|
7244
|
-
"inheritedFrom": {
|
|
7245
|
-
"name": "CardComponentMixin",
|
|
7246
|
-
"module": "utils/mixins/CardComponentMixin.js"
|
|
7247
|
-
}
|
|
7248
|
-
},
|
|
7249
|
-
{
|
|
7250
|
-
"kind": "method",
|
|
7251
|
-
"name": "renderFooter",
|
|
7252
|
-
"privacy": "protected",
|
|
7253
|
-
"description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
|
|
7254
|
-
"return": {
|
|
7255
|
-
"type": {
|
|
7256
|
-
"text": ""
|
|
7257
|
-
}
|
|
7258
|
-
},
|
|
7259
|
-
"inheritedFrom": {
|
|
7260
|
-
"name": "FooterMixin",
|
|
7261
|
-
"module": "utils/mixins/FooterMixin.js"
|
|
7262
|
-
}
|
|
7263
|
-
}
|
|
7264
|
-
],
|
|
7265
|
-
"mixins": [
|
|
7266
|
-
{
|
|
7267
|
-
"name": "CardComponentMixin",
|
|
7268
|
-
"module": "/src/utils/mixins/CardComponentMixin"
|
|
7269
|
-
},
|
|
7270
|
-
{
|
|
7271
|
-
"name": "FooterMixin",
|
|
7272
|
-
"module": "/src/utils/mixins/FooterMixin"
|
|
7273
|
-
}
|
|
7274
|
-
],
|
|
7275
|
-
"superclass": {
|
|
7276
|
-
"name": "Component",
|
|
7277
|
-
"module": "/src/models"
|
|
7278
|
-
},
|
|
7279
|
-
"tagName": "mdc-card",
|
|
7280
|
-
"jsDoc": "/**\n * The card component allows users to organize information in a structured and tangible\n * format that is visually appealing. `mdc-card` is a static component that supports\n * the following features:\n * - Image\n * - Header\n * - Icon\n * - Title\n * - Subtitle\n * - Body\n *\n * The card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\n *\n * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n *\n * To make this card interactive, use the following slots:\n * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n * - `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.\n * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n *\n * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer - This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @tagname mdc-card\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n */",
|
|
7281
|
-
"customElement": true,
|
|
7282
|
-
"attributes": [
|
|
7283
|
-
{
|
|
7284
|
-
"name": "card-title",
|
|
7285
|
-
"type": {
|
|
7286
|
-
"text": "string"
|
|
7287
|
-
},
|
|
7288
|
-
"default": "''",
|
|
7289
|
-
"description": "The title of the card - part of header section",
|
|
7290
|
-
"fieldName": "cardTitle",
|
|
7291
|
-
"inheritedFrom": {
|
|
7292
|
-
"name": "CardComponentMixin",
|
|
7293
|
-
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
7294
|
-
}
|
|
7295
|
-
},
|
|
7296
|
-
{
|
|
7297
|
-
"name": "subtitle",
|
|
7298
|
-
"type": {
|
|
7299
|
-
"text": "string"
|
|
7300
|
-
},
|
|
7301
|
-
"default": "''",
|
|
7302
|
-
"description": "The subtitle of the card - part of header section",
|
|
7303
|
-
"fieldName": "subtitle",
|
|
7304
|
-
"inheritedFrom": {
|
|
7305
|
-
"name": "CardComponentMixin",
|
|
7306
|
-
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
7307
|
-
}
|
|
7308
|
-
},
|
|
7309
|
-
{
|
|
7310
|
-
"name": "image-src",
|
|
7311
|
-
"type": {
|
|
7312
|
-
"text": "string"
|
|
7313
|
-
},
|
|
7314
|
-
"default": "''",
|
|
7315
|
-
"description": "The image source URL to render on the card",
|
|
7316
|
-
"fieldName": "imageSrc",
|
|
7317
|
-
"inheritedFrom": {
|
|
7318
|
-
"name": "CardComponentMixin",
|
|
7319
|
-
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
7320
|
-
}
|
|
7321
|
-
},
|
|
7322
|
-
{
|
|
7323
|
-
"name": "image-alt",
|
|
7324
|
-
"type": {
|
|
7325
|
-
"text": "string"
|
|
7326
|
-
},
|
|
7327
|
-
"default": "''",
|
|
7328
|
-
"description": "The image alt for accessibility support",
|
|
7329
|
-
"fieldName": "imageAlt",
|
|
7330
|
-
"inheritedFrom": {
|
|
7331
|
-
"name": "CardComponentMixin",
|
|
7332
|
-
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
7333
|
-
}
|
|
7334
|
-
},
|
|
7335
|
-
{
|
|
7336
|
-
"name": "variant",
|
|
7337
|
-
"type": {
|
|
7338
|
-
"text": "CardVariant"
|
|
7339
|
-
},
|
|
7340
|
-
"description": "The variant of the card. It can either be set to 'border' or 'ghost'",
|
|
7341
|
-
"default": "'border'",
|
|
7342
|
-
"fieldName": "variant",
|
|
7343
|
-
"inheritedFrom": {
|
|
7344
|
-
"name": "CardComponentMixin",
|
|
7345
|
-
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
7346
|
-
}
|
|
7347
|
-
},
|
|
7348
|
-
{
|
|
7349
|
-
"name": "orientation",
|
|
7350
|
-
"type": {
|
|
7351
|
-
"text": "CardOrientation"
|
|
7352
|
-
},
|
|
7353
|
-
"description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
|
|
7354
|
-
"default": "'vertical'",
|
|
7355
|
-
"fieldName": "orientation",
|
|
7356
|
-
"inheritedFrom": {
|
|
7357
|
-
"name": "CardComponentMixin",
|
|
7358
|
-
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
7359
|
-
}
|
|
7360
|
-
},
|
|
7361
|
-
{
|
|
7362
|
-
"name": "title-tag-name",
|
|
7363
|
-
"type": {
|
|
7364
|
-
"text": "TagNameType"
|
|
7365
|
-
},
|
|
7366
|
-
"description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
|
|
7367
|
-
"default": "'span'",
|
|
7368
|
-
"fieldName": "titleTagName",
|
|
7369
|
-
"inheritedFrom": {
|
|
7370
|
-
"name": "CardComponentMixin",
|
|
7371
|
-
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
7372
|
-
}
|
|
7373
|
-
},
|
|
7374
|
-
{
|
|
7375
|
-
"name": "subtitle-tag-name",
|
|
7376
|
-
"type": {
|
|
7377
|
-
"text": "TagNameType"
|
|
7378
|
-
},
|
|
7379
|
-
"description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
|
|
7380
|
-
"default": "'span'",
|
|
7381
|
-
"fieldName": "subtitleTagName",
|
|
7382
|
-
"inheritedFrom": {
|
|
7383
|
-
"name": "CardComponentMixin",
|
|
7384
|
-
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
7385
|
-
}
|
|
7386
|
-
},
|
|
7387
|
-
{
|
|
7388
|
-
"name": "icon-name",
|
|
7389
|
-
"type": {
|
|
7390
|
-
"text": "IconNames | undefined"
|
|
7391
|
-
},
|
|
7392
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
7393
|
-
"fieldName": "iconName",
|
|
7394
|
-
"inheritedFrom": {
|
|
7395
|
-
"name": "CardComponentMixin",
|
|
7396
|
-
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
7397
|
-
}
|
|
7398
|
-
}
|
|
7399
|
-
]
|
|
7400
|
-
}
|
|
7401
|
-
],
|
|
7402
|
-
"exports": [
|
|
7403
|
-
{
|
|
7404
|
-
"kind": "js",
|
|
7405
|
-
"name": "default",
|
|
7406
|
-
"declaration": {
|
|
7407
|
-
"name": "Card",
|
|
7408
|
-
"module": "components/card/card.component.js"
|
|
7409
|
-
}
|
|
7410
|
-
}
|
|
7411
|
-
]
|
|
7412
|
-
},
|
|
7413
7413
|
{
|
|
7414
7414
|
"kind": "javascript-module",
|
|
7415
7415
|
"path": "components/cardradio/cardradio.component.js",
|
|
@@ -9561,6 +9561,14 @@
|
|
|
9561
9561
|
"name": "Popover",
|
|
9562
9562
|
"module": "src/components/popover/popover.component.ts"
|
|
9563
9563
|
}
|
|
9564
|
+
},
|
|
9565
|
+
{
|
|
9566
|
+
"description": "width of the popover",
|
|
9567
|
+
"name": "--mdc-popover-width",
|
|
9568
|
+
"inheritedFrom": {
|
|
9569
|
+
"name": "Popover",
|
|
9570
|
+
"module": "src/components/popover/popover.component.ts"
|
|
9571
|
+
}
|
|
9564
9572
|
}
|
|
9565
9573
|
],
|
|
9566
9574
|
"slots": [
|
|
@@ -23404,6 +23412,14 @@
|
|
|
23404
23412
|
"name": "Popover",
|
|
23405
23413
|
"module": "src/components/popover/popover.component.ts"
|
|
23406
23414
|
}
|
|
23415
|
+
},
|
|
23416
|
+
{
|
|
23417
|
+
"description": "width of the popover",
|
|
23418
|
+
"name": "--mdc-popover-width",
|
|
23419
|
+
"inheritedFrom": {
|
|
23420
|
+
"name": "Popover",
|
|
23421
|
+
"module": "src/components/popover/popover.component.ts"
|
|
23422
|
+
}
|
|
23407
23423
|
}
|
|
23408
23424
|
]
|
|
23409
23425
|
}
|
|
@@ -27024,6 +27040,10 @@
|
|
|
27024
27040
|
{
|
|
27025
27041
|
"description": "max height of the popover",
|
|
27026
27042
|
"name": "--mdc-popover-max-height"
|
|
27043
|
+
},
|
|
27044
|
+
{
|
|
27045
|
+
"description": "width of the popover",
|
|
27046
|
+
"name": "--mdc-popover-width"
|
|
27027
27047
|
}
|
|
27028
27048
|
],
|
|
27029
27049
|
"slots": [
|
|
@@ -28502,7 +28522,7 @@
|
|
|
28502
28522
|
"module": "/src/models"
|
|
28503
28523
|
},
|
|
28504
28524
|
"tagName": "mdc-popover",
|
|
28505
|
-
"jsDoc": "/**\n * Popover component is a lightweight floating UI element that displays additional content when triggered.\n * It can be used for tooltips, dropdowns, or contextual menus.\n * The popover automatically positions itself based on available space and\n * supports dynamic height adjustments with scrollable content when needed。\n *\n * Note:\n * - A component (button) can trigger more than one popover, but only one of them should change the\n * aria-expanded and aria-haspopup, the rest of the popovers must have `disable-aria-expanded` attribute.\n *\n * @dependency mdc-button\n *\n * @tagname mdc-popover\n *\n *\n * @event shown - (React: onShown) This event is dispatched when the popover is shown\n * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden\n * @event created - (React: onCreated) This event is dispatched when the popover is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the popover is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border\n * @cssproperty --mdc-popover-arrow-border - border of the arrow\n * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover\n * @cssproperty --mdc-popover-border-color - border color of the popover\n * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover\n * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover\n * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover\n * @cssproperty --mdc-popover-elevation-3 - elevation of the popover\n * @cssproperty --mdc-popover-max-width - max width of the popover\n * @cssproperty --mdc-popover-max-height - max height of the popover\n *\n * @slot - Default slot for the popover content\n *\n */",
|
|
28525
|
+
"jsDoc": "/**\n * Popover component is a lightweight floating UI element that displays additional content when triggered.\n * It can be used for tooltips, dropdowns, or contextual menus.\n * The popover automatically positions itself based on available space and\n * supports dynamic height adjustments with scrollable content when needed。\n *\n * Note:\n * - A component (button) can trigger more than one popover, but only one of them should change the\n * aria-expanded and aria-haspopup, the rest of the popovers must have `disable-aria-expanded` attribute.\n *\n * @dependency mdc-button\n *\n * @tagname mdc-popover\n *\n *\n * @event shown - (React: onShown) This event is dispatched when the popover is shown\n * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden\n * @event created - (React: onCreated) This event is dispatched when the popover is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the popover is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border\n * @cssproperty --mdc-popover-arrow-border - border of the arrow\n * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover\n * @cssproperty --mdc-popover-border-color - border color of the popover\n * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover\n * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover\n * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover\n * @cssproperty --mdc-popover-elevation-3 - elevation of the popover\n * @cssproperty --mdc-popover-max-width - max width of the popover\n * @cssproperty --mdc-popover-max-height - max height of the popover\n * @cssproperty --mdc-popover-width - width of the popover\n *\n * @slot - Default slot for the popover content\n *\n */",
|
|
28506
28526
|
"customElement": true
|
|
28507
28527
|
}
|
|
28508
28528
|
],
|
|
@@ -38640,6 +38660,14 @@
|
|
|
38640
38660
|
"name": "Popover",
|
|
38641
38661
|
"module": "src/components/popover/popover.component.ts"
|
|
38642
38662
|
}
|
|
38663
|
+
},
|
|
38664
|
+
{
|
|
38665
|
+
"description": "width of the popover",
|
|
38666
|
+
"name": "--mdc-popover-width",
|
|
38667
|
+
"inheritedFrom": {
|
|
38668
|
+
"name": "Popover",
|
|
38669
|
+
"module": "src/components/popover/popover.component.ts"
|
|
38670
|
+
}
|
|
38643
38671
|
}
|
|
38644
38672
|
],
|
|
38645
38673
|
"slots": [
|
|
@@ -40654,6 +40682,14 @@
|
|
|
40654
40682
|
"name": "Popover",
|
|
40655
40683
|
"module": "src/components/popover/popover.component.ts"
|
|
40656
40684
|
}
|
|
40685
|
+
},
|
|
40686
|
+
{
|
|
40687
|
+
"description": "width of the popover",
|
|
40688
|
+
"name": "--mdc-popover-width",
|
|
40689
|
+
"inheritedFrom": {
|
|
40690
|
+
"name": "Popover",
|
|
40691
|
+
"module": "src/components/popover/popover.component.ts"
|
|
40692
|
+
}
|
|
40657
40693
|
}
|
|
40658
40694
|
],
|
|
40659
40695
|
"members": [
|