@momentum-design/components 0.110.0 → 0.110.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/index.js +709 -405
- package/dist/browser/index.js.map +4 -4
- package/dist/components/slider/index.d.ts +1 -0
- package/dist/components/slider/index.js +1 -0
- package/dist/components/slider/slider.component.d.ts +154 -37
- package/dist/components/slider/slider.component.js +489 -90
- package/dist/components/slider/slider.constants.d.ts +14 -1
- package/dist/components/slider/slider.constants.js +14 -1
- package/dist/components/slider/slider.styles.js +195 -1
- package/dist/components/slider/slider.types.d.ts +8 -1
- package/dist/components/slider/slider.types.js +0 -1
- package/dist/custom-elements.json +927 -658
- package/dist/react/index.d.ts +3 -3
- package/dist/react/index.js +3 -3
- package/dist/react/slider/index.d.ts +34 -4
- package/dist/react/slider/index.js +31 -4
- package/dist/utils/styles/index.d.ts +2 -1
- package/dist/utils/styles/index.js +5 -5
- package/package.json +1 -1
|
@@ -4,63 +4,149 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "components/
|
|
7
|
+
"path": "components/accordion/accordion.component.js",
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "An accordion
|
|
12
|
-
"name": "
|
|
11
|
+
"description": "An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n- Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n- Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.",
|
|
12
|
+
"name": "Accordion",
|
|
13
13
|
"cssProperties": [
|
|
14
14
|
{
|
|
15
|
-
"description": "The border color of the accordion
|
|
16
|
-
"name": "--mdc-accordionbutton-border-color"
|
|
15
|
+
"description": "The border color of the accordion.",
|
|
16
|
+
"name": "--mdc-accordionbutton-border-color",
|
|
17
|
+
"inheritedFrom": {
|
|
18
|
+
"name": "AccordionButton",
|
|
19
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
20
|
+
}
|
|
17
21
|
},
|
|
18
22
|
{
|
|
19
|
-
"description": "The hover color of the accordion
|
|
20
|
-
"name": "--mdc-accordionbutton-hover-color"
|
|
23
|
+
"description": "The hover color of the accordion.",
|
|
24
|
+
"name": "--mdc-accordionbutton-hover-color",
|
|
25
|
+
"inheritedFrom": {
|
|
26
|
+
"name": "AccordionButton",
|
|
27
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
28
|
+
}
|
|
21
29
|
},
|
|
22
30
|
{
|
|
23
|
-
"description": "The active color of the accordion
|
|
24
|
-
"name": "--mdc-accordionbutton-active-color"
|
|
31
|
+
"description": "The active color of the accordion.",
|
|
32
|
+
"name": "--mdc-accordionbutton-active-color",
|
|
33
|
+
"inheritedFrom": {
|
|
34
|
+
"name": "AccordionButton",
|
|
35
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
36
|
+
}
|
|
25
37
|
},
|
|
26
38
|
{
|
|
27
|
-
"description": "The disabled color of the accordion
|
|
28
|
-
"name": "--mdc-accordionbutton-disabled-color"
|
|
39
|
+
"description": "The disabled color of the accordion.",
|
|
40
|
+
"name": "--mdc-accordionbutton-disabled-color",
|
|
41
|
+
"inheritedFrom": {
|
|
42
|
+
"name": "AccordionButton",
|
|
43
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
44
|
+
}
|
|
29
45
|
}
|
|
30
46
|
],
|
|
31
47
|
"cssParts": [
|
|
32
48
|
{
|
|
33
|
-
"description": "The header section of the accordion
|
|
34
|
-
"name": "header-section"
|
|
49
|
+
"description": "The header section of the accordion.",
|
|
50
|
+
"name": "header-section",
|
|
51
|
+
"inheritedFrom": {
|
|
52
|
+
"name": "AccordionButton",
|
|
53
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
54
|
+
}
|
|
35
55
|
},
|
|
36
56
|
{
|
|
37
|
-
"description": "The header
|
|
38
|
-
"name": "header
|
|
57
|
+
"description": "The leading header of the accordion.",
|
|
58
|
+
"name": "leading-header",
|
|
59
|
+
"inheritedFrom": {
|
|
60
|
+
"name": "AccordionButton",
|
|
61
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
62
|
+
}
|
|
39
63
|
},
|
|
40
64
|
{
|
|
41
|
-
"description": "The
|
|
42
|
-
"name": "
|
|
65
|
+
"description": "The trailing header of the accordion.",
|
|
66
|
+
"name": "trailing-header",
|
|
67
|
+
"inheritedFrom": {
|
|
68
|
+
"name": "AccordionButton",
|
|
69
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
70
|
+
}
|
|
43
71
|
},
|
|
44
72
|
{
|
|
45
|
-
"description": "The trailing header of the accordion
|
|
46
|
-
"name": "trailing-
|
|
73
|
+
"description": "The trailing header button of the accordion.",
|
|
74
|
+
"name": "trailing-header__button"
|
|
47
75
|
},
|
|
48
76
|
{
|
|
49
|
-
"description": "The
|
|
50
|
-
"name": "
|
|
77
|
+
"description": "The body section of the accordion.",
|
|
78
|
+
"name": "body-section",
|
|
79
|
+
"inheritedFrom": {
|
|
80
|
+
"name": "AccordionButton",
|
|
81
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
82
|
+
}
|
|
51
83
|
},
|
|
52
84
|
{
|
|
53
|
-
"description": "The
|
|
54
|
-
"name": "
|
|
85
|
+
"description": "The header button section of the accordion button.",
|
|
86
|
+
"name": "header-button-section",
|
|
87
|
+
"inheritedFrom": {
|
|
88
|
+
"name": "AccordionButton",
|
|
89
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"description": "The trailing header icon of the accordion button.",
|
|
94
|
+
"name": "trailing-header__icon",
|
|
95
|
+
"inheritedFrom": {
|
|
96
|
+
"name": "AccordionButton",
|
|
97
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
98
|
+
}
|
|
55
99
|
}
|
|
56
100
|
],
|
|
57
101
|
"slots": [
|
|
102
|
+
{
|
|
103
|
+
"description": "The leading controls slot of the accordion on the header section.",
|
|
104
|
+
"name": "leading-controls"
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"description": "The trailing controls slot of the accordion on the header section.",
|
|
108
|
+
"name": "trailing-controls"
|
|
109
|
+
},
|
|
58
110
|
{
|
|
59
111
|
"description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
|
|
60
|
-
"name": "default"
|
|
112
|
+
"name": "default",
|
|
113
|
+
"inheritedFrom": {
|
|
114
|
+
"name": "AccordionButton",
|
|
115
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
116
|
+
}
|
|
61
117
|
}
|
|
62
118
|
],
|
|
63
119
|
"members": [
|
|
120
|
+
{
|
|
121
|
+
"kind": "method",
|
|
122
|
+
"name": "renderHeader",
|
|
123
|
+
"privacy": "protected",
|
|
124
|
+
"return": {
|
|
125
|
+
"type": {
|
|
126
|
+
"text": ""
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
"description": "Renders the header section of the accordion.\nThis includes the leading icon, text and controls, and the trailing controls.\nThe trailing controls include the expand/collapse button.\nThe button is disabled if the accordion is disabled.\nThe button is also given the aria-controls attribute set to the id of the body section.\nThe button is also given the aria-expanded attribute set to the expanded state of the accordion.\nThe prefix icon of the button is set to the expanded state of the accordion.",
|
|
130
|
+
"inheritedFrom": {
|
|
131
|
+
"name": "AccordionButton",
|
|
132
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
133
|
+
}
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"kind": "field",
|
|
137
|
+
"name": "disabled",
|
|
138
|
+
"type": {
|
|
139
|
+
"text": "boolean | undefined"
|
|
140
|
+
},
|
|
141
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
142
|
+
"default": "undefined",
|
|
143
|
+
"attribute": "disabled",
|
|
144
|
+
"reflects": true,
|
|
145
|
+
"inheritedFrom": {
|
|
146
|
+
"name": "DisabledMixin",
|
|
147
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
148
|
+
}
|
|
149
|
+
},
|
|
64
150
|
{
|
|
65
151
|
"kind": "field",
|
|
66
152
|
"name": "size",
|
|
@@ -70,7 +156,11 @@
|
|
|
70
156
|
"description": "The size of the accordion item.",
|
|
71
157
|
"default": "'small'",
|
|
72
158
|
"attribute": "size",
|
|
73
|
-
"reflects": true
|
|
159
|
+
"reflects": true,
|
|
160
|
+
"inheritedFrom": {
|
|
161
|
+
"name": "AccordionButton",
|
|
162
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
163
|
+
}
|
|
74
164
|
},
|
|
75
165
|
{
|
|
76
166
|
"kind": "field",
|
|
@@ -81,7 +171,11 @@
|
|
|
81
171
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
82
172
|
"default": "'default'",
|
|
83
173
|
"attribute": "variant",
|
|
84
|
-
"reflects": true
|
|
174
|
+
"reflects": true,
|
|
175
|
+
"inheritedFrom": {
|
|
176
|
+
"name": "AccordionButton",
|
|
177
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
178
|
+
}
|
|
85
179
|
},
|
|
86
180
|
{
|
|
87
181
|
"kind": "field",
|
|
@@ -92,7 +186,11 @@
|
|
|
92
186
|
"description": "The aria level of the accordion component.",
|
|
93
187
|
"default": "3",
|
|
94
188
|
"attribute": "data-aria-level",
|
|
95
|
-
"reflects": true
|
|
189
|
+
"reflects": true,
|
|
190
|
+
"inheritedFrom": {
|
|
191
|
+
"name": "AccordionButton",
|
|
192
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
193
|
+
}
|
|
96
194
|
},
|
|
97
195
|
{
|
|
98
196
|
"kind": "field",
|
|
@@ -103,7 +201,11 @@
|
|
|
103
201
|
"description": "The visibility of the accordion button.",
|
|
104
202
|
"default": "false",
|
|
105
203
|
"attribute": "expanded",
|
|
106
|
-
"reflects": true
|
|
204
|
+
"reflects": true,
|
|
205
|
+
"inheritedFrom": {
|
|
206
|
+
"name": "AccordionButton",
|
|
207
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
208
|
+
}
|
|
107
209
|
},
|
|
108
210
|
{
|
|
109
211
|
"kind": "field",
|
|
@@ -113,7 +215,11 @@
|
|
|
113
215
|
},
|
|
114
216
|
"description": "The header text of the accordion item.",
|
|
115
217
|
"attribute": "header-text",
|
|
116
|
-
"reflects": true
|
|
218
|
+
"reflects": true,
|
|
219
|
+
"inheritedFrom": {
|
|
220
|
+
"name": "AccordionButton",
|
|
221
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
222
|
+
}
|
|
117
223
|
},
|
|
118
224
|
{
|
|
119
225
|
"kind": "field",
|
|
@@ -122,7 +228,11 @@
|
|
|
122
228
|
"text": "IconNames | undefined"
|
|
123
229
|
},
|
|
124
230
|
"description": "The leading icon that is displayed before the header text.",
|
|
125
|
-
"attribute": "prefix-icon"
|
|
231
|
+
"attribute": "prefix-icon",
|
|
232
|
+
"inheritedFrom": {
|
|
233
|
+
"name": "AccordionButton",
|
|
234
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
235
|
+
}
|
|
126
236
|
},
|
|
127
237
|
{
|
|
128
238
|
"kind": "method",
|
|
@@ -133,7 +243,11 @@
|
|
|
133
243
|
"text": "void"
|
|
134
244
|
}
|
|
135
245
|
},
|
|
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."
|
|
246
|
+
"description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state.",
|
|
247
|
+
"inheritedFrom": {
|
|
248
|
+
"name": "AccordionButton",
|
|
249
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
250
|
+
}
|
|
137
251
|
},
|
|
138
252
|
{
|
|
139
253
|
"kind": "method",
|
|
@@ -144,7 +258,11 @@
|
|
|
144
258
|
"text": "void"
|
|
145
259
|
}
|
|
146
260
|
},
|
|
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."
|
|
261
|
+
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state.",
|
|
262
|
+
"inheritedFrom": {
|
|
263
|
+
"name": "AccordionButton",
|
|
264
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
265
|
+
}
|
|
148
266
|
},
|
|
149
267
|
{
|
|
150
268
|
"kind": "method",
|
|
@@ -164,7 +282,11 @@
|
|
|
164
282
|
"description": "The KeyboardEvent fired."
|
|
165
283
|
}
|
|
166
284
|
],
|
|
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."
|
|
285
|
+
"description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys.",
|
|
286
|
+
"inheritedFrom": {
|
|
287
|
+
"name": "AccordionButton",
|
|
288
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
289
|
+
}
|
|
168
290
|
},
|
|
169
291
|
{
|
|
170
292
|
"kind": "method",
|
|
@@ -183,7 +305,11 @@
|
|
|
183
305
|
"text": "IconNames"
|
|
184
306
|
}
|
|
185
307
|
}
|
|
186
|
-
]
|
|
308
|
+
],
|
|
309
|
+
"inheritedFrom": {
|
|
310
|
+
"name": "AccordionButton",
|
|
311
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
312
|
+
}
|
|
187
313
|
},
|
|
188
314
|
{
|
|
189
315
|
"kind": "method",
|
|
@@ -193,16 +319,10 @@
|
|
|
193
319
|
"type": {
|
|
194
320
|
"text": "TemplateResult | typeof nothing"
|
|
195
321
|
}
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
"name": "renderHeader",
|
|
201
|
-
"privacy": "protected",
|
|
202
|
-
"return": {
|
|
203
|
-
"type": {
|
|
204
|
-
"text": "TemplateResult"
|
|
205
|
-
}
|
|
322
|
+
},
|
|
323
|
+
"inheritedFrom": {
|
|
324
|
+
"name": "AccordionButton",
|
|
325
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
206
326
|
}
|
|
207
327
|
},
|
|
208
328
|
{
|
|
@@ -214,7 +334,11 @@
|
|
|
214
334
|
"text": ""
|
|
215
335
|
}
|
|
216
336
|
},
|
|
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."
|
|
337
|
+
"description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon.",
|
|
338
|
+
"inheritedFrom": {
|
|
339
|
+
"name": "AccordionButton",
|
|
340
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
341
|
+
}
|
|
218
342
|
},
|
|
219
343
|
{
|
|
220
344
|
"kind": "method",
|
|
@@ -224,32 +348,45 @@
|
|
|
224
348
|
"type": {
|
|
225
349
|
"text": "TemplateResult | typeof nothing"
|
|
226
350
|
}
|
|
227
|
-
}
|
|
228
|
-
},
|
|
229
|
-
{
|
|
230
|
-
"kind": "field",
|
|
231
|
-
"name": "disabled",
|
|
232
|
-
"type": {
|
|
233
|
-
"text": "boolean | undefined"
|
|
234
351
|
},
|
|
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
352
|
"inheritedFrom": {
|
|
240
|
-
"name": "
|
|
241
|
-
"module": "
|
|
353
|
+
"name": "AccordionButton",
|
|
354
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
242
355
|
}
|
|
243
356
|
}
|
|
244
357
|
],
|
|
245
358
|
"events": [
|
|
246
359
|
{
|
|
247
|
-
"description": "(React: onShown) This event is triggered when the accordion
|
|
360
|
+
"description": "(React: onShown) This event is triggered when the accordion is expanded.",
|
|
248
361
|
"name": "shown",
|
|
249
|
-
"reactName": "onShown"
|
|
362
|
+
"reactName": "onShown",
|
|
363
|
+
"inheritedFrom": {
|
|
364
|
+
"name": "AccordionButton",
|
|
365
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
366
|
+
}
|
|
250
367
|
}
|
|
251
368
|
],
|
|
369
|
+
"superclass": {
|
|
370
|
+
"name": "AccordionButton",
|
|
371
|
+
"module": "/src/components/accordionbutton/accordionbutton.component"
|
|
372
|
+
},
|
|
373
|
+
"tagName": "mdc-accordion",
|
|
374
|
+
"jsDoc": "/**\n * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.\n *\n * @tagname mdc-accordion\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot leading-controls - The leading controls slot of the accordion on the header section.\n * @slot trailing-controls - The trailing controls slot of the accordion on the header section.\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.\n *\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n * @csspart body-section - The body section of the accordion.\n */",
|
|
375
|
+
"customElement": true,
|
|
252
376
|
"attributes": [
|
|
377
|
+
{
|
|
378
|
+
"name": "disabled",
|
|
379
|
+
"type": {
|
|
380
|
+
"text": "boolean | undefined"
|
|
381
|
+
},
|
|
382
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
383
|
+
"default": "undefined",
|
|
384
|
+
"fieldName": "disabled",
|
|
385
|
+
"inheritedFrom": {
|
|
386
|
+
"name": "DisabledMixin",
|
|
387
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
388
|
+
}
|
|
389
|
+
},
|
|
253
390
|
{
|
|
254
391
|
"name": "size",
|
|
255
392
|
"type": {
|
|
@@ -257,7 +394,11 @@
|
|
|
257
394
|
},
|
|
258
395
|
"description": "The size of the accordion item.",
|
|
259
396
|
"default": "'small'",
|
|
260
|
-
"fieldName": "size"
|
|
397
|
+
"fieldName": "size",
|
|
398
|
+
"inheritedFrom": {
|
|
399
|
+
"name": "AccordionButton",
|
|
400
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
401
|
+
}
|
|
261
402
|
},
|
|
262
403
|
{
|
|
263
404
|
"name": "variant",
|
|
@@ -266,7 +407,11 @@
|
|
|
266
407
|
},
|
|
267
408
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
268
409
|
"default": "'default'",
|
|
269
|
-
"fieldName": "variant"
|
|
410
|
+
"fieldName": "variant",
|
|
411
|
+
"inheritedFrom": {
|
|
412
|
+
"name": "AccordionButton",
|
|
413
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
414
|
+
}
|
|
270
415
|
},
|
|
271
416
|
{
|
|
272
417
|
"name": "data-aria-level",
|
|
@@ -275,7 +420,11 @@
|
|
|
275
420
|
},
|
|
276
421
|
"description": "The aria level of the accordion component.",
|
|
277
422
|
"default": "3",
|
|
278
|
-
"fieldName": "dataAriaLevel"
|
|
423
|
+
"fieldName": "dataAriaLevel",
|
|
424
|
+
"inheritedFrom": {
|
|
425
|
+
"name": "AccordionButton",
|
|
426
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
427
|
+
}
|
|
279
428
|
},
|
|
280
429
|
{
|
|
281
430
|
"name": "expanded",
|
|
@@ -284,7 +433,11 @@
|
|
|
284
433
|
},
|
|
285
434
|
"description": "The visibility of the accordion button.",
|
|
286
435
|
"default": "false",
|
|
287
|
-
"fieldName": "expanded"
|
|
436
|
+
"fieldName": "expanded",
|
|
437
|
+
"inheritedFrom": {
|
|
438
|
+
"name": "AccordionButton",
|
|
439
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
440
|
+
}
|
|
288
441
|
},
|
|
289
442
|
{
|
|
290
443
|
"name": "header-text",
|
|
@@ -292,7 +445,11 @@
|
|
|
292
445
|
"text": "string | undefined"
|
|
293
446
|
},
|
|
294
447
|
"description": "The header text of the accordion item.",
|
|
295
|
-
"fieldName": "headerText"
|
|
448
|
+
"fieldName": "headerText",
|
|
449
|
+
"inheritedFrom": {
|
|
450
|
+
"name": "AccordionButton",
|
|
451
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
452
|
+
}
|
|
296
453
|
},
|
|
297
454
|
{
|
|
298
455
|
"name": "prefix-icon",
|
|
@@ -300,35 +457,13 @@
|
|
|
300
457
|
"text": "IconNames | undefined"
|
|
301
458
|
},
|
|
302
459
|
"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",
|
|
460
|
+
"fieldName": "prefixIcon",
|
|
313
461
|
"inheritedFrom": {
|
|
314
|
-
"name": "
|
|
315
|
-
"module": "src/
|
|
462
|
+
"name": "AccordionButton",
|
|
463
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
316
464
|
}
|
|
317
465
|
}
|
|
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
|
|
466
|
+
]
|
|
332
467
|
}
|
|
333
468
|
],
|
|
334
469
|
"exports": [
|
|
@@ -336,157 +471,71 @@
|
|
|
336
471
|
"kind": "js",
|
|
337
472
|
"name": "default",
|
|
338
473
|
"declaration": {
|
|
339
|
-
"name": "
|
|
340
|
-
"module": "components/
|
|
474
|
+
"name": "Accordion",
|
|
475
|
+
"module": "components/accordion/accordion.component.js"
|
|
341
476
|
}
|
|
342
477
|
}
|
|
343
478
|
]
|
|
344
479
|
},
|
|
345
480
|
{
|
|
346
481
|
"kind": "javascript-module",
|
|
347
|
-
"path": "components/
|
|
482
|
+
"path": "components/accordionbutton/accordionbutton.component.js",
|
|
348
483
|
"declarations": [
|
|
349
484
|
{
|
|
350
485
|
"kind": "class",
|
|
351
|
-
"description": "An accordion contains a header and body section with
|
|
352
|
-
"name": "
|
|
486
|
+
"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.",
|
|
487
|
+
"name": "AccordionButton",
|
|
353
488
|
"cssProperties": [
|
|
354
489
|
{
|
|
355
|
-
"description": "The border color of the accordion.",
|
|
356
|
-
"name": "--mdc-accordionbutton-border-color"
|
|
357
|
-
"inheritedFrom": {
|
|
358
|
-
"name": "AccordionButton",
|
|
359
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
360
|
-
}
|
|
490
|
+
"description": "The border color of the accordion button.",
|
|
491
|
+
"name": "--mdc-accordionbutton-border-color"
|
|
361
492
|
},
|
|
362
493
|
{
|
|
363
|
-
"description": "The hover color of the accordion.",
|
|
364
|
-
"name": "--mdc-accordionbutton-hover-color"
|
|
365
|
-
"inheritedFrom": {
|
|
366
|
-
"name": "AccordionButton",
|
|
367
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
368
|
-
}
|
|
494
|
+
"description": "The hover color of the accordion button.",
|
|
495
|
+
"name": "--mdc-accordionbutton-hover-color"
|
|
369
496
|
},
|
|
370
497
|
{
|
|
371
|
-
"description": "The active color of the accordion.",
|
|
372
|
-
"name": "--mdc-accordionbutton-active-color"
|
|
373
|
-
"inheritedFrom": {
|
|
374
|
-
"name": "AccordionButton",
|
|
375
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
376
|
-
}
|
|
498
|
+
"description": "The active color of the accordion button.",
|
|
499
|
+
"name": "--mdc-accordionbutton-active-color"
|
|
377
500
|
},
|
|
378
501
|
{
|
|
379
|
-
"description": "The disabled color of the accordion.",
|
|
380
|
-
"name": "--mdc-accordionbutton-disabled-color"
|
|
381
|
-
"inheritedFrom": {
|
|
382
|
-
"name": "AccordionButton",
|
|
383
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
384
|
-
}
|
|
502
|
+
"description": "The disabled color of the accordion button.",
|
|
503
|
+
"name": "--mdc-accordionbutton-disabled-color"
|
|
385
504
|
}
|
|
386
505
|
],
|
|
387
506
|
"cssParts": [
|
|
388
507
|
{
|
|
389
|
-
"description": "The header section of the accordion.",
|
|
390
|
-
"name": "header-section"
|
|
391
|
-
"inheritedFrom": {
|
|
392
|
-
"name": "AccordionButton",
|
|
393
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
394
|
-
}
|
|
395
|
-
},
|
|
396
|
-
{
|
|
397
|
-
"description": "The leading header of the accordion.",
|
|
398
|
-
"name": "leading-header",
|
|
399
|
-
"inheritedFrom": {
|
|
400
|
-
"name": "AccordionButton",
|
|
401
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
402
|
-
}
|
|
508
|
+
"description": "The header section of the accordion button.",
|
|
509
|
+
"name": "header-section"
|
|
403
510
|
},
|
|
404
511
|
{
|
|
405
|
-
"description": "The
|
|
406
|
-
"name": "
|
|
407
|
-
"inheritedFrom": {
|
|
408
|
-
"name": "AccordionButton",
|
|
409
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
410
|
-
}
|
|
512
|
+
"description": "The header button section of the accordion button.",
|
|
513
|
+
"name": "header-button-section"
|
|
411
514
|
},
|
|
412
515
|
{
|
|
413
|
-
"description": "The
|
|
414
|
-
"name": "
|
|
516
|
+
"description": "The leading header of the accordion button.",
|
|
517
|
+
"name": "leading-header"
|
|
415
518
|
},
|
|
416
519
|
{
|
|
417
|
-
"description": "The
|
|
418
|
-
"name": "
|
|
419
|
-
"inheritedFrom": {
|
|
420
|
-
"name": "AccordionButton",
|
|
421
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
422
|
-
}
|
|
520
|
+
"description": "The trailing header of the accordion button.",
|
|
521
|
+
"name": "trailing-header"
|
|
423
522
|
},
|
|
424
523
|
{
|
|
425
|
-
"description": "The header
|
|
426
|
-
"name": "
|
|
427
|
-
"inheritedFrom": {
|
|
428
|
-
"name": "AccordionButton",
|
|
429
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
430
|
-
}
|
|
524
|
+
"description": "The trailing header icon of the accordion button.",
|
|
525
|
+
"name": "trailing-header__icon"
|
|
431
526
|
},
|
|
432
527
|
{
|
|
433
|
-
"description": "The
|
|
434
|
-
"name": "
|
|
435
|
-
"inheritedFrom": {
|
|
436
|
-
"name": "AccordionButton",
|
|
437
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
438
|
-
}
|
|
528
|
+
"description": "The body section of the accordion button.",
|
|
529
|
+
"name": "body-section"
|
|
439
530
|
}
|
|
440
531
|
],
|
|
441
532
|
"slots": [
|
|
442
|
-
{
|
|
443
|
-
"description": "The leading controls slot of the accordion on the header section.",
|
|
444
|
-
"name": "leading-controls"
|
|
445
|
-
},
|
|
446
|
-
{
|
|
447
|
-
"description": "The trailing controls slot of the accordion on the header section.",
|
|
448
|
-
"name": "trailing-controls"
|
|
449
|
-
},
|
|
450
533
|
{
|
|
451
534
|
"description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
|
|
452
|
-
"name": "default"
|
|
453
|
-
"inheritedFrom": {
|
|
454
|
-
"name": "AccordionButton",
|
|
455
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
456
|
-
}
|
|
535
|
+
"name": "default"
|
|
457
536
|
}
|
|
458
537
|
],
|
|
459
538
|
"members": [
|
|
460
|
-
{
|
|
461
|
-
"kind": "method",
|
|
462
|
-
"name": "renderHeader",
|
|
463
|
-
"privacy": "protected",
|
|
464
|
-
"return": {
|
|
465
|
-
"type": {
|
|
466
|
-
"text": ""
|
|
467
|
-
}
|
|
468
|
-
},
|
|
469
|
-
"description": "Renders the header section of the accordion.\nThis includes the leading icon, text and controls, and the trailing controls.\nThe trailing controls include the expand/collapse button.\nThe button is disabled if the accordion is disabled.\nThe button is also given the aria-controls attribute set to the id of the body section.\nThe button is also given the aria-expanded attribute set to the expanded state of the accordion.\nThe prefix icon of the button is set to the expanded state of the accordion.",
|
|
470
|
-
"inheritedFrom": {
|
|
471
|
-
"name": "AccordionButton",
|
|
472
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
473
|
-
}
|
|
474
|
-
},
|
|
475
|
-
{
|
|
476
|
-
"kind": "field",
|
|
477
|
-
"name": "disabled",
|
|
478
|
-
"type": {
|
|
479
|
-
"text": "boolean | undefined"
|
|
480
|
-
},
|
|
481
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
482
|
-
"default": "undefined",
|
|
483
|
-
"attribute": "disabled",
|
|
484
|
-
"reflects": true,
|
|
485
|
-
"inheritedFrom": {
|
|
486
|
-
"name": "AccordionButton",
|
|
487
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
488
|
-
}
|
|
489
|
-
},
|
|
490
539
|
{
|
|
491
540
|
"kind": "field",
|
|
492
541
|
"name": "size",
|
|
@@ -496,11 +545,7 @@
|
|
|
496
545
|
"description": "The size of the accordion item.",
|
|
497
546
|
"default": "'small'",
|
|
498
547
|
"attribute": "size",
|
|
499
|
-
"reflects": true
|
|
500
|
-
"inheritedFrom": {
|
|
501
|
-
"name": "AccordionButton",
|
|
502
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
503
|
-
}
|
|
548
|
+
"reflects": true
|
|
504
549
|
},
|
|
505
550
|
{
|
|
506
551
|
"kind": "field",
|
|
@@ -511,11 +556,7 @@
|
|
|
511
556
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
512
557
|
"default": "'default'",
|
|
513
558
|
"attribute": "variant",
|
|
514
|
-
"reflects": true
|
|
515
|
-
"inheritedFrom": {
|
|
516
|
-
"name": "AccordionButton",
|
|
517
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
518
|
-
}
|
|
559
|
+
"reflects": true
|
|
519
560
|
},
|
|
520
561
|
{
|
|
521
562
|
"kind": "field",
|
|
@@ -526,11 +567,7 @@
|
|
|
526
567
|
"description": "The aria level of the accordion component.",
|
|
527
568
|
"default": "3",
|
|
528
569
|
"attribute": "data-aria-level",
|
|
529
|
-
"reflects": true
|
|
530
|
-
"inheritedFrom": {
|
|
531
|
-
"name": "AccordionButton",
|
|
532
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
533
|
-
}
|
|
570
|
+
"reflects": true
|
|
534
571
|
},
|
|
535
572
|
{
|
|
536
573
|
"kind": "field",
|
|
@@ -541,11 +578,7 @@
|
|
|
541
578
|
"description": "The visibility of the accordion button.",
|
|
542
579
|
"default": "false",
|
|
543
580
|
"attribute": "expanded",
|
|
544
|
-
"reflects": true
|
|
545
|
-
"inheritedFrom": {
|
|
546
|
-
"name": "AccordionButton",
|
|
547
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
548
|
-
}
|
|
581
|
+
"reflects": true
|
|
549
582
|
},
|
|
550
583
|
{
|
|
551
584
|
"kind": "field",
|
|
@@ -555,11 +588,7 @@
|
|
|
555
588
|
},
|
|
556
589
|
"description": "The header text of the accordion item.",
|
|
557
590
|
"attribute": "header-text",
|
|
558
|
-
"reflects": true
|
|
559
|
-
"inheritedFrom": {
|
|
560
|
-
"name": "AccordionButton",
|
|
561
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
562
|
-
}
|
|
591
|
+
"reflects": true
|
|
563
592
|
},
|
|
564
593
|
{
|
|
565
594
|
"kind": "field",
|
|
@@ -568,11 +597,7 @@
|
|
|
568
597
|
"text": "IconNames | undefined"
|
|
569
598
|
},
|
|
570
599
|
"description": "The leading icon that is displayed before the header text.",
|
|
571
|
-
"attribute": "prefix-icon"
|
|
572
|
-
"inheritedFrom": {
|
|
573
|
-
"name": "AccordionButton",
|
|
574
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
575
|
-
}
|
|
600
|
+
"attribute": "prefix-icon"
|
|
576
601
|
},
|
|
577
602
|
{
|
|
578
603
|
"kind": "method",
|
|
@@ -583,11 +608,7 @@
|
|
|
583
608
|
"text": "void"
|
|
584
609
|
}
|
|
585
610
|
},
|
|
586
|
-
"description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state."
|
|
587
|
-
"inheritedFrom": {
|
|
588
|
-
"name": "AccordionButton",
|
|
589
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
590
|
-
}
|
|
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."
|
|
591
612
|
},
|
|
592
613
|
{
|
|
593
614
|
"kind": "method",
|
|
@@ -598,11 +619,7 @@
|
|
|
598
619
|
"text": "void"
|
|
599
620
|
}
|
|
600
621
|
},
|
|
601
|
-
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
|
|
602
|
-
"inheritedFrom": {
|
|
603
|
-
"name": "AccordionButton",
|
|
604
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
605
|
-
}
|
|
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."
|
|
606
623
|
},
|
|
607
624
|
{
|
|
608
625
|
"kind": "method",
|
|
@@ -622,11 +639,7 @@
|
|
|
622
639
|
"description": "The KeyboardEvent fired."
|
|
623
640
|
}
|
|
624
641
|
],
|
|
625
|
-
"description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys."
|
|
626
|
-
"inheritedFrom": {
|
|
627
|
-
"name": "AccordionButton",
|
|
628
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
629
|
-
}
|
|
642
|
+
"description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys."
|
|
630
643
|
},
|
|
631
644
|
{
|
|
632
645
|
"kind": "method",
|
|
@@ -645,11 +658,7 @@
|
|
|
645
658
|
"text": "IconNames"
|
|
646
659
|
}
|
|
647
660
|
}
|
|
648
|
-
]
|
|
649
|
-
"inheritedFrom": {
|
|
650
|
-
"name": "AccordionButton",
|
|
651
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
652
|
-
}
|
|
661
|
+
]
|
|
653
662
|
},
|
|
654
663
|
{
|
|
655
664
|
"kind": "method",
|
|
@@ -659,10 +668,16 @@
|
|
|
659
668
|
"type": {
|
|
660
669
|
"text": "TemplateResult | typeof nothing"
|
|
661
670
|
}
|
|
662
|
-
}
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
671
|
+
}
|
|
672
|
+
},
|
|
673
|
+
{
|
|
674
|
+
"kind": "method",
|
|
675
|
+
"name": "renderHeader",
|
|
676
|
+
"privacy": "protected",
|
|
677
|
+
"return": {
|
|
678
|
+
"type": {
|
|
679
|
+
"text": "TemplateResult"
|
|
680
|
+
}
|
|
666
681
|
}
|
|
667
682
|
},
|
|
668
683
|
{
|
|
@@ -674,11 +689,7 @@
|
|
|
674
689
|
"text": ""
|
|
675
690
|
}
|
|
676
691
|
},
|
|
677
|
-
"description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon."
|
|
678
|
-
"inheritedFrom": {
|
|
679
|
-
"name": "AccordionButton",
|
|
680
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
681
|
-
}
|
|
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."
|
|
682
693
|
},
|
|
683
694
|
{
|
|
684
695
|
"kind": "method",
|
|
@@ -688,45 +699,32 @@
|
|
|
688
699
|
"type": {
|
|
689
700
|
"text": "TemplateResult | typeof nothing"
|
|
690
701
|
}
|
|
702
|
+
}
|
|
703
|
+
},
|
|
704
|
+
{
|
|
705
|
+
"kind": "field",
|
|
706
|
+
"name": "disabled",
|
|
707
|
+
"type": {
|
|
708
|
+
"text": "boolean | undefined"
|
|
691
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,
|
|
692
714
|
"inheritedFrom": {
|
|
693
|
-
"name": "
|
|
694
|
-
"module": "
|
|
715
|
+
"name": "DisabledMixin",
|
|
716
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
695
717
|
}
|
|
696
718
|
}
|
|
697
719
|
],
|
|
698
720
|
"events": [
|
|
699
721
|
{
|
|
700
|
-
"description": "(React: onShown) This event is triggered when the accordion is expanded.",
|
|
722
|
+
"description": "(React: onShown) This event is triggered when the accordion button is expanded.",
|
|
701
723
|
"name": "shown",
|
|
702
|
-
"reactName": "onShown"
|
|
703
|
-
"inheritedFrom": {
|
|
704
|
-
"name": "AccordionButton",
|
|
705
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
706
|
-
}
|
|
724
|
+
"reactName": "onShown"
|
|
707
725
|
}
|
|
708
726
|
],
|
|
709
|
-
"superclass": {
|
|
710
|
-
"name": "AccordionButton",
|
|
711
|
-
"module": "/src/components/accordionbutton/accordionbutton.component"
|
|
712
|
-
},
|
|
713
|
-
"tagName": "mdc-accordion",
|
|
714
|
-
"jsDoc": "/**\n * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.\n *\n * @tagname mdc-accordion\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot leading-controls - The leading controls slot of the accordion on the header section.\n * @slot trailing-controls - The trailing controls slot of the accordion on the header section.\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.\n *\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n * @csspart body-section - The body section of the accordion.\n */",
|
|
715
|
-
"customElement": true,
|
|
716
727
|
"attributes": [
|
|
717
|
-
{
|
|
718
|
-
"name": "disabled",
|
|
719
|
-
"type": {
|
|
720
|
-
"text": "boolean | undefined"
|
|
721
|
-
},
|
|
722
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
723
|
-
"default": "undefined",
|
|
724
|
-
"fieldName": "disabled",
|
|
725
|
-
"inheritedFrom": {
|
|
726
|
-
"name": "AccordionButton",
|
|
727
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
728
|
-
}
|
|
729
|
-
},
|
|
730
728
|
{
|
|
731
729
|
"name": "size",
|
|
732
730
|
"type": {
|
|
@@ -734,11 +732,7 @@
|
|
|
734
732
|
},
|
|
735
733
|
"description": "The size of the accordion item.",
|
|
736
734
|
"default": "'small'",
|
|
737
|
-
"fieldName": "size"
|
|
738
|
-
"inheritedFrom": {
|
|
739
|
-
"name": "AccordionButton",
|
|
740
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
741
|
-
}
|
|
735
|
+
"fieldName": "size"
|
|
742
736
|
},
|
|
743
737
|
{
|
|
744
738
|
"name": "variant",
|
|
@@ -747,11 +741,7 @@
|
|
|
747
741
|
},
|
|
748
742
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
749
743
|
"default": "'default'",
|
|
750
|
-
"fieldName": "variant"
|
|
751
|
-
"inheritedFrom": {
|
|
752
|
-
"name": "AccordionButton",
|
|
753
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
754
|
-
}
|
|
744
|
+
"fieldName": "variant"
|
|
755
745
|
},
|
|
756
746
|
{
|
|
757
747
|
"name": "data-aria-level",
|
|
@@ -760,11 +750,7 @@
|
|
|
760
750
|
},
|
|
761
751
|
"description": "The aria level of the accordion component.",
|
|
762
752
|
"default": "3",
|
|
763
|
-
"fieldName": "dataAriaLevel"
|
|
764
|
-
"inheritedFrom": {
|
|
765
|
-
"name": "AccordionButton",
|
|
766
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
767
|
-
}
|
|
753
|
+
"fieldName": "dataAriaLevel"
|
|
768
754
|
},
|
|
769
755
|
{
|
|
770
756
|
"name": "expanded",
|
|
@@ -773,11 +759,7 @@
|
|
|
773
759
|
},
|
|
774
760
|
"description": "The visibility of the accordion button.",
|
|
775
761
|
"default": "false",
|
|
776
|
-
"fieldName": "expanded"
|
|
777
|
-
"inheritedFrom": {
|
|
778
|
-
"name": "AccordionButton",
|
|
779
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
780
|
-
}
|
|
762
|
+
"fieldName": "expanded"
|
|
781
763
|
},
|
|
782
764
|
{
|
|
783
765
|
"name": "header-text",
|
|
@@ -785,11 +767,7 @@
|
|
|
785
767
|
"text": "string | undefined"
|
|
786
768
|
},
|
|
787
769
|
"description": "The header text of the accordion item.",
|
|
788
|
-
"fieldName": "headerText"
|
|
789
|
-
"inheritedFrom": {
|
|
790
|
-
"name": "AccordionButton",
|
|
791
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
792
|
-
}
|
|
770
|
+
"fieldName": "headerText"
|
|
793
771
|
},
|
|
794
772
|
{
|
|
795
773
|
"name": "prefix-icon",
|
|
@@ -797,13 +775,35 @@
|
|
|
797
775
|
"text": "IconNames | undefined"
|
|
798
776
|
},
|
|
799
777
|
"description": "The leading icon that is displayed before the header text.",
|
|
800
|
-
"fieldName": "prefixIcon"
|
|
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",
|
|
801
788
|
"inheritedFrom": {
|
|
802
|
-
"name": "
|
|
803
|
-
"module": "src/
|
|
789
|
+
"name": "DisabledMixin",
|
|
790
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
804
791
|
}
|
|
805
792
|
}
|
|
806
|
-
]
|
|
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
807
|
}
|
|
808
808
|
],
|
|
809
809
|
"exports": [
|
|
@@ -811,8 +811,159 @@
|
|
|
811
811
|
"kind": "js",
|
|
812
812
|
"name": "default",
|
|
813
813
|
"declaration": {
|
|
814
|
-
"name": "
|
|
815
|
-
"module": "components/
|
|
814
|
+
"name": "AccordionButton",
|
|
815
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
816
|
+
}
|
|
817
|
+
}
|
|
818
|
+
]
|
|
819
|
+
},
|
|
820
|
+
{
|
|
821
|
+
"kind": "javascript-module",
|
|
822
|
+
"path": "components/accordiongroup/accordiongroup.component.js",
|
|
823
|
+
"declarations": [
|
|
824
|
+
{
|
|
825
|
+
"kind": "class",
|
|
826
|
+
"description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
|
|
827
|
+
"name": "AccordionGroup",
|
|
828
|
+
"cssProperties": [
|
|
829
|
+
{
|
|
830
|
+
"description": "The border color of the entire accordiongroup",
|
|
831
|
+
"name": "--mdc-accordiongroup-border-color"
|
|
832
|
+
}
|
|
833
|
+
],
|
|
834
|
+
"slots": [
|
|
835
|
+
{
|
|
836
|
+
"description": "The default slot can contain the `accordion` or `accordionbutton` components.",
|
|
837
|
+
"name": "default"
|
|
838
|
+
}
|
|
839
|
+
],
|
|
840
|
+
"members": [
|
|
841
|
+
{
|
|
842
|
+
"kind": "field",
|
|
843
|
+
"name": "size",
|
|
844
|
+
"type": {
|
|
845
|
+
"text": "Size"
|
|
846
|
+
},
|
|
847
|
+
"description": "The size of the accordion item.",
|
|
848
|
+
"default": "'small'",
|
|
849
|
+
"attribute": "size",
|
|
850
|
+
"reflects": true
|
|
851
|
+
},
|
|
852
|
+
{
|
|
853
|
+
"kind": "field",
|
|
854
|
+
"name": "variant",
|
|
855
|
+
"type": {
|
|
856
|
+
"text": "Variant"
|
|
857
|
+
},
|
|
858
|
+
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
859
|
+
"default": "'stacked'",
|
|
860
|
+
"attribute": "variant",
|
|
861
|
+
"reflects": true
|
|
862
|
+
},
|
|
863
|
+
{
|
|
864
|
+
"kind": "field",
|
|
865
|
+
"name": "allowMultiple",
|
|
866
|
+
"type": {
|
|
867
|
+
"text": "boolean"
|
|
868
|
+
},
|
|
869
|
+
"default": "false",
|
|
870
|
+
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
871
|
+
"attribute": "allow-multiple",
|
|
872
|
+
"reflects": true
|
|
873
|
+
},
|
|
874
|
+
{
|
|
875
|
+
"kind": "method",
|
|
876
|
+
"name": "handleAccordionExpanded",
|
|
877
|
+
"privacy": "private",
|
|
878
|
+
"return": {
|
|
879
|
+
"type": {
|
|
880
|
+
"text": "void"
|
|
881
|
+
}
|
|
882
|
+
},
|
|
883
|
+
"parameters": [
|
|
884
|
+
{
|
|
885
|
+
"name": "event",
|
|
886
|
+
"type": {
|
|
887
|
+
"text": "Event"
|
|
888
|
+
},
|
|
889
|
+
"description": "The event object from the 'shown' event."
|
|
890
|
+
}
|
|
891
|
+
],
|
|
892
|
+
"description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
|
|
893
|
+
},
|
|
894
|
+
{
|
|
895
|
+
"kind": "method",
|
|
896
|
+
"name": "setChildrenAccordionAttributes",
|
|
897
|
+
"privacy": "private",
|
|
898
|
+
"return": {
|
|
899
|
+
"type": {
|
|
900
|
+
"text": "void"
|
|
901
|
+
}
|
|
902
|
+
},
|
|
903
|
+
"parameters": [
|
|
904
|
+
{
|
|
905
|
+
"name": "attributeName",
|
|
906
|
+
"type": {
|
|
907
|
+
"text": "string"
|
|
908
|
+
},
|
|
909
|
+
"description": "The name of the attribute to set."
|
|
910
|
+
},
|
|
911
|
+
{
|
|
912
|
+
"name": "attributeValue",
|
|
913
|
+
"type": {
|
|
914
|
+
"text": "string"
|
|
915
|
+
},
|
|
916
|
+
"description": "The value to set the attribute to."
|
|
917
|
+
}
|
|
918
|
+
],
|
|
919
|
+
"description": "Sets the given attribute on all child accordion or accordionbutton components."
|
|
920
|
+
}
|
|
921
|
+
],
|
|
922
|
+
"attributes": [
|
|
923
|
+
{
|
|
924
|
+
"name": "size",
|
|
925
|
+
"type": {
|
|
926
|
+
"text": "Size"
|
|
927
|
+
},
|
|
928
|
+
"description": "The size of the accordion item.",
|
|
929
|
+
"default": "'small'",
|
|
930
|
+
"fieldName": "size"
|
|
931
|
+
},
|
|
932
|
+
{
|
|
933
|
+
"name": "variant",
|
|
934
|
+
"type": {
|
|
935
|
+
"text": "Variant"
|
|
936
|
+
},
|
|
937
|
+
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
938
|
+
"default": "'stacked'",
|
|
939
|
+
"fieldName": "variant"
|
|
940
|
+
},
|
|
941
|
+
{
|
|
942
|
+
"name": "allow-multiple",
|
|
943
|
+
"type": {
|
|
944
|
+
"text": "boolean"
|
|
945
|
+
},
|
|
946
|
+
"default": "false",
|
|
947
|
+
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
948
|
+
"fieldName": "allowMultiple"
|
|
949
|
+
}
|
|
950
|
+
],
|
|
951
|
+
"superclass": {
|
|
952
|
+
"name": "Component",
|
|
953
|
+
"module": "/src/models"
|
|
954
|
+
},
|
|
955
|
+
"tagName": "mdc-accordiongroup",
|
|
956
|
+
"jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
|
|
957
|
+
"customElement": true
|
|
958
|
+
}
|
|
959
|
+
],
|
|
960
|
+
"exports": [
|
|
961
|
+
{
|
|
962
|
+
"kind": "js",
|
|
963
|
+
"name": "default",
|
|
964
|
+
"declaration": {
|
|
965
|
+
"name": "AccordionGroup",
|
|
966
|
+
"module": "components/accordiongroup/accordiongroup.component.js"
|
|
816
967
|
}
|
|
817
968
|
}
|
|
818
969
|
]
|
|
@@ -1617,141 +1768,51 @@
|
|
|
1617
1768
|
},
|
|
1618
1769
|
{
|
|
1619
1770
|
"kind": "javascript-module",
|
|
1620
|
-
"path": "components/
|
|
1771
|
+
"path": "components/appheader/appheader.component.js",
|
|
1621
1772
|
"declarations": [
|
|
1622
1773
|
{
|
|
1623
1774
|
"kind": "class",
|
|
1624
|
-
"description": "
|
|
1625
|
-
"name": "
|
|
1626
|
-
"
|
|
1627
|
-
{
|
|
1628
|
-
"description": "The border color of the entire accordiongroup",
|
|
1629
|
-
"name": "--mdc-accordiongroup-border-color"
|
|
1630
|
-
}
|
|
1631
|
-
],
|
|
1632
|
-
"slots": [
|
|
1633
|
-
{
|
|
1634
|
-
"description": "The default slot can contain the `accordion` or `accordionbutton` components.",
|
|
1635
|
-
"name": "default"
|
|
1636
|
-
}
|
|
1637
|
-
],
|
|
1638
|
-
"members": [
|
|
1639
|
-
{
|
|
1640
|
-
"kind": "field",
|
|
1641
|
-
"name": "size",
|
|
1642
|
-
"type": {
|
|
1643
|
-
"text": "Size"
|
|
1644
|
-
},
|
|
1645
|
-
"description": "The size of the accordion item.",
|
|
1646
|
-
"default": "'small'",
|
|
1647
|
-
"attribute": "size",
|
|
1648
|
-
"reflects": true
|
|
1649
|
-
},
|
|
1775
|
+
"description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
|
|
1776
|
+
"name": "Appheader",
|
|
1777
|
+
"cssParts": [
|
|
1650
1778
|
{
|
|
1651
|
-
"
|
|
1652
|
-
"name": "
|
|
1653
|
-
"type": {
|
|
1654
|
-
"text": "Variant"
|
|
1655
|
-
},
|
|
1656
|
-
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
1657
|
-
"default": "'stacked'",
|
|
1658
|
-
"attribute": "variant",
|
|
1659
|
-
"reflects": true
|
|
1779
|
+
"description": "The main container for styling the header.",
|
|
1780
|
+
"name": "container"
|
|
1660
1781
|
},
|
|
1661
1782
|
{
|
|
1662
|
-
"
|
|
1663
|
-
"name": "
|
|
1664
|
-
"type": {
|
|
1665
|
-
"text": "boolean"
|
|
1666
|
-
},
|
|
1667
|
-
"default": "false",
|
|
1668
|
-
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
1669
|
-
"attribute": "allow-multiple",
|
|
1670
|
-
"reflects": true
|
|
1783
|
+
"description": "The leading section of the header.",
|
|
1784
|
+
"name": "leading-section"
|
|
1671
1785
|
},
|
|
1672
1786
|
{
|
|
1673
|
-
"
|
|
1674
|
-
"name": "
|
|
1675
|
-
"privacy": "private",
|
|
1676
|
-
"return": {
|
|
1677
|
-
"type": {
|
|
1678
|
-
"text": "void"
|
|
1679
|
-
}
|
|
1680
|
-
},
|
|
1681
|
-
"parameters": [
|
|
1682
|
-
{
|
|
1683
|
-
"name": "event",
|
|
1684
|
-
"type": {
|
|
1685
|
-
"text": "Event"
|
|
1686
|
-
},
|
|
1687
|
-
"description": "The event object from the 'shown' event."
|
|
1688
|
-
}
|
|
1689
|
-
],
|
|
1690
|
-
"description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
|
|
1787
|
+
"description": "The center section of the header.",
|
|
1788
|
+
"name": "center-section"
|
|
1691
1789
|
},
|
|
1692
1790
|
{
|
|
1693
|
-
"
|
|
1694
|
-
"name": "
|
|
1695
|
-
"privacy": "private",
|
|
1696
|
-
"return": {
|
|
1697
|
-
"type": {
|
|
1698
|
-
"text": "void"
|
|
1699
|
-
}
|
|
1700
|
-
},
|
|
1701
|
-
"parameters": [
|
|
1702
|
-
{
|
|
1703
|
-
"name": "attributeName",
|
|
1704
|
-
"type": {
|
|
1705
|
-
"text": "string"
|
|
1706
|
-
},
|
|
1707
|
-
"description": "The name of the attribute to set."
|
|
1708
|
-
},
|
|
1709
|
-
{
|
|
1710
|
-
"name": "attributeValue",
|
|
1711
|
-
"type": {
|
|
1712
|
-
"text": "string"
|
|
1713
|
-
},
|
|
1714
|
-
"description": "The value to set the attribute to."
|
|
1715
|
-
}
|
|
1716
|
-
],
|
|
1717
|
-
"description": "Sets the given attribute on all child accordion or accordionbutton components."
|
|
1791
|
+
"description": "The trailing section of the header.",
|
|
1792
|
+
"name": "trailing-section"
|
|
1718
1793
|
}
|
|
1719
1794
|
],
|
|
1720
|
-
"
|
|
1795
|
+
"slots": [
|
|
1721
1796
|
{
|
|
1722
|
-
"
|
|
1723
|
-
"
|
|
1724
|
-
"text": "Size"
|
|
1725
|
-
},
|
|
1726
|
-
"description": "The size of the accordion item.",
|
|
1727
|
-
"default": "'small'",
|
|
1728
|
-
"fieldName": "size"
|
|
1797
|
+
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
1798
|
+
"name": "leading"
|
|
1729
1799
|
},
|
|
1730
1800
|
{
|
|
1731
|
-
"
|
|
1732
|
-
"
|
|
1733
|
-
"text": "Variant"
|
|
1734
|
-
},
|
|
1735
|
-
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
1736
|
-
"default": "'stacked'",
|
|
1737
|
-
"fieldName": "variant"
|
|
1801
|
+
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
1802
|
+
"name": "center"
|
|
1738
1803
|
},
|
|
1739
1804
|
{
|
|
1740
|
-
"
|
|
1741
|
-
"
|
|
1742
|
-
"text": "boolean"
|
|
1743
|
-
},
|
|
1744
|
-
"default": "false",
|
|
1745
|
-
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
1746
|
-
"fieldName": "allowMultiple"
|
|
1805
|
+
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
1806
|
+
"name": "trailing"
|
|
1747
1807
|
}
|
|
1748
1808
|
],
|
|
1809
|
+
"members": [],
|
|
1749
1810
|
"superclass": {
|
|
1750
1811
|
"name": "Component",
|
|
1751
1812
|
"module": "/src/models"
|
|
1752
1813
|
},
|
|
1753
|
-
"tagName": "mdc-
|
|
1754
|
-
"jsDoc": "/**\n *
|
|
1814
|
+
"tagName": "mdc-appheader",
|
|
1815
|
+
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
|
1755
1816
|
"customElement": true
|
|
1756
1817
|
}
|
|
1757
1818
|
],
|
|
@@ -1760,8 +1821,8 @@
|
|
|
1760
1821
|
"kind": "js",
|
|
1761
1822
|
"name": "default",
|
|
1762
1823
|
"declaration": {
|
|
1763
|
-
"name": "
|
|
1764
|
-
"module": "components/
|
|
1824
|
+
"name": "Appheader",
|
|
1825
|
+
"module": "components/appheader/appheader.component.js"
|
|
1765
1826
|
}
|
|
1766
1827
|
}
|
|
1767
1828
|
]
|
|
@@ -2032,67 +2093,6 @@
|
|
|
2032
2093
|
}
|
|
2033
2094
|
]
|
|
2034
2095
|
},
|
|
2035
|
-
{
|
|
2036
|
-
"kind": "javascript-module",
|
|
2037
|
-
"path": "components/appheader/appheader.component.js",
|
|
2038
|
-
"declarations": [
|
|
2039
|
-
{
|
|
2040
|
-
"kind": "class",
|
|
2041
|
-
"description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
|
|
2042
|
-
"name": "Appheader",
|
|
2043
|
-
"cssParts": [
|
|
2044
|
-
{
|
|
2045
|
-
"description": "The main container for styling the header.",
|
|
2046
|
-
"name": "container"
|
|
2047
|
-
},
|
|
2048
|
-
{
|
|
2049
|
-
"description": "The leading section of the header.",
|
|
2050
|
-
"name": "leading-section"
|
|
2051
|
-
},
|
|
2052
|
-
{
|
|
2053
|
-
"description": "The center section of the header.",
|
|
2054
|
-
"name": "center-section"
|
|
2055
|
-
},
|
|
2056
|
-
{
|
|
2057
|
-
"description": "The trailing section of the header.",
|
|
2058
|
-
"name": "trailing-section"
|
|
2059
|
-
}
|
|
2060
|
-
],
|
|
2061
|
-
"slots": [
|
|
2062
|
-
{
|
|
2063
|
-
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
2064
|
-
"name": "leading"
|
|
2065
|
-
},
|
|
2066
|
-
{
|
|
2067
|
-
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
2068
|
-
"name": "center"
|
|
2069
|
-
},
|
|
2070
|
-
{
|
|
2071
|
-
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
2072
|
-
"name": "trailing"
|
|
2073
|
-
}
|
|
2074
|
-
],
|
|
2075
|
-
"members": [],
|
|
2076
|
-
"superclass": {
|
|
2077
|
-
"name": "Component",
|
|
2078
|
-
"module": "/src/models"
|
|
2079
|
-
},
|
|
2080
|
-
"tagName": "mdc-appheader",
|
|
2081
|
-
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
|
2082
|
-
"customElement": true
|
|
2083
|
-
}
|
|
2084
|
-
],
|
|
2085
|
-
"exports": [
|
|
2086
|
-
{
|
|
2087
|
-
"kind": "js",
|
|
2088
|
-
"name": "default",
|
|
2089
|
-
"declaration": {
|
|
2090
|
-
"name": "Appheader",
|
|
2091
|
-
"module": "components/appheader/appheader.component.js"
|
|
2092
|
-
}
|
|
2093
|
-
}
|
|
2094
|
-
]
|
|
2095
|
-
},
|
|
2096
2096
|
{
|
|
2097
2097
|
"kind": "javascript-module",
|
|
2098
2098
|
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
@@ -33675,18 +33675,82 @@
|
|
|
33675
33675
|
"declarations": [
|
|
33676
33676
|
{
|
|
33677
33677
|
"kind": "class",
|
|
33678
|
-
"description": "slider
|
|
33678
|
+
"description": "Slider component is used to select a value or range of values from within a defined range.\nIt provides a visual representation of the current value(s) and allows users to adjust the value(s) by dragging the thumb(s) along the track.\nIt can be used as a single slider or a range slider. This is set by the boolean attribute `range`\nIf the step value is more than 1, tick marks are shown to represent the steps between the min and max values. The slider thumb will snap to the nearest tick mark.",
|
|
33679
33679
|
"name": "Slider",
|
|
33680
33680
|
"cssProperties": [
|
|
33681
33681
|
{
|
|
33682
|
-
"description": "
|
|
33683
|
-
"name": "--
|
|
33682
|
+
"description": "The color of the slider thumb",
|
|
33683
|
+
"name": "--mdc-slider-thumb-color"
|
|
33684
|
+
},
|
|
33685
|
+
{
|
|
33686
|
+
"description": "The color of the slider thumb border",
|
|
33687
|
+
"name": "--mdc-slider-thumb-border-color"
|
|
33688
|
+
},
|
|
33689
|
+
{
|
|
33690
|
+
"description": "The size of the slider thumb",
|
|
33691
|
+
"name": "--mdc-slider-thumb-size"
|
|
33692
|
+
},
|
|
33693
|
+
{
|
|
33694
|
+
"description": "The height of the slider input",
|
|
33695
|
+
"name": "--mdc-slider-input-size"
|
|
33696
|
+
},
|
|
33697
|
+
{
|
|
33698
|
+
"description": "The size of the slider tick marks",
|
|
33699
|
+
"name": "--mdc-slider-tick-size"
|
|
33700
|
+
},
|
|
33701
|
+
{
|
|
33702
|
+
"description": "The height of the slider track",
|
|
33703
|
+
"name": "--mdc-slider-track-height"
|
|
33704
|
+
},
|
|
33705
|
+
{
|
|
33706
|
+
"description": "The color of the slider tick marks",
|
|
33707
|
+
"name": "--mdc-slider-tick-color"
|
|
33708
|
+
},
|
|
33709
|
+
{
|
|
33710
|
+
"description": "The color of the slider progress",
|
|
33711
|
+
"name": "--mdc-slider-progress-color"
|
|
33712
|
+
},
|
|
33713
|
+
{
|
|
33714
|
+
"description": "The color of the slider track",
|
|
33715
|
+
"name": "--mdc-slider-track-color"
|
|
33716
|
+
},
|
|
33717
|
+
{
|
|
33718
|
+
"description": "The left position of the slider tooltip",
|
|
33719
|
+
"name": "--mdc-slider-tooltip-left"
|
|
33720
|
+
},
|
|
33721
|
+
{
|
|
33722
|
+
"description": "The left position of the slider tick marks",
|
|
33723
|
+
"name": "--mdc-slider-tick-left"
|
|
33684
33724
|
}
|
|
33685
33725
|
],
|
|
33686
|
-
"
|
|
33726
|
+
"cssParts": [
|
|
33687
33727
|
{
|
|
33688
|
-
"description": "
|
|
33689
|
-
"name": "
|
|
33728
|
+
"description": "The tooltip of the slider",
|
|
33729
|
+
"name": "slider-tooltip"
|
|
33730
|
+
},
|
|
33731
|
+
{
|
|
33732
|
+
"description": "The track of the slider",
|
|
33733
|
+
"name": "slider-track"
|
|
33734
|
+
},
|
|
33735
|
+
{
|
|
33736
|
+
"description": "The wrapper around the slider input(s)",
|
|
33737
|
+
"name": "slider-wrapper"
|
|
33738
|
+
},
|
|
33739
|
+
{
|
|
33740
|
+
"description": "The container for the tick marks",
|
|
33741
|
+
"name": "slider-ticks"
|
|
33742
|
+
},
|
|
33743
|
+
{
|
|
33744
|
+
"description": "The individual tick marks",
|
|
33745
|
+
"name": "slider-tick"
|
|
33746
|
+
},
|
|
33747
|
+
{
|
|
33748
|
+
"description": "The input element of the slider",
|
|
33749
|
+
"name": "slider-input"
|
|
33750
|
+
},
|
|
33751
|
+
{
|
|
33752
|
+
"description": "The label of the slider",
|
|
33753
|
+
"name": "slider-label"
|
|
33690
33754
|
}
|
|
33691
33755
|
],
|
|
33692
33756
|
"members": [
|
|
@@ -33697,8 +33761,31 @@
|
|
|
33697
33761
|
"text": "boolean"
|
|
33698
33762
|
},
|
|
33699
33763
|
"default": "false",
|
|
33700
|
-
"description": "
|
|
33701
|
-
"attribute": "range"
|
|
33764
|
+
"description": "Indicates whether it is a range slider. When true, the slider displays two handles for selecting a range of values.\nWhen false, the slider displays a single handle for selecting a single value.",
|
|
33765
|
+
"attribute": "range",
|
|
33766
|
+
"reflects": true
|
|
33767
|
+
},
|
|
33768
|
+
{
|
|
33769
|
+
"kind": "field",
|
|
33770
|
+
"name": "min",
|
|
33771
|
+
"type": {
|
|
33772
|
+
"text": "number"
|
|
33773
|
+
},
|
|
33774
|
+
"description": "The slider minimum value.",
|
|
33775
|
+
"default": "0",
|
|
33776
|
+
"attribute": "min",
|
|
33777
|
+
"reflects": true
|
|
33778
|
+
},
|
|
33779
|
+
{
|
|
33780
|
+
"kind": "field",
|
|
33781
|
+
"name": "max",
|
|
33782
|
+
"type": {
|
|
33783
|
+
"text": "number"
|
|
33784
|
+
},
|
|
33785
|
+
"description": "The slider maximum value.",
|
|
33786
|
+
"default": "100",
|
|
33787
|
+
"attribute": "max",
|
|
33788
|
+
"reflects": true
|
|
33702
33789
|
},
|
|
33703
33790
|
{
|
|
33704
33791
|
"kind": "field",
|
|
@@ -33706,8 +33793,9 @@
|
|
|
33706
33793
|
"type": {
|
|
33707
33794
|
"text": "boolean | undefined"
|
|
33708
33795
|
},
|
|
33709
|
-
"description": "Whether the slider is disabled.",
|
|
33710
|
-
"attribute": "disabled"
|
|
33796
|
+
"description": "Whether the slider is disabled. When true, the slider cannot be interacted with.",
|
|
33797
|
+
"attribute": "disabled",
|
|
33798
|
+
"reflects": true
|
|
33711
33799
|
},
|
|
33712
33800
|
{
|
|
33713
33801
|
"kind": "field",
|
|
@@ -33716,7 +33804,8 @@
|
|
|
33716
33804
|
"text": "boolean | undefined"
|
|
33717
33805
|
},
|
|
33718
33806
|
"description": "Acts similar to disabled, but component is focusable and tooltip is shown on focus.",
|
|
33719
|
-
"attribute": "soft-disabled"
|
|
33807
|
+
"attribute": "soft-disabled",
|
|
33808
|
+
"reflects": true
|
|
33720
33809
|
},
|
|
33721
33810
|
{
|
|
33722
33811
|
"kind": "field",
|
|
@@ -33725,7 +33814,8 @@
|
|
|
33725
33814
|
"text": "string | undefined"
|
|
33726
33815
|
},
|
|
33727
33816
|
"description": "Icon that represents the minimum value; ex: muted speaker.",
|
|
33728
|
-
"attribute": "leading-icon"
|
|
33817
|
+
"attribute": "leading-icon",
|
|
33818
|
+
"reflects": true
|
|
33729
33819
|
},
|
|
33730
33820
|
{
|
|
33731
33821
|
"kind": "field",
|
|
@@ -33734,27 +33824,8 @@
|
|
|
33734
33824
|
"text": "string | undefined"
|
|
33735
33825
|
},
|
|
33736
33826
|
"description": "Icon that represents the maximum value; ex: speaker with full volume.",
|
|
33737
|
-
"attribute": "trailing-icon"
|
|
33738
|
-
|
|
33739
|
-
{
|
|
33740
|
-
"kind": "field",
|
|
33741
|
-
"name": "min",
|
|
33742
|
-
"type": {
|
|
33743
|
-
"text": "number"
|
|
33744
|
-
},
|
|
33745
|
-
"default": "0",
|
|
33746
|
-
"description": "The slider minimum value.",
|
|
33747
|
-
"attribute": "min"
|
|
33748
|
-
},
|
|
33749
|
-
{
|
|
33750
|
-
"kind": "field",
|
|
33751
|
-
"name": "max",
|
|
33752
|
-
"type": {
|
|
33753
|
-
"text": "number"
|
|
33754
|
-
},
|
|
33755
|
-
"default": "100",
|
|
33756
|
-
"description": "The slider maximum value.",
|
|
33757
|
-
"attribute": "max"
|
|
33827
|
+
"attribute": "trailing-icon",
|
|
33828
|
+
"reflects": true
|
|
33758
33829
|
},
|
|
33759
33830
|
{
|
|
33760
33831
|
"kind": "field",
|
|
@@ -33763,7 +33834,8 @@
|
|
|
33763
33834
|
"text": "number | undefined"
|
|
33764
33835
|
},
|
|
33765
33836
|
"description": "The slider value displayed when range is false.",
|
|
33766
|
-
"attribute": "value"
|
|
33837
|
+
"attribute": "value",
|
|
33838
|
+
"reflects": true
|
|
33767
33839
|
},
|
|
33768
33840
|
{
|
|
33769
33841
|
"kind": "field",
|
|
@@ -33772,7 +33844,8 @@
|
|
|
33772
33844
|
"text": "number | undefined"
|
|
33773
33845
|
},
|
|
33774
33846
|
"description": "The slider start value displayed when range is true.",
|
|
33775
|
-
"attribute": "value-start"
|
|
33847
|
+
"attribute": "value-start",
|
|
33848
|
+
"reflects": true
|
|
33776
33849
|
},
|
|
33777
33850
|
{
|
|
33778
33851
|
"kind": "field",
|
|
@@ -33781,7 +33854,8 @@
|
|
|
33781
33854
|
"text": "number | undefined"
|
|
33782
33855
|
},
|
|
33783
33856
|
"description": "The slider end value displayed when range is true.",
|
|
33784
|
-
"attribute": "value-end"
|
|
33857
|
+
"attribute": "value-end",
|
|
33858
|
+
"reflects": true
|
|
33785
33859
|
},
|
|
33786
33860
|
{
|
|
33787
33861
|
"kind": "field",
|
|
@@ -33789,9 +33863,10 @@
|
|
|
33789
33863
|
"type": {
|
|
33790
33864
|
"text": "number"
|
|
33791
33865
|
},
|
|
33866
|
+
"description": "The step between values. If defined and greater than 1, we will show tick marks and the stepper will snap to the nearest tick mark.",
|
|
33792
33867
|
"default": "1",
|
|
33793
|
-
"
|
|
33794
|
-
"
|
|
33868
|
+
"attribute": "step",
|
|
33869
|
+
"reflects": true
|
|
33795
33870
|
},
|
|
33796
33871
|
{
|
|
33797
33872
|
"kind": "field",
|
|
@@ -33800,7 +33875,8 @@
|
|
|
33800
33875
|
"text": "string | undefined"
|
|
33801
33876
|
},
|
|
33802
33877
|
"description": "It represents the label for slider component.",
|
|
33803
|
-
"attribute": "label"
|
|
33878
|
+
"attribute": "label",
|
|
33879
|
+
"reflects": true
|
|
33804
33880
|
},
|
|
33805
33881
|
{
|
|
33806
33882
|
"kind": "field",
|
|
@@ -33809,7 +33885,8 @@
|
|
|
33809
33885
|
"text": "string | undefined"
|
|
33810
33886
|
},
|
|
33811
33887
|
"description": "The label text is shown below the slider (on leading side) representing the minimum starting value of the slider.",
|
|
33812
|
-
"attribute": "label-start"
|
|
33888
|
+
"attribute": "label-start",
|
|
33889
|
+
"reflects": true
|
|
33813
33890
|
},
|
|
33814
33891
|
{
|
|
33815
33892
|
"kind": "field",
|
|
@@ -33818,124 +33895,325 @@
|
|
|
33818
33895
|
"text": "string | undefined"
|
|
33819
33896
|
},
|
|
33820
33897
|
"description": "The label text is shown below the slider (on trailing side) representing the maximum starting value of the slider.",
|
|
33821
|
-
"attribute": "label-end"
|
|
33898
|
+
"attribute": "label-end",
|
|
33899
|
+
"reflects": true
|
|
33822
33900
|
},
|
|
33823
33901
|
{
|
|
33824
33902
|
"kind": "field",
|
|
33825
33903
|
"name": "valueLabel",
|
|
33826
33904
|
"type": {
|
|
33827
|
-
"text": "string"
|
|
33905
|
+
"text": "string | undefined"
|
|
33828
33906
|
},
|
|
33829
|
-
"
|
|
33830
|
-
"
|
|
33831
|
-
"
|
|
33907
|
+
"description": "An optional label for the slider's value displayed when range is false; if not set, the label is the 'value' itself.",
|
|
33908
|
+
"attribute": "value-label",
|
|
33909
|
+
"reflects": true
|
|
33832
33910
|
},
|
|
33833
33911
|
{
|
|
33834
33912
|
"kind": "field",
|
|
33835
33913
|
"name": "valueLabelStart",
|
|
33836
33914
|
"type": {
|
|
33837
|
-
"text": "string"
|
|
33915
|
+
"text": "string | undefined"
|
|
33838
33916
|
},
|
|
33839
|
-
"
|
|
33840
|
-
"
|
|
33841
|
-
"
|
|
33917
|
+
"description": "An optional label for the slider's start value displayed when range is true; if not set, the label is the 'valueStart' itself.",
|
|
33918
|
+
"attribute": "value-label-start",
|
|
33919
|
+
"reflects": true
|
|
33842
33920
|
},
|
|
33843
33921
|
{
|
|
33844
33922
|
"kind": "field",
|
|
33845
33923
|
"name": "valueLabelEnd",
|
|
33846
33924
|
"type": {
|
|
33847
|
-
"text": "string"
|
|
33925
|
+
"text": "string | undefined"
|
|
33848
33926
|
},
|
|
33849
|
-
"
|
|
33850
|
-
"
|
|
33851
|
-
"
|
|
33927
|
+
"description": "An optional label for the slider's end value displayed when range is true; if not set, the label is the 'valueEnd' itself.",
|
|
33928
|
+
"attribute": "value-label-end",
|
|
33929
|
+
"reflects": true
|
|
33852
33930
|
},
|
|
33853
33931
|
{
|
|
33854
33932
|
"kind": "field",
|
|
33855
|
-
"name": "
|
|
33933
|
+
"name": "name",
|
|
33856
33934
|
"type": {
|
|
33857
|
-
"text": "string"
|
|
33935
|
+
"text": "string | undefined"
|
|
33858
33936
|
},
|
|
33859
|
-
"
|
|
33860
|
-
"
|
|
33861
|
-
"
|
|
33937
|
+
"description": "Name attribute for the slider (single value).",
|
|
33938
|
+
"attribute": "name",
|
|
33939
|
+
"reflects": true
|
|
33862
33940
|
},
|
|
33863
33941
|
{
|
|
33864
33942
|
"kind": "field",
|
|
33865
|
-
"name": "
|
|
33943
|
+
"name": "nameStart",
|
|
33866
33944
|
"type": {
|
|
33867
|
-
"text": "string"
|
|
33945
|
+
"text": "string | undefined"
|
|
33868
33946
|
},
|
|
33869
|
-
"
|
|
33870
|
-
"
|
|
33871
|
-
"
|
|
33947
|
+
"description": "Name attribute for the slider's start handle when range is true.",
|
|
33948
|
+
"attribute": "name-start",
|
|
33949
|
+
"reflects": true
|
|
33872
33950
|
},
|
|
33873
33951
|
{
|
|
33874
33952
|
"kind": "field",
|
|
33875
|
-
"name": "
|
|
33953
|
+
"name": "nameEnd",
|
|
33876
33954
|
"type": {
|
|
33877
|
-
"text": "string"
|
|
33955
|
+
"text": "string | undefined"
|
|
33878
33956
|
},
|
|
33879
|
-
"
|
|
33880
|
-
"
|
|
33881
|
-
"
|
|
33957
|
+
"description": "Name attribute for the slider's end handle when range is true.",
|
|
33958
|
+
"attribute": "name-end",
|
|
33959
|
+
"reflects": true
|
|
33882
33960
|
},
|
|
33883
33961
|
{
|
|
33884
33962
|
"kind": "field",
|
|
33885
|
-
"name": "
|
|
33963
|
+
"name": "dataAriaLabel",
|
|
33886
33964
|
"type": {
|
|
33887
|
-
"text": "string"
|
|
33965
|
+
"text": "string | undefined"
|
|
33888
33966
|
},
|
|
33889
|
-
"
|
|
33890
|
-
"
|
|
33891
|
-
"
|
|
33967
|
+
"description": "Aria label for the slider's handle displayed when range is false.",
|
|
33968
|
+
"attribute": "data-aria-label",
|
|
33969
|
+
"reflects": true
|
|
33892
33970
|
},
|
|
33893
33971
|
{
|
|
33894
33972
|
"kind": "field",
|
|
33895
|
-
"name": "
|
|
33973
|
+
"name": "startAriaLabel",
|
|
33896
33974
|
"type": {
|
|
33897
33975
|
"text": "string | undefined"
|
|
33898
33976
|
},
|
|
33899
|
-
"description": "
|
|
33900
|
-
"attribute": "
|
|
33977
|
+
"description": "Aria label for the slider's start handle displayed when range is true.",
|
|
33978
|
+
"attribute": "start-aria-label",
|
|
33979
|
+
"reflects": true
|
|
33901
33980
|
},
|
|
33902
33981
|
{
|
|
33903
33982
|
"kind": "field",
|
|
33904
|
-
"name": "
|
|
33983
|
+
"name": "endAriaLabel",
|
|
33905
33984
|
"type": {
|
|
33906
33985
|
"text": "string | undefined"
|
|
33907
33986
|
},
|
|
33908
|
-
"description": "
|
|
33909
|
-
"attribute": "
|
|
33987
|
+
"description": "Aria label for the slider's end handle displayed when range is true.",
|
|
33988
|
+
"attribute": "end-aria-label",
|
|
33989
|
+
"reflects": true
|
|
33910
33990
|
},
|
|
33911
33991
|
{
|
|
33912
33992
|
"kind": "field",
|
|
33913
|
-
"name": "
|
|
33993
|
+
"name": "dataAriaValuetext",
|
|
33914
33994
|
"type": {
|
|
33915
33995
|
"text": "string | undefined"
|
|
33916
33996
|
},
|
|
33917
|
-
"description": "
|
|
33918
|
-
"attribute": "
|
|
33997
|
+
"description": "Aria value text for the slider's value displayed when range is false.",
|
|
33998
|
+
"attribute": "data-aria-valuetext",
|
|
33999
|
+
"reflects": true
|
|
33919
34000
|
},
|
|
33920
34001
|
{
|
|
33921
34002
|
"kind": "field",
|
|
33922
|
-
"name": "
|
|
34003
|
+
"name": "startAriaValuetext",
|
|
33923
34004
|
"type": {
|
|
33924
|
-
"text": "string"
|
|
34005
|
+
"text": "string | undefined"
|
|
33925
34006
|
},
|
|
33926
|
-
"
|
|
33927
|
-
"
|
|
33928
|
-
"
|
|
34007
|
+
"description": "Aria value text for the slider's start value displayed when range is true.",
|
|
34008
|
+
"attribute": "start-aria-valuetext",
|
|
34009
|
+
"reflects": true
|
|
33929
34010
|
},
|
|
33930
34011
|
{
|
|
33931
34012
|
"kind": "field",
|
|
33932
|
-
"name": "
|
|
34013
|
+
"name": "endAriaValueText",
|
|
33933
34014
|
"type": {
|
|
33934
|
-
"text": "string"
|
|
34015
|
+
"text": "string | undefined"
|
|
33935
34016
|
},
|
|
33936
|
-
"
|
|
33937
|
-
"
|
|
33938
|
-
"
|
|
34017
|
+
"description": "Aria value text for the slider's end value displayed when range is true.",
|
|
34018
|
+
"attribute": "end-aria-valuetext",
|
|
34019
|
+
"reflects": true
|
|
34020
|
+
},
|
|
34021
|
+
{
|
|
34022
|
+
"kind": "method",
|
|
34023
|
+
"name": "preventChange",
|
|
34024
|
+
"privacy": "private",
|
|
34025
|
+
"parameters": [
|
|
34026
|
+
{
|
|
34027
|
+
"name": "e",
|
|
34028
|
+
"type": {
|
|
34029
|
+
"text": "Event"
|
|
34030
|
+
},
|
|
34031
|
+
"description": "The event to prevent."
|
|
34032
|
+
}
|
|
34033
|
+
],
|
|
34034
|
+
"description": "Prevents default behavior for mouse and keyboard events.\nThis prevents user interaction with the slider when it is soft-disabled."
|
|
34035
|
+
},
|
|
34036
|
+
{
|
|
34037
|
+
"kind": "method",
|
|
34038
|
+
"name": "setSoftDisabled",
|
|
34039
|
+
"privacy": "private",
|
|
34040
|
+
"description": "Sets the soft-disabled state for the slider.\nApplies the appropriate ARIA attributes."
|
|
34041
|
+
},
|
|
34042
|
+
{
|
|
34043
|
+
"kind": "method",
|
|
34044
|
+
"name": "initializeRangeSlider",
|
|
34045
|
+
"privacy": "private",
|
|
34046
|
+
"description": "Initializes the range slider by setting default values for the start and end handles.\nUpdates the slider's input elements to reflect the current values."
|
|
34047
|
+
},
|
|
34048
|
+
{
|
|
34049
|
+
"kind": "method",
|
|
34050
|
+
"name": "handleInput",
|
|
34051
|
+
"privacy": "private",
|
|
34052
|
+
"parameters": [
|
|
34053
|
+
{
|
|
34054
|
+
"name": "thumbIndex",
|
|
34055
|
+
"type": {
|
|
34056
|
+
"text": "0 | 1"
|
|
34057
|
+
},
|
|
34058
|
+
"description": "0 for start thumb, 1 for end thumb."
|
|
34059
|
+
}
|
|
34060
|
+
],
|
|
34061
|
+
"description": "Handles input changes for either the start or end thumb of the range slider.\nEnsures thumbs do not cross over each other."
|
|
34062
|
+
},
|
|
34063
|
+
{
|
|
34064
|
+
"kind": "method",
|
|
34065
|
+
"name": "iconTemplate",
|
|
34066
|
+
"privacy": "private",
|
|
34067
|
+
"parameters": [
|
|
34068
|
+
{
|
|
34069
|
+
"name": "icon",
|
|
34070
|
+
"type": {
|
|
34071
|
+
"text": "string | undefined"
|
|
34072
|
+
},
|
|
34073
|
+
"description": "The name of the icon to render."
|
|
34074
|
+
},
|
|
34075
|
+
{
|
|
34076
|
+
"name": "part",
|
|
34077
|
+
"type": {
|
|
34078
|
+
"text": "string"
|
|
34079
|
+
},
|
|
34080
|
+
"description": "The part attribute for the icon element."
|
|
34081
|
+
}
|
|
34082
|
+
],
|
|
34083
|
+
"description": "Renders an icon element.",
|
|
34084
|
+
"return": {
|
|
34085
|
+
"type": {
|
|
34086
|
+
"text": ""
|
|
34087
|
+
}
|
|
34088
|
+
}
|
|
34089
|
+
},
|
|
34090
|
+
{
|
|
34091
|
+
"kind": "method",
|
|
34092
|
+
"name": "tooltipTemplate",
|
|
34093
|
+
"privacy": "private",
|
|
34094
|
+
"parameters": [
|
|
34095
|
+
{
|
|
34096
|
+
"name": "label",
|
|
34097
|
+
"type": {
|
|
34098
|
+
"text": "string | undefined"
|
|
34099
|
+
},
|
|
34100
|
+
"description": "The label to display in the tooltip."
|
|
34101
|
+
},
|
|
34102
|
+
{
|
|
34103
|
+
"name": "source",
|
|
34104
|
+
"optional": true,
|
|
34105
|
+
"type": {
|
|
34106
|
+
"text": "string"
|
|
34107
|
+
},
|
|
34108
|
+
"description": "The source of the tooltip (e.g., 'start' or 'end')."
|
|
34109
|
+
}
|
|
34110
|
+
],
|
|
34111
|
+
"description": "Renders a visual representation of tooltip element and places it exactly above the slider thumb.",
|
|
34112
|
+
"return": {
|
|
34113
|
+
"type": {
|
|
34114
|
+
"text": ""
|
|
34115
|
+
}
|
|
34116
|
+
}
|
|
34117
|
+
},
|
|
34118
|
+
{
|
|
34119
|
+
"kind": "method",
|
|
34120
|
+
"name": "updateTrackStyling",
|
|
34121
|
+
"description": "Updates the styling of the slider track.\nThe progress value is calculated and updated using appropriate tokens\nIn a range slider, both thumbs are considered.\nThe track is filled between the two thumbs."
|
|
34122
|
+
},
|
|
34123
|
+
{
|
|
34124
|
+
"kind": "method",
|
|
34125
|
+
"name": "onInput",
|
|
34126
|
+
"parameters": [
|
|
34127
|
+
{
|
|
34128
|
+
"name": "e",
|
|
34129
|
+
"type": {
|
|
34130
|
+
"text": "Event"
|
|
34131
|
+
},
|
|
34132
|
+
"description": "The input event."
|
|
34133
|
+
}
|
|
34134
|
+
],
|
|
34135
|
+
"description": "Handles the input event for the single value slider."
|
|
34136
|
+
},
|
|
34137
|
+
{
|
|
34138
|
+
"kind": "method",
|
|
34139
|
+
"name": "onChange",
|
|
34140
|
+
"parameters": [
|
|
34141
|
+
{
|
|
34142
|
+
"name": "e",
|
|
34143
|
+
"type": {
|
|
34144
|
+
"text": "Event"
|
|
34145
|
+
},
|
|
34146
|
+
"description": "The change event."
|
|
34147
|
+
}
|
|
34148
|
+
],
|
|
34149
|
+
"description": "Handles the change event for the single value slider."
|
|
34150
|
+
},
|
|
34151
|
+
{
|
|
34152
|
+
"kind": "method",
|
|
34153
|
+
"name": "onChangeStart",
|
|
34154
|
+
"parameters": [
|
|
34155
|
+
{
|
|
34156
|
+
"name": "e",
|
|
34157
|
+
"type": {
|
|
34158
|
+
"text": "Event"
|
|
34159
|
+
},
|
|
34160
|
+
"description": "The change event."
|
|
34161
|
+
}
|
|
34162
|
+
],
|
|
34163
|
+
"description": "Handles the change event for the start thumb of the range slider."
|
|
34164
|
+
},
|
|
34165
|
+
{
|
|
34166
|
+
"kind": "method",
|
|
34167
|
+
"name": "onChangeEnd",
|
|
34168
|
+
"parameters": [
|
|
34169
|
+
{
|
|
34170
|
+
"name": "e",
|
|
34171
|
+
"type": {
|
|
34172
|
+
"text": "Event"
|
|
34173
|
+
},
|
|
34174
|
+
"description": "The change event."
|
|
34175
|
+
}
|
|
34176
|
+
],
|
|
34177
|
+
"description": "Handles the change event for the end thumb of the range slider."
|
|
34178
|
+
},
|
|
34179
|
+
{
|
|
34180
|
+
"kind": "method",
|
|
34181
|
+
"name": "getTickStyles",
|
|
34182
|
+
"parameters": [
|
|
34183
|
+
{
|
|
34184
|
+
"name": "tick",
|
|
34185
|
+
"type": {
|
|
34186
|
+
"text": "number"
|
|
34187
|
+
},
|
|
34188
|
+
"description": "The tick value."
|
|
34189
|
+
}
|
|
34190
|
+
],
|
|
34191
|
+
"description": "Get the styles for the tick marks.\nSince the ticks are placed above the slider, we need to hide the tick that is placed exactly where the slider thumb is.\nBased on this condition, it renders the styles appropriately.",
|
|
34192
|
+
"return": {
|
|
34193
|
+
"type": {
|
|
34194
|
+
"text": ""
|
|
34195
|
+
}
|
|
34196
|
+
}
|
|
34197
|
+
},
|
|
34198
|
+
{
|
|
34199
|
+
"kind": "method",
|
|
34200
|
+
"name": "renderTicks",
|
|
34201
|
+
"privacy": "private"
|
|
34202
|
+
}
|
|
34203
|
+
],
|
|
34204
|
+
"events": [
|
|
34205
|
+
{
|
|
34206
|
+
"name": "change",
|
|
34207
|
+
"type": {
|
|
34208
|
+
"text": "CustomEvent"
|
|
34209
|
+
},
|
|
34210
|
+
"description": "Fired when the slider value is committed",
|
|
34211
|
+
"reactName": "onChange"
|
|
34212
|
+
},
|
|
34213
|
+
{
|
|
34214
|
+
"description": "Fired when the slider value changes",
|
|
34215
|
+
"name": "input",
|
|
34216
|
+
"reactName": "onInput"
|
|
33939
34217
|
}
|
|
33940
34218
|
],
|
|
33941
34219
|
"attributes": [
|
|
@@ -33945,15 +34223,33 @@
|
|
|
33945
34223
|
"text": "boolean"
|
|
33946
34224
|
},
|
|
33947
34225
|
"default": "false",
|
|
33948
|
-
"description": "
|
|
34226
|
+
"description": "Indicates whether it is a range slider. When true, the slider displays two handles for selecting a range of values.\nWhen false, the slider displays a single handle for selecting a single value.",
|
|
33949
34227
|
"fieldName": "range"
|
|
33950
34228
|
},
|
|
34229
|
+
{
|
|
34230
|
+
"name": "min",
|
|
34231
|
+
"type": {
|
|
34232
|
+
"text": "number"
|
|
34233
|
+
},
|
|
34234
|
+
"description": "The slider minimum value.",
|
|
34235
|
+
"default": "0",
|
|
34236
|
+
"fieldName": "min"
|
|
34237
|
+
},
|
|
34238
|
+
{
|
|
34239
|
+
"name": "max",
|
|
34240
|
+
"type": {
|
|
34241
|
+
"text": "number"
|
|
34242
|
+
},
|
|
34243
|
+
"description": "The slider maximum value.",
|
|
34244
|
+
"default": "100",
|
|
34245
|
+
"fieldName": "max"
|
|
34246
|
+
},
|
|
33951
34247
|
{
|
|
33952
34248
|
"name": "disabled",
|
|
33953
34249
|
"type": {
|
|
33954
34250
|
"text": "boolean | undefined"
|
|
33955
34251
|
},
|
|
33956
|
-
"description": "Whether the slider is disabled.",
|
|
34252
|
+
"description": "Whether the slider is disabled. When true, the slider cannot be interacted with.",
|
|
33957
34253
|
"fieldName": "disabled"
|
|
33958
34254
|
},
|
|
33959
34255
|
{
|
|
@@ -33980,24 +34276,6 @@
|
|
|
33980
34276
|
"description": "Icon that represents the maximum value; ex: speaker with full volume.",
|
|
33981
34277
|
"fieldName": "trailingIcon"
|
|
33982
34278
|
},
|
|
33983
|
-
{
|
|
33984
|
-
"name": "min",
|
|
33985
|
-
"type": {
|
|
33986
|
-
"text": "number"
|
|
33987
|
-
},
|
|
33988
|
-
"default": "0",
|
|
33989
|
-
"description": "The slider minimum value.",
|
|
33990
|
-
"fieldName": "min"
|
|
33991
|
-
},
|
|
33992
|
-
{
|
|
33993
|
-
"name": "max",
|
|
33994
|
-
"type": {
|
|
33995
|
-
"text": "number"
|
|
33996
|
-
},
|
|
33997
|
-
"default": "100",
|
|
33998
|
-
"description": "The slider maximum value.",
|
|
33999
|
-
"fieldName": "max"
|
|
34000
|
-
},
|
|
34001
34279
|
{
|
|
34002
34280
|
"name": "value",
|
|
34003
34281
|
"type": {
|
|
@@ -34027,8 +34305,8 @@
|
|
|
34027
34305
|
"type": {
|
|
34028
34306
|
"text": "number"
|
|
34029
34307
|
},
|
|
34308
|
+
"description": "The step between values. If defined and greater than 1, we will show tick marks and the stepper will snap to the nearest tick mark.",
|
|
34030
34309
|
"default": "1",
|
|
34031
|
-
"description": "The step between values. This will show tick marks and the stepper will snap to the nearest tick mark.",
|
|
34032
34310
|
"fieldName": "step"
|
|
34033
34311
|
},
|
|
34034
34312
|
{
|
|
@@ -34058,107 +34336,98 @@
|
|
|
34058
34336
|
{
|
|
34059
34337
|
"name": "value-label",
|
|
34060
34338
|
"type": {
|
|
34061
|
-
"text": "string"
|
|
34339
|
+
"text": "string | undefined"
|
|
34062
34340
|
},
|
|
34063
|
-
"
|
|
34064
|
-
"description": "An optional label for the slider's value displayed when range is false; if not set, the label is the value itself.",
|
|
34341
|
+
"description": "An optional label for the slider's value displayed when range is false; if not set, the label is the 'value' itself.",
|
|
34065
34342
|
"fieldName": "valueLabel"
|
|
34066
34343
|
},
|
|
34067
34344
|
{
|
|
34068
34345
|
"name": "value-label-start",
|
|
34069
34346
|
"type": {
|
|
34070
|
-
"text": "string"
|
|
34347
|
+
"text": "string | undefined"
|
|
34071
34348
|
},
|
|
34072
|
-
"
|
|
34073
|
-
"description": "An optional label for the slider's start value displayed when range is true; if not set, the label is the valueStart itself.",
|
|
34349
|
+
"description": "An optional label for the slider's start value displayed when range is true; if not set, the label is the 'valueStart' itself.",
|
|
34074
34350
|
"fieldName": "valueLabelStart"
|
|
34075
34351
|
},
|
|
34076
34352
|
{
|
|
34077
34353
|
"name": "value-label-end",
|
|
34078
34354
|
"type": {
|
|
34079
|
-
"text": "string"
|
|
34355
|
+
"text": "string | undefined"
|
|
34080
34356
|
},
|
|
34081
|
-
"
|
|
34082
|
-
"description": "An optional label for the slider's end value displayed when range is true; if not set, the label is the valueEnd itself.",
|
|
34357
|
+
"description": "An optional label for the slider's end value displayed when range is true; if not set, the label is the 'valueEnd' itself.",
|
|
34083
34358
|
"fieldName": "valueLabelEnd"
|
|
34084
34359
|
},
|
|
34085
34360
|
{
|
|
34086
|
-
"name": "
|
|
34361
|
+
"name": "name",
|
|
34087
34362
|
"type": {
|
|
34088
|
-
"text": "string"
|
|
34363
|
+
"text": "string | undefined"
|
|
34089
34364
|
},
|
|
34090
|
-
"
|
|
34091
|
-
"
|
|
34092
|
-
"fieldName": "ariaLabelStart"
|
|
34365
|
+
"description": "Name attribute for the slider (single value).",
|
|
34366
|
+
"fieldName": "name"
|
|
34093
34367
|
},
|
|
34094
34368
|
{
|
|
34095
|
-
"name": "
|
|
34369
|
+
"name": "name-start",
|
|
34096
34370
|
"type": {
|
|
34097
|
-
"text": "string"
|
|
34371
|
+
"text": "string | undefined"
|
|
34098
34372
|
},
|
|
34099
|
-
"
|
|
34100
|
-
"
|
|
34101
|
-
"fieldName": "ariaValuetextStart"
|
|
34373
|
+
"description": "Name attribute for the slider's start handle when range is true.",
|
|
34374
|
+
"fieldName": "nameStart"
|
|
34102
34375
|
},
|
|
34103
34376
|
{
|
|
34104
|
-
"name": "
|
|
34377
|
+
"name": "name-end",
|
|
34105
34378
|
"type": {
|
|
34106
|
-
"text": "string"
|
|
34379
|
+
"text": "string | undefined"
|
|
34107
34380
|
},
|
|
34108
|
-
"
|
|
34109
|
-
"
|
|
34110
|
-
"fieldName": "ariaLabelEnd"
|
|
34381
|
+
"description": "Name attribute for the slider's end handle when range is true.",
|
|
34382
|
+
"fieldName": "nameEnd"
|
|
34111
34383
|
},
|
|
34112
34384
|
{
|
|
34113
|
-
"name": "aria-
|
|
34385
|
+
"name": "data-aria-label",
|
|
34114
34386
|
"type": {
|
|
34115
|
-
"text": "string"
|
|
34387
|
+
"text": "string | undefined"
|
|
34116
34388
|
},
|
|
34117
|
-
"
|
|
34118
|
-
"
|
|
34119
|
-
"fieldName": "ariaValuetextEnd"
|
|
34389
|
+
"description": "Aria label for the slider's handle displayed when range is false.",
|
|
34390
|
+
"fieldName": "dataAriaLabel"
|
|
34120
34391
|
},
|
|
34121
34392
|
{
|
|
34122
|
-
"name": "
|
|
34393
|
+
"name": "start-aria-label",
|
|
34123
34394
|
"type": {
|
|
34124
34395
|
"text": "string | undefined"
|
|
34125
34396
|
},
|
|
34126
|
-
"description": "
|
|
34127
|
-
"fieldName": "
|
|
34397
|
+
"description": "Aria label for the slider's start handle displayed when range is true.",
|
|
34398
|
+
"fieldName": "startAriaLabel"
|
|
34128
34399
|
},
|
|
34129
34400
|
{
|
|
34130
|
-
"name": "
|
|
34401
|
+
"name": "end-aria-label",
|
|
34131
34402
|
"type": {
|
|
34132
34403
|
"text": "string | undefined"
|
|
34133
34404
|
},
|
|
34134
|
-
"description": "
|
|
34135
|
-
"fieldName": "
|
|
34405
|
+
"description": "Aria label for the slider's end handle displayed when range is true.",
|
|
34406
|
+
"fieldName": "endAriaLabel"
|
|
34136
34407
|
},
|
|
34137
34408
|
{
|
|
34138
|
-
"name": "
|
|
34409
|
+
"name": "data-aria-valuetext",
|
|
34139
34410
|
"type": {
|
|
34140
34411
|
"text": "string | undefined"
|
|
34141
34412
|
},
|
|
34142
|
-
"description": "
|
|
34143
|
-
"fieldName": "
|
|
34413
|
+
"description": "Aria value text for the slider's value displayed when range is false.",
|
|
34414
|
+
"fieldName": "dataAriaValuetext"
|
|
34144
34415
|
},
|
|
34145
34416
|
{
|
|
34146
|
-
"name": "
|
|
34417
|
+
"name": "start-aria-valuetext",
|
|
34147
34418
|
"type": {
|
|
34148
|
-
"text": "string"
|
|
34419
|
+
"text": "string | undefined"
|
|
34149
34420
|
},
|
|
34150
|
-
"
|
|
34151
|
-
"
|
|
34152
|
-
"fieldName": "dataAriaValuetext"
|
|
34421
|
+
"description": "Aria value text for the slider's start value displayed when range is true.",
|
|
34422
|
+
"fieldName": "startAriaValuetext"
|
|
34153
34423
|
},
|
|
34154
34424
|
{
|
|
34155
|
-
"name": "
|
|
34425
|
+
"name": "end-aria-valuetext",
|
|
34156
34426
|
"type": {
|
|
34157
|
-
"text": "string"
|
|
34427
|
+
"text": "string | undefined"
|
|
34158
34428
|
},
|
|
34159
|
-
"
|
|
34160
|
-
"
|
|
34161
|
-
"fieldName": "dataAriaLabel"
|
|
34429
|
+
"description": "Aria value text for the slider's end value displayed when range is true.",
|
|
34430
|
+
"fieldName": "endAriaValueText"
|
|
34162
34431
|
}
|
|
34163
34432
|
],
|
|
34164
34433
|
"superclass": {
|
|
@@ -34166,7 +34435,7 @@
|
|
|
34166
34435
|
"module": "/src/models"
|
|
34167
34436
|
},
|
|
34168
34437
|
"tagName": "mdc-slider",
|
|
34169
|
-
"jsDoc": "/**\n * slider
|
|
34438
|
+
"jsDoc": "/**\n * Slider component is used to select a value or range of values from within a defined range.\n * It provides a visual representation of the current value(s) and allows users to adjust the value(s) by dragging the thumb(s) along the track.\n * It can be used as a single slider or a range slider. This is set by the boolean attribute `range`\n * If the step value is more than 1, tick marks are shown to represent the steps between the min and max values. The slider thumb will snap to the nearest tick mark.\n *\n * @tagname mdc-slider\n *\n * @dependency mdc-icon\n *\n * @csspart slider-tooltip - The tooltip of the slider\n * @csspart slider-track - The track of the slider\n * @csspart slider-wrapper - The wrapper around the slider input(s)\n * @csspart slider-ticks - The container for the tick marks\n * @csspart slider-tick - The individual tick marks\n * @csspart slider-input - The input element of the slider\n * @csspart slider-label - The label of the slider\n *\n * @event input - Fired when the slider value changes\n * @event change - Fired when the slider value is committed\n *\n * @cssproperty --mdc-slider-thumb-color - The color of the slider thumb\n * @cssproperty --mdc-slider-thumb-border-color - The color of the slider thumb border\n * @cssproperty --mdc-slider-thumb-size - The size of the slider thumb\n * @cssproperty --mdc-slider-input-size - The height of the slider input\n * @cssproperty --mdc-slider-tick-size - The size of the slider tick marks\n * @cssproperty --mdc-slider-track-height - The height of the slider track\n * @cssproperty --mdc-slider-tick-color - The color of the slider tick marks\n * @cssproperty --mdc-slider-progress-color - The color of the slider progress\n * @cssproperty --mdc-slider-track-color - The color of the slider track\n * @cssproperty --mdc-slider-tooltip-left - The left position of the slider tooltip\n * @cssproperty --mdc-slider-tick-left - The left position of the slider tick marks\n */",
|
|
34170
34439
|
"customElement": true
|
|
34171
34440
|
}
|
|
34172
34441
|
],
|