@momentum-design/components 0.104.15 → 0.104.16
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 +13 -12
- package/dist/browser/index.js.map +2 -2
- package/dist/components/appheader/appheader.component.js +11 -11
- package/dist/components/appheader/appheader.styles.js +2 -1
- package/dist/custom-elements.json +2003 -2003
- package/dist/react/index.d.ts +4 -4
- package/dist/react/index.js +4 -4
- package/package.json +1 -1
|
@@ -2,6 +2,346 @@
|
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
3
|
"readme": "",
|
|
4
4
|
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "components/accordionbutton/accordionbutton.component.js",
|
|
8
|
+
"declarations": [
|
|
9
|
+
{
|
|
10
|
+
"kind": "class",
|
|
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
|
+
"cssProperties": [
|
|
14
|
+
{
|
|
15
|
+
"description": "The border color of the accordion button.",
|
|
16
|
+
"name": "--mdc-accordionbutton-border-color"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"description": "The hover color of the accordion button.",
|
|
20
|
+
"name": "--mdc-accordionbutton-hover-color"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"description": "The active color of the accordion button.",
|
|
24
|
+
"name": "--mdc-accordionbutton-active-color"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"description": "The disabled color of the accordion button.",
|
|
28
|
+
"name": "--mdc-accordionbutton-disabled-color"
|
|
29
|
+
}
|
|
30
|
+
],
|
|
31
|
+
"cssParts": [
|
|
32
|
+
{
|
|
33
|
+
"description": "The header section of the accordion button.",
|
|
34
|
+
"name": "header-section"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"description": "The header button section of the accordion button.",
|
|
38
|
+
"name": "header-button-section"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"description": "The leading header of the accordion button.",
|
|
42
|
+
"name": "leading-header"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"description": "The trailing header of the accordion button.",
|
|
46
|
+
"name": "trailing-header"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"description": "The trailing header icon of the accordion button.",
|
|
50
|
+
"name": "trailing-header__icon"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"description": "The body section of the accordion button.",
|
|
54
|
+
"name": "body-section"
|
|
55
|
+
}
|
|
56
|
+
],
|
|
57
|
+
"slots": [
|
|
58
|
+
{
|
|
59
|
+
"description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
|
|
60
|
+
"name": "default"
|
|
61
|
+
}
|
|
62
|
+
],
|
|
63
|
+
"members": [
|
|
64
|
+
{
|
|
65
|
+
"kind": "field",
|
|
66
|
+
"name": "size",
|
|
67
|
+
"type": {
|
|
68
|
+
"text": "Size"
|
|
69
|
+
},
|
|
70
|
+
"description": "The size of the accordion item.",
|
|
71
|
+
"default": "'small'",
|
|
72
|
+
"attribute": "size",
|
|
73
|
+
"reflects": true
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"kind": "field",
|
|
77
|
+
"name": "variant",
|
|
78
|
+
"type": {
|
|
79
|
+
"text": "Variant"
|
|
80
|
+
},
|
|
81
|
+
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
82
|
+
"default": "'default'",
|
|
83
|
+
"attribute": "variant",
|
|
84
|
+
"reflects": true
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"kind": "field",
|
|
88
|
+
"name": "dataAriaLevel",
|
|
89
|
+
"type": {
|
|
90
|
+
"text": "number"
|
|
91
|
+
},
|
|
92
|
+
"description": "The aria level of the accordion component.",
|
|
93
|
+
"default": "3",
|
|
94
|
+
"attribute": "data-aria-level",
|
|
95
|
+
"reflects": true
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"kind": "field",
|
|
99
|
+
"name": "expanded",
|
|
100
|
+
"type": {
|
|
101
|
+
"text": "boolean"
|
|
102
|
+
},
|
|
103
|
+
"description": "The visibility of the accordion button.",
|
|
104
|
+
"default": "false",
|
|
105
|
+
"attribute": "expanded",
|
|
106
|
+
"reflects": true
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
"kind": "field",
|
|
110
|
+
"name": "headerText",
|
|
111
|
+
"type": {
|
|
112
|
+
"text": "string | undefined"
|
|
113
|
+
},
|
|
114
|
+
"description": "The header text of the accordion item.",
|
|
115
|
+
"attribute": "header-text",
|
|
116
|
+
"reflects": true
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"kind": "field",
|
|
120
|
+
"name": "prefixIcon",
|
|
121
|
+
"type": {
|
|
122
|
+
"text": "IconNames | undefined"
|
|
123
|
+
},
|
|
124
|
+
"description": "The leading icon that is displayed before the header text.",
|
|
125
|
+
"attribute": "prefix-icon"
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"kind": "method",
|
|
129
|
+
"name": "handleHeaderClick",
|
|
130
|
+
"privacy": "protected",
|
|
131
|
+
"return": {
|
|
132
|
+
"type": {
|
|
133
|
+
"text": "void"
|
|
134
|
+
}
|
|
135
|
+
},
|
|
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."
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
"kind": "method",
|
|
140
|
+
"name": "dispatchHeaderClickEvent",
|
|
141
|
+
"privacy": "private",
|
|
142
|
+
"return": {
|
|
143
|
+
"type": {
|
|
144
|
+
"text": "void"
|
|
145
|
+
}
|
|
146
|
+
},
|
|
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."
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
"kind": "method",
|
|
151
|
+
"name": "handleKeyDown",
|
|
152
|
+
"privacy": "private",
|
|
153
|
+
"return": {
|
|
154
|
+
"type": {
|
|
155
|
+
"text": "void"
|
|
156
|
+
}
|
|
157
|
+
},
|
|
158
|
+
"parameters": [
|
|
159
|
+
{
|
|
160
|
+
"name": "event",
|
|
161
|
+
"type": {
|
|
162
|
+
"text": "KeyboardEvent"
|
|
163
|
+
},
|
|
164
|
+
"description": "The KeyboardEvent fired."
|
|
165
|
+
}
|
|
166
|
+
],
|
|
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."
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
"kind": "method",
|
|
171
|
+
"name": "renderIcon",
|
|
172
|
+
"privacy": "protected",
|
|
173
|
+
"return": {
|
|
174
|
+
"type": {
|
|
175
|
+
"text": "TemplateResult | typeof nothing"
|
|
176
|
+
}
|
|
177
|
+
},
|
|
178
|
+
"parameters": [
|
|
179
|
+
{
|
|
180
|
+
"name": "iconName",
|
|
181
|
+
"optional": true,
|
|
182
|
+
"type": {
|
|
183
|
+
"text": "IconNames"
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
]
|
|
187
|
+
},
|
|
188
|
+
{
|
|
189
|
+
"kind": "method",
|
|
190
|
+
"name": "renderHeadingText",
|
|
191
|
+
"privacy": "protected",
|
|
192
|
+
"return": {
|
|
193
|
+
"type": {
|
|
194
|
+
"text": "TemplateResult | typeof nothing"
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
"kind": "method",
|
|
200
|
+
"name": "renderHeader",
|
|
201
|
+
"privacy": "protected",
|
|
202
|
+
"return": {
|
|
203
|
+
"type": {
|
|
204
|
+
"text": "TemplateResult"
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
},
|
|
208
|
+
{
|
|
209
|
+
"kind": "method",
|
|
210
|
+
"name": "getArrowIconName",
|
|
211
|
+
"privacy": "protected",
|
|
212
|
+
"return": {
|
|
213
|
+
"type": {
|
|
214
|
+
"text": ""
|
|
215
|
+
}
|
|
216
|
+
},
|
|
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."
|
|
218
|
+
},
|
|
219
|
+
{
|
|
220
|
+
"kind": "method",
|
|
221
|
+
"name": "renderBody",
|
|
222
|
+
"privacy": "protected",
|
|
223
|
+
"return": {
|
|
224
|
+
"type": {
|
|
225
|
+
"text": "TemplateResult | typeof nothing"
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
},
|
|
229
|
+
{
|
|
230
|
+
"kind": "field",
|
|
231
|
+
"name": "disabled",
|
|
232
|
+
"type": {
|
|
233
|
+
"text": "boolean | undefined"
|
|
234
|
+
},
|
|
235
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
236
|
+
"default": "undefined",
|
|
237
|
+
"attribute": "disabled",
|
|
238
|
+
"reflects": true,
|
|
239
|
+
"inheritedFrom": {
|
|
240
|
+
"name": "DisabledMixin",
|
|
241
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
242
|
+
}
|
|
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": [
|
|
253
|
+
{
|
|
254
|
+
"name": "size",
|
|
255
|
+
"type": {
|
|
256
|
+
"text": "Size"
|
|
257
|
+
},
|
|
258
|
+
"description": "The size of the accordion item.",
|
|
259
|
+
"default": "'small'",
|
|
260
|
+
"fieldName": "size"
|
|
261
|
+
},
|
|
262
|
+
{
|
|
263
|
+
"name": "variant",
|
|
264
|
+
"type": {
|
|
265
|
+
"text": "Variant"
|
|
266
|
+
},
|
|
267
|
+
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
268
|
+
"default": "'default'",
|
|
269
|
+
"fieldName": "variant"
|
|
270
|
+
},
|
|
271
|
+
{
|
|
272
|
+
"name": "data-aria-level",
|
|
273
|
+
"type": {
|
|
274
|
+
"text": "number"
|
|
275
|
+
},
|
|
276
|
+
"description": "The aria level of the accordion component.",
|
|
277
|
+
"default": "3",
|
|
278
|
+
"fieldName": "dataAriaLevel"
|
|
279
|
+
},
|
|
280
|
+
{
|
|
281
|
+
"name": "expanded",
|
|
282
|
+
"type": {
|
|
283
|
+
"text": "boolean"
|
|
284
|
+
},
|
|
285
|
+
"description": "The visibility of the accordion button.",
|
|
286
|
+
"default": "false",
|
|
287
|
+
"fieldName": "expanded"
|
|
288
|
+
},
|
|
289
|
+
{
|
|
290
|
+
"name": "header-text",
|
|
291
|
+
"type": {
|
|
292
|
+
"text": "string | undefined"
|
|
293
|
+
},
|
|
294
|
+
"description": "The header text of the accordion item.",
|
|
295
|
+
"fieldName": "headerText"
|
|
296
|
+
},
|
|
297
|
+
{
|
|
298
|
+
"name": "prefix-icon",
|
|
299
|
+
"type": {
|
|
300
|
+
"text": "IconNames | undefined"
|
|
301
|
+
},
|
|
302
|
+
"description": "The leading icon that is displayed before the header text.",
|
|
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",
|
|
313
|
+
"inheritedFrom": {
|
|
314
|
+
"name": "DisabledMixin",
|
|
315
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
316
|
+
}
|
|
317
|
+
}
|
|
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
|
|
332
|
+
}
|
|
333
|
+
],
|
|
334
|
+
"exports": [
|
|
335
|
+
{
|
|
336
|
+
"kind": "js",
|
|
337
|
+
"name": "default",
|
|
338
|
+
"declaration": {
|
|
339
|
+
"name": "AccordionButton",
|
|
340
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
341
|
+
}
|
|
342
|
+
}
|
|
343
|
+
]
|
|
344
|
+
},
|
|
5
345
|
{
|
|
6
346
|
"kind": "javascript-module",
|
|
7
347
|
"path": "components/accordion/accordion.component.js",
|
|
@@ -143,8 +483,8 @@
|
|
|
143
483
|
"attribute": "disabled",
|
|
144
484
|
"reflects": true,
|
|
145
485
|
"inheritedFrom": {
|
|
146
|
-
"name": "
|
|
147
|
-
"module": "
|
|
486
|
+
"name": "AccordionButton",
|
|
487
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
148
488
|
}
|
|
149
489
|
},
|
|
150
490
|
{
|
|
@@ -383,8 +723,8 @@
|
|
|
383
723
|
"default": "undefined",
|
|
384
724
|
"fieldName": "disabled",
|
|
385
725
|
"inheritedFrom": {
|
|
386
|
-
"name": "
|
|
387
|
-
"module": "src/
|
|
726
|
+
"name": "AccordionButton",
|
|
727
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
388
728
|
}
|
|
389
729
|
},
|
|
390
730
|
{
|
|
@@ -479,59 +819,21 @@
|
|
|
479
819
|
},
|
|
480
820
|
{
|
|
481
821
|
"kind": "javascript-module",
|
|
482
|
-
"path": "components/
|
|
822
|
+
"path": "components/accordiongroup/accordiongroup.component.js",
|
|
483
823
|
"declarations": [
|
|
484
824
|
{
|
|
485
825
|
"kind": "class",
|
|
486
|
-
"description": "An accordion
|
|
487
|
-
"name": "
|
|
826
|
+
"description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
|
|
827
|
+
"name": "AccordionGroup",
|
|
488
828
|
"cssProperties": [
|
|
489
829
|
{
|
|
490
|
-
"description": "The border color of the
|
|
491
|
-
"name": "--mdc-
|
|
492
|
-
},
|
|
493
|
-
{
|
|
494
|
-
"description": "The hover color of the accordion button.",
|
|
495
|
-
"name": "--mdc-accordionbutton-hover-color"
|
|
496
|
-
},
|
|
497
|
-
{
|
|
498
|
-
"description": "The active color of the accordion button.",
|
|
499
|
-
"name": "--mdc-accordionbutton-active-color"
|
|
500
|
-
},
|
|
501
|
-
{
|
|
502
|
-
"description": "The disabled color of the accordion button.",
|
|
503
|
-
"name": "--mdc-accordionbutton-disabled-color"
|
|
504
|
-
}
|
|
505
|
-
],
|
|
506
|
-
"cssParts": [
|
|
507
|
-
{
|
|
508
|
-
"description": "The header section of the accordion button.",
|
|
509
|
-
"name": "header-section"
|
|
510
|
-
},
|
|
511
|
-
{
|
|
512
|
-
"description": "The header button section of the accordion button.",
|
|
513
|
-
"name": "header-button-section"
|
|
514
|
-
},
|
|
515
|
-
{
|
|
516
|
-
"description": "The leading header of the accordion button.",
|
|
517
|
-
"name": "leading-header"
|
|
518
|
-
},
|
|
519
|
-
{
|
|
520
|
-
"description": "The trailing header of the accordion button.",
|
|
521
|
-
"name": "trailing-header"
|
|
522
|
-
},
|
|
523
|
-
{
|
|
524
|
-
"description": "The trailing header icon of the accordion button.",
|
|
525
|
-
"name": "trailing-header__icon"
|
|
526
|
-
},
|
|
527
|
-
{
|
|
528
|
-
"description": "The body section of the accordion button.",
|
|
529
|
-
"name": "body-section"
|
|
830
|
+
"description": "The border color of the entire accordiongroup",
|
|
831
|
+
"name": "--mdc-accordiongroup-border-color"
|
|
530
832
|
}
|
|
531
833
|
],
|
|
532
834
|
"slots": [
|
|
533
835
|
{
|
|
534
|
-
"description": "The default slot
|
|
836
|
+
"description": "The default slot can contain the `accordion` or `accordionbutton` components.",
|
|
535
837
|
"name": "default"
|
|
536
838
|
}
|
|
537
839
|
],
|
|
@@ -554,76 +856,24 @@
|
|
|
554
856
|
"text": "Variant"
|
|
555
857
|
},
|
|
556
858
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
557
|
-
"default": "'
|
|
859
|
+
"default": "'stacked'",
|
|
558
860
|
"attribute": "variant",
|
|
559
861
|
"reflects": true
|
|
560
862
|
},
|
|
561
863
|
{
|
|
562
864
|
"kind": "field",
|
|
563
|
-
"name": "
|
|
564
|
-
"type": {
|
|
565
|
-
"text": "number"
|
|
566
|
-
},
|
|
567
|
-
"description": "The aria level of the accordion component.",
|
|
568
|
-
"default": "3",
|
|
569
|
-
"attribute": "data-aria-level",
|
|
570
|
-
"reflects": true
|
|
571
|
-
},
|
|
572
|
-
{
|
|
573
|
-
"kind": "field",
|
|
574
|
-
"name": "expanded",
|
|
865
|
+
"name": "allowMultiple",
|
|
575
866
|
"type": {
|
|
576
867
|
"text": "boolean"
|
|
577
868
|
},
|
|
578
|
-
"description": "The visibility of the accordion button.",
|
|
579
869
|
"default": "false",
|
|
580
|
-
"
|
|
581
|
-
"
|
|
582
|
-
},
|
|
583
|
-
{
|
|
584
|
-
"kind": "field",
|
|
585
|
-
"name": "headerText",
|
|
586
|
-
"type": {
|
|
587
|
-
"text": "string | undefined"
|
|
588
|
-
},
|
|
589
|
-
"description": "The header text of the accordion item.",
|
|
590
|
-
"attribute": "header-text",
|
|
870
|
+
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
871
|
+
"attribute": "allow-multiple",
|
|
591
872
|
"reflects": true
|
|
592
873
|
},
|
|
593
|
-
{
|
|
594
|
-
"kind": "field",
|
|
595
|
-
"name": "prefixIcon",
|
|
596
|
-
"type": {
|
|
597
|
-
"text": "IconNames | undefined"
|
|
598
|
-
},
|
|
599
|
-
"description": "The leading icon that is displayed before the header text.",
|
|
600
|
-
"attribute": "prefix-icon"
|
|
601
|
-
},
|
|
602
|
-
{
|
|
603
|
-
"kind": "method",
|
|
604
|
-
"name": "handleHeaderClick",
|
|
605
|
-
"privacy": "protected",
|
|
606
|
-
"return": {
|
|
607
|
-
"type": {
|
|
608
|
-
"text": "void"
|
|
609
|
-
}
|
|
610
|
-
},
|
|
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."
|
|
612
|
-
},
|
|
613
|
-
{
|
|
614
|
-
"kind": "method",
|
|
615
|
-
"name": "dispatchHeaderClickEvent",
|
|
616
|
-
"privacy": "private",
|
|
617
|
-
"return": {
|
|
618
|
-
"type": {
|
|
619
|
-
"text": "void"
|
|
620
|
-
}
|
|
621
|
-
},
|
|
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."
|
|
623
|
-
},
|
|
624
874
|
{
|
|
625
875
|
"kind": "method",
|
|
626
|
-
"name": "
|
|
876
|
+
"name": "handleAccordionExpanded",
|
|
627
877
|
"privacy": "private",
|
|
628
878
|
"return": {
|
|
629
879
|
"type": {
|
|
@@ -634,300 +884,50 @@
|
|
|
634
884
|
{
|
|
635
885
|
"name": "event",
|
|
636
886
|
"type": {
|
|
637
|
-
"text": "
|
|
887
|
+
"text": "Event"
|
|
638
888
|
},
|
|
639
|
-
"description": "The
|
|
889
|
+
"description": "The event object from the 'shown' event."
|
|
640
890
|
}
|
|
641
891
|
],
|
|
642
|
-
"description": "Handles the
|
|
892
|
+
"description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
|
|
643
893
|
},
|
|
644
894
|
{
|
|
645
895
|
"kind": "method",
|
|
646
|
-
"name": "
|
|
647
|
-
"privacy": "
|
|
896
|
+
"name": "setChildrenAccordionAttributes",
|
|
897
|
+
"privacy": "private",
|
|
648
898
|
"return": {
|
|
649
899
|
"type": {
|
|
650
|
-
"text": "
|
|
900
|
+
"text": "void"
|
|
651
901
|
}
|
|
652
902
|
},
|
|
653
903
|
"parameters": [
|
|
654
904
|
{
|
|
655
|
-
"name": "
|
|
656
|
-
"optional": true,
|
|
905
|
+
"name": "attributeName",
|
|
657
906
|
"type": {
|
|
658
|
-
"text": "
|
|
659
|
-
}
|
|
907
|
+
"text": "string"
|
|
908
|
+
},
|
|
909
|
+
"description": "The name of the attribute to set."
|
|
910
|
+
},
|
|
911
|
+
{
|
|
912
|
+
"name": "attributeValue",
|
|
913
|
+
"type": {
|
|
914
|
+
"text": "string"
|
|
915
|
+
},
|
|
916
|
+
"description": "The value to set the attribute to."
|
|
660
917
|
}
|
|
661
|
-
]
|
|
662
|
-
|
|
918
|
+
],
|
|
919
|
+
"description": "Sets the given attribute on all child accordion or accordionbutton components."
|
|
920
|
+
}
|
|
921
|
+
],
|
|
922
|
+
"attributes": [
|
|
663
923
|
{
|
|
664
|
-
"
|
|
665
|
-
"
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
}
|
|
672
|
-
},
|
|
673
|
-
{
|
|
674
|
-
"kind": "method",
|
|
675
|
-
"name": "renderHeader",
|
|
676
|
-
"privacy": "protected",
|
|
677
|
-
"return": {
|
|
678
|
-
"type": {
|
|
679
|
-
"text": "TemplateResult"
|
|
680
|
-
}
|
|
681
|
-
}
|
|
682
|
-
},
|
|
683
|
-
{
|
|
684
|
-
"kind": "method",
|
|
685
|
-
"name": "getArrowIconName",
|
|
686
|
-
"privacy": "protected",
|
|
687
|
-
"return": {
|
|
688
|
-
"type": {
|
|
689
|
-
"text": ""
|
|
690
|
-
}
|
|
691
|
-
},
|
|
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."
|
|
693
|
-
},
|
|
694
|
-
{
|
|
695
|
-
"kind": "method",
|
|
696
|
-
"name": "renderBody",
|
|
697
|
-
"privacy": "protected",
|
|
698
|
-
"return": {
|
|
699
|
-
"type": {
|
|
700
|
-
"text": "TemplateResult | typeof nothing"
|
|
701
|
-
}
|
|
702
|
-
}
|
|
703
|
-
},
|
|
704
|
-
{
|
|
705
|
-
"kind": "field",
|
|
706
|
-
"name": "disabled",
|
|
707
|
-
"type": {
|
|
708
|
-
"text": "boolean | undefined"
|
|
709
|
-
},
|
|
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
|
-
"inheritedFrom": {
|
|
715
|
-
"name": "DisabledMixin",
|
|
716
|
-
"module": "utils/mixins/DisabledMixin.js"
|
|
717
|
-
}
|
|
718
|
-
}
|
|
719
|
-
],
|
|
720
|
-
"events": [
|
|
721
|
-
{
|
|
722
|
-
"description": "(React: onShown) This event is triggered when the accordion button is expanded.",
|
|
723
|
-
"name": "shown",
|
|
724
|
-
"reactName": "onShown"
|
|
725
|
-
}
|
|
726
|
-
],
|
|
727
|
-
"attributes": [
|
|
728
|
-
{
|
|
729
|
-
"name": "size",
|
|
730
|
-
"type": {
|
|
731
|
-
"text": "Size"
|
|
732
|
-
},
|
|
733
|
-
"description": "The size of the accordion item.",
|
|
734
|
-
"default": "'small'",
|
|
735
|
-
"fieldName": "size"
|
|
736
|
-
},
|
|
737
|
-
{
|
|
738
|
-
"name": "variant",
|
|
739
|
-
"type": {
|
|
740
|
-
"text": "Variant"
|
|
741
|
-
},
|
|
742
|
-
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
743
|
-
"default": "'default'",
|
|
744
|
-
"fieldName": "variant"
|
|
745
|
-
},
|
|
746
|
-
{
|
|
747
|
-
"name": "data-aria-level",
|
|
748
|
-
"type": {
|
|
749
|
-
"text": "number"
|
|
750
|
-
},
|
|
751
|
-
"description": "The aria level of the accordion component.",
|
|
752
|
-
"default": "3",
|
|
753
|
-
"fieldName": "dataAriaLevel"
|
|
754
|
-
},
|
|
755
|
-
{
|
|
756
|
-
"name": "expanded",
|
|
757
|
-
"type": {
|
|
758
|
-
"text": "boolean"
|
|
759
|
-
},
|
|
760
|
-
"description": "The visibility of the accordion button.",
|
|
761
|
-
"default": "false",
|
|
762
|
-
"fieldName": "expanded"
|
|
763
|
-
},
|
|
764
|
-
{
|
|
765
|
-
"name": "header-text",
|
|
766
|
-
"type": {
|
|
767
|
-
"text": "string | undefined"
|
|
768
|
-
},
|
|
769
|
-
"description": "The header text of the accordion item.",
|
|
770
|
-
"fieldName": "headerText"
|
|
771
|
-
},
|
|
772
|
-
{
|
|
773
|
-
"name": "prefix-icon",
|
|
774
|
-
"type": {
|
|
775
|
-
"text": "IconNames | undefined"
|
|
776
|
-
},
|
|
777
|
-
"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",
|
|
788
|
-
"inheritedFrom": {
|
|
789
|
-
"name": "DisabledMixin",
|
|
790
|
-
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
791
|
-
}
|
|
792
|
-
}
|
|
793
|
-
],
|
|
794
|
-
"mixins": [
|
|
795
|
-
{
|
|
796
|
-
"name": "DisabledMixin",
|
|
797
|
-
"module": "/src/utils/mixins/DisabledMixin"
|
|
798
|
-
}
|
|
799
|
-
],
|
|
800
|
-
"superclass": {
|
|
801
|
-
"name": "Component",
|
|
802
|
-
"module": "/src/models"
|
|
803
|
-
},
|
|
804
|
-
"tagName": "mdc-accordionbutton",
|
|
805
|
-
"jsDoc": "/**\n * An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you do need any controls on your accordion heading, then it's advised to use `accordion` component.\n *\n * If an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.\n *\n * @tagname mdc-accordionbutton\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion button is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion button.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.\n *\n * @csspart header-section - The header section of the accordion button.\n * @csspart header-button-section - The header button section of the accordion button.\n * @csspart leading-header - The leading header of the accordion button.\n * @csspart trailing-header - The trailing header of the accordion button.\n * @csspart trailing-header__icon - The trailing header icon of the accordion button.\n * @csspart body-section - The body section of the accordion button.\n */",
|
|
806
|
-
"customElement": true
|
|
807
|
-
}
|
|
808
|
-
],
|
|
809
|
-
"exports": [
|
|
810
|
-
{
|
|
811
|
-
"kind": "js",
|
|
812
|
-
"name": "default",
|
|
813
|
-
"declaration": {
|
|
814
|
-
"name": "AccordionButton",
|
|
815
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
816
|
-
}
|
|
817
|
-
}
|
|
818
|
-
]
|
|
819
|
-
},
|
|
820
|
-
{
|
|
821
|
-
"kind": "javascript-module",
|
|
822
|
-
"path": "components/accordiongroup/accordiongroup.component.js",
|
|
823
|
-
"declarations": [
|
|
824
|
-
{
|
|
825
|
-
"kind": "class",
|
|
826
|
-
"description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
|
|
827
|
-
"name": "AccordionGroup",
|
|
828
|
-
"cssProperties": [
|
|
829
|
-
{
|
|
830
|
-
"description": "The border color of the entire accordiongroup",
|
|
831
|
-
"name": "--mdc-accordiongroup-border-color"
|
|
832
|
-
}
|
|
833
|
-
],
|
|
834
|
-
"slots": [
|
|
835
|
-
{
|
|
836
|
-
"description": "The default slot can contain the `accordion` or `accordionbutton` components.",
|
|
837
|
-
"name": "default"
|
|
838
|
-
}
|
|
839
|
-
],
|
|
840
|
-
"members": [
|
|
841
|
-
{
|
|
842
|
-
"kind": "field",
|
|
843
|
-
"name": "size",
|
|
844
|
-
"type": {
|
|
845
|
-
"text": "Size"
|
|
846
|
-
},
|
|
847
|
-
"description": "The size of the accordion item.",
|
|
848
|
-
"default": "'small'",
|
|
849
|
-
"attribute": "size",
|
|
850
|
-
"reflects": true
|
|
851
|
-
},
|
|
852
|
-
{
|
|
853
|
-
"kind": "field",
|
|
854
|
-
"name": "variant",
|
|
855
|
-
"type": {
|
|
856
|
-
"text": "Variant"
|
|
857
|
-
},
|
|
858
|
-
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
859
|
-
"default": "'stacked'",
|
|
860
|
-
"attribute": "variant",
|
|
861
|
-
"reflects": true
|
|
862
|
-
},
|
|
863
|
-
{
|
|
864
|
-
"kind": "field",
|
|
865
|
-
"name": "allowMultiple",
|
|
866
|
-
"type": {
|
|
867
|
-
"text": "boolean"
|
|
868
|
-
},
|
|
869
|
-
"default": "false",
|
|
870
|
-
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
871
|
-
"attribute": "allow-multiple",
|
|
872
|
-
"reflects": true
|
|
873
|
-
},
|
|
874
|
-
{
|
|
875
|
-
"kind": "method",
|
|
876
|
-
"name": "handleAccordionExpanded",
|
|
877
|
-
"privacy": "private",
|
|
878
|
-
"return": {
|
|
879
|
-
"type": {
|
|
880
|
-
"text": "void"
|
|
881
|
-
}
|
|
882
|
-
},
|
|
883
|
-
"parameters": [
|
|
884
|
-
{
|
|
885
|
-
"name": "event",
|
|
886
|
-
"type": {
|
|
887
|
-
"text": "Event"
|
|
888
|
-
},
|
|
889
|
-
"description": "The event object from the 'shown' event."
|
|
890
|
-
}
|
|
891
|
-
],
|
|
892
|
-
"description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
|
|
893
|
-
},
|
|
894
|
-
{
|
|
895
|
-
"kind": "method",
|
|
896
|
-
"name": "setChildrenAccordionAttributes",
|
|
897
|
-
"privacy": "private",
|
|
898
|
-
"return": {
|
|
899
|
-
"type": {
|
|
900
|
-
"text": "void"
|
|
901
|
-
}
|
|
902
|
-
},
|
|
903
|
-
"parameters": [
|
|
904
|
-
{
|
|
905
|
-
"name": "attributeName",
|
|
906
|
-
"type": {
|
|
907
|
-
"text": "string"
|
|
908
|
-
},
|
|
909
|
-
"description": "The name of the attribute to set."
|
|
910
|
-
},
|
|
911
|
-
{
|
|
912
|
-
"name": "attributeValue",
|
|
913
|
-
"type": {
|
|
914
|
-
"text": "string"
|
|
915
|
-
},
|
|
916
|
-
"description": "The value to set the attribute to."
|
|
917
|
-
}
|
|
918
|
-
],
|
|
919
|
-
"description": "Sets the given attribute on all child accordion or accordionbutton components."
|
|
920
|
-
}
|
|
921
|
-
],
|
|
922
|
-
"attributes": [
|
|
923
|
-
{
|
|
924
|
-
"name": "size",
|
|
925
|
-
"type": {
|
|
926
|
-
"text": "Size"
|
|
927
|
-
},
|
|
928
|
-
"description": "The size of the accordion item.",
|
|
929
|
-
"default": "'small'",
|
|
930
|
-
"fieldName": "size"
|
|
924
|
+
"name": "size",
|
|
925
|
+
"type": {
|
|
926
|
+
"text": "Size"
|
|
927
|
+
},
|
|
928
|
+
"description": "The size of the accordion item.",
|
|
929
|
+
"default": "'small'",
|
|
930
|
+
"fieldName": "size"
|
|
931
931
|
},
|
|
932
932
|
{
|
|
933
933
|
"name": "variant",
|
|
@@ -13646,254 +13646,6 @@
|
|
|
13646
13646
|
}
|
|
13647
13647
|
]
|
|
13648
13648
|
},
|
|
13649
|
-
{
|
|
13650
|
-
"kind": "javascript-module",
|
|
13651
|
-
"path": "components/icon/icon.component.js",
|
|
13652
|
-
"declarations": [
|
|
13653
|
-
{
|
|
13654
|
-
"kind": "class",
|
|
13655
|
-
"description": "Icon component that dynamically displays SVG icons based on a valid name.\n\nThis component must be mounted within an `IconProvider` component.\n\nThe `IconProvider` defines the source URL from which icons are consumed.\nThe `Icon` component accepts a `name` attribute, which corresponds to\nthe file name of the icon to be loaded from the specified URL.\n\nOnce fetched, the icon will be rendered. If the fetching process is unsuccessful,\nno icon will be displayed.\n\nThe `size` attribute allows for dynamic sizing of the icon based on the provided\n`length-unit` attribute. This unit can either come from the `IconProvider`\nor can be overridden for each individual icon. For example:\nif `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n`width: 1em; height: 1em`.\n\nRegarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n\n### Decorative Icons\n- Decorative icons do not convey any essential information to the content of a page.\n- They should be hidden from screen readers (SR) to prevent confusion for users.\n- For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n\n### Informative Icons\n- Informative icons convey important information that is not adequately represented\n by surrounding text or components.\n- They provide valuable context and must be announced by assistive technologies.\n- For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n- If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n the role will be unset.\n\n### Informative Standalone Icons\n- If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\nhave a Tooltip that describes what it means.\n- For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\nand the `role` will be set to \"img\" automatically.\n- **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**",
|
|
13656
|
-
"name": "Icon",
|
|
13657
|
-
"cssProperties": [
|
|
13658
|
-
{
|
|
13659
|
-
"description": "Allows customization of the default fill color.",
|
|
13660
|
-
"name": "--mdc-icon-fill-color"
|
|
13661
|
-
},
|
|
13662
|
-
{
|
|
13663
|
-
"description": "Allows customization of the icon size.",
|
|
13664
|
-
"name": "--mdc-icon-size"
|
|
13665
|
-
},
|
|
13666
|
-
{
|
|
13667
|
-
"description": "Allows customization of the icon border radius.",
|
|
13668
|
-
"name": "--mdc-icon-border-radius"
|
|
13669
|
-
}
|
|
13670
|
-
],
|
|
13671
|
-
"cssParts": [
|
|
13672
|
-
{
|
|
13673
|
-
"description": "The svg inside the icon element.",
|
|
13674
|
-
"name": "icon"
|
|
13675
|
-
}
|
|
13676
|
-
],
|
|
13677
|
-
"members": [
|
|
13678
|
-
{
|
|
13679
|
-
"kind": "field",
|
|
13680
|
-
"name": "iconData",
|
|
13681
|
-
"type": {
|
|
13682
|
-
"text": "HTMLElement | undefined"
|
|
13683
|
-
},
|
|
13684
|
-
"privacy": "private"
|
|
13685
|
-
},
|
|
13686
|
-
{
|
|
13687
|
-
"kind": "field",
|
|
13688
|
-
"name": "lengthUnitFromContext",
|
|
13689
|
-
"type": {
|
|
13690
|
-
"text": "string | undefined"
|
|
13691
|
-
},
|
|
13692
|
-
"privacy": "private"
|
|
13693
|
-
},
|
|
13694
|
-
{
|
|
13695
|
-
"kind": "field",
|
|
13696
|
-
"name": "sizeFromContext",
|
|
13697
|
-
"type": {
|
|
13698
|
-
"text": "number | undefined"
|
|
13699
|
-
},
|
|
13700
|
-
"privacy": "private"
|
|
13701
|
-
},
|
|
13702
|
-
{
|
|
13703
|
-
"kind": "field",
|
|
13704
|
-
"name": "name",
|
|
13705
|
-
"type": {
|
|
13706
|
-
"text": "IconNames | undefined"
|
|
13707
|
-
},
|
|
13708
|
-
"description": "Name of the icon (= filename)",
|
|
13709
|
-
"attribute": "name",
|
|
13710
|
-
"reflects": true
|
|
13711
|
-
},
|
|
13712
|
-
{
|
|
13713
|
-
"kind": "field",
|
|
13714
|
-
"name": "size",
|
|
13715
|
-
"type": {
|
|
13716
|
-
"text": "number | undefined"
|
|
13717
|
-
},
|
|
13718
|
-
"description": "Size of the icon (works in combination with length unit)",
|
|
13719
|
-
"attribute": "size"
|
|
13720
|
-
},
|
|
13721
|
-
{
|
|
13722
|
-
"kind": "field",
|
|
13723
|
-
"name": "lengthUnit",
|
|
13724
|
-
"type": {
|
|
13725
|
-
"text": "string | undefined"
|
|
13726
|
-
},
|
|
13727
|
-
"description": "Length unit attribute for overriding length-unit from `IconProvider`",
|
|
13728
|
-
"attribute": "length-unit"
|
|
13729
|
-
},
|
|
13730
|
-
{
|
|
13731
|
-
"kind": "field",
|
|
13732
|
-
"name": "ariaLabel",
|
|
13733
|
-
"type": {
|
|
13734
|
-
"text": "string | null"
|
|
13735
|
-
},
|
|
13736
|
-
"default": "null",
|
|
13737
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
13738
|
-
"attribute": "aria-label"
|
|
13739
|
-
},
|
|
13740
|
-
{
|
|
13741
|
-
"kind": "field",
|
|
13742
|
-
"name": "ariaLabelledBy",
|
|
13743
|
-
"type": {
|
|
13744
|
-
"text": "string | null"
|
|
13745
|
-
},
|
|
13746
|
-
"default": "null",
|
|
13747
|
-
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
13748
|
-
"attribute": "aria-labelledby"
|
|
13749
|
-
},
|
|
13750
|
-
{
|
|
13751
|
-
"kind": "field",
|
|
13752
|
-
"name": "iconProviderContext",
|
|
13753
|
-
"privacy": "private",
|
|
13754
|
-
"readonly": true
|
|
13755
|
-
},
|
|
13756
|
-
{
|
|
13757
|
-
"kind": "field",
|
|
13758
|
-
"name": "abortController",
|
|
13759
|
-
"type": {
|
|
13760
|
-
"text": "AbortController | undefined"
|
|
13761
|
-
},
|
|
13762
|
-
"privacy": "private",
|
|
13763
|
-
"default": "new AbortController()"
|
|
13764
|
-
},
|
|
13765
|
-
{
|
|
13766
|
-
"kind": "method",
|
|
13767
|
-
"name": "prepareIconElement",
|
|
13768
|
-
"privacy": "private",
|
|
13769
|
-
"parameters": [
|
|
13770
|
-
{
|
|
13771
|
-
"name": "iconData",
|
|
13772
|
-
"type": {
|
|
13773
|
-
"text": "string"
|
|
13774
|
-
},
|
|
13775
|
-
"description": "The icon string to be parsed"
|
|
13776
|
-
}
|
|
13777
|
-
],
|
|
13778
|
-
"description": "Parse the icon string to an html element, set the attributes and\nreturn the icon element",
|
|
13779
|
-
"return": {
|
|
13780
|
-
"type": {
|
|
13781
|
-
"text": ""
|
|
13782
|
-
}
|
|
13783
|
-
}
|
|
13784
|
-
},
|
|
13785
|
-
{
|
|
13786
|
-
"kind": "method",
|
|
13787
|
-
"name": "getIconData",
|
|
13788
|
-
"privacy": "private",
|
|
13789
|
-
"description": "Fetches the icon (currently only svg) and sets state and attributes once fetched successfully\n\nThis method uses abortController.signal to cancel the fetch request when the component is disconnected or updated.\nIf the request is aborted after the fetch() call has been fulfilled but before the response body has been read,\nthen attempting to read the response body will reject with an AbortError exception."
|
|
13790
|
-
},
|
|
13791
|
-
{
|
|
13792
|
-
"kind": "method",
|
|
13793
|
-
"name": "handleIconLoadedSuccess",
|
|
13794
|
-
"privacy": "private",
|
|
13795
|
-
"parameters": [
|
|
13796
|
-
{
|
|
13797
|
-
"name": "iconHtml",
|
|
13798
|
-
"type": {
|
|
13799
|
-
"text": "HTMLElement"
|
|
13800
|
-
},
|
|
13801
|
-
"description": "The icon html element which has been fetched from the icon provider."
|
|
13802
|
-
}
|
|
13803
|
-
],
|
|
13804
|
-
"description": "Sets the iconData state to the fetched icon.\nDispatches a 'load' event on the component once the icon has been successfully loaded."
|
|
13805
|
-
},
|
|
13806
|
-
{
|
|
13807
|
-
"kind": "method",
|
|
13808
|
-
"name": "handleIconLoadedFailure",
|
|
13809
|
-
"privacy": "private",
|
|
13810
|
-
"parameters": [
|
|
13811
|
-
{
|
|
13812
|
-
"name": "error",
|
|
13813
|
-
"type": {
|
|
13814
|
-
"text": "unknown"
|
|
13815
|
-
}
|
|
13816
|
-
}
|
|
13817
|
-
],
|
|
13818
|
-
"description": "Dispatches an 'error' event on the component when the icon fetching has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
|
|
13819
|
-
},
|
|
13820
|
-
{
|
|
13821
|
-
"kind": "method",
|
|
13822
|
-
"name": "updateSize",
|
|
13823
|
-
"privacy": "private",
|
|
13824
|
-
"description": "Updates the size by setting the width and height"
|
|
13825
|
-
},
|
|
13826
|
-
{
|
|
13827
|
-
"kind": "field",
|
|
13828
|
-
"name": "computedIconSize",
|
|
13829
|
-
"privacy": "private",
|
|
13830
|
-
"readonly": true
|
|
13831
|
-
}
|
|
13832
|
-
],
|
|
13833
|
-
"attributes": [
|
|
13834
|
-
{
|
|
13835
|
-
"name": "name",
|
|
13836
|
-
"type": {
|
|
13837
|
-
"text": "IconNames | undefined"
|
|
13838
|
-
},
|
|
13839
|
-
"description": "Name of the icon (= filename)",
|
|
13840
|
-
"fieldName": "name"
|
|
13841
|
-
},
|
|
13842
|
-
{
|
|
13843
|
-
"name": "size",
|
|
13844
|
-
"type": {
|
|
13845
|
-
"text": "number | undefined"
|
|
13846
|
-
},
|
|
13847
|
-
"description": "Size of the icon (works in combination with length unit)",
|
|
13848
|
-
"fieldName": "size"
|
|
13849
|
-
},
|
|
13850
|
-
{
|
|
13851
|
-
"name": "length-unit",
|
|
13852
|
-
"type": {
|
|
13853
|
-
"text": "string | undefined"
|
|
13854
|
-
},
|
|
13855
|
-
"description": "Length unit attribute for overriding length-unit from `IconProvider`",
|
|
13856
|
-
"fieldName": "lengthUnit"
|
|
13857
|
-
},
|
|
13858
|
-
{
|
|
13859
|
-
"name": "aria-label",
|
|
13860
|
-
"type": {
|
|
13861
|
-
"text": "string | null"
|
|
13862
|
-
},
|
|
13863
|
-
"default": "null",
|
|
13864
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
13865
|
-
"fieldName": "ariaLabel"
|
|
13866
|
-
},
|
|
13867
|
-
{
|
|
13868
|
-
"name": "aria-labelledby",
|
|
13869
|
-
"type": {
|
|
13870
|
-
"text": "string | null"
|
|
13871
|
-
},
|
|
13872
|
-
"default": "null",
|
|
13873
|
-
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
13874
|
-
"fieldName": "ariaLabelledBy"
|
|
13875
|
-
}
|
|
13876
|
-
],
|
|
13877
|
-
"superclass": {
|
|
13878
|
-
"name": "Component",
|
|
13879
|
-
"module": "/src/models"
|
|
13880
|
-
},
|
|
13881
|
-
"tagName": "mdc-icon",
|
|
13882
|
-
"jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n * by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n * the role will be unset.\n *\n * ### Informative Standalone Icons\n * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\n * have a Tooltip that describes what it means.\n * - For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\n * and the `role` will be set to \"img\" automatically.\n * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n * @cssproperty --mdc-icon-size - Allows customization of the icon size.\n * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.\n *\n * @csspart icon - The svg inside the icon element.\n */",
|
|
13883
|
-
"customElement": true
|
|
13884
|
-
}
|
|
13885
|
-
],
|
|
13886
|
-
"exports": [
|
|
13887
|
-
{
|
|
13888
|
-
"kind": "js",
|
|
13889
|
-
"name": "default",
|
|
13890
|
-
"declaration": {
|
|
13891
|
-
"name": "Icon",
|
|
13892
|
-
"module": "components/icon/icon.component.js"
|
|
13893
|
-
}
|
|
13894
|
-
}
|
|
13895
|
-
]
|
|
13896
|
-
},
|
|
13897
13649
|
{
|
|
13898
13650
|
"kind": "javascript-module",
|
|
13899
13651
|
"path": "components/iconprovider/iconprovider.component.js",
|
|
@@ -15073,6 +14825,254 @@
|
|
|
15073
14825
|
}
|
|
15074
14826
|
]
|
|
15075
14827
|
},
|
|
14828
|
+
{
|
|
14829
|
+
"kind": "javascript-module",
|
|
14830
|
+
"path": "components/icon/icon.component.js",
|
|
14831
|
+
"declarations": [
|
|
14832
|
+
{
|
|
14833
|
+
"kind": "class",
|
|
14834
|
+
"description": "Icon component that dynamically displays SVG icons based on a valid name.\n\nThis component must be mounted within an `IconProvider` component.\n\nThe `IconProvider` defines the source URL from which icons are consumed.\nThe `Icon` component accepts a `name` attribute, which corresponds to\nthe file name of the icon to be loaded from the specified URL.\n\nOnce fetched, the icon will be rendered. If the fetching process is unsuccessful,\nno icon will be displayed.\n\nThe `size` attribute allows for dynamic sizing of the icon based on the provided\n`length-unit` attribute. This unit can either come from the `IconProvider`\nor can be overridden for each individual icon. For example:\nif `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n`width: 1em; height: 1em`.\n\nRegarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n\n### Decorative Icons\n- Decorative icons do not convey any essential information to the content of a page.\n- They should be hidden from screen readers (SR) to prevent confusion for users.\n- For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n\n### Informative Icons\n- Informative icons convey important information that is not adequately represented\n by surrounding text or components.\n- They provide valuable context and must be announced by assistive technologies.\n- For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n- If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n the role will be unset.\n\n### Informative Standalone Icons\n- If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\nhave a Tooltip that describes what it means.\n- For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\nand the `role` will be set to \"img\" automatically.\n- **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**",
|
|
14835
|
+
"name": "Icon",
|
|
14836
|
+
"cssProperties": [
|
|
14837
|
+
{
|
|
14838
|
+
"description": "Allows customization of the default fill color.",
|
|
14839
|
+
"name": "--mdc-icon-fill-color"
|
|
14840
|
+
},
|
|
14841
|
+
{
|
|
14842
|
+
"description": "Allows customization of the icon size.",
|
|
14843
|
+
"name": "--mdc-icon-size"
|
|
14844
|
+
},
|
|
14845
|
+
{
|
|
14846
|
+
"description": "Allows customization of the icon border radius.",
|
|
14847
|
+
"name": "--mdc-icon-border-radius"
|
|
14848
|
+
}
|
|
14849
|
+
],
|
|
14850
|
+
"cssParts": [
|
|
14851
|
+
{
|
|
14852
|
+
"description": "The svg inside the icon element.",
|
|
14853
|
+
"name": "icon"
|
|
14854
|
+
}
|
|
14855
|
+
],
|
|
14856
|
+
"members": [
|
|
14857
|
+
{
|
|
14858
|
+
"kind": "field",
|
|
14859
|
+
"name": "iconData",
|
|
14860
|
+
"type": {
|
|
14861
|
+
"text": "HTMLElement | undefined"
|
|
14862
|
+
},
|
|
14863
|
+
"privacy": "private"
|
|
14864
|
+
},
|
|
14865
|
+
{
|
|
14866
|
+
"kind": "field",
|
|
14867
|
+
"name": "lengthUnitFromContext",
|
|
14868
|
+
"type": {
|
|
14869
|
+
"text": "string | undefined"
|
|
14870
|
+
},
|
|
14871
|
+
"privacy": "private"
|
|
14872
|
+
},
|
|
14873
|
+
{
|
|
14874
|
+
"kind": "field",
|
|
14875
|
+
"name": "sizeFromContext",
|
|
14876
|
+
"type": {
|
|
14877
|
+
"text": "number | undefined"
|
|
14878
|
+
},
|
|
14879
|
+
"privacy": "private"
|
|
14880
|
+
},
|
|
14881
|
+
{
|
|
14882
|
+
"kind": "field",
|
|
14883
|
+
"name": "name",
|
|
14884
|
+
"type": {
|
|
14885
|
+
"text": "IconNames | undefined"
|
|
14886
|
+
},
|
|
14887
|
+
"description": "Name of the icon (= filename)",
|
|
14888
|
+
"attribute": "name",
|
|
14889
|
+
"reflects": true
|
|
14890
|
+
},
|
|
14891
|
+
{
|
|
14892
|
+
"kind": "field",
|
|
14893
|
+
"name": "size",
|
|
14894
|
+
"type": {
|
|
14895
|
+
"text": "number | undefined"
|
|
14896
|
+
},
|
|
14897
|
+
"description": "Size of the icon (works in combination with length unit)",
|
|
14898
|
+
"attribute": "size"
|
|
14899
|
+
},
|
|
14900
|
+
{
|
|
14901
|
+
"kind": "field",
|
|
14902
|
+
"name": "lengthUnit",
|
|
14903
|
+
"type": {
|
|
14904
|
+
"text": "string | undefined"
|
|
14905
|
+
},
|
|
14906
|
+
"description": "Length unit attribute for overriding length-unit from `IconProvider`",
|
|
14907
|
+
"attribute": "length-unit"
|
|
14908
|
+
},
|
|
14909
|
+
{
|
|
14910
|
+
"kind": "field",
|
|
14911
|
+
"name": "ariaLabel",
|
|
14912
|
+
"type": {
|
|
14913
|
+
"text": "string | null"
|
|
14914
|
+
},
|
|
14915
|
+
"default": "null",
|
|
14916
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
14917
|
+
"attribute": "aria-label"
|
|
14918
|
+
},
|
|
14919
|
+
{
|
|
14920
|
+
"kind": "field",
|
|
14921
|
+
"name": "ariaLabelledBy",
|
|
14922
|
+
"type": {
|
|
14923
|
+
"text": "string | null"
|
|
14924
|
+
},
|
|
14925
|
+
"default": "null",
|
|
14926
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
14927
|
+
"attribute": "aria-labelledby"
|
|
14928
|
+
},
|
|
14929
|
+
{
|
|
14930
|
+
"kind": "field",
|
|
14931
|
+
"name": "iconProviderContext",
|
|
14932
|
+
"privacy": "private",
|
|
14933
|
+
"readonly": true
|
|
14934
|
+
},
|
|
14935
|
+
{
|
|
14936
|
+
"kind": "field",
|
|
14937
|
+
"name": "abortController",
|
|
14938
|
+
"type": {
|
|
14939
|
+
"text": "AbortController | undefined"
|
|
14940
|
+
},
|
|
14941
|
+
"privacy": "private",
|
|
14942
|
+
"default": "new AbortController()"
|
|
14943
|
+
},
|
|
14944
|
+
{
|
|
14945
|
+
"kind": "method",
|
|
14946
|
+
"name": "prepareIconElement",
|
|
14947
|
+
"privacy": "private",
|
|
14948
|
+
"parameters": [
|
|
14949
|
+
{
|
|
14950
|
+
"name": "iconData",
|
|
14951
|
+
"type": {
|
|
14952
|
+
"text": "string"
|
|
14953
|
+
},
|
|
14954
|
+
"description": "The icon string to be parsed"
|
|
14955
|
+
}
|
|
14956
|
+
],
|
|
14957
|
+
"description": "Parse the icon string to an html element, set the attributes and\nreturn the icon element",
|
|
14958
|
+
"return": {
|
|
14959
|
+
"type": {
|
|
14960
|
+
"text": ""
|
|
14961
|
+
}
|
|
14962
|
+
}
|
|
14963
|
+
},
|
|
14964
|
+
{
|
|
14965
|
+
"kind": "method",
|
|
14966
|
+
"name": "getIconData",
|
|
14967
|
+
"privacy": "private",
|
|
14968
|
+
"description": "Fetches the icon (currently only svg) and sets state and attributes once fetched successfully\n\nThis method uses abortController.signal to cancel the fetch request when the component is disconnected or updated.\nIf the request is aborted after the fetch() call has been fulfilled but before the response body has been read,\nthen attempting to read the response body will reject with an AbortError exception."
|
|
14969
|
+
},
|
|
14970
|
+
{
|
|
14971
|
+
"kind": "method",
|
|
14972
|
+
"name": "handleIconLoadedSuccess",
|
|
14973
|
+
"privacy": "private",
|
|
14974
|
+
"parameters": [
|
|
14975
|
+
{
|
|
14976
|
+
"name": "iconHtml",
|
|
14977
|
+
"type": {
|
|
14978
|
+
"text": "HTMLElement"
|
|
14979
|
+
},
|
|
14980
|
+
"description": "The icon html element which has been fetched from the icon provider."
|
|
14981
|
+
}
|
|
14982
|
+
],
|
|
14983
|
+
"description": "Sets the iconData state to the fetched icon.\nDispatches a 'load' event on the component once the icon has been successfully loaded."
|
|
14984
|
+
},
|
|
14985
|
+
{
|
|
14986
|
+
"kind": "method",
|
|
14987
|
+
"name": "handleIconLoadedFailure",
|
|
14988
|
+
"privacy": "private",
|
|
14989
|
+
"parameters": [
|
|
14990
|
+
{
|
|
14991
|
+
"name": "error",
|
|
14992
|
+
"type": {
|
|
14993
|
+
"text": "unknown"
|
|
14994
|
+
}
|
|
14995
|
+
}
|
|
14996
|
+
],
|
|
14997
|
+
"description": "Dispatches an 'error' event on the component when the icon fetching has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
|
|
14998
|
+
},
|
|
14999
|
+
{
|
|
15000
|
+
"kind": "method",
|
|
15001
|
+
"name": "updateSize",
|
|
15002
|
+
"privacy": "private",
|
|
15003
|
+
"description": "Updates the size by setting the width and height"
|
|
15004
|
+
},
|
|
15005
|
+
{
|
|
15006
|
+
"kind": "field",
|
|
15007
|
+
"name": "computedIconSize",
|
|
15008
|
+
"privacy": "private",
|
|
15009
|
+
"readonly": true
|
|
15010
|
+
}
|
|
15011
|
+
],
|
|
15012
|
+
"attributes": [
|
|
15013
|
+
{
|
|
15014
|
+
"name": "name",
|
|
15015
|
+
"type": {
|
|
15016
|
+
"text": "IconNames | undefined"
|
|
15017
|
+
},
|
|
15018
|
+
"description": "Name of the icon (= filename)",
|
|
15019
|
+
"fieldName": "name"
|
|
15020
|
+
},
|
|
15021
|
+
{
|
|
15022
|
+
"name": "size",
|
|
15023
|
+
"type": {
|
|
15024
|
+
"text": "number | undefined"
|
|
15025
|
+
},
|
|
15026
|
+
"description": "Size of the icon (works in combination with length unit)",
|
|
15027
|
+
"fieldName": "size"
|
|
15028
|
+
},
|
|
15029
|
+
{
|
|
15030
|
+
"name": "length-unit",
|
|
15031
|
+
"type": {
|
|
15032
|
+
"text": "string | undefined"
|
|
15033
|
+
},
|
|
15034
|
+
"description": "Length unit attribute for overriding length-unit from `IconProvider`",
|
|
15035
|
+
"fieldName": "lengthUnit"
|
|
15036
|
+
},
|
|
15037
|
+
{
|
|
15038
|
+
"name": "aria-label",
|
|
15039
|
+
"type": {
|
|
15040
|
+
"text": "string | null"
|
|
15041
|
+
},
|
|
15042
|
+
"default": "null",
|
|
15043
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
15044
|
+
"fieldName": "ariaLabel"
|
|
15045
|
+
},
|
|
15046
|
+
{
|
|
15047
|
+
"name": "aria-labelledby",
|
|
15048
|
+
"type": {
|
|
15049
|
+
"text": "string | null"
|
|
15050
|
+
},
|
|
15051
|
+
"default": "null",
|
|
15052
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
15053
|
+
"fieldName": "ariaLabelledBy"
|
|
15054
|
+
}
|
|
15055
|
+
],
|
|
15056
|
+
"superclass": {
|
|
15057
|
+
"name": "Component",
|
|
15058
|
+
"module": "/src/models"
|
|
15059
|
+
},
|
|
15060
|
+
"tagName": "mdc-icon",
|
|
15061
|
+
"jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n * by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n * the role will be unset.\n *\n * ### Informative Standalone Icons\n * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\n * have a Tooltip that describes what it means.\n * - For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\n * and the `role` will be set to \"img\" automatically.\n * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n * @cssproperty --mdc-icon-size - Allows customization of the icon size.\n * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.\n *\n * @csspart icon - The svg inside the icon element.\n */",
|
|
15062
|
+
"customElement": true
|
|
15063
|
+
}
|
|
15064
|
+
],
|
|
15065
|
+
"exports": [
|
|
15066
|
+
{
|
|
15067
|
+
"kind": "js",
|
|
15068
|
+
"name": "default",
|
|
15069
|
+
"declaration": {
|
|
15070
|
+
"name": "Icon",
|
|
15071
|
+
"module": "components/icon/icon.component.js"
|
|
15072
|
+
}
|
|
15073
|
+
}
|
|
15074
|
+
]
|
|
15075
|
+
},
|
|
15076
15076
|
{
|
|
15077
15077
|
"kind": "javascript-module",
|
|
15078
15078
|
"path": "components/inputchip/inputchip.component.js",
|
|
@@ -36904,905 +36904,205 @@
|
|
|
36904
36904
|
},
|
|
36905
36905
|
{
|
|
36906
36906
|
"kind": "javascript-module",
|
|
36907
|
-
"path": "components/
|
|
36907
|
+
"path": "components/toast/toast.component.js",
|
|
36908
36908
|
"declarations": [
|
|
36909
36909
|
{
|
|
36910
36910
|
"kind": "class",
|
|
36911
|
-
"description": "
|
|
36912
|
-
"name": "
|
|
36911
|
+
"description": "`mdc-toast` is a lightweight, non-blocking alert used to inform users about application processes.\nIt supports success, warning, error, and custom messages, and is designed to be controlled externally.\n\n**Note**: When using `slot=\"toast-body-normal\"` and `slot=\"toast-body-detailed\"`, it's strongly recommended to wrap the content with `<mdc-text tagname=\"span\">`.\nIf not used, ensure your custom content is styled appropriately to match the design and alignment expectations of the toast component.",
|
|
36912
|
+
"name": "Toast",
|
|
36913
36913
|
"cssProperties": [
|
|
36914
36914
|
{
|
|
36915
|
-
"description": "
|
|
36916
|
-
"name": "--mdc-
|
|
36915
|
+
"description": "Background color of the toast.",
|
|
36916
|
+
"name": "--mdc-toast-background-color"
|
|
36917
36917
|
},
|
|
36918
36918
|
{
|
|
36919
|
-
"description": "
|
|
36920
|
-
"name": "--mdc-
|
|
36919
|
+
"description": "Border color of the toast.",
|
|
36920
|
+
"name": "--mdc-toast-border-color"
|
|
36921
36921
|
},
|
|
36922
36922
|
{
|
|
36923
|
-
"description": "
|
|
36924
|
-
"name": "--mdc-
|
|
36923
|
+
"description": "Color of the header text in the toast.",
|
|
36924
|
+
"name": "--mdc-toast-header-text-color"
|
|
36925
36925
|
},
|
|
36926
36926
|
{
|
|
36927
|
-
"description": "
|
|
36928
|
-
"name": "--mdc-
|
|
36927
|
+
"description": "Color of the icon in the toast.",
|
|
36928
|
+
"name": "--mdc-toast-icon-color"
|
|
36929
36929
|
},
|
|
36930
36930
|
{
|
|
36931
|
-
"description": "
|
|
36932
|
-
"name": "--mdc-
|
|
36931
|
+
"description": "Elevation effect applied to the toast.",
|
|
36932
|
+
"name": "--mdc-toast-elevation-3"
|
|
36933
36933
|
},
|
|
36934
36934
|
{
|
|
36935
|
-
"description": "
|
|
36936
|
-
"name": "--mdc-
|
|
36935
|
+
"description": "Width of the toast.",
|
|
36936
|
+
"name": "--mdc-toast-width"
|
|
36937
36937
|
},
|
|
36938
36938
|
{
|
|
36939
|
-
"description": "
|
|
36940
|
-
"name": "--mdc-
|
|
36939
|
+
"description": "Padding inside the toast.",
|
|
36940
|
+
"name": "--mdc-toast-padding"
|
|
36941
|
+
}
|
|
36942
|
+
],
|
|
36943
|
+
"cssParts": [
|
|
36944
|
+
{
|
|
36945
|
+
"description": "The container for the toast's main content, including icon, text, and close button.",
|
|
36946
|
+
"name": "content-container"
|
|
36941
36947
|
},
|
|
36942
36948
|
{
|
|
36943
|
-
"description": "
|
|
36944
|
-
"name": "
|
|
36949
|
+
"description": "The icon shown at the start of the toast, styled by variant.",
|
|
36950
|
+
"name": "toast-prefix-icon"
|
|
36945
36951
|
},
|
|
36946
36952
|
{
|
|
36947
|
-
"description": "
|
|
36948
|
-
"name": "
|
|
36953
|
+
"description": "The container for the header and body content of the toast.",
|
|
36954
|
+
"name": "toast-content"
|
|
36949
36955
|
},
|
|
36950
36956
|
{
|
|
36951
|
-
"description": "
|
|
36952
|
-
"name": "
|
|
36957
|
+
"description": "The header text of the toast.",
|
|
36958
|
+
"name": "toast-header"
|
|
36953
36959
|
},
|
|
36954
36960
|
{
|
|
36955
|
-
"description": "
|
|
36956
|
-
"name": "
|
|
36961
|
+
"description": "The container for the toast's footer, including toggle and action buttons.",
|
|
36962
|
+
"name": "footer"
|
|
36957
36963
|
},
|
|
36958
36964
|
{
|
|
36959
|
-
"description": "
|
|
36960
|
-
"name": "
|
|
36965
|
+
"description": "The toggle button for showing/hiding detailed content.",
|
|
36966
|
+
"name": "footer-button-toggle"
|
|
36961
36967
|
},
|
|
36962
36968
|
{
|
|
36963
|
-
"description": "
|
|
36964
|
-
"name": "
|
|
36969
|
+
"description": "The close button for the toast.",
|
|
36970
|
+
"name": "toast-close-btn"
|
|
36971
|
+
}
|
|
36972
|
+
],
|
|
36973
|
+
"slots": [
|
|
36974
|
+
{
|
|
36975
|
+
"description": "Slot for custom content before the icon (only for custom variant).",
|
|
36976
|
+
"name": "content-prefix"
|
|
36977
|
+
},
|
|
36978
|
+
{
|
|
36979
|
+
"description": "Slot for the main body content of the toast.",
|
|
36980
|
+
"name": "toast-body-normal"
|
|
36981
|
+
},
|
|
36982
|
+
{
|
|
36983
|
+
"description": "Slot for additional detailed content, shown when expanded.",
|
|
36984
|
+
"name": "toast-body-detailed"
|
|
36985
|
+
},
|
|
36986
|
+
{
|
|
36987
|
+
"description": "Slot for custom footer content. Prefer using footer-button-primary and footer-button-secondary slots.",
|
|
36988
|
+
"name": "footer"
|
|
36989
|
+
},
|
|
36990
|
+
{
|
|
36991
|
+
"description": "Slot for passing the primary variant of `mdc-button` in the footer.",
|
|
36992
|
+
"name": "footer-button-primary"
|
|
36993
|
+
},
|
|
36994
|
+
{
|
|
36995
|
+
"description": "Slot for passing the secondary variant of `mdc-button` in the footer.",
|
|
36996
|
+
"name": "footer-button-secondary"
|
|
36965
36997
|
}
|
|
36966
36998
|
],
|
|
36967
36999
|
"members": [
|
|
36968
37000
|
{
|
|
36969
37001
|
"kind": "field",
|
|
36970
|
-
"name": "
|
|
37002
|
+
"name": "variant",
|
|
36971
37003
|
"type": {
|
|
36972
|
-
"text": "
|
|
37004
|
+
"text": "ToastVariant"
|
|
36973
37005
|
},
|
|
36974
|
-
"
|
|
36975
|
-
"
|
|
36976
|
-
"attribute": "
|
|
37006
|
+
"description": "Type of toast\n- Can be `custom`, `success`, `warning` or `error`.",
|
|
37007
|
+
"default": "'custom'",
|
|
37008
|
+
"attribute": "variant",
|
|
36977
37009
|
"reflects": true
|
|
36978
37010
|
},
|
|
36979
37011
|
{
|
|
36980
37012
|
"kind": "field",
|
|
36981
|
-
"name": "
|
|
37013
|
+
"name": "closeButtonAriaLabel",
|
|
36982
37014
|
"type": {
|
|
36983
|
-
"text": "
|
|
37015
|
+
"text": "string | undefined"
|
|
36984
37016
|
},
|
|
36985
|
-
"description": "
|
|
36986
|
-
"
|
|
36987
|
-
"attribute": "size",
|
|
36988
|
-
"reflects": true
|
|
37017
|
+
"description": "Defines aria-label attribute for close button accessibility",
|
|
37018
|
+
"attribute": "close-button-aria-label"
|
|
36989
37019
|
},
|
|
36990
37020
|
{
|
|
36991
37021
|
"kind": "field",
|
|
36992
|
-
"name": "
|
|
37022
|
+
"name": "headerText",
|
|
36993
37023
|
"type": {
|
|
36994
|
-
"text": "
|
|
37024
|
+
"text": "string | undefined"
|
|
36995
37025
|
},
|
|
36996
|
-
"
|
|
36997
|
-
"
|
|
36998
|
-
"attribute": "autofocus",
|
|
37026
|
+
"description": "Defines a string value to display as the title of the toast",
|
|
37027
|
+
"attribute": "header-text",
|
|
36999
37028
|
"reflects": true
|
|
37000
37029
|
},
|
|
37001
37030
|
{
|
|
37002
|
-
"kind": "
|
|
37003
|
-
"name": "
|
|
37004
|
-
"
|
|
37005
|
-
|
|
37006
|
-
},
|
|
37007
|
-
{
|
|
37008
|
-
"kind": "method",
|
|
37009
|
-
"name": "setFormValue",
|
|
37010
|
-
"privacy": "private",
|
|
37011
|
-
"description": "Updates the form value to reflect the current state of the toggle.\nIf toggle is switched on, the value is set to either the user-provided value or 'isActive' if no value is provided.\nIf toggle is switched off, the value is set to null."
|
|
37012
|
-
},
|
|
37013
|
-
{
|
|
37014
|
-
"kind": "method",
|
|
37015
|
-
"name": "toggleState",
|
|
37016
|
-
"privacy": "private",
|
|
37017
|
-
"return": {
|
|
37018
|
-
"type": {
|
|
37019
|
-
"text": "void"
|
|
37020
|
-
}
|
|
37031
|
+
"kind": "field",
|
|
37032
|
+
"name": "headerTagName",
|
|
37033
|
+
"type": {
|
|
37034
|
+
"text": "TagName"
|
|
37021
37035
|
},
|
|
37022
|
-
"description": "
|
|
37036
|
+
"description": "The html tag to be used for the header text",
|
|
37037
|
+
"default": "'h2'",
|
|
37038
|
+
"attribute": "header-tag-name",
|
|
37039
|
+
"reflects": true
|
|
37023
37040
|
},
|
|
37024
37041
|
{
|
|
37025
|
-
"kind": "
|
|
37026
|
-
"name": "
|
|
37027
|
-
"
|
|
37028
|
-
|
|
37029
|
-
"type": {
|
|
37030
|
-
"text": "void"
|
|
37031
|
-
}
|
|
37042
|
+
"kind": "field",
|
|
37043
|
+
"name": "ariaLabel",
|
|
37044
|
+
"type": {
|
|
37045
|
+
"text": "string | null"
|
|
37032
37046
|
},
|
|
37033
|
-
"
|
|
37034
|
-
|
|
37035
|
-
|
|
37036
|
-
|
|
37037
|
-
"text": "KeyboardEvent"
|
|
37038
|
-
},
|
|
37039
|
-
"description": "The keyboard event."
|
|
37040
|
-
}
|
|
37041
|
-
],
|
|
37042
|
-
"description": "Handles the keydown event on the toggle element.\nWhen the user presses Enter, the form is submitted."
|
|
37047
|
+
"default": "null",
|
|
37048
|
+
"description": "Defines aria-label attribute when header is not used",
|
|
37049
|
+
"attribute": "aria-label",
|
|
37050
|
+
"reflects": true
|
|
37043
37051
|
},
|
|
37044
37052
|
{
|
|
37045
|
-
"kind": "
|
|
37046
|
-
"name": "
|
|
37047
|
-
"
|
|
37048
|
-
|
|
37049
|
-
|
|
37050
|
-
|
|
37051
|
-
|
|
37052
|
-
|
|
37053
|
-
}
|
|
37054
|
-
}
|
|
37055
|
-
],
|
|
37056
|
-
"description": "Toggles the state of the toggle element.\nand dispatch the new change event."
|
|
37053
|
+
"kind": "field",
|
|
37054
|
+
"name": "showMoreText",
|
|
37055
|
+
"type": {
|
|
37056
|
+
"text": "string | undefined"
|
|
37057
|
+
},
|
|
37058
|
+
"description": "Defines the text shown on the linkbutton when detailed content is hidden.",
|
|
37059
|
+
"attribute": "show-more-text",
|
|
37060
|
+
"reflects": true
|
|
37057
37061
|
},
|
|
37058
37062
|
{
|
|
37059
|
-
"kind": "
|
|
37060
|
-
"name": "
|
|
37061
|
-
"
|
|
37062
|
-
|
|
37063
|
-
|
|
37064
|
-
|
|
37065
|
-
|
|
37066
|
-
|
|
37067
|
-
},
|
|
37068
|
-
"description": "The size to set."
|
|
37069
|
-
}
|
|
37070
|
-
],
|
|
37071
|
-
"description": "Sets the size attribute for the toggle component.\nIf the provided size is not included in the TOGGLE_SIZE,\nit defaults to the value specified in DEFAULTS.SIZE."
|
|
37063
|
+
"kind": "field",
|
|
37064
|
+
"name": "showLessText",
|
|
37065
|
+
"type": {
|
|
37066
|
+
"text": "string | undefined"
|
|
37067
|
+
},
|
|
37068
|
+
"description": "Defines the text shown on the linkbutton when detailed content is visible.",
|
|
37069
|
+
"attribute": "show-less-text",
|
|
37070
|
+
"reflects": true
|
|
37072
37071
|
},
|
|
37073
37072
|
{
|
|
37074
37073
|
"kind": "field",
|
|
37075
|
-
"name": "
|
|
37074
|
+
"name": "isDetailVisible",
|
|
37076
37075
|
"type": {
|
|
37077
|
-
"text": "
|
|
37076
|
+
"text": "boolean"
|
|
37078
37077
|
},
|
|
37079
|
-
"
|
|
37080
|
-
"
|
|
37081
|
-
"attribute": "name",
|
|
37082
|
-
"reflects": true,
|
|
37083
|
-
"inheritedFrom": {
|
|
37084
|
-
"name": "FormInternalsMixin",
|
|
37085
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
37086
|
-
}
|
|
37078
|
+
"privacy": "private",
|
|
37079
|
+
"default": "false"
|
|
37087
37080
|
},
|
|
37088
37081
|
{
|
|
37089
37082
|
"kind": "field",
|
|
37090
|
-
"name": "
|
|
37083
|
+
"name": "hasDetailedSlot",
|
|
37091
37084
|
"type": {
|
|
37092
|
-
"text": "
|
|
37085
|
+
"text": "boolean"
|
|
37093
37086
|
},
|
|
37094
|
-
"
|
|
37095
|
-
"
|
|
37096
|
-
"attribute": "value",
|
|
37097
|
-
"reflects": true,
|
|
37098
|
-
"inheritedFrom": {
|
|
37099
|
-
"name": "FormInternalsMixin",
|
|
37100
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
37101
|
-
}
|
|
37087
|
+
"privacy": "private",
|
|
37088
|
+
"default": "false"
|
|
37102
37089
|
},
|
|
37103
37090
|
{
|
|
37104
37091
|
"kind": "field",
|
|
37105
|
-
"name": "
|
|
37092
|
+
"name": "detailedElements",
|
|
37106
37093
|
"type": {
|
|
37107
|
-
"text": "
|
|
37094
|
+
"text": "HTMLElement[]"
|
|
37108
37095
|
},
|
|
37109
|
-
"
|
|
37110
|
-
"attribute": "validation-message",
|
|
37111
|
-
"reflects": true,
|
|
37112
|
-
"inheritedFrom": {
|
|
37113
|
-
"name": "FormInternalsMixin",
|
|
37114
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
37115
|
-
}
|
|
37096
|
+
"privacy": "private"
|
|
37116
37097
|
},
|
|
37117
37098
|
{
|
|
37118
37099
|
"kind": "field",
|
|
37119
|
-
"name": "
|
|
37100
|
+
"name": "hasFooterButtons",
|
|
37120
37101
|
"type": {
|
|
37121
|
-
"text": "
|
|
37102
|
+
"text": "string"
|
|
37122
37103
|
},
|
|
37123
|
-
"
|
|
37124
|
-
"
|
|
37125
|
-
"name": "FormInternalsMixin",
|
|
37126
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
37127
|
-
}
|
|
37128
|
-
},
|
|
37129
|
-
{
|
|
37130
|
-
"kind": "field",
|
|
37131
|
-
"name": "willValidate",
|
|
37132
|
-
"readonly": true,
|
|
37133
|
-
"inheritedFrom": {
|
|
37134
|
-
"name": "FormInternalsMixin",
|
|
37135
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
37136
|
-
}
|
|
37137
|
-
},
|
|
37138
|
-
{
|
|
37139
|
-
"kind": "method",
|
|
37140
|
-
"name": "setValidity",
|
|
37141
|
-
"description": "Sets the validity of the input field based on the input field's validity.",
|
|
37142
|
-
"return": {
|
|
37143
|
-
"type": {
|
|
37144
|
-
"text": ""
|
|
37145
|
-
}
|
|
37146
|
-
},
|
|
37147
|
-
"inheritedFrom": {
|
|
37148
|
-
"name": "FormInternalsMixin",
|
|
37149
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
37150
|
-
}
|
|
37151
|
-
},
|
|
37152
|
-
{
|
|
37153
|
-
"kind": "method",
|
|
37154
|
-
"name": "checkValidity",
|
|
37155
|
-
"return": {
|
|
37156
|
-
"type": {
|
|
37157
|
-
"text": "boolean"
|
|
37158
|
-
}
|
|
37159
|
-
},
|
|
37160
|
-
"inheritedFrom": {
|
|
37161
|
-
"name": "FormInternalsMixin",
|
|
37162
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
37163
|
-
}
|
|
37164
|
-
},
|
|
37165
|
-
{
|
|
37166
|
-
"kind": "method",
|
|
37167
|
-
"name": "reportValidity",
|
|
37168
|
-
"inheritedFrom": {
|
|
37169
|
-
"name": "FormInternalsMixin",
|
|
37170
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
37171
|
-
}
|
|
37172
|
-
},
|
|
37173
|
-
{
|
|
37174
|
-
"kind": "field",
|
|
37175
|
-
"name": "dataAriaLabel",
|
|
37176
|
-
"type": {
|
|
37177
|
-
"text": "string | null"
|
|
37178
|
-
},
|
|
37179
|
-
"default": "null",
|
|
37180
|
-
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
37181
|
-
"attribute": "data-aria-label",
|
|
37182
|
-
"reflects": true,
|
|
37183
|
-
"inheritedFrom": {
|
|
37184
|
-
"name": "DataAriaLabelMixin",
|
|
37185
|
-
"module": "utils/mixins/DataAriaLabelMixin.js"
|
|
37186
|
-
}
|
|
37187
|
-
},
|
|
37188
|
-
{
|
|
37189
|
-
"kind": "field",
|
|
37190
|
-
"name": "disabled",
|
|
37191
|
-
"type": {
|
|
37192
|
-
"text": "boolean | undefined"
|
|
37193
|
-
},
|
|
37194
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
37195
|
-
"default": "undefined",
|
|
37196
|
-
"attribute": "disabled",
|
|
37197
|
-
"reflects": true,
|
|
37198
|
-
"inheritedFrom": {
|
|
37199
|
-
"name": "FormfieldWrapper",
|
|
37200
|
-
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
37201
|
-
}
|
|
37202
|
-
},
|
|
37203
|
-
{
|
|
37204
|
-
"kind": "field",
|
|
37205
|
-
"name": "label",
|
|
37206
|
-
"type": {
|
|
37207
|
-
"text": "string | undefined"
|
|
37208
|
-
},
|
|
37209
|
-
"description": "The label of the input field. It is linked to the input field using the `for` attribute.",
|
|
37210
|
-
"attribute": "label",
|
|
37211
|
-
"reflects": true,
|
|
37212
|
-
"inheritedFrom": {
|
|
37213
|
-
"name": "FormfieldWrapper",
|
|
37214
|
-
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
37215
|
-
}
|
|
37216
|
-
},
|
|
37217
|
-
{
|
|
37218
|
-
"kind": "field",
|
|
37219
|
-
"name": "required",
|
|
37220
|
-
"type": {
|
|
37221
|
-
"text": "boolean"
|
|
37222
|
-
},
|
|
37223
|
-
"default": "false",
|
|
37224
|
-
"description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
|
|
37225
|
-
"attribute": "required",
|
|
37226
|
-
"reflects": true,
|
|
37227
|
-
"inheritedFrom": {
|
|
37228
|
-
"name": "FormfieldWrapper",
|
|
37229
|
-
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
37230
|
-
}
|
|
37231
|
-
},
|
|
37232
|
-
{
|
|
37233
|
-
"kind": "field",
|
|
37234
|
-
"name": "helpTextType",
|
|
37235
|
-
"type": {
|
|
37236
|
-
"text": "ValidationType"
|
|
37237
|
-
},
|
|
37238
|
-
"description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
|
|
37239
|
-
"attribute": "help-text-type",
|
|
37240
|
-
"reflects": true,
|
|
37241
|
-
"inheritedFrom": {
|
|
37242
|
-
"name": "FormfieldWrapper",
|
|
37243
|
-
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
37244
|
-
}
|
|
37245
|
-
},
|
|
37246
|
-
{
|
|
37247
|
-
"kind": "field",
|
|
37248
|
-
"name": "helpText",
|
|
37249
|
-
"type": {
|
|
37250
|
-
"text": "string | undefined"
|
|
37251
|
-
},
|
|
37252
|
-
"description": "The help text that is displayed below the input field.",
|
|
37253
|
-
"attribute": "help-text",
|
|
37254
|
-
"reflects": true,
|
|
37255
|
-
"inheritedFrom": {
|
|
37256
|
-
"name": "FormfieldWrapper",
|
|
37257
|
-
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
37258
|
-
}
|
|
37259
|
-
},
|
|
37260
|
-
{
|
|
37261
|
-
"kind": "field",
|
|
37262
|
-
"name": "toggletipText",
|
|
37263
|
-
"type": {
|
|
37264
|
-
"text": "string | undefined"
|
|
37265
|
-
},
|
|
37266
|
-
"description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
|
|
37267
|
-
"attribute": "toggletip-text",
|
|
37268
|
-
"reflects": true,
|
|
37269
|
-
"inheritedFrom": {
|
|
37270
|
-
"name": "FormfieldWrapper",
|
|
37271
|
-
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
37272
|
-
}
|
|
37273
|
-
},
|
|
37274
|
-
{
|
|
37275
|
-
"kind": "field",
|
|
37276
|
-
"name": "toggletipPlacement",
|
|
37277
|
-
"type": {
|
|
37278
|
-
"text": "PopoverPlacement"
|
|
37279
|
-
},
|
|
37280
|
-
"description": "The placement of the toggletip that is displayed when the info icon is hovered.",
|
|
37281
|
-
"default": "'top'",
|
|
37282
|
-
"attribute": "toggletip-placement",
|
|
37283
|
-
"reflects": true,
|
|
37284
|
-
"inheritedFrom": {
|
|
37285
|
-
"name": "FormfieldWrapper",
|
|
37286
|
-
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
37287
|
-
}
|
|
37288
|
-
},
|
|
37289
|
-
{
|
|
37290
|
-
"kind": "field",
|
|
37291
|
-
"name": "infoIconAriaLabel",
|
|
37292
|
-
"type": {
|
|
37293
|
-
"text": "string | undefined"
|
|
37294
|
-
},
|
|
37295
|
-
"description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
|
|
37296
|
-
"attribute": "info-icon-aria-label",
|
|
37297
|
-
"reflects": true,
|
|
37298
|
-
"inheritedFrom": {
|
|
37299
|
-
"name": "FormfieldWrapper",
|
|
37300
|
-
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
37301
|
-
}
|
|
37302
|
-
},
|
|
37303
|
-
{
|
|
37304
|
-
"kind": "method",
|
|
37305
|
-
"name": "renderLabelElement",
|
|
37306
|
-
"privacy": "protected",
|
|
37307
|
-
"description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
|
|
37308
|
-
"return": {
|
|
37309
|
-
"type": {
|
|
37310
|
-
"text": ""
|
|
37311
|
-
}
|
|
37312
|
-
},
|
|
37313
|
-
"inheritedFrom": {
|
|
37314
|
-
"name": "FormfieldWrapper",
|
|
37315
|
-
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
37316
|
-
}
|
|
37317
|
-
},
|
|
37318
|
-
{
|
|
37319
|
-
"kind": "method",
|
|
37320
|
-
"name": "renderHelpTextIcon",
|
|
37321
|
-
"privacy": "protected",
|
|
37322
|
-
"description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
|
|
37323
|
-
"return": {
|
|
37324
|
-
"type": {
|
|
37325
|
-
"text": ""
|
|
37326
|
-
}
|
|
37327
|
-
},
|
|
37328
|
-
"inheritedFrom": {
|
|
37329
|
-
"name": "FormfieldWrapper",
|
|
37330
|
-
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
37331
|
-
}
|
|
37332
|
-
},
|
|
37333
|
-
{
|
|
37334
|
-
"kind": "method",
|
|
37335
|
-
"name": "renderHelpText",
|
|
37336
|
-
"privacy": "protected",
|
|
37337
|
-
"description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
|
|
37338
|
-
"return": {
|
|
37339
|
-
"type": {
|
|
37340
|
-
"text": ""
|
|
37341
|
-
}
|
|
37342
|
-
},
|
|
37343
|
-
"inheritedFrom": {
|
|
37344
|
-
"name": "FormfieldWrapper",
|
|
37345
|
-
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
37346
|
-
}
|
|
37347
|
-
},
|
|
37348
|
-
{
|
|
37349
|
-
"kind": "method",
|
|
37350
|
-
"name": "renderLabel",
|
|
37351
|
-
"privacy": "protected",
|
|
37352
|
-
"description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
|
|
37353
|
-
"return": {
|
|
37354
|
-
"type": {
|
|
37355
|
-
"text": ""
|
|
37356
|
-
}
|
|
37357
|
-
},
|
|
37358
|
-
"inheritedFrom": {
|
|
37359
|
-
"name": "FormfieldWrapper",
|
|
37360
|
-
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
37361
|
-
}
|
|
37362
|
-
},
|
|
37363
|
-
{
|
|
37364
|
-
"kind": "method",
|
|
37365
|
-
"name": "renderHelperText",
|
|
37366
|
-
"privacy": "protected",
|
|
37367
|
-
"description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
|
|
37368
|
-
"return": {
|
|
37369
|
-
"type": {
|
|
37370
|
-
"text": ""
|
|
37371
|
-
}
|
|
37372
|
-
},
|
|
37373
|
-
"inheritedFrom": {
|
|
37374
|
-
"name": "FormfieldWrapper",
|
|
37375
|
-
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
37376
|
-
}
|
|
37377
|
-
}
|
|
37378
|
-
],
|
|
37379
|
-
"events": [
|
|
37380
|
-
{
|
|
37381
|
-
"type": {
|
|
37382
|
-
"text": "EventConstructor"
|
|
37383
|
-
}
|
|
37384
|
-
},
|
|
37385
|
-
{
|
|
37386
|
-
"description": "(React: onChange) Event that gets dispatched when the toggle state changes.",
|
|
37387
|
-
"name": "change",
|
|
37388
|
-
"reactName": "onChange"
|
|
37389
|
-
},
|
|
37390
|
-
{
|
|
37391
|
-
"description": "(React: onFocus) Event that gets dispatched when the toggle receives focus.",
|
|
37392
|
-
"name": "focus",
|
|
37393
|
-
"reactName": "onFocus"
|
|
37394
|
-
}
|
|
37395
|
-
],
|
|
37396
|
-
"attributes": [
|
|
37397
|
-
{
|
|
37398
|
-
"name": "checked",
|
|
37399
|
-
"type": {
|
|
37400
|
-
"text": "boolean"
|
|
37401
|
-
},
|
|
37402
|
-
"default": "false",
|
|
37403
|
-
"description": "Determines whether the toggle is active or inactive.",
|
|
37404
|
-
"fieldName": "checked"
|
|
37405
|
-
},
|
|
37406
|
-
{
|
|
37407
|
-
"name": "size",
|
|
37408
|
-
"type": {
|
|
37409
|
-
"text": "ToggleSize"
|
|
37410
|
-
},
|
|
37411
|
-
"description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
|
|
37412
|
-
"default": "default",
|
|
37413
|
-
"fieldName": "size"
|
|
37414
|
-
},
|
|
37415
|
-
{
|
|
37416
|
-
"name": "autofocus",
|
|
37417
|
-
"type": {
|
|
37418
|
-
"text": "boolean"
|
|
37419
|
-
},
|
|
37420
|
-
"default": "false",
|
|
37421
|
-
"description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
|
|
37422
|
-
"fieldName": "autofocus"
|
|
37423
|
-
},
|
|
37424
|
-
{
|
|
37425
|
-
"name": "name",
|
|
37426
|
-
"type": {
|
|
37427
|
-
"text": "string"
|
|
37428
|
-
},
|
|
37429
|
-
"default": "''",
|
|
37430
|
-
"description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
|
|
37431
|
-
"fieldName": "name",
|
|
37432
|
-
"inheritedFrom": {
|
|
37433
|
-
"name": "FormInternalsMixin",
|
|
37434
|
-
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
|
37435
|
-
}
|
|
37436
|
-
},
|
|
37437
|
-
{
|
|
37438
|
-
"name": "value",
|
|
37439
|
-
"type": {
|
|
37440
|
-
"text": "string"
|
|
37441
|
-
},
|
|
37442
|
-
"default": "''",
|
|
37443
|
-
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
|
37444
|
-
"fieldName": "value",
|
|
37445
|
-
"inheritedFrom": {
|
|
37446
|
-
"name": "FormInternalsMixin",
|
|
37447
|
-
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
|
37448
|
-
}
|
|
37449
|
-
},
|
|
37450
|
-
{
|
|
37451
|
-
"name": "validation-message",
|
|
37452
|
-
"type": {
|
|
37453
|
-
"text": "string | undefined"
|
|
37454
|
-
},
|
|
37455
|
-
"description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
|
|
37456
|
-
"fieldName": "validationMessage",
|
|
37457
|
-
"inheritedFrom": {
|
|
37458
|
-
"name": "FormInternalsMixin",
|
|
37459
|
-
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
|
37460
|
-
}
|
|
37461
|
-
},
|
|
37462
|
-
{
|
|
37463
|
-
"name": "data-aria-label",
|
|
37464
|
-
"type": {
|
|
37465
|
-
"text": "string | null"
|
|
37466
|
-
},
|
|
37467
|
-
"default": "null",
|
|
37468
|
-
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
37469
|
-
"fieldName": "dataAriaLabel",
|
|
37470
|
-
"inheritedFrom": {
|
|
37471
|
-
"name": "DataAriaLabelMixin",
|
|
37472
|
-
"module": "src/utils/mixins/DataAriaLabelMixin.ts"
|
|
37473
|
-
}
|
|
37474
|
-
},
|
|
37475
|
-
{
|
|
37476
|
-
"name": "disabled",
|
|
37477
|
-
"type": {
|
|
37478
|
-
"text": "boolean | undefined"
|
|
37479
|
-
},
|
|
37480
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
37481
|
-
"default": "undefined",
|
|
37482
|
-
"fieldName": "disabled",
|
|
37483
|
-
"inheritedFrom": {
|
|
37484
|
-
"name": "FormfieldWrapper",
|
|
37485
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
37486
|
-
}
|
|
37487
|
-
},
|
|
37488
|
-
{
|
|
37489
|
-
"name": "label",
|
|
37490
|
-
"type": {
|
|
37491
|
-
"text": "string | undefined"
|
|
37492
|
-
},
|
|
37493
|
-
"description": "The label of the input field. It is linked to the input field using the `for` attribute.",
|
|
37494
|
-
"fieldName": "label",
|
|
37495
|
-
"inheritedFrom": {
|
|
37496
|
-
"name": "FormfieldWrapper",
|
|
37497
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
37498
|
-
}
|
|
37499
|
-
},
|
|
37500
|
-
{
|
|
37501
|
-
"name": "required",
|
|
37502
|
-
"type": {
|
|
37503
|
-
"text": "boolean"
|
|
37504
|
-
},
|
|
37505
|
-
"default": "false",
|
|
37506
|
-
"description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
|
|
37507
|
-
"fieldName": "required",
|
|
37508
|
-
"inheritedFrom": {
|
|
37509
|
-
"name": "FormfieldWrapper",
|
|
37510
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
37511
|
-
}
|
|
37512
|
-
},
|
|
37513
|
-
{
|
|
37514
|
-
"name": "help-text-type",
|
|
37515
|
-
"type": {
|
|
37516
|
-
"text": "ValidationType"
|
|
37517
|
-
},
|
|
37518
|
-
"description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
|
|
37519
|
-
"fieldName": "helpTextType",
|
|
37520
|
-
"inheritedFrom": {
|
|
37521
|
-
"name": "FormfieldWrapper",
|
|
37522
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
37523
|
-
}
|
|
37524
|
-
},
|
|
37525
|
-
{
|
|
37526
|
-
"name": "help-text",
|
|
37527
|
-
"type": {
|
|
37528
|
-
"text": "string | undefined"
|
|
37529
|
-
},
|
|
37530
|
-
"description": "The help text that is displayed below the input field.",
|
|
37531
|
-
"fieldName": "helpText",
|
|
37532
|
-
"inheritedFrom": {
|
|
37533
|
-
"name": "FormfieldWrapper",
|
|
37534
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
37535
|
-
}
|
|
37536
|
-
},
|
|
37537
|
-
{
|
|
37538
|
-
"name": "toggletip-text",
|
|
37539
|
-
"type": {
|
|
37540
|
-
"text": "string | undefined"
|
|
37541
|
-
},
|
|
37542
|
-
"description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
|
|
37543
|
-
"fieldName": "toggletipText",
|
|
37544
|
-
"inheritedFrom": {
|
|
37545
|
-
"name": "FormfieldWrapper",
|
|
37546
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
37547
|
-
}
|
|
37548
|
-
},
|
|
37549
|
-
{
|
|
37550
|
-
"name": "toggletip-placement",
|
|
37551
|
-
"type": {
|
|
37552
|
-
"text": "PopoverPlacement"
|
|
37553
|
-
},
|
|
37554
|
-
"description": "The placement of the toggletip that is displayed when the info icon is hovered.",
|
|
37555
|
-
"default": "'top'",
|
|
37556
|
-
"fieldName": "toggletipPlacement",
|
|
37557
|
-
"inheritedFrom": {
|
|
37558
|
-
"name": "FormfieldWrapper",
|
|
37559
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
37560
|
-
}
|
|
37561
|
-
},
|
|
37562
|
-
{
|
|
37563
|
-
"name": "info-icon-aria-label",
|
|
37564
|
-
"type": {
|
|
37565
|
-
"text": "string | undefined"
|
|
37566
|
-
},
|
|
37567
|
-
"description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
|
|
37568
|
-
"fieldName": "infoIconAriaLabel",
|
|
37569
|
-
"inheritedFrom": {
|
|
37570
|
-
"name": "FormfieldWrapper",
|
|
37571
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
37572
|
-
}
|
|
37573
|
-
}
|
|
37574
|
-
],
|
|
37575
|
-
"mixins": [
|
|
37576
|
-
{
|
|
37577
|
-
"name": "FormInternalsMixin",
|
|
37578
|
-
"module": "/src/utils/mixins/FormInternalsMixin"
|
|
37579
|
-
},
|
|
37580
|
-
{
|
|
37581
|
-
"name": "DataAriaLabelMixin",
|
|
37582
|
-
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
|
37583
|
-
}
|
|
37584
|
-
],
|
|
37585
|
-
"superclass": {
|
|
37586
|
-
"name": "FormfieldWrapper",
|
|
37587
|
-
"module": "/src/components/formfieldwrapper"
|
|
37588
|
-
},
|
|
37589
|
-
"tagName": "mdc-toggle",
|
|
37590
|
-
"jsDoc": "/**\n * Toggle Component is an interactive control used to switch between two mutually exclusive options,\n * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\n * where users need to enable or disable a feature.\n * It contains an optional label and an optional helper text.\n *\n * To create a group of toggles, use the FormFieldGroup component.\n *\n * Note: It internally renders a checkbox styled as a toggle switch.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-statictoggle\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-toggle\n *\n * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.\n *\n * @cssproperty --mdc-toggle-width - Width of the toggle\n * @cssproperty --mdc-toggle-height - Height of the toggle\n * @cssproperty --mdc-toggle-width-compact - Width of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-height-compact - Height of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-label-lineheight - Line height of the toggle label\n * @cssproperty --mdc-toggle-label-fontsize - Font size of the toggle label\n * @cssproperty --mdc-toggle-label-fontweight - Font weight of the toggle label\n * @cssproperty --mdc-toggle-label-color-disabled - Color of the toggle label and help text in disabled state\n * @cssproperty --mdc-toggle-help-text-color - Color of the help text label\n * @cssproperty --mdc-toggle-active-hover-color - Background color of the active toggle in hover state\n * @cssproperty --mdc-toggle-active-pressed-color - Background color of the active toggle in pressed state\n * @cssproperty --mdc-toggle-inactive-hover-color - Background color of the inactive toggle in hover state\n * @cssproperty --mdc-toggle-inactive-pressed-color - Background color of the inactive toggle in pressed state\n */",
|
|
37591
|
-
"customElement": true
|
|
37592
|
-
}
|
|
37593
|
-
],
|
|
37594
|
-
"exports": [
|
|
37595
|
-
{
|
|
37596
|
-
"kind": "js",
|
|
37597
|
-
"name": "default",
|
|
37598
|
-
"declaration": {
|
|
37599
|
-
"name": "Toggle",
|
|
37600
|
-
"module": "components/toggle/toggle.component.js"
|
|
37601
|
-
}
|
|
37602
|
-
}
|
|
37603
|
-
]
|
|
37604
|
-
},
|
|
37605
|
-
{
|
|
37606
|
-
"kind": "javascript-module",
|
|
37607
|
-
"path": "components/toast/toast.component.js",
|
|
37608
|
-
"declarations": [
|
|
37609
|
-
{
|
|
37610
|
-
"kind": "class",
|
|
37611
|
-
"description": "`mdc-toast` is a lightweight, non-blocking alert used to inform users about application processes.\nIt supports success, warning, error, and custom messages, and is designed to be controlled externally.\n\n**Note**: When using `slot=\"toast-body-normal\"` and `slot=\"toast-body-detailed\"`, it's strongly recommended to wrap the content with `<mdc-text tagname=\"span\">`.\nIf not used, ensure your custom content is styled appropriately to match the design and alignment expectations of the toast component.",
|
|
37612
|
-
"name": "Toast",
|
|
37613
|
-
"cssProperties": [
|
|
37614
|
-
{
|
|
37615
|
-
"description": "Background color of the toast.",
|
|
37616
|
-
"name": "--mdc-toast-background-color"
|
|
37617
|
-
},
|
|
37618
|
-
{
|
|
37619
|
-
"description": "Border color of the toast.",
|
|
37620
|
-
"name": "--mdc-toast-border-color"
|
|
37621
|
-
},
|
|
37622
|
-
{
|
|
37623
|
-
"description": "Color of the header text in the toast.",
|
|
37624
|
-
"name": "--mdc-toast-header-text-color"
|
|
37625
|
-
},
|
|
37626
|
-
{
|
|
37627
|
-
"description": "Color of the icon in the toast.",
|
|
37628
|
-
"name": "--mdc-toast-icon-color"
|
|
37629
|
-
},
|
|
37630
|
-
{
|
|
37631
|
-
"description": "Elevation effect applied to the toast.",
|
|
37632
|
-
"name": "--mdc-toast-elevation-3"
|
|
37633
|
-
},
|
|
37634
|
-
{
|
|
37635
|
-
"description": "Width of the toast.",
|
|
37636
|
-
"name": "--mdc-toast-width"
|
|
37637
|
-
},
|
|
37638
|
-
{
|
|
37639
|
-
"description": "Padding inside the toast.",
|
|
37640
|
-
"name": "--mdc-toast-padding"
|
|
37641
|
-
}
|
|
37642
|
-
],
|
|
37643
|
-
"cssParts": [
|
|
37644
|
-
{
|
|
37645
|
-
"description": "The container for the toast's main content, including icon, text, and close button.",
|
|
37646
|
-
"name": "content-container"
|
|
37647
|
-
},
|
|
37648
|
-
{
|
|
37649
|
-
"description": "The icon shown at the start of the toast, styled by variant.",
|
|
37650
|
-
"name": "toast-prefix-icon"
|
|
37651
|
-
},
|
|
37652
|
-
{
|
|
37653
|
-
"description": "The container for the header and body content of the toast.",
|
|
37654
|
-
"name": "toast-content"
|
|
37655
|
-
},
|
|
37656
|
-
{
|
|
37657
|
-
"description": "The header text of the toast.",
|
|
37658
|
-
"name": "toast-header"
|
|
37659
|
-
},
|
|
37660
|
-
{
|
|
37661
|
-
"description": "The container for the toast's footer, including toggle and action buttons.",
|
|
37662
|
-
"name": "footer"
|
|
37663
|
-
},
|
|
37664
|
-
{
|
|
37665
|
-
"description": "The toggle button for showing/hiding detailed content.",
|
|
37666
|
-
"name": "footer-button-toggle"
|
|
37667
|
-
},
|
|
37668
|
-
{
|
|
37669
|
-
"description": "The close button for the toast.",
|
|
37670
|
-
"name": "toast-close-btn"
|
|
37671
|
-
}
|
|
37672
|
-
],
|
|
37673
|
-
"slots": [
|
|
37674
|
-
{
|
|
37675
|
-
"description": "Slot for custom content before the icon (only for custom variant).",
|
|
37676
|
-
"name": "content-prefix"
|
|
37677
|
-
},
|
|
37678
|
-
{
|
|
37679
|
-
"description": "Slot for the main body content of the toast.",
|
|
37680
|
-
"name": "toast-body-normal"
|
|
37681
|
-
},
|
|
37682
|
-
{
|
|
37683
|
-
"description": "Slot for additional detailed content, shown when expanded.",
|
|
37684
|
-
"name": "toast-body-detailed"
|
|
37685
|
-
},
|
|
37686
|
-
{
|
|
37687
|
-
"description": "Slot for custom footer content. Prefer using footer-button-primary and footer-button-secondary slots.",
|
|
37688
|
-
"name": "footer"
|
|
37689
|
-
},
|
|
37690
|
-
{
|
|
37691
|
-
"description": "Slot for passing the primary variant of `mdc-button` in the footer.",
|
|
37692
|
-
"name": "footer-button-primary"
|
|
37693
|
-
},
|
|
37694
|
-
{
|
|
37695
|
-
"description": "Slot for passing the secondary variant of `mdc-button` in the footer.",
|
|
37696
|
-
"name": "footer-button-secondary"
|
|
37697
|
-
}
|
|
37698
|
-
],
|
|
37699
|
-
"members": [
|
|
37700
|
-
{
|
|
37701
|
-
"kind": "field",
|
|
37702
|
-
"name": "variant",
|
|
37703
|
-
"type": {
|
|
37704
|
-
"text": "ToastVariant"
|
|
37705
|
-
},
|
|
37706
|
-
"description": "Type of toast\n- Can be `custom`, `success`, `warning` or `error`.",
|
|
37707
|
-
"default": "'custom'",
|
|
37708
|
-
"attribute": "variant",
|
|
37709
|
-
"reflects": true
|
|
37710
|
-
},
|
|
37711
|
-
{
|
|
37712
|
-
"kind": "field",
|
|
37713
|
-
"name": "closeButtonAriaLabel",
|
|
37714
|
-
"type": {
|
|
37715
|
-
"text": "string | undefined"
|
|
37716
|
-
},
|
|
37717
|
-
"description": "Defines aria-label attribute for close button accessibility",
|
|
37718
|
-
"attribute": "close-button-aria-label"
|
|
37719
|
-
},
|
|
37720
|
-
{
|
|
37721
|
-
"kind": "field",
|
|
37722
|
-
"name": "headerText",
|
|
37723
|
-
"type": {
|
|
37724
|
-
"text": "string | undefined"
|
|
37725
|
-
},
|
|
37726
|
-
"description": "Defines a string value to display as the title of the toast",
|
|
37727
|
-
"attribute": "header-text",
|
|
37728
|
-
"reflects": true
|
|
37729
|
-
},
|
|
37730
|
-
{
|
|
37731
|
-
"kind": "field",
|
|
37732
|
-
"name": "headerTagName",
|
|
37733
|
-
"type": {
|
|
37734
|
-
"text": "TagName"
|
|
37735
|
-
},
|
|
37736
|
-
"description": "The html tag to be used for the header text",
|
|
37737
|
-
"default": "'h2'",
|
|
37738
|
-
"attribute": "header-tag-name",
|
|
37739
|
-
"reflects": true
|
|
37740
|
-
},
|
|
37741
|
-
{
|
|
37742
|
-
"kind": "field",
|
|
37743
|
-
"name": "ariaLabel",
|
|
37744
|
-
"type": {
|
|
37745
|
-
"text": "string | null"
|
|
37746
|
-
},
|
|
37747
|
-
"default": "null",
|
|
37748
|
-
"description": "Defines aria-label attribute when header is not used",
|
|
37749
|
-
"attribute": "aria-label",
|
|
37750
|
-
"reflects": true
|
|
37751
|
-
},
|
|
37752
|
-
{
|
|
37753
|
-
"kind": "field",
|
|
37754
|
-
"name": "showMoreText",
|
|
37755
|
-
"type": {
|
|
37756
|
-
"text": "string | undefined"
|
|
37757
|
-
},
|
|
37758
|
-
"description": "Defines the text shown on the linkbutton when detailed content is hidden.",
|
|
37759
|
-
"attribute": "show-more-text",
|
|
37760
|
-
"reflects": true
|
|
37761
|
-
},
|
|
37762
|
-
{
|
|
37763
|
-
"kind": "field",
|
|
37764
|
-
"name": "showLessText",
|
|
37765
|
-
"type": {
|
|
37766
|
-
"text": "string | undefined"
|
|
37767
|
-
},
|
|
37768
|
-
"description": "Defines the text shown on the linkbutton when detailed content is visible.",
|
|
37769
|
-
"attribute": "show-less-text",
|
|
37770
|
-
"reflects": true
|
|
37771
|
-
},
|
|
37772
|
-
{
|
|
37773
|
-
"kind": "field",
|
|
37774
|
-
"name": "isDetailVisible",
|
|
37775
|
-
"type": {
|
|
37776
|
-
"text": "boolean"
|
|
37777
|
-
},
|
|
37778
|
-
"privacy": "private",
|
|
37779
|
-
"default": "false"
|
|
37780
|
-
},
|
|
37781
|
-
{
|
|
37782
|
-
"kind": "field",
|
|
37783
|
-
"name": "hasDetailedSlot",
|
|
37784
|
-
"type": {
|
|
37785
|
-
"text": "boolean"
|
|
37786
|
-
},
|
|
37787
|
-
"privacy": "private",
|
|
37788
|
-
"default": "false"
|
|
37789
|
-
},
|
|
37790
|
-
{
|
|
37791
|
-
"kind": "field",
|
|
37792
|
-
"name": "detailedElements",
|
|
37793
|
-
"type": {
|
|
37794
|
-
"text": "HTMLElement[]"
|
|
37795
|
-
},
|
|
37796
|
-
"privacy": "private"
|
|
37797
|
-
},
|
|
37798
|
-
{
|
|
37799
|
-
"kind": "field",
|
|
37800
|
-
"name": "hasFooterButtons",
|
|
37801
|
-
"type": {
|
|
37802
|
-
"text": "string"
|
|
37803
|
-
},
|
|
37804
|
-
"privacy": "private",
|
|
37805
|
-
"default": "''"
|
|
37104
|
+
"privacy": "private",
|
|
37105
|
+
"default": "''"
|
|
37806
37106
|
},
|
|
37807
37107
|
{
|
|
37808
37108
|
"kind": "method",
|
|
@@ -37990,24 +37290,28 @@
|
|
|
37990
37290
|
},
|
|
37991
37291
|
{
|
|
37992
37292
|
"kind": "javascript-module",
|
|
37993
|
-
"path": "components/
|
|
37293
|
+
"path": "components/tooltip/tooltip.component.js",
|
|
37994
37294
|
"declarations": [
|
|
37995
37295
|
{
|
|
37996
37296
|
"kind": "class",
|
|
37997
|
-
"description": "A
|
|
37998
|
-
"name": "
|
|
37297
|
+
"description": "A tooltip is triggered by mouse hover or by keyboard focus\nand will disappear upon mouse exit or focus change.\n\nNote: Tooltips cannot contain content that can be focused or interacted with.",
|
|
37298
|
+
"name": "Tooltip",
|
|
37999
37299
|
"cssProperties": [
|
|
38000
37300
|
{
|
|
38001
|
-
"description": "The maximum width of the
|
|
38002
|
-
"name": "--mdc-
|
|
37301
|
+
"description": "The maximum width of the tooltip.",
|
|
37302
|
+
"name": "--mdc-tooltip-max-width"
|
|
38003
37303
|
},
|
|
38004
37304
|
{
|
|
38005
|
-
"description": "The
|
|
38006
|
-
"name": "--mdc-
|
|
37305
|
+
"description": "The padding of the tooltip.",
|
|
37306
|
+
"name": "--mdc-tooltip-padding"
|
|
38007
37307
|
},
|
|
38008
37308
|
{
|
|
38009
|
-
"description": "The text color of the
|
|
38010
|
-
"name": "--mdc-
|
|
37309
|
+
"description": "The text color of the tooltip.",
|
|
37310
|
+
"name": "--mdc-tooltip-text-color"
|
|
37311
|
+
},
|
|
37312
|
+
{
|
|
37313
|
+
"description": "The text color of the tooltip when the color is contrast.",
|
|
37314
|
+
"name": "--mdc-tooltip-text-color-contrast"
|
|
38011
37315
|
},
|
|
38012
37316
|
{
|
|
38013
37317
|
"description": "radius of the arrow border",
|
|
@@ -38090,53 +37394,29 @@
|
|
|
38090
37394
|
}
|
|
38091
37395
|
}
|
|
38092
37396
|
],
|
|
38093
|
-
"slots": [
|
|
38094
|
-
{
|
|
38095
|
-
"description": "Default slot for the toggletip content",
|
|
38096
|
-
"name": "",
|
|
38097
|
-
"inheritedFrom": {
|
|
38098
|
-
"name": "Popover",
|
|
38099
|
-
"module": "src/components/popover/popover.component.ts"
|
|
38100
|
-
}
|
|
38101
|
-
}
|
|
38102
|
-
],
|
|
38103
37397
|
"members": [
|
|
38104
37398
|
{
|
|
38105
37399
|
"kind": "field",
|
|
38106
|
-
"name": "
|
|
38107
|
-
"type": {
|
|
38108
|
-
"text": "Array<Node>"
|
|
38109
|
-
},
|
|
38110
|
-
"privacy": "private"
|
|
38111
|
-
},
|
|
38112
|
-
{
|
|
38113
|
-
"kind": "field",
|
|
38114
|
-
"name": "screenreaderAnnouncerIdentity",
|
|
37400
|
+
"name": "tooltipType",
|
|
38115
37401
|
"type": {
|
|
38116
|
-
"text": "
|
|
37402
|
+
"text": "TooltipType"
|
|
38117
37403
|
},
|
|
38118
|
-
"description": "
|
|
38119
|
-
"
|
|
37404
|
+
"description": "The type of tooltip.\n- **description** sets aria-describedby on the trigger component which refers to the tooltip id.\n- **label** sets aria-labelledby on the trigger component which refers to the tooltip id.\n- **none** no aria props set on trigger component referring to the tooltip id.",
|
|
37405
|
+
"default": "'description'",
|
|
37406
|
+
"attribute": "tooltip-type",
|
|
38120
37407
|
"reflects": true
|
|
38121
37408
|
},
|
|
38122
37409
|
{
|
|
38123
37410
|
"kind": "field",
|
|
38124
|
-
"name": "
|
|
37411
|
+
"name": "defaultSlotNodes",
|
|
38125
37412
|
"type": {
|
|
38126
|
-
"text": "
|
|
37413
|
+
"text": "Array<Node>"
|
|
38127
37414
|
},
|
|
38128
|
-
"
|
|
38129
|
-
"default": "bottom",
|
|
38130
|
-
"attribute": "placement",
|
|
38131
|
-
"reflects": true,
|
|
38132
|
-
"inheritedFrom": {
|
|
38133
|
-
"name": "Popover",
|
|
38134
|
-
"module": "components/popover/popover.component.js"
|
|
38135
|
-
}
|
|
37415
|
+
"privacy": "private"
|
|
38136
37416
|
},
|
|
38137
37417
|
{
|
|
38138
37418
|
"kind": "method",
|
|
38139
|
-
"name": "
|
|
37419
|
+
"name": "getTooltipText",
|
|
38140
37420
|
"privacy": "private",
|
|
38141
37421
|
"return": {
|
|
38142
37422
|
"type": {
|
|
@@ -38144,6 +37424,37 @@
|
|
|
38144
37424
|
}
|
|
38145
37425
|
}
|
|
38146
37426
|
},
|
|
37427
|
+
{
|
|
37428
|
+
"kind": "method",
|
|
37429
|
+
"name": "setTooltipType",
|
|
37430
|
+
"privacy": "private",
|
|
37431
|
+
"return": {
|
|
37432
|
+
"type": {
|
|
37433
|
+
"text": "void"
|
|
37434
|
+
}
|
|
37435
|
+
},
|
|
37436
|
+
"parameters": [
|
|
37437
|
+
{
|
|
37438
|
+
"name": "type",
|
|
37439
|
+
"type": {
|
|
37440
|
+
"text": "TooltipType"
|
|
37441
|
+
},
|
|
37442
|
+
"description": "The type to set."
|
|
37443
|
+
}
|
|
37444
|
+
],
|
|
37445
|
+
"description": "Sets the type attribute for the tooltip component.\nIf the provided type is not included in the TOOLTIP_TYPES,\nit defaults to the value specified in DEFAULTS.TOOLTIP_TYPE."
|
|
37446
|
+
},
|
|
37447
|
+
{
|
|
37448
|
+
"kind": "method",
|
|
37449
|
+
"name": "onIdUpdated",
|
|
37450
|
+
"privacy": "private",
|
|
37451
|
+
"return": {
|
|
37452
|
+
"type": {
|
|
37453
|
+
"text": "Promise<void>"
|
|
37454
|
+
}
|
|
37455
|
+
},
|
|
37456
|
+
"description": "Updates the tooltip id if it is empty."
|
|
37457
|
+
},
|
|
38147
37458
|
{
|
|
38148
37459
|
"kind": "method",
|
|
38149
37460
|
"name": "onPlacementUpdated",
|
|
@@ -38153,7 +37464,27 @@
|
|
|
38153
37464
|
"text": "void"
|
|
38154
37465
|
}
|
|
38155
37466
|
},
|
|
38156
|
-
"description": "Updates the placement attribute if it is not a valid placement.\
|
|
37467
|
+
"description": "Updates the placement attribute if it is not a valid placement.\nOverriding the default from Popover"
|
|
37468
|
+
},
|
|
37469
|
+
{
|
|
37470
|
+
"kind": "method",
|
|
37471
|
+
"name": "onTooltipTypeUpdated",
|
|
37472
|
+
"privacy": "private",
|
|
37473
|
+
"return": {
|
|
37474
|
+
"type": {
|
|
37475
|
+
"text": "void"
|
|
37476
|
+
}
|
|
37477
|
+
},
|
|
37478
|
+
"parameters": [
|
|
37479
|
+
{
|
|
37480
|
+
"name": "changedProperties",
|
|
37481
|
+
"type": {
|
|
37482
|
+
"text": "PropertyValues"
|
|
37483
|
+
},
|
|
37484
|
+
"description": "The changed properties."
|
|
37485
|
+
}
|
|
37486
|
+
],
|
|
37487
|
+
"description": "Updates the tooltip type attribute and sets the appropriate aria props on the trigger component."
|
|
38157
37488
|
},
|
|
38158
37489
|
{
|
|
38159
37490
|
"kind": "field",
|
|
@@ -38761,6 +38092,21 @@
|
|
|
38761
38092
|
"module": "components/popover/popover.component.js"
|
|
38762
38093
|
}
|
|
38763
38094
|
},
|
|
38095
|
+
{
|
|
38096
|
+
"kind": "field",
|
|
38097
|
+
"name": "placement",
|
|
38098
|
+
"type": {
|
|
38099
|
+
"text": "PopoverPlacement"
|
|
38100
|
+
},
|
|
38101
|
+
"description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
|
|
38102
|
+
"default": "bottom",
|
|
38103
|
+
"attribute": "placement",
|
|
38104
|
+
"reflects": true,
|
|
38105
|
+
"inheritedFrom": {
|
|
38106
|
+
"name": "Popover",
|
|
38107
|
+
"module": "components/popover/popover.component.js"
|
|
38108
|
+
}
|
|
38109
|
+
},
|
|
38764
38110
|
{
|
|
38765
38111
|
"kind": "field",
|
|
38766
38112
|
"name": "color",
|
|
@@ -39480,7 +38826,7 @@
|
|
|
39480
38826
|
],
|
|
39481
38827
|
"events": [
|
|
39482
38828
|
{
|
|
39483
|
-
"description": "(React: onShown) This event is dispatched when the
|
|
38829
|
+
"description": "(React: onShown) This event is dispatched when the tooltip is shown",
|
|
39484
38830
|
"name": "shown",
|
|
39485
38831
|
"reactName": "onShown",
|
|
39486
38832
|
"inheritedFrom": {
|
|
@@ -39489,7 +38835,7 @@
|
|
|
39489
38835
|
}
|
|
39490
38836
|
},
|
|
39491
38837
|
{
|
|
39492
|
-
"description": "(React: onHidden) This event is dispatched when the
|
|
38838
|
+
"description": "(React: onHidden) This event is dispatched when the tooltip is hidden",
|
|
39493
38839
|
"name": "hidden",
|
|
39494
38840
|
"reactName": "onHidden",
|
|
39495
38841
|
"inheritedFrom": {
|
|
@@ -39498,7 +38844,7 @@
|
|
|
39498
38844
|
}
|
|
39499
38845
|
},
|
|
39500
38846
|
{
|
|
39501
|
-
"description": "(React: onCreated) This event is dispatched when the
|
|
38847
|
+
"description": "(React: onCreated) This event is dispatched when the tooltip is created (added to the DOM)",
|
|
39502
38848
|
"name": "created",
|
|
39503
38849
|
"reactName": "onCreated",
|
|
39504
38850
|
"inheritedFrom": {
|
|
@@ -39507,7 +38853,7 @@
|
|
|
39507
38853
|
}
|
|
39508
38854
|
},
|
|
39509
38855
|
{
|
|
39510
|
-
"description": "(React: onDestroyed) This event is dispatched when the
|
|
38856
|
+
"description": "(React: onDestroyed) This event is dispatched when the tooltip is destroyed (removed from the DOM)",
|
|
39511
38857
|
"name": "destroyed",
|
|
39512
38858
|
"reactName": "onDestroyed",
|
|
39513
38859
|
"inheritedFrom": {
|
|
@@ -39518,25 +38864,13 @@
|
|
|
39518
38864
|
],
|
|
39519
38865
|
"attributes": [
|
|
39520
38866
|
{
|
|
39521
|
-
"name": "
|
|
39522
|
-
"type": {
|
|
39523
|
-
"text": "string | undefined"
|
|
39524
|
-
},
|
|
39525
|
-
"description": "Set this attribute with the id of the element in the DOM, to which announcement\nelements will be appended.\nIf an id is provided, the announcement elements will be appended to this element.\nIf id is not provided, a visually hidden div element will be created in the DOM.\n\nPlease refer to the `mdc-screenreaderannouncer` component for more details.",
|
|
39526
|
-
"fieldName": "screenreaderAnnouncerIdentity"
|
|
39527
|
-
},
|
|
39528
|
-
{
|
|
39529
|
-
"name": "placement",
|
|
38867
|
+
"name": "tooltip-type",
|
|
39530
38868
|
"type": {
|
|
39531
|
-
"text": "
|
|
38869
|
+
"text": "TooltipType"
|
|
39532
38870
|
},
|
|
39533
|
-
"description": "The
|
|
39534
|
-
"default": "
|
|
39535
|
-
"fieldName": "
|
|
39536
|
-
"inheritedFrom": {
|
|
39537
|
-
"name": "Popover",
|
|
39538
|
-
"module": "src/components/popover/popover.component.ts"
|
|
39539
|
-
}
|
|
38871
|
+
"description": "The type of tooltip.\n- **description** sets aria-describedby on the trigger component which refers to the tooltip id.\n- **label** sets aria-labelledby on the trigger component which refers to the tooltip id.\n- **none** no aria props set on trigger component referring to the tooltip id.",
|
|
38872
|
+
"default": "'description'",
|
|
38873
|
+
"fieldName": "tooltipType"
|
|
39540
38874
|
},
|
|
39541
38875
|
{
|
|
39542
38876
|
"name": "should-focus-trap-wrap",
|
|
@@ -39590,6 +38924,19 @@
|
|
|
39590
38924
|
"module": "src/components/popover/popover.component.ts"
|
|
39591
38925
|
}
|
|
39592
38926
|
},
|
|
38927
|
+
{
|
|
38928
|
+
"name": "placement",
|
|
38929
|
+
"type": {
|
|
38930
|
+
"text": "PopoverPlacement"
|
|
38931
|
+
},
|
|
38932
|
+
"description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
|
|
38933
|
+
"default": "bottom",
|
|
38934
|
+
"fieldName": "placement",
|
|
38935
|
+
"inheritedFrom": {
|
|
38936
|
+
"name": "Popover",
|
|
38937
|
+
"module": "src/components/popover/popover.component.ts"
|
|
38938
|
+
}
|
|
38939
|
+
},
|
|
39593
38940
|
{
|
|
39594
38941
|
"name": "color",
|
|
39595
38942
|
"type": {
|
|
@@ -40010,9 +39357,19 @@
|
|
|
40010
39357
|
"name": "Popover",
|
|
40011
39358
|
"module": "/src/components/popover/popover.component"
|
|
40012
39359
|
},
|
|
40013
|
-
"tagName": "mdc-
|
|
40014
|
-
"jsDoc": "/**\n * A
|
|
40015
|
-
"customElement": true
|
|
39360
|
+
"tagName": "mdc-tooltip",
|
|
39361
|
+
"jsDoc": "/**\n * A tooltip is triggered by mouse hover or by keyboard focus\n * and will disappear upon mouse exit or focus change.\n *\n * Note: Tooltips cannot contain content that can be focused or interacted with.\n *\n * @tagname mdc-tooltip\n *\n * @event shown - (React: onShown) This event is dispatched when the tooltip is shown\n * @event hidden - (React: onHidden) This event is dispatched when the tooltip is hidden\n * @event created - (React: onCreated) This event is dispatched when the tooltip is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the tooltip is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-tooltip-max-width - The maximum width of the tooltip.\n * @cssproperty --mdc-tooltip-padding - The padding of the tooltip.\n * @cssproperty --mdc-tooltip-text-color - The text color of the tooltip.\n * @cssproperty --mdc-tooltip-text-color-contrast - The text color of the tooltip when the color is contrast.\n *\n */",
|
|
39362
|
+
"customElement": true,
|
|
39363
|
+
"slots": [
|
|
39364
|
+
{
|
|
39365
|
+
"description": "Default slot for the popover content",
|
|
39366
|
+
"name": "",
|
|
39367
|
+
"inheritedFrom": {
|
|
39368
|
+
"name": "Popover",
|
|
39369
|
+
"module": "src/components/popover/popover.component.ts"
|
|
39370
|
+
}
|
|
39371
|
+
}
|
|
39372
|
+
]
|
|
40016
39373
|
}
|
|
40017
39374
|
],
|
|
40018
39375
|
"exports": [
|
|
@@ -40020,36 +39377,32 @@
|
|
|
40020
39377
|
"kind": "js",
|
|
40021
39378
|
"name": "default",
|
|
40022
39379
|
"declaration": {
|
|
40023
|
-
"name": "
|
|
40024
|
-
"module": "components/
|
|
39380
|
+
"name": "Tooltip",
|
|
39381
|
+
"module": "components/tooltip/tooltip.component.js"
|
|
40025
39382
|
}
|
|
40026
39383
|
}
|
|
40027
39384
|
]
|
|
40028
39385
|
},
|
|
40029
39386
|
{
|
|
40030
39387
|
"kind": "javascript-module",
|
|
40031
|
-
"path": "components/
|
|
39388
|
+
"path": "components/toggletip/toggletip.component.js",
|
|
40032
39389
|
"declarations": [
|
|
40033
39390
|
{
|
|
40034
39391
|
"kind": "class",
|
|
40035
|
-
"description": "A
|
|
40036
|
-
"name": "
|
|
39392
|
+
"description": "A toggletip is triggered by clicking a trigger element.\n\nIt can contain interactive content and can be closed by\nclicking outside the toggletip or pressing the escape key.\n\nIt can have optional close button to close the toggletip.\n\nToggletip component uses `mdc-screenreaderannouncer` internally to\nannounce the toggletip text content with screen readers when the toggletip is shown.\n\n`screenreader-announcer-identity` attribute can be used to provide ID of an element\nin DOM to which announcement elements are added. If not set, a visually hidden\ndiv element is created in DOM to which announcement elements are added.\n\nPlease refer to the `mdc-screenreaderannouncer` component for more details.",
|
|
39393
|
+
"name": "ToggleTip",
|
|
40037
39394
|
"cssProperties": [
|
|
40038
39395
|
{
|
|
40039
|
-
"description": "The maximum width of the
|
|
40040
|
-
"name": "--mdc-
|
|
40041
|
-
},
|
|
40042
|
-
{
|
|
40043
|
-
"description": "The padding of the tooltip.",
|
|
40044
|
-
"name": "--mdc-tooltip-padding"
|
|
39396
|
+
"description": "The maximum width of the toggletip.",
|
|
39397
|
+
"name": "--mdc-toggletip-max-width"
|
|
40045
39398
|
},
|
|
40046
39399
|
{
|
|
40047
|
-
"description": "The text color of the
|
|
40048
|
-
"name": "--mdc-
|
|
39400
|
+
"description": "The text color of the toggletip.",
|
|
39401
|
+
"name": "--mdc-toggletip-text-color"
|
|
40049
39402
|
},
|
|
40050
39403
|
{
|
|
40051
|
-
"description": "The text color of the
|
|
40052
|
-
"name": "--mdc-
|
|
39404
|
+
"description": "The text color of the toggletip when the color is contrast.",
|
|
39405
|
+
"name": "--mdc-toggletip-text-color-contrast"
|
|
40053
39406
|
},
|
|
40054
39407
|
{
|
|
40055
39408
|
"description": "radius of the arrow border",
|
|
@@ -40132,18 +39485,17 @@
|
|
|
40132
39485
|
}
|
|
40133
39486
|
}
|
|
40134
39487
|
],
|
|
40135
|
-
"
|
|
39488
|
+
"slots": [
|
|
40136
39489
|
{
|
|
40137
|
-
"
|
|
40138
|
-
"name": "
|
|
40139
|
-
"
|
|
40140
|
-
"
|
|
40141
|
-
|
|
40142
|
-
|
|
40143
|
-
|
|
40144
|
-
|
|
40145
|
-
|
|
40146
|
-
},
|
|
39490
|
+
"description": "Default slot for the toggletip content",
|
|
39491
|
+
"name": "",
|
|
39492
|
+
"inheritedFrom": {
|
|
39493
|
+
"name": "Popover",
|
|
39494
|
+
"module": "src/components/popover/popover.component.ts"
|
|
39495
|
+
}
|
|
39496
|
+
}
|
|
39497
|
+
],
|
|
39498
|
+
"members": [
|
|
40147
39499
|
{
|
|
40148
39500
|
"kind": "field",
|
|
40149
39501
|
"name": "defaultSlotNodes",
|
|
@@ -40153,76 +39505,50 @@
|
|
|
40153
39505
|
"privacy": "private"
|
|
40154
39506
|
},
|
|
40155
39507
|
{
|
|
40156
|
-
"kind": "
|
|
40157
|
-
"name": "
|
|
40158
|
-
"
|
|
40159
|
-
|
|
40160
|
-
"type": {
|
|
40161
|
-
"text": ""
|
|
40162
|
-
}
|
|
40163
|
-
}
|
|
40164
|
-
},
|
|
40165
|
-
{
|
|
40166
|
-
"kind": "method",
|
|
40167
|
-
"name": "setTooltipType",
|
|
40168
|
-
"privacy": "private",
|
|
40169
|
-
"return": {
|
|
40170
|
-
"type": {
|
|
40171
|
-
"text": "void"
|
|
40172
|
-
}
|
|
39508
|
+
"kind": "field",
|
|
39509
|
+
"name": "screenreaderAnnouncerIdentity",
|
|
39510
|
+
"type": {
|
|
39511
|
+
"text": "string | undefined"
|
|
40173
39512
|
},
|
|
40174
|
-
"
|
|
40175
|
-
|
|
40176
|
-
|
|
40177
|
-
"type": {
|
|
40178
|
-
"text": "TooltipType"
|
|
40179
|
-
},
|
|
40180
|
-
"description": "The type to set."
|
|
40181
|
-
}
|
|
40182
|
-
],
|
|
40183
|
-
"description": "Sets the type attribute for the tooltip component.\nIf the provided type is not included in the TOOLTIP_TYPES,\nit defaults to the value specified in DEFAULTS.TOOLTIP_TYPE."
|
|
39513
|
+
"description": "Set this attribute with the id of the element in the DOM, to which announcement\nelements will be appended.\nIf an id is provided, the announcement elements will be appended to this element.\nIf id is not provided, a visually hidden div element will be created in the DOM.\n\nPlease refer to the `mdc-screenreaderannouncer` component for more details.",
|
|
39514
|
+
"attribute": "screenreader-announcer-identity",
|
|
39515
|
+
"reflects": true
|
|
40184
39516
|
},
|
|
40185
39517
|
{
|
|
40186
|
-
"kind": "
|
|
40187
|
-
"name": "
|
|
40188
|
-
"
|
|
40189
|
-
|
|
40190
|
-
"type": {
|
|
40191
|
-
"text": "Promise<void>"
|
|
40192
|
-
}
|
|
39518
|
+
"kind": "field",
|
|
39519
|
+
"name": "placement",
|
|
39520
|
+
"type": {
|
|
39521
|
+
"text": "PopoverPlacement"
|
|
40193
39522
|
},
|
|
40194
|
-
"description": "
|
|
39523
|
+
"description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
|
|
39524
|
+
"default": "bottom",
|
|
39525
|
+
"attribute": "placement",
|
|
39526
|
+
"reflects": true,
|
|
39527
|
+
"inheritedFrom": {
|
|
39528
|
+
"name": "Popover",
|
|
39529
|
+
"module": "components/popover/popover.component.js"
|
|
39530
|
+
}
|
|
40195
39531
|
},
|
|
40196
39532
|
{
|
|
40197
39533
|
"kind": "method",
|
|
40198
|
-
"name": "
|
|
39534
|
+
"name": "getToggleTipText",
|
|
40199
39535
|
"privacy": "private",
|
|
40200
39536
|
"return": {
|
|
40201
39537
|
"type": {
|
|
40202
|
-
"text": "
|
|
39538
|
+
"text": ""
|
|
40203
39539
|
}
|
|
40204
|
-
}
|
|
40205
|
-
"description": "Updates the placement attribute if it is not a valid placement.\nOverriding the default from Popover"
|
|
39540
|
+
}
|
|
40206
39541
|
},
|
|
40207
39542
|
{
|
|
40208
39543
|
"kind": "method",
|
|
40209
|
-
"name": "
|
|
39544
|
+
"name": "onPlacementUpdated",
|
|
40210
39545
|
"privacy": "private",
|
|
40211
39546
|
"return": {
|
|
40212
39547
|
"type": {
|
|
40213
39548
|
"text": "void"
|
|
40214
39549
|
}
|
|
40215
39550
|
},
|
|
40216
|
-
"
|
|
40217
|
-
{
|
|
40218
|
-
"name": "changedProperties",
|
|
40219
|
-
"type": {
|
|
40220
|
-
"text": "PropertyValues"
|
|
40221
|
-
},
|
|
40222
|
-
"description": "The changed properties."
|
|
40223
|
-
}
|
|
40224
|
-
],
|
|
40225
|
-
"description": "Updates the tooltip type attribute and sets the appropriate aria props on the trigger component."
|
|
39551
|
+
"description": "Updates the placement attribute if it is not a valid placement.\nDefault placement for toggle tip is top."
|
|
40226
39552
|
},
|
|
40227
39553
|
{
|
|
40228
39554
|
"kind": "field",
|
|
@@ -40830,21 +40156,6 @@
|
|
|
40830
40156
|
"module": "components/popover/popover.component.js"
|
|
40831
40157
|
}
|
|
40832
40158
|
},
|
|
40833
|
-
{
|
|
40834
|
-
"kind": "field",
|
|
40835
|
-
"name": "placement",
|
|
40836
|
-
"type": {
|
|
40837
|
-
"text": "PopoverPlacement"
|
|
40838
|
-
},
|
|
40839
|
-
"description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
|
|
40840
|
-
"default": "bottom",
|
|
40841
|
-
"attribute": "placement",
|
|
40842
|
-
"reflects": true,
|
|
40843
|
-
"inheritedFrom": {
|
|
40844
|
-
"name": "Popover",
|
|
40845
|
-
"module": "components/popover/popover.component.js"
|
|
40846
|
-
}
|
|
40847
|
-
},
|
|
40848
40159
|
{
|
|
40849
40160
|
"kind": "field",
|
|
40850
40161
|
"name": "color",
|
|
@@ -41407,707 +40718,1396 @@
|
|
|
41407
40718
|
],
|
|
41408
40719
|
"inheritedFrom": {
|
|
41409
40720
|
"name": "Popover",
|
|
41410
|
-
"module": "components/popover/popover.component.js"
|
|
40721
|
+
"module": "components/popover/popover.component.js"
|
|
40722
|
+
}
|
|
40723
|
+
},
|
|
40724
|
+
{
|
|
40725
|
+
"kind": "method",
|
|
40726
|
+
"name": "isOpenUpdated",
|
|
40727
|
+
"privacy": "protected",
|
|
40728
|
+
"parameters": [
|
|
40729
|
+
{
|
|
40730
|
+
"name": "oldValue",
|
|
40731
|
+
"type": {
|
|
40732
|
+
"text": "boolean"
|
|
40733
|
+
},
|
|
40734
|
+
"description": "The old value of the visible property."
|
|
40735
|
+
},
|
|
40736
|
+
{
|
|
40737
|
+
"name": "newValue",
|
|
40738
|
+
"type": {
|
|
40739
|
+
"text": "boolean"
|
|
40740
|
+
},
|
|
40741
|
+
"description": "The new value of the visible property."
|
|
40742
|
+
}
|
|
40743
|
+
],
|
|
40744
|
+
"description": "Handles the popover visibility change and position the popover.\nHandles the exit event to close the popover.",
|
|
40745
|
+
"inheritedFrom": {
|
|
40746
|
+
"name": "Popover",
|
|
40747
|
+
"module": "components/popover/popover.component.js"
|
|
40748
|
+
}
|
|
40749
|
+
},
|
|
40750
|
+
{
|
|
40751
|
+
"kind": "field",
|
|
40752
|
+
"name": "handleMouseEnter",
|
|
40753
|
+
"privacy": "private",
|
|
40754
|
+
"description": "Handles mouse enter event on the trigger element.\nThis method sets the `isHovered` flag to true and shows the popover",
|
|
40755
|
+
"inheritedFrom": {
|
|
40756
|
+
"name": "Popover",
|
|
40757
|
+
"module": "components/popover/popover.component.js"
|
|
40758
|
+
}
|
|
40759
|
+
},
|
|
40760
|
+
{
|
|
40761
|
+
"kind": "field",
|
|
40762
|
+
"name": "handleMouseLeave",
|
|
40763
|
+
"privacy": "private",
|
|
40764
|
+
"description": "Handles mouse leave event on the trigger element.\nThis method sets the `isHovered` flag to false and starts the close delay\ntimer to hide the popover.",
|
|
40765
|
+
"inheritedFrom": {
|
|
40766
|
+
"name": "Popover",
|
|
40767
|
+
"module": "components/popover/popover.component.js"
|
|
40768
|
+
}
|
|
40769
|
+
},
|
|
40770
|
+
{
|
|
40771
|
+
"kind": "field",
|
|
40772
|
+
"name": "handleFocusOut",
|
|
40773
|
+
"privacy": "private",
|
|
40774
|
+
"description": "Handles focus out event on the trigger element.\nThis method checks if the popover is not hovered and hides the popover.\nIf the popover is hovered, it will not hide the popover.",
|
|
40775
|
+
"inheritedFrom": {
|
|
40776
|
+
"name": "Popover",
|
|
40777
|
+
"module": "components/popover/popover.component.js"
|
|
40778
|
+
}
|
|
40779
|
+
},
|
|
40780
|
+
{
|
|
40781
|
+
"kind": "field",
|
|
40782
|
+
"name": "handleFocusIn",
|
|
40783
|
+
"privacy": "private",
|
|
40784
|
+
"description": "Handles focus in event on the trigger element.\nThis method checks if the trigger element has visible focus or is being hovered.",
|
|
40785
|
+
"inheritedFrom": {
|
|
40786
|
+
"name": "Popover",
|
|
40787
|
+
"module": "components/popover/popover.component.js"
|
|
40788
|
+
}
|
|
40789
|
+
},
|
|
40790
|
+
{
|
|
40791
|
+
"kind": "field",
|
|
40792
|
+
"name": "startCloseDelay",
|
|
40793
|
+
"privacy": "private",
|
|
40794
|
+
"description": "Starts the close delay timer.\nIf the popover is not interactive, it will close the popover after the delay.",
|
|
40795
|
+
"inheritedFrom": {
|
|
40796
|
+
"name": "Popover",
|
|
40797
|
+
"module": "components/popover/popover.component.js"
|
|
40798
|
+
}
|
|
40799
|
+
},
|
|
40800
|
+
{
|
|
40801
|
+
"kind": "field",
|
|
40802
|
+
"name": "cancelCloseDelay",
|
|
40803
|
+
"privacy": "private",
|
|
40804
|
+
"description": "Cancels the close delay timer.",
|
|
40805
|
+
"inheritedFrom": {
|
|
40806
|
+
"name": "Popover",
|
|
40807
|
+
"module": "components/popover/popover.component.js"
|
|
40808
|
+
}
|
|
40809
|
+
},
|
|
40810
|
+
{
|
|
40811
|
+
"kind": "field",
|
|
40812
|
+
"name": "show",
|
|
40813
|
+
"privacy": "public",
|
|
40814
|
+
"description": "Shows the popover.",
|
|
40815
|
+
"inheritedFrom": {
|
|
40816
|
+
"name": "Popover",
|
|
40817
|
+
"module": "components/popover/popover.component.js"
|
|
40818
|
+
}
|
|
40819
|
+
},
|
|
40820
|
+
{
|
|
40821
|
+
"kind": "field",
|
|
40822
|
+
"name": "hide",
|
|
40823
|
+
"privacy": "public",
|
|
40824
|
+
"description": "Hides the popover.",
|
|
40825
|
+
"inheritedFrom": {
|
|
40826
|
+
"name": "Popover",
|
|
40827
|
+
"module": "components/popover/popover.component.js"
|
|
40828
|
+
}
|
|
40829
|
+
},
|
|
40830
|
+
{
|
|
40831
|
+
"kind": "field",
|
|
40832
|
+
"name": "togglePopoverVisible",
|
|
40833
|
+
"privacy": "public",
|
|
40834
|
+
"description": "Toggles the popover visibility.",
|
|
40835
|
+
"inheritedFrom": {
|
|
40836
|
+
"name": "Popover",
|
|
40837
|
+
"module": "components/popover/popover.component.js"
|
|
40838
|
+
}
|
|
40839
|
+
},
|
|
40840
|
+
{
|
|
40841
|
+
"kind": "field",
|
|
40842
|
+
"name": "positionPopover",
|
|
40843
|
+
"privacy": "private",
|
|
40844
|
+
"description": "Positions the popover based on the trigger element.\nIt also handles the flip, size and arrow placement.\nIt uses the floating-ui/dom library to calculate the position.",
|
|
40845
|
+
"inheritedFrom": {
|
|
40846
|
+
"name": "Popover",
|
|
40847
|
+
"module": "components/popover/popover.component.js"
|
|
40848
|
+
}
|
|
40849
|
+
},
|
|
40850
|
+
{
|
|
40851
|
+
"kind": "field",
|
|
40852
|
+
"name": "findClosestPopover",
|
|
40853
|
+
"privacy": "protected",
|
|
40854
|
+
"description": "Finds the closest popover to the passed element in the DOM tree.\n\nUseful when need to find the parent popover in a nested popover scenario.",
|
|
40855
|
+
"parameters": [
|
|
40856
|
+
{
|
|
40857
|
+
"description": "The element to start searching from.",
|
|
40858
|
+
"name": "element"
|
|
40859
|
+
}
|
|
40860
|
+
],
|
|
40861
|
+
"inheritedFrom": {
|
|
40862
|
+
"name": "Popover",
|
|
40863
|
+
"module": "components/popover/popover.component.js"
|
|
40864
|
+
}
|
|
40865
|
+
},
|
|
40866
|
+
{
|
|
40867
|
+
"kind": "field",
|
|
40868
|
+
"name": "utils",
|
|
40869
|
+
"default": "new PopoverUtils(this)",
|
|
40870
|
+
"inheritedFrom": {
|
|
40871
|
+
"name": "Popover",
|
|
40872
|
+
"module": "components/popover/popover.component.js"
|
|
40873
|
+
}
|
|
40874
|
+
}
|
|
40875
|
+
],
|
|
40876
|
+
"events": [
|
|
40877
|
+
{
|
|
40878
|
+
"description": "(React: onShown) This event is dispatched when the toggletip is shown",
|
|
40879
|
+
"name": "shown",
|
|
40880
|
+
"reactName": "onShown",
|
|
40881
|
+
"inheritedFrom": {
|
|
40882
|
+
"name": "Popover",
|
|
40883
|
+
"module": "src/components/popover/popover.component.ts"
|
|
40884
|
+
}
|
|
40885
|
+
},
|
|
40886
|
+
{
|
|
40887
|
+
"description": "(React: onHidden) This event is dispatched when the toggletip is hidden",
|
|
40888
|
+
"name": "hidden",
|
|
40889
|
+
"reactName": "onHidden",
|
|
40890
|
+
"inheritedFrom": {
|
|
40891
|
+
"name": "Popover",
|
|
40892
|
+
"module": "src/components/popover/popover.component.ts"
|
|
40893
|
+
}
|
|
40894
|
+
},
|
|
40895
|
+
{
|
|
40896
|
+
"description": "(React: onCreated) This event is dispatched when the toggletip is created (added to the DOM)",
|
|
40897
|
+
"name": "created",
|
|
40898
|
+
"reactName": "onCreated",
|
|
40899
|
+
"inheritedFrom": {
|
|
40900
|
+
"name": "Popover",
|
|
40901
|
+
"module": "src/components/popover/popover.component.ts"
|
|
40902
|
+
}
|
|
40903
|
+
},
|
|
40904
|
+
{
|
|
40905
|
+
"description": "(React: onDestroyed) This event is dispatched when the toggletip is destroyed (removed from the DOM)",
|
|
40906
|
+
"name": "destroyed",
|
|
40907
|
+
"reactName": "onDestroyed",
|
|
40908
|
+
"inheritedFrom": {
|
|
40909
|
+
"name": "Popover",
|
|
40910
|
+
"module": "src/components/popover/popover.component.ts"
|
|
40911
|
+
}
|
|
40912
|
+
}
|
|
40913
|
+
],
|
|
40914
|
+
"attributes": [
|
|
40915
|
+
{
|
|
40916
|
+
"name": "screenreader-announcer-identity",
|
|
40917
|
+
"type": {
|
|
40918
|
+
"text": "string | undefined"
|
|
40919
|
+
},
|
|
40920
|
+
"description": "Set this attribute with the id of the element in the DOM, to which announcement\nelements will be appended.\nIf an id is provided, the announcement elements will be appended to this element.\nIf id is not provided, a visually hidden div element will be created in the DOM.\n\nPlease refer to the `mdc-screenreaderannouncer` component for more details.",
|
|
40921
|
+
"fieldName": "screenreaderAnnouncerIdentity"
|
|
40922
|
+
},
|
|
40923
|
+
{
|
|
40924
|
+
"name": "placement",
|
|
40925
|
+
"type": {
|
|
40926
|
+
"text": "PopoverPlacement"
|
|
40927
|
+
},
|
|
40928
|
+
"description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
|
|
40929
|
+
"default": "bottom",
|
|
40930
|
+
"fieldName": "placement",
|
|
40931
|
+
"inheritedFrom": {
|
|
40932
|
+
"name": "Popover",
|
|
40933
|
+
"module": "src/components/popover/popover.component.ts"
|
|
40934
|
+
}
|
|
40935
|
+
},
|
|
40936
|
+
{
|
|
40937
|
+
"name": "should-focus-trap-wrap",
|
|
40938
|
+
"type": {
|
|
40939
|
+
"text": "boolean"
|
|
40940
|
+
},
|
|
40941
|
+
"default": "true",
|
|
40942
|
+
"description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
|
|
40943
|
+
"fieldName": "shouldFocusTrapWrap",
|
|
40944
|
+
"inheritedFrom": {
|
|
40945
|
+
"name": "Popover",
|
|
40946
|
+
"module": "src/components/popover/popover.component.ts"
|
|
40947
|
+
}
|
|
40948
|
+
},
|
|
40949
|
+
{
|
|
40950
|
+
"name": "id",
|
|
40951
|
+
"type": {
|
|
40952
|
+
"text": "string"
|
|
40953
|
+
},
|
|
40954
|
+
"default": "''",
|
|
40955
|
+
"description": "The unique ID of the popover.",
|
|
40956
|
+
"fieldName": "id",
|
|
40957
|
+
"inheritedFrom": {
|
|
40958
|
+
"name": "Popover",
|
|
40959
|
+
"module": "src/components/popover/popover.component.ts"
|
|
40960
|
+
}
|
|
40961
|
+
},
|
|
40962
|
+
{
|
|
40963
|
+
"name": "triggerID",
|
|
40964
|
+
"type": {
|
|
40965
|
+
"text": "string"
|
|
40966
|
+
},
|
|
40967
|
+
"default": "''",
|
|
40968
|
+
"description": "The ID of the element that triggers the popover.\nThis attribute is required for the popover to work.",
|
|
40969
|
+
"fieldName": "triggerID",
|
|
40970
|
+
"inheritedFrom": {
|
|
40971
|
+
"name": "Popover",
|
|
40972
|
+
"module": "src/components/popover/popover.component.ts"
|
|
40973
|
+
}
|
|
40974
|
+
},
|
|
40975
|
+
{
|
|
40976
|
+
"name": "trigger",
|
|
40977
|
+
"type": {
|
|
40978
|
+
"text": "PopoverTrigger"
|
|
40979
|
+
},
|
|
40980
|
+
"description": "Determines the events that cause the Popover to show.\nMultiple event names should be separated by spaces.\nFor example to allow both click and hover, use 'click mouseenter' as the trigger.\n- **click**\n- **mouseenter**\n- **focusin**\n- **manual**",
|
|
40981
|
+
"default": "click",
|
|
40982
|
+
"fieldName": "trigger",
|
|
40983
|
+
"inheritedFrom": {
|
|
40984
|
+
"name": "Popover",
|
|
40985
|
+
"module": "src/components/popover/popover.component.ts"
|
|
40986
|
+
}
|
|
40987
|
+
},
|
|
40988
|
+
{
|
|
40989
|
+
"name": "color",
|
|
40990
|
+
"type": {
|
|
40991
|
+
"text": "PopoverColor"
|
|
40992
|
+
},
|
|
40993
|
+
"description": "Color of the popover\n- **tonal**\n- **contrast**",
|
|
40994
|
+
"default": "tonal",
|
|
40995
|
+
"fieldName": "color",
|
|
40996
|
+
"inheritedFrom": {
|
|
40997
|
+
"name": "Popover",
|
|
40998
|
+
"module": "src/components/popover/popover.component.ts"
|
|
40999
|
+
}
|
|
41000
|
+
},
|
|
41001
|
+
{
|
|
41002
|
+
"name": "visible",
|
|
41003
|
+
"type": {
|
|
41004
|
+
"text": "boolean"
|
|
41005
|
+
},
|
|
41006
|
+
"description": "The visibility of the popover.",
|
|
41007
|
+
"default": "false",
|
|
41008
|
+
"fieldName": "visible",
|
|
41009
|
+
"inheritedFrom": {
|
|
41010
|
+
"name": "Popover",
|
|
41011
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41012
|
+
}
|
|
41013
|
+
},
|
|
41014
|
+
{
|
|
41015
|
+
"name": "offset",
|
|
41016
|
+
"type": {
|
|
41017
|
+
"text": "number"
|
|
41018
|
+
},
|
|
41019
|
+
"description": "The offset of the popover.",
|
|
41020
|
+
"default": "4",
|
|
41021
|
+
"fieldName": "offset",
|
|
41022
|
+
"inheritedFrom": {
|
|
41023
|
+
"name": "Popover",
|
|
41024
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41025
|
+
}
|
|
41026
|
+
},
|
|
41027
|
+
{
|
|
41028
|
+
"name": "boundary",
|
|
41029
|
+
"type": {
|
|
41030
|
+
"text": "'clippingAncestors' | string"
|
|
41031
|
+
},
|
|
41032
|
+
"description": "This describes the clipping element(s) or area that overflow will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
|
|
41033
|
+
"default": "'clippingAncestors'",
|
|
41034
|
+
"fieldName": "boundary",
|
|
41035
|
+
"inheritedFrom": {
|
|
41036
|
+
"name": "Popover",
|
|
41037
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41038
|
+
}
|
|
41039
|
+
},
|
|
41040
|
+
{
|
|
41041
|
+
"name": "boundary-root",
|
|
41042
|
+
"type": {
|
|
41043
|
+
"text": "'viewport' | 'document'"
|
|
41044
|
+
},
|
|
41045
|
+
"description": "This describes the root boundary that the element will be checked for overflow relative to.\nThe default is 'viewport', which is the area of the page the user can see on the screen.\n\nThe other string option is 'document', which is the entire page outside the viewport.",
|
|
41046
|
+
"default": "'viewport'",
|
|
41047
|
+
"fieldName": "boundaryRoot",
|
|
41048
|
+
"inheritedFrom": {
|
|
41049
|
+
"name": "Popover",
|
|
41050
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41051
|
+
}
|
|
41052
|
+
},
|
|
41053
|
+
{
|
|
41054
|
+
"name": "boundary-padding",
|
|
41055
|
+
"type": {
|
|
41056
|
+
"text": "number | undefined"
|
|
41057
|
+
},
|
|
41058
|
+
"description": "Virtual padding around the boundary to check for overflow.\nSo the popover will not be placed on top of the edge of the boundary.\n\nDefault works well for most cases, but you can set this to customise it when necessary.",
|
|
41059
|
+
"default": "undefined",
|
|
41060
|
+
"fieldName": "boundaryPadding",
|
|
41061
|
+
"inheritedFrom": {
|
|
41062
|
+
"name": "Popover",
|
|
41063
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41064
|
+
}
|
|
41065
|
+
},
|
|
41066
|
+
{
|
|
41067
|
+
"name": "focus-trap",
|
|
41068
|
+
"type": {
|
|
41069
|
+
"text": "boolean"
|
|
41070
|
+
},
|
|
41071
|
+
"description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
|
|
41072
|
+
"default": "false",
|
|
41073
|
+
"fieldName": "focusTrap",
|
|
41074
|
+
"inheritedFrom": {
|
|
41075
|
+
"name": "Popover",
|
|
41076
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41077
|
+
}
|
|
41078
|
+
},
|
|
41079
|
+
{
|
|
41080
|
+
"name": "prevent-scroll",
|
|
41081
|
+
"type": {
|
|
41082
|
+
"text": "boolean"
|
|
41083
|
+
},
|
|
41084
|
+
"description": "Prevent outside scrolling when popover is shown.",
|
|
41085
|
+
"default": "false",
|
|
41086
|
+
"fieldName": "preventScroll",
|
|
41087
|
+
"inheritedFrom": {
|
|
41088
|
+
"name": "Popover",
|
|
41089
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41090
|
+
}
|
|
41091
|
+
},
|
|
41092
|
+
{
|
|
41093
|
+
"name": "show-arrow",
|
|
41094
|
+
"type": {
|
|
41095
|
+
"text": "boolean"
|
|
41096
|
+
},
|
|
41097
|
+
"description": "The arrow visibility of the popover.",
|
|
41098
|
+
"default": "false",
|
|
41099
|
+
"fieldName": "showArrow",
|
|
41100
|
+
"inheritedFrom": {
|
|
41101
|
+
"name": "Popover",
|
|
41102
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41103
|
+
}
|
|
41104
|
+
},
|
|
41105
|
+
{
|
|
41106
|
+
"name": "close-button",
|
|
41107
|
+
"type": {
|
|
41108
|
+
"text": "boolean"
|
|
41109
|
+
},
|
|
41110
|
+
"description": "The close button visibility of the popover.",
|
|
41111
|
+
"default": "false",
|
|
41112
|
+
"fieldName": "closeButton",
|
|
41113
|
+
"inheritedFrom": {
|
|
41114
|
+
"name": "Popover",
|
|
41115
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41116
|
+
}
|
|
41117
|
+
},
|
|
41118
|
+
{
|
|
41119
|
+
"name": "interactive",
|
|
41120
|
+
"type": {
|
|
41121
|
+
"text": "boolean"
|
|
41122
|
+
},
|
|
41123
|
+
"description": "Determines whether the popover is interactive.\nMake sure to set focusTrap to true to keep the focus inside the popover in case necessary.\nSetting interactive to true will not automatically set focusTrap!",
|
|
41124
|
+
"default": "false",
|
|
41125
|
+
"fieldName": "interactive",
|
|
41126
|
+
"inheritedFrom": {
|
|
41127
|
+
"name": "Popover",
|
|
41128
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41129
|
+
}
|
|
41130
|
+
},
|
|
41131
|
+
{
|
|
41132
|
+
"name": "delay",
|
|
41133
|
+
"type": {
|
|
41134
|
+
"text": "string"
|
|
41135
|
+
},
|
|
41136
|
+
"description": "The delay of the show/hide popover.",
|
|
41137
|
+
"default": "0,0",
|
|
41138
|
+
"fieldName": "delay",
|
|
41139
|
+
"inheritedFrom": {
|
|
41140
|
+
"name": "Popover",
|
|
41141
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41142
|
+
}
|
|
41143
|
+
},
|
|
41144
|
+
{
|
|
41145
|
+
"name": "hide-on-escape",
|
|
41146
|
+
"type": {
|
|
41147
|
+
"text": "boolean"
|
|
41148
|
+
},
|
|
41149
|
+
"description": "Hide popover on escape key press.",
|
|
41150
|
+
"default": "false",
|
|
41151
|
+
"fieldName": "hideOnEscape",
|
|
41152
|
+
"inheritedFrom": {
|
|
41153
|
+
"name": "Popover",
|
|
41154
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41155
|
+
}
|
|
41156
|
+
},
|
|
41157
|
+
{
|
|
41158
|
+
"name": "propagate-event-on-escape",
|
|
41159
|
+
"type": {
|
|
41160
|
+
"text": "boolean"
|
|
41161
|
+
},
|
|
41162
|
+
"description": "Propagates the event, when the escape key is pressed (only when pressed inside the popover)\nIf true, the escape key press close the popover and will propagate the keydown event.\nIf false, the escape key press will close the popover but will not propagate the keydown event.\n(set to false to prevent the event from bubbling up to the document).\n\nThis only works when `hideOnEscape` is true.",
|
|
41163
|
+
"default": "false",
|
|
41164
|
+
"fieldName": "propagateEventOnEscape",
|
|
41165
|
+
"inheritedFrom": {
|
|
41166
|
+
"name": "Popover",
|
|
41167
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41168
|
+
}
|
|
41169
|
+
},
|
|
41170
|
+
{
|
|
41171
|
+
"name": "hide-on-blur",
|
|
41172
|
+
"type": {
|
|
41173
|
+
"text": "boolean"
|
|
41174
|
+
},
|
|
41175
|
+
"description": "Hide popover on blur.",
|
|
41176
|
+
"default": "false",
|
|
41177
|
+
"fieldName": "hideOnBlur",
|
|
41178
|
+
"inheritedFrom": {
|
|
41179
|
+
"name": "Popover",
|
|
41180
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41411
41181
|
}
|
|
41412
41182
|
},
|
|
41413
41183
|
{
|
|
41414
|
-
"
|
|
41415
|
-
"
|
|
41416
|
-
|
|
41417
|
-
|
|
41418
|
-
|
|
41419
|
-
|
|
41420
|
-
|
|
41421
|
-
"text": "boolean"
|
|
41422
|
-
},
|
|
41423
|
-
"description": "The old value of the visible property."
|
|
41424
|
-
},
|
|
41425
|
-
{
|
|
41426
|
-
"name": "newValue",
|
|
41427
|
-
"type": {
|
|
41428
|
-
"text": "boolean"
|
|
41429
|
-
},
|
|
41430
|
-
"description": "The new value of the visible property."
|
|
41431
|
-
}
|
|
41432
|
-
],
|
|
41433
|
-
"description": "Handles the popover visibility change and position the popover.\nHandles the exit event to close the popover.",
|
|
41184
|
+
"name": "hide-on-outside-click",
|
|
41185
|
+
"type": {
|
|
41186
|
+
"text": "boolean"
|
|
41187
|
+
},
|
|
41188
|
+
"description": "Hide on outside click of the popover.",
|
|
41189
|
+
"default": "false",
|
|
41190
|
+
"fieldName": "hideOnOutsideClick",
|
|
41434
41191
|
"inheritedFrom": {
|
|
41435
41192
|
"name": "Popover",
|
|
41436
|
-
"module": "components/popover/popover.component.
|
|
41193
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41437
41194
|
}
|
|
41438
41195
|
},
|
|
41439
41196
|
{
|
|
41440
|
-
"
|
|
41441
|
-
"
|
|
41442
|
-
|
|
41443
|
-
|
|
41197
|
+
"name": "focus-back-to-trigger",
|
|
41198
|
+
"type": {
|
|
41199
|
+
"text": "boolean"
|
|
41200
|
+
},
|
|
41201
|
+
"description": "The focus back to trigger after the popover hide.",
|
|
41202
|
+
"default": "false",
|
|
41203
|
+
"fieldName": "focusBackToTrigger",
|
|
41444
41204
|
"inheritedFrom": {
|
|
41445
41205
|
"name": "Popover",
|
|
41446
|
-
"module": "components/popover/popover.component.
|
|
41206
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41447
41207
|
}
|
|
41448
41208
|
},
|
|
41449
41209
|
{
|
|
41450
|
-
"
|
|
41451
|
-
"
|
|
41452
|
-
|
|
41453
|
-
|
|
41210
|
+
"name": "backdrop",
|
|
41211
|
+
"type": {
|
|
41212
|
+
"text": "boolean"
|
|
41213
|
+
},
|
|
41214
|
+
"description": "Determines whether the popover with backdrop.\nOther than popover and trigger element, the rest of the screen will be covered with a backdrop.",
|
|
41215
|
+
"default": "false",
|
|
41216
|
+
"fieldName": "backdrop",
|
|
41454
41217
|
"inheritedFrom": {
|
|
41455
41218
|
"name": "Popover",
|
|
41456
|
-
"module": "components/popover/popover.component.
|
|
41219
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41457
41220
|
}
|
|
41458
41221
|
},
|
|
41459
41222
|
{
|
|
41460
|
-
"
|
|
41461
|
-
"
|
|
41462
|
-
|
|
41463
|
-
|
|
41223
|
+
"name": "backdrop-append-to",
|
|
41224
|
+
"type": {
|
|
41225
|
+
"text": "string | undefined"
|
|
41226
|
+
},
|
|
41227
|
+
"description": "Element ID the backdrop will be a append to (if `backdrop` is true).",
|
|
41228
|
+
"default": "''",
|
|
41229
|
+
"fieldName": "backdropAppendTo",
|
|
41464
41230
|
"inheritedFrom": {
|
|
41465
41231
|
"name": "Popover",
|
|
41466
|
-
"module": "components/popover/popover.component.
|
|
41232
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41467
41233
|
}
|
|
41468
41234
|
},
|
|
41469
41235
|
{
|
|
41470
|
-
"
|
|
41471
|
-
"
|
|
41472
|
-
|
|
41473
|
-
|
|
41236
|
+
"name": "is-backdrop-invisible",
|
|
41237
|
+
"type": {
|
|
41238
|
+
"text": "boolean | undefined"
|
|
41239
|
+
},
|
|
41240
|
+
"description": "Set this property to false to make the backdrop a dimmed visible backdrop (if `backdrop` is true).\nThis is useful for cases where the popovers backdrop should get dimmed.",
|
|
41241
|
+
"default": "true - default is to have a invisible backdrop",
|
|
41242
|
+
"fieldName": "isBackdropInvisible",
|
|
41474
41243
|
"inheritedFrom": {
|
|
41475
41244
|
"name": "Popover",
|
|
41476
|
-
"module": "components/popover/popover.component.
|
|
41245
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41477
41246
|
}
|
|
41478
41247
|
},
|
|
41479
41248
|
{
|
|
41480
|
-
"
|
|
41481
|
-
"
|
|
41482
|
-
|
|
41483
|
-
|
|
41249
|
+
"name": "flip",
|
|
41250
|
+
"type": {
|
|
41251
|
+
"text": "boolean"
|
|
41252
|
+
},
|
|
41253
|
+
"description": "Changes the placement of popover to keep it in view when scrolling.",
|
|
41254
|
+
"default": "true",
|
|
41255
|
+
"fieldName": "flip",
|
|
41484
41256
|
"inheritedFrom": {
|
|
41485
41257
|
"name": "Popover",
|
|
41486
|
-
"module": "components/popover/popover.component.
|
|
41258
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41487
41259
|
}
|
|
41488
41260
|
},
|
|
41489
41261
|
{
|
|
41490
|
-
"
|
|
41491
|
-
"
|
|
41492
|
-
|
|
41493
|
-
|
|
41262
|
+
"name": "size",
|
|
41263
|
+
"type": {
|
|
41264
|
+
"text": "boolean"
|
|
41265
|
+
},
|
|
41266
|
+
"description": "Changes the size of popover to keep it in view when scrolling.",
|
|
41267
|
+
"default": "false",
|
|
41268
|
+
"fieldName": "size",
|
|
41494
41269
|
"inheritedFrom": {
|
|
41495
41270
|
"name": "Popover",
|
|
41496
|
-
"module": "components/popover/popover.component.
|
|
41271
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41497
41272
|
}
|
|
41498
41273
|
},
|
|
41499
41274
|
{
|
|
41500
|
-
"
|
|
41501
|
-
"
|
|
41502
|
-
|
|
41503
|
-
|
|
41275
|
+
"name": "z-index",
|
|
41276
|
+
"type": {
|
|
41277
|
+
"text": "number"
|
|
41278
|
+
},
|
|
41279
|
+
"description": "The z-index of the popover.",
|
|
41280
|
+
"default": "1000",
|
|
41281
|
+
"fieldName": "zIndex",
|
|
41504
41282
|
"inheritedFrom": {
|
|
41505
41283
|
"name": "Popover",
|
|
41506
|
-
"module": "components/popover/popover.component.
|
|
41284
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41507
41285
|
}
|
|
41508
41286
|
},
|
|
41509
41287
|
{
|
|
41510
|
-
"
|
|
41511
|
-
"
|
|
41512
|
-
|
|
41513
|
-
|
|
41288
|
+
"name": "append-to",
|
|
41289
|
+
"type": {
|
|
41290
|
+
"text": "string | undefined"
|
|
41291
|
+
},
|
|
41292
|
+
"description": "Element ID that the popover append to.",
|
|
41293
|
+
"default": "''",
|
|
41294
|
+
"fieldName": "appendTo",
|
|
41514
41295
|
"inheritedFrom": {
|
|
41515
41296
|
"name": "Popover",
|
|
41516
|
-
"module": "components/popover/popover.component.
|
|
41297
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41517
41298
|
}
|
|
41518
41299
|
},
|
|
41519
41300
|
{
|
|
41520
|
-
"
|
|
41521
|
-
"
|
|
41522
|
-
|
|
41523
|
-
|
|
41301
|
+
"name": "close-button-aria-label",
|
|
41302
|
+
"type": {
|
|
41303
|
+
"text": "string | null"
|
|
41304
|
+
},
|
|
41305
|
+
"default": "null",
|
|
41306
|
+
"description": "aria-label attribute to be set for close button accessibility.",
|
|
41307
|
+
"fieldName": "closeButtonAriaLabel",
|
|
41524
41308
|
"inheritedFrom": {
|
|
41525
41309
|
"name": "Popover",
|
|
41526
|
-
"module": "components/popover/popover.component.
|
|
41310
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41527
41311
|
}
|
|
41528
41312
|
},
|
|
41529
41313
|
{
|
|
41530
|
-
"
|
|
41531
|
-
"
|
|
41532
|
-
|
|
41533
|
-
|
|
41314
|
+
"name": "strategy",
|
|
41315
|
+
"type": {
|
|
41316
|
+
"text": "'absolute' | 'fixed'"
|
|
41317
|
+
},
|
|
41318
|
+
"description": "The strategy of the popover.\nThis determines how the popover is positioned in the DOM.\n- **absolute**: The popover is positioned absolutely relative to the nearest positioned ancestor.\n- **fixed**: The popover is positioned fixed relative to the viewport.\n\nDefault as `absolute` is recommended for most cases.\nIn cases where the popover gets clipped by a scrollable container,\nyou can set this to `fixed` to avoid clipping.",
|
|
41319
|
+
"default": "absolute",
|
|
41320
|
+
"fieldName": "strategy",
|
|
41534
41321
|
"inheritedFrom": {
|
|
41535
41322
|
"name": "Popover",
|
|
41536
|
-
"module": "components/popover/popover.component.
|
|
41323
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41537
41324
|
}
|
|
41538
41325
|
},
|
|
41539
41326
|
{
|
|
41540
|
-
"
|
|
41541
|
-
"
|
|
41542
|
-
|
|
41543
|
-
|
|
41544
|
-
"
|
|
41545
|
-
|
|
41546
|
-
|
|
41547
|
-
"name": "element"
|
|
41548
|
-
}
|
|
41549
|
-
],
|
|
41327
|
+
"name": "role",
|
|
41328
|
+
"type": {
|
|
41329
|
+
"text": "HTMLElement['role']"
|
|
41330
|
+
},
|
|
41331
|
+
"description": "Role of the popover",
|
|
41332
|
+
"default": "dialog",
|
|
41333
|
+
"fieldName": "role",
|
|
41550
41334
|
"inheritedFrom": {
|
|
41551
41335
|
"name": "Popover",
|
|
41552
|
-
"module": "components/popover/popover.component.
|
|
41336
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41553
41337
|
}
|
|
41554
41338
|
},
|
|
41555
41339
|
{
|
|
41556
|
-
"
|
|
41557
|
-
"
|
|
41558
|
-
|
|
41340
|
+
"name": "aria-labelledby",
|
|
41341
|
+
"type": {
|
|
41342
|
+
"text": "string | null"
|
|
41343
|
+
},
|
|
41344
|
+
"default": "null",
|
|
41345
|
+
"description": "aria-labelledby for an interactive popover only, defaults to the trigger component id.\nUsed in nested cases where the triggerComponent isn't the actual button.",
|
|
41346
|
+
"fieldName": "ariaLabelledby",
|
|
41559
41347
|
"inheritedFrom": {
|
|
41560
41348
|
"name": "Popover",
|
|
41561
|
-
"module": "components/popover/popover.component.
|
|
41349
|
+
"module": "src/components/popover/popover.component.ts"
|
|
41562
41350
|
}
|
|
41563
|
-
}
|
|
41564
|
-
],
|
|
41565
|
-
"events": [
|
|
41351
|
+
},
|
|
41566
41352
|
{
|
|
41567
|
-
"
|
|
41568
|
-
"
|
|
41569
|
-
|
|
41353
|
+
"name": "aria-describedby",
|
|
41354
|
+
"type": {
|
|
41355
|
+
"text": "string | null"
|
|
41356
|
+
},
|
|
41357
|
+
"default": "null",
|
|
41358
|
+
"description": "aria-describedby of the popover.",
|
|
41359
|
+
"fieldName": "ariaDescribedby",
|
|
41570
41360
|
"inheritedFrom": {
|
|
41571
41361
|
"name": "Popover",
|
|
41572
41362
|
"module": "src/components/popover/popover.component.ts"
|
|
41573
41363
|
}
|
|
41574
41364
|
},
|
|
41575
41365
|
{
|
|
41576
|
-
"
|
|
41577
|
-
"
|
|
41578
|
-
|
|
41366
|
+
"name": "disable-aria-expanded",
|
|
41367
|
+
"type": {
|
|
41368
|
+
"text": "boolean"
|
|
41369
|
+
},
|
|
41370
|
+
"description": "Disable setting the aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
|
|
41371
|
+
"default": "false",
|
|
41372
|
+
"fieldName": "disableAriaExpanded",
|
|
41579
41373
|
"inheritedFrom": {
|
|
41580
41374
|
"name": "Popover",
|
|
41581
41375
|
"module": "src/components/popover/popover.component.ts"
|
|
41582
41376
|
}
|
|
41583
41377
|
},
|
|
41584
41378
|
{
|
|
41585
|
-
"
|
|
41586
|
-
"
|
|
41587
|
-
|
|
41379
|
+
"name": "disable-aria-haspopup",
|
|
41380
|
+
"type": {
|
|
41381
|
+
"text": "boolean"
|
|
41382
|
+
},
|
|
41383
|
+
"description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
|
|
41384
|
+
"default": "false",
|
|
41385
|
+
"fieldName": "disableAriaHasPopup",
|
|
41588
41386
|
"inheritedFrom": {
|
|
41589
41387
|
"name": "Popover",
|
|
41590
41388
|
"module": "src/components/popover/popover.component.ts"
|
|
41591
41389
|
}
|
|
41592
41390
|
},
|
|
41593
41391
|
{
|
|
41594
|
-
"
|
|
41595
|
-
"
|
|
41596
|
-
|
|
41392
|
+
"name": "keep-connected-tooltip-closed",
|
|
41393
|
+
"type": {
|
|
41394
|
+
"text": "boolean"
|
|
41395
|
+
},
|
|
41396
|
+
"description": "If a tooltip is connected to the same trigger element,\nthis property will keep the connected tooltip closed if this popover is open.\nThis is useful when you want to show a popover with a tooltip\nbut you don't want the tooltip to be shown at the same time.",
|
|
41397
|
+
"fieldName": "keepConnectedTooltipClosed",
|
|
41597
41398
|
"inheritedFrom": {
|
|
41598
41399
|
"name": "Popover",
|
|
41599
41400
|
"module": "src/components/popover/popover.component.ts"
|
|
41600
41401
|
}
|
|
41601
41402
|
}
|
|
41602
41403
|
],
|
|
41603
|
-
"
|
|
41404
|
+
"superclass": {
|
|
41405
|
+
"name": "Popover",
|
|
41406
|
+
"module": "/src/components/popover/popover.component"
|
|
41407
|
+
},
|
|
41408
|
+
"tagName": "mdc-toggletip",
|
|
41409
|
+
"jsDoc": "/**\n * A toggletip is triggered by clicking a trigger element.\n *\n * It can contain interactive content and can be closed by\n * clicking outside the toggletip or pressing the escape key.\n *\n * It can have optional close button to close the toggletip.\n *\n * Toggletip component uses `mdc-screenreaderannouncer` internally to\n * announce the toggletip text content with screen readers when the toggletip is shown.\n *\n * `screenreader-announcer-identity` attribute can be used to provide ID of an element\n * in DOM to which announcement elements are added. If not set, a visually hidden\n * div element is created in DOM to which announcement elements are added.\n *\n * Please refer to the `mdc-screenreaderannouncer` component for more details.\n *\n * @dependency mdc-screenreaderannouncer\n * @dependency mdc-button\n *\n * @tagname mdc-toggletip\n *\n * @event shown - (React: onShown) This event is dispatched when the toggletip is shown\n * @event hidden - (React: onHidden) This event is dispatched when the toggletip is hidden\n * @event created - (React: onCreated) This event is dispatched when the toggletip is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the toggletip\n * is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-toggletip-max-width - The maximum width of the toggletip.\n * @cssproperty --mdc-toggletip-text-color - The text color of the toggletip.\n * @cssproperty --mdc-toggletip-text-color-contrast - The text color of the toggletip\n * when the color is contrast.\n *\n * @slot - Default slot for the toggletip content\n */",
|
|
41410
|
+
"customElement": true
|
|
41411
|
+
}
|
|
41412
|
+
],
|
|
41413
|
+
"exports": [
|
|
41414
|
+
{
|
|
41415
|
+
"kind": "js",
|
|
41416
|
+
"name": "default",
|
|
41417
|
+
"declaration": {
|
|
41418
|
+
"name": "ToggleTip",
|
|
41419
|
+
"module": "components/toggletip/toggletip.component.js"
|
|
41420
|
+
}
|
|
41421
|
+
}
|
|
41422
|
+
]
|
|
41423
|
+
},
|
|
41424
|
+
{
|
|
41425
|
+
"kind": "javascript-module",
|
|
41426
|
+
"path": "components/toggle/toggle.component.js",
|
|
41427
|
+
"declarations": [
|
|
41428
|
+
{
|
|
41429
|
+
"kind": "class",
|
|
41430
|
+
"description": "Toggle Component is an interactive control used to switch between two mutually exclusive options,\nsuch as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\nwhere users need to enable or disable a feature.\nIt contains an optional label and an optional helper text.\n\nTo create a group of toggles, use the FormFieldGroup component.\n\nNote: It internally renders a checkbox styled as a toggle switch.",
|
|
41431
|
+
"name": "Toggle",
|
|
41432
|
+
"cssProperties": [
|
|
41604
41433
|
{
|
|
41605
|
-
"
|
|
41434
|
+
"description": "Width of the toggle",
|
|
41435
|
+
"name": "--mdc-toggle-width"
|
|
41436
|
+
},
|
|
41437
|
+
{
|
|
41438
|
+
"description": "Height of the toggle",
|
|
41439
|
+
"name": "--mdc-toggle-height"
|
|
41440
|
+
},
|
|
41441
|
+
{
|
|
41442
|
+
"description": "Width of the toggle when it's size is compact",
|
|
41443
|
+
"name": "--mdc-toggle-width-compact"
|
|
41444
|
+
},
|
|
41445
|
+
{
|
|
41446
|
+
"description": "Height of the toggle when it's size is compact",
|
|
41447
|
+
"name": "--mdc-toggle-height-compact"
|
|
41448
|
+
},
|
|
41449
|
+
{
|
|
41450
|
+
"description": "Line height of the toggle label",
|
|
41451
|
+
"name": "--mdc-toggle-label-lineheight"
|
|
41452
|
+
},
|
|
41453
|
+
{
|
|
41454
|
+
"description": "Font size of the toggle label",
|
|
41455
|
+
"name": "--mdc-toggle-label-fontsize"
|
|
41456
|
+
},
|
|
41457
|
+
{
|
|
41458
|
+
"description": "Font weight of the toggle label",
|
|
41459
|
+
"name": "--mdc-toggle-label-fontweight"
|
|
41460
|
+
},
|
|
41461
|
+
{
|
|
41462
|
+
"description": "Color of the toggle label and help text in disabled state",
|
|
41463
|
+
"name": "--mdc-toggle-label-color-disabled"
|
|
41464
|
+
},
|
|
41465
|
+
{
|
|
41466
|
+
"description": "Color of the help text label",
|
|
41467
|
+
"name": "--mdc-toggle-help-text-color"
|
|
41468
|
+
},
|
|
41469
|
+
{
|
|
41470
|
+
"description": "Background color of the active toggle in hover state",
|
|
41471
|
+
"name": "--mdc-toggle-active-hover-color"
|
|
41472
|
+
},
|
|
41473
|
+
{
|
|
41474
|
+
"description": "Background color of the active toggle in pressed state",
|
|
41475
|
+
"name": "--mdc-toggle-active-pressed-color"
|
|
41476
|
+
},
|
|
41477
|
+
{
|
|
41478
|
+
"description": "Background color of the inactive toggle in hover state",
|
|
41479
|
+
"name": "--mdc-toggle-inactive-hover-color"
|
|
41480
|
+
},
|
|
41481
|
+
{
|
|
41482
|
+
"description": "Background color of the inactive toggle in pressed state",
|
|
41483
|
+
"name": "--mdc-toggle-inactive-pressed-color"
|
|
41484
|
+
}
|
|
41485
|
+
],
|
|
41486
|
+
"members": [
|
|
41487
|
+
{
|
|
41488
|
+
"kind": "field",
|
|
41489
|
+
"name": "checked",
|
|
41606
41490
|
"type": {
|
|
41607
|
-
"text": "
|
|
41491
|
+
"text": "boolean"
|
|
41608
41492
|
},
|
|
41609
|
-
"
|
|
41610
|
-
"
|
|
41611
|
-
"
|
|
41493
|
+
"default": "false",
|
|
41494
|
+
"description": "Determines whether the toggle is active or inactive.",
|
|
41495
|
+
"attribute": "checked",
|
|
41496
|
+
"reflects": true
|
|
41612
41497
|
},
|
|
41613
41498
|
{
|
|
41614
|
-
"
|
|
41499
|
+
"kind": "field",
|
|
41500
|
+
"name": "size",
|
|
41501
|
+
"type": {
|
|
41502
|
+
"text": "ToggleSize"
|
|
41503
|
+
},
|
|
41504
|
+
"description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
|
|
41505
|
+
"default": "default",
|
|
41506
|
+
"attribute": "size",
|
|
41507
|
+
"reflects": true
|
|
41508
|
+
},
|
|
41509
|
+
{
|
|
41510
|
+
"kind": "field",
|
|
41511
|
+
"name": "autofocus",
|
|
41615
41512
|
"type": {
|
|
41616
41513
|
"text": "boolean"
|
|
41617
41514
|
},
|
|
41618
|
-
"default": "
|
|
41619
|
-
"description": "
|
|
41620
|
-
"
|
|
41621
|
-
"
|
|
41622
|
-
"name": "Popover",
|
|
41623
|
-
"module": "src/components/popover/popover.component.ts"
|
|
41624
|
-
}
|
|
41515
|
+
"default": "false",
|
|
41516
|
+
"description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
|
|
41517
|
+
"attribute": "autofocus",
|
|
41518
|
+
"reflects": true
|
|
41625
41519
|
},
|
|
41626
41520
|
{
|
|
41627
|
-
"
|
|
41521
|
+
"kind": "method",
|
|
41522
|
+
"name": "manageRequired",
|
|
41523
|
+
"privacy": "private",
|
|
41524
|
+
"description": "Manages the required state of the checkbox.\nIf the checkbox is not checked and the required property is set, then the checkbox is invalid.\nIf the validationMessage is set, it will be used as the custom validity message.\nIf the validationMessage is not set, it will clear the custom validity message."
|
|
41525
|
+
},
|
|
41526
|
+
{
|
|
41527
|
+
"kind": "method",
|
|
41528
|
+
"name": "setFormValue",
|
|
41529
|
+
"privacy": "private",
|
|
41530
|
+
"description": "Updates the form value to reflect the current state of the toggle.\nIf toggle is switched on, the value is set to either the user-provided value or 'isActive' if no value is provided.\nIf toggle is switched off, the value is set to null."
|
|
41531
|
+
},
|
|
41532
|
+
{
|
|
41533
|
+
"kind": "method",
|
|
41534
|
+
"name": "toggleState",
|
|
41535
|
+
"privacy": "private",
|
|
41536
|
+
"return": {
|
|
41537
|
+
"type": {
|
|
41538
|
+
"text": "void"
|
|
41539
|
+
}
|
|
41540
|
+
},
|
|
41541
|
+
"description": "Toggles the state of the toggle element.\nIf the element is not disabled, then the checked property is toggled."
|
|
41542
|
+
},
|
|
41543
|
+
{
|
|
41544
|
+
"kind": "method",
|
|
41545
|
+
"name": "handleKeyDown",
|
|
41546
|
+
"privacy": "private",
|
|
41547
|
+
"return": {
|
|
41548
|
+
"type": {
|
|
41549
|
+
"text": "void"
|
|
41550
|
+
}
|
|
41551
|
+
},
|
|
41552
|
+
"parameters": [
|
|
41553
|
+
{
|
|
41554
|
+
"name": "event",
|
|
41555
|
+
"type": {
|
|
41556
|
+
"text": "KeyboardEvent"
|
|
41557
|
+
},
|
|
41558
|
+
"description": "The keyboard event."
|
|
41559
|
+
}
|
|
41560
|
+
],
|
|
41561
|
+
"description": "Handles the keydown event on the toggle element.\nWhen the user presses Enter, the form is submitted."
|
|
41562
|
+
},
|
|
41563
|
+
{
|
|
41564
|
+
"kind": "method",
|
|
41565
|
+
"name": "handleChange",
|
|
41566
|
+
"privacy": "private",
|
|
41567
|
+
"parameters": [
|
|
41568
|
+
{
|
|
41569
|
+
"name": "event",
|
|
41570
|
+
"type": {
|
|
41571
|
+
"text": "Event"
|
|
41572
|
+
}
|
|
41573
|
+
}
|
|
41574
|
+
],
|
|
41575
|
+
"description": "Toggles the state of the toggle element.\nand dispatch the new change event."
|
|
41576
|
+
},
|
|
41577
|
+
{
|
|
41578
|
+
"kind": "method",
|
|
41579
|
+
"name": "setToggleSize",
|
|
41580
|
+
"privacy": "private",
|
|
41581
|
+
"parameters": [
|
|
41582
|
+
{
|
|
41583
|
+
"name": "size",
|
|
41584
|
+
"type": {
|
|
41585
|
+
"text": "ToggleSize"
|
|
41586
|
+
},
|
|
41587
|
+
"description": "The size to set."
|
|
41588
|
+
}
|
|
41589
|
+
],
|
|
41590
|
+
"description": "Sets the size attribute for the toggle component.\nIf the provided size is not included in the TOGGLE_SIZE,\nit defaults to the value specified in DEFAULTS.SIZE."
|
|
41591
|
+
},
|
|
41592
|
+
{
|
|
41593
|
+
"kind": "field",
|
|
41594
|
+
"name": "name",
|
|
41628
41595
|
"type": {
|
|
41629
41596
|
"text": "string"
|
|
41630
41597
|
},
|
|
41631
41598
|
"default": "''",
|
|
41632
|
-
"description": "
|
|
41633
|
-
"
|
|
41599
|
+
"description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
|
|
41600
|
+
"attribute": "name",
|
|
41601
|
+
"reflects": true,
|
|
41634
41602
|
"inheritedFrom": {
|
|
41635
|
-
"name": "
|
|
41636
|
-
"module": "
|
|
41603
|
+
"name": "FormInternalsMixin",
|
|
41604
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
41637
41605
|
}
|
|
41638
41606
|
},
|
|
41639
41607
|
{
|
|
41640
|
-
"
|
|
41608
|
+
"kind": "field",
|
|
41609
|
+
"name": "value",
|
|
41641
41610
|
"type": {
|
|
41642
41611
|
"text": "string"
|
|
41643
41612
|
},
|
|
41644
41613
|
"default": "''",
|
|
41645
|
-
"description": "
|
|
41646
|
-
"
|
|
41614
|
+
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
|
41615
|
+
"attribute": "value",
|
|
41616
|
+
"reflects": true,
|
|
41647
41617
|
"inheritedFrom": {
|
|
41648
|
-
"name": "
|
|
41649
|
-
"module": "
|
|
41618
|
+
"name": "FormInternalsMixin",
|
|
41619
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
41650
41620
|
}
|
|
41651
41621
|
},
|
|
41652
41622
|
{
|
|
41653
|
-
"
|
|
41623
|
+
"kind": "field",
|
|
41624
|
+
"name": "validationMessage",
|
|
41654
41625
|
"type": {
|
|
41655
|
-
"text": "
|
|
41626
|
+
"text": "string | undefined"
|
|
41656
41627
|
},
|
|
41657
|
-
"description": "
|
|
41658
|
-
"
|
|
41659
|
-
"
|
|
41628
|
+
"description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
|
|
41629
|
+
"attribute": "validation-message",
|
|
41630
|
+
"reflects": true,
|
|
41660
41631
|
"inheritedFrom": {
|
|
41661
|
-
"name": "
|
|
41662
|
-
"module": "
|
|
41632
|
+
"name": "FormInternalsMixin",
|
|
41633
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
41663
41634
|
}
|
|
41664
41635
|
},
|
|
41665
41636
|
{
|
|
41666
|
-
"
|
|
41637
|
+
"kind": "field",
|
|
41638
|
+
"name": "validity",
|
|
41667
41639
|
"type": {
|
|
41668
|
-
"text": "
|
|
41640
|
+
"text": "ValidityState"
|
|
41669
41641
|
},
|
|
41670
|
-
"
|
|
41671
|
-
"default": "bottom",
|
|
41672
|
-
"fieldName": "placement",
|
|
41642
|
+
"readonly": true,
|
|
41673
41643
|
"inheritedFrom": {
|
|
41674
|
-
"name": "
|
|
41675
|
-
"module": "
|
|
41644
|
+
"name": "FormInternalsMixin",
|
|
41645
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
41676
41646
|
}
|
|
41677
41647
|
},
|
|
41678
41648
|
{
|
|
41679
|
-
"
|
|
41680
|
-
"
|
|
41681
|
-
|
|
41682
|
-
|
|
41683
|
-
|
|
41684
|
-
|
|
41685
|
-
|
|
41649
|
+
"kind": "field",
|
|
41650
|
+
"name": "willValidate",
|
|
41651
|
+
"readonly": true,
|
|
41652
|
+
"inheritedFrom": {
|
|
41653
|
+
"name": "FormInternalsMixin",
|
|
41654
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
41655
|
+
}
|
|
41656
|
+
},
|
|
41657
|
+
{
|
|
41658
|
+
"kind": "method",
|
|
41659
|
+
"name": "setValidity",
|
|
41660
|
+
"description": "Sets the validity of the input field based on the input field's validity.",
|
|
41661
|
+
"return": {
|
|
41662
|
+
"type": {
|
|
41663
|
+
"text": ""
|
|
41664
|
+
}
|
|
41665
|
+
},
|
|
41686
41666
|
"inheritedFrom": {
|
|
41687
|
-
"name": "
|
|
41688
|
-
"module": "
|
|
41667
|
+
"name": "FormInternalsMixin",
|
|
41668
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
41689
41669
|
}
|
|
41690
41670
|
},
|
|
41691
41671
|
{
|
|
41692
|
-
"
|
|
41693
|
-
"
|
|
41694
|
-
|
|
41672
|
+
"kind": "method",
|
|
41673
|
+
"name": "checkValidity",
|
|
41674
|
+
"return": {
|
|
41675
|
+
"type": {
|
|
41676
|
+
"text": "boolean"
|
|
41677
|
+
}
|
|
41695
41678
|
},
|
|
41696
|
-
"description": "The visibility of the popover.",
|
|
41697
|
-
"default": "false",
|
|
41698
|
-
"fieldName": "visible",
|
|
41699
41679
|
"inheritedFrom": {
|
|
41700
|
-
"name": "
|
|
41701
|
-
"module": "
|
|
41680
|
+
"name": "FormInternalsMixin",
|
|
41681
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
41702
41682
|
}
|
|
41703
41683
|
},
|
|
41704
41684
|
{
|
|
41705
|
-
"
|
|
41706
|
-
"
|
|
41707
|
-
"text": "number"
|
|
41708
|
-
},
|
|
41709
|
-
"description": "The offset of the popover.",
|
|
41710
|
-
"default": "4",
|
|
41711
|
-
"fieldName": "offset",
|
|
41685
|
+
"kind": "method",
|
|
41686
|
+
"name": "reportValidity",
|
|
41712
41687
|
"inheritedFrom": {
|
|
41713
|
-
"name": "
|
|
41714
|
-
"module": "
|
|
41688
|
+
"name": "FormInternalsMixin",
|
|
41689
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
41715
41690
|
}
|
|
41716
41691
|
},
|
|
41717
41692
|
{
|
|
41718
|
-
"
|
|
41693
|
+
"kind": "field",
|
|
41694
|
+
"name": "dataAriaLabel",
|
|
41719
41695
|
"type": {
|
|
41720
|
-
"text": "
|
|
41696
|
+
"text": "string | null"
|
|
41721
41697
|
},
|
|
41722
|
-
"
|
|
41723
|
-
"
|
|
41724
|
-
"
|
|
41698
|
+
"default": "null",
|
|
41699
|
+
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
41700
|
+
"attribute": "data-aria-label",
|
|
41701
|
+
"reflects": true,
|
|
41725
41702
|
"inheritedFrom": {
|
|
41726
|
-
"name": "
|
|
41727
|
-
"module": "
|
|
41703
|
+
"name": "DataAriaLabelMixin",
|
|
41704
|
+
"module": "utils/mixins/DataAriaLabelMixin.js"
|
|
41728
41705
|
}
|
|
41729
41706
|
},
|
|
41730
41707
|
{
|
|
41731
|
-
"
|
|
41708
|
+
"kind": "field",
|
|
41709
|
+
"name": "disabled",
|
|
41732
41710
|
"type": {
|
|
41733
|
-
"text": "
|
|
41711
|
+
"text": "boolean | undefined"
|
|
41734
41712
|
},
|
|
41735
|
-
"description": "
|
|
41736
|
-
"default": "
|
|
41737
|
-
"
|
|
41713
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
41714
|
+
"default": "undefined",
|
|
41715
|
+
"attribute": "disabled",
|
|
41716
|
+
"reflects": true,
|
|
41738
41717
|
"inheritedFrom": {
|
|
41739
|
-
"name": "
|
|
41740
|
-
"module": "
|
|
41718
|
+
"name": "FormfieldWrapper",
|
|
41719
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
41741
41720
|
}
|
|
41742
41721
|
},
|
|
41743
41722
|
{
|
|
41744
|
-
"
|
|
41723
|
+
"kind": "field",
|
|
41724
|
+
"name": "label",
|
|
41745
41725
|
"type": {
|
|
41746
|
-
"text": "
|
|
41726
|
+
"text": "string | undefined"
|
|
41747
41727
|
},
|
|
41748
|
-
"description": "
|
|
41749
|
-
"
|
|
41750
|
-
"
|
|
41728
|
+
"description": "The label of the input field. It is linked to the input field using the `for` attribute.",
|
|
41729
|
+
"attribute": "label",
|
|
41730
|
+
"reflects": true,
|
|
41751
41731
|
"inheritedFrom": {
|
|
41752
|
-
"name": "
|
|
41753
|
-
"module": "
|
|
41732
|
+
"name": "FormfieldWrapper",
|
|
41733
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
41754
41734
|
}
|
|
41755
41735
|
},
|
|
41756
41736
|
{
|
|
41757
|
-
"
|
|
41737
|
+
"kind": "field",
|
|
41738
|
+
"name": "required",
|
|
41758
41739
|
"type": {
|
|
41759
41740
|
"text": "boolean"
|
|
41760
41741
|
},
|
|
41761
|
-
"description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
|
|
41762
41742
|
"default": "false",
|
|
41763
|
-
"
|
|
41743
|
+
"description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
|
|
41744
|
+
"attribute": "required",
|
|
41745
|
+
"reflects": true,
|
|
41764
41746
|
"inheritedFrom": {
|
|
41765
|
-
"name": "
|
|
41766
|
-
"module": "
|
|
41747
|
+
"name": "FormfieldWrapper",
|
|
41748
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
41767
41749
|
}
|
|
41768
41750
|
},
|
|
41769
41751
|
{
|
|
41770
|
-
"
|
|
41752
|
+
"kind": "field",
|
|
41753
|
+
"name": "helpTextType",
|
|
41771
41754
|
"type": {
|
|
41772
|
-
"text": "
|
|
41755
|
+
"text": "ValidationType"
|
|
41773
41756
|
},
|
|
41774
|
-
"description": "
|
|
41775
|
-
"
|
|
41776
|
-
"
|
|
41757
|
+
"description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
|
|
41758
|
+
"attribute": "help-text-type",
|
|
41759
|
+
"reflects": true,
|
|
41777
41760
|
"inheritedFrom": {
|
|
41778
|
-
"name": "
|
|
41779
|
-
"module": "
|
|
41761
|
+
"name": "FormfieldWrapper",
|
|
41762
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
41780
41763
|
}
|
|
41781
41764
|
},
|
|
41782
41765
|
{
|
|
41783
|
-
"
|
|
41766
|
+
"kind": "field",
|
|
41767
|
+
"name": "helpText",
|
|
41784
41768
|
"type": {
|
|
41785
|
-
"text": "
|
|
41769
|
+
"text": "string | undefined"
|
|
41786
41770
|
},
|
|
41787
|
-
"description": "The
|
|
41788
|
-
"
|
|
41789
|
-
"
|
|
41771
|
+
"description": "The help text that is displayed below the input field.",
|
|
41772
|
+
"attribute": "help-text",
|
|
41773
|
+
"reflects": true,
|
|
41790
41774
|
"inheritedFrom": {
|
|
41791
|
-
"name": "
|
|
41792
|
-
"module": "
|
|
41775
|
+
"name": "FormfieldWrapper",
|
|
41776
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
41793
41777
|
}
|
|
41794
41778
|
},
|
|
41795
41779
|
{
|
|
41796
|
-
"
|
|
41780
|
+
"kind": "field",
|
|
41781
|
+
"name": "toggletipText",
|
|
41797
41782
|
"type": {
|
|
41798
|
-
"text": "
|
|
41783
|
+
"text": "string | undefined"
|
|
41799
41784
|
},
|
|
41800
|
-
"description": "The
|
|
41801
|
-
"
|
|
41802
|
-
"
|
|
41785
|
+
"description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
|
|
41786
|
+
"attribute": "toggletip-text",
|
|
41787
|
+
"reflects": true,
|
|
41803
41788
|
"inheritedFrom": {
|
|
41804
|
-
"name": "
|
|
41805
|
-
"module": "
|
|
41789
|
+
"name": "FormfieldWrapper",
|
|
41790
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
41806
41791
|
}
|
|
41807
41792
|
},
|
|
41808
41793
|
{
|
|
41809
|
-
"
|
|
41794
|
+
"kind": "field",
|
|
41795
|
+
"name": "toggletipPlacement",
|
|
41810
41796
|
"type": {
|
|
41811
|
-
"text": "
|
|
41797
|
+
"text": "PopoverPlacement"
|
|
41812
41798
|
},
|
|
41813
|
-
"description": "
|
|
41814
|
-
"default": "
|
|
41815
|
-
"
|
|
41799
|
+
"description": "The placement of the toggletip that is displayed when the info icon is hovered.",
|
|
41800
|
+
"default": "'top'",
|
|
41801
|
+
"attribute": "toggletip-placement",
|
|
41802
|
+
"reflects": true,
|
|
41816
41803
|
"inheritedFrom": {
|
|
41817
|
-
"name": "
|
|
41818
|
-
"module": "
|
|
41804
|
+
"name": "FormfieldWrapper",
|
|
41805
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
41819
41806
|
}
|
|
41820
41807
|
},
|
|
41821
41808
|
{
|
|
41822
|
-
"
|
|
41809
|
+
"kind": "field",
|
|
41810
|
+
"name": "infoIconAriaLabel",
|
|
41823
41811
|
"type": {
|
|
41824
|
-
"text": "string"
|
|
41812
|
+
"text": "string | undefined"
|
|
41825
41813
|
},
|
|
41826
|
-
"description": "
|
|
41827
|
-
"
|
|
41828
|
-
"
|
|
41814
|
+
"description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
|
|
41815
|
+
"attribute": "info-icon-aria-label",
|
|
41816
|
+
"reflects": true,
|
|
41829
41817
|
"inheritedFrom": {
|
|
41830
|
-
"name": "
|
|
41831
|
-
"module": "
|
|
41818
|
+
"name": "FormfieldWrapper",
|
|
41819
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
41832
41820
|
}
|
|
41833
41821
|
},
|
|
41834
41822
|
{
|
|
41835
|
-
"
|
|
41836
|
-
"
|
|
41837
|
-
|
|
41823
|
+
"kind": "method",
|
|
41824
|
+
"name": "renderLabelElement",
|
|
41825
|
+
"privacy": "protected",
|
|
41826
|
+
"description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
|
|
41827
|
+
"return": {
|
|
41828
|
+
"type": {
|
|
41829
|
+
"text": ""
|
|
41830
|
+
}
|
|
41838
41831
|
},
|
|
41839
|
-
"description": "Hide popover on escape key press.",
|
|
41840
|
-
"default": "false",
|
|
41841
|
-
"fieldName": "hideOnEscape",
|
|
41842
41832
|
"inheritedFrom": {
|
|
41843
|
-
"name": "
|
|
41844
|
-
"module": "
|
|
41833
|
+
"name": "FormfieldWrapper",
|
|
41834
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
41845
41835
|
}
|
|
41846
41836
|
},
|
|
41847
41837
|
{
|
|
41848
|
-
"
|
|
41849
|
-
"
|
|
41850
|
-
|
|
41838
|
+
"kind": "method",
|
|
41839
|
+
"name": "renderHelpTextIcon",
|
|
41840
|
+
"privacy": "protected",
|
|
41841
|
+
"description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
|
|
41842
|
+
"return": {
|
|
41843
|
+
"type": {
|
|
41844
|
+
"text": ""
|
|
41845
|
+
}
|
|
41851
41846
|
},
|
|
41852
|
-
"description": "Propagates the event, when the escape key is pressed (only when pressed inside the popover)\nIf true, the escape key press close the popover and will propagate the keydown event.\nIf false, the escape key press will close the popover but will not propagate the keydown event.\n(set to false to prevent the event from bubbling up to the document).\n\nThis only works when `hideOnEscape` is true.",
|
|
41853
|
-
"default": "false",
|
|
41854
|
-
"fieldName": "propagateEventOnEscape",
|
|
41855
41847
|
"inheritedFrom": {
|
|
41856
|
-
"name": "
|
|
41857
|
-
"module": "
|
|
41848
|
+
"name": "FormfieldWrapper",
|
|
41849
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
41858
41850
|
}
|
|
41859
41851
|
},
|
|
41860
41852
|
{
|
|
41861
|
-
"
|
|
41862
|
-
"
|
|
41863
|
-
|
|
41853
|
+
"kind": "method",
|
|
41854
|
+
"name": "renderHelpText",
|
|
41855
|
+
"privacy": "protected",
|
|
41856
|
+
"description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
|
|
41857
|
+
"return": {
|
|
41858
|
+
"type": {
|
|
41859
|
+
"text": ""
|
|
41860
|
+
}
|
|
41864
41861
|
},
|
|
41865
|
-
"description": "Hide popover on blur.",
|
|
41866
|
-
"default": "false",
|
|
41867
|
-
"fieldName": "hideOnBlur",
|
|
41868
41862
|
"inheritedFrom": {
|
|
41869
|
-
"name": "
|
|
41870
|
-
"module": "
|
|
41863
|
+
"name": "FormfieldWrapper",
|
|
41864
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
41871
41865
|
}
|
|
41872
41866
|
},
|
|
41873
41867
|
{
|
|
41874
|
-
"
|
|
41875
|
-
"
|
|
41876
|
-
|
|
41868
|
+
"kind": "method",
|
|
41869
|
+
"name": "renderLabel",
|
|
41870
|
+
"privacy": "protected",
|
|
41871
|
+
"description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
|
|
41872
|
+
"return": {
|
|
41873
|
+
"type": {
|
|
41874
|
+
"text": ""
|
|
41875
|
+
}
|
|
41877
41876
|
},
|
|
41878
|
-
"description": "Hide on outside click of the popover.",
|
|
41879
|
-
"default": "false",
|
|
41880
|
-
"fieldName": "hideOnOutsideClick",
|
|
41881
41877
|
"inheritedFrom": {
|
|
41882
|
-
"name": "
|
|
41883
|
-
"module": "
|
|
41878
|
+
"name": "FormfieldWrapper",
|
|
41879
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
41884
41880
|
}
|
|
41885
41881
|
},
|
|
41886
41882
|
{
|
|
41887
|
-
"
|
|
41888
|
-
"
|
|
41889
|
-
|
|
41883
|
+
"kind": "method",
|
|
41884
|
+
"name": "renderHelperText",
|
|
41885
|
+
"privacy": "protected",
|
|
41886
|
+
"description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
|
|
41887
|
+
"return": {
|
|
41888
|
+
"type": {
|
|
41889
|
+
"text": ""
|
|
41890
|
+
}
|
|
41890
41891
|
},
|
|
41891
|
-
"description": "The focus back to trigger after the popover hide.",
|
|
41892
|
-
"default": "false",
|
|
41893
|
-
"fieldName": "focusBackToTrigger",
|
|
41894
41892
|
"inheritedFrom": {
|
|
41895
|
-
"name": "
|
|
41896
|
-
"module": "
|
|
41893
|
+
"name": "FormfieldWrapper",
|
|
41894
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
41895
|
+
}
|
|
41896
|
+
}
|
|
41897
|
+
],
|
|
41898
|
+
"events": [
|
|
41899
|
+
{
|
|
41900
|
+
"type": {
|
|
41901
|
+
"text": "EventConstructor"
|
|
41897
41902
|
}
|
|
41898
41903
|
},
|
|
41899
41904
|
{
|
|
41900
|
-
"
|
|
41905
|
+
"description": "(React: onChange) Event that gets dispatched when the toggle state changes.",
|
|
41906
|
+
"name": "change",
|
|
41907
|
+
"reactName": "onChange"
|
|
41908
|
+
},
|
|
41909
|
+
{
|
|
41910
|
+
"description": "(React: onFocus) Event that gets dispatched when the toggle receives focus.",
|
|
41911
|
+
"name": "focus",
|
|
41912
|
+
"reactName": "onFocus"
|
|
41913
|
+
}
|
|
41914
|
+
],
|
|
41915
|
+
"attributes": [
|
|
41916
|
+
{
|
|
41917
|
+
"name": "checked",
|
|
41901
41918
|
"type": {
|
|
41902
41919
|
"text": "boolean"
|
|
41903
41920
|
},
|
|
41904
|
-
"description": "Determines whether the popover with backdrop.\nOther than popover and trigger element, the rest of the screen will be covered with a backdrop.",
|
|
41905
41921
|
"default": "false",
|
|
41906
|
-
"
|
|
41907
|
-
"
|
|
41908
|
-
"name": "Popover",
|
|
41909
|
-
"module": "src/components/popover/popover.component.ts"
|
|
41910
|
-
}
|
|
41922
|
+
"description": "Determines whether the toggle is active or inactive.",
|
|
41923
|
+
"fieldName": "checked"
|
|
41911
41924
|
},
|
|
41912
41925
|
{
|
|
41913
|
-
"name": "
|
|
41926
|
+
"name": "size",
|
|
41914
41927
|
"type": {
|
|
41915
|
-
"text": "
|
|
41928
|
+
"text": "ToggleSize"
|
|
41916
41929
|
},
|
|
41917
|
-
"description": "
|
|
41918
|
-
"default": "
|
|
41919
|
-
"fieldName": "
|
|
41920
|
-
"inheritedFrom": {
|
|
41921
|
-
"name": "Popover",
|
|
41922
|
-
"module": "src/components/popover/popover.component.ts"
|
|
41923
|
-
}
|
|
41930
|
+
"description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
|
|
41931
|
+
"default": "default",
|
|
41932
|
+
"fieldName": "size"
|
|
41924
41933
|
},
|
|
41925
41934
|
{
|
|
41926
|
-
"name": "
|
|
41935
|
+
"name": "autofocus",
|
|
41927
41936
|
"type": {
|
|
41928
|
-
"text": "boolean
|
|
41937
|
+
"text": "boolean"
|
|
41929
41938
|
},
|
|
41930
|
-
"
|
|
41931
|
-
"
|
|
41932
|
-
"fieldName": "
|
|
41933
|
-
"inheritedFrom": {
|
|
41934
|
-
"name": "Popover",
|
|
41935
|
-
"module": "src/components/popover/popover.component.ts"
|
|
41936
|
-
}
|
|
41939
|
+
"default": "false",
|
|
41940
|
+
"description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
|
|
41941
|
+
"fieldName": "autofocus"
|
|
41937
41942
|
},
|
|
41938
41943
|
{
|
|
41939
|
-
"name": "
|
|
41944
|
+
"name": "name",
|
|
41940
41945
|
"type": {
|
|
41941
|
-
"text": "
|
|
41946
|
+
"text": "string"
|
|
41942
41947
|
},
|
|
41943
|
-
"
|
|
41944
|
-
"
|
|
41945
|
-
"fieldName": "
|
|
41948
|
+
"default": "''",
|
|
41949
|
+
"description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
|
|
41950
|
+
"fieldName": "name",
|
|
41946
41951
|
"inheritedFrom": {
|
|
41947
|
-
"name": "
|
|
41948
|
-
"module": "src/
|
|
41952
|
+
"name": "FormInternalsMixin",
|
|
41953
|
+
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
|
41949
41954
|
}
|
|
41950
41955
|
},
|
|
41951
41956
|
{
|
|
41952
|
-
"name": "
|
|
41957
|
+
"name": "value",
|
|
41953
41958
|
"type": {
|
|
41954
|
-
"text": "
|
|
41959
|
+
"text": "string"
|
|
41955
41960
|
},
|
|
41956
|
-
"
|
|
41957
|
-
"
|
|
41958
|
-
"fieldName": "
|
|
41961
|
+
"default": "''",
|
|
41962
|
+
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
|
41963
|
+
"fieldName": "value",
|
|
41959
41964
|
"inheritedFrom": {
|
|
41960
|
-
"name": "
|
|
41961
|
-
"module": "src/
|
|
41965
|
+
"name": "FormInternalsMixin",
|
|
41966
|
+
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
|
41962
41967
|
}
|
|
41963
41968
|
},
|
|
41964
41969
|
{
|
|
41965
|
-
"name": "
|
|
41970
|
+
"name": "validation-message",
|
|
41966
41971
|
"type": {
|
|
41967
|
-
"text": "
|
|
41972
|
+
"text": "string | undefined"
|
|
41968
41973
|
},
|
|
41969
|
-
"description": "
|
|
41970
|
-
"
|
|
41971
|
-
"fieldName": "zIndex",
|
|
41974
|
+
"description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
|
|
41975
|
+
"fieldName": "validationMessage",
|
|
41972
41976
|
"inheritedFrom": {
|
|
41973
|
-
"name": "
|
|
41974
|
-
"module": "src/
|
|
41977
|
+
"name": "FormInternalsMixin",
|
|
41978
|
+
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
|
41975
41979
|
}
|
|
41976
41980
|
},
|
|
41977
41981
|
{
|
|
41978
|
-
"name": "
|
|
41982
|
+
"name": "data-aria-label",
|
|
41979
41983
|
"type": {
|
|
41980
|
-
"text": "string |
|
|
41984
|
+
"text": "string | null"
|
|
41981
41985
|
},
|
|
41982
|
-
"
|
|
41983
|
-
"
|
|
41984
|
-
"fieldName": "
|
|
41986
|
+
"default": "null",
|
|
41987
|
+
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
41988
|
+
"fieldName": "dataAriaLabel",
|
|
41985
41989
|
"inheritedFrom": {
|
|
41986
|
-
"name": "
|
|
41987
|
-
"module": "src/
|
|
41990
|
+
"name": "DataAriaLabelMixin",
|
|
41991
|
+
"module": "src/utils/mixins/DataAriaLabelMixin.ts"
|
|
41988
41992
|
}
|
|
41989
41993
|
},
|
|
41990
41994
|
{
|
|
41991
|
-
"name": "
|
|
41995
|
+
"name": "disabled",
|
|
41992
41996
|
"type": {
|
|
41993
|
-
"text": "
|
|
41997
|
+
"text": "boolean | undefined"
|
|
41994
41998
|
},
|
|
41995
|
-
"
|
|
41996
|
-
"
|
|
41997
|
-
"fieldName": "
|
|
41999
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
42000
|
+
"default": "undefined",
|
|
42001
|
+
"fieldName": "disabled",
|
|
41998
42002
|
"inheritedFrom": {
|
|
41999
|
-
"name": "
|
|
42000
|
-
"module": "src/components/
|
|
42003
|
+
"name": "FormfieldWrapper",
|
|
42004
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
42001
42005
|
}
|
|
42002
42006
|
},
|
|
42003
42007
|
{
|
|
42004
|
-
"name": "
|
|
42008
|
+
"name": "label",
|
|
42005
42009
|
"type": {
|
|
42006
|
-
"text": "
|
|
42010
|
+
"text": "string | undefined"
|
|
42007
42011
|
},
|
|
42008
|
-
"description": "The
|
|
42009
|
-
"
|
|
42010
|
-
"fieldName": "strategy",
|
|
42012
|
+
"description": "The label of the input field. It is linked to the input field using the `for` attribute.",
|
|
42013
|
+
"fieldName": "label",
|
|
42011
42014
|
"inheritedFrom": {
|
|
42012
|
-
"name": "
|
|
42013
|
-
"module": "src/components/
|
|
42015
|
+
"name": "FormfieldWrapper",
|
|
42016
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
42014
42017
|
}
|
|
42015
42018
|
},
|
|
42016
42019
|
{
|
|
42017
|
-
"name": "
|
|
42020
|
+
"name": "required",
|
|
42018
42021
|
"type": {
|
|
42019
|
-
"text": "
|
|
42022
|
+
"text": "boolean"
|
|
42020
42023
|
},
|
|
42021
|
-
"
|
|
42022
|
-
"
|
|
42023
|
-
"fieldName": "
|
|
42024
|
+
"default": "false",
|
|
42025
|
+
"description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
|
|
42026
|
+
"fieldName": "required",
|
|
42024
42027
|
"inheritedFrom": {
|
|
42025
|
-
"name": "
|
|
42026
|
-
"module": "src/components/
|
|
42028
|
+
"name": "FormfieldWrapper",
|
|
42029
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
42027
42030
|
}
|
|
42028
42031
|
},
|
|
42029
42032
|
{
|
|
42030
|
-
"name": "
|
|
42033
|
+
"name": "help-text-type",
|
|
42031
42034
|
"type": {
|
|
42032
|
-
"text": "
|
|
42035
|
+
"text": "ValidationType"
|
|
42033
42036
|
},
|
|
42034
|
-
"
|
|
42035
|
-
"
|
|
42036
|
-
"fieldName": "ariaLabelledby",
|
|
42037
|
+
"description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
|
|
42038
|
+
"fieldName": "helpTextType",
|
|
42037
42039
|
"inheritedFrom": {
|
|
42038
|
-
"name": "
|
|
42039
|
-
"module": "src/components/
|
|
42040
|
+
"name": "FormfieldWrapper",
|
|
42041
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
42040
42042
|
}
|
|
42041
42043
|
},
|
|
42042
42044
|
{
|
|
42043
|
-
"name": "
|
|
42045
|
+
"name": "help-text",
|
|
42044
42046
|
"type": {
|
|
42045
|
-
"text": "string |
|
|
42047
|
+
"text": "string | undefined"
|
|
42046
42048
|
},
|
|
42047
|
-
"
|
|
42048
|
-
"
|
|
42049
|
-
"fieldName": "ariaDescribedby",
|
|
42049
|
+
"description": "The help text that is displayed below the input field.",
|
|
42050
|
+
"fieldName": "helpText",
|
|
42050
42051
|
"inheritedFrom": {
|
|
42051
|
-
"name": "
|
|
42052
|
-
"module": "src/components/
|
|
42052
|
+
"name": "FormfieldWrapper",
|
|
42053
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
42053
42054
|
}
|
|
42054
42055
|
},
|
|
42055
42056
|
{
|
|
42056
|
-
"name": "
|
|
42057
|
+
"name": "toggletip-text",
|
|
42057
42058
|
"type": {
|
|
42058
|
-
"text": "
|
|
42059
|
+
"text": "string | undefined"
|
|
42059
42060
|
},
|
|
42060
|
-
"description": "
|
|
42061
|
-
"
|
|
42062
|
-
"fieldName": "disableAriaExpanded",
|
|
42061
|
+
"description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
|
|
42062
|
+
"fieldName": "toggletipText",
|
|
42063
42063
|
"inheritedFrom": {
|
|
42064
|
-
"name": "
|
|
42065
|
-
"module": "src/components/
|
|
42064
|
+
"name": "FormfieldWrapper",
|
|
42065
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
42066
42066
|
}
|
|
42067
42067
|
},
|
|
42068
42068
|
{
|
|
42069
|
-
"name": "
|
|
42069
|
+
"name": "toggletip-placement",
|
|
42070
42070
|
"type": {
|
|
42071
|
-
"text": "
|
|
42071
|
+
"text": "PopoverPlacement"
|
|
42072
42072
|
},
|
|
42073
|
-
"description": "
|
|
42074
|
-
"default": "
|
|
42075
|
-
"fieldName": "
|
|
42073
|
+
"description": "The placement of the toggletip that is displayed when the info icon is hovered.",
|
|
42074
|
+
"default": "'top'",
|
|
42075
|
+
"fieldName": "toggletipPlacement",
|
|
42076
42076
|
"inheritedFrom": {
|
|
42077
|
-
"name": "
|
|
42078
|
-
"module": "src/components/
|
|
42077
|
+
"name": "FormfieldWrapper",
|
|
42078
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
42079
42079
|
}
|
|
42080
42080
|
},
|
|
42081
42081
|
{
|
|
42082
|
-
"name": "
|
|
42082
|
+
"name": "info-icon-aria-label",
|
|
42083
42083
|
"type": {
|
|
42084
|
-
"text": "
|
|
42084
|
+
"text": "string | undefined"
|
|
42085
42085
|
},
|
|
42086
|
-
"description": "
|
|
42087
|
-
"fieldName": "
|
|
42086
|
+
"description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
|
|
42087
|
+
"fieldName": "infoIconAriaLabel",
|
|
42088
42088
|
"inheritedFrom": {
|
|
42089
|
-
"name": "
|
|
42090
|
-
"module": "src/components/
|
|
42089
|
+
"name": "FormfieldWrapper",
|
|
42090
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
42091
42091
|
}
|
|
42092
42092
|
}
|
|
42093
42093
|
],
|
|
42094
|
-
"
|
|
42095
|
-
"name": "Popover",
|
|
42096
|
-
"module": "/src/components/popover/popover.component"
|
|
42097
|
-
},
|
|
42098
|
-
"tagName": "mdc-tooltip",
|
|
42099
|
-
"jsDoc": "/**\n * A tooltip is triggered by mouse hover or by keyboard focus\n * and will disappear upon mouse exit or focus change.\n *\n * Note: Tooltips cannot contain content that can be focused or interacted with.\n *\n * @tagname mdc-tooltip\n *\n * @event shown - (React: onShown) This event is dispatched when the tooltip is shown\n * @event hidden - (React: onHidden) This event is dispatched when the tooltip is hidden\n * @event created - (React: onCreated) This event is dispatched when the tooltip is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the tooltip is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-tooltip-max-width - The maximum width of the tooltip.\n * @cssproperty --mdc-tooltip-padding - The padding of the tooltip.\n * @cssproperty --mdc-tooltip-text-color - The text color of the tooltip.\n * @cssproperty --mdc-tooltip-text-color-contrast - The text color of the tooltip when the color is contrast.\n *\n */",
|
|
42100
|
-
"customElement": true,
|
|
42101
|
-
"slots": [
|
|
42094
|
+
"mixins": [
|
|
42102
42095
|
{
|
|
42103
|
-
"
|
|
42104
|
-
"
|
|
42105
|
-
|
|
42106
|
-
|
|
42107
|
-
|
|
42108
|
-
|
|
42096
|
+
"name": "FormInternalsMixin",
|
|
42097
|
+
"module": "/src/utils/mixins/FormInternalsMixin"
|
|
42098
|
+
},
|
|
42099
|
+
{
|
|
42100
|
+
"name": "DataAriaLabelMixin",
|
|
42101
|
+
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
|
42109
42102
|
}
|
|
42110
|
-
]
|
|
42103
|
+
],
|
|
42104
|
+
"superclass": {
|
|
42105
|
+
"name": "FormfieldWrapper",
|
|
42106
|
+
"module": "/src/components/formfieldwrapper"
|
|
42107
|
+
},
|
|
42108
|
+
"tagName": "mdc-toggle",
|
|
42109
|
+
"jsDoc": "/**\n * Toggle Component is an interactive control used to switch between two mutually exclusive options,\n * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\n * where users need to enable or disable a feature.\n * It contains an optional label and an optional helper text.\n *\n * To create a group of toggles, use the FormFieldGroup component.\n *\n * Note: It internally renders a checkbox styled as a toggle switch.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-statictoggle\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-toggle\n *\n * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.\n *\n * @cssproperty --mdc-toggle-width - Width of the toggle\n * @cssproperty --mdc-toggle-height - Height of the toggle\n * @cssproperty --mdc-toggle-width-compact - Width of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-height-compact - Height of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-label-lineheight - Line height of the toggle label\n * @cssproperty --mdc-toggle-label-fontsize - Font size of the toggle label\n * @cssproperty --mdc-toggle-label-fontweight - Font weight of the toggle label\n * @cssproperty --mdc-toggle-label-color-disabled - Color of the toggle label and help text in disabled state\n * @cssproperty --mdc-toggle-help-text-color - Color of the help text label\n * @cssproperty --mdc-toggle-active-hover-color - Background color of the active toggle in hover state\n * @cssproperty --mdc-toggle-active-pressed-color - Background color of the active toggle in pressed state\n * @cssproperty --mdc-toggle-inactive-hover-color - Background color of the inactive toggle in hover state\n * @cssproperty --mdc-toggle-inactive-pressed-color - Background color of the inactive toggle in pressed state\n */",
|
|
42110
|
+
"customElement": true
|
|
42111
42111
|
}
|
|
42112
42112
|
],
|
|
42113
42113
|
"exports": [
|
|
@@ -42115,8 +42115,8 @@
|
|
|
42115
42115
|
"kind": "js",
|
|
42116
42116
|
"name": "default",
|
|
42117
42117
|
"declaration": {
|
|
42118
|
-
"name": "
|
|
42119
|
-
"module": "components/
|
|
42118
|
+
"name": "Toggle",
|
|
42119
|
+
"module": "components/toggle/toggle.component.js"
|
|
42120
42120
|
}
|
|
42121
42121
|
}
|
|
42122
42122
|
]
|