@momentum-design/components 0.112.5 → 0.112.6
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 +163 -208
- package/dist/browser/index.js.map +3 -3
- package/dist/components/buttonlink/buttonlink.component.d.ts +1 -1
- package/dist/components/buttonlink/buttonlink.component.js +6 -31
- package/dist/components/link/link.component.d.ts +1 -1
- package/dist/components/link/link.component.js +5 -29
- package/dist/components/linksimple/linksimple.component.d.ts +7 -2
- package/dist/components/linksimple/linksimple.component.js +11 -8
- package/dist/custom-elements.json +700 -696
- package/dist/react/index.d.ts +3 -3
- package/dist/react/index.js +3 -3
- 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,35 +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
|
|
806
|
+
]
|
|
807
807
|
}
|
|
808
808
|
],
|
|
809
809
|
"exports": [
|
|
@@ -811,8 +811,8 @@
|
|
|
811
811
|
"kind": "js",
|
|
812
812
|
"name": "default",
|
|
813
813
|
"declaration": {
|
|
814
|
-
"name": "
|
|
815
|
-
"module": "components/
|
|
814
|
+
"name": "Accordion",
|
|
815
|
+
"module": "components/accordion/accordion.component.js"
|
|
816
816
|
}
|
|
817
817
|
}
|
|
818
818
|
]
|
|
@@ -1827,272 +1827,6 @@
|
|
|
1827
1827
|
}
|
|
1828
1828
|
]
|
|
1829
1829
|
},
|
|
1830
|
-
{
|
|
1831
|
-
"kind": "javascript-module",
|
|
1832
|
-
"path": "components/avatar/avatar.component.js",
|
|
1833
|
-
"declarations": [
|
|
1834
|
-
{
|
|
1835
|
-
"kind": "class",
|
|
1836
|
-
"description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
|
|
1837
|
-
"name": "Avatar",
|
|
1838
|
-
"cssProperties": [
|
|
1839
|
-
{
|
|
1840
|
-
"description": "Allows customization of the default background color.",
|
|
1841
|
-
"name": "--mdc-avatar-default-background-color"
|
|
1842
|
-
},
|
|
1843
|
-
{
|
|
1844
|
-
"description": "Allows customization of the default foreground color.",
|
|
1845
|
-
"name": "--mdc-avatar-default-foreground-color"
|
|
1846
|
-
},
|
|
1847
|
-
{
|
|
1848
|
-
"description": "Allows customization of the loading indicator background color.",
|
|
1849
|
-
"name": "--mdc-avatar-loading-indicator-background-color"
|
|
1850
|
-
},
|
|
1851
|
-
{
|
|
1852
|
-
"description": "Allows customization of the loading indicator foreground color.",
|
|
1853
|
-
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
|
1854
|
-
},
|
|
1855
|
-
{
|
|
1856
|
-
"description": "Allows customization of the loading overlay background color.",
|
|
1857
|
-
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
1858
|
-
}
|
|
1859
|
-
],
|
|
1860
|
-
"cssParts": [
|
|
1861
|
-
{
|
|
1862
|
-
"description": "The main content of the avatar.",
|
|
1863
|
-
"name": "content"
|
|
1864
|
-
},
|
|
1865
|
-
{
|
|
1866
|
-
"description": "The photo of the avatar.",
|
|
1867
|
-
"name": "photo"
|
|
1868
|
-
},
|
|
1869
|
-
{
|
|
1870
|
-
"description": "The presence indicator of the avatar.",
|
|
1871
|
-
"name": "presence"
|
|
1872
|
-
},
|
|
1873
|
-
{
|
|
1874
|
-
"description": "The wrapper for the loading indicator.",
|
|
1875
|
-
"name": "loading-wrapper"
|
|
1876
|
-
},
|
|
1877
|
-
{
|
|
1878
|
-
"description": "The loading indicator of the avatar.",
|
|
1879
|
-
"name": "loader"
|
|
1880
|
-
}
|
|
1881
|
-
],
|
|
1882
|
-
"members": [
|
|
1883
|
-
{
|
|
1884
|
-
"kind": "field",
|
|
1885
|
-
"name": "src",
|
|
1886
|
-
"type": {
|
|
1887
|
-
"text": "string | undefined"
|
|
1888
|
-
},
|
|
1889
|
-
"description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
|
|
1890
|
-
"attribute": "src",
|
|
1891
|
-
"inheritedFrom": {
|
|
1892
|
-
"name": "AvatarComponentMixin",
|
|
1893
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
1894
|
-
}
|
|
1895
|
-
},
|
|
1896
|
-
{
|
|
1897
|
-
"kind": "field",
|
|
1898
|
-
"name": "initials",
|
|
1899
|
-
"type": {
|
|
1900
|
-
"text": "string | undefined"
|
|
1901
|
-
},
|
|
1902
|
-
"description": "The initials to be displayed for the avatar.",
|
|
1903
|
-
"attribute": "initials",
|
|
1904
|
-
"inheritedFrom": {
|
|
1905
|
-
"name": "AvatarComponentMixin",
|
|
1906
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
1907
|
-
}
|
|
1908
|
-
},
|
|
1909
|
-
{
|
|
1910
|
-
"kind": "field",
|
|
1911
|
-
"name": "presence",
|
|
1912
|
-
"type": {
|
|
1913
|
-
"text": "PresenceType | undefined"
|
|
1914
|
-
},
|
|
1915
|
-
"description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
|
|
1916
|
-
"attribute": "presence",
|
|
1917
|
-
"inheritedFrom": {
|
|
1918
|
-
"name": "AvatarComponentMixin",
|
|
1919
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
1920
|
-
}
|
|
1921
|
-
},
|
|
1922
|
-
{
|
|
1923
|
-
"kind": "field",
|
|
1924
|
-
"name": "size",
|
|
1925
|
-
"type": {
|
|
1926
|
-
"text": "AvatarSize"
|
|
1927
|
-
},
|
|
1928
|
-
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
1929
|
-
"default": "32",
|
|
1930
|
-
"attribute": "size",
|
|
1931
|
-
"reflects": true,
|
|
1932
|
-
"inheritedFrom": {
|
|
1933
|
-
"name": "AvatarComponentMixin",
|
|
1934
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
1935
|
-
}
|
|
1936
|
-
},
|
|
1937
|
-
{
|
|
1938
|
-
"kind": "field",
|
|
1939
|
-
"name": "counter",
|
|
1940
|
-
"type": {
|
|
1941
|
-
"text": "number | undefined"
|
|
1942
|
-
},
|
|
1943
|
-
"description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
|
|
1944
|
-
"attribute": "counter",
|
|
1945
|
-
"inheritedFrom": {
|
|
1946
|
-
"name": "AvatarComponentMixin",
|
|
1947
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
1948
|
-
}
|
|
1949
|
-
},
|
|
1950
|
-
{
|
|
1951
|
-
"kind": "field",
|
|
1952
|
-
"name": "isTyping",
|
|
1953
|
-
"type": {
|
|
1954
|
-
"text": "boolean"
|
|
1955
|
-
},
|
|
1956
|
-
"default": "false",
|
|
1957
|
-
"description": "Represents the typing indicator when the user is typing.",
|
|
1958
|
-
"attribute": "is-typing",
|
|
1959
|
-
"inheritedFrom": {
|
|
1960
|
-
"name": "AvatarComponentMixin",
|
|
1961
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
1962
|
-
}
|
|
1963
|
-
},
|
|
1964
|
-
{
|
|
1965
|
-
"kind": "field",
|
|
1966
|
-
"name": "iconName",
|
|
1967
|
-
"type": {
|
|
1968
|
-
"text": "IconNames | undefined"
|
|
1969
|
-
},
|
|
1970
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
1971
|
-
"attribute": "icon-name",
|
|
1972
|
-
"inheritedFrom": {
|
|
1973
|
-
"name": "IconNameMixin",
|
|
1974
|
-
"module": "utils/mixins/IconNameMixin.js"
|
|
1975
|
-
}
|
|
1976
|
-
}
|
|
1977
|
-
],
|
|
1978
|
-
"mixins": [
|
|
1979
|
-
{
|
|
1980
|
-
"name": "AvatarComponentMixin",
|
|
1981
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
1982
|
-
},
|
|
1983
|
-
{
|
|
1984
|
-
"name": "IconNameMixin",
|
|
1985
|
-
"module": "/src/utils/mixins/IconNameMixin"
|
|
1986
|
-
}
|
|
1987
|
-
],
|
|
1988
|
-
"superclass": {
|
|
1989
|
-
"name": "Component",
|
|
1990
|
-
"module": "/src/models"
|
|
1991
|
-
},
|
|
1992
|
-
"tagName": "mdc-avatar",
|
|
1993
|
-
"jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n * Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n * Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n * Allows customization of the loading overlay background color.\n *\n * @csspart content - The main content of the avatar.\n * @csspart photo - The photo of the avatar.\n * @csspart presence - The presence indicator of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator.\n * @csspart loader - The loading indicator of the avatar.\n */",
|
|
1994
|
-
"customElement": true,
|
|
1995
|
-
"attributes": [
|
|
1996
|
-
{
|
|
1997
|
-
"name": "src",
|
|
1998
|
-
"type": {
|
|
1999
|
-
"text": "string | undefined"
|
|
2000
|
-
},
|
|
2001
|
-
"description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
|
|
2002
|
-
"fieldName": "src",
|
|
2003
|
-
"inheritedFrom": {
|
|
2004
|
-
"name": "AvatarComponentMixin",
|
|
2005
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
2006
|
-
}
|
|
2007
|
-
},
|
|
2008
|
-
{
|
|
2009
|
-
"name": "initials",
|
|
2010
|
-
"type": {
|
|
2011
|
-
"text": "string | undefined"
|
|
2012
|
-
},
|
|
2013
|
-
"description": "The initials to be displayed for the avatar.",
|
|
2014
|
-
"fieldName": "initials",
|
|
2015
|
-
"inheritedFrom": {
|
|
2016
|
-
"name": "AvatarComponentMixin",
|
|
2017
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
2018
|
-
}
|
|
2019
|
-
},
|
|
2020
|
-
{
|
|
2021
|
-
"name": "presence",
|
|
2022
|
-
"type": {
|
|
2023
|
-
"text": "PresenceType | undefined"
|
|
2024
|
-
},
|
|
2025
|
-
"description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
|
|
2026
|
-
"fieldName": "presence",
|
|
2027
|
-
"inheritedFrom": {
|
|
2028
|
-
"name": "AvatarComponentMixin",
|
|
2029
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
2030
|
-
}
|
|
2031
|
-
},
|
|
2032
|
-
{
|
|
2033
|
-
"name": "size",
|
|
2034
|
-
"type": {
|
|
2035
|
-
"text": "AvatarSize"
|
|
2036
|
-
},
|
|
2037
|
-
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
2038
|
-
"default": "32",
|
|
2039
|
-
"fieldName": "size",
|
|
2040
|
-
"inheritedFrom": {
|
|
2041
|
-
"name": "AvatarComponentMixin",
|
|
2042
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
2043
|
-
}
|
|
2044
|
-
},
|
|
2045
|
-
{
|
|
2046
|
-
"name": "counter",
|
|
2047
|
-
"type": {
|
|
2048
|
-
"text": "number | undefined"
|
|
2049
|
-
},
|
|
2050
|
-
"description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
|
|
2051
|
-
"fieldName": "counter",
|
|
2052
|
-
"inheritedFrom": {
|
|
2053
|
-
"name": "AvatarComponentMixin",
|
|
2054
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
2055
|
-
}
|
|
2056
|
-
},
|
|
2057
|
-
{
|
|
2058
|
-
"name": "is-typing",
|
|
2059
|
-
"type": {
|
|
2060
|
-
"text": "boolean"
|
|
2061
|
-
},
|
|
2062
|
-
"default": "false",
|
|
2063
|
-
"description": "Represents the typing indicator when the user is typing.",
|
|
2064
|
-
"fieldName": "isTyping",
|
|
2065
|
-
"inheritedFrom": {
|
|
2066
|
-
"name": "AvatarComponentMixin",
|
|
2067
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
2068
|
-
}
|
|
2069
|
-
},
|
|
2070
|
-
{
|
|
2071
|
-
"name": "icon-name",
|
|
2072
|
-
"type": {
|
|
2073
|
-
"text": "IconNames | undefined"
|
|
2074
|
-
},
|
|
2075
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
2076
|
-
"fieldName": "iconName",
|
|
2077
|
-
"inheritedFrom": {
|
|
2078
|
-
"name": "IconNameMixin",
|
|
2079
|
-
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
2080
|
-
}
|
|
2081
|
-
}
|
|
2082
|
-
]
|
|
2083
|
-
}
|
|
2084
|
-
],
|
|
2085
|
-
"exports": [
|
|
2086
|
-
{
|
|
2087
|
-
"kind": "js",
|
|
2088
|
-
"name": "default",
|
|
2089
|
-
"declaration": {
|
|
2090
|
-
"name": "Avatar",
|
|
2091
|
-
"module": "components/avatar/avatar.component.js"
|
|
2092
|
-
}
|
|
2093
|
-
}
|
|
2094
|
-
]
|
|
2095
|
-
},
|
|
2096
1830
|
{
|
|
2097
1831
|
"kind": "javascript-module",
|
|
2098
1832
|
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
@@ -3344,6 +3078,272 @@
|
|
|
3344
3078
|
}
|
|
3345
3079
|
]
|
|
3346
3080
|
},
|
|
3081
|
+
{
|
|
3082
|
+
"kind": "javascript-module",
|
|
3083
|
+
"path": "components/avatar/avatar.component.js",
|
|
3084
|
+
"declarations": [
|
|
3085
|
+
{
|
|
3086
|
+
"kind": "class",
|
|
3087
|
+
"description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
|
|
3088
|
+
"name": "Avatar",
|
|
3089
|
+
"cssProperties": [
|
|
3090
|
+
{
|
|
3091
|
+
"description": "Allows customization of the default background color.",
|
|
3092
|
+
"name": "--mdc-avatar-default-background-color"
|
|
3093
|
+
},
|
|
3094
|
+
{
|
|
3095
|
+
"description": "Allows customization of the default foreground color.",
|
|
3096
|
+
"name": "--mdc-avatar-default-foreground-color"
|
|
3097
|
+
},
|
|
3098
|
+
{
|
|
3099
|
+
"description": "Allows customization of the loading indicator background color.",
|
|
3100
|
+
"name": "--mdc-avatar-loading-indicator-background-color"
|
|
3101
|
+
},
|
|
3102
|
+
{
|
|
3103
|
+
"description": "Allows customization of the loading indicator foreground color.",
|
|
3104
|
+
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
|
3105
|
+
},
|
|
3106
|
+
{
|
|
3107
|
+
"description": "Allows customization of the loading overlay background color.",
|
|
3108
|
+
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
3109
|
+
}
|
|
3110
|
+
],
|
|
3111
|
+
"cssParts": [
|
|
3112
|
+
{
|
|
3113
|
+
"description": "The main content of the avatar.",
|
|
3114
|
+
"name": "content"
|
|
3115
|
+
},
|
|
3116
|
+
{
|
|
3117
|
+
"description": "The photo of the avatar.",
|
|
3118
|
+
"name": "photo"
|
|
3119
|
+
},
|
|
3120
|
+
{
|
|
3121
|
+
"description": "The presence indicator of the avatar.",
|
|
3122
|
+
"name": "presence"
|
|
3123
|
+
},
|
|
3124
|
+
{
|
|
3125
|
+
"description": "The wrapper for the loading indicator.",
|
|
3126
|
+
"name": "loading-wrapper"
|
|
3127
|
+
},
|
|
3128
|
+
{
|
|
3129
|
+
"description": "The loading indicator of the avatar.",
|
|
3130
|
+
"name": "loader"
|
|
3131
|
+
}
|
|
3132
|
+
],
|
|
3133
|
+
"members": [
|
|
3134
|
+
{
|
|
3135
|
+
"kind": "field",
|
|
3136
|
+
"name": "src",
|
|
3137
|
+
"type": {
|
|
3138
|
+
"text": "string | undefined"
|
|
3139
|
+
},
|
|
3140
|
+
"description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
|
|
3141
|
+
"attribute": "src",
|
|
3142
|
+
"inheritedFrom": {
|
|
3143
|
+
"name": "AvatarComponentMixin",
|
|
3144
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
3145
|
+
}
|
|
3146
|
+
},
|
|
3147
|
+
{
|
|
3148
|
+
"kind": "field",
|
|
3149
|
+
"name": "initials",
|
|
3150
|
+
"type": {
|
|
3151
|
+
"text": "string | undefined"
|
|
3152
|
+
},
|
|
3153
|
+
"description": "The initials to be displayed for the avatar.",
|
|
3154
|
+
"attribute": "initials",
|
|
3155
|
+
"inheritedFrom": {
|
|
3156
|
+
"name": "AvatarComponentMixin",
|
|
3157
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
3158
|
+
}
|
|
3159
|
+
},
|
|
3160
|
+
{
|
|
3161
|
+
"kind": "field",
|
|
3162
|
+
"name": "presence",
|
|
3163
|
+
"type": {
|
|
3164
|
+
"text": "PresenceType | undefined"
|
|
3165
|
+
},
|
|
3166
|
+
"description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
|
|
3167
|
+
"attribute": "presence",
|
|
3168
|
+
"inheritedFrom": {
|
|
3169
|
+
"name": "AvatarComponentMixin",
|
|
3170
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
3171
|
+
}
|
|
3172
|
+
},
|
|
3173
|
+
{
|
|
3174
|
+
"kind": "field",
|
|
3175
|
+
"name": "size",
|
|
3176
|
+
"type": {
|
|
3177
|
+
"text": "AvatarSize"
|
|
3178
|
+
},
|
|
3179
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
3180
|
+
"default": "32",
|
|
3181
|
+
"attribute": "size",
|
|
3182
|
+
"reflects": true,
|
|
3183
|
+
"inheritedFrom": {
|
|
3184
|
+
"name": "AvatarComponentMixin",
|
|
3185
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
3186
|
+
}
|
|
3187
|
+
},
|
|
3188
|
+
{
|
|
3189
|
+
"kind": "field",
|
|
3190
|
+
"name": "counter",
|
|
3191
|
+
"type": {
|
|
3192
|
+
"text": "number | undefined"
|
|
3193
|
+
},
|
|
3194
|
+
"description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
|
|
3195
|
+
"attribute": "counter",
|
|
3196
|
+
"inheritedFrom": {
|
|
3197
|
+
"name": "AvatarComponentMixin",
|
|
3198
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
3199
|
+
}
|
|
3200
|
+
},
|
|
3201
|
+
{
|
|
3202
|
+
"kind": "field",
|
|
3203
|
+
"name": "isTyping",
|
|
3204
|
+
"type": {
|
|
3205
|
+
"text": "boolean"
|
|
3206
|
+
},
|
|
3207
|
+
"default": "false",
|
|
3208
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
3209
|
+
"attribute": "is-typing",
|
|
3210
|
+
"inheritedFrom": {
|
|
3211
|
+
"name": "AvatarComponentMixin",
|
|
3212
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
3213
|
+
}
|
|
3214
|
+
},
|
|
3215
|
+
{
|
|
3216
|
+
"kind": "field",
|
|
3217
|
+
"name": "iconName",
|
|
3218
|
+
"type": {
|
|
3219
|
+
"text": "IconNames | undefined"
|
|
3220
|
+
},
|
|
3221
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
3222
|
+
"attribute": "icon-name",
|
|
3223
|
+
"inheritedFrom": {
|
|
3224
|
+
"name": "IconNameMixin",
|
|
3225
|
+
"module": "utils/mixins/IconNameMixin.js"
|
|
3226
|
+
}
|
|
3227
|
+
}
|
|
3228
|
+
],
|
|
3229
|
+
"mixins": [
|
|
3230
|
+
{
|
|
3231
|
+
"name": "AvatarComponentMixin",
|
|
3232
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
3233
|
+
},
|
|
3234
|
+
{
|
|
3235
|
+
"name": "IconNameMixin",
|
|
3236
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
|
3237
|
+
}
|
|
3238
|
+
],
|
|
3239
|
+
"superclass": {
|
|
3240
|
+
"name": "Component",
|
|
3241
|
+
"module": "/src/models"
|
|
3242
|
+
},
|
|
3243
|
+
"tagName": "mdc-avatar",
|
|
3244
|
+
"jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n * Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n * Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n * Allows customization of the loading overlay background color.\n *\n * @csspart content - The main content of the avatar.\n * @csspart photo - The photo of the avatar.\n * @csspart presence - The presence indicator of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator.\n * @csspart loader - The loading indicator of the avatar.\n */",
|
|
3245
|
+
"customElement": true,
|
|
3246
|
+
"attributes": [
|
|
3247
|
+
{
|
|
3248
|
+
"name": "src",
|
|
3249
|
+
"type": {
|
|
3250
|
+
"text": "string | undefined"
|
|
3251
|
+
},
|
|
3252
|
+
"description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
|
|
3253
|
+
"fieldName": "src",
|
|
3254
|
+
"inheritedFrom": {
|
|
3255
|
+
"name": "AvatarComponentMixin",
|
|
3256
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
3257
|
+
}
|
|
3258
|
+
},
|
|
3259
|
+
{
|
|
3260
|
+
"name": "initials",
|
|
3261
|
+
"type": {
|
|
3262
|
+
"text": "string | undefined"
|
|
3263
|
+
},
|
|
3264
|
+
"description": "The initials to be displayed for the avatar.",
|
|
3265
|
+
"fieldName": "initials",
|
|
3266
|
+
"inheritedFrom": {
|
|
3267
|
+
"name": "AvatarComponentMixin",
|
|
3268
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
3269
|
+
}
|
|
3270
|
+
},
|
|
3271
|
+
{
|
|
3272
|
+
"name": "presence",
|
|
3273
|
+
"type": {
|
|
3274
|
+
"text": "PresenceType | undefined"
|
|
3275
|
+
},
|
|
3276
|
+
"description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
|
|
3277
|
+
"fieldName": "presence",
|
|
3278
|
+
"inheritedFrom": {
|
|
3279
|
+
"name": "AvatarComponentMixin",
|
|
3280
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
3281
|
+
}
|
|
3282
|
+
},
|
|
3283
|
+
{
|
|
3284
|
+
"name": "size",
|
|
3285
|
+
"type": {
|
|
3286
|
+
"text": "AvatarSize"
|
|
3287
|
+
},
|
|
3288
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
3289
|
+
"default": "32",
|
|
3290
|
+
"fieldName": "size",
|
|
3291
|
+
"inheritedFrom": {
|
|
3292
|
+
"name": "AvatarComponentMixin",
|
|
3293
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
3294
|
+
}
|
|
3295
|
+
},
|
|
3296
|
+
{
|
|
3297
|
+
"name": "counter",
|
|
3298
|
+
"type": {
|
|
3299
|
+
"text": "number | undefined"
|
|
3300
|
+
},
|
|
3301
|
+
"description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
|
|
3302
|
+
"fieldName": "counter",
|
|
3303
|
+
"inheritedFrom": {
|
|
3304
|
+
"name": "AvatarComponentMixin",
|
|
3305
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
3306
|
+
}
|
|
3307
|
+
},
|
|
3308
|
+
{
|
|
3309
|
+
"name": "is-typing",
|
|
3310
|
+
"type": {
|
|
3311
|
+
"text": "boolean"
|
|
3312
|
+
},
|
|
3313
|
+
"default": "false",
|
|
3314
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
3315
|
+
"fieldName": "isTyping",
|
|
3316
|
+
"inheritedFrom": {
|
|
3317
|
+
"name": "AvatarComponentMixin",
|
|
3318
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
3319
|
+
}
|
|
3320
|
+
},
|
|
3321
|
+
{
|
|
3322
|
+
"name": "icon-name",
|
|
3323
|
+
"type": {
|
|
3324
|
+
"text": "IconNames | undefined"
|
|
3325
|
+
},
|
|
3326
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
3327
|
+
"fieldName": "iconName",
|
|
3328
|
+
"inheritedFrom": {
|
|
3329
|
+
"name": "IconNameMixin",
|
|
3330
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
3331
|
+
}
|
|
3332
|
+
}
|
|
3333
|
+
]
|
|
3334
|
+
}
|
|
3335
|
+
],
|
|
3336
|
+
"exports": [
|
|
3337
|
+
{
|
|
3338
|
+
"kind": "js",
|
|
3339
|
+
"name": "default",
|
|
3340
|
+
"declaration": {
|
|
3341
|
+
"name": "Avatar",
|
|
3342
|
+
"module": "components/avatar/avatar.component.js"
|
|
3343
|
+
}
|
|
3344
|
+
}
|
|
3345
|
+
]
|
|
3346
|
+
},
|
|
3347
3347
|
{
|
|
3348
3348
|
"kind": "javascript-module",
|
|
3349
3349
|
"path": "components/bullet/bullet.component.js",
|
|
@@ -4392,6 +4392,11 @@
|
|
|
4392
4392
|
],
|
|
4393
4393
|
"description": "Sets the soft-disabled attribute for the buttonlink.\nWhen soft-disabled, the buttonlink looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute."
|
|
4394
4394
|
},
|
|
4395
|
+
{
|
|
4396
|
+
"kind": "method",
|
|
4397
|
+
"name": "renderAnchorContent",
|
|
4398
|
+
"privacy": "protected"
|
|
4399
|
+
},
|
|
4395
4400
|
{
|
|
4396
4401
|
"kind": "field",
|
|
4397
4402
|
"name": "prefixIcon",
|
|
@@ -4585,9 +4590,8 @@
|
|
|
4585
4590
|
"kind": "field",
|
|
4586
4591
|
"name": "href",
|
|
4587
4592
|
"type": {
|
|
4588
|
-
"text": "string"
|
|
4593
|
+
"text": "string | undefined"
|
|
4589
4594
|
},
|
|
4590
|
-
"default": "'#'",
|
|
4591
4595
|
"description": "Href for navigation. The URL that the hyperlink points to",
|
|
4592
4596
|
"attribute": "href",
|
|
4593
4597
|
"reflects": true,
|
|
@@ -4899,9 +4903,8 @@
|
|
|
4899
4903
|
{
|
|
4900
4904
|
"name": "href",
|
|
4901
4905
|
"type": {
|
|
4902
|
-
"text": "string"
|
|
4906
|
+
"text": "string | undefined"
|
|
4903
4907
|
},
|
|
4904
|
-
"default": "'#'",
|
|
4905
4908
|
"description": "Href for navigation. The URL that the hyperlink points to",
|
|
4906
4909
|
"fieldName": "href",
|
|
4907
4910
|
"inheritedFrom": {
|
|
@@ -5006,7 +5009,7 @@
|
|
|
5006
5009
|
"module": "/src/components/linksimple/linksimple.component"
|
|
5007
5010
|
},
|
|
5008
5011
|
"tagName": "mdc-buttonlink",
|
|
5009
|
-
"jsDoc": "/**\n * `mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\n * features of `mdc-button`. This includes support for variants, sizing, and optional\n * prefix and postfix icons via slots.\n *\n * ### Features:\n * - Behaves like an link while visually resembling a button.\n * - Supports slots for `prefix-icon` and `postfix-icon`.\n * - Customizable size, color, and variant through attributes.\n * - Inherits accessibility and keyboard interaction support from `mdc-linksimple`.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-buttonlink\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n
|
|
5012
|
+
"jsDoc": "/**\n * `mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\n * features of `mdc-button`. This includes support for variants, sizing, and optional\n * prefix and postfix icons via slots.\n *\n * ### Features:\n * - Behaves like an link while visually resembling a button.\n * - Supports slots for `prefix-icon` and `postfix-icon`.\n * - Customizable size, color, and variant through attributes.\n * - Inherits accessibility and keyboard interaction support from `mdc-linksimple`.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-buttonlink\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n * @csspart anchor - The anchor element that wraps the buttonlink content.\n * @csspart prefix-icon - The prefix icon element.\n * @csspart button-text - The slot containing the buttonlink text.\n * @csspart postfix-icon - The postfix icon element.\n *\n */",
|
|
5010
5013
|
"customElement": true,
|
|
5011
5014
|
"cssProperties": [
|
|
5012
5015
|
{
|
|
@@ -15926,6 +15929,11 @@
|
|
|
15926
15929
|
},
|
|
15927
15930
|
"description": "Method to get the size of the trailing icon based on the link size."
|
|
15928
15931
|
},
|
|
15932
|
+
{
|
|
15933
|
+
"kind": "method",
|
|
15934
|
+
"name": "renderAnchorContent",
|
|
15935
|
+
"privacy": "protected"
|
|
15936
|
+
},
|
|
15929
15937
|
{
|
|
15930
15938
|
"kind": "field",
|
|
15931
15939
|
"name": "iconName",
|
|
@@ -16003,9 +16011,8 @@
|
|
|
16003
16011
|
"kind": "field",
|
|
16004
16012
|
"name": "href",
|
|
16005
16013
|
"type": {
|
|
16006
|
-
"text": "string"
|
|
16014
|
+
"text": "string | undefined"
|
|
16007
16015
|
},
|
|
16008
|
-
"default": "'#'",
|
|
16009
16016
|
"description": "Href for navigation. The URL that the hyperlink points to",
|
|
16010
16017
|
"attribute": "href",
|
|
16011
16018
|
"reflects": true,
|
|
@@ -16270,9 +16277,8 @@
|
|
|
16270
16277
|
{
|
|
16271
16278
|
"name": "href",
|
|
16272
16279
|
"type": {
|
|
16273
|
-
"text": "string"
|
|
16280
|
+
"text": "string | undefined"
|
|
16274
16281
|
},
|
|
16275
|
-
"default": "'#'",
|
|
16276
16282
|
"description": "Href for navigation. The URL that the hyperlink points to",
|
|
16277
16283
|
"fieldName": "href",
|
|
16278
16284
|
"inheritedFrom": {
|
|
@@ -16377,7 +16383,7 @@
|
|
|
16377
16383
|
"module": "/src/components/linksimple/linksimple.component"
|
|
16378
16384
|
},
|
|
16379
16385
|
"tagName": "mdc-link",
|
|
16380
|
-
"jsDoc": "/**\n * `mdc-link` component can be used to navigate to a different page\n * within the application or to an external site. It can be used to link to\n * emails or phone numbers.\n *\n * The `children` of the link component is expected to be the text content.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-link\n *\n * @event click - (React: onClick) Fired when the user activates the Link using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the Link has focus.\n * @event focus - (React: onFocus) Fired when the Link receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the Link loses keyboard or mouse focus.\n
|
|
16386
|
+
"jsDoc": "/**\n * `mdc-link` component can be used to navigate to a different page\n * within the application or to an external site. It can be used to link to\n * emails or phone numbers.\n *\n * The `children` of the link component is expected to be the text content.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-link\n *\n * @event click - (React: onClick) Fired when the user activates the Link using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the Link has focus.\n * @event focus - (React: onFocus) Fired when the Link receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the Link loses keyboard or mouse focus.\n *\n * @csspart anchor - The anchor element that wraps the link content.\n * @csspart icon - The icon element.\n */",
|
|
16381
16387
|
"customElement": true,
|
|
16382
16388
|
"cssProperties": [
|
|
16383
16389
|
{
|
|
@@ -17195,9 +17201,8 @@
|
|
|
17195
17201
|
"kind": "field",
|
|
17196
17202
|
"name": "href",
|
|
17197
17203
|
"type": {
|
|
17198
|
-
"text": "string"
|
|
17204
|
+
"text": "string | undefined"
|
|
17199
17205
|
},
|
|
17200
|
-
"default": "'#'",
|
|
17201
17206
|
"description": "Href for navigation. The URL that the hyperlink points to",
|
|
17202
17207
|
"attribute": "href",
|
|
17203
17208
|
"reflects": true
|
|
@@ -17381,9 +17386,8 @@
|
|
|
17381
17386
|
{
|
|
17382
17387
|
"name": "href",
|
|
17383
17388
|
"type": {
|
|
17384
|
-
"text": "string"
|
|
17389
|
+
"text": "string | undefined"
|
|
17385
17390
|
},
|
|
17386
|
-
"default": "'#'",
|
|
17387
17391
|
"description": "Href for navigation. The URL that the hyperlink points to",
|
|
17388
17392
|
"fieldName": "href"
|
|
17389
17393
|
},
|
|
@@ -17486,7 +17490,7 @@
|
|
|
17486
17490
|
"module": "/src/models"
|
|
17487
17491
|
},
|
|
17488
17492
|
"tagName": "mdc-linksimple",
|
|
17489
|
-
"jsDoc": "/**\n * `mdc-linksimple` is a lightweight link component that can be used to navigate\n * within the application or to an external URL. It does not have any predefined default size.\n *\n * The `children` of the `mdc-linksimple` component can be customized to suit\n * different use cases, including text, icons, or other inline content. For the child to be an icon,\n * the `mdc-icon` component should be used to render.\n *\n * @tagname mdc-linksimple\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n * @cssproperty --mdc-link-border-radius - Border radius of the link.\n * @cssproperty --mdc-link-color-active - Color of the link’s child content in the active state.\n * @cssproperty --mdc-link-color-disabled - Color of the link’s child content in the disabled state.\n * @cssproperty --mdc-link-color-hover - Color of the link’s child content in the hover state.\n * @cssproperty --mdc-link-color-normal - Color of the link’s child content in the normal state.\n * @cssproperty --mdc-link-inverted-color-active - Color of the inverted link’s child content in the active state.\n * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted link’s child content in the disabled state.\n * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted link’s child content in the hover state.\n * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted link’s child content in the normal state.\n
|
|
17493
|
+
"jsDoc": "/**\n * `mdc-linksimple` is a lightweight link component that can be used to navigate\n * within the application or to an external URL. It does not have any predefined default size.\n *\n * The `children` of the `mdc-linksimple` component can be customized to suit\n * different use cases, including text, icons, or other inline content. For the child to be an icon,\n * the `mdc-icon` component should be used to render.\n *\n * @tagname mdc-linksimple\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n * @cssproperty --mdc-link-border-radius - Border radius of the link.\n * @cssproperty --mdc-link-color-active - Color of the link’s child content in the active state.\n * @cssproperty --mdc-link-color-disabled - Color of the link’s child content in the disabled state.\n * @cssproperty --mdc-link-color-hover - Color of the link’s child content in the hover state.\n * @cssproperty --mdc-link-color-normal - Color of the link’s child content in the normal state.\n * @cssproperty --mdc-link-inverted-color-active - Color of the inverted link’s child content in the active state.\n * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted link’s child content in the disabled state.\n * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted link’s child content in the hover state.\n * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted link’s child content in the normal state.\n *\n * @csspart anchor - The anchor element that wraps the linksimple content.\n */",
|
|
17490
17494
|
"customElement": true
|
|
17491
17495
|
}
|
|
17492
17496
|
],
|
|
@@ -36990,6 +36994,100 @@
|
|
|
36990
36994
|
}
|
|
36991
36995
|
]
|
|
36992
36996
|
},
|
|
36997
|
+
{
|
|
36998
|
+
"kind": "javascript-module",
|
|
36999
|
+
"path": "components/tablist/tablist.component.js",
|
|
37000
|
+
"declarations": [
|
|
37001
|
+
{
|
|
37002
|
+
"kind": "class",
|
|
37003
|
+
"description": "Tab list organizes tabs into a container.\n\nChildren of the tab list are `mdc-tab` elements, sent to the default slot.\n\nThe tabs can be navigated using the left/right arrow keys, and selected by clicking,\n or pressing the Enter and Space keys.\n\n**Implicit accessibility rules**\n\n- The element that serves as the container for the set of tabs has role `tablist`.\n- Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n- The active tab element has the state `aria-selected` set to `true`\n and all other tab elements have it set to `false`.\n\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n- The `tablist` element needs to have a label provided by `data-aria-label`.\n- Each element with role `tab` has the property `aria-controls`\n that should refer to its associated `tabpanel` element.\n- Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n- If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.",
|
|
37004
|
+
"name": "TabList",
|
|
37005
|
+
"cssProperties": [
|
|
37006
|
+
{
|
|
37007
|
+
"description": "Gap between tabs",
|
|
37008
|
+
"name": "--mdc-tablist-gap"
|
|
37009
|
+
},
|
|
37010
|
+
{
|
|
37011
|
+
"description": "Width of the tablist",
|
|
37012
|
+
"name": "--mdc-tablist-width"
|
|
37013
|
+
},
|
|
37014
|
+
{
|
|
37015
|
+
"description": "Margin value for the arrow button",
|
|
37016
|
+
"name": "--mdc-tablist-arrow-button-margin"
|
|
37017
|
+
}
|
|
37018
|
+
],
|
|
37019
|
+
"slots": [
|
|
37020
|
+
{
|
|
37021
|
+
"description": "slot for mdc-tab elements.",
|
|
37022
|
+
"name": "Default"
|
|
37023
|
+
}
|
|
37024
|
+
],
|
|
37025
|
+
"members": [
|
|
37026
|
+
{
|
|
37027
|
+
"kind": "field",
|
|
37028
|
+
"name": "activeTabId",
|
|
37029
|
+
"type": {
|
|
37030
|
+
"text": "string | undefined"
|
|
37031
|
+
},
|
|
37032
|
+
"description": "ID of the active tab, defaults to the first tab if not provided",
|
|
37033
|
+
"attribute": "active-tab-id",
|
|
37034
|
+
"reflects": true
|
|
37035
|
+
},
|
|
37036
|
+
{
|
|
37037
|
+
"kind": "field",
|
|
37038
|
+
"name": "dataAriaLabel",
|
|
37039
|
+
"type": {
|
|
37040
|
+
"text": "string | undefined"
|
|
37041
|
+
},
|
|
37042
|
+
"description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
|
|
37043
|
+
"attribute": "data-aria-label"
|
|
37044
|
+
}
|
|
37045
|
+
],
|
|
37046
|
+
"events": [
|
|
37047
|
+
{
|
|
37048
|
+
"description": "(React: onChange) This event is dispatched when the tab is selected. Event that fires when user changes the active tab. The function sent as the argument will receive the fired event and the new tab id can be fetched from event.detail.tabId. `(event: CustomEvent) => handleTabChange(event.detail.tabId);`",
|
|
37049
|
+
"name": "change",
|
|
37050
|
+
"reactName": "onChange"
|
|
37051
|
+
}
|
|
37052
|
+
],
|
|
37053
|
+
"attributes": [
|
|
37054
|
+
{
|
|
37055
|
+
"name": "active-tab-id",
|
|
37056
|
+
"type": {
|
|
37057
|
+
"text": "string | undefined"
|
|
37058
|
+
},
|
|
37059
|
+
"description": "ID of the active tab, defaults to the first tab if not provided",
|
|
37060
|
+
"fieldName": "activeTabId"
|
|
37061
|
+
},
|
|
37062
|
+
{
|
|
37063
|
+
"name": "data-aria-label",
|
|
37064
|
+
"type": {
|
|
37065
|
+
"text": "string | undefined"
|
|
37066
|
+
},
|
|
37067
|
+
"description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
|
|
37068
|
+
"fieldName": "dataAriaLabel"
|
|
37069
|
+
}
|
|
37070
|
+
],
|
|
37071
|
+
"superclass": {
|
|
37072
|
+
"name": "Component",
|
|
37073
|
+
"module": "/src/models"
|
|
37074
|
+
},
|
|
37075
|
+
"tagName": "mdc-tablist",
|
|
37076
|
+
"jsDoc": "/**\n * Tab list organizes tabs into a container.\n *\n * Children of the tab list are `mdc-tab` elements, sent to the default slot.\n *\n * The tabs can be navigated using the left/right arrow keys, and selected by clicking,\n * or pressing the Enter and Space keys.\n *\n * **Implicit accessibility rules**\n *\n * - The element that serves as the container for the set of tabs has role `tablist`.\n * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n * - The active tab element has the state `aria-selected` set to `true`\n * and all other tab elements have it set to `false`.\n *\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n * - The `tablist` element needs to have a label provided by `data-aria-label`.\n * - Each element with role `tab` has the property `aria-controls`\n * that should refer to its associated `tabpanel` element.\n * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n * - If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.\n *\n * @tagname mdc-tablist\n *\n * @dependency mdc-tab\n * @dependency mdc-button\n *\n * @event change - (React: onChange) This event is dispatched when the tab is selected.\n * Event that fires when user changes the active tab.\n * The function sent as the argument will receive the fired event\n * and the new tab id can be fetched from event.detail.tabId.\n *\n * `(event: CustomEvent) => handleTabChange(event.detail.tabId);`\n *\n * @slot Default slot for mdc-tab elements.\n *\n * @cssproperty --mdc-tablist-gap - Gap between tabs\n * @cssproperty --mdc-tablist-width - Width of the tablist\n * @cssproperty --mdc-tablist-arrow-button-margin - Margin value for the arrow button\n */",
|
|
37077
|
+
"customElement": true
|
|
37078
|
+
}
|
|
37079
|
+
],
|
|
37080
|
+
"exports": [
|
|
37081
|
+
{
|
|
37082
|
+
"kind": "js",
|
|
37083
|
+
"name": "default",
|
|
37084
|
+
"declaration": {
|
|
37085
|
+
"name": "TabList",
|
|
37086
|
+
"module": "components/tablist/tablist.component.js"
|
|
37087
|
+
}
|
|
37088
|
+
}
|
|
37089
|
+
]
|
|
37090
|
+
},
|
|
36993
37091
|
{
|
|
36994
37092
|
"kind": "javascript-module",
|
|
36995
37093
|
"path": "components/text/text.component.js",
|
|
@@ -37986,100 +38084,6 @@
|
|
|
37986
38084
|
}
|
|
37987
38085
|
]
|
|
37988
38086
|
},
|
|
37989
|
-
{
|
|
37990
|
-
"kind": "javascript-module",
|
|
37991
|
-
"path": "components/tablist/tablist.component.js",
|
|
37992
|
-
"declarations": [
|
|
37993
|
-
{
|
|
37994
|
-
"kind": "class",
|
|
37995
|
-
"description": "Tab list organizes tabs into a container.\n\nChildren of the tab list are `mdc-tab` elements, sent to the default slot.\n\nThe tabs can be navigated using the left/right arrow keys, and selected by clicking,\n or pressing the Enter and Space keys.\n\n**Implicit accessibility rules**\n\n- The element that serves as the container for the set of tabs has role `tablist`.\n- Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n- The active tab element has the state `aria-selected` set to `true`\n and all other tab elements have it set to `false`.\n\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n- The `tablist` element needs to have a label provided by `data-aria-label`.\n- Each element with role `tab` has the property `aria-controls`\n that should refer to its associated `tabpanel` element.\n- Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n- If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.",
|
|
37996
|
-
"name": "TabList",
|
|
37997
|
-
"cssProperties": [
|
|
37998
|
-
{
|
|
37999
|
-
"description": "Gap between tabs",
|
|
38000
|
-
"name": "--mdc-tablist-gap"
|
|
38001
|
-
},
|
|
38002
|
-
{
|
|
38003
|
-
"description": "Width of the tablist",
|
|
38004
|
-
"name": "--mdc-tablist-width"
|
|
38005
|
-
},
|
|
38006
|
-
{
|
|
38007
|
-
"description": "Margin value for the arrow button",
|
|
38008
|
-
"name": "--mdc-tablist-arrow-button-margin"
|
|
38009
|
-
}
|
|
38010
|
-
],
|
|
38011
|
-
"slots": [
|
|
38012
|
-
{
|
|
38013
|
-
"description": "slot for mdc-tab elements.",
|
|
38014
|
-
"name": "Default"
|
|
38015
|
-
}
|
|
38016
|
-
],
|
|
38017
|
-
"members": [
|
|
38018
|
-
{
|
|
38019
|
-
"kind": "field",
|
|
38020
|
-
"name": "activeTabId",
|
|
38021
|
-
"type": {
|
|
38022
|
-
"text": "string | undefined"
|
|
38023
|
-
},
|
|
38024
|
-
"description": "ID of the active tab, defaults to the first tab if not provided",
|
|
38025
|
-
"attribute": "active-tab-id",
|
|
38026
|
-
"reflects": true
|
|
38027
|
-
},
|
|
38028
|
-
{
|
|
38029
|
-
"kind": "field",
|
|
38030
|
-
"name": "dataAriaLabel",
|
|
38031
|
-
"type": {
|
|
38032
|
-
"text": "string | undefined"
|
|
38033
|
-
},
|
|
38034
|
-
"description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
|
|
38035
|
-
"attribute": "data-aria-label"
|
|
38036
|
-
}
|
|
38037
|
-
],
|
|
38038
|
-
"events": [
|
|
38039
|
-
{
|
|
38040
|
-
"description": "(React: onChange) This event is dispatched when the tab is selected. Event that fires when user changes the active tab. The function sent as the argument will receive the fired event and the new tab id can be fetched from event.detail.tabId. `(event: CustomEvent) => handleTabChange(event.detail.tabId);`",
|
|
38041
|
-
"name": "change",
|
|
38042
|
-
"reactName": "onChange"
|
|
38043
|
-
}
|
|
38044
|
-
],
|
|
38045
|
-
"attributes": [
|
|
38046
|
-
{
|
|
38047
|
-
"name": "active-tab-id",
|
|
38048
|
-
"type": {
|
|
38049
|
-
"text": "string | undefined"
|
|
38050
|
-
},
|
|
38051
|
-
"description": "ID of the active tab, defaults to the first tab if not provided",
|
|
38052
|
-
"fieldName": "activeTabId"
|
|
38053
|
-
},
|
|
38054
|
-
{
|
|
38055
|
-
"name": "data-aria-label",
|
|
38056
|
-
"type": {
|
|
38057
|
-
"text": "string | undefined"
|
|
38058
|
-
},
|
|
38059
|
-
"description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
|
|
38060
|
-
"fieldName": "dataAriaLabel"
|
|
38061
|
-
}
|
|
38062
|
-
],
|
|
38063
|
-
"superclass": {
|
|
38064
|
-
"name": "Component",
|
|
38065
|
-
"module": "/src/models"
|
|
38066
|
-
},
|
|
38067
|
-
"tagName": "mdc-tablist",
|
|
38068
|
-
"jsDoc": "/**\n * Tab list organizes tabs into a container.\n *\n * Children of the tab list are `mdc-tab` elements, sent to the default slot.\n *\n * The tabs can be navigated using the left/right arrow keys, and selected by clicking,\n * or pressing the Enter and Space keys.\n *\n * **Implicit accessibility rules**\n *\n * - The element that serves as the container for the set of tabs has role `tablist`.\n * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n * - The active tab element has the state `aria-selected` set to `true`\n * and all other tab elements have it set to `false`.\n *\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n * - The `tablist` element needs to have a label provided by `data-aria-label`.\n * - Each element with role `tab` has the property `aria-controls`\n * that should refer to its associated `tabpanel` element.\n * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n * - If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.\n *\n * @tagname mdc-tablist\n *\n * @dependency mdc-tab\n * @dependency mdc-button\n *\n * @event change - (React: onChange) This event is dispatched when the tab is selected.\n * Event that fires when user changes the active tab.\n * The function sent as the argument will receive the fired event\n * and the new tab id can be fetched from event.detail.tabId.\n *\n * `(event: CustomEvent) => handleTabChange(event.detail.tabId);`\n *\n * @slot Default slot for mdc-tab elements.\n *\n * @cssproperty --mdc-tablist-gap - Gap between tabs\n * @cssproperty --mdc-tablist-width - Width of the tablist\n * @cssproperty --mdc-tablist-arrow-button-margin - Margin value for the arrow button\n */",
|
|
38069
|
-
"customElement": true
|
|
38070
|
-
}
|
|
38071
|
-
],
|
|
38072
|
-
"exports": [
|
|
38073
|
-
{
|
|
38074
|
-
"kind": "js",
|
|
38075
|
-
"name": "default",
|
|
38076
|
-
"declaration": {
|
|
38077
|
-
"name": "TabList",
|
|
38078
|
-
"module": "components/tablist/tablist.component.js"
|
|
38079
|
-
}
|
|
38080
|
-
}
|
|
38081
|
-
]
|
|
38082
|
-
},
|
|
38083
38087
|
{
|
|
38084
38088
|
"kind": "javascript-module",
|
|
38085
38089
|
"path": "components/themeprovider/themeprovider.component.js",
|